@vkontakte/vkui 6.0.3 → 6.1.0

package/dist/components/ContentCard/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Card, CardProps } from '../Card/Card';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  subtitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  headerComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  text?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  subtitle,\n  header,\n  headerComponent = 'span',\n  text,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  hasHover = false,\n  hasActive = false,\n  ...restProps\n}: ContentCardProps) => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      style={style}\n      className={classNames(restProps.disabled && styles['ContentCard--disabled'], className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles['ContentCard__tappable']}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles['ContentCard__img']}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles['ContentCard__body']}>\n          {hasReactNode(subtitle) && (\n            <Caption\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__subtitle'])}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {subtitle}\n            </Caption>\n          )}\n          {hasReactNode(header) && (\n            <Headline\n              className={styles['ContentCard__text']}\n              weight=\"2\"\n              level=\"1\"\n              Component={headerComponent}\n            >\n              {header}\n            </Headline>\n          )}\n          {hasReactNode(text) && <Text className={styles['ContentCard__text']}>{text}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__caption'])}\n            >\n              {caption}\n            </Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Card","Tappable","Caption","Footnote","Headline","Text","ContentCard","subtitle","header","headerComponent","text","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","hasHover","hasActive","restProps","disabled","img","ref","div","weight","level","caps","Component"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,IAAI,QAAmB,eAAe;AAC/C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAmC/C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,QAAQ,EACRC,MAAM,EACNC,kBAAkB,MAAM,EACxBC,IAAI,EACJC,OAAO,EACP,aAAa;IACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;IACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EAEA,WADdC;QA1BHxB;QACAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAAC9B;QACCa,MAAMA;QACNE,YAAYA;QACZD,OAAOA;QACPF,WAAWd,WAAWiC,UAAUC,QAAQ,iCAAqCpB;qBAE7E,oBAACX,kDACK8B;QACJF,UAAUA;QACVC,WAAWA;QACXlB,SAAS;QAER,AAACM,CAAAA,OAAOC,MAAK,mBACZ,oBAACc;QACCC,KAAKlB;QACLJ,SAAS;QACTM,KAAKA;QACLC,QAAQA;QACRC,KAAKA;QACLG,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,QAAQA;QACRN,QAAQA;QACRR,OAAO;YAAEG;QAAU;QACnBI,OAAM;sBAGV,oBAACc;QAAIvB,SAAS;OACXb,aAAaQ,2BACZ,oBAACL;QACCU,WAAWd;QACXsC,QAAO;QACPC,OAAM;QACNC,MAAAA;OAEC/B,WAGJR,aAAaS,yBACZ,oBAACJ;QACCQ,SAAS;QACTwB,QAAO;QACPC,OAAM;QACNE,WAAW9B;OAEVD,SAGJT,aAAaW,uBAAS,oBAACL;QAAKO,SAAS;OAAgCF,OACrEX,aAAaY,0BACZ,oBAACR;QACCS,WAAWd;OAEVa;AAOf,EAAE"}
+{"version":3,"sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Card, CardProps } from '../Card/Card';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  subtitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   Позволяет поменять тег используемый для заголовка\n   */\n  headerComponent?: React.ElementType;\n  /**\n   Текст\n   */\n  text?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  subtitle,\n  header,\n  headerComponent = 'span',\n  text,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  fetchPriority,\n  hasHover = false,\n  hasActive = false,\n  ...restProps\n}: ContentCardProps) => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      style={style}\n      className={classNames(restProps.disabled && styles['ContentCard--disabled'], className)}\n    >\n      <Tappable\n        {...restProps}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles['ContentCard__tappable']}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles['ContentCard__img']}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            {...getFetchPriorityProp(fetchPriority)}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles['ContentCard__body']}>\n          {hasReactNode(subtitle) && (\n            <Caption\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__subtitle'])}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {subtitle}\n            </Caption>\n          )}\n          {hasReactNode(header) && (\n            <Headline\n              className={styles['ContentCard__text']}\n              weight=\"2\"\n              level=\"1\"\n              Component={headerComponent}\n            >\n              {header}\n            </Headline>\n          )}\n          {hasReactNode(text) && <Text className={styles['ContentCard__text']}>{text}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__caption'])}\n            >\n              {caption}\n            </Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","getFetchPriorityProp","Card","Tappable","Caption","Footnote","Headline","Text","ContentCard","subtitle","header","headerComponent","text","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","fetchPriority","hasHover","hasActive","restProps","disabled","img","ref","div","weight","level","caps","Component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,IAAI,QAAmB,eAAe;AAC/C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAmC/C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,QAAQ,EACRC,MAAM,EACNC,kBAAkB,MAAM,EACxBC,IAAI,EACJC,OAAO,EACP,aAAa;IACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;IACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,aAAa,EACbC,WAAW,KAAK,EAChBC,YAAY,KAAK,EAEA,WADdC;QA3BHzB;QACAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QAEAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,KAAC/B;QACCa,MAAMA;QACNE,YAAYA;QACZD,OAAOA;QACPF,WAAWf,WAAWmC,UAAUC,QAAQ,iCAAqCrB;kBAE7E,cAAA,MAACX,kDACK+B;YACJF,UAAUA;YACVC,WAAWA;YACXnB,SAAS;;gBAEPM,CAAAA,OAAOC,MAAK,mBACZ,KAACe;oBACCC,KAAKnB;oBACLJ,SAAS;oBACTM,KAAKA;oBACLC,QAAQA;oBACRC,KAAKA;oBACLG,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBC,OAAOA;oBACPC,QAAQA;mBACJ7B,qBAAqB8B;oBACzBP,QAAQA;oBACRR,OAAO;wBAAEG;oBAAU;oBACnBI,OAAM;;8BAGV,MAACe;oBAAIxB,SAAS;;wBACXd,aAAaS,2BACZ,KAACL;4BACCU,WAAWf;4BACXwC,QAAO;4BACPC,OAAM;4BACNC,IAAI;sCAEHhC;;wBAGJT,aAAaU,yBACZ,KAACJ;4BACCQ,SAAS;4BACTyB,QAAO;4BACPC,OAAM;4BACNE,WAAW/B;sCAEVD;;wBAGJV,aAAaY,uBAAS,KAACL;4BAAKO,SAAS;sCAAgCF;;wBACrEZ,aAAaa,0BACZ,KAACR;4BACCS,WAAWf;sCAEVc;;;;;;;AAOf,EAAE"}

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
     /**
@@ -12,5 +11,5 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Counter
  */
-export declare const Counter: ({ mode, size, children, className, ...restProps }: CounterProps) => React.JSX.Element | null;
+export declare const Counter: ({ mode, size, children, className, ...restProps }: CounterProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Counter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/components/Counter/Counter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkBxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACtE,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,sDAMjB,YAAY,6BAwBd,CAAC"}
+{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/components/Counter/Counter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAkBxD,MAAM,WAAW,YAAa,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC9E;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IACtE,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,sDAMjB,YAAY,mDAwBd,CAAC"}

package/dist/components/Counter/Counter.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Caption } from '../Typography/Caption/Caption';
@@ -30,11 +31,12 @@ const sizeClassNames = {
     }
     const CounterTypography = size === 's' ? Caption : Headline;
     const counterLevel = size === 's' ? '1' : '2';
-    return /*#__PURE__*/ React.createElement(CounterTypography, _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ _jsx(CounterTypography, _object_spread_props(_object_spread({}, restProps), {
         Component: "span",
         className: classNames('vkuiInternalCounter', "vkuiCounter", modeClassNames[mode], sizeClassNames[size], className),
-        level: counterLevel
-    }), children);
+        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 } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["React","classNames","Caption","Headline","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAYA;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EAEI,WADVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIjB,MAAMmB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMK,oBAAoBN,SAAS,MAAMb,UAAUC;IACnD,MAAMmB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM,2DACKH;QACJK,WAAU;QACVN,WAAWhB,WACT,sCAEAG,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;QAENN;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["React","classNames","Caption","Headline","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,MAAMC,iBAAiB;IACrBC,SAAS;IACTC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;AACT;AAEA,MAAMC,iBAAiB;IACrBC,CAAC;IACDC,CAAC;AACH;AAYA;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EAEI,WADVC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAIjB,MAAMmB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMK,oBAAoBN,SAAS,MAAMb,UAAUC;IACnD,MAAMmB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,KAACM,2DACKH;QACJK,WAAU;QACVN,WAAWhB,WACT,sCAEAG,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;kBAENN;;AAGP,EAAE"}

package/dist/components/CustomScrollView/CustomScrollView.d.ts

@@ -8,5 +8,5 @@ export interface CustomScrollViewProps extends React.AllHTMLAttributes<HTMLDivEl
     onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
     children: React.ReactNode;
 }
-export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, getRootRef, ...restProps }: CustomScrollViewProps) => React.JSX.Element;
+export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, getRootRef, ...restProps }: CustomScrollViewProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CustomScrollView.d.ts.map

package/dist/components/CustomScrollView/CustomScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAenF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,sBA8KvB,CAAC"}
+{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAenF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,4CA8KvB,CAAC"}

package/dist/components/CustomScrollView/CustomScrollView.js

@@ -1,5 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -148,25 +150,32 @@ export const CustomScrollView = (_param)=>{
         }
         subscribe(document);
     };
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
         className: classNames(className, "vkuiCustomScrollView", hasPointerClassName(hasPointer)),
         ref: getRootRef
-    }, restProps), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomScrollView__box",
-        tabIndex: -1,
-        ref: boxRef,
-        onScroll: scroll
-    }, children), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomScrollView__barY",
-        ref: barY,
-        onClick: stopPropagation
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiCustomScrollView__trackerY", !trackerVisible && "vkuiCustomScrollView__trackerY--hidden"),
-        onMouseEnter: autoHideScrollbar ? onTrackerMouseEnter : undefined,
-        onMouseLeave: autoHideScrollbar ? onTrackerMouseLeave : undefined,
-        ref: trackerY,
-        onMouseDown: onDragStart
-    })));
+    }, restProps), {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "vkuiCustomScrollView__box",
+                tabIndex: -1,
+                ref: boxRef,
+                onScroll: scroll,
+                children: children
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "vkuiCustomScrollView__barY",
+                ref: barY,
+                onClick: stopPropagation,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: classNames("vkuiCustomScrollView__trackerY", !trackerVisible && "vkuiCustomScrollView__trackerY--hidden"),
+                    onMouseEnter: autoHideScrollbar ? onTrackerMouseEnter : undefined,
+                    onMouseLeave: autoHideScrollbar ? onTrackerMouseLeave : undefined,
+                    ref: trackerY,
+                    onMouseDown: onDragStart
+                })
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=CustomScrollView.js.map

package/dist/components/CustomScrollView/CustomScrollView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case true:\n      return styles['CustomScrollView--hasPointer-true'];\n    case false:\n      return styles['CustomScrollView--hasPointer-false'];\n    case undefined:\n    default:\n      return styles['CustomScrollView--hasPointer-none'];\n  }\n}\n\nexport interface CustomScrollViewProps\n  extends React.AllHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n  getRootRef,\n  ...restProps\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n  const { hasPointer } = useAdaptivity();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div\n      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        {children}\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useEventListener","useExternRef","useDOM","useIsomorphicLayoutEffect","stopPropagation","useTrackerVisibility","hasPointerClassName","hasPointer","undefined","CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","ref","tabIndex","onClick","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nfunction hasPointerClassName(hasPointer: boolean | undefined) {\n  switch (hasPointer) {\n    case true:\n      return styles['CustomScrollView--hasPointer-true'];\n    case false:\n      return styles['CustomScrollView--hasPointer-false'];\n    case undefined:\n    default:\n      return styles['CustomScrollView--hasPointer-none'];\n  }\n}\n\nexport interface CustomScrollViewProps\n  extends React.AllHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n  getRootRef,\n  ...restProps\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n  const { hasPointer } = useAdaptivity();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div\n      className={classNames(className, styles['CustomScrollView'], hasPointerClassName(hasPointer))}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        {children}\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useEventListener","useExternRef","useDOM","useIsomorphicLayoutEffect","stopPropagation","useTrackerVisibility","hasPointerClassName","hasPointer","undefined","CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","ref","tabIndex","onClick","onMouseEnter","onMouseLeave","onMouseDown"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/components/CustomScrollView/useTrackerVisibility.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\n\n/**\n * Хук, который позволяет управлять видимостью ползунка скроллбара.\n * @param autoHideScrollbar - скрывать ли ползунок скроллбара\n * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается\n * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка\n */\nexport const useTrackerVisibility = (\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay = 500,\n): TrackerVisibilityProps => {\n  const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(\n    () => setTrackerVisible(false),\n    autoHideScrollbarDelay,\n  );\n\n  const onTrackerDragStart = React.useCallback(() => {\n    clearVisibilityTimeout();\n    setTrackerVisible(true);\n    isTrackerDragging.current = true;\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerDragStop = React.useCallback(() => {\n    isTrackerDragging.current = false;\n    if (!isMouseOver.current) {\n      setVisibilityTimeout();\n    }\n  }, [setVisibilityTimeout, isMouseOver]);\n\n  /**\n   * Позволяет \"запланировать\" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый\n   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд\n   */\n  const queueTrackerVisibility = React.useCallback(() => {\n    if (isTrackerDragging.current) {\n      return;\n    }\n    setTrackerVisible(true);\n    setVisibilityTimeout();\n  }, [setVisibilityTimeout]);\n\n  const onTrackerMouseEnter = React.useCallback(() => {\n    clearVisibilityTimeout();\n    isMouseOver.current = true;\n    setTrackerVisible(true);\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerMouseLeave = React.useCallback(() => {\n    queueTrackerVisibility();\n    isMouseOver.current = false;\n  }, [queueTrackerVisibility]);\n\n  const onTargetScroll = React.useCallback(() => {\n    queueTrackerVisibility();\n  }, [queueTrackerVisibility]);\n\n  return {\n    trackerVisible,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n    onTargetScroll,\n  };\n};\n\nexport interface TrackerOptionsProps {\n  /**\n   * Скрывать ли ползунок скроллбара\n   */\n  autoHideScrollbar?: boolean;\n  /**\n   * Через какое кол-во миллисекунд ползунок скроллбара скрывается\n   */\n  autoHideScrollbarDelay?: number;\n}\n\nexport interface TrackerVisibilityProps {\n  /**\n   * Отвечает за видимость ползунка\n   */\n  trackerVisible: boolean;\n  /**\n   * Функция для обработки события у блока со скроллом\n   */\n  onTargetScroll: (this: void) => void;\n  /**\n   * Функция для обработки начала drag event ползунка\n   */\n  onTrackerDragStart: (this: void) => void;\n  /**\n   * Функция для обработки окончания drag event ползунка\n   */\n  onTrackerDragStop: (this: void) => void;\n  /**\n   * Функция для обработки mouseLeave event ползунка\n   */\n  onTrackerMouseEnter: (this: void) => void;\n  /**\n   * Функция для обработки mouseEnter event ползунка\n   */\n  onTrackerMouseLeave: (this: void) => void;\n}\n"],"names":["React","useTimeout","useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","trackerVisible","setTrackerVisible","useState","isMouseOver","useRef","isTrackerDragging","set","setVisibilityTimeout","clear","clearVisibilityTimeout","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AAEpD;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,oBAAoB,KAAK,EACzBC,yBAAyB,GAAG;IAE5B,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGN,MAAMO,QAAQ,CAAC,CAACJ;IAC5D,MAAMK,cAAcR,MAAMS,MAAM,CAAC;IACjC,MAAMC,oBAAoBV,MAAMS,MAAM,CAAC;IAEvC,MAAM,EAAEE,KAAKC,oBAAoB,EAAEC,OAAOC,sBAAsB,EAAE,GAAGb,WACnE,IAAMK,kBAAkB,QACxBF;IAGF,MAAMW,qBAAqBf,MAAMgB,WAAW,CAAC;QAC3CF;QACAR,kBAAkB;QAClBI,kBAAkBO,OAAO,GAAG;IAC9B,GAAG;QAACH;KAAuB;IAE3B,MAAMI,oBAAoBlB,MAAMgB,WAAW,CAAC;QAC1CN,kBAAkBO,OAAO,GAAG;QAC5B,IAAI,CAACT,YAAYS,OAAO,EAAE;YACxBL;QACF;IACF,GAAG;QAACA;QAAsBJ;KAAY;IAEtC;;;GAGC,GACD,MAAMW,yBAAyBnB,MAAMgB,WAAW,CAAC;QAC/C,IAAIN,kBAAkBO,OAAO,EAAE;YAC7B;QACF;QACAX,kBAAkB;QAClBM;IACF,GAAG;QAACA;KAAqB;IAEzB,MAAMQ,sBAAsBpB,MAAMgB,WAAW,CAAC;QAC5CF;QACAN,YAAYS,OAAO,GAAG;QACtBX,kBAAkB;IACpB,GAAG;QAACQ;KAAuB;IAE3B,MAAMO,sBAAsBrB,MAAMgB,WAAW,CAAC;QAC5CG;QACAX,YAAYS,OAAO,GAAG;IACxB,GAAG;QAACE;KAAuB;IAE3B,MAAMG,iBAAiBtB,MAAMgB,WAAW,CAAC;QACvCG;IACF,GAAG;QAACA;KAAuB;IAE3B,OAAO;QACLd;QACAU;QACAG;QACAE;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\n\n/**\n * Хук, который позволяет управлять видимостью ползунка скроллбара.\n * @param autoHideScrollbar - скрывать ли ползунок скроллбара\n * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается\n * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка\n */\nexport const useTrackerVisibility = (\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay = 500,\n): TrackerVisibilityProps => {\n  const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(\n    () => setTrackerVisible(false),\n    autoHideScrollbarDelay,\n  );\n\n  const onTrackerDragStart = React.useCallback(() => {\n    clearVisibilityTimeout();\n    setTrackerVisible(true);\n    isTrackerDragging.current = true;\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerDragStop = React.useCallback(() => {\n    isTrackerDragging.current = false;\n    if (!isMouseOver.current) {\n      setVisibilityTimeout();\n    }\n  }, [setVisibilityTimeout, isMouseOver]);\n\n  /**\n   * Позволяет \"запланировать\" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый\n   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд\n   */\n  const queueTrackerVisibility = React.useCallback(() => {\n    if (isTrackerDragging.current) {\n      return;\n    }\n    setTrackerVisible(true);\n    setVisibilityTimeout();\n  }, [setVisibilityTimeout]);\n\n  const onTrackerMouseEnter = React.useCallback(() => {\n    clearVisibilityTimeout();\n    isMouseOver.current = true;\n    setTrackerVisible(true);\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerMouseLeave = React.useCallback(() => {\n    queueTrackerVisibility();\n    isMouseOver.current = false;\n  }, [queueTrackerVisibility]);\n\n  const onTargetScroll = React.useCallback(() => {\n    queueTrackerVisibility();\n  }, [queueTrackerVisibility]);\n\n  return {\n    trackerVisible,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n    onTargetScroll,\n  };\n};\n\nexport interface TrackerOptionsProps {\n  /**\n   * Скрывать ли ползунок скроллбара\n   */\n  autoHideScrollbar?: boolean;\n  /**\n   * Через какое кол-во миллисекунд ползунок скроллбара скрывается\n   */\n  autoHideScrollbarDelay?: number;\n}\n\nexport interface TrackerVisibilityProps {\n  /**\n   * Отвечает за видимость ползунка\n   */\n  trackerVisible: boolean;\n  /**\n   * Функция для обработки события у блока со скроллом\n   */\n  onTargetScroll: (this: void) => void;\n  /**\n   * Функция для обработки начала drag event ползунка\n   */\n  onTrackerDragStart: (this: void) => void;\n  /**\n   * Функция для обработки окончания drag event ползунка\n   */\n  onTrackerDragStop: (this: void) => void;\n  /**\n   * Функция для обработки mouseLeave event ползунка\n   */\n  onTrackerMouseEnter: (this: void) => void;\n  /**\n   * Функция для обработки mouseEnter event ползунка\n   */\n  onTrackerMouseLeave: (this: void) => void;\n}\n"],"names":["React","useTimeout","useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","trackerVisible","setTrackerVisible","useState","isMouseOver","useRef","isTrackerDragging","set","setVisibilityTimeout","clear","clearVisibilityTimeout","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AAEpD;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,oBAAoB,KAAK,EACzBC,yBAAyB,GAAG;IAE5B,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGN,MAAMO,QAAQ,CAAC,CAACJ;IAC5D,MAAMK,cAAcR,MAAMS,MAAM,CAAC;IACjC,MAAMC,oBAAoBV,MAAMS,MAAM,CAAC;IAEvC,MAAM,EAAEE,KAAKC,oBAAoB,EAAEC,OAAOC,sBAAsB,EAAE,GAAGb,WACnE,IAAMK,kBAAkB,QACxBF;IAGF,MAAMW,qBAAqBf,MAAMgB,WAAW,CAAC;QAC3CF;QACAR,kBAAkB;QAClBI,kBAAkBO,OAAO,GAAG;IAC9B,GAAG;QAACH;KAAuB;IAE3B,MAAMI,oBAAoBlB,MAAMgB,WAAW,CAAC;QAC1CN,kBAAkBO,OAAO,GAAG;QAC5B,IAAI,CAACT,YAAYS,OAAO,EAAE;YACxBL;QACF;IACF,GAAG;QAACA;QAAsBJ;KAAY;IAEtC;;;GAGC,GACD,MAAMW,yBAAyBnB,MAAMgB,WAAW,CAAC;QAC/C,IAAIN,kBAAkBO,OAAO,EAAE;YAC7B;QACF;QACAX,kBAAkB;QAClBM;IACF,GAAG;QAACA;KAAqB;IAEzB,MAAMQ,sBAAsBpB,MAAMgB,WAAW,CAAC;QAC5CF;QACAN,YAAYS,OAAO,GAAG;QACtBX,kBAAkB;IACpB,GAAG;QAACQ;KAAuB;IAE3B,MAAMO,sBAAsBrB,MAAMgB,WAAW,CAAC;QAC5CG;QACAX,YAAYS,OAAO,GAAG;IACxB,GAAG;QAACE;KAAuB;IAE3B,MAAMG,iBAAiBtB,MAAMgB,WAAW,CAAC;QACvCG;IACF,GAAG;QAACA;KAAuB;IAE3B,OAAO;QACLd;QACAU;QACAG;QACAE;QACAC;QACAC;IACF;AACF,EAAE"}

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

@@ -96,6 +96,6 @@ export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterfac
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */
-export declare function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(props: SelectProps<OptionInterfaceT>): React.JSX.Element;
+export declare function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(props: SelectProps<OptionInterfaceT>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CustomSelect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/CustomSelect/CustomSelect.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -52,7 +53,7 @@ function defaultRenderOptionFn(_param) {
     var { option } = _param, props = _object_without_properties(_param, [
         "option"
     ]);
-    return /*#__PURE__*/ React.createElement(CustomSelectOption, props);
+    return /*#__PURE__*/ _jsx(CustomSelectOption, _object_spread({}, props));
 }
 const handleOptionDown = (e)=>{
     e.preventDefault();
@@ -75,7 +76,7 @@ const defaultOptions = [];
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
  */ export function CustomSelect(props) {
     const [opened, setOpened] = React.useState(false);
-    const { before, name, className, getRef, getRootRef, popupDirection, style, onChange, children, onInputChange: onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', autoHideScrollbar, autoHideScrollbarDelay, searchable = false, renderOption: renderOptionProp = defaultRenderOptionFn, options: optionsProp = defaultOptions, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, icon: iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, ['aria-labelledby']: ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required } = props, restProps = _object_without_properties(props, [
+    const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, onInputChange: onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', autoHideScrollbar, autoHideScrollbarDelay, searchable = false, renderOption: renderOptionProp = defaultRenderOptionFn, options: optionsProp = defaultOptions, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, icon: iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, ['aria-labelledby']: ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required } = props, restProps = _object_without_properties(props, [
         "before",
         "name",
         "className",
@@ -126,7 +127,7 @@ const defaultOptions = [];
         var _props_value, _ref;
         return (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : allowClearButton ? '' : undefined;
     });
-    const [popperPlacement, setPopperPlacement] = React.useState(undefined);
+    const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
     const [options, setOptions] = React.useState(optionsProp);
     var _props_value;
     const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(findSelectedIndex(optionsProp, (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue, allowClearButton));
@@ -471,26 +472,26 @@ const defaultOptions = [];
     const renderOption = React.useCallback((option, index)=>{
         const hovered = index === focusedOptionIndex;
         const selected = index === selectedOptionIndex;
-        return /*#__PURE__*/ React.createElement(React.Fragment, {
-            key: `${option.value}`
-        }, renderOptionProp({
-            option,
-            hovered,
-            children: option.label,
-            selected,
-            disabled: option.disabled,
-            onClick: handleOptionClick,
-            onMouseDown: handleOptionDown,
-            // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.
-            // Потому что если при навигации с клавиатуры курсор наведён на
-            // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter
-            // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.
-            // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,
-            // а значит нельзя на них опираться, чтобы запретить обработку такого события.
-            // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
-            onMouseMove: focusOptionOnMouseMove,
-            id: `${popupAriaId}-${option.value}`
-        }));
+        return /*#__PURE__*/ _jsx(React.Fragment, {
+            children: renderOptionProp({
+                option,
+                hovered,
+                children: option.label,
+                selected,
+                disabled: option.disabled,
+                onClick: handleOptionClick,
+                onMouseDown: handleOptionDown,
+                // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.
+                // Потому что если при навигации с клавиатуры курсор наведён на
+                // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter
+                // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.
+                // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,
+                // а значит нельзя на них опираться, чтобы запретить обработку такого события.
+                // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
+                onMouseMove: focusOptionOnMouseMove,
+                id: `${popupAriaId}-${option.value}`
+            })
+        }, `${option.value}`);
     }, [
         focusedOptionIndex,
         handleOptionClick,
@@ -500,9 +501,10 @@ const defaultOptions = [];
         popupAriaId
     ]);
     const resolvedContent = React.useMemo(()=>{
-        const defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map(renderOption) : /*#__PURE__*/ React.createElement(Footnote, {
-            className: "vkuiCustomSelect__empty"
-        }, emptyText);
+        const defaultDropdownContent = (options === null || options === void 0 ? void 0 : options.length) > 0 ? options.map(renderOption) : /*#__PURE__*/ _jsx(Footnote, {
+            className: "vkuiCustomSelect__empty",
+            children: emptyText
+        });
         if (typeof renderDropdown === 'function') {
             return renderDropdown({
                 defaultDropdownContent
@@ -536,7 +538,7 @@ const defaultOptions = [];
         if (!clearButtonShown) {
             return null;
         }
-        return /*#__PURE__*/ React.createElement(ClearButton, {
+        return /*#__PURE__*/ _jsx(ClearButton, {
             className: iconProp === undefined ? "vkuiCustomSelect--clear-icon" : undefined,
             onClick: function clearSelectState() {
                 setNativeSelectValue('');
@@ -558,7 +560,7 @@ const defaultOptions = [];
         if (iconProp !== undefined) {
             return iconProp;
         }
-        return /*#__PURE__*/ React.createElement(DropdownIcon, {
+        return /*#__PURE__*/ _jsx(DropdownIcon, {
             className: clearButtonShown ? "vkuiCustomSelect__dropdown-icon" : undefined,
             opened: opened
         });
@@ -567,7 +569,12 @@ const defaultOptions = [];
         iconProp,
         opened
     ]);
-    const afterIcons = (icon || clearButtonShown) && /*#__PURE__*/ React.createElement(React.Fragment, null, clearButton, icon);
+    const afterIcons = (icon || clearButtonShown) && /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            clearButton,
+            icon
+        ]
+    });
     const { document } = useDOM();
     const passClickAndFocusToInputOnClick = React.useCallback((e)=>{
         // Раньше внешней оберткой CustomSelect был <label>, что позволяло по клику в любую область CustomSelect,
@@ -615,70 +622,81 @@ const defaultOptions = [];
         'aria-autocomplete': 'none'
     };
     const focusWithin = useFocusWithin(handleRootRef);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiCustomSelect", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         style: style,
         ref: handleRootRef,
         onClick: passClickAndFocusToInputOnClick,
-        onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea
-    }, focusWithin && selected && !opened && /*#__PURE__*/ React.createElement(VisuallyHidden, {
-        "aria-live": "polite"
-    }, selected.label), /*#__PURE__*/ React.createElement(CustomSelectInput, _object_spread_props(_object_spread({
-        autoComplete: "off",
-        autoCapitalize: "none",
-        autoCorrect: "off",
-        spellCheck: "false"
-    }, restProps, selectInputAriaProps), {
-        getRef: selectInputRef,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        className: openedClassNames,
-        readOnly: !searchable,
-        fetching: fetching,
-        value: inputValue,
-        onKeyUp: handleKeyUp,
-        onKeyDown: handleKeyDownSelect,
-        onChange: onInputChange,
-        onClick: onClick,
-        before: before,
-        after: afterIcons,
-        selectType: selectType
-    }), selected === null || selected === void 0 ? void 0 : selected.label), /*#__PURE__*/ React.createElement("select", {
-        ref: selectElRef,
-        name: name,
-        onChange: onNativeSelectChange,
-        onBlur: props.onBlur,
-        onFocus: props.onFocus,
-        onClick: props.onClick,
-        value: nativeSelectValue,
-        "aria-hidden": true,
-        className: "vkuiCustomSelect__control",
-        "data-testid": nativeSelectTestId,
-        required: required
-    }, allowClearButton && /*#__PURE__*/ React.createElement("option", {
-        key: "",
-        value: ""
-    }), optionsProp.map((item)=>/*#__PURE__*/ React.createElement("option", {
-            key: `${item.value}`,
-            value: item.value
-        }))), opened && /*#__PURE__*/ React.createElement(CustomSelectDropdown, {
-        targetRef: containerRef,
-        placement: popupDirection,
-        scrollBoxRef: setScrollBoxRef,
-        onPlacementChange: setPopperPlacement,
-        onMouseLeave: resetFocusedOption,
-        fetching: fetching,
-        offsetDistance: dropdownOffsetDistance,
-        autoWidth: dropdownAutoWidth,
-        forcePortal: forceDropdownPortal,
-        autoHideScrollbar: autoHideScrollbar,
-        autoHideScrollbarDelay: autoHideScrollbarDelay,
-        noMaxHeight: noMaxHeight,
-        role: "listbox",
-        id: popupAriaId,
-        "aria-labelledby": ariaLabelledBy,
-        tabIndex: -1
-    }, resolvedContent));
+        onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
+        children: [
+            focusWithin && selected && !opened && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                "aria-live": "polite",
+                children: selected.label
+            }),
+            /*#__PURE__*/ _jsx(CustomSelectInput, _object_spread_props(_object_spread({
+                autoComplete: "off",
+                autoCapitalize: "none",
+                autoCorrect: "off",
+                spellCheck: "false"
+            }, restProps, selectInputAriaProps), {
+                getRef: selectInputRef,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                className: openedClassNames,
+                readOnly: !searchable,
+                fetching: fetching,
+                value: inputValue,
+                onKeyUp: handleKeyUp,
+                onKeyDown: handleKeyDownSelect,
+                onChange: onInputChange,
+                onClick: onClick,
+                before: before,
+                after: afterIcons,
+                selectType: selectType,
+                children: selected === null || selected === void 0 ? void 0 : selected.label
+            })),
+            /*#__PURE__*/ _jsxs("select", {
+                ref: selectElRef,
+                name: name,
+                onChange: onNativeSelectChange,
+                onBlur: props.onBlur,
+                onFocus: props.onFocus,
+                onClick: props.onClick,
+                value: nativeSelectValue,
+                "aria-hidden": true,
+                className: "vkuiCustomSelect__control",
+                "data-testid": nativeSelectTestId,
+                required: required,
+                children: [
+                    allowClearButton && /*#__PURE__*/ _jsx("option", {
+                        value: ""
+                    }, ""),
+                    optionsProp.map((item)=>/*#__PURE__*/ _jsx("option", {
+                            value: item.value
+                        }, `${item.value}`))
+                ]
+            }),
+            opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
+                targetRef: containerRef,
+                placement: popupDirection,
+                scrollBoxRef: setScrollBoxRef,
+                onPlacementChange: setPopperPlacement,
+                onMouseLeave: resetFocusedOption,
+                fetching: fetching,
+                offsetDistance: dropdownOffsetDistance,
+                autoWidth: dropdownAutoWidth,
+                forcePortal: forceDropdownPortal,
+                autoHideScrollbar: autoHideScrollbar,
+                autoHideScrollbarDelay: autoHideScrollbarDelay,
+                noMaxHeight: noMaxHeight,
+                role: "listbox",
+                id: popupAriaId,
+                "aria-labelledby": ariaLabelledBy,
+                tabIndex: -1,
+                children: resolvedContent
+            })
+        ]
+    });
 }
 
 //# sourceMappingURL=CustomSelect.js.map