@vkontakte/vkui 5.0.0 → 5.0.2

package/dist/components/ChipsInputBase/ChipsInputBase.js

@@ -4,15 +4,14 @@ 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";
+  _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 } from "../../lib/classNames";
+import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import { classNamesString } 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,
@@ -39,13 +38,11 @@ export var chipsInputDefaultProps = {
     if (!props) {
       return null;
     }
-
     var disabled = props.disabled,
-        value = props.value,
-        label = props.label,
-        rest = _objectWithoutProperties(props, _excluded);
-
-    return createScopedElement(Chip, _extends({
+      value = props.value,
+      label = props.label,
+      rest = _objectWithoutProperties(props, _excluded);
+    return /*#__PURE__*/React.createElement(Chip, _extends({
       value: value,
       removable: !disabled
     }, rest), label);
@@ -53,108 +50,90 @@ export var chipsInputDefaultProps = {
 };
 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);
-
+    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;
-
+    sizeY = _useAdaptivity.sizeY;
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
+    _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;
-
+    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)),
+  return /*#__PURE__*/React.createElement("div", {
     onClick: handleClick,
     role: "presentation",
     style: style,
-    className: className,
+    className: classNamesString("vkuiChipsInputBase", getSizeYClassName("vkuiChipsInputBase", sizeY), className),
     ref: getRootRef
   }, selectedOptions.map(function (option) {
     var value = getOptionValue(option);
     var label = getOptionLabel(option);
-    return createScopedElement(React.Fragment, {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
       key: "".concat(_typeof(value), "-").concat(value)
     }, renderChip({
       option: option,
@@ -162,19 +141,19 @@ export var ChipsInputBase = function ChipsInputBase(props) {
       label: label,
       onRemove: handleChipRemove,
       disabled: Boolean(restProps.disabled),
-      className: prefixClass("ChipsInputBase__chip")
+      className: "vkuiChipsInputBase__chip"
     }));
-  }), createScopedElement("label", {
-    vkuiClass: "ChipsInputBase__label",
+  }), /*#__PURE__*/React.createElement("label", {
+    className: "vkuiChipsInputBase__label",
     "aria-label": inputAriaLabel
-  }, createScopedElement("input", _extends({
+  }, /*#__PURE__*/React.createElement("input", _extends({
     type: "text",
     autoCapitalize: "none",
     autoComplete: "off",
     autoCorrect: "off",
     spellCheck: false,
     "aria-autocomplete": "list",
-    vkuiClass: "ChipsInputBase__el"
+    className: "vkuiChipsInputBase__el"
   }, restProps, {
     ref: inputRef,
     value: fieldValue,

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsInputBase.js","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"],"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"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"],"mappings":"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"}
+{"version":3,"file":"ChipsInputBase.js","names":["React","getSizeYClassName","classNamesString","Chip","noop","useChipsInput","useAdaptivity","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"],"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { classNamesString } 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 { useExternRef } from \"../../hooks/useExternRef\";\nimport styles from \"./ChipsInputBase.module.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      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNamesString(\n        styles[\"ChipsInputBase\"],\n        getSizeYClassName(styles[\"ChipsInputBase\"], sizeY),\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\n        className={styles[\"ChipsInputBase__label\"]}\n        aria-label={inputAriaLabel}\n      >\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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"}

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

@@ -2,7 +2,6 @@ import * as React from "react";
 import { ChipOption } from "../Chip/Chip";
 import { ChipsInputProps } from "../ChipsInput/ChipsInput";
 import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
-import "./ChipsSelect.css";
 export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsInputProps<Option>, "after"> {
     popupDirection?: "top" | "bottom";
     options?: Option[];