@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js

@@ -1,10 +1,3 @@
-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 * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -12,156 +5,125 @@ import { useChipsInput } from '../../hooks/useChipsInput';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Chip } from '../Chip/Chip';
-import "./ChipsInputBase.module.css";
-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;
+import styles from './ChipsInputBase.module.css';
+export const chipsInputDefaultProps = {
+    onChange: noop,
+    onInputChange: noop,
+    onKeyDown: noop,
+    onBlur: noop,
+    onFocus: noop,
+    value: [],
+    inputValue: '',
+    inputAriaLabel: 'Введите ваше значение...',
+    getOptionValue: (option)=>option.value,
+    getOptionLabel: (option)=>option.label,
+    getNewOptionData: (_, label)=>({
+            value: label,
+            label
+        }),
+    renderChip (props) {
+        if (!props) {
+            return null;
+        }
+        const { disabled , value , label , ...rest } = props;
+        return /*#__PURE__*/ React.createElement(Chip, {
+            value: value,
+            removable: !disabled,
+            ...rest
+        }, label);
     }
-    var disabled = props.disabled,
-      value = props.value,
-      label = props.label,
-      rest = _objectWithoutProperties(props, _excluded);
-    return /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement("div", {
-    onClick: handleClick,
-    role: "presentation",
-    style: style,
-    className: classNames("vkuiChipsInputBase", sizeY === 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(_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", _extends({
-    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
-  }))));
+export const ChipsInputBase = (props)=>{
+    const propsWithDefault = {
+        ...chipsInputDefaultProps,
+        ...props
+    };
+    const { style , className , getRootRef , value , onChange , onInputChange , onKeyDown , onBlur , onFocus , children , inputValue , getRef , placeholder , getOptionValue , getOptionLabel , getNewOptionData , renderChip , inputAriaLabel , ...restProps } = propsWithDefault;
+    const { sizeY  } = useAdaptivity();
+    const [focused, setFocused] = React.useState(false);
+    const { fieldValue , addOptionFromInput , removeOption , selectedOptions , handleInputChange  } = useChipsInput(propsWithDefault);
+    const inputRef = useExternRef(getRef);
+    const isDisabled = restProps.disabled || restProps.readOnly;
+    const 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();
+        }
+    };
+    const handleBlur = (e)=>{
+        if (focused) {
+            setFocused(false);
+        }
+        onBlur(e);
+    };
+    const handleFocus = (e)=>{
+        if (!focused) {
+            setFocused(true);
+        }
+        onFocus(e);
+    };
+    const handleChipRemove = (_, value)=>{
+        if (value !== undefined) {
+            removeOption(value);
+        }
+    };
+    const handleClick = (e)=>{
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if (inputRef?.current !== null && !focused) {
+            inputRef.current.focus();
+        }
+    };
+    return /*#__PURE__*/ React.createElement("div", {
+        onClick: handleClick,
+        role: "presentation",
+        style: style,
+        className: classNames(styles['ChipsInputBase'], sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'], !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'], className),
+        ref: getRootRef
+    }, selectedOptions.map((option)=>{
+        const value = getOptionValue(option);
+        const label = getOptionLabel(option);
+        return /*#__PURE__*/ React.createElement(React.Fragment, {
+            key: `${typeof value}-${value}`
+        }, renderChip({
+            option,
+            value,
+            label,
+            onRemove: handleChipRemove,
+            disabled: Boolean(restProps.disabled),
+            className: styles['ChipsInputBase__chip']
+        }));
+    }), /*#__PURE__*/ React.createElement("label", {
+        className: styles['ChipsInputBase__label'],
+        "aria-label": inputAriaLabel
+    }, /*#__PURE__*/ React.createElement("input", {
+        type: "text",
+        autoCapitalize: "none",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        "aria-autocomplete": "list",
+        className: styles['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/cssm/components/ChipsInputBase/ChipsInputBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsInputBase.js","names":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","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","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":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","styles","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","removable","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","focused","setFocused","useState","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.module.css

@@ -1 +1 @@
-.vkuiChipsInputBase{display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;max-width:100%;overflow:hidden;padding:3px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiChipsInputBase__chip{margin:2px;max-width:calc(100% - 4px)}.vkuiChipsInputBase__label{display:flex;flex:1;flex-direction:column;margin:2px 2px 2px 10px}.vkuiChipsInputBase__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;color:#000;color:var(--vkui--color_text_primary);font-family:inherit;font-size:15px;line-height:26px;margin-bottom:2px;padding:0;position:relative;width:100%}.vkuiChipsInputBase__el:focus{min-width:64px}.vkuiChipsInputBase__el::-ms-clear{display:none}.vkuiChipsInputBase__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiChipsInputBase__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el[readonly]{cursor:default}.vkuiChipsInputBase--sizeY-compact{padding:1px}
+.vkuiChipsInputBase{display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;max-width:100%;overflow:hidden;padding:3px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiChipsInputBase__chip{margin:2px;max-width:calc(100% - 4px)}.vkuiChipsInputBase__label{display:flex;flex:1;flex-direction:column;margin:2px 2px 2px 10px}.vkuiChipsInputBase__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;color:#000;color:var(--vkui--color_text_primary);font-family:inherit;font-size:15px;line-height:26px;margin-bottom:2px;padding:0;position:relative;width:100%}.vkuiChipsInputBase__el:focus{min-width:64px}.vkuiChipsInputBase__el::-ms-clear{display:none}.vkuiChipsInputBase__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiChipsInputBase__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el[readonly]{cursor:default}.vkuiChipsInputBase--hasPlaceholder .vkuiChipsInputBase__label{margin-left:9px;margin-right:0}.vkuiChipsInputBase--hasPlaceholder .vkuiChipsInputBase__el{text-overflow:ellipsis;white-space:nowrap}.vkuiChipsInputBase--sizeY-compact{padding:1px}