@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -7,4 +7,4 @@ export interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContent
  */
-export declare const PanelHeaderContent: ({ className, style, aside, status, before, children, onClick, ...restProps }: PanelHeaderContentProps) => JSX.Element;
+export declare const PanelHeaderContent: ({ className, style, aside, status, before, children, onClick, ...restProps }: PanelHeaderContentProps) => React.JSX.Element;

package/dist/cssm/components/PanelHeaderContent/PanelHeaderContent.js

@@ -16,11 +16,13 @@ const PanelHeaderChildren = ({ hasStatus , hasBefore , children  })=>{
     const platform = usePlatform();
     if (platform === Platform.VKCOM) {
         return /*#__PURE__*/ React.createElement(Text, {
+            className: styles['PanelHeaderContent__childrenText'],
             Component: "div",
             weight: "2"
         }, children);
     }
     return hasStatus || hasBefore ? /*#__PURE__*/ React.createElement(Headline, {
+        className: styles['PanelHeaderContent__childrenText'],
         Component: "div",
         weight: "2"
     }, children) : /*#__PURE__*/ React.createElement("div", {
@@ -52,7 +54,7 @@ const PanelHeaderChildren = ({ hasStatus , hasBefore , children  })=>{
     }, hasReactNode(status) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['PanelHeaderContent__status']
     }, status), /*#__PURE__*/ React.createElement("div", {
-        className: classNames('vkuiInternalPanelHeaderContent__children', styles['PanelHeaderContent__children'])
+        className: styles['PanelHeaderContent__children']
     }, /*#__PURE__*/ React.createElement(PanelHeaderChildren, {
         hasStatus: hasReactNode(status),
         hasBefore: hasReactNode(before)

package/dist/cssm/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 Component=\"div\" weight=\"2\">\n        {children}\n      </Text>\n    );\n  }\n\n  return hasStatus || hasBefore ? (\n    <Headline 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\n          className={classNames(\n            'vkuiInternalPanelHeaderContent__children',\n            styles['PanelHeaderContent__children'],\n          )}\n        >\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","styles","platformClassNames","ios","android","vkcom","PanelHeaderChildren","hasStatus","hasBefore","children","platform","VKCOM","Component","weight","div","className","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;AAC/C,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,0BAA0B;IACtCG,SAASH,MAAM,CAAC,8BAA8B;IAC9CI,OAAOJ,MAAM,CAAC,4BAA4B;AAC5C;AAaA,MAAMK,sBAAsB,CAAC,EAAEC,UAAS,EAAEC,UAAS,EAAEC,SAAQ,EAA4B,GAAK;IAC5F,MAAMC,WAAWf;IACjB,IAAIe,aAAad,SAASe,KAAK,EAAE;QAC/B,qBACE,oBAACX;YAAKY,WAAU;YAAMC,QAAO;WAC1BJ;IAGP,CAAC;IAED,OAAOF,aAAaC,0BAClB,oBAACT;QAASa,WAAU;QAAMC,QAAO;OAC9BJ,0BAGH,oBAACK;QAAIC,WAAWd,MAAM,CAAC,kCAAkC;OAAGQ,SAC7D;AACH;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCD,UAAS,EACTE,MAAK,EACLC,MAAK,EACLC,OAAM,EACNC,OAAM,EACNX,SAAQ,EACRY,QAAO,EACP,GAAGC,WACqB,GAAK;IAC7B,MAAMC,cAAcF,UAAUxB,WAAW,KAAK;IAC9C,MAAM2B,YAAYH,UAAU,CAAC,IAAIC,SAAS;IAC1C,MAAMZ,WAAWf;IACjB,MAAM8B,UAAUJ,UACZ;QACE,GAAGC,SAAS;QACZD;QACAK,mBAAmB;QACnBC,WAAWjB,aAAad,SAASgC,GAAG;QACpCC,YAAY;IACd,IACA,CAAC,CAAC;IAEN,qBACE,oBAACf;QACE,GAAGU,SAAS;QACbP,OAAOA;QACPF,WAAWtB,WACTQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB4B,cAAc,CAACpB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,OAAO,EAC9BW;OAGDrB,aAAa0B,yBAAW,oBAACN;QAAIC,WAAWd,MAAM,CAAC,6BAA6B;OAAGmB,uBAChF,oBAACG;QACE,GAAGE,OAAO;QACXV,WAAWtB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACmB,UAAUV,aAAad,SAASmC,OAAO,IAAI9B,MAAM,CAAC,mCAAmC;OAGvFP,aAAayB,yBACZ,oBAACrB;QAASiB,WAAWd,MAAM,CAAC,6BAA6B;OAAGkB,uBAE9D,oBAACL;QACCC,WAAWtB,WACT,4CACAQ,MAAM,CAAC,+BAA+B;qBAGxC,oBAACK;QAAoBC,WAAWb,aAAayB;QAASX,WAAWd,aAAa0B;OAC3EX,WAEFf,aAAawB,wBACZ,oBAACJ;QAAIC,WAAWd,MAAM,CAAC,4BAA4B;OAAGiB,SAGzDxB,aAAa0B,yBAAW,oBAACN;QAAIC,WAAWd,MAAM,CAAC,4BAA4B;;AAIpF,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 } 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","styles","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;AAC/C,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,0BAA0B;IACtCG,SAASH,MAAM,CAAC,8BAA8B;IAC9CI,OAAOJ,MAAM,CAAC,4BAA4B;AAC5C;AAaA,MAAMK,sBAAsB,CAAC,EAAEC,UAAS,EAAEC,UAAS,EAAEC,SAAQ,EAA4B;IACvF,MAAMC,WAAWf;IACjB,IAAIe,aAAad,SAASe,OAAO;QAC/B,qBACE,oBAACX;YAAKY,WAAWX,MAAM,CAAC,mCAAmC;YAAEY,WAAU;YAAMC,QAAO;WACjFL;IAGP;IAEA,OAAOF,aAAaC,0BAClB,oBAACT;QAASa,WAAWX,MAAM,CAAC,mCAAmC;QAAEY,WAAU;QAAMC,QAAO;OACrFL,0BAGH,oBAACM;QAAIH,WAAWX,MAAM,CAAC,kCAAkC;OAAGQ;AAEhE;AAEA;;CAEC,GACD,OAAO,MAAMO,qBAAqB,CAAC,EACjCJ,UAAS,EACTK,MAAK,EACLC,MAAK,EACLC,OAAM,EACNC,OAAM,EACNX,SAAQ,EACRY,QAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,cAAcF,UAAUxB,WAAW;IACzC,MAAM2B,YAAYH,UAAU,CAAC,IAAIC;IACjC,MAAMZ,WAAWf;IACjB,MAAM8B,UAAUJ,UACZ;QACE,GAAGC,SAAS;QACZD;QACAK,mBAAmB;QACnBC,WAAWjB,aAAad,SAASgC;QACjCC,YAAY;IACd,IACA,CAAC;IAEL,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbP,OAAOA;QACPL,WAAWnB,WACTQ,MAAM,CAAC,qBAAqB,EAC5BC,mBAAmB4B,eAAepB,YAC9BR,kBAAkB,CAACQ,SAAS,GAC5BR,mBAAmBE,SACvBQ;OAGDlB,aAAa0B,yBAAW,oBAACL;QAAIH,WAAWX,MAAM,CAAC,6BAA6B;OAAGmB,uBAChF,oBAACG;QACE,GAAGE,OAAO;QACXb,WAAWnB,WACTQ,MAAM,CAAC,yBAAyB,EAChC,CAACmB,UAAUV,aAAad,SAASmC,WAAW9B,MAAM,CAAC,mCAAmC;OAGvFP,aAAayB,yBACZ,oBAACrB;QAASc,WAAWX,MAAM,CAAC,6BAA6B;OAAGkB,uBAE9D,oBAACJ;QAAIH,WAAWX,MAAM,CAAC,+BAA+B;qBACpD,oBAACK;QAAoBC,WAAWb,aAAayB;QAASX,WAAWd,aAAa0B;OAC3EX,WAEFf,aAAawB,wBACZ,oBAACH;QAAIH,WAAWX,MAAM,CAAC,4BAA4B;OAAGiB,SAGzDxB,aAAa0B,yBAAW,oBAACL;QAAIH,WAAWX,MAAM,CAAC,4BAA4B;;AAIpF,EAAE"}

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

@@ -25,7 +25,8 @@
 }
 
 .PanelHeaderContent__status,
-.PanelHeaderContent__children-in {
+.PanelHeaderContent__children-in,
+.PanelHeaderContent__childrenText {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

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

@@ -6,4 +6,4 @@ export interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderContext
  */
-export declare const PanelHeaderContext: ({ children, onClose, opened, className, ...restProps }: PanelHeaderContextProps) => JSX.Element;
+export declare const PanelHeaderContext: ({ children, onClose, opened, className, ...restProps }: PanelHeaderContextProps) => React.JSX.Element;

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
     /**
@@ -17,4 +17,4 @@ export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit
  */
-export declare const PanelHeaderEdit: ({ isActive, editLabel, doneLabel, ...restProps }: PanelHeaderEditProps) => JSX.Element;
+export declare const PanelHeaderEdit: ({ isActive, editLabel, doneLabel, ...restProps }: PanelHeaderEditProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","Icon28EditOutline","usePlatform","Platform","PanelHeaderButton","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","aria-label","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAiBnG;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,UAAW,KAAK,CAAA,EAChBC,WAAY,gBAAe,EAC3BC,WAAY,SAAQ,EACpB,GAAGC,WACkB,GAAK;IAC1B,MAAMC,UAAUJ,WAAWE,YAAYD,SAAS;IAChD,MAAMI,cAAcL,WAAWN,oBAAoBC,iBAAiB;IACpE,MAAMW,WAAWV;IAEjB,qBACE,oBAACE;QAAkBS,cAAYH;QAAU,GAAGD,SAAS;OAClDG,aAAaT,SAASW,GAAG,GAAGJ,wBAAU,oBAACC,kBAAc;AAG5D,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","Icon28EditOutline","usePlatform","Platform","PanelHeaderButton","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","aria-label","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAiBnG;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,UAAW,MAAK,EAChBC,WAAY,gBAAe,EAC3BC,WAAY,SAAQ,EACpB,GAAGC,WACkB;IACrB,MAAMC,UAAUJ,WAAWE,YAAYD;IACvC,MAAMI,cAAcL,WAAWN,oBAAoBC;IACnD,MAAMW,WAAWV;IAEjB,qBACE,oBAACE;QAAkBS,cAAYH;QAAU,GAAGD,SAAS;OAClDG,aAAaT,SAASW,MAAMJ,wBAAU,oBAACC;AAG9C,EAAE"}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
  */
-export declare const PanelHeaderSubmit: ({ children, ...restProps }: PanelHeaderButtonProps) => JSX.Element;
+export declare const PanelHeaderSubmit: ({ children, ...restProps }: PanelHeaderButtonProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","aria-label","primary","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,UAAW,SAAQ,EACnB,GAAGC,WACoB,GAAK;IAC5B,MAAMC,WAAWP;IAEjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;QAAWI,SAAAA,IAAO;QAAE,GAAGH,SAAS;OACjFC,aAAaN,SAASS,GAAG,GAAGL,yBAAW,oBAACN,wBAAoB;AAGnE,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","aria-label","primary","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAChCC,UAAW,SAAQ,EACnB,GAAGC,WACoB;IACvB,MAAMC,WAAWP;IAEjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;QAAWI,SAAAA;QAAS,GAAGH,SAAS;OACjFC,aAAaN,SAASS,MAAML,yBAAW,oBAACN;AAG/C,EAAE"}

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

@@ -6,4 +6,4 @@ export interface PanelSpinnerProps extends SpinnerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelSpinner
  */
-export declare const PanelSpinner: React.MemoExoticComponent<({ height, style, ...restProps }: PanelSpinnerProps) => JSX.Element>;
+export declare const PanelSpinner: React.MemoExoticComponent<({ height, style, ...restProps }: PanelSpinnerProps) => React.JSX.Element>;

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

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

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

@@ -17,8 +17,12 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>,
      * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
      */
     stretched?: boolean;
+    /**
+     * Добавляет отступы к компоненту
+     */
+    withPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, ...restProps }: PlaceholderProps) => JSX.Element;
+export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, withPadding, ...restProps }: PlaceholderProps) => React.JSX.Element;

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

@@ -5,12 +5,10 @@ import { Title } from '../Typography/Title/Title';
 import styles from './Placeholder.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
- */ export const Placeholder = ({ icon , header , action , children , stretched , getRootRef , className , ...restProps })=>/*#__PURE__*/ React.createElement("div", {
+ */ export const Placeholder = ({ icon , header , action , children , stretched , getRootRef , className , withPadding =true , ...restProps })=>/*#__PURE__*/ React.createElement("div", {
         ...restProps,
         ref: getRootRef,
-        className: classNames(styles['Placeholder'], stretched && styles['Placeholder--stretched'], className)
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Placeholder__in']
+        className: classNames(styles['Placeholder'], stretched && styles['Placeholder--stretched'], withPadding && styles['Placeholder--withPadding'], className)
     }, hasReactNode(icon) && /*#__PURE__*/ React.createElement("div", {
         className: styles['Placeholder__icon']
     }, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(Title, {
@@ -22,6 +20,6 @@ import styles from './Placeholder.module.css';
         className: styles['Placeholder__text']
     }, children), hasReactNode(action) && /*#__PURE__*/ React.createElement("div", {
         className: styles['Placeholder__action']
-    }, action)));
+    }, action));
 
 //# sourceMappingURL=Placeholder.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { 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 * @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  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      className,\n    )}\n  >\n    <div className={styles['Placeholder__in']}>\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  </div>\n);\n"],"names":["React","classNames","hasReactNode","Headline","Title","styles","Placeholder","icon","header","action","children","stretched","getRootRef","className","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;AAClD,OAAOC,YAAY,2BAA2B;AAuB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,KAAI,EACJC,OAAM,EACNC,OAAM,EACNC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,UAAS,EACT,GAAGC,WACc,iBACjB,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKJ;QACLC,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBM,aAAaN,MAAM,CAAC,yBAAyB,EAC7CQ;qBAGF,oBAACE;QAAIF,WAAWR,MAAM,CAAC,kBAAkB;OACtCH,aAAaK,uBAAS,oBAACQ;QAAIF,WAAWR,MAAM,CAAC,oBAAoB;OAAGE,OACpEL,aAAaM,yBACZ,oBAACJ;QAAMa,OAAM;QAAIC,QAAO;QAAIL,WAAWR,MAAM,CAAC,sBAAsB;OACjEG,SAGJN,aAAaQ,2BACZ,oBAACP;QAASe,QAAO;QAAIL,WAAWR,MAAM,CAAC,oBAAoB;OACxDK,WAGJR,aAAaO,yBAAW,oBAACM;QAAIF,WAAWR,MAAM,CAAC,sBAAsB;OAAGI,UAG7E"}
+{"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","styles","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;AAClD,OAAOC,YAAY,2BAA2B;AA2B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,KAAI,EACJC,OAAM,EACNC,OAAM,EACNC,SAAQ,EACRC,UAAS,EACTC,WAAU,EACVC,UAAS,EACTC,aAAc,KAAI,EAClB,GAAGC,WACc,iBACjB,oBAACC;QACE,GAAGD,SAAS;QACbE,KAAKL;QACLC,WAAWZ,WACTI,MAAM,CAAC,cAAc,EACrBM,aAAaN,MAAM,CAAC,yBAAyB,EAC7CS,eAAeT,MAAM,CAAC,2BAA2B,EACjDQ;OAGDX,aAAaK,uBAAS,oBAACS;QAAIH,WAAWR,MAAM,CAAC,oBAAoB;OAAGE,OACpEL,aAAaM,yBACZ,oBAACJ;QAAMc,OAAM;QAAIC,QAAO;QAAIN,WAAWR,MAAM,CAAC,sBAAsB;OACjEG,SAGJN,aAAaQ,2BACZ,oBAACP;QAASgB,QAAO;QAAIN,WAAWR,MAAM,CAAC,oBAAoB;OACxDK,WAGJR,aAAaO,yBAAW,oBAACO;QAAIH,WAAWR,MAAM,CAAC,sBAAsB;OAAGI,SAE3E"}

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

@@ -2,6 +2,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.Placeholder--withPadding {
+  padding: 48px 32px;
 }
 
 .Placeholder--stretched {
@@ -10,13 +17,6 @@
   padding-bottom: inherit;
 }
 
-.Placeholder__in {
-  max-width: 100%;
-  text-align: center;
-  box-sizing: border-box;
-  padding: 48px 32px;
-}
-
 .Placeholder__icon {
   margin-bottom: 12px;
   display: inline-block;

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

@@ -13,4 +13,4 @@ export interface PlatformProviderProps {
  * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */
-export declare function PlatformProvider({ value, children }: PlatformProviderProps): JSX.Element;
+export declare function PlatformProvider({ value, children }: PlatformProviderProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,MAAK,EAAEC,SAAQ,EAAyB,EAAE;IAC3E,MAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT,CAAC"}
+{"version":3,"sources":["../../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,MAAK,EAAEC,SAAQ,EAAyB;IACzE,MAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT"}

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

@@ -4,4 +4,4 @@ export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, H
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => JSX.Element;
+export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\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  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\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","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,SAAQ,EAAyB,GAAK;IAChE,MAAM,EAAEC,UAAS,EAAE,GAAGP;IAEtB,qBACE,oBAACQ;QACCC,WAAWV,WACTK,MAAM,CAAC,qBAAqB,EAC5BG,aAAaH,MAAM,CAAC,+BAA+B;OAGpDE;AAGP;AAMA,MAAMI,kBAAkB,CAAC,EAAEJ,SAAQ,EAAwB,GAAK;IAC9D,qBAAO,oBAACE;QAAIC,WAAWL,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMK,aAAa,CAAC,EACzBC,OAAM,EACNC,MAAK,EACLP,SAAQ,EACRQ,WAAU,EACVL,UAAS,EACT,GAAGM,WACa,GAAK;IACrB,MAAM,EAAEC,SAAQ,EAAE,GAAGd;IAErBJ,MAAMmB,SAAS,CAAC,IAAM;QACpBL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWV,WAAWK,MAAM,CAAC,aAAa,EAAEK;QAAYS,KAAKJ;OAC9ER,wBACD,oBAACH,qBACE,CAAC,CAACS,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\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  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\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","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","styles","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAOC,YAAY,0BAA0B;AAM7C,MAAMC,mBAAmB,CAAC,EAAEC,SAAQ,EAAyB;IAC3D,MAAM,EAAEC,UAAS,EAAE,GAAGP;IAEtB,qBACE,oBAACQ;QACCC,WAAWV,WACTK,MAAM,CAAC,qBAAqB,EAC5BG,aAAaH,MAAM,CAAC,+BAA+B;OAGpDE;AAGP;AAMA,MAAMI,kBAAkB,CAAC,EAAEJ,SAAQ,EAAwB;IACzD,qBAAO,oBAACE;QAAIC,WAAWL,MAAM,CAAC,oBAAoB;OAAGE;AACvD;AASA,OAAO,MAAMK,aAAa,CAAC,EACzBC,OAAM,EACNC,MAAK,EACLP,SAAQ,EACRQ,WAAU,EACVL,UAAS,EACT,GAAGM,WACa;IAChB,MAAM,EAAEC,SAAQ,EAAE,GAAGd;IAErBJ,MAAMmB,UAAU;QACdL,UAAUX,kBAAkBe;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ;QAAK,GAAGO,SAAS;QAAEN,WAAWV,WAAWK,MAAM,CAAC,aAAa,EAAEK;QAAYS,KAAKJ;OAC9ER,wBACD,oBAACH,qBACE,CAAC,CAACS,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

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

@@ -9,4 +9,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) => JSX.Element;
+export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, className, ...restProps }: PopoutWrapperProps) => React.JSX.Element;

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
 import type { HasRef } from '../../types';
+import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
 export interface PopperRenderContentProps {
     className: string;
 }
@@ -22,14 +23,42 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     arrow?: boolean;
     /**
-     * Стиль стрелки
+     * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.
+     */
+    arrowHeight?: number;
+    /**
+     * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
+     */
+    arrowPadding?: number;
+    /**
+     * Стиль стрелки.
      */
     arrowClassName?: string;
+    /**
+     * Пользовательская SVG иконка.
+     *
+     * Требования:
+     *
+     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
+     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
+     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
+     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
+     * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.
+     * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.
+     * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
+     */
+    ArrowIcon?: PopperArrowProps['Icon'];
     /**
      * Выставлять ширину равной target элементу
      */
     sameWidth?: boolean;
     forcePortal?: boolean;
+    /**
+     * Кастомный root-элемент портала.
+     * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`
+     * из контекста `AppRoot`.
+     */
+    portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
     /**
      * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
      */
@@ -56,4 +85,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => 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, className, ...restProps }: PopperProps) => React.JSX.Element;

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

@@ -3,18 +3,19 @@ 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 { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from '../PopperArrow/PopperArrow';
+import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from '../PopperArrow/DefaultIcon';
+import { PopperArrow } from '../PopperArrow/PopperArrow';
 import styles from './Popper.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
- */ export const Popper = ({ targetRef , children , getRef , placement: placementProp = 'bottom-start' , onPlacementChange , arrow , arrowClassName , sameWidth , offsetDistance =8 , offsetSkidding =0 , forcePortal =true , autoUpdateOnTargetResize =false , style: styleProp , customMiddlewares , renderContent , className , ...restProps })=>{
-    const arrowRef = React.useRef(null);
+ */ export const Popper = ({ targetRef , children , getRef , placement: placementProp = 'bottom-start' , onPlacementChange , arrow , arrowHeight =DEFAULT_ARROW_HEIGHT , arrowPadding =DEFAULT_ARROW_PADDING , arrowClassName , ArrowIcon =DefaultIcon , sameWidth , offsetDistance =8 , offsetSkidding =0 , forcePortal =true , portalRoot , autoUpdateOnTargetResize =false , style: styleProp , customMiddlewares , renderContent , className , ...restProps })=>{
+    const [arrowRef, setArrowRef] = React.useState(null);
     const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
     const memoizedMiddlewares = React.useMemo(()=>{
         const middlewares = [
             offsetMiddleware({
                 crossAxis: offsetSkidding,
-                mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
+                mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance
             })
         ];
         // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
@@ -42,18 +43,21 @@ import styles from './Popper.module.css';
         if (arrow) {
             middlewares.push(arrowMiddleware({
                 element: arrowRef,
-                padding: ARROW_PADDING
+                padding: arrowPadding
             }));
         }
         return middlewares;
     }, [
-        arrow,
-        sameWidth,
         offsetSkidding,
+        arrowRef,
+        arrow,
+        arrowHeight,
+        arrowPadding,
         offsetDistance,
+        isNotAutoPlacement,
+        sameWidth,
         customMiddlewares,
-        placementProp,
-        isNotAutoPlacement
+        placementProp
     ]);
     const { x: floatingDataX , y: floatingDataY , strategy: floatingPositionStrategy , placement: resolvedPlacement , refs , middlewareData: { arrow: arrowCoords  }  } = useFloating({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -93,12 +97,14 @@ import styles from './Popper.module.css';
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: arrowClassName,
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), renderContent ? renderContent({
         className: ''
     }) : children);
     return /*#__PURE__*/ React.createElement(AppRootPortal, {
-        forcePortal: forcePortal
+        forcePortal: forcePortal,
+        portalRoot: portalRoot
     }, dropdown);
 };