@vkontakte/vkui 5.7.2 → 5.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","Platform","VKCOM","hasReactNode","disabled","activeEffectDelay","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <Text className={styles['Checkbox__titleBefore']}>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","REGULAR","hasReactNode","disabled","activeEffectDelay","Platform","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","VKCOM","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;+DA/CU;qBAOhB;oBACkC;6BACX;8CACiB;4BAClB;2BACD;0BACH;wBACA;wBACA;wBAEyC;wBACzC;oBACJ;8BACU;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAiBnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW;QACtBO,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,gBAAAA,QACAC,qBAAAA,aACAC,uBAAAA,eACAC,8BAAAA,sBACAC,mBAAAA,WACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACAC,0BAAAA,kBACAC,kBAAAA,UACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,0BAAY,EAACb;IAC9B,IAAMc,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAiCC,mCAAAA,IAAAA,8DAA8B,KAAvDD,AAAOE,gBAAkBD,iCAAzBD;IAERG,OAAMC,SAAS,CAAC;QACd,IAAMC,qBAAqBpB,kBAAkBqB,YAAYpB,uBAAuBD;QAEhF,IAAIU,SAASY,OAAO,EAAE;YACpBZ,SAASY,OAAO,CAACtB,aAAa,GAAGuB,QAAQH;QAC3C;IACF,GAAG;QAACnB;QAAsBD;QAAeU;KAAS;IAElD,IAAMc,eAA0CN,OAAMO,WAAW,CAC/D,SAACC;QACC,IACEzB,yBAAyBoB,aACzBrB,kBAAkBqB,aAClBZ,UAAUkB,OAAO,KAAKN,aACtBX,SAASY,OAAO,EAChB;YACAZ,SAASY,OAAO,CAACtB,aAAa,GAAG;QACnC;QACA,IAAIA,kBAAkBqB,aAAaX,SAASY,OAAO,EAAE;YACnDZ,SAASY,OAAO,CAACtB,aAAa,GAAGA;QACnC;QACAO,YAAYA,SAASmB;IACvB,GACA;QAACzB;QAAsBD;QAAeS,UAAUkB,OAAO;QAAEpB;QAAUG;KAAS;IAG9E,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI7B,wBAAwBQ,UAAUsB,cAAc,EAAE;YACpDvC,KAAK,yEAAyE;QAChF;QAEA,IAAIQ,iBAAiBS,UAAUkB,OAAO,EAAE;YACtCnC,KAAK,2DAA2D;QAClE;QAEA,IAAIiB,UAAUsB,cAAc,IAAItB,UAAUkB,OAAO,EAAE;YACjDnC,KAAK,4DAA4D;QACnE;IACF;IAEA,qBACE,qBAACwC,kBAAQ;QACPC,WAAU;QACVtC,WAAWuC,IAAAA,gBAAU,kBAEnBnB,UAAUzB,oBAAQ,CAAC6C,OAAO,IAAI/C,eAAe,CAAC2B,MAAM,EACpD,CAAEqB,CAAAA,IAAAA,kBAAY,EAAC1C,aAAa0C,IAAAA,kBAAY,EAACrC,YAAW,6BACpDJ;QAEFC,OAAOA;QACPyC,UAAU5B,UAAU4B,QAAQ;QAC5BC,mBAAmB1B,aAAa2B,kBAAQ,CAACC,GAAG,GAAG,MAAMC,6BAAmB;QACxE5C,YAAYA;QACZK,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;qBAElB,qBAACoC,8BAAc,8CACTjC;QACJwB,WAAU;QACVU,MAAK;QACLpC,UAAUiB;QACV7B,SAAS;QACTE,YAAYa;uBAEd,qBAACkC;QAAIjD,WAAWuC,IAAAA,gBAAU;OACvBtB,aAAa2B,kBAAQ,CAACM,KAAK,iBAC1B,qBAACC,uBAAgB,wBAEjB,qBAAC5B,OAAM6B,QAAQ,QACZ9B,cAAc+B,OAAO,kBACpB,qBAACF,uBAAgB;QAACnD,WAAWsB,cAAc+B,OAAO,CAACrD,SAAS;QAE7DsB,cAAcgC,OAAO,kBACpB,qBAACC,uBAAgB;QAACvD,WAAWsB,cAAcgC,OAAO,CAACtD,SAAS;wBAKpE,qBAACiD;QAAIjD,WAAWuC,IAAAA,gBAAU;OACvBtB,aAAa2B,kBAAQ,CAACM,KAAK,iBAC1B,qBAACM,wBAAiB,wBAElB,qBAACjC,OAAM6B,QAAQ,QACZ9B,cAAc+B,OAAO,kBACpB,qBAACG,wBAAiB;QAACxD,WAAWsB,cAAc+B,OAAO,CAACrD,SAAS;QAE9DsB,cAAcgC,OAAO,kBACpB,qBAACG,wBAAiB;QAACzD,WAAWsB,cAAcgC,OAAO,CAACtD,SAAS;wBAKrE,qBAACiD;QACCjD,WAAWuC,IAAAA,gBAAU;OAEpBtB,aAAa2B,kBAAQ,CAACM,KAAK,iBAC1B,qBAACQ,kCAA2B;QAACC,OAAO;QAAIC,QAAQ;uBAEhD,qBAACrC,OAAM6B,QAAQ,QACZ9B,cAAc+B,OAAO,kBACpB,qBAACK,kCAA2B;QAC1B1D,WAAWsB,cAAc+B,OAAO,CAACrD,SAAS;QAC1C2D,OAAO;QACPC,QAAQ;QAGXtC,cAAcgC,OAAO,kBACpB,qBAACI,kCAA2B;QAC1B1D,WAAWsB,cAAcgC,OAAO,CAACtD,SAAS;QAC1C2D,OAAO;QACPC,QAAQ;wBAMlB,qBAACX;QAAIjD,SAAS;qBACZ,qBAACiD;QAAIjD,SAAS;qBACZ,qBAAC6D,UAAI;QAAC7D,SAAS;OAAoCD,yBACnD,qBAACkD;QAAIjD,SAAS;OAAmCa,cAElD4B,IAAAA,kBAAY,EAACrC,8BACZ,qBAAC0D,kBAAQ;QAAC9D,SAAS;OAAoCI;AAKjE"}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n  /**\n   * Добавляет значение в список на событие `onBlur`\n   */\n  addOnBlur?: boolean;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: '',\n  inputAriaLabel: 'Введите ваше значение...',\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n  addOnBlur: false,\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    className,\n    getRootRef,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    inputValue,\n    getRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    inputAriaLabel,\n    addOnBlur,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n    useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n\n    if (addOnBlur && !e.defaultPrevented) {\n      addOptionFromInput();\n    }\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          className={styles['ChipsInputBase__el']}\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["chipsInputDefaultProps","ChipsInputBase","onChange","noop","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","Chip","removable","addOnBlur","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useAdaptivity","React","useState","focused","setFocused","useChipsInput","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","useExternRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","classNames","SizeType","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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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":["chipsInputDefaultProps","ChipsInputBase","onChange","noop","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","Chip","removable","addOnBlur","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useAdaptivity","React","useState","focused","setFocused","useChipsInput","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","useExternRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","classNames","SizeType","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","Text","Component","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}

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

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { ConfigProviderContextInterface } from './ConfigProviderContext';
 export interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {
+    /**
+     * > ⚠️ В **v6** метод будет удалён (см. https://github.com/VKCOM/VKUI/issues/5049).
+     * > Используйте хук `useAppearance()` из библиотеки `@vkontakte/vk-bridge-react`, если вам нужно
+     * > определять, что `appearance` был передан через VK Bridge.
+     *
+     * @deprecated v5.8.0
+     */
     onDetectAppearanceByBridge?: () => void;
     children: React.ReactNode;
 }

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

@@ -18,19 +18,35 @@ var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _dom = require("../../lib/dom");
 var _tokensClassProvider = require("../../lib/tokensClassProvider");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+var _utils = require("../../lib/utils");
+var _warnOnce = require("../../lib/warnOnce");
 var _ConfigProviderContext = require("./ConfigProviderContext");
+var warn = (0, _warnOnce.warnOnce)("ConfigProvider");
 var ConfigProvider = function(props) {
     var parentConfig = (0, _ConfigProviderContext.useConfigProvider)();
-    var _$_object_spread = _object_spread._({}, parentConfig, props), children = _$_object_spread.children, webviewType = _$_object_spread.webviewType, isWebView = _$_object_spread.isWebView, transitionMotionEnabled = _$_object_spread.transitionMotionEnabled, platform = _$_object_spread.platform, locale = _$_object_spread.locale, appearanceProp = _$_object_spread.appearance, _object_spread_onDetectAppearanceByBridge = _$_object_spread.onDetectAppearanceByBridge, onDetectAppearanceByBridge = _object_spread_onDetectAppearanceByBridge === void 0 ? _vkjs.noop : _object_spread_onDetectAppearanceByBridge;
+    var _$_object_spread = _object_spread._({}, parentConfig, props), children = _$_object_spread.children, webviewType = _$_object_spread.webviewType, hasCustomPanelHeaderAfterMerged = _$_object_spread.hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth = _$_object_spread.customPanelHeaderAfterMinWidth, isWebView = _$_object_spread.isWebView, transitionMotionEnabled = _$_object_spread.transitionMotionEnabled, platform = _$_object_spread.platform, locale = _$_object_spread.locale, appearanceProp = _$_object_spread.appearance, _object_spread_onDetectAppearanceByBridge = _$_object_spread.onDetectAppearanceByBridge, onDetectAppearanceByBridge = _object_spread_onDetectAppearanceByBridge === void 0 ? _vkjs.noop : _object_spread_onDetectAppearanceByBridge;
+    // TODO [>=6]: Удалить данный бэкпорт
+    var hasCustomPanelHeaderAfter = props.webviewType && props.hasCustomPanelHeaderAfter === undefined ? props.webviewType === _ConfigProviderContext.WebviewType.VKAPPS : hasCustomPanelHeaderAfterMerged;
+    if (process.env.NODE_ENVIRONMENT === "development") {
+        // TODO [>=6]: удалить warn
+        var webviewTypeRule = "";
+        if (props.webviewType) {
+            webviewTypeRule = props.webviewType === _ConfigProviderContext.WebviewType.INTERNAL ? "3. замените webviewType={WebviewType.INTERNAL} на hasCustomPanelHeaderAfterProp={false}" : "3. замените webviewType={WebviewType.VKAPPS} на hasCustomPanelHeaderAfterProp={true}";
+        }
+        warn("[@vkontakte/vk-bridge's deprecated] Если вы используете VK Bridge, то:\n\n1. используйте хук useAppearance() из @vkontakte/vk-bridge-react и результат передайте в параметр appearance;\n2. передайте bridge.isWebView() в параметр isWebView;\n".concat(webviewTypeRule, "\n\nПодробности см. https://github.com/VKCOM/VKUI/issues/5049\n"));
+    }
+    // TODO [>=6]: удалить использование хука
     var appearance = (0, _useAutoDetectAppearance.useAutoDetectAppearance)(appearanceProp, onDetectAppearanceByBridge);
     var document = (0, _dom.useDOM)().document;
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+    // TODO [>=6]: переместить хук в AppRoot (см. https://github.com/VKCOM/VKUI/issues/4810).
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function attachVKUITokensClassNameToBody() {
+        if (!document) {
+            return;
+        }
         var VKUITokensClassName = (0, _generateVKUITokensClassName.generateVKUITokensClassName)(platform, appearance);
-        // eslint-disable-next-line no-restricted-properties
-        document.body.classList.add(VKUITokensClassName);
+        (0, _utils.addClassNameToElement)(document.body, VKUITokensClassName);
         return function() {
-            // eslint-disable-next-line no-restricted-properties
-            document.body.classList.remove(VKUITokensClassName);
+            (0, _utils.removeClassNameFromElement)(document.body, VKUITokensClassName);
         };
     }, [
         platform,
@@ -38,6 +54,8 @@ var ConfigProvider = function(props) {
     ]);
     var configContext = (0, _useObjectMemo.useObjectMemo)({
         webviewType: webviewType,
+        hasCustomPanelHeaderAfter: hasCustomPanelHeaderAfter,
+        customPanelHeaderAfterMinWidth: customPanelHeaderAfterMinWidth,
         isWebView: isWebView,
         transitionMotionEnabled: transitionMotionEnabled,
         platform: platform,

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

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

package/dist/cjs/components/ConfigProvider/ConfigProviderContext.d.ts

@@ -1,20 +1,64 @@
 import * as React from 'react';
-import { AppearanceType } from '@vkontakte/vk-bridge';
+import type { AppearanceType } from '../../lib/appearance';
 import { PlatformType } from '../../lib/platform';
+/**
+ * TODO [>=6]: удалить enum (#5049).
+ *
+ * @deprecated v5.8.0
+ */
 export declare enum WebviewType {
     VKAPPS = "vkapps",
     INTERNAL = "internal"
 }
 export interface ConfigProviderContextInterface {
     /**
-     * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере
+     * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.
+     *
+     * В условиях когда:
+     * - `isWebView={true}`
+     * - platform="ios"
+     *
+     * для компонента `View` включается возможность навигации через смахивание.
+     *
+     * По умолчанию определяется через `bridge.isWebView()`.
+     *
+     * > ⚠️ В **v6** будет удалена завязка на `@vkontakte/vk-bridge` (см. https://github.com/VKCOM/VKUI/issues/5049).
+     * > Если вы используете `@vkontakte/vk-bridge`, то передавать `bridge.isWebView()` необходимо самостоятельно.
      */
     isWebView: boolean;
     /**
      * Тип вебвью.<br>
      * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)
+     *
+     * > ⚠️ В **v6** свойство будет удалено (см. https://github.com/VKCOM/VKUI/issues/5049).
+     * >
+     * > Используйте вместо него новые свойства:
+     * >
+     * > - `webviewType={WebviewType.INTERNAL}` -> `hasCustomPanelHeaderAfter={false}`.
+     * > - `webviewType={WebviewType.VKAPPS}` -> `hasCustomPanelHeaderAfter={true}`. При необходимости передайте `customPanelHeaderAfterMinWidth={<value>}` (по умолчанию равен `90`).
+     *
+     * @deprecated v5.8.0
      */
-    webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;
+    webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;
+    /**
+     * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского
+     * "плавающего" элемента (например, панель управления webview).
+     *
+     * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых
+     * > библиотекой.
+     *
+     * > ⚠️ В **v6** свойство будет по умолчанию `false` (см. https://github.com/VKCOM/VKUI/issues/5049).
+     */
+    hasCustomPanelHeaderAfter: boolean;
+    /**
+     * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский
+     * "плавающий" элемент (например, ширина панели управления webview).
+     *
+     * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).
+     *
+     * @default 90
+     */
+    customPanelHeaderAfterMinWidth: number | string;
     /**
      * Тип цветовой схемы – `light` или `dark`
      */

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

@@ -30,7 +30,12 @@ var WebviewType;
     WebviewType["INTERNAL"] = "internal";
 })(WebviewType || (WebviewType = {}));
 var ConfigProviderContext = /*#__PURE__*/ _react.createContext({
-    webviewType: WebviewType.VKAPPS,
+    // TODO [>=6]: удалить свойство (#5049).
+    webviewType: undefined,
+    // TODO [>=6]: сделать по умолчанию `false` (#5049).
+    hasCustomPanelHeaderAfter: true,
+    customPanelHeaderAfterMinWidth: 90,
+    // TODO [>=6]: удалить использование vkBridge. Использовать `false` вместо него (#5049).
     isWebView: _vkbridge.default.isWebView(),
     transitionMotionEnabled: true,
     platform: (0, _platform.platform)(),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, { AppearanceType } from '@vkontakte/vk-bridge';\nimport { platform, PlatformType } from '../../lib/platform';\n\nexport enum WebviewType {\n  VKAPPS = 'vkapps',\n  INTERNAL = 'internal',\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({\n  webviewType: WebviewType.VKAPPS,\n  isWebView: vkBridge.isWebView(),\n  transitionMotionEnabled: true,\n  platform: platform(),\n  appearance: undefined, // undefined обозначает что тема должна определиться автоматически\n  locale: 'ru',\n});\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"names":["ConfigProviderContext","useConfigProvider","WebviewType","VKAPPS","INTERNAL","React","createContext","webviewType","isWebView","vkBridge","transitionMotionEnabled","platform","appearance","undefined","locale","useContext"],"mappings":";;;;;;;;;;;;;;IAqCaA,qBAAqB;eAArBA;;IASAC,iBAAiB;eAAjBA;;;;;+DA9CU;iEACkB;wBACF;IAEhC;UAAKC,WAAW;IAAXA,YACVC,YAAS;IADCD,YAEVE,cAAW;GAFDF,gBAAAA;AAiCL,IAAMF,sCAAwBK,OAAMC,aAAa,CAAiC;IACvFC,aAAaL,YAAYC,MAAM;IAC/BK,WAAWC,iBAAQ,CAACD,SAAS;IAC7BE,yBAAyB;IACzBC,UAAUA,IAAAA,kBAAQ;IAClBC,YAAYC;IACZC,QAAQ;AACV;AAEO,IAAMb,oBAAoB;WAAMI,OAAMU,UAAU,CAACf"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge from '@vkontakte/vk-bridge';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { platform, PlatformType } from '../../lib/platform';\n\n/**\n * TODO [>=6]: удалить enum (#5049).\n *\n * @deprecated v5.8.0\n */\nexport enum WebviewType {\n  VKAPPS = 'vkapps',\n  INTERNAL = 'internal',\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n   *\n   * В условиях когда:\n   * - `isWebView={true}`\n   * - platform=\"ios\"\n   *\n   * для компонента `View` включается возможность навигации через смахивание.\n   *\n   * По умолчанию определяется через `bridge.isWebView()`.\n   *\n   * > ⚠️ В **v6** будет удалена завязка на `@vkontakte/vk-bridge` (см. https://github.com/VKCOM/VKUI/issues/5049).\n   * > Если вы используете `@vkontakte/vk-bridge`, то передавать `bridge.isWebView()` необходимо самостоятельно.\n   */\n  isWebView: boolean; // TODO [>=6]: удалить коммент про v6 @vkontakte/vk-bridge выше\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   *\n   * > ⚠️ В **v6** свойство будет удалено (см. https://github.com/VKCOM/VKUI/issues/5049).\n   * >\n   * > Используйте вместо него новые свойства:\n   * >\n   * > - `webviewType={WebviewType.INTERNAL}` -> `hasCustomPanelHeaderAfter={false}`.\n   * > - `webviewType={WebviewType.VKAPPS}` -> `hasCustomPanelHeaderAfter={true}`. При необходимости передайте `customPanelHeaderAfterMinWidth={<value>}` (по умолчанию равен `90`).\n   *\n   * @deprecated v5.8.0\n   */\n  webviewType?: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n   * \"плавающего\" элемента (например, панель управления webview).\n   *\n   * > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n   * > библиотекой.\n   *\n   * > ⚠️ В **v6** свойство будет по умолчанию `false` (см. https://github.com/VKCOM/VKUI/issues/5049).\n   */\n  hasCustomPanelHeaderAfter: boolean;\n  /**\n   * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n   * \"плавающий\" элемент (например, ширина панели управления webview).\n   *\n   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n   *\n   * @default 90\n   */\n  customPanelHeaderAfterMinWidth: number | string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({\n  // TODO [>=6]: удалить свойство (#5049).\n  webviewType: undefined,\n  // TODO [>=6]: сделать по умолчанию `false` (#5049).\n  hasCustomPanelHeaderAfter: true,\n  customPanelHeaderAfterMinWidth: 90,\n  // TODO [>=6]: удалить использование vkBridge. Использовать `false` вместо него (#5049).\n  isWebView: vkBridge.isWebView(),\n  transitionMotionEnabled: true,\n  platform: platform(),\n  appearance: undefined, // undefined обозначает что тема должна определиться автоматически\n  locale: 'ru',\n});\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"names":["ConfigProviderContext","useConfigProvider","WebviewType","VKAPPS","INTERNAL","React","createContext","webviewType","undefined","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","vkBridge","transitionMotionEnabled","platform","appearance","locale","useContext"],"mappings":";;;;;;;;;;;;;;IAkFaA,qBAAqB;eAArBA;;IAcAC,iBAAiB;eAAjBA;;;;;+DAhGU;iEACF;wBAEkB;IAOhC;UAAKC,WAAW;IAAXA,YACVC,YAAS;IADCD,YAEVE,cAAW;GAFDF,gBAAAA;AAwEL,IAAMF,sCAAwBK,OAAMC,aAAa,CAAiC;IACvF,wCAAwC;IACxCC,aAAaC;IACb,oDAAoD;IACpDC,2BAA2B;IAC3BC,gCAAgC;IAChC,wFAAwF;IACxFC,WAAWC,iBAAQ,CAACD,SAAS;IAC7BE,yBAAyB;IACzBC,UAAUA,IAAAA,kBAAQ;IAClBC,YAAYP;IACZQ,QAAQ;AACV;AAEO,IAAMf,oBAAoB;WAAMI,OAAMY,UAAU,CAACjB"}

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

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

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

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

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

@@ -23,7 +23,7 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
      */
     emptyText?: string;
     /**
-     * > ⚠️ В v6 из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте
+     * > ⚠️ В **v6** из возвращаемых типов будет удалён `CustomSelectOptionInterface[]`. Для кастомной фильтрации используйте
      * > `filterFn`.
      */
     onInputChange?: (e: React.ChangeEvent, options: CustomSelectOptionInterface[]) => void | CustomSelectOptionInterface[];

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

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