@vkontakte/vkui 6.1.2 → 6.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { NavPanelIdContext } from '../NavIdContext/NavIdContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  ['compact']: styles['Panel--sizeX-compact'],\n  ['regular']: styles['Panel--sizeX-regular'],\n};\n\nconst stylesMode = {\n  none: styles['Panel--mode-none'],\n  plain: styles['Panel--mode-plain'],\n  card: styles['Panel--mode-card'],\n};\n\nexport interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  centered?: boolean;\n  /**\n   * Тип оформления панели.\n   *\n   * Позволяет переопределить тип оформления панели,\n   * заданный через адаптивность или свойство layout у [AppRoot](https://vkcom.github.io/VKUI/#/AppRoot),\n   * глобально задающим тип оформления макета.\n   *\n   * Если установлен `card` - Panel имеет фон отличный от фона контента.\n   * Позволяет компоненту [Group](https://vkcom.github.io/VKUI/#/Group) со свойством mode='card' точечно выглядеть как карточка.\n   * Тип `plain` — соответствует фону по умолчанию.\n   */\n  mode?: 'plain' | 'card';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  nav,\n  mode: modeProp,\n  ...restProps\n}: PanelProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = usePanelMode(modeProp, sizeX);\n\n  return (\n    <NavPanelIdContext.Provider value={restProps.id || nav}>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Panel'],\n          sizeXClassNames[sizeX],\n          centered && 'vkuiInternalPanel--centered',\n          stylesMode[mode],\n        )}\n      >\n        <Touch\n          Component={OnboardingTooltipContainer}\n          className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n        >\n          <div className={styles['Panel__in-before']} />\n          {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n          <div className={styles['Panel__in-after']} />\n        </Touch>\n      </RootComponent>\n    </NavPanelIdContext.Provider>\n  );\n};\n\nfunction usePanelMode(\n  modeProp: PanelProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (modeProp) {\n    return modeProp;\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n"],"names":["Panel","sizeXClassNames","none","stylesMode","plain","card","centered","children","nav","mode","modeProp","restProps","sizeX","useAdaptivity","usePanelMode","NavPanelIdContext","Provider","value","id","RootComponent","baseClassName","classNames","Touch","Component","OnboardingTooltipContainer","className","div","layout","React","useContext","AppRootContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBACI;+BACG;gCAIC;8BACG;4CACS;+BACb;uBACR;AAGtB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;IACX,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBD,IAAI;IACJE,KAAK;IACLC,IAAI;AACN;AAqBO,MAAML,QAAQ;QAAC,EACpBM,WAAW,KAAK,EAChBC,QAAQ,EACRC,GAAG,EACHC,MAAMC,QAAQ,EAEH,WADRC;QAJHL;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMJ,OAAOK,aAAaJ,UAAUE;IAEpC,qBACE,qBAACG,+BAAiB,CAACC,QAAQ;QAACC,OAAON,UAAUO,EAAE,IAAIV;kBACjD,cAAA,qBAACW,4BAAa,8CACRR;YACJS,eAAeC,IAAAA,gBAAU,eAEvBpB,eAAe,CAACW,MAAM,EACtBN,YAAY,+BACZH,UAAU,CAACM,KAAK;sBAGlB,cAAA,sBAACa,YAAK;gBACJC,WAAWC,sDAA0B;gBACrCC,WAAWJ,IAAAA,gBAAU,mBAAsB;;kCAE3C,qBAACK;wBAAID,SAAS;;oBACbnB,yBAAW,qBAACoB;wBAAID,SAAS;kCAA8BlB;yBAAkBA;kCAC1E,qBAACmB;wBAAID,SAAS;;;;;;AAKxB;AAEA,SAASX,aACPJ,QAA4B,EAC5BE,KAA8B;IAE9B,MAAM,EAAEe,MAAM,EAAE,GAAGC,OAAMC,UAAU,CAACC,8BAAc;IAElD,IAAIpB,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIiB,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIf,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { NavPanelIdContext } from '../NavIdContext/NavIdContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  ['compact']: styles['Panel--sizeX-compact'],\n  ['regular']: styles['Panel--sizeX-regular'],\n};\n\nconst stylesMode = {\n  none: styles['Panel--mode-none'],\n  plain: styles['Panel--mode-plain'],\n  card: styles['Panel--mode-card'],\n};\n\nexport interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  centered?: boolean;\n  /**\n   * Тип оформления панели.\n   *\n   * Позволяет переопределить тип оформления панели,\n   * заданный через адаптивность или свойство layout у [AppRoot](https://vkcom.github.io/VKUI/#/AppRoot),\n   * глобально задающим тип оформления макета.\n   *\n   * Если установлен `card` - Panel имеет фон отличный от фона контента.\n   * Позволяет компоненту [Group](https://vkcom.github.io/VKUI/#/Group) со свойством mode='card' точечно выглядеть как карточка.\n   * Тип `plain` — соответствует фону по умолчанию.\n   */\n  mode?: 'plain' | 'card';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  nav,\n  mode: modeProp,\n  ...restProps\n}: PanelProps) => {\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = usePanelMode(modeProp, sizeX);\n\n  return (\n    <NavPanelIdContext.Provider value={restProps.id || nav}>\n      <RootComponent\n        {...restProps}\n        baseClassName={classNames(\n          styles['Panel'],\n          sizeXClassNames[sizeX],\n          centered && 'vkuiInternalPanel--centered',\n          stylesMode[mode],\n        )}\n      >\n        <Touch\n          Component={OnboardingTooltipContainer}\n          className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n        >\n          <div className={styles['Panel__in-before']} />\n          {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n          <div className={styles['Panel__in-after']} />\n        </Touch>\n      </RootComponent>\n    </NavPanelIdContext.Provider>\n  );\n};\n\nfunction usePanelMode(\n  modeProp: PanelProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (modeProp) {\n    return modeProp;\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n"],"names":["Panel","sizeXClassNames","none","stylesMode","plain","card","centered","children","nav","mode","modeProp","restProps","sizeX","useAdaptivity","usePanelMode","NavPanelIdContext","Provider","value","id","RootComponent","baseClassName","classNames","Touch","Component","OnboardingTooltipContainer","className","div","layout","React","useContext","AppRootContext"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBACI;+BACG;gCAIC;8BACG;4CACS;+BACb;uBACR;AAGtB,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;IACX,CAAC,UAAU;AACb;AAEA,MAAMC,aAAa;IACjBD,IAAI;IACJE,KAAK;IACLC,IAAI;AACN;AAqBO,MAAML,QAAQ;QAAC,EACpBM,WAAW,KAAK,EAChBC,QAAQ,EACRC,GAAG,EACHC,MAAMC,QAAQ,EAEH,WADRC;QAJHL;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMJ,OAAOK,aAAaJ,UAAUE;IAEpC,qBACE,qBAACG,+BAAiB,CAACC,QAAQ;QAACC,OAAON,UAAUO,EAAE,IAAIV;kBACjD,cAAA,qBAACW,4BAAa,8CACRR;YACJS,eAAeC,IAAAA,gBAAU,eAEvBpB,eAAe,CAACW,MAAM,EACtBN,YAAY,+BACZH,UAAU,CAACM,KAAK;sBAGlB,cAAA,sBAACa,YAAK;gBACJC,WAAWC,sDAA0B;gBACrCC,WAAWJ,IAAAA,gBAAU,mBAAsB;;kCAE3C,qBAACK;wBAAID,SAAS;;oBACbnB,yBAAW,qBAACoB;wBAAID,SAAS;kCAA8BlB;yBAAkBA;kCAC1E,qBAACmB;wBAAID,SAAS;;;;;;AAKxB;AAEA,SAASX,aACPJ,QAA4B,EAC5BE,KAA8B;IAE9B,MAAM,EAAEe,MAAM,EAAE,GAAGC,OAAMC,UAAU,CAACC,8BAAc;IAElD,IAAIpB,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIiB,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIf,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeader--ios'],\n  android: styles['PanelHeader--android'],\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nconst sizeYClassNames = {\n  none: styles['PanelHeader--sizeY-none'],\n  compact: styles['PanelHeader--sizeY-compact'],\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles['PanelHeader__content-in']} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles['PanelHeader__in']}>\n      <div className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}>\n        {before}\n      </div>\n      <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n      <div\n        className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        !float && classNames(styles['PanelHeader--static'], 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["PanelHeader","platformClassNames","ios","android","vkcom","classNames","sizeXClassNames","none","regular","sizeYClassNames","compact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","afterSlotProps","style","minWidth","typographyNode","Text","weight","className","OnboardingTooltipContainer","fixed","div","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","useAdaptivity","adaptiveSizeX","useAdaptivityConditionalRender","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","RootComponent","baseClassName","hasOwnProperty","FixedLayout","vertical","Separator","Spacing","size","wide"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAsHaA;;;eAAAA;;;;;;;;iEAtHU;sBACI;+BACG;gDACiB;6BACnB;uCAEM;6BACN;kCACK;4CACU;+BACb;2BACJ;yBACF;sBACH;AAGrB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,OAAOC,IAAAA,gBAAU,4BAA+B;AAClD;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBF,IAAI;IACJG,OAAO;AACT;AA8CA,MAAMC,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,kBAAkB,CAAC,CAAC,EAAsB;IAC1F,MAAM,EAAEC,YAAY,MAAM,EAAgB,GAAGD,iBAAdE,yCAAcF;QAArCC;;IACR,MAAM,EAAEE,yBAAyB,EAAEC,8BAA8B,EAAE,GAAGC,IAAAA,wCAAiB;IACvF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAC3D,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,iBACJ,CAACT,6BAA6BG,gBAC1B;QACEP,UAAUD;IACZ,IACA;QACEe,OAAO;YAAEC,UAAUV;QAA+B;IACpD;IACN,MAAMW,iBACJL,aAAa,wBACX,qBAACM,UAAI;QAACC,QAAO;QAAIhB,WAAWA;OAAeC;kBACxCH;wBAGH,qBAACE;QAAUiB,SAAS;OAAyChB;kBAC1DH;;IAIP,qBACE,sBAACoB,sDAA0B;QAACC,KAAK;QAACF,SAAS;;0BACzC,qBAACG;gBAAIH,WAAW5B,IAAAA,gBAAU,6BAAgC;0BACvDO;;0BAEH,qBAACwB;gBAAIH,SAAS;0BAAmCH;;0BACjD,qBAACM;gBACCH,WAAW5B,IAAAA,gBAAU,4BAA+B;eAChDsB;;;AAIZ;AAKO,MAAM3B,cAAc;QAAC,EAC1BY,MAAM,EACNE,QAAQ,EACRD,KAAK,EACLwB,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,YAAY,MAAM,EAClBC,MAAM,EACNC,MAAM,EACNC,UAAU,EACVP,KAAK,EACLpB,eAAe,EAEE,WADdE;QAXHL;QACAE;QACAD;QACAwB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAP;QACApB;;IAGA,MAAMU,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEiB,QAAQ,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxD,MAAM,EAAEF,OAAOG,aAAa,EAAE,GAAGC,IAAAA,8DAA8B;IAC/D,MAAMC,UAAUvB,aAAa;IAC7B,MAAMwB,UAAUd,UAAUe,YAAYf,QAAQ,CAACa;IAC/C,MAAMG,mBAAmBZ,cAAc,UAAUA,cAAc;IAC/D,MAAMa,yBAAyB,CAACf,SAASc;IACzC,MAAME,uBAAuB,CAAChB,SAAUE,CAAAA,cAAc,UAAUA,cAAc,SAAQ;IAEtF,qBACE,sBAACe,4BAAa,8CACRrC;QACJsC,eAAelD,IAAAA,gBAAU,qBAEvB,2BACAJ,mBAAmBuD,cAAc,CAAC/B,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,OAAO,EAC9BmC,yCACAE,qCACA,CAACH,SAAShC,IAAAA,gBAAU,6BAAgC,oCACpD+C,0BACE/C,IAAAA,gBAAU,0BAA6B,iCACzC,CAACO,UACCP,IAAAA,gBAAU,gCAAmC,uCAC/C,CAACQ,sCACDoC,qCACAN,UAAU,aAAarC,eAAe,CAACqC,MAAM,EAC7CC,UAAU,aAAanC,eAAe,CAACmC,MAAM;QAE/CF,YAAYO,UAAUP,aAAaD;;YAElCQ,wBACC,qBAACQ,wBAAW;gBACVxB,WAAW5B,IAAAA,gBAAU,4BAA+B;gBACpDqD,UAAS;gBACThB,YAAYD;0BAEZ,cAAA,qBAAC9B;oBAAcC,QAAQA;oBAAQC,OAAOA;oBAAOE,iBAAiBA;8BAC3DD;;+BAIL,qBAACH;gBAAcC,QAAQA;gBAAQC,OAAOA;gBAAOE,iBAAiBA;0BAC3DD;;YAGJ,CAACkC,yBACA;;oBACGI,0BAA0BN,cAAcpC,OAAO,kBAC9C,qBAACiD,oBAAS;wBAAC1B,WAAWa,cAAcpC,OAAO,CAACuB,SAAS;;oBAEtDoB,wBAAwBP,cAActC,OAAO,kBAC5C,qBAACoD,gBAAO;wBAAC3B,WAAWa,cAActC,OAAO,CAACyB,SAAS;wBAAE4B,MAAM;;;;YAIhEV,oBAAoBH,yBACnB,qBAACW,oBAAS;gBAAC1B,SAAS;gBAAoC6B,IAAI;;;;AAIpE"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasComponent, HasDataAttribute, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeader--ios'],\n  android: styles['PanelHeader--android'],\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nconst sizeYClassNames = {\n  none: styles['PanelHeader--sizeY-none'],\n  compact: styles['PanelHeader--sizeY-compact'],\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles['PanelHeader__content-in']} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles['PanelHeader__in']}>\n      <div className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}>\n        {before}\n      </div>\n      <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n      <div\n        className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        !float && classNames(styles['PanelHeader--static'], 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["PanelHeader","platformClassNames","ios","android","vkcom","classNames","sizeXClassNames","none","regular","sizeYClassNames","compact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","afterSlotProps","style","minWidth","typographyNode","Text","weight","className","OnboardingTooltipContainer","fixed","div","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","useAdaptivity","adaptiveSizeX","useAdaptivityConditionalRender","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","RootComponent","baseClassName","hasOwnProperty","FixedLayout","vertical","Separator","Spacing","size","wide"],"mappings":";;;;+BAsHaA;;;eAAAA;;;;;;;;iEAtHU;sBACI;+BACG;gDACiB;6BACnB;uCAEM;6BACN;kCACK;4CACU;+BACb;2BACJ;yBACF;sBACH;AAGrB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,OAAOC,IAAAA,gBAAU,4BAA+B;AAClD;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBF,IAAI;IACJG,OAAO;AACT;AA8CA,MAAMC,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,kBAAkB,CAAC,CAAC,EAAsB;IAC1F,MAAM,EAAEC,YAAY,MAAM,EAAgB,GAAGD,iBAAdE,yCAAcF;QAArCC;;IACR,MAAM,EAAEE,yBAAyB,EAAEC,8BAA8B,EAAE,GAAGC,IAAAA,wCAAiB;IACvF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAC3D,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,iBACJ,CAACT,6BAA6BG,gBAC1B;QACEP,UAAUD;IACZ,IACA;QACEe,OAAO;YAAEC,UAAUV;QAA+B;IACpD;IACN,MAAMW,iBACJL,aAAa,wBACX,qBAACM,UAAI;QAACC,QAAO;QAAIhB,WAAWA;OAAeC;kBACxCH;wBAGH,qBAACE;QAAUiB,SAAS;OAAyChB;kBAC1DH;;IAIP,qBACE,sBAACoB,sDAA0B;QAACC,KAAK;QAACF,SAAS;;0BACzC,qBAACG;gBAAIH,WAAW5B,IAAAA,gBAAU,6BAAgC;0BACvDO;;0BAEH,qBAACwB;gBAAIH,SAAS;0BAAmCH;;0BACjD,qBAACM;gBACCH,WAAW5B,IAAAA,gBAAU,4BAA+B;eAChDsB;;;AAIZ;AAKO,MAAM3B,cAAc;QAAC,EAC1BY,MAAM,EACNE,QAAQ,EACRD,KAAK,EACLwB,QAAQ,KAAK,EACbC,cAAc,KAAK,EACnBC,YAAY,MAAM,EAClBC,MAAM,EACNC,MAAM,EACNC,UAAU,EACVP,KAAK,EACLpB,eAAe,EAEE,WADdE;QAXHL;QACAE;QACAD;QACAwB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAP;QACApB;;IAGA,MAAMU,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEiB,QAAQ,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxD,MAAM,EAAEF,OAAOG,aAAa,EAAE,GAAGC,IAAAA,8DAA8B;IAC/D,MAAMC,UAAUvB,aAAa;IAC7B,MAAMwB,UAAUd,UAAUe,YAAYf,QAAQ,CAACa;IAC/C,MAAMG,mBAAmBZ,cAAc,UAAUA,cAAc;IAC/D,MAAMa,yBAAyB,CAACf,SAASc;IACzC,MAAME,uBAAuB,CAAChB,SAAUE,CAAAA,cAAc,UAAUA,cAAc,SAAQ;IAEtF,qBACE,sBAACe,4BAAa,8CACRrC;QACJsC,eAAelD,IAAAA,gBAAU,qBAEvB,2BACAJ,mBAAmBuD,cAAc,CAAC/B,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,OAAO,EAC9BmC,yCACAE,qCACA,CAACH,SAAShC,IAAAA,gBAAU,6BAAgC,oCACpD+C,0BACE/C,IAAAA,gBAAU,0BAA6B,iCACzC,CAACO,UACCP,IAAAA,gBAAU,gCAAmC,uCAC/C,CAACQ,sCACDoC,qCACAN,UAAU,aAAarC,eAAe,CAACqC,MAAM,EAC7CC,UAAU,aAAanC,eAAe,CAACmC,MAAM;QAE/CF,YAAYO,UAAUP,aAAaD;;YAElCQ,wBACC,qBAACQ,wBAAW;gBACVxB,WAAW5B,IAAAA,gBAAU,4BAA+B;gBACpDqD,UAAS;gBACThB,YAAYD;0BAEZ,cAAA,qBAAC9B;oBAAcC,QAAQA;oBAAQC,OAAOA;oBAAOE,iBAAiBA;8BAC3DD;;+BAIL,qBAACH;gBAAcC,QAAQA;gBAAQC,OAAOA;gBAAOE,iBAAiBA;0BAC3DD;;YAGJ,CAACkC,yBACA;;oBACGI,0BAA0BN,cAAcpC,OAAO,kBAC9C,qBAACiD,oBAAS;wBAAC1B,WAAWa,cAAcpC,OAAO,CAACuB,SAAS;;oBAEtDoB,wBAAwBP,cAActC,OAAO,kBAC5C,qBAACoD,gBAAO;wBAAC3B,WAAWa,cAActC,OAAO,CAACyB,SAAS;wBAAE4B,MAAM;;;;YAIhEV,oBAAoBH,yBACnB,qBAACW,oBAAS;gBAAC1B,SAAS;gBAAoC6B,IAAI;;;;AAIpE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nexport interface PanelHeaderBackProps extends Omit<PanelHeaderButtonProps, 'children'> {\n  children?: string;\n}\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label,\n  className,\n  children = 'Назад',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === 'vkcom' || platform === 'ios';\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX === 'compact' && styles['PanelHeaderBack--sizeX-compact'],\n        platform === 'ios' && styles['PanelHeaderBack--ios'],\n        platform === 'vkcom' && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n    >\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderBack","getBackIcon","platform","Icon28ChevronBack","AdaptiveIconRenderer","IconCompact","Icon20ChevronLeftOutline","IconRegular","Icon28ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","label","className","children","restProps","usePlatform","sizeX","useAdaptivity","showLabel","PanelHeaderButton","classNames","VisuallyHidden"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;uBAtCN;sBACoB;+BACG;6BACF;sCAES;mCACqB;gCAC3B;AAO/B,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,qBAACC,wBAAiB;QAC3B,KAAK;YACH,qBACE,qBAACC,0CAAoB;gBACnBC,aAAaC,+BAAwB;gBACrCC,aAAaC,+BAAwB;;QAG3C;YACE,qBACE,qBAACJ,0CAAoB;gBACnBC,aAAaI,6BAAsB;gBACnCF,aAAaG,6BAAsB;;IAG3C;AACF;AAKO,MAAMV,kBAAkB;QAAC,EAC9BW,KAAK,EACLC,SAAS,EACTC,WAAW,OAAO,EAEK,WADpBC;QAHHH;QACAC;QACAC;;IAGA,MAAMX,WAAWa,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,yEAAyE;IACzE,wGAAwG;IACxG,MAAMC,YAAYhB,aAAa,WAAWA,aAAa;IAEvD,qBACE,sBAACiB,oCAAiB,8CACZL;QACJF,WAAWQ,IAAAA,gBAAU,EACnBJ,UAAU,mDACVd,aAAa,qCACbA,aAAa,yCACbgB,aAAa,CAAC,CAACP,2CACfC;QAEFD,OAAOO,aAAaP;;YAEnBE,0BAAY,qBAACQ,8BAAc;0BAAER;;YAC7BZ,YAAYC;;;AAGnB"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["import {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nexport interface PanelHeaderBackProps extends Omit<PanelHeaderButtonProps, 'children'> {\n  children?: string;\n}\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label,\n  className,\n  children = 'Назад',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel = platform === 'vkcom' || platform === 'ios';\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX === 'compact' && styles['PanelHeaderBack--sizeX-compact'],\n        platform === 'ios' && styles['PanelHeaderBack--ios'],\n        platform === 'vkcom' && styles['PanelHeaderBack--vkcom'],\n        showLabel && !!label && styles['PanelHeaderBack--has-label'],\n        className,\n      )}\n      label={showLabel && label}\n    >\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderBack","getBackIcon","platform","Icon28ChevronBack","AdaptiveIconRenderer","IconCompact","Icon20ChevronLeftOutline","IconRegular","Icon28ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","label","className","children","restProps","usePlatform","sizeX","useAdaptivity","showLabel","PanelHeaderButton","classNames","VisuallyHidden"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;uBAtCN;sBACoB;+BACG;6BACF;sCAES;mCACqB;gCAC3B;AAO/B,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,qBAACC,wBAAiB;QAC3B,KAAK;YACH,qBACE,qBAACC,0CAAoB;gBACnBC,aAAaC,+BAAwB;gBACrCC,aAAaC,+BAAwB;;QAG3C;YACE,qBACE,qBAACJ,0CAAoB;gBACnBC,aAAaI,6BAAsB;gBACnCF,aAAaG,6BAAsB;;IAG3C;AACF;AAKO,MAAMV,kBAAkB;QAAC,EAC9BW,KAAK,EACLC,SAAS,EACTC,WAAW,OAAO,EAEK,WADpBC;QAHHH;QACAC;QACAC;;IAGA,MAAMX,WAAWa,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,yEAAyE;IACzE,wGAAwG;IACxG,MAAMC,YAAYhB,aAAa,WAAWA,aAAa;IAEvD,qBACE,sBAACiB,oCAAiB,8CACZL;QACJF,WAAWQ,IAAAA,gBAAU,EACnBJ,UAAU,mDACVd,aAAa,qCACbA,aAAa,yCACbgB,aAAa,CAAC,CAACP,2CACfC;QAEFD,OAAOO,aAAaP;;YAEnBE,0BAAY,qBAACQ,8BAAc;0BAAER;;YAC7BZ,YAAYC;;;AAGnB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        'vkuiInternalPanelHeaderButton',\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["PanelHeaderButton","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","usePlatform","Title","Component","level","weight","Text","undefined","warn","warnOnce","label","className","restProps","isPrimitive","isPrimitiveReactNode","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","hasAccessibleName","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","classNames","hasOwnProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBAC0B;6BACrB;+BACM;0BACQ;0BACF;sBACnB;uBACC;AAGtB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,IAAID,aAAa,OAAO;QACtB,qBACE,qBAACE,YAAK;YAACC,WAAU;YAAOC,OAAM;YAAIC,QAAQP,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,qBAACO,UAAI;QAACD,QAAQL,aAAa,UAAUO,YAAY;kBAAMR;;AAChE;AAEA,MAAMS,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMjB,oBAAoB;QAAC,EAChCO,QAAQ,EACRD,UAAU,KAAK,EACfY,KAAK,EACLC,SAAS,EAEc,WADpBC;QAJHb;QACAD;QACAY;QACAC;;IAGA,MAAME,cAAcC,IAAAA,0BAAoB,EAACf;IACzC,MAAMgB,mBAAmBD,IAAAA,0BAAoB,EAACJ;IAC9C,MAAMV,WAAWC,IAAAA,wBAAW;IAE5B,IAAIe;IACJ,IAAIC;IAEJ,OAAQjB;QACN,KAAK;YACHgB,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAeC,IAAAA,gCAAiB,EAAC;YACrCvB,UAAU;gBAACA;gBAAUW;aAAM;WACxBE;QAGL,IAAI,CAACS,cAAc;YACjBb,KAAKe,yBAAe,CAACC,IAAI,CAACZ,UAAUa,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,sBAACC,kBAAQ;QACPvB,WAAWS,UAAUa,IAAI,GAAG,MAAM;OAC9Bb;QACJI,WAAWA;QACXW,mBAAmB;QACnBV,YAAYA;QACZN,WAAWiB,IAAAA,gBAAU,EACnB,0DAEAnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BkB,mDACA,CAACA,eAAe,CAACE,2DACjBJ;;YAGDE,4BAAc,qBAAChB;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFgB,iCACC,qBAAClB;gBAAiBC,SAASA;gBAASa,SAAS;0BAC1CD;iBAGHA;;;AAIR"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderButton--ios'],\n  android: styles['PanelHeaderButton--android'],\n  vkcom: styles['PanelHeaderButton--vkcom'],\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  primary?: boolean;\n  label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  className,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles['PanelHeaderButton--hover'];\n      activeMode = styles['PanelHeaderButton--active'];\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      className={classNames(\n        'vkuiInternalPanelHeaderButton',\n        styles['PanelHeaderButton'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isPrimitive && styles['PanelHeaderButton--primitive'],\n        !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'],\n        className,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles['PanelHeaderButton__label']}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["PanelHeaderButton","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","usePlatform","Title","Component","level","weight","Text","undefined","warn","warnOnce","label","className","restProps","isPrimitive","isPrimitiveReactNode","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","hasAccessibleName","COMMON_WARNINGS","a11y","href","Tappable","activeEffectDelay","classNames","hasOwnProperty"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;iEA5CU;sBAC0B;6BACrB;+BACM;0BACQ;0BACF;sBACnB;uBACC;AAGtB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAWA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,IAAID,aAAa,OAAO;QACtB,qBACE,qBAACE,YAAK;YAACC,WAAU;YAAOC,OAAM;YAAIC,QAAQP,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,qBAACO,UAAI;QAACD,QAAQL,aAAa,UAAUO,YAAY;kBAAMR;;AAChE;AAEA,MAAMS,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMjB,oBAAoB;QAAC,EAChCO,QAAQ,EACRD,UAAU,KAAK,EACfY,KAAK,EACLC,SAAS,EAEc,WADpBC;QAJHb;QACAD;QACAY;QACAC;;IAGA,MAAME,cAAcC,IAAAA,0BAAoB,EAACf;IACzC,MAAMgB,mBAAmBD,IAAAA,0BAAoB,EAACJ;IAC9C,MAAMV,WAAWC,IAAAA,wBAAW;IAE5B,IAAIe;IACJ,IAAIC;IAEJ,OAAQjB;QACN,KAAK;YACHgB,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD;YACAC;YACA;QACF;YACED,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAeC,IAAAA,gCAAiB,EAAC;YACrCvB,UAAU;gBAACA;gBAAUW;aAAM;WACxBE;QAGL,IAAI,CAACS,cAAc;YACjBb,KAAKe,yBAAe,CAACC,IAAI,CAACZ,UAAUa,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,sBAACC,kBAAQ;QACPvB,WAAWS,UAAUa,IAAI,GAAG,MAAM;OAC9Bb;QACJI,WAAWA;QACXW,mBAAmB;QACnBV,YAAYA;QACZN,WAAWiB,IAAAA,gBAAU,EACnB,0DAEAnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BkB,mDACA,CAACA,eAAe,CAACE,2DACjBJ;;YAGDE,4BAAc,qBAAChB;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFgB,iCACC,qBAAClB;gBAAiBC,SAASA;gBAASa,SAAS;0BAC1CD;iBAGHA;;;AAIR"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import { Icon24CancelOutline, Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={Icon24CancelOutline}\n            IconRegular={Icon28CancelOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderClose","children","restProps","platform","usePlatform","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24CancelOutline","IconRegular","Icon28CancelOutline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBAT4C;6BAC7B;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,mBAAmB;QAAC,EAAEC,WAAW,QAAQ,EAAwC,WAAnCC;QAAxBD;;IACjC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB,8CAAKH;kBACpBC,aAAa,QACZF,yBAEA;;8BACE,qBAACK,8BAAc;8BAAEL;;8BACjB,qBAACM,0CAAoB;oBACnBC,aAAaC,0BAAmB;oBAChCC,aAAaC,0BAAmB;;;;;AAM5C"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import { Icon24CancelOutline, Icon28CancelOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={Icon24CancelOutline}\n            IconRegular={Icon28CancelOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderClose","children","restProps","platform","usePlatform","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24CancelOutline","IconRegular","Icon28CancelOutline"],"mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBAT4C;6BAC7B;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,mBAAmB;QAAC,EAAEC,WAAW,QAAQ,EAAwC,WAAnCC;QAAxBD;;IACjC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB,8CAAKH;kBACpBC,aAAa,QACZF,yBAEA;;8BACE,qBAACK,8BAAc;8BAAEL;;8BACjB,qBAACM,0CAAoB;oBACnBC,aAAaC,0BAAmB;oBAChCC,aAAaC,0BAAmB;;;;;AAM5C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: styles['PanelHeaderContent--sizeY-none'],\n  compact: styles['PanelHeaderContent--sizeY-compact'],\n};\n\nexport interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n  hasStatus: boolean;\n  hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n\n  return hasStatus || hasBefore ? (\n    <Text\n      className={styles['PanelHeaderContent__childrenText']}\n      Component=\"div\"\n      weight={platform === 'vkcom' ? '2' : undefined}\n    >\n      {children}\n    </Text>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === 'ios',\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <RootComponent\n      {...rootProps}\n      baseClassName={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== 'android' && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div className={styles['PanelHeaderContent__children']}>\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </RootComponent>\n  );\n};\n"],"names":["PanelHeaderContent","platformClassNames","ios","android","vkcom","sizeYClassNames","none","compact","PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Text","className","Component","weight","undefined","div","aside","status","before","onClick","restProps","sizeY","useAdaptivity","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","activeMode","RootComponent","baseClassName","classNames","hasOwnProperty","hasReactNode","Footnote"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoDaA;;;eAAAA;;;;;;;;iEApDU;sBACkB;+BACX;6BACF;+BAEE;0BACL;0BACA;sBACJ;AAGrB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAaA,MAAMC,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOJ,aAAaC,0BAClB,qBAACI,UAAI;QACHC,SAAS;QACTC,WAAU;QACVC,QAAQL,aAAa,UAAU,MAAMM;kBAEpCP;uBAGH,qBAACQ;QAAIJ,SAAS;kBAA8CJ;;AAEhE;AAKO,MAAMX,qBAAqB;QAAC,EACjCoB,KAAK,EACLC,MAAM,EACNC,MAAM,EACNX,QAAQ,EACRY,OAAO,EAEiB,WADrBC;QALHJ;QACAC;QACAC;QACAX;QACAY;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcJ,UAAUK,kBAAQ,GAAG;IACzC,MAAMC,YAAYN,UAAU,CAAC,IAAIC;IACjC,MAAMZ,WAAWC,IAAAA,wBAAW;IAC5B,MAAMiB,UAAUP,UACZ,4CACKC;QACHD;QACAQ,mBAAmB;QACnBC,WAAWpB,aAAa;QACxBqB,YAAY;SAEd,CAAC;IAEL,qBACE,sBAACC,4BAAa,8CACRL;QACJM,eAAeC,IAAAA,gBAAU,4BAEvBnC,mBAAmBoC,cAAc,CAACzB,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BsB,UAAU,aAAapB,eAAe,CAACoB,MAAM;;YAG9Ca,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;gBAAIJ,SAAS;0BAAyCO;;0BAChF,sBAACK,yDACKG;gBACJf,WAAWqB,IAAAA,gBAAU,gCAEnB,CAACd,UAAUV,aAAa;;oBAGzB0B,IAAAA,kBAAY,EAACjB,yBACZ,qBAACkB,kBAAQ;wBAACxB,SAAS;kCAAyCM;;kCAE9D,sBAACF;wBAAIJ,SAAS;;0CACZ,qBAACP;gCAAoBC,WAAW6B,IAAAA,kBAAY,EAACjB;gCAASX,WAAW4B,IAAAA,kBAAY,EAAChB;0CAC3EX;;4BAEF2B,IAAAA,kBAAY,EAAClB,wBACZ,qBAACD;gCAAIJ,SAAS;0CAAwCK;;;;oBAGzDkB,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;wBAAIJ,SAAS;;;;;;AAI/C"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nconst sizeYClassNames = {\n  none: styles['PanelHeaderContent--sizeY-none'],\n  compact: styles['PanelHeaderContent--sizeY-compact'],\n};\n\nexport interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n  hasStatus: boolean;\n  hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n\n  return hasStatus || hasBefore ? (\n    <Text\n      className={styles['PanelHeaderContent__childrenText']}\n      Component=\"div\"\n      weight={platform === 'vkcom' ? '2' : undefined}\n    >\n      {children}\n    </Text>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === 'ios',\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <RootComponent\n      {...rootProps}\n      baseClassName={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== 'android' && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div className={styles['PanelHeaderContent__children']}>\n          <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n            {children}\n          </PanelHeaderChildren>\n          {hasReactNode(aside) && (\n            <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n          )}\n        </div>\n        {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n      </InComponent>\n    </RootComponent>\n  );\n};\n"],"names":["PanelHeaderContent","platformClassNames","ios","android","vkcom","sizeYClassNames","none","compact","PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Text","className","Component","weight","undefined","div","aside","status","before","onClick","restProps","sizeY","useAdaptivity","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","activeMode","RootComponent","baseClassName","classNames","hasOwnProperty","hasReactNode","Footnote"],"mappings":";;;;+BAoDaA;;;eAAAA;;;;;;;;iEApDU;sBACkB;+BACX;6BACF;+BAEE;0BACL;0BACA;sBACJ;AAGrB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAaA,MAAMC,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOJ,aAAaC,0BAClB,qBAACI,UAAI;QACHC,SAAS;QACTC,WAAU;QACVC,QAAQL,aAAa,UAAU,MAAMM;kBAEpCP;uBAGH,qBAACQ;QAAIJ,SAAS;kBAA8CJ;;AAEhE;AAKO,MAAMX,qBAAqB;QAAC,EACjCoB,KAAK,EACLC,MAAM,EACNC,MAAM,EACNX,QAAQ,EACRY,OAAO,EAEiB,WADrBC;QALHJ;QACAC;QACAC;QACAX;QACAY;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcJ,UAAUK,kBAAQ,GAAG;IACzC,MAAMC,YAAYN,UAAU,CAAC,IAAIC;IACjC,MAAMZ,WAAWC,IAAAA,wBAAW;IAC5B,MAAMiB,UAAUP,UACZ,4CACKC;QACHD;QACAQ,mBAAmB;QACnBC,WAAWpB,aAAa;QACxBqB,YAAY;SAEd,CAAC;IAEL,qBACE,sBAACC,4BAAa,8CACRL;QACJM,eAAeC,IAAAA,gBAAU,4BAEvBnC,mBAAmBoC,cAAc,CAACzB,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BsB,UAAU,aAAapB,eAAe,CAACoB,MAAM;;YAG9Ca,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;gBAAIJ,SAAS;0BAAyCO;;0BAChF,sBAACK,yDACKG;gBACJf,WAAWqB,IAAAA,gBAAU,gCAEnB,CAACd,UAAUV,aAAa;;oBAGzB0B,IAAAA,kBAAY,EAACjB,yBACZ,qBAACkB,kBAAQ;wBAACxB,SAAS;kCAAyCM;;kCAE9D,sBAACF;wBAAIJ,SAAS;;0CACZ,qBAACP;gCAAoBC,WAAW6B,IAAAA,kBAAY,EAACjB;gCAASX,WAAW4B,IAAAA,kBAAY,EAAChB;0CAC3EX;;4BAEF2B,IAAAA,kBAAY,EAAClB,wBACZ,qBAACD;gCAAIJ,SAAS;0CAAwCK;;;;oBAGzDkB,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;wBAAIJ,SAAS;;;;;;AAI/C"}

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

@@ -1,4 +1,4 @@
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     opened: boolean;
     onClose: VoidFunction;
@@ -6,5 +6,5 @@ export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLD
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
-export declare const PanelHeaderContext: ({ children, onClose, opened, className, ...restProps }: PanelHeaderContextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelHeaderContext: ({ children, opened, className, onClose, ...restProps }: PanelHeaderContextProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=PanelHeaderContext.d.ts.map

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAWxD,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,4CAoEzB,CAAC"}
+{"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAW7D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,mDAwDzB,CAAC"}

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js

@@ -16,73 +16,63 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
-const _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+const _useGlobalOnClickOutside = require("../../hooks/useGlobalOnClickOutside");
 const _usePlatform = require("../../hooks/usePlatform");
-const _useTimeout = require("../../hooks/useTimeout");
-const _dom = require("../../lib/dom");
-const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+const _animation = require("../../lib/animation");
 const _ScrollContext = require("../AppRoot/ScrollContext");
 const _FixedLayout = require("../FixedLayout/FixedLayout");
 const sizeXClassNames = {
     none: "vkuiPanelHeaderContext--sizeX-none",
-    ['compact']: "vkuiPanelHeaderContext--sizeX-compact",
-    ['regular']: "vkuiPanelHeaderContext--sizeX-regular"
+    compact: "vkuiPanelHeaderContext--sizeX-compact",
+    regular: "vkuiPanelHeaderContext--sizeX-regular"
 };
 const PanelHeaderContext = (_param)=>{
-    var { children, onClose, opened = false, className } = _param, restProps = _object_without_properties._(_param, [
+    var { children, opened = false, className, onClose } = _param, restProps = _object_without_properties._(_param, [
         "children",
-        "onClose",
         "opened",
-        "className"
+        "className",
+        "onClose"
     ]);
-    const { document } = (0, _dom.useDOM)();
     const platform = (0, _usePlatform.usePlatform)();
-    const [visible, setVisible] = _react.useState(opened);
-    const closing = visible && !opened;
     const { sizeX = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const elementRef = _react.useRef(null);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        opened && setVisible(true);
-    }, [
-        opened
-    ]);
-    (0, _ScrollContext.useScrollLock)(platform !== 'vkcom' && opened);
-    // start closing on outer click
-    (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', opened && !closing && ((event)=>{
-        if (elementRef.current && !elementRef.current.contains(event.target)) {
+    const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(opened ? 'enter' : 'exit');
+    const visible = animationState !== 'exited';
+    (0, _ScrollContext.useScrollLock)(platform !== 'vkcom' && visible);
+    const handleGlobalOnClickOutside = _react.useCallback((event)=>{
+        if (opened) {
             event.stopPropagation();
             onClose();
         }
-    }), {
-        capture: true
-    });
-    // fallback onAnimationEnd when animationend not supported
-    const onAnimationEnd = ()=>setVisible(false);
-    const animationFallback = (0, _useTimeout.useTimeout)(onAnimationEnd, 200);
-    _react.useEffect(()=>closing ? animationFallback.set() : animationFallback.clear(), [
-        animationFallback,
-        closing
+    }, [
+        opened,
+        onClose
     ]);
+    (0, _useGlobalOnClickOutside.useGlobalOnClickOutside)(handleGlobalOnClickOutside, visible ? elementRef : null);
+    if (!visible) {
+        return null;
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_FixedLayout.FixedLayout, _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPanelHeaderContext", platform === 'ios' && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], className),
+        className: (0, _vkjs.classNames)("vkuiPanelHeaderContext", platform === 'ios' && "vkuiPanelHeaderContext--ios", opened ? "vkuiPanelHeaderContext--opened" : "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], className),
         vertical: "top",
         children: [
-            visible && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 onClick: (event)=>{
                     event.stopPropagation();
                     onClose();
                 },
                 className: "vkuiPanelHeaderContext__fade"
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
+                "data-testid": process.env.NODE_ENV === 'test' ? 'content' : undefined,
                 className: "vkuiPanelHeaderContext__in",
-                ref: elementRef,
-                onAnimationEnd: closing ? onAnimationEnd : undefined,
-                children: visible && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                ref: elementRef
+            }, animationHandlers), {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     className: "vkuiPanelHeaderContext__content",
                     children: children
                 })
-            })
+            }))
         ]
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  ['compact']: styles['PanelHeaderContext--sizeX-compact'],\n  ['regular']: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== 'vkcom' && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === 'ios' && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","children","onClose","opened","className","restProps","document","useDOM","platform","usePlatform","visible","setVisible","React","useState","closing","sizeX","useAdaptivity","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","useGlobalEventListener","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","FixedLayout","classNames","vertical","div","onClick","ref","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;;iEA3BU;sBACI;+BACG;wCACS;6BACX;4BACD;qBACJ;2CACmB;+BAEZ;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;IACX,CAAC,UAAU;AACb;AAUO,MAAMF,qBAAqB;QAAC,EACjCG,QAAQ,EACRC,OAAO,EACPC,SAAS,KAAK,EACdC,SAAS,EAEe,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAC3B,MAAMC,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,CAACC,SAASC,WAAW,GAAGC,OAAMC,QAAQ,CAACV;IAC7C,MAAMW,UAAUJ,WAAW,CAACP;IAC5B,MAAM,EAAEY,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaL,OAAMM,MAAM,CAAiB;IAEhDC,IAAAA,oDAAyB,EAAC;QACxBhB,UAAUQ,WAAW;IACvB,GAAG;QAACR;KAAO;IAEXiB,IAAAA,4BAAa,EAACZ,aAAa,WAAWL;IAEtC,+BAA+B;IAC/BkB,IAAAA,8CAAsB,EACpBf,UACA,SACAH,UACE,CAACW,WACA,CAAA,CAACQ;QACA,IAAIL,WAAWM,OAAO,IAAI,CAACN,WAAWM,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBxB;QACF;IACF,CAAA,GACF;QAAEyB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMjB,WAAW;IACxC,MAAMkB,oBAAoBC,IAAAA,sBAAU,EAACF,gBAAgB;IACrDhB,OAAMmB,SAAS,CACb,IAAOjB,UAAUe,kBAAkBG,GAAG,KAAKH,kBAAkBI,KAAK,IAClE;QAACJ;QAAmBf;KAAQ;IAG9B,qBACE,sBAACoB,wBAAW,8CACN7B;QACJD,WAAW+B,IAAAA,gBAAU,4BAEnB3B,aAAa,wCACbL,4CACAW,8CACAf,eAAe,CAACgB,MAAM,EACtBX;QAEFgC,UAAS;;YAER1B,yBACC,qBAAC2B;gBACCC,SAAS,CAAChB;oBACRA,MAAMI,eAAe;oBACrBxB;gBACF;gBACAE,SAAS;;0BAGb,qBAACiC;gBACCjC,SAAS;gBACTmC,KAAKtB;gBACLW,gBAAgBd,UAAUc,iBAAiBY;0BAE1C9B,yBAAW,qBAAC2B;oBAAIjC,SAAS;8BAA0CH;;;;;AAI5E"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  compact: styles['PanelHeaderContext--sizeX-compact'],\n  regular: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  opened = false,\n  className,\n  onClose,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    opened ? 'enter' : 'exit',\n  );\n  const visible = animationState !== 'exited';\n\n  useScrollLock(platform !== 'vkcom' && visible);\n\n  const handleGlobalOnClickOutside = React.useCallback(\n    (event: MouseEvent) => {\n      if (opened) {\n        event.stopPropagation();\n        onClose();\n      }\n    },\n    [opened, onClose],\n  );\n\n  useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === 'ios' && styles['PanelHeaderContext--ios'],\n        opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      <div\n        onClick={(event) => {\n          event.stopPropagation();\n          onClose();\n        }}\n        className={styles['PanelHeaderContext__fade']}\n      />\n      <div\n        data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        {...animationHandlers}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","compact","regular","children","opened","className","onClose","restProps","platform","usePlatform","sizeX","useAdaptivity","elementRef","React","useRef","animationState","animationHandlers","useCSSKeyframesAnimationController","visible","useScrollLock","handleGlobalOnClickOutside","useCallback","event","stopPropagation","useGlobalOnClickOutside","FixedLayout","classNames","vertical","div","onClick","data-testid","process","env","NODE_ENV","undefined","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;+BACG;yCACU;6BACZ;2BACuB;+BAErB;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAUO,MAAMJ,qBAAqB;QAAC,EACjCK,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,6CAAkC,EAC5Eb,SAAS,UAAU;IAErB,MAAMc,UAAUH,mBAAmB;IAEnCI,IAAAA,4BAAa,EAACX,aAAa,WAAWU;IAEtC,MAAME,6BAA6BP,OAAMQ,WAAW,CAClD,CAACC;QACC,IAAIlB,QAAQ;YACVkB,MAAMC,eAAe;YACrBjB;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBkB,IAAAA,gDAAuB,EAACJ,4BAA4BF,UAAUN,aAAa;IAE3E,IAAI,CAACM,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,sBAACO,wBAAW,8CACNlB;QACJF,WAAWqB,IAAAA,gBAAU,4BAEnBlB,aAAa,wCACbJ,+EACAL,eAAe,CAACW,MAAM,EACtBL;QAEFsB,UAAS;;0BAET,qBAACC;gBACCC,SAAS,CAACP;oBACRA,MAAMC,eAAe;oBACrBjB;gBACF;gBACAD,SAAS;;0BAEX,qBAACuB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYC;gBAC3D7B,SAAS;gBACT8B,KAAKvB;eACDI;0BAEJ,cAAA,qBAACY;oBAAIvB,SAAS;8BAA0CF;;;;;AAIhE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import {\n  Icon24DoneOutline,\n  Icon24PenOutline,\n  Icon28DoneOutline,\n  Icon28EditOutline,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS\n   */\n  editLabel?: string;\n  /**\n   * Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const platform = usePlatform();\n  const label = isActive ? doneLabel : editLabel;\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        label\n      ) : (\n        <>\n          <VisuallyHidden>{label}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}\n            IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","usePlatform","label","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","Icon24PenOutline","IconRegular","Icon28DoneOutline","Icon28EditOutline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;uBAxBN;6BACqB;sCACS;mCACqB;gCAC3B;AAoBxB,MAAMA,kBAAkB;QAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EAEC,WADlBC;QAHHH;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,QAAQN,WAAWE,YAAYD;IAErC,qBACE,qBAACM,oCAAiB,8CAAKJ;kBACpBC,aAAa,QACZE,sBAEA;;8BACE,qBAACE,8BAAc;8BAAEF;;8BACjB,qBAACG,0CAAoB;oBACnBC,aAAaV,WAAWW,wBAAiB,GAAGC,uBAAgB;oBAC5DC,aAAab,WAAWc,wBAAiB,GAAGC,wBAAiB;;;;;AAMzE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import {\n  Icon24DoneOutline,\n  Icon24PenOutline,\n  Icon28DoneOutline,\n  Icon28EditOutline,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS\n   */\n  editLabel?: string;\n  /**\n   * Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const platform = usePlatform();\n  const label = isActive ? doneLabel : editLabel;\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        label\n      ) : (\n        <>\n          <VisuallyHidden>{label}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}\n            IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","usePlatform","label","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","Icon24PenOutline","IconRegular","Icon28DoneOutline","Icon28EditOutline"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;uBAxBN;6BACqB;sCACS;mCACqB;gCAC3B;AAoBxB,MAAMA,kBAAkB;QAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EAEC,WADlBC;QAHHH;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,QAAQN,WAAWE,YAAYD;IAErC,qBACE,qBAACM,oCAAiB,8CAAKJ;kBACpBC,aAAa,QACZE,sBAEA;;8BACE,qBAACE,8BAAc;8BAAEF;;8BACjB,qBAACG,0CAAoB;oBACnBC,aAAaV,WAAWW,wBAAiB,GAAGC,uBAAgB;oBAC5DC,aAAab,WAAWc,wBAAiB,GAAGC,wBAAiB;;;;;AAMzE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton primary {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","PanelHeaderButton","primary","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","IconRegular","Icon28DoneOutline"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBATwC;6BACzB;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,oBAAoB;QAAC,EAChCC,WAAW,QAAQ,EAEI,WADpBC;QADHD;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,OAAO;OAAKJ;kBAC5BC,aAAa,QACZF,yBAEA;;8BACE,qBAACM,8BAAc;8BAAEN;;8BACjB,qBAACO,0CAAoB;oBAACC,aAAaC,wBAAiB;oBAAEC,aAAaC,wBAAiB;;;;;AAK9F"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton primary {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["PanelHeaderSubmit","children","restProps","platform","usePlatform","PanelHeaderButton","primary","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","IconRegular","Icon28DoneOutline"],"mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBATwC;6BACzB;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,oBAAoB;QAAC,EAChCC,WAAW,QAAQ,EAEI,WADpBC;QADHD;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,OAAO;OAAKJ;kBAC5BC,aAAa,QACZF,yBAEA;;8BACE,qBAACM,8BAAc;8BAAEN;;8BACjB,qBAACO,0CAAoB;oBAACC,aAAaC,wBAAiB;oBAAEC,aAAaC,wBAAiB;;;;;AAK9F"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["PanelSpinner","React","memo","height","style","restProps","Spinner","size","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;iEAVU;yBACe;AAS/B,MAAMA,6BAAeC,OAAMC,IAAI,CACpC;QAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAmC,WAA9BC;QAAvBF;QAAaC;;yBACd,qBAACE,gBAAO;QAACC,MAAK;OAAcF;QAAWD,OAAO;YAAED;WAAWC;;;AAI/DJ,aAAaQ,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["PanelSpinner","React","memo","height","style","restProps","Spinner","size","displayName"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;iEAVU;yBACe;AAS/B,MAAMA,6BAAeC,OAAMC,IAAI,CACpC;QAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAmC,WAA9BC;QAAvBF;QAAaC;;yBACd,qBAACE,gBAAO;QAACC,MAAK;OAAcF;QAAWD,OAAO;YAAED;WAAWC;;;AAI/DJ,aAAaQ,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n  /**\n   * Убирает отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  noPadding = false,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      !noPadding && styles['Placeholder--withPadding'],\n    )}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderIcon = (props: PlaceholderIconProps) => (\n  <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />\n);\n\nexport type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (\n  <Title\n    level=\"2\"\n    weight=\"2\"\n    className={classNames(className, styles['Placeholder__header'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (\n  <Headline\n    weight=\"3\"\n    className={classNames(className, styles['Placeholder__text'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderActions = (props: PlaceholderActionsProps) => (\n  <RootComponent baseClassName={styles['Placeholder__action']} {...props} />\n);\n\nexport interface PlaceholderProps extends PlaceholderContainerProps {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  children,\n  action,\n  noPadding = false,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer noPadding={noPadding} {...restProps}>\n    {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}\n    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}\n    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}\n    {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}\n  </PlaceholderContainer>\n);\n\nPlaceholder.Container = PlaceholderContainer;\nPlaceholder.Icon = PlaceholderIcon;\nPlaceholder.Header = PlaceholderHeader;\nPlaceholder.Text = PlaceholderText;\nPlaceholder.Actions = PlaceholderActions;\n"],"names":["Placeholder","PlaceholderContainer","stretched","noPadding","restProps","RootComponent","baseClassName","classNames","PlaceholderIcon","props","PlaceholderHeader","className","Title","level","weight","PlaceholderText","Headline","PlaceholderActions","icon","header","children","action","hasReactNode","Container","Icon","Header","Text","Actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqFaA;;;eAAAA;;;;;;;;iEArFU;sBACkB;+BAEX;0BACL;uBACH;AActB,MAAMC,uBAAuB;QAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EAES,WADvBC;QAFHF;QACAC;;yBAGA,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBL,2CACA,CAACC;OAECC;;AAMR,MAAMI,kBAAkB,CAACC,sBACvB,qBAACJ,4BAAa;QAACC,aAAa;OAAmCG;AAKjE,MAAMC,oBAAoB;QAAC,EAAEC,SAAS,EAAwC,WAAnCP;QAAdO;;yBAC3B,qBAACC,YAAK;QACJC,OAAM;QACNC,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMW,kBAAkB;QAAC,EAAEJ,SAAS,EAAsC,WAAjCP;QAAdO;;yBACzB,qBAACK,kBAAQ;QACPF,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMa,qBAAqB,CAACR,sBAC1B,qBAACJ,4BAAa;QAACC,aAAa;OAAqCG;AAqB5D,MAAMT,cAAc;QAAC,EAC1BkB,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNlB,YAAY,KAAK,EAEA,WADdC;QALHc;QACAC;QACAC;QACAC;QACAlB;;yBAGA,sBAACF;QAAqBE,WAAWA;OAAeC;;YAC7CkB,IAAAA,kBAAY,EAACJ,uBAAS,qBAACV;0BAAiBU;;YACxCI,IAAAA,kBAAY,EAACH,yBAAW,qBAACT;0BAAmBS;;YAC5CG,IAAAA,kBAAY,EAACF,2BAAa,qBAACL;0BAAiBK;;YAC5CE,IAAAA,kBAAY,EAACD,yBAAW,qBAACJ;0BAAoBI;;;;;AAIlDrB,YAAYuB,SAAS,GAAGtB;AACxBD,YAAYwB,IAAI,GAAGhB;AACnBR,YAAYyB,MAAM,GAAGf;AACrBV,YAAY0B,IAAI,GAAGX;AACnBf,YAAY2B,OAAO,GAAGV"}
+{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n  /**\n   * Убирает отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  noPadding = false,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      !noPadding && styles['Placeholder--withPadding'],\n    )}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderIcon = (props: PlaceholderIconProps) => (\n  <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />\n);\n\nexport type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (\n  <Title\n    level=\"2\"\n    weight=\"2\"\n    className={classNames(className, styles['Placeholder__header'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (\n  <Headline\n    weight=\"3\"\n    className={classNames(className, styles['Placeholder__text'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderActions = (props: PlaceholderActionsProps) => (\n  <RootComponent baseClassName={styles['Placeholder__action']} {...props} />\n);\n\nexport interface PlaceholderProps extends PlaceholderContainerProps {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  children,\n  action,\n  noPadding = false,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer noPadding={noPadding} {...restProps}>\n    {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}\n    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}\n    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}\n    {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}\n  </PlaceholderContainer>\n);\n\nPlaceholder.Container = PlaceholderContainer;\nPlaceholder.Icon = PlaceholderIcon;\nPlaceholder.Header = PlaceholderHeader;\nPlaceholder.Text = PlaceholderText;\nPlaceholder.Actions = PlaceholderActions;\n"],"names":["Placeholder","PlaceholderContainer","stretched","noPadding","restProps","RootComponent","baseClassName","classNames","PlaceholderIcon","props","PlaceholderHeader","className","Title","level","weight","PlaceholderText","Headline","PlaceholderActions","icon","header","children","action","hasReactNode","Container","Icon","Header","Text","Actions"],"mappings":";;;;+BAqFaA;;;eAAAA;;;;;;;;iEArFU;sBACkB;+BAEX;0BACL;uBACH;AActB,MAAMC,uBAAuB;QAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EAES,WADvBC;QAFHF;QACAC;;yBAGA,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBL,2CACA,CAACC;OAECC;;AAMR,MAAMI,kBAAkB,CAACC,sBACvB,qBAACJ,4BAAa;QAACC,aAAa;OAAmCG;AAKjE,MAAMC,oBAAoB;QAAC,EAAEC,SAAS,EAAwC,WAAnCP;QAAdO;;yBAC3B,qBAACC,YAAK;QACJC,OAAM;QACNC,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMW,kBAAkB;QAAC,EAAEJ,SAAS,EAAsC,WAAjCP;QAAdO;;yBACzB,qBAACK,kBAAQ;QACPF,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMa,qBAAqB,CAACR,sBAC1B,qBAACJ,4BAAa;QAACC,aAAa;OAAqCG;AAqB5D,MAAMT,cAAc;QAAC,EAC1BkB,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNlB,YAAY,KAAK,EAEA,WADdC;QALHc;QACAC;QACAC;QACAC;QACAlB;;yBAGA,sBAACF;QAAqBE,WAAWA;OAAeC;;YAC7CkB,IAAAA,kBAAY,EAACJ,uBAAS,qBAACV;0BAAiBU;;YACxCI,IAAAA,kBAAY,EAACH,yBAAW,qBAACT;0BAAmBS;;YAC5CG,IAAAA,kBAAY,EAACF,2BAAa,qBAACL;0BAAiBK;;YAC5CE,IAAAA,kBAAY,EAACD,yBAAW,qBAACJ;0BAAoBI;;;;;AAIlDrB,YAAYuB,SAAS,GAAGtB;AACxBD,YAAYwB,IAAI,GAAGhB;AACnBR,YAAYyB,MAAM,GAAGf;AACrBV,YAAY0B,IAAI,GAAGX;AACnBf,YAAY2B,OAAO,GAAGV"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["PlatformProvider","value","children","ConfigProviderOverride","platform","TokensClassProvider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBgBA;;;eAAAA;;;;;iEAnBO;wBAEa;wCACG;AAgBhC,SAASA,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,qBAACC,8CAAsB;QAACC,UAAUH;kBAChC,cAAA,qBAACI,2BAAmB;sBAAEH;;;AAG5B"}
+{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["PlatformProvider","value","children","ConfigProviderOverride","platform","TokensClassProvider"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;;iEAnBO;wBAEa;wCACG;AAgBhC,SAASA,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,qBAACC,8CAAsB;QAACC,UAAUH;kBAChC,cAAA,qBAACI,2BAAmB;sBAAEH;;;AAG5B"}

package/dist/cjs/components/PopoutRoot/PopoutRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAG1B,MAAM,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,gCAGzB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,8CAA+C,eAAe,4CAgBpF,CAAC"}
+{"version":3,"file":"PopoutRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAG1B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,gCAGzB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,8CAA+C,eAAe,4CAUpF,CAAC"}

package/dist/cjs/components/PopoutRoot/PopoutRoot.js

@@ -26,7 +26,6 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _dom = require("../../lib/dom");
 const _AppRootPortal = require("../AppRoot/AppRootPortal");
 const _RootComponent = require("../RootComponent/RootComponent");
 const PopoutRootPopout = (_param)=>{
@@ -51,13 +50,6 @@ const PopoutRoot = (_param)=>{
         "modal",
         "children"
     ]);
-    const { document } = (0, _dom.useDOM)();
-    _react.useEffect(()=>{
-        popout && (0, _dom.blurActiveElement)(document);
-    }, [
-        document,
-        popout
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: "vkuiPopoutRoot",
         children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\n/**\n * @private\n */\nexport const PopoutRootPopout = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />\n);\n\n/**\n * @private\n */\nexport const PopoutRootModal = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["PopoutRoot","PopoutRootModal","PopoutRootPopout","className","restProps","div","classNames","popout","modal","children","document","useDOM","React","useEffect","blurActiveElement","RootComponent","baseClassName","AppRootPortal"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoCaA,UAAU;eAAVA;;IAfAC,eAAe;eAAfA;;IAVAC,gBAAgB;eAAhBA;;;;;;;;iEAXU;sBACI;qBACe;+BAEZ;+BACA;AAMvB,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;;AAMpE,MAAMH,kBAAkB;QAAC,EAC9BE,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,2BAA8BH;OAAgBC;;AAWnE,MAAMJ,aAAa;QAAC,EAAEO,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BL;QAA5BG;QAAQC;QAAOC;;IAC1C,MAAM,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3BC,OAAMC,SAAS,CAAC;QACdN,UAAUO,IAAAA,sBAAiB,EAACJ;IAC9B,GAAG;QAACA;QAAUH;KAAO;IAErB,qBACE,sBAACQ,4BAAa,8CAAKX;QAAWY,aAAa;;YACxCP;0BACD,sBAACQ,4BAAa;;oBACX,CAAC,CAACV,wBAAU,qBAACL;kCAAkBK;;oBAC/B,CAAC,CAACC,uBAAS,qBAACP;kCAAiBO;;;;;;AAItC"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\n/**\n * @private\n */\nexport const PopoutRootPopout = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />\n);\n\n/**\n * @private\n */\nexport const PopoutRootModal = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["PopoutRoot","PopoutRootModal","PopoutRootPopout","className","restProps","div","classNames","popout","modal","children","RootComponent","baseClassName","AppRootPortal"],"mappings":";;;;;;;;;;;IAmCaA,UAAU;eAAVA;;IAfAC,eAAe;eAAfA;;IAVAC,gBAAgB;eAAhBA;;;;;;;;iEAVU;sBACI;+BAEG;+BACA;AAMvB,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;;AAMpE,MAAMH,kBAAkB;QAAC,EAC9BE,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,2BAA8BH;OAAgBC;;AAWnE,MAAMJ,aAAa;QAAC,EAAEO,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BL;QAA5BG;QAAQC;QAAOC;;IAC1C,qBACE,sBAACC,4BAAa,8CAAKN;QAAWO,aAAa;;YACxCF;0BACD,sBAACG,4BAAa;;oBACX,CAAC,CAACL,wBAAU,qBAACL;kCAAkBK;;oBAC/B,CAAC,CAACC,uBAAS,qBAACP;kCAAiBO;;;;;;AAItC"}

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgBxD,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,sFASvB,kBAAkB,4CAkCpB,CAAC"}
+{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgBxD,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,sFASvB,kBAAkB,4CAmBpB,CAAC"}

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.js

@@ -8,15 +8,11 @@ Object.defineProperty(exports, "PopoutWrapper", {
         return PopoutWrapper;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _usePlatform = require("../../hooks/usePlatform");
-const _useTimeout = require("../../hooks/useTimeout");
 const _RootComponent = require("../RootComponent/RootComponent");
 const stylesAlignX = {
     center: "vkuiPopoutWrapper--alignX-center",
@@ -38,23 +34,8 @@ const PopoutWrapper = (_param)=>{
         "children",
         "onClick"
     ]);
-    const platform = (0, _usePlatform.usePlatform)();
-    const [opened, setOpened] = _react.useState(noBackground);
-    const onFadeInEnd = (e)=>{
-        if (!e || e.animationName === "vkuianimation-full-fade-in") {
-            setOpened(true);
-        }
-    };
-    const animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === 'ios' ? 300 : 200);
-    _react.useEffect(()=>{
-        !opened && animationFinishFallback.set();
-    }, [
-        animationFinishFallback,
-        opened
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiPopoutWrapper", stylesAlignY[alignY], stylesAlignX[alignX], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", !noBackground && "vkuiPopoutWrapper--masked"),
-        onAnimationEnd: opened ? undefined : onFadeInEnd,
+        baseClassName: (0, _vkjs.classNames)("vkuiPopoutWrapper", stylesAlignY[alignY], stylesAlignX[alignX], closing ? "vkuiPopoutWrapper--closing" : "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", !noBackground && "vkuiPopoutWrapper--masked"),
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "vkuiPopoutWrapper__container",
             children: [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(noBackground);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === 'ios' ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        !noBackground && styles['PopoutWrapper--masked'],\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["PopoutWrapper","stylesAlignX","center","left","right","stylesAlignY","top","bottom","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","platform","usePlatform","opened","setOpened","React","useState","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","useEffect","set","RootComponent","baseClassName","classNames","onAnimationEnd","undefined","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;iEAhDU;sBACI;6BACC;4BACD;+BAEG;AAG9B,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA8BO,MAAMP,gBAAgB;QAAC,EAC5BQ,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAACV;IAE3C,MAAMW,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DL,UAAU;QACZ;IACF;IACA,MAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaN,aAAa,QAAQ,MAAM;IACnFI,OAAMO,SAAS,CAAC;QACd,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,qBACE,qBAACW,4BAAa,8CACRd;QACJe,eAAeC,IAAAA,gBAAU,uBAEvB1B,YAAY,CAACG,OAAO,EACpBP,YAAY,CAACQ,OAAO,EACpBC,yCACAQ,uCACAN,qCACA,CAACD;QAEHqB,gBAAgBd,SAASe,YAAYX;kBAErC,cAAA,sBAACY;YAAIC,SAAS;;8BACZ,qBAACD;oBAAIC,SAAS;oBAAoCrB,SAASA;;8BAC3D,qBAACoB;oBAAIC,SAAS;8BAAqCtB;;;;;AAI3D"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles['PopoutWrapper--closing'] : styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        !noBackground && styles['PopoutWrapper--masked'],\n      )}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["PopoutWrapper","stylesAlignX","center","left","right","stylesAlignY","top","bottom","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","RootComponent","baseClassName","classNames","div","className"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;sBA7Cc;+BAEG;AAG9B,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA8BO,MAAMP,gBAAgB;QAAC,EAC5BQ,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,uBAEvBb,YAAY,CAACG,OAAO,EACpBP,YAAY,CAACQ,OAAO,EACpBC,sEACAE,qCACA,CAACD;kBAGH,cAAA,sBAACQ;YAAIC,SAAS;;8BACZ,qBAACD;oBAAIC,SAAS;oBAAoCN,SAASA;;8BAC3D,qBAACK;oBAAIC,SAAS;8BAAqCP;;;;;AAI3D"}

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

@@ -54,10 +54,14 @@ export interface PopoverProps extends AllowedFloatingComponentProps, Omit<HTMLAt
      * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
      */
     ArrowIcon?: FloatingArrowPropsPrivate['Icon'];
+    /**
+     * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.
+     */
+    keepMounted?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Popover.d.ts.map