@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        styles['PanelHeaderContext--rounded'],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{visible && children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","styles","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","visible","setVisible","useState","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;IAC/D,CAACN,SAASU,OAAO,CAAC,EAAEJ,MAAM,CAAC,oCAAoC;AACjE;AAOA;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAAC,EACjCC,SAAQ,EACRC,QAAO,EACPC,QAAS,KAAK,CAAA,EACdC,UAAS,EACT,GAAGC,WACqB,GAAK;IAC7B,MAAM,EAAEC,SAAQ,EAAE,GAAGhB;IACrB,MAAMiB,WAAWpB;IACjB,MAAM,CAACqB,SAASC,WAAW,GAAG1B,MAAM2B,QAAQ,CAACP;IAC7C,MAAMQ,UAAUH,WAAW,CAACL;IAC5B,MAAM,EAAES,OAAQ,OAAM,EAAE,GAAG3B;IAC3B,MAAM4B,aAAa9B,MAAM+B,MAAM,CAAiB,IAAI;IAEpDtB,0BAA0B,IAAM;QAC9BW,UAAUM,WAAW,IAAI;IAC3B,GAAG;QAACN;KAAO;IAEXV,cAAcc,aAAahB,SAASwB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BjB,uBACEoB,UACA,SACAH,UACE,CAACQ,WACA,CAAA,CAACK,QAAU;QACV,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF,CAAC;IACH,CAAA,GACF;QAAEmB,SAAS,IAAI;IAAC;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMb,WAAW,KAAK;IAC7C,MAAMc,oBAAoBnC,WAAWkC,gBAAgB;IACrDvC,MAAMyC,SAAS,CACb,IAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,EAAE,EACpE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAACjB;QACE,GAAGW,SAAS;QACbD,WAAWpB,WACTW,MAAM,CAAC,qBAAqB,EAC5BY,aAAahB,SAASoC,GAAG,IAAIhC,MAAM,CAAC,0BAA0B,EAC9DQ,UAAUR,MAAM,CAAC,6BAA6B,EAC9CgB,WAAWhB,MAAM,CAAC,8BAA8B,EAChDC,eAAe,CAACgB,MAAM,EACtBjB,MAAM,CAAC,8BAA8B,EACrCS;QAEFwB,UAAS;OAERpB,yBACC,oBAACqB;QACCC,SAAS,CAACd,QAAU;YAClBA,MAAMI,eAAe;YACrBlB;QACF;QACAE,WAAWT,MAAM,CAAC,2BAA2B;sBAGjD,oBAACkC;QACCzB,WAAWT,MAAM,CAAC,yBAAyB;QAC3CoC,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU,SAAS;qBAEpD,oBAACH;QAAIzB,WAAWT,MAAM,CAAC,8BAA8B;OAAGa,WAAWP;AAI3E,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","styles","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","visible","setVisible","useState","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;IAC/D,CAACN,SAASU,OAAO,CAAC,EAAEJ,MAAM,CAAC,oCAAoC;AACjE;AAOA;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAAC,EACjCC,SAAQ,EACRC,QAAO,EACPC,QAAS,KAAK,CAAA,EACdC,UAAS,EACT,GAAGC,WACqB,GAAK;IAC7B,MAAM,EAAEC,SAAQ,EAAE,GAAGhB;IACrB,MAAMiB,WAAWpB;IACjB,MAAM,CAACqB,SAASC,WAAW,GAAG1B,MAAM2B,QAAQ,CAACP;IAC7C,MAAMQ,UAAUH,WAAW,CAACL;IAC5B,MAAM,EAAES,OAAQ,OAAM,EAAE,GAAG3B;IAC3B,MAAM4B,aAAa9B,MAAM+B,MAAM,CAAiB,IAAI;IAEpDtB,0BAA0B,IAAM;QAC9BW,UAAUM,WAAW,IAAI;IAC3B,GAAG;QAACN;KAAO;IAEXV,cAAcc,aAAahB,SAASwB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BjB,uBACEoB,UACA,SACAH,UACE,CAACQ,WACA,CAAA,CAACK,QAAU;QACV,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF,CAAC;IACH,CAAA,GACF;QAAEmB,SAAS,IAAI;IAAC;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMb,WAAW,KAAK;IAC7C,MAAMc,oBAAoBnC,WAAWkC,gBAAgB;IACrDvC,MAAMyC,SAAS,CACb,IAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,EAAE,EACpE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAACjB;QACE,GAAGW,SAAS;QACbD,WAAWpB,WACTW,MAAM,CAAC,qBAAqB,EAC5BY,aAAahB,SAASoC,GAAG,IAAIhC,MAAM,CAAC,0BAA0B,EAC9DQ,UAAUR,MAAM,CAAC,6BAA6B,EAC9CgB,WAAWhB,MAAM,CAAC,8BAA8B,EAChDC,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;OAERpB,yBACC,oBAACqB;QACCC,SAAS,CAACd,QAAU;YAClBA,MAAMI,eAAe;YACrBlB;QACF;QACAE,WAAWT,MAAM,CAAC,2BAA2B;sBAGjD,oBAACkC;QACCzB,WAAWT,MAAM,CAAC,yBAAyB;QAC3CoC,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU,SAAS;OAEnDxB,yBAAW,oBAACqB;QAAIzB,WAAWT,MAAM,CAAC,8BAA8B;OAAGM;AAI5E,EAAE"}

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

@@ -1 +1,169 @@
-.vkuiPanelHeaderContext{z-index:4;z-index:var(--vkui_internal--z_index_panel_header_context)}.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--opened{height:100%;width:100%}.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--opened{height:auto}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--closing,.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--opened{height:auto}}.vkuiPanelHeaderContext__in{box-sizing:border-box;left:0;padding:8px;pointer-events:none;position:absolute;width:100%}.vkuiPanelHeaderContext__fade{background:rgba(0,0,0,.4);display:none;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiPanelHeaderContext--sizeX-compact .vkuiPanelHeaderContext__fade{display:block}@media (max-width:767.9px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__fade{display:block}}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-in .2s ease}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade{animation:vkui-animation-panelheadercontext-fade-out .2s ease}.vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-in .2s ease;pointer-events:auto}.vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in{animation:vkui-animation-panelheadercontext-translate-out .2s ease}.vkuiPanelHeaderContext .vkuiList{background:#fff;background:var(--vkui--color_background_content)}.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__in{padding:0}.vkuiPanelHeaderContext--rounded:not(.vkuiPanelHeaderContext--ios) .vkuiList,.vkuiPanelHeaderContext--sizeX-regular.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none.vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext--rounded .vkuiList{border-radius:12px;overflow:hidden;padding:8px 0}}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-regular .vkuiPanelHeaderContext__content{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}@media (min-width:768px){.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__in{padding:12px 8px}.vkuiPanelHeaderContext--sizeX-none .vkuiPanelHeaderContext__content{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;box-shadow:0 0 4px rgba(0,0,0,.08),0 8px 8px rgba(0,0,0,.16);overflow:hidden}}@keyframes vkui-animation-panelheadercontext-translate-in{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes vkui-animation-panelheadercontext-translate-out{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes vkui-animation-panelheadercontext-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-panelheadercontext-fade-out{0%{opacity:1}to{opacity:0}}
+.PanelHeaderContext {
+  z-index: var(--vkui_internal--z_index_panel_header_context);
+}
+
+.PanelHeaderContext--opened,
+.PanelHeaderContext--closing {
+  width: 100%;
+  height: 100%;
+}
+
+.PanelHeaderContext--sizeX-regular.PanelHeaderContext--opened,
+.PanelHeaderContext--sizeX-regular.PanelHeaderContext--closing {
+  height: auto;
+}
+
+@media (min-width: 768px) {
+  .PanelHeaderContext--sizeX-none.PanelHeaderContext--opened,
+  .PanelHeaderContext--sizeX-none.PanelHeaderContext--closing {
+    height: auto;
+  }
+}
+
+.PanelHeaderContext__in {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.PanelHeaderContext__fade {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.PanelHeaderContext--sizeX-compact .PanelHeaderContext__fade {
+  display: block;
+}
+
+@media (max-width: 767.9px) {
+  .PanelHeaderContext--sizeX-none .PanelHeaderContext__fade {
+    display: block;
+  }
+}
+
+.PanelHeaderContext--opened .PanelHeaderContext__fade {
+  animation: vkui-animation-panelheadercontext-fade-in 0.2s ease;
+}
+
+.PanelHeaderContext--closing .PanelHeaderContext__fade {
+  animation: vkui-animation-panelheadercontext-fade-out 0.2s ease;
+}
+
+.PanelHeaderContext--opened .PanelHeaderContext__in {
+  pointer-events: auto;
+  animation: vkui-animation-panelheadercontext-translate-in 0.2s ease;
+}
+
+.PanelHeaderContext--closing .PanelHeaderContext__in {
+  animation: vkui-animation-panelheadercontext-translate-out 0.2s ease;
+}
+
+.PanelHeaderContext__content {
+  overflow: hidden;
+  background: var(--vkui--color_background_content);
+}
+
+.PanelHeaderContext--ios .PanelHeaderContext__in {
+  padding: 0;
+}
+
+/**
+ * Имеется ввиду
+ * platform !== Platform.IOS ||
+ * (platform === Platform.IOS && isDesktop)
+ */
+
+.PanelHeaderContext:not(.PanelHeaderContext--ios) .PanelHeaderContext__content,
+.PanelHeaderContext--sizeX-regular.PanelHeaderContext--ios .PanelHeaderContext__content {
+  border-radius: 12px;
+  padding: 8px 0;
+}
+
+@media (min-width: 768px) {
+  .PanelHeaderContext--sizeX-none.PanelHeaderContext--ios .PanelHeaderContext__content {
+    border-radius: 12px;
+    padding: 8px 0;
+  }
+}
+
+/*
+ Desktop
+ */
+
+.PanelHeaderContext--sizeX-regular .PanelHeaderContext__in {
+  padding: 12px 8px;
+}
+
+.PanelHeaderContext--sizeX-regular .PanelHeaderContext__content {
+  border-radius: 12px;
+}
+
+.PanelHeaderContext--sizeX-regular .PanelHeaderContext__content {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+}
+
+@media (min-width: 768px) {
+  .PanelHeaderContext--sizeX-none .PanelHeaderContext__in {
+    padding: 12px 8px;
+  }
+
+  .PanelHeaderContext--sizeX-none .PanelHeaderContext__content {
+    border-radius: 12px;
+  }
+
+  .PanelHeaderContext--sizeX-none .PanelHeaderContext__content {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16);
+  }
+}
+
+/*
+  Animations
+ */
+
+@keyframes vkui-animation-panelheadercontext-translate-in {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes vkui-animation-panelheadercontext-translate-out {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes vkui-animation-panelheadercontext-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes vkui-animation-panelheadercontext-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

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

@@ -1 +1,41 @@
-.vkuiPlaceholder{align-items:center;display:flex;justify-content:center}.vkuiPlaceholder--stretched{bottom:0;left:0;padding-bottom:inherit;padding-top:inherit;position:absolute;right:0;top:0}.vkuiPlaceholder__in{box-sizing:border-box;max-width:100%;padding:48px 32px;text-align:center}.vkuiPlaceholder__icon{color:#99a2ad;color:var(--vkui--color_icon_secondary);display:inline-block;margin-bottom:12px;vertical-align:top}.vkuiPlaceholder__header{color:#000;color:var(--vkui--color_text_primary)}.vkuiPlaceholder__text{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiPlaceholder__header+.vkuiPlaceholder__text{margin-top:8px}.vkuiPlaceholder__action:not(:first-child){margin-top:16px}
+.Placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Placeholder--stretched {
+  flex: 1 0;
+  padding-top: inherit;
+  padding-bottom: inherit;
+}
+
+.Placeholder__in {
+  max-width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 48px 32px;
+}
+
+.Placeholder__icon {
+  margin-bottom: 12px;
+  display: inline-block;
+  vertical-align: top;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.Placeholder__header {
+  color: var(--vkui--color_text_primary);
+}
+
+.Placeholder__text {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Placeholder__header + .Placeholder__text {
+  margin-top: 8px;
+}
+
+.Placeholder__action:not(:first-child) {
+  margin-top: 16px;
+}

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

@@ -10,7 +10,7 @@ export interface PlatformProviderProps {
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *
- * @version 5.1.0
+ * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */
 export declare function PlatformProvider({ value, children }: PlatformProviderProps): JSX.Element;

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

@@ -5,7 +5,7 @@ import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *
- * @version 5.1.0
+ * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */ export function PlatformProvider({ value , children  }) {
     const appearance = useAppearance();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/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 * @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,MAAK,EAAEC,SAAQ,EAAyB,EAAE;IAC3E,MAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT,CAAC"}
+{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/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) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,MAAK,EAAEC,SAAQ,EAAyB,EAAE;IAC3E,MAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT,CAAC"}

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

@@ -1 +1,32 @@
-.vkuiPopoutRoot{height:100%;position:relative;width:100%}.vkuiPopoutRoot__popout{height:100%;left:0;position:fixed;top:0;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiPopoutRoot__popout--absolute{position:absolute}.vkuiPopoutRoot__modal{height:100%;left:0;position:fixed;top:0;width:100%;z-index:99;z-index:var(--vkui--z_index_modal)}.vkuiPopoutRoot__modal:empty,.vkuiPopoutRoot__popout:empty{display:none}
+.PopoutRoot {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.PopoutRoot__popout {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: var(--vkui--z_index_popout);
+  width: 100%;
+  height: 100%;
+}
+
+.PopoutRoot__popout--absolute {
+  position: absolute;
+}
+
+.PopoutRoot__modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: var(--vkui--z_index_modal);
+  width: 100%;
+  height: 100%;
+}
+
+.PopoutRoot__popout:empty,
+.PopoutRoot__modal:empty {
+  display: none;
+}

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

@@ -13,7 +13,7 @@ import styles from './PopoutWrapper.module.css';
     const [opened, setOpened] = React.useState(!hasMask);
     const elRef = React.useRef(null);
     const onFadeInEnd = (e)=>{
-        if (!e || e.animationName === 'vkui-animation-full-fade-in') {
+        if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {
             setOpened(true);
         }
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === 'vkui-animation-full-fade-in') {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","styles","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","opened","setOpened","useState","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAS,SAAQ,EACjBC,QAAS,SAAQ,EACjBC,SAAU,KAAK,CAAA,EACfC,SAAU,IAAI,CAAA,EACdC,OAAQ,IAAI,CAAA,EACZC,SAAQ,EACRC,QAAO,EACPC,UAAS,EACT,GAAGC,WACgB,GAAK;IACxB,MAAMC,WAAWf;IACjB,MAAM,CAACgB,QAAQC,UAAU,GAAGpB,MAAMqB,QAAQ,CAAC,CAACT;IAC5C,MAAMU,QAAQtB,MAAMuB,MAAM,CAAiB,IAAI;IAE/C,MAAMC,cAAc,CAACC,IAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAK,+BAA+B;YAC3DN,UAAU,IAAI;QAChB,CAAC;IACH;IACA,MAAMO,0BAA0BvB,WAAWoB,aAAaN,aAAaZ,SAASsB,GAAG,GAAG,MAAM,GAAG;IAC7F5B,MAAM6B,SAAS,CAAC,IAAM;QACpB,CAACV,UAAUQ,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBR;KAAO;IAEpC,MAAM,EAAEY,OAAM,EAAE,GAAG1B;IACnBH,uBAAuB6B,QAAQ,aAAa,CAACN,IAAMA,EAAEO,cAAc,IAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACC;QACE,GAAGjB,SAAS;QACbD,WAAWf,WACTM,MAAM,CAAC,gBAAgB,EACvB;YACE4B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C6B,KAAK7B,MAAM,CAAC,4BAA4B;YACxC8B,QAAQ9B,MAAM,CAAC,+BAA+B;QAChD,CAAC,CAACE,OAAO,EACT;YACE0B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C+B,MAAM/B,MAAM,CAAC,6BAA6B;YAC1CgC,OAAOhC,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACG,OAAO,EACTC,WAAWJ,MAAM,CAAC,yBAAyB,EAC3CY,UAAUZ,MAAM,CAAC,wBAAwB,EACzCM,SAASN,MAAM,CAAC,uBAAuB,EACvCK,WAAWL,MAAM,CAAC,wBAAwB,EAC1CS;QAEFwB,gBAAgBrB,SAASsB,YAAYjB,WAAW;QAChDkB,KAAKpB;qBAEL,oBAACY;QAAIlB,WAAWT,MAAM,CAAC,2BAA2B;qBAChD,oBAAC2B;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;QAAEQ,SAASA;sBAC3D,oBAACmB;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;OAAGO;AAI3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['vkui-animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","styles","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","opened","setOpened","useState","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAS,SAAQ,EACjBC,QAAS,SAAQ,EACjBC,SAAU,KAAK,CAAA,EACfC,SAAU,IAAI,CAAA,EACdC,OAAQ,IAAI,CAAA,EACZC,SAAQ,EACRC,QAAO,EACPC,UAAS,EACT,GAAGC,WACgB,GAAK;IACxB,MAAMC,WAAWf;IACjB,MAAM,CAACgB,QAAQC,UAAU,GAAGpB,MAAMqB,QAAQ,CAAC,CAACT;IAC5C,MAAMU,QAAQtB,MAAMuB,MAAM,CAAiB,IAAI;IAE/C,MAAMC,cAAc,CAACC,IAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAKnB,MAAM,CAAC,8BAA8B,EAAE;YACnEa,UAAU,IAAI;QAChB,CAAC;IACH;IACA,MAAMO,0BAA0BvB,WAAWoB,aAAaN,aAAaZ,SAASsB,GAAG,GAAG,MAAM,GAAG;IAC7F5B,MAAM6B,SAAS,CAAC,IAAM;QACpB,CAACV,UAAUQ,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBR;KAAO;IAEpC,MAAM,EAAEY,OAAM,EAAE,GAAG1B;IACnBH,uBAAuB6B,QAAQ,aAAa,CAACN,IAAMA,EAAEO,cAAc,IAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACC;QACE,GAAGjB,SAAS;QACbD,WAAWf,WACTM,MAAM,CAAC,gBAAgB,EACvB;YACE4B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C6B,KAAK7B,MAAM,CAAC,4BAA4B;YACxC8B,QAAQ9B,MAAM,CAAC,+BAA+B;QAChD,CAAC,CAACE,OAAO,EACT;YACE0B,QAAQ5B,MAAM,CAAC,+BAA+B;YAC9C+B,MAAM/B,MAAM,CAAC,6BAA6B;YAC1CgC,OAAOhC,MAAM,CAAC,8BAA8B;QAC9C,CAAC,CAACG,OAAO,EACTC,WAAWJ,MAAM,CAAC,yBAAyB,EAC3CY,UAAUZ,MAAM,CAAC,wBAAwB,EACzCM,SAASN,MAAM,CAAC,uBAAuB,EACvCK,WAAWL,MAAM,CAAC,wBAAwB,EAC1CS;QAEFwB,gBAAgBrB,SAASsB,YAAYjB,WAAW;QAChDkB,KAAKpB;qBAEL,oBAACY;QAAIlB,WAAWT,MAAM,CAAC,2BAA2B;qBAChD,oBAAC2B;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;QAAEQ,SAASA;sBAC3D,oBAACmB;QAAIlB,WAAWT,MAAM,CAAC,yBAAyB;OAAGO;AAI3D,EAAE"}

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

@@ -1 +1,96 @@
-.vkuiPopoutWrapper{box-sizing:border-box;height:100%;left:0;pointer-events:none;top:0;width:100%}.vkuiPopoutWrapper--opened{pointer-events:auto}.vkuiPopoutWrapper--closing{pointer-events:none}.vkuiPopoutWrapper--fixed{position:fixed}.vkuiPopoutWrapper__overlay{animation:vkui-animation-full-fade-in .2s ease;animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m) ease;height:100%;left:0;opacity:1;position:fixed;top:0;width:100%}.vkuiPopoutWrapper--closing .vkuiPopoutWrapper__overlay{opacity:0;transition:opacity .2s cubic-bezier(.3,.3,.5,1);transition:opacity var(--vkui--animation_duration_m) var(--vkui--animation_easing_default)}.vkuiPopoutWrapper--masked .vkuiPopoutWrapper__overlay{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary)}.vkuiPopoutWrapper--fixed .vkuiPopoutWrapper__overlay{position:absolute}.vkuiPopoutWrapper__container{box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.vkuiPopoutWrapper__content{display:flex;justify-content:center;pointer-events:none;width:100%}.vkuiPopoutWrapper__content>*{pointer-events:auto}.vkuiPopoutWrapper--alignY-center .vkuiPopoutWrapper__container{align-items:center}.vkuiPopoutWrapper--alignY-bottom .vkuiPopoutWrapper__container{align-items:flex-end}.vkuiPopoutWrapper--alignY-top .vkuiPopoutWrapper__container{align-items:flex-start}.vkuiPopoutWrapper--alignX-center .vkuiPopoutWrapper__container{justify-content:center}.vkuiPopoutWrapper--alignX-left .vkuiPopoutWrapper__container{justify-content:flex-start}.vkuiPopoutWrapper--alignX-right .vkuiPopoutWrapper__container{justify-content:flex-end}@keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}
+.PopoutWrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.PopoutWrapper--opened {
+  pointer-events: initial;
+}
+
+.PopoutWrapper--closing {
+  pointer-events: none;
+}
+
+.PopoutWrapper--fixed {
+  position: fixed;
+}
+
+.PopoutWrapper__overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m) ease;
+}
+
+.PopoutWrapper--closing .PopoutWrapper__overlay {
+  opacity: 0;
+  transition: opacity var(--vkui--animation_duration_m) var(--vkui--animation_easing_default);
+}
+
+.PopoutWrapper--masked .PopoutWrapper__overlay {
+  background: var(--vkui--color_overlay_primary);
+}
+
+.PopoutWrapper--fixed .PopoutWrapper__overlay {
+  position: absolute;
+}
+
+.PopoutWrapper__container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.PopoutWrapper__content {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  pointer-events: none;
+}
+
+.PopoutWrapper__content > * {
+  pointer-events: auto;
+}
+
+.PopoutWrapper--alignY-center .PopoutWrapper__container {
+  align-items: center;
+}
+
+.PopoutWrapper--alignY-bottom .PopoutWrapper__container {
+  align-items: flex-end;
+}
+
+.PopoutWrapper--alignY-top .PopoutWrapper__container {
+  align-items: flex-start;
+}
+
+.PopoutWrapper--alignX-center .PopoutWrapper__container {
+  justify-content: center;
+}
+
+.PopoutWrapper--alignX-left .PopoutWrapper__container {
+  justify-content: flex-start;
+}
+
+.PopoutWrapper--alignX-right .PopoutWrapper__container {
+  justify-content: flex-end;
+}
+
+@keyframes vkui-animation-full-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { FocusTrapProps } from '../FocusTrap/FocusTrap';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {
+export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName' | 'content'>, Pick<FocusTrapProps, 'restoreFocus'> {
     /**
      * Механика вызова всплывающего окна.
      *
@@ -46,4 +47,4 @@ export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowCl
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style: styleProp, className, getRef, onShownChange, ...restProps }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style: styleProp, className, getRef, onShownChange, restoreFocus, ...restProps }: PopoverProps) => JSX.Element;

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

@@ -11,7 +11,7 @@ import { Popper } from '../Popper/Popper';
 import styles from './Popover.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
- */ export const Popover = ({ action ='click' , shown: shownProp , showDelay =150 , hideDelay =150 , offsetDistance =8 , content , children , style: styleProp , className , getRef , onShownChange , ...restProps })=>{
+ */ export const Popover = ({ action ='click' , shown: shownProp , showDelay =150 , hideDelay =150 , offsetDistance =8 , content , children , style: styleProp , className , getRef , onShownChange , restoreFocus =true , ...restProps })=>{
     const { document  } = useDOM();
     const hoverable = action === 'hover';
     const hovered = React.useRef(false);
@@ -100,7 +100,8 @@ import styles from './Popover.module.css';
         },
         renderContent: ({ className: wrapperClassName  })=>/*#__PURE__*/ React.createElement(FocusTrap, {
                 className: wrapperClassName,
-                onClose: handleContentKeyDownEscape
+                onClose: handleContentKeyDownEscape,
+                restoreFocus: restoreFocus
             }, content),
         onMouseOver: hoverable ? hideTimeout.clear : undefined,
         onMouseOut: hoverable ? handleTargetLeave : undefined

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","styles","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","computedShown","setComputedShown","useState","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName' | 'content'>,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","styles","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","computedShown","setComputedShown","useState","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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

@@ -1 +1,28 @@
-.vkuiPopover{animation:vkui-popper-fadein .2s ease;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);position:relative}.vkuiPopover:before{bottom:calc(-1 * 8px);bottom:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));content:"";left:calc(-1 * 8px);left:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));position:absolute;right:calc(-1 * 8px);right:calc(-1 * var(--vkui_internal--popover_safe_zone_padding));top:calc(-1 * 8px);top:calc(-1 * var(--vkui_internal--popover_safe_zone_padding))}
+.Popover {
+  position: relative;
+  animation: vkui-popover-fadein 0.2s ease;
+  background: var(--vkui--color_background_modal);
+  border-radius: var(--vkui--size_border_radius--regular);
+  box-shadow: var(--vkui--elevation3);
+}
+
+/* Создаём "Safe Zone" */
+
+.Popover::before {
+  content: '';
+  position: absolute;
+  top: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
+  right: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
+  bottom: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
+  left: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
+}
+
+@keyframes vkui-popover-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

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

@@ -1 +1,16 @@
-.vkuiPopper{z-index:100;z-index:var(--vkui--z_index_popout)}
+/**
+ * ⚠ WARNING️ ⚠
+ *
+ * Если указать `position: relaitve` контейнеру, где позиционируется `Popper`, то при кейсе когда:
+ * 1. Мы передали `sameWidth`.
+ * 2. Мы позциционируем `Popper` через `position: absolute`.
+ * 3. Мы используем `height: 100%` или `height: 100vh`, чтобы растянуть страницу на всю высоту.
+ * 4. НЕТ скроллбара.
+ * будет неправильно высчитан `offsetWidth` у `targetRef` при первом вызове `effect()` модификатора `sameWdith`,
+ *  а именно из `offsetWidth` будет вычтен размер скроллабара, которого на самом деле на странице нет (см. п. 4)
+ *
+ * Второй и последующие вызовы исправляют ситуацию.
+ */
+.Popper {
+  z-index: var(--vkui--z_index_popout);
+}

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

@@ -1 +1,23 @@
-.vkuiPopperArrow{position:absolute}.vkuiPopperArrow__in{content:"";display:block;transform:translateY(1px)}.vkuiPopperArrow[data-placement^=top] .vkuiPopperArrow__in{transform:rotate(180deg) translateY(1px)}.vkuiPopperArrow[data-placement^=left] .vkuiPopperArrow__in{transform:rotate(90deg) translateY(1px)}.vkuiPopperArrow[data-placement^=right] .vkuiPopperArrow__in{transform:rotate(270deg) translateY(1px)}
+.PopperArrow {
+  position: absolute;
+}
+
+.PopperArrow__in {
+  content: '';
+  display: block;
+
+  /* См. Примечание 1 в PopperArrow.tsx. Для кейса с `.PopperArrow[data-placement^='bottom']`. */
+  transform: translateY(1px);
+}
+
+.PopperArrow[data-placement^='top'] .PopperArrow__in {
+  transform: rotate(180deg) translateY(1px); /* см. Примечание 1 в PopperArrow.tsx */
+}
+
+.PopperArrow[data-placement^='left'] .PopperArrow__in {
+  transform: rotate(90deg) translateY(1px); /* см. Примечание 1 в PopperArrow.tsx */
+}
+
+.PopperArrow[data-placement^='right'] .PopperArrow__in {
+  transform: rotate(270deg) translateY(1px); /* см. Примечание 1 в PopperArrow.tsx */
+}

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

@@ -1 +1,12 @@
-.vkuiProgress{background:#e1e3e6;background:var(--vkui--color_track_background);border-radius:1px;height:2px}.vkuiProgress__in{background:#2688eb;background:var(--vkui--color_stroke_accent);border-radius:inherit;height:100%;transition:width .2s ease}
+.Progress {
+  border-radius: 1px;
+  background: var(--vkui--color_track_background);
+  height: 2px;
+}
+
+.Progress__in {
+  height: 100%;
+  border-radius: inherit;
+  transition: width 0.2s ease;
+  background: var(--vkui--color_stroke_accent);
+}