@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -8,9 +8,9 @@
 }
 
 .host:not(.static):not(.hasFixed) {
-  block-size: 0;
   /* см. https://github.com/VKCOM/VKUI/issues/5571 */
   z-index: var(--vkui_internal--z_index_panel_header);
+  block-size: 0;
 }
 
 .fixed {
@@ -18,11 +18,11 @@
 }
 
 .in {
+  position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   white-space: nowrap;
-  position: relative;
   background: var(--vkui--color_background_content);
 }
 
@@ -42,9 +42,9 @@
 
 .before {
   box-sizing: border-box;
-  color: var(--vkui--color_icon_accent_themed);
   display: flex;
   flex-shrink: 0;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .content {
@@ -60,9 +60,9 @@
 }
 
 .contentIn {
-  color: var(--vkui--color_text_primary);
-  font-weight: 500;
   font-family: var(--vkui--font_family_accent);
+  font-weight: 500;
+  color: var(--vkui--color_text_primary);
 }
 
 .host::before,
@@ -73,10 +73,10 @@
 }
 
 .after {
+  box-sizing: border-box;
   display: flex;
-  justify-content: flex-end;
   align-items: center;
-  box-sizing: border-box;
+  justify-content: flex-end;
   color: var(--vkui--color_icon_accent_themed);
 }
 
@@ -92,20 +92,20 @@
  */
 
 .ios .before {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  flex-shrink: 0;
+  flex-basis: 0;
   padding-block: 4px;
   padding-inline: 4px 0;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
 }
 
 .ios .before .host + .primitive {
-  -webkit-margin-start: -6px;
-          margin-inline-start: -6px;
   -webkit-padding-start: 0;
           padding-inline-start: 0;
+  -webkit-margin-start: -6px;
+          margin-inline-start: -6px;
 }
 
 .ios .content {
@@ -143,13 +143,13 @@
 }
 
 .ios .after {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
-  opacity: 1;
-  transition: opacity 0.3s var(--vkui--animation_easing_platform);
+  flex-shrink: 0;
+  flex-basis: 0;
   padding-block: 4px;
   padding-inline: 0 4px;
+  opacity: 1;
+  transition: opacity 0.3s var(--vkui--animation_easing_platform);
 }
 
 /**
@@ -164,8 +164,8 @@
 }
 
 .android .content {
-  align-items: center;
   flex-grow: 1;
+  align-items: center;
   max-inline-size: 100%;
 }
 
@@ -283,43 +283,43 @@
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp)
   .in::after {
   position: absolute;
-  inset-inline: var(--vkui--size_border--regular);
   inset-block-end: 0;
+  inset-inline: var(--vkui--size_border--regular);
   block-size: var(--vkui--size_border--regular);
-  background-color: var(--vkui--color_background_content);
   content: '';
+  background-color: var(--vkui--color_background_content);
 }
 
 @media (min-width: 768px) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .vkcom.sizeXNone:not(:global(.vkuiInternalModalPageHeader__in)):not(.sep):not(.trnsp) .in::after {
     position: absolute;
-    inset-inline: var(--vkui--size_border--regular);
     inset-block-end: 0;
+    inset-inline: var(--vkui--size_border--regular);
     block-size: var(--vkui--size_border--regular);
-    background-color: var(--vkui--color_background_content);
     content: '';
+    background-color: var(--vkui--color_background_content);
   }
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .vkcom.sizeXRegular:not(:global(.vkuiInternalModalPageHeader__in)):not(.trnsp) .in {
+  -webkit-border-after: 0;
+          border-block-end: 0;
   border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
   border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
   box-shadow: 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset;
-  -webkit-border-after: 0;
-          border-block-end: 0;
 }
 
 @media (min-width: 768px) {
   /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   .vkcom.sizeXNone:not(:global(.vkuiInternalModalPageHeader__in)):not(.trnsp) .in {
+    -webkit-border-after: 0;
+            border-block-end: 0;
     border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
     border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
     box-shadow: 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha) inset;
-    -webkit-border-after: 0;
-            border-block-end: 0;
   }
 }
 
@@ -334,9 +334,9 @@
 
 .vkcom .before,
 .vkcom .after {
-  flex-basis: 0;
-  flex-shrink: 0;
   flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
 }
 
 .separator {
@@ -360,7 +360,7 @@
 
 :global(.vkuiInternalPanel--centered) .host {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
 }

package/dist/cssm/components/PanelHeaderBack/PanelHeaderBack.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Icon20ChevronLeftOutline, Icon24ArrowLeftOutline, Icon28ArrowLeftOutline, Icon28ChevronBack, Icon28ChevronLeftOutline } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { AdaptiveIconRenderer } from "../AdaptiveIconRenderer/AdaptiveIconRenderer.js";
 import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton.js";
@@ -33,13 +34,14 @@ const getBackIcon = (platform)=>{
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */ export const PanelHeaderBack = ({ label = 'Назад', className, hideLabelOnVKCom = false, hideLabelOnIOS = false, ...restProps })=>{
     const platform = usePlatform();
+    const direction = useConfigDirection();
     const { sizeX = 'none' } = useAdaptivity();
     // также label нужно скрывать при platform === 'ios' && sizeX === regular
     // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
     const showLabel = platform === 'vkcom' && !hideLabelOnVKCom || platform === 'ios' && !hideLabelOnIOS;
     return /*#__PURE__*/ _jsx(PanelHeaderButton, {
         ...restProps,
-        className: classNames(sizeX !== 'regular' && sizeXClassNames[sizeX], platform === 'ios' && styles.backIos, platform === 'vkcom' && styles.backVkcom, showLabel && !!label && styles.backHasLabel, className),
+        className: classNames(sizeX !== 'regular' && sizeXClassNames[sizeX], platform === 'ios' && styles.backIos, platform === 'vkcom' && styles.backVkcom, showLabel && !!label && styles.backHasLabel, direction === 'rtl' && styles.rtl, className),
         label: showLabel ? label : label && /*#__PURE__*/ _jsx(VisuallyHidden, {
             children: label
         }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nconst sizeXClassNames = {\n  none: styles.backSizeXNone,\n  compact: styles.backSizeXCompact,\n};\n\nexport type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {\n  hideLabelOnVKCom?: boolean;\n  hideLabelOnIOS?: boolean;\n};\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label = 'Назад',\n  className,\n  hideLabelOnVKCom = false,\n  hideLabelOnIOS = false,\n  ...restProps\n}: PanelHeaderBackProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel =\n    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n        platform === 'ios' && styles.backIos,\n        platform === 'vkcom' && styles.backVkcom,\n        showLabel && !!label && styles.backHasLabel,\n        className,\n      )}\n      label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","sizeXClassNames","none","backSizeXNone","compact","backSizeXCompact","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","hideLabelOnVKCom","hideLabelOnIOS","restProps","sizeX","showLabel","backIos","backVkcom","backHasLabel"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAEvE,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,aAAa;IAC1BC,SAASJ,OAAOK,gBAAgB;AAClC;AAOA,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAACf;QACV,KAAK;YACH,qBACE,KAACK;gBACCW,aAAanB;gBACboB,aAAahB;;QAGnB;YACE,qBACE,KAACI;gBACCW,aAAalB;gBACbmB,aAAalB;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmB,kBAAkB,CAAC,EAC9BC,QAAQ,OAAO,EACfC,SAAS,EACTC,mBAAmB,KAAK,EACxBC,iBAAiB,KAAK,EACtB,GAAGC,WACkB;IACrB,MAAMR,WAAWX;IACjB,MAAM,EAAEoB,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMsB,YACJ,AAACV,aAAa,WAAW,CAACM,oBAAsBN,aAAa,SAAS,CAACO;IAEzE,qBACE,KAAChB;QACE,GAAGiB,SAAS;QACbH,WAAWlB,WACTsB,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CT,aAAa,SAASP,OAAOkB,OAAO,EACpCX,aAAa,WAAWP,OAAOmB,SAAS,EACxCF,aAAa,CAAC,CAACN,SAASX,OAAOoB,YAAY,EAC3CR;QAEFD,OAAOM,YAAYN,QAAQA,uBAAS,KAACZ;sBAAgBY;;kBAEpDL,YAAYC;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderBack/PanelHeaderBack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Icon20ChevronLeftOutline,\n  Icon24ArrowLeftOutline,\n  Icon28ArrowLeftOutline,\n  Icon28ChevronBack,\n  Icon28ChevronLeftOutline,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { PlatformType } from '../../lib/platform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport {\n  PanelHeaderButton,\n  type PanelHeaderButtonProps,\n} from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from '../PanelHeaderButton/PanelHeaderButton.module.css';\n\nconst sizeXClassNames = {\n  none: styles.backSizeXNone,\n  compact: styles.backSizeXCompact,\n};\n\nexport type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {\n  hideLabelOnVKCom?: boolean;\n  hideLabelOnIOS?: boolean;\n};\n\nconst getBackIcon = (platform: PlatformType) => {\n  switch (platform) {\n    case 'ios':\n      return <Icon28ChevronBack />;\n    case 'vkcom':\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon20ChevronLeftOutline}\n          IconRegular={Icon28ChevronLeftOutline}\n        />\n      );\n    default:\n      return (\n        <AdaptiveIconRenderer\n          IconCompact={Icon24ArrowLeftOutline}\n          IconRegular={Icon28ArrowLeftOutline}\n        />\n      );\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderBack = ({\n  label = 'Назад',\n  className,\n  hideLabelOnVKCom = false,\n  hideLabelOnIOS = false,\n  ...restProps\n}: PanelHeaderBackProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const { sizeX = 'none' } = useAdaptivity();\n  // также label нужно скрывать при platform === 'ios' && sizeX === regular\n  // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104\n  const showLabel =\n    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);\n\n  return (\n    <PanelHeaderButton\n      {...restProps}\n      className={classNames(\n        sizeX !== 'regular' && sizeXClassNames[sizeX],\n        platform === 'ios' && styles.backIos,\n        platform === 'vkcom' && styles.backVkcom,\n        showLabel && !!label && styles.backHasLabel,\n        direction === 'rtl' && styles.rtl,\n        className,\n      )}\n      label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}\n    >\n      {getBackIcon(platform)}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon20ChevronLeftOutline","Icon24ArrowLeftOutline","Icon28ArrowLeftOutline","Icon28ChevronBack","Icon28ChevronLeftOutline","classNames","useAdaptivity","useConfigDirection","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","styles","sizeXClassNames","none","backSizeXNone","compact","backSizeXCompact","getBackIcon","platform","IconCompact","IconRegular","PanelHeaderBack","label","className","hideLabelOnVKCom","hideLabelOnIOS","restProps","direction","sizeX","showLabel","backIos","backVkcom","backHasLabel","rtl"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,sBAAsB,EACtBC,sBAAsB,EACtBC,iBAAiB,EACjBC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,oBAAoB,QAAQ,kDAA+C;AACpF,SACEC,iBAAiB,QAEZ,4CAAyC;AAChD,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,oDAAoD;AAEvE,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,aAAa;IAC1BC,SAASJ,OAAOK,gBAAgB;AAClC;AAOA,MAAMC,cAAc,CAACC;IACnB,OAAQA;QACN,KAAK;YACH,qBAAO,KAAChB;QACV,KAAK;YACH,qBACE,KAACM;gBACCW,aAAapB;gBACbqB,aAAajB;;QAGnB;YACE,qBACE,KAACK;gBACCW,aAAanB;gBACboB,aAAanB;;IAGrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMoB,kBAAkB,CAAC,EAC9BC,QAAQ,OAAO,EACfC,SAAS,EACTC,mBAAmB,KAAK,EACxBC,iBAAiB,KAAK,EACtB,GAAGC,WACkB;IACrB,MAAMR,WAAWX;IACjB,MAAMoB,YAAYrB;IAClB,MAAM,EAAEsB,QAAQ,MAAM,EAAE,GAAGvB;IAC3B,yEAAyE;IACzE,wGAAwG;IACxG,MAAMwB,YACJ,AAACX,aAAa,WAAW,CAACM,oBAAsBN,aAAa,SAAS,CAACO;IAEzE,qBACE,KAAChB;QACE,GAAGiB,SAAS;QACbH,WAAWnB,WACTwB,UAAU,aAAahB,eAAe,CAACgB,MAAM,EAC7CV,aAAa,SAASP,OAAOmB,OAAO,EACpCZ,aAAa,WAAWP,OAAOoB,SAAS,EACxCF,aAAa,CAAC,CAACP,SAASX,OAAOqB,YAAY,EAC3CL,cAAc,SAAShB,OAAOsB,GAAG,EACjCV;QAEFD,OAAOO,YAAYP,QAAQA,uBAAS,KAACZ;sBAAgBY;;kBAEpDL,YAAYC;;AAGnB,EAAE"}

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

@@ -1,15 +1,15 @@
 .host {
+  position: relative;
+  display: block;
+  padding: 0;
+  margin: 0;
+  color: currentColor;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background: none;
   border: 0;
   box-shadow: none;
-  display: block;
-  color: currentColor;
-  padding: 0;
-  margin: 0;
-  position: relative;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -24,11 +24,19 @@
 
 .primitive {
   block-size: 48px;
-  line-height: 48px;
   padding-block: 0;
   padding-inline: 10px;
+  line-height: 48px;
+}
+
+/* stylelint-disable selector-max-type */
+
+.rtl svg {
+  transform: scaleX(-1);
 }
 
+/* stylelint-enable selector-max-type */
+
 /*
  * iOS
  */
@@ -97,8 +105,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .vkcom > :not(:global(.vkuiInternalBadge)):not(:global(.vkuiInternalCounter)) {
-  transition: opacity 0.3s;
   opacity: 0.7;
+  transition: opacity 0.3s;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -150,9 +158,9 @@
 
 .host :global(.vkuiInternalCounter) {
   position: absolute;
-  padding: 0;
   inset-block-start: 4px;
   inset-inline-end: 4px;
+  padding: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

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

@@ -1,12 +1,12 @@
 .host {
-  line-height: initial;
-  block-size: 100%;
-  max-inline-size: 100%;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  max-inline-size: 100%;
+  block-size: 100%;
   font-family: var(--vkui--font_family_base);
+  line-height: initial;
 }
 
 .before {
@@ -16,12 +16,12 @@
 }
 
 .in {
-  flex-grow: 1;
-  min-inline-size: 0;
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
+  min-inline-size: 0;
   block-size: 100%;
 }
 
@@ -29,22 +29,22 @@
 .childrenIn,
 .childrenText {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .subtitle {
   order: 1;
+  max-inline-size: 100%;
   -webkit-margin-before: 1px;
           margin-block-start: 1px;
-  max-inline-size: 100%;
   color: var(--vkui--color_text_secondary);
 }
 
 .children {
-  max-inline-size: 100%;
   display: flex;
   align-items: center;
+  max-inline-size: 100%;
 }
 
 .childrenIn {
@@ -74,8 +74,8 @@
  */
 
 .ios .childrenIn {
-  font-size: 21px;
   font-family: var(--vkui--font_family_accent);
+  font-size: 21px;
   font-weight: 500;
   line-height: var(--vkui_internal--panel_header_height);
 }
@@ -85,8 +85,8 @@
  */
 
 .android .childrenIn {
-  font-size: 23px;
   font-family: var(--vkui--font_family_accent);
+  font-size: 23px;
   font-weight: 500;
   line-height: var(--vkui_internal--panel_header_height);
 }

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

@@ -22,21 +22,21 @@
 
 .in {
   position: absolute;
-  z-index: 1;
   inset-inline-start: 0;
+  z-index: 1;
+  box-sizing: border-box;
   inline-size: 100%;
   padding: 8px;
-  box-sizing: border-box;
 }
 
 .fade {
-  display: var(--vkui_internal--PanelHeaderContext__fade_display);
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 0;
+  display: var(--vkui_internal--PanelHeaderContext__fade_display);
   inline-size: 100%;
   block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
   background: rgba(0, 0, 0, 0.4);
 }
 
@@ -83,16 +83,16 @@
 
 .host:not(.ios) .content,
 .sizeXRegular.ios .content {
-  border-radius: 12px;
   padding-block: 8px;
   padding-inline: 0;
+  border-radius: 12px;
 }
 
 @media (min-width: 768px) {
   .sizeXNone.ios .content {
-    border-radius: 12px;
     padding-block: 8px;
     padding-inline: 0;
+    border-radius: 12px;
   }
 }
 

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

@@ -1,10 +1,10 @@
 .host {
+  box-sizing: border-box;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
   text-align: center;
-  box-sizing: border-box;
 }
 
 .withPadding {
@@ -18,9 +18,9 @@
 }
 
 .icon {
+  display: inline-block;
   -webkit-margin-after: 12px;
           margin-block-end: 12px;
-  display: inline-block;
   vertical-align: top;
   color: var(--vkui--color_icon_secondary);
 }

package/dist/cssm/components/PlatformProvider/PlatformProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { TokensClassProvider } from "../../lib/tokens/index.js";
+import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";
 import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride.js";
 /**
  * Компонент, позволяющий переопределить платформу для части приложения

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps): React.ReactNode {\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","platform"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,4BAAmB;AACvD,SAASC,sBAAsB,QAAQ,8CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,KAACH;QAAuBI,UAAUF;kBAChC,cAAA,KAACH;sBAAqBI;;;AAG5B"}
+{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps): React.ReactNode {\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","platform"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,sBAAsB,QAAQ,8CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,KAACH;QAAuBI,UAAUF;kBAChC,cAAA,KAACH;sBAAqBI;;;AAG5B"}

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js

@@ -14,12 +14,19 @@ const stylesAlignY = {
     top: styles.alignYTop,
     bottom: styles.alignYBottom
 };
+const stylesStrategy = {
+    fixed: styles.fixed,
+    absolute: styles.absolute,
+    none: undefined
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
- */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, noBackground = false, fixed = true, children, onClick, zIndex = 'var(--vkui--z_index_popout)', ...restProps })=>{
+ */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, noBackground = false, strategy: strategyProp, // TODO [>=8]: удалить свойство
+fixed = true, children, onClick, zIndex = 'var(--vkui--z_index_popout)', ...restProps })=>{
+    const strategy = strategyProp || (fixed ? 'fixed' : 'none');
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: classNames(styles.host, stylesAlignY[alignY], stylesAlignX[alignX], closing ? styles.closing : styles.opened, fixed && styles.fixed, !noBackground && styles.masked),
+        baseClassName: classNames(styles.host, stylesAlignY[alignY], stylesAlignX[alignX], closing ? styles.closing : styles.opened, strategy && stylesStrategy[strategy], !noBackground && styles.masked),
         baseStyle: {
             zIndex
         },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles.alignXCenter,\n  left: styles.alignXLeft,\n  right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n  center: styles.alignYCenter,\n  top: styles.alignYTop,\n  bottom: styles.alignYBottom,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n  /**\n   * Позволяет задать z-index через токен или числом\n   */\n  zIndex?: number | string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  zIndex = 'var(--vkui--z_index_popout)',\n  ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles.closing : styles.opened,\n        fixed && styles.fixed,\n        !noBackground && styles.masked,\n      )}\n      baseStyle={{ zIndex }}\n    >\n      <div className={styles.container}>\n        <div className={styles.overlay} onClick={onClick} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesAlignX","center","alignXCenter","left","alignXLeft","right","alignXRight","stylesAlignY","alignYCenter","top","alignYTop","bottom","alignYBottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","zIndex","restProps","baseClassName","host","opened","masked","baseStyle","div","className","container","overlay","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,OAAOG,YAAY;IAC3BC,MAAMJ,OAAOK,UAAU;IACvBC,OAAON,OAAOO,WAAW;AAC3B;AAEA,MAAMC,eAAe;IACnBN,QAAQF,OAAOS,YAAY;IAC3BC,KAAKV,OAAOW,SAAS;IACrBC,QAAQZ,OAAOa,YAAY;AAC7B;AA+BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EACtC,GAAGC,WACgB;IACnB,qBACE,KAACxB;QACE,GAAGwB,SAAS;QACbC,eAAe1B,WACbE,OAAOyB,IAAI,EACXjB,YAAY,CAACO,OAAO,EACpBd,YAAY,CAACe,OAAO,EACpBC,UAAUjB,OAAOiB,OAAO,GAAGjB,OAAO0B,MAAM,EACxCP,SAASnB,OAAOmB,KAAK,EACrB,CAACD,gBAAgBlB,OAAO2B,MAAM;QAEhCC,WAAW;YAAEN;QAAO;kBAEpB,cAAA,MAACO;YAAIC,WAAW9B,OAAO+B,SAAS;;8BAC9B,KAACF;oBAAIC,WAAW9B,OAAOgC,OAAO;oBAAEX,SAASA;;8BACzC,KAACQ;oBAAIC,WAAW9B,OAAOiC,OAAO;8BAAGb;;;;;AAIzC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles.alignXCenter,\n  left: styles.alignXLeft,\n  right: styles.alignXRight,\n};\n\nconst stylesAlignY = {\n  center: styles.alignYCenter,\n  top: styles.alignYTop,\n  bottom: styles.alignYBottom,\n};\n\nconst stylesStrategy = {\n  fixed: styles.fixed,\n  absolute: styles.absolute,\n  none: undefined,\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * @deprecated будет удалён в **VKUI v8**\n   * Используйте `strategy` вместо этого свойства.\n   *\n   * Включает фиксированное позиционирование.\n   *\n   * При значении `false` у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Стратегия позиционирования:\n   *\n   * - `fixed`: у контейнера выставлен `position: fixed`\n   * - `absolute`: у контейнера выставлен `position: absolute`\n   * - `none`: у контейнера не выставлен `position`\n   *\n   * @default 'fixed'\n   */\n  strategy?: 'fixed' | 'absolute' | 'none';\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n  /**\n   * Позволяет задать z-index через токен или числом\n   */\n  zIndex?: number | string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  strategy: strategyProp,\n  // TODO [>=8]: удалить свойство\n  fixed = true,\n  children,\n  onClick,\n  zIndex = 'var(--vkui--z_index_popout)',\n  ...restProps\n}: PopoutWrapperProps): React.ReactNode => {\n  const strategy = strategyProp || (fixed ? 'fixed' : 'none');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles.closing : styles.opened,\n        strategy && stylesStrategy[strategy],\n        !noBackground && styles.masked,\n      )}\n      baseStyle={{ zIndex }}\n    >\n      <div className={styles.container}>\n        <div className={styles.overlay} onClick={onClick} />\n        <div className={styles.content}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","RootComponent","styles","stylesAlignX","center","alignXCenter","left","alignXLeft","right","alignXRight","stylesAlignY","alignYCenter","top","alignYTop","bottom","alignYBottom","stylesStrategy","fixed","absolute","none","undefined","PopoutWrapper","alignY","alignX","closing","noBackground","strategy","strategyProp","children","onClick","zIndex","restProps","baseClassName","host","opened","masked","baseStyle","div","className","container","overlay","content"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,OAAOG,YAAY;IAC3BC,MAAMJ,OAAOK,UAAU;IACvBC,OAAON,OAAOO,WAAW;AAC3B;AAEA,MAAMC,eAAe;IACnBN,QAAQF,OAAOS,YAAY;IAC3BC,KAAKV,OAAOW,SAAS;IACrBC,QAAQZ,OAAOa,YAAY;AAC7B;AAEA,MAAMC,iBAAiB;IACrBC,OAAOf,OAAOe,KAAK;IACnBC,UAAUhB,OAAOgB,QAAQ;IACzBC,MAAMC;AACR;AA4CA;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,UAAUC,YAAY,EACtB,+BAA+B;AAC/BV,QAAQ,IAAI,EACZW,QAAQ,EACRC,OAAO,EACPC,SAAS,6BAA6B,EACtC,GAAGC,WACgB;IACnB,MAAML,WAAWC,gBAAiBV,CAAAA,QAAQ,UAAU,MAAK;IAEzD,qBACE,KAAChB;QACE,GAAG8B,SAAS;QACbC,eAAehC,WACbE,OAAO+B,IAAI,EACXvB,YAAY,CAACY,OAAO,EACpBnB,YAAY,CAACoB,OAAO,EACpBC,UAAUtB,OAAOsB,OAAO,GAAGtB,OAAOgC,MAAM,EACxCR,YAAYV,cAAc,CAACU,SAAS,EACpC,CAACD,gBAAgBvB,OAAOiC,MAAM;QAEhCC,WAAW;YAAEN;QAAO;kBAEpB,cAAA,MAACO;YAAIC,WAAWpC,OAAOqC,SAAS;;8BAC9B,KAACF;oBAAIC,WAAWpC,OAAOsC,OAAO;oBAAEX,SAASA;;8BACzC,KAACQ;oBAAIC,WAAWpC,OAAOuC,OAAO;8BAAGb;;;;;AAIzC,EAAE"}

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

@@ -1,9 +1,9 @@
 .host {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
-  inset-inline-start: 0;
-  inset-block-start: 0;
   pointer-events: none;
 }
 
@@ -19,10 +19,14 @@
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .overlay {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
   opacity: 1;
@@ -42,24 +46,25 @@
   background: var(--vkui--color_overlay_primary);
 }
 
-.fixed .overlay {
+.fixed .overlay,
+.absolute .overlay {
   position: absolute;
 }
 
 .container {
-  inline-size: 100%;
-  block-size: 100%;
   position: relative;
-  display: flex;
   box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .content {
+  position: relative;
   display: flex;
   justify-content: center;
   inline-size: 100%;
   pointer-events: none;
-  position: relative;
 }
 
 /* stylelint-disable-next-line selector-max-universal */

package/dist/cssm/components/Popover/Popover.js

@@ -1,16 +1,16 @@
 'use client';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { usePatchChildren } from "../../hooks/usePatchChildren.js";
+import { useReferenceElement } from "../../hooks/useReferenceElement.js";
 import { usePopover } from "./usePopover.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */ export const Popover = ({ children, ...restProps })=>{
-    const { anchorRef, anchorProps: referenceProps, popover } = usePopover(restProps);
-    const [, child] = usePatchChildren(children, referenceProps, anchorRef);
+    const { anchorRef, anchorProps, popover } = usePopover(restProps);
+    const reference = useReferenceElement(children, anchorProps, anchorRef);
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
-            child,
+            reference,
             popover
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport type { FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { usePopover } from './usePopover';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'placement'\n  | 'onPlacementChange'\n  | 'trigger'\n  | 'content'\n  | 'hoverDelay'\n  | 'closeAfterClick'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'shown'\n  | 'onShownChange'\n  | 'onShownChanged'\n  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n  | 'customMiddlewares'\n  | 'strategy'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends Omit<AllowedFloatingComponentProps, 'autoFocus'>,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n  /**\n   * Отключает у всплывающего элемента стилизацию по умолчанию.\n   *\n   * У `content`:\n   * - _background_\n   * - _border-radius_\n   * - _box-shadow_\n   *\n   * У `arrow`:\n   * - _color_\n   *\n   * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n   * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n   */\n  noStyling?: boolean;\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: PopoverArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n   */\n  keepMounted?: boolean;\n  autoFocus?: FocusTrapProps['autoFocus'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({ children, ...restProps }: PopoverProps): React.ReactNode => {\n  const { anchorRef, anchorProps: referenceProps, popover } = usePopover<HTMLDivElement>(restProps);\n\n  const [, child] = usePatchChildren<HTMLDivElement>(children, referenceProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {child}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","usePatchChildren","usePopover","Popover","children","restProps","anchorRef","anchorProps","referenceProps","popover","child","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,kCAA+B;AAShE,SAASC,UAAU,QAAQ,kBAAe;AAsG1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,aAAaC,cAAc,EAAEC,OAAO,EAAE,GAAGP,WAA2BG;IAEvF,MAAM,GAAGK,MAAM,GAAGT,iBAAiCG,UAAUI,gBAAgBF;IAE7E,qBACE,MAACN,MAAMW,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport type { FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { usePopover } from './usePopover';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'placement'\n  | 'onPlacementChange'\n  | 'trigger'\n  | 'content'\n  | 'hoverDelay'\n  | 'closeAfterClick'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'shown'\n  | 'onShownChange'\n  | 'onShownChanged'\n  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n  | 'customMiddlewares'\n  | 'strategy'\n  | 'disableFocusTrap'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends Omit<AllowedFloatingComponentProps, 'autoFocus'>,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n  /**\n   * Отключает у всплывающего элемента стилизацию по умолчанию.\n   *\n   * У `content`:\n   * - _background_\n   * - _border-radius_\n   * - _box-shadow_\n   *\n   * У `arrow`:\n   * - _color_\n   *\n   * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n   * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n   */\n  noStyling?: boolean;\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: PopoverArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n   */\n  keepMounted?: boolean;\n  autoFocus?: FocusTrapProps['autoFocus'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({ children, ...restProps }: PopoverProps): React.ReactNode => {\n  const { anchorRef, anchorProps, popover } = usePopover<HTMLDivElement>(restProps);\n\n  const reference = useReferenceElement(children, anchorProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {reference}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useReferenceElement","usePopover","Popover","children","restProps","anchorRef","anchorProps","popover","reference","Fragment"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAStE,SAASC,UAAU,QAAQ,kBAAe;AAwG1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,QAAQ,EAAE,GAAGC,WAAyB;IAC9D,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAA2BG;IAEvE,MAAMI,YAAYR,oBAAoBG,UAAUG,aAAaD;IAE7D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}

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

@@ -5,9 +5,9 @@
 /* Создаём "Safe Zone" */
 
 .host::before {
-  content: '';
   position: absolute;
   inset: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
+  content: '';
 }
 
 .in {