@vkontakte/vkui 4.23.0 → 4.25.2

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

@@ -64,12 +64,12 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
       viewWidth = _useAdaptivity.viewWidth;
 
   var isDesktop = viewWidth >= _AdaptivityContext.ViewWidth.SMALL_TABLET;
-  var elementRef = React.useRef();
+  var elementRef = React.useRef(null);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     opened && setVisible(true);
   }, [opened]); // start closing on outer click
 
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', isDesktop && opened && !closing && function (event) {
+  (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", isDesktop && opened && !closing && function (event) {
     if (elementRef.current && !elementRef.current.contains(event.target)) {
       onClose();
     }
@@ -82,18 +82,18 @@ var PanelHeaderContext = function PanelHeaderContext(_ref) {
   var animationFallback = (0, _useTimeout.useTimeout)(onAnimationEnd, 200);
   React.useEffect(function () {
     return closing ? animationFallback.set() : animationFallback.clear();
-  }, [closing]);
+  }, [animationFallback, closing]);
   return (0, _jsxRuntime.createScopedElement)(_FixedLayout.default, (0, _extends2.default)({}, restProps, {
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('PanelHeaderContext', platform), {
-      'PanelHeaderContext--opened': opened,
-      'PanelHeaderContext--closing': closing,
-      'PanelHeaderContext--desktop': isDesktop
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("PanelHeaderContext", platform), {
+      "PanelHeaderContext--opened": opened,
+      "PanelHeaderContext--closing": closing,
+      "PanelHeaderContext--desktop": isDesktop
     }),
     vertical: "top"
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PanelHeaderContext__in",
     ref: elementRef,
-    onAnimationEnd: closing ? onAnimationEnd : null
+    onAnimationEnd: closing ? onAnimationEnd : undefined
   }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PanelHeaderContext__content"
   }, visible && children)), !isDesktop && visible && (0, _jsxRuntime.createScopedElement)("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":["PanelHeaderContext","children","onClose","opened","restProps","document","platform","React","useState","visible","setVisible","closing","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","elementRef","useRef","event","current","contains","target","onAnimationEnd","animationFallback","useEffect","set","clear"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAQO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAK/D;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,KAEL;AAAA,MADDC,SACC;;AACJ,gBAAqB,kBAArB;AAAA,MAAQC,QAAR,WAAQA,QAAR;;AACA,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,wBAA8BC,KAAK,CAACC,QAAN,CAAeL,MAAf,CAA9B;AAAA;AAAA,MAAOM,OAAP;AAAA,MAAgBC,UAAhB;;AACA,MAAMC,OAAO,GAAGF,OAAO,IAAI,CAACN,MAA5B;;AACA,uBAAsB,oCAAtB;AAAA,MAAQS,SAAR,kBAAQA,SAAR;;AACA,MAAMC,SAAS,GAAGD,SAAS,IAAIE,6BAAUC,YAAzC;AACA,MAAMC,UAAU,GAAGT,KAAK,CAACU,MAAN,EAAnB;AAEA,4DAA0B,YAAM;AAC9Bd,IAAAA,MAAM,IAAIO,UAAU,CAAC,IAAD,CAApB;AACD,GAFD,EAEG,CAACP,MAAD,CAFH,EATI,CAaJ;;AACA,sDAAuBE,QAAvB,EAAiC,OAAjC,EAA0CQ,SAAS,IAAIV,MAAb,IAAuB,CAACQ,OAAxB,IAAoC,UAACO,KAAD,EAAW;AACvF,QAAIF,UAAU,CAACG,OAAX,IAAsB,CAACH,UAAU,CAACG,OAAX,CAAmBC,QAAnB,CAA4BF,KAAK,CAACG,MAAlC,CAA3B,EAA8E;AAC5EnB,MAAAA,OAAO;AACR;AACF,GAJD,EAdI,CAoBJ;;AACA,MAAMoB,cAAc,GAAG,SAAjBA,cAAiB;AAAA,WAAMZ,UAAU,CAAC,KAAD,CAAhB;AAAA,GAAvB;;AACA,MAAMa,iBAAiB,GAAG,4BAAWD,cAAX,EAA2B,GAA3B,CAA1B;AACAf,EAAAA,KAAK,CAACiB,SAAN,CAAgB;AAAA,WAAMb,OAAO,GAAGY,iBAAiB,CAACE,GAAlB,EAAH,GAA6BF,iBAAiB,CAACG,KAAlB,EAA1C;AAAA,GAAhB,EAAqF,CAACf,OAAD,CAArF;AAEA,SACE,qCAAC,oBAAD,6BAAiBP,SAAjB;AAA4B,IAAA,SAAS,EAAE,4BAAW,gCAAa,oBAAb,EAAmCE,QAAnC,CAAX,EAAyD;AAC9F,oCAA8BH,MADgE;AAE9F,qCAA+BQ,OAF+D;AAG9F,qCAA+BE;AAH+D,KAAzD,CAAvC;AAII,IAAA,QAAQ,EAAC;AAJb,MAKE;AAAK,IAAA,SAAS,EAAC,wBAAf;AAAwC,IAAA,GAAG,EAAEG,UAA7C;AAAyD,IAAA,cAAc,EAAEL,OAAO,GAAGW,cAAH,GAAoB;AAApG,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGb,OAAO,IAAIR,QADd,CADF,CALF,EAUG,CAACY,SAAD,IAAcJ,OAAd,IAAyB;AAAK,IAAA,OAAO,EAAEP,OAAd;AAAuB,IAAA,SAAS,EAAC;AAAjC,IAV5B,CADF;AAcD,CA5CM","sourcesContent":["import * as React from 'react';\nimport FixedLayout from '../FixedLayout/FixedLayout';\nimport { classNames } from '../../lib/classNames';\nimport { getClassName } from '../../helpers/getClassName';\nimport { ViewWidth } from '../AdaptivityProvider/AdaptivityContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './PanelHeaderContext.css';\n\nexport interface PanelHeaderContextProps extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\nexport const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({\n  children,\n  onClose,\n  opened = false,\n  ...restProps\n}) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { viewWidth } = useAdaptivity();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const elementRef = React.useRef<HTMLDivElement>();\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  // start closing on outer click\n  useGlobalEventListener(document, 'click', isDesktop && opened && !closing && ((event) => {\n    if (elementRef.current && !elementRef.current.contains(event.target as Node)) {\n      onClose();\n    }\n  }));\n\n  // fallback onAnimationEnd when animationend not supported\n  const onAnimationEnd = () => setVisible(false);\n  const animationFallback = useTimeout(onAnimationEnd, 200);\n  React.useEffect(() => closing ? animationFallback.set() : animationFallback.clear(), [closing]);\n\n  return (\n    <FixedLayout {...restProps} vkuiClass={classNames(getClassName('PanelHeaderContext', platform), {\n      'PanelHeaderContext--opened': opened,\n      'PanelHeaderContext--closing': closing,\n      'PanelHeaderContext--desktop': isDesktop,\n    })} vertical=\"top\">\n      <div vkuiClass=\"PanelHeaderContext__in\" ref={elementRef} onAnimationEnd={closing ? onAnimationEnd : null}>\n        <div vkuiClass=\"PanelHeaderContext__content\">\n          {visible && children}\n        </div>\n      </div>\n      {!isDesktop && visible && <div onClick={onClose} vkuiClass=\"PanelHeaderContext__fade\" />}\n    </FixedLayout>\n  );\n};\n"],"file":"PanelHeaderContext.js"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderContext/PanelHeaderContext.tsx"],"names":["PanelHeaderContext","children","onClose","opened","restProps","document","platform","React","useState","visible","setVisible","closing","viewWidth","isDesktop","ViewWidth","SMALL_TABLET","elementRef","useRef","event","current","contains","target","onAnimationEnd","animationFallback","useEffect","set","clear","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AASO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAK/D;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,yBAFJC,MAEI;AAAA,MAFJA,MAEI,4BAFK,KAEL;AAAA,MADDC,SACC;;AACJ,gBAAqB,kBAArB;AAAA,MAAQC,QAAR,WAAQA,QAAR;;AACA,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,wBAA8BC,KAAK,CAACC,QAAN,CAAeL,MAAf,CAA9B;AAAA;AAAA,MAAOM,OAAP;AAAA,MAAgBC,UAAhB;;AACA,MAAMC,OAAO,GAAGF,OAAO,IAAI,CAACN,MAA5B;;AACA,uBAAsB,oCAAtB;AAAA,MAAQS,SAAR,kBAAQA,SAAR;;AACA,MAAMC,SAAS,GAAGD,SAAS,IAAIE,6BAAUC,YAAzC;AACA,MAAMC,UAAU,GAAGT,KAAK,CAACU,MAAN,CAA6B,IAA7B,CAAnB;AAEA,4DAA0B,YAAM;AAC9Bd,IAAAA,MAAM,IAAIO,UAAU,CAAC,IAAD,CAApB;AACD,GAFD,EAEG,CAACP,MAAD,CAFH,EATI,CAaJ;;AACA,sDACEE,QADF,EAEE,OAFF,EAGEQ,SAAS,IACPV,MADF,IAEE,CAACQ,OAFH,IAGG,UAACO,KAAD,EAAW;AACV,QACEF,UAAU,CAACG,OAAX,IACA,CAACH,UAAU,CAACG,OAAX,CAAmBC,QAAnB,CAA4BF,KAAK,CAACG,MAAlC,CAFH,EAGE;AACAnB,MAAAA,OAAO;AACR;AACF,GAbL,EAdI,CA8BJ;;AACA,MAAMoB,cAAc,GAAG,SAAjBA,cAAiB;AAAA,WAAMZ,UAAU,CAAC,KAAD,CAAhB;AAAA,GAAvB;;AACA,MAAMa,iBAAiB,GAAG,4BAAWD,cAAX,EAA2B,GAA3B,CAA1B;AACAf,EAAAA,KAAK,CAACiB,SAAN,CACE;AAAA,WAAOb,OAAO,GAAGY,iBAAiB,CAACE,GAAlB,EAAH,GAA6BF,iBAAiB,CAACG,KAAlB,EAA3C;AAAA,GADF,EAEE,CAACH,iBAAD,EAAoBZ,OAApB,CAFF;AAKA,SACE,qCAAC,oBAAD,6BACMP,SADN;AAEE,IAAA,SAAS,EAAE,4BAAW,gCAAa,oBAAb,EAAmCE,QAAnC,CAAX,EAAyD;AAClE,oCAA8BH,MADoC;AAElE,qCAA+BQ,OAFmC;AAGlE,qCAA+BE;AAHmC,KAAzD,CAFb;AAOE,IAAA,QAAQ,EAAC;AAPX,MASE;AACE,IAAA,SAAS,EAAC,wBADZ;AAEE,IAAA,GAAG,EAAEG,UAFP;AAGE,IAAA,cAAc,EAAEL,OAAO,GAAGW,cAAH,GAAoBK;AAH7C,KAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8ClB,OAAO,IAAIR,QAAzD,CALF,CATF,EAgBG,CAACY,SAAD,IAAcJ,OAAd,IACC;AAAK,IAAA,OAAO,EAAEP,OAAd;AAAuB,IAAA,SAAS,EAAC;AAAjC,IAjBJ,CADF;AAsBD,CAjEM","sourcesContent":["import * as React from \"react\";\nimport FixedLayout from \"../FixedLayout/FixedLayout\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ViewWidth } from \"../AdaptivityProvider/AdaptivityContext\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport \"./PanelHeaderContext.css\";\n\nexport interface PanelHeaderContextProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  opened: boolean;\n  onClose: VoidFunction;\n}\n\nexport const PanelHeaderContext: React.FC<PanelHeaderContextProps> = ({\n  children,\n  onClose,\n  opened = false,\n  ...restProps\n}) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const [visible, setVisible] = React.useState(opened);\n  const closing = visible && !opened;\n  const { viewWidth } = useAdaptivity();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    opened && setVisible(true);\n  }, [opened]);\n\n  // start closing on outer click\n  useGlobalEventListener(\n    document,\n    \"click\",\n    isDesktop &&\n      opened &&\n      !closing &&\n      ((event) => {\n        if (\n          elementRef.current &&\n          !elementRef.current.contains(event.target as Node)\n        ) {\n          onClose();\n        }\n      })\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      vkuiClass={classNames(getClassName(\"PanelHeaderContext\", platform), {\n        \"PanelHeaderContext--opened\": opened,\n        \"PanelHeaderContext--closing\": closing,\n        \"PanelHeaderContext--desktop\": isDesktop,\n      })}\n      vertical=\"top\"\n    >\n      <div\n        vkuiClass=\"PanelHeaderContext__in\"\n        ref={elementRef}\n        onAnimationEnd={closing ? onAnimationEnd : undefined}\n      >\n        <div vkuiClass=\"PanelHeaderContext__content\">{visible && children}</div>\n      </div>\n      {!isDesktop && visible && (\n        <div onClick={onClose} vkuiClass=\"PanelHeaderContext__fade\" />\n      )}\n    </FixedLayout>\n  );\n};\n"],"file":"PanelHeaderContext.js"}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
+import * as React from "react";
+import { PanelHeaderButtonProps } from "../PanelHeaderButton/PanelHeaderButton";
 export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
     /**
      * Включен ли режим редактирования

package/dist/cjs/components/PanelHeaderEdit/PanelHeaderEdit.js

@@ -38,9 +38,10 @@ var PanelHeaderEdit = function PanelHeaderEdit(_ref) {
 
 PanelHeaderEdit.defaultProps = {
   isActive: false,
-  editLabel: 'Редактировать',
-  doneLabel: 'Готово'
-};
+  editLabel: "Редактировать",
+  doneLabel: "Готово"
+}; // eslint-disable-next-line import/no-default-export
+
 var _default = PanelHeaderEdit;
 exports.default = _default;
 //# sourceMappingURL=PanelHeaderEdit.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","ANDROID","VKCOM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAiBA,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE,OAK3C;AAAA,MAJ1BC,QAI0B,QAJ1BA,QAI0B;AAAA,MAH1BC,SAG0B,QAH1BA,SAG0B;AAAA,MAF1BC,SAE0B,QAF1BA,SAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,OAAO,GAAGJ,QAAQ,GAAGE,SAAH,GAAeD,SAAvC;AACA,MAAMI,WAAW,GAAGL,QAAQ,GAAGM,wBAAH,GAAuBC,wBAAnD;AACA,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,oCAAD;AAAmB,kBAAYJ;AAA/B,KAA4CD,SAA5C,GACGK,QAAQ,KAAKC,iBAAb,IAAwBD,QAAQ,KAAKE,eAArC,GACG,qCAAC,WAAD,OADH,GAEGN,OAHN,CADF;AAQD,CAlBD;;AAoBAL,eAAe,CAACY,YAAhB,GAA+B;AAC7BX,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,SAAS,EAAE,eAFkB;AAG7BC,EAAAA,SAAS,EAAE;AAHkB,CAA/B;eAMeH,e","sourcesContent":["import * as React from 'react';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { ANDROID, VKCOM } from '../../lib/platform';\nimport { Icon28EditOutline, Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\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\nconst PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({\n  isActive,\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 === ANDROID || platform === VKCOM\n        ? <AndroidIcon />\n        : iOSText\n      }\n    </PanelHeaderButton>\n  );\n};\n\nPanelHeaderEdit.defaultProps = {\n  isActive: false,\n  editLabel: 'Редактировать',\n  doneLabel: 'Готово',\n};\n\nexport default PanelHeaderEdit;\n"],"file":"PanelHeaderEdit.js"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"names":["PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","Icon28DoneOutline","Icon28EditOutline","platform","ANDROID","VKCOM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAIA;;AACA;;AACA;;;;AAiBA,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE,OAK3C;AAAA,MAJ1BC,QAI0B,QAJ1BA,QAI0B;AAAA,MAH1BC,SAG0B,QAH1BA,SAG0B;AAAA,MAF1BC,SAE0B,QAF1BA,SAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,OAAO,GAAGJ,QAAQ,GAAGE,SAAH,GAAeD,SAAvC;AACA,MAAMI,WAAW,GAAGL,QAAQ,GAAGM,wBAAH,GAAuBC,wBAAnD;AACA,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,oCAAD;AAAmB,kBAAYJ;AAA/B,KAA4CD,SAA5C,GACGK,QAAQ,KAAKC,iBAAb,IAAwBD,QAAQ,KAAKE,eAArC,GAA6C,qCAAC,WAAD,OAA7C,GAA+DN,OADlE,CADF;AAKD,CAfD;;AAiBAL,eAAe,CAACY,YAAhB,GAA+B;AAC7BX,EAAAA,QAAQ,EAAE,KADmB;AAE7BC,EAAAA,SAAS,EAAE,eAFkB;AAG7BC,EAAAA,SAAS,EAAE;AAHkB,CAA/B,C,CAMA;;eACeH,e","sourcesContent":["import * as React from \"react\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { Icon28EditOutline, Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\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\nconst PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({\n  isActive,\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 === ANDROID || platform === VKCOM ? <AndroidIcon /> : iOSText}\n    </PanelHeaderButton>\n  );\n};\n\nPanelHeaderEdit.defaultProps = {\n  isActive: false,\n  editLabel: \"Редактировать\",\n  doneLabel: \"Готово\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default PanelHeaderEdit;\n"],"file":"PanelHeaderEdit.js"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
+import * as React from "react";
+import { PanelHeaderButtonProps } from "../PanelHeaderButton/PanelHeaderButton";
 declare const PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps>;
 export default PanelHeaderSubmit;

package/dist/cjs/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -36,8 +36,9 @@ var PanelHeaderSubmit = function PanelHeaderSubmit(_ref) {
 };
 
 PanelHeaderSubmit.defaultProps = {
-  children: 'Готово'
-};
+  children: "Готово"
+}; // eslint-disable-next-line import/no-default-export
+
 var _default = PanelHeaderSubmit;
 exports.default = _default;
 //# sourceMappingURL=PanelHeaderSubmit.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"names":["PanelHeaderSubmit","children","restProps","platform","ANDROID","VKCOM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,iBAAkE,GAAG,SAArEA,iBAAqE,OAG7C;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MADzBC,SACyB;AAC5B,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,oCAAD;AAAmB,kBAAY,iCAAqBF,QAArB,CAA/B;AAA+D,IAAA,OAAO;AAAtE,KAA2EC,SAA3E,GACGC,QAAQ,KAAKC,iBAAb,IAAwBD,QAAQ,KAAKE,eAArC,GACG,qCAAC,wBAAD,OADH,GAEGJ,QAHN,CADF;AAQD,CAdD;;AAgBAD,iBAAiB,CAACM,YAAlB,GAAiC;AAC/BL,EAAAA,QAAQ,EAAE;AADqB,CAAjC;eAIeD,iB","sourcesContent":["import * as React from 'react';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { ANDROID, VKCOM } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTitleFromChildren } from '../../lib/utils';\n\nconst PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({\n  children,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === ANDROID || platform === VKCOM\n        ? <Icon28DoneOutline />\n        : children\n      }\n    </PanelHeaderButton>\n  );\n};\n\nPanelHeaderSubmit.defaultProps = {\n  children: 'Готово',\n};\n\nexport default PanelHeaderSubmit;\n"],"file":"PanelHeaderSubmit.js"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"names":["PanelHeaderSubmit","children","restProps","platform","ANDROID","VKCOM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAIA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,iBAAkE,GAAG,SAArEA,iBAAqE,OAG7C;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MADzBC,SACyB;AAC5B,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE,qCAAC,oCAAD;AACE,kBAAY,iCAAqBF,QAArB,CADd;AAEE,IAAA,OAAO;AAFT,KAGMC,SAHN,GAKGC,QAAQ,KAAKC,iBAAb,IAAwBD,QAAQ,KAAKE,eAArC,GACC,qCAAC,wBAAD,OADD,GAGCJ,QARJ,CADF;AAaD,CAnBD;;AAqBAD,iBAAiB,CAACM,YAAlB,GAAiC;AAC/BL,EAAAA,QAAQ,EAAE;AADqB,CAAjC,C,CAIA;;eACeD,iB","sourcesContent":["import * as React from \"react\";\nimport {\n  PanelHeaderButton,\n  PanelHeaderButtonProps,\n} from \"../PanelHeaderButton/PanelHeaderButton\";\nimport { Icon28DoneOutline } from \"@vkontakte/icons\";\nimport { ANDROID, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { getTitleFromChildren } from \"../../lib/utils\";\n\nconst PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({\n  children,\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton\n      aria-label={getTitleFromChildren(children)}\n      primary\n      {...restProps}\n    >\n      {platform === ANDROID || platform === VKCOM ? (\n        <Icon28DoneOutline />\n      ) : (\n        children\n      )}\n    </PanelHeaderButton>\n  );\n};\n\nPanelHeaderSubmit.defaultProps = {\n  children: \"Готово\",\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default PanelHeaderSubmit;\n"],"file":"PanelHeaderSubmit.js"}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { SpinnerProps } from '../Spinner/Spinner';
+import * as React from "react";
+import { SpinnerProps } from "../Spinner/Spinner";
 export interface PanelSpinnerProps extends SpinnerProps {
     height?: number;
 }

package/dist/cjs/components/PanelSpinner/PanelSpinner.js

@@ -38,7 +38,7 @@ var PanelSpinner = function PanelSpinner(_ref) {
 
 PanelSpinner.defaultProps = {
   height: 96
-};
+}; // eslint-disable-next-line import/no-default-export
 
 var _default = /*#__PURE__*/React.memo(PanelSpinner);
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"names":["PanelSpinner","height","style","restProps","defaultProps","React","memo"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;AAMA,IAAMA,YAAwD,GAAG,SAA3DA,YAA2D,OAAwD;AAAA,MAArDC,MAAqD,QAArDA,MAAqD;AAAA,MAA7CC,KAA6C,QAA7CA,KAA6C;AAAA,MAAnCC,SAAmC;AACvH,SACE,qCAAC,gBAAD;AAAS,IAAA,IAAI,EAAC;AAAd,KAA4BA,SAA5B;AAAuC,IAAA,KAAK;AAAIF,MAAAA,MAAM,EAANA;AAAJ,OAAeC,KAAf;AAA5C,KADF;AAGD,CAJD;;AAMAF,YAAY,CAACI,YAAb,GAA4B;AAC1BH,EAAAA,MAAM,EAAE;AADkB,CAA5B;;4BAIeI,KAAK,CAACC,IAAN,CAAWN,YAAX,C","sourcesContent":["import * as React from 'react';\nimport Spinner, { SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\nconst PanelSpinner: React.FunctionComponent<PanelSpinnerProps> = ({ height, style, ...restProps }: PanelSpinnerProps) => {\n  return (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  );\n};\n\nPanelSpinner.defaultProps = {\n  height: 96,\n};\n\nexport default React.memo(PanelSpinner);\n"],"file":"PanelSpinner.js"}
+{"version":3,"sources":["../../../../src/components/PanelSpinner/PanelSpinner.tsx"],"names":["PanelSpinner","height","style","restProps","defaultProps","React","memo"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;;;AAMA,IAAMA,YAAwD,GAAG,SAA3DA,YAA2D,OAIxC;AAAA,MAHvBC,MAGuB,QAHvBA,MAGuB;AAAA,MAFvBC,KAEuB,QAFvBA,KAEuB;AAAA,MADpBC,SACoB;AACvB,SAAO,qCAAC,gBAAD;AAAS,IAAA,IAAI,EAAC;AAAd,KAA4BA,SAA5B;AAAuC,IAAA,KAAK;AAAIF,MAAAA,MAAM,EAANA;AAAJ,OAAeC,KAAf;AAA5C,KAAP;AACD,CAND;;AAQAF,YAAY,CAACI,YAAb,GAA4B;AAC1BH,EAAAA,MAAM,EAAE;AADkB,CAA5B,C,CAIA;;4BACeI,KAAK,CAACC,IAAN,CAAWN,YAAX,C","sourcesContent":["import * as React from \"react\";\nimport Spinner, { SpinnerProps } from \"../Spinner/Spinner\";\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\nconst PanelSpinner: React.FunctionComponent<PanelSpinnerProps> = ({\n  height,\n  style,\n  ...restProps\n}: PanelSpinnerProps) => {\n  return <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />;\n};\n\nPanelSpinner.defaultProps = {\n  height: 96,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default React.memo(PanelSpinner);\n"],"file":"PanelSpinner.js"}

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import './Placeholder.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import "./Placeholder.css";
 export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
     /**
      * Иконка

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

@@ -33,8 +33,8 @@ var Placeholder = function Placeholder(props) {
       restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
     ref: getRootRef,
-    vkuiClass: (0, _classNames.classNames)('Placeholder', {
-      'Placeholder--stretched': stretched
+    vkuiClass: (0, _classNames.classNames)("Placeholder", {
+      "Placeholder--stretched": stretched
     })
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Placeholder__in"
@@ -50,7 +50,8 @@ var Placeholder = function Placeholder(props) {
   }, children), (0, _utils.hasReactNode)(action) && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Placeholder__action"
   }, action)));
-};
+}; // eslint-disable-next-line import/no-default-export
+
 
 var _default = Placeholder;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"names":["Placeholder","props","icon","header","action","children","stretched","getRootRef","restProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAuBA,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,CAACC,KAAD,EAA6B;AAC3E,MACEC,IADF,GAQID,KARJ,CACEC,IADF;AAAA,MAEEC,MAFF,GAQIF,KARJ,CAEEE,MAFF;AAAA,MAGEC,MAHF,GAQIH,KARJ,CAGEG,MAHF;AAAA,MAIEC,QAJF,GAQIJ,KARJ,CAIEI,QAJF;AAAA,MAKEC,SALF,GAQIL,KARJ,CAKEK,SALF;AAAA,MAMEC,UANF,GAQIN,KARJ,CAMEM,UANF;AAAA,MAOKC,SAPL,0CAQIP,KARJ;AAUA,SACE,uEACMO,SADN;AAEE,IAAA,GAAG,EAAED,UAFP;AAGE,IAAA,SAAS,EAAE,4BAAW,aAAX,EAA0B;AACnC,gCAA0BD;AADS,KAA1B;AAHb,MAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaJ,IAAb,KAAsB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,IAApC,CADzB,EAEG,yBAAaC,MAAb,KAAwB,qCAAC,cAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC,QAAxB;AAAiC,IAAA,SAAS,EAAC;AAA3C,KAAkEA,MAAlE,CAF3B,EAGG,yBAAaE,QAAb,KAA0B,qCAAC,iBAAD;AAAU,IAAA,MAAM,EAAC,SAAjB;AAA2B,IAAA,SAAS,EAAC;AAArC,KAA0DA,QAA1D,CAH7B,EAIG,yBAAaD,MAAb,KAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,MAAtC,CAJ3B,CAPF,CADF;AAgBD,CA3BD;;eA6BeJ,W","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { hasReactNode } from '../../lib/utils';\nimport Title from '../Typography/Title/Title';\nimport Headline from '../Typography/Headline/Headline';\nimport { HasRootRef } from '../../types';\nimport './Placeholder.css';\n\nexport interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>, 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\nconst Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {\n  const {\n    icon,\n    header,\n    action,\n    children,\n    stretched,\n    getRootRef,\n    ...restProps\n  } = props;\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames('Placeholder', {\n        'Placeholder--stretched': stretched,\n      })}\n    >\n      <div vkuiClass=\"Placeholder__in\">\n        {hasReactNode(icon) && <div vkuiClass=\"Placeholder__icon\">{icon}</div>}\n        {hasReactNode(header) && <Title level=\"2\" weight=\"medium\" vkuiClass=\"Placeholder__header\">{header}</Title>}\n        {hasReactNode(children) && <Headline weight=\"regular\" vkuiClass=\"Placeholder__text\">{children}</Headline>}\n        {hasReactNode(action) && <div vkuiClass=\"Placeholder__action\">{action}</div>}\n      </div>\n    </div>\n  );\n};\n\nexport default Placeholder;\n"],"file":"Placeholder.js"}
+{"version":3,"sources":["../../../../src/components/Placeholder/Placeholder.tsx"],"names":["Placeholder","props","icon","header","action","children","stretched","getRootRef","restProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAyBA,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,CAACC,KAAD,EAA6B;AAC3E,MACEC,IADF,GAQID,KARJ,CACEC,IADF;AAAA,MAEEC,MAFF,GAQIF,KARJ,CAEEE,MAFF;AAAA,MAGEC,MAHF,GAQIH,KARJ,CAGEG,MAHF;AAAA,MAIEC,QAJF,GAQIJ,KARJ,CAIEI,QAJF;AAAA,MAKEC,SALF,GAQIL,KARJ,CAKEK,SALF;AAAA,MAMEC,UANF,GAQIN,KARJ,CAMEM,UANF;AAAA,MAOKC,SAPL,0CAQIP,KARJ;AAUA,SACE,uEACMO,SADN;AAEE,IAAA,GAAG,EAAED,UAFP;AAGE,IAAA,SAAS,EAAE,4BAAW,aAAX,EAA0B;AACnC,gCAA0BD;AADS,KAA1B;AAHb,MAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaJ,IAAb,KAAsB;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,IAApC,CADzB,EAEG,yBAAaC,MAAb,KACC,qCAAC,cAAD;AAAO,IAAA,KAAK,EAAC,GAAb;AAAiB,IAAA,MAAM,EAAC,QAAxB;AAAiC,IAAA,SAAS,EAAC;AAA3C,KACGA,MADH,CAHJ,EAOG,yBAAaE,QAAb,KACC,qCAAC,iBAAD;AAAU,IAAA,MAAM,EAAC,SAAjB;AAA2B,IAAA,SAAS,EAAC;AAArC,KACGA,QADH,CARJ,EAYG,yBAAaD,MAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAsCA,MAAtC,CAbJ,CAPF,CADF;AA0BD,CArCD,C,CAuCA;;;eACeJ,W","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Title from \"../Typography/Title/Title\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport { HasRootRef } from \"../../types\";\nimport \"./Placeholder.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\nconst Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {\n  const {\n    icon,\n    header,\n    action,\n    children,\n    stretched,\n    getRootRef,\n    ...restProps\n  } = props;\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\"Placeholder\", {\n        \"Placeholder--stretched\": stretched,\n      })}\n    >\n      <div vkuiClass=\"Placeholder__in\">\n        {hasReactNode(icon) && <div vkuiClass=\"Placeholder__icon\">{icon}</div>}\n        {hasReactNode(header) && (\n          <Title level=\"2\" weight=\"medium\" vkuiClass=\"Placeholder__header\">\n            {header}\n          </Title>\n        )}\n        {hasReactNode(children) && (\n          <Headline weight=\"regular\" vkuiClass=\"Placeholder__text\">\n            {children}\n          </Headline>\n        )}\n        {hasReactNode(action) && (\n          <div vkuiClass=\"Placeholder__action\">{action}</div>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default Placeholder;\n"],"file":"Placeholder.js"}

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import { AdaptivityProps } from '../../hoc/withAdaptivity';
-import './PopoutRoot.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { AdaptivityContextInterface, AdaptivityProps } from "../AdaptivityProvider/AdaptivityContext";
+import "./PopoutRoot.css";
 export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps, HasRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRootComponent: React.FC<PopoutRootProps>;
-export declare const PopoutRoot: React.FC<PopoutRootProps>;
+export declare const PopoutRootComponent: React.FC<PopoutRootProps & AdaptivityContextInterface>;
+export declare const PopoutRoot: React.FC<Pick<PopoutRootProps & AdaptivityContextInterface, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "popout" | "modal" | "getRootRef"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

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

@@ -7,7 +7,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopoutRoot = exports.PopoutRootComponent = void 0;
+exports.PopoutRootComponent = exports.PopoutRoot = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
@@ -41,19 +41,19 @@ var PopoutRootComponent = function PopoutRootComponent(props) {
   var isDesktop = viewWidth >= _withAdaptivity.ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= _withAdaptivity.ViewHeight.MEDIUM);
   React.useEffect(function () {
     popout && (0, _dom.blurActiveElement)(document);
-  }, [!!popout]);
+  }, [document, popout]);
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
     vkuiClass: "PopoutRoot",
     ref: getRootRef
   }), children, (0, _jsxRuntime.createScopedElement)(_AppRootPortal.AppRootPortal, null, !!popout && (0, _jsxRuntime.createScopedElement)("div", {
-    vkuiClass: isDesktop ? 'PopoutRoot--absolute' : 'PopoutRoot__popout'
+    vkuiClass: isDesktop ? "PopoutRoot--absolute" : "PopoutRoot__popout"
   }, popout), !!modal && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PopoutRoot__modal"
   }, modal)));
 };
 
 exports.PopoutRootComponent = PopoutRootComponent;
-PopoutRootComponent.displayName = 'PopoutRoot';
+PopoutRootComponent.displayName = "PopoutRoot";
 var PopoutRoot = (0, _withAdaptivity.withAdaptivity)(PopoutRootComponent, {
   viewWidth: true,
   viewHeight: true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":["PopoutRootComponent","props","popout","modal","viewWidth","viewHeight","hasMouse","children","getRootRef","restProps","document","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","React","useEffect","displayName","PopoutRoot"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAQO,IAAMA,mBAA8C,GAAG,SAAjDA,mBAAiD,CAACC,KAAD,EAA4B;AACxF,MAAQC,MAAR,GAA+FD,KAA/F,CAAQC,MAAR;AAAA,MAAgBC,KAAhB,GAA+FF,KAA/F,CAAgBE,KAAhB;AAAA,MAAuBC,SAAvB,GAA+FH,KAA/F,CAAuBG,SAAvB;AAAA,MAAkCC,UAAlC,GAA+FJ,KAA/F,CAAkCI,UAAlC;AAAA,MAA8CC,QAA9C,GAA+FL,KAA/F,CAA8CK,QAA9C;AAAA,MAAwDC,QAAxD,GAA+FN,KAA/F,CAAwDM,QAAxD;AAAA,MAAkEC,UAAlE,GAA+FP,KAA/F,CAAkEO,UAAlE;AAAA,MAAiFC,SAAjF,0CAA+FR,KAA/F;;AACA,gBAAqB,kBAArB;AAAA,MAAQS,QAAR,WAAQA,QAAR;;AAEA,MAAMC,SAAS,GAAGP,SAAS,IAAIQ,0BAAUC,YAAvB,KAAwCP,QAAQ,IAAID,UAAU,IAAIS,2BAAWC,MAA7E,CAAlB;AAEAC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpBf,IAAAA,MAAM,IAAI,4BAAkBQ,QAAlB,CAAV;AACD,GAFD,EAEG,CAAC,CAAC,CAACR,MAAH,CAFH;AAIA,SACE,uEACMO,SADN;AAEE,IAAA,SAAS,EAAC,YAFZ;AAGE,IAAA,GAAG,EAAED;AAHP,MAKGD,QALH,EAME,qCAAC,4BAAD,QACG,CAAC,CAACL,MAAF,IAAY;AAAK,IAAA,SAAS,EAAES,SAAS,GAAG,sBAAH,GAA4B;AAArD,KAA4ET,MAA5E,CADf,EAEG,CAAC,CAACC,KAAF,IAAW;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,KAApC,CAFd,CANF,CADF;AAaD,CAvBM;;;AAyBPH,mBAAmB,CAACkB,WAApB,GAAkC,YAAlC;AAEO,IAAMC,UAAU,GAAG,oCAAenB,mBAAf,EAAoC;AAC5DI,EAAAA,SAAS,EAAE,IADiD;AAE5DC,EAAAA,UAAU,EAAE,IAFgD;AAG5DC,EAAAA,QAAQ,EAAE;AAHkD,CAApC,CAAnB","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { withAdaptivity, ViewWidth, ViewHeight, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport './PopoutRoot.css';\n\nexport interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps, HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRootComponent: React.FC<PopoutRootProps> = (props: PopoutRootProps) => {\n  const { popout, modal, viewWidth, viewHeight, hasMouse, children, getRootRef, ...restProps } = props;\n  const { document } = useDOM();\n\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [!!popout]);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass=\"PopoutRoot\"\n      ref={getRootRef}\n    >\n      {children}\n      <AppRootPortal>\n        {!!popout && <div vkuiClass={isDesktop ? 'PopoutRoot--absolute' : 'PopoutRoot__popout'}>{popout}</div>}\n        {!!modal && <div vkuiClass=\"PopoutRoot__modal\">{modal}</div>}\n      </AppRootPortal>\n    </div>\n  );\n};\n\nPopoutRootComponent.displayName = 'PopoutRoot';\n\nexport const PopoutRoot = withAdaptivity(PopoutRootComponent, {\n  viewWidth: true,\n  viewHeight: true,\n  hasMouse: true,\n});\n"],"file":"PopoutRoot.js"}
+{"version":3,"sources":["../../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":["PopoutRootComponent","props","popout","modal","viewWidth","viewHeight","hasMouse","children","getRootRef","restProps","document","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","React","useEffect","displayName","PopoutRoot"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEA;;AAKA;;AACA;;;;AAeO,IAAMA,mBAEZ,GAAG,SAFSA,mBAET,CAACC,KAAD,EAAW;AACb,MACEC,MADF,GASID,KATJ,CACEC,MADF;AAAA,MAEEC,KAFF,GASIF,KATJ,CAEEE,KAFF;AAAA,MAGEC,SAHF,GASIH,KATJ,CAGEG,SAHF;AAAA,MAIEC,UAJF,GASIJ,KATJ,CAIEI,UAJF;AAAA,MAKEC,QALF,GASIL,KATJ,CAKEK,QALF;AAAA,MAMEC,QANF,GASIN,KATJ,CAMEM,QANF;AAAA,MAOEC,UAPF,GASIP,KATJ,CAOEO,UAPF;AAAA,MAQKC,SARL,0CASIR,KATJ;;AAUA,gBAAqB,kBAArB;AAAA,MAAQS,QAAR,WAAQA,QAAR;;AAEA,MAAMC,SAAS,GACbP,SAAS,IAAIQ,0BAAUC,YAAvB,KACCP,QAAQ,IAAID,UAAU,IAAIS,2BAAWC,MADtC,CADF;AAIAC,EAAAA,KAAK,CAACC,SAAN,CAAgB,YAAM;AACpBf,IAAAA,MAAM,IAAI,4BAAkBQ,QAAlB,CAAV;AACD,GAFD,EAEG,CAACA,QAAD,EAAWR,MAAX,CAFH;AAIA,SACE,uEAASO,SAAT;AAAoB,IAAA,SAAS,EAAC,YAA9B;AAA2C,IAAA,GAAG,EAAED;AAAhD,MACGD,QADH,EAEE,qCAAC,4BAAD,QACG,CAAC,CAACL,MAAF,IACC;AACE,IAAA,SAAS,EACPS,SAAS,GAAG,sBAAH,GAA4B;AAFzC,KAKGT,MALH,CAFJ,EAUG,CAAC,CAACC,KAAF,IAAW;AAAK,IAAA,SAAS,EAAC;AAAf,KAAoCA,KAApC,CAVd,CAFF,CADF;AAiBD,CAxCM;;;AA0CPH,mBAAmB,CAACkB,WAApB,GAAkC,YAAlC;AAEO,IAAMC,UAAU,GAAG,oCAAenB,mBAAf,EAAoC;AAC5DI,EAAAA,SAAS,EAAE,IADiD;AAE5DC,EAAAA,UAAU,EAAE,IAFgD;AAG5DC,EAAAA,QAAQ,EAAE;AAHkD,CAApC,CAAnB","sourcesContent":["import * as React from \"react\";\nimport { HasRootRef } from \"../../types\";\nimport {\n  withAdaptivity,\n  ViewWidth,\n  ViewHeight,\n} from \"../../hoc/withAdaptivity\";\nimport { AppRootPortal } from \"../AppRoot/AppRootPortal\";\nimport { blurActiveElement, useDOM } from \"../../lib/dom\";\nimport {\n  AdaptivityContextInterface,\n  AdaptivityProps,\n} from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./PopoutRoot.css\";\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    AdaptivityProps,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRootComponent: React.FC<\n  PopoutRootProps & AdaptivityContextInterface\n> = (props) => {\n  const {\n    popout,\n    modal,\n    viewWidth,\n    viewHeight,\n    hasMouse,\n    children,\n    getRootRef,\n    ...restProps\n  } = props;\n  const { document } = useDOM();\n\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} vkuiClass=\"PopoutRoot\" ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && (\n          <div\n            vkuiClass={\n              isDesktop ? \"PopoutRoot--absolute\" : \"PopoutRoot__popout\"\n            }\n          >\n            {popout}\n          </div>\n        )}\n        {!!modal && <div vkuiClass=\"PopoutRoot__modal\">{modal}</div>}\n      </AppRootPortal>\n    </div>\n  );\n};\n\nPopoutRootComponent.displayName = \"PopoutRoot\";\n\nexport const PopoutRoot = withAdaptivity(PopoutRootComponent, {\n  viewWidth: true,\n  viewHeight: true,\n  hasMouse: true,\n});\n"],"file":"PopoutRoot.js"}

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import './PopoutWrapper.css';
+import * as React from "react";
+import "./PopoutWrapper.css";
 export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
     hasMask?: boolean;
     fixed?: boolean;
-    alignY?: 'top' | 'center' | 'bottom';
-    alignX?: 'left' | 'center' | 'right';
+    alignY?: "top" | "center" | "bottom";
+    alignX?: "left" | "center" | "right";
     closing?: boolean;
 }
 export declare const PopoutWrapper: React.FC<PopoutWrapperProps>;

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

@@ -37,9 +37,9 @@ var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children",
 
 var PopoutWrapper = function PopoutWrapper(_ref) {
   var _ref$alignY = _ref.alignY,
-      alignY = _ref$alignY === void 0 ? 'center' : _ref$alignY,
+      alignY = _ref$alignY === void 0 ? "center" : _ref$alignY,
       _ref$alignX = _ref.alignX,
-      alignX = _ref$alignX === void 0 ? 'center' : _ref$alignX,
+      alignX = _ref$alignX === void 0 ? "center" : _ref$alignX,
       _ref$closing = _ref.closing,
       closing = _ref$closing === void 0 ? false : _ref$closing,
       _ref$hasMask = _ref.hasMask,
@@ -56,10 +56,10 @@ var PopoutWrapper = function PopoutWrapper(_ref) {
       opened = _React$useState2[0],
       setOpened = _React$useState2[1];
 
-  var elRef = React.useRef();
+  var elRef = React.useRef(null);
 
   var onFadeInEnd = function onFadeInEnd(e) {
-    if (!e || e.animationName === 'vkui-animation-full-fade-in') {
+    if (!e || e.animationName === "vkui-animation-full-fade-in") {
       setOpened(true);
     }
   };
@@ -67,25 +67,25 @@ var PopoutWrapper = function PopoutWrapper(_ref) {
   var animationFinishFallback = (0, _useTimeout.useTimeout)(onFadeInEnd, platform === _platform.IOS ? 300 : 200);
   React.useEffect(function () {
     !opened && animationFinishFallback.set();
-  }, []);
+  }, [animationFinishFallback, opened]);
 
   var _useDOM = (0, _dom.useDOM)(),
       window = _useDOM.window;
 
-  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'touchmove', function (e) {
+  (0, _useGlobalEventListener.useGlobalEventListener)(window, "touchmove", function (e) {
     return e.preventDefault();
   }, {
     passive: false
   });
-  var baseClassNames = (0, _getClassName.getClassName)('PopoutWrapper', platform);
+  var baseClassNames = (0, _getClassName.getClassName)("PopoutWrapper", platform);
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
     vkuiClass: (0, _classNames.classNames)(baseClassNames, "PopoutWrapper--v-".concat(alignY), "PopoutWrapper--h-".concat(alignX), {
-      'PopoutWrapper--closing': closing,
-      'PopoutWrapper--opened': opened,
-      'PopoutWrapper--fixed': fixed,
-      'PopoutWrapper--masked': hasMask
+      "PopoutWrapper--closing": closing,
+      "PopoutWrapper--opened": opened,
+      "PopoutWrapper--fixed": fixed,
+      "PopoutWrapper--masked": hasMask
     }),
-    onAnimationEnd: opened ? null : onFadeInEnd,
+    onAnimationEnd: opened ? undefined : onFadeInEnd,
     ref: elRef
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "PopoutWrapper__container"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","baseClassNames"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAWO,IAAMA,aAA2C,GAAG,SAA9CA,aAA8C,OASjC;AAAA,yBARxBC,MAQwB;AAAA,MARxBA,MAQwB,4BARf,QAQe;AAAA,yBAPxBC,MAOwB;AAAA,MAPxBA,MAOwB,4BAPf,QAOe;AAAA,0BANxBC,OAMwB;AAAA,MANxBA,OAMwB,6BANd,KAMc;AAAA,0BALxBC,OAKwB;AAAA,MALxBA,OAKwB,6BALd,IAKc;AAAA,wBAJxBC,KAIwB;AAAA,MAJxBA,KAIwB,2BAJhB,IAIgB;AAAA,MAHxBC,QAGwB,QAHxBA,QAGwB;AAAA,MAFxBC,OAEwB,QAFxBA,OAEwB;AAAA,MADrBC,SACqB;AACxB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,wBAA4BC,KAAK,CAACC,QAAN,CAAe,CAACP,OAAhB,CAA5B;AAAA;AAAA,MAAOQ,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,KAAK,GAAGJ,KAAK,CAACK,MAAN,EAAd;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAA8B;AAChD,QAAI,CAACA,CAAD,IAAMA,CAAC,CAACC,aAAF,KAAoB,6BAA9B,EAA6D;AAC3DL,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD;AACF,GAJD;;AAKA,MAAMM,uBAAuB,GAAG,4BAAWH,WAAX,EAAwBP,QAAQ,KAAKW,aAAb,GAAmB,GAAnB,GAAyB,GAAjD,CAAhC;AACAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,KAACT,MAAD,IAAWO,uBAAuB,CAACG,GAAxB,EAAX;AACD,GAFD,EAEG,EAFH;;AAIA,gBAAmB,kBAAnB;AAAA,MAAQC,MAAR,WAAQA,MAAR;;AACA,sDAAuBA,MAAvB,EAA+B,WAA/B,EAA4C,UAACN,CAAD;AAAA,WAAOA,CAAC,CAACO,cAAF,EAAP;AAAA,GAA5C,EAAuE;AAAEC,IAAAA,OAAO,EAAE;AAAX,GAAvE;AAEA,MAAMC,cAAc,GAAG,gCAAa,eAAb,EAA8BjB,QAA9B,CAAvB;AAEA,SACE,uEACMD,SADN;AAEE,IAAA,SAAS,EAAE,4BAAWkB,cAAX,6BAA+CzB,MAA/C,8BAA6EC,MAA7E,GAAuF;AAChG,gCAA0BC,OADsE;AAEhG,+BAAyBS,MAFuE;AAGhG,8BAAwBP,KAHwE;AAIhG,+BAAyBD;AAJuE,KAAvF,CAFb;AAQE,IAAA,cAAc,EAAEQ,MAAM,GAAG,IAAH,GAAUI,WARlC;AASE,IAAA,GAAG,EAAEF;AATP,MAWE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AACE,IAAA,SAAS,EAAC,wBADZ;AAEE,IAAA,OAAO,EAAEP;AAFX,IADF,EAIE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,QADH,CAJF,CAXF,CADF;AAsBD,CAnDM","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { IOS } from '../../lib/platform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport './PopoutWrapper.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\nexport const PopoutWrapper: React.FC<PopoutWrapperProps> = ({\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  const elRef = React.useRef<HTMLDivElement>();\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === 'vkui-animation-full-fade-in') {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, []);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), { passive: false });\n\n  const baseClassNames = getClassName('PopoutWrapper', platform);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(baseClassNames, `PopoutWrapper--v-${alignY}`, `PopoutWrapper--h-${alignX}`, {\n        'PopoutWrapper--closing': closing,\n        'PopoutWrapper--opened': opened,\n        'PopoutWrapper--fixed': fixed,\n        'PopoutWrapper--masked': hasMask,\n      })}\n      onAnimationEnd={opened ? null : onFadeInEnd}\n      ref={elRef}\n    >\n      <div vkuiClass=\"PopoutWrapper__container\">\n        <div\n          vkuiClass=\"PopoutWrapper__overlay\"\n          onClick={onClick} />\n        <div vkuiClass=\"PopoutWrapper__content\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"file":"PopoutWrapper.js"}
+{"version":3,"sources":["../../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","restProps","platform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","baseClassNames","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYO,IAAMA,aAA2C,GAAG,SAA9CA,aAA8C,OASjC;AAAA,yBARxBC,MAQwB;AAAA,MARxBA,MAQwB,4BARf,QAQe;AAAA,yBAPxBC,MAOwB;AAAA,MAPxBA,MAOwB,4BAPf,QAOe;AAAA,0BANxBC,OAMwB;AAAA,MANxBA,OAMwB,6BANd,KAMc;AAAA,0BALxBC,OAKwB;AAAA,MALxBA,OAKwB,6BALd,IAKc;AAAA,wBAJxBC,KAIwB;AAAA,MAJxBA,KAIwB,2BAJhB,IAIgB;AAAA,MAHxBC,QAGwB,QAHxBA,QAGwB;AAAA,MAFxBC,OAEwB,QAFxBA,OAEwB;AAAA,MADrBC,SACqB;AACxB,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,wBAA4BC,KAAK,CAACC,QAAN,CAAe,CAACP,OAAhB,CAA5B;AAAA;AAAA,MAAOQ,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,KAAK,GAAGJ,KAAK,CAACK,MAAN,CAA6B,IAA7B,CAAd;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAA8B;AAChD,QAAI,CAACA,CAAD,IAAMA,CAAC,CAACC,aAAF,KAAoB,6BAA9B,EAA6D;AAC3DL,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD;AACF,GAJD;;AAKA,MAAMM,uBAAuB,GAAG,4BAC9BH,WAD8B,EAE9BP,QAAQ,KAAKW,aAAb,GAAmB,GAAnB,GAAyB,GAFK,CAAhC;AAIAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,KAACT,MAAD,IAAWO,uBAAuB,CAACG,GAAxB,EAAX;AACD,GAFD,EAEG,CAACH,uBAAD,EAA0BP,MAA1B,CAFH;;AAIA,gBAAmB,kBAAnB;AAAA,MAAQW,MAAR,WAAQA,MAAR;;AACA,sDAAuBA,MAAvB,EAA+B,WAA/B,EAA4C,UAACN,CAAD;AAAA,WAAOA,CAAC,CAACO,cAAF,EAAP;AAAA,GAA5C,EAAuE;AACrEC,IAAAA,OAAO,EAAE;AAD4D,GAAvE;AAIA,MAAMC,cAAc,GAAG,gCAAa,eAAb,EAA8BjB,QAA9B,CAAvB;AAEA,SACE,uEACMD,SADN;AAEE,IAAA,SAAS,EAAE,4BACTkB,cADS,6BAEWzB,MAFX,8BAGWC,MAHX,GAIT;AACE,gCAA0BC,OAD5B;AAEE,+BAAyBS,MAF3B;AAGE,8BAAwBP,KAH1B;AAIE,+BAAyBD;AAJ3B,KAJS,CAFb;AAaE,IAAA,cAAc,EAAEQ,MAAM,GAAGe,SAAH,GAAeX,WAbvC;AAcE,IAAA,GAAG,EAAEF;AAdP,MAgBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC,wBAAf;AAAwC,IAAA,OAAO,EAAEP;AAAjD,IADF,EAEE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAyCD,QAAzC,CAFF,CAhBF,CADF;AAuBD,CAzDM","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS } from \"../../lib/platform\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useDOM } from \"../../lib/dom\";\nimport \"./PopoutWrapper.css\";\n\nexport interface PopoutWrapperProps\n  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\nexport const PopoutWrapper: React.FC<PopoutWrapperProps> = ({\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  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === \"vkui-animation-full-fade-in\") {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(\n    onFadeInEnd,\n    platform === IOS ? 300 : 200\n  );\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  const baseClassNames = getClassName(\"PopoutWrapper\", platform);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        baseClassNames,\n        `PopoutWrapper--v-${alignY}`,\n        `PopoutWrapper--h-${alignX}`,\n        {\n          \"PopoutWrapper--closing\": closing,\n          \"PopoutWrapper--opened\": opened,\n          \"PopoutWrapper--fixed\": fixed,\n          \"PopoutWrapper--masked\": hasMask,\n        }\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\n    >\n      <div vkuiClass=\"PopoutWrapper__container\">\n        <div vkuiClass=\"PopoutWrapper__overlay\" onClick={onClick} />\n        <div vkuiClass=\"PopoutWrapper__content\">{children}</div>\n      </div>\n    </div>\n  );\n};\n"],"file":"PopoutWrapper.js"}

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { HasRef } from '../../types';
-import './Popper.css';
-export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
-export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLElement> {
+import * as React from "react";
+import { HasRef } from "../../types";
+import "./Popper.css";
+export declare type Placement = "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | "top" | "bottom" | "left" | "right";
+export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
@@ -17,11 +17,16 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, Ha
     offsetDistance?: number;
     arrow?: boolean;
     arrowClassName?: string;
+    /**
+     * Выставлять ширину равной target элементу
+     */
+    sameWidth?: boolean;
+    forcePortal?: boolean;
     onPlacementChange?: (data: {
         placement?: Placement;
     }) => void;
 }
 export interface PopperProps extends PopperCommonProps {
-    targetRef?: React.RefObject<HTMLElement>;
+    targetRef: React.RefObject<HTMLElement>;
 }
 export declare const Popper: React.FC<PopperProps>;