@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1,321 @@
-.vkuiPanelHeader{position:relative}.vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before{content:"";display:block}.vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed){height:0}.vkuiPanelHeader__fixed{z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader__in{align-items:center;background:#fff;background:var(--vkui--color_background_content);display:flex;justify-content:space-between;position:relative;white-space:nowrap}.vkuiPanelHeader--trnsp .vkuiPanelHeader__in{background:transparent}.vkuiPanelHeader--sizeX-regular .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}@media (min-width:768px){.vkuiPanelHeader--sizeX-none .vkuiPanelHeader--shadow .vkuiPanelHeader__in{box-shadow:0 0 4px rgba(0,0,0,.08)}}.vkuiPanelHeader__before{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-shrink:0}.vkuiPanelHeader__content{overflow:hidden}.vkuiPanelHeader__content>*{display:block;overflow:hidden;text-overflow:ellipsis}.vkuiPanelHeader__content-in{color:#000;color:var(--vkui--color_text_primary);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500}.vkuiPanelHeader:before,.vkuiPanelHeader__in{height:56px;height:var(--vkui--size_panel_header_height--regular);padding-top:0;padding-top:var(--vkui_internal--safe_area_inset_top)}.vkuiPanelHeader__after{box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;justify-content:flex-end}.vkuiPanelHeader--vkapps .vkuiPanelHeader__after{min-width:90px}.vkuiPanelHeader--ios .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 0 4px 4px;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton+.vkuiPanelHeaderButton--primitive{margin-left:-6px;padding-left:0}.vkuiPanelHeader--ios .vkuiPanelHeader__content{opacity:1;text-align:center;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiPanelHeader--ios .vkuiPanelHeader__content-in{font-size:21px}.vkuiPanelHeader--ios .vkuiPanelHeader__content>*{padding:0 4px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:8px}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:8px}.vkuiPanelHeader--ios .vkuiPanelHeader__after{flex-basis:0;flex-grow:1;flex-shrink:0;opacity:1;padding:4px 4px 4px 0;transition:opacity .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s var(--vkui--animation_easing_platform)}.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before,.vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content{opacity:0}.vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty){padding:4px 0 4px 4px}.vkuiPanelHeader--android .vkuiPanelHeader__content{align-items:center;flex-grow:1;max-width:100%}.vkuiPanelHeader--android .vkuiPanelHeader__content-in{font-size:23px}.vkuiPanelHeader--android .vkuiPanelHeader__content>*{padding:0 12px}.vkuiPanelHeader--android .vkuiSearch,.vkuiPanelHeader--vkcom .vkuiSearch{padding:0 4px}.vkuiInternalSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content,.vkuiSplitCol--viewWidth-tabletPlus.vkuiInternal.SplitCol--spaced-none.SplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiInternal.SplitCol--spaced-none.SplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-left:0}}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*,.vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content>*{padding-right:0}.vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content{padding-right:16px}.vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content{padding-left:16px}.vkuiInternalSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content,.vkuiInternalSplitCol--viewWidth-tabletPlus.vkuiInternalSplitCol--spaced-none.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}@media (min-width:768px){.vkuiInternalSplitCol--viewWidth-none.vkuiInternalSplitCol--spaced-none.vkuiInternalSplitCol--spaced-auto .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__content{padding-right:0}}.vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty),.vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty){padding:4px 4px 4px 0}.vkuiPanelHeader--vkcom{position:relative;z-index:10;z-index:var(--vkui_internal--z_index_panel_header_fixed)}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiInternalModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiInternalModalPageHeader__in):not(.vkuiPanelHeader--sep) .vkuiPanelHeader__in:after{background-color:#fff;background-color:var(--vkui--color_background_content);bottom:0;content:"";height:1px;height:var(--vkui_internal--thin_border);left:1px;left:var(--vkui_internal--thin_border);position:absolute;right:1px;right:var(--vkui_internal--thin_border)}}.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}@media (min-width:768px){.vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-none:not(.vkuiInternalModalPageHeader__in) .vkuiPanelHeader__in{border-bottom:none;border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset}}.vkuiPanelHeader--vkcom .vkuiPanelHeader__content{text-align:center}.vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty){padding:0 0 0 4px}.vkuiPanelHeader--vkcom .vkuiPanelHeader__after,.vkuiPanelHeader--vkcom .vkuiPanelHeader__before{flex-basis:0;flex-grow:1;flex-shrink:0}.vkuiPanelHeader__separator{margin-top:calc(-1 * 1px);margin-top:calc(-1 * var(--vkui_internal--thin_border))}.vkuiPanelHeader--no-before .vkuiPanelHeader__content>*{padding-left:0}
+.PanelHeader {
+  position: relative;
+}
+
+.PanelHeader--vis.PanelHeader--fixed::before {
+  display: block;
+  content: '';
+}
+
+.PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
+  height: 0;
+}
+
+.PanelHeader__fixed {
+  z-index: var(--vkui_internal--z_index_panel_header_fixed);
+}
+
+.PanelHeader__in {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  white-space: nowrap;
+  position: relative;
+  background: var(--vkui--color_background_content);
+}
+
+.PanelHeader--trnsp .PanelHeader__in {
+  background: transparent;
+}
+
+.PanelHeader--sizeX-regular .PanelHeader--shadow .PanelHeader__in {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
+}
+
+@media (min-width: 768px) {
+  .PanelHeader--sizeX-none .PanelHeader--shadow .PanelHeader__in {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.PanelHeader__before {
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_accent_themed);
+  display: flex;
+  flex-shrink: 0;
+}
+
+.PanelHeader__content {
+  overflow: hidden;
+}
+
+.PanelHeader__content > * {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.PanelHeader__content-in {
+  color: var(--vkui--color_text_primary);
+  font-weight: 500;
+  font-family: var(--vkui--font_family_accent);
+}
+
+.PanelHeader::before,
+.PanelHeader__in {
+  height: var(--vkui--size_panel_header_height--regular);
+  padding-top: var(--vkui_internal--safe_area_inset_top);
+}
+
+.PanelHeader__after {
+  display: flex;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.PanelHeader--vkapps .PanelHeader__after {
+  min-width: 90px;
+}
+
+/**
+ * iOS
+ */
+
+.PanelHeader--ios .PanelHeader__before {
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  padding: 4px 0 4px 4px;
+}
+
+.PanelHeader--ios .PanelHeader__before .PanelHeaderButton + .PanelHeaderButton--primitive {
+  margin-left: -6px;
+  padding-left: 0;
+}
+
+.PanelHeader--ios .PanelHeader__content {
+  text-align: center;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+}
+
+.PanelHeader--ios .PanelHeader__content-in {
+  font-size: 21px;
+}
+
+.PanelHeader--ios .PanelHeader__content > * {
+  padding: 0 4px;
+}
+
+.PanelHeader--ios.PanelHeader--no-before .PanelHeader__content {
+  padding-left: 8px;
+}
+
+.PanelHeader--ios.PanelHeader--no-after .PanelHeader__content > * {
+  padding-right: 0;
+}
+
+.PanelHeader--ios.PanelHeader--no-after .PanelHeader__content {
+  padding-right: 8px;
+}
+
+.PanelHeader--ios .PanelHeader__after {
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  padding: 4px 4px 4px 0;
+}
+
+.View--ios .View__panel--prev .PanelHeader__before,
+.View--ios .View__panel--prev .PanelHeader__after,
+.View--ios .View__panel--prev .PanelHeader__content {
+  opacity: 0;
+}
+
+/**
+ * Android
+ */
+
+.PanelHeader--android .PanelHeader__before:not(:empty) {
+  padding: 4px 0 4px 4px;
+}
+
+.PanelHeader--android .PanelHeader__content {
+  align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+.PanelHeader--android .PanelHeader__content-in {
+  font-size: 23px;
+}
+
+.PanelHeader--android .PanelHeader__content > * {
+  padding: 0 12px;
+}
+
+/**
+ * CMP:
+ * SplitCol
+ */
+
+:global(.vkuiInternalSplitCol--spaced)
+  .PanelHeader--android.PanelHeader--no-before:not(:global(.vkuiInternalModalPageHeader__in))
+  .PanelHeader__content {
+  padding-left: 0;
+}
+
+:global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(
+    .vkuiInternalSplitCol--spaced-none
+  ):global(.vkuiInternalSplitCol--spaced-auto)
+  .PanelHeader--android.PanelHeader--no-before:not(:global(.vkuiInternalModalPageHeader__in))
+  .PanelHeader__content {
+  padding-left: 0;
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-none):global(
+      .vkuiInternalSplitCol--spaced-auto
+    )
+    .PanelHeader--android.PanelHeader--no-before:not(:global(.vkuiInternalModalPageHeader__in))
+    .PanelHeader__content {
+    padding-left: 0;
+  }
+}
+
+.PanelHeader--android.PanelHeader--no-after .PanelHeader__content > *,
+.PanelHeader--vkcom.PanelHeader--no-after .PanelHeader__content > * {
+  padding-right: 0;
+}
+
+.PanelHeader--android.PanelHeader--no-after .PanelHeader__content {
+  padding-right: 16px;
+}
+
+.PanelHeader--android.PanelHeader--no-before .PanelHeader__content {
+  padding-left: 16px;
+}
+
+:global(.vkuiInternalSplitCol--spaced)
+  .PanelHeader--android.PanelHeader--no-after:not(:global(.vkuiInternalModalPageHeader__in))
+  .PanelHeader__content {
+  padding-right: 0;
+}
+
+:global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(
+    .vkuiInternalSplitCol--spaced-none
+  ):global(.vkuiInternalSplitCol--spaced-auto)
+  .PanelHeader--android.PanelHeader--no-after:not(:global(.vkuiInternalModalPageHeader__in))
+  .PanelHeader__content {
+  padding-right: 0;
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-none):global(
+      .vkuiInternalSplitCol--spaced-auto
+    )
+    .PanelHeader--android.PanelHeader--no-after:not(:global(.vkuiInternalModalPageHeader__in))
+    .PanelHeader__content {
+    padding-right: 0;
+  }
+}
+
+.PanelHeader--android .PanelHeader__after:not(:empty),
+.PanelHeader--vkcom .PanelHeader__after:not(:empty) {
+  padding: 4px 4px 4px 0;
+}
+
+/**
+ * VKCOM
+ */
+
+.PanelHeader--vkcom {
+  position: relative;
+  z-index: var(--vkui_internal--z_index_panel_header_fixed);
+}
+
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(:global(.vkuiInternalModalPageHeader__in)):not(
+    .PanelHeader--sep
+  )
+  .PanelHeader__in::after {
+  position: absolute;
+  left: var(--vkui_internal--thin_border);
+  right: var(--vkui_internal--thin_border);
+  bottom: 0;
+  height: var(--vkui_internal--thin_border);
+  background-color: var(--vkui--color_background_content);
+  content: '';
+}
+
+@media (min-width: 768px) {
+  .PanelHeader--vkcom.PanelHeader--sizeX-none:not(:global(.vkuiInternalModalPageHeader__in)):not(
+      .PanelHeader--sep
+    )
+    .PanelHeader__in::after {
+    position: absolute;
+    left: var(--vkui_internal--thin_border);
+    right: var(--vkui_internal--thin_border);
+    bottom: 0;
+    height: var(--vkui_internal--thin_border);
+    background-color: var(--vkui--color_background_content);
+    content: '';
+  }
+}
+
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(:global(.vkuiInternalModalPageHeader__in))
+  .PanelHeader__in {
+  border-top-left-radius: var(--vkui--size_border_radius_paper--regular);
+  border-top-right-radius: var(--vkui--size_border_radius_paper--regular);
+  box-shadow: 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset;
+  border-bottom: none;
+}
+
+@media (min-width: 768px) {
+  .PanelHeader--vkcom.PanelHeader--sizeX-none:not(:global(.vkuiInternalModalPageHeader__in))
+    .PanelHeader__in {
+    border-top-left-radius: var(--vkui--size_border_radius_paper--regular);
+    border-top-right-radius: var(--vkui--size_border_radius_paper--regular);
+    box-shadow: 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha) inset;
+    border-bottom: none;
+  }
+}
+
+.PanelHeader--vkcom .PanelHeader__content {
+  text-align: center;
+}
+
+.PanelHeader--vkcom .PanelHeader__before:not(:empty) {
+  padding: 0 0 0 4px;
+}
+
+.PanelHeader--vkcom .PanelHeader__before,
+.PanelHeader--vkcom .PanelHeader__after {
+  flex-basis: 0;
+  flex-shrink: 0;
+  flex-grow: 1;
+}
+
+.PanelHeader__separator {
+  margin-top: calc(-1 * var(--vkui_internal--thin_border));
+}
+
+.PanelHeader--no-before .PanelHeader__content > * {
+  padding-left: 0;
+}
+
+/**
+ * CMP:
+ * Panel
+ */
+
+:global(.vkuiInternalPanel--centered) .PanelHeader {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js

@@ -60,7 +60,7 @@ const warn = warnOnce('PanelHeaderButton');
         hoverMode: hoverMode,
         activeEffectDelay: 200,
         activeMode: activeMode,
-        className: classNames(styles['PanelHeaderButton'], platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && styles['PanelHeaderButton--primitive'], !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'], className)
+        className: classNames('vkuiInternalPanelHeaderButton', styles['PanelHeaderButton'], platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isPrimitive && styles['PanelHeaderButton--primitive'], !isPrimitive && !isPrimitiveLabel && styles['PanelHeaderButton--notPrimitive'], className)
     }, isPrimitive ? /*#__PURE__*/ React.createElement(ButtonTypography, {
         primary: primary
     }, children) : children, isPrimitiveLabel ? /*#__PURE__*/ React.createElement(ButtonTypography, {

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 { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { 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 === 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 === 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 Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.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    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\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        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","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","IOS","Component","level","weight","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href","activeEffectDelay","hasOwnProperty"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,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,QAAO,EAAEC,SAAQ,EAAyB,GAAK;IACzE,MAAMC,WAAWf;IAEjB,IAAIe,aAAad,SAASe,GAAG,EAAE;QAC7B,qBACE,oBAACV;YAAMW,WAAU;YAAOC,OAAM;YAAIC,QAAQN,UAAU,MAAM,GAAG;WAC1DC;IAGP,CAAC;IAED,qBAAO,oBAACT;QAAKc,QAAQJ,aAAad,SAASmB,KAAK,GAAGC,YAAY,GAAG;OAAGP;AACvE;AAEA,MAAMQ,OAAOnB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMoB,oBAAoB,CAAC,EAChCT,SAAQ,EACRD,SAAU,KAAK,CAAA,EACfW,MAAK,EACLC,UAAS,EACT,GAAGC,WACoB,GAAK;IAC5B,MAAMC,cAAc5B,qBAAqBe;IACzC,MAAMc,mBAAmB7B,qBAAqByB;IAC9C,MAAMT,WAAWf;IAEjB,IAAI6B;IACJ,IAAIC;IAEJ,OAAQf;QACN,KAAKd,SAASe,GAAG;YACfa,YAAY;YACZC,aAAa;YACb,KAAM;QACR,KAAK7B,SAASmB,KAAK;YACjBS,YAAYtB,MAAM,CAAC,2BAA2B;YAC9CuB,aAAavB,MAAM,CAAC,4BAA4B;YAChD,KAAM;QACR;YACEsB,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBC,QACxBjC,qBAAqBY,aACnBZ,qBAAqBsB,UACrBE,SAAS,CAAC,aAAa,IACvBA,SAAS,CAAC,kBAAkB;QAGhC,IAAI,CAACQ,mBAAmB;YACtBZ,KACE,sMACA;QAEJ,CAAC;IACH,CAAC;IAED,qBACE,oBAAClB;QACCa,WAAWS,UAAUU,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGV,SAAS;QACbG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAW3B,WACTS,MAAM,CAAC,oBAAoB,EAC3BC,mBAAmB8B,cAAc,CAACvB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BiB,eAAepB,MAAM,CAAC,+BAA+B,EACrD,CAACoB,eAAe,CAACC,oBAAoBrB,MAAM,CAAC,kCAAkC,EAC9EkB;OAGDE,4BAAc,oBAACf;QAAiBC,SAASA;OAAUC,YAA+BA,QAAQ,EAC1Fc,iCACC,oBAAChB;QAAiBC,SAASA;QAASY,WAAWlB,MAAM,CAAC,2BAA2B;OAC9EiB,SAGHA,KACD;AAGP,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 { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { 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 === 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 === 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 Platform.IOS:\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case Platform.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    const hasAccessibleName = Boolean(\n      getTitleFromChildren(children) ||\n        getTitleFromChildren(label) ||\n        restProps['aria-label'] ||\n        restProps['aria-labelledby'],\n    );\n\n    if (!hasAccessibleName) {\n      warn(\n        'a11y: У кнопки нет названия, которое может прочитать скринридер, и она недоступна для части пользователей. Замените содержимое на текст или добавьте описание действия с помощью пропа aria-label.',\n        'error',\n      );\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","Platform","getTitleFromChildren","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","IOS","Component","level","weight","VKCOM","undefined","warn","PanelHeaderButton","label","className","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","process","env","NODE_ENV","hasAccessibleName","Boolean","href","activeEffectDelay","hasOwnProperty"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,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,QAAO,EAAEC,SAAQ,EAAyB,GAAK;IACzE,MAAMC,WAAWf;IAEjB,IAAIe,aAAad,SAASe,GAAG,EAAE;QAC7B,qBACE,oBAACV;YAAMW,WAAU;YAAOC,OAAM;YAAIC,QAAQN,UAAU,MAAM,GAAG;WAC1DC;IAGP,CAAC;IAED,qBAAO,oBAACT;QAAKc,QAAQJ,aAAad,SAASmB,KAAK,GAAGC,YAAY,GAAG;OAAGP;AACvE;AAEA,MAAMQ,OAAOnB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMoB,oBAAoB,CAAC,EAChCT,SAAQ,EACRD,SAAU,KAAK,CAAA,EACfW,MAAK,EACLC,UAAS,EACT,GAAGC,WACoB,GAAK;IAC5B,MAAMC,cAAc5B,qBAAqBe;IACzC,MAAMc,mBAAmB7B,qBAAqByB;IAC9C,MAAMT,WAAWf;IAEjB,IAAI6B;IACJ,IAAIC;IAEJ,OAAQf;QACN,KAAKd,SAASe,GAAG;YACfa,YAAY;YACZC,aAAa;YACb,KAAM;QACR,KAAK7B,SAASmB,KAAK;YACjBS,YAAYtB,MAAM,CAAC,2BAA2B;YAC9CuB,aAAavB,MAAM,CAAC,4BAA4B;YAChD,KAAM;QACR;YACEsB,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBC,QACxBjC,qBAAqBY,aACnBZ,qBAAqBsB,UACrBE,SAAS,CAAC,aAAa,IACvBA,SAAS,CAAC,kBAAkB;QAGhC,IAAI,CAACQ,mBAAmB;YACtBZ,KACE,sMACA;QAEJ,CAAC;IACH,CAAC;IAED,qBACE,oBAAClB;QACCa,WAAWS,UAAUU,IAAI,GAAG,MAAM,QAAQ;QACzC,GAAGV,SAAS;QACbG,WAAWA;QACXQ,mBAAmB;QACnBP,YAAYA;QACZL,WAAW3B,WACT,iCACAS,MAAM,CAAC,oBAAoB,EAC3BC,mBAAmB8B,cAAc,CAACvB,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9BiB,eAAepB,MAAM,CAAC,+BAA+B,EACrD,CAACoB,eAAe,CAACC,oBAAoBrB,MAAM,CAAC,kCAAkC,EAC9EkB;OAGDE,4BAAc,oBAACf;QAAiBC,SAASA;OAAUC,YAA+BA,QAAQ,EAC1Fc,iCACC,oBAAChB;QAAiBC,SAASA;QAASY,WAAWlB,MAAM,CAAC,2BAA2B;OAC9EiB,SAGHA,KACD;AAGP,EAAE"}

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

@@ -1 +1,111 @@
-.vkuiPanelHeaderButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;box-shadow:none;color:currentColor;display:block;margin:0;padding:0;position:relative}.vkuiPanelHeaderButton[disabled]{opacity:.6}.vkuiPanelHeaderButton .vkuiCounter{padding:0;position:absolute;right:2px;top:8px}.vkuiPanelHeaderButton--primitive{height:48px;line-height:48px;padding:0 12px}.vkuiPanelHeaderButton--ios{align-items:center;display:flex;font-size:17px;position:relative}.vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive{height:44px;line-height:44px}.vkuiPanelHeaderButton--ios .vkuiIcon--24{padding:10px}.vkuiPanelHeaderButton--ios .vkuiIcon--28{padding:8px}.vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderButton--android .vkuiIcon--24{padding:12px}.vkuiPanelHeaderButton--android .vkuiIcon--28{padding:10px}.vkuiPanelHeaderButton--vkcom{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiPanelHeaderButton--vkcom>:not(.vkuiCounter){opacity:.7;transition:opacity .3s}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active>:not(.vkuiCounter),.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover>:not(.vkuiCounter){opacity:1}.vkuiPanelHeaderButton--vkcom{align-items:center;display:flex;padding:10px}.vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive{border-radius:50%}.vkuiPanelHeaderBack--vkcom.vkuiPanelHeaderBack--has-label{padding-right:11px}@media (min-width:768px){.vkuiPanelHeaderBack--ios.vkuiPanelHeaderBack--has-label:not(.vkuiPanelHeaderBack--sizeX-compact){padding-right:8px}}.vkuiPanelHeaderBack--sizeX-compact.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}@media (max-width:767.9px){.vkuiPanelHeaderBack--sizeX-none.vkuiPanelHeaderBack--ios .vkuiPanelHeaderButton__label{display:none}}
+.PanelHeaderButton {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  display: block;
+  color: currentColor;
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+.PanelHeaderButton[disabled] {
+  opacity: 0.6;
+}
+
+.PanelHeaderButton--primitive {
+  height: 48px;
+  line-height: 48px;
+  padding: 0 12px;
+}
+
+/*
+ * iOS
+ */
+
+.PanelHeaderButton--ios {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 17px;
+}
+
+.PanelHeaderButton--ios.PanelHeaderButton--primitive {
+  height: 44px;
+  line-height: 44px;
+}
+
+.PanelHeaderButton--ios :global(.vkuiIcon--24) {
+  padding: 10px;
+}
+
+.PanelHeaderButton--ios :global(.vkuiIcon--28) {
+  padding: 8px;
+}
+
+/*
+ * Android
+ */
+
+.PanelHeaderButton--android.PanelHeaderButton--notPrimitive {
+  border-radius: 50%;
+}
+
+.PanelHeaderButton--android :global(.vkuiIcon--24) {
+  padding: 12px;
+}
+
+.PanelHeaderButton--android :global(.vkuiIcon--28) {
+  padding: 10px;
+}
+
+/**
+* VKCOM
+*/
+
+.PanelHeaderButton--vkcom {
+  color: var(--vkui--color_text_secondary);
+}
+
+.PanelHeaderButton--vkcom > :not(:global(.vkuiInternalCounter)) {
+  transition: opacity 0.3s;
+  opacity: 0.7;
+}
+
+.PanelHeaderButton--vkcom.PanelHeaderButton--hover > :not(:global(.vkuiInternalCounter)),
+.PanelHeaderButton--vkcom.PanelHeaderButton--active > :not(:global(.vkuiInternalCounter)) {
+  opacity: 1;
+}
+
+.PanelHeaderButton--vkcom {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+
+.PanelHeaderButton--vkcom.PanelHeaderButton--notPrimitive {
+  border-radius: 50%;
+}
+
+.PanelHeaderBack--vkcom.PanelHeaderBack--has-label {
+  padding-right: 11px;
+}
+
+@media (min-width: 768px) {
+  .PanelHeaderBack--ios.PanelHeaderBack--has-label:not(.PanelHeaderBack--sizeX-compact) {
+    padding-right: 8px;
+  }
+}
+
+.PanelHeaderBack--sizeX-compact.PanelHeaderBack--ios .PanelHeaderButton__label {
+  display: none;
+}
+
+@media (max-width: 767.9px) {
+  .PanelHeaderBack--sizeX-none.PanelHeaderBack--ios .PanelHeaderButton__label {
+    display: none;
+  }
+}

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 { 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 {\n  hasStatus: boolean;\n  hasBefore: boolean;\n  children?: React.ReactNode;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline 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\n          className={classNames(\n            'vkuiInternalPanelHeaderContent__children',\n            styles['PanelHeaderContent__children'],\n          )}\n        >\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","Component","weight","div","className","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;AAC9C,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;AAcA,MAAMK,sBAAsB,CAAC,EAAEC,UAAS,EAAEC,UAAS,EAAEC,SAAQ,EAA4B,GAAK;IAC5F,MAAMC,WAAWf;IACjB,IAAIe,aAAad,SAASe,KAAK,EAAE;QAC/B,qBACE,oBAACX;YAAKY,WAAU;YAAMC,QAAO;WAC1BJ;IAGP,CAAC;IAED,OAAOF,aAAaC,0BAClB,oBAACT;QAASa,WAAU;QAAMC,QAAO;OAC9BJ,0BAGH,oBAACK;QAAIC,WAAWd,MAAM,CAAC,kCAAkC;OAAGQ,SAC7D;AACH;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCD,UAAS,EACTE,MAAK,EACLC,MAAK,EACLC,OAAM,EACNC,OAAM,EACNX,SAAQ,EACRY,QAAO,EACP,GAAGC,WACqB,GAAK;IAC7B,MAAMC,cAAcF,UAAUxB,WAAW,KAAK;IAC9C,MAAM2B,YAAYH,UAAU,CAAC,IAAIC,SAAS;IAC1C,MAAMZ,WAAWf;IACjB,MAAM8B,UAAUJ,UACZ;QACE,GAAGC,SAAS;QACZD;QACAK,mBAAmB;QACnBC,WAAWjB,aAAad,SAASgC,GAAG;QACpCC,YAAY;IACd,IACA,CAAC,CAAC;IAEN,qBACE,oBAACf;QACE,GAAGU,SAAS;QACbP,OAAOA;QACPF,WAAWtB,WACTQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BW;OAGDrB,aAAa0B,yBAAW,oBAACN;QAAIC,WAAWd,MAAM,CAAC,6BAA6B;OAAGmB,uBAChF,oBAACG;QACE,GAAGE,OAAO;QACXV,WAAWtB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACmB,UAAUV,aAAad,SAASmC,OAAO,IAAI9B,MAAM,CAAC,mCAAmC;OAGvFP,aAAayB,yBACZ,oBAACrB;QAASiB,WAAWd,MAAM,CAAC,6BAA6B;OAAGkB,uBAE9D,oBAACL;QACCC,WAAWtB,WACT,4CACAQ,MAAM,CAAC,+BAA+B;qBAGxC,oBAACK;QAAoBC,WAAWb,aAAayB;QAASX,WAAWd,aAAa0B;OAC3EX,WAEFf,aAAawB,wBACZ,oBAACJ;QAAIC,WAAWd,MAAM,CAAC,4BAA4B;OAAGiB,SAGzDxB,aAAa0B,yBAAW,oBAACN;QAAIC,WAAWd,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 } 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 Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline 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\n          className={classNames(\n            'vkuiInternalPanelHeaderContent__children',\n            styles['PanelHeaderContent__children'],\n          )}\n        >\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","Component","weight","div","className","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,UAAS,EAAEC,UAAS,EAAEC,SAAQ,EAA4B,GAAK;IAC5F,MAAMC,WAAWf;IACjB,IAAIe,aAAad,SAASe,KAAK,EAAE;QAC/B,qBACE,oBAACX;YAAKY,WAAU;YAAMC,QAAO;WAC1BJ;IAGP,CAAC;IAED,OAAOF,aAAaC,0BAClB,oBAACT;QAASa,WAAU;QAAMC,QAAO;OAC9BJ,0BAGH,oBAACK;QAAIC,WAAWd,MAAM,CAAC,kCAAkC;OAAGQ,SAC7D;AACH;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCD,UAAS,EACTE,MAAK,EACLC,MAAK,EACLC,OAAM,EACNC,OAAM,EACNX,SAAQ,EACRY,QAAO,EACP,GAAGC,WACqB,GAAK;IAC7B,MAAMC,cAAcF,UAAUxB,WAAW,KAAK;IAC9C,MAAM2B,YAAYH,UAAU,CAAC,IAAIC,SAAS;IAC1C,MAAMZ,WAAWf;IACjB,MAAM8B,UAAUJ,UACZ;QACE,GAAGC,SAAS;QACZD;QACAK,mBAAmB;QACnBC,WAAWjB,aAAad,SAASgC,GAAG;QACpCC,YAAY;IACd,IACA,CAAC,CAAC;IAEN,qBACE,oBAACf;QACE,GAAGU,SAAS;QACbP,OAAOA;QACPF,WAAWtB,WACTQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BW;OAGDrB,aAAa0B,yBAAW,oBAACN;QAAIC,WAAWd,MAAM,CAAC,6BAA6B;OAAGmB,uBAChF,oBAACG;QACE,GAAGE,OAAO;QACXV,WAAWtB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACmB,UAAUV,aAAad,SAASmC,OAAO,IAAI9B,MAAM,CAAC,mCAAmC;OAGvFP,aAAayB,yBACZ,oBAACrB;QAASiB,WAAWd,MAAM,CAAC,6BAA6B;OAAGkB,uBAE9D,oBAACL;QACCC,WAAWtB,WACT,4CACAQ,MAAM,CAAC,+BAA+B;qBAGxC,oBAACK;QAAoBC,WAAWb,aAAayB;QAASX,WAAWd,aAAa0B;OAC3EX,WAEFf,aAAawB,wBACZ,oBAACJ;QAAIC,WAAWd,MAAM,CAAC,4BAA4B;OAAGiB,SAGzDxB,aAAa0B,yBAAW,oBAACN;QAAIC,WAAWd,MAAM,CAAC,4BAA4B;;AAIpF,EAAE"}

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

@@ -1 +1,96 @@
-.vkuiPanelHeaderContent{align-items:center;box-sizing:border-box;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:100%;justify-content:flex-start;line-height:normal;max-width:100%}.vkuiPanelHeaderContent__before{flex-shrink:0;margin-right:12px}.vkuiPanelHeaderContent__in{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;height:100%;justify-content:center;min-width:0}.vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent__status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiPanelHeaderContent__status{color:#818c99;color:var(--vkui--color_text_secondary);margin-top:1px;max-width:100%;order:1}.vkuiPanelHeaderContent__children{align-items:center;display:flex;max-width:100%}.vkuiPanelHeaderContent__children-in{flex-grow:0;min-width:0}.vkuiPanelHeaderContent__aside{align-items:center;color:#2688eb;color:var(--vkui--color_icon_accent);display:flex;justify-content:flex-start;margin-left:2px}.vkuiPanelHeaderContent__width{width:1000px}.vkuiPanelHeaderContent__in--centered{align-items:center}.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-size:21px}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in,.vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_accent);font-weight:500;line-height:56px;line-height:var(--vkui--size_panel_header_height--regular)}.vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in{font-size:23px}.vkuiPanelHeader--no-before .vkuiPanelHeaderContent--vkcom{padding-left:16px}
+.PanelHeaderContent {
+  line-height: initial;
+  height: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-family: var(--vkui--font_family_base);
+}
+
+.PanelHeaderContent__before {
+  flex-shrink: 0;
+  margin-right: 12px;
+}
+
+.PanelHeaderContent__in {
+  flex-grow: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  height: 100%;
+}
+
+.PanelHeaderContent__status,
+.PanelHeaderContent__children-in {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.PanelHeaderContent__status {
+  order: 1;
+  margin-top: 1px;
+  max-width: 100%;
+  color: var(--vkui--color_text_secondary);
+}
+
+.PanelHeaderContent__children {
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.PanelHeaderContent__children-in {
+  flex-grow: 0;
+  min-width: 0;
+}
+
+.PanelHeaderContent__aside {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-left: 2px;
+  color: var(--vkui--color_icon_accent);
+}
+
+.PanelHeaderContent__width {
+  width: 1000px;
+}
+
+.PanelHeaderContent__in--centered {
+  align-items: center;
+}
+
+/**
+ * iOS
+ */
+
+.PanelHeaderContent--ios .PanelHeaderContent__children-in {
+  font-size: 21px;
+  font-family: var(--vkui--font_family_accent);
+  font-weight: 500;
+  line-height: var(--vkui--size_panel_header_height--regular);
+}
+
+/**
+ * Android
+ */
+
+.PanelHeaderContent--android .PanelHeaderContent__children-in {
+  font-size: 23px;
+  font-family: var(--vkui--font_family_accent);
+  font-weight: 500;
+  line-height: var(--vkui--size_panel_header_height--regular);
+}
+
+/**
+ * VKCOM
+ */
+
+.PanelHeader--no-before .PanelHeaderContent--vkcom {
+  padding-left: 16px;
+}

package/dist/cssm/components/PanelHeaderContext/PanelHeaderContext.js

@@ -49,7 +49,7 @@ const sizeXClassNames = {
     ]);
     return /*#__PURE__*/ React.createElement(FixedLayout, {
         ...restProps,
-        className: classNames(styles['PanelHeaderContext'], platform === Platform.IOS && styles['PanelHeaderContext--ios'], opened && styles['PanelHeaderContext--opened'], closing && styles['PanelHeaderContext--closing'], sizeXClassNames[sizeX], styles['PanelHeaderContext--rounded'], className),
+        className: classNames(styles['PanelHeaderContext'], platform === Platform.IOS && styles['PanelHeaderContext--ios'], opened && styles['PanelHeaderContext--opened'], closing && styles['PanelHeaderContext--closing'], sizeXClassNames[sizeX], className),
         vertical: "top"
     }, visible && /*#__PURE__*/ React.createElement("div", {
         onClick: (event)=>{
@@ -61,9 +61,9 @@ const sizeXClassNames = {
         className: styles['PanelHeaderContext__in'],
         ref: elementRef,
         onAnimationEnd: closing ? onAnimationEnd : undefined
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, visible && /*#__PURE__*/ React.createElement("div", {
         className: styles['PanelHeaderContext__content']
-    }, visible && children)));
+    }, children)));
 };
 
 //# sourceMappingURL=PanelHeaderContext.js.map