@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -27,10 +27,9 @@ var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _Text = require("../Typography/Text/Text");
 var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
-var _obj;
-var sizeYClassNames = (_obj = {
+var sizeYClassNames = _define_property._({
     none: "vkuiCheckbox--sizeY-none"
-}, _define_property._(_obj, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _define_property._(_obj, _adaptivity.SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _obj);
+}, _adaptivity.SizeType.COMPACT, "vkuiCheckbox--sizeY-compact");
 var warn = (0, _warnOnce.warnOnce)("Checkbox");
 var Checkbox = function(_param) {
     var children = _param.children, className = _param.className, style = _param.style, getRootRef = _param.getRootRef, getRef = _param.getRef, description = _param.description, indeterminate = _param.indeterminate, defaultIndeterminate = _param.defaultIndeterminate, hoverMode = _param.hoverMode, activeMode = _param.activeMode, hasHover = _param.hasHover, hasActive = _param.hasActive, focusVisibleMode = _param.focusVisibleMode, onChange = _param.onChange, titleAfter = _param.titleAfter, restProps = _object_without_properties._(_param, [
@@ -92,7 +91,7 @@ var Checkbox = function(_param) {
     }
     return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, {
         Component: "label",
-        className: (0, _vkjs.classNames)("vkuiCheckbox", platform === _platform.Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
+        className: (0, _vkjs.classNames)("vkuiCheckbox", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], !((0, _vkjs.hasReactNode)(children) || (0, _vkjs.hasReactNode)(description)) && "vkuiCheckbox--simple", className),
         style: style,
         disabled: restProps.disabled,
         activeEffectDelay: platform === _platform.Platform.IOS ? 100 : _Tappable.ACTIVE_EFFECT_DELAY,
@@ -137,7 +136,9 @@ var Checkbox = function(_param) {
         className: "vkuiCheckbox__content"
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__title"
-    }, /*#__PURE__*/ _react.createElement(_Text.Text, null, children), /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_Text.Text, {
+        className: "vkuiCheckbox__titleBefore"
+    }, children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__titleAfter"
     }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiCheckbox__description"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\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  titleAfter?: React.ReactNode;\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  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = 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        sizeYClassNames[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      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={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__title']}>\n          <Text>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","Platform","VKCOM","hasReactNode","disabled","activeEffectDelay","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n};\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  titleAfter?: React.ReactNode;\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  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = 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        sizeY !== SizeType.REGULAR && sizeYClassNames[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      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={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__title']}>\n          <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","REGULAR","hasReactNode","disabled","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","VKCOM","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 export type ChipValue = string | number;
 export interface ChipOption {
     value?: ChipValue;
     label?: string;
     [otherProp: string]: any;
 }
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ChipProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     value: ChipValue;
     option?: ChipOption;
     onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;
@@ -22,4 +23,4 @@ export interface RenderChip<T extends ChipOption> extends ChipProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
-export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, className, ...restProps }: ChipProps) => React.JSX.Element;
+export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, ...restProps }: ChipProps) => React.JSX.Element;

package/dist/cjs/components/Chip/Chip.js

@@ -18,13 +18,13 @@ var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _adaptivity = require("../../lib/adaptivity");
 var _utils = require("../../lib/utils");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Tappable = require("../Tappable/Tappable");
-var _Footnote = require("../Typography/Footnote/Footnote");
 var sizeYClassNames = _define_property._({
     none: "vkuiChip--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiChip--sizeY-compact");
 var Chip = function(_param) {
-    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, option = _param.option, _param_removable = _param.removable, removable = _param_removable === void 0 ? true : _param_removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removeAriaLabel = _param.removeAriaLabel, removeAriaLabel = _param_removeAriaLabel === void 0 ? "Удалить" : _param_removeAriaLabel, _param_before = _param.before, before = _param_before === void 0 ? null : _param_before, after = _param.after, children = _param.children, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_value = _param.value, value = _param_value === void 0 ? "" : _param_value, option = _param.option, _param_removable = _param.removable, removable = _param_removable === void 0 ? true : _param_removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removeAriaLabel = _param.removeAriaLabel, removeAriaLabel = _param_removeAriaLabel === void 0 ? "Удалить" : _param_removeAriaLabel, _param_before = _param.before, before = _param_before === void 0 ? null : _param_before, after = _param.after, children = _param.children, restProps = _object_without_properties._(_param, [
         "value",
         "option",
         "removable",
@@ -32,8 +32,7 @@ var Chip = function(_param) {
         "removeAriaLabel",
         "before",
         "after",
-        "children",
-        "className"
+        "children"
     ]);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var onRemoveWrapper = _react.useCallback(function(event) {
@@ -43,8 +42,8 @@ var Chip = function(_param) {
         value
     ]);
     var title = (0, _utils.getTitleFromChildren)(children);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiChip", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], removable && "vkuiChip--removable", className),
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiChip", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], removable && "vkuiChip--removable"),
         role: "option",
         "aria-label": title
     }, restProps), /*#__PURE__*/ _react.createElement("div", {
@@ -52,7 +51,7 @@ var Chip = function(_param) {
         role: "presentation"
     }, (0, _vkjs.hasReactNode)(before) && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiChip__before"
-    }, before), /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
+    }, before), /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiChip__content",
         title: title,
         "aria-hidden": true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Chip--sizeY-none'],\n  [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\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 = 'none' } = 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        sizeY !== SizeType.REGULAR && sizeYClassNames[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"],"names":["Chip","sizeYClassNames","none","SizeType","COMPACT","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","className","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","div","classNames","REGULAR","role","aria-label","hasReactNode","Footnote","aria-hidden","Tappable","Component","onClick","hasHover","hasActive","Icon16Cancel"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;+DA1CU;qBACM;oBACkB;6BACjB;0BACL;qBACY;wBACZ;wBACA;AAGzB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA8BZ,IAAMJ,OAAO;8BAClBK,OAAAA,kCAAQ,mBACRC,gBAAAA,kCACAC,WAAAA,0CAAY,kDACZC,UAAAA,wCAAWC,UAAI,oDACfC,iBAAAA,sDAAkB,2DAClBC,QAAAA,oCAAS,sBACTC,eAAAA,OACAC,kBAAAA,UACAC,mBAAAA,WACGC;QATHV;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,kBAAkBC,OAAMC,WAAW,CACvC,SAACC;QACCb,SAASa,OAAOhB;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,IAAMiB,QAAQC,IAAAA,2BAAoB,EAACV;IAEnC,qBACE,qBAACW;QACCV,WAAWW,IAAAA,gBAAU,cAEnBR,UAAUd,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDV,oCACAO;QAEFa,MAAK;QACLC,cAAYN;OACRP,0BAEJ,qBAACS;QAAIV,SAAS;QAAsBa,MAAK;OACtCE,IAAAA,kBAAY,EAAClB,yBAAW,qBAACa;QAAIV,SAAS;OAA2BH,uBAClE,qBAACmB,kBAAQ;QAAChB,SAAS;QAA2BQ,OAAOA;QAAOS,eAAAA;OACzDlB,WAEFgB,IAAAA,kBAAY,EAACjB,wBAAU,qBAACY;QAAIV,SAAS;OAA0BF,QAE/DL,2BACC,qBAACyB,kBAAQ;QACPC,WAAU;QACVnB,SAAS;QACToB,SAAShB;QACTiB,UAAU;QACVC,WAAW;QACXR,cAAY,AAAC,GAAqBN,OAAnBZ,iBAAgB,KAAS,OAANY;qBAElC,qBAACe,mBAAY;AAMzB"}
+{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Chip--sizeY-none'],\n  [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\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 HTMLAttributesWithRootRef<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  ...restProps\n}: ChipProps) => {\n  const { sizeY = 'none' } = 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    <RootComponent\n      baseClassName={classNames(\n        styles['Chip'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        removable && styles['Chip--removable'],\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        <span className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </span>\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    </RootComponent>\n  );\n};\n"],"names":["Chip","sizeYClassNames","none","SizeType","COMPACT","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","RootComponent","baseClassName","classNames","REGULAR","role","aria-label","div","className","hasReactNode","span","aria-hidden","Tappable","Component","onClick","hasHover","hasActive","Icon16Cancel"],"mappings":";;;;+BA2CaA;;;eAAAA;;;;;;;+DA3CU;qBACM;oBACkB;6BACjB;0BACL;qBACY;6BAEP;wBACL;AAGzB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA8BZ,IAAMJ,OAAO;8BAClBK,OAAAA,kCAAQ,mBACRC,gBAAAA,kCACAC,WAAAA,0CAAY,kDACZC,UAAAA,wCAAWC,UAAI,oDACfC,iBAAAA,sDAAkB,2DAClBC,QAAAA,oCAAS,sBACTC,eAAAA,OACAC,kBAAAA,UACGC;QARHT;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,kBAAkBC,OAAMC,WAAW,CACvC,SAACC;QACCZ,SAASY,OAAOf;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,IAAMgB,QAAQC,IAAAA,2BAAoB,EAACT;IAEnC,qBACE,qBAACU,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,cAEvBT,UAAUb,oBAAQ,CAACuB,OAAO,IAAIzB,eAAe,CAACe,MAAM,EACpDT;QAEFoB,MAAK;QACLC,cAAYP;OACRP,0BAEJ,qBAACe;QAAIC,SAAS;QAAsBH,MAAK;OACtCI,IAAAA,kBAAY,EAACpB,yBAAW,qBAACkB;QAAIC,SAAS;OAA2BnB,uBAClE,qBAACqB;QAAKF,SAAS;QAA2BT,OAAOA;QAAOY,eAAAA;OACrDpB,WAEFkB,IAAAA,kBAAY,EAACnB,wBAAU,qBAACiB;QAAIC,SAAS;OAA0BlB,QAE/DL,2BACC,qBAAC2B,kBAAQ;QACPC,WAAU;QACVL,SAAS;QACTM,SAASnB;QACToB,UAAU;QACVC,WAAW;QACXV,cAAY,AAAC,GAAqBP,OAAnBX,iBAAgB,KAAS,OAANW;qBAElC,qBAACkB,mBAAY;AAMzB"}

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

@@ -29,6 +29,7 @@ var _useChipsInput = require("../../hooks/useChipsInput");
 var _useExternRef = require("../../hooks/useExternRef");
 var _adaptivity = require("../../lib/adaptivity");
 var _Chip = require("../Chip/Chip");
+var _Text = require("../Typography/Text/Text");
 var chipsInputDefaultProps = {
     onChange: _vkjs.noop,
     onInputChange: _vkjs.noop,
@@ -161,7 +162,8 @@ var ChipsInputBase = function(props) {
     }), /*#__PURE__*/ _react.createElement("label", {
         className: "vkuiChipsInputBase__label",
         "aria-label": inputAriaLabel
-    }, /*#__PURE__*/ _react.createElement("input", _object_spread_props._(_object_spread._({
+    }, /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread_props._(_object_spread._({
+        Component: "input",
         type: "text",
         autoCapitalize: "none",
         autoComplete: "off",
@@ -170,7 +172,7 @@ var ChipsInputBase = function(props) {
         "aria-autocomplete": "list",
         className: "vkuiChipsInputBase__el"
     }, restProps), {
-        ref: inputRef,
+        getRootRef: inputRef,
         value: fieldValue,
         onChange: handleInputChange,
         onKeyDown: handleKeyDown,

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

@@ -1 +1 @@
-{"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   * Добавляет значение в список на событие `onBlur`\n   */\n  addOnBlur?: boolean;\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  addOnBlur: false,\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    addOnBlur,\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    if (addOnBlur && !e.defaultPrevented) {\n      addOptionFromInput();\n    }\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          className={styles['ChipsInputBase__el']}\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["chipsInputDefaultProps","ChipsInputBase","onChange","noop","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","Chip","removable","addOnBlur","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useAdaptivity","React","useState","focused","setFocused","useChipsInput","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","useExternRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","classNames","SizeType","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":";;;;;;;;;;;IA8BaA,sBAAsB;eAAtBA;;IA8BAC,cAAc;eAAdA;;;;;;;;;+DA5DU;oBACU;6BACH;6BACA;4BACD;0BACJ;oBAE+B;AAuBjD,IAAMD,yBAAmD;IAC9DE,UAAUC,UAAI;IACdC,eAAeD,UAAI;IACnBE,WAAWF,UAAI;IACfG,QAAQH,UAAI;IACZI,SAASJ,UAAI;IACbK,OAAO,EAAE;IACTC,YAAY;IACZC,gBAAgB;IAChBC,gBAAgB,SAACC;eAAWA,OAAOJ,KAAK;;IACxCK,gBAAgB,SAACD;eAAWA,OAAOE,KAAK;;IACxCC,kBAAkB,SAACC,GAAGF;eAAW;YAC/BN,OAAOM;YACPA,OAAAA;QACF;;IACAG,YAAAA,SAAAA,WAAWC,KAAK;QACd,IAAI,CAACA,OAAO;YACV,OAAO;QACT;QAEA,IAAQC,WAAoCD,MAApCC,UAAUX,QAA0BU,MAA1BV,OAAOM,QAAmBI,MAAnBJ,OAAUM,oCAASF;YAApCC;YAAUX;YAAOM;;QACzB,qBACE,qBAACO,UAAI;YAACb,OAAOA;YAAOc,WAAW,CAACH;WAAcC,OAC3CN;IAGP;IACAS,WAAW;AACb;AAEO,IAAMtB,iBAAiB,SAA4BiB;IACxD,IAAMM,mBAAmB,qBAAKxB,wBAA2BkB;IACzD,IACEO,QAoBED,iBApBFC,OACAC,YAmBEF,iBAnBFE,WACAC,aAkBEH,iBAlBFG,YACAnB,QAiBEgB,iBAjBFhB,OACAN,WAgBEsB,iBAhBFtB,UACAE,gBAeEoB,iBAfFpB,eACAC,YAcEmB,iBAdFnB,WACAC,SAaEkB,iBAbFlB,QACAC,UAYEiB,iBAZFjB,SACAqB,WAWEJ,iBAXFI,UACAnB,aAUEe,iBAVFf,YACAoB,SASEL,iBATFK,QACAC,cAQEN,iBARFM,aACAnB,iBAOEa,iBAPFb,gBACAE,iBAMEW,iBANFX,gBACAE,mBAKES,iBALFT,kBACAE,aAIEO,iBAJFP,YACAP,iBAGEc,iBAHFd,gBACAa,YAEEC,iBAFFD,WACGQ,yCACDP;QApBFC;QACAC;QACAC;QACAnB;QACAN;QACAE;QACAC;QACAC;QACAC;QACAqB;QACAnB;QACAoB;QACAC;QACAnB;QACAE;QACAE;QACAE;QACAP;QACAa;;IAGF,IAAM,AAAES,QAAUC,IAAAA,4BAAa,IAAvBD;IAER,IAA8BE,qCAAAA,OAAMC,QAAQ,CAAC,YAAtCC,UAAuBF,oBAAdG,aAAcH;IAC9B,IACEI,kBAAAA,IAAAA,4BAAa,EAACd,mBADRe,aACND,gBADMC,YAAYC,qBAClBF,gBADkBE,oBAAoBC,eACtCH,gBADsCG,cAAcC,kBACpDJ,gBADoDI,iBAAiBC,oBACrEL,gBADqEK;IAEvE,IAAMC,WAAWC,IAAAA,0BAAY,EAAChB;IAE9B,IAAMiB,aAAaf,UAAUZ,QAAQ,IAAIY,UAAUgB,QAAQ;IAE3D,IAAMC,gBAAgB,SAACC;QACrB,IAAIH,YAAY;YACdG,EAAEC,cAAc;YAChB;QACF;QAEA7C,UAAW4C;QAEX,IAAIA,EAAEE,GAAG,KAAK,eAAe,CAACF,EAAEG,gBAAgB,IAAI,CAACb,cAAcG,gBAAgBW,MAAM,EAAE;YACzFZ,aAAa9B,eAAgB+B,eAAe,CAACA,gBAAgBW,MAAM,GAAG,EAAE;YACxEJ,EAAEC,cAAc;QAClB;QAEA,IAAID,EAAEE,GAAG,KAAK,WAAW,CAACF,EAAEG,gBAAgB,IAAIb,YAAY;YAC1DC;YACAS,EAAEC,cAAc;QAClB;IACF;IAEA,IAAMI,aAAa,SAACL;QAClB,IAAIb,SAAS;YACXC,WAAW;QACb;QACA/B,OAAQ2C;QAER,IAAI1B,aAAa,CAAC0B,EAAEG,gBAAgB,EAAE;YACpCZ;QACF;IACF;IAEA,IAAMe,cAAc,SAACN;QACnB,IAAI,CAACb,SAAS;YACZC,WAAW;QACb;QACA9B,QAAS0C;IACX;IAEA,IAAMO,mBAAmB,SAACxC,GAAiCR;QACzD,IAAIA,UAAUiD,WAAW;YACvBhB,aAAajC;QACf;IACF;IAEA,IAAMkD,cAAc,SAACT;YAMfL;QALJ,IAAIE,YAAY;YACdG,EAAEC,cAAc;YAChB;QACF;QAEA,IAAIN,EAAAA,YAAAA,sBAAAA,gCAAAA,UAAUe,OAAO,MAAK,QAAQ,CAACvB,SAAS;YAC1CQ,SAASe,OAAO,CAACC,KAAK;QACxB;IACF;IAEA,qBACE,qBAACC;QACCC,SAASJ;QACTK,MAAK;QACLtC,OAAOA;QACPC,WAAWsC,IAAAA,gBAAU,wBAEnBhC,UAAUiC,oBAAQ,CAACC,OAAO,yCAC1B,CAACxB,gBAAgBW,MAAM,0CACvB3B;QAEFyC,KAAKxC;OAEJe,gBAAgB0B,GAAG,CAAC,SAACxD;QACpB,IAAMJ,QAAQG,eAAgBC;QAC9B,IAAME,QAAQD,eAAgBD;QAE9B,qBACE,qBAACsB,OAAMmC,QAAQ;YAAClB,KAAK,AAAC,GAAkB3C,OAAhB,OAAOA,sCAAP,UAAY,CAALA,QAAM,KAAS,OAANA;WACrCS,WAAY;YACXL,QAAAA;YACAJ,OAAAA;YACAM,OAAAA;YACAwD,UAAUd;YACVrC,UAAUoD,QAAQxC,UAAUZ,QAAQ;YACpCO,SAAS;QACX;IAGN,kBACA,qBAACZ;QAAMY,SAAS;QAAmC8C,cAAY9D;qBAC7D,qBAAC+D;QACCC,MAAK;QACLC,gBAAe;QACfC,cAAa;QACbC,aAAY;QACZC,YAAY;QACZC,qBAAkB;QAClBrD,SAAS;OACLK;QACJoC,KAAKvB;QACLpC,OAAO+B;QACPrC,UAAUyC;QACVtC,WAAW2C;QACXzC,SAASgD;QACTjD,QAAQgD;QACRxB,aAAaY,gBAAgBW,MAAM,GAAGI,YAAY3B;;AAK5D"}
+{"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 { Text } from '../Typography/Text/Text';\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   * Добавляет значение в список на событие `onBlur`\n   */\n  addOnBlur?: boolean;\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  addOnBlur: false,\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    addOnBlur,\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    if (addOnBlur && !e.defaultPrevented) {\n      addOptionFromInput();\n    }\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        <Text\n          Component=\"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          getRootRef={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["chipsInputDefaultProps","ChipsInputBase","onChange","noop","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","Chip","removable","addOnBlur","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useAdaptivity","React","useState","focused","setFocused","useChipsInput","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","useExternRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","classNames","SizeType","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","Text","Component","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}

package/dist/cjs/components/ChipsSelect/ChipsSelect.js

@@ -98,8 +98,10 @@ var ChipsSelect = function(props) {
         }
     };
     var handleClickOutside = function(e) {
-        var _rootRef_current;
-        if (e.target !== rootRef.current && !((_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.contains(e.target))) {
+        var _rootRef_current, _scrollBoxRef_current;
+        var isClickOutsideFormField = !((_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.contains(e.target));
+        var isClickOutsideDropdown = !((_scrollBoxRef_current = scrollBoxRef.current) === null || _scrollBoxRef_current === void 0 ? void 0 : _scrollBoxRef_current.contains(e.target));
+        if (isClickOutsideFormField && isClickOutsideDropdown) {
             setOpened(false);
         }
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, 'after'> {\n  popupDirection?: 'top' | 'bottom';\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n   */\n  addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' | 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: 'Ничего не найдено',\n  creatableText: 'Создать значение',\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption(props) {\n    return <CustomSelectOption {...props} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    icon,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue,\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(null);\n    onFocus!(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    onBlur!(e);\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!e.defaultPrevented && !creatable) {\n      e.preventDefault();\n    }\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (e.target !== rootRef.current && !rootRef.current?.contains(e.target as Node)) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = nextIndex === null ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n      if (focusedOptionIndex != null) {\n        const option = filteredOptions[focusedOptionIndex];\n\n        if (option) {\n          onChangeStart!(e, option);\n\n          if (!e.defaultPrevented) {\n            addOption(option);\n            setFocusedOptionIndex(null);\n            clearInput();\n            closeAfterSelect && setOpened(false);\n            e.preventDefault();\n          }\n        } else if (!creatable) {\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  useGlobalEventListener(document, 'click', handleClickOutside);\n\n  const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (e: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes('top');\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement],\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <>\n      <FormField\n        getRootRef={rootRef}\n        style={style}\n        className={classNames(\n          styles['ChipsSelect'],\n          opened &&\n            (isPopperDirectionTop\n              ? styles['ChipsSelect--pop-up']\n              : styles['ChipsSelect--pop-down']),\n          className,\n        )}\n        disabled={disabled}\n        role=\"application\"\n        aria-disabled={disabled}\n        aria-readonly={restProps.readOnly}\n        after={\n          <IconButton\n            className={styles['ChipsSelect__dropdown']}\n            activeMode=\"\"\n            hoverMode=\"\"\n            // TODO [>=6]: add label customization\n            aria-label={opened ? 'Скрыть' : 'Развернуть'}\n            onClick={toggleOpened}\n          >\n            {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n          </IconButton>\n        }\n        before={before}\n      >\n        <ChipsInputBase\n          {...restProps}\n          tabIndex={tabIndex}\n          value={selectedOptions}\n          inputValue={fieldValue}\n          getNewOptionData={getNewOptionData}\n          getOptionLabel={getOptionLabel}\n          getOptionValue={getOptionValue}\n          renderChip={renderChipWrapper}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          getRef={getRef}\n          disabled={disabled}\n          onInputChange={handleInputChange}\n        />\n      </FormField>\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find((selectedOption: Option) => {\n                return getOptionValue!(selectedOption) === getOptionValue!(option);\n              });\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["ChipsSelect","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","CustomSelectOption","popperPlacement","filteredOptions","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useDOM","React","useState","undefined","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","FormField","classNames","role","aria-disabled","aria-readonly","readOnly","after","IconButton","activeMode","hoverMode","aria-label","onClick","DropdownIcon","ChipsInputBase","onInputChange","CustomSelectDropdown","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","Footnote","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, 'after'> {\n  popupDirection?: 'top' | 'bottom';\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n   */\n  addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' | 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: 'Ничего не найдено',\n  creatableText: 'Создать значение',\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption(props) {\n    return <CustomSelectOption {...props} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    icon,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue,\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(null);\n    onFocus!(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    onBlur!(e);\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!e.defaultPrevented && !creatable) {\n      e.preventDefault();\n    }\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    const isClickOutsideFormField = !rootRef.current?.contains(e.target as Node);\n    const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target as Node);\n\n    if (isClickOutsideFormField && isClickOutsideDropdown) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = nextIndex === null ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n      if (focusedOptionIndex != null) {\n        const option = filteredOptions[focusedOptionIndex];\n\n        if (option) {\n          onChangeStart!(e, option);\n\n          if (!e.defaultPrevented) {\n            addOption(option);\n            setFocusedOptionIndex(null);\n            clearInput();\n            closeAfterSelect && setOpened(false);\n            e.preventDefault();\n          }\n        } else if (!creatable) {\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  useGlobalEventListener(document, 'click', handleClickOutside);\n\n  const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (e: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes('top');\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement],\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <>\n      <FormField\n        getRootRef={rootRef}\n        style={style}\n        className={classNames(\n          styles['ChipsSelect'],\n          opened &&\n            (isPopperDirectionTop\n              ? styles['ChipsSelect--pop-up']\n              : styles['ChipsSelect--pop-down']),\n          className,\n        )}\n        disabled={disabled}\n        role=\"application\"\n        aria-disabled={disabled}\n        aria-readonly={restProps.readOnly}\n        after={\n          <IconButton\n            className={styles['ChipsSelect__dropdown']}\n            activeMode=\"\"\n            hoverMode=\"\"\n            // TODO [>=6]: add label customization\n            aria-label={opened ? 'Скрыть' : 'Развернуть'}\n            onClick={toggleOpened}\n          >\n            {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n          </IconButton>\n        }\n        before={before}\n      >\n        <ChipsInputBase\n          {...restProps}\n          tabIndex={tabIndex}\n          value={selectedOptions}\n          inputValue={fieldValue}\n          getNewOptionData={getNewOptionData}\n          getOptionLabel={getOptionLabel}\n          getOptionValue={getOptionValue}\n          renderChip={renderChipWrapper}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          getRef={getRef}\n          disabled={disabled}\n          onInputChange={handleInputChange}\n        />\n      </FormField>\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find((selectedOption: Option) => {\n                return getOptionValue!(selectedOption) === getOptionValue!(option);\n              });\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["ChipsSelect","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","CustomSelectOption","popperPlacement","filteredOptions","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useDOM","React","useState","undefined","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","isClickOutsideFormField","current","contains","target","isClickOutsideDropdown","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","FormField","classNames","role","aria-disabled","aria-readonly","readOnly","after","IconButton","activeMode","hoverMode","aria-label","onClick","DropdownIcon","ChipsInputBase","onInputChange","CustomSelectDropdown","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","Footnote","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}

package/dist/cjs/components/ConfigProvider/ConfigProvider.js

@@ -18,6 +18,7 @@ var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _dom = require("../../lib/dom");
 var _tokensClassProvider = require("../../lib/tokensClassProvider");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _utils = require("../../lib/utils");
 var _warnOnce = require("../../lib/warnOnce");
 var _ConfigProviderContext = require("./ConfigProviderContext");
 var warn = (0, _warnOnce.warnOnce)("ConfigProvider");
@@ -37,13 +38,15 @@ var ConfigProvider = function(props) {
     // TODO [>=6]: удалить использование хука
     var appearance = (0, _useAutoDetectAppearance.useAutoDetectAppearance)(appearanceProp, onDetectAppearanceByBridge);
     var document = (0, _dom.useDOM)().document;
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+    // TODO [>=6]: переместить хук в AppRoot (см. https://github.com/VKCOM/VKUI/issues/4810).
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function attachVKUITokensClassNameToBody() {
+        if (!document) {
+            return;
+        }
         var VKUITokensClassName = (0, _generateVKUITokensClassName.generateVKUITokensClassName)(platform, appearance);
-        // eslint-disable-next-line no-restricted-properties
-        document.body.classList.add(VKUITokensClassName);
+        (0, _utils.addClassNameToElement)(document.body, VKUITokensClassName);
         return function() {
-            // eslint-disable-next-line no-restricted-properties
-            document.body.classList.remove(VKUITokensClassName);
+            (0, _utils.removeClassNameFromElement)(document.body, VKUITokensClassName);
         };
     }, [
         platform,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useDOM } from '../../lib/dom';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n  WebviewType,\n} from './ConfigProviderContext';\n\nconst warn = warnOnce('ConfigProvider');\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  /**\n   * > ⚠️ В **v6** метод будет удалён (см. https://github.com/VKCOM/VKUI/issues/5049).\n   * > Используйте хук `useAppearance()` из библиотеки `@vkontakte/vk-bridge-react`, если вам нужно\n   * > определять, что `appearance` был передан через VK Bridge.\n   *\n   * @deprecated v5.8.0\n   */\n  onDetectAppearanceByBridge?: () => void; // TODO [>=6]: удалить\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n  const parentConfig = useConfigProvider();\n\n  const {\n    children,\n    webviewType,\n    hasCustomPanelHeaderAfter: hasCustomPanelHeaderAfterMerged,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance: appearanceProp,\n    onDetectAppearanceByBridge = noop,\n  } = {\n    ...parentConfig,\n    ...props,\n  };\n\n  // TODO [>=6]: Удалить данный бэкпорт\n  const hasCustomPanelHeaderAfter =\n    props.webviewType && props.hasCustomPanelHeaderAfter === undefined\n      ? props.webviewType === WebviewType.VKAPPS\n      : hasCustomPanelHeaderAfterMerged;\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    // TODO [>=6]: удалить warn\n    let webviewTypeRule = '';\n    if (props.webviewType) {\n      webviewTypeRule =\n        props.webviewType === WebviewType.INTERNAL\n          ? '3. замените webviewType={WebviewType.INTERNAL} на hasCustomPanelHeaderAfterProp={false}'\n          : '3. замените webviewType={WebviewType.VKAPPS} на hasCustomPanelHeaderAfterProp={true}';\n    }\n    warn(`[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то:\n\n1. используйте хук useAppearance() из @vkontakte/vk-bridge-react и результат передайте в параметр appearance;\n2. передайте bridge.isWebView() в параметр isWebView;\n${webviewTypeRule}\n\nПодробности см. https://github.com/VKCOM/VKUI/issues/5049\n`);\n  }\n\n  // TODO [>=6]: удалить использование хука\n  const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);\n\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);\n\n    // eslint-disable-next-line no-restricted-properties\n    document!.body.classList.add(VKUITokensClassName);\n\n    return () => {\n      // eslint-disable-next-line no-restricted-properties\n      document!.body.classList.remove(VKUITokensClassName);\n    };\n  }, [platform, appearance]);\n\n  const configContext = useObjectMemo({\n    webviewType,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["ConfigProvider","warn","warnOnce","props","parentConfig","useConfigProvider","children","webviewType","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterMerged","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","noop","undefined","WebviewType","VKAPPS","process","env","NODE_ENVIRONMENT","webviewTypeRule","INTERNAL","useAutoDetectAppearance","document","useDOM","useIsomorphicLayoutEffect","VKUITokensClassName","generateVKUITokensClassName","body","classList","add","remove","configContext","useObjectMemo","ConfigProviderContext","Provider","value","TokensClassProvider"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;+DAjCU;oBACF;2CACuB;uCACJ;6BACV;mBACP;mCACa;yCACM;wBACjB;qCAMlB;AAEP,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAiBf,IAAMF,iBAAiB,SAACG;IAC7B,IAAMC,eAAeC,IAAAA,wCAAiB;IAEtC,IAWI,mBAAA,qBACCD,cACAD,QAZHG,WAUE,iBAVFA,UACAC,cASE,iBATFA,aACAC,AAA2BC,kCAQzB,iBARFD,2BACAE,iCAOE,iBAPFA,gCACAC,YAME,iBANFA,WACAC,0BAKE,iBALFA,yBACAC,WAIE,iBAJFA,UACAC,SAGE,iBAHFA,QACAC,AAAYC,iBAEV,iBAFFD,wDAEE,iBADFE,4BAAAA,oFAA6BC,UAAI;IAMnC,qCAAqC;IACrC,IAAMV,4BACJL,MAAMI,WAAW,IAAIJ,MAAMK,yBAAyB,KAAKW,YACrDhB,MAAMI,WAAW,KAAKa,kCAAW,CAACC,MAAM,GACxCZ;IAEN,IAAIa,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,2BAA2B;QAC3B,IAAIC,kBAAkB;QACtB,IAAItB,MAAMI,WAAW,EAAE;YACrBkB,kBACEtB,MAAMI,WAAW,KAAKa,kCAAW,CAACM,QAAQ,GACtC,4FACA;QACR;QACAzB,KAAK,AAAC,mPAIQ,OAAhBwB,iBAAgB;IAIhB;IAEA,yCAAyC;IACzC,IAAMV,aAAaY,IAAAA,gDAAuB,EAACX,gBAAgBC;IAE3D,IAAM,AAAEW,WAAaC,IAAAA,WAAM,IAAnBD;IAERE,IAAAA,oDAAyB,EAAC;QACxB,IAAMC,sBAAsBC,IAAAA,wDAA2B,EAACnB,UAAUE;QAElE,oDAAoD;QACpDa,SAAUK,IAAI,CAACC,SAAS,CAACC,GAAG,CAACJ;QAE7B,OAAO;YACL,oDAAoD;YACpDH,SAAUK,IAAI,CAACC,SAAS,CAACE,MAAM,CAACL;QAClC;IACF,GAAG;QAAClB;QAAUE;KAAW;IAEzB,IAAMsB,gBAAgBC,IAAAA,4BAAa,EAAC;QAClC/B,aAAAA;QACAC,2BAAAA;QACAE,gCAAAA;QACAC,WAAAA;QACAC,yBAAAA;QACAC,UAAAA;QACAC,QAAAA;QACAC,YAAAA;IACF;IAEA,qBACE,qBAACwB,4CAAqB,CAACC,QAAQ;QAACC,OAAOJ;qBACrC,qBAACK,wCAAmB;QAAC7B,UAAUA;QAAUE,YAAYA;OAClDT;AAIT"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useDOM } from '../../lib/dom';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { addClassNameToElement, removeClassNameFromElement } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n  WebviewType,\n} from './ConfigProviderContext';\n\nconst warn = warnOnce('ConfigProvider');\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  /**\n   * > ⚠️ В **v6** метод будет удалён (см. https://github.com/VKCOM/VKUI/issues/5049).\n   * > Используйте хук `useAppearance()` из библиотеки `@vkontakte/vk-bridge-react`, если вам нужно\n   * > определять, что `appearance` был передан через VK Bridge.\n   *\n   * @deprecated v5.8.0\n   */\n  onDetectAppearanceByBridge?: () => void; // TODO [>=6]: удалить\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n  const parentConfig = useConfigProvider();\n\n  const {\n    children,\n    webviewType,\n    hasCustomPanelHeaderAfter: hasCustomPanelHeaderAfterMerged,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance: appearanceProp,\n    onDetectAppearanceByBridge = noop,\n  } = {\n    ...parentConfig,\n    ...props,\n  };\n\n  // TODO [>=6]: Удалить данный бэкпорт\n  const hasCustomPanelHeaderAfter =\n    props.webviewType && props.hasCustomPanelHeaderAfter === undefined\n      ? props.webviewType === WebviewType.VKAPPS\n      : hasCustomPanelHeaderAfterMerged;\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    // TODO [>=6]: удалить warn\n    let webviewTypeRule = '';\n    if (props.webviewType) {\n      webviewTypeRule =\n        props.webviewType === WebviewType.INTERNAL\n          ? '3. замените webviewType={WebviewType.INTERNAL} на hasCustomPanelHeaderAfterProp={false}'\n          : '3. замените webviewType={WebviewType.VKAPPS} на hasCustomPanelHeaderAfterProp={true}';\n    }\n    warn(`[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то:\n\n1. используйте хук useAppearance() из @vkontakte/vk-bridge-react и результат передайте в параметр appearance;\n2. передайте bridge.isWebView() в параметр isWebView;\n${webviewTypeRule}\n\nПодробности см. https://github.com/VKCOM/VKUI/issues/5049\n`);\n  }\n\n  // TODO [>=6]: удалить использование хука\n  const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);\n\n  const { document } = useDOM();\n\n  // TODO [>=6]: переместить хук в AppRoot (см. https://github.com/VKCOM/VKUI/issues/4810).\n  useIsomorphicLayoutEffect(\n    function attachVKUITokensClassNameToBody() {\n      if (!document) {\n        return;\n      }\n\n      const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);\n\n      addClassNameToElement(document.body, VKUITokensClassName);\n      return () => {\n        removeClassNameFromElement(document.body, VKUITokensClassName);\n      };\n    },\n    [platform, appearance],\n  );\n\n  const configContext = useObjectMemo({\n    webviewType,\n    hasCustomPanelHeaderAfter,\n    customPanelHeaderAfterMinWidth,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["ConfigProvider","warn","warnOnce","props","parentConfig","useConfigProvider","children","webviewType","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterMerged","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","noop","undefined","WebviewType","VKAPPS","process","env","NODE_ENVIRONMENT","webviewTypeRule","INTERNAL","useAutoDetectAppearance","document","useDOM","useIsomorphicLayoutEffect","attachVKUITokensClassNameToBody","VKUITokensClassName","generateVKUITokensClassName","addClassNameToElement","body","removeClassNameFromElement","configContext","useObjectMemo","ConfigProviderContext","Provider","value","TokensClassProvider"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;+DAlCU;oBACF;2CACuB;uCACJ;6BACV;mBACP;mCACa;yCACM;qBACwB;wBACzC;qCAMlB;AAEP,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAiBf,IAAMF,iBAAiB,SAACG;IAC7B,IAAMC,eAAeC,IAAAA,wCAAiB;IAEtC,IAWI,mBAAA,qBACCD,cACAD,QAZHG,WAUE,iBAVFA,UACAC,cASE,iBATFA,aACAC,AAA2BC,kCAQzB,iBARFD,2BACAE,iCAOE,iBAPFA,gCACAC,YAME,iBANFA,WACAC,0BAKE,iBALFA,yBACAC,WAIE,iBAJFA,UACAC,SAGE,iBAHFA,QACAC,AAAYC,iBAEV,iBAFFD,wDAEE,iBADFE,4BAAAA,oFAA6BC,UAAI;IAMnC,qCAAqC;IACrC,IAAMV,4BACJL,MAAMI,WAAW,IAAIJ,MAAMK,yBAAyB,KAAKW,YACrDhB,MAAMI,WAAW,KAAKa,kCAAW,CAACC,MAAM,GACxCZ;IAEN,IAAIa,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,2BAA2B;QAC3B,IAAIC,kBAAkB;QACtB,IAAItB,MAAMI,WAAW,EAAE;YACrBkB,kBACEtB,MAAMI,WAAW,KAAKa,kCAAW,CAACM,QAAQ,GACtC,4FACA;QACR;QACAzB,KAAK,AAAC,mPAIQ,OAAhBwB,iBAAgB;IAIhB;IAEA,yCAAyC;IACzC,IAAMV,aAAaY,IAAAA,gDAAuB,EAACX,gBAAgBC;IAE3D,IAAM,AAAEW,WAAaC,IAAAA,WAAM,IAAnBD;IAER,yFAAyF;IACzFE,IAAAA,oDAAyB,EACvB,SAASC;QACP,IAAI,CAACH,UAAU;YACb;QACF;QAEA,IAAMI,sBAAsBC,IAAAA,wDAA2B,EAACpB,UAAUE;QAElEmB,IAAAA,4BAAqB,EAACN,SAASO,IAAI,EAAEH;QACrC,OAAO;YACLI,IAAAA,iCAA0B,EAACR,SAASO,IAAI,EAAEH;QAC5C;IACF,GACA;QAACnB;QAAUE;KAAW;IAGxB,IAAMsB,gBAAgBC,IAAAA,4BAAa,EAAC;QAClC/B,aAAAA;QACAC,2BAAAA;QACAE,gCAAAA;QACAC,WAAAA;QACAC,yBAAAA;QACAC,UAAAA;QACAC,QAAAA;QACAC,YAAAA;IACF;IAEA,qBACE,qBAACwB,4CAAqB,CAACC,QAAQ;QAACC,OAAOJ;qBACrC,qBAACK,wCAAmB;QAAC7B,UAAUA;QAAUE,YAAYA;OAClDT;AAIT"}

package/dist/cjs/components/Counter/Counter.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     /**
      * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то
      * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["Counter","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","mode","size","children","className","restProps","React","Children","count","CounterTypography","Caption","Headline","counterLevel","Component","classNames","level"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;+DAhCU;oBACI;uBACH;wBACC;AAGzB,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAeO,IAAMT,UAAU;6BACrBU,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,OAAMC,QAAQ,CAACC,KAAK,CAACL,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,IAAMM,oBAAoBP,SAAS,MAAMQ,gBAAO,GAAGC,kBAAQ;IAC3D,IAAMC,eAAeV,SAAS,MAAM,MAAM;IAE1C,qBACE,qBAACO,+DACKJ;QACJQ,WAAU;QACVT,WAAWU,IAAAA,gBAAU,EACnB,sCAEAtB,cAAc,CAACS,KAAK,EACpBH,cAAc,CAACI,KAAK,EACpBE;QAEFW,OAAOH;QAENT;AAGP"}
+{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["Counter","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","mode","size","children","className","restProps","React","Children","count","CounterTypography","Caption","Headline","counterLevel","Component","classNames","level"],"mappings":";;;;+BAiCaA;;;eAAAA;;;;;;;+DAjCU;oBACI;uBAEH;wBACC;AAGzB,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAeO,IAAMT,UAAU;6BACrBU,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIE,OAAMC,QAAQ,CAACC,KAAK,CAACL,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,IAAMM,oBAAoBP,SAAS,MAAMQ,gBAAO,GAAGC,kBAAQ;IAC3D,IAAMC,eAAeV,SAAS,MAAM,MAAM;IAE1C,qBACE,qBAACO,+DACKJ;QACJQ,WAAU;QACVT,WAAWU,IAAAA,gBAAU,EACnB,sCAEAtB,cAAc,CAACS,KAAK,EACpBH,cAAc,CAACI,KAAK,EACpBE;QAEFW,OAAOH;QAENT;AAGP"}

package/dist/cjs/components/CustomSelect/CustomSelect.js

@@ -178,7 +178,7 @@ function CustomSelect(props) {
     ]);
     var openedClassNames = _react.useMemo(function() {
         var _popperPlacement;
-        return (0, _vkjs.classNames)(opened && dropdownOffsetDistance === 0 && (((_popperPlacement = popperPlacement) === null || _popperPlacement === void 0 ? void 0 : _popperPlacement.includes("top")) ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down"));
+        return opened && dropdownOffsetDistance === 0 && (((_popperPlacement = popperPlacement) === null || _popperPlacement === void 0 ? void 0 : _popperPlacement.includes("top")) ? "vkuiCustomSelect--pop-up" : "vkuiCustomSelect--pop-down") || undefined;
     }, [
         dropdownOffsetDistance,
         opened,