@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { HasAlign } from '../../types';
 import { TappableProps } from '../Tappable/Tappable';
+import '../Spinner/Spinner.module.css';
 export interface VKUIButtonProps extends HasAlign {
     mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';
     appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';

package/dist/components/Button/Button.js

@@ -38,10 +38,10 @@ var sizeYClassNames = _define_property({
     return /*#__PURE__*/ React.createElement(Tappable, _object_spread_props(_object_spread({
         hoverMode: "vkuiButton--hover",
         activeMode: "vkuiButton--active",
-        Component: restProps.href ? "a" : "button"
+        Component: restProps.href ? "a" : "button",
+        focusVisibleMode: "outside"
     }, restProps), {
         onClick: loading ? undefined : onClick,
-        focusVisibleMode: "outside",
         stopPropagation: stopPropagation,
         className: classNames(className, "vkuiButton", {
             s: "vkuiButton--size-s",

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      focusVisibleMode=\"outside\"\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        {\n          s: styles['Button--size-s'],\n          m: styles['Button--size-m'],\n          l: styles['Button--size-l'],\n        }[size],\n        {\n          primary: styles['Button--mode-primary'],\n          secondary: styles['Button--mode-secondary'],\n          tertiary: styles['Button--mode-tertiary'],\n          outline: styles['Button--mode-outline'],\n          link: styles['Button--mode-link'],\n        }[mode],\n        {\n          'accent': styles['Button--appearance-accent'],\n          'positive': styles['Button--appearance-positive'],\n          'negative': styles['Button--appearance-negative'],\n          'neutral': styles['Button--appearance-neutral'],\n          'overlay': styles['Button--appearance-overlay'],\n          'accent-invariable': styles['Button--appearance-accent-invariable'],\n        }[appearance],\n        {\n          left: styles['Button--align-left'],\n          center: styles['Button--align-center'],\n          right: styles['Button--align-right'],\n        }[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['Button--ios'],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","undefined","focusVisibleMode","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","IOS","span","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAG/D,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAenB;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAeH;6BAdjBC,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,KAAK,2CACjBC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,IAAI,2BACtBC,mBAAAA,WACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQT,UAAUC;IACnC,IAAMS,cAAc,CAACX,YAAYU,QAAQR,WAAWQ,QAAQT;IAC5D,IAA2BhB,iBAAAA,wCAAAA,eAAnB2B,OAAAA,0CAAQ;IAChB,IAAMC,WAAW3B;IAEjB,qBACE,oBAACI;QACCwB,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM,QAAQ;OACtCT;QACJH,SAASD,UAAUc,YAAYb,OAAO;QACtCc,kBAAiB;QACjBb,iBAAiBA;QACjBC,WAAWxB,WACTwB,yBAEA;YACEa,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAC3B,KAAK,EACP;YACE4B,OAAO;YACPC,SAAS;YACTC,QAAQ;YACRC,OAAO;YACPC,IAAI;QACN,CAAC,CAAC/B,KAAK,EACP;YACE,QAAQ;YACR,UAAU;YACV,UAAU;YACV,SAAS;YACT,SAAS;YACT,mBAAmB;QACrB,CAAC,CAACC,WAAW,EACb;YACE+B,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAAC/B,MAAM,EACRa,UAAUzB,SAAS4C,OAAO,IAAIxC,eAAe,CAACqB,MAAM,EACpDC,aAAazB,SAAS4C,GAAG,uBACzBlC,sCACAW,qCACAE,eAAe,CAACb,uCAChBM;QAEFD,YAAYA;QAEXC,yBAAW,oBAACf;QAAQM,MAAK;QAAQY,SAAS;sBAC3C,oBAAC0B;QAAK1B,SAAS;OACZvB,aAAaiB,yBACZ,oBAACgC;QACC1B,SAAS;QACT2B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWpB,SAAS;OAElEjB,SAGJjB,aAAagB,2BACZ,oBAACiC;QACC1B,SAAS;QACT4B,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAapB,SAAS;OAEpElB,WAGJhB,aAAakB,wBACZ,oBAAC+B;QACC1B,SAAS;QACT2B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUpB,SAAS;OAEjEhB;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasAlign } from '../../types';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport '../Spinner/Spinner.module.css';\nimport styles from './Button.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Button--sizeY-none'],\n  [SizeType.REGULAR]: styles['Button--sizeY-regular'],\n};\n\nexport interface VKUIButtonProps extends HasAlign {\n  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';\n  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';\n  size?: 's' | 'm' | 'l';\n  stretched?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  loading?: boolean;\n}\n\nexport interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Button\n */\nexport const Button = ({\n  size = 's',\n  mode = 'primary',\n  appearance = 'accent',\n  stretched = false,\n  align = 'center',\n  children,\n  before,\n  after,\n  getRootRef,\n  loading,\n  onClick,\n  stopPropagation = true,\n  className,\n  ...restProps\n}: ButtonProps) => {\n  const hasIcons = Boolean(before || after);\n  const hasIconOnly = !children && Boolean(after) !== Boolean(before);\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      hoverMode={styles['Button--hover']}\n      activeMode={styles['Button--active']}\n      Component={restProps.href ? 'a' : 'button'}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      onClick={loading ? undefined : onClick}\n      stopPropagation={stopPropagation}\n      className={classNames(\n        className,\n        styles.Button,\n        {\n          s: styles['Button--size-s'],\n          m: styles['Button--size-m'],\n          l: styles['Button--size-l'],\n        }[size],\n        {\n          primary: styles['Button--mode-primary'],\n          secondary: styles['Button--mode-secondary'],\n          tertiary: styles['Button--mode-tertiary'],\n          outline: styles['Button--mode-outline'],\n          link: styles['Button--mode-link'],\n        }[mode],\n        {\n          'accent': styles['Button--appearance-accent'],\n          'positive': styles['Button--appearance-positive'],\n          'negative': styles['Button--appearance-negative'],\n          'neutral': styles['Button--appearance-neutral'],\n          'overlay': styles['Button--appearance-overlay'],\n          'accent-invariable': styles['Button--appearance-accent-invariable'],\n        }[appearance],\n        {\n          left: styles['Button--align-left'],\n          center: styles['Button--align-center'],\n          right: styles['Button--align-right'],\n        }[align],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        platform === Platform.IOS && styles['Button--ios'],\n        stretched && styles['Button--stretched'],\n        hasIcons && styles['Button--with-icon'],\n        hasIconOnly && !stretched && styles['Button--singleIcon'],\n        loading && styles['Button--loading'],\n      )}\n      getRootRef={getRootRef}\n    >\n      {loading && <Spinner size=\"small\" className={styles.Button__spinner} />}\n      <span className={styles.Button__in}>\n        {hasReactNode(before) && (\n          <span\n            className={styles.Button__before}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}\n          >\n            {before}\n          </span>\n        )}\n        {hasReactNode(children) && (\n          <span\n            className={styles.Button__content}\n            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}\n          >\n            {children}\n          </span>\n        )}\n        {hasReactNode(after) && (\n          <span\n            className={styles.Button__after}\n            role=\"presentation\"\n            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}\n          >\n            {after}\n          </span>\n        )}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","Spinner","Tappable","sizeYClassNames","none","REGULAR","Button","size","mode","appearance","stretched","align","children","before","after","getRootRef","loading","onClick","stopPropagation","className","restProps","hasIcons","Boolean","hasIconOnly","sizeY","platform","hoverMode","activeMode","Component","href","focusVisibleMode","undefined","s","m","l","primary","secondary","tertiary","outline","link","left","center","right","COMPACT","IOS","span","role","data-testid","process","env","NODE_ENV"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAI/D,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAenB;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAeH;6BAdjBC,MAAAA,gCAAO,wCACPC,MAAAA,gCAAO,oDACPC,YAAAA,4CAAa,wDACbC,WAAAA,0CAAY,KAAK,2CACjBC,OAAAA,kCAAQ,yBACRC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,oBAAAA,YACAC,iBAAAA,SACAC,iBAAAA,yCACAC,iBAAAA,sDAAkB,IAAI,2BACtBC,mBAAAA,WACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,QAAQT,UAAUC;IACnC,IAAMS,cAAc,CAACX,YAAYU,QAAQR,WAAWQ,QAAQT;IAC5D,IAA2BhB,iBAAAA,wCAAAA,eAAnB2B,OAAAA,0CAAQ;IAChB,IAAMC,WAAW3B;IAEjB,qBACE,oBAACI;QACCwB,SAAS;QACTC,UAAU;QACVC,WAAWR,UAAUS,IAAI,GAAG,MAAM,QAAQ;QAC1CC,kBAAiB;OACbV;QACJH,SAASD,UAAUe,YAAYd,OAAO;QACtCC,iBAAiBA;QACjBC,WAAWxB,WACTwB,yBAEA;YACEa,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAAC3B,KAAK,EACP;YACE4B,OAAO;YACPC,SAAS;YACTC,QAAQ;YACRC,OAAO;YACPC,IAAI;QACN,CAAC,CAAC/B,KAAK,EACP;YACE,QAAQ;YACR,UAAU;YACV,UAAU;YACV,SAAS;YACT,SAAS;YACT,mBAAmB;QACrB,CAAC,CAACC,WAAW,EACb;YACE+B,IAAI;YACJC,MAAM;YACNC,KAAK;QACP,CAAC,CAAC/B,MAAM,EACRa,UAAUzB,SAAS4C,OAAO,IAAIxC,eAAe,CAACqB,MAAM,EACpDC,aAAazB,SAAS4C,GAAG,uBACzBlC,sCACAW,qCACAE,eAAe,CAACb,uCAChBM;QAEFD,YAAYA;QAEXC,yBAAW,oBAACf;QAAQM,MAAK;QAAQY,SAAS;sBAC3C,oBAAC0B;QAAK1B,SAAS;OACZvB,aAAaiB,yBACZ,oBAACgC;QACC1B,SAAS;QACT2B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,WAAWnB,SAAS;OAElElB,SAGJjB,aAAagB,2BACZ,oBAACiC;QACC1B,SAAS;QACT4B,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,aAAanB,SAAS;OAEpEnB,WAGJhB,aAAakB,wBACZ,oBAAC+B;QACC1B,SAAS;QACT2B,MAAK;QACLC,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,UAAUnB,SAAS;OAEjEjB;AAMb,EAAE"}

package/dist/components/Card/Card.js

@@ -15,9 +15,7 @@ import { classNames } from "@vkontakte/vkjs";
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
         ref: getRootRef,
         className: classNames("vkuiCard", mode === "outline" && "vkuiCard--mode-outline", mode === "shadow" && "vkuiCard--mode-shadow", className)
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCard__in"
-    }, children));
+    }), children);
 };
 
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      <div className={styles['Card__in']}>{children}</div>\n    </div>\n  );\n};\n"],"names":["React","classNames","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,IAAMC,OAAO,iBAMH;6BALfC,MAAAA,gCAAO,sBACPC,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE,+CACKD;QACJE,KAAKJ;QACLC,WAAWL,uBAETE,SAAS,uCACTA,SAAS,qCACTG;sBAGF,oBAACE;QAAIF,SAAS;OAAuBF;AAG3C,EAAE"}
+{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Card.module.css';\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'tint' | 'shadow' | 'outline';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Card\n */\nexport const Card = ({\n  mode = 'tint',\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: CardProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Card'],\n        mode === 'outline' && styles['Card--mode-outline'],\n        mode === 'shadow' && styles['Card--mode-shadow'],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","Card","mode","children","getRootRef","className","restProps","div","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,IAAMC,OAAO,iBAMH;6BALfC,MAAAA,gCAAO,sBACPC,kBAAAA,UACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACE,+CACKD;QACJE,KAAKJ;QACLC,WAAWL,uBAETE,SAAS,uCACTA,SAAS,qCACTG;QAGDF;AAGP,EAAE"}

package/dist/components/CardGrid/CardGrid.js

@@ -20,10 +20,10 @@ var sizeXClassNames = _define_property({
     ]);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeX = _useAdaptivity.sizeX, sizeX = _useAdaptivity_sizeX === void 0 ? "none" : _useAdaptivity_sizeX;
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiCardGrid", spaced && "vkuiCardGrid--spaced", {
-            s: "vkuiCardGrid--size-s",
-            m: "vkuiCardGrid--size-m",
-            l: "vkuiCardGrid--size-l"
+        className: classNames("vkuiCardGrid", "vkuiInternalCardGrid", spaced && "vkuiCardGrid--spaced", {
+            s: "vkuiInternalCardGrid--size-s",
+            m: "vkuiInternalCardGrid--size-m",
+            l: "vkuiInternalCardGrid--size-l"
         }[size], sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX], className)
     }), children);
 };

package/dist/components/CardGrid/CardGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: styles['CardGrid--size-s'],\n          m: styles['CardGrid--size-m'],\n          l: styles['CardGrid--size-l'],\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAWnB;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAMH;QALnBC,kBAAAA,+BACAC,MAAAA,gCAAO,0CACPC,QAAAA,oCAAS,KAAK,kBACdC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BT,iBAAAA,wCAAAA,eAAnBW,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKF;QACJD,WAAWV,2BAETS,kCACA;YACEK,CAAC;YACDC,CAAC;YACDC,CAAC;QACH,CAAC,CAACR,KAAK,EACPI,UAAUV,SAASe,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;QAGDH;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/CardGrid/CardGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport styles from './CardGrid.module.css';\n\nconst sizeXClassNames = {\n  none: styles['CardGrid--sizeX-none'],\n  [SizeType.COMPACT]: styles['CardGrid--sizeX-compact'],\n};\n\nexport interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 's' | 'm' | 'l';\n  /**\n   * Если true, то вокруг компонента присутствуют стандартные отсупы сверху/снизу и слева/справа\n   */\n  spaced?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardGrid\n */\nexport const CardGrid = ({\n  children,\n  size = 's',\n  spaced = false,\n  className,\n  ...restProps\n}: CardGridProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardGrid'],\n        'vkuiInternalCardGrid',\n        spaced && styles['CardGrid--spaced'],\n        {\n          s: 'vkuiInternalCardGrid--size-s',\n          m: 'vkuiInternalCardGrid--size-m',\n          l: 'vkuiInternalCardGrid--size-l',\n        }[size],\n        sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","sizeXClassNames","none","COMPACT","CardGrid","children","size","spaced","className","restProps","sizeX","div","s","m","l","REGULAR"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,IAAMC;IACJC,IAAI;GACHF,SAASG,OAAO;AAWnB;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAMH;QALnBC,kBAAAA,+BACAC,MAAAA,gCAAO,0CACPC,QAAAA,oCAAS,KAAK,kBACdC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA2BT,iBAAAA,wCAAAA,eAAnBW,OAAAA,0CAAQ;IAEhB,qBACE,oBAACC,+CACKF;QACJD,WAAWV,2BAET,wBACAS,kCACA;YACEK,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAC,CAACR,KAAK,EACPI,UAAUV,SAASe,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF;QAGDH;AAGP,EAAE"}

package/dist/components/Cell/CellCheckbox/CellCheckbox.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { HasRef } from '../../../types';
 import { CellProps } from '../Cell';
-export type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;
-export declare const CellCheckbox: ({ className, style, ...restProps }: CellCheckboxProps) => JSX.Element;
+export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+}
+export declare const CellCheckbox: ({ className, style, getRef, ...restProps }: CellCheckboxProps) => JSX.Element;

package/dist/components/Cell/CellCheckbox/CellCheckbox.js

@@ -1,15 +1,17 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import * as React from "react";
 import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { usePlatform } from "../../../hooks/usePlatform";
 import { Platform } from "../../../lib/platform";
-import { VisuallyHiddenInput } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden";
 export var CellCheckbox = function(_param) {
-    var className = _param.className, style = _param.style, restProps = _object_without_properties(_param, [
+    var className = _param.className, style = _param.style, getRef = _param.getRef, restProps = _object_without_properties(_param, [
         "className",
-        "style"
+        "style",
+        "getRef"
     ]);
     var platform = usePlatform();
     var IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
@@ -17,10 +19,12 @@ export var CellCheckbox = function(_param) {
     return /*#__PURE__*/ React.createElement("span", {
         className: className,
         style: style
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, _object_spread({
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, _object_spread_props(_object_spread({}, restProps), {
+        Component: "input",
+        type: "checkbox",
         className: "vkuiCellCheckbox__input",
-        type: "checkbox"
-    }, restProps)), /*#__PURE__*/ React.createElement("span", {
+        getRootRef: getRef
+    })), /*#__PURE__*/ React.createElement("span", {
         className: classNames("vkuiCellCheckbox__icon", "vkuiCellCheckbox__icon--off"),
         "aria-hidden": true
     }, /*#__PURE__*/ React.createElement(IconOff, null)), /*#__PURE__*/ React.createElement("span", {

package/dist/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={className} style={style}>\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHiddenInput","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn","span","type","aria-hidden"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,mBAAmB,QAAQ,gDAAgD;AAOpF,OAAO,IAAMC,eAAe,iBAA2D;QAAxDC,mBAAAA,WAAWC,eAAAA,OAAUC;QAArBF;QAAWC;;IACxC,IAAME,WAAWP;IAEjB,IAAMQ,UACJD,aAAaN,SAASQ,GAAG,IAAIF,aAAaN,SAASS,KAAK,GACpDb,uBACAF,iBAAiB;IAEvB,IAAMgB,SACJJ,aAAaN,SAASQ,GAAG,IAAIF,aAAaN,SAASS,KAAK,GACpDZ,sBACAF,gBAAgB;IAEtB,qBACE,oBAACgB;QAAKR,WAAWA;QAAWC,OAAOA;qBACjC,oBAACH;QACCE,SAAS;QACTS,MAAK;OACDP,2BAEN,oBAACM;QACCR,WAAWL;QACXe,eAAAA,IAAW;qBAEX,oBAACN,+BAEH,oBAACI;QACCR,WAAWL;QACXe,eAAAA,IAAW;qBAEX,oBAACH;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef } from '../../../types';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\nexport const CellCheckbox = ({ className, style, getRef, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span className={className} style={style}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHidden","CellCheckbox","className","style","getRef","restProps","platform","IconOff","IOS","VKCOM","IconOn","span","Component","type","getRootRef","aria-hidden"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,cAAc,QAAQ,sCAAsC;AASrE,OAAO,IAAMC,eAAe,iBAAmE;QAAhEC,mBAAAA,WAAWC,eAAAA,OAAOC,gBAAAA,QAAWC;QAA7BH;QAAWC;QAAOC;;IAC/C,IAAME,WAAWR;IAEjB,IAAMS,UACJD,aAAaP,SAASS,GAAG,IAAIF,aAAaP,SAASU,KAAK,GACpDd,uBACAF,iBAAiB;IAEvB,IAAMiB,SACJJ,aAAaP,SAASS,GAAG,IAAIF,aAAaP,SAASU,KAAK,GACpDb,sBACAF,gBAAgB;IAEtB,qBACE,oBAACiB;QAAKT,WAAWA;QAAWC,OAAOA;qBACjC,oBAACH,wDACKK;QACJO,WAAU;QACVC,MAAK;QACLX,SAAS;QACTY,YAAYV;uBAEd,oBAACO;QACCT,WAAWL;QACXkB,eAAAA,IAAW;qBAEX,oBAACR,+BAEH,oBAACI;QACCT,WAAWL;QACXkB,eAAAA,IAAW;qBAEX,oBAACL;AAIT,EAAE"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -5,8 +5,9 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     description?: React.ReactNode;
     indeterminate?: boolean;
     defaultIndeterminate?: boolean;
+    titleAfter?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, ...restProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => JSX.Element;

package/dist/components/Checkbox/Checkbox.js

@@ -14,7 +14,7 @@ import { Platform } from "../../lib/platform";
 import { warnOnce } from "../../lib/warnOnce";
 import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { Footnote } from "../Typography/Footnote/Footnote";
-import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 var _obj;
 var sizeYClassNames = (_obj = {
     none: "vkuiCheckbox--sizeY-none"
@@ -23,7 +23,7 @@ var warn = warnOnce("Checkbox");
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */ export var Checkbox = function(_param) {
-    var children = _param.children, className = _param.className, style = _param.style, getRootRef = _param.getRootRef, getRef = _param.getRef, description = _param.description, indeterminate = _param.indeterminate, defaultIndeterminate = _param.defaultIndeterminate, hoverMode = _param.hoverMode, activeMode = _param.activeMode, hasHover = _param.hasHover, hasActive = _param.hasActive, focusVisibleMode = _param.focusVisibleMode, onChange = _param.onChange, restProps = _object_without_properties(_param, [
+    var children = _param.children, className = _param.className, style = _param.style, getRootRef = _param.getRootRef, getRef = _param.getRef, description = _param.description, indeterminate = _param.indeterminate, defaultIndeterminate = _param.defaultIndeterminate, hoverMode = _param.hoverMode, activeMode = _param.activeMode, hasHover = _param.hasHover, hasActive = _param.hasActive, focusVisibleMode = _param.focusVisibleMode, onChange = _param.onChange, titleAfter = _param.titleAfter, restProps = _object_without_properties(_param, [
         "children",
         "className",
         "style",
@@ -37,7 +37,8 @@ var warn = warnOnce("Checkbox");
         "hasHover",
         "hasActive",
         "focusVisibleMode",
-        "onChange"
+        "onChange",
+        "titleAfter"
     ]);
     var inputRef = useExternRef(getRef);
     var platform = usePlatform();
@@ -91,11 +92,12 @@ var warn = warnOnce("Checkbox");
         hasHover: hasHover,
         hasActive: hasActive,
         focusVisibleMode: focusVisibleMode
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, _object_spread_props(_object_spread({}, restProps), {
-        onChange: handleChange,
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, _object_spread_props(_object_spread({}, restProps), {
+        Component: "input",
         type: "checkbox",
+        onChange: handleChange,
         className: "vkuiCheckbox__input",
-        getRef: inputRef
+        getRootRef: inputRef
     })), /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiCheckbox__icon", "vkuiCheckbox__icon--on")
     }, platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Icon20CheckBoxOn, null) : /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeY.compact && /*#__PURE__*/ React.createElement(Icon20CheckBoxOn, {
@@ -124,8 +126,10 @@ var warn = warnOnce("Checkbox");
     }))), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiCheckbox__content"
     }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCheckbox__children"
-    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: "vkuiCheckbox__title"
+    }, /*#__PURE__*/ React.createElement("span", null, children), /*#__PURE__*/ React.createElement("div", {
+        className: "vkuiCheckbox__titleAfter"
+    }, titleAfter)), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
         className: "vkuiCheckbox__description"
     }, description)));
 };

package/dist/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 { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\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}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = '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      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles['Checkbox__input']}\n        getRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","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 { 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          <span>{children}</span>\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","VisuallyHidden","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","span"],"mappings":"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"}

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

@@ -37,6 +37,10 @@ export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsI
     closeAfterSelect?: boolean;
     fixDropdownWidth?: boolean;
     forceDropdownPortal?: boolean;
+    /**
+     * Иконка раскрывающегося списка
+     */
+    icon?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect

package/dist/components/ChipsSelect/ChipsSelect.js

@@ -37,7 +37,7 @@ var chipsSelectDefaultProps = _object_spread_props(_object_spread({}, chipsInput
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect
  */ export var ChipsSelect = function(props) {
     var propsWithDefault = _object_spread({}, chipsSelectDefaultProps, props);
-    var style = propsWithDefault.style, onFocus = propsWithDefault.onFocus, onKeyDown = propsWithDefault.onKeyDown, className = propsWithDefault.className, fetching = propsWithDefault.fetching, renderOption = propsWithDefault.renderOption, emptyText = propsWithDefault.emptyText, getRef = propsWithDefault.getRef, getRootRef = propsWithDefault.getRootRef, disabled = propsWithDefault.disabled, placeholder = propsWithDefault.placeholder, tabIndex = propsWithDefault.tabIndex, getOptionValue = propsWithDefault.getOptionValue, getOptionLabel = propsWithDefault.getOptionLabel, showSelected = propsWithDefault.showSelected, getNewOptionData = propsWithDefault.getNewOptionData, renderChip = propsWithDefault.renderChip, popupDirection = propsWithDefault.popupDirection, creatable = propsWithDefault.creatable, filterFn = propsWithDefault.filterFn, inputValue = propsWithDefault.inputValue, creatableText = propsWithDefault.creatableText, closeAfterSelect = propsWithDefault.closeAfterSelect, onChangeStart = propsWithDefault.onChangeStart, before = propsWithDefault.before, options = propsWithDefault.options, fixDropdownWidth = propsWithDefault.fixDropdownWidth, forceDropdownPortal = propsWithDefault.forceDropdownPortal, restProps = _object_without_properties(propsWithDefault, [
+    var style = propsWithDefault.style, onFocus = propsWithDefault.onFocus, onKeyDown = propsWithDefault.onKeyDown, className = propsWithDefault.className, fetching = propsWithDefault.fetching, renderOption = propsWithDefault.renderOption, emptyText = propsWithDefault.emptyText, getRef = propsWithDefault.getRef, getRootRef = propsWithDefault.getRootRef, disabled = propsWithDefault.disabled, placeholder = propsWithDefault.placeholder, tabIndex = propsWithDefault.tabIndex, getOptionValue = propsWithDefault.getOptionValue, getOptionLabel = propsWithDefault.getOptionLabel, showSelected = propsWithDefault.showSelected, getNewOptionData = propsWithDefault.getNewOptionData, renderChip = propsWithDefault.renderChip, popupDirection = propsWithDefault.popupDirection, creatable = propsWithDefault.creatable, filterFn = propsWithDefault.filterFn, inputValue = propsWithDefault.inputValue, creatableText = propsWithDefault.creatableText, closeAfterSelect = propsWithDefault.closeAfterSelect, onChangeStart = propsWithDefault.onChangeStart, before = propsWithDefault.before, icon = propsWithDefault.icon, options = propsWithDefault.options, fixDropdownWidth = propsWithDefault.fixDropdownWidth, forceDropdownPortal = propsWithDefault.forceDropdownPortal, restProps = _object_without_properties(propsWithDefault, [
         "style",
         "onFocus",
         "onKeyDown",
@@ -63,6 +63,7 @@ var chipsSelectDefaultProps = _object_spread_props(_object_spread({}, chipsInput
         "closeAfterSelect",
         "onChangeStart",
         "before",
+        "icon",
         "options",
         "fixDropdownWidth",
         "forceDropdownPortal"
@@ -242,7 +243,7 @@ var chipsSelectDefaultProps = _object_spread_props(_object_spread({}, chipsInput
             // TODO: add label customization
             "aria-label": opened ? "Скрыть" : "Развернуть",
             onClick: toggleOpened
-        }, /*#__PURE__*/ React.createElement(DropdownIcon, {
+        }, icon !== null && icon !== void 0 ? icon : /*#__PURE__*/ React.createElement(DropdownIcon, {
             className: "vkuiChipsSelect__icon",
             opened: opened
         })),

package/dist/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\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    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    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(0);\n    onFocus!(e);\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) => {\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 = typeof nextIndex !== 'number' ? -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    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\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 && 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    }\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  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, 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: add label customization\n            aria-label={opened ? 'Скрыть' : 'Развернуть'}\n            onClick={toggleOpened}\n          >\n            <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          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","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","fixDropdownWidth","forceDropdownPortal","restProps","document","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","option","includes","useEffect","findIndex","value","renderChipWrapper","renderChipProps","onRemoveWrapper","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\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    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(0);\n    onFocus!(e);\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) => {\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 = typeof nextIndex !== 'number' ? -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    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\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 && 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    }\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  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, 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: 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          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","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","option","includes","useEffect","findIndex","value","renderChipWrapper","renderChipProps","onRemoveWrapper","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/components/Counter/Counter.js

@@ -2,7 +2,7 @@ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import * as React from "react";
-import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { classNames } from "@vkontakte/vkjs";
 import { Caption } from "../Typography/Caption/Caption";
 import { Headline } from "../Typography/Headline/Headline";
 var modeClassNames = {
@@ -30,13 +30,11 @@ var sizeClassNames = {
     }
     var CounterTypography = size === "s" ? Caption : Headline;
     var counterLevel = size === "s" ? "1" : "2";
-    return /*#__PURE__*/ React.createElement("span", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiCounter", modeClassNames[mode], sizeClassNames[size], className)
-    }), hasReactNode(children) && /*#__PURE__*/ React.createElement(CounterTypography, {
+    return /*#__PURE__*/ React.createElement(CounterTypography, _object_spread_props(_object_spread({}, restProps), {
         Component: "span",
-        className: "vkuiCounter__in",
+        className: classNames("vkuiInternalCounter", "vkuiCounter", modeClassNames[mode], sizeClassNames[size], className),
         level: counterLevel
-    }, children));
+    }), children);
 };
 
 //# sourceMappingURL=Counter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } 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    <span\n      {...restProps}\n      className={classNames(\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n    >\n      {hasReactNode(children) && (\n        <CounterTypography Component=\"span\" className={styles['Counter__in']} level={counterLevel}>\n          {children}\n        </CounterTypography>\n      )}\n    </span>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Caption","Headline","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","span","Component","level"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAYA;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAMH;6BALlBC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIlB,MAAMoB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO,IAAI;IACb,CAAC;IAED,IAAMK,oBAAoBN,SAAS,MAAMb,UAAUC,QAAQ;IAC3D,IAAMmB,eAAeP,SAAS,MAAM,MAAM,GAAG;IAE7C,qBACE,oBAACQ,gDACKL;QACJD,WAAWjB,0BAETI,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAGDhB,aAAae,2BACZ,oBAACK;QAAkBG,WAAU;QAAOP,SAAS;QAAyBQ,OAAOH;OAC1EN;AAKX,EAAE"}
+{"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","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;AAG3D,IAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,IAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAYA;;CAEC,GACD,OAAO,IAAMC,UAAU,iBAMH;6BALlBC,MAAAA,gCAAO,8CACPC,MAAAA,gCAAO,mBACPC,kBAAAA,UACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIjB,MAAMmB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO,IAAI;IACb,CAAC;IAED,IAAMK,oBAAoBN,SAAS,MAAMb,UAAUC,QAAQ;IAC3D,IAAMmB,eAAeP,SAAS,MAAM,MAAM,GAAG;IAE7C,qBACE,oBAACM,2DACKH;QACJK,WAAU;QACVN,WAAWhB,WACT,sCAEAG,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;QAENN;AAGP,EAAE"}

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

@@ -52,6 +52,9 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
     fetching?: boolean;
     onClose?: VoidFunction;
     onOpen?: VoidFunction;
+    /**
+     * Иконка раскрывающегося списка
+     */
     icon?: React.ReactNode;
     /**
      * Кастомная кнопка для очистки значения.

package/dist/components/CustomSelect/CustomSelect.js

@@ -398,7 +398,7 @@ var defaultOptions = [];
         selectFocused
     ]);
     var onInputChange = React.useCallback(function(e) {
-        // TODO v6 удалить `onInputChangeProp`.
+        // TODO [>=6]: удалить `onInputChangeProp`.
         if (onInputChangeProp) {
             var options = onInputChangeProp(e, optionsProp);
             if (options) {