npm - @vkontakte/vkui - Versions diffs - 6.1.2 → 6.2.1 - Mend

@vkontakte/vkui 6.1.2 → 6.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2068) hide show

package/dist/cjs/components/PanelHeaderClose/PanelHeaderClose.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import { Icon24CancelOutline, Icon28CancelOutline } 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 PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n const platform = usePlatform();\n\n return (\n <PanelHeaderButton {...restProps}>\n {platform === 'ios' ? (\n children\n ) : (\n <>\n <VisuallyHidden>{children}</VisuallyHidden>\n <AdaptiveIconRenderer\n IconCompact={Icon24CancelOutline}\n IconRegular={Icon28CancelOutline}\n />\n </>\n )}\n </PanelHeaderButton>\n );\n};\n"],"names":["PanelHeaderClose","children","restProps","platform","usePlatform","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24CancelOutline","IconRegular","Icon28CancelOutline"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBAT4C;6BAC7B;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,mBAAmB;QAAC,EAAEC,WAAW,QAAQ,EAAwC,WAAnCC;QAAxBD;;IACjC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB,8CAAKH;kBACpBC,aAAa,QACZF,yBAEA;;8BACE,qBAACK,8BAAc;8BAAEL;;8BACjB,qBAACM,0CAAoB;oBACnBC,aAAaC,0BAAmB;oBAChCC,aAAaC,0BAAmB;;;;;AAM5C"}
1	+ {"version":3,"sources":["../../../../src/components/PanelHeaderClose/PanelHeaderClose.tsx"],"sourcesContent":["import { Icon24CancelOutline, Icon28CancelOutline } 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 PanelHeaderClose = ({ children = 'Отмена', ...restProps }: PanelHeaderButtonProps) => {\n const platform = usePlatform();\n\n return (\n <PanelHeaderButton {...restProps}>\n {platform === 'ios' ? (\n children\n ) : (\n <>\n <VisuallyHidden>{children}</VisuallyHidden>\n <AdaptiveIconRenderer\n IconCompact={Icon24CancelOutline}\n IconRegular={Icon28CancelOutline}\n />\n </>\n )}\n </PanelHeaderButton>\n );\n};\n"],"names":["PanelHeaderClose","children","restProps","platform","usePlatform","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24CancelOutline","IconRegular","Icon28CancelOutline"],"mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBAT4C;6BAC7B;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,mBAAmB;QAAC,EAAEC,WAAW,QAAQ,EAAwC,WAAnCC;QAAxBD;;IACjC,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB,8CAAKH;kBACpBC,aAAa,QACZF,yBAEA;;8BACE,qBAACK,8BAAc;8BAAEL;;8BACjB,qBAACM,0CAAoB;oBACnBC,aAAaC,0BAAmB;oBAChCC,aAAaC,0BAAmB;;;;;AAM5C"}

package/dist/cjs/components/PanelHeaderContent/PanelHeaderContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n ios: styles['PanelHeaderContent--ios'],\n android: styles['PanelHeaderContent--android'],\n vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nconst sizeYClassNames = {\n none: styles['PanelHeaderContent--sizeY-none'],\n compact: styles['PanelHeaderContent--sizeY-compact'],\n};\n\nexport interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n aside?: React.ReactNode;\n before?: React.ReactNode;\n status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n hasStatus: boolean;\n hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n const platform = usePlatform();\n\n return hasStatus \|\| hasBefore ? (\n <Text\n className={styles['PanelHeaderContent__childrenText']}\n Component=\"div\"\n weight={platform === 'vkcom' ? '2' : undefined}\n >\n {children}\n </Text>\n ) : (\n <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n );\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n aside,\n status,\n before,\n children,\n onClick,\n ...restProps\n}: PanelHeaderContentProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const InComponent = onClick ? Tappable : 'div';\n const rootProps = onClick ? {} : restProps;\n const platform = usePlatform();\n const inProps = onClick\n ? {\n ...restProps,\n onClick,\n activeEffectDelay: 200,\n hasActive: platform === 'ios',\n activeMode: 'opacity',\n }\n : {};\n\n return (\n <RootComponent\n {...rootProps}\n baseClassName={classNames(\n styles['PanelHeaderContent'],\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n )}\n >\n {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n <InComponent\n {...inProps}\n className={classNames(\n styles['PanelHeaderContent__in'],\n !before && platform !== 'android' && styles['PanelHeaderContent__in--centered'],\n )}\n >\n {hasReactNode(status) && (\n <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n )}\n <div className={styles['PanelHeaderContent__children']}>\n <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n {children}\n </PanelHeaderChildren>\n {hasReactNode(aside) && (\n <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n )}\n </div>\n {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n </InComponent>\n </RootComponent>\n );\n};\n"],"names":["PanelHeaderContent","platformClassNames","ios","android","vkcom","sizeYClassNames","none","compact","PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Text","className","Component","weight","undefined","div","aside","status","before","onClick","restProps","sizeY","useAdaptivity","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","activeMode","RootComponent","baseClassName","classNames","hasOwnProperty","hasReactNode","Footnote"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAoDaA;;;eAAAA;;;;;;;;iEApDU;sBACkB;+BACX;6BACF;+BAEE;0BACL;0BACA;sBACJ;AAGrB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAaA,MAAMC,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOJ,aAAaC,0BAClB,qBAACI,UAAI;QACHC,SAAS;QACTC,WAAU;QACVC,QAAQL,aAAa,UAAU,MAAMM;kBAEpCP;uBAGH,qBAACQ;QAAIJ,SAAS;kBAA8CJ;;AAEhE;AAKO,MAAMX,qBAAqB;QAAC,EACjCoB,KAAK,EACLC,MAAM,EACNC,MAAM,EACNX,QAAQ,EACRY,OAAO,EAEiB,WADrBC;QALHJ;QACAC;QACAC;QACAX;QACAY;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcJ,UAAUK,kBAAQ,GAAG;IACzC,MAAMC,YAAYN,UAAU,CAAC,IAAIC;IACjC,MAAMZ,WAAWC,IAAAA,wBAAW;IAC5B,MAAMiB,UAAUP,UACZ,4CACKC;QACHD;QACAQ,mBAAmB;QACnBC,WAAWpB,aAAa;QACxBqB,YAAY;SAEd,CAAC;IAEL,qBACE,sBAACC,4BAAa,8CACRL;QACJM,eAAeC,IAAAA,gBAAU,4BAEvBnC,mBAAmBoC,cAAc,CAACzB,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BsB,UAAU,aAAapB,eAAe,CAACoB,MAAM;;YAG9Ca,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;gBAAIJ,SAAS;0BAAyCO;;0BAChF,sBAACK,yDACKG;gBACJf,WAAWqB,IAAAA,gBAAU,gCAEnB,CAACd,UAAUV,aAAa;;oBAGzB0B,IAAAA,kBAAY,EAACjB,yBACZ,qBAACkB,kBAAQ;wBAACxB,SAAS;kCAAyCM;;kCAE9D,sBAACF;wBAAIJ,SAAS;;0CACZ,qBAACP;gCAAoBC,WAAW6B,IAAAA,kBAAY,EAACjB;gCAASX,WAAW4B,IAAAA,kBAAY,EAAChB;0CAC3EX;;4BAEF2B,IAAAA,kBAAY,EAAClB,wBACZ,qBAACD;gCAAIJ,SAAS;0CAAwCK;;;;oBAGzDkB,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;wBAAIJ,SAAS;;;;;;AAI/C"}
1	+ {"version":3,"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n ios: styles['PanelHeaderContent--ios'],\n android: styles['PanelHeaderContent--android'],\n vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nconst sizeYClassNames = {\n none: styles['PanelHeaderContent--sizeY-none'],\n compact: styles['PanelHeaderContent--sizeY-compact'],\n};\n\nexport interface PanelHeaderContentProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n aside?: React.ReactNode;\n before?: React.ReactNode;\n status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n hasStatus: boolean;\n hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n const platform = usePlatform();\n\n return hasStatus \|\| hasBefore ? (\n <Text\n className={styles['PanelHeaderContent__childrenText']}\n Component=\"div\"\n weight={platform === 'vkcom' ? '2' : undefined}\n >\n {children}\n </Text>\n ) : (\n <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n );\n};\n\n/*\n @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n aside,\n status,\n before,\n children,\n onClick,\n ...restProps\n}: PanelHeaderContentProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n const InComponent = onClick ? Tappable : 'div';\n const rootProps = onClick ? {} : restProps;\n const platform = usePlatform();\n const inProps = onClick\n ? {\n ...restProps,\n onClick,\n activeEffectDelay: 200,\n hasActive: platform === 'ios',\n activeMode: 'opacity',\n }\n : {};\n\n return (\n <RootComponent\n {...rootProps}\n baseClassName={classNames(\n styles['PanelHeaderContent'],\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n )}\n >\n {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n <InComponent\n {...inProps}\n className={classNames(\n styles['PanelHeaderContent__in'],\n !before && platform !== 'android' && styles['PanelHeaderContent__in--centered'],\n )}\n >\n {hasReactNode(status) && (\n <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n )}\n <div className={styles['PanelHeaderContent__children']}>\n <PanelHeaderChildren hasStatus={hasReactNode(status)} hasBefore={hasReactNode(before)}>\n {children}\n </PanelHeaderChildren>\n {hasReactNode(aside) && (\n <div className={styles['PanelHeaderContent__aside']}>{aside}</div>\n )}\n </div>\n {hasReactNode(before) && <div className={styles['PanelHeaderContent__width']} />}\n </InComponent>\n </RootComponent>\n );\n};\n"],"names":["PanelHeaderContent","platformClassNames","ios","android","vkcom","sizeYClassNames","none","compact","PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Text","className","Component","weight","undefined","div","aside","status","before","onClick","restProps","sizeY","useAdaptivity","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","activeMode","RootComponent","baseClassName","classNames","hasOwnProperty","hasReactNode","Footnote"],"mappings":";;;;+BAoDaA;;;eAAAA;;;;;;;;iEApDU;sBACkB;+BACX;6BACF;+BAEE;0BACL;0BACA;sBACJ;AAGrB,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAEA,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAaA,MAAMC,sBAAsB,CAAC,EAAEC,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAA4B;IACvF,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,OAAOJ,aAAaC,0BAClB,qBAACI,UAAI;QACHC,SAAS;QACTC,WAAU;QACVC,QAAQL,aAAa,UAAU,MAAMM;kBAEpCP;uBAGH,qBAACQ;QAAIJ,SAAS;kBAA8CJ;;AAEhE;AAKO,MAAMX,qBAAqB;QAAC,EACjCoB,KAAK,EACLC,MAAM,EACNC,MAAM,EACNX,QAAQ,EACRY,OAAO,EAEiB,WADrBC;QALHJ;QACAC;QACAC;QACAX;QACAY;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,cAAcJ,UAAUK,kBAAQ,GAAG;IACzC,MAAMC,YAAYN,UAAU,CAAC,IAAIC;IACjC,MAAMZ,WAAWC,IAAAA,wBAAW;IAC5B,MAAMiB,UAAUP,UACZ,4CACKC;QACHD;QACAQ,mBAAmB;QACnBC,WAAWpB,aAAa;QACxBqB,YAAY;SAEd,CAAC;IAEL,qBACE,sBAACC,4BAAa,8CACRL;QACJM,eAAeC,IAAAA,gBAAU,4BAEvBnC,mBAAmBoC,cAAc,CAACzB,YAC9BX,kBAAkB,CAACW,SAAS,GAC5BX,mBAAmBE,OAAO,EAC9BsB,UAAU,aAAapB,eAAe,CAACoB,MAAM;;YAG9Ca,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;gBAAIJ,SAAS;0BAAyCO;;0BAChF,sBAACK,yDACKG;gBACJf,WAAWqB,IAAAA,gBAAU,gCAEnB,CAACd,UAAUV,aAAa;;oBAGzB0B,IAAAA,kBAAY,EAACjB,yBACZ,qBAACkB,kBAAQ;wBAACxB,SAAS;kCAAyCM;;kCAE9D,sBAACF;wBAAIJ,SAAS;;0CACZ,qBAACP;gCAAoBC,WAAW6B,IAAAA,kBAAY,EAACjB;gCAASX,WAAW4B,IAAAA,kBAAY,EAAChB;0CAC3EX;;4BAEF2B,IAAAA,kBAAY,EAAClB,wBACZ,qBAACD;gCAAIJ,SAAS;0CAAwCK;;;;oBAGzDkB,IAAAA,kBAAY,EAAChB,yBAAW,qBAACH;wBAAIJ,SAAS;;;;;;AAI/C"}

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     opened: boolean;
     onClose: VoidFunction;
@@ -6,5 +6,5 @@ export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLD
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
-export declare const PanelHeaderContext: ({ children, onClose, opened, className, ...restProps }: PanelHeaderContextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PanelHeaderContext: ({ children, opened, className, onClose, ...restProps }: PanelHeaderContextProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=PanelHeaderContext.d.ts.map

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"~~AAQA~~,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;~~AAWxD~~,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,~~4CAoEzB~~,CAAC"}
1	+ {"version":3,"file":"PanelHeaderContext.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAW7D,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,2DAM5B,uBAAuB,mDAwDzB,CAAC"}

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js CHANGED Viewed

@@ -16,73 +16,63 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
-const _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
+const _useGlobalOnClickOutside = require("../../hooks/useGlobalOnClickOutside");
 const _usePlatform = require("../../hooks/usePlatform");
-const _useTimeout = require("../../hooks/useTimeout");
-const _dom = require("../../lib/dom");
-const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
+const _animation = require("../../lib/animation");
 const _ScrollContext = require("../AppRoot/ScrollContext");
 const _FixedLayout = require("../FixedLayout/FixedLayout");
 const sizeXClassNames = {
     none: "vkuiPanelHeaderContext--sizeX-none",
-    ['compact']: "vkuiPanelHeaderContext--sizeX-compact",
-    ['regular']: "vkuiPanelHeaderContext--sizeX-regular"
+    compact: "vkuiPanelHeaderContext--sizeX-compact",
+    regular: "vkuiPanelHeaderContext--sizeX-regular"
 };
 const PanelHeaderContext = (_param)=>{
-    var { children, onClose, opened = false, className } = _param, restProps = _object_without_properties._(_param, [
+    var { children, opened = false, className, onClose } = _param, restProps = _object_without_properties._(_param, [
         "children",
-        "onClose",
         "opened",
-        "className"
+        "className",
+        "onClose"
     ]);
-    const { document } = (0, _dom.useDOM)();
     const platform = (0, _usePlatform.usePlatform)();
-    const [visible, setVisible] = _react.useState(opened);
-    const closing = visible && !opened;
     const { sizeX = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const elementRef = _react.useRef(null);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        opened && setVisible(true);
-    }, [
-        opened
-    ]);
-    (0, _ScrollContext.useScrollLock)(platform !== 'vkcom' && opened);
-    // start closing on outer click
-    (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', opened && !closing && ((event)=>{
-        if (elementRef.current && !elementRef.current.contains(event.target)) {
+    const [animationState, animationHandlers] = (0, _animation.useCSSKeyframesAnimationController)(opened ? 'enter' : 'exit');
+    const visible = animationState !== 'exited';
+    (0, _ScrollContext.useScrollLock)(platform !== 'vkcom' && visible);
+    const handleGlobalOnClickOutside = _react.useCallback((event)=>{
+        if (opened) {
             event.stopPropagation();
             onClose();
         }
-    }), {
-        capture: true
-    });
-    // fallback onAnimationEnd when animationend not supported
-    const onAnimationEnd = ()=>setVisible(false);
-    const animationFallback = (0, _useTimeout.useTimeout)(onAnimationEnd, 200);
-    _react.useEffect(()=>closing ? animationFallback.set() : animationFallback.clear(), [
-        animationFallback,
-        closing
+    }, [
+        opened,
+        onClose
     ]);
+    (0, _useGlobalOnClickOutside.useGlobalOnClickOutside)(handleGlobalOnClickOutside, visible ? elementRef : null);
+    if (!visible) {
+        return null;
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_FixedLayout.FixedLayout, _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPanelHeaderContext", platform === 'ios' && "vkuiPanelHeaderContext--ios", opened && "vkuiPanelHeaderContext--opened", closing && "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], className),
+        className: (0, _vkjs.classNames)("vkuiPanelHeaderContext", platform === 'ios' && "vkuiPanelHeaderContext--ios", opened ? "vkuiPanelHeaderContext--opened" : "vkuiPanelHeaderContext--closing", sizeXClassNames[sizeX], className),
         vertical: "top",
         children: [
-            visible && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 onClick: (event)=>{
                     event.stopPropagation();
                     onClose();
                 },
                 className: "vkuiPanelHeaderContext__fade"
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
+                "data-testid": process.env.NODE_ENV === 'test' ? 'content' : undefined,
                 className: "vkuiPanelHeaderContext__in",
-                ref: elementRef,
-                onAnimationEnd: closing ? onAnimationEnd : undefined,
-                children: visible && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                ref: elementRef
+            }, animationHandlers), {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     className: "vkuiPanelHeaderContext__content",
                     children: children
                 })
-            })
+            }))
         ]
     }));
 };

package/dist/cjs/components/PanelHeaderContext/PanelHeaderContext.js.map CHANGED Viewed

	@@ -1 +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":["PanelHeaderContext","sizeXClassNames","none","~~children~~","~~onClose~~","~~opened~~","~~className~~","~~restProps~~","~~document~~","~~useDOM~~","platform","usePlatform","~~visible~~","~~setVisible~~","~~React~~","~~useState~~","~~closing~~","~~sizeX~~","~~useAdaptivity~~","~~elementRef~~","~~useRef~~","~~useIsomorphicLayoutEffect~~","~~useScrollLock~~","~~useGlobalEventListener~~","event","~~current","contains","target","~~stopPropagation","~~capture~~","~~onAnimationEnd~~","~~animationFallback~~","~~useTimeout~~","~~useEffect~~","~~set~~","~~clear~~","~~FixedLayout~~","~~classNames~~","~~vertical~~","~~div~~","~~onClick","~~ref"~~,"undefined"~~],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BA2BaA~~;;;eAAAA;;;;;;;;~~iEA3BU~~;sBACI;+BACG;~~wCACS~~;~~6BACX~~;~~4BACD;qBACJ;2CACmB~~;+~~BAEZ~~;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;~~IACJ~~,~~CAAC,UAAU~~;~~IACX~~,~~CAAC,UAAU~~;~~AACb~~;AAUO,~~MAAMF~~,qBAAqB;QAAC,~~EACjCG~~,QAAQ,EACRC,~~OAAO,EACPC,~~SAAS,KAAK,EACdC,SAAS,~~EAEe~~,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,~~MAAM~~,~~EAAEE,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAC3B,MAAMC,~~WAAWC,IAAAA,wBAAW;IAC5B,MAAM,~~CAACC~~,~~SAASC,WAAW,GAAGC,OAAMC,~~QAAQ,~~CAACV;IAC7C,MAAMW,UAAUJ,WAAW,CAACP;IAC5B,~~MAAM,~~EAAEY,QAAQ,MAAM,~~EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,~~aAAaL~~,~~OAAMM~~,MAAM,CAAiB;~~IAEhDC~~,~~IAAAA~~,~~oDAAyB~~,~~EAAC;QACxBhB~~,~~UAAUQ~~,~~WAAW;IACvB~~,~~GAAG;QAACR;KAAO;IAEXiB,~~IAAAA,~~4BAAa~~,~~EAACZ~~,~~aAAa~~,~~WAAWL~~;~~IAEtC,+BAA+B;IAC/BkB~~,~~IAAAA~~,~~8CAAsB~~,~~EACpBf~~,~~UACA~~,~~SACAH~~,~~UACE~~,~~CAACW~~,~~WACA,CAAA,CAACQ~~;~~QACA~~,~~IAAIL~~,~~WAAWM~~,~~OAAO~~,~~IAAI~~,~~CAACN~~,~~WAAWM~~,~~OAAO~~,~~CAACC,~~QAAQ~~,CAACF,MAAMG,MAAM,GAAW~~;~~YAC5EH~~,~~MAAMI~~,eAAe;~~YACrBxB~~;QACF;IACF,~~CAAA,GACF~~;~~QAAEyB,SAAS~~;~~IAAK~~;~~IAGlB,0DAA0D~~;~~IAC1D~~,~~MAAMC~~,~~iBAAiB~~,~~IAAMjB~~,~~WAAW;IACxC~~,~~MAAMkB~~,~~oBAAoBC~~,~~IAAAA~~,~~sBAAU~~,~~EAACF,gBAAgB~~;~~IACrDhB~~,~~OAAMmB,SAAS,CACb,IAAOjB,UAAUe,kBAAkBG,GAAG,KAAKH,kBAAkBI,KAAK,IAClE~~;~~QAACJ~~;~~QAAmBf;KAAQ;IAG9B~~,qBACE,~~sBAACoB~~,wBAAW,~~8CACN7B~~;~~QACJD~~,~~WAAW+B~~,IAAAA,gBAAU,~~4BAEnB3B~~,aAAa,~~wCACbL~~,~~4CACAW,8CACAf,~~eAAe,~~CAACgB~~,MAAM,~~EACtBX~~;~~QAEFgC~~,UAAS;;~~YAER1B~~,~~yBACC,qBAAC2B~~;gBACCC,SAAS,~~CAAChB~~;oBACRA,~~MAAMI~~,eAAe;~~oBACrBxB~~;gBACF;~~gBACAE~~,SAAS;;~~0BAGb~~,~~qBAACiC~~;~~gBACCjC~~,SAAS;~~gBACTmC~~,~~KAAKtB~~;~~gBACLW~~,~~gBAAgBd,UAAUc,iBAAiBY~~;~~0BAE1C9B~~,~~yBAAW~~,~~qBAAC2B~~;~~oBAAIjC~~,SAAS;~~8BAA0CH~~;;;;;~~AAI5E~~"}
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 { 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":["PanelHeaderContext","sizeXClassNames","none","compact","regular","children","opened","className","onClose","restProps","platform","usePlatform","sizeX","useAdaptivity","elementRef","React","useRef","animationState","animationHandlers","useCSSKeyframesAnimationController","visible","useScrollLock","handleGlobalOnClickOutside","useCallback","event","stopPropagation","useGlobalOnClickOutside","FixedLayout","classNames","vertical","div","onClick","data-testid","process","env","NODE_ENV","undefined","ref"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;+BACG;yCACU;6BACZ;2BACuB;+BAErB;6BACF;AAG5B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;IACPC,OAAO;AACT;AAUO,MAAMJ,qBAAqB;QAAC,EACjCK,QAAQ,EACRC,SAAS,KAAK,EACdC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IACxC,MAAMC,aAAaC,OAAMC,MAAM,CAAiB;IAChD,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGC,IAAAA,6CAAkC,EAC5Eb,SAAS,UAAU;IAErB,MAAMc,UAAUH,mBAAmB;IAEnCI,IAAAA,4BAAa,EAACX,aAAa,WAAWU;IAEtC,MAAME,6BAA6BP,OAAMQ,WAAW,CAClD,CAACC;QACC,IAAIlB,QAAQ;YACVkB,MAAMC,eAAe;YACrBjB;QACF;IACF,GACA;QAACF;QAAQE;KAAQ;IAGnBkB,IAAAA,gDAAuB,EAACJ,4BAA4BF,UAAUN,aAAa;IAE3E,IAAI,CAACM,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,sBAACO,wBAAW,8CACNlB;QACJF,WAAWqB,IAAAA,gBAAU,4BAEnBlB,aAAa,wCACbJ,+EACAL,eAAe,CAACW,MAAM,EACtBL;QAEFsB,UAAS;;0BAET,qBAACC;gBACCC,SAAS,CAACP;oBACRA,MAAMC,eAAe;oBACrBjB;gBACF;gBACAD,SAAS;;0BAEX,qBAACuB;gBACCE,eAAaC,QAAQC,GAAG,CAACC,QAAQ,KAAK,SAAS,YAAYC;gBAC3D7B,SAAS;gBACT8B,KAAKvB;eACDI;0BAEJ,cAAA,qBAACY;oBAAIvB,SAAS;8BAA0CF;;;;;AAIhE"}

package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js.map CHANGED Viewed

	@@ -1 +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":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","usePlatform","label","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","Icon24PenOutline","IconRegular","Icon28DoneOutline","Icon28EditOutline"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;uBAxBN;6BACqB;sCACS;mCACqB;gCAC3B;AAoBxB,MAAMA,kBAAkB;QAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EAEC,WADlBC;QAHHH;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,QAAQN,WAAWE,YAAYD;IAErC,qBACE,qBAACM,oCAAiB,8CAAKJ;kBACpBC,aAAa,QACZE,sBAEA;;8BACE,qBAACE,8BAAc;8BAAEF;;8BACjB,qBAACG,0CAAoB;oBACnBC,aAAaV,WAAWW,wBAAiB,GAAGC,uBAAgB;oBAC5DC,aAAab,WAAWc,wBAAiB,GAAGC,wBAAiB;;;;;AAMzE"}
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":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","platform","usePlatform","label","PanelHeaderButton","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","Icon24PenOutline","IconRegular","Icon28DoneOutline","Icon28EditOutline"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;uBAxBN;6BACqB;sCACS;mCACqB;gCAC3B;AAoBxB,MAAMA,kBAAkB;QAAC,EAC9BC,WAAW,KAAK,EAChBC,YAAY,eAAe,EAC3BC,YAAY,QAAQ,EAEC,WADlBC;QAHHH;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAMC,QAAQN,WAAWE,YAAYD;IAErC,qBACE,qBAACM,oCAAiB,8CAAKJ;kBACpBC,aAAa,QACZE,sBAEA;;8BACE,qBAACE,8BAAc;8BAAEF;;8BACjB,qBAACG,0CAAoB;oBACnBC,aAAaV,WAAWW,wBAAiB,GAAGC,uBAAgB;oBAC5DC,aAAab,WAAWc,wBAAiB,GAAGC,wBAAiB;;;;;AAMzE"}

package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map CHANGED Viewed

	@@ -1 +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":["PanelHeaderSubmit","children","restProps","platform","usePlatform","PanelHeaderButton","primary","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","IconRegular","Icon28DoneOutline"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBATwC;6BACzB;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,oBAAoB;QAAC,EAChCC,WAAW,QAAQ,EAEI,WADpBC;QADHD;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,OAAO;OAAKJ;kBAC5BC,aAAa,QACZF,yBAEA;;8BACE,qBAACM,8BAAc;8BAAEN;;8BACjB,qBAACO,0CAAoB;oBAACC,aAAaC,wBAAiB;oBAAEC,aAAaC,wBAAiB;;;;;AAK9F"}
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":["PanelHeaderSubmit","children","restProps","platform","usePlatform","PanelHeaderButton","primary","VisuallyHidden","AdaptiveIconRenderer","IconCompact","Icon24DoneOutline","IconRegular","Icon28DoneOutline"],"mappings":";;;;+BASaA;;;eAAAA;;;;;;;uBATwC;6BACzB;sCACS;mCACqB;gCAC3B;AAKxB,MAAMA,oBAAoB;QAAC,EAChCC,WAAW,QAAQ,EAEI,WADpBC;QADHD;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oCAAiB;QAACC,OAAO;OAAKJ;kBAC5BC,aAAa,QACZF,yBAEA;;8BACE,qBAACM,8BAAc;8BAAEN;;8BACjB,qBAACO,0CAAoB;oBAACC,aAAaC,wBAAiB;oBAAEC,aAAaC,wBAAiB;;;;;AAK9F"}

package/dist/cjs/components/PanelSpinner/PanelSpinner.js.map CHANGED Viewed

	@@ -1 +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":["PanelSpinner","React","memo","height","style","restProps","Spinner","size","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;iEAVU;yBACe;AAS/B,MAAMA,6BAAeC,OAAMC,IAAI,CACpC;QAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAmC,WAA9BC;QAAvBF;QAAaC;;yBACd,qBAACE,gBAAO;QAACC,MAAK;OAAcF;QAAWD,OAAO;YAAED;WAAWC;;;AAI/DJ,aAAaQ,WAAW,GAAG"}
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":["PanelSpinner","React","memo","height","style","restProps","Spinner","size","displayName"],"mappings":";;;;+BAUaA;;;eAAAA;;;;;;;;iEAVU;yBACe;AAS/B,MAAMA,6BAAeC,OAAMC,IAAI,CACpC;QAAC,EAAEC,SAAS,EAAE,EAAEC,KAAK,EAAmC,WAA9BC;QAAvBF;QAAaC;;yBACd,qBAACE,gBAAO;QAACC,MAAK;OAAcF;QAAWD,OAAO;YAAED;WAAWC;;;AAI/DJ,aAAaQ,WAAW,GAAG"}

package/dist/cjs/components/Placeholder/Placeholder.js.map CHANGED Viewed

	@@ -1 +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":["Placeholder","PlaceholderContainer","stretched","noPadding","restProps","RootComponent","baseClassName","classNames","PlaceholderIcon","props","PlaceholderHeader","className","Title","level","weight","PlaceholderText","Headline","PlaceholderActions","icon","header","children","action","hasReactNode","Container","Icon","Header","Text","Actions"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAqFaA;;;eAAAA;;;;;;;;iEArFU;sBACkB;+BAEX;0BACL;uBACH;AActB,MAAMC,uBAAuB;QAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EAES,WADvBC;QAFHF;QACAC;;yBAGA,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBL,2CACA,CAACC;OAECC;;AAMR,MAAMI,kBAAkB,CAACC,sBACvB,qBAACJ,4BAAa;QAACC,aAAa;OAAmCG;AAKjE,MAAMC,oBAAoB;QAAC,EAAEC,SAAS,EAAwC,WAAnCP;QAAdO;;yBAC3B,qBAACC,YAAK;QACJC,OAAM;QACNC,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMW,kBAAkB;QAAC,EAAEJ,SAAS,EAAsC,WAAjCP;QAAdO;;yBACzB,qBAACK,kBAAQ;QACPF,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMa,qBAAqB,CAACR,sBAC1B,qBAACJ,4BAAa;QAACC,aAAa;OAAqCG;AAqB5D,MAAMT,cAAc;QAAC,EAC1BkB,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNlB,YAAY,KAAK,EAEA,WADdC;QALHc;QACAC;QACAC;QACAC;QACAlB;;yBAGA,sBAACF;QAAqBE,WAAWA;OAAeC;;YAC7CkB,IAAAA,kBAAY,EAACJ,uBAAS,qBAACV;0BAAiBU;;YACxCI,IAAAA,kBAAY,EAACH,yBAAW,qBAACT;0BAAmBS;;YAC5CG,IAAAA,kBAAY,EAACF,2BAAa,qBAACL;0BAAiBK;;YAC5CE,IAAAA,kBAAY,EAACD,yBAAW,qBAACJ;0BAAoBI;;;;;AAIlDrB,YAAYuB,SAAS,GAAGtB;AACxBD,YAAYwB,IAAI,GAAGhB;AACnBR,YAAYyB,MAAM,GAAGf;AACrBV,YAAY0B,IAAI,GAAGX;AACnBf,YAAY2B,OAAO,GAAGV"}
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":["Placeholder","PlaceholderContainer","stretched","noPadding","restProps","RootComponent","baseClassName","classNames","PlaceholderIcon","props","PlaceholderHeader","className","Title","level","weight","PlaceholderText","Headline","PlaceholderActions","icon","header","children","action","hasReactNode","Container","Icon","Header","Text","Actions"],"mappings":";;;;+BAqFaA;;;eAAAA;;;;;;;;iEArFU;sBACkB;+BAEX;0BACL;uBACH;AActB,MAAMC,uBAAuB;QAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EAES,WADvBC;QAFHF;QACAC;;yBAGA,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBL,2CACA,CAACC;OAECC;;AAMR,MAAMI,kBAAkB,CAACC,sBACvB,qBAACJ,4BAAa;QAACC,aAAa;OAAmCG;AAKjE,MAAMC,oBAAoB;QAAC,EAAEC,SAAS,EAAwC,WAAnCP;QAAdO;;yBAC3B,qBAACC,YAAK;QACJC,OAAM;QACNC,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMW,kBAAkB;QAAC,EAAEJ,SAAS,EAAsC,WAAjCP;QAAdO;;yBACzB,qBAACK,kBAAQ;QACPF,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;;AAMR,MAAMa,qBAAqB,CAACR,sBAC1B,qBAACJ,4BAAa;QAACC,aAAa;OAAqCG;AAqB5D,MAAMT,cAAc;QAAC,EAC1BkB,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNlB,YAAY,KAAK,EAEA,WADdC;QALHc;QACAC;QACAC;QACAC;QACAlB;;yBAGA,sBAACF;QAAqBE,WAAWA;OAAeC;;YAC7CkB,IAAAA,kBAAY,EAACJ,uBAAS,qBAACV;0BAAiBU;;YACxCI,IAAAA,kBAAY,EAACH,yBAAW,qBAACT;0BAAmBS;;YAC5CG,IAAAA,kBAAY,EAACF,2BAAa,qBAACL;0BAAiBK;;YAC5CE,IAAAA,kBAAY,EAACD,yBAAW,qBAACJ;0BAAoBI;;;;;AAIlDrB,YAAYuB,SAAS,GAAGtB;AACxBD,YAAYwB,IAAI,GAAGhB;AACnBR,YAAYyB,MAAM,GAAGf;AACrBV,YAAY0B,IAAI,GAAGX;AACnBf,YAAY2B,OAAO,GAAGV"}

package/dist/cjs/components/PlatformProvider/PlatformProvider.js.map CHANGED Viewed

	@@ -1 +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":["PlatformProvider","value","children","ConfigProviderOverride","platform","TokensClassProvider"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAmBgBA;;;eAAAA;;;;;iEAnBO;wBAEa;wCACG;AAgBhC,SAASA,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,qBAACC,8CAAsB;QAACC,UAAUH;kBAChC,cAAA,qBAACI,2BAAmB;sBAAEH;;;AAG5B"}
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":["PlatformProvider","value","children","ConfigProviderOverride","platform","TokensClassProvider"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;;iEAnBO;wBAEa;wCACG;AAgBhC,SAASA,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,qBAACC,8CAAsB;QAACC,UAAUH;kBAChC,cAAA,qBAACI,2BAAmB;sBAAEH;;;AAG5B"}

package/dist/cjs/components/PopoutRoot/PopoutRoot.d.ts.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/cjs/components/PopoutRoot/PopoutRoot.js CHANGED Viewed

@@ -26,7 +26,6 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _dom = require("../../lib/dom");
 const _AppRootPortal = require("../AppRoot/AppRootPortal");
 const _RootComponent = require("../RootComponent/RootComponent");
 const PopoutRootPopout = (_param)=>{
@@ -51,13 +50,6 @@ const PopoutRoot = (_param)=>{
         "modal",
         "children"
     ]);
-    const { document } = (0, _dom.useDOM)();
-    _react.useEffect(()=>{
-        popout && (0, _dom.blurActiveElement)(document);
-    }, [
-        document,
-        popout
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: "vkuiPopoutRoot",
         children: [

package/dist/cjs/components/PopoutRoot/PopoutRoot.js.map CHANGED Viewed

	@@ -1 +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":["PopoutRoot","PopoutRootModal","PopoutRootPopout","className","restProps","div","classNames","popout","modal","children","~~document","useDOM","React","useEffect","blurActiveElement","~~RootComponent","baseClassName","AppRootPortal"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IAoCaA~~,UAAU;eAAVA;;IAfAC,eAAe;eAAfA;;IAVAC,gBAAgB;eAAhBA;;;;;;;;~~iEAXU~~;sBACI~~;qBACe~~;+~~BAEZ~~;+BACA;AAMvB,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;;AAMpE,MAAMH,kBAAkB;QAAC,EAC9BE,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,2BAA8BH;OAAgBC;;AAWnE,MAAMJ,aAAa;QAAC,EAAEO,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BL;QAA5BG;QAAQC;QAAOC;;IAC1C,~~MAAM,EAAEC,QAAQ,EAAE,GAAGC,IAAAA,WAAM;IAE3BC,OAAMC,SAAS,CAAC;QACdN,UAAUO,IAAAA,sBAAiB,EAACJ;IAC9B,GAAG;QAACA;QAAUH;KAAO;IAErB,~~qBACE,~~sBAACQ~~,4BAAa,~~8CAAKX~~;~~QAAWY~~,aAAa;;~~YACxCP~~;0BACD,~~sBAACQ~~,4BAAa;;oBACX,CAAC,~~CAACV~~,wBAAU,qBAACL;kCAAkBK;;oBAC/B,CAAC,CAACC,uBAAS,qBAACP;kCAAiBO;;;;;;AAItC"}
1	+ {"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":["PopoutRoot","PopoutRootModal","PopoutRootPopout","className","restProps","div","classNames","popout","modal","children","RootComponent","baseClassName","AppRootPortal"],"mappings":";;;;;;;;;;;IAmCaA,UAAU;eAAVA;;IAfAC,eAAe;eAAfA;;IAVAC,gBAAgB;eAAhBA;;;;;;;;iEAVU;sBACI;+BAEG;+BACA;AAMvB,MAAMA,mBAAmB;QAAC,EAC/BC,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;;AAMpE,MAAMH,kBAAkB;QAAC,EAC9BE,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,qBAACE;QAAIF,WAAWG,IAAAA,gBAAU,2BAA8BH;OAAgBC;;AAWnE,MAAMJ,aAAa;QAAC,EAAEO,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BL;QAA5BG;QAAQC;QAAOC;;IAC1C,qBACE,sBAACC,4BAAa,8CAAKN;QAAWO,aAAa;;YACxCF;0BACD,sBAACG,4BAAa;;oBACX,CAAC,CAACL,wBAAU,qBAACL;kCAAkBK;;oBAC/B,CAAC,CAACC,uBAAS,qBAACP;kCAAiBO;;;;;;AAItC"}

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.d.ts.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/cjs/components/PopoutWrapper/PopoutWrapper.js CHANGED Viewed

@@ -8,15 +8,11 @@ Object.defineProperty(exports, "PopoutWrapper", {
         return PopoutWrapper;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 const _jsxruntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
-const _usePlatform = require("../../hooks/usePlatform");
-const _useTimeout = require("../../hooks/useTimeout");
 const _RootComponent = require("../RootComponent/RootComponent");
 const stylesAlignX = {
     center: "vkuiPopoutWrapper--alignX-center",
@@ -38,23 +34,8 @@ const PopoutWrapper = (_param)=>{
         "children",
         "onClick"
     ]);
-    const platform = (0, _usePlatform.usePlatform)();
-    const [opened, setOpened] = _react.useState(noBackground);
-    const onFadeInEnd = (e)=>{
-        if (!e || e.animationName === "vkuianimation-full-fade-in") {
-            setOpened(true);
-        }
-    };
-    const animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === 'ios' ? 300 : 200);
-    _react.useEffect(()=>{
-        !opened && animationFinishFallback.set();
-    }, [
-        animationFinishFallback,
-        opened
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
-        baseClassName: (0, _vkjs.classNames)("vkuiPopoutWrapper", stylesAlignY[alignY], stylesAlignX[alignX], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", !noBackground && "vkuiPopoutWrapper--masked"),
-        onAnimationEnd: opened ? undefined : onFadeInEnd,
+        baseClassName: (0, _vkjs.classNames)("vkuiPopoutWrapper", stylesAlignY[alignY], stylesAlignX[alignX], closing ? "vkuiPopoutWrapper--closing" : "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", !noBackground && "vkuiPopoutWrapper--masked"),
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "vkuiPopoutWrapper__container",
             children: [

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.js.map CHANGED Viewed

	@@ -1 +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":["PopoutWrapper","stylesAlignX","center","left","right","stylesAlignY","top","bottom","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","~~platform","usePlatform","opened","setOpened","React","useState","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","useEffect","set","~~RootComponent","baseClassName","classNames","~~onAnimationEnd","undefined","~~div","className"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAgDaA~~;;;eAAAA~~;;;;;;;;iEAhDU;sBACI;6BACC;4BACD~~;+BAEG;AAG9B,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA8BO,MAAMP,gBAAgB;QAAC,EAC5BQ,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,CAACC,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAACV;IAE3C,MAAMW,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DL,UAAU;QACZ;IACF;IACA,MAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaN,aAAa,QAAQ,MAAM;IACnFI,OAAMO,SAAS,CAAC;QACd,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,qBACE,~~qBAACW~~,4BAAa,~~8CACRd~~;~~QACJe~~,eAAeC,IAAAA,gBAAU,~~uBAEvB1B~~,YAAY,CAACG,OAAO,EACpBP,YAAY,CAACQ,OAAO,EACpBC,~~yCACAQ~~,~~uCACAN,~~qCACA,CAACD;~~QAEHqB~~,~~gBAAgBd,SAASe,YAAYX;kBAErC,~~cAAA,~~sBAACY~~;YAAIC,SAAS;;8BACZ,qBAACD;oBAAIC,SAAS;~~oBAAoCrB~~,SAASA;;8BAC3D,~~qBAACoB~~;oBAAIC,SAAS;~~8BAAqCtB~~;;;;;AAI3D"}
1	+ {"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":["PopoutWrapper","stylesAlignX","center","left","right","stylesAlignY","top","bottom","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","RootComponent","baseClassName","classNames","div","className"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;sBA7Cc;+BAEG;AAG9B,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA8BO,MAAMP,gBAAgB;QAAC,EAC5BQ,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,4BAAa,8CACRD;QACJE,eAAeC,IAAAA,gBAAU,uBAEvBb,YAAY,CAACG,OAAO,EACpBP,YAAY,CAACQ,OAAO,EACpBC,sEACAE,qCACA,CAACD;kBAGH,cAAA,sBAACQ;YAAIC,SAAS;;8BACZ,qBAACD;oBAAIC,SAAS;oBAAoCN,SAASA;;8BAC3D,qBAACK;oBAAIC,SAAS;8BAAqCP;;;;;AAI3D"}

package/dist/cjs/components/Popover/Popover.d.ts CHANGED Viewed

@@ -16,7 +16,7 @@ export type PopoverOnShownChange = OnShownChange;
  * @public
  */
 export type PopoverContentRenderProp = FloatingContentRenderProp;
-type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware'>;
+type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware' | 'customMiddlewares'>;
 /**
  * @public
  */
@@ -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, customMiddlewares, 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/cjs/components/Popover/Popover.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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,GACvB,mBAAmB,CACtB,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,ihBA6CjB,YAAY,4CA4Gd,CAAC"}

package/dist/cjs/components/Popover/Popover.js CHANGED Viewed

@@ -25,13 +25,13 @@ const _FloatingArrow = require("../FloatingArrow/FloatingArrow");
 const _FocusTrap = require("../FocusTrap/FocusTrap");
 const Popover = (_param)=>{
     var { // UsePopoverProps
-    arrow: withArrow, arrowHeight = _DefaultIcon.DEFAULT_ARROW_HEIGHT, arrowPadding = _DefaultIcon.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 = _DefaultIcon.DEFAULT_ARROW_HEIGHT, arrowPadding = _DefaultIcon.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, customMiddlewares, // uncontrolled
     defaultShown = false, // controlled
     shown: shownProp, onShownChange, // Для AppRootPortal
     usePortal = true, // Для FloatingArrow
     arrowProps, ArrowIcon = _DefaultIcon.DefaultIcon, // FocusTrapProps
     autoFocus = true, restoreFocus = true, className, children, noStyling = false, zIndex = 'var(--vkui--z_index_popout)', // a11y
-    role } = _param, restPopoverProps = _object_without_properties._(_param, [
+    role = 'dialog' } = _param, restPopoverProps = _object_without_properties._(_param, [
         "arrow",
         "arrowHeight",
         "arrowPadding",
@@ -50,6 +50,8 @@ const Popover = (_param)=>{
         "disableInteractive",
         "disableCloseOnClickOutside",
         "disableCloseOnEscKey",
+        "keepMounted",
+        "customMiddlewares",
         "defaultShown",
         "shown",
         "onShownChange",
@@ -75,7 +77,8 @@ const Popover = (_param)=>{
         offsetByCrossAxis,
         sameWidth,
         hideWhenReferenceHidden,
-        disableFlipMiddleware
+        disableFlipMiddleware,
+        customMiddlewares
     });
     const { placement: resolvedPlacement, shown, willBeHide, refs, referenceProps, floatingProps, middlewareData, onClose, onRestoreFocus, onEscapeKeyDown } = (0, _floating.useFloatingWithInteractions)({
         middlewares,
@@ -94,8 +97,11 @@ const Popover = (_param)=>{
     (0, _floating.usePlacementChangeCallback)(expectedPlacement, resolvedPlacement, onPlacementChange);
     const [, child] = (0, _usePatchChildren.usePatchChildren)(children, (0, _accessibility.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;
@@ -112,11 +118,13 @@ const Popover = (_param)=>{
             usePortal: usePortal,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", _object_spread_props._(_object_spread._({
                 ref: refs.setFloating,
-                className: "vkuiPopover"
+                className: (0, _vkjs.classNames)("vkuiPopover", hidden && "vkuiPopover--hidden")
             }, floatingProps), {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_FocusTrap.FocusTrap, _object_spread_props._(_object_spread._({}, restPopoverProps), {
                     role: role,
                     className: (0, _vkjs.classNames)("vkuiPopover__in", noStyling ? undefined : "vkuiPopover__in--withStyling", willBeHide ? _animation.animationFadeClassNames.out : _animation.animationFadeClassNames.in, _animation.transformOriginClassNames[resolvedPlacement], className),
+                    mount: !hidden,
+                    disabled: hidden,
                     autoFocus: disableInteractive ? false : autoFocus,
                     restoreFocus: restoreFocus ? onRestoreFocus : false,
                     onClose: onEscapeKeyDown,

package/dist/cjs/components/Popover/Popover.js.map CHANGED Viewed

	@@ -1 +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":["Popover","arrow","withArrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","usePortal","arrowProps","ArrowIcon","DefaultIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","React","useState","middlewares","strictPlacement","useFloatingMiddlewaresBootstrap","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","useFloatingWithInteractions","usePlacementChangeCallback","child","usePatchChildren","injectAriaExpandedPropByRole","setReference","popover","style","String","arrowCoords","FloatingArrow","iconClassName","undefined","coords","getRootRef","Icon","AppRootPortal","div","ref","setFloating","FocusTrap","classNames","animationFadeClassNames","out","in","transformOriginClassNames","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
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 \| 'customMiddlewares'\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 customMiddlewares,\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 customMiddlewares,\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":["Popover","arrow","withArrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","usePortal","arrowProps","ArrowIcon","DefaultIcon","autoFocus","restoreFocus","className","children","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","React","useState","middlewares","strictPlacement","useFloatingMiddlewaresBootstrap","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","useFloatingWithInteractions","usePlacementChangeCallback","child","usePatchChildren","injectAriaExpandedPropByRole","setReference","popover","hidden","style","String","arrowCoords","FloatingArrow","iconClassName","undefined","coords","getRootRef","Icon","AppRootPortal","div","ref","setFloating","classNames","FocusTrap","animationFadeClassNames","out","in","transformOriginClassNames","mount","Fragment"],"mappings":"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"}