@vkontakte/vkui 5.5.0 → 5.5.2

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

@@ -26,18 +26,15 @@ export interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRo
      */
     before?: React.ReactNode;
     /**
-     * Заголовок. <br />
-     * При использовании этого свойства рекомендуется не указывать `text`.
+     * Заголовок.
      */
     header?: React.ReactNode;
     /**
-     * Подзаголовок. <br />
-     * При использовании этого свойства рекомендуется не указывать `text`.
+     * Подзаголовок.
      */
     subheader?: React.ReactNode;
     /**
-     * Текст баннера. <br />
-     * Это свойство следует использовать без указания `header` и `subheader`.
+     * Текст баннера.
      */
     text?: React.ReactNode;
     /**

package/dist/cjs/components/Banner/Banner.js

@@ -77,7 +77,9 @@ var Banner = function(_param) {
         role: "button"
     }, content, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__aside"
-    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, null))) : /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, {
+        className: "vkuiBanner__expand"
+    }))) : /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__in"
     }, content, asideMode === "dismiss" && /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiBanner__aside"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BA4FaA;;;eAAAA;;;;;;;+DA5FU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AA4Ef,IAAMA,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,mBAAmBhB,SAAS,MAAMiB,eAAQC;IAChD,IAAMC,sBAAsBnB,SAAS,MAAMoB,aAAOC;IAElD,IAAMC,iBAAiBxB,SAAS,UAAUyB,2BAAoBC;IAE9D,IAAMC,wBACJ,4CACG3B,SAAS,WAAWS,4BACnB,qBAACmB;QAAIC,eAAAA;QAAYhB,SAAS;OACvBJ,aAIJN,wBAAU,qBAACyB;QAAIf,SAAS;OAA6BV,uBAEtD,qBAACyB;QAAIf,SAAS;OACXiB,IAAAA,oBAAazB,yBACZ,qBAACa;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM;OACpEG,SAGJyB,IAAAA,oBAAaxB,4BACZ,qBAACe;QAAoBU,WAAU;QAAIlB,SAAS;OACzCP,YAGJwB,IAAAA,oBAAavB,uBACZ,qBAACe;QAAKS,WAAU;QAAIlB,SAAS;OAC1BN,OAGJuB,IAAAA,oBAAapB,YAAYwB,OAAMC,SAASC,MAAM1B,WAAW,mBACxD,qBAACkB;QAAIf,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,uDACKtB;QACJF,WAAWyB,IAAAA,gCAETtB,aAAauB,mBAASC,0BACtBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF8B,KAAK7B;QAEJV,cAAc,yBACb,qBAACwC;QACC/B,SAAS;QACTgC,YAAY7B,aAAauB,mBAASC,MAAM,YAAY;QACpDM,MAAK;OAEJnB,uBAED,qBAACC;QAAIf,SAAS;qBACZ,qBAACkC,8CAIL,qBAACnB;QAAIf,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAACwB;QAAIf,SAAS;qBACZ,qBAACmC;QACCC,cAAYrC;QACZC,SAAS;QACTqC,SAASvC;QACTwC,WAAU;QACVC,WAAW;OAEVpC,aAAauB,mBAASC,oBAAM,qBAAChB,sCAAoB,qBAAC6B;AAQnE"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron className={styles['Banner__expand']} />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","usePlatform","HeaderTypography","Title","Headline","SubheaderTypography","Text","Subhead","IconDismissIOS","Icon24DismissDark","Icon24DismissSubstract","content","div","aria-hidden","hasReactNode","Component","weight","level","React","Children","count","section","classNames","Platform","IOS","s","m","ref","Tappable","activeMode","role","Icon24Chevron","IconButton","aria-label","onClick","hoverMode","hasActive","Icon24Cancel"],"mappings":";;;;+BAyFaA;;;eAAAA;;;;;;;+DAzFU;qBAMhB;oBACkC;2BACb;wBACH;0BAEE;wBACF;wBACA;uBACD;oBACH;qBACC;AAyEf,IAAMA,SAAS;6BACpBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,mBAAmBhB,SAAS,MAAMiB,eAAQC;IAChD,IAAMC,sBAAsBnB,SAAS,MAAMoB,aAAOC;IAElD,IAAMC,iBAAiBxB,SAAS,UAAUyB,2BAAoBC;IAE9D,IAAMC,wBACJ,4CACG3B,SAAS,WAAWS,4BACnB,qBAACmB;QAAIC,eAAAA;QAAYhB,SAAS;OACvBJ,aAIJN,wBAAU,qBAACyB;QAAIf,SAAS;OAA6BV,uBAEtD,qBAACyB;QAAIf,SAAS;OACXiB,IAAAA,oBAAazB,yBACZ,qBAACa;QAAiBa,WAAU;QAAIC,QAAO;QAAIC,OAAO/B,SAAS,MAAM,MAAM;OACpEG,SAGJyB,IAAAA,oBAAaxB,4BACZ,qBAACe;QAAoBU,WAAU;QAAIlB,SAAS;OACzCP,YAGJwB,IAAAA,oBAAavB,uBACZ,qBAACe;QAAKS,WAAU;QAAIlB,SAAS;OAC1BN,OAGJuB,IAAAA,oBAAapB,YAAYwB,OAAMC,SAASC,MAAM1B,WAAW,mBACxD,qBAACkB;QAAIf,SAAS;OAA8BH;IAMpD,qBACE,qBAAC2B,uDACKtB;QACJF,WAAWyB,IAAAA,gCAETtB,aAAauB,mBAASC,0BACtBxC,SAAS,qCACT;YACEyC,CAAC;YACDC,CAAC;QACH,CAAC,CAACxC,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEF8B,KAAK7B;QAEJV,cAAc,yBACb,qBAACwC;QACC/B,SAAS;QACTgC,YAAY7B,aAAauB,mBAASC,MAAM,YAAY;QACpDM,MAAK;OAEJnB,uBAED,qBAACC;QAAIf,SAAS;qBACZ,qBAACkC;QAAclC,SAAS;yBAI5B,qBAACe;QAAIf,SAAS;OACXc,SAEAvB,cAAc,2BACb,qBAACwB;QAAIf,SAAS;qBACZ,qBAACmC;QACCC,cAAYrC;QACZC,SAAS;QACTqC,SAASvC;QACTwC,WAAU;QACVC,WAAW;OAEVpC,aAAauB,mBAASC,oBAAM,qBAAChB,sCAAoB,qBAAC6B;AAQnE"}

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

@@ -15,4 +15,4 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, ...restProps }: FormItemProps) => React.JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, ...restProps }: FormItemProps) => React.JSX.Element;

package/dist/cjs/components/FormItem/FormItem.js

@@ -25,7 +25,7 @@ var sizeYClassNames = _define_property._({
     none: (0, _vkjs.classNames)("vkuiFormItem--sizeY-none", "vkuiInternalFormItem--sizeY-none")
 }, _adaptivity.SizeType.COMPACT, (0, _vkjs.classNames)("vkuiFormItem--sizeY-compact", "vkuiInternalFormItem--sizeY-compact"));
 var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties._(_param, [
+    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, restProps = _object_without_properties._(_param, [
         "children",
         "top",
         "bottom",
@@ -35,12 +35,15 @@ var FormItem = function(_param) {
         "onRemove",
         "removePlaceholder",
         "getRootRef",
-        "className"
+        "className",
+        "htmlFor"
     ]);
     var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var wrappedChildren = /*#__PURE__*/ _react.createElement(_react.Fragment, null, (0, _vkjs.hasReactNode)(top) && /*#__PURE__*/ _react.createElement(_Subhead.Subhead, {
-        className: "vkuiFormItem__top"
+        className: "vkuiFormItem__top",
+        Component: htmlFor ? "label" : "h5",
+        htmlFor: htmlFor
     }, top), children, (0, _vkjs.hasReactNode)(bottom) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiFormItem__bottom"
     }, bottom));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","ref","error","valid","REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;+DAtCU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;wBACjB;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,8CAA2C;GAChDC,qBAASC,SAAUF,IAAAA,iDAElB;AAuBG,IAAMH,WAAW;QACtBM,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWC,gEACXC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACGC;QAVHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,4BAAaJ;IAC5B,IAA2BK,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,gBACJC,IAAAA,oBAAalB,sBAAQ,qBAACmB;QAAQV,SAAS;OAA4BT,MACnED,UACAmB,IAAAA,oBAAajB,yBAAW,qBAACmB;QAASX,SAAS;OAA+BR;IAI/E,qBACE,qBAACE,uDACKO;QACJW,KAAKV;QACLF,WAAWb,IAAAA,kCAET,wBACAM,WAAW,aACT,CAAA;YACEoB,OAAO1B,IAAAA,gDAEL;YAEF2B,OAAO3B,IAAAA,gDAEL;QAEJ,CAAA,CAAC,CAACM,OAAO,EACXY,UAAUjB,qBAAS2B,WAAW9B,eAAe,CAACoB,MAAM,EACpDI,IAAAA,oBAAalB,QACXJ,IAAAA,2CAAwC,kCAC1CQ,aAAaR,IAAAA,6CAA0C,oCACvDa;QAGDL,0BACC,qBAACqB;QACCC,OAAM;QACNrB,UAAU,SAACsB;YACT,IAAIhB,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQiB,SAAS;gBACnBvB,SAASsB,GAAGhB,OAAOiB;YACrB;QACF;QACArB,mBAAmBA;QACnBsB,QAAQzB,cAAc;qBAEtB,qBAAC0B;QACCrB,WAAWb,IAAAA,6CAA0C;OAEpDmB,oBAILA;AAIR"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","ref","error","valid","REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;+DAtCU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;wBACjB;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,8CAA2C;GAChDC,qBAASC,SAAUF,IAAAA,iDAElB;AAuBG,IAAMH,WAAW;QACtBM,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWC,gEACXC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACGC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,4BAAaL;IAC5B,IAA2BM,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,gBACJC,IAAAA,oBAAanB,sBACZ,qBAACoB;QACCX,SAAS;QACTN,WAAWO,UAAU,UAAU;QAC/BA,SAASA;OAERV,MAGJD,UACAoB,IAAAA,oBAAalB,yBAAW,qBAACoB;QAASZ,SAAS;OAA+BR;IAI/E,qBACE,qBAACE,uDACKQ;QACJW,KAAKV;QACLH,WAAWb,IAAAA,kCAET,wBACAM,WAAW,aACT,CAAA;YACEqB,OAAO3B,IAAAA,gDAEL;YAEF4B,OAAO5B,IAAAA,gDAEL;QAEJ,CAAA,CAAC,CAACM,OAAO,EACXa,UAAUlB,qBAAS4B,WAAW/B,eAAe,CAACqB,MAAM,EACpDI,IAAAA,oBAAanB,QACXJ,IAAAA,2CAAwC,kCAC1CQ,aAAaR,IAAAA,6CAA0C,oCACvDa;QAGDL,0BACC,qBAACsB;QACCC,OAAM;QACNtB,UAAU,SAACuB;YACT,IAAIhB,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQiB,SAAS;gBACnBxB,SAASuB,GAAGhB,OAAOiB;YACrB;QACF;QACAtB,mBAAmBA;QACnBuB,QAAQ1B,cAAc;qBAEtB,qBAAC2B;QACCtB,WAAWb,IAAAA,6CAA0C;OAEpDoB,oBAILA;AAIR"}

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

@@ -6,4 +6,4 @@ export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
-export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, ...restProps }: ModalCardProps) => React.JSX.Element;
+export declare const ModalCard: ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, getRootRef, ...restProps }: ModalCardProps) => React.JSX.Element;

package/dist/cjs/components/ModalCard/ModalCard.js

@@ -28,7 +28,7 @@ var platformClassNames = {
 };
 var warn = (0, _warnOnce.warnOnce)("ModalCard");
 var ModalCard = function(_param) {
-    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, nav = _param.nav, id = _param.id, className = _param.className, size = _param.size, restProps = _object_without_properties._(_param, [
+    var icon = _param.icon, header = _param.header, subheader = _param.subheader, children = _param.children, actions = _param.actions, onClose = _param.onClose, nav = _param.nav, id = _param.id, className = _param.className, size = _param.size, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
         "icon",
         "header",
         "subheader",
@@ -38,7 +38,8 @@ var ModalCard = function(_param) {
         "nav",
         "id",
         "className",
-        "size"
+        "size",
+        "getRootRef"
     ]);
     var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
     var platform = (0, _usePlatform.usePlatform)();
@@ -48,6 +49,7 @@ var ModalCard = function(_param) {
         id: id
     }, warn), _types.ModalType.CARD).refs;
     return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
+        ref: getRootRef,
         id: id,
         className: (0, _vkjs.classNames)("vkuiModalCard", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard--desktop", className)
     }), /*#__PURE__*/ _react.createElement(_ModalCardBase.ModalCardBase, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","subheader","children","actions","onClose","nav","id","className","size","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","ModalType","CARD","div","classNames","hasOwnProperty","ModalCardBase","getRootRef","innerElement"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;+DAxBU;oBACI;+CACqB;2BACpB;wBACS;wBACZ;6BACyB;gCACC;qBACzB;AAG1B,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMN,YAAY;QACvBO,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAcC,IAAAA,oEAAdD;IACR,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,eAAeC,OAAMC,WAAWC;IACtC,IAAM,AAAEC,OAASC,IAAAA,oCAAiBC,IAAAA,oBAAS;QAAEf,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOwB,iBAAUC,MAAjEJ;IAER,qBACE,qBAACK,mDACKd;QACJH,IAAIA;QACJC,WAAWiB,IAAAA,mCAET/B,mBAAmBgC,eAAeb,YAC9BnB,kBAAkB,CAACmB,SAAS,GAC5BnB,mBAAmBE,SACvBe,uCACAH;sBAGF,qBAACmB;QACCnB,SAAS;QACToB,YAAYT,KAAKU;QACjB7B,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWU,aAAaV;QACjCI,MAAMA;OAELN;AAIT"}
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles['ModalCard--ios'],\n  android: styles['ModalCard--android'],\n  vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  header,\n  subheader,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  className,\n  size,\n  getRootRef,\n  ...restProps\n}: ModalCardProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      id={id}\n      className={classNames(\n        styles['ModalCard'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles['ModalCard--desktop'],\n        className,\n      )}\n    >\n      <ModalCardBase\n        className={styles['ModalCard__in']}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        header={header}\n        subheader={subheader}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n      >\n        {children}\n      </ModalCardBase>\n    </div>\n  );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","ModalType","CARD","div","ref","classNames","hasOwnProperty","ModalCardBase","innerElement"],"mappings":";;;;+BAwBaA;;;eAAAA;;;;;;;+DAxBU;oBACI;+CACqB;2BACpB;wBACS;wBACZ;6BACyB;gCACC;qBACzB;AAG1B,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMN,YAAY;QACvBO,cAAAA,MACAC,gBAAAA,QACAC,mBAAAA,WACAC,kBAAAA,UACAC,iBAAAA,SACAC,iBAAAA,SACAC,aAAAA,KACAC,YAAAA,IACAC,mBAAAA,WACAC,cAAAA,MACAC,oBAAAA,YACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,YAAcC,IAAAA,oEAAdD;IACR,IAAME,WAAWC,IAAAA;IAEjB,IAAMC,eAAeC,OAAMC,WAAWC;IACtC,IAAM,AAAEC,OAASC,IAAAA,oCAAiBC,IAAAA,oBAAS;QAAEhB,KAAAA;QAAKC,IAAAA;IAAG,GAAGT,OAAOyB,iBAAUC,MAAjEJ;IAER,qBACE,qBAACK,mDACKd;QACJe,KAAKhB;QACLH,IAAIA;QACJC,WAAWmB,IAAAA,mCAETjC,mBAAmBkC,eAAed,YAC9BpB,kBAAkB,CAACoB,SAAS,GAC5BpB,mBAAmBE,SACvBgB,uCACAJ;sBAGF,qBAACqB;QACCrB,SAAS;QACTE,YAAYU,KAAKU;QACjB9B,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWW,aAAaX;QACjCI,MAAMA;OAELN;AAIT"}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
+export interface NativeSelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
     placeholder?: string;
     multiline?: boolean;
     selectType?: SelectType;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends React.SelectHTMLAttributes<HTMLSelectElement>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["NativeSelect","sizeYClassNames","none","SizeType","COMPACT","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","DropdownIcon","before","onChange","onChangeProp","value","valueProp","restProps","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","FormField","Component","classNames","REGULAR","after","select","ref","option","div","aria-hidden","SelectTypography"],"mappings":";;;;+BA0HSA;;;eAAAA;;;;;;;;;+DA1Hc;oBACI;6BACG;iCACI;4BACL;0BACJ;yCACiB;4BAEb;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAwBZ;;CAEC,GACD,IAAMJ,eAAe;QACnBK,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,qBAACC,iDACRC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;;IAGA,IAA0BG,qCAAAA,OAAMC,SAAS,SAAlCC,QAAmBF,oBAAZG,WAAYH;IAC1B,IAA0BA,sCAAAA,OAAMC,SAAS,YAAlCG,QAAmBJ,qBAAZK,WAAYL;IAC1B,IAA0BM,yCAAAA,IAAAA,sCAAkB;QAC1CzB,cAAAA;QACAO,UAAAA;QACAO,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBS,wBAAZX,WAAYW;IAM1B,IAAMC,YAAYC,IAAAA,4BAAatB;IAC/B,IAA2BuB,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhBC,IAAAA,sDAA0B;YACDJ;QAAvB,IAAMK,iBAAiBL,CAAAA,qBAAAA,UAAUM,qBAAVN,gCAAAA,KAAAA,IAAAA,mBAAmBO,OAAO,CAACP,UAAUM,QAAQE,cAAc;QAClF,IAAIH,gBAAgB;YAClBT,SAASS,eAAeI;YACxBX,SAASO,eAAef,UAAU,MAAMd,eAAe;QACzD;IACF,GAAG;QAACc;QAAOb;KAAS;IAEpB,qBACE,qBAACiC;QACCC,WAAU;QACVjC,WAAWkC,IAAAA,gCAET,4BACAzB,mCACAU,8BACAf,sCACAP,UAAU,wCACVA,UAAU,sCACV4B,UAAUhC,qBAAS0C,WAAW5C,eAAe,CAACkC,MAAM,EACpDzB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVM,QAAQA;QACR2B,OAAO7B;QACPD,QAAQA;qBAER,qBAAC+B,sDACKvB;QACJX,UAAUA;QACVH,SAAS;QACTU,UAAUA;QACVE,OAAOA;QACP0B,KAAKhB;QAEJxB,6BAAe,qBAACyC;QAAO3B,OAAM;OAAId,cACjCC,yBAEH,qBAACyC;QAAIxC,SAAS;QAA+ByC,eAAAA;qBAC3C,qBAACC;QAAiB1C,SAAS;QAA2BK,YAAYA;OAC/DY;AAKX"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["NativeSelect","sizeYClassNames","none","SizeType","COMPACT","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","DropdownIcon","before","onChange","onChangeProp","value","valueProp","restProps","React","useState","title","setTitle","empty","setEmpty","useEnsuredControl","selectRef","useExternRef","useAdaptivity","sizeY","useIsomorphicLayoutEffect","selectedOption","current","options","selectedIndex","text","FormField","Component","classNames","REGULAR","after","select","ref","option","div","aria-hidden","SelectTypography"],"mappings":";;;;+BA0HSA;;;eAAAA;;;;;;;;;+DA1Hc;oBACI;6BACG;iCACI;4BACL;0BACJ;yCACiB;4BAEb;yBACa;gCAET;AAGjC,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAwBZ;;CAEC,GACD,IAAMJ,eAAe;QACnBK,eAAAA,oCACAC,cAAAA,gDAAe,0BACfC,eAAAA,OACAC,qBAAAA,aACAC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,sCACAC,YAAAA,4CAAa,+BACbC,gBAAAA,6BACAC,MAAAA,8CAAO,qBAACC,iDACRC,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAE;;IAGA,IAA0BG,qCAAAA,OAAMC,SAAS,SAAlCC,QAAmBF,oBAAZG,WAAYH;IAC1B,IAA0BA,sCAAAA,OAAMC,SAAS,YAAlCG,QAAmBJ,qBAAZK,WAAYL;IAC1B,IAA0BM,yCAAAA,IAAAA,sCAAkB;QAC1CzB,cAAAA;QACAO,UAAAA;QACAO,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmBS,wBAAZX,WAAYW;IAM1B,IAAMC,YAAYC,IAAAA,4BAAatB;IAC/B,IAA2BuB,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhBC,IAAAA,sDAA0B;YACDJ;QAAvB,IAAMK,iBAAiBL,CAAAA,qBAAAA,UAAUM,qBAAVN,gCAAAA,KAAAA,IAAAA,mBAAmBO,OAAO,CAACP,UAAUM,QAAQE,cAAc;QAClF,IAAIH,gBAAgB;YAClBT,SAASS,eAAeI;YACxBX,SAASO,eAAef,UAAU,MAAMd,eAAe;QACzD;IACF,GAAG;QAACc;QAAOb;KAAS;IAEpB,qBACE,qBAACiC;QACCC,WAAU;QACVjC,WAAWkC,IAAAA,gCAET,4BACAzB,mCACAU,8BACAf,sCACAP,UAAU,wCACVA,UAAU,sCACV4B,UAAUhC,qBAAS0C,WAAW5C,eAAe,CAACkC,MAAM,EACpDzB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVM,QAAQA;QACR2B,OAAO7B;QACPD,QAAQA;qBAER,qBAAC+B,sDACKvB;QACJX,UAAUA;QACVH,SAAS;QACTU,UAAUA;QACVE,OAAOA;QACP0B,KAAKhB;QAEJxB,6BAAe,qBAACyC;QAAO3B,OAAM;OAAId,cACjCC,yBAEH,qBAACyC;QAAIxC,SAAS;QAA+ByC,eAAAA;qBAC3C,qBAACC;QAAiB1C,SAAS;QAA2BK,YAAYA;OAC/DY;AAKX"}

package/dist/cjs/components/PanelHeader/LegacyPanelHeaderContent.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { HasComponent } from '../../types';
+export interface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
+}
+/**
+ * TODO [>=6]: Удалить подкомпонент
+ * @deprecated
+ */
+export declare const LegacyPanelHeaderContent: {
+    ({ children, Component, id, }: LegacyPanelHeaderContentProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/PanelHeader/LegacyPanelHeaderContent.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LegacyPanelHeaderContent", {
+    enumerable: true,
+    get: function() {
+        return LegacyPanelHeaderContent;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _warnOnce = require("../../lib/warnOnce");
+var _Text = require("../Typography/Text/Text");
+var warn = (0, _warnOnce.warnOnce)("PanelHeader");
+var LegacyPanelHeaderContent = function(param) {
+    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
+    if (process.env.NODE_ENV === "development") {
+        warn("Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.");
+    }
+    var platform = (0, _usePlatform.usePlatform)();
+    return platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_Text.Text, {
+        weight: "2",
+        Component: Component,
+        id: id
+    }, children) : /*#__PURE__*/ _react.createElement(Component, {
+        className: "vkuiPanelHeader__content-in",
+        id: id
+    }, children);
+};
+LegacyPanelHeaderContent.displayName = "LegacyPanelHeaderContent";
+
+//# sourceMappingURL=LegacyPanelHeaderContent.js.map

package/dist/cjs/components/PanelHeader/LegacyPanelHeaderContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/PanelHeader/LegacyPanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent } from '../../types';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nexport interface LegacyPanelHeaderContentProps\n  extends React.HTMLAttributes<HTMLElement>,\n    HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nexport const LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n"],"names":["LegacyPanelHeaderContent","warn","warnOnce","children","Component","id","process","env","NODE_ENV","platform","usePlatform","Platform","VKCOM","Text","weight","className","displayName"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;+DAlBU;2BACK;wBACH;wBACA;oBAEJ;AAOrB,IAAMC,OAAOC,IAAAA,oBAAS;AAMf,IAAMF,2BAA2B;QACtCG,iBAAAA,mCACAC,WAAAA,0CAAY,2BACZC,WAAAA;IAEA,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1CP,KACE;IAEJ;IAEA,IAAMQ,WAAWC,IAAAA;IAEjB,OAAOD,aAAaE,mBAASC,sBAC3B,qBAACC;QAAKC,QAAO;QAAIV,WAAWA;QAAWC,IAAIA;OACxCF,0BAGH,qBAACC;QAAUW,SAAS;QAAqCV,IAAIA;OAC1DF;AAGP;AAEAH,yBAAyBgB,cAAc"}

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

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { HasComponent, HasRef, HasRootRef } from '../../types';
 export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     before?: React.ReactNode;
+    /**
+     * Добавляет элемент справа.
+     *
+     * При передаче нескольких элементов, расставляет отступы между ними.
+     */
     after?: React.ReactNode;
     separator?: boolean;
     transparent?: boolean;
@@ -25,10 +30,7 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
 export declare const PanelHeader: {
     ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, typographyProps, ...restProps }: PanelHeaderProps): React.JSX.Element;
     Content: {
-        ({ children, Component, id, }: LegacyPanelHeaderContentProps): React.JSX.Element;
+        ({ children, Component, id, }: import("./LegacyPanelHeaderContent").LegacyPanelHeaderContentProps): React.JSX.Element;
         displayName: string;
     };
 };
-interface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
-}
-export {};

package/dist/cjs/components/PanelHeader/PanelHeader.js

@@ -19,7 +19,6 @@ var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditio
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
-var _warnOnce = require("../../lib/warnOnce");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _FixedLayout = require("../FixedLayout/FixedLayout");
 var _ModalRootContext = require("../ModalRoot/ModalRootContext");
@@ -27,6 +26,7 @@ var _Separator = require("../Separator/Separator");
 var _Spacing = require("../Spacing/Spacing");
 var _TooltipContainer = require("../Tooltip/TooltipContainer");
 var _Text = require("../Typography/Text/Text");
+var _LegacyPanelHeaderContent = require("./LegacyPanelHeaderContent");
 var platformClassNames = {
     ios: (0, _vkjs.classNames)("vkuiPanelHeader--ios", "vkuiInternalPanelHeader--ios"),
     android: (0, _vkjs.classNames)("vkuiPanelHeader--android", "vkuiInternalPanelHeader--android"),
@@ -47,7 +47,7 @@ var PanelHeaderIn = function(param) {
     var typographyNode;
     // TODO [>=6]: Удалить условие
     if (/*#__PURE__*/ _react.isValidElement(children) && // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    children.type.displayName === LegacyPanelHeaderContent.displayName) {
+    children.type.displayName === _LegacyPanelHeaderContent.LegacyPanelHeaderContent.displayName) {
         typographyNode = children;
     } else {
         typographyNode = platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread._({
@@ -116,26 +116,6 @@ var PanelHeader = function(_param) {
         size: 16
     })));
 };
-var warn = (0, _warnOnce.warnOnce)("PanelHeader");
-/**
- * TODO [>=6]: Удалить подкомпонент
- * @deprecated
- */ var LegacyPanelHeaderContent = function(param) {
-    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
-    if (process.env.NODE_ENV === "development") {
-        warn("Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.");
-    }
-    var platform = (0, _usePlatform.usePlatform)();
-    return platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_Text.Text, {
-        weight: "2",
-        Component: Component,
-        id: id
-    }, children) : /*#__PURE__*/ _react.createElement(Component, {
-        className: "vkuiPanelHeader__content-in",
-        id: id
-    }, children);
-};
-LegacyPanelHeaderContent.displayName = "LegacyPanelHeaderContent";
-PanelHeader.Content = LegacyPanelHeaderContent;
+PanelHeader.Content = _LegacyPanelHeaderContent.LegacyPanelHeaderContent;
 
 //# sourceMappingURL=PanelHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\ninterface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nconst LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["PanelHeader","platformClassNames","ios","classNames","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","Platform","VKCOM","Text","weight","className","Fragment","TooltipContainer","fixed","div","WebviewType","INTERNAL","Separator","wide","visor","transparent","shadow","getRef","getRootRef","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","SizeType","COMPACT","ref","FixedLayout","vertical","compact","Spacing","size","warn","warnOnce","id","process","env","NODE_ENV","Content"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport { LegacyPanelHeaderContent } from './LegacyPanelHeaderContent';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["PanelHeader","platformClassNames","ios","classNames","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","Platform","VKCOM","Text","weight","className","Fragment","TooltipContainer","fixed","div","WebviewType","INTERNAL","Separator","wide","visor","transparent","shadow","getRef","getRootRef","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","SizeType","COMPACT","ref","FixedLayout","vertical","compact","Spacing","size","Content"],"mappings":"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"}

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

@@ -14,7 +14,7 @@ export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowCl
      */
     action?: 'click' | 'hover';
     /**
-     * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.
+     * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.
      */
     shown?: boolean;
     /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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

@@ -14,4 +14,4 @@ export interface TabbarItemProps extends React.AllHTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/TabbarItem
  */
-export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, className, ...restProps }: TabbarItemProps) => React.JSX.Element;
+export declare const TabbarItem: ({ children, selected, indicator, text, href, Component, disabled, className, getRootRef, ...restProps }: TabbarItemProps) => React.JSX.Element;

package/dist/cjs/components/TabbarItem/TabbarItem.js

@@ -21,7 +21,7 @@ var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var warn = (0, _warnOnce.warnOnce)("TabbarItem");
 var TabbarItem = function(_param) {
-    var children = _param.children, selected = _param.selected, indicator = _param.indicator, text = _param.text, href = _param.href, _param_Component = _param.Component, Component = _param_Component === void 0 ? href ? "a" : "button" : _param_Component, disabled = _param.disabled, className = _param.className, restProps = _object_without_properties._(_param, [
+    var children = _param.children, selected = _param.selected, indicator = _param.indicator, text = _param.text, href = _param.href, _param_Component = _param.Component, Component = _param_Component === void 0 ? href ? "a" : "button" : _param_Component, disabled = _param.disabled, className = _param.className, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
         "children",
         "selected",
         "indicator",
@@ -29,7 +29,8 @@ var TabbarItem = function(_param) {
         "href",
         "Component",
         "disabled",
-        "className"
+        "className",
+        "getRootRef"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     if (process.env.NODE_ENV === "development") {
@@ -39,6 +40,7 @@ var TabbarItem = function(_param) {
         }
     }
     return /*#__PURE__*/ _react.createElement(Component, _object_spread_props._(_object_spread._({}, restProps), {
+        ref: getRootRef,
         disabled: disabled,
         href: href,
         className: (0, _vkjs.classNames)("vkuiTabbarItem", platform === _platform.Platform.IOS && "vkuiTabbarItem--ios", platform === _platform.Platform.ANDROID && "vkuiTabbarItem--android", selected && "vkuiTabbarItem--selected", !!text && "vkuiTabbarItem--text", className)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,oBAAoBX,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBhB,KAAKiB,0BAAgBC,IAAI,CAACX,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACA,uDACKG;QACJF,UAAUA;QACVF,MAAMA;QACNG,WAAWU,IAAAA,oCAETR,aAAaS,mBAASC,8BACtBV,aAAaS,mBAASE,sCACtBnB,wCACA,CAAC,CAACE,gCACFI;sBAGF,qBAACc;QACCC,MAAK;QACLjB,WAAU;QACVC,UAAUA;QACViB,YACEd,aAAaS,mBAASC,2CAA+C;QAEvEK,mBAAmBf,aAAaS,mBAASC,MAAM,IAAI;QACnDM,UAAU;QACVlB,SAAS;sBAEX,qBAACmB;QAAInB,SAAS;qBACZ,qBAACmB;QAAInB,SAAS;OACXP,wBACD,qBAAC0B;QAAInB,WAAU;OACZoB,IAAAA,oBAAazB,cAAcA,aAG/BC,sBACC,qBAACyB;QAASvB,WAAU;QAAME,SAAS;QAA8BsB,QAAO;OACrE1B;AAMb"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  getRootRef,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["TabbarItem","warn","warnOnce","children","selected","indicator","text","href","Component","disabled","className","getRootRef","restProps","platform","usePlatform","process","env","NODE_ENV","hasAccessibleName","COMMON_WARNINGS","a11y","ref","classNames","Platform","IOS","ANDROID","Tappable","role","activeMode","activeEffectDelay","hasHover","div","hasReactNode","Footnote","weight"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACkB;2BACb;wBACH;wBACiB;wBAEjB;wBACA;AAkBzB,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMF,aAAa;QACxBG,kBAAAA,UACAC,kBAAAA,UACAC,mBAAAA,WACAC,cAAAA,MACAC,cAAAA,gCACAC,WAAAA,0CAAYD,OAAO,MAAM,6BACzBE,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IAEjB,IAAIC,QAAQC,IAAIC,aAAa,eAAe;QAC1C,IAAMC,oBAAoBZ,QAAQM,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACM,mBAAmB;YACtBjB,KAAKkB,0BAAgBC,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,qBACE,qBAACA,uDACKI;QACJS,KAAKV;QACLF,UAAUA;QACVF,MAAMA;QACNG,WAAWY,IAAAA,oCAETT,aAAaU,mBAASC,8BACtBX,aAAaU,mBAASE,sCACtBrB,wCACA,CAAC,CAACE,gCACFI;sBAGF,qBAACgB;QACCC,MAAK;QACLnB,WAAU;QACVC,UAAUA;QACVmB,YACEf,aAAaU,mBAASC,2CAA+C;QAEvEK,mBAAmBhB,aAAaU,mBAASC,MAAM,IAAI;QACnDM,UAAU;QACVpB,SAAS;sBAEX,qBAACqB;QAAIrB,SAAS;qBACZ,qBAACqB;QAAIrB,SAAS;OACXP,wBACD,qBAAC4B;QAAIrB,WAAU;OACZsB,IAAAA,oBAAa3B,cAAcA,aAG/BC,sBACC,qBAAC2B;QAASzB,WAAU;QAAME,SAAS;QAA8BwB,QAAO;OACrE5B;AAMb"}