@vkontakte/vkui 6.1.1 → 6.2.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  ['compact']: styles['PanelHeaderContext--sizeX-compact'],\n  ['regular']: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== 'vkcom' && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === 'ios' && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","useDOM","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","styles","sizeXClassNames","none","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","visible","setVisible","useState","closing","sizeX","elementRef","useRef","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","vertical","div","onClick","ref","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAAC,UAAU,EAAEA,MAAM,CAAC,oCAAoC;IACxD,CAAC,UAAU,EAAEA,MAAM,CAAC,oCAAoC;AAC1D;AAOA;;CAEC,GACD,OAAO,MAAMG,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,OAAO,EACPC,SAAS,KAAK,EACdC,SAAS,EACT,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,EAAE,GAAGb;IACrB,MAAMc,WAAWhB;IACjB,MAAM,CAACiB,SAASC,WAAW,GAAGtB,MAAMuB,QAAQ,CAACP;IAC7C,MAAMQ,UAAUH,WAAW,CAACL;IAC5B,MAAM,EAAES,QAAQ,MAAM,EAAE,GAAGvB;IAC3B,MAAMwB,aAAa1B,MAAM2B,MAAM,CAAiB;IAEhDpB,0BAA0B;QACxBS,UAAUM,WAAW;IACvB,GAAG;QAACN;KAAO;IAEXR,cAAcY,aAAa,WAAWJ;IAEtC,+BAA+B;IAC/Bb,uBACEgB,UACA,SACAH,UACE,CAACQ,WACA,CAAA,CAACI;QACA,IAAIF,WAAWG,OAAO,IAAI,CAACH,WAAWG,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBjB;QACF;IACF,CAAA,GACF;QAAEkB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,MAAMC,iBAAiB,IAAMZ,WAAW;IACxC,MAAMa,oBAAoB9B,WAAW6B,gBAAgB;IACrDlC,MAAMoC,SAAS,CACb,IAAOZ,UAAUW,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK,IAClE;QAACH;QAAmBX;KAAQ;IAG9B,qBACE,MAACf;QACE,GAAGS,SAAS;QACbD,WAAWhB,WACTS,MAAM,CAAC,qBAAqB,EAC5BU,aAAa,SAASV,MAAM,CAAC,0BAA0B,EACvDM,UAAUN,MAAM,CAAC,6BAA6B,EAC9Cc,WAAWd,MAAM,CAAC,8BAA8B,EAChDC,eAAe,CAACc,MAAM,EACtBR;QAEFsB,UAAS;;YAERlB,yBACC,KAACmB;gBACCC,SAAS,CAACb;oBACRA,MAAMI,eAAe;oBACrBjB;gBACF;gBACAE,WAAWP,MAAM,CAAC,2BAA2B;;0BAGjD,KAAC8B;gBACCvB,WAAWP,MAAM,CAAC,yBAAyB;gBAC3CgC,KAAKhB;gBACLQ,gBAAgBV,UAAUU,iBAAiBS;0BAE1CtB,yBAAW,KAACmB;oBAAIvB,WAAWP,MAAM,CAAC,8BAA8B;8BAAGI;;;;;AAI5E,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  compact: styles['PanelHeaderContext--sizeX-compact'],\n  regular: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  opened = false,\n  className,\n  onClose,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    opened ? 'enter' : 'exit',\n  );\n  const visible = animationState !== 'exited';\n\n  useScrollLock(platform !== 'vkcom' && visible);\n\n  const handleGlobalOnClickOutside = React.useCallback(\n    (event: MouseEvent) => {\n      if (opened) {\n        event.stopPropagation();\n        onClose();\n      }\n    },\n    [opened, onClose],\n  );\n\n  useGlobalOnClickOutside(handleGlobalOnClickOutside, visible ? elementRef : null);\n\n  if (!visible) {\n    return null;\n  }\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === 'ios' && styles['PanelHeaderContext--ios'],\n        opened ? styles['PanelHeaderContext--opened'] : styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      <div\n        onClick={(event) => {\n          event.stopPropagation();\n          onClose();\n        }}\n        className={styles['PanelHeaderContext__fade']}\n      />\n      <div\n        data-testid={process.env.NODE_ENV === 'test' ? 'content' : undefined}\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        {...animationHandlers}\n      >\n        <div className={styles['PanelHeaderContext__content']}>{children}</div>\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useGlobalOnClickOutside","usePlatform","useCSSKeyframesAnimationController","useScrollLock","FixedLayout","styles","sizeXClassNames","none","compact","regular","PanelHeaderContext","children","opened","className","onClose","restProps","platform","sizeX","elementRef","useRef","animationState","animationHandlers","visible","handleGlobalOnClickOutside","useCallback","event","stopPropagation","vertical","div","onClick","data-testid","process","env","NODE_ENV","undefined","ref"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,kCAAkC,QAAQ,sBAAsB;AAEzE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9CG,SAASH,MAAM,CAAC,oCAAoC;IACpDI,SAASJ,MAAM,CAAC,oCAAoC;AACtD;AAOA;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,QAAQ,MAAM,EAAE,GAAGlB;IAC3B,MAAMmB,aAAarB,MAAMsB,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGnB,mCAC1CU,SAAS,UAAU;IAErB,MAAMU,UAAUF,mBAAmB;IAEnCjB,cAAca,aAAa,WAAWM;IAEtC,MAAMC,6BAA6B1B,MAAM2B,WAAW,CAClD,CAACC;QACC,IAAIb,QAAQ;YACVa,MAAMC,eAAe;YACrBZ;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBd,wBAAwBuB,4BAA4BD,UAAUJ,aAAa;IAE3E,IAAI,CAACI,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,MAAClB;QACE,GAAGW,SAAS;QACbF,WAAWf,WACTO,MAAM,CAAC,qBAAqB,EAC5BW,aAAa,SAASX,MAAM,CAAC,0BAA0B,EACvDO,SAASP,MAAM,CAAC,6BAA6B,GAAGA,MAAM,CAAC,8BAA8B,EACrFC,eAAe,CAACW,MAAM,EACtBJ;QAEFc,UAAS;;0BAET,KAACC;gBACCC,SAAS,CAACJ;oBACRA,MAAMC,eAAe;oBACrBZ;gBACF;gBACAD,WAAWR,MAAM,CAAC,2BAA2B;;0BAE/C,KAACuB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYC;gBAC3DrB,WAAWR,MAAM,CAAC,yBAAyB;gBAC3C8B,KAAKjB;gBACJ,GAAGG,iBAAiB;0BAErB,cAAA,KAACO;oBAAIf,WAAWR,MAAM,CAAC,8BAA8B;8BAAGM;;;;;AAIhE,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import {\n  Icon24DoneOutline,\n  Icon24PenOutline,\n  Icon28DoneOutline,\n  Icon28EditOutline,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS\n   */\n  editLabel?: string;\n  /**\n   * Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const platform = usePlatform();\n  const label = isActive ? doneLabel : editLabel;\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        label\n      ) : (\n        <>\n          <VisuallyHidden>{label}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}\n            IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24DoneOutline","Icon24PenOutline","Icon28DoneOutline","Icon28EditOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","label","IconCompact","IconRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SACEA,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,QACZ,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAiBlE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,WAAWT;IACjB,MAAMU,QAAQL,WAAWE,YAAYD;IAErC,qBACE,KAACJ;QAAmB,GAAGM,SAAS;kBAC7BC,aAAa,QACZC,sBAEA;;8BACE,KAACP;8BAAgBO;;8BACjB,KAACT;oBACCU,aAAaN,WAAWT,oBAAoBC;oBAC5Ce,aAAaP,WAAWP,oBAAoBC;;;;;AAMxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import {\n  Icon24DoneOutline,\n  Icon24PenOutline,\n  Icon28DoneOutline,\n  Icon28EditOutline,\n} from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * Текст кнопки, когда режим редактирования не активен. Визуально скрыт везде, кроме iOS\n   */\n  editLabel?: string;\n  /**\n   * Текст кнопки при активном режиме редактирования для выхода из него. Визуально скрыт везде, кроме iOS\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const platform = usePlatform();\n  const label = isActive ? doneLabel : editLabel;\n\n  return (\n    <PanelHeaderButton {...restProps}>\n      {platform === 'ios' ? (\n        label\n      ) : (\n        <>\n          <VisuallyHidden>{label}</VisuallyHidden>\n          <AdaptiveIconRenderer\n            IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}\n            IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}\n          />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24DoneOutline","Icon24PenOutline","Icon28DoneOutline","Icon28EditOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","label","IconCompact","IconRegular"],"mappings":";AAAA,SACEA,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,iBAAiB,QACZ,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAiBlE;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,WAAWT;IACjB,MAAMU,QAAQL,WAAWE,YAAYD;IAErC,qBACE,KAACJ;QAAmB,GAAGM,SAAS;kBAC7BC,aAAa,QACZC,sBAEA;;8BACE,KAACP;8BAAgBO;;8BACjB,KAACT;oBACCU,aAAaN,WAAWT,oBAAoBC;oBAC5Ce,aAAaP,WAAWP,oBAAoBC;;;;;AAMxD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton primary {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24DoneOutline","Icon28DoneOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderSubmit","children","restProps","platform","primary","IconCompact","IconRegular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,WAAW,QAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAkBM,OAAO;QAAE,GAAGF,SAAS;kBACrCC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBAAqBQ,aAAaX;oBAAmBY,aAAaX;;;;;AAK7E,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import { Icon24DoneOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton primary {...restProps}>\n      {platform === 'ios' ? (\n        children\n      ) : (\n        <>\n          <VisuallyHidden>{children}</VisuallyHidden>\n          <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />\n        </>\n      )}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["Icon24DoneOutline","Icon28DoneOutline","usePlatform","AdaptiveIconRenderer","PanelHeaderButton","VisuallyHidden","PanelHeaderSubmit","children","restProps","platform","primary","IconCompact","IconRegular"],"mappings":";AAAA,SAASA,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,oBAAoB,QAAQ,+CAA+C;AACpF,SAASC,iBAAiB,QAAgC,yCAAyC;AACnG,SAASC,cAAc,QAAQ,mCAAmC;AAElE;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,WAAW,QAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,KAACE;QAAkBM,OAAO;QAAE,GAAGF,SAAS;kBACrCC,aAAa,QACZF,yBAEA;;8BACE,KAACF;8BAAgBE;;8BACjB,KAACJ;oBAAqBQ,aAAaX;oBAAmBY,aAAaX;;;;;AAK7E,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,MAAMC,6BAAeF,MAAMG,IAAI,CACpC,CAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAE,GAAGC,WAA8B,iBACtD,KAACL;QAAQM,MAAK;QAAW,GAAGD,SAAS;QAAED,OAAO;YAAED;YAAQ,GAAGC,KAAK;QAAC;QAEnE;AAEFH,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,MAAMC,6BAAeF,MAAMG,IAAI,CACpC,CAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAE,GAAGC,WAA8B,iBACtD,KAACL;QAAQM,MAAK;QAAW,GAAGD,SAAS;QAAED,OAAO;YAAED;YAAQ,GAAGC,KAAK;QAAC;QAEnE;AAEFH,aAAaM,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n  /**\n   * Убирает отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  noPadding = false,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      !noPadding && styles['Placeholder--withPadding'],\n    )}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderIcon = (props: PlaceholderIconProps) => (\n  <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />\n);\n\nexport type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (\n  <Title\n    level=\"2\"\n    weight=\"2\"\n    className={classNames(className, styles['Placeholder__header'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (\n  <Headline\n    weight=\"3\"\n    className={classNames(className, styles['Placeholder__text'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderActions = (props: PlaceholderActionsProps) => (\n  <RootComponent baseClassName={styles['Placeholder__action']} {...props} />\n);\n\nexport interface PlaceholderProps extends PlaceholderContainerProps {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  children,\n  action,\n  noPadding = false,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer noPadding={noPadding} {...restProps}>\n    {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}\n    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}\n    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}\n    {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}\n  </PlaceholderContainer>\n);\n\nPlaceholder.Container = PlaceholderContainer;\nPlaceholder.Icon = PlaceholderIcon;\nPlaceholder.Header = PlaceholderHeader;\nPlaceholder.Text = PlaceholderText;\nPlaceholder.Actions = PlaceholderActions;\n"],"names":["React","classNames","hasReactNode","RootComponent","Headline","Title","styles","PlaceholderContainer","stretched","noPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,2BAA2B;AAa9C,MAAMC,uBAAuB,CAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EACjB,GAAGC,WACuB,iBAC1B,KAACP;QACCQ,eAAeV,WACbK,MAAM,CAAC,cAAc,EACrBE,aAAaF,MAAM,CAAC,yBAAyB,EAC7C,CAACG,aAAaH,MAAM,CAAC,2BAA2B;QAEjD,GAAGI,SAAS;;AAMjB,MAAME,kBAAkB,CAACC,sBACvB,KAACV;QAAcQ,eAAeL,MAAM,CAAC,oBAAoB;QAAG,GAAGO,KAAK;;AAKtE,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGL,WAAmC,iBAC5E,KAACL;QACCW,OAAM;QACNC,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,sBAAsB;QAC7D,GAAGI,SAAS;;AAMjB,MAAMQ,kBAAkB,CAAC,EAAEH,SAAS,EAAE,GAAGL,WAAiC,iBACxE,KAACN;QACCa,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,oBAAoB;QAC3D,GAAGI,SAAS;;AAMjB,MAAMS,qBAAqB,CAACN,sBAC1B,KAACV;QAAcQ,eAAeL,MAAM,CAAC,sBAAsB;QAAG,GAAGO,KAAK;;AAkBxE;;CAEC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,YAAY,KAAK,EACjB,GAAGC,WACc,iBACjB,MAACH;QAAqBE,WAAWA;QAAY,GAAGC,SAAS;;YACtDR,aAAamB,uBAAS,KAACT;0BAAiBS;;YACxCnB,aAAaoB,yBAAW,KAACR;0BAAmBQ;;YAC5CpB,aAAaqB,2BAAa,KAACL;0BAAiBK;;YAC5CrB,aAAasB,yBAAW,KAACL;0BAAoBK;;;OAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}
+{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n  /**\n   * Убирает отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  noPadding = false,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      !noPadding && styles['Placeholder--withPadding'],\n    )}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderIcon = (props: PlaceholderIconProps) => (\n  <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />\n);\n\nexport type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (\n  <Title\n    level=\"2\"\n    weight=\"2\"\n    className={classNames(className, styles['Placeholder__header'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (\n  <Headline\n    weight=\"3\"\n    className={classNames(className, styles['Placeholder__text'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderActions = (props: PlaceholderActionsProps) => (\n  <RootComponent baseClassName={styles['Placeholder__action']} {...props} />\n);\n\nexport interface PlaceholderProps extends PlaceholderContainerProps {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  children,\n  action,\n  noPadding = false,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer noPadding={noPadding} {...restProps}>\n    {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}\n    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}\n    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}\n    {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}\n  </PlaceholderContainer>\n);\n\nPlaceholder.Container = PlaceholderContainer;\nPlaceholder.Icon = PlaceholderIcon;\nPlaceholder.Header = PlaceholderHeader;\nPlaceholder.Text = PlaceholderText;\nPlaceholder.Actions = PlaceholderActions;\n"],"names":["React","classNames","hasReactNode","RootComponent","Headline","Title","styles","PlaceholderContainer","stretched","noPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,2BAA2B;AAa9C,MAAMC,uBAAuB,CAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EACjB,GAAGC,WACuB,iBAC1B,KAACP;QACCQ,eAAeV,WACbK,MAAM,CAAC,cAAc,EACrBE,aAAaF,MAAM,CAAC,yBAAyB,EAC7C,CAACG,aAAaH,MAAM,CAAC,2BAA2B;QAEjD,GAAGI,SAAS;;AAMjB,MAAME,kBAAkB,CAACC,sBACvB,KAACV;QAAcQ,eAAeL,MAAM,CAAC,oBAAoB;QAAG,GAAGO,KAAK;;AAKtE,MAAMC,oBAAoB,CAAC,EAAEC,SAAS,EAAE,GAAGL,WAAmC,iBAC5E,KAACL;QACCW,OAAM;QACNC,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,sBAAsB;QAC7D,GAAGI,SAAS;;AAMjB,MAAMQ,kBAAkB,CAAC,EAAEH,SAAS,EAAE,GAAGL,WAAiC,iBACxE,KAACN;QACCa,QAAO;QACPF,WAAWd,WAAWc,WAAWT,MAAM,CAAC,oBAAoB;QAC3D,GAAGI,SAAS;;AAMjB,MAAMS,qBAAqB,CAACN,sBAC1B,KAACV;QAAcQ,eAAeL,MAAM,CAAC,sBAAsB;QAAG,GAAGO,KAAK;;AAkBxE;;CAEC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,YAAY,KAAK,EACjB,GAAGC,WACc,iBACjB,MAACH;QAAqBE,WAAWA;QAAY,GAAGC,SAAS;;YACtDR,aAAamB,uBAAS,KAACT;0BAAiBS;;YACxCnB,aAAaoB,yBAAW,KAACR;0BAAmBQ;;YAC5CpB,aAAaqB,2BAAa,KAACL;0BAAiBK;;YAC5CrB,aAAasB,yBAAW,KAACL;0BAAoBK;;;OAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAG1B,MAAM,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,gCAGzB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,8CAA+C,eAAe,4CAgBpF,CAAC"}
+{"version":3,"file":"PopoutRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAG1B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,gCAGzB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,8CAA+C,eAAe,4CAUpF,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\n/**\n * @private\n */\nexport const PopoutRootPopout = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />\n);\n\n/**\n * @private\n */\nexport const PopoutRootModal = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","blurActiveElement","useDOM","AppRootPortal","RootComponent","styles","PopoutRootPopout","className","restProps","div","PopoutRootModal","PopoutRoot","popout","modal","children","document","useEffect","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAS,EACT,GAAGC,WACkC,iBACrC,KAACC;QAAIF,WAAWP,WAAWK,MAAM,CAAC,qBAAqB,EAAEE;QAAa,GAAGC,SAAS;OAClF;AAEF;;CAEC,GACD,OAAO,MAAME,kBAAkB,CAAC,EAC9BH,SAAS,EACT,GAAGC,WACkC,iBACrC,KAACC;QAAIF,WAAWP,WAAWK,MAAM,CAAC,oBAAoB,EAAEE;QAAa,GAAGC,SAAS;OACjF;AAOF;;CAEC,GACD,OAAO,MAAMG,aAAa,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGN,WAA4B;IACnF,MAAM,EAAEO,QAAQ,EAAE,GAAGb;IAErBH,MAAMiB,SAAS,CAAC;QACdJ,UAAUX,kBAAkBc;IAC9B,GAAG;QAACA;QAAUH;KAAO;IAErB,qBACE,MAACR;QAAe,GAAGI,SAAS;QAAES,eAAeZ,MAAM,CAAC,aAAa;;YAC9DS;0BACD,MAACX;;oBACE,CAAC,CAACS,wBAAU,KAACN;kCAAkBM;;oBAC/B,CAAC,CAACC,uBAAS,KAACH;kCAAiBG;;;;;;AAItC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\n/**\n * @private\n */\nexport const PopoutRootPopout = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />\n);\n\n/**\n * @private\n */\nexport const PopoutRootModal = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","AppRootPortal","RootComponent","styles","PopoutRootPopout","className","restProps","div","PopoutRootModal","PopoutRoot","popout","modal","children","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,SAAS,EACT,GAAGC,WACkC,iBACrC,KAACC;QAAIF,WAAWL,WAAWG,MAAM,CAAC,qBAAqB,EAAEE;QAAa,GAAGC,SAAS;OAClF;AAEF;;CAEC,GACD,OAAO,MAAME,kBAAkB,CAAC,EAC9BH,SAAS,EACT,GAAGC,WACkC,iBACrC,KAACC;QAAIF,WAAWL,WAAWG,MAAM,CAAC,oBAAoB,EAAEE;QAAa,GAAGC,SAAS;OACjF;AAOF;;CAEC,GACD,OAAO,MAAMG,aAAa,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGN,WAA4B;IACnF,qBACE,MAACJ;QAAe,GAAGI,SAAS;QAAEO,eAAeV,MAAM,CAAC,aAAa;;YAC9DS;0BACD,MAACX;;oBACE,CAAC,CAACS,wBAAU,KAACN;kCAAkBM;;oBAC/B,CAAC,CAACC,uBAAS,KAACH;kCAAiBG;;;;;;AAItC,EAAE"}

package/dist/cssm/components/PopoutWrapper/PopoutWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgBxD,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,sFASvB,kBAAkB,4CAkCpB,CAAC"}
+{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgBxD,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,sFASvB,kBAAkB,4CAmBpB,CAAC"}

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

@@ -1,8 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './PopoutWrapper.module.css';
 const stylesAlignX = {
@@ -18,24 +15,9 @@ const stylesAlignY = {
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */ export const PopoutWrapper = ({ alignY = 'center', alignX = 'center', closing = false, noBackground = false, fixed = true, children, onClick, ...restProps })=>{
-    const platform = usePlatform();
-    const [opened, setOpened] = React.useState(noBackground);
-    const onFadeInEnd = (e)=>{
-        if (!e || e.animationName === styles['animation-full-fade-in']) {
-            setOpened(true);
-        }
-    };
-    const animationFinishFallback = useTimeout(onFadeInEnd, platform === 'ios' ? 300 : 200);
-    React.useEffect(()=>{
-        !opened && animationFinishFallback.set();
-    }, [
-        animationFinishFallback,
-        opened
-    ]);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        baseClassName: classNames(styles['PopoutWrapper'], stylesAlignY[alignY], stylesAlignX[alignX], closing && styles['PopoutWrapper--closing'], opened && styles['PopoutWrapper--opened'], fixed && styles['PopoutWrapper--fixed'], !noBackground && styles['PopoutWrapper--masked']),
-        onAnimationEnd: opened ? undefined : onFadeInEnd,
+        baseClassName: classNames(styles['PopoutWrapper'], stylesAlignY[alignY], stylesAlignX[alignX], closing ? styles['PopoutWrapper--closing'] : styles['PopoutWrapper--opened'], fixed && styles['PopoutWrapper--fixed'], !noBackground && styles['PopoutWrapper--masked']),
         children: /*#__PURE__*/ _jsxs("div", {
             className: styles['PopoutWrapper__container'],
             children: [

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 { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\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\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  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(noBackground);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === 'ios' ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        !noBackground && styles['PopoutWrapper--masked'],\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\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    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","RootComponent","styles","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","platform","opened","setOpened","useState","onFadeInEnd","e","animationName","animationFinishFallback","useEffect","set","baseClassName","onAnimationEnd","undefined","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,MAAM,CAAC,+BAA+B;IAC9CG,MAAMH,MAAM,CAAC,6BAA6B;IAC1CI,OAAOJ,MAAM,CAAC,8BAA8B;AAC9C;AAEA,MAAMK,eAAe;IACnBH,QAAQF,MAAM,CAAC,+BAA+B;IAC9CM,KAAKN,MAAM,CAAC,4BAA4B;IACxCO,QAAQP,MAAM,CAAC,+BAA+B;AAChD;AA2BA;;CAEC,GACD,OAAO,MAAMQ,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACP,GAAGC,WACgB;IACnB,MAAMC,WAAWpB;IACjB,MAAM,CAACqB,QAAQC,UAAU,GAAGxB,MAAMyB,QAAQ,CAACR;IAE3C,MAAMS,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,KAAKvB,MAAM,CAAC,yBAAyB,EAAE;YAC9DmB,UAAU;QACZ;IACF;IACA,MAAMK,0BAA0B1B,WAAWuB,aAAaJ,aAAa,QAAQ,MAAM;IACnFtB,MAAM8B,SAAS,CAAC;QACd,CAACP,UAAUM,wBAAwBE,GAAG;IACxC,GAAG;QAACF;QAAyBN;KAAO;IAEpC,qBACE,KAACnB;QACE,GAAGiB,SAAS;QACbW,eAAe/B,WACbI,MAAM,CAAC,gBAAgB,EACvBK,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,WAAWX,MAAM,CAAC,yBAAyB,EAC3CkB,UAAUlB,MAAM,CAAC,wBAAwB,EACzCa,SAASb,MAAM,CAAC,uBAAuB,EACvC,CAACY,gBAAgBZ,MAAM,CAAC,wBAAwB;QAElD4B,gBAAgBV,SAASW,YAAYR;kBAErC,cAAA,MAACS;YAAIC,WAAW/B,MAAM,CAAC,2BAA2B;;8BAChD,KAAC8B;oBAAIC,WAAW/B,MAAM,CAAC,yBAAyB;oBAAEe,SAASA;;8BAC3D,KAACe;oBAAIC,WAAW/B,MAAM,CAAC,yBAAyB;8BAAGc;;;;;AAI3D,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\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\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  ...restProps\n}: PopoutWrapperProps) => {\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing ? styles['PopoutWrapper--closing'] : styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        !noBackground && styles['PopoutWrapper--masked'],\n      )}\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    </RootComponent>\n  );\n};\n"],"names":["classNames","RootComponent","styles","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","baseClassName","div","className"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,eAAe;IACnBC,QAAQF,MAAM,CAAC,+BAA+B;IAC9CG,MAAMH,MAAM,CAAC,6BAA6B;IAC1CI,OAAOJ,MAAM,CAAC,8BAA8B;AAC9C;AAEA,MAAMK,eAAe;IACnBH,QAAQF,MAAM,CAAC,+BAA+B;IAC9CM,KAAKN,MAAM,CAAC,4BAA4B;IACxCO,QAAQP,MAAM,CAAC,+BAA+B;AAChD;AA2BA;;CAEC,GACD,OAAO,MAAMQ,gBAAgB,CAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EACP,GAAGC,WACgB;IACnB,qBACE,KAACjB;QACE,GAAGiB,SAAS;QACbC,eAAenB,WACbE,MAAM,CAAC,gBAAgB,EACvBK,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,UAAUX,MAAM,CAAC,yBAAyB,GAAGA,MAAM,CAAC,wBAAwB,EAC5Ea,SAASb,MAAM,CAAC,uBAAuB,EACvC,CAACY,gBAAgBZ,MAAM,CAAC,wBAAwB;kBAGlD,cAAA,MAACkB;YAAIC,WAAWnB,MAAM,CAAC,2BAA2B;;8BAChD,KAACkB;oBAAIC,WAAWnB,MAAM,CAAC,yBAAyB;oBAAEe,SAASA;;8BAC3D,KAACG;oBAAIC,WAAWnB,MAAM,CAAC,yBAAyB;8BAAGc;;;;;AAI3D,EAAE"}

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

@@ -26,12 +26,16 @@
   inline-size: 100%;
   block-size: 100%;
   opacity: 1;
-  animation: animation-full-fade-in var(--vkui--animation_duration_m) ease;
+}
+
+.PopoutWrapper--opened .PopoutWrapper__overlay {
+  animation: animation-full-fade-in var(--vkui--animation_duration_m) ease both;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
   opacity: 0;
-  transition: opacity var(--vkui--animation_duration_m) var(--vkui--animation_easing_default);
+  /* prettier-ignore */
+  animation: animation-full-fade-out var(--vkui--animation_duration_m) var(--vkui--animation_easing_default) both;
 }
 
 .PopoutWrapper--masked .PopoutWrapper__overlay {
@@ -97,3 +101,13 @@
     opacity: 1;
   }
 }
+
+@keyframes animation-full-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

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

@@ -54,10 +54,14 @@ export interface PopoverProps extends AllowedFloatingComponentProps, Omit<HTMLAt
      * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
      */
     ArrowIcon?: FloatingArrowPropsPrivate['Icon'];
+    /**
+     * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.
+     */
+    keepMounted?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;CAC/C;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,ifA2CjB,YAAY,4CAkGd,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,8fA4CjB,YAAY,4CA2Gd,CAAC"}

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

@@ -13,13 +13,13 @@ import styles from './Popover.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */ export const Popover = ({ // UsePopoverProps
-arrow: withArrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, // uncontrolled
+arrow: withArrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted = false, // uncontrolled
 defaultShown = false, // controlled
 shown: shownProp, onShownChange, // Для AppRootPortal
 usePortal = true, // Для FloatingArrow
 arrowProps, ArrowIcon = DefaultIcon, // FocusTrapProps
 autoFocus = true, restoreFocus = true, className, children, noStyling = false, zIndex = 'var(--vkui--z_index_popout)', // a11y
-role, ...restPopoverProps })=>{
+role = 'dialog', ...restPopoverProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
         arrow: withArrow,
@@ -50,8 +50,11 @@ role, ...restPopoverProps })=>{
     usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
     const [, child] = usePatchChildren(children, injectAriaExpandedPropByRole(referenceProps, shown, role), refs.setReference);
     let popover = null;
-    if (shown) {
-        floatingProps.style.zIndex = String(zIndex);
+    if (shown || keepMounted) {
+        const hidden = keepMounted && !shown;
+        if (!hidden) {
+            floatingProps.style.zIndex = String(zIndex);
+        }
         let arrow = null;
         if (withArrow) {
             const { arrow: arrowCoords } = middlewareData;
@@ -68,12 +71,14 @@ role, ...restPopoverProps })=>{
             usePortal: usePortal,
             children: /*#__PURE__*/ _jsx("div", {
                 ref: refs.setFloating,
-                className: styles['Popover'],
+                className: classNames(styles['Popover'], hidden && styles['Popover--hidden']),
                 ...floatingProps,
                 children: /*#__PURE__*/ _jsxs(FocusTrap, {
                     ...restPopoverProps,
                     role: role,
                     className: classNames(styles['Popover__in'], noStyling ? undefined : styles['Popover__in--withStyling'], willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, transformOriginClassNames[resolvedPlacement], className),
+                    mount: !hidden,
+                    disabled: hidden,
                     autoFocus: disableInteractive ? false : autoFocus,
                     restoreFocus: restoreFocus ? onRestoreFocus : false,
                     onClose: onEscapeKeyDown,

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 { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport styles from './Popover.module.css';\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  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends AllowedFloatingComponentProps,\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\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  // UsePopoverProps\n  arrow: withArrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  placement: expectedPlacement = 'bottom-start',\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  trigger = 'click',\n  content,\n  hoverDelay = 150,\n  closeAfterClick,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  sameWidth,\n  hideWhenReferenceHidden,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  // uncontrolled\n  defaultShown = false,\n  // controlled\n  shown: shownProp,\n  onShownChange,\n\n  // Для AppRootPortal\n  usePortal = true,\n\n  // Для FloatingArrow\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // FocusTrapProps\n  autoFocus = true,\n  restoreFocus = true,\n  className,\n  children,\n  noStyling = false,\n  zIndex = 'var(--vkui--z_index_popout)',\n  // a11y\n  role,\n  ...restPopoverProps\n}: PopoverProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    arrow: withArrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    placement: expectedPlacement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    sameWidth,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n  });\n  const {\n    placement: resolvedPlacement,\n    shown,\n    willBeHide,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onRestoreFocus,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    middlewares,\n    placement: strictPlacement,\n    trigger,\n    hoverDelay,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n  });\n\n  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n  const [, child] = usePatchChildren<HTMLDivElement>(\n    children,\n    injectAriaExpandedPropByRole(referenceProps, shown, role),\n    refs.setReference,\n  );\n\n  let popover: React.ReactNode = null;\n  if (shown) {\n    floatingProps.style.zIndex = String(zIndex);\n\n    let arrow: React.ReactElement | null = null;\n    if (withArrow) {\n      const { arrow: arrowCoords } = middlewareData;\n      arrow = (\n        <FloatingArrow\n          iconClassName={noStyling ? undefined : styles['Popover__arrow']}\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      );\n    }\n\n    popover = (\n      <AppRootPortal usePortal={usePortal}>\n        <div ref={refs.setFloating} className={styles['Popover']} {...floatingProps}>\n          <FocusTrap\n            {...restPopoverProps}\n            role={role}\n            className={classNames(\n              styles['Popover__in'],\n              noStyling ? undefined : styles['Popover__in--withStyling'],\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              transformOriginClassNames[resolvedPlacement],\n              className,\n            )}\n            autoFocus={disableInteractive ? false : autoFocus}\n            restoreFocus={restoreFocus ? onRestoreFocus : false}\n            onClose={onEscapeKeyDown}\n          >\n            {arrow}\n            {typeof content === 'function' ? content({ onClose }) : content}\n          </FocusTrap>\n        </div>\n      </AppRootPortal>\n    );\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","usePatchChildren","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","styles","Popover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","child","setReference","popover","style","String","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","out","in","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport styles from './Popover.module.css';\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  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends AllowedFloatingComponentProps,\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}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  // UsePopoverProps\n  arrow: withArrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  placement: expectedPlacement = 'bottom-start',\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  trigger = 'click',\n  content,\n  hoverDelay = 150,\n  closeAfterClick,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  sameWidth,\n  hideWhenReferenceHidden,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  keepMounted = false,\n  // uncontrolled\n  defaultShown = false,\n  // controlled\n  shown: shownProp,\n  onShownChange,\n\n  // Для AppRootPortal\n  usePortal = true,\n\n  // Для FloatingArrow\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // FocusTrapProps\n  autoFocus = true,\n  restoreFocus = true,\n  className,\n  children,\n  noStyling = false,\n  zIndex = 'var(--vkui--z_index_popout)',\n  // a11y\n  role = 'dialog',\n  ...restPopoverProps\n}: PopoverProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    arrow: withArrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    placement: expectedPlacement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    sameWidth,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n  });\n  const {\n    placement: resolvedPlacement,\n    shown,\n    willBeHide,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onRestoreFocus,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    middlewares,\n    placement: strictPlacement,\n    trigger,\n    hoverDelay,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n  });\n\n  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n  const [, child] = usePatchChildren<HTMLDivElement>(\n    children,\n    injectAriaExpandedPropByRole(referenceProps, shown, role),\n    refs.setReference,\n  );\n\n  let popover: React.ReactNode = null;\n  if (shown || keepMounted) {\n    const hidden = keepMounted && !shown;\n    if (!hidden) {\n      floatingProps.style.zIndex = String(zIndex);\n    }\n\n    let arrow: React.ReactElement | null = null;\n    if (withArrow) {\n      const { arrow: arrowCoords } = middlewareData;\n      arrow = (\n        <FloatingArrow\n          iconClassName={noStyling ? undefined : styles['Popover__arrow']}\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      );\n    }\n\n    popover = (\n      <AppRootPortal usePortal={usePortal}>\n        <div\n          ref={refs.setFloating}\n          className={classNames(styles['Popover'], hidden && styles['Popover--hidden'])}\n          {...floatingProps}\n        >\n          <FocusTrap\n            {...restPopoverProps}\n            role={role}\n            className={classNames(\n              styles['Popover__in'],\n              noStyling ? undefined : styles['Popover__in--withStyling'],\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              transformOriginClassNames[resolvedPlacement],\n              className,\n            )}\n            mount={!hidden}\n            disabled={hidden}\n            autoFocus={disableInteractive ? false : autoFocus}\n            restoreFocus={restoreFocus ? onRestoreFocus : false}\n            onClose={onEscapeKeyDown}\n          >\n            {arrow}\n            {typeof content === 'function' ? content({ onClose }) : content}\n          </FocusTrap>\n        </div>\n      </AppRootPortal>\n    );\n  }\n\n  return (\n    <React.Fragment>\n      {child}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","usePatchChildren","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","styles","Popover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","defaultShown","shown","shownProp","onShownChange","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","child","setReference","popover","hidden","style","String","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","out","in","mount","Fragment"],"mappings":"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"}

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

@@ -15,11 +15,15 @@
 }
 
 .Popover__in--withStyling {
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   border-radius: var(--vkui--size_border_radius--regular);
   box-shadow: var(--vkui--elevation3);
 }
 
 .Popover__arrow {
-  color: var(--vkui--color_background_modal);
+  color: var(--vkui--color_background_contrast_themed);
+}
+
+.Popover--hidden {
+  display: none;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\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   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  style: styleProp,\n  onPlacementChange,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles['Popper']}\n      getRootRef={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n          middlewareData,\n        ),\n      }}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","style","styleProp","onPlacementChange","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdown","baseClassName","undefined","coords","Icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,qBAAqB;AAC5B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,+BAA+B;AACtC,SACEC,aAAa,QAER,iCAAiC;AACxC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AA4DzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrB,uCAAuC;AACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcd,oBAAoB,EAClCe,eAAed,qBAAqB,EACpCe,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;AACnBC,2BAA2B,KAAK,EAEhC,aAAa;AACbC,UAAU,EACVC,YAAYlB,WAAW,EAEvB,OAAO;AACPmB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,OAAOC,SAAS,EAChBC,iBAAiB,EACjB,GAAGC,WACS;IACZ,MAAM,CAACC,UAAUC,YAAY,GAAGvC,MAAMwC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGrC,gCAAgC;QACvEW,WAAWC;QACXC;QACAI;QACAgB;QACAf;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJiB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClChC,WAAWiC,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG/C,YAAY;QACdY,WAAWyB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOpD,6BAA6BoD,MAAM;gBACxCC,eAAe5B;YACjB;QACF;IACF;IAEArB,2BAA2BW,eAAegC,mBAAmBb;IAE7D,MAAM,EAAEd,OAAOkC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBxD,aAA6BiD,KAAKQ,WAAW,EAAE3B;IAErExB,0BAA0B;QACxB2C,KAAKS,YAAY,CAAC,aAAa7B,YAAYA,UAAU8B,OAAO,GAAG9B;IACjE,GAAG;QAACoB,KAAKS,YAAY;QAAE7B;KAAU;IAEjC,MAAM+B,yBACJ,MAAChD;QACE,GAAGwB,SAAS;QACbyB,eAAehD,MAAM,CAAC,SAAS;QAC/BiB,YAAY0B;QACZvB,OAAO;YACL,GAAGC,SAAS;YACZ,GAAGhC,wCACD6C,0BACAJ,eACAE,eACA5B,YAAY,OAAO6C,WACnBZ,eACD;QACH;;YAEC7B,uBACC,KAACV;gBACE,GAAGgB,UAAU;gBACdoC,QAAQR;gBACRxC,WAAWiC;gBACXlB,YAAYQ;gBACZ0B,MAAMpC;;YAGTG;;;IAIL,qBAAO,KAACxB;QAAcyB,WAAWA;kBAAY4B;;AAC/C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\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   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  style: styleProp,\n  onPlacementChange,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles['Popper']}\n      getRootRef={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n          middlewareData,\n        ),\n      }}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","style","styleProp","onPlacementChange","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdown","baseClassName","undefined","coords","Icon"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,qBAAqB;AAC5B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,+BAA+B;AACtC,SACEC,aAAa,QAER,iCAAiC;AACxC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AA4DzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrB,uCAAuC;AACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcd,oBAAoB,EAClCe,eAAed,qBAAqB,EACpCe,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;AACnBC,2BAA2B,KAAK,EAEhC,aAAa;AACbC,UAAU,EACVC,YAAYlB,WAAW,EAEvB,OAAO;AACPmB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,OAAOC,SAAS,EAChBC,iBAAiB,EACjB,GAAGC,WACS;IACZ,MAAM,CAACC,UAAUC,YAAY,GAAGvC,MAAMwC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGrC,gCAAgC;QACvEW,WAAWC;QACXC;QACAI;QACAgB;QACAf;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJiB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClChC,WAAWiC,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG/C,YAAY;QACdY,WAAWyB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOpD,6BAA6BoD,MAAM;gBACxCC,eAAe5B;YACjB;QACF;IACF;IAEArB,2BAA2BW,eAAegC,mBAAmBb;IAE7D,MAAM,EAAEd,OAAOkC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBxD,aAA6BiD,KAAKQ,WAAW,EAAE3B;IAErExB,0BAA0B;QACxB2C,KAAKS,YAAY,CAAC,aAAa7B,YAAYA,UAAU8B,OAAO,GAAG9B;IACjE,GAAG;QAACoB,KAAKS,YAAY;QAAE7B;KAAU;IAEjC,MAAM+B,yBACJ,MAAChD;QACE,GAAGwB,SAAS;QACbyB,eAAehD,MAAM,CAAC,SAAS;QAC/BiB,YAAY0B;QACZvB,OAAO;YACL,GAAGC,SAAS;YACZ,GAAGhC,wCACD6C,0BACAJ,eACAE,eACA5B,YAAY,OAAO6C,WACnBZ,eACD;QACH;;YAEC7B,uBACC,KAACV;gBACE,GAAGgB,UAAU;gBACdoC,QAAQR;gBACRxC,WAAWiC;gBACXlB,YAAYQ;gBACZ0B,MAAMpC;;YAGTG;;;IAIL,qBAAO,KAACxB;QAAcyB,WAAWA;kBAAY4B;;AAC/C,EAAE"}