@vkontakte/vkui 5.7.2 → 5.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nexport interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  aside?: React.ReactNode;\n  before?: React.ReactNode;\n  status?: React.ReactNode;\n}\n\ninterface PanelHeaderChildrenProps extends HasChildren {\n  hasStatus: boolean;\n  hasBefore: boolean;\n}\n\nconst PanelHeaderChildren = ({ hasStatus, hasBefore, children }: PanelHeaderChildrenProps) => {\n  const platform = usePlatform();\n  if (platform === Platform.VKCOM) {\n    return (\n      <Text className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  className,\n  style,\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <div\n      {...rootProps}\n      style={style}\n      className={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        className,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div 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    </div>\n  );\n};\n"],"names":["PanelHeaderContent","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Platform","VKCOM","Text","className","Component","weight","Headline","div","style","aside","status","before","onClick","restProps","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","classNames","hasOwnProperty","hasReactNode","ANDROID","Footnote"],"mappings":";;;;+BAkDaA;;;eAAAA;;;;;;;+DAlDU;oBACkB;2BACb;wBACH;wBAEA;wBACA;wBACA;oBACJ;AAGrB,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB;QAAGC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWC,IAAAA,wBAAW;IAC5B,IAAID,aAAaE,kBAAQ,CAACC,KAAK,EAAE;QAC/B,qBACE,qBAACC,UAAI;YAACC,SAAS;YAA8CC,WAAU;YAAMC,QAAO;WACjFR;IAGP;IAEA,OAAOF,aAAaC,0BAClB,qBAACU,kBAAQ;QAACH,SAAS;QAA8CC,WAAU;QAAMC,QAAO;OACrFR,0BAGH,qBAACU;QAAIJ,SAAS;OAA8CN;AAEhE;AAKO,IAAMR,qBAAqB;QAChCc,mBAAAA,WACAK,eAAAA,OACAC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAd,kBAAAA,UACAe,iBAAAA,SACGC;QAPHV;QACAK;QACAC;QACAC;QACAC;QACAd;QACAe;;IAGA,IAAME,cAAcF,UAAUG,kBAAQ,GAAG;IACzC,IAAMC,YAAYJ,UAAU,CAAC,IAAIC;IACjC,IAAMf,WAAWC,IAAAA,wBAAW;IAC5B,IAAMkB,UAAUL,UACZ,4CACKC;QACHD,SAAAA;QACAM,mBAAmB;QACnBC,WAAWrB,aAAaE,kBAAQ,CAACoB,GAAG;QACpCC,YAAY;SAEd,CAAC;IAEL,qBACE,qBAACd,mDACKS;QACJR,OAAOA;QACPL,WAAWmB,IAAAA,gBAAU,4BAEnBhC,mBAAmBiC,cAAc,CAACzB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BW;QAGDqB,IAAAA,kBAAY,EAACb,yBAAW,qBAACJ;QAAIJ,SAAS;OAAyCQ,uBAChF,qBAACG,yDACKG;QACJd,WAAWmB,IAAAA,gBAAU,gCAEnB,CAACX,UAAUb,aAAaE,kBAAQ,CAACyB,OAAO;QAGzCD,IAAAA,kBAAY,EAACd,yBACZ,qBAACgB,kBAAQ;QAACvB,SAAS;OAAyCO,uBAE9D,qBAACH;QAAIJ,SAAS;qBACZ,qBAACT;QAAoBC,WAAW6B,IAAAA,kBAAY,EAACd;QAASd,WAAW4B,IAAAA,kBAAY,EAACb;OAC3Ed,WAEF2B,IAAAA,kBAAY,EAACf,wBACZ,qBAACF;QAAIJ,SAAS;OAAwCM,SAGzDe,IAAAA,kBAAY,EAACb,yBAAW,qBAACJ;QAAIJ,SAAS;;AAI/C"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContent/PanelHeaderContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeaderContent.module.css';\n\nconst platformClassNames = {\n  ios: styles['PanelHeaderContent--ios'],\n  android: styles['PanelHeaderContent--android'],\n  vkcom: styles['PanelHeaderContent--vkcom'],\n};\n\nexport interface PanelHeaderContentProps extends 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  if (platform === Platform.VKCOM) {\n    return (\n      <Text className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline className={styles['PanelHeaderContent__childrenText']} Component=\"div\" weight=\"2\">\n      {children}\n    </Headline>\n  ) : (\n    <div className={styles['PanelHeaderContent__children-in']}>{children}</div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent\n */\nexport const PanelHeaderContent = ({\n  aside,\n  status,\n  before,\n  children,\n  onClick,\n  ...restProps\n}: PanelHeaderContentProps) => {\n  const InComponent = onClick ? Tappable : 'div';\n  const rootProps = onClick ? {} : restProps;\n  const platform = usePlatform();\n  const inProps = onClick\n    ? {\n        ...restProps,\n        onClick,\n        activeEffectDelay: 200,\n        hasActive: platform === Platform.IOS,\n        activeMode: 'opacity',\n      }\n    : {};\n\n  return (\n    <RootComponent\n      {...rootProps}\n      baseClassName={classNames(\n        styles['PanelHeaderContent'],\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n      )}\n    >\n      {hasReactNode(before) && <div className={styles['PanelHeaderContent__before']}>{before}</div>}\n      <InComponent\n        {...inProps}\n        className={classNames(\n          styles['PanelHeaderContent__in'],\n          !before && platform !== Platform.ANDROID && styles['PanelHeaderContent__in--centered'],\n        )}\n      >\n        {hasReactNode(status) && (\n          <Footnote className={styles['PanelHeaderContent__status']}>{status}</Footnote>\n        )}\n        <div 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","PanelHeaderChildren","hasStatus","hasBefore","children","platform","usePlatform","Platform","VKCOM","Text","className","Component","weight","Headline","div","aside","status","before","onClick","restProps","InComponent","Tappable","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","RootComponent","baseClassName","classNames","hasOwnProperty","hasReactNode","ANDROID","Footnote"],"mappings":";;;;+BAmDaA;;;eAAAA;;;;;;;+DAnDU;oBACkB;2BACb;wBACH;6BAEK;wBACL;wBACA;wBACA;oBACJ;AAGrB,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB;QAAGC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWC,IAAAA,wBAAW;IAC5B,IAAID,aAAaE,kBAAQ,CAACC,KAAK,EAAE;QAC/B,qBACE,qBAACC,UAAI;YAACC,SAAS;YAA8CC,WAAU;YAAMC,QAAO;WACjFR;IAGP;IAEA,OAAOF,aAAaC,0BAClB,qBAACU,kBAAQ;QAACH,SAAS;QAA8CC,WAAU;QAAMC,QAAO;OACrFR,0BAGH,qBAACU;QAAIJ,SAAS;OAA8CN;AAEhE;AAKO,IAAMR,qBAAqB;QAChCmB,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAb,kBAAAA,UACAc,iBAAAA,SACGC;QALHJ;QACAC;QACAC;QACAb;QACAc;;IAGA,IAAME,cAAcF,UAAUG,kBAAQ,GAAG;IACzC,IAAMC,YAAYJ,UAAU,CAAC,IAAIC;IACjC,IAAMd,WAAWC,IAAAA,wBAAW;IAC5B,IAAMiB,UAAUL,UACZ,4CACKC;QACHD,SAAAA;QACAM,mBAAmB;QACnBC,WAAWpB,aAAaE,kBAAQ,CAACmB,GAAG;QACpCC,YAAY;SAEd,CAAC;IAEL,qBACE,qBAACC,4BAAa,8CACRN;QACJO,eAAeC,IAAAA,gBAAU,4BAEvBjC,mBAAmBkC,cAAc,CAAC1B,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO;QAG/BiC,IAAAA,kBAAY,EAACf,yBAAW,qBAACH;QAAIJ,SAAS;OAAyCO,uBAChF,qBAACG,yDACKG;QACJb,WAAWoB,IAAAA,gBAAU,gCAEnB,CAACb,UAAUZ,aAAaE,kBAAQ,CAAC0B,OAAO;QAGzCD,IAAAA,kBAAY,EAAChB,yBACZ,qBAACkB,kBAAQ;QAACxB,SAAS;OAAyCM,uBAE9D,qBAACF;QAAIJ,SAAS;qBACZ,qBAACT;QAAoBC,WAAW8B,IAAAA,kBAAY,EAAChB;QAASb,WAAW6B,IAAAA,kBAAY,EAACf;OAC3Eb,WAEF4B,IAAAA,kBAAY,EAACjB,wBACZ,qBAACD;QAAIJ,SAAS;OAAwCK,SAGzDiB,IAAAA,kBAAY,EAACf,yBAAW,qBAACH;QAAIJ,SAAS;;AAI/C"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PanelHeaderContextProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     opened: boolean;
     onClose: VoidFunction;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport styles from './PanelHeaderContext.module.css';\n\nconst sizeXClassNames = {\n  none: styles['PanelHeaderContext--sizeX-none'],\n  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.REGULAR]: styles['PanelHeaderContext--sizeX-regular'],\n};\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext\n */\nexport const PanelHeaderContext = ({\n  children,\n  onClose,\n  opened = false,\n  className,\n  ...restProps\n}: PanelHeaderContextProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { sizeX = 'none' } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  useScrollLock(platform !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        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","SizeType","COMPACT","REGULAR","children","onClose","opened","className","restProps","document","useDOM","platform","usePlatform","React","useState","visible","setVisible","closing","useAdaptivity","sizeX","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","Platform","VKCOM","useGlobalEventListener","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","FixedLayout","classNames","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;;+DA5BU;oBACI;6BACG;sCACS;2BACX;0BACD;0BACF;mBACF;wBACE;yCACiB;6BACZ;2BACF;IAGJ;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;sBADkB,MAErBC,oBAAQ,CAACC,OAAO,+DAFK,MAGrBD,oBAAQ,CAACE,OAAO,4CAHK;AAcjB,IAAML,qBAAqB;QAChCM,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaC,IAAAA,WAAM,IAAnBD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA8BC,qCAAAA,OAAMC,QAAQ,CAACR,aAAtCS,UAAuBF,oBAAdG,aAAcH;IAC9B,IAAMI,UAAUF,WAAW,CAACT;IAC5B,IAA2BY,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,aAAaP,OAAMQ,MAAM,CAAiB;IAEhDC,IAAAA,oDAAyB,EAAC;QACxBhB,UAAUU,WAAW;IACvB,GAAG;QAACV;KAAO;IAEXiB,IAAAA,4BAAa,EAACZ,aAAaa,kBAAQ,CAACC,KAAK,IAAInB;IAE7C,+BAA+B;IAC/BoB,IAAAA,8CAAsB,EACpBjB,UACA,SACAH,UACE,CAACW,WACA,SAACU;QACA,IAAIP,WAAWQ,OAAO,IAAI,CAACR,WAAWQ,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrB1B;QACF;IACF,GACF;QAAE2B,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMjB,WAAW;;IACxC,IAAMkB,oBAAoBC,IAAAA,sBAAU,EAACF,gBAAgB;IACrDpB,OAAMuB,SAAS,CACb;eAAOnB,UAAUiB,kBAAkBG,GAAG,KAAKH,kBAAkBI,KAAK;OAClE;QAACJ;QAAmBjB;KAAQ;IAG9B,qBACE,qBAACsB,wBAAW,8CACN/B;QACJD,WAAWiC,IAAAA,gBAAU,4BAEnB7B,aAAaa,kBAAQ,CAACiB,GAAG,mCACzBnC,4CACAW,8CACAlB,eAAe,CAACoB,MAAM,EACtBZ;QAEFmC,UAAS;QAER3B,yBACC,qBAAC4B;QACCC,SAAS,SAACjB;YACRA,MAAMI,eAAe;YACrB1B;QACF;QACAE,SAAS;sBAGb,qBAACoC;QACCpC,SAAS;QACTsC,KAAKzB;QACLa,gBAAgBhB,UAAUgB,iBAAiBa;OAE1C/B,yBAAW,qBAAC4B;QAAIpC,SAAS;OAA0CH;AAI5E"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { 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  [SizeType.COMPACT]: styles['PanelHeaderContext--sizeX-compact'],\n  [SizeType.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 !== Platform.VKCOM && opened);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    'click',\n    opened &&\n      !closing &&\n      ((event) => {\n        if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n          event.stopPropagation();\n          onClose();\n        }\n      }),\n    { capture: true },\n  );\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(\n    () => (closing ? animationFallback.set() : animationFallback.clear()),\n    [animationFallback, closing],\n  );\n\n  return (\n    <FixedLayout\n      {...restProps}\n      className={classNames(\n        styles['PanelHeaderContext'],\n        platform === Platform.IOS && styles['PanelHeaderContext--ios'],\n        opened && styles['PanelHeaderContext--opened'],\n        closing && styles['PanelHeaderContext--closing'],\n        sizeXClassNames[sizeX],\n        className,\n      )}\n      vertical=\"top\"\n    >\n      {visible && (\n        <div\n          onClick={(event) => {\n            event.stopPropagation();\n            onClose();\n          }}\n          className={styles['PanelHeaderContext__fade']}\n        />\n      )}\n      <div\n        className={styles['PanelHeaderContext__in']}\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        {visible && <div className={styles['PanelHeaderContext__content']}>{children}</div>}\n      </div>\n    </FixedLayout>\n  );\n};\n"],"names":["PanelHeaderContext","sizeXClassNames","none","SizeType","COMPACT","REGULAR","children","onClose","opened","className","restProps","document","useDOM","platform","usePlatform","React","useState","visible","setVisible","closing","useAdaptivity","sizeX","elementRef","useRef","useIsomorphicLayoutEffect","useScrollLock","Platform","VKCOM","useGlobalEventListener","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useTimeout","useEffect","set","clear","FixedLayout","classNames","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;;;+DA7BU;oBACI;6BACG;sCACS;2BACX;0BACD;0BACF;mBACF;wBACE;yCACiB;6BAEZ;2BACF;IAGJ;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;sBADkB,MAErBC,oBAAQ,CAACC,OAAO,+DAFK,MAGrBD,oBAAQ,CAACE,OAAO,4CAHK;AAcjB,IAAML,qBAAqB;QAChCM,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaC,IAAAA,WAAM,IAAnBD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA8BC,qCAAAA,OAAMC,QAAQ,CAACR,aAAtCS,UAAuBF,oBAAdG,aAAcH;IAC9B,IAAMI,UAAUF,WAAW,CAACT;IAC5B,IAA2BY,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,aAAaP,OAAMQ,MAAM,CAAiB;IAEhDC,IAAAA,oDAAyB,EAAC;QACxBhB,UAAUU,WAAW;IACvB,GAAG;QAACV;KAAO;IAEXiB,IAAAA,4BAAa,EAACZ,aAAaa,kBAAQ,CAACC,KAAK,IAAInB;IAE7C,+BAA+B;IAC/BoB,IAAAA,8CAAsB,EACpBjB,UACA,SACAH,UACE,CAACW,WACA,SAACU;QACA,IAAIP,WAAWQ,OAAO,IAAI,CAACR,WAAWQ,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrB1B;QACF;IACF,GACF;QAAE2B,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMjB,WAAW;;IACxC,IAAMkB,oBAAoBC,IAAAA,sBAAU,EAACF,gBAAgB;IACrDpB,OAAMuB,SAAS,CACb;eAAOnB,UAAUiB,kBAAkBG,GAAG,KAAKH,kBAAkBI,KAAK;OAClE;QAACJ;QAAmBjB;KAAQ;IAG9B,qBACE,qBAACsB,wBAAW,8CACN/B;QACJD,WAAWiC,IAAAA,gBAAU,4BAEnB7B,aAAaa,kBAAQ,CAACiB,GAAG,mCACzBnC,4CACAW,8CACAlB,eAAe,CAACoB,MAAM,EACtBZ;QAEFmC,UAAS;QAER3B,yBACC,qBAAC4B;QACCC,SAAS,SAACjB;YACRA,MAAMI,eAAe;YACrB1B;QACF;QACAE,SAAS;sBAGb,qBAACoC;QACCpC,SAAS;QACTsC,KAAKzB;QACLa,gBAAgBhB,UAAUgB,iBAAiBa;OAE1C/B,yBAAW,qBAAC4B;QAAIpC,SAAS;OAA0CH;AAI5E"}

package/dist/cjs/components/Placeholder/Placeholder.d.ts

@@ -1,6 +1,20 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    /**
+     * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
+     */
+    stretched?: boolean;
+    /**
+     * Добавляет отступы к компоненту
+     */
+    withPadding?: boolean;
+}
+export type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export interface PlaceholderProps extends PlaceholderContainerProps {
     /**
      * Иконка
      */
@@ -13,16 +27,15 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>,
      * Кнопка действия
      */
     action?: React.ReactNode;
-    /**
-     * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
-     */
-    stretched?: boolean;
-    /**
-     * Добавляет отступы к компоненту
-     */
-    withPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, withPadding, ...restProps }: PlaceholderProps) => React.JSX.Element;
+export declare const Placeholder: {
+    ({ icon, header, children, action, withPadding, ...restProps }: PlaceholderProps): React.JSX.Element;
+    Container: ({ stretched, withPadding, ...restProps }: PlaceholderContainerProps) => React.JSX.Element;
+    Icon: (props: PlaceholderIconProps) => React.JSX.Element;
+    Header: ({ className, ...restProps }: PlaceholderHeaderProps) => React.JSX.Element;
+    Text: ({ className, ...restProps }: PlaceholderTextProps) => React.JSX.Element;
+    Actions: (props: PlaceholderActionsProps) => React.JSX.Element;
+};

package/dist/cjs/components/Placeholder/Placeholder.js

@@ -10,38 +10,66 @@ Object.defineProperty(exports, "Placeholder", {
 });
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _Headline = require("../Typography/Headline/Headline");
 var _Title = require("../Typography/Title/Title");
-var Placeholder = function(_param) /*#__PURE__*/ {
-    var icon = _param.icon, header = _param.header, action = _param.action, children = _param.children, stretched = _param.stretched, getRootRef = _param.getRootRef, className = _param.className, _param_withPadding = _param.withPadding, withPadding = _param_withPadding === void 0 ? true : _param_withPadding, restProps = _object_without_properties._(_param, [
-        "icon",
-        "header",
-        "action",
-        "children",
+var PlaceholderContainer = function(_param) /*#__PURE__*/ {
+    var stretched = _param.stretched, _param_withPadding = _param.withPadding, withPadding = _param_withPadding === void 0 ? true : _param_withPadding, restProps = _object_without_properties._(_param, [
         "stretched",
-        "getRootRef",
-        "className",
         "withPadding"
     ]);
-    return _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", withPadding && "vkuiPlaceholder--withPadding", className)
-    }), (0, _vkjs.hasReactNode)(icon) && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiPlaceholder__icon"
-    }, icon), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_Title.Title, {
+    return _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: (0, _vkjs.classNames)("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", withPadding && "vkuiPlaceholder--withPadding")
+    }, restProps));
+};
+var PlaceholderIcon = function(props) {
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: "vkuiPlaceholder__icon"
+    }, props));
+};
+var PlaceholderHeader = function(_param) /*#__PURE__*/ {
+    var className = _param.className, restProps = _object_without_properties._(_param, [
+        "className"
+    ]);
+    return _react.createElement(_Title.Title, _object_spread._({
         level: "2",
         weight: "2",
-        className: "vkuiPlaceholder__header"
-    }, header), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/ _react.createElement(_Headline.Headline, {
+        className: (0, _vkjs.classNames)(className, "vkuiPlaceholder__header")
+    }, restProps));
+};
+var PlaceholderText = function(_param) /*#__PURE__*/ {
+    var className = _param.className, restProps = _object_without_properties._(_param, [
+        "className"
+    ]);
+    return _react.createElement(_Headline.Headline, _object_spread._({
         weight: "3",
-        className: "vkuiPlaceholder__text"
-    }, children), (0, _vkjs.hasReactNode)(action) && /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiPlaceholder__action"
-    }, action));
+        className: (0, _vkjs.classNames)(className, "vkuiPlaceholder__text")
+    }, restProps));
+};
+var PlaceholderActions = function(props) {
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: "vkuiPlaceholder__action"
+    }, props));
+};
+var Placeholder = function(_param) /*#__PURE__*/ {
+    var icon = _param.icon, header = _param.header, children = _param.children, action = _param.action, _param_withPadding = _param.withPadding, withPadding = _param_withPadding === void 0 ? true : _param_withPadding, restProps = _object_without_properties._(_param, [
+        "icon",
+        "header",
+        "children",
+        "action",
+        "withPadding"
+    ]);
+    return _react.createElement(PlaceholderContainer, _object_spread._({
+        withPadding: withPadding
+    }, restProps), (0, _vkjs.hasReactNode)(icon) && /*#__PURE__*/ _react.createElement(PlaceholderIcon, null, icon), (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(PlaceholderHeader, null, header), (0, _vkjs.hasReactNode)(children) && /*#__PURE__*/ _react.createElement(PlaceholderText, null, children), (0, _vkjs.hasReactNode)(action) && /*#__PURE__*/ _react.createElement(PlaceholderActions, null, action));
 };
+Placeholder.Container = PlaceholderContainer;
+Placeholder.Icon = PlaceholderIcon;
+Placeholder.Header = PlaceholderHeader;
+Placeholder.Text = PlaceholderText;
+Placeholder.Actions = PlaceholderActions;
 
 //# sourceMappingURL=Placeholder.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\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  stretched?: boolean;\n  /**\n   * Добавляет отступы к компоненту\n   */\n  withPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  action,\n  children,\n  stretched,\n  getRootRef,\n  className,\n  withPadding = true,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      withPadding && styles['Placeholder--withPadding'],\n      className,\n    )}\n  >\n    {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n    {hasReactNode(header) && (\n      <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n        {header}\n      </Title>\n    )}\n    {hasReactNode(children) && (\n      <Headline weight=\"3\" className={styles['Placeholder__text']}>\n        {children}\n      </Headline>\n    )}\n    {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n  </div>\n);\n"],"names":["Placeholder","icon","header","action","children","stretched","getRootRef","className","withPadding","restProps","div","ref","classNames","hasReactNode","Title","level","weight","Headline"],"mappings":";;;;+BAmCaA;;;eAAAA;;;;;;;+DAnCU;oBACkB;wBAEhB;qBACH;AA+Bf,IAAMA,cAAc;QACzBC,cAAAA,MACAC,gBAAAA,QACAC,gBAAAA,QACAC,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACAC,mBAAAA,uCACAC,aAAAA,8CAAc,2BACXC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;WAGA,qBAACE,mDACKD;QACJE,KAAKL;QACLC,WAAWK,IAAAA,gBAAU,qBAEnBP,2CACAG,+CACAD;QAGDM,IAAAA,kBAAY,EAACZ,uBAAS,qBAACS;QAAIH,SAAS;OAAgCN,OACpEY,IAAAA,kBAAY,EAACX,yBACZ,qBAACY,YAAK;QAACC,OAAM;QAAIC,QAAO;QAAIT,SAAS;OAClCL,SAGJW,IAAAA,kBAAY,EAACT,2BACZ,qBAACa,kBAAQ;QAACD,QAAO;QAAIT,SAAS;OAC3BH,WAGJS,IAAAA,kBAAY,EAACV,yBAAW,qBAACO;QAAIH,SAAS;OAAkCJ;AACtE"}
+{"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  withPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  withPadding = true,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      withPadding && 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  withPadding = true,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer withPadding={withPadding} {...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","withPadding","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;;;;;;+DArFU;oBACkB;6BAEX;wBACL;qBACH;AActB,IAAMC,uBAAuB;QAC3BC,mBAAAA,uCACAC,aAAAA,8CAAc,2BACXC;QAFHF;QACAC;;WAGA,qBAACE,4BAAa;QACZC,eAAeC,IAAAA,gBAAU,qBAEvBL,2CACAC;OAEEC;AACL;AAKH,IAAMI,kBAAkB,SAACC;yBACvB,qBAACJ,4BAAa;QAACC,aAAa;OAAmCG;;AAKjE,IAAMC,oBAAoB;QAAGC,mBAAAA,WAAcP;QAAdO;;WAC3B,qBAACC,YAAK;QACJC,OAAM;QACNC,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;AACL;AAKH,IAAMW,kBAAkB;QAAGJ,mBAAAA,WAAcP;QAAdO;;WACzB,qBAACK,kBAAQ;QACPF,QAAO;QACPH,WAAWJ,IAAAA,gBAAU,EAACI;OAClBP;AACL;AAKH,IAAMa,qBAAqB,SAACR;yBAC1B,qBAACJ,4BAAa;QAACC,aAAa;OAAqCG;;AAqB5D,IAAMT,cAAc;QACzBkB,cAAAA,MACAC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,oCACAlB,aAAAA,8CAAc,2BACXC;QALHc;QACAC;QACAC;QACAC;QACAlB;;WAGA,qBAACF;QAAqBE,aAAaA;OAAiBC,YACjDkB,IAAAA,kBAAY,EAACJ,uBAAS,qBAACV,uBAAiBU,OACxCI,IAAAA,kBAAY,EAACH,yBAAW,qBAACT,yBAAmBS,SAC5CG,IAAAA,kBAAY,EAACF,2BAAa,qBAACL,uBAAiBK,WAC5CE,IAAAA,kBAAY,EAACD,yBAAW,qBAACJ,0BAAoBI;AAC1B;AAGxBrB,YAAYuB,SAAS,GAAGtB;AACxBD,YAAYwB,IAAI,GAAGhB;AACnBR,YAAYyB,MAAM,GAAGf;AACrBV,YAAY0B,IAAI,GAAGX;AACnBf,YAAY2B,OAAO,GAAGV"}

package/dist/cjs/components/PopoutRoot/PopoutRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => React.JSX.Element;
+export declare const PopoutRoot: ({ popout, modal, children, ...restProps }: PopoutRootProps) => React.JSX.Element;

package/dist/cjs/components/PopoutRoot/PopoutRoot.js

@@ -13,28 +13,24 @@ var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _dom = require("../../lib/dom");
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
-var PopoutRootPopout = function(param) {
-    var children = param.children;
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiPopoutRoot__popout")
-    }, children);
+var _RootComponent = require("../RootComponent/RootComponent");
+var PopoutRootPopout = function(props) {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
+        className: "vkuiPopoutRoot__popout"
+    }, props));
 };
-var PopoutRootModal = function(param) {
-    var children = param.children;
-    return /*#__PURE__*/ _react.createElement("div", {
+var PopoutRootModal = function(props) {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread._({
         className: "vkuiPopoutRoot__modal"
-    }, children);
+    }, props));
 };
 var PopoutRoot = function(_param) {
-    var popout = _param.popout, modal = _param.modal, children = _param.children, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties._(_param, [
+    var popout = _param.popout, modal = _param.modal, children = _param.children, restProps = _object_without_properties._(_param, [
         "popout",
         "modal",
-        "children",
-        "getRootRef",
-        "className"
+        "children"
     ]);
     var document = (0, _dom.useDOM)().document;
     _react.useEffect(function() {
@@ -43,9 +39,8 @@ var PopoutRoot = function(_param) {
         document,
         popout
     ]);
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPopoutRoot", className),
-        ref: getRootRef
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: "vkuiPopoutRoot"
     }), children, /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, null, !!popout && /*#__PURE__*/ _react.createElement(PopoutRootPopout, null, popout), !!modal && /*#__PURE__*/ _react.createElement(PopoutRootModal, null, modal)));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  return <div className={classNames(styles['PopoutRoot__popout'])}>{children}</div>;\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"names":["PopoutRoot","PopoutRootPopout","children","div","className","classNames","PopoutRootModal","popout","modal","getRootRef","restProps","document","useDOM","React","useEffect","blurActiveElement","ref","AppRootPortal"],"mappings":";;;;+BA8BaA;;;eAAAA;;;;;;;+DA9BU;oBACI;mBACe;6BAEZ;AAO9B,IAAMC,mBAAmB;QAAGC,iBAAAA;IAC1B,qBAAO,qBAACC;QAAIC,WAAWC,IAAAA,gBAAU;OAAiCH;AACpE;AAMA,IAAMI,kBAAkB;QAAGJ,iBAAAA;IACzB,qBAAO,qBAACC;QAAIC,SAAS;OAAgCF;AACvD;AASO,IAAMF,aAAa;QACxBO,gBAAAA,QACAC,eAAAA,OACAN,kBAAAA,UACAO,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAN;QACAO;QACAL;;IAGA,IAAM,AAAEO,WAAaC,IAAAA,WAAM,IAAnBD;IAERE,OAAMC,SAAS,CAAC;QACdP,UAAUQ,IAAAA,sBAAiB,EAACJ;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,qBAACJ,mDAAQO;QAAWN,WAAWC,IAAAA,gBAAU,oBAAuBD;QAAYY,KAAKP;QAC9EP,wBACD,qBAACe,4BAAa,QACX,CAAC,CAACV,wBAAU,qBAACN,wBAAkBM,SAC/B,CAAC,CAACC,uBAAS,qBAACF,uBAAiBE;AAItC"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\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\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = (props: PopoutRootPopoutProps) => (\n  <div className={styles['PopoutRoot__popout']} {...props} />\n);\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = (props: PopoutRootModalProps) => (\n  <div className={styles['PopoutRoot__modal']} {...props} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\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","PopoutRootPopout","props","div","className","PopoutRootModal","popout","modal","children","restProps","document","useDOM","React","useEffect","blurActiveElement","RootComponent","baseClassName","AppRootPortal"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;+DA5BU;mBACmB;6BAEZ;6BACA;AAO9B,IAAMC,mBAAmB,SAACC;yBACxB,qBAACC;QAAIC,SAAS;OAAoCF;;AAOpD,IAAMG,kBAAkB,SAACH;yBACvB,qBAACC;QAAIC,SAAS;OAAmCF;;AAQ5C,IAAMF,aAAa;QAAGM,gBAAAA,QAAQC,eAAAA,OAAOC,kBAAAA,UAAaC;QAA5BH;QAAQC;QAAOC;;IAC1C,IAAM,AAAEE,WAAaC,IAAAA,WAAM,IAAnBD;IAERE,OAAMC,SAAS,CAAC;QACdP,UAAUQ,IAAAA,sBAAiB,EAACJ;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,qBAACS,4BAAa,8CAAKN;QAAWO,aAAa;QACxCR,wBACD,qBAACS,4BAAa,QACX,CAAC,CAACX,wBAAU,qBAACL,wBAAkBK,SAC/B,CAAC,CAACC,uBAAS,qBAACF,uBAAiBE;AAItC"}

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     hasMask?: boolean;
     fixed?: boolean;
     alignY?: 'top' | 'center' | 'bottom';
@@ -9,4 +10,4 @@ export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
-export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, className, ...restProps }: PopoutWrapperProps) => React.JSX.Element;
+export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, ...restProps }: PopoutWrapperProps) => React.JSX.Element;

package/dist/cjs/components/PopoutWrapper/PopoutWrapper.js

@@ -20,20 +20,29 @@ var _usePlatform = require("../../hooks/usePlatform");
 var _useTimeout = require("../../hooks/useTimeout");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
+var _RootComponent = require("../RootComponent/RootComponent");
+var stylesAlignX = {
+    center: "vkuiPopoutWrapper--alignX-center",
+    left: "vkuiPopoutWrapper--alignX-left",
+    right: "vkuiPopoutWrapper--alignX-right"
+};
+var stylesAlignY = {
+    center: "vkuiPopoutWrapper--alignY-center",
+    top: "vkuiPopoutWrapper--alignY-top",
+    bottom: "vkuiPopoutWrapper--alignY-bottom"
+};
 var PopoutWrapper = function(_param) {
-    var _param_alignY = _param.alignY, alignY = _param_alignY === void 0 ? "center" : _param_alignY, _param_alignX = _param.alignX, alignX = _param_alignX === void 0 ? "center" : _param_alignX, _param_closing = _param.closing, closing = _param_closing === void 0 ? false : _param_closing, _param_hasMask = _param.hasMask, hasMask = _param_hasMask === void 0 ? true : _param_hasMask, _param_fixed = _param.fixed, fixed = _param_fixed === void 0 ? true : _param_fixed, children = _param.children, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties._(_param, [
+    var _param_alignY = _param.alignY, alignY = _param_alignY === void 0 ? "center" : _param_alignY, _param_alignX = _param.alignX, alignX = _param_alignX === void 0 ? "center" : _param_alignX, _param_closing = _param.closing, closing = _param_closing === void 0 ? false : _param_closing, _param_hasMask = _param.hasMask, hasMask = _param_hasMask === void 0 ? true : _param_hasMask, _param_fixed = _param.fixed, fixed = _param_fixed === void 0 ? true : _param_fixed, children = _param.children, onClick = _param.onClick, restProps = _object_without_properties._(_param, [
         "alignY",
         "alignX",
         "closing",
         "hasMask",
         "fixed",
         "children",
-        "onClick",
-        "className"
+        "onClick"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var _React_useState = _sliced_to_array._(_react.useState(!hasMask), 2), opened = _React_useState[0], setOpened = _React_useState[1];
-    var elRef = _react.useRef(null);
     var onFadeInEnd = function(e) {
         if (!e || e.animationName === "vkuianimation-full-fade-in") {
             setOpened(true);
@@ -52,18 +61,9 @@ var PopoutWrapper = function(_param) {
     }, {
         passive: false
     });
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPopoutWrapper", {
-            center: "vkuiPopoutWrapper--alignY-center",
-            top: "vkuiPopoutWrapper--alignY-top",
-            bottom: "vkuiPopoutWrapper--alignY-bottom"
-        }[alignY], {
-            center: "vkuiPopoutWrapper--alignX-center",
-            left: "vkuiPopoutWrapper--alignX-left",
-            right: "vkuiPopoutWrapper--alignX-right"
-        }[alignX], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", hasMask && "vkuiPopoutWrapper--masked", className),
-        onAnimationEnd: opened ? undefined : onFadeInEnd,
-        ref: elRef
+    return /*#__PURE__*/ _react.createElement(_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", hasMask && "vkuiPopoutWrapper--masked"),
+        onAnimationEnd: opened ? undefined : onFadeInEnd
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiPopoutWrapper__container"
     }, /*#__PURE__*/ _react.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;+DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,gBAAgB;+BAC3BC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,qCAAAA,OAAMC,QAAQ,CAAC,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaR,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAC1FZ,OAAMa,SAAS,CAAC;QACd,CAACX,UAAUO,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,mDACKvB;QACJD,WAAWyB,IAAAA,gBAAU,uBAEnB;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB;QACrCuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { 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  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\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 === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <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        hasMask && 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","hasMask","fixed","children","onClick","restProps","platform","usePlatform","React","useState","opened","setOpened","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","RootComponent","baseClassName","classNames","onAnimationEnd","undefined","div","className"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;+DAlCU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;6BAEK;AAG9B,IAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,IAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AAaO,IAAMP,gBAAgB;+BAC3BQ,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,qCAAAA,OAAMC,QAAQ,CAAC,CAACR,cAArCS,SAAqBF,oBAAbG,YAAaH;IAE5B,IAAMI,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DH,UAAU;QACZ;IACF;IACA,IAAMI,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaN,aAAaW,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAC1FV,OAAMW,SAAS,CAAC;QACd,CAACT,UAAUK,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBL;KAAO;IAEpC,IAAM,AAAEW,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,4BAAa,8CACRrB;QACJsB,eAAeC,IAAAA,gBAAU,uBAEvBjC,YAAY,CAACG,OAAO,EACpBP,YAAY,CAACQ,OAAO,EACpBC,yCACAU,uCACAR,qCACAD;QAEF4B,gBAAgBnB,SAASoB,YAAYlB;sBAErC,qBAACmB;QAAIC,SAAS;qBACZ,qBAACD;QAAIC,SAAS;QAAoC5B,SAASA;sBAC3D,qBAAC2B;QAAIC,SAAS;OAAqC7B;AAI3D"}

package/dist/cjs/components/Popper/Popper.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
-import type { HasRef } from '../../types';
+import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
 import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
 export interface PopperRenderContentProps {
     className: string;
 }
-export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
+export interface PopperCommonProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
@@ -78,6 +78,10 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
     onPlacementChange?(data: {
         placement?: Placement;
     }): void;
+    /**
+     * Принудительно скрывает компонет если целевой элемент исчез
+     */
+    hideWhenReferenceHidden?: boolean;
 }
 export interface PopperProps extends PopperCommonProps {
     targetRef: React.RefObject<HTMLElement>;
@@ -85,4 +89,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowHeight, arrowPadding, arrowClassName, ArrowIcon, sameWidth, offsetDistance, offsetSkidding, forcePortal, portalRoot, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => React.JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowHeight, arrowPadding, arrowClassName, ArrowIcon, sameWidth, offsetDistance, offsetSkidding, forcePortal, portalRoot, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, getRootRef, hideWhenReferenceHidden, ...restProps }: PopperProps) => React.JSX.Element;

package/dist/cjs/components/Popper/Popper.js

@@ -15,14 +15,14 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
 var _floating = require("../../lib/floating");
 var _AppRootPortal = require("../AppRoot/AppRootPortal");
 var _DefaultIcon = require("../PopperArrow/DefaultIcon");
 var _PopperArrow = require("../PopperArrow/PopperArrow");
+var _RootComponent = require("../RootComponent/RootComponent");
 var Popper = function(_param) {
-    var targetRef = _param.targetRef, children = _param.children, getRef = _param.getRef, tmp = _param.placement, placementProp = tmp === void 0 ? "bottom-start" : tmp, onPlacementChange = _param.onPlacementChange, arrow = _param.arrow, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? _DefaultIcon.DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? _DefaultIcon.DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? _DefaultIcon.DefaultIcon : _param_ArrowIcon, sameWidth = _param.sameWidth, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, _param_offsetSkidding = _param.offsetSkidding, offsetSkidding = _param_offsetSkidding === void 0 ? 0 : _param_offsetSkidding, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, portalRoot = _param.portalRoot, _param_autoUpdateOnTargetResize = _param.autoUpdateOnTargetResize, autoUpdateOnTargetResize = _param_autoUpdateOnTargetResize === void 0 ? false : _param_autoUpdateOnTargetResize, styleProp = _param.style, customMiddlewares = _param.customMiddlewares, renderContent = _param.renderContent, className = _param.className, restProps = _object_without_properties._(_param, [
+    var targetRef = _param.targetRef, children = _param.children, getRef = _param.getRef, tmp = _param.placement, placementProp = tmp === void 0 ? "bottom-start" : tmp, onPlacementChange = _param.onPlacementChange, arrow = _param.arrow, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? _DefaultIcon.DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? _DefaultIcon.DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? _DefaultIcon.DefaultIcon : _param_ArrowIcon, sameWidth = _param.sameWidth, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, _param_offsetSkidding = _param.offsetSkidding, offsetSkidding = _param_offsetSkidding === void 0 ? 0 : _param_offsetSkidding, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, portalRoot = _param.portalRoot, _param_autoUpdateOnTargetResize = _param.autoUpdateOnTargetResize, autoUpdateOnTargetResize = _param_autoUpdateOnTargetResize === void 0 ? false : _param_autoUpdateOnTargetResize, styleProp = _param.style, customMiddlewares = _param.customMiddlewares, renderContent = _param.renderContent, getRootRef = _param.getRootRef, hideWhenReferenceHidden = _param.hideWhenReferenceHidden, restProps = _object_without_properties._(_param, [
         "targetRef",
         "children",
         "getRef",
@@ -42,8 +42,10 @@ var Popper = function(_param) {
         "style",
         "customMiddlewares",
         "renderContent",
-        "className"
+        "getRootRef",
+        "hideWhenReferenceHidden"
     ]);
+    var _hide;
     var _React_useState = _sliced_to_array._(_react.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
     var isNotAutoPlacement = (0, _floating.checkIsNotAutoPlacement)(placementProp);
     var memoizedMiddlewares = _react.useMemo(function() {
@@ -83,6 +85,9 @@ var Popper = function(_param) {
                 padding: arrowPadding
             }));
         }
+        if (hideWhenReferenceHidden) {
+            middlewares.push((0, _floating.hideMiddleware)());
+        }
         return middlewares;
     }, [
         offsetSkidding,
@@ -94,7 +99,8 @@ var Popper = function(_param) {
         isNotAutoPlacement,
         sameWidth,
         customMiddlewares,
-        placementProp
+        placementProp,
+        hideWhenReferenceHidden
     ]);
     var _useFloating = (0, _floating.useFloating)({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -109,8 +115,9 @@ var Popper = function(_param) {
                 }
             ]));
         }
-    }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, floatingPositionStrategy = _useFloating.strategy, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow;
-    var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef);
+    }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, floatingPositionStrategy = _useFloating.strategy, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow, hide = _useFloating_middlewareData.hide;
+    // TODO [>=6]: убрать getRef
+    var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef, getRootRef);
     _react.useEffect(function() {
         refs.setReference(targetRef.current);
     }, [
@@ -127,10 +134,12 @@ var Popper = function(_param) {
         onPlacementChange,
         resolvedPlacement
     ]);
-    var dropdown = /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPopper", className),
-        ref: handleRootRef,
-        style: _object_spread._({}, styleProp, (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
+    var dropdown = /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: "vkuiPopper",
+        getRootRef: handleRootRef,
+        style: _object_spread._({}, styleProp, (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined), ((_hide = hide) === null || _hide === void 0 ? void 0 : _hide.referenceHidden) && {
+            visibility: "hidden"
+        })
     }), arrow && /*#__PURE__*/ _react.createElement(_PopperArrow.PopperArrow, {
         coords: arrowCoords,
         placement: resolvedPlacement,