@snack-uikit/chips 0.16.3 → 0.16.4-preview-ba12ca94.0

package/dist/cjs/components/ChipAssist/ChipAssist.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipAssist = ChipAssist;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const loaders_1 = require("@snack-uikit/loaders");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Чип с лейблом  */
+function ChipAssist(_a) {
+  var {
+      icon,
+      size = constants_1.SIZE.S,
+      label,
+      disabled,
+      loading,
+      onClick,
+      className,
+      tabIndex
+    } = _a,
+    rest = __rest(_a, ["icon", "size", "label", "disabled", "loading", "onClick", "className", "tabIndex"]);
+  const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
+  const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
+  const handleClick = e => {
+    if (disabled || loading) {
+      return;
+    }
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  return (0, jsx_runtime_1.jsxs)("button", Object.assign({
+    type: 'button'
+  }, (0, utils_1.extractSupportProps)(rest), {
+    tabIndex: tabIndex,
+    "data-size": size,
+    "data-loading": loading || undefined,
+    "data-variant": variant,
+    disabled: !loading && disabled,
+    onClick: handleClick,
+    className: (0, classnames_1.default)(styles_module_scss_1.default.assistChip, className),
+    children: [variant === constants_1.VARIANT.IconBefore && !loading && (0, jsx_runtime_1.jsx)("span", {
+      className: styles_module_scss_1.default.icon,
+      "data-test-id": constants_1.CHIP_ASSIST_TEST_IDS.icon,
+      children: icon
+    }), loading && (0, jsx_runtime_1.jsx)("span", {
+      className: styles_module_scss_1.default.spinner,
+      "data-test-id": constants_1.CHIP_ASSIST_TEST_IDS.spinner,
+      children: (0, jsx_runtime_1.jsx)(loaders_1.Sun, {
+        size: spinnerSize
+      })
+    }), (0, jsx_runtime_1.jsx)("span", {
+      className: (0, classnames_1.default)(styles_module_scss_1.default.labelLayout, styles_module_scss_1.default.label),
+      "data-test-id": constants_1.CHIP_ASSIST_TEST_IDS.label,
+      children: label
+    })]
+  }));
+}

package/dist/cjs/components/ChipAssist/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ChipAssist"), exports);

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/ChipChoiceBase.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipChoiceBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const merge_refs_1 = __importDefault(require("merge-refs"));
+const react_1 = require("react");
+const loaders_1 = require("@snack-uikit/loaders");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../../constants");
+const helperComponents_1 = require("../../../../helperComponents");
+const constants_2 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.ChipChoiceBase = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      size = constants_1.SIZE.S,
+      disabled,
+      loading,
+      icon,
+      label,
+      valueToRender,
+      value,
+      onClick,
+      className,
+      tabIndex = 0,
+      onClearButtonClick,
+      onKeyDown,
+      showClearButton: showClearButtonProp = true
+    } = _a,
+    rest = __rest(_a, ["size", "disabled", "loading", "icon", "label", "valueToRender", "value", "onClick", "className", "tabIndex", "onClearButtonClick", "onKeyDown", "showClearButton"]);
+  const variant = icon && size !== constants_1.SIZE.Xs ? constants_1.VARIANT.IconBefore : constants_1.VARIANT.LabelOnly;
+  const spinnerSize = size === constants_1.SIZE.Xs ? 'xs' : 's';
+  const localRef = (0, react_1.useRef)(null);
+  const clearButtonRef = (0, react_1.useRef)(null);
+  const [isDroplistOpened, setIsDroplistOpened] = (0, react_1.useState)(false);
+  const handleChipClick = e => {
+    if (loading || disabled) return;
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    !isDroplistOpened && setIsDroplistOpened(true);
+  };
+  const handleChipKeyDown = e => {
+    var _a;
+    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    if (e.key === 'ArrowRight') {
+      (_a = clearButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  const handleClearButtonClick = e => {
+    onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick(e);
+  };
+  const handleClearButtonKeyDown = e => {
+    var _a;
+    switch (e.key) {
+      case 'ArrowLeft':
+        {
+          (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+          return;
+        }
+      case 'Enter':
+      case ' ':
+        {
+          e.stopPropagation();
+          return;
+        }
+      default:
+        break;
+    }
+  };
+  const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value));
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+    role: 'button',
+    ref: (0, merge_refs_1.default)(localRef, ref),
+    className: (0, classnames_1.default)(styles_module_scss_1.default.choiceChip, className),
+    "data-size": size,
+    "data-variant": variant,
+    "data-loading": loading || undefined,
+    "data-disabled": !loading && disabled || undefined,
+    onClick: handleChipClick,
+    onKeyDown: handleChipKeyDown,
+    tabIndex: tabIndex,
+    children: [variant === constants_1.VARIANT.IconBefore && (0, jsx_runtime_1.jsx)("span", {
+      className: styles_module_scss_1.default.icon,
+      "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.icon,
+      children: icon
+    }), (0, jsx_runtime_1.jsxs)("span", {
+      className: styles_module_scss_1.default.labelLayout,
+      children: [label && (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.label,
+        "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.label,
+        children: label + ': '
+      }), loading ? (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.spinner,
+        "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.spinner,
+        children: (0, jsx_runtime_1.jsx)(loaders_1.Sun, {
+          size: spinnerSize
+        })
+      }) : (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.value,
+        "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.value,
+        children: valueToRender !== null && valueToRender !== void 0 ? valueToRender : value
+      })]
+    }), !disabled && !loading && showClearButton && (0, jsx_runtime_1.jsx)(helperComponents_1.ButtonClearValue, {
+      size: constants_2.BUTTON_CLEAR_VALUE_SIZE_MAP[size],
+      onClick: handleClearButtonClick,
+      "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.clearButton,
+      onKeyDown: handleClearButtonKeyDown,
+      ref: clearButtonRef
+    })]
+  }));
+});

package/dist/cjs/components/ChipChoice/components/ChipChoiceBase/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ChipChoiceBase"), exports);

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

@@ -0,0 +1,77 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipChoiceCustom = ChipChoiceCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+function ChipChoiceCustom(_a) {
+  var _b;
+  var {
+      size = constants_1.SIZE.S,
+      value: valueProp,
+      onChange: onChangeProp,
+      placement = 'bottom-start',
+      widthStrategy = 'gte',
+      content,
+      valueRender
+    } = _a,
+    rest = __rest(_a, ["size", "value", "onChange", "placement", "widthStrategy", "content", "valueRender"]);
+  const localRef = (0, react_1.useRef)(null);
+  const [value, setValue] = (0, utils_1.useValueControl)({
+    value: valueProp,
+    onChange: onChangeProp
+  });
+  const [open, setOpen] = (0, react_1.useState)(false);
+  const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
+    setOpen
+  });
+  const closeDroplist = (0, react_1.useCallback)(() => {
+    setOpen(false);
+    setTimeout(() => {
+      var _a;
+      return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, 0);
+  }, []);
+  const clearValue = () => {
+    setValue === null || setValue === void 0 ? void 0 : setValue(undefined);
+    closeDroplist();
+  };
+  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+    trigger: 'click',
+    widthStrategy: widthStrategy,
+    placement: placement,
+    outsideClick: true,
+    triggerRef: localRef,
+    open: open,
+    onOpenChange: setOpen,
+    "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
+    content: typeof content === 'function' ? content({
+      closeDroplist,
+      value,
+      onChange: setValue
+    }) : content,
+    children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
+      valueToRender: (_b = valueRender === null || valueRender === void 0 ? void 0 : valueRender(value)) !== null && _b !== void 0 ? _b : value,
+      onClearButtonClick: clearValue,
+      ref: localRef,
+      value: value,
+      size: size,
+      onKeyDown: handleOnKeyDown()
+    }))
+  });
+}

package/dist/cjs/components/ChipChoice/components/ChipChoiceDate.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipChoiceDate = ChipChoiceDate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const calendar_1 = require("@snack-uikit/calendar");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const locale_1 = require("@snack-uikit/locale");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+function ChipChoiceDate(_a) {
+  var {
+      size = constants_1.SIZE.S,
+      value,
+      defaultValue,
+      onChange,
+      valueRender,
+      dropDownClassName,
+      mode = 'date'
+    } = _a,
+    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName", "mode"]);
+  const [selectedValue, setSelectedValue] = (0, utils_1.useValueControl)({
+    value,
+    defaultValue,
+    onChange
+  });
+  const localRef = (0, react_1.useRef)(null);
+  const [open, setOpen] = (0, react_1.useState)(false);
+  const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
+    setOpen
+  });
+  const closeDroplist = (0, react_1.useCallback)(() => {
+    setOpen(false);
+    setTimeout(() => {
+      var _a;
+      return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, 0);
+  }, []);
+  const {
+    t
+  } = (0, locale_1.useLocale)('Chips');
+  const valueToRender = valueRender ? valueRender(selectedValue) : selectedValue && new Date(selectedValue).toLocaleDateString() || t('allLabel');
+  const clearValue = () => setSelectedValue(undefined);
+  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+    content: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
+      mode: mode,
+      size: constants_2.CALENDAR_SIZE_MAP[size],
+      value: selectedValue,
+      onChangeValue: value => {
+        setSelectedValue(value);
+        closeDroplist();
+      },
+      navigationStartRef: element => element === null || element === void 0 ? void 0 : element.focus(),
+      onFocusLeave: closeDroplist
+    }),
+    outsideClick: true,
+    triggerRef: localRef,
+    open: open,
+    onOpenChange: setOpen,
+    className: dropDownClassName,
+    "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
+    children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
+      ref: localRef,
+      onClearButtonClick: clearValue,
+      value: selectedValue,
+      valueToRender: valueToRender,
+      size: size,
+      onKeyDown: handleOnKeyDown()
+    }))
+  });
+}

package/dist/cjs/components/ChipChoice/components/ChipChoiceDateRange.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipChoiceDateRange = ChipChoiceDateRange;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const calendar_1 = require("@snack-uikit/calendar");
+const dropdown_1 = require("@snack-uikit/dropdown");
+const locale_1 = require("@snack-uikit/locale");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+const hooks_1 = require("../hooks");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+function defaultRangeFormatter(_ref) {
+  let {
+    value,
+    allLabel
+  } = _ref;
+  if (!value || !value.length) return allLabel;
+  const [from, to] = value;
+  return `${from.toLocaleDateString()} ${constants_1.DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+}
+function ChipChoiceDateRange(_a) {
+  var {
+      size = constants_1.SIZE.S,
+      value,
+      defaultValue,
+      onChange,
+      valueRender,
+      dropDownClassName
+    } = _a,
+    rest = __rest(_a, ["size", "value", "defaultValue", "onChange", "valueRender", "dropDownClassName"]);
+  const [selectedValue, setSelectedValue] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange);
+  const {
+    t
+  } = (0, locale_1.useLocale)('Chips');
+  const valueToRender = valueRender ? valueRender(selectedValue) : defaultRangeFormatter({
+    value: selectedValue,
+    allLabel: t('allLabel')
+  });
+  const clearValue = () => setSelectedValue(undefined);
+  const localRef = (0, react_1.useRef)(null);
+  const [open, setOpen] = (0, react_1.useState)(false);
+  const closeDroplist = (0, react_1.useCallback)(() => {
+    setOpen(false);
+    setTimeout(() => {
+      var _a;
+      return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, 0);
+  }, []);
+  const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
+    setOpen
+  });
+  return (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, {
+    content: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, {
+      mode: 'range',
+      size: constants_2.CALENDAR_SIZE_MAP[size],
+      value: selectedValue,
+      onChangeValue: value => {
+        setSelectedValue(value);
+        closeDroplist();
+      },
+      // bug with focus
+      // navigationStartRef={element => element?.focus()}
+      onFocusLeave: closeDroplist
+    }),
+    outsideClick: true,
+    triggerRef: localRef,
+    open: open,
+    "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
+    onOpenChange: setOpen,
+    className: dropDownClassName,
+    children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
+      ref: localRef,
+      onClearButtonClick: clearValue,
+      value: selectedValue,
+      valueToRender: valueToRender,
+      size: size,
+      onKeyDown: handleOnKeyDown()
+    }))
+  });
+}

package/dist/cjs/components/ChipChoice/components/ChipChoiceMultiple.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipChoiceMultiple = ChipChoiceMultiple;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const list_1 = require("@snack-uikit/list");
+const locale_1 = require("@snack-uikit/locale");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../../constants");
+const constants_2 = require("../constants");
+const hooks_1 = require("../hooks");
+const utils_2 = require("../utils");
+const options_1 = require("../utils/options");
+const ChipChoiceBase_1 = require("./ChipChoiceBase");
+const defaultMultiValueLabelFormatter = _ref => {
+  let {
+    value,
+    total,
+    allLabel
+  } = _ref;
+  const len = value.length;
+  if ([0, total].includes(len) && total !== len) {
+    return allLabel;
+  }
+  if (len === 1) {
+    return value[0].label;
+  }
+  return `${len.toString()}/${total}`;
+};
+function ChipChoiceMultiple(_a) {
+  var {
+      value: valueProp,
+      defaultValue,
+      options,
+      onChange: onChangeProp,
+      valueRender,
+      size = constants_1.SIZE.S,
+      label,
+      searchable,
+      contentRender,
+      dropDownClassName,
+      showClearButton = true,
+      resetSearchOnOptionSelection = true
+    } = _a,
+    rest = __rest(_a, ["value", "defaultValue", "options", "onChange", "valueRender", "size", "label", "searchable", "contentRender", "dropDownClassName", "showClearButton", "resetSearchOnOptionSelection"]);
+  const [value, setValue] = (0, utils_1.useValueControl)({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const flattenOptions = (0, react_1.useMemo)(() => {
+    const {
+      flattenOptions
+    } = (0, utils_2.kindFlattenOptions)({
+      options
+    });
+    return flattenOptions;
+  }, [options]);
+  const [searchValue = '', setSearchValue] = (0, react_1.useState)('');
+  const {
+    t
+  } = (0, locale_1.useLocale)('Chips');
+  const [open, setOpen] = (0, react_1.useState)(false);
+  const handleOnKeyDown = (0, hooks_1.useHandleOnKeyDown)({
+    setOpen
+  });
+  const flatMapOptions = (0, react_1.useMemo)(() => Object.values(flattenOptions), [flattenOptions]);
+  const selectedOptions = (0, react_1.useMemo)(() => value && value.length ? value.map(id => flattenOptions[id]).filter(Boolean) : [], [flattenOptions, value]);
+  const valueToRender = valueRender ? valueRender(selectedOptions) : defaultMultiValueLabelFormatter({
+    value: selectedOptions !== null && selectedOptions !== void 0 ? selectedOptions : [],
+    total: Object.keys(flattenOptions).length,
+    allLabel: t('allLabel')
+  });
+  const fuzzySearch = (0, hooks_1.useFuzzySearch)(options, flatMapOptions);
+  const result = (0, react_1.useMemo)(() => !searchable || valueToRender === searchValue ? options : fuzzySearch(searchValue), [fuzzySearch, options, searchValue, searchable, valueToRender]);
+  const items = (0, react_1.useMemo)(() => (0, options_1.transformOptionsToItems)(result, contentRender), [contentRender, result]);
+  const clearValue = () => setValue([]);
+  const chipRef = (0, react_1.useRef)(null);
+  const listRef = (0, react_1.useRef)(null);
+  const handleSelectionChange = (0, react_1.useCallback)(newValue => {
+    var _a;
+    if (newValue !== undefined) {
+      setValue(newValue);
+      if (searchValue) {
+        (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
+      if (resetSearchOnOptionSelection) {
+        setSearchValue('');
+      }
+    }
+  }, [searchValue, setValue, resetSearchOnOptionSelection]);
+  (0, react_1.useEffect)(() => {
+    if (searchValue && !open) {
+      setSearchValue('');
+    }
+  }, [searchable, open, searchValue]);
+  return (0, jsx_runtime_1.jsx)(list_1.Droplist, Object.assign({}, rest, {
+    items: items,
+    selection: {
+      value,
+      onChange: handleSelectionChange,
+      mode: 'multiple'
+    },
+    trigger: 'clickAndFocusVisible',
+    placement: 'bottom-start',
+    widthStrategy: 'gte',
+    listRef: listRef,
+    size: constants_2.DROPLIST_SIZE_MAP[size],
+    "data-test-id": constants_1.CHIP_CHOICE_TEST_IDS.droplist,
+    open: open,
+    onOpenChange: open => {
+      if (!open) {
+        setSearchValue('');
+      }
+      setOpen(open);
+    },
+    scroll: true,
+    className: dropDownClassName,
+    search: searchable ? {
+      value: searchValue,
+      onChange: setSearchValue
+    } : undefined,
+    children: (0, jsx_runtime_1.jsx)(ChipChoiceBase_1.ChipChoiceBase, Object.assign({}, rest, {
+      ref: chipRef,
+      onClearButtonClick: clearValue,
+      value: value,
+      showClearButton: showClearButton && !(Array.isArray(value) && [0].includes(value.length)),
+      valueToRender: valueToRender,
+      label: label,
+      loading: rest.loading,
+      size: size,
+      onKeyDown: handleOnKeyDown()
+    }))
+  }));
+}