@vkontakte/vkui 6.1.2 → 6.2.1

package/dist/cssm/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":["React","classNames","useAdaptivity","AppRootContext","NavPanelIdContext","OnboardingTooltipContainer","RootComponent","Touch","styles","sizeXClassNames","none","stylesMode","plain","card","Panel","centered","children","nav","mode","modeProp","restProps","sizeX","usePanelMode","Provider","value","id","baseClassName","Component","className","div","layout","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAI1D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;IAC3C,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AAEA,MAAMG,aAAa;IACjBD,MAAMF,MAAM,CAAC,mBAAmB;IAChCI,OAAOJ,MAAM,CAAC,oBAAoB;IAClCK,MAAML,MAAM,CAAC,mBAAmB;AAClC;AAkBA;;CAEC,GACD,OAAO,MAAMM,QAAQ,CAAC,EACpBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,GAAG,EACHC,MAAMC,QAAQ,EACd,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,MAAMgB,OAAOI,aAAaH,UAAUE;IAEpC,qBACE,KAACjB,kBAAkBmB,QAAQ;QAACC,OAAOJ,UAAUK,EAAE,IAAIR;kBACjD,cAAA,KAACX;YACE,GAAGc,SAAS;YACbM,eAAezB,WACbO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBN,YAAY,+BACZJ,UAAU,CAACO,KAAK;sBAGlB,cAAA,MAACX;gBACCoB,WAAWtB;gBACXuB,WAAW3B,WAAWO,MAAM,CAAC,YAAY,EAAE;;kCAE3C,KAACqB;wBAAID,WAAWpB,MAAM,CAAC,mBAAmB;;oBACzCO,yBAAW,KAACc;wBAAID,WAAWpB,MAAM,CAAC,kBAAkB;kCAAGQ;yBAAkBA;kCAC1E,KAACa;wBAAID,WAAWpB,MAAM,CAAC,kBAAkB;;;;;;AAKnD,EAAE;AAEF,SAASc,aACPH,QAA4B,EAC5BE,KAA8B;IAE9B,MAAM,EAAES,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC5B;IAEpC,IAAIgB,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIW,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIT,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":["React","classNames","useAdaptivity","AppRootContext","NavPanelIdContext","OnboardingTooltipContainer","RootComponent","Touch","styles","sizeXClassNames","none","stylesMode","plain","card","Panel","centered","children","nav","mode","modeProp","restProps","sizeX","usePanelMode","Provider","value","id","baseClassName","Component","className","div","layout","useContext"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAI1D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,0BAA0B,QAAQ,kDAAkD;AAC7F,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;IAC3C,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AAEA,MAAMG,aAAa;IACjBD,MAAMF,MAAM,CAAC,mBAAmB;IAChCI,OAAOJ,MAAM,CAAC,oBAAoB;IAClCK,MAAML,MAAM,CAAC,mBAAmB;AAClC;AAkBA;;CAEC,GACD,OAAO,MAAMM,QAAQ,CAAC,EACpBC,WAAW,KAAK,EAChBC,QAAQ,EACRC,GAAG,EACHC,MAAMC,QAAQ,EACd,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGnB;IAE3B,MAAMgB,OAAOI,aAAaH,UAAUE;IAEpC,qBACE,KAACjB,kBAAkBmB,QAAQ;QAACC,OAAOJ,UAAUK,EAAE,IAAIR;kBACjD,cAAA,KAACX;YACE,GAAGc,SAAS;YACbM,eAAezB,WACbO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBN,YAAY,+BACZJ,UAAU,CAACO,KAAK;sBAGlB,cAAA,MAACX;gBACCoB,WAAWtB;gBACXuB,WAAW3B,WAAWO,MAAM,CAAC,YAAY,EAAE;;kCAE3C,KAACqB;wBAAID,WAAWpB,MAAM,CAAC,mBAAmB;;oBACzCO,yBAAW,KAACc;wBAAID,WAAWpB,MAAM,CAAC,kBAAkB;kCAAGQ;yBAAkBA;kCAC1E,KAACa;wBAAID,WAAWpB,MAAM,CAAC,kBAAkB;;;;;;AAKnD,EAAE;AAEF,SAASc,aACPH,QAA4B,EAC5BE,KAA8B;IAE9B,MAAM,EAAES,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC5B;IAEpC,IAAIgB,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIW,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIT,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT"}

package/dist/cssm/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":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","ModalRootContext","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","sizeYClassNames","compact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","useContext","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","fixed","div","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","hasOwnProperty","vertical","size","wide"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { 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":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","ModalRootContext","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","sizeYClassNames","compact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","useContext","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","fixed","div","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","hasOwnProperty","vertical","size","wide"],"mappings":"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"}

package/dist/cssm/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":["Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","children","restProps","sizeX","showLabel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAMvE,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAACV;QACV,KAAK;YACH,qBACE,KAACK;gBACCM,aAAad;gBACbe,aAAaX;;QAGnB;YACE,qBACE,KAACI;gBACCM,aAAab;gBACbc,aAAab;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMc,kBAAkB,CAAC,EAC9BC,KAAK,EACLC,SAAS,EACTC,WAAW,OAAO,EAClB,GAAGC,WACoB;IACvB,MAAMP,WAAWN;IACjB,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGf;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMgB,YAAYT,aAAa,WAAWA,aAAa;IAEvD,qBACE,MAACJ;QACE,GAAGW,SAAS;QACbF,WAAWb,WACTgB,UAAU,aAAaV,MAAM,CAAC,iCAAiC,EAC/DE,aAAa,SAASF,MAAM,CAAC,uBAAuB,EACpDE,aAAa,WAAWF,MAAM,CAAC,yBAAyB,EACxDW,aAAa,CAAC,CAACL,SAASN,MAAM,CAAC,6BAA6B,EAC5DO;QAEFD,OAAOK,aAAaL;;YAEnBE,0BAAY,KAACT;0BAAgBS;;YAC7BP,YAAYC;;;AAGnB,EAAE"}
+{"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":["Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","children","restProps","sizeX","showLabel"],"mappings":";AAAA,SACEA,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAMvE,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAACV;QACV,KAAK;YACH,qBACE,KAACK;gBACCM,aAAad;gBACbe,aAAaX;;QAGnB;YACE,qBACE,KAACI;gBACCM,aAAab;gBACbc,aAAab;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMc,kBAAkB,CAAC,EAC9BC,KAAK,EACLC,SAAS,EACTC,WAAW,OAAO,EAClB,GAAGC,WACoB;IACvB,MAAMP,WAAWN;IACjB,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGf;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMgB,YAAYT,aAAa,WAAWA,aAAa;IAEvD,qBACE,MAACJ;QACE,GAAGW,SAAS;QACbF,WAAWb,WACTgB,UAAU,aAAaV,MAAM,CAAC,iCAAiC,EAC/DE,aAAa,SAASF,MAAM,CAAC,uBAAuB,EACpDE,aAAa,WAAWF,MAAM,CAAC,yBAAyB,EACxDW,aAAa,CAAC,CAACL,SAASN,MAAM,CAAC,6BAA6B,EAC5DO;QAEFD,OAAOK,aAAaL;;YAEnBE,0BAAY,KAACT;0BAAgBS;;YAC7BP,YAAYC;;;AAGnB,EAAE"}

package/dist/cssm/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":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","hasOwnProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,yBAAyB;IACrCG,SAASH,MAAM,CAAC,6BAA6B;IAC7CI,OAAOJ,MAAM,CAAC,2BAA2B;AAC3C;AAWA,MAAMK,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,SAAS,EACT,GAAGC,WACoB;IACvB,MAAMC,cAAc1B,qBAAqBe;IACzC,MAAMY,mBAAmB3B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI2B;IACJ,IAAIC;IAEJ,OAAQb;QACN,KAAK;YACHY,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYpB,MAAM,CAAC,2BAA2B;YAC9CqB,aAAarB,MAAM,CAAC,4BAA4B;YAChD;QACF;YACEoB,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe/B,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACQ,cAAc;YACjBZ,KAAKlB,gBAAgB+B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAAC9B;QACCY,WAAWQ,UAAUU,IAAI,GAAG,MAAM;QACjC,GAAGV,SAAS;QACbG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAWzB,WACT,iCACAS,MAAM,CAAC,oBAAoB,EAC3BC,mBAAmB4B,cAAc,CAACrB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9Be,eAAelB,MAAM,CAAC,+BAA+B,EACrD,CAACkB,eAAe,CAACC,oBAAoBnB,MAAM,CAAC,kCAAkC,EAC9EgB;;YAGDE,4BAAc,KAACb;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFY,iCACC,KAACd;gBAAiBC,SAASA;gBAASU,WAAWhB,MAAM,CAAC,2BAA2B;0BAC9Ee;iBAGHA;;;AAIR,EAAE"}
+{"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":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","isAccessible","a11y","href","activeEffectDelay","hasOwnProperty"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAC/D,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,yBAAyB;IACrCG,SAASH,MAAM,CAAC,6BAA6B;IAC7CI,OAAOJ,MAAM,CAAC,2BAA2B;AAC3C;AAWA,MAAMK,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACLC,SAAS,EACT,GAAGC,WACoB;IACvB,MAAMC,cAAc1B,qBAAqBe;IACzC,MAAMY,mBAAmB3B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI2B;IACJ,IAAIC;IAEJ,OAAQb;QACN,KAAK;YACHY,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYpB,MAAM,CAAC,2BAA2B;YAC9CqB,aAAarB,MAAM,CAAC,4BAA4B;YAChD;QACF;YACEoB,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAe/B,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGE,SAAS;QACd;QAEA,IAAI,CAACQ,cAAc;YACjBZ,KAAKlB,gBAAgB+B,IAAI,CAACT,UAAUU,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IAEA,qBACE,MAAC9B;QACCY,WAAWQ,UAAUU,IAAI,GAAG,MAAM;QACjC,GAAGV,SAAS;QACbG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAWzB,WACT,iCACAS,MAAM,CAAC,oBAAoB,EAC3BC,mBAAmB4B,cAAc,CAACrB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9Be,eAAelB,MAAM,CAAC,+BAA+B,EACrD,CAACkB,eAAe,CAACC,oBAAoBnB,MAAM,CAAC,kCAAkC,EAC9EgB;;YAGDE,4BAAc,KAACb;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFY,iCACC,KAACd;gBAAiBC,SAASA;gBAASU,WAAWhB,MAAM,CAAC,2BAA2B;0BAC9Ee;iBAGHA;;;AAIR,EAAE"}

package/dist/cssm/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":["Icon24CancelOutline","Icon28CancelOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderClose","children","restProps","platform","IconCompact","IconRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAmC;IAC5F,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAmB,GAAGI,SAAS;kBAC7BC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBACCO,aAAaV;oBACbW,aAAaV;;;;;AAMzB,EAAE"}
+{"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":["Icon24CancelOutline","Icon28CancelOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderClose","children","restProps","platform","IconCompact","IconRegular"],"mappings":";AAAA,SAASA,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAAEC,WAAW,QAAQ,EAAE,GAAGC,WAAmC;IAC5F,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAmB,GAAGI,SAAS;kBAC7BC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBACCO,aAAaV;oBACbW,aAAaV;;;;;AAMzB,EAAE"}

package/dist/cssm/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":["React","classNames","hasReactNode","useAdaptivity","usePlatform","RootComponent","Tappable","Footnote","Text","styles","platformClassNames","ios","android","vkcom","sizeYClassNames","none","compact","PanelHeaderChildren","hasStatus","hasBefore","children","platform","className","Component","weight","undefined","div","PanelHeaderContent","aside","status","before","onClick","restProps","sizeY","InComponent","rootProps","inProps","activeEffectDelay","hasActive","activeMode","baseClassName","hasOwnProperty"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,0BAA0B;IACtCG,SAASH,MAAM,CAAC,8BAA8B;IAC9CI,OAAOJ,MAAM,CAAC,4BAA4B;AAC5C;AAEA,MAAMK,kBAAkB;IACtBC,MAAMN,MAAM,CAAC,iCAAiC;IAC9CO,SAASP,MAAM,CAAC,oCAAoC;AACtD;AAaA,MAAMQ,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWjB;IAEjB,OAAOc,aAAaC,0BAClB,KAACX;QACCc,WAAWb,MAAM,CAAC,mCAAmC;QACrDc,WAAU;QACVC,QAAQH,aAAa,UAAU,MAAMI;kBAEpCL;uBAGH,KAACM;QAAIJ,WAAWb,MAAM,CAAC,kCAAkC;kBAAGW;;AAEhE;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNV,QAAQ,EACRW,OAAO,EACP,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IAC3B,MAAM+B,cAAcH,UAAUzB,WAAW;IACzC,MAAM6B,YAAYJ,UAAU,CAAC,IAAIC;IACjC,MAAMX,WAAWjB;IACjB,MAAMgC,UAAUL,UACZ;QACE,GAAGC,SAAS;QACZD;QACAM,mBAAmB;QACnBC,WAAWjB,aAAa;QACxBkB,YAAY;IACd,IACA,CAAC;IAEL,qBACE,MAAClC;QACE,GAAG8B,SAAS;QACbK,eAAevC,WACbQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB+B,cAAc,CAACpB,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BqB,UAAU,aAAanB,eAAe,CAACmB,MAAM;;YAG9C/B,aAAa4B,yBAAW,KAACJ;gBAAIJ,WAAWb,MAAM,CAAC,6BAA6B;0BAAGqB;;0BAChF,MAACI;gBACE,GAAGE,OAAO;gBACXd,WAAWrB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACqB,UAAUT,aAAa,aAAaZ,MAAM,CAAC,mCAAmC;;oBAGhFP,aAAa2B,yBACZ,KAACtB;wBAASe,WAAWb,MAAM,CAAC,6BAA6B;kCAAGoB;;kCAE9D,MAACH;wBAAIJ,WAAWb,MAAM,CAAC,+BAA+B;;0CACpD,KAACQ;gCAAoBC,WAAWhB,aAAa2B;gCAASV,WAAWjB,aAAa4B;0CAC3EV;;4BAEFlB,aAAa0B,wBACZ,KAACF;gCAAIJ,WAAWb,MAAM,CAAC,4BAA4B;0CAAGmB;;;;oBAGzD1B,aAAa4B,yBAAW,KAACJ;wBAAIJ,WAAWb,MAAM,CAAC,4BAA4B;;;;;;AAIpF,EAAE"}
+{"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":["React","classNames","hasReactNode","useAdaptivity","usePlatform","RootComponent","Tappable","Footnote","Text","styles","platformClassNames","ios","android","vkcom","sizeYClassNames","none","compact","PanelHeaderChildren","hasStatus","hasBefore","children","platform","className","Component","weight","undefined","div","PanelHeaderContent","aside","status","before","onClick","restProps","sizeY","InComponent","rootProps","inProps","activeEffectDelay","hasActive","activeMode","baseClassName","hasOwnProperty"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,0BAA0B;IACtCG,SAASH,MAAM,CAAC,8BAA8B;IAC9CI,OAAOJ,MAAM,CAAC,4BAA4B;AAC5C;AAEA,MAAMK,kBAAkB;IACtBC,MAAMN,MAAM,CAAC,iCAAiC;IAC9CO,SAASP,MAAM,CAAC,oCAAoC;AACtD;AAaA,MAAMQ,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWjB;IAEjB,OAAOc,aAAaC,0BAClB,KAACX;QACCc,WAAWb,MAAM,CAAC,mCAAmC;QACrDc,WAAU;QACVC,QAAQH,aAAa,UAAU,MAAMI;kBAEpCL;uBAGH,KAACM;QAAIJ,WAAWb,MAAM,CAAC,kCAAkC;kBAAGW;;AAEhE;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNV,QAAQ,EACRW,OAAO,EACP,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IAC3B,MAAM+B,cAAcH,UAAUzB,WAAW;IACzC,MAAM6B,YAAYJ,UAAU,CAAC,IAAIC;IACjC,MAAMX,WAAWjB;IACjB,MAAMgC,UAAUL,UACZ;QACE,GAAGC,SAAS;QACZD;QACAM,mBAAmB;QACnBC,WAAWjB,aAAa;QACxBkB,YAAY;IACd,IACA,CAAC;IAEL,qBACE,MAAClC;QACE,GAAG8B,SAAS;QACbK,eAAevC,WACbQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB+B,cAAc,CAACpB,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BqB,UAAU,aAAanB,eAAe,CAACmB,MAAM;;YAG9C/B,aAAa4B,yBAAW,KAACJ;gBAAIJ,WAAWb,MAAM,CAAC,6BAA6B;0BAAGqB;;0BAChF,MAACI;gBACE,GAAGE,OAAO;gBACXd,WAAWrB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACqB,UAAUT,aAAa,aAAaZ,MAAM,CAAC,mCAAmC;;oBAGhFP,aAAa2B,yBACZ,KAACtB;wBAASe,WAAWb,MAAM,CAAC,6BAA6B;kCAAGoB;;kCAE9D,MAACH;wBAAIJ,WAAWb,MAAM,CAAC,+BAA+B;;0CACpD,KAACQ;gCAAoBC,WAAWhB,aAAa2B;gCAASV,WAAWjB,aAAa4B;0CAC3EV;;4BAEFlB,aAAa0B,wBACZ,KAACF;gCAAIJ,WAAWb,MAAM,CAAC,4BAA4B;0CAAGmB;;;;oBAGzD1B,aAAa4B,yBAAW,KAACJ;wBAAIJ,WAAWb,MAAM,CAAC,4BAA4B;;;;;;AAIpF,EAAE"}

package/dist/cssm/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/cssm/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/cssm/components/PanelHeaderContext/PanelHeaderContext.js

@@ -2,56 +2,45 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useDOM } from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
 import styles from './PanelHeaderContext.module.css';
 const sizeXClassNames = {
     none: styles['PanelHeaderContext--sizeX-none'],
-    ['compact']: styles['PanelHeaderContext--sizeX-compact'],
-    ['regular']: styles['PanelHeaderContext--sizeX-regular']
+    compact: styles['PanelHeaderContext--sizeX-compact'],
+    regular: styles['PanelHeaderContext--sizeX-regular']
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
- */ export const PanelHeaderContext = ({ children, onClose, opened = false, className, ...restProps })=>{
-    const { document } = useDOM();
+ */ export const PanelHeaderContext = ({ children, opened = false, className, onClose, ...restProps })=>{
     const platform = usePlatform();
-    const [visible, setVisible] = React.useState(opened);
-    const closing = visible && !opened;
     const { sizeX = 'none' } = useAdaptivity();
     const elementRef = React.useRef(null);
-    useIsomorphicLayoutEffect(()=>{
-        opened && setVisible(true);
-    }, [
-        opened
-    ]);
-    useScrollLock(platform !== 'vkcom' && opened);
-    // start closing on outer click
-    useGlobalEventListener(document, 'click', opened && !closing && ((event)=>{
-        if (elementRef.current && !elementRef.current.contains(event.target)) {
+    const [animationState, animationHandlers] = useCSSKeyframesAnimationController(opened ? 'enter' : 'exit');
+    const visible = animationState !== 'exited';
+    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 = useTimeout(onAnimationEnd, 200);
-    React.useEffect(()=>closing ? animationFallback.set() : animationFallback.clear(), [
-        animationFallback,
-        closing
+    }, [
+        opened,
+        onClose
     ]);
+    useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);
+    if (!visible) {
+        return null;
+    }
     return /*#__PURE__*/ _jsxs(FixedLayout, {
         ...restProps,
-        className: classNames(styles['PanelHeaderContext'], platform === 'ios' && styles['PanelHeaderContext--ios'], opened && styles['PanelHeaderContext--opened'], closing && styles['PanelHeaderContext--closing'], sizeXClassNames[sizeX], className),
+        className: classNames(styles['PanelHeaderContext'], platform === 'ios' && styles['PanelHeaderContext--ios'], opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'], sizeXClassNames[sizeX], className),
         vertical: "top",
         children: [
-            visible && /*#__PURE__*/ _jsx("div", {
+            /*#__PURE__*/ _jsx("div", {
                 onClick: (event)=>{
                     event.stopPropagation();
                     onClose();
@@ -59,10 +48,11 @@ const sizeXClassNames = {
                 className: styles['PanelHeaderContext__fade']
             }),
             /*#__PURE__*/ _jsx("div", {
+                "data-testid": process.env.NODE_ENV === 'test' ? 'content' : undefined,
                 className: styles['PanelHeaderContext__in'],
                 ref: elementRef,
-                onAnimationEnd: closing ? onAnimationEnd : undefined,
-                children: visible && /*#__PURE__*/ _jsx("div", {
+                ...animationHandlers,
+                children: /*#__PURE__*/ _jsx("div", {
                     className: styles['PanelHeaderContext__content'],
                     children: children
                 })

package/dist/cssm/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":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","useDOM","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","styles","sizeXClassNames","none","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","visible","setVisible","useState","closing","sizeX","elementRef","useRef","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","vertical","div","onClick","ref","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAAC,UAAU,EAAEA,MAAM,CAAC,oCAAoC;IACxD,CAAC,UAAU,EAAEA,MAAM,CAAC,oCAAoC;AAC1D;AAOA;;CAEC,GACD,OAAO,MAAMG,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,OAAO,EACPC,SAAS,KAAK,EACdC,SAAS,EACT,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,EAAE,GAAGb;IACrB,MAAMc,WAAWhB;IACjB,MAAM,CAACiB,SAASC,WAAW,GAAGtB,MAAMuB,QAAQ,CAACP;IAC7C,MAAMQ,UAAUH,WAAW,CAACL;IAC5B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGvB;IAC3B,MAAMwB,aAAa1B,MAAM2B,MAAM,CAAiB;IAEhDpB,0BAA0B;QACxBS,UAAUM,WAAW;IACvB,GAAG;QAACN;KAAO;IAEXR,cAAcY,aAAa,WAAWJ;IAEtC,+BAA+B;IAC/Bb,uBACEgB,UACA,SACAH,UACE,CAACQ,WACA,CAAA,CAACI;QACA,IAAIF,WAAWG,OAAO,IAAI,CAACH,WAAWG,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBjB;QACF;IACF,CAAA,GACF;QAAEkB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMZ,WAAW;IACxC,MAAMa,oBAAoB9B,WAAW6B,gBAAgB;IACrDlC,MAAMoC,SAAS,CACb,IAAOZ,UAAUW,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,IAClE;QAACH;QAAmBX;KAAQ;IAG9B,qBACE,MAACf;QACE,GAAGS,SAAS;QACbD,WAAWhB,WACTS,MAAM,CAAC,qBAAqB,EAC5BU,aAAa,SAASV,MAAM,CAAC,0BAA0B,EACvDM,UAAUN,MAAM,CAAC,6BAA6B,EAC9Cc,WAAWd,MAAM,CAAC,8BAA8B,EAChDC,eAAe,CAACc,MAAM,EACtBR;QAEFsB,UAAS;;YAERlB,yBACC,KAACmB;gBACCC,SAAS,CAACb;oBACRA,MAAMI,eAAe;oBACrBjB;gBACF;gBACAE,WAAWP,MAAM,CAAC,2BAA2B;;0BAGjD,KAAC8B;gBACCvB,WAAWP,MAAM,CAAC,yBAAyB;gBAC3CgC,KAAKhB;gBACLQ,gBAAgBV,UAAUU,iBAAiBS;0BAE1CtB,yBAAW,KAACmB;oBAAIvB,WAAWP,MAAM,CAAC,8BAA8B;8BAAGI;;;;;AAI5E,EAAE"}
+{"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":["React","classNames","useAdaptivity","useGlobalOnClickOutside","usePlatform","useCSSKeyframesAnimationController","useScrollLock","FixedLayout","styles","sizeXClassNames","none","compact","regular","PanelHeaderContext","children","opened","className","onClose","restProps","platform","sizeX","elementRef","useRef","animationState","animationHandlers","visible","handleGlobalOnClickOutside","useCallback","event","stopPropagation","vertical","div","onClick","data-testid","process","env","NODE_ENV","undefined","ref"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,kCAAkC,QAAQ,sBAAsB;AAEzE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9CG,SAASH,MAAM,CAAC,oCAAoC;IACpDI,SAASJ,MAAM,CAAC,oCAAoC;AACtD;AAOA;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,aAAarB,MAAMsB,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGnB,mCAC1CU,SAAS,UAAU;IAErB,MAAMU,UAAUF,mBAAmB;IAEnCjB,cAAca,aAAa,WAAWM;IAEtC,MAAMC,6BAA6B1B,MAAM2B,WAAW,CAClD,CAACC;QACC,IAAIb,QAAQ;YACVa,MAAMC,eAAe;YACrBZ;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBd,wBAAwBuB,4BAA4BD,UAAUJ,aAAa;IAE3E,IAAI,CAACI,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,MAAClB;QACE,GAAGW,SAAS;QACbF,WAAWf,WACTO,MAAM,CAAC,qBAAqB,EAC5BW,aAAa,SAASX,MAAM,CAAC,0BAA0B,EACvDO,SAASP,MAAM,CAAC,6BAA6B,GAAGA,MAAM,CAAC,8BAA8B,EACrFC,eAAe,CAACW,MAAM,EACtBJ;QAEFc,UAAS;;0BAET,KAACC;gBACCC,SAAS,CAACJ;oBACRA,MAAMC,eAAe;oBACrBZ;gBACF;gBACAD,WAAWR,MAAM,CAAC,2BAA2B;;0BAE/C,KAACuB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYC;gBAC3DrB,WAAWR,MAAM,CAAC,yBAAyB;gBAC3C8B,KAAKjB;gBACJ,GAAGG,iBAAiB;0BAErB,cAAA,KAACO;oBAAIf,WAAWR,MAAM,CAAC,8BAA8B;8BAAGM;;;;;AAIhE,EAAE"}

package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.module.css

@@ -1,37 +1,38 @@
 .PanelHeaderContext {
+  --vkui_internal--PanelHeaderContext__fade_display: none;
+
   z-index: var(--vkui_internal--z_index_panel_header_context);
+  inline-size: 100%;
+  block-size: auto;
 }
 
-.PanelHeaderContext--opened,
-.PanelHeaderContext--closing {
-  inline-size: 100%;
+.PanelHeaderContext--sizeX-compact {
+  --vkui_internal--PanelHeaderContext__fade_display: block;
+
   block-size: 100%;
 }
 
-.PanelHeaderContext--sizeX-regular.PanelHeaderContext--opened,
-.PanelHeaderContext--sizeX-regular.PanelHeaderContext--closing {
-  block-size: auto;
-}
+@media (max-width: 767.9px) {
+  .PanelHeaderContext--sizeX-none {
+    --vkui_internal--PanelHeaderContext__fade_display: block;
 
-@media (min-width: 768px) {
-  .PanelHeaderContext--sizeX-none.PanelHeaderContext--opened,
-  .PanelHeaderContext--sizeX-none.PanelHeaderContext--closing {
-    block-size: auto;
+    block-size: 100%;
   }
 }
 
 .PanelHeaderContext__in {
   position: absolute;
+  z-index: 1;
   inset-inline-start: 0;
   inline-size: 100%;
   padding: 8px;
   box-sizing: border-box;
-  pointer-events: none;
 }
 
 .PanelHeaderContext__fade {
-  display: none;
+  display: var(--vkui_internal--PanelHeaderContext__fade_display);
   position: absolute;
+  z-index: 0;
   inline-size: 100%;
   block-size: 100%;
   inset-inline-start: 0;
@@ -39,31 +40,30 @@
   background: rgba(0, 0, 0, 0.4);
 }
 
-.PanelHeaderContext--sizeX-compact .PanelHeaderContext__fade {
-  display: block;
-}
-
-@media (max-width: 767.9px) {
-  .PanelHeaderContext--sizeX-none .PanelHeaderContext__fade {
-    display: block;
-  }
-}
-
 .PanelHeaderContext--opened .PanelHeaderContext__fade {
-  animation: animation-panelheadercontext-fade-in 0.2s ease;
+  animation: animation-panelheadercontext-fade-in var(--vkui--animation_duration_m) ease both;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__fade {
-  animation: animation-panelheadercontext-fade-out 0.2s ease;
+  animation: animation-panelheadercontext-fade-out var(--vkui--animation_duration_m) ease both;
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__in {
-  pointer-events: auto;
-  animation: animation-panelheadercontext-translate-in 0.2s ease;
+  animation: animation-panelheadercontext-translate-in var(--vkui--animation_duration_m) ease both;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: animation-panelheadercontext-translate-out 0.2s ease;
+  animation: animation-panelheadercontext-translate-out var(--vkui--animation_duration_m) ease both;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  .PanelHeaderContext--opened .PanelHeaderContext__in {
+    animation-name: animation-panelheadercontext-fade-in;
+  }
+
+  .PanelHeaderContext--closing .PanelHeaderContext__in {
+    animation-name: animation-panelheadercontext-fade-out;
+  }
 }
 
 .PanelHeaderContext__content {
@@ -110,7 +110,9 @@
 }
 
 .PanelHeaderContext--sizeX-regular .PanelHeaderContext__content {
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+  box-shadow:
+    0 0 4px rgba(0, 0, 0, 0.08),
+    0 8px 8px rgba(0, 0, 0, 0.16);
 }
 
 @media (min-width: 768px) {
@@ -124,7 +126,9 @@
   }
 
   .PanelHeaderContext--sizeX-none .PanelHeaderContext__content {
-    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+    box-shadow:
+      0 0 4px rgba(0, 0, 0, 0.08),
+      0 8px 8px rgba(0, 0, 0, 0.16);
   }
 }
 

package/dist/cssm/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":["Icon24DoneOutline","Icon24PenOutline","Icon28DoneOutline","Icon28EditOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","label","IconCompact","IconRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,QACZ,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAiBlE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,WAAWT;IACjB,MAAMU,QAAQL,WAAWE,YAAYD;IAErC,qBACE,KAACJ;QAAmB,GAAGM,SAAS;kBAC7BC,aAAa,QACZC,sBAEA;;8BACE,KAACP;8BAAgBO;;8BACjB,KAACT;oBACCU,aAAaN,WAAWT,oBAAoBC;oBAC5Ce,aAAaP,WAAWP,oBAAoBC;;;;;AAMxD,EAAE"}
+{"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":["Icon24DoneOutline","Icon24PenOutline","Icon28DoneOutline","Icon28EditOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","label","IconCompact","IconRegular"],"mappings":";AAAA,SACEA,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,QACZ,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAiBlE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,WAAWT;IACjB,MAAMU,QAAQL,WAAWE,YAAYD;IAErC,qBACE,KAACJ;QAAmB,GAAGM,SAAS;kBAC7BC,aAAa,QACZC,sBAEA;;8BACE,KAACP;8BAAgBO;;8BACjB,KAACT;oBACCU,aAAaN,WAAWT,oBAAoBC;oBAC5Ce,aAAaP,WAAWP,oBAAoBC;;;;;AAMxD,EAAE"}

package/dist/cssm/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":["Icon24DoneOutline","Icon28DoneOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderSubmit","children","restProps","platform","primary","IconCompact","IconRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,WAAW,QAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAkBM,OAAO;QAAE,GAAGF,SAAS;kBACrCC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBAAqBQ,aAAaX;oBAAmBY,aAAaX;;;;;AAK7E,EAAE"}
+{"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":["Icon24DoneOutline","Icon28DoneOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderSubmit","children","restProps","platform","primary","IconCompact","IconRegular"],"mappings":";AAAA,SAASA,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,WAAW,QAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAkBM,OAAO;QAAE,GAAGF,SAAS;kBACrCC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBAAqBQ,aAAaX;oBAAmBY,aAAaX;;;;;AAK7E,EAAE"}

package/dist/cssm/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":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,MAAMC,6BAAeF,MAAMG,IAAI,CACpC,CAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAE,GAAGC,WAA8B,iBACtD,KAACL;QAAQM,MAAK;QAAW,GAAGD,SAAS;QAAED,OAAO;YAAED;YAAQ,GAAGC,KAAK;QAAC;QAEnE;AAEFH,aAAaM,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":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,MAAMC,6BAAeF,MAAMG,IAAI,CACpC,CAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAE,GAAGC,WAA8B,iBACtD,KAACL;QAAQM,MAAK;QAAW,GAAGD,SAAS;QAAED,OAAO;YAAED;YAAQ,GAAGC,KAAK;QAAC;QAEnE;AAEFH,aAAaM,WAAW,GAAG"}

package/dist/cssm/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":["React","classNames","hasReactNode","RootComponent","Headline","Title","styles","PlaceholderContainer","stretched","noPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,2BAA2B;AAa9C,MAAMC,uBAAuB,CAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EACjB,GAAGC,WACuB,iBAC1B,KAACP;QACCQ,eAAeV,WACbK,MAAM,CAAC,cAAc,EACrBE,aAAaF,MAAM,CAAC,yBAAyB,EAC7C,CAACG,aAAaH,MAAM,CAAC,2BAA2B;QAEjD,GAAGI,SAAS;;AAMjB,MAAME,kBAAkB,CAACC,sBACvB,KAACV;QAAcQ,eAAeL,MAAM,CAAC,oBAAoB;QAAG,GAAGO,KAAK;;AAKtE,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGL,WAAmC,iBAC5E,KAACL;QACCW,OAAM;QACNC,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,sBAAsB;QAC7D,GAAGI,SAAS;;AAMjB,MAAMQ,kBAAkB,CAAC,EAAEH,SAAS,EAAE,GAAGL,WAAiC,iBACxE,KAACN;QACCa,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,oBAAoB;QAC3D,GAAGI,SAAS;;AAMjB,MAAMS,qBAAqB,CAACN,sBAC1B,KAACV;QAAcQ,eAAeL,MAAM,CAAC,sBAAsB;QAAG,GAAGO,KAAK;;AAkBxE;;CAEC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,YAAY,KAAK,EACjB,GAAGC,WACc,iBACjB,MAACH;QAAqBE,WAAWA;QAAY,GAAGC,SAAS;;YACtDR,aAAamB,uBAAS,KAACT;0BAAiBS;;YACxCnB,aAAaoB,yBAAW,KAACR;0BAAmBQ;;YAC5CpB,aAAaqB,2BAAa,KAACL;0BAAiBK;;YAC5CrB,aAAasB,yBAAW,KAACL;0BAAoBK;;;OAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,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":["React","classNames","hasReactNode","RootComponent","Headline","Title","styles","PlaceholderContainer","stretched","noPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,2BAA2B;AAa9C,MAAMC,uBAAuB,CAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EACjB,GAAGC,WACuB,iBAC1B,KAACP;QACCQ,eAAeV,WACbK,MAAM,CAAC,cAAc,EACrBE,aAAaF,MAAM,CAAC,yBAAyB,EAC7C,CAACG,aAAaH,MAAM,CAAC,2BAA2B;QAEjD,GAAGI,SAAS;;AAMjB,MAAME,kBAAkB,CAACC,sBACvB,KAACV;QAAcQ,eAAeL,MAAM,CAAC,oBAAoB;QAAG,GAAGO,KAAK;;AAKtE,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGL,WAAmC,iBAC5E,KAACL;QACCW,OAAM;QACNC,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,sBAAsB;QAC7D,GAAGI,SAAS;;AAMjB,MAAMQ,kBAAkB,CAAC,EAAEH,SAAS,EAAE,GAAGL,WAAiC,iBACxE,KAACN;QACCa,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,oBAAoB;QAC3D,GAAGI,SAAS;;AAMjB,MAAMS,qBAAqB,CAACN,sBAC1B,KAACV;QAAcQ,eAAeL,MAAM,CAAC,sBAAsB;QAAG,GAAGO,KAAK;;AAkBxE;;CAEC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,YAAY,KAAK,EACjB,GAAGC,WACc,iBACjB,MAACH;QAAqBE,WAAWA;QAAY,GAAGC,SAAS;;YACtDR,aAAamB,uBAAS,KAACT;0BAAiBS;;YACxCnB,aAAaoB,yBAAW,KAACR;0BAAmBQ;;YAC5CpB,aAAaqB,2BAAa,KAACL;0BAAiBK;;YAC5CrB,aAAasB,yBAAW,KAACL;0BAAoBK;;;OAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}

package/dist/cssm/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":["React","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","platform"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,KAACH;QAAuBI,UAAUF;kBAChC,cAAA,KAACH;sBAAqBI;;;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":["React","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","platform"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,KAACH;QAAuBI,UAAUF;kBAChC,cAAA,KAACH;sBAAqBI;;;AAG5B"}

package/dist/cssm/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/cssm/components/PopoutRoot/PopoutRoot.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { blurActiveElement, useDOM } from '../../lib/dom';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutRoot.module.css';
@@ -20,13 +19,6 @@ import styles from './PopoutRoot.module.css';
 /**
  * @private
  */ export const PopoutRoot = ({ popout, modal, children, ...restProps })=>{
-    const { document } = useDOM();
-    React.useEffect(()=>{
-        popout && blurActiveElement(document);
-    }, [
-        document,
-        popout
-    ]);
     return /*#__PURE__*/ _jsxs(RootComponent, {
         ...restProps,
         baseClassName: styles['PopoutRoot'],