@vkontakte/vkui 5.0.3 → 5.1.2

package/dist/components/Checkbox/Checkbox.js

@@ -1,21 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "onChange"];
-import * as React from "react";
-import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { Icon20CheckBoxOn, Icon24CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import { Footnote } from "../Typography/Footnote/Footnote";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditionalRender";
-import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
-import { warnOnce } from "../../lib/warnOnce";
-var warn = warnOnce("Checkbox");
+var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
+import * as React from 'react';
+import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { Icon20CheckBoxOn, Icon24CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from '@vkontakte/icons';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { warnOnce } from '../../lib/warnOnce';
+var warn = warnOnce('Checkbox');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
@@ -29,6 +28,11 @@ export var Checkbox = function Checkbox(_ref) {
     description = _ref.description,
     indeterminate = _ref.indeterminate,
     defaultIndeterminate = _ref.defaultIndeterminate,
+    hoverMode = _ref.hoverMode,
+    activeMode = _ref.activeMode,
+    hasHover = _ref.hasHover,
+    hasActive = _ref.hasActive,
+    focusVisibleMode = _ref.focusVisibleMode,
     onChange = _ref.onChange,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useExternRef(getRef);
@@ -52,43 +56,48 @@ export var Checkbox = function Checkbox(_ref) {
     }
     onChange && onChange(event);
   }, [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]);
-  if (process.env.NODE_ENV === "development") {
+  if (process.env.NODE_ENV === 'development') {
     if (defaultIndeterminate && restProps.defaultChecked) {
-      warn("defaultIndeterminate и defaultChecked не могут быть true одновременно", "error");
+      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');
     }
     if (indeterminate && restProps.checked) {
-      warn("indeterminate и checked не могут быть true одновременно", "error");
+      warn('indeterminate и checked не могут быть true одновременно', 'error');
     }
     if (restProps.defaultChecked && restProps.checked) {
-      warn("defaultChecked и checked не могут быть true одновременно", "error");
+      warn('defaultChecked и checked не могут быть true одновременно', 'error');
     }
   }
   return /*#__PURE__*/React.createElement(Tappable, {
     Component: "label",
-    className: classNamesString("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", getSizeYClassName("vkuiCheckbox", sizeY), !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
+    className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", getSizeYClassName("vkuiCheckbox", sizeY), !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,
-    getRootRef: getRootRef
+    getRootRef: getRootRef,
+    hoverMode: hoverMode,
+    activeMode: activeMode,
+    hasHover: hasHover,
+    hasActive: hasActive,
+    focusVisibleMode: focusVisibleMode
   }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
     onChange: handleChange,
     type: "checkbox",
     className: "vkuiCheckbox__input",
     getRef: inputRef
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
+    className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
   }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Icon20CheckBoxOn, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(Icon20CheckBoxOn, {
     className: adaptiveSizeY.compact.className
   }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(Icon24CheckBoxOn, {
     className: adaptiveSizeY.regular.className
   }))), /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
+    className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--off")
   }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Icon20CheckBoxOff, null) : /*#__PURE__*/React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/React.createElement(Icon20CheckBoxOff, {
     className: adaptiveSizeY.compact.className
   }), adaptiveSizeY.regular && /*#__PURE__*/React.createElement(Icon24CheckBoxOff, {
     className: adaptiveSizeY.regular.className
   }))), /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
+    className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--indeterminate")
   }, platform === Platform.VKCOM ? /*#__PURE__*/React.createElement(Icon20CheckBoxIndetermanate, {
     width: 20,
     height: 20

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNamesString","Platform","Icon20CheckBoxOn","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","usePlatform","hasReactNode","Footnote","getSizeYClassName","useAdaptivity","useExternRef","useAdaptivityConditionalRender","VisuallyHiddenInput","warnOnce","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","VKCOM","disabled","IOS","compact","regular"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport {\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useAdaptivityConditionalRender } from \"../../hooks/useAdaptivityConditionalRender\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport styles from \"./Checkbox.module.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce(\"Checkbox\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps[\"onChange\"] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]\n  );\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn(\"indeterminate и checked не могут быть true одновременно\", \"error\");\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn(\"defaultChecked и checked не могут быть true одновременно\", \"error\");\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNamesString(\n        styles[\"Checkbox\"],\n        platform === Platform.VKCOM && styles[\"Checkbox--vkcom\"],\n        getSizeYClassName(styles[\"Checkbox\"], sizeY),\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          styles[\"Checkbox--simple\"],\n        className\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles[\"Checkbox__input\"]}\n        getRef={inputRef}\n      />\n      <div\n        className={classNamesString(\n          styles[\"Checkbox__icon\"],\n          styles[\"Checkbox__icon--on\"]\n        )}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNamesString(\n          styles[\"Checkbox__icon\"],\n          styles[\"Checkbox__icon--off\"]\n        )}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNamesString(\n          styles[\"Checkbox__icon\"],\n          styles[\"Checkbox__icon--indeterminate\"]\n        )}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles[\"Checkbox__content\"]}>\n        <div className={styles[\"Checkbox__children\"]}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles[\"Checkbox__description\"]}>\n            {description}\n          </Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","hasReactNode","Platform","Icon20CheckBoxOn","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","usePlatform","Footnote","getSizeYClassName","useAdaptivity","useExternRef","useAdaptivityConditionalRender","VisuallyHiddenInput","warnOnce","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","VKCOM","disabled","IOS","compact","regular"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { type TappableProps, ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport {\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from '@vkontakte/icons';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        getSizeYClassName(styles['Checkbox'], sizeY),\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles['Checkbox__input']}\n        getRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export declare type ChipValue = string | number;
 export interface ChipOption {
     value?: ChipValue;

package/dist/components/Chip/Chip.js

@@ -1,27 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "option", "removable", "onRemove", "removeAriaLabel", "before", "after", "children", "className"];
-import * as React from "react";
-import { Icon16Cancel } from "@vkontakte/icons";
-import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
-import { classNamesString } from "../../lib/classNames";
-import { Footnote } from "../Typography/Footnote/Footnote";
-import { Tappable } from "../Tappable/Tappable";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { Icon16Cancel } from '@vkontakte/icons';
+import { getTitleFromChildren } from '../../lib/utils';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Tappable } from '../Tappable/Tappable';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
 export var Chip = function Chip(_ref) {
   var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? "" : _ref$value,
+    value = _ref$value === void 0 ? '' : _ref$value,
     option = _ref.option,
     _ref$removable = _ref.removable,
     removable = _ref$removable === void 0 ? true : _ref$removable,
     _ref$onRemove = _ref.onRemove,
     onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
     _ref$removeAriaLabel = _ref.removeAriaLabel,
-    removeAriaLabel = _ref$removeAriaLabel === void 0 ? "Удалить" : _ref$removeAriaLabel,
+    removeAriaLabel = _ref$removeAriaLabel === void 0 ? 'Удалить' : _ref$removeAriaLabel,
     _ref$before = _ref.before,
     before = _ref$before === void 0 ? null : _ref$before,
     after = _ref.after,
@@ -35,7 +35,7 @@ export var Chip = function Chip(_ref) {
   }, [onRemove, value]);
   var title = getTitleFromChildren(children);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNamesString("vkuiChip", getSizeYClassName("vkuiChip", sizeY), removable && "vkuiChip--removable", className),
+    className: classNames("vkuiChip", getSizeYClassName("vkuiChip", sizeY), removable && "vkuiChip--removable", className),
     role: "option",
     "aria-label": title
   }, restProps), /*#__PURE__*/React.createElement("div", {
@@ -46,7 +46,7 @@ export var Chip = function Chip(_ref) {
   }, before), /*#__PURE__*/React.createElement(Footnote, {
     className: "vkuiChip__content",
     title: title,
-    "aria-hidden": "true"
+    "aria-hidden": true
   }, children), hasReactNode(after) && /*#__PURE__*/React.createElement("div", {
     className: "vkuiChip__after"
   }, after), removable && /*#__PURE__*/React.createElement(Tappable, {

package/dist/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":["React","Icon16Cancel","getTitleFromChildren","hasReactNode","noop","classNamesString","Footnote","Tappable","useAdaptivity","getSizeYClassName","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Chip.module.css\";\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"Chip\"],\n        getSizeYClassName(styles[\"Chip\"], sizeY),\n        removable && styles[\"Chip--removable\"],\n        className\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles[\"Chip__in\"]} role=\"presentation\">\n        {hasReactNode(before) && (\n          <div className={styles[\"Chip__before\"]}>{before}</div>\n        )}\n        <Footnote\n          className={styles[\"Chip__content\"]}\n          title={title}\n          aria-hidden=\"true\"\n        >\n          {children}\n        </Footnote>\n        {hasReactNode(after) && (\n          <div className={styles[\"Chip__after\"]}>{after}</div>\n        )}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles[\"Chip__remove\"]}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,oBAAoB,EAAEC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AAC1E,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AA2BnE;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGV,IAAI;IAAA,4BACfW,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBZ,aAAa,EAAE;IAAzBa,KAAK,kBAALA,KAAK;EACb,IAAMC,eAAe,GAAGtB,KAAK,CAACuB,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3BV,QAAQ,CAACU,KAAK,EAAEb,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMc,KAAK,GAAGvB,oBAAoB,CAACgB,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAEb,gBAAgB,aAEzBI,iBAAiB,aAAiBY,KAAK,CAAC,EACxCR,SAAS,yBAA6B,EACtCM,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYM;EAAM,GACdL,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpDjB,YAAY,CAACa,MAAM,CAAC,iBACnB;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAChD,eACD,oBAAC,QAAQ;IACP,SAAS,qBAA0B;IACnC,KAAK,EAAES,KAAM;IACb,eAAY;EAAM,GAEjBP,QAAQ,CACA,EACVf,YAAY,CAACc,KAAK,CAAC,iBAClB;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAC9C,EAEAJ,SAAS,iBACR,oBAAC,QAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAES,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeP,eAAe,cAAIU,KAAK;EAAG,gBAE1C,oBAAC,YAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC"}
+{"version":3,"file":"Chip.js","names":["React","Icon16Cancel","getTitleFromChildren","classNames","hasReactNode","noop","Footnote","Tappable","useAdaptivity","getSizeYClassName","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Tappable } from '../Tappable/Tappable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Chip.module.css';\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = '',\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = 'Удалить',\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value],\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNames(\n        styles['Chip'],\n        getSizeYClassName(styles['Chip'], sizeY),\n        removable && styles['Chip--removable'],\n        className,\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles['Chip__in']} role=\"presentation\">\n        {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n        <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles['Chip__remove']}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AAChE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AA2BnE;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGT,IAAI;IAAA,4BACfU,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBZ,aAAa,EAAE;IAAzBa,KAAK,kBAALA,KAAK;EACb,IAAMC,eAAe,GAAGtB,KAAK,CAACuB,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3BV,QAAQ,CAACU,KAAK,EAAEb,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMc,KAAK,GAAGvB,oBAAoB,CAACgB,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAEf,UAAU,aAEnBM,iBAAiB,aAAiBY,KAAK,CAAC,EACxCR,SAAS,yBAA6B,EACtCM,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYM;EAAM,GACdL,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpDhB,YAAY,CAACY,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAAO,eAC/E,oBAAC,QAAQ;IAAC,SAAS,qBAA0B;IAAC,KAAK,EAAES,KAAM;IAAC;EAAW,GACpEP,QAAQ,CACA,EACVd,YAAY,CAACa,KAAK,CAAC,iBAAI;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAAO,EAE3EJ,SAAS,iBACR,oBAAC,QAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAES,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeP,eAAe,cAAIU,KAAK;EAAG,gBAE1C,oBAAC,YAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC"}

package/dist/components/ChipsInput/ChipsInput.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FormFieldProps } from "../FormField/FormField";
-import { ChipOption } from "../Chip/Chip";
-import { ChipsInputBaseProps } from "../ChipsInputBase/ChipsInputBase";
+import { FormFieldProps } from '../FormField/FormField';
+import { ChipOption } from '../Chip/Chip';
+import { ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';
 export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBaseProps<Option>, FormFieldProps {
 }
 /**

package/dist/components/ChipsInput/ChipsInput.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
-import * as React from "react";
-import { FormField } from "../FormField/FormField";
-import { classNamesString } from "../../lib/classNames";
-import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase";
+import * as React from 'react';
+import { FormField } from '../FormField/FormField';
+import { classNames } from '@vkontakte/vkjs';
+import { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */
@@ -17,7 +17,7 @@ export var ChipsInput = function ChipsInput(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(FormField, {
     getRootRef: getRootRef,
-    className: classNamesString("vkuiChipsInput", className),
+    className: classNames("vkuiChipsInput", className),
     style: style,
     disabled: restProps.disabled,
     before: before,

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsInput.js","names":["React","FormField","classNamesString","ChipsInputBase","ChipsInput","style","className","getRootRef","before","after","status","restProps","disabled","readOnly"],"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { ChipOption } from \"../Chip/Chip\";\nimport {\n  ChipsInputBase,\n  ChipsInputBaseProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport styles from \"./ChipsInput.module.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      className={classNamesString(styles[\"ChipsInput\"], 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"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,gBAAgB,QAAQ,sBAAsB;AAEvD,SACEC,cAAc,QAET,kCAAkC;AAOzC;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,SAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAEL,gBAAgB,mBAAuBI,SAAS,CAAE;IAC7D,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACC,QAAS;IAC7B,MAAM,EAAEJ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACC,QAAS;IAClC,iBAAeD,SAAS,CAACE,QAAS;IAClC,MAAM,EAAEH;EAAO,gBAEf,oBAAC,cAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC"}
+{"version":3,"file":"ChipsInput.js","names":["React","FormField","classNames","ChipsInputBase","ChipsInput","style","className","getRootRef","before","after","status","restProps","disabled","readOnly"],"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport styles from './ChipsInput.module.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      className={classNames(styles['ChipsInput'], 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"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,cAAc,QAA6B,kCAAkC;AAOtF;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,SAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAEL,UAAU,mBAAuBI,SAAS,CAAE;IACvD,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACC,QAAS;IAC7B,MAAM,EAAEJ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACC,QAAS;IAClC,iBAAeD,SAAS,CAACE,QAAS;IAClC,MAAM,EAAEH;EAAO,gBAEf,oBAAC,cAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC"}

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

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
-import { ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
-export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign {
+import * as React from 'react';
+import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';
+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;

package/dist/components/ChipsInputBase/ChipsInputBase.js

@@ -5,14 +5,13 @@ 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 { 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 { useExternRef } from "../../hooks/useExternRef";
+import * as React from 'react';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { Chip } from '../Chip/Chip';
+import { useChipsInput } from '../../hooks/useChipsInput';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
 export var chipsInputDefaultProps = {
   onChange: noop,
   onInputChange: noop,
@@ -20,8 +19,8 @@ export var chipsInputDefaultProps = {
   onBlur: noop,
   onFocus: noop,
   value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
+  inputValue: '',
+  inputAriaLabel: 'Введите ваше значение...',
   getOptionValue: function getOptionValue(option) {
     return option.value;
   },
@@ -89,11 +88,11 @@ export var ChipsInputBase = function ChipsInputBase(props) {
       return;
     }
     onKeyDown(e);
-    if (e.key === "Backspace" && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
+    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
       removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
       e.preventDefault();
     }
-    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
+    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {
       addOptionFromInput();
       e.preventDefault();
     }
@@ -128,7 +127,7 @@ export var ChipsInputBase = function ChipsInputBase(props) {
     onClick: handleClick,
     role: "presentation",
     style: style,
-    className: classNamesString("vkuiChipsInputBase", getSizeYClassName("vkuiChipsInputBase", sizeY), className),
+    className: classNames("vkuiChipsInputBase", getSizeYClassName("vkuiChipsInputBase", sizeY), className),
     ref: getRootRef
   }, selectedOptions.map(function (option) {
     var value = getOptionValue(option);

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"ChipsInputBase.js","names":["React","getSizeYClassName","classNames","noop","Chip","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 { classNames, noop } from '@vkontakte/vkjs';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\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<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        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 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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"}

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

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { ChipOption } from "../Chip/Chip";
-import { ChipsInputProps } from "../ChipsInput/ChipsInput";
-import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
-export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsInputProps<Option>, "after"> {
-    popupDirection?: "top" | "bottom";
+import * as React from 'react';
+import { ChipOption } from '../Chip/Chip';
+import { ChipsInputProps } from '../ChipsInput/ChipsInput';
+import { CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
+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);
+    filterFn?: false | ((value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel']) => boolean);
     /**
      * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)
      */

package/dist/components/ChipsSelect/ChipsSelect.js

@@ -4,26 +4,25 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["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", "fixDropdownWidth", "forceDropdownPortal"];
-import * as React from "react";
-import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
-import { classNamesString } from "../../lib/classNames";
-import { ChipsInputBase, chipsInputDefaultProps } from "../ChipsInputBase/ChipsInputBase";
-import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption";
-import { useChipsSelect } from "../../hooks/useChipsSelect";
-import { noop } from "../../lib/utils";
-import { useDOM } from "../../lib/dom";
-import { Footnote } from "../Typography/Footnote/Footnote";
-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";
+import * as React from 'react';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';
+import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
+import { useChipsSelect } from '../../hooks/useChipsSelect';
+import { useDOM } from '../../lib/dom';
+import { Footnote } from '../Typography/Footnote/Footnote';
+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';
 var chipsSelectDefaultProps = _objectSpread(_objectSpread({}, chipsInputDefaultProps), {}, {
-  emptyText: "Ничего не найдено",
-  creatableText: "Создать значение",
+  emptyText: 'Ничего не найдено',
+  creatableText: 'Создать значение',
   onChangeStart: noop,
   creatable: false,
   fetching: false,
@@ -139,7 +138,7 @@ export var ChipsSelect = function ChipsSelect(props) {
     setFocusedOptionIndex(index);
   };
   var focusOption = function focusOption(nextIndex, type) {
-    var index = typeof nextIndex !== "number" ? -1 : nextIndex;
+    var index = typeof nextIndex !== 'number' ? -1 : nextIndex;
     if (type === FOCUS_ACTION_NEXT) {
       index = index + 1;
     } else if (type === FOCUS_ACTION_PREV) {
@@ -151,7 +150,7 @@ export var ChipsSelect = function ChipsSelect(props) {
   };
   var handleKeyDown = function handleKeyDown(e) {
     onKeyDown(e);
-    if (e.key === "ArrowUp" && !e.defaultPrevented) {
+    if (e.key === 'ArrowUp' && !e.defaultPrevented) {
       e.preventDefault();
       if (!opened) {
         setOpened(true);
@@ -160,7 +159,7 @@ export var ChipsSelect = function ChipsSelect(props) {
         focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);
       }
     }
-    if (e.key === "ArrowDown" && !e.defaultPrevented) {
+    if (e.key === 'ArrowDown' && !e.defaultPrevented) {
       e.preventDefault();
       if (!opened) {
         setOpened(true);
@@ -169,7 +168,7 @@ export var ChipsSelect = function ChipsSelect(props) {
         focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);
       }
     }
-    if (e.key === "Enter" && !e.defaultPrevented && opened && focusedOptionIndex != null) {
+    if (e.key === 'Enter' && !e.defaultPrevented && opened && focusedOptionIndex != null) {
       var _option = filteredOptions[focusedOptionIndex];
       if (_option) {
         onChangeStart(e, _option);
@@ -184,7 +183,7 @@ export var ChipsSelect = function ChipsSelect(props) {
         e.preventDefault();
       }
     }
-    if (["Escape", "Tab"].includes(e.key) && !e.defaultPrevented && opened) {
+    if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {
       setOpened(false);
     }
   };
@@ -204,7 +203,7 @@ export var ChipsSelect = function ChipsSelect(props) {
       setFocusedOption(filteredOptions[0]);
     }
   }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, setFocusedOption]);
-  useGlobalEventListener(document, "click", handleClickOutside);
+  useGlobalEventListener(document, 'click', handleClickOutside);
   var renderChipWrapper = function renderChipWrapper(renderChipProps) {
     if (renderChipProps === undefined) {
       return null;
@@ -219,7 +218,7 @@ export var ChipsSelect = function ChipsSelect(props) {
       onRemove: onRemoveWrapper
     }));
   };
-  var isPopperDirectionTop = popperPlacement === null || popperPlacement === void 0 ? void 0 : popperPlacement.includes("top");
+  var isPopperDirectionTop = popperPlacement === null || popperPlacement === void 0 ? void 0 : popperPlacement.includes('top');
   var onPlacementChange = React.useCallback(function (placement) {
     setPopperPlacement(placement);
   }, [setPopperPlacement]);
@@ -237,7 +236,7 @@ export var ChipsSelect = function ChipsSelect(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormField, {
     getRootRef: rootRef,
     style: style,
-    className: classNamesString("vkuiChipsSelect", opened && (isPopperDirectionTop ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down"), className),
+    className: classNames("vkuiChipsSelect", opened && (isPopperDirectionTop ? "vkuiChipsSelect--pop-up" : "vkuiChipsSelect--pop-down"), className),
     disabled: disabled,
     role: "application",
     "aria-disabled": disabled,
@@ -248,7 +247,7 @@ export var ChipsSelect = function ChipsSelect(props) {
       hoverMode: ""
       // TODO: add label customization
       ,
-      "aria-label": opened ? "Скрыть" : "Развернуть",
+      "aria-label": opened ? 'Скрыть' : 'Развернуть',
       onClick: toggleOpened
     }, /*#__PURE__*/React.createElement(DropdownIcon, {
       className: "vkuiChipsSelect__icon",