@hh.ru/magritte-ui-chips-trigger 4.5.7 → 4.6.1

package/ChipsList-F41a4_2C.js

@@ -0,0 +1,60 @@
+import './index.css';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
+import { CustomChip } from '@hh.ru/magritte-ui-chips';
+
+var styles = {"root":"magritte-root___-zVdz_4-6-1","focused":"magritte-focused___0Uzyu_4-6-1","invalid":"magritte-invalid___tVzQV_4-6-1","disabled":"magritte-disabled___UeqcV_4-6-1","label":"magritte-label___j7Trt_4-6-1","field-input":"magritte-field-input___04Cag_4-6-1","fieldInput":"magritte-field-input___04Cag_4-6-1","scrollable-area":"magritte-scrollable-area___-xMF2_4-6-1","scrollableArea":"magritte-scrollable-area___-xMF2_4-6-1","focus-visible":"magritte-focus-visible___ifvAP_4-6-1","focusVisible":"magritte-focus-visible___ifvAP_4-6-1","large":"magritte-large___JIrIy_4-6-1","field":"magritte-field___rlEmn_4-6-1","icon":"magritte-icon___fDMiz_4-6-1","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-6-1","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-6-1","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-6-1","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-6-1","medium":"magritte-medium___Xk-XB_4-6-1","chips-and-input":"magritte-chips-and-input___qg-Ba_4-6-1","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-6-1","label-wrapper":"magritte-label-wrapper___De7Bm_4-6-1","labelWrapper":"magritte-label-wrapper___De7Bm_4-6-1","icon_expanded":"magritte-icon_expanded___RaOT-_4-6-1","iconExpanded":"magritte-icon_expanded___RaOT-_4-6-1","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-6-1","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-6-1","mobile-root":"magritte-mobile-root___-hey4_4-6-1","mobileRoot":"magritte-mobile-root___-hey4_4-6-1","mobile-chips":"magritte-mobile-chips___cuB21_4-6-1","mobileChips":"magritte-mobile-chips___cuB21_4-6-1"};
+
+const ChipLayoutComponentDefault = ({ data: _, ...props }) => /* @__PURE__ */ jsx(CustomChip, { ...props });
+const ChipsList = ({
+  state,
+  onChange,
+  chipLayoutComponent,
+  disabled,
+  deleteButtonAriaLabel
+}) => {
+  const deleteButtonAriaTrl = useTranslation("ChipsTrigger", "delete");
+  const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;
+  const deleteHandler = useCallback(
+    (index) => {
+      const chips = [...state.chips];
+      const [deletedChip] = chips.splice(index, 1);
+      onChange({
+        value: state.value,
+        chips,
+        event: { type: "remove", modifier: "cross", element: deletedChip }
+      });
+    },
+    [onChange, state.chips, state.value]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: state.chips.map((chip, index) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.customChipWrapper,
+        onMouseDown: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          ChipLayoutComponent,
+          {
+            Element: "button",
+            size: "extra-small",
+            onDelete: () => {
+              deleteHandler(index);
+            },
+            dataQaWrapper: `chips-trigger-chip-${chip.value}`,
+            deleteButtonAriaLabel: deleteButtonAriaLabel ?? deleteButtonAriaTrl,
+            disabled,
+            data: chip.data,
+            deleteOnly: true,
+            children: chip.label ?? chip.value
+          }
+        )
+      },
+      `${chip.value}-${index}`
+    );
+  }) });
+};
+
+export { ChipsList as C, styles as s };
+//# sourceMappingURL=ChipsList-F41a4_2C.js.map

package/ChipsList-F41a4_2C.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipsList-F41a4_2C.js","sources":["src/ChipsList.tsx"],"sourcesContent":["import { ReactElement, useCallback } from 'react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipCustomLayoutProps, ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nimport styles from './chips-trigger.less';\n\nconst ChipLayoutComponentDefault = ({ data: _, ...props }: ChipCustomLayoutProps): ReactElement => (\n    <CustomChip {...props} />\n);\n\ntype ChipsListProps<T> = Pick<\n    ChipsTriggerProps<T>,\n    'state' | 'onChange' | 'chipLayoutComponent' | 'disabled' | 'deleteButtonAriaLabel'\n>;\n\nconst ChipsList = <T,>({\n    state,\n    onChange,\n    chipLayoutComponent,\n    disabled,\n    deleteButtonAriaLabel,\n}: ChipsListProps<T>): ReactElement => {\n    const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n    const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;\n\n    const deleteHandler = useCallback(\n        (index: number) => {\n            const chips = [...state.chips];\n            const [deletedChip] = chips.splice(index, 1);\n            onChange({\n                value: state.value,\n                chips,\n                event: { type: 'remove', modifier: 'cross', element: deletedChip },\n            });\n        },\n        [onChange, state.chips, state.value]\n    );\n\n    return (\n        <>\n            {state.chips.map((chip, index) => {\n                return (\n                    <div\n                        key={`${chip.value}-${index}`}\n                        className={styles.customChipWrapper}\n                        onMouseDown={(event) => event.preventDefault()}\n                    >\n                        <ChipLayoutComponent\n                            Element=\"button\"\n                            size=\"extra-small\"\n                            onDelete={() => {\n                                deleteHandler(index);\n                            }}\n                            dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                            deleteButtonAriaLabel={deleteButtonAriaLabel ?? deleteButtonAriaTrl}\n                            disabled={disabled}\n                            data={chip.data}\n                            deleteOnly\n                        >\n                            {chip.label ?? chip.value}\n                        </ChipLayoutComponent>\n                    </div>\n                );\n            })}\n        </>\n    );\n};\n\nexport { ChipsList };\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,0BAAA,GAA6B,CAAC,EAAE,IAAM,EAAA,CAAA,EAAG,GAAG,KAAA,EAC9C,qBAAA,GAAA,CAAC,UAAY,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA,CAAA;AAQ3B,MAAM,YAAY,CAAK;AAAA,EACnB,KAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AACJ,CAAuC,KAAA;AACnC,EAAM,MAAA,mBAAA,GAAsB,cAAe,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AACnE,EAAA,MAAM,sBAAsB,mBAAuB,IAAA,0BAAA,CAAA;AAEnD,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IAClB,CAAC,KAAkB,KAAA;AACf,MAAA,MAAM,KAAQ,GAAA,CAAC,GAAG,KAAA,CAAM,KAAK,CAAA,CAAA;AAC7B,MAAA,MAAM,CAAC,WAAW,CAAA,GAAI,KAAM,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA,CAAA;AAC3C,MAAS,QAAA,CAAA;AAAA,QACL,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,KAAA;AAAA,QACA,OAAO,EAAE,IAAA,EAAM,UAAU,QAAU,EAAA,OAAA,EAAS,SAAS,WAAY,EAAA;AAAA,OACpE,CAAA,CAAA;AAAA,KACL;AAAA,IACA,CAAC,QAAA,EAAU,KAAM,CAAA,KAAA,EAAO,MAAM,KAAK,CAAA;AAAA,GACvC,CAAA;AAEA,EAAA,uCAES,QAAM,EAAA,KAAA,CAAA,KAAA,CAAM,GAAI,CAAA,CAAC,MAAM,KAAU,KAAA;AAC9B,IACI,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QAEG,WAAW,MAAO,CAAA,iBAAA;AAAA,QAClB,WAAa,EAAA,CAAC,KAAU,KAAA,KAAA,CAAM,cAAe,EAAA;AAAA,QAE7C,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACG,OAAQ,EAAA,QAAA;AAAA,YACR,IAAK,EAAA,aAAA;AAAA,YACL,UAAU,MAAM;AACZ,cAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,aACvB;AAAA,YACA,aAAA,EAAe,CAAsB,mBAAA,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,YAC/C,uBAAuB,qBAAyB,IAAA,mBAAA;AAAA,YAChD,QAAA;AAAA,YACA,MAAM,IAAK,CAAA,IAAA;AAAA,YACX,UAAU,EAAA,IAAA;AAAA,YAET,QAAA,EAAA,IAAA,CAAK,SAAS,IAAK,CAAA,KAAA;AAAA,WAAA;AAAA,SACxB;AAAA,OAAA;AAAA,MAjBK,CAAG,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAAA,KAkB/B,CAAA;AAAA,GAEP,CACL,EAAA,CAAA,CAAA;AAER;;;;"}

package/ChipsList.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { ChipsTriggerProps } from './types';
+type ChipsListProps<T> = Pick<ChipsTriggerProps<T>, 'state' | 'onChange' | 'chipLayoutComponent' | 'disabled' | 'deleteButtonAriaLabel'>;
+declare const ChipsList: <T>({ state, onChange, chipLayoutComponent, disabled, deleteButtonAriaLabel, }: ChipsListProps<T>) => ReactElement;
+export { ChipsList };

package/ChipsList.js

@@ -0,0 +1,7 @@
+import './index.css';
+import 'react/jsx-runtime';
+import 'react';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-ui-chips';
+export { C as ChipsList } from './ChipsList-F41a4_2C.js';
+//# sourceMappingURL=ChipsList.js.map

package/ChipsList.js.map

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

package/ChipsTrigger.js

@@ -1,262 +1,25 @@
 import './index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useId, useCallback, useEffect, isValidElement } from 'react';
-import classnames from 'classnames';
-import { keyboardMatch, keyboardKeys, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
-import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
-import { useTranslation } from '@hh.ru/magritte-common-use-translation';
+import { forwardRef } from 'react';
 import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
-import { CustomChip } from '@hh.ru/magritte-ui-chips';
+import { DesktopChipsTrigger } from './DesktopChipsTrigger.js';
+import { MobileChipsTrigger } from './MobileChipsTrigger.js';
 import { FormHelper } from '@hh.ru/magritte-ui-form-helper';
-import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
-import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
-import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
+import 'classnames';
+import '@hh.ru/magritte-common-keyboard';
+import '@hh.ru/magritte-common-use-multiple-refs';
+import './ChipsList-F41a4_2C.js';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-ui-chips';
+import '@hh.ru/magritte-ui-icon/icon';
+import '@hh.ru/magritte-ui-input/useFocus';
+import '@hh.ru/magritte-ui-scrollbar';
 
-var styles = {"root":"magritte-root___-zVdz_4-5-7","focused":"magritte-focused___0Uzyu_4-5-7","invalid":"magritte-invalid___tVzQV_4-5-7","disabled":"magritte-disabled___UeqcV_4-5-7","label":"magritte-label___j7Trt_4-5-7","field-input":"magritte-field-input___04Cag_4-5-7","fieldInput":"magritte-field-input___04Cag_4-5-7","scrollable-area":"magritte-scrollable-area___-xMF2_4-5-7","scrollableArea":"magritte-scrollable-area___-xMF2_4-5-7","focus-visible":"magritte-focus-visible___ifvAP_4-5-7","focusVisible":"magritte-focus-visible___ifvAP_4-5-7","large":"magritte-large___JIrIy_4-5-7","field":"magritte-field___rlEmn_4-5-7","icon":"magritte-icon___fDMiz_4-5-7","scrollable-area-wrapper":"magritte-scrollable-area-wrapper___hZNQd_4-5-7","scrollableAreaWrapper":"magritte-scrollable-area-wrapper___hZNQd_4-5-7","scrollable-area-wrapper_with-icon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-7","scrollableAreaWrapperWithIcon":"magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-7","medium":"magritte-medium___Xk-XB_4-5-7","chips-and-input":"magritte-chips-and-input___qg-Ba_4-5-7","chipsAndInput":"magritte-chips-and-input___qg-Ba_4-5-7","label-wrapper":"magritte-label-wrapper___De7Bm_4-5-7","labelWrapper":"magritte-label-wrapper___De7Bm_4-5-7","icon_expanded":"magritte-icon_expanded___RaOT-_4-5-7","iconExpanded":"magritte-icon_expanded___RaOT-_4-5-7","custom-chip-wrapper":"magritte-custom-chip-wrapper___a9kJ6_4-5-7","customChipWrapper":"magritte-custom-chip-wrapper___a9kJ6_4-5-7"};
-
-const focusOnLastChip = (event, chipsContainer, input) => {
-  if (!chipsContainer || !input) {
-    return;
-  }
-  const nextFocusableElement = findNextFocusableElement(chipsContainer, input, "left", "list");
-  if (nextFocusableElement !== null) {
-    event.preventDefault();
-    nextFocusableElement.focus();
-  }
-};
-const ChipLayoutComponentDefault = ({ data: _, ...props }) => /* @__PURE__ */ jsx(CustomChip, { ...props });
-const ChipsTriggerComponent = ({
-  size = "large",
-  placeholder,
-  disabled,
-  expanded: externalExpanded,
-  toggleExpanded: toggleExternalExpanded,
-  state,
-  chipLayoutComponent,
-  invalid,
-  maxHeight,
-  description,
-  errorMessage,
-  wrapperRef,
-  rightIcon = true,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  onChangeInput: onChangeInputExternal,
-  allowArbitraryValues = true,
-  "data-qa": dataQa = "chips-trigger",
-  deleteButtonAriaLabel: _deleteButtonAriaLabel,
-  "aria-expanded": ariaExpanded,
-  "aria-controls": ariaControls
-}, ref) => {
+const ChipsTriggerComponent = (props, ref) => {
   const { isMobile } = useBreakpoint();
-  const [expanded, setExpanded] = useState(false);
-  const [isFocusVisible, setFocusVisible] = useState(false);
-  const stateRef = useRef({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });
-  const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({
-    axis: disabled ? "none" : "vertical"
-  });
-  const chipsRootRef = useRef(null);
-  const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);
-  const chipsContainerRef = useRef(null);
-  const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);
-  const inputRef = useRef(null);
-  const inputRefCallback = useMultipleRefs(inputRef, ref);
-  const showLabel = state.value === "" && state.chips.length === 0 && placeholder !== "";
-  const labelId = useId();
-  const ariaLabeledBy = `chips-trigger-label-${labelId}`;
-  const deleteButtonAriaTrl = useTranslation("ChipsTrigger", "delete");
-  const onChangeInput = useCallback(
-    (value) => {
-      onChange({
-        value,
-        chips: state.chips,
-        event: { type: "change", modifier: "keyboard" }
-      });
-      onChangeInputExternal?.(value);
-    },
-    [state.chips, onChange, onChangeInputExternal]
-  );
-  const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);
-  useEffect(() => {
-    if (inputRef.current) {
-      setFocusVisible(isFocused && inputRef.current.classList.contains("focus-visible"));
-    }
-  }, [isFocused]);
-  const deleteHandler = useCallback(
-    (index) => {
-      const chips = [...state.chips];
-      const [deletedChip] = chips.splice(index, 1);
-      onChange({
-        value: state.value,
-        chips,
-        event: { type: "remove", modifier: "cross", element: deletedChip }
-      });
-    },
-    [onChange, state.chips, state.value]
-  );
-  const keyDownHandler = useCallback(
-    (event) => {
-      if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {
-        if (state.value.length === 0) {
-          return;
-        }
-        onChange({
-          value: "",
-          chips: [...state.chips, { value: state.value, userInput: true }],
-          event: { type: "add", modifier: "enter" }
-        });
-        onChangeInputExternal?.("");
-      }
-      if (state.value === "" && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {
-        if (state.chips.length === 0) {
-          return;
-        }
-        const chips = [...state.chips];
-        const deletedChip = chips.pop();
-        onChange({
-          value: state.value,
-          chips,
-          event: { type: "remove", modifier: "backspace", element: deletedChip }
-        });
-      }
-      if (state.value === "" && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {
-        focusOnLastChip(event, chipsContainerRef.current, inputRef.current);
-      }
-    },
-    [allowArbitraryValues, onChange, onChangeInputExternal, state]
-  );
-  const scrollableAreaStyle = maxHeight ? { maxHeight: `${maxHeight - (size === "medium" ? 16 : 24)}px` } : void 0;
-  const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;
-  const showIcon = rightIcon !== false;
-  const showCustomIcon = isValidElement(rightIcon);
+  const { description, errorMessage, disabled, invalid } = props;
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: chipsRootRefCallback,
-        className: classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {
-          [styles.focused]: isFocused,
-          [styles.focusVisible]: isFocusVisible,
-          [styles.disabled]: !!disabled,
-          [styles.invalid]: !!invalid
-        }),
-        onFocus: () => {
-          if (disabled) {
-            return;
-          }
-          if (!inputRef.current) {
-            return;
-          }
-          setExpanded(true);
-          if (document.activeElement === chipsRootRef.current) {
-            inputRef.current.focus();
-          }
-        },
-        onBlur: (event) => {
-          stateRef.current.hadFocusWhenClicked &&= event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;
-          setExpanded(false);
-        },
-        onKeyDown,
-        onMouseDown: () => {
-          stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;
-          stateRef.current.wasExpandedWhenClicked = !!externalExpanded;
-        },
-        onClick: () => {
-          if (stateRef.current.hadFocusWhenClicked && stateRef.current.wasExpandedWhenClicked === externalExpanded) {
-            toggleExternalExpanded?.();
-          }
-          stateRef.current.hadFocusWhenClicked = false;
-          stateRef.current.wasExpandedWhenClicked = false;
-        },
-        tabIndex: disabled ? void 0 : 0,
-        "data-qa": dataQa,
-        "aria-disabled": disabled,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: scrollableAreaStyle,
-              className: classnames(styles.scrollableAreaWrapper, {
-                [styles.scrollableAreaWrapperWithIcon]: showIcon
-              }),
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: styles.scrollableArea,
-                  ref: scrollbar.scrollContainerRef,
-                  children: /* @__PURE__ */ jsxs("div", { ref: chipsContainerRefCallback, className: styles.chipsAndInput, children: [
-                    state.chips.map((chip, index) => {
-                      return /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: styles.customChipWrapper,
-                          onMouseDown: (event) => event.preventDefault(),
-                          children: /* @__PURE__ */ jsx(
-                            ChipLayoutComponent,
-                            {
-                              Element: "button",
-                              size: "extra-small",
-                              onDelete: () => {
-                                deleteHandler(index);
-                              },
-                              dataQaWrapper: `chips-trigger-chip-${chip.value}`,
-                              deleteButtonAriaLabel: _deleteButtonAriaLabel ?? deleteButtonAriaTrl,
-                              disabled,
-                              data: chip.data,
-                              deleteOnly: true,
-                              children: chip.label ?? chip.value
-                            }
-                          )
-                        },
-                        `${chip.value}-${index}`
-                      );
-                    }),
-                    /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          ref: inputRefCallback,
-                          className: styles.fieldInput,
-                          type: "text",
-                          disabled,
-                          value: state.value,
-                          onKeyDown: keyDownHandler,
-                          onFocus: focusHandler,
-                          onBlur: blurHandler,
-                          onChange: changeHandler,
-                          "data-qa": "chips-trigger-input",
-                          readOnly: isMobile,
-                          "aria-labelledby": showLabel ? ariaLabeledBy : void 0,
-                          role: "combobox",
-                          "aria-haspopup": "listbox",
-                          "aria-autocomplete": "list",
-                          "aria-expanded": ariaExpanded,
-                          "aria-controls": ariaControls
-                        }
-                      ),
-                      showLabel && /* @__PURE__ */ jsx("div", { className: styles.labelWrapper, children: /* @__PURE__ */ jsx("label", { className: styles.label, id: ariaLabeledBy, children: placeholder }) })
-                    ] })
-                  ] })
-                }
-              )
-            }
-          ),
-          showIcon && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classnames(styles.icon, {
-                [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon
-              }),
-              "data-qa": "chips-trigger-icon",
-              children: showCustomIcon ? rightIcon : /* @__PURE__ */ jsx(ChevronDownOutlinedSize24, {})
-            }
-          ),
-          hasVerticalScroll && /* @__PURE__ */ jsx(Scrollbar, { ...verticalScrollbarProps })
-        ]
-      }
-    ),
+    isMobile ? /* @__PURE__ */ jsx(MobileChipsTrigger, { ...props, innerRef: ref }) : /* @__PURE__ */ jsx(DesktopChipsTrigger, { ...props, innerRef: ref }),
     /* @__PURE__ */ jsx(FormHelper, { description, errorMessage, disabled, invalid })
   ] });
 };

package/ChipsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsTrigger.js","sources":["src/ChipsTrigger.tsx"],"sourcesContent":["import {\n    ForwardedRef,\n    LegacyRef,\n    InputHTMLAttributes,\n    KeyboardEventHandler,\n    ReactElement,\n    SyntheticEvent,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n    isValidElement,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipCustomLayoutProps, ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n    if (!chipsContainer || !input) {\n        return;\n    }\n    const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n    if (nextFocusableElement !== null) {\n        event.preventDefault();\n        nextFocusableElement.focus();\n    }\n};\n\nconst ChipLayoutComponentDefault = ({ data: _, ...props }: ChipCustomLayoutProps): ReactElement => (\n    <CustomChip {...props} />\n);\n\ntype State = {\n    hadFocusWhenClicked: boolean;\n    wasExpandedWhenClicked: boolean;\n};\n\nconst ChipsTriggerComponent = <T,>(\n    {\n        size = 'large',\n        placeholder,\n        disabled,\n        expanded: externalExpanded,\n        toggleExpanded: toggleExternalExpanded,\n        state,\n        chipLayoutComponent,\n        invalid,\n        maxHeight,\n        description,\n        errorMessage,\n        wrapperRef,\n        rightIcon = true,\n        onChange,\n        onFocus,\n        onBlur,\n        onKeyDown,\n        onChangeInput: onChangeInputExternal,\n        allowArbitraryValues = true,\n        'data-qa': dataQa = 'chips-trigger',\n        deleteButtonAriaLabel: _deleteButtonAriaLabel,\n        'aria-expanded': ariaExpanded,\n        'aria-controls': ariaControls,\n    }: ChipsTriggerProps<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const { isMobile } = useBreakpoint();\n    const [expanded, setExpanded] = useState(false);\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n        axis: disabled ? 'none' : 'vertical',\n    });\n\n    const chipsRootRef = useRef<HTMLDivElement>(null);\n    const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n    const chipsContainerRef = useRef<HTMLDivElement>(null);\n    const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputRefCallback = useMultipleRefs(inputRef, ref);\n    const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n    const labelId = useId();\n    const ariaLabeledBy = `chips-trigger-label-${labelId}`;\n    const deleteButtonAriaTrl = useTranslation('ChipsTrigger', 'delete');\n\n    const onChangeInput = useCallback(\n        (value: string) => {\n            onChange({\n                value,\n                chips: state.chips,\n                event: { type: 'change', modifier: 'keyboard' },\n            });\n            onChangeInputExternal?.(value);\n        },\n        [state.chips, onChange, onChangeInputExternal]\n    );\n    const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    const deleteHandler = useCallback(\n        (index: number) => {\n            const chips = [...state.chips];\n            const [deletedChip] = chips.splice(index, 1);\n            onChange({\n                value: state.value,\n                chips,\n                event: { type: 'remove', modifier: 'cross', element: deletedChip },\n            });\n        },\n        [onChange, state.chips, state.value]\n    );\n\n    const keyDownHandler = useCallback<KeyboardEventHandler>(\n        (event) => {\n            // создаем новый чипс и затираем текстовый инпут\n            if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                if (state.value.length === 0) {\n                    return;\n                }\n                onChange({\n                    value: '',\n                    chips: [...state.chips, { value: state.value, userInput: true }],\n                    event: { type: 'add', modifier: 'enter' },\n                });\n                onChangeInputExternal?.('');\n            }\n            // удаляем последний созданный чипс\n            if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n                if (state.chips.length === 0) {\n                    return;\n                }\n                const chips = [...state.chips];\n                const deletedChip = chips.pop();\n                onChange({\n                    value: state.value,\n                    chips,\n                    event: { type: 'remove', modifier: 'backspace', element: deletedChip },\n                });\n            }\n            // пытаемся найти ближайший чипс для фокуса\n            if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n                focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n            }\n        },\n        [allowArbitraryValues, onChange, onChangeInputExternal, state]\n    );\n\n    // при выставлении высоты учитваем падинги\n    // иначе высота будет больше значения свойства\n    const scrollableAreaStyle = maxHeight ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` } : undefined;\n    const ChipLayoutComponent = chipLayoutComponent ?? ChipLayoutComponentDefault;\n\n    const showIcon = rightIcon !== false;\n    const showCustomIcon = isValidElement(rightIcon);\n\n    return (\n        <div>\n            <div\n                ref={chipsRootRefCallback}\n                className={classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {\n                    [styles.focused]: isFocused,\n                    [styles.focusVisible]: isFocusVisible,\n                    [styles.disabled]: !!disabled,\n                    [styles.invalid]: !!invalid,\n                })}\n                onFocus={() => {\n                    if (disabled) {\n                        return;\n                    }\n                    if (!inputRef.current) {\n                        return;\n                    }\n                    setExpanded(true);\n                    // добавляем .focus() еще и тут\n                    // чтобы не сбрасывать фокус во время клика по chip\n                    // или по клику на враппер\n                    if (document.activeElement === chipsRootRef.current) {\n                        inputRef.current.focus();\n                    }\n                }}\n                onBlur={(event) => {\n                    stateRef.current.hadFocusWhenClicked &&=\n                        event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n                    setExpanded(false);\n                }}\n                onKeyDown={onKeyDown}\n                onMouseDown={() => {\n                    // при повторном клике по инпуту в фокусе нужно закрыть дроп\n                    // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n                    // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n                    // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n                    stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n                    stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n                }}\n                onClick={() => {\n                    if (\n                        stateRef.current.hadFocusWhenClicked &&\n                        stateRef.current.wasExpandedWhenClicked === externalExpanded\n                    ) {\n                        toggleExternalExpanded?.();\n                    }\n                    stateRef.current.hadFocusWhenClicked = false;\n                    stateRef.current.wasExpandedWhenClicked = false;\n                }}\n                tabIndex={disabled ? undefined : 0}\n                data-qa={dataQa}\n                aria-disabled={disabled}\n            >\n                <div\n                    style={scrollableAreaStyle}\n                    className={classnames(styles.scrollableAreaWrapper, {\n                        [styles.scrollableAreaWrapperWithIcon]: showIcon,\n                    })}\n                >\n                    <div\n                        className={styles.scrollableArea}\n                        ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}\n                    >\n                        <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\n                            {state.chips.map((chip, index) => {\n                                return (\n                                    <div\n                                        key={`${chip.value}-${index}`}\n                                        className={styles.customChipWrapper}\n                                        onMouseDown={(event) => event.preventDefault()}\n                                    >\n                                        <ChipLayoutComponent\n                                            Element=\"button\"\n                                            size=\"extra-small\"\n                                            onDelete={() => {\n                                                deleteHandler(index);\n                                            }}\n                                            dataQaWrapper={`chips-trigger-chip-${chip.value}`}\n                                            deleteButtonAriaLabel={_deleteButtonAriaLabel ?? deleteButtonAriaTrl}\n                                            disabled={disabled}\n                                            data={chip.data}\n                                            deleteOnly\n                                        >\n                                            {chip.label ?? chip.value}\n                                        </ChipLayoutComponent>\n                                    </div>\n                                );\n                            })}\n                            <div className={styles.field}>\n                                <input\n                                    ref={inputRefCallback}\n                                    className={styles.fieldInput}\n                                    type=\"text\"\n                                    disabled={disabled}\n                                    value={state.value}\n                                    onKeyDown={keyDownHandler}\n                                    onFocus={focusHandler}\n                                    onBlur={blurHandler}\n                                    onChange={changeHandler}\n                                    data-qa=\"chips-trigger-input\"\n                                    readOnly={isMobile}\n                                    aria-labelledby={showLabel ? ariaLabeledBy : undefined}\n                                    role={'combobox'}\n                                    aria-haspopup={'listbox'}\n                                    aria-autocomplete={'list'}\n                                    aria-expanded={ariaExpanded}\n                                    aria-controls={ariaControls}\n                                />\n                                {showLabel && (\n                                    <div className={styles.labelWrapper}>\n                                        <label className={styles.label} id={ariaLabeledBy}>\n                                            {placeholder}\n                                        </label>\n                                    </div>\n                                )}\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                {showIcon && (\n                    <div\n                        className={classnames(styles.icon, {\n                            [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,\n                        })}\n                        data-qa=\"chips-trigger-icon\"\n                    >\n                        {showCustomIcon ? rightIcon : <ChevronDownOutlinedSize24 />}\n                    </div>\n                )}\n                {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n            </div>\n            <FormHelper description={description} errorMessage={errorMessage} disabled={disabled} invalid={invalid} />\n        </div>\n    );\n};\n\nconst ChipsTrigger = forwardRef(ChipsTriggerComponent) as (<T>(\n    props: ChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {\n            ref?: LegacyRef<HTMLInputElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nChipsTrigger.displayName = 'ChipsTrigger';\n\nexport { ChipsTrigger };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChipsTrigger.js","sources":["src/ChipsTrigger.tsx"],"sourcesContent":["import { ForwardedRef, LegacyRef, InputHTMLAttributes, ReactElement, forwardRef } from 'react';\n\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { DesktopChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/DesktopChipsTrigger';\nimport { MobileChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/MobileChipsTrigger';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { FormHelper } from '@hh.ru/magritte-ui-form-helper';\n\nconst ChipsTriggerComponent = <T,>(\n    props: ChipsTriggerProps<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const { isMobile } = useBreakpoint();\n    const { description, errorMessage, disabled, invalid } = props;\n\n    return (\n        <div>\n            {isMobile ? (\n                <MobileChipsTrigger {...props} innerRef={ref} />\n            ) : (\n                <DesktopChipsTrigger {...props} innerRef={ref} />\n            )}\n            <FormHelper description={description} errorMessage={errorMessage} disabled={disabled} invalid={invalid} />\n        </div>\n    );\n};\n\nconst ChipsTrigger = forwardRef(ChipsTriggerComponent) as (<T>(\n    props: ChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {\n            ref?: LegacyRef<HTMLInputElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nChipsTrigger.displayName = 'ChipsTrigger';\n\nexport { ChipsTrigger };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,qBAAA,GAAwB,CAC1B,KAAA,EACA,GACC,KAAA;AACD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,aAAc,EAAA,CAAA;AACnC,EAAA,MAAM,EAAE,WAAA,EAAa,YAAc,EAAA,QAAA,EAAU,SAAY,GAAA,KAAA,CAAA;AAEzD,EAAA,4BACK,KACI,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA,mBACI,GAAA,CAAA,kBAAA,EAAA,EAAoB,GAAG,KAAA,EAAO,QAAU,EAAA,GAAA,EAAK,CAE9C,mBAAA,GAAA,CAAC,mBAAqB,EAAA,EAAA,GAAG,KAAO,EAAA,QAAA,EAAU,GAAK,EAAA,CAAA;AAAA,oBAElD,GAAA,CAAA,UAAA,EAAA,EAAW,WAA0B,EAAA,YAAA,EAA4B,UAAoB,OAAkB,EAAA,CAAA;AAAA,GAC5G,EAAA,CAAA,CAAA;AAER,CAAA,CAAA;AAEM,MAAA,YAAA,GAAe,WAAW,qBAAqB,EAAA;AAOrD,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}

package/DesktopChipsTrigger.d.ts

@@ -0,0 +1,7 @@
+import { ForwardedRef, InputHTMLAttributes, ReactElement } from 'react';
+import { ChipsTriggerProps } from './types';
+type DesktopChipsTriggerProps<T> = ChipsTriggerProps<T> & Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {
+    innerRef: ForwardedRef<HTMLInputElement>;
+};
+declare const DesktopChipsTrigger: <T>({ size, placeholder, disabled, expanded: externalExpanded, toggleExpanded: toggleExternalExpanded, state, chipLayoutComponent, invalid, maxHeight, wrapperRef, rightIcon, onChange, onFocus, onBlur, onKeyDown, onChangeInput: onChangeInputExternal, allowArbitraryValues, 'data-qa': dataQa, deleteButtonAriaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, innerRef, }: DesktopChipsTriggerProps<T>) => ReactElement;
+export { DesktopChipsTrigger };

package/DesktopChipsTrigger.js

@@ -0,0 +1,218 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback, useEffect, isValidElement } from 'react';
+import classnames from 'classnames';
+import { keyboardMatch, keyboardKeys, findNextFocusableElement } from '@hh.ru/magritte-common-keyboard';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { s as styles, C as ChipsList } from './ChipsList-F41a4_2C.js';
+import { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { useFocus } from '@hh.ru/magritte-ui-input/useFocus';
+import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
+import '@hh.ru/magritte-common-use-translation';
+import '@hh.ru/magritte-ui-chips';
+
+const focusOnLastChip = (event, chipsContainer, input) => {
+  if (!chipsContainer || !input) {
+    return;
+  }
+  const nextFocusableElement = findNextFocusableElement(chipsContainer, input, "left", "list");
+  if (nextFocusableElement !== null) {
+    event.preventDefault();
+    nextFocusableElement.focus();
+  }
+};
+const DesktopChipsTrigger = ({
+  size = "large",
+  placeholder,
+  disabled,
+  expanded: externalExpanded,
+  toggleExpanded: toggleExternalExpanded,
+  state,
+  chipLayoutComponent,
+  invalid,
+  maxHeight,
+  wrapperRef,
+  rightIcon = true,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  onChangeInput: onChangeInputExternal,
+  allowArbitraryValues = true,
+  "data-qa": dataQa = "chips-trigger",
+  deleteButtonAriaLabel,
+  "aria-expanded": ariaExpanded,
+  "aria-controls": ariaControls,
+  innerRef
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [isFocusVisible, setFocusVisible] = useState(false);
+  const stateRef = useRef({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });
+  const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({
+    axis: disabled ? "none" : "vertical"
+  });
+  const chipsRootRef = useRef(null);
+  const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);
+  const chipsContainerRef = useRef(null);
+  const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);
+  const inputRef = useRef(null);
+  const inputRefCallback = useMultipleRefs(inputRef, innerRef);
+  const showLabel = state.value === "" && state.chips.length === 0 && placeholder !== "";
+  const labelId = useId();
+  const ariaLabeledBy = `chips-trigger-label-${labelId}`;
+  const onChangeInput = useCallback(
+    (value) => {
+      onChange({
+        value,
+        chips: state.chips,
+        event: { type: "change", modifier: "keyboard" }
+      });
+      onChangeInputExternal?.(value);
+    },
+    [state.chips, onChange, onChangeInputExternal]
+  );
+  const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);
+  useEffect(() => {
+    if (inputRef.current) {
+      setFocusVisible(isFocused && inputRef.current.classList.contains("focus-visible"));
+    }
+  }, [isFocused]);
+  const keyDownHandler = useCallback(
+    (event) => {
+      if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {
+        if (state.value.length === 0) {
+          return;
+        }
+        onChange({
+          value: "",
+          chips: [...state.chips, { value: state.value, userInput: true }],
+          event: { type: "add", modifier: "enter" }
+        });
+        onChangeInputExternal?.("");
+      }
+      if (state.value === "" && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {
+        if (state.chips.length === 0) {
+          return;
+        }
+        const chips = [...state.chips];
+        const deletedChip = chips.pop();
+        onChange({
+          value: state.value,
+          chips,
+          event: { type: "remove", modifier: "backspace", element: deletedChip }
+        });
+      }
+      if (state.value === "" && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {
+        focusOnLastChip(event, chipsContainerRef.current, inputRef.current);
+      }
+    },
+    [allowArbitraryValues, onChange, onChangeInputExternal, state]
+  );
+  const scrollableAreaStyle = maxHeight ? { maxHeight: `${maxHeight - (size === "medium" ? 16 : 24)}px` } : void 0;
+  const showIcon = rightIcon !== false;
+  const showCustomIcon = isValidElement(rightIcon);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chipsRootRefCallback,
+      className: classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {
+        [styles.focused]: isFocused,
+        [styles.focusVisible]: isFocusVisible,
+        [styles.disabled]: !!disabled,
+        [styles.invalid]: !!invalid
+      }),
+      onFocus: () => {
+        if (disabled) {
+          return;
+        }
+        if (!inputRef.current) {
+          return;
+        }
+        setExpanded(true);
+        if (document.activeElement === chipsRootRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      onBlur: (event) => {
+        stateRef.current.hadFocusWhenClicked &&= event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;
+        setExpanded(false);
+      },
+      onKeyDown,
+      onMouseDown: () => {
+        stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;
+        stateRef.current.wasExpandedWhenClicked = !!externalExpanded;
+      },
+      onClick: () => {
+        if (stateRef.current.hadFocusWhenClicked && stateRef.current.wasExpandedWhenClicked === externalExpanded) {
+          toggleExternalExpanded?.();
+        }
+        stateRef.current.hadFocusWhenClicked = false;
+        stateRef.current.wasExpandedWhenClicked = false;
+      },
+      tabIndex: disabled ? void 0 : 0,
+      "data-qa": dataQa,
+      "aria-disabled": disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: scrollableAreaStyle,
+            className: classnames(styles.scrollableAreaWrapper, {
+              [styles.scrollableAreaWrapperWithIcon]: showIcon
+            }),
+            children: /* @__PURE__ */ jsx("div", { className: styles.scrollableArea, ref: scrollbar.scrollContainerRef, children: /* @__PURE__ */ jsxs("div", { ref: chipsContainerRefCallback, className: styles.chipsAndInput, children: [
+              /* @__PURE__ */ jsx(
+                ChipsList,
+                {
+                  state,
+                  onChange,
+                  chipLayoutComponent,
+                  disabled,
+                  deleteButtonAriaLabel
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRefCallback,
+                    className: styles.fieldInput,
+                    type: "text",
+                    disabled,
+                    value: state.value,
+                    onKeyDown: keyDownHandler,
+                    onFocus: focusHandler,
+                    onBlur: blurHandler,
+                    onChange: changeHandler,
+                    "data-qa": "chips-trigger-input",
+                    "aria-labelledby": showLabel ? ariaLabeledBy : void 0,
+                    role: "combobox",
+                    "aria-haspopup": "listbox",
+                    "aria-autocomplete": "list",
+                    "aria-expanded": ariaExpanded,
+                    "aria-controls": ariaControls
+                  }
+                ),
+                showLabel && /* @__PURE__ */ jsx("div", { className: styles.labelWrapper, children: /* @__PURE__ */ jsx("label", { className: styles.label, id: ariaLabeledBy, children: placeholder }) })
+              ] })
+            ] }) })
+          }
+        ),
+        showIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(styles.icon, {
+              [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon
+            }),
+            "data-qa": "chips-trigger-icon",
+            children: showCustomIcon ? rightIcon : /* @__PURE__ */ jsx(ChevronDownOutlinedSize24, {})
+          }
+        ),
+        hasVerticalScroll && /* @__PURE__ */ jsx(Scrollbar, { ...verticalScrollbarProps })
+      ]
+    }
+  );
+};
+
+export { DesktopChipsTrigger };
+//# sourceMappingURL=DesktopChipsTrigger.js.map

package/DesktopChipsTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopChipsTrigger.js","sources":["src/DesktopChipsTrigger.tsx"],"sourcesContent":["import {\n    ForwardedRef,\n    InputHTMLAttributes,\n    KeyboardEventHandler,\n    ReactElement,\n    SyntheticEvent,\n    useCallback,\n    useEffect,\n    useId,\n    useRef,\n    useState,\n    isValidElement,\n} from 'react';\nimport classnames from 'classnames';\n\nimport { findNextFocusableElement, keyboardKeys, keyboardMatch } from '@hh.ru/magritte-common-keyboard';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { ChipsList } from '@hh.ru/magritte-ui-chips-trigger/ChipsList';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { ChevronDownOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { useFocus } from '@hh.ru/magritte-ui-input/useFocus';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from './chips-trigger.less';\n\nconst focusOnLastChip = (event: SyntheticEvent, chipsContainer: HTMLElement | null, input: HTMLElement | null) => {\n    if (!chipsContainer || !input) {\n        return;\n    }\n    const nextFocusableElement = findNextFocusableElement(chipsContainer, input, 'left', 'list');\n    if (nextFocusableElement !== null) {\n        event.preventDefault();\n        nextFocusableElement.focus();\n    }\n};\n\ntype State = {\n    hadFocusWhenClicked: boolean;\n    wasExpandedWhenClicked: boolean;\n};\n\ntype DesktopChipsTriggerProps<T> = ChipsTriggerProps<T> &\n    Omit<InputHTMLAttributes<HTMLInputElement>, keyof ChipsTriggerProps<T>> & {\n        innerRef: ForwardedRef<HTMLInputElement>;\n    };\n\nconst DesktopChipsTrigger = <T,>({\n    size = 'large',\n    placeholder,\n    disabled,\n    expanded: externalExpanded,\n    toggleExpanded: toggleExternalExpanded,\n    state,\n    chipLayoutComponent,\n    invalid,\n    maxHeight,\n    wrapperRef,\n    rightIcon = true,\n    onChange,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onChangeInput: onChangeInputExternal,\n    allowArbitraryValues = true,\n    'data-qa': dataQa = 'chips-trigger',\n    deleteButtonAriaLabel,\n    'aria-expanded': ariaExpanded,\n    'aria-controls': ariaControls,\n    innerRef,\n}: DesktopChipsTriggerProps<T>): ReactElement => {\n    const [expanded, setExpanded] = useState(false);\n    const [isFocusVisible, setFocusVisible] = useState(false);\n    const stateRef = useRef<State>({ hadFocusWhenClicked: false, wasExpandedWhenClicked: false });\n\n    const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({\n        axis: disabled ? 'none' : 'vertical',\n    });\n\n    const chipsRootRef = useRef<HTMLDivElement>(null);\n    const chipsRootRefCallback = useMultipleRefs(wrapperRef, chipsRootRef);\n    const chipsContainerRef = useRef<HTMLDivElement>(null);\n    const chipsContainerRefCallback = useMultipleRefs(chipsContainerRef, scrollbar.contentWrapperRef);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const inputRefCallback = useMultipleRefs(inputRef, innerRef);\n    const showLabel = state.value === '' && state.chips.length === 0 && placeholder !== '';\n    const labelId = useId();\n    const ariaLabeledBy = `chips-trigger-label-${labelId}`;\n\n    const onChangeInput = useCallback(\n        (value: string) => {\n            onChange({\n                value,\n                chips: state.chips,\n                event: { type: 'change', modifier: 'keyboard' },\n            });\n            onChangeInputExternal?.(value);\n        },\n        [state.chips, onChange, onChangeInputExternal]\n    );\n    const { changeHandler, focusHandler, blurHandler, isFocused } = useFocus(onChangeInput, onFocus, onBlur);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            setFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));\n        }\n    }, [isFocused]);\n\n    const keyDownHandler = useCallback<KeyboardEventHandler>(\n        (event) => {\n            // создаем новый чипс и затираем текстовый инпут\n            if (allowArbitraryValues && keyboardMatch(event.nativeEvent, keyboardKeys.Enter)) {\n                if (state.value.length === 0) {\n                    return;\n                }\n                onChange({\n                    value: '',\n                    chips: [...state.chips, { value: state.value, userInput: true }],\n                    event: { type: 'add', modifier: 'enter' },\n                });\n                onChangeInputExternal?.('');\n            }\n            // удаляем последний созданный чипс\n            if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.Backspace)) {\n                if (state.chips.length === 0) {\n                    return;\n                }\n                const chips = [...state.chips];\n                const deletedChip = chips.pop();\n                onChange({\n                    value: state.value,\n                    chips,\n                    event: { type: 'remove', modifier: 'backspace', element: deletedChip },\n                });\n            }\n            // пытаемся найти ближайший чипс для фокуса\n            if (state.value === '' && keyboardMatch(event.nativeEvent, keyboardKeys.ArrowLeft)) {\n                focusOnLastChip(event, chipsContainerRef.current, inputRef.current);\n            }\n        },\n        [allowArbitraryValues, onChange, onChangeInputExternal, state]\n    );\n\n    // при выставлении высоты учитваем падинги\n    // иначе высота будет больше значения свойства\n    const scrollableAreaStyle = maxHeight ? { maxHeight: `${maxHeight - (size === 'medium' ? 16 : 24)}px` } : undefined;\n\n    const showIcon = rightIcon !== false;\n    const showCustomIcon = isValidElement(rightIcon);\n\n    return (\n        <div\n            ref={chipsRootRefCallback}\n            className={classnames(styles.root, styles[size], scrollbar.hoverContainerCssClass, {\n                [styles.focused]: isFocused,\n                [styles.focusVisible]: isFocusVisible,\n                [styles.disabled]: !!disabled,\n                [styles.invalid]: !!invalid,\n            })}\n            onFocus={() => {\n                if (disabled) {\n                    return;\n                }\n                if (!inputRef.current) {\n                    return;\n                }\n                setExpanded(true);\n                // добавляем .focus() еще и тут\n                // чтобы не сбрасывать фокус во время клика по chip\n                // или по клику на враппер\n                if (document.activeElement === chipsRootRef.current) {\n                    inputRef.current.focus();\n                }\n            }}\n            onBlur={(event) => {\n                stateRef.current.hadFocusWhenClicked &&=\n                    event.relatedTarget === chipsRootRef.current || event.relatedTarget === inputRef.current;\n                setExpanded(false);\n            }}\n            onKeyDown={onKeyDown}\n            onMouseDown={() => {\n                // при повторном клике по инпуту в фокусе нужно закрыть дроп\n                // при этом клик может прийтись на обертку, из-за чего инпут поймает blur и повторный фокус\n                // что усложняет проверку того, что инпут уже был в фокусе в момент клика\n                // поэтому в цепочке mouseDown -> blur -> focus -> click храним флаг, что фокус не вышел за пределы компонента\n                stateRef.current.hadFocusWhenClicked = document.activeElement === inputRef.current;\n                stateRef.current.wasExpandedWhenClicked = !!externalExpanded;\n            }}\n            onClick={() => {\n                if (\n                    stateRef.current.hadFocusWhenClicked &&\n                    stateRef.current.wasExpandedWhenClicked === externalExpanded\n                ) {\n                    toggleExternalExpanded?.();\n                }\n                stateRef.current.hadFocusWhenClicked = false;\n                stateRef.current.wasExpandedWhenClicked = false;\n            }}\n            tabIndex={disabled ? undefined : 0}\n            data-qa={dataQa}\n            aria-disabled={disabled}\n        >\n            <div\n                style={scrollableAreaStyle}\n                className={classnames(styles.scrollableAreaWrapper, {\n                    [styles.scrollableAreaWrapperWithIcon]: showIcon,\n                })}\n            >\n                <div className={styles.scrollableArea} ref={scrollbar.scrollContainerRef as React.Ref<HTMLDivElement>}>\n                    <div ref={chipsContainerRefCallback} className={styles.chipsAndInput}>\n                        <ChipsList\n                            state={state}\n                            onChange={onChange}\n                            chipLayoutComponent={chipLayoutComponent}\n                            disabled={disabled}\n                            deleteButtonAriaLabel={deleteButtonAriaLabel}\n                        />\n                        <div className={styles.field}>\n                            <input\n                                ref={inputRefCallback}\n                                className={styles.fieldInput}\n                                type=\"text\"\n                                disabled={disabled}\n                                value={state.value}\n                                onKeyDown={keyDownHandler}\n                                onFocus={focusHandler}\n                                onBlur={blurHandler}\n                                onChange={changeHandler}\n                                data-qa=\"chips-trigger-input\"\n                                aria-labelledby={showLabel ? ariaLabeledBy : undefined}\n                                role={'combobox'}\n                                aria-haspopup={'listbox'}\n                                aria-autocomplete={'list'}\n                                aria-expanded={ariaExpanded}\n                                aria-controls={ariaControls}\n                            />\n                            {showLabel && (\n                                <div className={styles.labelWrapper}>\n                                    <label className={styles.label} id={ariaLabeledBy}>\n                                        {placeholder}\n                                    </label>\n                                </div>\n                            )}\n                        </div>\n                    </div>\n                </div>\n            </div>\n            {showIcon && (\n                <div\n                    className={classnames(styles.icon, {\n                        [styles.iconExpanded]: (expanded || externalExpanded) && !showCustomIcon,\n                    })}\n                    data-qa=\"chips-trigger-icon\"\n                >\n                    {showCustomIcon ? rightIcon : <ChevronDownOutlinedSize24 />}\n                </div>\n            )}\n            {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n        </div>\n    );\n};\n\nexport { DesktopChipsTrigger };\n"],"names":[],"mappings":"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"}

package/MobileChipsTrigger.d.ts

@@ -0,0 +1,10 @@
+import { AriaAttributes, ForwardedRef, ReactElement } from 'react';
+import { ChipsTriggerProps } from './types';
+type MobileChipsTriggerProps<T> = Pick<ChipsTriggerProps<T>, 'state' | 'onChange' | 'chipLayoutComponent' | 'deleteButtonAriaLabel' | 'triggerChipProps' | 'disabled' | 'wrapperRef' | 'onFocus' | 'onBlur' | 'onKeyDown'> & {
+    'data-qa'?: string;
+    'aria-expanded'?: AriaAttributes['aria-expanded'];
+    'aria-controls'?: AriaAttributes['aria-controls'];
+    innerRef: ForwardedRef<HTMLInputElement>;
+};
+declare const MobileChipsTrigger: <T>({ state, onChange, chipLayoutComponent, deleteButtonAriaLabel, triggerChipProps, disabled, wrapperRef, onFocus, onBlur, onKeyDown, 'data-qa': dataQa, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, innerRef, }: MobileChipsTriggerProps<T>) => ReactElement;
+export { MobileChipsTrigger };

package/MobileChipsTrigger.js

@@ -0,0 +1,69 @@
+import './index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
+import { CustomChip } from '@hh.ru/magritte-ui-chips';
+import { s as styles, C as ChipsList } from './ChipsList-F41a4_2C.js';
+import { PlusOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';
+
+const MobileChipsTrigger = ({
+  state,
+  onChange,
+  chipLayoutComponent,
+  deleteButtonAriaLabel,
+  triggerChipProps,
+  disabled,
+  wrapperRef,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  "data-qa": dataQa = "chips-trigger",
+  "aria-expanded": ariaExpanded,
+  "aria-controls": ariaControls,
+  innerRef
+}) => {
+  const rootRefCallback = useMultipleRefs(wrapperRef);
+  const chipRef = useRef(null);
+  const chipRefCallback = useMultipleRefs(innerRef, chipRef);
+  const chipLabelTrl = useTranslation("ChipsTrigger", "select");
+  const chipChildren = triggerChipProps?.children ?? chipLabelTrl ?? "";
+  return /* @__PURE__ */ jsxs("div", { ref: rootRefCallback, className: styles.mobileRoot, onKeyDown, children: [
+    state.chips.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.mobileChips, children: /* @__PURE__ */ jsx(
+      ChipsList,
+      {
+        state,
+        onChange,
+        chipLayoutComponent,
+        disabled,
+        deleteButtonAriaLabel
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      CustomChip,
+      {
+        ...triggerChipProps,
+        ref: chipRefCallback,
+        Element: "button",
+        size: "extra-small",
+        style: triggerChipProps?.style ?? "accent",
+        addon: triggerChipProps?.addon ?? /* @__PURE__ */ jsx(PlusOutlinedSize16, {}),
+        disabled,
+        onFocus,
+        onBlur,
+        dataQaWrapper: triggerChipProps?.dataQaWrapper ?? "chips-trigger-select",
+        "data-qa": triggerChipProps?.["data-qa"] ?? dataQa,
+        "aria-haspopup": "listbox",
+        "aria-expanded": ariaExpanded,
+        "aria-controls": ariaControls,
+        onClick: () => {
+          chipRef.current?.focus({ preventScroll: true });
+        },
+        children: chipChildren
+      }
+    )
+  ] });
+};
+
+export { MobileChipsTrigger };
+//# sourceMappingURL=MobileChipsTrigger.js.map

package/MobileChipsTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileChipsTrigger.js","sources":["src/MobileChipsTrigger.tsx"],"sourcesContent":["import { AriaAttributes, FocusEventHandler, ForwardedRef, Ref, ReactElement, useRef } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { ChipsList } from '@hh.ru/magritte-ui-chips-trigger/ChipsList';\nimport { ChipsTriggerProps } from '@hh.ru/magritte-ui-chips-trigger/types';\nimport { PlusOutlinedSize16 } from '@hh.ru/magritte-ui-icon/icon';\n\nimport styles from './chips-trigger.less';\n\ntype MobileChipsTriggerProps<T> = Pick<\n    ChipsTriggerProps<T>,\n    | 'state'\n    | 'onChange'\n    | 'chipLayoutComponent'\n    | 'deleteButtonAriaLabel'\n    | 'triggerChipProps'\n    | 'disabled'\n    | 'wrapperRef'\n    | 'onFocus'\n    | 'onBlur'\n    | 'onKeyDown'\n> & {\n    'data-qa'?: string;\n    'aria-expanded'?: AriaAttributes['aria-expanded'];\n    'aria-controls'?: AriaAttributes['aria-controls'];\n    innerRef: ForwardedRef<HTMLInputElement>;\n};\n\nconst MobileChipsTrigger = <T,>({\n    state,\n    onChange,\n    chipLayoutComponent,\n    deleteButtonAriaLabel,\n    triggerChipProps,\n    disabled,\n    wrapperRef,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    'data-qa': dataQa = 'chips-trigger',\n    'aria-expanded': ariaExpanded,\n    'aria-controls': ariaControls,\n    innerRef,\n}: MobileChipsTriggerProps<T>): ReactElement => {\n    const rootRefCallback = useMultipleRefs(wrapperRef);\n    const chipRef = useRef<HTMLButtonElement>(null);\n    const chipRefCallback = useMultipleRefs(innerRef as unknown as Ref<HTMLButtonElement>, chipRef);\n    const chipLabelTrl = useTranslation('ChipsTrigger', 'select');\n    const chipChildren = triggerChipProps?.children ?? chipLabelTrl ?? '';\n\n    return (\n        <div ref={rootRefCallback} className={styles.mobileRoot} onKeyDown={onKeyDown}>\n            {state.chips.length > 0 && (\n                <div className={styles.mobileChips}>\n                    <ChipsList\n                        state={state}\n                        onChange={onChange}\n                        chipLayoutComponent={chipLayoutComponent}\n                        disabled={disabled}\n                        deleteButtonAriaLabel={deleteButtonAriaLabel}\n                    />\n                </div>\n            )}\n            <CustomChip\n                {...triggerChipProps}\n                ref={chipRefCallback}\n                Element=\"button\"\n                size=\"extra-small\"\n                style={triggerChipProps?.style ?? 'accent'}\n                addon={triggerChipProps?.addon ?? <PlusOutlinedSize16 />}\n                disabled={disabled}\n                // чипс инпут описан через HTMLInputElement, а тут нужен HTMLButtonElement\n                onFocus={onFocus as unknown as FocusEventHandler<HTMLButtonElement> | undefined}\n                onBlur={onBlur as unknown as FocusEventHandler<HTMLButtonElement> | undefined}\n                dataQaWrapper={triggerChipProps?.dataQaWrapper ?? 'chips-trigger-select'}\n                data-qa={triggerChipProps?.['data-qa'] ?? dataQa}\n                aria-haspopup=\"listbox\"\n                aria-expanded={ariaExpanded}\n                aria-controls={ariaControls}\n                onClick={() => {\n                    chipRef.current?.focus({ preventScroll: true });\n                }}\n            >\n                {chipChildren}\n            </CustomChip>\n        </div>\n    );\n};\n\nexport { MobileChipsTrigger };\n"],"names":[],"mappings":";;;;;;;;AA8BA,MAAM,qBAAqB,CAAK;AAAA,EAC5B,KAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA;AAAA,EACA,qBAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAW,MAAS,GAAA,eAAA;AAAA,EACpB,eAAiB,EAAA,YAAA;AAAA,EACjB,eAAiB,EAAA,YAAA;AAAA,EACjB,QAAA;AACJ,CAAgD,KAAA;AAC5C,EAAM,MAAA,eAAA,GAAkB,gBAAgB,UAAU,CAAA,CAAA;AAClD,EAAM,MAAA,OAAA,GAAU,OAA0B,IAAI,CAAA,CAAA;AAC9C,EAAM,MAAA,eAAA,GAAkB,eAAgB,CAAA,QAAA,EAA+C,OAAO,CAAA,CAAA;AAC9F,EAAM,MAAA,YAAA,GAAe,cAAe,CAAA,cAAA,EAAgB,QAAQ,CAAA,CAAA;AAC5D,EAAM,MAAA,YAAA,GAAe,gBAAkB,EAAA,QAAA,IAAY,YAAgB,IAAA,EAAA,CAAA;AAEnE,EAAA,4BACK,KAAI,EAAA,EAAA,GAAA,EAAK,iBAAiB,SAAW,EAAA,MAAA,CAAO,YAAY,SACpD,EAAA,QAAA,EAAA;AAAA,IAAA,KAAA,CAAM,MAAM,MAAS,GAAA,CAAA,wBACjB,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,WACnB,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACG,KAAA;AAAA,QACA,QAAA;AAAA,QACA,mBAAA;AAAA,QACA,QAAA;AAAA,QACA,qBAAA;AAAA,OAAA;AAAA,KAER,EAAA,CAAA;AAAA,oBAEJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACI,GAAG,gBAAA;AAAA,QACJ,GAAK,EAAA,eAAA;AAAA,QACL,OAAQ,EAAA,QAAA;AAAA,QACR,IAAK,EAAA,aAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,KAAS,IAAA,QAAA;AAAA,QAClC,KAAO,EAAA,gBAAA,EAAkB,KAAS,oBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,CAAA;AAAA,QACtD,QAAA;AAAA,QAEA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,aAAA,EAAe,kBAAkB,aAAiB,IAAA,sBAAA;AAAA,QAClD,SAAA,EAAS,gBAAmB,GAAA,SAAS,CAAK,IAAA,MAAA;AAAA,QAC1C,eAAc,EAAA,SAAA;AAAA,QACd,eAAe,EAAA,YAAA;AAAA,QACf,eAAe,EAAA,YAAA;AAAA,QACf,SAAS,MAAM;AACX,UAAA,OAAA,CAAQ,OAAS,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA,CAAA;AAAA,SAClD;AAAA,QAEC,QAAA,EAAA,YAAA;AAAA,OAAA;AAAA,KACL;AAAA,GACJ,EAAA,CAAA,CAAA;AAER;;;;"}

package/UncontrolledChipsTrigger.js

@@ -2,16 +2,19 @@ import './index.css';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import { ChipsTrigger } from './ChipsTrigger.js';
+import '@hh.ru/magritte-ui-breakpoint';
+import './DesktopChipsTrigger.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
+import './ChipsList-F41a4_2C.js';
 import '@hh.ru/magritte-common-use-translation';
-import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-chips';
-import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-input/useFocus';
 import '@hh.ru/magritte-ui-scrollbar';
+import './MobileChipsTrigger.js';
+import '@hh.ru/magritte-ui-form-helper';
 
 const DEFAULT_STATE = {
   value: "",

package/UncontrolledChipsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledChipsTrigger.js","sources":["src/UncontrolledChipsTrigger.tsx"],"sourcesContent":["import { ForwardedRef, LegacyRef, ReactElement, forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';\nimport { UncontrolledChipsTriggerProps, ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n    value: '',\n    chips: [],\n};\n\nconst UncontrolledChipsTriggerComponent = <T,>(\n    {\n        state: defaultState = DEFAULT_STATE,\n        onChange,\n        name,\n        ...restProps\n    }: UncontrolledChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const [state, setState] = useState<ChipsTriggerState<T>>({ ...defaultState });\n    return (\n        <>\n            <ChipsTrigger\n                {...restProps}\n                state={state}\n                onChange={(newState) => {\n                    setState(newState);\n                    onChange?.(newState);\n                }}\n                ref={ref}\n            />\n            {state.chips.map((chip) => (\n                <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n            ))}\n        </>\n    );\n};\n\nconst UncontrolledChipsTrigger = forwardRef(UncontrolledChipsTriggerComponent) as (<T>(\n    props: UncontrolledChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>> & {\n            ref?: LegacyRef<HTMLInputElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n\nexport { UncontrolledChipsTrigger };\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKA,MAAM,aAAgB,GAAA;AAAA,EAClB,KAAO,EAAA,EAAA;AAAA,EACP,OAAO,EAAC;AACZ,CAAA,CAAA;AAEA,MAAM,oCAAoC,CACtC;AAAA,EACI,OAAO,YAAe,GAAA,aAAA;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG,SAAA;AACP,CAAA,EAEA,GACC,KAAA;AACD,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,SAA+B,EAAE,GAAG,cAAc,CAAA,CAAA;AAC5E,EAAA,uBAEQ,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACI,GAAG,SAAA;AAAA,QACJ,KAAA;AAAA,QACA,QAAA,EAAU,CAAC,QAAa,KAAA;AACpB,UAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,UAAA,QAAA,GAAW,QAAQ,CAAA,CAAA;AAAA,SACvB;AAAA,QACA,GAAA;AAAA,OAAA;AAAA,KACJ;AAAA,IACC,KAAM,CAAA,KAAA,CAAM,GAAI,CAAA,CAAC,yBACb,GAAA,CAAA,OAAA,EAAA,EAAM,IAAK,EAAA,QAAA,EAAS,MAAY,KAAO,EAAA,IAAA,CAAK,KAAY,EAAA,EAAA,IAAA,CAAK,KAAO,CACxE,CAAA;AAAA,GACL,EAAA,CAAA,CAAA;AAER,CAAA,CAAA;AAEM,MAAA,wBAAA,GAA2B,WAAW,iCAAiC,EAAA;AAO7E,wBAAA,CAAyB,WAAc,GAAA,0BAAA;;;;"}
+{"version":3,"file":"UncontrolledChipsTrigger.js","sources":["src/UncontrolledChipsTrigger.tsx"],"sourcesContent":["import { ForwardedRef, LegacyRef, ReactElement, forwardRef, InputHTMLAttributes, useState } from 'react';\n\nimport { ChipsTrigger } from '@hh.ru/magritte-ui-chips-trigger/ChipsTrigger';\nimport { UncontrolledChipsTriggerProps, ChipsTriggerState } from '@hh.ru/magritte-ui-chips-trigger/types';\n\nconst DEFAULT_STATE = {\n    value: '',\n    chips: [],\n};\n\nconst UncontrolledChipsTriggerComponent = <T,>(\n    {\n        state: defaultState = DEFAULT_STATE,\n        onChange,\n        name,\n        ...restProps\n    }: UncontrolledChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>>,\n    ref: ForwardedRef<HTMLInputElement>\n) => {\n    const [state, setState] = useState<ChipsTriggerState<T>>({ ...defaultState });\n    return (\n        <>\n            <ChipsTrigger\n                {...restProps}\n                state={state}\n                onChange={(newState) => {\n                    setState(newState);\n                    onChange?.(newState);\n                }}\n                ref={ref}\n            />\n            {state.chips.map((chip) => (\n                <input type=\"hidden\" name={name} value={chip.value} key={chip.value} />\n            ))}\n        </>\n    );\n};\n\nconst UncontrolledChipsTrigger = forwardRef(UncontrolledChipsTriggerComponent) as (<T>(\n    props: UncontrolledChipsTriggerProps<T> &\n        Omit<InputHTMLAttributes<HTMLInputElement>, keyof UncontrolledChipsTriggerProps<T>> & {\n            ref?: LegacyRef<HTMLInputElement>;\n        }\n) => ReactElement | null) & { displayName: string };\n\nUncontrolledChipsTrigger.displayName = 'UncontrolledChipsTrigger';\n\nexport { UncontrolledChipsTrigger };\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKA,MAAM,aAAgB,GAAA;AAAA,EAClB,KAAO,EAAA,EAAA;AAAA,EACP,OAAO,EAAC;AACZ,CAAA,CAAA;AAEA,MAAM,oCAAoC,CACtC;AAAA,EACI,OAAO,YAAe,GAAA,aAAA;AAAA,EACtB,QAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG,SAAA;AACP,CAAA,EAEA,GACC,KAAA;AACD,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,SAA+B,EAAE,GAAG,cAAc,CAAA,CAAA;AAC5E,EAAA,uBAEQ,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACI,GAAG,SAAA;AAAA,QACJ,KAAA;AAAA,QACA,QAAA,EAAU,CAAC,QAAa,KAAA;AACpB,UAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,UAAA,QAAA,GAAW,QAAQ,CAAA,CAAA;AAAA,SACvB;AAAA,QACA,GAAA;AAAA,OAAA;AAAA,KACJ;AAAA,IACC,KAAM,CAAA,KAAA,CAAM,GAAI,CAAA,CAAC,yBACb,GAAA,CAAA,OAAA,EAAA,EAAM,IAAK,EAAA,QAAA,EAAS,MAAY,KAAO,EAAA,IAAA,CAAK,KAAY,EAAA,EAAA,IAAA,CAAK,KAAO,CACxE,CAAA;AAAA,GACL,EAAA,CAAA,CAAA;AAER,CAAA,CAAA;AAEM,MAAA,wBAAA,GAA2B,WAAW,iCAAiC,EAAA;AAO7E,wBAAA,CAAyB,WAAc,GAAA,0BAAA;;;;"}

package/index.css

@@ -68,7 +68,7 @@
   --magritte-color-component-input-icon-state-chevron-hovered-v26-0-2:#8293a2;
   --magritte-color-component-input-icon-state-chevron-disabled-v26-0-2:#96aabb;
 }
-.magritte-root___-zVdz_4-5-7{
+.magritte-root___-zVdz_4-6-1{
   display:inline-flex;
   position:relative;
   width:100%;
@@ -84,139 +84,139 @@
   --magritte-ui-scrollbar-border-radius:12px;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-root___-zVdz_4-5-7:not(.magritte-focused___0Uzyu_4-5-7):not(.magritte-invalid___tVzQV_4-5-7):not(.magritte-disabled___UeqcV_4-5-7):hover{
+  body.magritte-old-layout .magritte-root___-zVdz_4-6-1:not(.magritte-focused___0Uzyu_4-6-1):not(.magritte-invalid___tVzQV_4-6-1):not(.magritte-disabled___UeqcV_4-6-1):hover{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_4-5-7:not(.magritte-focused___0Uzyu_4-5-7):not(.magritte-invalid___tVzQV_4-5-7):not(.magritte-disabled___UeqcV_4-5-7):hover .magritte-label___j7Trt_4-5-7{
+  body.magritte-old-layout .magritte-root___-zVdz_4-6-1:not(.magritte-focused___0Uzyu_4-6-1):not(.magritte-invalid___tVzQV_4-6-1):not(.magritte-disabled___UeqcV_4-6-1):hover .magritte-label___j7Trt_4-6-1{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v26-0-2);
   }
-  body.magritte-old-layout .magritte-root___-zVdz_4-5-7:not(.magritte-focused___0Uzyu_4-5-7):not(.magritte-invalid___tVzQV_4-5-7):not(.magritte-disabled___UeqcV_4-5-7):hover .magritte-field-input___04Cag_4-5-7{
+  body.magritte-old-layout .magritte-root___-zVdz_4-6-1:not(.magritte-focused___0Uzyu_4-6-1):not(.magritte-invalid___tVzQV_4-6-1):not(.magritte-disabled___UeqcV_4-6-1):hover .magritte-field-input___04Cag_4-6-1{
     color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-5-7:not(.magritte-focused___0Uzyu_4-5-7):not(.magritte-invalid___tVzQV_4-5-7):not(.magritte-disabled___UeqcV_4-5-7):hover{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-6-1:not(.magritte-focused___0Uzyu_4-6-1):not(.magritte-invalid___tVzQV_4-6-1):not(.magritte-disabled___UeqcV_4-6-1):hover{
     background-color:var(--magritte-color-component-input-background-state-field-hovered-v26-0-2);
     box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-hovered-v26-0-2);
     --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-5-7:not(.magritte-focused___0Uzyu_4-5-7):not(.magritte-invalid___tVzQV_4-5-7):not(.magritte-disabled___UeqcV_4-5-7):hover .magritte-label___j7Trt_4-5-7{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-6-1:not(.magritte-focused___0Uzyu_4-6-1):not(.magritte-invalid___tVzQV_4-6-1):not(.magritte-disabled___UeqcV_4-6-1):hover .magritte-label___j7Trt_4-6-1{
     color:var(--magritte-color-component-input-text-state-placeholder-hovered-v26-0-2);
   }
-  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-5-7:not(.magritte-focused___0Uzyu_4-5-7):not(.magritte-invalid___tVzQV_4-5-7):not(.magritte-disabled___UeqcV_4-5-7):hover .magritte-field-input___04Cag_4-5-7{
+  body:not(.magritte-old-layout) .magritte-root___-zVdz_4-6-1:not(.magritte-focused___0Uzyu_4-6-1):not(.magritte-invalid___tVzQV_4-6-1):not(.magritte-disabled___UeqcV_4-6-1):hover .magritte-field-input___04Cag_4-6-1{
     color:var(--magritte-color-component-input-text-state-content-hovered-v26-0-2);
   }
 }
-.magritte-root___-zVdz_4-5-7:not(.magritte-disabled___UeqcV_4-5-7){
+.magritte-root___-zVdz_4-6-1:not(.magritte-disabled___UeqcV_4-6-1){
   cursor:text;
 }
-.magritte-root___-zVdz_4-5-7.magritte-focused___0Uzyu_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-focused___0Uzyu_4-6-1{
   background-color:var(--magritte-color-component-input-background-state-field-focused-v26-0-2);
   box-shadow:inset 0 0 0 2px var(--magritte-color-component-input-stroke-state-field-focused-v26-0-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-focused___0Uzyu_4-5-7 .magritte-label___j7Trt_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-focused___0Uzyu_4-6-1 .magritte-label___j7Trt_4-6-1{
   color:var(--magritte-color-component-input-text-state-placeholder-focused-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-focused___0Uzyu_4-5-7 .magritte-field-input___04Cag_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-focused___0Uzyu_4-6-1 .magritte-field-input___04Cag_4-6-1{
   color:var(--magritte-color-component-input-text-state-content-focused-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-invalid___tVzQV_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-invalid___tVzQV_4-6-1{
   background-color:var(--magritte-color-component-input-background-state-field-invalid-v26-0-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-invalid-v26-0-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-invalid-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-invalid___tVzQV_4-5-7 .magritte-label___j7Trt_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-invalid___tVzQV_4-6-1 .magritte-label___j7Trt_4-6-1{
   color:var(--magritte-color-component-input-text-state-placeholder-invalid-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-invalid___tVzQV_4-5-7 .magritte-field-input___04Cag_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-invalid___tVzQV_4-6-1 .magritte-field-input___04Cag_4-6-1{
   color:var(--magritte-color-component-input-text-state-content-invalid-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-disabled___UeqcV_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-disabled___UeqcV_4-6-1{
   background-color:var(--magritte-color-component-input-background-state-field-disabled-v26-0-2);
   box-shadow:inset 0 0 0 1px var(--magritte-color-component-input-stroke-state-field-disabled-v26-0-2);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-disabled-v26-0-2);
   --magritte-ui-chip-text-color-override:var(--magritte-color-component-input-chips-text-state-neutral-disable-v26-0-2);
   --magritte-ui-chip-background-color-override:var(--magritte-color-component-input-chips-background-state-neutral-disable-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-disabled___UeqcV_4-5-7 .magritte-label___j7Trt_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-disabled___UeqcV_4-6-1 .magritte-label___j7Trt_4-6-1{
   color:var(--magritte-color-component-input-text-state-placeholder-disabled-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-disabled___UeqcV_4-5-7 .magritte-field-input___04Cag_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-disabled___UeqcV_4-6-1 .magritte-field-input___04Cag_4-6-1{
   color:var(--magritte-color-component-input-text-state-content-disabled-v26-0-2);
 }
-.magritte-root___-zVdz_4-5-7.magritte-disabled___UeqcV_4-5-7 .magritte-scrollable-area___-xMF2_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-disabled___UeqcV_4-6-1 .magritte-scrollable-area___-xMF2_4-6-1{
   overflow:hidden;
 }
-.magritte-root___-zVdz_4-5-7.magritte-focus-visible___ifvAP_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-focus-visible___ifvAP_4-6-1{
   outline:var(--magritte-color-component-input-stroke-state-accent-focused-accessible-v26-0-2) solid 4px;
 }
-.magritte-root___-zVdz_4-5-7.magritte-focus-visible___ifvAP_4-5-7.magritte-invalid___tVzQV_4-5-7{
+.magritte-root___-zVdz_4-6-1.magritte-focus-visible___ifvAP_4-6-1.magritte-invalid___tVzQV_4-6-1{
   outline-color:var(--magritte-color-component-input-stroke-state-negative-focused-accessible-v26-0-2);
 }
-.magritte-large___JIrIy_4-5-7{
+.magritte-large___JIrIy_4-6-1{
   padding-left:12px;
   padding-top:12px;
   padding-bottom:12px;
   padding-right:2px;
 }
-.magritte-large___JIrIy_4-5-7 .magritte-field___rlEmn_4-5-7{
+.magritte-large___JIrIy_4-6-1 .magritte-field___rlEmn_4-6-1{
   margin-left:4px;
 }
-.magritte-large___JIrIy_4-5-7 .magritte-icon___fDMiz_4-5-7{
+.magritte-large___JIrIy_4-6-1 .magritte-icon___fDMiz_4-6-1{
   top:12px;
   right:16px;
 }
-.magritte-large___JIrIy_4-5-7 .magritte-scrollable-area-wrapper___hZNQd_4-5-7{
+.magritte-large___JIrIy_4-6-1 .magritte-scrollable-area-wrapper___hZNQd_4-6-1{
   padding-right:10px;
 }
-.magritte-large___JIrIy_4-5-7 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-7{
+.magritte-large___JIrIy_4-6-1 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-6-1{
   padding-right:calc(24px + 10px + 12px);
 }
-.magritte-medium___Xk-XB_4-5-7{
+.magritte-medium___Xk-XB_4-6-1{
   padding-left:8px;
   padding-top:8px;
   padding-bottom:8px;
   padding-right:2px;
 }
-.magritte-medium___Xk-XB_4-5-7 .magritte-field___rlEmn_4-5-7{
+.magritte-medium___Xk-XB_4-6-1 .magritte-field___rlEmn_4-6-1{
   margin-left:8px;
 }
-.magritte-medium___Xk-XB_4-5-7 .magritte-icon___fDMiz_4-5-7{
+.magritte-medium___Xk-XB_4-6-1 .magritte-icon___fDMiz_4-6-1{
   top:8px;
   right:12px;
 }
-.magritte-medium___Xk-XB_4-5-7 .magritte-scrollable-area-wrapper___hZNQd_4-5-7{
+.magritte-medium___Xk-XB_4-6-1 .magritte-scrollable-area-wrapper___hZNQd_4-6-1{
   padding-right:6px;
 }
-.magritte-medium___Xk-XB_4-5-7 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-5-7{
+.magritte-medium___Xk-XB_4-6-1 .magritte-scrollable-area-wrapper_with-icon___2VoX9_4-6-1{
   padding-right:calc(24px + 6px + 12px);
 }
-.magritte-scrollable-area-wrapper___hZNQd_4-5-7{
+.magritte-scrollable-area-wrapper___hZNQd_4-6-1{
   width:100%;
   position:relative;
   overflow:hidden;
 }
-.magritte-scrollable-area___-xMF2_4-5-7{
+.magritte-scrollable-area___-xMF2_4-6-1{
   height:100%;
   display:flex;
   align-items:flex-start;
   overflow-y:auto;
   scrollbar-width:none;
 }
-.magritte-scrollable-area___-xMF2_4-5-7::-webkit-scrollbar{
+.magritte-scrollable-area___-xMF2_4-6-1::-webkit-scrollbar{
   display:none;
 }
-.magritte-chips-and-input___qg-Ba_4-5-7{
+.magritte-chips-and-input___qg-Ba_4-6-1{
   display:flex;
   gap:8px;
   flex-wrap:wrap;
   align-items:center;
   width:100%;
 }
-.magritte-field___rlEmn_4-5-7{
+.magritte-field___rlEmn_4-6-1{
   display:flex;
   align-items:center;
   position:relative;
@@ -232,7 +232,7 @@
   text-transform:none;
   text-decoration:none;
 }
-.magritte-field-input___04Cag_4-5-7{
+.magritte-field-input___04Cag_4-6-1{
   border:0;
   padding:0;
   background:none;
@@ -241,19 +241,19 @@
   z-index:1;
   color:var(--magritte-color-component-input-text-content-v26-0-2);
 }
-.magritte-label-wrapper___De7Bm_4-5-7{
+.magritte-label-wrapper___De7Bm_4-6-1{
   display:flex;
   align-items:center;
   position:absolute;
   height:100%;
   inset:0;
 }
-.magritte-label___j7Trt_4-5-7{
+.magritte-label___j7Trt_4-6-1{
   color:var(--magritte-color-component-input-text-placeholder-v26-0-2);
   overflow:hidden;
   text-overflow:ellipsis;
 }
-.magritte-icon___fDMiz_4-5-7{
+.magritte-icon___fDMiz_4-6-1{
   display:inline-flex;
   margin-left:auto;
   padding:4px 0;
@@ -262,11 +262,22 @@
   transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v26-0-2);
   transition-timing-function:var(--magritte-semantic-animation-ease-in-out-100-timing-function-v26-0-2);
 }
-.magritte-icon_expanded___RaOT-_4-5-7{
+.magritte-icon_expanded___RaOT-_4-6-1{
   transform:rotate(-180deg);
   --magritte-ui-icon-color-override:var(--magritte-color-component-input-icon-state-chevron-focused-v26-0-2);
 }
-.magritte-custom-chip-wrapper___a9kJ6_4-5-7{
+.magritte-custom-chip-wrapper___a9kJ6_4-6-1{
   display:inline-flex;
   min-width:0;
 }
+.magritte-mobile-root___-hey4_4-6-1{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  gap:12px;
+}
+.magritte-mobile-chips___cuB21_4-6-1{
+  display:flex;
+  flex-wrap:wrap;
+  gap:8px;
+}

package/index.js

@@ -3,14 +3,17 @@ export { ChipsTrigger } from './ChipsTrigger.js';
 export { UncontrolledChipsTrigger } from './UncontrolledChipsTrigger.js';
 import 'react/jsx-runtime';
 import 'react';
+import '@hh.ru/magritte-ui-breakpoint';
+import './DesktopChipsTrigger.js';
 import 'classnames';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-use-multiple-refs';
+import './ChipsList-F41a4_2C.js';
 import '@hh.ru/magritte-common-use-translation';
-import '@hh.ru/magritte-ui-breakpoint';
 import '@hh.ru/magritte-ui-chips';
-import '@hh.ru/magritte-ui-form-helper';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-input/useFocus';
 import '@hh.ru/magritte-ui-scrollbar';
+import './MobileChipsTrigger.js';
+import '@hh.ru/magritte-ui-form-helper';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-chips-trigger",
-  "version": "4.5.7",
+  "version": "4.6.1",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -29,15 +29,15 @@
   "dependencies": {
     "@hh.ru/magritte-common-keyboard": "4.3.7",
     "@hh.ru/magritte-common-use-multiple-refs": "1.1.13",
-    "@hh.ru/magritte-common-use-translation": "3.6.2",
+    "@hh.ru/magritte-common-use-translation": "3.7.0",
     "@hh.ru/magritte-design-tokens": "26.0.2",
     "@hh.ru/magritte-ui-breakpoint": "6.1.3",
-    "@hh.ru/magritte-ui-chips": "7.0.49",
+    "@hh.ru/magritte-ui-chips": "7.0.51",
     "@hh.ru/magritte-ui-form-helper": "2.1.27",
     "@hh.ru/magritte-ui-icon": "15.1.6",
-    "@hh.ru/magritte-ui-input": "9.4.55",
+    "@hh.ru/magritte-ui-input": "9.4.56",
     "@hh.ru/magritte-ui-mock-component": "1.1.9",
     "@hh.ru/magritte-ui-scrollbar": "1.0.40"
   },
-  "gitHead": "ca948a3b83c1141cea0f32e35a9d4dc56f8d0077"
+  "gitHead": "c8093595868a906e4e0f860f0deafc6c44f07d69"
 }

package/types.d.ts

@@ -24,6 +24,11 @@ export type ChipCustomLayoutProps<T = unknown> = {
     /** Данные элемента, из которого собран чипс */
     data?: T;
 } & CustomChipProps;
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type ChipsTriggerChipProps = DistributiveOmit<CustomChipProps, 'children'> & {
+    /** Содержимое лейбла чипса, по умолчанию берётся перевод `ChipsTrigger.select` */
+    children?: CustomChipProps['children'];
+};
 export type ChipCustomLayoutComponent<T = unknown> = ComponentType<ChipCustomLayoutProps<T>>;
 export interface ChipsTriggerProps<T = unknown> {
     /** Размер для chips-trigger */
@@ -53,6 +58,10 @@ export interface ChipsTriggerProps<T = unknown> {
     rightIcon?: ReactElement | boolean;
     /** Компонент для кастомной верстки чипса, по умолчанию чипс рисуется через CustomChip */
     chipLayoutComponent?: ChipCustomLayoutComponent<T>;
+    /**
+     * Свойства чипса, который на мобильном разрешении является триггером
+     */
+    triggerChipProps?: ChipsTriggerChipProps;
     /** Обработчик события получения фокуса */
     onFocus?: FocusEventHandler<HTMLInputElement>;
     /** Обработчик события потери фокуса */