@snack-uikit/fields 0.14.2 → 0.15.0

package/src/components/FieldSelect/types.ts

@@ -1,26 +1,38 @@
 import { ReactElement } from 'react';
 
-import { ItemSingleProps } from '@snack-uikit/droplist';
 import { InputPrivateProps } from '@snack-uikit/input-private';
+import {
+  AccordionItemProps,
+  BaseItemProps,
+  GroupItemProps,
+  ListProps,
+  NextListItemProps,
+  SelectionMultipleState,
+  SelectionSingleState,
+} from '@snack-uikit/list';
 import { WithSupportProps } from '@snack-uikit/utils';
 
 import { FieldDecoratorProps } from '../FieldDecorator';
 
-export type Option = Pick<ItemSingleProps, 'caption' | 'description' | 'tagLabel' | 'icon' | 'avatar' | 'disabled'> & {
-  value: string;
-  label: string;
-};
+// eslint-disable-next-line no-use-before-define
+export type OptionProps = BaseOptionProps | AccordionOptionProps | GroupOptionProps | NestListOptionProps;
 
-export type ExtendedOption = Option & {
-  checked: boolean;
-};
+// eslint-disable-next-line no-use-before-define
+export type OptionWithoutGroup = BaseOptionProps | AccordionOptionProps | NestListOptionProps;
+
+export type BaseOptionProps = Pick<BaseItemProps, 'beforeContent' | 'afterContent' | 'disabled'> &
+  BaseItemProps['content'] & { value: string | number };
+
+export type AccordionOptionProps = Pick<AccordionItemProps, 'type'> & BaseOptionProps & { options: OptionProps[] };
+export type GroupOptionProps = Omit<GroupItemProps, 'items' | 'id'> & { options: OptionProps[] };
+export type NestListOptionProps = Pick<NextListItemProps, 'type'> & BaseOptionProps & { options: OptionProps[] };
 
-type InputProps = Pick<
+export type InputProps = Pick<
   InputPrivateProps,
-  'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'
+  'id' | 'name' | 'placeholder' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'onKeyDown'
 >;
 
-type WrapperProps = Pick<
+export type WrapperProps = Pick<
   FieldDecoratorProps,
   | 'className'
   | 'label'
@@ -33,14 +45,16 @@ type WrapperProps = Pick<
   | 'labelTooltipPlacement'
 >;
 
-type FieldSelectOwnProps = {
-  /** Массив опций выпадающего списка */
-  options: Option[];
-  /** Открыт ли выпадающий список */
-  open?: boolean;
-  /** Колбек открытия выпадающего списка */
-  onOpenChange?(value: boolean): void;
-  /** Можно ли искать опции внутри списка */
+export type SearchState = {
+  value?: string;
+  defaultValue?: string;
+  onChange?(value: string): void;
+};
+
+export type FieldSelectPrivateProps = InputProps & WrapperProps & { options: OptionProps[]; loading?: boolean };
+
+type FiledSelectCommonProps = WithSupportProps<{
+  options: OptionProps[];
   searchable?: boolean;
   /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
   showCopyButton?: boolean;
@@ -49,30 +63,31 @@ type FieldSelectOwnProps = {
    * @default true
    */
   showClearButton?: boolean;
+  /**
+   * Является ли поле доступным только для чтения
+   * @default false
+   */
+  readonly?: boolean;
+
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
-  /** Текст отсутствия доступных значений */
-  noDataText?: string;
-  /** Текущая локаль */
-  locale?: Intl.Locale;
-};
 
-export type FieldSelectBaseProps = FieldSelectOwnProps & InputProps & WrapperProps;
+  footer?: ListProps['footer'];
 
-type SingleModeProps = {
-  /** Выбранное значение: <br> - одно для single mode */
-  value?: Option['value'];
-  /** Колбек смены значения */
-  onChange?(value: Option['value']): void;
-};
+  search?: SearchState;
 
-type MultiModeProps = {
-  /** <br> - массив для multi mode */
-  value?: Option['value'][];
-  onChange?(value: Option['value'][]): void;
-  /** Колбек формирования текста */
-  getSelectedItemsText?(amount: number): string;
-};
+  autocomplete?: boolean;
+}>;
+
+export type FieldSelectSingleProps = FieldSelectPrivateProps &
+  Omit<SelectionSingleState, 'mode'> &
+  WrapperProps &
+  FiledSelectCommonProps;
+
+export type FieldSelectMultipleProps = FieldSelectPrivateProps &
+  Omit<SelectionMultipleState, 'mode'> &
+  FiledSelectCommonProps;
 
-export type FieldSelectSingleProps = WithSupportProps<FieldSelectBaseProps & SingleModeProps>;
-export type FieldSelectMultiProps = WithSupportProps<FieldSelectBaseProps & MultiModeProps>;
+export type FieldSelectProps =
+  | (FieldSelectSingleProps & { selection?: 'single' })
+  | (FieldSelectMultipleProps & { selection: 'multiple' });

package/src/components/FieldSelect/utils.ts

@@ -0,0 +1,163 @@
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { ICON_SIZE, SIZE, Size } from '@snack-uikit/input-private';
+import { ItemProps } from '@snack-uikit/list';
+
+import {
+  AccordionOptionProps,
+  BaseOptionProps,
+  FieldSelectMultipleProps,
+  FieldSelectSingleProps,
+  GroupOptionProps,
+  NestListOptionProps,
+  OptionProps,
+  OptionWithoutGroup,
+} from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isBaseOptionProps(option: any): option is BaseOptionProps {
+  return !('options' in option);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isAccordionOptionProps(option: any): option is AccordionOptionProps {
+  return 'options' in option && option['type'] === 'collapse';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNextListOptionProps(option: any): option is NestListOptionProps {
+  return 'options' in option && option['type'] === 'next-list';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isGroupOptionProps(option: any): option is GroupOptionProps {
+  return 'options' in option && option['type'] === undefined;
+}
+
+export function transformOptionsToItems(options: OptionProps[]): ItemProps[] {
+  return options.map(option => {
+    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+      const { description, option: contentOption, caption, options, value, ...rest } = option;
+
+      return {
+        'data-test-id': 'field-select__list-option-' + option.value,
+        ...rest,
+        id: value,
+        content: { option: contentOption, caption, description },
+        items: transformOptionsToItems(options),
+      };
+    }
+
+    if (isGroupOptionProps(option)) {
+      const { options, ...rest } = option;
+
+      return {
+        ...rest,
+        items: transformOptionsToItems(options),
+      };
+    }
+
+    const { description, option: contentOption, caption, value, ...rest } = option as BaseOptionProps;
+
+    return {
+      'data-test-id': 'field-select__list-option-' + option.value,
+      ...rest,
+      id: value,
+      content: { option: contentOption, caption, description },
+    };
+  });
+}
+
+export function extractSelectedOptions(
+  options: OptionProps[],
+  value: string | number | undefined,
+): OptionWithoutGroup | undefined {
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+      const { value: optionValue } = option;
+
+      if (optionValue === value) {
+        return option;
+      }
+
+      const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
+
+      if (selectedOptionFromNestedOptions) {
+        return selectedOptionFromNestedOptions;
+      }
+    }
+
+    if (isGroupOptionProps(option)) {
+      const selectedOptionFromNestedOptions = extractSelectedOptions(option.options, value);
+
+      if (selectedOptionFromNestedOptions) {
+        return selectedOptionFromNestedOptions;
+      }
+    }
+
+    if (isBaseOptionProps(option)) {
+      if (option.value === value) {
+        return option;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+export function extractSelectedMultipleOptions(
+  options: OptionProps[],
+  value?: (string | number | undefined)[],
+): OptionWithoutGroup[] | undefined {
+  let selectedOptions: OptionWithoutGroup[] = [];
+
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    if (isAccordionOptionProps(option) || isNextListOptionProps(option)) {
+      const { value: optionValue } = option;
+
+      if (value?.includes(optionValue)) {
+        selectedOptions.push(option);
+      }
+
+      const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+
+      if (selectedOptionFromNestedOptions) {
+        selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+      }
+    }
+
+    if (isGroupOptionProps(option)) {
+      const selectedOptionFromNestedOptions = extractSelectedMultipleOptions(option.options, value);
+
+      if (selectedOptionFromNestedOptions) {
+        selectedOptions = selectedOptions.concat(selectedOptionFromNestedOptions);
+      }
+    }
+
+    if (isBaseOptionProps(option)) {
+      if (value?.includes(option.value)) {
+        selectedOptions.push(option);
+      }
+    }
+  }
+
+  return selectedOptions.length ? selectedOptions : undefined;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectMultipleProps(props: any): props is FieldSelectMultipleProps {
+  return 'selection' in props && props['selection'] === 'multiple';
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isFieldSelectSingleProps(props: any): props is FieldSelectSingleProps {
+  return ('selection' in props && props['selection'] === 'single') || props['selection'] === undefined;
+}
+
+export function getArrowIcon({ size, open }: { size: Size; open: boolean }) {
+  return {
+    ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
+    arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
+  };
+}

package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx

@@ -72,7 +72,9 @@ export function FieldContainerPrivate({
           {prefix}
         </span>
       )}
+
       {children}
+
       {postfix && <span className={styles.postfix}>{postfix}</span>}
     </div>
   );

package/src/helperComponents/FieldContainerPrivate/styles.module.scss

@@ -21,7 +21,11 @@ $variants: 'single-line-container', 'multi-line-container';
     &[data-size='#{$size}'] {
       @include composite-var($fields, 'container', $size);
 
-      &, input, select, textarea, span {
+      &,
+      input,
+      select,
+      textarea,
+      span {
         @include composite-var($theme-variables, 'sans', 'body', $size);
 
         cursor: text;
@@ -35,7 +39,7 @@ $variants: 'single-line-container', 'multi-line-container';
     }
   }
 
-  &[data-validation="default"] {
+  &[data-validation='default'] {
     background-color: simple-var($sys-neutral-background1-level);
     border-color: simple-var($sys-neutral-decor-default);
 
@@ -54,7 +58,7 @@ $variants: 'single-line-container', 'multi-line-container';
     }
   }
 
-  &[data-validation="error"] {
+  &[data-validation='error'] {
     background-color: simple-var($sys-red-background1-level);
     border-color: simple-var($sys-red-decor-default);
 
@@ -73,7 +77,7 @@ $variants: 'single-line-container', 'multi-line-container';
     }
   }
 
-  &[data-validation="warning"] {
+  &[data-validation='warning'] {
     background-color: simple-var($sys-yellow-background1-level);
     border-color: simple-var($sys-yellow-decor-default);
 
@@ -92,7 +96,7 @@ $variants: 'single-line-container', 'multi-line-container';
     }
   }
 
-  &[data-validation="success"] {
+  &[data-validation='success'] {
     background-color: simple-var($sys-green-background1-level);
     border-color: simple-var($sys-green-decor-default);
 
@@ -112,22 +116,32 @@ $variants: 'single-line-container', 'multi-line-container';
   }
 
   &[data-selectable] {
-    &, input, select, textarea, span {
+    &,
+    input,
+    select,
+    textarea,
+    span {
       cursor: pointer;
     }
   }
 
   &[data-readonly] {
-    &, input, select, textarea, span {
+    &,
+    input,
+    select,
+    textarea,
+    span {
       cursor: default;
     }
 
-    &, &:hover {
+    &,
+    &:hover {
       background-color: simple-var($sys-neutral-decor-disabled);
       border-color: simple-var($sys-neutral-decor-disabled);
     }
 
-    &:focus-within, &[data-focused] {
+    &:focus-within,
+    &[data-focused] {
       @include outline-var($container-focused-m);
 
       background-color: simple-var($sys-neutral-decor-disabled);
@@ -137,11 +151,18 @@ $variants: 'single-line-container', 'multi-line-container';
   }
 
   &[data-disabled] {
-    &, input, select, textarea, span {
+    &,
+    input,
+    select,
+    textarea,
+    span {
       cursor: not-allowed;
     }
 
-    &, &:focus-within, &[data-focused], &:hover {
+    &,
+    &:focus-within,
+    &[data-focused],
+    &:hover {
       background-color: simple-var($sys-neutral-background);
       border-color: simple-var($sys-neutral-decor-disabled);
       outline: none;

package/dist/components/FieldSelect/FieldSelectBase.d.ts

@@ -1,31 +0,0 @@
-import { KeyboardEventHandler, MouseEventHandler, RefCallback, RefObject } from 'react';
-import { SELECTION_MODE } from './constants';
-import { ExtendedOption, FieldSelectBaseProps, Option } from './types';
-type BaseProps = Omit<FieldSelectBaseProps, 'open' | 'onOpenChange' | 'options'> & Required<Pick<FieldSelectBaseProps, 'open' | 'onOpenChange'>> & {
-    localRef: RefObject<HTMLInputElement>;
-    options: ExtendedOption[];
-    onClear: MouseEventHandler<HTMLButtonElement>;
-    onChange(option: Option): () => void;
-    inputValue: string;
-    onInputValueChange(value: string): void;
-    displayedValue?: string;
-    valueToCopy: string;
-    onInputKeyDown: KeyboardEventHandler<HTMLInputElement>;
-    onButtonKeyDown: KeyboardEventHandler<HTMLButtonElement>;
-    showClearButton: boolean;
-    clearButtonRef: RefObject<HTMLButtonElement>;
-    copyButtonRef: RefObject<HTMLButtonElement>;
-    onClick?: MouseEventHandler<HTMLElement>;
-    onContainerPrivateMouseDown?: MouseEventHandler<HTMLElement>;
-    onDroplistFocusLeave(direction: string): void;
-    firstDroplistItemRefCallback: RefCallback<HTMLButtonElement>;
-};
-type Props = ({
-    selectionMode: typeof SELECTION_MODE.Single;
-    selected: Option;
-} & BaseProps) | ({
-    selectionMode: typeof SELECTION_MODE.Multi;
-    selected: Option[];
-} & BaseProps);
-export declare const FieldSelectBase: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/components/FieldSelect/FieldSelectBase.js

@@ -1,51 +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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import mergeRefs from 'merge-refs';
-import { forwardRef, useMemo, } from 'react';
-import { Droplist } from '@snack-uikit/droplist';
-import { InputPrivate, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
-import { extractSupportProps } from '@snack-uikit/utils';
-import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
-import { FieldContainerPrivate } from '../../helperComponents';
-import { useCopyButton } from '../../hooks';
-import { useHandlers } from '../FieldDate/hooks/useHandlers';
-import { FieldDecorator } from '../FieldDecorator';
-import { SELECTION_MODE } from './constants';
-import { getArrowIcon } from './helpers';
-import styles from './styles.module.css';
-export const FieldSelectBase = forwardRef((_a, ref) => {
-    var { selectionMode, onClear, showClearButton, clearButtonRef, copyButtonRef, onChange, inputValue, onInputValueChange, displayedValue, valueToCopy, localRef, onInputKeyDown: onInputKeyDownProp, onButtonKeyDown: onButtonKeyDownProp, id, name, placeholder, options, disabled = false, readonly = false, searchable = true, showCopyButton = true, open, onOpenChange, onFocus, onBlur, onContainerPrivateMouseDown, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, locale, noDataText = (locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? 'Нет данных' : 'No data', firstDroplistItemRefCallback, onDroplistFocusLeave } = _a, rest = __rest(_a, ["selectionMode", "onClear", "showClearButton", "clearButtonRef", "copyButtonRef", "onChange", "inputValue", "onInputValueChange", "displayedValue", "valueToCopy", "localRef", "onInputKeyDown", "onButtonKeyDown", "id", "name", "placeholder", "options", "disabled", "readonly", "searchable", "showCopyButton", "open", "onOpenChange", "onFocus", "onBlur", "onContainerPrivateMouseDown", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "locale", "noDataText", "firstDroplistItemRefCallback", "onDroplistFocusLeave"]);
-    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
-    const Item = selectionMode === SELECTION_MODE.Single ? Droplist.ItemSingle : Droplist.ItemMultiple;
-    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
-    const { onInputKeyDown: inputKeyDownNavigationHandler, inputTabIndex, setInitialTabIndices, buttons, } = useButtonNavigation({
-        inputRef: localRef,
-        buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
-        onButtonKeyDown: onButtonKeyDownProp,
-        readonly,
-        submitKeys: ['Enter', 'Space', 'Tab'],
-    });
-    const onInputKeyDownHandler = useHandlers([
-        inputKeyDownNavigationHandler,
-        onInputKeyDownProp,
-    ]);
-    const onFocusLeaveHandler = useHandlers([
-        (direction) => {
-            if (direction === 'common')
-                setInitialTabIndices();
-        },
-        onDroplistFocusLeave,
-    ]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Droplist, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, triggerClickByKeys: !searchable, placement: 'bottom', onFocusLeave: onFocusLeaveHandler, firstElementRefCallback: firstDroplistItemRefCallback, "data-test-id": 'field-select__list' }, (readonly || disabled ? { open: false } : { open, onOpenChange }), { triggerElement: _jsxs(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: open, selectable: !searchable, inputRef: localRef, prefix: prefixIcon, onMouseDown: onContainerPrivateMouseDown, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', placeholder: displayedValue ? undefined : placeholder, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, disabled: disabled, "data-size": size, "data-test-id": 'field-select__input', onKeyDown: onInputKeyDownHandler, onChange: searchable ? onInputValueChange : undefined, readonly: !searchable || readonly, value: inputValue, tabIndex: inputTabIndex }), displayedValue && (_jsx("span", { className: styles.displayValue, "data-test-id": 'field-select__displayed-value', children: displayedValue }))] }), children: options.length === 0 ? (_jsx(Droplist.NoData, { size: size, label: noDataText, "data-test-id": 'field-select__no-data' })) : (options.map(option => (_jsx(Item, Object.assign({ onChange: onChange(option), "data-test-id": 'field-select__list-option-' + option.value }, option, { option: option.label }), option.value)))) })) })));
-});

package/dist/components/FieldSelect/FieldSelectMulti.d.ts

@@ -1,37 +0,0 @@
-import { FocusEventHandler } from 'react';
-import { Option } from './types';
-export declare const FieldSelectMulti: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
-} & import("react").AriaAttributes & {
-    options: Option[];
-    open?: boolean | undefined;
-    onOpenChange?(value: boolean): void;
-    searchable?: boolean | undefined;
-    showCopyButton?: boolean | undefined;
-    showClearButton?: boolean | undefined;
-    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    noDataText?: string | undefined;
-    locale?: Intl.Locale | undefined;
-} & {
-    disabled?: boolean | undefined;
-    readonly?: boolean | undefined;
-    name?: string | undefined;
-    placeholder?: string | undefined;
-    id?: string | undefined;
-    onFocus?: FocusEventHandler<HTMLInputElement> | undefined;
-    onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
-} & {
-    showHintIcon?: boolean | undefined;
-    validationState?: import("../../types").ValidationState | undefined;
-    hint?: string | undefined;
-    size?: import("@snack-uikit/input-private").Size | undefined;
-    label?: string | undefined;
-    className?: string | undefined;
-    labelTooltip?: string | undefined;
-    required?: boolean | undefined;
-    labelTooltipPlacement?: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
-} & {
-    value?: string[] | undefined;
-    onChange?(value: string[]): void;
-    getSelectedItemsText?(amount: number): string;
-} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMulti.js

@@ -1,89 +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 { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
-import { DEFAULT_LOCALE, SELECTION_MODE } from './constants';
-import { FieldSelectBase } from './FieldSelectBase';
-import { getDisplayedValue } from './helpers';
-import { useList } from './hooks';
-export const FieldSelectMulti = forwardRef((_a, ref) => {
-    var { value: valueProp, onChange, options, disabled = false, readonly = false, searchable = true, required = false, open, onOpenChange, locale = DEFAULT_LOCALE, getSelectedItemsText = number => ((locale === null || locale === void 0 ? void 0 : locale.language) === 'ru' ? `Выбрано: ${number}` : `Selected: ${number}`), showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, onFocus, onBlur } = _a, rest = __rest(_a, ["value", "onChange", "options", "disabled", "readonly", "searchable", "required", "open", "onOpenChange", "locale", "getSelectedItemsText", "showCopyButton", "showClearButton", "onFocus", "onBlur"]);
-    const selectionMode = SELECTION_MODE.Multi;
-    const [value, setValue] = useUncontrolledProp(valueProp, [], onChange);
-    const selected = useMemo(() => options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value)), [options, value]);
-    const displayedValue = getDisplayedValue({ selectionMode, selected, getSelectedItemsText });
-    const valueToCopy = selected.map(op => op.label).join(', ');
-    const [inputValue, setInputValue] = useState('');
-    const showAdditionalButton = Boolean((value === null || value === void 0 ? void 0 : value.length) && value.length > 0 && !disabled);
-    const isChecked = useCallback((option) => Boolean(selected.find(op => op.value === option.value)), [selected]);
-    const [isFocused, setIsFocused] = useState(false);
-    const stayOpen = useRef(false);
-    const waitingForSearchStart = searchable && !isFocused;
-    const showDisplayValue = displayedValue && (!searchable || waitingForSearchStart);
-    const { isOpen, setIsOpen, localRef, extendedOptions, onInputKeyDown, onInputValueChange, onButtonKeyDown, clearButtonRef, copyButtonRef, showClearButton, showCopyButton, onDroplistFocusLeave, firstDroplistItemRefCallback, } = useList({
-        open,
-        onOpenChange,
-        disabled,
-        readonly,
-        inputValue,
-        setInputValue,
-        searchable,
-        options,
-        isChecked,
-        showAdditionalButton,
-        showCopyButton: showCopyButtonProp,
-        showClearButton: showClearButtonProp,
-    });
-    const handleOpenChange = (isOpen) => {
-        if (stayOpen.current) {
-            stayOpen.current = false;
-            return;
-        }
-        setInputValue('');
-        setIsOpen(isOpen);
-    };
-    const handlePreventListClose = event => {
-        event.preventDefault();
-        if (isOpen && waitingForSearchStart) {
-            stayOpen.current = true;
-        }
-    };
-    const handleClear = () => {
-        var _a, _b;
-        setValue([]);
-        setInputValue('');
-        stayOpen.current = false;
-        if (required) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setIsOpen(true);
-        }
-        else {
-            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.blur();
-            setIsOpen(false);
-        }
-    };
-    const handleChange = (option) => () => {
-        setValue((selected.find(op => op.value === option.value)
-            ? selected.filter(op => op.value !== option.value)
-            : [...selected, option]).map(op => op.value));
-    };
-    const handleFocus = event => {
-        setIsFocused(true);
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    };
-    const handleBlur = event => {
-        setIsFocused(false);
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-    };
-    return (_jsx(FieldSelectBase, Object.assign({}, rest, { ref: ref, localRef: localRef, selectionMode: selectionMode, options: extendedOptions, selected: selected, disabled: disabled, readonly: readonly, required: required, searchable: searchable, onChange: handleChange, onClear: handleClear, displayedValue: showDisplayValue ? displayedValue : '', valueToCopy: valueToCopy, inputValue: inputValue, onInputValueChange: onInputValueChange, onInputKeyDown: onInputKeyDown, clearButtonRef: clearButtonRef, copyButtonRef: copyButtonRef, onButtonKeyDown: onButtonKeyDown, open: isOpen, onOpenChange: handleOpenChange, locale: locale, showCopyButton: showCopyButton, showClearButton: showClearButton, onFocus: handleFocus, onBlur: handleBlur, onContainerPrivateMouseDown: handlePreventListClose, onDroplistFocusLeave: onDroplistFocusLeave, firstDroplistItemRefCallback: firstDroplistItemRefCallback })));
-});

package/dist/components/FieldSelect/constants.d.ts

@@ -1,7 +0,0 @@
-import { Option } from './types';
-export declare const EMPTY_OPTION: Option;
-export declare const DEFAULT_LOCALE: Intl.Locale;
-export declare const SELECTION_MODE: {
-    readonly Single: "single";
-    readonly Multi: "multi";
-};

package/dist/components/FieldSelect/constants.js

@@ -1,6 +0,0 @@
-export const EMPTY_OPTION = { value: '', label: '' };
-export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
-export const SELECTION_MODE = {
-    Single: 'single',
-    Multi: 'multi',
-};

package/dist/components/FieldSelect/helpers/getArrowIcon.d.ts

@@ -1,8 +0,0 @@
-import { Size } from '@snack-uikit/input-private';
-export declare function getArrowIcon({ size, open }: {
-    size: Size;
-    open: boolean;
-}): {
-    ArrowIcon: ({ size, ...props }: import("@snack-uikit/icons/dist/components/interface-icons/chevronUp").ISvgIconProps) => import("react/jsx-runtime").JSX.Element;
-    arrowIconSize: 16 | 24;
-};

package/dist/components/FieldSelect/helpers/getArrowIcon.js

@@ -1,8 +0,0 @@
-import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { ICON_SIZE, SIZE } from '@snack-uikit/input-private';
-export function getArrowIcon({ size, open }) {
-    return {
-        ArrowIcon: open ? ChevronUpSVG : ChevronDownSVG,
-        arrowIconSize: size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S,
-    };
-}