@cloud-ru/uikit-product-mobile-fields 0.11.24 → 0.11.25

package/dist/esm/components/MobileFieldDate/MobileFieldDate.js

@@ -0,0 +1,164 @@
+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 cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { CalendarSVG } from '@sbercloud/uikit-product-icons';
+import { MobileDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { Calendar } from '@snack-uikit/calendar';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { ICON_SIZE, InputPrivate, runAfterRerender, SIZE, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
+import { Scroll } from '@snack-uikit/scroll';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CONTAINER_VARIANT, DEFAULT_LOCALE, SlotKey, VALIDATION_STATE } from '../../constants';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { useCopyButton, useDateField, useFocusHandlers, useHandlers } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
+import styles from './styles.module.css';
+export const MobileFieldDate = forwardRef((_a, ref) => {
+    var _b;
+    var { id, name, value: valueProp, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, open, onOpenChange, onChange, onFocus, onBlur: onBlurProp, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, buildCellProps, error, mode, autoFocus } = _a, rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode", "autoFocus"]);
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const copyButtonRef = useRef(null);
+    const calendarIconSize = size === SIZE.S ? ICON_SIZE.Xs : ICON_SIZE.S;
+    const showDropList = isOpen && !readonly && !disabled;
+    const showAdditionalButton = Boolean(valueProp && !disabled);
+    const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
+    const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const showSeconds = mode === 'date-time' ? ((_b = rest.showSeconds) !== null && _b !== void 0 ? _b : true) : undefined;
+    const fieldValidationState = getValidationState({ validationState, error });
+    const navigationStartRef = useRef(null);
+    const checkForLeavingFocus = useCallback((event) => {
+        if (event.key === 'ArrowDown') {
+            setIsOpen(true);
+            setTimeout(() => { var _a; return (_a = navigationStartRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+        }
+    }, [setIsOpen]);
+    const handleClear = useCallback(() => {
+        var _a, _b, _c;
+        onChange && onChange(undefined);
+        if ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+            localRef.current.value = '';
+        }
+        if (required) {
+            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            setIsOpen(true);
+        }
+        else {
+            (_c = localRef.current) === null || _c === void 0 ? void 0 : _c.blur();
+            setIsOpen(false);
+        }
+    }, [onChange, required, setIsOpen]);
+    const getStringDateValue = useCallback((date) => {
+        if (!date)
+            return '';
+        if (mode === 'date') {
+            return date.toLocaleDateString(DEFAULT_LOCALE);
+        }
+        return date.toLocaleString(DEFAULT_LOCALE, {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: showSeconds ? '2-digit' : undefined,
+        });
+    }, [mode, showSeconds]);
+    const valueToCopy = getStringDateValue(valueProp);
+    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy });
+    const calendarIcon = useMemo(() => ({
+        active: false,
+        show: true,
+        id: 'calendarIcon',
+        render: props => (_jsx(CalendarSVG, Object.assign({}, props, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size }))),
+    }), [calendarIconSize, size]);
+    const memorizedButtons = useMemo(() => [clearButtonSettings, copyButtonSettings, calendarIcon], [clearButtonSettings, copyButtonSettings, calendarIcon]);
+    const { value, handleChange, handleClick: dateInputClickHandler, handleKeyDown: dateInputKeyDownHandler, handleBlur: dateInputBlurHandler, mask, setInputFocus, } = useDateField({
+        inputRef: localRef,
+        onChange,
+        readonly,
+        locale: DEFAULT_LOCALE,
+        setIsOpen,
+        mode,
+        showSeconds,
+    });
+    const setInputFocusFromButtons = useCallback(() => setInputFocus(mode === 'date' ? SlotKey.Year : SlotKey.Seconds), [mode, setInputFocus]);
+    const { postfixButtons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = useButtonNavigation({
+        setInputFocus: setInputFocusFromButtons,
+        inputRef: localRef,
+        postfixButtons: memorizedButtons,
+        onButtonKeyDown: checkForLeavingFocus,
+        readonly,
+        submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+    const handleSelectDate = (date) => {
+        var _a;
+        onChange && onChange(date);
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        setIsOpen(false);
+        if (localRef.current) {
+            localRef.current.value = getStringDateValue(date);
+        }
+    };
+    const handleCalendarFocusLeave = () => {
+        setInitialTabIndices();
+        // TODO: find out why it works not as expected (focus is moved to the next element instead of the focused one)
+        // maybe floating-ui causes the problem
+        runAfterRerender(() => {
+            setInputFocus(SlotKey.Day);
+            setIsOpen(false);
+        });
+    };
+    const handleInputKeyDown = useHandlers([
+        checkForLeavingFocus,
+        dateInputKeyDownHandler,
+        navigationInputKeyDownHandler,
+    ]);
+    useEffect(() => {
+        var _a;
+        if (open) {
+            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [open]);
+    useEffect(() => {
+        if (localRef.current && document.activeElement !== localRef.current) {
+            localRef.current.value = getStringDateValue(valueProp);
+        }
+    }, [getStringDateValue, valueProp]);
+    const onFocusByKeyboard = useCallback((e) => {
+        setInputFocus();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }, [onFocus, setInputFocus]);
+    const inputHandlers = useFocusHandlers({
+        onFocusByClick: onFocus,
+        onFocusByKeyboard,
+    });
+    const onBlur = useHandlers([dateInputBlurHandler, inputHandlers.onBlur, onBlurProp]);
+    const onClick = useCallback((e) => {
+        dateInputClickHandler();
+        if (isOpen) {
+            // stop the event because want picker to stay opened
+            e.stopPropagation();
+        }
+    }, [dateInputClickHandler, isOpen]);
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(MobileDropdown, Object.assign({}, (readonly || disabled
+            ? { open: false }
+            : {
+                open: showDropList,
+                onOpenChange: setIsOpen,
+            }), { content: _jsx(Scroll, { className: cn(styles.calendarWrapper, mode === 'date-time' ? styles.dateTimeWrapper : styles.dateWrapper), "data-size": size, barHideStrategy: 'never', children: _jsx(Calendar, { mode: mode, size: 'l', value: valueProp, showSeconds: showSeconds, onChangeValue: handleSelectDate, buildCellProps: buildCellProps, navigationStartRef: navigationStartRef, onFocusLeave: handleCalendarFocusLeave, locale: DEFAULT_LOCALE, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', inputMode: 'numeric', className: styles.readonlyCursor, id: id, name: name, autoFocus: autoFocus, "data-test-id": 'field-date__input' }) }) })) })));
+});

package/dist/esm/components/MobileFieldDate/constants.d.ts

@@ -0,0 +1,10 @@
+import { Slot } from './types';
+export declare enum SlotKey {
+    Day = "D",
+    Month = "M",
+    Year = "Y"
+}
+export declare const MASK: Record<string, string>;
+export declare const DEFAULT_LOCALE: Intl.Locale;
+export declare const SLOTS: Record<SlotKey | string, Slot>;
+export declare const SLOTS_PLACEHOLDER: Record<string, Record<string, string>>;

package/dist/esm/components/MobileFieldDate/constants.js

@@ -0,0 +1,28 @@
+export var SlotKey;
+(function (SlotKey) {
+    SlotKey["Day"] = "D";
+    SlotKey["Month"] = "M";
+    SlotKey["Year"] = "Y";
+})(SlotKey || (SlotKey = {}));
+export const MASK = {
+    'ru-RU': 'ДД.ММ.ГГГГ',
+    'en-US': 'DD.MM.YYYY',
+};
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');
+export const SLOTS = {
+    [SlotKey.Day]: { start: 0, end: 2, max: 31, min: 1 },
+    [SlotKey.Month]: { start: 3, end: 5, max: 12, min: 1 },
+    [SlotKey.Year]: { start: 6, end: 10, max: 2100, min: 1900 },
+};
+export const SLOTS_PLACEHOLDER = {
+    'ru-RU': {
+        [SlotKey.Day]: 'ДД',
+        [SlotKey.Month]: 'ММ',
+        [SlotKey.Year]: 'ГГГГ',
+    },
+    'en-US': {
+        [SlotKey.Day]: 'DD',
+        [SlotKey.Month]: 'MM',
+        [SlotKey.Year]: 'YYYY',
+    },
+};

package/dist/esm/components/MobileFieldDate/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MobileFieldDate';
+export { parseDate } from './utils';

package/dist/esm/components/MobileFieldDate/index.js

@@ -0,0 +1,2 @@
+export * from './MobileFieldDate';
+export { parseDate } from './utils';

package/dist/esm/components/MobileFieldDate/styles.module.css

@@ -0,0 +1,57 @@
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+  display:block;
+  width:100%;
+}
+
+.dateWrapper{
+  height:384px;
+}
+
+.dateTimeWrapper{
+  height:458px;
+  padding-bottom:8px;
+}
+
+input.readonlyCursor{
+  cursor:pointer;
+  caret-color:transparent;
+}
+
+.calendarWrapper{
+  width:100%;
+}
+.calendarWrapper[data-size=s]{
+  min-width:240px;
+  min-height:256px;
+}
+.calendarWrapper[data-size=m]{
+  min-width:280px;
+  min-height:308px;
+}
+.calendarWrapper[data-size=l]{
+  min-width:304px;
+  min-height:328px;
+}
+
+.container .calendarIcon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+.container .calendarIcon[data-size=s]{
+  width:var(--size-icon-container-xs, 16px) !important;
+  height:var(--size-icon-container-xs, 16px) !important;
+}
+.container .calendarIcon[data-size=m]{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.container .calendarIcon[data-size=l]{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+.container:hover .calendarIcon, .container:focus-within .calendarIcon, .container[data-focused] .calendarIcon{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.container[data-disabled] .calendarIcon, .container[data-readonly] .calendarIcon{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}

package/dist/esm/components/MobileFieldDate/types.d.ts

@@ -0,0 +1,6 @@
+export type Slot = {
+    start: number;
+    end: number;
+    max: number;
+    min: number;
+};

package/dist/esm/components/MobileFieldDate/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/MobileFieldDate/utils.d.ts

@@ -0,0 +1,9 @@
+import { SlotKey } from './constants';
+export declare function getSlotKey(index: number | null): string | null;
+export declare function getNextSlotKey(slotKey: string | null): SlotKey.Month | SlotKey.Year;
+export declare function getPrevSlotKey(slotKey: string | null): SlotKey.Day | SlotKey.Month;
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+export declare function parseDate(date: string): Date;

package/dist/esm/components/MobileFieldDate/utils.js

@@ -0,0 +1,43 @@
+import { SlotKey, SLOTS } from './constants';
+export function getSlotKey(index) {
+    if (index !== null) {
+        for (const key in SLOTS) {
+            if (index >= SLOTS[key].start && index <= SLOTS[key].end) {
+                return key;
+            }
+        }
+    }
+    return null;
+}
+export function getNextSlotKey(slotKey) {
+    switch (slotKey) {
+        case SlotKey.Day: {
+            return SlotKey.Month;
+        }
+        case SlotKey.Month:
+        case SlotKey.Year:
+        default: {
+            return SlotKey.Year;
+        }
+    }
+}
+export function getPrevSlotKey(slotKey) {
+    switch (slotKey) {
+        case SlotKey.Year: {
+            return SlotKey.Month;
+        }
+        case SlotKey.Month:
+        case SlotKey.Day:
+        default: {
+            return SlotKey.Day;
+        }
+    }
+}
+/**
+ * Преобразует строковое значение поля FieldDate в тип Date
+ * @function  helper
+ */
+export function parseDate(date) {
+    const values = date.split('.');
+    return new Date(Number(values[2]), Number(values[1]) - 1, Number(values[0]));
+}

package/dist/esm/components/MobileFieldSelect/MobileFieldSelect.d.ts

@@ -0,0 +1,2 @@
+import { MobileFieldSelectProps } from './types';
+export declare const MobileFieldSelect: import("react").ForwardRefExoticComponent<MobileFieldSelectProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/MobileFieldSelect/MobileFieldSelect.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { MobileFieldSelectMultiple } from './MobileFieldSelectMultiple';
+import { MobileFieldSelectSingle } from './MobileFieldSelectSingle';
+import { isFieldSelectMultipleProps, isFieldSelectSingleProps } from './utils';
+export const MobileFieldSelect = forwardRef((props, ref) => {
+    if (isFieldSelectMultipleProps(props)) {
+        return _jsx(MobileFieldSelectMultiple, Object.assign({}, props, { ref: ref }));
+    }
+    if (isFieldSelectSingleProps(props)) {
+        return _jsx(MobileFieldSelectSingle, Object.assign({}, props, { ref: ref }));
+    }
+    return null;
+});

package/dist/esm/components/MobileFieldSelect/MobileFieldSelectMultiple.d.ts

@@ -0,0 +1,3 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { MobileFieldSelectMultipleProps } from './types';
+export declare const MobileFieldSelectMultiple: ForwardRefExoticComponent<PropsWithoutRef<MobileFieldSelectMultipleProps> & RefAttributes<HTMLInputElement>>;

package/dist/esm/components/MobileFieldSelect/MobileFieldSelectMultiple.js

@@ -0,0 +1,148 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef, useState, } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileModalCustom } from '@sbercloud/uikit-product-mobile-modal';
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+import { FieldDecorator } from '@snack-uikit/fields';
+import { InputPrivate } from '@snack-uikit/input-private';
+import { kindFlattenItems, List } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
+import { extractSupportProps, isBrowser, useLayoutEffect, useValueControl } from '@snack-uikit/utils';
+import { FieldContainerPrivate, ItemContent } from '../../helperComponents';
+import { usePostfix, usePrefix } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
+import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
+import { useSearch } from './legacy';
+import styles from './styles.module.css';
+import { extractFieldDecoratorProps, extractListProps, getArrowIcon, updateMultipleItems } from './utils';
+const defaultSelectedOptionFormatter = item => 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+(item === null || item === void 0 ? void 0 : item.content.option) || '';
+export const MobileFieldSelectMultiple = forwardRef((_a, ref) => {
+    var { id, name, placeholder, size = 's', options, virtualized, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable: searchableProp = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, enableFuzzySearch = true, autocomplete = false, autoFocus, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = _a, rest = __rest(_a, ["id", "name", "placeholder", "size", "options", "virtualized", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "enableFuzzySearch", "autocomplete", "autoFocus", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "open", "onOpenChange", "selectedOptionFormatter"]);
+    const { t } = useLocale('MobileFields');
+    const localRef = useRef(null);
+    const contentRef = useRef(null);
+    const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
+    const [value, setValue] = useValueControl({
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+    });
+    const [{ selectedItems, items = [] }, setItems] = useState(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
+    const { flattenItems } = useMemo(() => kindFlattenItems({ items }), [items]);
+    const searchable = (searchableProp && Object.values(flattenItems).length > 5) || autocomplete || Boolean(addOptionByEnter);
+    const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter }));
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const postfixSettings = usePostfix({ postfix, disabled });
+    useLayoutEffect(() => {
+        setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
+    }, [options, value]);
+    const onClear = () => {
+        var _a;
+        setValue(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.disabled).map(item => item.id));
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (rest.required) {
+            setOpen(true);
+        }
+    };
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
+    const { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+        readonly,
+        size,
+        showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(item => !item.disabled)),
+        showCopyButton: false,
+        inputRef: localRef,
+        onClear,
+    });
+    const commonHandleOnKeyDown = useHandleOnKeyDown({
+        inputKeyDownNavigationHandler,
+        onInputKeyDownProp,
+        setOpen,
+    });
+    const handleItemDelete = useHandleDeleteItem(setValue);
+    const handleOnKeyDown = (onKeyDown) => (e) => {
+        if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
+            if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && !selectedItems.slice(-1)[0].disabled) {
+                handleItemDelete(selectedItems.pop())();
+            }
+        }
+        if (e.code === 'Enter') {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
+            if (!(value !== null && value !== void 0 ? value : []).includes(inputValue)) {
+                setValue((value) => (value !== null && value !== void 0 ? value : []).concat(inputValue));
+                updateInputValue();
+            }
+        }
+        if (!open && prevInputValue.current !== inputValue) {
+            setOpen(true);
+        }
+        commonHandleOnKeyDown(onKeyDown)(e);
+    };
+    const handleOpenChange = (open) => {
+        if (!readonly && !disabled && isBrowser() && !buttonsRefs.includes(document.activeElement)) {
+            setOpen(open);
+            if (!open) {
+                updateInputValue();
+            }
+        }
+    };
+    const handleApplyChange = () => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.id));
+        handleOpenChange(false);
+        setInputValue('');
+    };
+    const handleBlur = (e) => {
+        var _a;
+        if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
+            updateInputValue();
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        }
+    };
+    const searcher = useSearch(items, enableFuzzySearch);
+    const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : searcher(inputValue);
+    const fieldValidationState = getValidationState({ validationState, error: rest.error });
+    const listJsx = (_jsx("div", { className: styles.listWrapper, children: _jsx(List, Object.assign({}, extractListProps(rest), { items: result, size: 'l', scroll: true, virtualized: virtualized, search: searchable
+                ? {
+                    value: inputValue,
+                    onChange: setInputValue,
+                    onKeyDown: handleOnKeyDown(),
+                }
+                : undefined, contentRender: (_a) => {
+                var { content } = _a, rest = __rest(_a, ["content"]);
+                if (typeof content !== 'function') {
+                    return _jsx(ItemContent, Object.assign({}, content, rest));
+                }
+                return content;
+            }, selection: {
+                mode: 'multiple',
+                value: value,
+                onChange: value => {
+                    setValue(value);
+                },
+            } })) }));
+    return (_jsxs(_Fragment, { children: [_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: fieldValidationState, children: _jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: fieldValidationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: (prefixIcon || prefixSettings.show) && (_jsxs(_Fragment, { children: [prefixIcon, prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })] })), onClick: () => {
+                        handleOpenChange(true);
+                    }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedItems &&
+                                        selectedItems.map(option => {
+                                            var _a;
+                                            return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral' }, option.id));
+                                        }), _jsx("div", { className: styles.inputWrapper, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: undefined, value: '', inputMode: 'none', "data-test-id": 'field-select__input', onBlur: handleBlur, className: styles.readonlyCursor, autoFocus: autoFocus }) })] }), _jsxs("div", { className: styles.postfix, children: [postfixButtons, postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] }) }) })), _jsxs(MobileModalCustom, { open: open, onClose: () => handleOpenChange(false), size: searchable ? 'full' : 'auto', children: [rest.label && _jsx(MobileModalCustom.Header, { title: rest.label }), searchable ? listJsx : _jsx(MobileModalCustom.Body, { className: styles.bodyNoPadding, content: listJsx }), _jsx(MobileModalCustom.Footer, { actions: _jsxs("div", { className: styles.footer, children: [_jsxs("div", { className: styles.footerTopLine, children: [_jsx("span", { className: styles.counter, children: `${t('selectedN')}${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0}` }), _jsx(ButtonFunction, { size: 'm', label: t('resetAll'), onClick: onClear, "data-test-id": 'field-select__reset-all-button' })] }), _jsx(ButtonFilled, { fullWidth: true, label: t('select'), "data-test-id": 'field-select__approve-button', onClick: handleApplyChange, size: 'l' })] }) })] })] }));
+});

package/dist/esm/components/MobileFieldSelect/MobileFieldSelectSingle.d.ts

@@ -0,0 +1,3 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+import { MobileFieldSelectSingleProps } from './types';
+export declare const MobileFieldSelectSingle: ForwardRefExoticComponent<PropsWithoutRef<MobileFieldSelectSingleProps> & RefAttributes<HTMLInputElement>>;