@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasComponent, HasRef, HasRootRef } from '../../types';
-export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HasComponent, HasRef, HTMLAttributesWithRootRef } from '../../types';
+export interface PanelHeaderProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     before?: React.ReactNode;
     /**
      * Добавляет элемент справа.
@@ -28,7 +28,7 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */
 export declare const PanelHeader: {
-    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, typographyProps, ...restProps }: PanelHeaderProps): React.JSX.Element;
+    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, typographyProps, ...restProps }: PanelHeaderProps): React.JSX.Element;
     Content: {
         ({ children, Component, id, }: import("./LegacyPanelHeaderContent").LegacyPanelHeaderContentProps): React.JSX.Element;
         displayName: string;

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -8,6 +8,7 @@ import { Platform } from '../../lib/platform';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Separator } from '../Separator/Separator';
 import { Spacing } from '../Spacing/Spacing';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
@@ -67,15 +68,15 @@ const PanelHeaderIn = ({ before, after, separator, children, typographyProps = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
- */ export const PanelHeader = ({ before, children, after, separator = true, visor = true, transparent = false, shadow, getRef, getRootRef, fixed, className, typographyProps, ...restProps })=>{
+ */ export const PanelHeader = ({ before, children, after, separator = true, visor = true, transparent = false, shadow, getRef, getRootRef, fixed, typographyProps, ...restProps })=>{
     const platform = usePlatform();
     const { sizeX = 'none' } = useAdaptivity();
     const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();
     let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['PanelHeader'], 'vkuiInternalPanelHeader', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && styles['PanelHeader--trnsp'], shadow && styles['PanelHeader--shadow'], visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'), separator && visor && classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'), !before && classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'), !after && styles['PanelHeader--no-after'], isFixed && styles['PanelHeader--fixed'], sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
-        ref: isFixed ? getRootRef : getRef
+        baseClassName: classNames(styles['PanelHeader'], 'vkuiInternalPanelHeader', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && styles['PanelHeader--trnsp'], shadow && styles['PanelHeader--shadow'], visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'), separator && visor && classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'), !before && classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'), !after && styles['PanelHeader--no-after'], isFixed && styles['PanelHeader--fixed'], sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX]),
+        getRootRef: isFixed ? getRootRef : getRef
     }, isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
         className: classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed'),
         vertical: "top",

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

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

@@ -9,10 +9,12 @@
 
 .PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
   height: 0;
+  /* см. https://github.com/VKCOM/VKUI/issues/5571 */
+  z-index: var(--vkui_internal--z_index_panel_header);
 }
 
 .PanelHeader__fixed {
-  z-index: var(--vkui_internal--z_index_panel_header_fixed);
+  z-index: var(--vkui_internal--z_index_panel_header);
 }
 
 .PanelHeader__in {
@@ -49,6 +51,8 @@
   overflow: hidden;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PanelHeader__content > * {
   display: block;
   overflow: hidden;
@@ -75,7 +79,7 @@
   color: var(--vkui--color_icon_accent_themed);
 }
 
-/* stylelint-disable-next-line @project-tools/stylelint-atomic */
+/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
 
 .PanelHeader__after > *:not(:last-child) {
   margin-right: 4px;
@@ -109,6 +113,8 @@
   font-size: 21px;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PanelHeader--ios .PanelHeader__content > * {
   padding: 0 4px;
 }
@@ -117,6 +123,8 @@
   padding-left: 8px;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PanelHeader--ios.PanelHeader--no-after .PanelHeader__content > * {
   padding-right: 0;
 }
@@ -158,6 +166,8 @@
   font-size: 23px;
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PanelHeader--android .PanelHeader__content > * {
   padding: 0 12px;
 }
@@ -191,6 +201,8 @@
   }
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PanelHeader--android.PanelHeader--no-after .PanelHeader__content > *,
 .PanelHeader--vkcom.PanelHeader--no-after .PanelHeader__content > * {
   padding-right: 0;
@@ -239,7 +251,7 @@
 
 .PanelHeader--vkcom {
   position: relative;
-  z-index: var(--vkui_internal--z_index_panel_header_fixed);
+  z-index: var(--vkui_internal--z_index_panel_header);
 }
 
 .PanelHeader--vkcom.PanelHeader--sizeX-regular:not(:global(.vkuiInternalModalPageHeader__in)):not(
@@ -307,6 +319,8 @@
   margin-top: calc(-1 * var(--vkui_internal--thin_border));
 }
 
+/* stylelint-disable-next-line selector-max-universal */
+
 .PanelHeader--no-before .PanelHeader__content > * {
   padding-left: 0;
 }

package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     aside?: React.ReactNode;
     before?: React.ReactNode;
     status?: React.ReactNode;
@@ -7,4 +8,4 @@ export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
  */
-export declare const PanelHeaderContent: ({ className, style, aside, status, before, children, onClick, ...restProps }: PanelHeaderContentProps) => React.JSX.Element;
+export declare const PanelHeaderContent: ({ aside, status, before, children, onClick, ...restProps }: PanelHeaderContentProps) => React.JSX.Element;

package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
@@ -31,7 +32,7 @@ const PanelHeaderChildren = ({ hasStatus, hasBefore, children })=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
- */ export const PanelHeaderContent = ({ className, style, aside, status, before, children, onClick, ...restProps })=>{
+ */ export const PanelHeaderContent = ({ aside, status, before, children, onClick, ...restProps })=>{
     const InComponent = onClick ? Tappable : 'div';
     const rootProps = onClick ? {} : restProps;
     const platform = usePlatform();
@@ -42,10 +43,9 @@ const PanelHeaderChildren = ({ hasStatus, hasBefore, children })=>{
         hasActive: platform === Platform.IOS,
         activeMode: 'opacity'
     } : {};
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...rootProps,
-        style: style,
-        className: classNames(styles['PanelHeaderContent'], platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, className)
+        baseClassName: classNames(styles['PanelHeaderContent'], platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android)
     }, hasReactNode(before) && /*#__PURE__*/ React.createElement("div", {
         className: styles['PanelHeaderContent__before']
     }, before), /*#__PURE__*/ React.createElement(InComponent, {

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 { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\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\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<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  if (platform === Platform.VKCOM) {\n    return (\n      <Text className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\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  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\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 === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        className,\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 !== 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    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","Tappable","Footnote","Headline","Text","styles","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","className","Component","weight","div","PanelHeaderContent","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","hasOwnProperty","ANDROID"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,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;AAaA,MAAMK,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWf;IACjB,IAAIe,aAAad,SAASe,KAAK,EAAE;QAC/B,qBACE,oBAACX;YAAKY,WAAWX,MAAM,CAAC,mCAAmC;YAAEY,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACT;QAASa,WAAWX,MAAM,CAAC,mCAAmC;QAAEY,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,WAAWX,MAAM,CAAC,kCAAkC;OAAGQ;AAEhE;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCJ,SAAS,EACTK,KAAK,EACLC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNX,QAAQ,EACRY,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,cAAcF,UAAUxB,WAAW;IACzC,MAAM2B,YAAYH,UAAU,CAAC,IAAIC;IACjC,MAAMZ,WAAWf;IACjB,MAAM8B,UAAUJ,UACZ;QACE,GAAGC,SAAS;QACZD;QACAK,mBAAmB;QACnBC,WAAWjB,aAAad,SAASgC,GAAG;QACpCC,YAAY;IACd,IACA,CAAC;IAEL,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbP,OAAOA;QACPL,WAAWnB,WACTQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BQ;OAGDlB,aAAa0B,yBAAW,oBAACL;QAAIH,WAAWX,MAAM,CAAC,6BAA6B;OAAGmB,uBAChF,oBAACG;QACE,GAAGE,OAAO;QACXb,WAAWnB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACmB,UAAUV,aAAad,SAASmC,OAAO,IAAI9B,MAAM,CAAC,mCAAmC;OAGvFP,aAAayB,yBACZ,oBAACrB;QAASc,WAAWX,MAAM,CAAC,6BAA6B;OAAGkB,uBAE9D,oBAACJ;QAAIH,WAAWX,MAAM,CAAC,+BAA+B;qBACpD,oBAACK;QAAoBC,WAAWb,aAAayB;QAASX,WAAWd,aAAa0B;OAC3EX,WAEFf,aAAawB,wBACZ,oBAACH;QAAIH,WAAWX,MAAM,CAAC,4BAA4B;OAAGiB,SAGzDxB,aAAa0B,yBAAW,oBAACL;QAAIH,WAAWX,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 { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\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\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  if (platform === Platform.VKCOM) {\n    return (\n      <Text className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\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 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 === 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      )}\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 !== 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","usePlatform","Platform","RootComponent","Tappable","Footnote","Headline","Text","styles","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","className","Component","weight","div","PanelHeaderContent","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","baseClassName","hasOwnProperty","ANDROID"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,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;AAaA,MAAMK,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWhB;IACjB,IAAIgB,aAAaf,SAASgB,KAAK,EAAE;QAC/B,qBACE,oBAACX;YAAKY,WAAWX,MAAM,CAAC,mCAAmC;YAAEY,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACT;QAASa,WAAWX,MAAM,CAAC,mCAAmC;QAAEY,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,WAAWX,MAAM,CAAC,kCAAkC;OAAGQ;AAEhE;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCC,KAAK,EACLC,MAAM,EACNC,MAAM,EACNV,QAAQ,EACRW,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,cAAcF,UAAUvB,WAAW;IACzC,MAAM0B,YAAYH,UAAU,CAAC,IAAIC;IACjC,MAAMX,WAAWhB;IACjB,MAAM8B,UAAUJ,UACZ;QACE,GAAGC,SAAS;QACZD;QACAK,mBAAmB;QACnBC,WAAWhB,aAAaf,SAASgC,GAAG;QACpCC,YAAY;IACd,IACA,CAAC;IAEL,qBACE,oBAAChC;QACE,GAAG2B,SAAS;QACbM,eAAerC,WACbS,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO;OAG/BX,aAAa0B,yBAAW,oBAACJ;QAAIH,WAAWX,MAAM,CAAC,6BAA6B;OAAGkB,uBAChF,oBAACG;QACE,GAAGE,OAAO;QACXZ,WAAWpB,WACTS,MAAM,CAAC,yBAAyB,EAChC,CAACkB,UAAUT,aAAaf,SAASoC,OAAO,IAAI9B,MAAM,CAAC,mCAAmC;OAGvFR,aAAayB,yBACZ,oBAACpB;QAASc,WAAWX,MAAM,CAAC,6BAA6B;OAAGiB,uBAE9D,oBAACH;QAAIH,WAAWX,MAAM,CAAC,+BAA+B;qBACpD,oBAACK;QAAoBC,WAAWd,aAAayB;QAASV,WAAWf,aAAa0B;OAC3EV,WAEFhB,aAAawB,wBACZ,oBAACF;QAAIH,WAAWX,MAAM,CAAC,4BAA4B;OAAGgB,SAGzDxB,aAAa0B,yBAAW,oBAACJ;QAAIH,WAAWX,MAAM,CAAC,4BAA4B;;AAIpF,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     opened: boolean;
     onClose: VoidFunction;
 }

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 { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\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  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<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 !== 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 === 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","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","styles","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","visible","setVisible","useState","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"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,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;IAC/D,CAACN,SAASU,OAAO,CAAC,EAAEJ,MAAM,CAAC,oCAAoC;AACjE;AAOA;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,OAAO,EACPC,SAAS,KAAK,EACdC,SAAS,EACT,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,EAAE,GAAGhB;IACrB,MAAMiB,WAAWpB;IACjB,MAAM,CAACqB,SAASC,WAAW,GAAG1B,MAAM2B,QAAQ,CAACP;IAC7C,MAAMQ,UAAUH,WAAW,CAACL;IAC5B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,aAAa9B,MAAM+B,MAAM,CAAiB;IAEhDtB,0BAA0B;QACxBW,UAAUM,WAAW;IACvB,GAAG;QAACN;KAAO;IAEXV,cAAcc,aAAahB,SAASwB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BjB,uBACEoB,UACA,SACAH,UACE,CAACQ,WACA,CAAA,CAACK;QACA,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF;IACF,CAAA,GACF;QAAEmB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMb,WAAW;IACxC,MAAMc,oBAAoBnC,WAAWkC,gBAAgB;IACrDvC,MAAMyC,SAAS,CACb,IAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,IAClE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAACjB;QACE,GAAGW,SAAS;QACbD,WAAWpB,WACTW,MAAM,CAAC,qBAAqB,EAC5BY,aAAahB,SAASoC,GAAG,IAAIhC,MAAM,CAAC,0BAA0B,EAC9DQ,UAAUR,MAAM,CAAC,6BAA6B,EAC9CgB,WAAWhB,MAAM,CAAC,8BAA8B,EAChDC,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;OAERpB,yBACC,oBAACqB;QACCC,SAAS,CAACd;YACRA,MAAMI,eAAe;YACrBlB;QACF;QACAE,WAAWT,MAAM,CAAC,2BAA2B;sBAGjD,oBAACkC;QACCzB,WAAWT,MAAM,CAAC,yBAAyB;QAC3CoC,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU;OAE1CxB,yBAAW,oBAACqB;QAAIzB,WAAWT,MAAM,CAAC,8BAA8B;OAAGM;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 { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\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  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.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 !== 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 === 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","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","styles","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","visible","setVisible","useState","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"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,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,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,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;IAC/D,CAACN,SAASU,OAAO,CAAC,EAAEJ,MAAM,CAAC,oCAAoC;AACjE;AAOA;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,OAAO,EACPC,SAAS,KAAK,EACdC,SAAS,EACT,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,EAAE,GAAGhB;IACrB,MAAMiB,WAAWpB;IACjB,MAAM,CAACqB,SAASC,WAAW,GAAG1B,MAAM2B,QAAQ,CAACP;IAC7C,MAAMQ,UAAUH,WAAW,CAACL;IAC5B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAM4B,aAAa9B,MAAM+B,MAAM,CAAiB;IAEhDtB,0BAA0B;QACxBW,UAAUM,WAAW;IACvB,GAAG;QAACN;KAAO;IAEXV,cAAcc,aAAahB,SAASwB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BjB,uBACEoB,UACA,SACAH,UACE,CAACQ,WACA,CAAA,CAACK;QACA,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF;IACF,CAAA,GACF;QAAEmB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMb,WAAW;IACxC,MAAMc,oBAAoBnC,WAAWkC,gBAAgB;IACrDvC,MAAMyC,SAAS,CACb,IAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,IAClE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAACjB;QACE,GAAGW,SAAS;QACbD,WAAWpB,WACTW,MAAM,CAAC,qBAAqB,EAC5BY,aAAahB,SAASoC,GAAG,IAAIhC,MAAM,CAAC,0BAA0B,EAC9DQ,UAAUR,MAAM,CAAC,6BAA6B,EAC9CgB,WAAWhB,MAAM,CAAC,8BAA8B,EAChDC,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;OAERpB,yBACC,oBAACqB;QACCC,SAAS,CAACd;YACRA,MAAMI,eAAe;YACrBlB;QACF;QACAE,WAAWT,MAAM,CAAC,2BAA2B;sBAGjD,oBAACkC;QACCzB,WAAWT,MAAM,CAAC,yBAAyB;QAC3CoC,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU;OAE1CxB,yBAAW,oBAACqB;QAAIzB,WAAWT,MAAM,CAAC,8BAA8B;OAAGM;AAI5E,EAAE"}

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

@@ -50,20 +50,20 @@
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-in 0.2s ease;
+  animation: animation-panelheadercontext-fade-in 0.2s ease;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__fade {
-  animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
+  animation: animation-panelheadercontext-fade-out 0.2s ease;
 }
 
 .PanelHeaderContext--opened .PanelHeaderContext__in {
   pointer-events: auto;
-  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
+  animation: animation-panelheadercontext-translate-in 0.2s ease;
 }
 
 .PanelHeaderContext--closing .PanelHeaderContext__in {
-  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
+  animation: animation-panelheadercontext-translate-out 0.2s ease;
 }
 
 .PanelHeaderContext__content {
@@ -128,7 +128,7 @@
   Animations
  */
 
-@keyframes vkui-animation-panelheadercontext-translate-in {
+@keyframes animation-panelheadercontext-translate-in {
   from {
     transform: translateY(-100%);
   }
@@ -138,7 +138,7 @@
   }
 }
 
-@keyframes vkui-animation-panelheadercontext-translate-out {
+@keyframes animation-panelheadercontext-translate-out {
   from {
     transform: translateY(0);
   }
@@ -148,7 +148,7 @@
   }
 }
 
-@keyframes vkui-animation-panelheadercontext-fade-in {
+@keyframes animation-panelheadercontext-fade-in {
   from {
     opacity: 0;
   }
@@ -158,7 +158,7 @@
   }
 }
 
-@keyframes vkui-animation-panelheadercontext-fade-out {
+@keyframes animation-panelheadercontext-fade-out {
   from {
     opacity: 1;
   }

package/dist/cssm/components/Placeholder/Placeholder.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
+     */
+    stretched?: boolean;
+    /**
+     * Добавляет отступы к компоненту
+     */
+    withPadding?: boolean;
+}
+export type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export interface PlaceholderProps extends PlaceholderContainerProps {
     /**
      * Иконка
      */
@@ -13,16 +27,15 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>,
      * Кнопка действия
      */
     action?: React.ReactNode;
-    /**
-     * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
-     */
-    stretched?: boolean;
-    /**
-     * Добавляет отступы к компоненту
-     */
-    withPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, withPadding, ...restProps }: PlaceholderProps) => React.JSX.Element;
+export declare const Placeholder: {
+    ({ icon, header, children, action, withPadding, ...restProps }: PlaceholderProps): React.JSX.Element;
+    Container: ({ stretched, withPadding, ...restProps }: PlaceholderContainerProps) => React.JSX.Element;
+    Icon: (props: PlaceholderIconProps) => React.JSX.Element;
+    Header: ({ className, ...restProps }: PlaceholderHeaderProps) => React.JSX.Element;
+    Text: ({ className, ...restProps }: PlaceholderTextProps) => React.JSX.Element;
+    Actions: (props: PlaceholderActionsProps) => React.JSX.Element;
+};

package/dist/cssm/components/Placeholder/Placeholder.js

@@ -1,25 +1,42 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Headline } from '../Typography/Headline/Headline';
 import { Title } from '../Typography/Title/Title';
 import styles from './Placeholder.module.css';
-/**
- * @see https://vkcom.github.io/VKUI/#/Placeholder
- */ export const Placeholder = ({ icon, header, action, children, stretched, getRootRef, className, withPadding = true, ...restProps })=>/*#__PURE__*/ React.createElement("div", {
-        ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Placeholder'], stretched && styles['Placeholder--stretched'], withPadding && styles['Placeholder--withPadding'], className)
-    }, hasReactNode(icon) && /*#__PURE__*/ React.createElement("div", {
-        className: styles['Placeholder__icon']
-    }, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(Title, {
+const PlaceholderContainer = ({ stretched, withPadding = true, ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames(styles['Placeholder'], stretched && styles['Placeholder--stretched'], withPadding && styles['Placeholder--withPadding']),
+        ...restProps
+    });
+const PlaceholderIcon = (props)=>/*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['Placeholder__icon'],
+        ...props
+    });
+const PlaceholderHeader = ({ className, ...restProps })=>/*#__PURE__*/ React.createElement(Title, {
         level: "2",
         weight: "2",
-        className: styles['Placeholder__header']
-    }, header), hasReactNode(children) && /*#__PURE__*/ React.createElement(Headline, {
+        className: classNames(className, styles['Placeholder__header']),
+        ...restProps
+    });
+const PlaceholderText = ({ className, ...restProps })=>/*#__PURE__*/ React.createElement(Headline, {
         weight: "3",
-        className: styles['Placeholder__text']
-    }, children), hasReactNode(action) && /*#__PURE__*/ React.createElement("div", {
-        className: styles['Placeholder__action']
-    }, action));
+        className: classNames(className, styles['Placeholder__text']),
+        ...restProps
+    });
+const PlaceholderActions = (props)=>/*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['Placeholder__action'],
+        ...props
+    });
+/**
+ * @see https://vkcom.github.io/VKUI/#/Placeholder
+ */ export const Placeholder = ({ icon, header, children, action, withPadding = true, ...restProps })=>/*#__PURE__*/ React.createElement(PlaceholderContainer, {
+        withPadding: withPadding,
+        ...restProps
+    }, hasReactNode(icon) && /*#__PURE__*/ React.createElement(PlaceholderIcon, null, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(PlaceholderHeader, null, header), hasReactNode(children) && /*#__PURE__*/ React.createElement(PlaceholderText, null, children), hasReactNode(action) && /*#__PURE__*/ React.createElement(PlaceholderActions, null, action));
+Placeholder.Container = PlaceholderContainer;
+Placeholder.Icon = PlaceholderIcon;
+Placeholder.Header = PlaceholderHeader;
+Placeholder.Text = PlaceholderText;
+Placeholder.Actions = PlaceholderActions;
 
 //# sourceMappingURL=Placeholder.js.map

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 { HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\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  stretched?: boolean;\n  /**\n   * Добавляет отступы к компоненту\n   */\n  withPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  action,\n  children,\n  stretched,\n  getRootRef,\n  className,\n  withPadding = true,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      withPadding && styles['Placeholder--withPadding'],\n      className,\n    )}\n  >\n    {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n    {hasReactNode(header) && (\n      <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n        {header}\n      </Title>\n    )}\n    {hasReactNode(children) && (\n      <Headline weight=\"3\" className={styles['Placeholder__text']}>\n        {children}\n      </Headline>\n    )}\n    {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n  </div>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Title","styles","Placeholder","icon","header","action","children","stretched","getRootRef","className","withPadding","restProps","div","ref","level","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,2BAA2B;AA2B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,cAAc,IAAI,EAClB,GAAGC,WACc,iBACjB,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKL;QACLC,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBM,aAAaN,MAAM,CAAC,yBAAyB,EAC7CS,eAAeT,MAAM,CAAC,2BAA2B,EACjDQ;OAGDX,aAAaK,uBAAS,oBAACS;QAAIH,WAAWR,MAAM,CAAC,oBAAoB;OAAGE,OACpEL,aAAaM,yBACZ,oBAACJ;QAAMc,OAAM;QAAIC,QAAO;QAAIN,WAAWR,MAAM,CAAC,sBAAsB;OACjEG,SAGJN,aAAaQ,2BACZ,oBAACP;QAASgB,QAAO;QAAIN,WAAWR,MAAM,CAAC,oBAAoB;OACxDK,WAGJR,aAAaO,yBAAW,oBAACO;QAAIH,WAAWR,MAAM,CAAC,sBAAsB;OAAGI,SAE3E"}
+{"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  withPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  withPadding = true,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      withPadding && 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  withPadding = true,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer withPadding={withPadding} {...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","withPadding","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,cAAc,IAAI,EAClB,GAAGC,WACuB,iBAC1B,oBAACP;QACCQ,eAAeV,WACbK,MAAM,CAAC,cAAc,EACrBE,aAAaF,MAAM,CAAC,yBAAyB,EAC7CG,eAAeH,MAAM,CAAC,2BAA2B;QAElD,GAAGI,SAAS;;AAMjB,MAAME,kBAAkB,CAACC,sBACvB,oBAACV;QAAcQ,eAAeL,MAAM,CAAC,oBAAoB;QAAG,GAAGO,KAAK;;AAKtE,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGL,WAAmC,iBAC5E,oBAACL;QACCW,OAAM;QACNC,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,sBAAsB;QAC7D,GAAGI,SAAS;;AAMjB,MAAMQ,kBAAkB,CAAC,EAAEH,SAAS,EAAE,GAAGL,WAAiC,iBACxE,oBAACN;QACCa,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,oBAAoB;QAC3D,GAAGI,SAAS;;AAMjB,MAAMS,qBAAqB,CAACN,sBAC1B,oBAACV;QAAcQ,eAAeL,MAAM,CAAC,sBAAsB;QAAG,GAAGO,KAAK;;AAkBxE;;CAEC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,cAAc,IAAI,EAClB,GAAGC,WACc,iBACjB,oBAACH;QAAqBE,aAAaA;QAAc,GAAGC,SAAS;OAC1DR,aAAamB,uBAAS,oBAACT,uBAAiBS,OACxCnB,aAAaoB,yBAAW,oBAACR,yBAAmBQ,SAC5CpB,aAAaqB,2BAAa,oBAACL,uBAAiBK,WAC5CrB,aAAasB,yBAAW,oBAACL,0BAAoBK,SAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}

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

@@ -15,6 +15,7 @@
   flex: 1 0;
   padding-top: inherit;
   padding-bottom: inherit;
+  height: 100%;
 }
 
 .Placeholder__icon {

package/dist/cssm/components/PopoutRoot/PopoutRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => React.JSX.Element;
+export declare const PopoutRoot: ({ popout, modal, children, ...restProps }: PopoutRootProps) => React.JSX.Element;

package/dist/cssm/components/PopoutRoot/PopoutRoot.js

@@ -1,21 +1,17 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { blurActiveElement, useDOM } from '../../lib/dom';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutRoot.module.css';
-const PopoutRootPopout = ({ children })=>{
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['PopoutRoot__popout'], isDesktop && styles['PopoutRoot__popout--absolute'])
-    }, children);
-};
-const PopoutRootModal = ({ children })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        className: styles['PopoutRoot__modal']
-    }, children);
-};
-export const PopoutRoot = ({ popout, modal, children, getRootRef, className, ...restProps })=>{
+const PopoutRootPopout = (props)=>/*#__PURE__*/ React.createElement("div", {
+        className: styles['PopoutRoot__popout'],
+        ...props
+    });
+const PopoutRootModal = (props)=>/*#__PURE__*/ React.createElement("div", {
+        className: styles['PopoutRoot__modal'],
+        ...props
+    });
+export const PopoutRoot = ({ popout, modal, children, ...restProps })=>{
     const { document } = useDOM();
     React.useEffect(()=>{
         popout && blurActiveElement(document);
@@ -23,10 +19,9 @@ export const PopoutRoot = ({ popout, modal, children, getRootRef, className, ...
         document,
         popout
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['PopoutRoot'], className),
-        ref: getRootRef
+        baseClassName: styles['PopoutRoot']
     }, children, /*#__PURE__*/ React.createElement(AppRootPortal, null, !!popout && /*#__PURE__*/ React.createElement(PopoutRootPopout, null, popout), !!modal && /*#__PURE__*/ React.createElement(PopoutRootModal, null, modal)));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAyB;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGP;IAEtB,qBACE,oBAACQ;QACCC,WAAWV,WACTK,MAAM,CAAC,qBAAqB,EAC5BG,aAAaH,MAAM,CAAC,+BAA+B;OAGpDE;AAGP;AAMA,MAAMI,kBAAkB,CAAC,EAAEJ,QAAQ,EAAwB;IACzD,qBAAO,oBAACE;QAAIC,WAAWL,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMK,aAAa,CAAC,EACzBC,MAAM,EACNC,KAAK,EACLP,QAAQ,EACRQ,UAAU,EACVL,SAAS,EACT,GAAGM,WACa;IAChB,MAAM,EAAEC,QAAQ,EAAE,GAAGd;IAErBJ,MAAMmB,SAAS,CAAC;QACdL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWV,WAAWK,MAAM,CAAC,aAAa,EAAEK;QAAYS,KAAKJ;OAC9ER,wBACD,oBAACH,qBACE,CAAC,CAACS,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = (props: PopoutRootPopoutProps) => (\n  <div className={styles['PopoutRoot__popout']} {...props} />\n);\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = (props: PopoutRootModalProps) => (\n  <div className={styles['PopoutRoot__modal']} {...props} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["React","blurActiveElement","useDOM","AppRootPortal","RootComponent","styles","PopoutRootPopout","props","div","className","PopoutRootModal","PopoutRoot","popout","modal","children","restProps","document","useEffect","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAACC,sBACxB,oBAACC;QAAIC,WAAWJ,MAAM,CAAC,qBAAqB;QAAG,GAAGE,KAAK;;AAOzD,MAAMG,kBAAkB,CAACH,sBACvB,oBAACC;QAAIC,WAAWJ,MAAM,CAAC,oBAAoB;QAAG,GAAGE,KAAK;;AAQxD,OAAO,MAAMI,aAAa,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,WAA4B;IACnF,MAAM,EAAEC,QAAQ,EAAE,GAAGd;IAErBF,MAAMiB,SAAS,CAAC;QACdL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACR;QAAe,GAAGW,SAAS;QAAEG,eAAeb,MAAM,CAAC,aAAa;OAC9DS,wBACD,oBAACX,qBACE,CAAC,CAACS,wBAAU,oBAACN,wBAAkBM,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

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

@@ -13,10 +13,6 @@
   height: 100%;
 }
 
-.PopoutRoot__popout--absolute {
-  position: absolute;
-}
-
 .PopoutRoot__modal {
   position: fixed;
   left: 0;