PickerTogglerTag#2008

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>
+    );
+}

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" />
             </>
         );
     }

changelog.md

@@ -1,3 +1,10 @@
+# 5.7.1 - xx.xx.2024
+
+**What's New**
+* [PickerInput]: added property `renderTag` it's a callback for rendering custom Tags in selectionMode: `multi`. 
+* [PickerTogglerTag]: it's a new component, and we recommend it to use in the `renderTag` callback in the PickerInput. 
+
+
 # 5.7.0 - 25.03.2024
 
 **What's New**

public/docs/content/examples-pickerInput-PickerTogglerTagDemo.json

@@ -0,0 +1,24 @@
+[
+  {
+    "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. "
+      },
+      {
+        "text": "PickerTogglerTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " is a component we recommend to use for rendering Tags."
+      }
+    ]
+  }
+]

public/docs/docsGenOutput/docsGenOutput.d.ts

@@ -341,6 +341,7 @@ type Autogenerated_TDocsGenExportedTypeRef = '@epam/uui-core:AcceptDropParams' |
 '@epam/uui:PickerModalProps' |
 '@epam/uui:PickerPart' |
 '@epam/uui:PickerTogglerMods' |
+'@epam/uui:PickerTogglerTagProps' |
 '@epam/uui:PresetsPanelProps' |
 '@epam/uui:ProgressBarProps' |
 '@epam/uui:RadioGroupItem' |

uui-components/src/i18n.tsx

@@ -10,7 +10,7 @@ export const i18n = {
         showAll: 'SHOW ALL',
     },
     pickerToggler: {
-        createItemValue: (length: number, entityName: string) => `${length} ${entityName} selected`,
+        createCollapsedName: (length: number, entityName: string) => `+ ${length} ${entityName} selected`,
     },
     pickerInput: {
         defaultPlaceholder: (entity: string) => `Please select ${entity}`,

uui-components/src/pickers/PickerToggler.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { IPickerToggler, IHasIcon, IHasCX, ICanBeReadonly, Icon, uuiMod, uuiElement, uuiMarkers, DataRowProps, cx, IHasRawProps, ICanFocus, isEventTargetInsideClickable } from '@epam/uui-core';
+import { IPickerToggler, IHasIcon, IHasCX, ICanBeReadonly, Icon, uuiMod, uuiElement, uuiMarkers, cx, IHasRawProps, ICanFocus, isEventTargetInsideClickable, DataRowProps } from '@epam/uui-core';
 import { IconContainer } from '../layout';
 import css from './PickerToggler.module.scss';
 import { i18n } from '../i18n';
-import { useCallback } from 'react';
 import { getMaxItems } from './helpers';
 
 export interface PickerTogglerProps<TItem = any, TId = any>
@@ -37,7 +36,7 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
     React.useImperativeHandle(ref, () => toggleContainer.current, [toggleContainer.current]);
 
-    const handleClick = useCallback(
+    const handleClick = React.useCallback(
         (event: Event) => {
             if (props.isInteractedOutside(event) && inFocus) {
                 blur();
@@ -104,26 +103,33 @@ function PickerTogglerComponent<TItem, TId>(props: PickerTogglerProps<TItem, TId
 
     const renderItems = () => {
         const maxItems = getMaxItems(props.maxItems);
-        if (props.selectedRowsCount > maxItems) {
-            return props.renderItem?.({
-                value: i18n.pickerToggler.createItemValue(props.selectedRowsCount, props.entityName || ''),
-                onCheck: () => {
-                    props.onClear?.();
+
+        const multiItems = props.selection?.map((row) => {
+            const newMultiItems = {
+                ...row,
+                rowProps: row,
+                caption: props.getName(row.value),
+                isCollapsed: false,
+                isDisabled: row.isDisabled,
+                onClear: () => {
+                    row.onCheck?.(row);
                     // When we delete item it disappears from the DOM and focus is passed to the Body. So in this case we have to return focus on the toggleContainer by hand.
                     toggleContainer.current?.focus();
-                },
+                } };
+            return props.renderItem?.(newMultiItems);
+        });
+
+        if (props.selectedRowsCount > maxItems) {
+            const collapsedItem = props.renderItem?.({
+                caption: i18n.pickerToggler.createCollapsedName(props.selectedRowsCount - maxItems, props.entityName || ''),
+                isCollapsed: true,
+                isDisabled: false,
+                onClear: null,
             } as any);
-        } else {
-            return props.selection?.map((row) => {
-                const newRow = { ...row,
-                    onCheck: () => {
-                        row.onCheck?.(row);
-                        // When we delete item it disappears from the DOM and focus is passed to the Body. So in this case we have to return focus on the toggleContainer by hand.
-                        toggleContainer.current?.focus();
-                    } };
-                return props.renderItem?.(newRow);
-            });
+            multiItems.push(collapsedItem);
         }
+
+        return multiItems;
     };
 
     const renderInput = () => {

uui/components/pickers/PickerInput.tsx

@@ -10,11 +10,18 @@ import { DataPickerBody } from './DataPickerBody';
 import { DataPickerRow } from './DataPickerRow';
 import { DataPickerFooter } from './DataPickerFooter';
 import { PickerItem } from './PickerItem';
+import { PickerTogglerTagProps } from './PickerTogglerTag';
 
 const pickerHeight = 300;
 const pickerWidth = 360;
 
-export type PickerInputProps<TItem, TId> = SizeMod & IHasEditMode & PickerInputBaseProps<TItem, TId>;
+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;
+};
 
 function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...props }: PickerInputProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
     const toggleModalOpening = () => {
@@ -66,7 +73,12 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
     };
 
     const renderTarget = (targetProps: IDropdownToggler & PickerTogglerProps<TItem, TId>) => {
-        const renderTargetFn = props.renderToggler || ((props) => <PickerToggler { ...props } />);
+        const renderTargetFn = props.renderToggler || ((pickerTogglerProps) => (
+            <PickerToggler
+                { ...pickerTogglerProps }
+                renderItem={ props.renderTag ? (renderItemProps) => props.renderTag(renderItemProps) : null }
+            />
+        ));
 
         return (
             <IEditableDebouncer
@@ -106,7 +118,7 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
             .join(' / ');
     };
 
-    const renderItem = (item: TItem, rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
+    const renderRowItem = (item: TItem, rowProps: DataRowProps<TItem, TId>, dsState: DataSourceState) => {
         const { flattenSearchResults } = view.getConfig();
 
         return (
@@ -130,7 +142,7 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
                 key={ rowProps.rowKey }
                 size={ getRowSize() }
                 padding={ props.editMode === 'modal' ? '24' : '12' }
-                renderItem={ (item, itemProps) => renderItem(item, itemProps, dsState) }
+                renderItem={ (item, itemProps) => renderRowItem(item, itemProps, dsState) }
             />
         );
     };

uui/components/pickers/PickerToggler.tsx

@@ -1,21 +1,18 @@
 import * as React from 'react';
-import { DataRowProps } from '@epam/uui-core';
-import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
-import { TextPlaceholder } from '../typography';
-import { systemIcons } from '../../icons/icons';
-import { Tag } from '../widgets';
 import * as types from '../types';
-import { getMaxItems } from './helpers';
+import { PickerToggler as UuiPickerToggler, PickerTogglerProps } from '@epam/uui-components';
+import { PickerTogglerTag, PickerTogglerTagProps } from './PickerTogglerTag';
 import css from './PickerToggler.module.scss';
+import { systemIcons } from '../../icons/icons';
 
 const defaultSize = '36';
 const defaultMode = types.EditMode.FORM;
 
 export interface PickerTogglerMods extends types.IHasEditMode {
     /**
-    * Defines component size
-    * @default 36
-    */
+     * Defines component size
+     * @default 36
+     */
     size?: '24' | '30' | '36' | '42' | '48';
 }
 
@@ -27,44 +24,14 @@ function applyPickerTogglerMods(mods: PickerTogglerMods) {
     ];
 }
 
-function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>) {
-    const getPickerTogglerButtonSize = (propSize: types.ControlSize) => {
-        switch (propSize) {
-            case '48':
-                return '42';
-            case '42':
-                return '36';
-            case '36':
-                return '30';
-            case '30':
-                return '24';
-            case '24':
-                return '18';
-        }
-    };
-
-    const getCaption = (row: DataRowProps<TItem, TId>) => {
-        const maxItems = getMaxItems(props.maxItems);
-
-        if (row.isLoading) {
-            return <TextPlaceholder />;
-        } else if (!props.getName || props.selectedRowsCount > maxItems) {
-            return row.value;
-        } else {
-            return props.getName(row.value);
-        }
-    };
-
-    const renderItem = (row: DataRowProps<TItem, TId>) => (
-        <Tag
-            key={ row.rowKey }
-            caption={ getCaption(row) }
-            tabIndex={ -1 }
-            size={ props.size ? getPickerTogglerButtonSize(props.size) : '30' }
-            onClear={ () => {
-                row.onCheck?.(row);
-            } }
-            isDisabled={ props.isDisabled || props.isReadonly || row?.checkbox?.isDisabled }
+function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
+    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => (
+        <PickerTogglerTag
+            { ...itemProps }
+            rowProps={ itemProps.rowProps }
+            key={ itemProps.isCollapsed ? 'collapsed' : itemProps.rowProps?.id as string }
+            size={ props.size }
+            isDisabled={ props.isDisabled || props.isReadonly || itemProps.isDisabled }
         />
     );
 

uui/components/pickers/PickerTogglerTag.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as types from '../types';
+import { Tag, TagProps } from '../widgets';
+import { DataRowProps } from '@epam/uui-core';
+
+export interface PickerTogglerTagProps<TItem, TId> extends TagProps {
+    /** Defines component size */
+    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 row props (see more: uui-components/src/pickers/PickerToggler.tsx PickerTogglerProps<TItem = any, TId = any>) */
+    rowProps?: DataRowProps<TItem, TId>;
+}
+
+const getPickerTogglerButtonSize = (propSize?: types.ControlSize):TagProps['size'] => {
+    switch (propSize) {
+        case '48':
+            return '42';
+        case '42':
+            return '36';
+        case '36':
+            return '30';
+        case '30':
+            return '24';
+        case '24':
+            return '18';
+        default:
+            return '30';
+    }
+};
+
+export const PickerTogglerTag = React.forwardRef((props: PickerTogglerTagProps<any, any>, ref: React.Ref<HTMLElement>) => {
+    const tagProps = {
+        ...props,
+        tabIndex: -1,
+        size: getPickerTogglerButtonSize(props.size),
+    };
+
+    return <Tag ref={ ref } { ...tagProps } />;
+});

uui/components/pickers/__tests__/PickerInput.test.tsx

@@ -336,7 +336,6 @@ describe('PickerInput', () => {
                 selectionMode: 'multi',
                 getName: ({ name }) => name,
             });
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['', '']);
             expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
             await waitFor(() => expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Elementary+', 'Pre-Intermediate']));
         });
@@ -443,10 +442,10 @@ describe('PickerInput', () => {
             expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 2', 'Child 2.2', 'Parent 3']);
         });
 
-        it('should wrap up if number of elements is greater than maxItems', async () => {
+        it('should wrap up extra items if number of elements is greater than maxItems', async () => {
             const { mocks, dom } = await setupPickerInputForTest({
                 value: undefined,
-                maxItems: 3,
+                maxItems: 2,
                 entityPluralName: 'languages',
                 selectionMode: 'multi',
             });
@@ -463,7 +462,7 @@ describe('PickerInput', () => {
             await PickerInputTestObject.clickOptionByText('A2');
             await PickerInputTestObject.clickOptionByText('A2+');
             expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3, 4, 5]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['4 languages selected']);
+            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+', '+ 2 languages selected']);
         });
 
         it('should disable clear', async () => {