@vkontakte/vkui 5.2.3 → 5.3.0

package/dist/cjs/components/ChipsInputBase/ChipsInputBase.js

@@ -1,176 +1,177 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    chipsInputDefaultProps: function() {
+        return chipsInputDefaultProps;
+    },
+    ChipsInputBase: function() {
+        return ChipsInputBase;
+    }
 });
-exports.chipsInputDefaultProps = exports.ChipsInputBase = void 0;
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _typeOf = require("@swc/helpers/lib/_type_of.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _useChipsInput2 = require("../../hooks/useChipsInput");
+var _useAdaptivity = require("../../hooks/useAdaptivity");
+var _useChipsInput = require("../../hooks/useChipsInput");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
-var _Chip = require("../Chip/Chip");
-var _excluded = ["disabled", "value", "label"],
-  _excluded2 = ["style", "className", "getRootRef", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "inputValue", "getRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "inputAriaLabel"];
+var _chip = require("../Chip/Chip");
 var chipsInputDefaultProps = {
-  onChange: _vkjs.noop,
-  onInputChange: _vkjs.noop,
-  onKeyDown: _vkjs.noop,
-  onBlur: _vkjs.noop,
-  onFocus: _vkjs.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;
+    onChange: _vkjs.noop,
+    onInputChange: _vkjs.noop,
+    onKeyDown: _vkjs.noop,
+    onBlur: _vkjs.noop,
+    onFocus: _vkjs.noop,
+    value: [],
+    inputValue: "",
+    inputAriaLabel: "Введите ваше значение...",
+    getOptionValue: function(option) {
+        return option.value;
+    },
+    getOptionLabel: function(option) {
+        return option.label;
+    },
+    getNewOptionData: function(_, 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, [
+            "disabled",
+            "value",
+            "label"
+        ]);
+        return /*#__PURE__*/ _react.createElement(_chip.Chip, _objectSpread({
+            value: value,
+            removable: !disabled
+        }, rest), label);
     }
-    var disabled = props.disabled,
-      value = props.value,
-      label = props.label,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-    return /*#__PURE__*/React.createElement(_Chip.Chip, (0, _extends2.default)({
-      value: value,
-      removable: !disabled
-    }, rest), label);
-  }
 };
-exports.chipsInputDefaultProps = chipsInputDefaultProps;
-var ChipsInputBase = function ChipsInputBase(props) {
-  var propsWithDefault = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, 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 = (0, _objectWithoutProperties2.default)(propsWithDefault, _excluded2);
-  var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
-  var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    focused = _React$useState2[0],
-    setFocused = _React$useState2[1];
-  var _useChipsInput = (0, _useChipsInput2.useChipsInput)(propsWithDefault),
-    fieldValue = _useChipsInput.fieldValue,
-    addOptionFromInput = _useChipsInput.addOptionFromInput,
-    removeOption = _useChipsInput.removeOption,
-    selectedOptions = _useChipsInput.selectedOptions,
-    handleInputChange = _useChipsInput.handleInputChange;
-  var inputRef = (0, _useExternRef.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 /*#__PURE__*/React.createElement("div", {
-    onClick: handleClick,
-    role: "presentation",
-    style: style,
-    className: (0, _vkjs.classNames)("vkuiChipsInputBase", sizeY === _adaptivity.SizeType.COMPACT && "vkuiChipsInputBase--sizeY-compact", className),
-    ref: getRootRef
-  }, selectedOptions.map(function (option) {
-    var value = getOptionValue(option);
-    var label = getOptionLabel(option);
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: "".concat((0, _typeof2.default)(value), "-").concat(value)
-    }, renderChip({
-      option: option,
-      value: value,
-      label: label,
-      onRemove: handleChipRemove,
-      disabled: Boolean(restProps.disabled),
-      className: "vkuiChipsInputBase__chip"
-    }));
-  }), /*#__PURE__*/React.createElement("label", {
-    className: "vkuiChipsInputBase__label",
-    "aria-label": inputAriaLabel
-  }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({
-    type: "text",
-    autoCapitalize: "none",
-    autoComplete: "off",
-    autoCorrect: "off",
-    spellCheck: false,
-    "aria-autocomplete": "list",
-    className: "vkuiChipsInputBase__el"
-  }, restProps, {
-    ref: inputRef,
-    value: fieldValue,
-    onChange: handleInputChange,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    placeholder: selectedOptions.length ? undefined : placeholder
-  }))));
+var ChipsInputBase = function(props) {
+    var propsWithDefault = _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, [
+        "style",
+        "className",
+        "getRootRef",
+        "value",
+        "onChange",
+        "onInputChange",
+        "onKeyDown",
+        "onBlur",
+        "onFocus",
+        "children",
+        "inputValue",
+        "getRef",
+        "placeholder",
+        "getOptionValue",
+        "getOptionLabel",
+        "getNewOptionData",
+        "renderChip",
+        "inputAriaLabel"
+    ]);
+    var sizeY = (0, _useAdaptivity.useAdaptivity)().sizeY;
+    var _React_useState = _slicedToArray(_react.useState(false), 2), focused = _React_useState[0], setFocused = _React_useState[1];
+    var _useChipsInput1 = (0, _useChipsInput.useChipsInput)(propsWithDefault), fieldValue = _useChipsInput1.fieldValue, addOptionFromInput = _useChipsInput1.addOptionFromInput, removeOption = _useChipsInput1.removeOption, selectedOptions = _useChipsInput1.selectedOptions, handleInputChange = _useChipsInput1.handleInputChange;
+    var inputRef = (0, _useExternRef.useExternRef)(getRef);
+    var isDisabled = restProps.disabled || restProps.readOnly;
+    var handleKeyDown = function(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(e) {
+        if (focused) {
+            setFocused(false);
+        }
+        onBlur(e);
+    };
+    var handleFocus = function(e) {
+        if (!focused) {
+            setFocused(true);
+        }
+        onFocus(e);
+    };
+    var handleChipRemove = function(_, value) {
+        if (value !== undefined) {
+            removeOption(value);
+        }
+    };
+    var handleClick = function(e) {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if ((inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && !focused) {
+            inputRef.current.focus();
+        }
+    };
+    return /*#__PURE__*/ _react.createElement("div", {
+        onClick: handleClick,
+        role: "presentation",
+        style: style,
+        className: (0, _vkjs.classNames)("vkuiChipsInputBase", sizeY === _adaptivity.SizeType.COMPACT && "vkuiChipsInputBase--sizeY-compact", !selectedOptions.length && "vkuiChipsInputBase--hasPlaceholder", className),
+        ref: getRootRef
+    }, selectedOptions.map(function(option) {
+        var value = getOptionValue(option);
+        var label = getOptionLabel(option);
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, {
+            key: "".concat(typeof value === "undefined" ? "undefined" : _typeOf(value), "-").concat(value)
+        }, renderChip({
+            option: option,
+            value: value,
+            label: label,
+            onRemove: handleChipRemove,
+            disabled: Boolean(restProps.disabled),
+            className: "vkuiChipsInputBase__chip"
+        }));
+    }), /*#__PURE__*/ _react.createElement("label", {
+        className: "vkuiChipsInputBase__label",
+        "aria-label": inputAriaLabel
+    }, /*#__PURE__*/ _react.createElement("input", _objectSpreadProps(_objectSpread({
+        type: "text",
+        autoCapitalize: "none",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        "aria-autocomplete": "list",
+        className: "vkuiChipsInputBase__el"
+    }, restProps), {
+        ref: inputRef,
+        value: fieldValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        placeholder: selectedOptions.length ? undefined : placeholder
+    }))));
 };
-exports.ChipsInputBase = ChipsInputBase;
+
 //# sourceMappingURL=ChipsInputBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsInputBase.js","names":["chipsInputDefaultProps","onChange","noop","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","useAdaptivity","sizeY","React","useState","focused","setFocused","useChipsInput","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","useExternRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","classNames","SizeType","COMPACT","map","onRemove","Boolean"],"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\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>(props: ChipsInputBaseProps<Option>) => {\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 { fieldValue, addOptionFromInput, removeOption, selectedOptions, 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 (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\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 = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\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      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        className,\n      )}\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: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['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          className={styles['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"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\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>(props: ChipsInputBaseProps<Option>) => {\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 { fieldValue, addOptionFromInput, removeOption, selectedOptions, 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 (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\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 = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\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      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n        className,\n      )}\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: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['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          className={styles['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"],"names":["chipsInputDefaultProps","ChipsInputBase","onChange","noop","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","Chip","removable","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useAdaptivity","React","useState","focused","setFocused","useChipsInput","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","useExternRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","classNames","SizeType","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}