From c3d60609d1e3f1e9f51692b6b8dc117d05205a19 Mon Sep 17 00:00:00 2001
From: AlekseyManetov <aliaksei_manetau@epam.com>
Date: Mon, 22 Jul 2024 17:57:42 +0200
Subject: [PATCH] [PickerInput]: fixed '+N' toggler tag tooltip content with
 custom `getName` callback

---
 .../pickerInput/ArrayPickerInput.example.tsx        |  1 +
 .../pickerInput/AsyncPickerInput.example.tsx        |  1 +
 .../pickerInput/CascadeSelectionModes.example.tsx   |  1 +
 .../ConfigurePortalTargetAndPlacement.example.tsx   |  1 +
 ...ample.tsx => CustomPickerTogglerTag.example.tsx} | 13 +++++++------
 .../_examples/pickerInput/CustomUserRow.example.tsx |  1 +
 .../docs/_examples/pickerInput/EditMode.example.tsx | 11 ++++++++++-
 .../_examples/pickerInput/GetRowOptions.example.tsx |  1 +
 .../pickerInput/LazyPickerInput.example.tsx         | 10 +++++++++-
 .../_examples/pickerInput/LazyTreeInput.example.tsx |  1 +
 .../pickerInput/LazyTreeSearch.example.tsx          |  2 ++
 .../_examples/pickerInput/LinkedPickers.example.tsx |  1 +
 .../PickerInputTurnOffSelectAll.example.tsx         |  1 +
 .../PickerInputWithCustomFooter.example.tsx         |  1 +
 .../pickerInput/SearchPositions.example.tsx         |  2 ++
 .../pickerInput/TogglerConfiguration.example.tsx    |  4 +---
 .../_examples/pickerInput/ValueType.example.tsx     |  1 +
 app/src/docs/pickerInput/PickerInput.doc.tsx        |  2 +-
 app/src/docs/pickerInput/pickerInputExamples.tsx    | 12 +++++++-----
 changelog.md                                        |  5 +++++
 ...xamples-pickerInput-CustomPickerTogglerTag.json} |  0
 uui/components/pickers/PickerToggler.tsx            | 10 ++++++++--
 uui/components/pickers/PickerTogglerTag.tsx         |  6 ++++--
 23 files changed, 67 insertions(+), 21 deletions(-)
 rename app/src/docs/_examples/pickerInput/{PickerTogglerTagDemo.example.tsx => CustomPickerTogglerTag.example.tsx} (79%)
 rename public/docs/content/{examples-pickerInput-PickerTogglerTagDemo.json => examples-pickerInput-CustomPickerTogglerTag.json} (100%)

diff --git a/app/src/docs/_examples/pickerInput/ArrayPickerInput.example.tsx b/app/src/docs/_examples/pickerInput/ArrayPickerInput.example.tsx
index 1cd08c203d..d5e76646fe 100644
--- a/app/src/docs/_examples/pickerInput/ArrayPickerInput.example.tsx
+++ b/app/src/docs/_examples/pickerInput/ArrayPickerInput.example.tsx
@@ -30,6 +30,7 @@ export default function ArrayPickerInputExample() {
                     selectionMode="multi"
                     valueType="id"
                     sorting={ { field: 'level', direction: 'asc' } }
+                    maxItems={ 3 }
                 />
                 <PickerInput
                     dataSource={ dataSource }
diff --git a/app/src/docs/_examples/pickerInput/AsyncPickerInput.example.tsx b/app/src/docs/_examples/pickerInput/AsyncPickerInput.example.tsx
index 1dcd45bb05..34e58b65c8 100644
--- a/app/src/docs/_examples/pickerInput/AsyncPickerInput.example.tsx
+++ b/app/src/docs/_examples/pickerInput/AsyncPickerInput.example.tsx
@@ -24,6 +24,7 @@ export default function AsyncPickerInputExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
             />
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/pickerInput/CascadeSelectionModes.example.tsx b/app/src/docs/_examples/pickerInput/CascadeSelectionModes.example.tsx
index b8ca88b4bd..dae23680e2 100644
--- a/app/src/docs/_examples/pickerInput/CascadeSelectionModes.example.tsx
+++ b/app/src/docs/_examples/pickerInput/CascadeSelectionModes.example.tsx
@@ -46,6 +46,7 @@ export default function CascadeSelectionModesExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
                 cascadeSelection={ cascadeSelection }
             />
         </FlexCell>
diff --git a/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx b/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
index 14e1f52d78..85f5fe1eb4 100644
--- a/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
+++ b/app/src/docs/_examples/pickerInput/ConfigurePortalTargetAndPlacement.example.tsx
@@ -38,6 +38,7 @@ export default function ConfigurePortalTargetAndPlacement() {
                             selectionMode="multi"
                             valueType="id"
                             dropdownPlacement="right-start"
+                            maxItems={ 3 }
                             portalTarget={ portalTargetRef.current }
                         />
                     </FlexCell>
diff --git a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx b/app/src/docs/_examples/pickerInput/CustomPickerTogglerTag.example.tsx
similarity index 79%
rename from app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
rename to app/src/docs/_examples/pickerInput/CustomPickerTogglerTag.example.tsx
index 5cc608df50..f382a1e5ee 100644
--- a/app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx
+++ b/app/src/docs/_examples/pickerInput/CustomPickerTogglerTag.example.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
-import { FlexCell, PickerInput, PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
+import { FlexCell, PickerInput, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { PickerTogglerRenderItemParams } from '@epam/uui-components';
 import { Location } from '@epam/uui-docs';
 
-export default function PickerTogglerTagDemoExample() {
+export default function CustomPickerTogglerTagExample() {
     const svc = useUuiContext();
-    const [value, onValueChange] = useState<string[]>(['225284', '2747351', '3119841', '3119746']);
+    const [value, onValueChange] = useState<string[]>(['625144', '703448', '756135', '2950159', '4717560']);
 
     const dataSource = useLazyDataSource<Location, string, DataQueryFilter<Location>>(
         {
@@ -23,12 +24,12 @@ export default function PickerTogglerTagDemoExample() {
         [],
     );
 
-    const renderTag = (props: PickerTogglerTagProps<Location, string>) => {
+    const renderTag = (props: PickerTogglerRenderItemParams<Location, string>) => {
         const { isCollapsed, rowProps } = props;
 
         if (isCollapsed) {
             // rendering '+ N items selected' Tag, tooltip is present here by default
-            return <PickerTogglerTag { ...props } key="collapsed" />;
+            return <PickerTogglerTag { ...props } key="collapsed" getName={ (i) => i?.name } />;
         } else {
             // rendering all other Tags with Tooltip
             const continent = rowProps?.value?.tz ? rowProps?.value?.tz.split('/')[0].concat('/') : '';
@@ -36,7 +37,7 @@ export default function PickerTogglerTagDemoExample() {
             const tooltipContent = `${continent}${country}${props.caption}`;
             return (
                 <Tooltip key={ props.rowProps?.id } content={ tooltipContent }>
-                    <PickerTogglerTag { ...props } />
+                    <PickerTogglerTag { ...props } getName={ (i) => i?.name } />
                 </Tooltip>
             );
         }
diff --git a/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx b/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx
index e1218b13bf..194658d23a 100644
--- a/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx
+++ b/app/src/docs/_examples/pickerInput/CustomUserRow.example.tsx
@@ -38,6 +38,7 @@ export default function LazyPersonsMultiPickerWithCustomUserRow() {
                 entityName="person"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
             />
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/pickerInput/EditMode.example.tsx b/app/src/docs/_examples/pickerInput/EditMode.example.tsx
index 977a4dce83..eb52251f5e 100644
--- a/app/src/docs/_examples/pickerInput/EditMode.example.tsx
+++ b/app/src/docs/_examples/pickerInput/EditMode.example.tsx
@@ -15,7 +15,16 @@ export default function EditModePickerExample() {
 
     return (
         <FlexCell width={ 300 }>
-            <PickerInput dataSource={ dataSource } value={ value } onValueChange={ onValueChange } entityName="person" selectionMode="multi" valueType="id" editMode="modal" />
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="person"
+                selectionMode="multi"
+                valueType="id"
+                editMode="modal"
+                maxItems={ 3 }
+            />
         </FlexCell>
     );
 }
diff --git a/app/src/docs/_examples/pickerInput/GetRowOptions.example.tsx b/app/src/docs/_examples/pickerInput/GetRowOptions.example.tsx
index 15ff2d2227..48e136ddc6 100644
--- a/app/src/docs/_examples/pickerInput/GetRowOptions.example.tsx
+++ b/app/src/docs/_examples/pickerInput/GetRowOptions.example.tsx
@@ -53,6 +53,7 @@ export default function GetRowOptionsExample() {
                     entityName="Product"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                 />
             </FlexRow>
         </FlexCell>
diff --git a/app/src/docs/_examples/pickerInput/LazyPickerInput.example.tsx b/app/src/docs/_examples/pickerInput/LazyPickerInput.example.tsx
index 641b676e48..cc2a198e6a 100644
--- a/app/src/docs/_examples/pickerInput/LazyPickerInput.example.tsx
+++ b/app/src/docs/_examples/pickerInput/LazyPickerInput.example.tsx
@@ -15,7 +15,15 @@ export default function LazyPersonsMultiPicker() {
 
     return (
         <FlexCell width={ 300 }>
-            <PickerInput dataSource={ dataSource } value={ value } onValueChange={ onValueChange } entityName="person" selectionMode="multi" valueType="id" />
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="person"
+                selectionMode="multi"
+                valueType="id"
+                maxItems={ 3 }
+            />
         </FlexCell>
     );
 }
diff --git a/app/src/docs/_examples/pickerInput/LazyTreeInput.example.tsx b/app/src/docs/_examples/pickerInput/LazyTreeInput.example.tsx
index c0afee4330..ecabea3fab 100644
--- a/app/src/docs/_examples/pickerInput/LazyTreeInput.example.tsx
+++ b/app/src/docs/_examples/pickerInput/LazyTreeInput.example.tsx
@@ -31,6 +31,7 @@ export default function LazyTreePicker() {
                 selectionMode="multi"
                 valueType="id"
                 cascadeSelection="implicit"
+                maxItems={ 3 }
             />
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx b/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
index c46ca1564c..83c23abee0 100644
--- a/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
+++ b/app/src/docs/_examples/pickerInput/LazyTreeSearch.example.tsx
@@ -56,6 +56,7 @@ export default function LazyTreeSearch() {
                     entityName="location"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                     placeholder="Flatten search results"
                 />
                 <PickerInput
@@ -65,6 +66,7 @@ export default function LazyTreeSearch() {
                     entityName="location"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                     placeholder="Tree search results"
                 />
             </FlexRow>
diff --git a/app/src/docs/_examples/pickerInput/LinkedPickers.example.tsx b/app/src/docs/_examples/pickerInput/LinkedPickers.example.tsx
index 64d10decd1..be119e22dd 100644
--- a/app/src/docs/_examples/pickerInput/LinkedPickers.example.tsx
+++ b/app/src/docs/_examples/pickerInput/LinkedPickers.example.tsx
@@ -44,6 +44,7 @@ export default function ArrayLinkedPickers() {
                     entityName="City"
                     selectionMode="multi"
                     valueType="id"
+                    maxItems={ 3 }
                     filter={ { country: country?.id } } // Your filter object, which will be send to the server
                 />
             </LabeledInput>
diff --git a/app/src/docs/_examples/pickerInput/PickerInputTurnOffSelectAll.example.tsx b/app/src/docs/_examples/pickerInput/PickerInputTurnOffSelectAll.example.tsx
index 39ff514fa4..9f078dae44 100644
--- a/app/src/docs/_examples/pickerInput/PickerInputTurnOffSelectAll.example.tsx
+++ b/app/src/docs/_examples/pickerInput/PickerInputTurnOffSelectAll.example.tsx
@@ -26,6 +26,7 @@ export default function AsyncPickerInputExample() {
                 entityName="location"
                 selectionMode="multi"
                 valueType="id"
+                maxItems={ 3 }
             />
         </FlexCell>
     );
diff --git a/app/src/docs/_examples/pickerInput/PickerInputWithCustomFooter.example.tsx b/app/src/docs/_examples/pickerInput/PickerInputWithCustomFooter.example.tsx
index 1e35bc5d8a..c3733c1fdd 100644
--- a/app/src/docs/_examples/pickerInput/PickerInputWithCustomFooter.example.tsx
+++ b/app/src/docs/_examples/pickerInput/PickerInputWithCustomFooter.example.tsx
@@ -38,6 +38,7 @@ export default function PickerInputWithCustomFooter() {
                     selectionMode="single"
                     valueType="id"
                     sorting={ { field: 'level', direction: 'asc' } }
+                    maxItems={ 3 }
                     renderFooter={ () => {
                         return (
                             <FlexRow padding="12">
diff --git a/app/src/docs/_examples/pickerInput/SearchPositions.example.tsx b/app/src/docs/_examples/pickerInput/SearchPositions.example.tsx
index 807f0ad473..5da8364da9 100644
--- a/app/src/docs/_examples/pickerInput/SearchPositions.example.tsx
+++ b/app/src/docs/_examples/pickerInput/SearchPositions.example.tsx
@@ -25,6 +25,7 @@ export default function SearchPositionsExample() {
                     onValueChange={ onValueChange }
                     entityName="person"
                     selectionMode="multi"
+                    maxItems={ 3 }
                     searchPosition="input"
                     valueType="id"
                 />
@@ -36,6 +37,7 @@ export default function SearchPositionsExample() {
                     onValueChange={ onValueChange }
                     entityName="person"
                     selectionMode="multi"
+                    maxItems={ 3 }
                     searchPosition="none"
                     valueType="id"
                 />
diff --git a/app/src/docs/_examples/pickerInput/TogglerConfiguration.example.tsx b/app/src/docs/_examples/pickerInput/TogglerConfiguration.example.tsx
index f082a5f197..0f624d9642 100644
--- a/app/src/docs/_examples/pickerInput/TogglerConfiguration.example.tsx
+++ b/app/src/docs/_examples/pickerInput/TogglerConfiguration.example.tsx
@@ -6,9 +6,7 @@ import css from './TogglerConfiguration.module.scss';
 
 export default function PickerTogglerConfigurationExample() {
     const svc = useUuiContext();
-    const [value, onValueChange] = useState<string[]>([
-        '225284', '2747351', '3119841', '3119746',
-    ]);
+    const [value, onValueChange] = useState<string[]>(['625144', '703448', '756135', '2950159']);
 
     const loadCities = useCallback((request: LazyDataSourceApiRequest<City, string>) => {
         return svc.api.demo.cities(request);
diff --git a/app/src/docs/_examples/pickerInput/ValueType.example.tsx b/app/src/docs/_examples/pickerInput/ValueType.example.tsx
index 0f1b3050d4..6a31a3d946 100644
--- a/app/src/docs/_examples/pickerInput/ValueType.example.tsx
+++ b/app/src/docs/_examples/pickerInput/ValueType.example.tsx
@@ -23,6 +23,7 @@ export default function ValueTypeExamplePicker() {
                 selectionMode="multi"
                 emptyValue={ [] }
                 valueType="entity"
+                maxItems={ 3 }
             />
             <Text>
                 Selected users:
diff --git a/app/src/docs/pickerInput/PickerInput.doc.tsx b/app/src/docs/pickerInput/PickerInput.doc.tsx
index e9260e160e..aa7f3feb0e 100644
--- a/app/src/docs/pickerInput/PickerInput.doc.tsx
+++ b/app/src/docs/pickerInput/PickerInput.doc.tsx
@@ -85,7 +85,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="Custom toggler tag render" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
+                <DocExample title="Custom toggler tag render" path="./_examples/pickerInput/CustomPickerTogglerTag.example.tsx" />
             </>
         );
     }
diff --git a/app/src/docs/pickerInput/pickerInputExamples.tsx b/app/src/docs/pickerInput/pickerInputExamples.tsx
index 1cbdc864ed..593133eaed 100644
--- a/app/src/docs/pickerInput/pickerInputExamples.tsx
+++ b/app/src/docs/pickerInput/pickerInputExamples.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as uui from '@epam/uui';
-import { PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
+import { PickerInputProps, PickerTogglerTag, Tooltip } from '@epam/uui';
+import { PickerTogglerRenderItemParams } from '@epam/uui-components';
+import { IPropSamplesCreationContext } from '@epam/uui-docs';
 
 type TRenderTogglerParam = Parameters<uui.PickerInputProps<any, any>['renderToggler']>[0];
 
@@ -25,12 +27,12 @@ export const renderTogglerExamples = [
     },
 ];
 
-export const renderTagExamples = [
+export const renderTagExamples = (ctx: IPropSamplesCreationContext<PickerInputProps<any, any>>) => [
     {
-        value: (props: PickerTogglerTagProps<any, any>) => {
+        value: (props: PickerTogglerRenderItemParams<any, any>) => {
             if (props.isCollapsed) {
                 // rendering '+ N items selected' Tag, tooltip is present here by default
-                return <PickerTogglerTag { ...props } key="collapsed" />;
+                return <PickerTogglerTag { ...props } key="collapsed" getName={ (i) => ctx.getSelectedProps().getName(i) } />;
             } else {
                 // rendering all other Tags with Tooltip
                 const continent = props.rowProps?.value?.tz ? props.rowProps?.value?.tz.split('/')[0].concat('/') : '';
@@ -38,7 +40,7 @@ export const renderTagExamples = [
                 const tooltipContent = `${continent}${country}${props.caption}`;
                 return (
                     <Tooltip key={ props.rowProps?.id } content={ tooltipContent }>
-                        <PickerTogglerTag { ...props } />
+                        <PickerTogglerTag { ...props } getName={ (i) => ctx.getSelectedProps().getName(i) } />
                     </Tooltip>
                 );
             }
diff --git a/changelog.md b/changelog.md
index d4987f48f1..f70e1dab39 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,8 @@
+# 5.8.4 - 22.07.2024
+
+**What's Fixed**
+* [PickerInput]: fixed '+N' toggler tag tooltip content with custom `getName` callback
+
 # 5.8.3 - 19.07.2024
 
 **What's New**
diff --git a/public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json b/public/docs/content/examples-pickerInput-CustomPickerTogglerTag.json
similarity index 100%
rename from public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json
rename to public/docs/content/examples-pickerInput-CustomPickerTogglerTag.json
diff --git a/uui/components/pickers/PickerToggler.tsx b/uui/components/pickers/PickerToggler.tsx
index 54eb0e3191..c848a07673 100644
--- a/uui/components/pickers/PickerToggler.tsx
+++ b/uui/components/pickers/PickerToggler.tsx
@@ -37,7 +37,13 @@ function PickerTogglerComponent<TItem extends string, TId>(
         if (!!props.renderItem) {
             return props.renderItem(itemPropsWithSize);
         }
-        return <PickerTogglerTag { ...itemPropsWithSize } />;
+
+        return (
+            <PickerTogglerTag
+                { ...itemPropsWithSize }
+                getName={ props.getName }
+            />
+        );
     };
 
     return (
@@ -46,7 +52,7 @@ function PickerTogglerComponent<TItem extends string, TId>(
             ref={ ref }
             cx={ [applyPickerTogglerMods(props), props.cx] }
             renderItem={ renderItem }
-            getName={ (item) => (props.getName ? props.getName(item) : item) }
+            getName={ props.getName }
             cancelIcon={ systemIcons.clear }
             dropdownIcon={ systemIcons.foldingArrow }
         />
diff --git a/uui/components/pickers/PickerTogglerTag.tsx b/uui/components/pickers/PickerTogglerTag.tsx
index 67c8e72f6c..0c1cc53e44 100644
--- a/uui/components/pickers/PickerTogglerTag.tsx
+++ b/uui/components/pickers/PickerTogglerTag.tsx
@@ -15,7 +15,9 @@ interface PickerTogglerTagMods {
     size?: types.ControlSize;
 }
 
-export interface PickerTogglerTagProps<TItem, TId> extends Overwrite<PickerTogglerTagMods, PickerTogglerTagModsOverride>, PickerTogglerRenderItemParams<TItem, TId>, Omit<TagProps, 'size'> {}
+export interface PickerTogglerTagProps<TItem, TId> extends Overwrite<PickerTogglerTagMods, PickerTogglerTagModsOverride>, PickerTogglerRenderItemParams<TItem, TId>, Omit<TagProps, 'size'> {
+    getName: (item: TItem) => string;
+}
 
 export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLElement>) => {
     const tagProps = {
@@ -26,7 +28,7 @@ export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<a
     };
 
     if (props.isCollapsed) {
-        const collapsedRows = props.collapsedRows.map((row) => row.value?.name).join(', ');
+        const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
         return (
             <Tooltip
                 key="selected"