@sberbusiness/triplex-next 1.45.0 → 1.46.0

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPicker.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
+import { MonthYearPickerUtils } from "../../MonthYearField/utils.js";
+import { ChipMonthYearPickerTarget } from "./ChipMonthYearPickerTarget.js";
+import { dateFormatYYYYMMDD, globalLimitRange } from "../../../consts/DateConst.js";
+import { DatePickerExtended } from "../../DatePickerExtended/DatePickerExtended.js";
+import { DropdownMobileInput } from "../../Dropdown/mobile/DropdownMobileInput.js";
+import { ECalendarPickType } from "../../Calendar/enums.js";
+import { s as styles } from "../../../chunks/Chip-Bi7plvOY.js";
+const ChipMonthYearPicker = React__default.forwardRef((props, ref) => {
+  const {
+    className,
+    size,
+    value,
+    placeholder,
+    format = dateFormatYYYYMMDD,
+    limitRange = globalLimitRange,
+    type,
+    label,
+    displayedValue,
+    disabled,
+    clearButtonProps,
+    onChange,
+    ...rest
+  } = props;
+  const pickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);
+  const handleClear = () => {
+    onChange("");
+  };
+  const renderTarget = () => {
+    const selected = pickerValues.calendarDate !== null;
+    return /* @__PURE__ */ jsx(
+      ChipMonthYearPickerTarget,
+      {
+        type,
+        size,
+        selected,
+        disabled,
+        clearButtonProps,
+        onClear: handleClear,
+        children: selected ? displayedValue ?? pickerValues.inputString : label
+      }
+    );
+  };
+  const renderDropdownHeaderTarget = () => /* @__PURE__ */ jsx(DropdownMobileInput, { value: pickerValues.inputString, placeholder, readOnly: true });
+  const handleDateChange = (date) => {
+    onChange(date.format(format));
+  };
+  return /* @__PURE__ */ jsx(
+    DatePickerExtended,
+    {
+      className: clsx(styles.chipGroupItem, className),
+      renderTarget,
+      renderDropdownHeaderTarget,
+      pickedDate: pickerValues.calendarDate,
+      pickType: ECalendarPickType.MONTH_YEAR,
+      format,
+      limitRange,
+      onDateChange: handleDateChange,
+      ...rest,
+      ref
+    }
+  );
+});
+ChipMonthYearPicker.displayName = "ChipMonthYearPicker";
+export {
+  ChipMonthYearPicker
+};
+//# sourceMappingURL=ChipMonthYearPicker.js.map

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipMonthYearPicker.js","sources":["../../../../src/components/Chip/ChipMonthYearPicker/ChipMonthYearPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport moment from \"moment\";\nimport { IMonthYearFieldProps } from \"../../MonthYearField/types\";\nimport { MonthYearPickerUtils } from \"../../MonthYearField/utils\";\nimport { IChipProps } from \"../Chip\";\nimport { ChipMonthYearPickerTarget, IChipMonthYearPickerTargetProps } from \"./ChipMonthYearPickerTarget\";\nimport { dateFormatYYYYMMDD, globalLimitRange } from \"../../../consts/DateConst\";\nimport { DatePickerExtended } from \"../../DatePickerExtended/DatePickerExtended\";\nimport { DropdownMobileInput } from \"../../Dropdown/mobile/DropdownMobileInput\";\nimport { ECalendarPickType } from \"../../Calendar/enums\";\nimport styles from \"../styles/Chip.module.less\";\n\n/** Свойства компонента ChipMonthYearPicker. */\nexport interface IChipMonthYearPickerProps\n    extends\n        Omit<IMonthYearFieldProps, \"status\" | \"label\" | \"onClear\" | \"targetProps\" | \"pickType\">,\n        Pick<IChipProps, \"type\" | \"disabled\"> {\n    /** Название поля, когда не выбрано значение. */\n    label: React.ReactNode;\n    /** Лейбл, отображаемый вместо выбранного значения. */\n    displayedValue?: React.ReactNode;\n    /** Свойства кнопки очищения значения, например aria-label. */\n    clearButtonProps?: IChipMonthYearPickerTargetProps[\"clearButtonProps\"];\n}\n\n/** MonthYearPicker с видом компонента Chip. */\nexport const ChipMonthYearPicker = React.forwardRef<HTMLDivElement, IChipMonthYearPickerProps>((props, ref) => {\n    const {\n        className,\n        size,\n        value,\n        placeholder,\n        format = dateFormatYYYYMMDD,\n        limitRange = globalLimitRange,\n        type,\n        label,\n        displayedValue,\n        disabled,\n        clearButtonProps,\n        onChange,\n        ...rest\n    } = props;\n    const pickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);\n\n    const handleClear = () => {\n        onChange(\"\");\n    };\n\n    const renderTarget = () => {\n        const selected = pickerValues.calendarDate !== null;\n\n        return (\n            <ChipMonthYearPickerTarget\n                type={type}\n                size={size}\n                selected={selected}\n                disabled={disabled}\n                clearButtonProps={clearButtonProps}\n                onClear={handleClear}\n            >\n                {selected ? (displayedValue ?? pickerValues.inputString) : label}\n            </ChipMonthYearPickerTarget>\n        );\n    };\n\n    const renderDropdownHeaderTarget = () => (\n        <DropdownMobileInput value={pickerValues.inputString} placeholder={placeholder} readOnly />\n    );\n\n    const handleDateChange = (date: moment.Moment) => {\n        onChange(date.format(format));\n    };\n\n    return (\n        <DatePickerExtended\n            className={clsx(styles.chipGroupItem, className)}\n            renderTarget={renderTarget}\n            renderDropdownHeaderTarget={renderDropdownHeaderTarget}\n            pickedDate={pickerValues.calendarDate}\n            pickType={ECalendarPickType.MONTH_YEAR}\n            format={format}\n            limitRange={limitRange}\n            onDateChange={handleDateChange}\n            {...rest}\n            ref={ref}\n        />\n    );\n});\n\nChipMonthYearPicker.displayName = \"ChipMonthYearPicker\";\n"],"names":["React"],"mappings":";;;;;;;;;;AA2BO,MAAM,sBAAsBA,eAAM,WAAsD,CAAC,OAAO,QAAQ;AAC3G,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,eAAe,qBAAqB,gBAAgB,OAAO,QAAQ,UAAU;AAEnF,QAAM,cAAc,MAAM;AACtB,aAAS,EAAE;AAAA,EACf;AAEA,QAAM,eAAe,MAAM;AACvB,UAAM,WAAW,aAAa,iBAAiB;AAE/C,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QAER,UAAA,WAAY,kBAAkB,aAAa,cAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvE;AAEA,QAAM,6BAA6B,MAC/B,oBAAC,qBAAA,EAAoB,OAAO,aAAa,aAAa,aAA0B,UAAQ,KAAA,CAAC;AAG7F,QAAM,mBAAmB,CAAC,SAAwB;AAC9C,aAAS,KAAK,OAAO,MAAM,CAAC;AAAA,EAChC;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,MAC/C;AAAA,MACA;AAAA,MACA,YAAY,aAAa;AAAA,MACzB,UAAU,kBAAkB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACb,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAED,oBAAoB,cAAc;"}

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPickerTarget.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useContext } from "react";
+import { C as Chip } from "../../../chunks/Chip-Bi7plvOY.js";
+import { ChipDropdownArrow } from "../ChipDropdownArrow.js";
+import { ChipClearButton } from "../ChipClearButton.js";
+import { DatePickerExtendedContext } from "../../DatePickerExtended/DatePickerExtendedContext.js";
+import { isKey } from "../../../utils/keyboard.js";
+const ChipMonthYearPickerTarget = React__default.forwardRef(
+  (props, ref) => {
+    const { children, size, selected, disabled, onKeyDown, onClick, onClear, clearButtonProps, ...restProps } = props;
+    const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);
+    const handleKeyDown = (event) => {
+      if (!disabled && (isKey(event.code, "ENTER") || isKey(event.code, "SPACE"))) {
+        event.preventDefault();
+        setDropdownOpen(!dropdownOpen);
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleClick = (event) => {
+      if (disabled) {
+        return;
+      }
+      setDropdownOpen(!dropdownOpen);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleClearButtonKeyDown = (event) => {
+      if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
+        event.stopPropagation();
+      }
+    };
+    const handleClearButtonClick = (event) => {
+      event.stopPropagation();
+      onClear();
+    };
+    const renderTargetPostfix = () => {
+      if (selected) {
+        return /* @__PURE__ */ jsx(
+          ChipClearButton,
+          {
+            ...clearButtonProps,
+            size,
+            disabled,
+            onClick: handleClearButtonClick,
+            onKeyDown: handleClearButtonKeyDown
+          }
+        );
+      } else {
+        return /* @__PURE__ */ jsx(ChipDropdownArrow, { size, rotated: dropdownOpen });
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Chip,
+      {
+        size,
+        selected,
+        disabled,
+        "aria-expanded": dropdownOpen,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        postfix: renderTargetPostfix(),
+        ...restProps,
+        ref,
+        children
+      }
+    );
+  }
+);
+ChipMonthYearPickerTarget.displayName = "ChipMonthYearPickerTarget";
+export {
+  ChipMonthYearPickerTarget
+};
+//# sourceMappingURL=ChipMonthYearPickerTarget.js.map

package/components/Chip/ChipMonthYearPicker/ChipMonthYearPickerTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipMonthYearPickerTarget.js","sources":["../../../../src/components/Chip/ChipMonthYearPicker/ChipMonthYearPickerTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { Chip, IChipProps } from \"../Chip\";\nimport { ChipDropdownArrow } from \"../ChipDropdownArrow\";\nimport { ChipClearButton, IChipClearButtonProps } from \"../ChipClearButton\";\nimport { DatePickerExtendedContext } from \"../../DatePickerExtended/DatePickerExtendedContext\";\nimport { isKey } from \"../../../utils/keyboard\";\n\n/** Свойства компонента ChipMonthYearPickerTarget. */\nexport interface IChipMonthYearPickerTargetProps extends IChipProps {\n    /** Обработчик очищения значения. */\n    onClear: () => void;\n    /** Свойства кнопки очищения значения, например aria-label. */\n    clearButtonProps?: Omit<IChipClearButtonProps, \"size\" | \"disabled\" | \"onClick\" | \"onKeyDown\">;\n}\n\n/** Целевой элемент компонента ChipMonthYearPicker. */\nexport const ChipMonthYearPickerTarget = React.forwardRef<HTMLSpanElement, IChipMonthYearPickerTargetProps>(\n    (props, ref) => {\n        const { children, size, selected, disabled, onKeyDown, onClick, onClear, clearButtonProps, ...restProps } =\n            props;\n        const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);\n\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n            if (!disabled && (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\"))) {\n                event.preventDefault();\n                setDropdownOpen(!dropdownOpen);\n            }\n\n            onKeyDown?.(event);\n        };\n\n        const handleClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n            if (disabled) {\n                return;\n            }\n\n            setDropdownOpen(!dropdownOpen);\n            onClick?.(event);\n        };\n\n        /** Нажатие на кнопке очищения не должно всплывать в чип и открывать дропдаун. */\n        const handleClearButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                event.stopPropagation();\n            }\n        };\n\n        const handleClearButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            onClear();\n        };\n\n        const renderTargetPostfix = () => {\n            if (selected) {\n                return (\n                    <ChipClearButton\n                        {...clearButtonProps}\n                        size={size}\n                        disabled={disabled}\n                        onClick={handleClearButtonClick}\n                        onKeyDown={handleClearButtonKeyDown}\n                    />\n                );\n            } else {\n                return <ChipDropdownArrow size={size} rotated={dropdownOpen} />;\n            }\n        };\n\n        return (\n            <Chip\n                size={size}\n                selected={selected}\n                disabled={disabled}\n                aria-expanded={dropdownOpen}\n                onKeyDown={handleKeyDown}\n                onClick={handleClick}\n                postfix={renderTargetPostfix()}\n                {...restProps}\n                ref={ref}\n            >\n                {children}\n            </Chip>\n        );\n    },\n);\n\nChipMonthYearPickerTarget.displayName = \"ChipMonthYearPickerTarget\";\n"],"names":["React"],"mappings":";;;;;;;AAgBO,MAAM,4BAA4BA,eAAM;AAAA,EAC3C,CAAC,OAAO,QAAQ;AACZ,UAAM,EAAE,UAAU,MAAM,UAAU,UAAU,WAAW,SAAS,SAAS,kBAAkB,GAAG,UAAA,IAC1F;AACJ,UAAM,EAAE,cAAc,oBAAoB,WAAW,yBAAyB;AAE9E,UAAM,gBAAgB,CAAC,UAAgD;AACnE,UAAI,CAAC,aAAa,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,IAAI;AACzE,cAAM,eAAA;AACN,wBAAgB,CAAC,YAAY;AAAA,MACjC;AAEA,6CAAY;AAAA,IAChB;AAEA,UAAM,cAAc,CAAC,UAA6C;AAC9D,UAAI,UAAU;AACV;AAAA,MACJ;AAEA,sBAAgB,CAAC,YAAY;AAC7B,yCAAU;AAAA,IACd;AAGA,UAAM,2BAA2B,CAAC,UAAkD;AAChF,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAC1D,cAAM,gBAAA;AAAA,MACV;AAAA,IACJ;AAEA,UAAM,yBAAyB,CAAC,UAA+C;AAC3E,YAAM,gBAAA;AACN,cAAA;AAAA,IACJ;AAEA,UAAM,sBAAsB,MAAM;AAC9B,UAAI,UAAU;AACV,eACI;AAAA,UAAC;AAAA,UAAA;AAAA,YACI,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAGvB,OAAO;AACH,eAAO,oBAAC,mBAAA,EAAkB,MAAY,SAAS,aAAA,CAAc;AAAA,MACjE;AAAA,IACJ;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,WAAW;AAAA,QACX,SAAS;AAAA,QACT,SAAS,oBAAA;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,0BAA0B,cAAc;"}

package/components/Chip/ChipMonthYearPicker/index.js

@@ -0,0 +1,7 @@
+import { ChipMonthYearPicker } from "./ChipMonthYearPicker.js";
+import { ChipMonthYearPickerTarget } from "./ChipMonthYearPickerTarget.js";
+export {
+  ChipMonthYearPicker,
+  ChipMonthYearPickerTarget
+};
+//# sourceMappingURL=index.js.map

package/components/Chip/ChipMonthYearPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/Chip/ChipMultiselect.js

@@ -1,22 +1,25 @@
 import { jsx } from "react/jsx-runtime";
-import React__default from "react";
+import React__default, { useCallback } from "react";
+import { c as clsx } from "../../chunks/vendor-DqjKLGwf.js";
 import { MultiselectField } from "../MultiselectField/MultiselectField.js";
-import { s as styles, C as Chip } from "../../chunks/Chip-CWaqKk62.js";
+import { isKey } from "../../utils/keyboard.js";
+import { s as styles, C as Chip } from "../../chunks/Chip-Bi7plvOY.js";
 import { ChipClearButton } from "./ChipClearButton.js";
 import { ChipDropdownArrow } from "./ChipDropdownArrow.js";
-import { isKey } from "../../utils/keyboard.js";
-import { c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 const ChipMultiselect = React__default.forwardRef(
-  ({ children, className, clearSelected, disabled, label, displayedValue, selected, size, type, ...restProps }, ref) => {
-    const handleKeyDownClearButton = (event) => {
+  ({ children, className, clearSelected, disabled, displayedValue, label, selected, size, type, ...restProps }, ref) => {
+    const handleKeyDownClearButton = useCallback((event) => {
       if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
         event.stopPropagation();
       }
-    };
-    const handleClickClearButton = (event) => {
-      event.stopPropagation();
-      clearSelected();
-    };
+    }, []);
+    const handleClickClearButton = useCallback(
+      (event) => {
+        event.stopPropagation();
+        clearSelected();
+      },
+      [clearSelected]
+    );
     const renderTarget = ({ opened, setOpened }) => {
       const handleKeyDown = (event) => {
         if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
@@ -42,7 +45,7 @@ const ChipMultiselect = React__default.forwardRef(
           ) : /* @__PURE__ */ jsx(ChipDropdownArrow, { size, rotated: opened }),
           ref,
           role: "listbox",
-          selected: Boolean(selected),
+          selected,
           children: selected ? displayedValue ?? label : label
         }
       );

package/components/Chip/ChipMultiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipMultiselect.js","sources":["../../../src/components/Chip/ChipMultiselect.tsx"],"sourcesContent":["import React from \"react\";\nimport { IMultiselectFieldProps, MultiselectField } from \"../MultiselectField\";\nimport { Chip, IChipProps } from \"./Chip\";\nimport { ChipClearButton } from \"./ChipClearButton\";\nimport { ChipDropdownArrow } from \"./ChipDropdownArrow\";\nimport { ISelectExtendedFieldTargetProvideProps } from \"../SelectExtendedField\";\nimport { isKey } from \"../../utils/keyboard\";\nimport styles from \"./styles/Chip.module.less\";\nimport clsx from \"clsx\";\n\nexport interface IChipMultiselectProps extends Omit<IMultiselectFieldProps, \"renderTarget\">, Pick<IChipProps, \"type\"> {\n    /** Функция отмены выбора. */\n    clearSelected: () => void;\n    /** Состояние disabled. */\n    disabled?: boolean;\n    /** Флаг, выбран хоть один вариант. */\n    selected?: boolean;\n    /** Название поля или число выбранных вариантов. */\n    label: React.ReactNode;\n    /** Лейбл, отображаемый вместо выбранного значения. */\n    displayedValue?: React.ReactNode;\n}\n\n/**\n * Компонент выбора нескольких значений из списка.\n * Количество выбранных значений отображается компонентом Chip.\n */\nexport const ChipMultiselect = React.forwardRef<HTMLDivElement, IChipMultiselectProps>(\n    (\n        { children, className, clearSelected, disabled, label, displayedValue, selected, size, type, ...restProps },\n        ref,\n    ) => {\n        const handleKeyDownClearButton = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                // Предотвращаем всплытие события до Chip\n                event.stopPropagation();\n            }\n        };\n\n        const handleClickClearButton = (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Предотвращаем всплытие события до Chip\n            event.stopPropagation();\n\n            clearSelected();\n        };\n\n        const renderTarget = ({ opened, setOpened }: ISelectExtendedFieldTargetProvideProps) => {\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n                if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                    setOpened(!opened);\n                }\n            };\n\n            return (\n                <Chip\n                    aria-expanded={opened}\n                    disabled={disabled}\n                    size={size}\n                    type={type}\n                    onClick={() => setOpened(!opened)}\n                    onKeyDown={handleKeyDown}\n                    postfix={\n                        selected ? (\n                            <ChipClearButton\n                                size={size}\n                                onKeyDown={handleKeyDownClearButton}\n                                onClick={handleClickClearButton}\n                            />\n                        ) : (\n                            <ChipDropdownArrow size={size} rotated={opened} />\n                        )\n                    }\n                    ref={ref}\n                    role=\"listbox\"\n                    selected={Boolean(selected)}\n                >\n                    {selected ? (displayedValue ?? label) : label}\n                </Chip>\n            );\n        };\n\n        return (\n            <MultiselectField\n                size={size}\n                renderTarget={renderTarget}\n                className={clsx(styles.chipGroupItem, className)}\n                {...restProps}\n            >\n                {children}\n            </MultiselectField>\n        );\n    },\n);\n\nChipMultiselect.displayName = \"ChipMultiselect\";\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CACI,EAAE,UAAU,WAAW,eAAe,UAAU,OAAO,gBAAgB,UAAU,MAAM,MAAM,GAAG,UAAA,GAChG,QACC;AACD,UAAM,2BAA2B,CAAC,UAAkD;AAChF,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAE1D,cAAM,gBAAA;AAAA,MACV;AAAA,IACJ;AAEA,UAAM,yBAAyB,CAAC,UAA+C;AAE3E,YAAM,gBAAA;AAEN,oBAAA;AAAA,IACJ;AAEA,UAAM,eAAe,CAAC,EAAE,QAAQ,gBAAwD;AACpF,YAAM,gBAAgB,CAAC,UAAgD;AACnE,YAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAC1D,oBAAU,CAAC,MAAM;AAAA,QACrB;AAAA,MACJ;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW;AAAA,UACX,SACI,WACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG;AAAA,cACA,WAAW;AAAA,cACX,SAAS;AAAA,YAAA;AAAA,UAAA,IAGb,oBAAC,mBAAA,EAAkB,MAAY,SAAS,OAAA,CAAQ;AAAA,UAGxD;AAAA,UACA,MAAK;AAAA,UACL,UAAU,QAAQ,QAAQ;AAAA,UAEzB,UAAA,WAAY,kBAAkB,QAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGpD;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,QAC9C,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"ChipMultiselect.js","sources":["../../../src/components/Chip/ChipMultiselect.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { IMultiselectFieldProps, MultiselectField } from \"../MultiselectField\";\nimport { ISelectExtendedFieldTargetProvideProps } from \"../SelectExtendedField\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { Chip, IChipProps } from \"./Chip\";\nimport { ChipClearButton } from \"./ChipClearButton\";\nimport { ChipDropdownArrow } from \"./ChipDropdownArrow\";\nimport styles from \"./styles/Chip.module.less\";\n\n/** Свойства компонента ChipMultiselect. */\nexport interface IChipMultiselectProps extends Omit<IMultiselectFieldProps, \"renderTarget\">, Pick<IChipProps, \"type\"> {\n    /** Функция отмены выбора. Вызывается по нажатию на кнопку сброса. */\n    clearSelected: () => void;\n    /** Состояние disabled. */\n    disabled?: boolean;\n    /** Флаг, выбран хоть один вариант. */\n    selected?: boolean;\n    /** Название поля или число выбранных вариантов. */\n    label: React.ReactNode;\n    /** Лейбл, отображаемый вместо выбранного значения. Показывается только при selected. */\n    displayedValue?: React.ReactNode;\n}\n\n/**\n * Компонент выбора нескольких значений из списка.\n * Количество выбранных значений отображается компонентом Chip.\n *\n * Надстройка над MultiselectField: состоянием открытости и выпадающим блоком владеет\n * MultiselectField, а полем выбора выступает Chip. Внешний ref уходит на этот Chip,\n * а не на корневой элемент MultiselectField.\n */\nexport const ChipMultiselect = React.forwardRef<HTMLDivElement, IChipMultiselectProps>(\n    (\n        { children, className, clearSelected, disabled, displayedValue, label, selected, size, type, ...restProps },\n        ref,\n    ) => {\n        const handleKeyDownClearButton = useCallback((event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                // Предотвращаем всплытие события до Chip, иначе сброс выбора заодно открыл бы список.\n                event.stopPropagation();\n            }\n        }, []);\n\n        const handleClickClearButton = useCallback(\n            (event: React.MouseEvent<HTMLButtonElement>) => {\n                // Предотвращаем всплытие события до Chip, иначе сброс выбора заодно открыл бы список.\n                event.stopPropagation();\n\n                clearSelected();\n            },\n            [clearSelected],\n        );\n\n        const renderTarget = ({ opened, setOpened }: ISelectExtendedFieldTargetProvideProps) => {\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n                if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                    setOpened(!opened);\n                }\n            };\n\n            return (\n                <Chip\n                    aria-expanded={opened}\n                    disabled={disabled}\n                    size={size}\n                    type={type}\n                    onClick={() => setOpened(!opened)}\n                    onKeyDown={handleKeyDown}\n                    postfix={\n                        selected ? (\n                            <ChipClearButton\n                                size={size}\n                                onKeyDown={handleKeyDownClearButton}\n                                onClick={handleClickClearButton}\n                            />\n                        ) : (\n                            <ChipDropdownArrow size={size} rotated={opened} />\n                        )\n                    }\n                    ref={ref}\n                    role=\"listbox\"\n                    selected={selected}\n                >\n                    {selected ? (displayedValue ?? label) : label}\n                </Chip>\n            );\n        };\n\n        return (\n            <MultiselectField\n                size={size}\n                renderTarget={renderTarget}\n                className={clsx(styles.chipGroupItem, className)}\n                {...restProps}\n            >\n                {children}\n            </MultiselectField>\n        );\n    },\n);\n\nChipMultiselect.displayName = \"ChipMultiselect\";\n"],"names":["React"],"mappings":";;;;;;;;AAgCO,MAAM,kBAAkBA,eAAM;AAAA,EACjC,CACI,EAAE,UAAU,WAAW,eAAe,UAAU,gBAAgB,OAAO,UAAU,MAAM,MAAM,GAAG,UAAA,GAChG,QACC;AACD,UAAM,2BAA2B,YAAY,CAAC,UAAkD;AAC5F,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAE1D,cAAM,gBAAA;AAAA,MACV;AAAA,IACJ,GAAG,CAAA,CAAE;AAEL,UAAM,yBAAyB;AAAA,MAC3B,CAAC,UAA+C;AAE5C,cAAM,gBAAA;AAEN,sBAAA;AAAA,MACJ;AAAA,MACA,CAAC,aAAa;AAAA,IAAA;AAGlB,UAAM,eAAe,CAAC,EAAE,QAAQ,gBAAwD;AACpF,YAAM,gBAAgB,CAAC,UAAgD;AACnE,YAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAC1D,oBAAU,CAAC,MAAM;AAAA,QACrB;AAAA,MACJ;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,iBAAe;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW;AAAA,UACX,SACI,WACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG;AAAA,cACA,WAAW;AAAA,cACX,SAAS;AAAA,YAAA;AAAA,UAAA,IAGb,oBAAC,mBAAA,EAAkB,MAAY,SAAS,OAAA,CAAQ;AAAA,UAGxD;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UAEC,UAAA,WAAY,kBAAkB,QAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGpD;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,QAC9C,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/Chip/ChipOptions.js

@@ -1,27 +1,49 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import { OptionsStrokeSrvIcon24 } from "@sberbusiness/icons-next";
-import { C as Chip } from "../../chunks/Chip-CWaqKk62.js";
+import { isKey } from "../../utils/keyboard.js";
+import { C as Chip } from "../../chunks/Chip-Bi7plvOY.js";
 import { ChipClearButton } from "./ChipClearButton.js";
-const chipOptionsContent = "chipOptionsContent__fc1ad139";
+const chipOptionsContent = "chipOptionsContent__56b327b1";
 const styles = {
   chipOptionsContent
 };
 const ChipOptions = React__default.forwardRef(
-  ({ children, clearSelected, selected, ...rest }, ref) => {
+  ({ children, clearButtonProps, clearSelected, selected, size, ...restProps }, ref) => {
+    const {
+      onClick: onClickClearButton,
+      onKeyDown: onKeyDownClearButton,
+      ...restClearButtonProps
+    } = clearButtonProps ?? {};
     const handleClickClearButton = (event) => {
       event.stopPropagation();
       clearSelected();
+      onClickClearButton == null ? void 0 : onClickClearButton(event);
+    };
+    const handleKeyDownClearButton = (event) => {
+      if (isKey(event.code, "ENTER") || isKey(event.code, "SPACE")) {
+        event.stopPropagation();
+      }
+      onKeyDownClearButton == null ? void 0 : onKeyDownClearButton(event);
     };
     return /* @__PURE__ */ jsx(
       Chip,
       {
-        prefix: selected ? /* @__PURE__ */ jsx(OptionsStrokeSrvIcon24, { paletteIndex: 6 }) : /* @__PURE__ */ jsx(OptionsStrokeSrvIcon24, { paletteIndex: 5 }),
-        postfix: selected ? /* @__PURE__ */ jsx(ChipClearButton, { onClick: handleClickClearButton, size: rest.size }) : /* @__PURE__ */ jsx("span", {}),
+        prefix: /* @__PURE__ */ jsx(OptionsStrokeSrvIcon24, { paletteIndex: selected ? 6 : 5 }),
+        postfix: selected ? /* @__PURE__ */ jsx(
+          ChipClearButton,
+          {
+            ...restClearButtonProps,
+            size,
+            onClick: handleClickClearButton,
+            onKeyDown: handleKeyDownClearButton
+          }
+        ) : /* @__PURE__ */ jsx("span", {}),
         selected,
-        ...rest,
+        size,
+        ...restProps,
         ref,
-        children: typeof children !== "undefined" ? /* @__PURE__ */ jsx("span", { className: styles.chipOptionsContent, children }) : children
+        children: children !== void 0 ? /* @__PURE__ */ jsx("span", { className: styles.chipOptionsContent, children }) : children
       }
     );
   }

package/components/Chip/ChipOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipOptions.js","sources":["../../../src/components/Chip/ChipOptions.tsx"],"sourcesContent":["import React from \"react\";\nimport { OptionsStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { Chip, IChipProps } from \"./Chip\";\nimport { ChipClearButton } from \"./ChipClearButton\";\nimport styles from \"./styles/ChipOptions.module.less\";\n\nexport interface IChipOptionsProps extends Omit<IChipProps, \"prefix\" | \"postfix\"> {\n    /** Функция отмены выбора. */\n    clearSelected: () => void;\n}\n\n/**\n * Chip с иконкой выбора опций.\n */\nexport const ChipOptions = React.forwardRef<HTMLSpanElement, IChipOptionsProps>(\n    ({ children, clearSelected, selected, ...rest }, ref) => {\n        const handleClickClearButton = (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Предотвращение нажатия на родительский элемент Chip.\n            event.stopPropagation();\n\n            clearSelected();\n        };\n\n        return (\n            <Chip\n                prefix={\n                    selected ? <OptionsStrokeSrvIcon24 paletteIndex={6} /> : <OptionsStrokeSrvIcon24 paletteIndex={5} />\n                }\n                postfix={selected ? <ChipClearButton onClick={handleClickClearButton} size={rest.size} /> : <span />}\n                selected={selected}\n                {...rest}\n                ref={ref}\n            >\n                {typeof children !== \"undefined\" ? (\n                    <span className={styles.chipOptionsContent}>{children}</span>\n                ) : (\n                    children\n                )}\n            </Chip>\n        );\n    },\n);\n\nChipOptions.displayName = \"ChipOptions\";\n"],"names":["React"],"mappings":";;;;;;;;;AAcO,MAAM,cAAcA,eAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,eAAe,UAAU,GAAG,KAAA,GAAQ,QAAQ;AACrD,UAAM,yBAAyB,CAAC,UAA+C;AAE3E,YAAM,gBAAA;AAEN,oBAAA;AAAA,IACJ;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,QACI,WAAW,oBAAC,wBAAA,EAAuB,cAAc,GAAG,IAAK,oBAAC,wBAAA,EAAuB,cAAc,EAAA,CAAG;AAAA,QAEtG,SAAS,WAAW,oBAAC,iBAAA,EAAgB,SAAS,wBAAwB,MAAM,KAAK,KAAA,CAAM,IAAK,oBAAC,QAAA,CAAA,CAAK;AAAA,QAClG;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QAEC,UAAA,OAAO,aAAa,cACjB,oBAAC,UAAK,WAAW,OAAO,oBAAqB,SAAA,CAAS,IAEtD;AAAA,MAAA;AAAA,IAAA;AAAA,EAIhB;AACJ;AAEA,YAAY,cAAc;"}
+{"version":3,"file":"ChipOptions.js","sources":["../../../src/components/Chip/ChipOptions.tsx"],"sourcesContent":["import React from \"react\";\nimport { OptionsStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { Chip, IChipProps } from \"./Chip\";\nimport { ChipClearButton, IChipClearButtonProps } from \"./ChipClearButton\";\nimport styles from \"./styles/ChipOptions.module.less\";\n\n/** Свойства компонента ChipOptions. */\nexport interface IChipOptionsProps extends Omit<IChipProps, \"prefix\" | \"postfix\"> {\n    /** Функция отмены выбора. */\n    clearSelected: () => void;\n    /**\n     * Свойства кнопки сброса выбора, например aria-label для её доступного имени.\n     * Размер задаётся размером чипса. Переданные onClick и onKeyDown не заменяют\n     * собственные обработчики компонента, а вызываются после них.\n     */\n    clearButtonProps?: Omit<IChipClearButtonProps, \"size\">;\n}\n\n/**\n * Chip с иконкой выбора опций.\n * В выбранном состоянии в postfix отображается кнопка сброса выбора.\n */\nexport const ChipOptions = React.forwardRef<HTMLSpanElement, IChipOptionsProps>(\n    ({ children, clearButtonProps, clearSelected, selected, size, ...restProps }, ref) => {\n        const {\n            onClick: onClickClearButton,\n            onKeyDown: onKeyDownClearButton,\n            ...restClearButtonProps\n        } = clearButtonProps ?? {};\n\n        const handleClickClearButton = (event: React.MouseEvent<HTMLButtonElement>) => {\n            // Предотвращение нажатия на родительский элемент Chip.\n            event.stopPropagation();\n\n            clearSelected();\n            onClickClearButton?.(event);\n        };\n\n        const handleKeyDownClearButton = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\")) {\n                // Без гашения всплытия Chip вызовет preventDefault() на SPACE (гасит прокрутку\n                // страницы) и заодно отменит нативную активацию кнопки, а на ENTER отработает\n                // потребительский onKeyDown чипса одновременно со сбросом.\n                event.stopPropagation();\n            }\n\n            onKeyDownClearButton?.(event);\n        };\n\n        return (\n            <Chip\n                prefix={<OptionsStrokeSrvIcon24 paletteIndex={selected ? 6 : 5} />}\n                // Вне выбранного состояния в postfix уходит пустой span, а не undefined: класс\n                // withPostfix (обнуляет правый padding) Chip выставляет по postfix !== undefined,\n                // поэтому отступы у выбранного и невыбранного чипса должны совпадать. Пустой span\n                // при этом реально рендерится в обёртке IconWrapper — убрать его нельзя.\n                postfix={\n                    selected ? (\n                        <ChipClearButton\n                            {...restClearButtonProps}\n                            size={size}\n                            onClick={handleClickClearButton}\n                            onKeyDown={handleKeyDownClearButton}\n                        />\n                    ) : (\n                        <span />\n                    )\n                }\n                selected={selected}\n                size={size}\n                {...restProps}\n                ref={ref}\n            >\n                {children !== undefined ? <span className={styles.chipOptionsContent}>{children}</span> : children}\n            </Chip>\n        );\n    },\n);\n\nChipOptions.displayName = \"ChipOptions\";\n"],"names":["React"],"mappings":";;;;;;;;;;AAuBO,MAAM,cAAcA,eAAM;AAAA,EAC7B,CAAC,EAAE,UAAU,kBAAkB,eAAe,UAAU,MAAM,GAAG,UAAA,GAAa,QAAQ;AAClF,UAAM;AAAA,MACF,SAAS;AAAA,MACT,WAAW;AAAA,MACX,GAAG;AAAA,IAAA,IACH,oBAAoB,CAAA;AAExB,UAAM,yBAAyB,CAAC,UAA+C;AAE3E,YAAM,gBAAA;AAEN,oBAAA;AACA,+DAAqB;AAAA,IACzB;AAEA,UAAM,2BAA2B,CAAC,UAAkD;AAChF,UAAI,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,GAAG;AAI1D,cAAM,gBAAA;AAAA,MACV;AAEA,mEAAuB;AAAA,IAC3B;AAEA,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,QAAQ,oBAAC,wBAAA,EAAuB,cAAc,WAAW,IAAI,GAAG;AAAA,QAKhE,SACI,WACI;AAAA,UAAC;AAAA,UAAA;AAAA,YACI,GAAG;AAAA,YACJ;AAAA,YACA,SAAS;AAAA,YACT,WAAW;AAAA,UAAA;AAAA,QAAA,wBAGd,QAAA,EAAK;AAAA,QAGd;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QAEC,UAAA,aAAa,SAAY,oBAAC,QAAA,EAAK,WAAW,OAAO,oBAAqB,UAAS,IAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtG;AACJ;AAEA,YAAY,cAAc;"}

package/components/Chip/ChipSelect/ChipSelect.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
-import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
+import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
 import { SelectExtendedField } from "../../SelectExtendedField/SelectExtendedField.js";
 import "../../SelectExtendedField/components/SelectExtendedFieldDropdown.js";
 import "../../SelectExtendedField/components/SelectExtendedFieldTarget.js";
 import { SelectExtendedFieldDropdownDefault } from "../../SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js";
 import { ChipSelectTarget } from "./ChipSelectTarget.js";
-import { s as styles } from "../../../chunks/Chip-CWaqKk62.js";
+import { s as styles } from "../../../chunks/Chip-Bi7plvOY.js";
 const ChipSelect = React__default.forwardRef(
   ({
     className,

package/components/Chip/ChipSelect/ChipSelectTarget.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useCallback } from "react";
-import { C as Chip } from "../../../chunks/Chip-CWaqKk62.js";
+import { C as Chip } from "../../../chunks/Chip-Bi7plvOY.js";
 import { ChipDropdownArrow } from "../ChipDropdownArrow.js";
 import { ChipClearButton } from "../ChipClearButton.js";
 import { isKey } from "../../../utils/keyboard.js";

package/components/Chip/ChipSort.js

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import React__default, { useRef } from "react";
-import { ChipIcon } from "./ChipIcon.js";
+import { u as uniqueId, i as isEqual, c as clsx } from "../../chunks/vendor-DqjKLGwf.js";
 import { SortStrokeSrvIcon24 } from "@sberbusiness/icons-next";
+import { ChipIcon } from "./ChipIcon.js";
+import { IconWrapper } from "../IconWrapper/IconWrapper.js";
 import { SelectExtendedField } from "../SelectExtendedField/SelectExtendedField.js";
 import "../SelectExtendedField/components/SelectExtendedFieldDropdown.js";
 import "../SelectExtendedField/components/SelectExtendedFieldTarget.js";
 import { SelectExtendedFieldDropdownDefault } from "../SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js";
-import { u as uniqueId, i as isEqual, c as clsx } from "../../chunks/vendor-D4wvHis9.js";
 import { isKey } from "../../utils/keyboard.js";
-import { IconWrapper } from "../IconWrapper/IconWrapper.js";
-import { s as styles } from "../../chunks/Chip-CWaqKk62.js";
+import { s as styles } from "../../chunks/Chip-Bi7plvOY.js";
+const ICON_PALETTE_INDEX_DEFAULT = 5;
+const ICON_PALETTE_INDEX_SELECTED = 6;
 const ChipSort = React__default.forwardRef(
   ({ className, defaultValue, disabled, label, onChange, options, value, size, type, ...restProps }, ref) => {
     const instanceId = useRef(uniqueId());
-    const selected = Boolean(value) && !isEqual(defaultValue, value);
+    const selected = value != null && !isEqual(defaultValue, value);
     const renderTarget = ({ opened, setOpened }) => {
       const handleKeyDown = (event) => {
         if (!opened && (isKey(event.code, "ENTER") || isKey(event.code, "SPACE"))) {
@@ -34,7 +36,12 @@ const ChipSort = React__default.forwardRef(
           "aria-expanded": opened,
           "aria-controls": instanceId.current,
           ref,
-          children: /* @__PURE__ */ jsx(IconWrapper, { active: opened, disabled, displayContents: true, children: selected ? /* @__PURE__ */ jsx(SortStrokeSrvIcon24, { paletteIndex: 6 }) : /* @__PURE__ */ jsx(SortStrokeSrvIcon24, { paletteIndex: 5 }) })
+          children: /* @__PURE__ */ jsx(IconWrapper, { active: opened, disabled, displayContents: true, children: /* @__PURE__ */ jsx(
+            SortStrokeSrvIcon24,
+            {
+              paletteIndex: selected ? ICON_PALETTE_INDEX_SELECTED : ICON_PALETTE_INDEX_DEFAULT
+            }
+          ) })
         }
       );
     };

package/components/Chip/ChipSort.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipSort.js","sources":["../../../src/components/Chip/ChipSort.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { isEqual } from \"lodash-es\";\nimport { ChipIcon } from \"./ChipIcon\";\nimport { IChipSelectProps } from \"./ChipSelect/ChipSelect\";\nimport { SortStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport {\n    ISelectExtendedFieldDropdownProvideProps,\n    ISelectExtendedFieldTargetProvideProps,\n    SelectExtendedField,\n} from \"../../components/SelectExtendedField\";\nimport { SelectExtendedFieldDropdownDefault } from \"../../components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault\";\nimport { ISelectExtendedFieldDefaultOption } from \"../../components/SelectExtendedField\";\nimport { uniqueId } from \"lodash-es\";\nimport clsx from \"clsx\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { IconWrapper } from \"../../components/IconWrapper/IconWrapper\";\nimport styles from \"./styles/Chip.module.less\";\n\nexport interface IChipSortProps extends Omit<IChipSelectProps, \"targetProps\" | \"clearSelected\" | \"defaultValue\"> {\n    /** Дефолтное значение, если текущее значение равно дефолтному, элемент не будет подсвечен как измененный. */\n    defaultValue?: ISelectExtendedFieldDefaultOption;\n}\n\n/**\n * ChipSelect с иконкой выбора сортировки.\n */\nexport const ChipSort = React.forwardRef<HTMLDivElement, IChipSortProps>(\n    ({ className, defaultValue, disabled, label, onChange, options, value, size, type, ...restProps }, ref) => {\n        const instanceId = useRef(uniqueId());\n        const selected = Boolean(value) && !isEqual(defaultValue, value);\n\n        const renderTarget = ({ opened, setOpened }: ISelectExtendedFieldTargetProvideProps) => {\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n                if (!opened && (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\"))) {\n                    event.preventDefault();\n                    setOpened(true);\n                }\n            };\n\n            return (\n                <ChipIcon\n                    disabled={disabled}\n                    selected={selected}\n                    onClick={() => setOpened(!opened)}\n                    onKeyDown={handleKeyDown}\n                    size={size}\n                    type={type}\n                    role=\"combobox\"\n                    aria-expanded={opened}\n                    aria-controls={instanceId.current}\n                    ref={ref}\n                >\n                    <IconWrapper active={opened} disabled={disabled} displayContents>\n                        {selected ? <SortStrokeSrvIcon24 paletteIndex={6} /> : <SortStrokeSrvIcon24 paletteIndex={5} />}\n                    </IconWrapper>\n                </ChipIcon>\n            );\n        };\n\n        const renderDropdown = (props: ISelectExtendedFieldDropdownProvideProps) => (\n            <SelectExtendedFieldDropdownDefault\n                {...props}\n                size={size}\n                mobileTitle={label}\n                onChange={onChange}\n                options={options}\n                value={value}\n                listId={instanceId.current}\n            />\n        );\n\n        return (\n            <SelectExtendedField\n                className={clsx(styles.chipGroupItem, className)}\n                renderTarget={renderTarget}\n                {...restProps}\n            >\n                {renderDropdown}\n            </SelectExtendedField>\n        );\n    },\n);\n\nChipSort.displayName = \"ChipSort\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;AA0BO,MAAM,WAAWA,eAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,cAAc,UAAU,OAAO,UAAU,SAAS,OAAO,MAAM,MAAM,GAAG,UAAA,GAAa,QAAQ;AACvG,UAAM,aAAa,OAAO,UAAU;AACpC,UAAM,WAAW,QAAQ,KAAK,KAAK,CAAC,QAAQ,cAAc,KAAK;AAE/D,UAAM,eAAe,CAAC,EAAE,QAAQ,gBAAwD;AACpF,YAAM,gBAAgB,CAAC,UAAgD;AACnE,YAAI,CAAC,WAAW,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,IAAI;AACvE,gBAAM,eAAA;AACN,oBAAU,IAAI;AAAA,QAClB;AAAA,MACJ;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe,WAAW;AAAA,UAC1B;AAAA,UAEA,8BAAC,aAAA,EAAY,QAAQ,QAAQ,UAAoB,iBAAe,MAC3D,UAAA,WAAW,oBAAC,qBAAA,EAAoB,cAAc,GAAG,wBAAM,qBAAA,EAAoB,cAAc,GAAG,EAAA,CACjG;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ;AAEA,UAAM,iBAAiB,CAAC,UACpB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,WAAW;AAAA,MAAA;AAAA,IAAA;AAI3B,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,QAC/C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,SAAS,cAAc;"}
+{"version":3,"file":"ChipSort.js","sources":["../../../src/components/Chip/ChipSort.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { isEqual, uniqueId } from \"lodash-es\";\nimport { SortStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { ChipIcon } from \"./ChipIcon\";\nimport { IChipSelectProps } from \"./ChipSelect/ChipSelect\";\nimport { IconWrapper } from \"../IconWrapper\";\nimport {\n    ISelectExtendedFieldDefaultOption,\n    ISelectExtendedFieldDropdownProvideProps,\n    ISelectExtendedFieldTargetProvideProps,\n    SelectExtendedField,\n} from \"../SelectExtendedField\";\nimport { SelectExtendedFieldDropdownDefault } from \"../SelectExtendedField/components/SelectExtendedFieldDropdownDefault\";\nimport { isKey } from \"../../utils/keyboard\";\nimport styles from \"./styles/Chip.module.less\";\n\n/** Индекс палитры иконки сортировки в обычном состоянии. */\nconst ICON_PALETTE_INDEX_DEFAULT = 5;\n/** Индекс палитры иконки сортировки, когда чипс подсвечен как изменённый. */\nconst ICON_PALETTE_INDEX_SELECTED = 6;\n\n/** Свойства компонента ChipSort. */\nexport interface IChipSortProps extends Omit<IChipSelectProps, \"targetProps\" | \"clearSelected\" | \"defaultValue\"> {\n    /** Дефолтное значение, если текущее значение равно дефолтному, элемент не будет подсвечен как измененный. */\n    defaultValue?: ISelectExtendedFieldDefaultOption;\n}\n\n/**\n * ChipSelect с иконкой выбора сортировки.\n *\n * Выбранное значение не отображается текстом: target — это ChipIcon с иконкой сортировки,\n * которая подсвечивается, только когда текущее значение отличается от defaultValue.\n * Открывается по клику и по Enter/Space, target связан со списком через aria-controls.\n */\nexport const ChipSort = React.forwardRef<HTMLDivElement, IChipSortProps>(\n    ({ className, defaultValue, disabled, label, onChange, options, value, size, type, ...restProps }, ref) => {\n        // Id списка дропдауна. Через него target связывается со списком по aria-controls.\n        const instanceId = useRef(uniqueId());\n        // Чипс подсвечен, только если значение выбрано и отличается от дефолтного:\n        // сортировка по умолчанию — это не изменение фильтра, подсвечивать нечего.\n        const selected = value != null && !isEqual(defaultValue, value);\n\n        const renderTarget = ({ opened, setOpened }: ISelectExtendedFieldTargetProvideProps) => {\n            const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n                // Закрытием списка занимается SelectExtendedField, здесь только открытие.\n                if (!opened && (isKey(event.code, \"ENTER\") || isKey(event.code, \"SPACE\"))) {\n                    event.preventDefault();\n                    setOpened(true);\n                }\n            };\n\n            return (\n                <ChipIcon\n                    disabled={disabled}\n                    selected={selected}\n                    onClick={() => setOpened(!opened)}\n                    onKeyDown={handleKeyDown}\n                    size={size}\n                    type={type}\n                    role=\"combobox\"\n                    aria-expanded={opened}\n                    aria-controls={instanceId.current}\n                    ref={ref}\n                >\n                    <IconWrapper active={opened} disabled={disabled} displayContents>\n                        <SortStrokeSrvIcon24\n                            paletteIndex={selected ? ICON_PALETTE_INDEX_SELECTED : ICON_PALETTE_INDEX_DEFAULT}\n                        />\n                    </IconWrapper>\n                </ChipIcon>\n            );\n        };\n\n        const renderDropdown = (props: ISelectExtendedFieldDropdownProvideProps) => (\n            <SelectExtendedFieldDropdownDefault\n                {...props}\n                size={size}\n                mobileTitle={label}\n                onChange={onChange}\n                options={options}\n                value={value}\n                listId={instanceId.current}\n            />\n        );\n\n        return (\n            <SelectExtendedField\n                className={clsx(styles.chipGroupItem, className)}\n                renderTarget={renderTarget}\n                {...restProps}\n            >\n                {renderDropdown}\n            </SelectExtendedField>\n        );\n    },\n);\n\nChipSort.displayName = \"ChipSort\";\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,6BAA6B;AAEnC,MAAM,8BAA8B;AAe7B,MAAM,WAAWA,eAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,cAAc,UAAU,OAAO,UAAU,SAAS,OAAO,MAAM,MAAM,GAAG,UAAA,GAAa,QAAQ;AAEvG,UAAM,aAAa,OAAO,UAAU;AAGpC,UAAM,WAAW,SAAS,QAAQ,CAAC,QAAQ,cAAc,KAAK;AAE9D,UAAM,eAAe,CAAC,EAAE,QAAQ,gBAAwD;AACpF,YAAM,gBAAgB,CAAC,UAAgD;AAEnE,YAAI,CAAC,WAAW,MAAM,MAAM,MAAM,OAAO,KAAK,MAAM,MAAM,MAAM,OAAO,IAAI;AACvE,gBAAM,eAAA;AACN,oBAAU,IAAI;AAAA,QAClB;AAAA,MACJ;AAEA,aACI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG;AAAA,UACA;AAAA,UACA,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,UAChC,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,iBAAe;AAAA,UACf,iBAAe,WAAW;AAAA,UAC1B;AAAA,UAEA,8BAAC,aAAA,EAAY,QAAQ,QAAQ,UAAoB,iBAAe,MAC5D,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,cAAc,WAAW,8BAA8B;AAAA,YAAA;AAAA,UAAA,EAC3D,CACJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ;AAEA,UAAM,iBAAiB,CAAC,UACpB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,WAAW;AAAA,MAAA;AAAA,IAAA;AAI3B,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,QAC/C;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AAEA,SAAS,cAAc;"}

package/components/Chip/ChipSuggest/ChipSuggest.js

@@ -1,23 +1,35 @@
 import { ChipSuggestTarget } from "./ChipSuggestTarget.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useRef } from "react";
-import { c as clsx } from "../../../chunks/vendor-D4wvHis9.js";
+import React__default, { useRef, useCallback } from "react";
+import { c as clsx } from "../../../chunks/vendor-DqjKLGwf.js";
 import "../../Suggest/SuggestContext.js";
 import { Suggest } from "../../Suggest/Suggest.js";
 import { ChipSuggestDropdown } from "./ChipSuggestDropdown.js";
-import { s as styles } from "../../../chunks/Chip-CWaqKk62.js";
-const ChipSuggestBase = ({ className, type, displayedValue, label, prefix, targetProps, dropdownProps, ...restProps }, ref) => {
+import { setForwardedRef } from "./utils.js";
+import { s as styles } from "../../../chunks/Chip-Bi7plvOY.js";
+const ChipSuggestBase = ({
+  className,
+  type,
+  displayedValue,
+  label,
+  targetProps,
+  dropdownProps,
+  // prefix приходит из React.HTMLAttributes как RDFa-атрибут и намеренно не попадает
+  // в restProps: ChipSuggest его не поддерживает (ChipSuggestTarget задаёт только postfix),
+  // поэтому проп отбрасывается, а не уезжает на корневой div.
+  prefix: _prefix,
+  ...restProps
+}, ref) => {
   const { value, size } = restProps;
   const suggestRef = useRef(null);
   const targetRef = useRef(null);
-  const setRef = (instance) => {
-    suggestRef.current = instance;
-    if (typeof ref === "function") {
-      ref(instance);
-    } else if (ref) {
-      ref.current = instance;
-    }
-  };
+  const setRef = useCallback(
+    (instance) => {
+      suggestRef.current = instance;
+      setForwardedRef(ref, instance);
+    },
+    [ref]
+  );
   return /* @__PURE__ */ jsxs(Suggest, { className: clsx(styles.chipGroupItem, className), ...restProps, ref: setRef, children: [
     /* @__PURE__ */ jsx(ChipSuggestTarget, { size, ...targetProps, type, ref: targetRef, children: value ? displayedValue ?? value.label : label }),
     /* @__PURE__ */ jsx(ChipSuggestDropdown, { size, targetRef: suggestRef, ...dropdownProps, children: label })

package/components/Chip/ChipSuggest/ChipSuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipSuggest.js","sources":["../../../../src/components/Chip/ChipSuggest/ChipSuggest.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { ISuggestOption, Suggest } from \"../../Suggest\";\nimport { IChipSuggestProps } from \"./types\";\nimport { ChipSuggestTarget } from \"./ChipSuggestTarget\";\nimport { ChipSuggestDropdown } from \"./ChipSuggestDropdown\";\nimport styles from \"../styles/Chip.module.less\";\n\nconst ChipSuggestBase = <T extends ISuggestOption = ISuggestOption>(\n    { className, type, displayedValue, label, prefix, targetProps, dropdownProps, ...restProps }: IChipSuggestProps<T>,\n    ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n    const { value, size } = restProps;\n    const suggestRef = useRef<HTMLDivElement | null>(null);\n    const targetRef = useRef<HTMLSpanElement>(null);\n\n    const setRef = (instance: HTMLDivElement | null) => {\n        suggestRef.current = instance;\n\n        if (typeof ref === \"function\") {\n            ref(instance);\n        } else if (ref) {\n            ref.current = instance;\n        }\n    };\n\n    return (\n        <Suggest className={clsx(styles.chipGroupItem, className)} {...restProps} ref={setRef}>\n            <ChipSuggestTarget size={size} {...targetProps} type={type} ref={targetRef}>\n                {value ? (displayedValue ?? value.label) : label}\n            </ChipSuggestTarget>\n            <ChipSuggestDropdown size={size} targetRef={suggestRef} {...dropdownProps}>\n                {label}\n            </ChipSuggestDropdown>\n        </Suggest>\n    );\n};\n\n/**\n * Компонент выбора одного значения из списка с возможностью фильтрации.\n * Выбранное значение отображается компонентом Chip.\n */\nexport const ChipSuggest = React.forwardRef(ChipSuggestBase) as <T extends ISuggestOption = ISuggestOption>(\n    props: IChipSuggestProps<T> & React.RefAttributes<HTMLDivElement>,\n) => JSX.Element;\n"],"names":["React"],"mappings":";;;;;;;;AAQA,MAAM,kBAAkB,CACpB,EAAE,WAAW,MAAM,gBAAgB,OAAO,QAAQ,aAAa,eAAe,GAAG,UAAA,GACjF,QACC;AACD,QAAM,EAAE,OAAO,KAAA,IAAS;AACxB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,YAAY,OAAwB,IAAI;AAE9C,QAAM,SAAS,CAAC,aAAoC;AAChD,eAAW,UAAU;AAErB,QAAI,OAAO,QAAQ,YAAY;AAC3B,UAAI,QAAQ;AAAA,IAChB,WAAW,KAAK;AACZ,UAAI,UAAU;AAAA,IAClB;AAAA,EACJ;AAEA,SACI,qBAAC,SAAA,EAAQ,WAAW,KAAK,OAAO,eAAe,SAAS,GAAI,GAAG,WAAW,KAAK,QAC3E,UAAA;AAAA,IAAA,oBAAC,mBAAA,EAAkB,MAAa,GAAG,aAAa,MAAY,KAAK,WAC5D,UAAA,QAAS,kBAAkB,MAAM,QAAS,MAAA,CAC/C;AAAA,wBACC,qBAAA,EAAoB,MAAY,WAAW,YAAa,GAAG,eACvD,UAAA,MAAA,CACL;AAAA,EAAA,GACJ;AAER;AAMO,MAAM,cAAcA,eAAM,WAAW,eAAe;"}
+{"version":3,"file":"ChipSuggest.js","sources":["../../../../src/components/Chip/ChipSuggest/ChipSuggest.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { ISuggestOption, Suggest } from \"../../Suggest\";\nimport { IChipSuggestProps } from \"./types\";\nimport { ChipSuggestTarget } from \"./ChipSuggestTarget\";\nimport { ChipSuggestDropdown } from \"./ChipSuggestDropdown\";\nimport { setForwardedRef } from \"./utils\";\nimport styles from \"../styles/Chip.module.less\";\n\nconst ChipSuggestBase = <T extends ISuggestOption = ISuggestOption>(\n    {\n        className,\n        type,\n        displayedValue,\n        label,\n        targetProps,\n        dropdownProps,\n        // prefix приходит из React.HTMLAttributes как RDFa-атрибут и намеренно не попадает\n        // в restProps: ChipSuggest его не поддерживает (ChipSuggestTarget задаёт только postfix),\n        // поэтому проп отбрасывается, а не уезжает на корневой div.\n        prefix: _prefix,\n        ...restProps\n    }: IChipSuggestProps<T>,\n    ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n    // value и size остаются в restProps: их читает Suggest и раздаёт через контекст.\n    const { value, size } = restProps;\n    const suggestRef = useRef<HTMLDivElement | null>(null);\n    const targetRef = useRef<HTMLSpanElement>(null);\n\n    const setRef = useCallback(\n        (instance: HTMLDivElement | null) => {\n            suggestRef.current = instance;\n            setForwardedRef(ref, instance);\n        },\n        [ref],\n    );\n\n    return (\n        <Suggest className={clsx(styles.chipGroupItem, className)} {...restProps} ref={setRef}>\n            <ChipSuggestTarget size={size} {...targetProps} type={type} ref={targetRef}>\n                {value ? (displayedValue ?? value.label) : label}\n            </ChipSuggestTarget>\n            <ChipSuggestDropdown size={size} targetRef={suggestRef} {...dropdownProps}>\n                {label}\n            </ChipSuggestDropdown>\n        </Suggest>\n    );\n};\n\n/**\n * Компонент выбора одного значения из списка с возможностью фильтрации.\n * Выбранное значение отображается компонентом Chip.\n */\nexport const ChipSuggest = React.forwardRef(ChipSuggestBase) as <T extends ISuggestOption = ISuggestOption>(\n    props: IChipSuggestProps<T> & React.RefAttributes<HTMLDivElement>,\n) => JSX.Element;\n"],"names":["React"],"mappings":";;;;;;;;;AASA,MAAM,kBAAkB,CACpB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAIA,QAAQ;AAAA,EACR,GAAG;AACP,GACA,QACC;AAED,QAAM,EAAE,OAAO,KAAA,IAAS;AACxB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,YAAY,OAAwB,IAAI;AAE9C,QAAM,SAAS;AAAA,IACX,CAAC,aAAoC;AACjC,iBAAW,UAAU;AACrB,sBAAgB,KAAK,QAAQ;AAAA,IACjC;AAAA,IACA,CAAC,GAAG;AAAA,EAAA;AAGR,SACI,qBAAC,SAAA,EAAQ,WAAW,KAAK,OAAO,eAAe,SAAS,GAAI,GAAG,WAAW,KAAK,QAC3E,UAAA;AAAA,IAAA,oBAAC,mBAAA,EAAkB,MAAa,GAAG,aAAa,MAAY,KAAK,WAC5D,UAAA,QAAS,kBAAkB,MAAM,QAAS,MAAA,CAC/C;AAAA,wBACC,qBAAA,EAAoB,MAAY,WAAW,YAAa,GAAG,eACvD,UAAA,MAAA,CACL;AAAA,EAAA,GACJ;AAER;AAMO,MAAM,cAAcA,eAAM,WAAW,eAAe;"}

package/components/Chip/ChipSuggest/ChipSuggestDropdown.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useCallback } from "react";
-import { j as focusTrapReactExports } from "../../../chunks/vendor-D4wvHis9.js";
+import { j as focusTrapReactExports } from "../../../chunks/vendor-DqjKLGwf.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
 import { useSuggestContext } from "../../Suggest/SuggestContext.js";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
-import { D as DropdownListItem } from "../../../chunks/DropdownListItem-kMroiHoh.js";
+import { D as DropdownListItem } from "../../../chunks/DropdownListItem-BaP5AaMK.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -21,6 +21,7 @@ import "../../Loader/LoaderMiddle/LoaderMiddle.js";
 import { Dropdown } from "../../Dropdown/Dropdown.js";
 import { ChipSuggestDesktopDropdownField } from "./desktop/ChipSuggestDesktopDropdownField.js";
 import { SuggestMobileDropdownContent } from "../../Suggest/SuggestMobileDropdownContent.js";
+import { setForwardedRef } from "./utils.js";
 const KEY_CODES_SELECTABLE = [EVENT_KEY_CODES.ENTER];
 const ChipSuggestDropdownBase = ({ children, size, targetRef, focusTrapProps, ...restProps }, ref) => {
   const {
@@ -34,14 +35,13 @@ const ChipSuggestDropdownBase = ({ children, size, targetRef, focusTrapProps, ..
     onSelect,
     setDropdownOpen
   } = useSuggestContext();
-  const setRef = (instance) => {
-    dropdownRef.current = instance;
-    if (typeof ref === "function") {
-      ref(instance);
-    } else if (ref) {
-      ref.current = instance;
-    }
-  };
+  const setRef = useCallback(
+    (instance) => {
+      dropdownRef.current = instance;
+      setForwardedRef(ref, instance);
+    },
+    [dropdownRef, ref]
+  );
   const handleDropdownOpen = useCallback(
     (open) => {
       if (open) {
@@ -52,7 +52,7 @@ const ChipSuggestDropdownBase = ({ children, size, targetRef, focusTrapProps, ..
     },
     [setDropdownOpen, closeDropdown]
   );
-  const renderDesktopDropdownContent = () => /* @__PURE__ */ jsx(
+  const desktopDropdownContent = /* @__PURE__ */ jsx(
     focusTrapReactExports.FocusTrap,
     {
       ...focusTrapProps,
@@ -100,7 +100,7 @@ const ChipSuggestDropdownBase = ({ children, size, targetRef, focusTrapProps, ..
       },
       ...restProps,
       ref: setRef,
-      children: renderDesktopDropdownContent()
+      children: desktopDropdownContent
     }
   );
 };

package/components/Chip/ChipSuggest/ChipSuggestDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipSuggestDropdown.js","sources":["../../../../src/components/Chip/ChipSuggest/ChipSuggestDropdown.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { FocusTrap } from \"focus-trap-react\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { ISuggestOption } from \"../../Suggest/types\";\nimport { IChipSuggestDropdownProps } from \"./types\";\nimport { useSuggestContext } from \"../../Suggest/SuggestContext\";\nimport { Dropdown, DropdownList, DropdownListItem } from \"../../Dropdown\";\nimport { ChipSuggestDesktopDropdownField } from \"./desktop/ChipSuggestDesktopDropdownField\";\nimport { SuggestMobileDropdownContent } from \"../../Suggest/SuggestMobileDropdownContent\";\n\nconst KEY_CODES_SELECTABLE = [EVENT_KEY_CODES.ENTER];\n\nconst ChipSuggestDropdownBase = <T extends ISuggestOption>(\n    { children, size, targetRef, focusTrapProps, ...restProps }: IChipSuggestDropdownProps<T>,\n    ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n    const {\n        value,\n        options,\n        dropdownListId,\n        dropdownOpen,\n        dropdownListLoading,\n        dropdownRef,\n        closeDropdown,\n        onSelect,\n        setDropdownOpen,\n    } = useSuggestContext<T>();\n\n    const setRef = (instance: HTMLDivElement | null) => {\n        dropdownRef.current = instance;\n\n        if (typeof ref === \"function\") {\n            ref(instance);\n        } else if (ref) {\n            ref.current = instance;\n        }\n    };\n\n    const handleDropdownOpen = useCallback(\n        (open: boolean) => {\n            if (open) {\n                setDropdownOpen(true);\n            } else {\n                closeDropdown();\n            }\n        },\n        [setDropdownOpen, closeDropdown],\n    );\n\n    const renderDesktopDropdownContent = () => (\n        <FocusTrap\n            {...focusTrapProps}\n            focusTrapOptions={{\n                clickOutsideDeactivates: true,\n                returnFocusOnDeactivate: true,\n                ...focusTrapProps?.focusTrapOptions,\n            }}\n        >\n            <div role=\"presentation\">\n                <ChipSuggestDesktopDropdownField size={size}>{children}</ChipSuggestDesktopDropdownField>\n                <DropdownList\n                    id={dropdownListId}\n                    size={size}\n                    dropdownOpened={dropdownOpen}\n                    loading={dropdownListLoading}\n                    style={options.length === 0 ? { display: \"none\" } : undefined}\n                >\n                    {options.map((option) => (\n                        <DropdownListItem\n                            key={option.id}\n                            id={option.id}\n                            keyCodesForSelection={KEY_CODES_SELECTABLE}\n                            selected={option.id === value?.id}\n                            showNotificationIcon={option.showNotificationIcon}\n                            onSelect={() => onSelect(option)}\n                        >\n                            {option.content || option.label}\n                        </DropdownListItem>\n                    ))}\n                </DropdownList>\n            </div>\n        </FocusTrap>\n    );\n\n    return (\n        <Dropdown\n            size={size}\n            targetRef={targetRef}\n            opened={dropdownOpen}\n            setOpened={handleDropdownOpen}\n            mobileViewProps={{\n                children: <SuggestMobileDropdownContent />,\n            }}\n            {...restProps}\n            ref={setRef}\n        >\n            {renderDesktopDropdownContent()}\n        </Dropdown>\n    );\n};\n\nexport const ChipSuggestDropdown = React.forwardRef(ChipSuggestDropdownBase) as <T extends ISuggestOption>(\n    props: IChipSuggestDropdownProps<T> & React.RefAttributes<HTMLDivElement>,\n) => JSX.Element;\n"],"names":["FocusTrap","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,uBAAuB,CAAC,gBAAgB,KAAK;AAEnD,MAAM,0BAA0B,CAC5B,EAAE,UAAU,MAAM,WAAW,gBAAgB,GAAG,UAAA,GAChD,QACC;AACD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACA,kBAAA;AAEJ,QAAM,SAAS,CAAC,aAAoC;AAChD,gBAAY,UAAU;AAEtB,QAAI,OAAO,QAAQ,YAAY;AAC3B,UAAI,QAAQ;AAAA,IAChB,WAAW,KAAK;AACZ,UAAI,UAAU;AAAA,IAClB;AAAA,EACJ;AAEA,QAAM,qBAAqB;AAAA,IACvB,CAAC,SAAkB;AACf,UAAI,MAAM;AACN,wBAAgB,IAAI;AAAA,MACxB,OAAO;AACH,sBAAA;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAGnC,QAAM,+BAA+B,MACjC;AAAA,IAACA,sBAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,kBAAkB;AAAA,QACd,yBAAyB;AAAA,QACzB,yBAAyB;AAAA,QACzB,GAAG,iDAAgB;AAAA,MAAA;AAAA,MAGvB,UAAA,qBAAC,OAAA,EAAI,MAAK,gBACN,UAAA;AAAA,QAAA,oBAAC,iCAAA,EAAgC,MAAa,SAAA,CAAS;AAAA,QACvD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ;AAAA,YACA,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,OAAO,QAAQ,WAAW,IAAI,EAAE,SAAS,WAAW;AAAA,YAEnD,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEG,IAAI,OAAO;AAAA,gBACX,sBAAsB;AAAA,gBACtB,UAAU,OAAO,QAAO,+BAAO;AAAA,gBAC/B,sBAAsB,OAAO;AAAA,gBAC7B,UAAU,MAAM,SAAS,MAAM;AAAA,gBAE9B,UAAA,OAAO,WAAW,OAAO;AAAA,cAAA;AAAA,cAPrB,OAAO;AAAA,YAAA,CASnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACL,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAIR,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,iBAAiB;AAAA,QACb,8BAAW,8BAAA,CAAA,CAA6B;AAAA,MAAA;AAAA,MAE3C,GAAG;AAAA,MACJ,KAAK;AAAA,MAEJ,UAAA,6BAAA;AAAA,IAA6B;AAAA,EAAA;AAG1C;AAEO,MAAM,sBAAsBC,eAAM,WAAW,uBAAuB;"}
+{"version":3,"file":"ChipSuggestDropdown.js","sources":["../../../../src/components/Chip/ChipSuggest/ChipSuggestDropdown.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { FocusTrap } from \"focus-trap-react\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { ISuggestOption } from \"../../Suggest/types\";\nimport { IChipSuggestDropdownProps } from \"./types\";\nimport { useSuggestContext } from \"../../Suggest/SuggestContext\";\nimport { Dropdown, DropdownList, DropdownListItem } from \"../../Dropdown\";\nimport { ChipSuggestDesktopDropdownField } from \"./desktop/ChipSuggestDesktopDropdownField\";\nimport { SuggestMobileDropdownContent } from \"../../Suggest/SuggestMobileDropdownContent\";\nimport { setForwardedRef } from \"./utils\";\n\nconst KEY_CODES_SELECTABLE = [EVENT_KEY_CODES.ENTER];\n\nconst ChipSuggestDropdownBase = <T extends ISuggestOption>(\n    { children, size, targetRef, focusTrapProps, ...restProps }: IChipSuggestDropdownProps<T>,\n    ref: React.ForwardedRef<HTMLDivElement>,\n) => {\n    const {\n        value,\n        options,\n        dropdownListId,\n        dropdownOpen,\n        dropdownListLoading,\n        dropdownRef,\n        closeDropdown,\n        onSelect,\n        setDropdownOpen,\n    } = useSuggestContext<T>();\n\n    const setRef = useCallback(\n        (instance: HTMLDivElement | null) => {\n            // Suggest отличает клик внутри списка от клика вне компонента по dropdownRef из контекста.\n            dropdownRef.current = instance;\n            setForwardedRef(ref, instance);\n        },\n        [dropdownRef, ref],\n    );\n\n    const handleDropdownOpen = useCallback(\n        (open: boolean) => {\n            if (open) {\n                setDropdownOpen(true);\n            } else {\n                closeDropdown();\n            }\n        },\n        [setDropdownOpen, closeDropdown],\n    );\n\n    const desktopDropdownContent = (\n        <FocusTrap\n            {...focusTrapProps}\n            focusTrapOptions={{\n                clickOutsideDeactivates: true,\n                returnFocusOnDeactivate: true,\n                ...focusTrapProps?.focusTrapOptions,\n            }}\n        >\n            <div role=\"presentation\">\n                <ChipSuggestDesktopDropdownField size={size}>{children}</ChipSuggestDesktopDropdownField>\n                <DropdownList\n                    id={dropdownListId}\n                    size={size}\n                    dropdownOpened={dropdownOpen}\n                    loading={dropdownListLoading}\n                    style={options.length === 0 ? { display: \"none\" } : undefined}\n                >\n                    {options.map((option) => (\n                        <DropdownListItem\n                            key={option.id}\n                            id={option.id}\n                            keyCodesForSelection={KEY_CODES_SELECTABLE}\n                            selected={option.id === value?.id}\n                            showNotificationIcon={option.showNotificationIcon}\n                            onSelect={() => onSelect(option)}\n                        >\n                            {option.content || option.label}\n                        </DropdownListItem>\n                    ))}\n                </DropdownList>\n            </div>\n        </FocusTrap>\n    );\n\n    return (\n        <Dropdown\n            size={size}\n            targetRef={targetRef}\n            opened={dropdownOpen}\n            setOpened={handleDropdownOpen}\n            mobileViewProps={{\n                children: <SuggestMobileDropdownContent />,\n            }}\n            {...restProps}\n            ref={setRef}\n        >\n            {desktopDropdownContent}\n        </Dropdown>\n    );\n};\n\n/**\n * Выпадающий список ChipSuggest: поле фильтрации и список опций из SuggestContext.\n * На десктопе содержимое обёрнуто в FocusTrap, на мобильных — заменяется полноэкранным наполнением Suggest.\n */\nexport const ChipSuggestDropdown = React.forwardRef(ChipSuggestDropdownBase) as <T extends ISuggestOption>(\n    props: IChipSuggestDropdownProps<T> & React.RefAttributes<HTMLDivElement>,\n) => JSX.Element;\n"],"names":["FocusTrap","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,uBAAuB,CAAC,gBAAgB,KAAK;AAEnD,MAAM,0BAA0B,CAC5B,EAAE,UAAU,MAAM,WAAW,gBAAgB,GAAG,UAAA,GAChD,QACC;AACD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACA,kBAAA;AAEJ,QAAM,SAAS;AAAA,IACX,CAAC,aAAoC;AAEjC,kBAAY,UAAU;AACtB,sBAAgB,KAAK,QAAQ;AAAA,IACjC;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,EAAA;AAGrB,QAAM,qBAAqB;AAAA,IACvB,CAAC,SAAkB;AACf,UAAI,MAAM;AACN,wBAAgB,IAAI;AAAA,MACxB,OAAO;AACH,sBAAA;AAAA,MACJ;AAAA,IACJ;AAAA,IACA,CAAC,iBAAiB,aAAa;AAAA,EAAA;AAGnC,QAAM,yBACF;AAAA,IAACA,sBAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,kBAAkB;AAAA,QACd,yBAAyB;AAAA,QACzB,yBAAyB;AAAA,QACzB,GAAG,iDAAgB;AAAA,MAAA;AAAA,MAGvB,UAAA,qBAAC,OAAA,EAAI,MAAK,gBACN,UAAA;AAAA,QAAA,oBAAC,iCAAA,EAAgC,MAAa,SAAA,CAAS;AAAA,QACvD;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ;AAAA,YACA,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,OAAO,QAAQ,WAAW,IAAI,EAAE,SAAS,WAAW;AAAA,YAEnD,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEG,IAAI,OAAO;AAAA,gBACX,sBAAsB;AAAA,gBACtB,UAAU,OAAO,QAAO,+BAAO;AAAA,gBAC/B,sBAAsB,OAAO;AAAA,gBAC7B,UAAU,MAAM,SAAS,MAAM;AAAA,gBAE9B,UAAA,OAAO,WAAW,OAAO;AAAA,cAAA;AAAA,cAPrB,OAAO;AAAA,YAAA,CASnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACL,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAIR,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,iBAAiB;AAAA,QACb,8BAAW,8BAAA,CAAA,CAA6B;AAAA,MAAA;AAAA,MAE3C,GAAG;AAAA,MACJ,KAAK;AAAA,MAEJ,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;AAMO,MAAM,sBAAsBC,eAAM,WAAW,uBAAuB;"}