PickerTogglerTag#2008

app/src/docs/_examples/pickerInput/PickerTogglerTagDemo.example.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { DataQueryFilter, useLazyDataSource, useUuiContext } from '@epam/uui-core';
+import { FlexCell, PickerInput, PickerTogglerTag, PickerTogglerTagProps, Tooltip } from '@epam/uui';
+import { Location } from '@epam/uui-docs';
+
+export default function PickerTogglerTagDemoExample() {
+    const svc = useUuiContext();
+    const [value, onValueChange] = useState<string[]>(['225284', '2747351', '3119841', '3119746']);
+
+    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,
+        },
+        [],
+    );
+
+    const renderTag = (props: PickerTogglerTagProps<Location, string>) => {
+        if (props.isCollapsed) {
+            // rendering '+ N items selected' Tag
+            return (
+                <PickerTogglerTag { ...props } key="selected" />
+            );
+        } else {
+            // rendering all other Tags with Tooltip
+            return (
+                <Tooltip key={ props.rowProps?.id } content={ `${props.rowProps?.value?.tz}/${props.caption}` }>
+                    <PickerTogglerTag { ...props } />
+                </Tooltip>
+            );
+        }
+    };
+
+    return (
+        <FlexCell width={ 300 }>
+            <PickerInput
+                dataSource={ dataSource }
+                value={ value }
+                onValueChange={ onValueChange }
+                entityName="location"
+                selectionMode="multi"
+                valueType="id"
+                maxItems={ 2 }
+                renderTag={ (props) => renderTag(props) }
+            />
+        </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="Custom toggler tag render" path="./_examples/pickerInput/PickerTogglerTagDemo.example.tsx" />
             </>
         );
     }

changelog.md

@@ -1,5 +1,10 @@
 # 5.7.1 - 29.03.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.
+
+
 **What's Fixed**
 
 * [TabButton, VerticalTabButton]: set 18 icon size for all button sizes according to design

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

@@ -0,0 +1,24 @@
+[
+  {
+    "type": "paragraph",
+    "children": [
+      {
+        "text": "You can utilize the default UUI implementation of tags for PickerInput by using the "
+      },
+      {
+        "text": "PickerTogglerTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " component using the "
+      },
+      {
+        "text": "renderTag",
+        "uui-richTextEditor-code": true
+      },
+      {
+        "text": " property to customize it."
+      }
+    ]
+  }
+]

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`,
+        createItemValue: (length: number, entityName: string) => `+ ${length} ${entityName} selected`,
     },
     pickerInput: {
         defaultPlaceholder: (entity: string) => `Please select ${entity}`,

uui-components/src/pickers/PickerToggler.tsx

@@ -1,17 +1,27 @@
 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, IHasCaption, IDisableable } 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 PickerTogglerRenderItemParams<TItem, TId> extends IHasCaption, IDisableable {
+    /** Key for the component */
+    key: string;
+    /** DataRowProps object of the rendered item */
+    rowProps?: DataRowProps<TItem, TId>;
+    /** Indicates that tag is collapsed rest selected items, like '+N items selected' */
+    isCollapsed?: boolean;
+    /** Call to clear a value */
+    onClear?(e?: any): void;
+}
+
 export interface PickerTogglerProps<TItem = any, TId = any>
     extends IPickerToggler<TItem, TId>, ICanFocus<HTMLElement>, IHasIcon, IHasCX, ICanBeReadonly, IHasRawProps<React.HTMLAttributes<HTMLElement>> {
     cancelIcon?: Icon;
     dropdownIcon?: Icon;
     autoFocus?: boolean;
-    renderItem?(props: DataRowProps<TItem, TId>): React.ReactNode;
+    renderItem?(props: PickerTogglerRenderItemParams<TItem, TId>): React.ReactNode;
     getName?: (item: TItem) => string;
     entityName?: string;
     maxItems?: number;
@@ -37,7 +47,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 +114,37 @@ 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?.();
+        let isDisabled = props.isDisabled || props.isReadonly;
+
+        const tags = props.selection?.map((row) => {
+            isDisabled = isDisabled || row.isDisabled;
+
+            const tagProps = {
+                key: row?.id as string,
+                rowProps: row,
+                caption: props.getName(row.value),
+                isCollapsed: false,
+                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?.(tagProps);
+        });
+
+        if (props.selectedRowsCount > maxItems) {
+            const collapsedTagProps = props.renderItem?.({
+                key: 'collapsed',
+                caption: i18n.pickerToggler.createItemValue(props.selectedRowsCount - maxItems, props.entityName || ''),
+                isCollapsed: true,
+                isDisabled,
+                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);
-            });
+            tags.push(collapsedTagProps);
         }
+
+        return tags;
     };
 
     const renderInput = () => {

uui/components/pickers/PickerInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PickerBodyBaseProps, PickerInputBaseProps, PickerTogglerProps, usePickerInput } from '@epam/uui-components';
+import { PickerTogglerRenderItemParams, PickerBodyBaseProps, PickerInputBaseProps, PickerTogglerProps, usePickerInput } from '@epam/uui-components';
 import { Dropdown } from '../overlays/Dropdown';
 import { EditMode, IHasEditMode, SizeMod } from '../types';
 import { DataRowProps, DataSourceListProps, DataSourceState, DropdownBodyProps, IDropdownToggler, IEditableDebouncer, isMobile } from '@epam/uui-core';
@@ -14,7 +14,13 @@ import { PickerItem } from './PickerItem';
 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 picker toggler selection tag
+     * If omitted, default `PickerTogglerTag` component will be rendered
+     */
+    renderTag?: (props: PickerTogglerRenderItemParams<TItem, TId>) => JSX.Element;
+};
 
 function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...props }: PickerInputProps<TItem, TId>, ref: React.ForwardedRef<HTMLElement>) {
     const toggleModalOpening = () => {
@@ -106,7 +112,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 +136,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) }
             />
         );
     };
@@ -172,12 +178,13 @@ function PickerInputComponent<TItem, TId>({ highlightSearchMatches = true, ...pr
     };
 
     const rows = getRows();
+    const renderItem = props.renderTag ? props.renderTag : null;
 
     return (
         <Dropdown
             renderTarget={ (dropdownProps) => {
                 const targetProps = getTogglerProps();
-                return renderTarget({ ...dropdownProps, ...targetProps });
+                return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
             } }
             renderBody={ (bodyProps) => renderBody({ ...bodyProps, ...getPickerBodyProps(rows), ...getListProps() }, rows) }
             value={ shouldShowBody() }

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,53 +24,21 @@ 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';
+function PickerTogglerComponent<TItem extends string, TId>(props: PickerTogglerProps<TItem, TId> & PickerTogglerMods, ref: React.ForwardedRef<HTMLElement>): JSX.Element {
+    const renderItem = (itemProps: PickerTogglerTagProps<TItem, TId>) => {
+        const itemPropsWithSize = { ...itemProps, size: props.size };
+        if (!!props.renderItem) {
+            return props.renderItem(itemPropsWithSize);
         }
+        return <PickerTogglerTag { ...itemPropsWithSize } />;
     };
 
-    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 }
-        />
-    );
-
     return (
         <UuiPickerToggler
             { ...props }
             ref={ ref }
             cx={ [applyPickerTogglerMods(props), props.cx] }
-            renderItem={ !!props.renderItem ? props.renderItem : renderItem }
+            renderItem={ renderItem }
             getName={ (item) => (props.getName ? props.getName(item) : item) }
             cancelIcon={ systemIcons.clear }
             dropdownIcon={ systemIcons.foldingArrow }

uui/components/pickers/PickerTogglerTag.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as types from '../types';
+import { Tag, TagProps } from '../widgets';
+import { PickerTogglerRenderItemParams } from '@epam/uui-components';
+
+export interface PickerTogglerTagProps<TItem, TId> extends PickerTogglerRenderItemParams<TItem, TId>, TagProps {
+    /** Defines component size */
+    size?: types.ControlSize;
+}
+
+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 } />;
+});