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

package/dist/cssm/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":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height"],"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":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","Text","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","REGULAR","disabled","activeEffectDelay","IOS","type","div","VKCOM","Fragment","compact","regular","width","height"],"mappings":"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"}

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

@@ -41,6 +41,7 @@
 .Checkbox__content {
   flex-grow: 1;
   color: var(--vkui--color_text_primary);
+  min-width: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
   word-break: break-word;
 }
 
@@ -62,8 +63,13 @@
   margin-bottom: 12px;
 }
 
+.Checkbox__titleBefore {
+  min-width: 0; /* см. https://github.com/VKCOM/VKUI/issues/5687 */
+}
+
 .Checkbox__titleAfter {
   margin-left: 4px;
+  flex-shrink: 0;
   color: var(--vkui--color_icon_tertiary);
 }
 
@@ -85,6 +91,8 @@
   display: none;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .Checkbox__input[disabled] ~ * {
   opacity: var(--vkui--opacity_disable_accessibility);
 }

package/dist/cssm/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/cssm/components/Chip/Chip.js

@@ -4,8 +4,8 @@ import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
 import { getTitleFromChildren } from '../../lib/utils';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
-import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './Chip.module.css';
 const sizeYClassNames = {
     none: styles['Chip--sizeY-none'],
@@ -13,7 +13,7 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
- */ export const Chip = ({ value = '', option, removable = true, onRemove = noop, removeAriaLabel = 'Удалить', before = null, after, children, className, ...restProps })=>{
+ */ export const Chip = ({ value = '', option, removable = true, onRemove = noop, removeAriaLabel = 'Удалить', before = null, after, children, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const onRemoveWrapper = React.useCallback((event)=>{
         onRemove(event, value);
@@ -22,8 +22,8 @@ const sizeYClassNames = {
         value
     ]);
     const title = getTitleFromChildren(children);
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['Chip'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], removable && styles['Chip--removable'], className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames(styles['Chip'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], removable && styles['Chip--removable']),
         role: "option",
         "aria-label": title,
         ...restProps
@@ -32,7 +32,7 @@ const sizeYClassNames = {
         role: "presentation"
     }, hasReactNode(before) && /*#__PURE__*/ React.createElement("div", {
         className: styles['Chip__before']
-    }, before), /*#__PURE__*/ React.createElement(Footnote, {
+    }, before), /*#__PURE__*/ React.createElement("span", {
         className: styles['Chip__content'],
         title: title,
         "aria-hidden": true

package/dist/cssm/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":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Footnote","styles","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title","div","REGULAR","role","aria-label","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,sBAAsB;AACnD;AA0BA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,QAAQ,EAAE,EACVC,MAAM,EACNC,YAAY,IAAI,EAChBC,WAAWd,IAAI,EACfe,kBAAkB,SAAS,EAC3BC,SAAS,IAAI,EACbC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGpB;IAC3B,MAAMqB,kBAAkB1B,MAAM2B,WAAW,CACvC,CAACC;QACCV,SAASU,OAAOb;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,MAAMc,QAAQtB,qBAAqBe;IAEnC,qBACE,oBAACQ;QACCP,WAAWrB,WACTQ,MAAM,CAAC,OAAO,EACde,UAAUnB,SAASyB,OAAO,IAAIpB,eAAe,CAACc,MAAM,EACpDR,aAAaP,MAAM,CAAC,kBAAkB,EACtCa;QAEFS,MAAK;QACLC,cAAYJ;QACX,GAAGL,SAAS;qBAEb,oBAACM;QAAIP,WAAWb,MAAM,CAAC,WAAW;QAAEsB,MAAK;OACtC7B,aAAaiB,yBAAW,oBAACU;QAAIP,WAAWb,MAAM,CAAC,eAAe;OAAGU,uBAClE,oBAACX;QAASc,WAAWb,MAAM,CAAC,gBAAgB;QAAEmB,OAAOA;QAAOK,eAAAA;OACzDZ,WAEFnB,aAAakB,wBAAU,oBAACS;QAAIP,WAAWb,MAAM,CAAC,cAAc;OAAGW,QAE/DJ,2BACC,oBAACT;QACC2B,WAAU;QACVZ,WAAWb,MAAM,CAAC,eAAe;QACjC0B,SAASV;QACTW,UAAU;QACVC,WAAW;QACXL,cAAY,CAAC,EAAEd,gBAAgB,CAAC,EAAEU,MAAM,CAAC;qBAEzC,oBAAC5B;AAMb,EAAE"}
+{"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":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","RootComponent","Tappable","styles","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","useCallback","event","title","baseClassName","REGULAR","role","aria-label","div","className","span","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,sBAAsB;AACnD;AA0BA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,QAAQ,EAAE,EACVC,MAAM,EACNC,YAAY,IAAI,EAChBC,WAAWd,IAAI,EACfe,kBAAkB,SAAS,EAC3BC,SAAS,IAAI,EACbC,KAAK,EACLC,QAAQ,EACR,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGnB;IAC3B,MAAMoB,kBAAkBzB,MAAM0B,WAAW,CACvC,CAACC;QACCT,SAASS,OAAOZ;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,MAAMa,QAAQrB,qBAAqBe;IAEnC,qBACE,oBAACd;QACCqB,eAAe3B,WACbQ,MAAM,CAAC,OAAO,EACdc,UAAUlB,SAASwB,OAAO,IAAInB,eAAe,CAACa,MAAM,EACpDP,aAAaP,MAAM,CAAC,kBAAkB;QAExCqB,MAAK;QACLC,cAAYJ;QACX,GAAGL,SAAS;qBAEb,oBAACU;QAAIC,WAAWxB,MAAM,CAAC,WAAW;QAAEqB,MAAK;OACtC5B,aAAaiB,yBAAW,oBAACa;QAAIC,WAAWxB,MAAM,CAAC,eAAe;OAAGU,uBAClE,oBAACe;QAAKD,WAAWxB,MAAM,CAAC,gBAAgB;QAAEkB,OAAOA;QAAOQ,eAAAA;OACrDd,WAEFnB,aAAakB,wBAAU,oBAACY;QAAIC,WAAWxB,MAAM,CAAC,cAAc;OAAGW,QAE/DJ,2BACC,oBAACR;QACC4B,WAAU;QACVH,WAAWxB,MAAM,CAAC,eAAe;QACjC4B,SAASb;QACTc,UAAU;QACVC,WAAW;QACXR,cAAY,CAAC,EAAEb,gBAAgB,CAAC,EAAES,MAAM,CAAC;qBAEzC,oBAAC3B;AAMb,EAAE"}

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

@@ -25,6 +25,30 @@
   text-overflow: ellipsis;
   color: var(--vkui--color_text_primary);
   display: inline-block;
+
+  /* Typography/Paragraph */
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_paragraph--font_weight--regular);
+  font-family: var(--vkui--font_paragraph--font_family--regular);
+}
+
+.Chip--sizeY-compact .Chip__content {
+  /* Typography/Footnote */
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  font-weight: var(--vkui--font_footnote--font_weight--regular);
+  font-family: var(--vkui--font_footnote--font_family--regular);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Chip--sizeY-none .Chip__content {
+    /* Typography/Footnote */
+    font-size: var(--vkui--font_footnote--font_size--regular);
+    line-height: var(--vkui--font_footnote--line_height--regular);
+    font-weight: var(--vkui--font_footnote--font_weight--regular);
+    font-family: var(--vkui--font_footnote--font_family--regular);
+  }
 }
 
 .Chip__remove {

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

@@ -5,6 +5,7 @@ import { useChipsInput } from '../../hooks/useChipsInput';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
 import { Chip } from '../Chip/Chip';
+import { Text } from '../Typography/Text/Text';
 import styles from './ChipsInputBase.module.css';
 export const chipsInputDefaultProps = {
     onChange: noop,
@@ -111,7 +112,8 @@ export const ChipsInputBase = (props)=>{
     }), /*#__PURE__*/ React.createElement("label", {
         className: styles['ChipsInputBase__label'],
         "aria-label": inputAriaLabel
-    }, /*#__PURE__*/ React.createElement("input", {
+    }, /*#__PURE__*/ React.createElement(Text, {
+        Component: "input",
         type: "text",
         autoCapitalize: "none",
         autoComplete: "off",
@@ -120,7 +122,7 @@ export const ChipsInputBase = (props)=>{
         "aria-autocomplete": "list",
         className: styles['ChipsInputBase__el'],
         ...restProps,
-        ref: inputRef,
+        getRootRef: inputRef,
         value: fieldValue,
         onChange: handleInputChange,
         onKeyDown: handleKeyDown,

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

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

@@ -17,6 +17,7 @@
 
 .ChipsInputBase__label {
   display: flex;
+  justify-content: center;
   flex-direction: column;
   flex: 1;
   margin: 2px 2px 2px 10px;
@@ -27,9 +28,6 @@
   width: 100%;
   margin-bottom: 2px;
   padding: 0;
-  /* Визуальная компенсация - центрируем строчные буквы */
-  font-size: 15px;
-  line-height: 26px;
   color: var(--vkui--color_text_primary);
   background: transparent;
   border: 0;
@@ -37,7 +35,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  font-family: inherit;
 }
 
 .ChipsInputBase__el:focus {

package/dist/cssm/components/ChipsSelect/ChipsSelect.js

@@ -57,7 +57,9 @@ const chipsSelectDefaultProps = {
         }
     };
     const handleClickOutside = (e)=>{
-        if (e.target !== rootRef.current && !rootRef.current?.contains(e.target)) {
+        const isClickOutsideFormField = !rootRef.current?.contains(e.target);
+        const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target);
+        if (isClickOutsideFormField && isClickOutsideDropdown) {
             setOpened(false);
         }
     };

package/dist/cssm/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":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","styles","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","popperPlacement","setPopperPlacement","useState","undefined","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","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","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","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":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","styles","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","popperPlacement","setPopperPlacement","useState","undefined","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","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","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}

package/dist/cssm/components/ConfigProvider/ConfigProvider.js

@@ -6,6 +6,7 @@ import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { useDOM } from '../../lib/dom';
 import { TokensClassProvider } from '../../lib/tokensClassProvider';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { addClassNameToElement, removeClassNameFromElement } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import { ConfigProviderContext, useConfigProvider, WebviewType } from './ConfigProviderContext';
 const warn = warnOnce('ConfigProvider');
@@ -37,13 +38,15 @@ ${webviewTypeRule}
     // TODO [>=6]: удалить использование хука
     const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);
     const { document } = useDOM();
-    useIsomorphicLayoutEffect(()=>{
+    // TODO [>=6]: переместить хук в AppRoot (см. https://github.com/VKCOM/VKUI/issues/4810).
+    useIsomorphicLayoutEffect(function attachVKUITokensClassNameToBody() {
+        if (!document) {
+            return;
+        }
         const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);
-        // eslint-disable-next-line no-restricted-properties
-        document.body.classList.add(VKUITokensClassName);
+        addClassNameToElement(document.body, VKUITokensClassName);
         return ()=>{
-            // eslint-disable-next-line no-restricted-properties
-            document.body.classList.remove(VKUITokensClassName);
+            removeClassNameFromElement(document.body, VKUITokensClassName);
         };
     }, [
         platform,

package/dist/cssm/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":["React","noop","generateVKUITokensClassName","useAutoDetectAppearance","useObjectMemo","useDOM","TokensClassProvider","useIsomorphicLayoutEffect","warnOnce","ConfigProviderContext","useConfigProvider","WebviewType","warn","ConfigProvider","props","parentConfig","children","webviewType","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterMerged","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","undefined","VKAPPS","process","env","NODE_ENVIRONMENT","webviewTypeRule","INTERNAL","document","VKUITokensClassName","body","classList","add","remove","configContext","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,2BAA2B,QAAQ,4CAA4C;AACxF,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,WAAW,QACN,0BAA0B;AAEjC,MAAMC,OAAOJ,SAAS;AActB;;CAEC,GACD,OAAO,MAAMK,iBAAiB,CAACC;IAC7B,MAAMC,eAAeL;IAErB,MAAM,EACJM,QAAQ,EACRC,WAAW,EACXC,2BAA2BC,+BAA+B,EAC1DC,8BAA8B,EAC9BC,SAAS,EACTC,uBAAuB,EACvBC,QAAQ,EACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,6BAA6B1B,IAAI,EAClC,GAAG;QACF,GAAGc,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,qCAAqC;IACrC,MAAMI,4BACJJ,MAAMG,WAAW,IAAIH,MAAMI,yBAAyB,KAAKU,YACrDd,MAAMG,WAAW,KAAKN,YAAYkB,MAAM,GACxCV;IAEN,IAAIW,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,2BAA2B;QAC3B,IAAIC,kBAAkB;QACtB,IAAInB,MAAMG,WAAW,EAAE;YACrBgB,kBACEnB,MAAMG,WAAW,KAAKN,YAAYuB,QAAQ,GACtC,4FACA;QACR;QACAtB,KAAK,CAAC;;;;AAIV,EAAEqB,gBAAgB;;;AAGlB,CAAC;IACC;IAEA,yCAAyC;IACzC,MAAMR,aAAatB,wBAAwBuB,gBAAgBC;IAE3D,MAAM,EAAEQ,QAAQ,EAAE,GAAG9B;IAErBE,0BAA0B;QACxB,MAAM6B,sBAAsBlC,4BAA4BqB,UAAUE;QAElE,oDAAoD;QACpDU,SAAUE,IAAI,CAACC,SAAS,CAACC,GAAG,CAACH;QAE7B,OAAO;YACL,oDAAoD;YACpDD,SAAUE,IAAI,CAACC,SAAS,CAACE,MAAM,CAACJ;QAClC;IACF,GAAG;QAACb;QAAUE;KAAW;IAEzB,MAAMgB,gBAAgBrC,cAAc;QAClCa;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,oBAAChB,sBAAsBiC,QAAQ;QAACC,OAAOF;qBACrC,oBAACnC;QAAoBiB,UAAUA;QAAUE,YAAYA;OAClDT;AAIT,EAAE"}
+{"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":["React","noop","generateVKUITokensClassName","useAutoDetectAppearance","useObjectMemo","useDOM","TokensClassProvider","useIsomorphicLayoutEffect","addClassNameToElement","removeClassNameFromElement","warnOnce","ConfigProviderContext","useConfigProvider","WebviewType","warn","ConfigProvider","props","parentConfig","children","webviewType","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterMerged","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","undefined","VKAPPS","process","env","NODE_ENVIRONMENT","webviewTypeRule","INTERNAL","document","attachVKUITokensClassNameToBody","VKUITokensClassName","body","configContext","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,2BAA2B,QAAQ,4CAA4C;AACxF,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,qBAAqB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACpF,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,WAAW,QACN,0BAA0B;AAEjC,MAAMC,OAAOJ,SAAS;AActB;;CAEC,GACD,OAAO,MAAMK,iBAAiB,CAACC;IAC7B,MAAMC,eAAeL;IAErB,MAAM,EACJM,QAAQ,EACRC,WAAW,EACXC,2BAA2BC,+BAA+B,EAC1DC,8BAA8B,EAC9BC,SAAS,EACTC,uBAAuB,EACvBC,QAAQ,EACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,6BAA6B5B,IAAI,EAClC,GAAG;QACF,GAAGgB,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,qCAAqC;IACrC,MAAMI,4BACJJ,MAAMG,WAAW,IAAIH,MAAMI,yBAAyB,KAAKU,YACrDd,MAAMG,WAAW,KAAKN,YAAYkB,MAAM,GACxCV;IAEN,IAAIW,QAAQC,GAAG,CAACC,gBAAgB,KAAK,eAAe;QAClD,2BAA2B;QAC3B,IAAIC,kBAAkB;QACtB,IAAInB,MAAMG,WAAW,EAAE;YACrBgB,kBACEnB,MAAMG,WAAW,KAAKN,YAAYuB,QAAQ,GACtC,4FACA;QACR;QACAtB,KAAK,CAAC;;;;AAIV,EAAEqB,gBAAgB;;;AAGlB,CAAC;IACC;IAEA,yCAAyC;IACzC,MAAMR,aAAaxB,wBAAwByB,gBAAgBC;IAE3D,MAAM,EAAEQ,QAAQ,EAAE,GAAGhC;IAErB,yFAAyF;IACzFE,0BACE,SAAS+B;QACP,IAAI,CAACD,UAAU;YACb;QACF;QAEA,MAAME,sBAAsBrC,4BAA4BuB,UAAUE;QAElEnB,sBAAsB6B,SAASG,IAAI,EAAED;QACrC,OAAO;YACL9B,2BAA2B4B,SAASG,IAAI,EAAED;QAC5C;IACF,GACA;QAACd;QAAUE;KAAW;IAGxB,MAAMc,gBAAgBrC,cAAc;QAClCe;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,oBAAChB,sBAAsB+B,QAAQ;QAACC,OAAOF;qBACrC,oBAACnC;QAAoBmB,UAAUA;QAAUE,YAAYA;OAClDT;AAIT,EAAE"}

package/dist/cssm/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/cssm/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":["React","classNames","Caption","Headline","styles","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,WAAWF,MAAM,CAAC,0BAA0B;IAC5CG,SAASH,MAAM,CAAC,wBAAwB;IACxCI,WAAWJ,MAAM,CAAC,0BAA0B;IAC5CK,UAAUL,MAAM,CAAC,yBAAyB;IAC1CM,SAASN,MAAM,CAAC,wBAAwB;AAC1C;AAEA,MAAMO,iBAAiB;IACrBC,GAAGR,MAAM,CAAC,kBAAkB;IAC5BS,GAAGT,MAAM,CAAC,kBAAkB;AAC9B;AAYA;;CAEC,GACD,OAAO,MAAMU,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACU;IACb,IAAInB,MAAMoB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMK,oBAAoBN,SAAS,MAAMd,UAAUC;IACnD,MAAMoB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM;QACE,GAAGH,SAAS;QACbK,WAAU;QACVN,WAAWjB,WACT,uBACAG,MAAM,CAAC,UAAU,EACjBC,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;OAENN;AAGP,EAAE"}
+{"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":["React","classNames","Caption","Headline","styles","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,WAAWF,MAAM,CAAC,0BAA0B;IAC5CG,SAASH,MAAM,CAAC,wBAAwB;IACxCI,WAAWJ,MAAM,CAAC,0BAA0B;IAC5CK,UAAUL,MAAM,CAAC,yBAAyB;IAC1CM,SAASN,MAAM,CAAC,wBAAwB;AAC1C;AAEA,MAAMO,iBAAiB;IACrBC,GAAGR,MAAM,CAAC,kBAAkB;IAC5BS,GAAGT,MAAM,CAAC,kBAAkB;AAC9B;AAYA;;CAEC,GACD,OAAO,MAAMU,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACU;IACb,IAAInB,MAAMoB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMK,oBAAoBN,SAAS,MAAMd,UAAUC;IACnD,MAAMoB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM;QACE,GAAGH,SAAS;QACbK,WAAU;QACVN,WAAWjB,WACT,uBACAG,MAAM,CAAC,UAAU,EACjBC,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;OAENN;AAGP,EAAE"}

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -110,7 +110,7 @@ const defaultOptions = [];
         options,
         selectedOptionIndex
     ]);
-    const openedClassNames = React.useMemo(()=>classNames(opened && dropdownOffsetDistance === 0 && (popperPlacement?.includes('top') ? styles['CustomSelect--pop-up'] : styles['CustomSelect--pop-down'])), [
+    const openedClassNames = React.useMemo(()=>opened && dropdownOffsetDistance === 0 && (popperPlacement?.includes('top') ? styles['CustomSelect--pop-up'] : styles['CustomSelect--pop-down']) || undefined, [
         dropdownOffsetDistance,
         opened,
         popperPlacement