@vkontakte/vkui 4.35.2 → 4.36.1

package/dist/components/ChipsInput/ChipsInput.js

@@ -1,202 +1,33 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["disabled", "value", "label"],
-    _excluded2 = ["style", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "className", "inputValue", "getRef", "getRootRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "before", "after", "inputAriaLabel"];
+var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from "react";
 import { FormField } from "../FormField/FormField";
-import { classNames } from "../../lib/classNames";
-import { Chip } from "../Chip/Chip";
-import { noop } from "../../lib/utils";
-import { useChipsInput } from "./useChipsInput";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { prefixClass } from "../../lib/prefixClass";
-import { useExternRef } from "../../hooks/useExternRef";
-export var chipsInputDefaultProps = {
-  type: "text",
-  onChange: noop,
-  onInputChange: noop,
-  onKeyDown: noop,
-  onBlur: noop,
-  onFocus: noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: function getOptionValue(option) {
-    return option.value;
-  },
-  getOptionLabel: function getOptionLabel(option) {
-    return option.label;
-  },
-  getNewOptionData: function getNewOptionData(_, label) {
-    return {
-      value: label,
-      label: label
-    };
-  },
-  renderChip: function renderChip(props) {
-    if (!props) {
-      return null;
-    }
+import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase";
 
-    var disabled = props.disabled,
-        value = props.value,
-        label = props.label,
-        rest = _objectWithoutProperties(props, _excluded);
-
-    return createScopedElement(Chip, _extends({
-      value: value,
-      removable: !disabled
-    }, rest), label);
-  }
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */
-
-export var ChipsInput = function ChipsInput(props) {
-  var propsWithDefault = _objectSpread(_objectSpread({}, chipsInputDefaultProps), props);
-
-  var style = propsWithDefault.style,
-      value = propsWithDefault.value,
-      onChange = propsWithDefault.onChange,
-      onInputChange = propsWithDefault.onInputChange,
-      onKeyDown = propsWithDefault.onKeyDown,
-      onBlur = propsWithDefault.onBlur,
-      onFocus = propsWithDefault.onFocus,
-      children = propsWithDefault.children,
-      className = propsWithDefault.className,
-      inputValue = propsWithDefault.inputValue,
-      getRef = propsWithDefault.getRef,
-      getRootRef = propsWithDefault.getRootRef,
-      placeholder = propsWithDefault.placeholder,
-      getOptionValue = propsWithDefault.getOptionValue,
-      getOptionLabel = propsWithDefault.getOptionLabel,
-      getNewOptionData = propsWithDefault.getNewOptionData,
-      renderChip = propsWithDefault.renderChip,
-      before = propsWithDefault.before,
-      after = propsWithDefault.after,
-      inputAriaLabel = propsWithDefault.inputAriaLabel,
-      restProps = _objectWithoutProperties(propsWithDefault, _excluded2);
-
-  var _useAdaptivity = useAdaptivity(),
-      sizeY = _useAdaptivity.sizeY;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
-  var _useChipsInput = useChipsInput(propsWithDefault),
-      fieldValue = _useChipsInput.fieldValue,
-      addOptionFromInput = _useChipsInput.addOptionFromInput,
-      removeOption = _useChipsInput.removeOption,
-      selectedOptions = _useChipsInput.selectedOptions,
-      handleInputChange = _useChipsInput.handleInputChange;
-
-  var inputRef = useExternRef(getRef);
-  var isDisabled = restProps.disabled || restProps.readOnly;
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onKeyDown(e);
-
-    if (e.key === "Backspace" && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
-      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
-      e.preventDefault();
-    }
-
-    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
-      addOptionFromInput();
-      e.preventDefault();
-    }
-  };
-
-  var handleBlur = function handleBlur(e) {
-    if (focused) {
-      setFocused(false);
-    }
-
-    onBlur(e);
-  };
-
-  var handleFocus = function handleFocus(e) {
-    if (!focused) {
-      setFocused(true);
-    }
-
-    onFocus(e);
-  };
-
-  var handleChipRemove = function handleChipRemove(_, value) {
-    if (value !== undefined) {
-      removeOption(value);
-    }
-  };
-
-  var handleClick = function handleClick(e) {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && !focused) {
-      inputRef.current.focus();
-    }
-  };
+export var ChipsInput = function ChipsInput(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      getRootRef = _ref.getRootRef,
+      before = _ref.before,
+      after = _ref.after,
+      status = _ref.status,
+      restProps = _objectWithoutProperties(_ref, _excluded);
 
   return createScopedElement(FormField, {
     getRootRef: getRootRef,
-    vkuiClass: classNames("ChipsInput", "ChipsInput--sizeY-".concat(sizeY), focused && "ChipsInput--focused", !!selectedOptions.length && "ChipsInput--withChips"),
+    vkuiClass: "ChipsInput",
     className: className,
     style: style,
     disabled: restProps.disabled,
     before: before,
     after: after,
-    onClick: handleClick,
     role: "application",
     "aria-disabled": restProps.disabled,
-    "aria-readonly": restProps.readOnly
-  }, createScopedElement("div", {
-    vkuiClass: "ChipsInput__container",
-    role: "presentation"
-  }, selectedOptions.map(function (option) {
-    var value = getOptionValue(option);
-    var label = getOptionLabel(option);
-    return createScopedElement(React.Fragment, {
-      key: "".concat(_typeof(value), "-").concat(value)
-    }, renderChip({
-      option: option,
-      value: value,
-      label: label,
-      onRemove: handleChipRemove,
-      disabled: Boolean(restProps.disabled),
-      className: prefixClass("ChipsInput__chip")
-    }));
-  }), createScopedElement("label", {
-    vkuiClass: "ChipsInput__input-container",
-    "aria-label": inputAriaLabel
-  }, createScopedElement("input", _extends({
-    ref: inputRef,
-    value: fieldValue,
-    autoCapitalize: "none",
-    autoComplete: "off",
-    autoCorrect: "off",
-    spellCheck: false,
-    "aria-autocomplete": "list",
-    vkuiClass: "ChipsInput__el",
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    placeholder: selectedOptions.length ? undefined : placeholder
-  }, restProps)))));
+    "aria-readonly": restProps.readOnly,
+    status: status
+  }, createScopedElement(ChipsInputBase, restProps));
 };
 //# sourceMappingURL=ChipsInput.js.map

package/dist/components/ChipsInput/ChipsInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["React","FormField","classNames","Chip","noop","useChipsInput","useAdaptivity","prefixClass","useExternRef","chipsInputDefaultProps","type","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","ChipsInput","propsWithDefault","style","children","className","getRef","getRootRef","placeholder","before","after","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","map","onRemove","Boolean"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Chip, ChipProps } from \"../Chip/Chip\";\nimport { noop } from \"../../lib/utils\";\nimport { useChipsInput } from \"./useChipsInput\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./ChipsInput.css\";\n\nexport type ChipsInputValue = string | number;\n\nexport interface ChipsInputOption {\n  value?: ChipsInputValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface RenderChip<Option extends ChipsInputOption> extends ChipProps {\n  label: string;\n  option: Option;\n  disabled: boolean;\n}\n\nexport interface ChipsInputProps<Option extends ChipsInputOption>\n  extends Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"value\" | \"onChange\"\n    >,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipsInputValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nexport const chipsInputDefaultProps: ChipsInputProps<any> = {\n  type: \"text\",\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: \"\",\n  inputAriaLabel: \"Введите ваше значение...\",\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipsInputOption>(\n  props: ChipsInputProps<Option>\n) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    className,\n    inputValue,\n    getRef,\n    getRootRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    before,\n    after,\n    inputAriaLabel,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const {\n    fieldValue,\n    addOptionFromInput,\n    removeOption,\n    selectedOptions,\n    handleInputChange,\n  } = useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (\n      e.key === \"Backspace\" &&\n      !e.defaultPrevented &&\n      !fieldValue &&\n      selectedOptions.length\n    ) {\n      removeOption(\n        getOptionValue!(selectedOptions[selectedOptions.length - 1])\n      );\n      e.preventDefault();\n    }\n\n    if (e.key === \"Enter\" && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (\n    _: React.MouseEvent | undefined,\n    value: ChipsInputValue | undefined\n  ) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      vkuiClass={classNames(\n        \"ChipsInput\",\n        `ChipsInput--sizeY-${sizeY}`,\n        focused && \"ChipsInput--focused\",\n        !!selectedOptions.length && \"ChipsInput--withChips\"\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      onClick={handleClick}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n    >\n      <div vkuiClass=\"ChipsInput__container\" role=\"presentation\">\n        {selectedOptions.map((option: Option) => {\n          const value = getOptionValue!(option);\n          const label = getOptionLabel!(option);\n\n          return (\n            <React.Fragment key={`${typeof value}-${value}`}>\n              {renderChip!({\n                option,\n                value,\n                label,\n                onRemove: handleChipRemove,\n                disabled: Boolean(restProps.disabled),\n                className: prefixClass(\"ChipsInput__chip\"),\n              })}\n            </React.Fragment>\n          );\n        })}\n        <label\n          vkuiClass=\"ChipsInput__input-container\"\n          aria-label={inputAriaLabel}\n        >\n          <input\n            ref={inputRef}\n            value={fieldValue}\n            autoCapitalize=\"none\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n            aria-autocomplete=\"list\"\n            vkuiClass=\"ChipsInput__el\"\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            placeholder={selectedOptions.length ? undefined : placeholder}\n            {...restProps}\n          />\n        </label>\n      </div>\n    </FormField>\n  );\n};\n"],"file":"ChipsInput.js"}
+{"version":3,"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["FormField","ChipsInputBase","ChipsInput","style","className","getRootRef","before","after","status","restProps","disabled","readOnly"],"mappings":";;;AAAA,SAASA,SAAT;AAEA,SACEC,cADF;;AAUA;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAQK;AAAA,MAP7BC,KAO6B,QAP7BA,KAO6B;AAAA,MAN7BC,SAM6B,QAN7BA,SAM6B;AAAA,MAL7BC,UAK6B,QAL7BA,UAK6B;AAAA,MAJ7BC,MAI6B,QAJ7BA,MAI6B;AAAA,MAH7BC,KAG6B,QAH7BA,KAG6B;AAAA,MAF7BC,MAE6B,QAF7BA,MAE6B;AAAA,MAD1BC,SAC0B;;AAC7B,SACE,oBAAC,SAAD;AACE,IAAA,UAAU,EAAEJ,UADd;AAEE,IAAA,SAAS,EAAC,YAFZ;AAGE,IAAA,SAAS,EAAED,SAHb;AAIE,IAAA,KAAK,EAAED,KAJT;AAKE,IAAA,QAAQ,EAAEM,SAAS,CAACC,QALtB;AAME,IAAA,MAAM,EAAEJ,MANV;AAOE,IAAA,KAAK,EAAEC,KAPT;AAQE,IAAA,IAAI,EAAC,aARP;AASE,qBAAeE,SAAS,CAACC,QAT3B;AAUE,qBAAeD,SAAS,CAACE,QAV3B;AAWE,IAAA,MAAM,EAAEH;AAXV,KAaE,oBAAC,cAAD,EAAoBC,SAApB,CAbF,CADF;AAiBD,CA1BM","sourcesContent":["import { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { ChipOption } from \"../Chip/Chip\";\nimport {\n  ChipsInputBase,\n  ChipsInputBaseProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport \"./ChipsInput.css\";\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      vkuiClass=\"ChipsInput\"\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"file":"ChipsInput.js"}

package/dist/components/ChipsInputBase/ChipsInputBase.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
+import "./ChipsInputBase.css";
+export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign {
+    value: Option[];
+    inputValue?: string;
+    onChange?: (o: Option[]) => void;
+    onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
+    getOptionValue?: (o?: Option) => ChipValue;
+    getOptionLabel?: (o?: Option) => string;
+    getNewOptionData?: (v?: ChipValue, l?: string) => Option;
+    renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
+    inputAriaLabel?: string;
+}
+export declare const chipsInputDefaultProps: ChipsInputBaseProps<any>;
+export declare const ChipsInputBase: <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => JSX.Element;

package/dist/components/ChipsInputBase/ChipsInputBase.js

@@ -0,0 +1,188 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["disabled", "value", "label"],
+    _excluded2 = ["style", "className", "getRootRef", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "inputValue", "getRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "inputAriaLabel"];
+import { createScopedElement } from "../../lib/jsxRuntime";
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { Chip } from "../Chip/Chip";
+import { noop } from "../../lib/utils";
+import { useChipsInput } from "../../hooks/useChipsInput";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { prefixClass } from "../../lib/prefixClass";
+import { useExternRef } from "../../hooks/useExternRef";
+export var chipsInputDefaultProps = {
+  onChange: noop,
+  onInputChange: noop,
+  onKeyDown: noop,
+  onBlur: noop,
+  onFocus: noop,
+  value: [],
+  inputValue: "",
+  inputAriaLabel: "Введите ваше значение...",
+  getOptionValue: function getOptionValue(option) {
+    return option.value;
+  },
+  getOptionLabel: function getOptionLabel(option) {
+    return option.label;
+  },
+  getNewOptionData: function getNewOptionData(_, label) {
+    return {
+      value: label,
+      label: label
+    };
+  },
+  renderChip: function renderChip(props) {
+    if (!props) {
+      return null;
+    }
+
+    var disabled = props.disabled,
+        value = props.value,
+        label = props.label,
+        rest = _objectWithoutProperties(props, _excluded);
+
+    return createScopedElement(Chip, _extends({
+      value: value,
+      removable: !disabled
+    }, rest), label);
+  }
+};
+export var ChipsInputBase = function ChipsInputBase(props) {
+  var propsWithDefault = _objectSpread(_objectSpread({}, chipsInputDefaultProps), props);
+
+  var style = propsWithDefault.style,
+      className = propsWithDefault.className,
+      getRootRef = propsWithDefault.getRootRef,
+      value = propsWithDefault.value,
+      onChange = propsWithDefault.onChange,
+      onInputChange = propsWithDefault.onInputChange,
+      onKeyDown = propsWithDefault.onKeyDown,
+      onBlur = propsWithDefault.onBlur,
+      onFocus = propsWithDefault.onFocus,
+      children = propsWithDefault.children,
+      inputValue = propsWithDefault.inputValue,
+      getRef = propsWithDefault.getRef,
+      placeholder = propsWithDefault.placeholder,
+      getOptionValue = propsWithDefault.getOptionValue,
+      getOptionLabel = propsWithDefault.getOptionLabel,
+      getNewOptionData = propsWithDefault.getNewOptionData,
+      renderChip = propsWithDefault.renderChip,
+      inputAriaLabel = propsWithDefault.inputAriaLabel,
+      restProps = _objectWithoutProperties(propsWithDefault, _excluded2);
+
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focused = _React$useState2[0],
+      setFocused = _React$useState2[1];
+
+  var _useChipsInput = useChipsInput(propsWithDefault),
+      fieldValue = _useChipsInput.fieldValue,
+      addOptionFromInput = _useChipsInput.addOptionFromInput,
+      removeOption = _useChipsInput.removeOption,
+      selectedOptions = _useChipsInput.selectedOptions,
+      handleInputChange = _useChipsInput.handleInputChange;
+
+  var inputRef = useExternRef(getRef);
+  var isDisabled = restProps.disabled || restProps.readOnly;
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+
+    onKeyDown(e);
+
+    if (e.key === "Backspace" && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
+      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
+      e.preventDefault();
+    }
+
+    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
+      addOptionFromInput();
+      e.preventDefault();
+    }
+  };
+
+  var handleBlur = function handleBlur(e) {
+    if (focused) {
+      setFocused(false);
+    }
+
+    onBlur(e);
+  };
+
+  var handleFocus = function handleFocus(e) {
+    if (!focused) {
+      setFocused(true);
+    }
+
+    onFocus(e);
+  };
+
+  var handleChipRemove = function handleChipRemove(_, value) {
+    if (value !== undefined) {
+      removeOption(value);
+    }
+  };
+
+  var handleClick = function handleClick(e) {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+
+    if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && !focused) {
+      inputRef.current.focus();
+    }
+  };
+
+  return createScopedElement("div", {
+    vkuiClass: classNames("ChipsInputBase", "ChipsInputBase--sizeY-".concat(sizeY)),
+    onClick: handleClick,
+    role: "presentation",
+    style: style,
+    className: className,
+    ref: getRootRef
+  }, selectedOptions.map(function (option) {
+    var value = getOptionValue(option);
+    var label = getOptionLabel(option);
+    return createScopedElement(React.Fragment, {
+      key: "".concat(_typeof(value), "-").concat(value)
+    }, renderChip({
+      option: option,
+      value: value,
+      label: label,
+      onRemove: handleChipRemove,
+      disabled: Boolean(restProps.disabled),
+      className: prefixClass("ChipsInputBase__chip")
+    }));
+  }), createScopedElement("label", {
+    vkuiClass: "ChipsInputBase__label",
+    "aria-label": inputAriaLabel
+  }, createScopedElement("input", _extends({
+    type: "text",
+    autoCapitalize: "none",
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: false,
+    "aria-autocomplete": "list",
+    vkuiClass: "ChipsInputBase__el"
+  }, restProps, {
+    ref: inputRef,
+    value: fieldValue,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholder: selectedOptions.length ? undefined : placeholder
+  }))));
+};
+//# sourceMappingURL=ChipsInputBase.js.map

package/dist/components/ChipsInputBase/ChipsInputBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"names":["React","classNames","Chip","noop","useChipsInput","useAdaptivity","prefixClass","useExternRef","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","map","onRemove","Boolean"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Chip, ChipOption, ChipValue, RenderChip } from \"../Chip/Chip\";\nimport { noop } from \"../../lib/utils\";\nimport { useChipsInput } from \"../../hooks/useChipsInput\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./ChipsInputBase.css\";\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"value\" | \"onChange\"\n    >,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: \"\",\n  inputAriaLabel: \"Введите ваше значение...\",\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(\n  props: ChipsInputBaseProps<Option>\n) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    className,\n    getRootRef,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    inputValue,\n    getRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    inputAriaLabel,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const {\n    fieldValue,\n    addOptionFromInput,\n    removeOption,\n    selectedOptions,\n    handleInputChange,\n  } = useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (\n      e.key === \"Backspace\" &&\n      !e.defaultPrevented &&\n      !fieldValue &&\n      selectedOptions.length\n    ) {\n      removeOption(\n        getOptionValue!(selectedOptions[selectedOptions.length - 1])\n      );\n      e.preventDefault();\n    }\n\n    if (e.key === \"Enter\" && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (\n    _: React.MouseEvent | undefined,\n    value: ChipValue | undefined\n  ) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(\"ChipsInputBase\", `ChipsInputBase--sizeY-${sizeY}`)}\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={className}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: prefixClass(\"ChipsInputBase__chip\"),\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label vkuiClass=\"ChipsInputBase__label\" aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          vkuiClass=\"ChipsInputBase__el\"\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"file":"ChipsInputBase.js"}

package/dist/components/ChipsSelect/ChipsSelect.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { ChipsInputOption, ChipsInputProps } from "../ChipsInput/ChipsInput";
+import { ChipOption } from "../Chip/Chip";
+import { ChipsInputProps } from "../ChipsInput/ChipsInput";
 import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
-import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./ChipsSelect.css";
-export interface ChipsSelectProps<Option extends ChipsInputOption> extends ChipsInputProps<Option>, AdaptivityProps {
+export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsInputProps<Option>, "after"> {
     popupDirection?: "top" | "bottom";
     options?: Option[];
     filterFn?: false | ((value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<Option>, "getOptionLabel">["getOptionLabel"]) => boolean);
@@ -40,4 +40,4 @@ export interface ChipsSelectProps<Option extends ChipsInputOption> extends Chips
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect
  */
-export declare const ChipsSelect: React.FC<Pick<ChipsSelectProps<ChipsInputOption>, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "after" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "min" | "name" | "type" | "role" | "tabIndex" | "crossOrigin" | "mode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "align" | "getRootRef" | "getRef" | "before" | "options" | "popupDirection" | "inputValue" | "onInputChange" | "getOptionValue" | "getOptionLabel" | "getNewOptionData" | "renderChip" | "inputAriaLabel" | "emptyText" | "filterFn" | "renderOption" | "fetching" | "creatable" | "showSelected" | "creatableText" | "onChangeStart" | "closeAfterSelect"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const ChipsSelect: <Option extends ChipOption>(props: ChipsSelectProps<Option>) => JSX.Element;

package/dist/components/ChipsSelect/ChipsSelect.js

@@ -4,15 +4,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["option"],
-    _excluded2 = ["style", "onFocus", "onKeyDown", "className", "fetching", "renderOption", "emptyText", "getRef", "getRootRef", "disabled", "placeholder", "tabIndex", "getOptionValue", "getOptionLabel", "showSelected", "getNewOptionData", "renderChip", "popupDirection", "creatable", "filterFn", "inputValue", "creatableText", "sizeY", "closeAfterSelect", "onChangeStart", "after", "options"];
+    _excluded2 = ["style", "onFocus", "onKeyDown", "className", "fetching", "renderOption", "emptyText", "getRef", "getRootRef", "disabled", "placeholder", "tabIndex", "getOptionValue", "getOptionLabel", "showSelected", "getNewOptionData", "renderChip", "popupDirection", "creatable", "filterFn", "inputValue", "creatableText", "closeAfterSelect", "onChangeStart", "before", "options"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { classNames } from "../../lib/classNames";
-import { ChipsInput, chipsInputDefaultProps } from "../ChipsInput/ChipsInput";
+import { ChipsInputBase, chipsInputDefaultProps } from "../ChipsInputBase/ChipsInputBase";
 import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption";
-import { useChipsSelect } from "./useChipsSelect";
-import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { useChipsSelect } from "../../hooks/useChipsSelect";
 import { noop } from "../../lib/utils";
 import { useDOM } from "../../lib/dom";
 import { Caption } from "../Typography/Caption/Caption";
@@ -21,6 +20,8 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { defaultFilterFn } from "../../lib/select";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
+import { FormField } from "../FormField/FormField";
+import { IconButton } from "../IconButton/IconButton";
 var FOCUS_ACTION_NEXT = "next";
 var FOCUS_ACTION_PREV = "prev";
 
@@ -41,8 +42,12 @@ var chipsSelectDefaultProps = _objectSpread(_objectSpread({}, chipsInputDefaultP
     return createScopedElement(CustomSelectOption, restProps);
   }
 });
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsSelect
+ */
+
 
-var ChipsSelectComponent = function ChipsSelectComponent(props) {
+export var ChipsSelect = function ChipsSelect(props) {
   var propsWithDefault = _objectSpread(_objectSpread({}, chipsSelectDefaultProps), props);
 
   var style = propsWithDefault.style,
@@ -67,10 +72,9 @@ var ChipsSelectComponent = function ChipsSelectComponent(props) {
       filterFn = propsWithDefault.filterFn,
       inputValue = propsWithDefault.inputValue,
       creatableText = propsWithDefault.creatableText,
-      sizeY = propsWithDefault.sizeY,
       closeAfterSelect = propsWithDefault.closeAfterSelect,
       onChangeStart = propsWithDefault.onChangeStart,
-      after = propsWithDefault.after,
+      before = propsWithDefault.before,
       options = propsWithDefault.options,
       restProps = _objectWithoutProperties(propsWithDefault, _excluded2);
 
@@ -110,9 +114,9 @@ var ChipsSelectComponent = function ChipsSelectComponent(props) {
   };
 
   var handleClickOutside = function handleClickOutside(e) {
-    var rootNode = rootRef.current;
+    var _rootRef$current;
 
-    if (rootNode && e.target !== rootNode && !rootNode.contains(e.target)) {
+    if (e.target !== rootRef.current && !((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 && _rootRef$current.contains(e.target))) {
       setOpened(false);
     }
   };
@@ -268,12 +272,35 @@ var ChipsSelectComponent = function ChipsSelectComponent(props) {
   var observableRefs = React.useMemo(function () {
     return [scrollBoxRef, rootRef];
   }, [rootRef, scrollBoxRef]);
-  return createScopedElement("div", {
-    vkuiClass: classNames("ChipsSelect", "ChipsSelect--sizeY-".concat(sizeY)),
-    ref: rootRef,
+
+  var toggleOpened = function toggleOpened() {
+    setOpened(function (prevOpened) {
+      return !prevOpened;
+    });
+  };
+
+  return createScopedElement(FormField, {
+    vkuiClass: classNames("ChipsSelect", opened && "Select--open", opened && (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")),
+    getRootRef: rootRef,
     style: style,
-    className: className
-  }, createScopedElement(ChipsInput, _extends({}, restProps, {
+    className: className,
+    disabled: disabled,
+    role: "application",
+    "aria-disabled": disabled,
+    "aria-readonly": restProps.readOnly,
+    after: createScopedElement(IconButton, {
+      vkuiClass: "ChipsSelect__dropdown",
+      activeMode: "",
+      hoverMode: "" // TODO: add label customization
+      ,
+      "aria-label": opened ? "Скрыть" : "Развернуть",
+      onClick: toggleOpened
+    }, createScopedElement(DropdownIcon, {
+      vkuiClass: "ChipsSelect__icon",
+      opened: opened
+    })),
+    before: before
+  }, createScopedElement(ChipsInputBase, _extends({}, restProps, {
     tabIndex: tabIndex,
     value: selectedOptions,
     inputValue: fieldValue,
@@ -284,11 +311,9 @@ var ChipsSelectComponent = function ChipsSelectComponent(props) {
     onFocus: handleFocus,
     onKeyDown: handleKeyDown,
     placeholder: placeholder,
-    vkuiClass: classNames(opened && "Select--open", opened && (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")),
     getRef: getRef,
     disabled: disabled,
-    onInputChange: handleInputChange,
-    after: createScopedElement(DropdownIcon, null)
+    onInputChange: handleInputChange
   })), opened && createScopedElement(CustomSelectDropdown, {
     targetRef: rootRef,
     placement: popupDirection,
@@ -343,13 +368,4 @@ var ChipsSelectComponent = function ChipsSelectComponent(props) {
     }));
   })));
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/ChipsSelect
- */
-
-
-export var ChipsSelect = withAdaptivity(ChipsSelectComponent, {
-  sizeY: true
-});
-ChipsSelect.displayName = "ChipsSelect";
 //# sourceMappingURL=ChipsSelect.js.map