@snack-uikit/chips 0.12.9 → 0.13.1

package/src/components/ChipChoice/components/ChipChoiceMultiple.tsx

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Droplist, ItemId, SelectionSingleValueType } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DROPLIST_SIZE_MAP } from '../constants';
+import { useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceMultipleProps, ContentRenderProps } from '../types';
+import { FlattenOption, kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+
+export type ChipChoiceMultipleValueFormatterProps<T extends ContentRenderProps = ContentRenderProps> = {
+  value: FlattenOption<T>[];
+  total: number;
+  allLabel: string;
+};
+
+const defaultMultiValueLabelFormatter = ({ value, total, allLabel }: ChipChoiceMultipleValueFormatterProps): ItemId => {
+  const len = value.length;
+
+  if ([0, total].includes(len) && total !== len) {
+    return allLabel;
+  }
+
+  if (len === 1) {
+    return value[0].label;
+  }
+
+  return `${len.toString()}/${total}`;
+};
+
+export function ChipChoiceMultiple<T extends ContentRenderProps = ContentRenderProps>({
+  value: valueProp,
+  defaultValue,
+  options,
+  onChange: onChangeProp,
+  valueRender,
+  size = SIZE.S,
+  label,
+  searchable,
+  contentRender,
+  dropDownClassName,
+  showClearButton = true,
+  ...rest
+}: ChipChoiceMultipleProps<T>) {
+  const [value, setValue] = useValueControl<SelectionSingleValueType[]>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
+
+  const flattenOptions = useMemo(() => {
+    const { flattenOptions } = kindFlattenOptions<T>({ options });
+
+    return flattenOptions;
+  }, [options]);
+
+  const [searchValue = '', setSearchValue] = useState<string>('');
+
+  const { t } = useLocale('Chips');
+
+  const [open, setOpen] = useState<boolean>(false);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
+
+  const selectedOptions = useMemo(
+    () => (value && value.length ? value.map(id => flattenOptions[id]).filter(Boolean) : ([] as FlattenOption<T>[])),
+    [flattenOptions, value],
+  );
+
+  const valueToRender = valueRender
+    ? valueRender(selectedOptions)
+    : defaultMultiValueLabelFormatter({
+        value: selectedOptions ?? [],
+        total: Object.keys(flattenOptions).length,
+        allLabel: t('allLabel'),
+      });
+
+  const fuzzySearch = useFuzzySearch(options, flatMapOptions);
+
+  const result = useMemo(
+    () => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)),
+    [fuzzySearch, options, searchValue, searchable, valueToRender],
+  );
+  const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
+
+  const clearValue = () => setValue([]);
+  const chipRef = useRef<HTMLDivElement>(null);
+
+  const handleSelectionChange = useCallback(
+    (newValue?: SelectionSingleValueType) => {
+      if (newValue !== undefined) {
+        setValue(newValue);
+        setSearchValue('');
+      }
+    },
+    [setValue],
+  );
+
+  useEffect(() => {
+    if (searchValue && !open) {
+      setSearchValue('');
+    }
+  }, [searchable, open, searchValue]);
+
+  return (
+    <Droplist
+      {...rest}
+      items={items}
+      selection={{
+        value,
+        onChange: handleSelectionChange,
+        mode: 'multiple',
+      }}
+      trigger='clickAndFocusVisible'
+      placement='bottom-start'
+      widthStrategy='gte'
+      size={DROPLIST_SIZE_MAP[size]}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+      open={open}
+      triggerElemRef={chipRef}
+      onOpenChange={open => {
+        if (!open) {
+          setSearchValue('');
+        }
+        setOpen(open);
+      }}
+      scroll
+      className={dropDownClassName}
+      search={
+        searchable
+          ? {
+              value: searchValue,
+              onChange: setSearchValue,
+            }
+          : undefined
+      }
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={chipRef}
+        onClearButtonClick={clearValue}
+        value={value}
+        showClearButton={showClearButton && !(Array.isArray(value) && [0].includes(value.length))}
+        valueToRender={valueToRender}
+        label={label}
+        loading={rest.loading}
+        size={size}
+        onKeyDown={handleOnKeyDown()}
+      />
+    </Droplist>
+  );
+}

package/src/components/ChipChoice/components/ChipChoiceSingle.tsx

@@ -1,82 +1,143 @@
-import { useMemo } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Droplist } from '@snack-uikit/droplist';
+import { Droplist, ItemId, SelectionSingleValueType } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
+import { useValueControl } from '@snack-uikit/utils';
 
-import { SIZE } from '../../../constants';
-import { ChipChoiceCommonProps, FilterOption } from '../types';
-import { defaultSingleValueFormatter, normalizeValueForSingleChoice } from '../utils';
-import { ChipChoiceCustom } from './ChipChoiceCustom';
-
-export type ChipChoiceSingleProps = ChipChoiceCommonProps & {
-  /** Массив опций */
-  options: FilterOption[];
-  /** Значение компонента */
-  value?: string;
-  /** Значение компонента по умолчанию */
-  defaultValue?: string;
-  /** Колбек смены значения */
-  onChange?(value: string): void;
-  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
-  valueFormatter?(option?: FilterOption): string;
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DROPLIST_SIZE_MAP } from '../constants';
+import { useFuzzySearch, useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceSingleProps, ContentRenderProps } from '../types';
+import { FlattenOption, kindFlattenOptions } from '../utils';
+import { transformOptionsToItems } from '../utils/options';
+import { ChipChoiceBase } from './ChipChoiceBase';
+
+export type ChipChoiceSingleValueFormatterProps = {
+  label?: ItemId;
+  allLabel?: string;
 };
 
-export function ChipChoiceSingle({
-  value,
+export function defaultSingleValueFormatter({ label, allLabel }: ChipChoiceSingleValueFormatterProps) {
+  return label ?? allLabel;
+}
+
+export function ChipChoiceSingle<T extends ContentRenderProps = ContentRenderProps>({
+  value: valueProp,
   defaultValue,
   options,
-  onChange,
-  valueFormatter,
+  onChange: onChangeProp,
+  valueRender,
   size = SIZE.S,
-  'data-test-id': dataTestId,
+  label,
+  searchable,
+  contentRender,
+  dropDownClassName,
   ...rest
-}: ChipChoiceSingleProps) {
-  const [selectedValue, setSelectedValue] = useUncontrolledProp<string>(
-    normalizeValueForSingleChoice(options, value),
-    normalizeValueForSingleChoice(options, defaultValue),
-    onChange,
-  );
+}: ChipChoiceSingleProps<T>) {
+  const [value, setValue] = useValueControl<SelectionSingleValueType>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
+
+  const flattenOptions = useMemo(() => {
+    const { flattenOptions } = kindFlattenOptions<T>({ options });
+
+    return flattenOptions;
+  }, [options]);
 
   const { t } = useLocale('Chips');
 
-  const selectedOption = useMemo(() => options.find(({ value }) => value === selectedValue), [options, selectedValue]);
+  const [open, setOpen] = useState<boolean>(false);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const flatMapOptions = useMemo(() => Object.values(flattenOptions), [flattenOptions]);
+
+  const selectedOption = useMemo(
+    () => (value ? flattenOptions[value] : ({} as FlattenOption<T>)),
+    [flattenOptions, value],
+  );
+
+  const [searchValue, setSearchValue] = useState<string>('');
 
-  const valueToRender = valueFormatter
-    ? valueFormatter(selectedOption)
-    : defaultSingleValueFormatter({ value: selectedOption, allLabel: t('allLabel') });
+  const valueToRender = valueRender
+    ? valueRender(selectedOption)
+    : defaultSingleValueFormatter({ label: selectedOption?.label, allLabel: t('allLabel') });
 
-  const clearValue = () => setSelectedValue(undefined);
+  const fuzzySearch = useFuzzySearch(options, flatMapOptions);
+
+  const result = useMemo(
+    () => (!searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue)),
+    [fuzzySearch, options, searchValue, searchable, valueToRender],
+  );
+  const items = useMemo(() => transformOptionsToItems<T>(result, contentRender), [contentRender, result]);
+
+  const clearValue = () => setValue(undefined);
+  const chipRef = useRef<HTMLDivElement>(null);
+
+  const handleSelectionChange = useCallback(
+    (newValue?: SelectionSingleValueType) => {
+      if (newValue !== undefined) {
+        chipRef.current?.focus();
+
+        setOpen(false);
+        setValue(newValue);
+        setSearchValue('');
+      }
+    },
+    [setSearchValue, setValue],
+  );
+
+  useEffect(() => {
+    if (searchValue && !open) {
+      setSearchValue('');
+    }
+  }, [searchable, open, searchValue]);
 
   return (
-    <ChipChoiceCustom
-      onClearButtonClick={clearValue}
-      value={selectedValue}
-      valueToRender={valueToRender}
-      data-test-id={dataTestId}
-      size={size}
+    <Droplist
       {...rest}
-    >
-      {({ handleDroplistItemKeyDown, closeDroplist }) =>
-        options.map(({ label, value, ...rest }) => {
-          const onChangeHandler = () => {
-            setSelectedValue(value);
-            closeDroplist();
-          };
-
-          return (
-            <Droplist.ItemSingle
-              {...rest}
-              key={value}
-              option={label}
-              checked={selectedValue === value}
-              onChange={onChangeHandler}
-              onKeyDown={handleDroplistItemKeyDown}
-              data-test-id={dataTestId && `${dataTestId}__option`}
-            />
-          );
-        })
+      items={items}
+      selection={{
+        value,
+        onChange: handleSelectionChange,
+        mode: 'single',
+      }}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+      size={DROPLIST_SIZE_MAP[size]}
+      trigger='click'
+      placement='bottom-start'
+      className={dropDownClassName}
+      widthStrategy='gte'
+      open={open}
+      triggerElemRef={chipRef}
+      onOpenChange={open => {
+        if (!open) {
+          setSearchValue('');
+        }
+        setOpen(open);
+      }}
+      scroll
+      search={
+        searchable
+          ? {
+              value: searchValue,
+              onChange: setSearchValue,
+            }
+          : undefined
       }
-    </ChipChoiceCustom>
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={chipRef}
+        onClearButtonClick={clearValue}
+        value={value}
+        valueToRender={valueToRender}
+        label={label}
+        loading={rest.loading}
+        size={size}
+        onKeyDown={handleOnKeyDown()}
+      />
+    </Droplist>
   );
 }

package/src/components/ChipChoice/components/index.ts

@@ -1,5 +1,5 @@
 export * from './ChipChoiceCustom';
 export * from './ChipChoiceSingle';
-export * from './ChipChoiceMulti';
+export * from './ChipChoiceMultiple';
 export * from './ChipChoiceDate';
 export * from './ChipChoiceDateRange';

package/src/components/ChipChoice/constants.ts

@@ -1,5 +1,5 @@
 import { CalendarProps } from '@snack-uikit/calendar';
-import { DroplistProps } from '@snack-uikit/droplist';
+import { DroplistProps } from '@snack-uikit/list';
 
 import { BUTTON_SIZE, SIZE } from '../../constants';
 import { Size } from '../../types';
@@ -26,8 +26,9 @@ export const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']> = {
 };
 
 export const CHIP_CHOICE_TYPE = {
-  Multi: 'multi',
+  Multiple: 'multiple',
   Date: 'date',
   DateRange: 'date-range',
   Single: 'single',
+  Custom: 'custom',
 } as const;

package/src/components/ChipChoice/hooks.ts

@@ -0,0 +1,61 @@
+import FuzzySearch from 'fuzzy-search';
+import { KeyboardEvent, KeyboardEventHandler, useCallback } from 'react';
+
+import { AccordionOption, BaseOption, ContentRenderProps, FilterOption, NestListOption } from './types';
+
+type UseHandleOnKeyDownProps = {
+  setOpen(open: boolean): void;
+};
+
+export function useHandleOnKeyDown({ setOpen }: UseHandleOnKeyDownProps) {
+  return useCallback(
+    (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.code === 'Space') {
+        e.stopPropagation();
+      } else {
+        onKeyDown?.(e);
+      }
+
+      if (['ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+        setOpen(true);
+      }
+
+      if (['ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+        setOpen(false);
+      }
+
+      if (e.key === 'Tab') {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+}
+
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useFuzzySearch<T extends ContentRenderProps = ContentRenderProps>(
+  options: FilterOption<T>[],
+  flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[],
+  minSearchInputLength?: number,
+) {
+  return useCallback(
+    (search: string) => {
+      const searcher = new FuzzySearch(
+        flatMapOptions,
+        ['label', 'contentRenderProps.description', 'contentRenderProps.caption'],
+        {},
+      );
+
+      return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+        ? searcher.search(search)
+        : options;
+    },
+    [flatMapOptions, minSearchInputLength, options],
+  );
+}

package/src/components/ChipChoice/index.ts

@@ -5,26 +5,20 @@ import {
   ChipChoiceDateProps,
   ChipChoiceDateRange,
   ChipChoiceDateRangeProps,
-  ChipChoiceMulti,
-  ChipChoiceMultiProps,
+  ChipChoiceMultiple,
   ChipChoiceSingle,
-  ChipChoiceSingleProps,
+  CustomContentRenderProps,
 } from './components';
 
-export type { FilterOption } from './types';
-
-export type {
-  ChipChoiceCustomProps,
-  ChipChoiceMultiProps,
-  ChipChoiceSingleProps,
-  ChipChoiceDateProps,
-  ChipChoiceDateRangeProps,
-};
+export type { FilterOption, ChipChoiceMultipleProps, ChipChoiceSingleProps, ContentRenderProps } from './types';
+export type { ChipChoiceCustomProps, ChipChoiceDateProps, ChipChoiceDateRangeProps, CustomContentRenderProps };
 
 export namespace ChipChoice {
   export const Custom = ChipChoiceCustom;
   export const Single = ChipChoiceSingle;
-  export const Multi = ChipChoiceMulti;
+  export const Multiple = ChipChoiceMultiple;
   export const Date = ChipChoiceDate;
   export const DateRange = ChipChoiceDateRange;
 }
+
+export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/src/components/ChipChoice/styles.module.scss

@@ -18,7 +18,8 @@ $valueTypography: (
   'l': $sans-label-l,
 );
 
-.label, .value {
+.label,
+.value {
   display: inline-flex;
   align-items: center;
 }
@@ -30,7 +31,8 @@ $valueTypography: (
   background-color: $sys-neutral-background1-level;
   border-color: $sys-neutral-decor-default;
 
-  .label, .value {
+  .label,
+  .value {
     color: $sys-neutral-text-support;
   }
 
@@ -46,7 +48,9 @@ $valueTypography: (
     }
   }
 
-  &:hover, &:active, &:focus-visible {
+  &:hover,
+  &:active,
+  &:focus-visible {
     background-color: $sys-neutral-background2-level;
     border-color: $sys-neutral-decor-hovered;
 
@@ -68,7 +72,8 @@ $valueTypography: (
     background-color: $sys-neutral-background;
     border-color: $sys-neutral-decor-disabled;
 
-    .label, .value {
+    .label,
+    .value {
       color: $sys-neutral-text-light;
     }
   }
@@ -79,7 +84,8 @@ $valueTypography: (
     background-color: $sys-neutral-background;
     border-color: $sys-neutral-decor-activated;
 
-    .label, .value {
+    .label,
+    .value {
       color: $sys-neutral-text-support;
     }
   }

package/src/components/ChipChoice/types.ts

@@ -1,13 +1,71 @@
-import { MouseEventHandler } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 
-import { DroplistProps, ItemSingleProps } from '@snack-uikit/droplist';
+import { DropdownProps } from '@snack-uikit/dropdown';
+import {
+  BaseItemProps,
+  DroplistProps,
+  GroupItemProps,
+  GroupSelectItemProps,
+  ItemContentProps,
+  ItemId,
+  NextListItemProps,
+  SelectionMultipleState,
+  SelectionSingleState,
+} from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { BaseChipProps, Size } from '../../types';
 
-export type FilterOption = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar'> & {
-  label: string;
-  value: string;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyType = any;
+
+export type ContentRenderProps = Omit<ItemContentProps, 'option' | 'disabled'>;
+
+export type FilterOption<T extends ContentRenderProps = ContentRenderProps> =
+  // eslint-disable-next-line no-use-before-define
+  | BaseOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | AccordionOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | GroupOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | GroupSelectOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | NestListOption<T>;
+
+export type BaseOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseItemProps, 'content' | 'id'> & {
+  value: ItemId;
+  label: ItemId;
+  contentRenderProps?: T;
+};
+
+export type AccordionOption<T extends ContentRenderProps = ContentRenderProps> = Omit<
+  BaseOption<T>,
+  'switch' | 'inactive' | 'value'
+> & {
+  id?: ItemId;
+  type: 'collapse';
+  options: FilterOption<T>[];
+};
+
+export type GroupOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupItemProps, 'items'> & {
+  options: FilterOption<T>[];
+};
+
+export type GroupSelectOption<T extends ContentRenderProps = ContentRenderProps> = Omit<
+  GroupSelectItemProps,
+  'items'
+> & {
+  options: FilterOption<T>[];
+};
+
+export type NestListOption<T extends ContentRenderProps = ContentRenderProps> = Omit<
+  NextListItemProps,
+  'items' | 'content'
+> & {
+  label: ItemId;
+  contentRenderProps?: T;
+  options: FilterOption<T>[];
 };
 
 export type ChipChoiceCommonProps = WithSupportProps<
@@ -19,7 +77,7 @@ export type ChipChoiceCommonProps = WithSupportProps<
     /** Отображение кнопки очистки значения @default true*/
     showClearButton?: boolean;
     /** Расположение выпадающего меню */
-    placement?: DroplistProps['placement'];
+    placement?: DropdownProps['placement'];
     /**
      * Стратегия управления шириной контейнера поповера
      * <br> - `auto` - соответствует ширине контента,
@@ -27,6 +85,46 @@ export type ChipChoiceCommonProps = WithSupportProps<
      * <br> - `eq` - Equal, строго равен ширине таргета.
      * @default gte
      */
-    widthStrategy?: DroplistProps['widthStrategy'];
+    widthStrategy?: DropdownProps['widthStrategy'];
+    dropDownClassName?: string;
   }
 >;
+
+export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
+  options: FilterOption<T>[];
+
+  contentRender?(option: { label: ItemId; value?: ItemId; contentRenderProps?: T }): ReactNode;
+  filterFn?(option: { label: ItemId; value?: ItemId; contentRenderProps?: T }): boolean;
+
+  searchable?: boolean;
+} & Pick<
+    DroplistProps,
+    | 'selection'
+    | 'scrollRef'
+    | 'scrollContainerRef'
+    | 'noDataState'
+    | 'footer'
+    | 'footerActiveElementsRefs'
+    | 'dataError'
+    | 'errorDataState'
+    | 'dataFiltered'
+    | 'noResultsState'
+    | 'loading'
+  >;
+
+export type ChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceSelectCommonProps<T> &
+  Omit<SelectionSingleState, 'mode'> & {
+    /** Массив опций */
+    options: FilterOption<T>[];
+    /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+    valueRender?(option?: BaseOption<T>): ReactNode;
+  };
+
+export type ChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> =
+  ChipChoiceSelectCommonProps<T> &
+    Omit<SelectionMultipleState, 'mode'> & {
+      /** Массив опций */
+      options: FilterOption<T>[];
+      /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+      valueRender?(option?: BaseOption<T>[]): ReactNode;
+    };

package/src/components/ChipChoice/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './typeGuards';
+
+export * from './utils';