@vkontakte/vkui 5.5.0 → 5.5.1

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   * Заголовок. <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 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":";;;;+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;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/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/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/components/Banner/Banner.js

@@ -68,7 +68,9 @@ import { Title } from "../Typography/Title/Title";
         role: "button"
     }, content, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiBanner__aside"
-    }, /*#__PURE__*/ React.createElement(Icon24Chevron, null))) : /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Icon24Chevron, {
+        className: "vkuiBanner__expand"
+    }))) : /*#__PURE__*/ React.createElement("div", {
         className: "vkuiBanner__in"
     }, content, asideMode === "dismiss" && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiBanner__aside"

package/dist/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":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAyElD;;CAEC,GACD,OAAO,IAAMC,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,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD;IAElD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMgC,wBACJ,0CACGpB,SAAS,WAAWS,4BACnB,oBAACY;QAAIC,eAAAA;QAAYT,SAAS;OACvBJ,aAIJN,wBAAU,oBAACkB;QAAIR,SAAS;OAA6BV,uBAEtD,oBAACkB;QAAIR,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBK,WAAU;QAAIV,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK0B,WAAU;QAAIV,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM0C,SAASC,MAAMjB,WAAW,mBACxD,oBAACW;QAAIR,SAAS;OAA8BH;IAMpD,qBACE,oBAACkB,mDACKb;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASqC,0BACtB7B,SAAS,qCACT;YACE8B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC7B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFmB,KAAKlB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACToB,YAAYjB,aAAaxB,SAASqC,MAAM,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIR,SAAS;qBACZ,oBAAC3B,uCAIL,oBAACmC;QAAIR,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACiB;QAAIR,SAAS;qBACZ,oBAACpB;QACC0C,cAAYvB;QACZC,SAAS;QACTuB,SAASzB;QACT0B,WAAU;QACVC,WAAW;OAEVtB,aAAaxB,SAASqC,oBAAM,oBAACV,sCAAoB,oBAAClC;AAQnE,EAAE"}
+{"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 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":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAyElD;;CAEC,GACD,OAAO,IAAMC,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,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH;IAChD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD;IAElD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC;IAE9D,IAAMgC,wBACJ,0CACGpB,SAAS,WAAWS,4BACnB,oBAACY;QAAIC,eAAAA;QAAYT,SAAS;OACvBJ,aAIJN,wBAAU,oBAACkB;QAAIR,SAAS;OAA6BV,uBAEtD,oBAACkB;QAAIR,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM;OACpEG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBK,WAAU;QAAIV,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK0B,WAAU;QAAIV,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM0C,SAASC,MAAMjB,WAAW,mBACxD,oBAACW;QAAIR,SAAS;OAA8BH;IAMpD,qBACE,oBAACkB,mDACKb;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASqC,0BACtB7B,SAAS,qCACT;YACE8B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC7B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFmB,KAAKlB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACToB,YAAYjB,aAAaxB,SAASqC,MAAM,YAAY;QACpDK,MAAK;OAEJd,uBAED,oBAACC;QAAIR,SAAS;qBACZ,oBAAC3B;QAAc2B,SAAS;yBAI5B,oBAACQ;QAAIR,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACiB;QAAIR,SAAS;qBACZ,oBAACpB;QACC0C,cAAYvB;QACZC,SAAS;QACTuB,SAASzB;QACT0B,WAAU;QACVC,WAAW;OAEVtB,aAAaxB,SAASqC,oBAAM,oBAACV,sCAAoB,oBAAClC;AAQnE,EAAE"}

package/dist/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/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":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","useState","title","setTitle","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","select","ref","option","div","aria-hidden"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO;AAwBZ;;CAEC,GACD,IAAMC,eAAe;QACnBC,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,oBAACnB,mCACRoB,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0B9B,mCAAAA,MAAMiC,SAAS,SAAlCC,QAAmBlC,oBAAZmC,WAAYnC;IAC1B,IAA0BA,oCAAAA,MAAMiC,SAAS,YAAlCG,QAAmBpC,qBAAZqC,WAAYrC;IAC1B,IAA0BG,sCAAAA,kBAAkB;QAC1CY,cAAAA;QACAO,UAAAA;QACAM,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmB3B,uBAAZyB,WAAYzB;IAM1B,IAAMmC,YAAYlC,aAAagB;IAC/B,IAA2BlB,iBAAAA,wCAAAA,eAAnBqC,OAAAA,0CAAQ;IAEhBjC,0BAA0B;YACDgC;QAAvB,IAAME,iBAAiBF,CAAAA,qBAAAA,UAAUG,qBAAVH,gCAAAA,KAAAA,IAAAA,mBAAmBI,OAAO,CAACJ,UAAUG,QAAQE,cAAc;QAClF,IAAIH,gBAAgB;YAClBL,SAASK,eAAeI;YACxBP,SAASG,eAAeV,UAAU,MAAMb,eAAe;QACzD;IACF,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACV;QACCqC,WAAU;QACV1B,WAAWlB,yBAET,4BACA0B,mCACAS,8BACAb,sCACAP,UAAU,wCACVA,UAAU,sCACVuB,UAAUlC,SAASyC,WAAWpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;qBAER,oBAACuB,kDACKhB;QACJV,UAAUA;QACVH,SAAS;QACTS,UAAUA;QACVE,OAAOA;QACPmB,KAAKX;QAEJrB,6BAAe,oBAACiC;QAAOpB,OAAM;OAAIb,cACjCC,yBAEH,oBAACiC;QAAIhC,SAAS;QAA+BiC,eAAAA;qBAC3C,oBAAC3C;QAAiBU,SAAS;QAA2BK,YAAYA;OAC/DU;AAKX;AAEA,SAASrB,YAAY,GAAG"}
+{"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":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","useState","title","setTitle","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","select","ref","option","div","aria-hidden"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AAGxE,IAAMC;IACJC,IAAI;GACHN,SAASO;AAwBZ;;CAEC,GACD,IAAMC,eAAe;QACnBC,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,oBAACnB,mCACRoB,gBAAAA,QACAC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACGE;QAhBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAA0B9B,mCAAAA,MAAMiC,SAAS,SAAlCC,QAAmBlC,oBAAZmC,WAAYnC;IAC1B,IAA0BA,oCAAAA,MAAMiC,SAAS,YAAlCG,QAAmBpC,qBAAZqC,WAAYrC;IAC1B,IAA0BG,sCAAAA,kBAAkB;QAC1CY,cAAAA;QACAO,UAAAA;QACAM,UAAUC;QACVC,OAAOC;IACT,QALOD,QAAmB3B,uBAAZyB,WAAYzB;IAM1B,IAAMmC,YAAYlC,aAAagB;IAC/B,IAA2BlB,iBAAAA,wCAAAA,eAAnBqC,OAAAA,0CAAQ;IAEhBjC,0BAA0B;YACDgC;QAAvB,IAAME,iBAAiBF,CAAAA,qBAAAA,UAAUG,qBAAVH,gCAAAA,KAAAA,IAAAA,mBAAmBI,OAAO,CAACJ,UAAUG,QAAQE,cAAc;QAClF,IAAIH,gBAAgB;YAClBL,SAASK,eAAeI;YACxBP,SAASG,eAAeV,UAAU,MAAMb,eAAe;QACzD;IACF,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACV;QACCqC,WAAU;QACV1B,WAAWlB,yBAET,4BACA0B,mCACAS,8BACAb,sCACAP,UAAU,wCACVA,UAAU,sCACVuB,UAAUlC,SAASyC,WAAWpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;qBAER,oBAACuB,kDACKhB;QACJV,UAAUA;QACVH,SAAS;QACTS,UAAUA;QACVE,OAAOA;QACPmB,KAAKX;QAEJrB,6BAAe,oBAACiC;QAAOpB,OAAM;OAAIb,cACjCC,yBAEH,oBAACiC;QAAIhC,SAAS;QAA+BiC,eAAAA;qBAC3C,oBAAC3C;QAAiBU,SAAS;QAA2BK,YAAYA;OAC/DU;AAKX;AAEA,SAASrB,YAAY,GAAG"}

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

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

package/dist/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":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","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":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}