@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/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":["React","classNames","hasReactNode","usePlatform","Platform","Tappable","Footnote","Headline","Text","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","className","Component","weight","div","PanelHeaderContent","style","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","hasOwnProperty","ANDROID"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB;QAAGC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWd;IACjB,IAAIc,aAAab,SAASc,KAAK,EAAE;QAC/B,qBACE,oBAACV;YAAKW,SAAS;YAA8CC,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACR;QAASY,SAAS;QAA8CC,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,SAAS;OAA8CH;AAEhE;AAEA;;CAEC,GACD,OAAO,IAAMO,qBAAqB;QAChCJ,mBAAAA,WACAK,eAAAA,OACAC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAX,kBAAAA,UACAY,iBAAAA,SACGC;QAPHV;QACAK;QACAC;QACAC;QACAC;QACAX;QACAY;;IAGA,IAAME,cAAcF,UAAUvB,WAAW;IACzC,IAAM0B,YAAYH,UAAU,CAAC,IAAIC;IACjC,IAAMZ,WAAWd;IACjB,IAAM6B,UAAUJ,UACZ,wCACKC;QACHD,SAAAA;QACAK,mBAAmB;QACnBC,WAAWjB,aAAab,SAAS+B,GAAG;QACpCC,YAAY;SAEd,CAAC;IAEL,qBACE,oBAACd,+CACKS;QACJP,OAAOA;QACPL,WAAWlB,qCAETQ,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BQ;QAGDjB,aAAayB,yBAAW,oBAACL;QAAIH,SAAS;OAAyCQ,uBAChF,oBAACG,qDACKE;QACJb,WAAWlB,yCAET,CAAC0B,UAAUV,aAAab,SAASkC,OAAO;QAGzCpC,aAAawB,yBACZ,oBAACpB;QAASa,SAAS;OAAyCO,uBAE9D,oBAACJ;QAAIH,SAAS;qBACZ,oBAACN;QAAoBC,WAAWZ,aAAawB;QAASX,WAAWb,aAAayB;OAC3EX,WAEFd,aAAauB,wBACZ,oBAACH;QAAIH,SAAS;OAAwCM,SAGzDvB,aAAayB,yBAAW,oBAACL;QAAIH,SAAS;;AAI/C,EAAE"}
+{"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":["React","classNames","hasReactNode","usePlatform","Platform","RootComponent","Tappable","Footnote","Headline","Text","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","className","Component","weight","div","PanelHeaderContent","aside","status","before","onClick","restProps","InComponent","rootProps","inProps","activeEffectDelay","hasActive","IOS","activeMode","baseClassName","hasOwnProperty","ANDROID"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAG/C,IAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAaA,IAAMC,sBAAsB;QAAGC,kBAAAA,WAAWC,kBAAAA,WAAWC,iBAAAA;IACnD,IAAMC,WAAWf;IACjB,IAAIe,aAAad,SAASe,KAAK,EAAE;QAC/B,qBACE,oBAACV;YAAKW,SAAS;YAA8CC,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACR;QAASY,SAAS;QAA8CC,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,SAAS;OAA8CH;AAEhE;AAEA;;CAEC,GACD,OAAO,IAAMO,qBAAqB;QAChCC,eAAAA,OACAC,gBAAAA,QACAC,gBAAAA,QACAV,kBAAAA,UACAW,iBAAAA,SACGC;QALHJ;QACAC;QACAC;QACAV;QACAW;;IAGA,IAAME,cAAcF,UAAUtB,WAAW;IACzC,IAAMyB,YAAYH,UAAU,CAAC,IAAIC;IACjC,IAAMX,WAAWf;IACjB,IAAM6B,UAAUJ,UACZ,wCACKC;QACHD,SAAAA;QACAK,mBAAmB;QACnBC,WAAWhB,aAAad,SAAS+B,GAAG;QACpCC,YAAY;SAEd,CAAC;IAEL,qBACE,oBAAC/B,uDACK0B;QACJM,eAAepC,qCAEbS,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO;QAG/BV,aAAayB,yBAAW,oBAACJ;QAAIH,SAAS;OAAyCO,uBAChF,oBAACG,qDACKE;QACJZ,WAAWnB,yCAET,CAAC0B,UAAUT,aAAad,SAASmC,OAAO;QAGzCrC,aAAawB,yBACZ,oBAACnB;QAASa,SAAS;OAAyCM,uBAE9D,oBAACH;QAAIH,SAAS;qBACZ,oBAACN;QAAoBC,WAAWb,aAAawB;QAASV,WAAWd,aAAayB;OAC3EV,WAEFf,aAAauB,wBACZ,oBAACF;QAAIH,SAAS;OAAwCK,SAGzDvB,aAAayB,yBAAW,oBAACJ;QAAIH,SAAS;;AAI/C,EAAE"}

package/dist/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/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":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;IAGjC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,OAAO,6DAFK,MAGrBR,SAASS,OAAO,4CAHK;AAWxB;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAChCC,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaf,SAAbe;IACR,IAAMC,WAAWnB;IACjB,IAA8BJ,mCAAAA,MAAMwB,QAAQ,CAACL,aAAtCM,UAAuBzB,oBAAd0B,aAAc1B;IAC9B,IAAM2B,UAAUF,WAAW,CAACN;IAC5B,IAA2BjB,iBAAAA,wCAAAA,eAAnB0B,OAAAA,0CAAQ;IAChB,IAAMC,aAAa7B,MAAM8B,MAAM,CAAiB;IAEhDrB,0BAA0B;QACxBU,UAAUO,WAAW;IACvB,GAAG;QAACP;KAAO;IAEXT,cAAca,aAAaf,SAASuB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BhB,uBACEmB,UACA,SACAH,UACE,CAACQ,WACA,SAACK;QACA,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF;IACF,GACF;QAAEmB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMZ,WAAW;;IACxC,IAAMa,oBAAoBlC,WAAWiC,gBAAgB;IACrDtC,MAAMwC,SAAS,CACb;eAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK;OAClE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAAChB,qDACKU;QACJD,WAAWnB,qCAETsB,aAAaf,SAASmC,GAAG,mCACzBxB,4CACAQ,8CACAf,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;QAERnB,yBACC,oBAACoB;QACCC,SAAS,SAACd;YACRA,MAAMI,eAAe;YACrBlB;QACF;QACAE,SAAS;sBAGb,oBAACyB;QACCzB,SAAS;QACT2B,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU;OAE1CvB,yBAAW,oBAACoB;QAAIzB,SAAS;OAA0CH;AAI5E,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { 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":["React","classNames","useAdaptivity","useGlobalEventListener","usePlatform","useTimeout","SizeType","useDOM","Platform","useIsomorphicLayoutEffect","useScrollLock","FixedLayout","sizeXClassNames","none","COMPACT","REGULAR","PanelHeaderContext","children","onClose","opened","className","restProps","document","platform","useState","visible","setVisible","closing","sizeX","elementRef","useRef","VKCOM","event","current","contains","target","stopPropagation","capture","onAnimationEnd","animationFallback","useEffect","set","clear","IOS","vertical","div","onClick","ref","undefined"],"mappings":";;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,WAAW,QAAQ,6BAA6B;IAGjC;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;oBADkB,MAErBP,SAASQ,OAAO,6DAFK,MAGrBR,SAASS,OAAO,4CAHK;AAWxB;;CAEC,GACD,OAAO,IAAMC,qBAAqB;QAChCC,kBAAAA,UACAC,iBAAAA,gCACAC,QAAAA,oCAAS,uBACTC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaf,SAAbe;IACR,IAAMC,WAAWnB;IACjB,IAA8BJ,mCAAAA,MAAMwB,QAAQ,CAACL,aAAtCM,UAAuBzB,oBAAd0B,aAAc1B;IAC9B,IAAM2B,UAAUF,WAAW,CAACN;IAC5B,IAA2BjB,iBAAAA,wCAAAA,eAAnB0B,OAAAA,0CAAQ;IAChB,IAAMC,aAAa7B,MAAM8B,MAAM,CAAiB;IAEhDrB,0BAA0B;QACxBU,UAAUO,WAAW;IACvB,GAAG;QAACP;KAAO;IAEXT,cAAca,aAAaf,SAASuB,KAAK,IAAIZ;IAE7C,+BAA+B;IAC/BhB,uBACEmB,UACA,SACAH,UACE,CAACQ,WACA,SAACK;QACA,IAAIH,WAAWI,OAAO,IAAI,CAACJ,WAAWI,OAAO,CAACC,QAAQ,CAACF,MAAMG,MAAM,GAAW;YAC5EH,MAAMI,eAAe;YACrBlB;QACF;IACF,GACF;QAAEmB,SAAS;IAAK;IAGlB,0DAA0D;IAC1D,IAAMC,iBAAiB;eAAMZ,WAAW;;IACxC,IAAMa,oBAAoBlC,WAAWiC,gBAAgB;IACrDtC,MAAMwC,SAAS,CACb;eAAOb,UAAUY,kBAAkBE,GAAG,KAAKF,kBAAkBG,KAAK;OAClE;QAACH;QAAmBZ;KAAQ;IAG9B,qBACE,oBAAChB,qDACKU;QACJD,WAAWnB,qCAETsB,aAAaf,SAASmC,GAAG,mCACzBxB,4CACAQ,8CACAf,eAAe,CAACgB,MAAM,EACtBR;QAEFwB,UAAS;QAERnB,yBACC,oBAACoB;QACCC,SAAS,SAACd;YACRA,MAAMI,eAAe;YACrBlB;QACF;QACAE,SAAS;sBAGb,oBAACyB;QACCzB,SAAS;QACT2B,KAAKlB;QACLS,gBAAgBX,UAAUW,iBAAiBU;OAE1CvB,yBAAW,oBAACoB;QAAIzB,SAAS;OAA0CH;AAI5E,EAAE"}

package/dist/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/components/Placeholder/Placeholder.js

@@ -1,38 +1,66 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { Headline } from "../Typography/Headline/Headline";
 import { Title } from "../Typography/Title/Title";
+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",
+        "withPadding"
+    ]);
+    return React.createElement(RootComponent, _object_spread({
+        baseClassName: classNames("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", withPadding && "vkuiPlaceholder--withPadding")
+    }, restProps));
+};
+var PlaceholderIcon = function(props) {
+    return /*#__PURE__*/ React.createElement(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, _object_spread({
+        level: "2",
+        weight: "2",
+        className: classNames(className, "vkuiPlaceholder__header")
+    }, restProps));
+};
+var PlaceholderText = function(_param) /*#__PURE__*/ {
+    var className = _param.className, restProps = _object_without_properties(_param, [
+        "className"
+    ]);
+    return React.createElement(Headline, _object_spread({
+        weight: "3",
+        className: classNames(className, "vkuiPlaceholder__text")
+    }, restProps));
+};
+var PlaceholderActions = function(props) {
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: "vkuiPlaceholder__action"
+    }, props));
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */ export 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, [
+    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",
-        "action",
         "children",
-        "stretched",
-        "getRootRef",
-        "className",
+        "action",
         "withPadding"
     ]);
-    return React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        ref: getRootRef,
-        className: classNames("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", withPadding && "vkuiPlaceholder--withPadding", className)
-    }), hasReactNode(icon) && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiPlaceholder__icon"
-    }, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(Title, {
-        level: "2",
-        weight: "2",
-        className: "vkuiPlaceholder__header"
-    }, header), hasReactNode(children) && /*#__PURE__*/ React.createElement(Headline, {
-        weight: "3",
-        className: "vkuiPlaceholder__text"
-    }, children), hasReactNode(action) && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiPlaceholder__action"
-    }, action));
+    return React.createElement(PlaceholderContainer, _object_spread({
+        withPadding: withPadding
+    }, restProps), hasReactNode(icon) && /*#__PURE__*/ React.createElement(PlaceholderIcon, null, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(PlaceholderHeader, null, header), hasReactNode(children) && /*#__PURE__*/ React.createElement(PlaceholderText, null, children), 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/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":["React","classNames","hasReactNode","Headline","Title","Placeholder","icon","header","action","children","stretched","getRootRef","className","withPadding","restProps","div","ref","level","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AA4BlD;;CAEC,GACD,OAAO,IAAMC,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,oBAACE,+CACKD;QACJE,KAAKL;QACLC,WAAWX,8BAETS,2CACAG,+CACAD;QAGDV,aAAaI,uBAAS,oBAACS;QAAIH,SAAS;OAAgCN,OACpEJ,aAAaK,yBACZ,oBAACH;QAAMa,OAAM;QAAIC,QAAO;QAAIN,SAAS;OAClCL,SAGJL,aAAaO,2BACZ,oBAACN;QAASe,QAAO;QAAIN,SAAS;OAC3BH,WAGJP,aAAaM,yBAAW,oBAACO;QAAIH,SAAS;OAAkCJ;AACtE,EACL"}
+{"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":["React","classNames","hasReactNode","RootComponent","Headline","Title","PlaceholderContainer","stretched","withPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAclD,IAAMC,uBAAuB;QAC3BC,mBAAAA,uCACAC,aAAAA,8CAAc,2BACXC;QAFHF;QACAC;;WAGA,oBAACL;QACCO,eAAeT,8BAEbM,2CACAC;OAEEC;AACL;AAKH,IAAME,kBAAkB,SAACC;yBACvB,oBAACT;QAAcO,aAAa;OAAmCE;;AAKjE,IAAMC,oBAAoB;QAAGC,mBAAAA,WAAcL;QAAdK;;WAC3B,oBAACT;QACCU,OAAM;QACNC,QAAO;QACPF,WAAWb,WAAWa;OAClBL;AACL;AAKH,IAAMQ,kBAAkB;QAAGH,mBAAAA,WAAcL;QAAdK;;WACzB,oBAACV;QACCY,QAAO;QACPF,WAAWb,WAAWa;OAClBL;AACL;AAKH,IAAMS,qBAAqB,SAACN;yBAC1B,oBAACT;QAAcO,aAAa;OAAqCE;;AAkBnE;;CAEC,GACD,OAAO,IAAMO,cAAc;QACzBC,cAAAA,MACAC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,oCACAf,aAAAA,8CAAc,2BACXC;QALHW;QACAC;QACAC;QACAC;QACAf;;WAGA,oBAACF;QAAqBE,aAAaA;OAAiBC,YACjDP,aAAakB,uBAAS,oBAACT,uBAAiBS,OACxClB,aAAamB,yBAAW,oBAACR,yBAAmBQ,SAC5CnB,aAAaoB,2BAAa,oBAACL,uBAAiBK,WAC5CpB,aAAaqB,yBAAW,oBAACL,0BAAoBK;AAC1B,EACtB;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}

package/dist/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/components/PopoutRoot/PopoutRoot.js

@@ -2,28 +2,24 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { blurActiveElement, useDOM } from "../../lib/dom";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
-var PopoutRootPopout = function(param) {
-    var children = param.children;
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames("vkuiPopoutRoot__popout")
-    }, children);
+import { RootComponent } from "../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));
 };
 export 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 = useDOM().document;
     React.useEffect(function() {
@@ -32,9 +28,8 @@ export var PopoutRoot = function(_param) {
         document,
         popout
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiPopoutRoot", className),
-        ref: getRootRef
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: "vkuiPopoutRoot"
     }), children, /*#__PURE__*/ React.createElement(AppRootPortal, null, !!popout && /*#__PURE__*/ React.createElement(PopoutRootPopout, null, popout), !!modal && /*#__PURE__*/ React.createElement(PopoutRootModal, null, modal)));
 };
 

package/dist/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":["React","classNames","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AAOzD,IAAMC,mBAAmB;QAAGC,iBAAAA;IAC1B,qBAAO,oBAACC;QAAIC,WAAWP;OAA2CK;AACpE;AAMA,IAAMG,kBAAkB;QAAGH,iBAAAA;IACzB,qBAAO,oBAACC;QAAIC,SAAS;OAAgCF;AACvD;AASA,OAAO,IAAMI,aAAa;QACxBC,gBAAAA,QACAC,eAAAA,OACAN,kBAAAA,UACAO,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAN;QACAO;QACAL;;IAGA,IAAM,AAAEO,WAAaZ,SAAbY;IAERf,MAAMgB,SAAS,CAAC;QACdL,UAAUT,kBAAkBa;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ,+CAAQO;QAAWN,WAAWP,6BAAiCO;QAAYS,KAAKJ;QAC9EP,wBACD,oBAACF,qBACE,CAAC,CAACO,wBAAU,oBAACN,wBAAkBM,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"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":["React","blurActiveElement","useDOM","AppRootPortal","RootComponent","PopoutRootPopout","props","div","className","PopoutRootModal","PopoutRoot","popout","modal","children","restProps","document","useEffect","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAO/D,IAAMC,mBAAmB,SAACC;yBACxB,oBAACC;QAAIC,SAAS;OAAoCF;;AAOpD,IAAMG,kBAAkB,SAACH;yBACvB,oBAACC;QAAIC,SAAS;OAAmCF;;AAQnD,OAAO,IAAMI,aAAa;QAAGC,gBAAAA,QAAQC,eAAAA,OAAOC,kBAAAA,UAAaC;QAA5BH;QAAQC;QAAOC;;IAC1C,IAAM,AAAEE,WAAab,SAAba;IAERf,MAAMgB,SAAS,CAAC;QACdL,UAAUV,kBAAkBc;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACP,uDAAkBU;QAAWG,aAAa;QACxCJ,wBACD,oBAACV,qBACE,CAAC,CAACQ,wBAAU,oBAACN,wBAAkBM,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

package/dist/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/components/PopoutWrapper/PopoutWrapper.js

@@ -9,22 +9,31 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { useTimeout } from "../../hooks/useTimeout";
 import { useDOM } from "../../lib/dom";
 import { Platform } from "../../lib/platform";
+import { RootComponent } from "../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"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */ export 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 = 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);
@@ -43,18 +52,9 @@ import { Platform } from "../../lib/platform";
     }, {
         passive: false
     });
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: 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, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: 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/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":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,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,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM;IAC1F3B,MAAM4B,SAAS,CAAC;QACd,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB;QACrCkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}
+{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { 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":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","RootComponent","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","useState","opened","setOpened","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","baseClassName","onAnimationEnd","undefined","div","className"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,IAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,IAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AAUA;;CAEC,GACD,OAAO,IAAMC,gBAAgB;+BAC3BC,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,WAAWrB;IACjB,IAA4BH,mCAAAA,MAAMyB,QAAQ,CAAC,CAACN,cAArCO,SAAqB1B,oBAAb2B,YAAa3B;IAE5B,IAAM4B,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DH,UAAU;QACZ;IACF;IACA,IAAMI,0BAA0B3B,WAAWwB,aAAaJ,aAAalB,SAAS0B,GAAG,GAAG,MAAM;IAC1FhC,MAAMiC,SAAS,CAAC;QACd,CAACP,UAAUK,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBL;KAAO;IAEpC,IAAM,AAAES,SAAW9B,SAAX8B;IACRjC,uBAAuBiC,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS;IACX;IAEA,qBACE,oBAAC9B,uDACKgB;QACJe,eAAerC,gCAEbW,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,yCACAQ,uCACAN,qCACAD;QAEFoB,gBAAgBb,SAASc,YAAYZ;sBAErC,oBAACa;QAAIC,SAAS;qBACZ,oBAACD;QAAIC,SAAS;QAAoCpB,SAASA;sBAC3D,oBAACmB;QAAIC,SAAS;OAAqCrB;AAI3D,EAAE"}

package/dist/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/components/Popper/Popper.js

@@ -4,16 +4,16 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { useExternRef } from "../../hooks/useExternRef";
-import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from "../../lib/floating";
+import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, hideMiddleware, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from "../../lib/floating";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from "../PopperArrow/DefaultIcon";
 import { PopperArrow } from "../PopperArrow/PopperArrow";
+import { RootComponent } from "../RootComponent/RootComponent";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */ export 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 ? DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? 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 ? DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? 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",
@@ -33,8 +33,10 @@ import { PopperArrow } from "../PopperArrow/PopperArrow";
         "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 = checkIsNotAutoPlacement(placementProp);
     var memoizedMiddlewares = React.useMemo(function() {
@@ -74,6 +76,9 @@ import { PopperArrow } from "../PopperArrow/PopperArrow";
                 padding: arrowPadding
             }));
         }
+        if (hideWhenReferenceHidden) {
+            middlewares.push(hideMiddleware());
+        }
         return middlewares;
     }, [
         offsetSkidding,
@@ -85,7 +90,8 @@ import { PopperArrow } from "../PopperArrow/PopperArrow";
         isNotAutoPlacement,
         sameWidth,
         customMiddlewares,
-        placementProp
+        placementProp,
+        hideWhenReferenceHidden
     ]);
     var _useFloating = useFloating({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -100,8 +106,9 @@ import { PopperArrow } from "../PopperArrow/PopperArrow";
                 }
             ]));
         }
-    }), 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 = 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 = useExternRef(refs.setFloating, getRef, getRootRef);
     React.useEffect(function() {
         refs.setReference(targetRef.current);
     }, [
@@ -118,10 +125,12 @@ import { PopperArrow } from "../PopperArrow/PopperArrow";
         onPlacementChange,
         resolvedPlacement
     ]);
-    var dropdown = /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiPopper", className),
-        ref: handleRootRef,
-        style: _object_spread({}, styleProp, convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
+    var dropdown = /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: "vkuiPopper",
+        getRootRef: handleRootRef,
+        style: _object_spread({}, styleProp, convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined), ((_hide = hide) === null || _hide === void 0 ? void 0 : _hide.referenceHidden) && {
+            visibility: "hidden"
+        })
     }), arrow && /*#__PURE__*/ React.createElement(PopperArrow, {
         coords: arrowCoords,
         placement: resolvedPlacement,