From e74fe08056011d0cb1588a4a8f5b0adc8080e80e Mon Sep 17 00:00:00 2001
From: Ihor Korenets <Ihor_korenets@epam.com>
Date: Mon, 25 Mar 2024 18:25:45 +0200
Subject: [PATCH] [PickerTogglerTag]: removed tooltipContext and made a doc
 example

---
 .../PickerTogglerTagDemo.example.tsx          | 63 +++++++++++++
 app/src/docs/pickerInput/PickerInput.doc.tsx  |  1 +
 app/src/sandbox/SandboxPage.tsx               |  2 -
 .../pickerTogglerTag/PickerTogglerTagDemo.tsx | 92 -------------------
 ...ples-pickerInput-PickerTogglerTagDemo.json | 17 ++++
 public/docs/docsGenOutput/docsGenOutput.json  | 28 ++----
 uui/components/pickers/PickerInput.tsx        |  4 +
 uui/components/pickers/PickerTogglerTag.tsx   | 15 +--
 8 files changed, 98 insertions(+), 124 deletions(-)
 create mode 100644 app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
 delete mode 100644 app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
 create mode 100644 public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json

diff --git a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
new file mode 100644
index 0000000000..4621222e4a
--- /dev/null
+++ b/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+
+const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
+    {
+        id: 'explicit',
+        caption: 'Explicit cascade selection',
+    }, {
+        id: 'implicit',
+        caption: 'Implicit cascade selection',
+    },
+];
+
+export default function PickerTogglerTagDemoExample() {
+    const svc = useUuiContext();
+    const [value, onValueChange] = useState<string[]>();
+    const [cascadeSelection] = useState(cascadeSelectionModes[0].id);
+
+    const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
+        {
+            api: (request, ctx) => {
+                const { search } = request;
+                // and since parentId is meaningful value, it is required to exclude it from the filter.
+                const filter = search ? {} : { parentId: ctx?.parentId };
+                return svc.api.demo.locations({ ...request, search, filter });
+            },
+            getId: (i) => i.id,
+            getParentId: (i) => i.parentId,
+            getChildCount: (l) => l.childCount,
+        },
+        [],
+    );
+
+    return (
+        <FlexCell width={ 300 }>
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="location"
+                selectionMode="multi"
+                valueType="id"
+                cascadeSelection={ cascadeSelection }
+                maxItems={ 2 }
+                renderTag={ (props) => {
+                    if (props.isCollapsed) {
+                        return (
+                            <PickerTogglerTag { ...props } key="selected" />
+                        );
+                    } else {
+                        return (
+                            <Tooltip key={ props.rowProps?.id } content={ `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }>
+                                <PickerTogglerTag { ...props } />
+                            </Tooltip>
+                        );
+                    }
+                } }
+            />
+        </FlexCell>
+    );
+}
diff --git a/app/src/docs/pickerInput/PickerInput.doc.tsx b/app/src/docs/pickerInput/PickerInput.doc.tsx
index 822b709d43..31e7bff4cf 100644
--- a/app/src/docs/pickerInput/PickerInput.doc.tsx
+++ b/app/src/docs/pickerInput/PickerInput.doc.tsx
@@ -80,6 +80,7 @@ export class PickerInputDoc extends BaseDocsBlock {
                 <DocExample title="Picker with changed array of items" path="./_examples/pickerInput/PickerWithChangingItemsArray.example.tsx" />
                 <DocExample title="Linked pickers" path="./_examples/pickerInput/LinkedPickers.example.tsx" />
                 <DocExample title="Change portal target and dropdown placement" path="./_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx" />
+                <DocExample title="PickerTogglerTag and renderTag demo" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
             </>
         );
     }
diff --git a/app/src/sandbox/SandboxPage.tsx b/app/src/sandbox/SandboxPage.tsx
index b9f530f2cb..458dd8877d 100644
--- a/app/src/sandbox/SandboxPage.tsx
+++ b/app/src/sandbox/SandboxPage.tsx
@@ -23,7 +23,6 @@ import { ProjectTasksDemo } from './tasks/ProjectTasksDemo';
 import { RichTextEditorDemo } from './RTE/rteDemo';
 import { TableColumnConfigModalTest } from './tableColConfigModal/TableColumnConfigModalTest';
 import { PalettePage } from './tokens/palette/palettePage';
-import { PickerTogglerTagDemo } from './pickerTogglerTag/PickerTogglerTagDemo';
 
 export function SandboxPage() {
     const items = useMemo(
@@ -47,7 +46,6 @@ export function SandboxPage() {
             { id: 'tagInput', name: 'Tag Input', component: TagInputDemo },
             { id: 'tokens', name: 'Tokens' },
             { parentId: 'tokens', id: 'tokensPalette', name: 'Palette', component: PalettePage },
-            { id: 'pickerTogglerTag', name: 'PickerTogglerTag', component: PickerTogglerTagDemo },
         ],
         [],
     );
diff --git a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx b/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
deleted file mode 100644
index 3278754710..0000000000
--- a/app/src/sandbox/pickerTogglerTag/PickerTogglerTagDemo.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react';
-import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
-import { FlexCell, FlexRow, LabeledInput, NumericInput, PickerInput, PickerTogglerTag } from '@epam/uui';
-import { Location } from '@epam/uui-docs';
-import { ReactComponent as myIcon } from '@epam/assets/icons/action-account-fill.svg';
-
-const cascadeSelectionModes: Array<{ id: 'explicit' | 'implicit'; caption: string }> = [
-    {
-        id: 'explicit',
-        caption: 'Explicit cascade selection',
-    }, {
-        id: 'implicit',
-        caption: 'Implicit cascade selection',
-    },
-];
-
-export function PickerTogglerTagDemo() {
-    const svc = useUuiContext();
-    const [maxItems, setMaxItems] = useState(null);
-    const [value, onValueChange] = useState<string[]>();
-    const [cascadeSelection] = useState(cascadeSelectionModes[0].id);
-
-    const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
-        {
-            api: (request, ctx) => {
-                const { search } = request;
-                // and since parentId is meaningful value, it is required to exclude it from the filter.
-                const filter = search ? {} : { parentId: ctx?.parentId };
-                return svc.api.demo.locations({ ...request, search, filter });
-            },
-            getId: (i) => i.id,
-            getParentId: (i) => i.parentId,
-            getChildCount: (l) => l.childCount,
-        },
-        [],
-    );
-
-    return (
-        <FlexCell width={ 370 }>
-            <FlexRow margin="12">
-                <LabeledInput label="Set maxItem">
-                    <NumericInput value={ maxItems } onValueChange={ setMaxItems } />
-                </LabeledInput>
-            </FlexRow>
-            <FlexRow margin="12">
-                <PickerInput
-                    dataSource={ dataSource }
-                    value={ value }
-                    onValueChange={ onValueChange }
-                    entityName="location"
-                    selectionMode="multi"
-                    valueType="id"
-                    cascadeSelection={ cascadeSelection }
-                    maxItems={ maxItems }
-                    renderTag={ (props) => {
-                        return (
-                            <PickerTogglerTag
-                                { ...props }
-                                key={ props.isCollapsed ? 'collapsed' : props.rowProps?.id as string }
-                                tooltipContent={ !props.isCollapsed && `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }
-                                icon={ !props.isCollapsed && myIcon }
-                            />
-                        );
-
-                        // if (props.isCollapsed) {
-                        //     return (
-                        //         <Button
-                        //             { ...props }
-                        //             size="30"
-                        //             key="collapsed"
-                        //             color="secondary"
-                        //         />
-                        //     );
-                        // } else {
-                        //     return (
-                        //         <Tooltip content={ `${props.rowProps?.path.map((i) => i.value.name).join('/')}/${props.caption}` }>
-                        //             <Button
-                        //                 { ...props }
-                        //                 size="30"
-                        //                 key={ props.rowProps?.id as string }
-                        //                 color="accent"
-                        //                 icon={ myIcon }
-                        //             />
-                        //         </Tooltip>
-                        //     );
-                        // }
-                    } }
-                />
-            </FlexRow>
-        </FlexCell>
-    );
-}
diff --git a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
new file mode 100644
index 0000000000..22b40735a6
--- /dev/null
+++ b/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
@@ -0,0 +1,17 @@
+[
+  {
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "In this example we use "
+      },
+      {
+        "text": "renderTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " callback to make custom Tags with Tooltip if they are not a Tag for collapsed values."
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/public/docs/docsGenOutput/docsGenOutput.json b/public/docs/docsGenOutput/docsGenOutput.json
index fdb1880388..1789d3db71 100644
--- a/public/docs/docsGenOutput/docsGenOutput.json
+++ b/public/docs/docsGenOutput/docsGenOutput.json
@@ -72060,6 +72060,10 @@
      "raw": "SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType?: 'id' | undefined; } & IEditable<TId> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'single'; valueType: 'entity'; } & IEditable<TItem> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType?: 'id' | undefined; emptyValue?: [] | null | undefined; } & IEditable<TId[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; } | SizeMod & IHasEditMode & PickerBaseOptions<TItem, TId> & { selectionMode: 'multi'; valueType: 'entity'; emptyValue?: [] | null | undefined; } & IEditable<TItem[]> & IAnalyticableOnChange<any> & ICanFocus<HTMLElement> & IHasPlaceholder & IDisableable & ICanBeReadonly & IHasIcon & { editMode?: PickerInputEditMode | undefined; maxItems?: number | undefined; minBodyWidth?: number | undefined; isSingleLine?: boolean | undefined; dropdownPlacement?: Placement | undefined; renderToggler?: ((props: PickerTogglerProps<TItem, TId>) => React.ReactNode) | undefined; searchPosition?: PickerInputSearchPosition | undefined; disableClear?: boolean | undefined; minCharsToSearch?: number | undefined; dropdownHeight?: number | undefined; autoFocus?: boolean | undefined; rawProps?: { input?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; body?: (React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>) | undefined; } | undefined; renderFooter?: ((props: PickerInputFooterProps<TItem, TId>) => React.ReactNode) | undefined; fixedBodyPosition?: boolean | undefined; portalTarget?: HTMLElement | undefined; inputCx?: ClassValue; bodyCx?: ClassValue; highlightSearchMatches?: boolean | undefined; searchDebounceDelay?: number | undefined; id?: string | undefined; } & { renderTag?: ((props: PickerTogglerTagProps<TItem, TId>) => JSX.Element) | undefined; }",
      "print": [
       "type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {",
+      "    /**",
+      "     * Render Callback for the Tags.",
+      "     * If omitted, they will be rendered by default.",
+      "     */",
       "    renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;",
       "};"
      ]
@@ -72997,6 +73001,12 @@
      {
       "uid": "renderTag",
       "name": "renderTag",
+      "comment": {
+       "raw": [
+        "Render Callback for the Tags.",
+        " If omitted, they will be rendered by default."
+       ]
+      },
       "typeValue": {
        "raw": "(props: PickerTogglerTagProps<TItem, TId>) => JSX.Element"
       },
@@ -76447,8 +76457,6 @@
       "    size?: types.ControlSize;",
       "    /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */",
       "    isCollapsed?: boolean;",
-      "    /** Defines content for tooltip */",
-      "    tooltipContent?: string;",
       "    /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */",
       "    rowProps?: DataRowProps<TItem, TId>;",
       "};"
@@ -76901,22 +76909,6 @@
       },
       "required": false
      },
-     {
-      "uid": "tooltipContent",
-      "name": "tooltipContent",
-      "comment": {
-       "raw": [
-        "Defines content for tooltip"
-       ]
-      },
-      "typeValue": {
-       "raw": "string"
-      },
-      "editor": {
-       "type": "string"
-      },
-      "required": false
-     },
      {
       "uid": "rowProps",
       "name": "rowProps",
diff --git a/uui/components/pickers/PickerInput.tsx b/uui/components/pickers/PickerInput.tsx
index a215705a82..06ff93ee29 100644
--- a/uui/components/pickers/PickerInput.tsx
+++ b/uui/components/pickers/PickerInput.tsx
@@ -16,6 +16,10 @@ const pickerHeight = 300;
 const pickerWidth = 360;
 
 export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId> & {
+    /**
+     * Render Callback for making custom Tags.
+     * If omitted, they will be rendered by default component PickerTogglerTag.
+     */
     renderTag?: (props: PickerTogglerTagProps<TItem, TId>) => JSX.Element;
 };
 
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 60df9f4e56..80bd2d6a55 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as types from '../types';
 import { Tag, TagProps } from '../widgets';
-import { Tooltip } from '../overlays';
 import { DataRowProps } from '@epam/uui-core';
 
 export type PickerTogglerTagProps<TItem, TId> = TagProps & {
@@ -9,8 +8,6 @@ export type PickerTogglerTagProps<TItem, TId> = TagProps & {
     size?: types.ControlSize;
     /** If this is true, then the PickerTogglerTag will be an additional tag with the number of collapsed elements in the caption. */
     isCollapsed?: boolean;
-    /** Defines content for tooltip */
-    tooltipContent?: string;
     /** Defines row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */
     rowProps?: DataRowProps<TItem, TId>;
 };
@@ -32,18 +29,12 @@ const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size
     }
 };
 
-export function PickerTogglerTag(props: PickerTogglerTagProps<any, any>): JSX.Element {
+export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLSpanElement>): JSX.Element => {
     const tagProps = {
         ...props,
         tabIndex: -1,
         size: getPickerTogglerButtonSize(props.size),
     };
 
-    return (props.tooltipContent)
-        ? (
-            <Tooltip content={ props.tooltipContent } openDelay={ 400 }>
-                <Tag { ...tagProps } />
-            </Tooltip>
-        )
-        : <Tag { ...tagProps } />;
-}
+    return <Tag ref={ ref } { ...tagProps } />;
+});