@snack-uikit/chips 0.12.9 → 0.13.0

package/src/components/ChipChoice/utils/options.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+
+import { ItemContent, ItemId, ItemProps } from '@snack-uikit/list';
+
+import { BaseOption, ContentRenderProps, FilterOption } from '../types';
+import { isAccordionOption, isGroupOption, isGroupSelectOption, isNextListOption } from './typeGuards';
+
+export function transformOptionsToItems<T extends ContentRenderProps = ContentRenderProps>(
+  options: FilterOption<T>[],
+  contentRender?: (option: { label: ItemId; value?: ItemId; contentRenderProps?: T; disabled?: boolean }) => ReactNode,
+): ItemProps[] {
+  return options.map(option => {
+    if (isAccordionOption<T>(option) || isNextListOption<T>(option)) {
+      const { label, options, id, contentRenderProps, disabled, ...rest } = option;
+
+      return {
+        ...rest,
+        id,
+        content: contentRender ? (
+          contentRender({ label, contentRenderProps })
+        ) : (
+          <ItemContent option={label} {...contentRenderProps} disabled={disabled} />
+        ),
+        items: transformOptionsToItems<T>(options),
+      };
+    }
+
+    if (isGroupSelectOption<T>(option)) {
+      const { options, ...rest } = option;
+
+      return {
+        ...rest,
+        items: transformOptionsToItems<T>(options),
+      };
+    }
+
+    if (isGroupOption(option)) {
+      const { options, ...rest } = option;
+
+      return {
+        ...rest,
+        items: transformOptionsToItems(options),
+      };
+    }
+
+    const { label, value, contentRenderProps, disabled, ...rest } = option as BaseOption<T>;
+
+    return {
+      ...rest,
+      id: value,
+      content: contentRender ? (
+        contentRender({ label, contentRenderProps })
+      ) : (
+        <ItemContent option={label} {...contentRenderProps} disabled={disabled} />
+      ),
+    };
+  });
+}

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

@@ -0,0 +1,35 @@
+import {
+  AccordionOption,
+  AnyType,
+  BaseOption,
+  ContentRenderProps,
+  GroupOption,
+  GroupSelectOption,
+  NestListOption,
+} from '../types';
+
+export function isBaseOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is BaseOption<T> {
+  return !('options' in option);
+}
+export function isAccordionOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is AccordionOption<T> {
+  return option && 'options' in option && option['type'] === 'collapse';
+}
+export function isNextListOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is NestListOption<T> {
+  return option && 'options' in option && option['type'] === 'next-list';
+}
+export function isGroupOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is GroupOption<T> {
+  return option && 'options' in option && option['type'] === 'group';
+}
+export function isGroupSelectOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is GroupSelectOption<T> {
+  return option && 'options' in option && option['type'] === 'group-select';
+}

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { ItemId } from '@snack-uikit/list';
+
+import { ContentRenderProps, FilterOption } from '../types';
+import { isBaseOption } from './typeGuards';
+
+export type FlattenOption<T extends ContentRenderProps = ContentRenderProps> = {
+  value: ItemId;
+  label: ItemId;
+  contentRenderProps?: T;
+  disabled?: boolean;
+  afterContent?: ReactNode;
+  beforeContent?: ReactNode;
+};
+
+type KindFlattenOptionsProps<T extends ContentRenderProps = ContentRenderProps> = {
+  options: FilterOption<T>[];
+};
+
+export function kindFlattenOptions<T extends ContentRenderProps = ContentRenderProps>({
+  options,
+}: KindFlattenOptionsProps<T>): {
+  flattenOptions: Record<string, FlattenOption<T>>;
+} {
+  const flattenOptions: Record<string, FlattenOption<T>> = {};
+
+  function flatten(option: FilterOption<T>) {
+    if (isBaseOption<T>(option)) {
+      const { value, label, contentRenderProps, disabled, afterContent, beforeContent } = option;
+
+      flattenOptions[value] = {
+        value,
+        label,
+        contentRenderProps,
+        disabled,
+        afterContent,
+        beforeContent,
+      };
+
+      return;
+    }
+
+    const { options } = option;
+
+    for (let idx = 0; idx < options.length; idx++) {
+      flatten(options[idx]);
+    }
+
+    return;
+  }
+
+  for (let idx = 0; idx < options.length; idx++) {
+    flatten(options[idx]);
+  }
+
+  return {
+    flattenOptions,
+  };
+}

package/src/components/ChipChoiceRow/components/constants.ts

@@ -3,7 +3,8 @@ import { CHIP_CHOICE_TYPE } from '../../ChipChoice/constants';
 
 export const MAP_CHIP_TYPE_TO_COMPONENT = {
   [CHIP_CHOICE_TYPE.Single]: ChipChoice.Single,
-  [CHIP_CHOICE_TYPE.Multi]: ChipChoice.Multi,
+  [CHIP_CHOICE_TYPE.Multiple]: ChipChoice.Multiple,
   [CHIP_CHOICE_TYPE.Date]: ChipChoice.Date,
   [CHIP_CHOICE_TYPE.DateRange]: ChipChoice.DateRange,
+  [CHIP_CHOICE_TYPE.Custom]: ChipChoice.Custom,
 };

package/src/components/ChipChoiceRow/types.ts

@@ -1,19 +1,17 @@
 import { ValueOf } from '@snack-uikit/utils';
 
-import {
-  ChipChoiceDateProps,
-  ChipChoiceDateRangeProps,
-  ChipChoiceMultiProps,
-  ChipChoiceSingleProps,
-} from '../ChipChoice';
+import { ChipChoiceCustomProps } from '../ChipChoice/components';
+import { ChipChoiceDateProps } from '../ChipChoice/components/ChipChoiceDate';
+import { ChipChoiceDateRangeProps } from '../ChipChoice/components/ChipChoiceDateRange';
 import { CHIP_CHOICE_TYPE } from '../ChipChoice/constants';
+import { ChipChoiceMultipleProps, ChipChoiceSingleProps } from '../ChipChoice/types';
 import { CHIP_CHOICE_ROW_SIZE } from './constants';
 
 export type ChipChoiceRowSize = ValueOf<typeof CHIP_CHOICE_ROW_SIZE>;
 
-type ChipChoiceMultiType = {
-  type: typeof CHIP_CHOICE_TYPE.Multi;
-} & ChipChoiceMultiProps;
+type ChipChoiceMultipleType = {
+  type: typeof CHIP_CHOICE_TYPE.Multiple;
+} & ChipChoiceMultipleProps;
 
 type ChipChoiceSingleType = {
   type: typeof CHIP_CHOICE_TYPE.Single;
@@ -27,9 +25,19 @@ type ChipChoiceDateRangeType = {
   type: typeof CHIP_CHOICE_TYPE.DateRange;
 } & ChipChoiceDateRangeProps;
 
+type ChipChoiceCustomType = {
+  type: typeof CHIP_CHOICE_TYPE.Custom;
+} & ChipChoiceCustomProps;
+
 export type ChipChoiceProps = {
   id: string;
-} & (ChipChoiceMultiType | ChipChoiceSingleType | ChipChoiceDateType | ChipChoiceDateRangeType);
+} & (
+  | ChipChoiceMultipleType
+  | ChipChoiceSingleType
+  | ChipChoiceDateType
+  | ChipChoiceDateRangeType
+  | ChipChoiceCustomType
+);
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type OmitBetter<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;

package/dist/components/ChipChoice/components/ChipChoiceCustom/ChipChoiceCustom.d.ts

@@ -1,23 +0,0 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import { Droplist } from '@snack-uikit/droplist';
-import { ChipChoiceCommonProps } from '../../types';
-export type ChipChoiceCustomProps = ChipChoiceCommonProps & {
-    /** Отображаемое значение */
-    valueToRender?: ReactNode;
-    /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
-    value?: string | Date | string[] | [Date, Date];
-    /** Колбек для клика по кнопке очистки */
-    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
-    /** Контент выпадающего меню
-     <br>
-     <br> Принимает <strong>ReactNode</strong>
-     <br> Или функцию с аргументами:
-     <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню
-     <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню
-     */
-    children?: ReactNode | ((props: {
-        handleDroplistItemKeyDown: ReturnType<typeof Droplist.useKeyboardNavigation>['handleDroplistItemKeyDown'];
-        closeDroplist(): void;
-    }) => ReactNode);
-};
-export declare function ChipChoiceCustom({ size, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex, placement, widthStrategy, onClearButtonClick, showClearButton: showClearButtonProp, children, 'data-test-id': testId, ...rest }: ChipChoiceCustomProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoice/components/ChipChoiceCustom/ChipChoiceCustom.js

@@ -1,75 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'classnames';
-import { useCallback, useRef, useState } from 'react';
-import { Droplist } from '@snack-uikit/droplist';
-import { Sun } from '@snack-uikit/loaders';
-import { extractSupportProps } from '@snack-uikit/utils';
-import { CHIP_CHOICE_TEST_IDS, SIZE, VARIANT } from '../../../../constants';
-import { ButtonClearValue } from '../../../../helperComponents';
-import { BUTTON_CLEAR_VALUE_SIZE_MAP, DROPLIST_SIZE_MAP } from '../../constants';
-import styles from './styles.module.css';
-export function ChipChoiceCustom(_a) {
-    var { size = SIZE.S, disabled, loading, icon, label, valueToRender, value, onClick, className, tabIndex = 0, placement = 'bottom-start', widthStrategy = 'gte', onClearButtonClick, showClearButton: showClearButtonProp = true, children, 'data-test-id': testId } = _a, rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "placement", "widthStrategy", "onClearButtonClick", "showClearButton", "children", 'data-test-id']);
-    const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
-    const spinnerSize = size === SIZE.Xs ? 'xs' : 's';
-    const clearButtonRef = useRef(null);
-    const [isDroplistOpened, setIsDroplistOpened] = useState(false);
-    const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, } = Droplist.useKeyboardNavigation({
-        setDroplistOpen: setIsDroplistOpened,
-    });
-    const handleChipClick = e => {
-        if (loading || disabled)
-            return;
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-        !isDroplistOpened && setIsDroplistOpened(true);
-    };
-    const handleChipKeyDown = e => {
-        var _a;
-        if (e.key === 'ArrowRight') {
-            (_a = clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        handleTriggerKeyDown(e);
-    };
-    const onOpenChangeHandler = (opened) => !opened && setIsDroplistOpened(false);
-    const closeDroplist = useCallback(() => {
-        setIsDroplistOpened(false);
-        // TODO: same bug as in FieldDate
-        setTimeout(() => {
-            var _a;
-            (_a = triggerElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, 0);
-    }, [triggerElementRef]);
-    const handleClearButtonClick = e => {
-        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick(e);
-        closeDroplist();
-    };
-    const handleClearButtonKeyDown = e => {
-        var _a;
-        switch (e.key) {
-            case 'ArrowLeft': {
-                (_a = triggerElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            case 'Enter':
-            case ' ': {
-                e.stopPropagation();
-                return;
-            }
-            default:
-                break;
-        }
-    };
-    const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value === null || value === void 0 ? void 0 : value.length));
-    return (_jsx(Droplist, { trigger: 'click', open: isDroplistOpened, firstElementRefCallback: firstElementRefCallback, onOpenChange: onOpenChangeHandler, onFocusLeave: handleDroplistFocusLeave, triggerClassName: styles.triggerClassName, widthStrategy: widthStrategy, placement: placement, size: DROPLIST_SIZE_MAP[size], "data-test-id": CHIP_CHOICE_TEST_IDS.droplist, triggerElement: _jsxs("div", Object.assign({}, extractSupportProps(rest), { role: 'button', ref: triggerElementRef, className: cn(styles.choiceChip, className), "data-size": size, "data-variant": variant, "data-loading": loading || undefined, "data-test-id": testId || undefined, "data-disabled": (!loading && disabled) || undefined, onClick: handleChipClick, onKeyDown: handleChipKeyDown, tabIndex: tabIndex, children: [variant === VARIANT.IconBefore && (_jsx("span", { className: styles.icon, "data-test-id": CHIP_CHOICE_TEST_IDS.icon, children: icon })), _jsxs("span", { className: styles.labelLayout, children: [label && (_jsx("span", { className: styles.label, "data-test-id": CHIP_CHOICE_TEST_IDS.label, children: label + ': ' })), loading ? (_jsx("span", { className: styles.spinner, "data-test-id": CHIP_CHOICE_TEST_IDS.spinner, children: _jsx(Sun, { size: spinnerSize }) })) : (_jsx("span", { className: styles.value, "data-test-id": CHIP_CHOICE_TEST_IDS.value, children: valueToRender }))] }), !disabled && !loading && showClearButton && (_jsx(ButtonClearValue, { size: BUTTON_CLEAR_VALUE_SIZE_MAP[size], onClick: handleClearButtonClick, "data-test-id": CHIP_CHOICE_TEST_IDS.clearButton, onKeyDown: handleClearButtonKeyDown, ref: clearButtonRef }))] })), children: typeof children === 'function' ? children({ handleDroplistItemKeyDown, closeDroplist }) : children }));
-}

package/dist/components/ChipChoice/components/ChipChoiceCustom/index.d.ts

@@ -1 +0,0 @@
-export * from './ChipChoiceCustom';

package/dist/components/ChipChoice/components/ChipChoiceCustom/index.js

@@ -1 +0,0 @@
-export * from './ChipChoiceCustom';

package/dist/components/ChipChoice/components/ChipChoiceMulti.d.ts

@@ -1,14 +0,0 @@
-import { ChipChoiceCommonProps, FilterOption } from '../types';
-export type ChipChoiceMultiProps = ChipChoiceCommonProps & {
-    /** Массив опций */
-    options: FilterOption[];
-    /** Значение компонента */
-    value?: string[];
-    /** Значение компонента по умолчанию */
-    defaultValue?: string[];
-    /** Колбек смены значения */
-    onChange?(value: string[]): void;
-    /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений. По умолчанию для отображения используется кол-во выбранных значений. */
-    valueFormatter?(options: FilterOption[]): string;
-};
-export declare function ChipChoiceMulti({ value, defaultValue, options, onChange, valueFormatter, size, 'data-test-id': dataTestId, ...rest }: ChipChoiceMultiProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ChipChoice/components/ChipChoiceMulti.js

@@ -1,44 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { useMemo } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
-import { Droplist } from '@snack-uikit/droplist';
-import { useLocale } from '@snack-uikit/locale';
-import { SIZE } from '../../../constants';
-import { defaultMultiValueLabelFormatter, normalizeValueForMultiChoice } from '../utils';
-import { ChipChoiceCustom } from './ChipChoiceCustom';
-export function ChipChoiceMulti(_a) {
-    var { value, defaultValue, options, onChange, valueFormatter, size = SIZE.S, 'data-test-id': dataTestId } = _a, rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueFormatter", "size", 'data-test-id']);
-    const [selectedValue, setSelectedValue] = useUncontrolledProp(normalizeValueForMultiChoice(options, value), normalizeValueForMultiChoice(options, defaultValue) || [], onChange);
-    const selectedOptions = useMemo(() => options.filter(({ value }) => selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value)), [options, selectedValue]);
-    const { t } = useLocale('Chips');
-    const valueToRender = valueFormatter
-        ? valueFormatter(selectedOptions)
-        : defaultMultiValueLabelFormatter({ value: selectedOptions, total: options.length, allLabel: t('allLabel') });
-    const clearValue = () => setSelectedValue([]);
-    return (_jsx(ChipChoiceCustom, Object.assign({ size: size, onClearButtonClick: clearValue, valueToRender: valueToRender, value: selectedValue, "data-test-id": dataTestId }, rest, { children: ({ handleDroplistItemKeyDown }) => options.map((_a) => {
-            var { label, value } = _a, rest = __rest(_a, ["label", "value"]);
-            const selected = selectedValue || [];
-            const checked = selected.includes(value);
-            const onChangeHandler = () => {
-                if (checked) {
-                    setSelectedValue(selected.filter(selected => selected !== value));
-                }
-                else {
-                    setSelectedValue([...selected, value]);
-                }
-            };
-            return (_createElement(Droplist.ItemMultiple, Object.assign({}, rest, { key: value, option: label, checked: checked, onChange: onChangeHandler, onKeyDown: handleDroplistItemKeyDown, "data-test-id": dataTestId && `${dataTestId}__option` })));
-        }) })));
-}

package/dist/components/ChipChoice/utils.d.ts

@@ -1,14 +0,0 @@
-import { FilterOption } from './types';
-export declare const normalizeValueForMultiChoice: (options: FilterOption[], value?: string[]) => string[] | undefined;
-export declare const normalizeValueForSingleChoice: (options: FilterOption[], value?: string) => string | undefined;
-export type ChipChoiceMultipleValueFormatterProps = {
-    value: FilterOption[];
-    total: number;
-    allLabel: string;
-};
-export declare const defaultMultiValueLabelFormatter: ({ value, total, allLabel, }: ChipChoiceMultipleValueFormatterProps) => string;
-export type ChipChoiceSingleValueFormatterProps = {
-    value?: FilterOption;
-    allLabel?: string;
-};
-export declare function defaultSingleValueFormatter({ value, allLabel }: ChipChoiceSingleValueFormatterProps): string | undefined;

package/dist/components/ChipChoice/utils.js

@@ -1,26 +0,0 @@
-export const normalizeValueForMultiChoice = (options, value) => {
-    if (!value) {
-        return undefined;
-    }
-    return value.filter(val => options.some(option => val === option.value));
-};
-export const normalizeValueForSingleChoice = (options, value) => {
-    var _a;
-    if (!value) {
-        return undefined;
-    }
-    return (_a = options.find(option => value === option.value)) === null || _a === void 0 ? void 0 : _a.value;
-};
-export const defaultMultiValueLabelFormatter = ({ value, total, allLabel, }) => {
-    if (value.length === 0 || value.length === total) {
-        return allLabel;
-    }
-    if (value.length === 1) {
-        return value[0].label;
-    }
-    return `${value.length.toString()}/${total}`;
-};
-export function defaultSingleValueFormatter({ value, allLabel }) {
-    var _a;
-    return (_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : allLabel;
-}

package/src/components/ChipChoice/components/ChipChoiceCustom/ChipChoiceCustom.tsx

@@ -1,188 +0,0 @@
-import cn from 'classnames';
-import { KeyboardEventHandler, MouseEventHandler, ReactNode, useCallback, useRef, useState } from 'react';
-
-import { Droplist } from '@snack-uikit/droplist';
-import { Sun, SunProps } from '@snack-uikit/loaders';
-import { extractSupportProps } from '@snack-uikit/utils';
-
-import { CHIP_CHOICE_TEST_IDS, SIZE, VARIANT } from '../../../../constants';
-import { ButtonClearValue } from '../../../../helperComponents';
-import { BUTTON_CLEAR_VALUE_SIZE_MAP, DROPLIST_SIZE_MAP } from '../../constants';
-import { ChipChoiceCommonProps } from '../../types';
-import styles from './styles.module.scss';
-
-export type ChipChoiceCustomProps = ChipChoiceCommonProps & {
-  /** Отображаемое значение */
-  valueToRender?: ReactNode;
-  /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
-  value?: string | Date | string[] | [Date, Date];
-  /** Колбек для клика по кнопке очистки */
-  onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
-  /** Контент выпадающего меню
-   <br>
-   <br> Принимает <strong>ReactNode</strong>
-   <br> Или функцию с аргументами:
-   <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню
-   <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню
-   */
-  children?:
-    | ReactNode
-    | ((props: {
-        handleDroplistItemKeyDown: ReturnType<typeof Droplist.useKeyboardNavigation>['handleDroplistItemKeyDown'];
-        closeDroplist(): void;
-      }) => ReactNode);
-};
-
-export function ChipChoiceCustom({
-  size = SIZE.S,
-  disabled,
-  loading,
-  icon,
-  label,
-  valueToRender,
-  value,
-  onClick,
-  className,
-  tabIndex = 0,
-  placement = 'bottom-start',
-  widthStrategy = 'gte',
-  onClearButtonClick,
-  showClearButton: showClearButtonProp = true,
-  children,
-  'data-test-id': testId,
-  ...rest
-}: ChipChoiceCustomProps) {
-  const variant = icon && size !== SIZE.Xs ? VARIANT.IconBefore : VARIANT.LabelOnly;
-  const spinnerSize: SunProps['size'] = size === SIZE.Xs ? 'xs' : 's';
-
-  const clearButtonRef = useRef<HTMLButtonElement>(null);
-
-  const [isDroplistOpened, setIsDroplistOpened] = useState(false);
-
-  const {
-    firstElementRefCallback,
-    triggerElementRef,
-    handleDroplistFocusLeave,
-    handleTriggerKeyDown,
-    handleDroplistItemKeyDown,
-  } = Droplist.useKeyboardNavigation<HTMLDivElement>({
-    setDroplistOpen: setIsDroplistOpened,
-  });
-
-  const handleChipClick: MouseEventHandler<HTMLDivElement> = e => {
-    if (loading || disabled) return;
-
-    onClick?.(e);
-
-    !isDroplistOpened && setIsDroplistOpened(true);
-  };
-
-  const handleChipKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
-    if (e.key === 'ArrowRight') {
-      clearButtonRef.current?.focus();
-    }
-
-    handleTriggerKeyDown(e);
-  };
-
-  const onOpenChangeHandler = (opened: boolean) => !opened && setIsDroplistOpened(false);
-
-  const closeDroplist = useCallback(() => {
-    setIsDroplistOpened(false);
-
-    // TODO: same bug as in FieldDate
-    setTimeout(() => {
-      triggerElementRef.current?.focus();
-    }, 0);
-  }, [triggerElementRef]);
-
-  const handleClearButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
-    onClearButtonClick?.(e);
-    closeDroplist();
-  };
-
-  const handleClearButtonKeyDown: KeyboardEventHandler<HTMLButtonElement> = e => {
-    switch (e.key) {
-      case 'ArrowLeft': {
-        triggerElementRef.current?.focus();
-        return;
-      }
-      case 'Enter':
-      case ' ': {
-        e.stopPropagation();
-        return;
-      }
-      default:
-        break;
-    }
-  };
-
-  const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value?.length));
-
-  return (
-    <Droplist
-      trigger='click'
-      open={isDroplistOpened}
-      firstElementRefCallback={firstElementRefCallback}
-      onOpenChange={onOpenChangeHandler}
-      onFocusLeave={handleDroplistFocusLeave}
-      triggerClassName={styles.triggerClassName}
-      widthStrategy={widthStrategy}
-      placement={placement}
-      size={DROPLIST_SIZE_MAP[size]}
-      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
-      triggerElement={
-        <div
-          {...extractSupportProps(rest)}
-          role='button'
-          ref={triggerElementRef}
-          className={cn(styles.choiceChip, className)}
-          data-size={size}
-          data-variant={variant}
-          data-loading={loading || undefined}
-          data-test-id={testId || undefined}
-          data-disabled={(!loading && disabled) || undefined}
-          onClick={handleChipClick}
-          onKeyDown={handleChipKeyDown}
-          tabIndex={tabIndex}
-        >
-          {variant === VARIANT.IconBefore && (
-            <span className={styles.icon} data-test-id={CHIP_CHOICE_TEST_IDS.icon}>
-              {icon}
-            </span>
-          )}
-
-          <span className={styles.labelLayout}>
-            {label && (
-              <span className={styles.label} data-test-id={CHIP_CHOICE_TEST_IDS.label}>
-                {label + ': '}
-              </span>
-            )}
-
-            {loading ? (
-              <span className={styles.spinner} data-test-id={CHIP_CHOICE_TEST_IDS.spinner}>
-                <Sun size={spinnerSize} />
-              </span>
-            ) : (
-              <span className={styles.value} data-test-id={CHIP_CHOICE_TEST_IDS.value}>
-                {valueToRender}
-              </span>
-            )}
-          </span>
-
-          {!disabled && !loading && showClearButton && (
-            <ButtonClearValue
-              size={BUTTON_CLEAR_VALUE_SIZE_MAP[size]}
-              onClick={handleClearButtonClick}
-              data-test-id={CHIP_CHOICE_TEST_IDS.clearButton}
-              onKeyDown={handleClearButtonKeyDown}
-              ref={clearButtonRef}
-            />
-          )}
-        </div>
-      }
-    >
-      {typeof children === 'function' ? children({ handleDroplistItemKeyDown, closeDroplist }) : children}
-    </Droplist>
-  );
-}

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

@@ -1 +0,0 @@
-export * from './ChipChoiceCustom';