@vkontakte/vkui 5.6.2 → 5.7.0

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SharedDropdownProps } from './types';
-export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance'>, React.HTMLAttributes<HTMLDivElement> {
+export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'>, React.HTMLAttributes<HTMLDivElement> {
     header?: React.ReactNode;
     text?: React.ReactNode;
     /**
@@ -8,11 +8,11 @@ export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef'
      */
     onClose: VoidFunction;
     /**
-     * Только iOS.
+     * Только мобильный iOS.
      */
-    iosCloseItem: React.ReactNode;
+    iosCloseItem?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */
-export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, ...restProps }: ActionSheetProps) => React.JSX.Element;
+export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, placement, ...restProps }: ActionSheetProps) => React.JSX.Element;

package/dist/cjs/components/ActionSheet/ActionSheet.js

@@ -20,14 +20,17 @@ var _useObjectMemo = require("../../hooks/useObjectMemo");
 var _usePlatform = require("../../hooks/usePlatform");
 var _useTimeout = require("../../hooks/useTimeout");
 var _platform = require("../../lib/platform");
+var _warnOnce = require("../../lib/warnOnce");
 var _ScrollContext = require("../AppRoot/ScrollContext");
 var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
 var _Footnote = require("../Typography/Footnote/Footnote");
 var _ActionSheetContext = require("./ActionSheetContext");
+var _ActionSheetDefaultIosCloseItem = require("./ActionSheetDefaultIosCloseItem");
 var _ActionSheetDropdown = require("./ActionSheetDropdown");
 var _ActionSheetDropdownDesktop = require("./ActionSheetDropdownDesktop");
+var warn = (0, _warnOnce.warnOnce)("ActionSheet");
 var ActionSheet = function(_param) {
-    var children = _param.children, className = _param.className, header = _param.header, text = _param.text, style = _param.style, iosCloseItem = _param.iosCloseItem, _param_popupDirection = _param.popupDirection, popupDirection = _param_popupDirection === void 0 ? "bottom" : _param_popupDirection, popupOffsetDistance = _param.popupOffsetDistance, restProps = _object_without_properties._(_param, [
+    var children = _param.children, className = _param.className, header = _param.header, text = _param.text, style = _param.style, iosCloseItem = _param.iosCloseItem, popupDirection = _param.popupDirection, popupOffsetDistance = _param.popupOffsetDistance, placement = _param.placement, restProps = _object_without_properties._(_param, [
         "children",
         "className",
         "header",
@@ -35,7 +38,8 @@ var ActionSheet = function(_param) {
         "style",
         "iosCloseItem",
         "popupDirection",
-        "popupOffsetDistance"
+        "popupOffsetDistance",
+        "placement"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var _React_useState = _sliced_to_array._(_react.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
@@ -84,9 +88,15 @@ var ActionSheet = function(_param) {
         isDesktop: isDesktop
     });
     var DropdownComponent = isDesktop ? _ActionSheetDropdownDesktop.ActionSheetDropdownDesktop : _ActionSheetDropdown.ActionSheetDropdown;
+    if (process.env.NODE_ENV === "development" && popupDirection) {
+        // TODO [>=6]: popupDirection
+        warn('Свойство "popupDirection" будет удалено в v6. Используйте свойство "placement"');
+    }
+    popupDirection = popupDirection !== undefined ? popupDirection : "bottom";
     var dropdownProps = isDesktop ? Object.assign(restProps, {
         popupOffsetDistance: popupOffsetDistance,
-        popupDirection: popupDirection
+        popupDirection: popupDirection,
+        placement: placement
     }) : restProps;
     var actionSheet = /*#__PURE__*/ _react.createElement(_ActionSheetContext.ActionSheetContext.Provider, {
         value: contextValue
@@ -104,7 +114,7 @@ var ActionSheet = function(_param) {
         className: "vkuiActionSheet__title"
     }, header), text && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiActionSheet__text"
-    }, text)), children, platform === _platform.Platform.IOS && !isDesktop && iosCloseItem));
+    }, text)), children, platform === _platform.Platform.IOS && !isDesktop && (iosCloseItem !== null && iosCloseItem !== void 0 ? iosCloseItem : /*#__PURE__*/ _react.createElement(_ActionSheetDefaultIosCloseItem.ActionSheetDefaultIosCloseItem, null))));
     if (isDesktop) {
         return actionSheet;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: VoidFunction;\n  /**\n   * Только iOS.\n   */\n  iosCloseItem: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection = 'bottom',\n  popupOffsetDistance,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose();\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    (action, immediateAction, autoClose) => (event) => {\n      event.persist();\n      immediateAction && immediateAction(event);\n      if (autoClose) {\n        _action.current = () => action && action(event);\n        setClosing(true);\n      } else {\n        action && action(event);\n      }\n    },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={closing}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS && !isDesktop && iosCloseItem}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","restProps","platform","usePlatform","React","useState","closing","setClosing","onClose","_action","useRef","noop","afterClose","current","isDesktop","useAdaptivityWithJSMediaQueries","useScrollLock","timeout","Platform","IOS","fallbackTransitionFinish","useTimeout","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","useObjectMemo","DropdownComponent","ActionSheetDropdownDesktop","ActionSheetDropdown","dropdownProps","Object","assign","actionSheet","ActionSheetContext","Provider","value","undefined","Footnote","weight","PopoutWrapper","alignY","onClick","hasMask","fixed"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;+DAlCU;oBACF;+CAC2B;6BAClB;2BACF;0BACD;wBACF;6BACK;6BACA;wBACL;kCAC4B;mCACjB;0CACO;AAsBpC,IAAMA,cAAc;QACzBC,kBAAAA,UACAC,mBAAAA,WACAC,gBAAAA,QACAC,cAAAA,MACAC,eAAAA,OACAC,sBAAAA,6CACAC,gBAAAA,oDAAiB,kCACjBC,6BAAAA,qBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAA8BC,qCAAAA,OAAMC,QAAQ,CAAC,YAAtCC,UAAuBF,oBAAdG,aAAcH;IAC9B,IAAMI,UAAU;eAAMD,WAAW;;IACjC,IAAME,UAAUL,OAAMM,MAAM,CAACC,UAAI;IAEjC,IAAMC,aAAa;QACjBX,UAAUO,OAAO;QACjBC,QAAQI,OAAO;QACfJ,QAAQI,OAAO,GAAGF,UAAI;IACxB;IAEA,IAAM,AAAEG,YAAcC,IAAAA,gEAA+B,IAA7CD;IAERE,IAAAA,4BAAa,EAAC,CAACF;IAEf,IAAIG,UAAUf,aAAagB,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAEhD,IAAIL,WAAW;QACbG,UAAU;IACZ;IAEA,IAAMG,2BAA2BC,IAAAA,sBAAU,EAACT,YAAYK;IACxDb,OAAMkB,SAAS,CAAC;QACd,IAAIhB,SAAS;YACXc,yBAAyBG,GAAG;QAC9B,OAAO;YACLH,yBAAyBI,KAAK;QAChC;IACF,GAAG;QAAClB;QAASc;KAAyB;IAEtC,IAAMK,cAAcrB,OAAMsB,WAAW,CACnC,SAACC,QAAQC,iBAAiBC;eAAc,SAACC;YACvCA,MAAMC,OAAO;YACbH,mBAAmBA,gBAAgBE;YACnC,IAAID,WAAW;gBACbpB,QAAQI,OAAO,GAAG;2BAAMc,UAAUA,OAAOG;;gBACzCvB,WAAW;YACb,OAAO;gBACLoB,UAAUA,OAAOG;YACnB;QACF;OACA,EAAE;IAEJ,IAAME,eAAeC,IAAAA,4BAAa,EAAC;QAAER,aAAAA;QAAaX,WAAAA;IAAU;IAE5D,IAAMoB,oBAAoBpB,YAAYqB,sDAA0B,GAAGC,wCAAmB;IAEtF,IAAMC,gBAAgBvB,YAClBwB,OAAOC,MAAM,CAACtC,WAAW;QAAED,qBAAAA;QAAqBD,gBAAAA;IAAe,KAC/DE;IAEJ,IAAMuC,4BACJ,qBAACC,sCAAkB,CAACC,QAAQ;QAACC,OAAOX;qBAClC,qBAACE;QACC5B,SAASA;QACTW,SAASA;OACLoB;QACJ7B,SAASA;QACTd,WAAWoB,YAAYpB,YAAYkD;QACnC/C,OAAOiB,YAAYjB,QAAQ+C;QAE1B,AAACjD,CAAAA,UAAUC,IAAG,mBACb,qBAACD;QAAOD,SAAS;OACdC,wBACC,qBAACkD,kBAAQ;QAACC,QAAO;QAAIpD,SAAS;OAC3BC,SAGJC,sBAAQ,qBAACiD,kBAAQ;QAACnD,SAAS;OAAgCE,QAG/DH,UACAS,aAAagB,kBAAQ,CAACC,GAAG,IAAI,CAACL,aAAahB;IAKlD,IAAIgB,WAAW;QACb,OAAO0B;IACT;IAEA,qBACE,qBAACO,4BAAa;QACZzC,SAASA;QACT0C,QAAO;QACPtD,WAAWA;QACXG,OAAOA;QACPoD,SAASzC;QACT0C,SAAAA;QACAC,OAAAA;OAECX;AAGP"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: VoidFunction;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose();\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    (action, immediateAction, autoClose) => (event) => {\n      event.persist();\n      immediateAction && immediateAction(event);\n      if (autoClose) {\n        _action.current = () => action && action(event);\n        setClosing(true);\n      } else {\n        action && action(event);\n      }\n    },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={closing}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS &&\n          !isDesktop &&\n          (iosCloseItem ?? <ActionSheetDefaultIosCloseItem />)}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["ActionSheet","warn","warnOnce","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","usePlatform","React","useState","closing","setClosing","onClose","_action","useRef","noop","afterClose","current","isDesktop","useAdaptivityWithJSMediaQueries","useScrollLock","timeout","Platform","IOS","fallbackTransitionFinish","useTimeout","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","useObjectMemo","DropdownComponent","ActionSheetDropdownDesktop","ActionSheetDropdown","process","env","NODE_ENV","undefined","dropdownProps","Object","assign","actionSheet","ActionSheetContext","Provider","value","Footnote","weight","ActionSheetDefaultIosCloseItem","PopoutWrapper","alignY","onClick","hasMask","fixed"],"mappings":"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"}

package/dist/cjs/components/ActionSheet/ActionSheetDropdown.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { SharedDropdownProps } from './types';
-export type ActionSheetDropdownProps = Omit<SharedDropdownProps, 'popupDirection' | 'popupOffsetDistance'>;
+export type ActionSheetDropdownProps = Omit<SharedDropdownProps, 'popupDirection' | 'popupOffsetDistance' | 'placement'>;
 export declare const ActionSheetDropdown: ({ children, closing, toggleRef, className, ...restProps }: SharedDropdownProps) => React.JSX.Element;

package/dist/cjs/components/ActionSheet/ActionSheetDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport type ActionSheetDropdownProps = Omit<\n  SharedDropdownProps,\n  'popupDirection' | 'popupOffsetDistance'\n>;\n\nexport const ActionSheetDropdown = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  className,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        closing && styles['ActionSheet--closing'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["ActionSheetDropdown","stopPropagation","e","children","closing","toggleRef","className","restProps","sizeY","useAdaptivityWithJSMediaQueries","platform","usePlatform","FocusTrap","onClick","classNames","Platform","IOS","SizeType","COMPACT"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;+CACqB;2BACpB;0BACH;wBACA;yBACC;AAI1B,IAAMC,kBAA2C,SAACC;WAAMA,EAAED,eAAe;;AAOlE,IAAMD,sBAAsB;QACjCG,kBAAAA,UACAC,iBAAAA,SACA,6DAA6D;IAC7DC,mBAAAA,WACAC,mBAAAA,WACGC;QALHJ;QACAC;QAEAC;QACAC;;IAGA,IAAM,AAAEE,QAAUC,IAAAA,gEAA+B,IAAzCD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oBAAS,8CACJL;QACJM,SAASZ;QACTK,WAAWQ,IAAAA,gBAAU,qBAEnBJ,aAAaK,kBAAQ,CAACC,GAAG,4BACzBZ,uCACAI,UAAUS,oBAAQ,CAACC,OAAO,sCAC1BZ;QAGDH;AAGP"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport type ActionSheetDropdownProps = Omit<\n  SharedDropdownProps,\n  'popupDirection' | 'popupOffsetDistance' | 'placement'\n>;\n\nexport const ActionSheetDropdown = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  className,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        closing && styles['ActionSheet--closing'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["ActionSheetDropdown","stopPropagation","e","children","closing","toggleRef","className","restProps","sizeY","useAdaptivityWithJSMediaQueries","platform","usePlatform","FocusTrap","onClick","classNames","Platform","IOS","SizeType","COMPACT"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;+CACqB;2BACpB;0BACH;wBACA;yBACC;AAI1B,IAAMC,kBAA2C,SAACC;WAAMA,EAAED,eAAe;;AAOlE,IAAMD,sBAAsB;QACjCG,kBAAAA,UACAC,iBAAAA,SACA,6DAA6D;IAC7DC,mBAAAA,WACAC,mBAAAA,WACGC;QALHJ;QACAC;QAEAC;QACAC;;IAGA,IAAM,AAAEE,QAAUC,IAAAA,gEAA+B,IAAzCD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,oBAAS,8CACJL;QACJM,SAASZ;QACTK,WAAWQ,IAAAA,gBAAU,qBAEnBJ,aAAaK,kBAAQ,CAACC,GAAG,4BACzBZ,uCACAI,UAAUS,oBAAQ,CAACC,OAAO,sCAC1BZ;QAGDH;AAGP"}

package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { SharedDropdownProps } from './types';
-export declare const ActionSheetDropdownDesktop: ({ children, toggleRef, closing, popupDirection, onClose, className, style, popupOffsetDistance, ...restProps }: SharedDropdownProps) => React.JSX.Element;
+export declare const ActionSheetDropdownDesktop: ({ children, toggleRef, closing, popupDirection, onClose, className, style, popupOffsetDistance, placement: placementProp, ...restProps }: SharedDropdownProps) => React.JSX.Element;

package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js

@@ -30,7 +30,7 @@ function getEl(ref) {
     return ref && "current" in ref ? ref.current : ref;
 }
 var ActionSheetDropdownDesktop = function(_param) {
-    var children = _param.children, toggleRef = _param.toggleRef, closing = _param.closing, popupDirection = _param.popupDirection, onClose = _param.onClose, className = _param.className, style = _param.style, _param_popupOffsetDistance = _param.popupOffsetDistance, popupOffsetDistance = _param_popupOffsetDistance === void 0 ? 0 : _param_popupOffsetDistance, restProps = _object_without_properties._(_param, [
+    var children = _param.children, toggleRef = _param.toggleRef, closing = _param.closing, popupDirection = _param.popupDirection, onClose = _param.onClose, className = _param.className, style = _param.style, _param_popupOffsetDistance = _param.popupOffsetDistance, popupOffsetDistance = _param_popupOffsetDistance === void 0 ? 0 : _param_popupOffsetDistance, placementProp = _param.placement, restProps = _object_without_properties._(_param, [
         "children",
         "toggleRef",
         "closing",
@@ -38,7 +38,8 @@ var ActionSheetDropdownDesktop = function(_param) {
         "onClose",
         "className",
         "style",
-        "popupOffsetDistance"
+        "popupOffsetDistance",
+        "placement"
     ]);
     var document = (0, _dom.useDOM)().document;
     var platform = (0, _usePlatform.usePlatform)();
@@ -58,6 +59,7 @@ var ActionSheetDropdownDesktop = function(_param) {
         popupDirection,
         elementRef
     ]);
+    var placement = placementProp !== null && placementProp !== void 0 ? placementProp : isPopupDirectionTop ? "top-end" : "bottom-end";
     var bodyClickListener = (0, _useEventListener.useEventListener)("click", function(e) {
         var _elementRef;
         var dropdownElement = (_elementRef = elementRef) === null || _elementRef === void 0 ? void 0 : _elementRef.current;
@@ -90,7 +92,7 @@ var ActionSheetDropdownDesktop = function(_param) {
     return /*#__PURE__*/ _react.createElement(_Popper.Popper, {
         targetRef: targetRef,
         offsetDistance: popupOffsetDistance,
-        placement: isPopupDirectionTop ? "top-end" : "bottom-end",
+        placement: placement,
         className: (0, _vkjs.classNames)("vkuiActionSheet", platform === _platform.Platform.IOS && "vkuiActionSheet--ios", "vkuiActionSheet--desktop", sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheet--sizeY-compact", className),
         style: style,
         getRef: elementRef,

package/dist/cjs/components/ActionSheet/ActionSheetDropdownDesktop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownDesktop = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const isPopupDirectionTop = React.useMemo(\n    () =>\n      popupDirection === 'top' ||\n      (typeof popupDirection === 'function' && popupDirection(elementRef) === 'top'),\n    [popupDirection, elementRef],\n  );\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={popupOffsetDistance}\n      placement={isPopupDirectionTop ? 'top-end' : 'bottom-end'}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        styles['ActionSheet--desktop'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n      style={style}\n      getRef={elementRef}\n      forcePortal={false}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["ActionSheetDropdownDesktop","warn","warnOnce","getEl","ref","current","children","toggleRef","closing","popupDirection","onClose","className","style","popupOffsetDistance","restProps","document","useDOM","platform","usePlatform","sizeY","useAdaptivityWithJSMediaQueries","elementRef","React","useRef","useEffectDev","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","useEventListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","isRefObject","Popper","offsetDistance","placement","classNames","Platform","IOS","SizeType","COMPACT","getRef","forcePortal","FocusTrap"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;+DArBU;oBACI;+CACqB;4BACnB;gCACI;2BACL;0BACH;mBACF;2BACK;wBACH;wBACA;yBACC;sBACH;AAIvB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AACtB,SAASC,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEO,IAAMJ,6BAA6B;QACxCM,kBAAAA,UACAC,mBAAAA,WACAC,iBAAAA,SACAC,wBAAAA,gBACAC,iBAAAA,SACAC,mBAAAA,WACAC,eAAAA,2CACAC,qBAAAA,8DAAsB,gCACnBC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEE,WAAaC,IAAAA,WAAM,IAAnBD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IACR,IAAME,aAAaC,OAAMC,MAAM,CAAwB;IAEvDC,IAAAA,0BAAY,EAAC;QACX,IAAMC,WAAWtB,MAAMI;QACvB,IAAI,CAACkB,UAAU;YACbxB,KAAM,oCAAmC;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,IAAMmB,sBAAsBJ,OAAMK,OAAO,CACvC;eACElB,mBAAmB,SAClB,OAAOA,mBAAmB,cAAcA,eAAeY,gBAAgB;OAC1E;QAACZ;QAAgBY;KAAW;IAG9B,IAAMO,oBAAoBC,IAAAA,kCAAgB,EAAC,SAAS,SAACC;YAC3BT;QAAxB,IAAMU,mBAAkBV,cAAAA,wBAAAA,kCAAAA,YAAYhB,OAAO;QAC3C,IAAI0B,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;gBAClEvB;aAAAA,WAAAA,qBAAAA,+BAAAA;QACF;IACF;IAEAY,OAAMY,SAAS,CAAC;QACdC,WAAW;YACTP,kBAAkBQ,GAAG,CAACrB,SAAUsB,IAAI;QACtC;IACF,GAAG;QAACT;QAAmBb;KAAS;IAEhC,IAAMuB,UAAUhB,OAAMiB,WAAW,CAAC,SAACT;eAAqCA,EAAEU,eAAe;OAAI,EAAE;IAE/F,IAAMC,YAAYnB,OAAMK,OAAO,CAAC;QAC9B,IAAIe,IAAAA,wBAAW,EAAgDnC,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEF,SAASE;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,qBAACoC,cAAM;QACLF,WAAWA;QACXG,gBAAgB/B;QAChBgC,WAAWnB,sBAAsB,YAAY;QAC7Cf,WAAWmC,IAAAA,gBAAU,qBAEnB7B,aAAa8B,kBAAQ,CAACC,GAAG,wDAEzB7B,UAAU8B,oBAAQ,CAACC,OAAO,sCAC1BvC;QAEFC,OAAOA;QACPuC,QAAQ9B;QACR+B,aAAa;qBAEb,qBAACC,oBAAS;QAAC3C,SAASA;OAAaI;QAAWwB,SAASA;QAClDhC;AAIT"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownDesktop = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  placement: placementProp,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const isPopupDirectionTop = React.useMemo(\n    () =>\n      popupDirection === 'top' ||\n      (typeof popupDirection === 'function' && popupDirection(elementRef) === 'top'),\n    [popupDirection, elementRef],\n  );\n\n  const placement = placementProp ?? (isPopupDirectionTop ? 'top-end' : 'bottom-end');\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={popupOffsetDistance}\n      placement={placement}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        styles['ActionSheet--desktop'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n      style={style}\n      getRef={elementRef}\n      forcePortal={false}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["ActionSheetDropdownDesktop","warn","warnOnce","getEl","ref","current","children","toggleRef","closing","popupDirection","onClose","className","style","popupOffsetDistance","placement","placementProp","restProps","document","useDOM","platform","usePlatform","sizeY","useAdaptivityWithJSMediaQueries","elementRef","React","useRef","useEffectDev","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","useEventListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","isRefObject","Popper","offsetDistance","classNames","Platform","IOS","SizeType","COMPACT","getRef","forcePortal","FocusTrap"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;+DArBU;oBACI;+CACqB;4BACnB;gCACI;2BACL;0BACH;mBACF;2BACK;wBACH;wBACA;yBACC;sBACH;AAIvB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AACtB,SAASC,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEO,IAAMJ,6BAA6B;QACxCM,kBAAAA,UACAC,mBAAAA,WACAC,iBAAAA,SACAC,wBAAAA,gBACAC,iBAAAA,SACAC,mBAAAA,WACAC,eAAAA,2CACAC,qBAAAA,8DAAsB,gCACtBC,AAAWC,uBAAXD,WACGE;QATHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAM,AAAEG,WAAaC,IAAAA,WAAM,IAAnBD;IACR,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IACR,IAAME,aAAaC,OAAMC,MAAM,CAAwB;IAEvDC,IAAAA,0BAAY,EAAC;QACX,IAAMC,WAAWxB,MAAMI;QACvB,IAAI,CAACoB,UAAU;YACb1B,KAAM,oCAAmC;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,IAAMqB,sBAAsBJ,OAAMK,OAAO,CACvC;eACEpB,mBAAmB,SAClB,OAAOA,mBAAmB,cAAcA,eAAec,gBAAgB;OAC1E;QAACd;QAAgBc;KAAW;IAG9B,IAAMT,YAAYC,0BAAAA,2BAAAA,gBAAkBa,sBAAsB,YAAY;IAEtE,IAAME,oBAAoBC,IAAAA,kCAAgB,EAAC,SAAS,SAACC;YAC3BT;QAAxB,IAAMU,mBAAkBV,cAAAA,wBAAAA,kCAAAA,YAAYlB,OAAO;QAC3C,IAAI4B,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;gBAClEzB;aAAAA,WAAAA,qBAAAA,+BAAAA;QACF;IACF;IAEAc,OAAMY,SAAS,CAAC;QACdC,WAAW;YACTP,kBAAkBQ,GAAG,CAACrB,SAAUsB,IAAI;QACtC;IACF,GAAG;QAACT;QAAmBb;KAAS;IAEhC,IAAMuB,UAAUhB,OAAMiB,WAAW,CAAC,SAACT;eAAqCA,EAAEU,eAAe;OAAI,EAAE;IAE/F,IAAMC,YAAYnB,OAAMK,OAAO,CAAC;QAC9B,IAAIe,IAAAA,wBAAW,EAAgDrC,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEF,SAASE;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,qBAACsC,cAAM;QACLF,WAAWA;QACXG,gBAAgBjC;QAChBC,WAAWA;QACXH,WAAWoC,IAAAA,gBAAU,qBAEnB5B,aAAa6B,kBAAQ,CAACC,GAAG,wDAEzB5B,UAAU6B,oBAAQ,CAACC,OAAO,sCAC1BxC;QAEFC,OAAOA;QACPwC,QAAQ7B;QACR8B,aAAa;qBAEb,qBAACC,oBAAS;QAAC5C,SAASA;OAAaM;QAAWwB,SAASA;QAClDlC;AAIT"}

package/dist/cjs/components/ActionSheet/types.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PlacementWithAuto } from '../../lib/floating/types';
 import { FocusTrapProps } from '../FocusTrap/FocusTrap';
 export type PopupDirection = 'top' | 'bottom' | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');
 export type ToggleRef = Element | null | undefined | React.RefObject<Element>;
@@ -12,8 +13,16 @@ export interface SharedDropdownProps extends FocusTrapProps {
     toggleRef?: ToggleRef;
     /**
      * Направление на десктопе
+     *  @deprecated v5.7.0
+     *
+     * Используйте `placement` для позиционирования
      */
     popupDirection?: PopupDirection;
+    /**
+     * Позиционирование всплывающего окна для десктопа.
+     * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства
+     */
+    placement?: PlacementWithAuto;
     /**
      * Отступ, где заданное кол-во единиц равняется пикселям
      * */

package/dist/cjs/components/ActionSheet/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type PopupDirection =\n  | 'top'\n  | 'bottom'\n  | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v6 будет обязательным.\n   */\n  toggleRef?: ToggleRef; // TODO [>=6]: сделать обязательным\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":[],"mappings":";;;;;+DAAuB"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PlacementWithAuto } from '../../lib/floating/types';\nimport { FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type PopupDirection =\n  | 'top'\n  | 'bottom'\n  | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v6 будет обязательным.\n   */\n  toggleRef?: ToggleRef; // TODO [>=6]: сделать обязательным\n  /**\n   * Направление на десктопе\n   *  @deprecated v5.7.0\n   *\n   * Используйте `placement` для позиционирования\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Позиционирование всплывающего окна для десктопа.\n   * Компонент выберет наилучшее расположение сам, но можно задать приоритетное направление с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":[],"mappings":";;;;;+DAAuB"}

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

@@ -1,15 +1,19 @@
 import * as React from 'react';
-import { AnchorHTMLAttributesOnly } from '../../types';
+import { AlignType, AnchorHTMLAttributesOnly } from '../../types';
 import { ButtonProps } from '../Button/Button';
+import { AlertActionProps } from './AlertAction';
+type AlertActionMode = 'cancel' | 'destructive' | 'default';
 export interface AlertActionInterface extends Pick<ButtonProps, 'Component'>, AnchorHTMLAttributesOnly {
     title: string;
     action?: VoidFunction;
     autoClose?: boolean;
-    mode: 'cancel' | 'destructive' | 'default';
+    mode: AlertActionMode;
 }
 export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
     actionsLayout?: 'vertical' | 'horizontal';
+    actionsAlign?: AlignType;
     actions?: AlertActionInterface[];
+    renderAction?: (props: AlertActionProps) => React.ReactNode;
     header?: React.ReactNode;
     text?: React.ReactNode;
     onClose: VoidFunction;
@@ -21,4 +25,5 @@ export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */
-export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, ...restProps }: AlertProps) => React.JSX.Element;
+export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, renderAction, actionsAlign, ...restProps }: AlertProps) => React.JSX.Element;
+export {};

package/dist/cjs/components/Alert/Alert.js

@@ -22,92 +22,13 @@ var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _platform = require("../../lib/platform");
 var _utils = require("../../lib/utils");
 var _ScrollContext = require("../AppRoot/ScrollContext");
-var _Button = require("../Button/Button");
 var _FocusTrap = require("../FocusTrap/FocusTrap");
 var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
 var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
-var _Tappable = require("../Tappable/Tappable");
-var _Caption = require("../Typography/Caption/Caption");
-var _Footnote = require("../Typography/Footnote/Footnote");
-var _Text = require("../Typography/Text/Text");
-var _Title = require("../Typography/Title/Title");
-var AlertHeader = function(props) {
-    var platform = (0, _usePlatform.usePlatform)();
-    switch(platform){
-        case _platform.Platform.IOS:
-            return /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
-                className: "vkuiAlert__header",
-                weight: "1",
-                level: "3"
-            }, props));
-        default:
-            return /*#__PURE__*/ _react.createElement(_Title.Title, _object_spread._({
-                className: "vkuiAlert__header",
-                weight: "2",
-                level: "2"
-            }, props));
-    }
-};
-var AlertText = function(props) {
-    var platform = (0, _usePlatform.usePlatform)();
-    switch(platform){
-        case _platform.Platform.VKCOM:
-            return /*#__PURE__*/ _react.createElement(_Footnote.Footnote, _object_spread._({
-                className: "vkuiAlert__text"
-            }, props));
-        case _platform.Platform.IOS:
-            return /*#__PURE__*/ _react.createElement(_Caption.Caption, _object_spread._({
-                className: "vkuiAlert__text"
-            }, props));
-        default:
-            return /*#__PURE__*/ _react.createElement(_Text.Text, _object_spread._({
-                Component: "span",
-                className: "vkuiAlert__text",
-                weight: "3"
-            }, props));
-    }
-};
-var AlertAction = function(_param) {
-    var action = _param.action, onItemClick = _param.onItemClick, restProps = _object_without_properties._(_param, [
-        "action",
-        "onItemClick"
-    ]);
-    var platform = (0, _usePlatform.usePlatform)();
-    var handleItemClick = _react.useCallback(function() {
-        return onItemClick(action);
-    }, [
-        onItemClick,
-        action
-    ]);
-    if (platform === _platform.Platform.IOS) {
-        var title = action.title, actionProp = action.action, autoClose = action.autoClose, mode = action.mode, restActionProps = _object_without_properties._(action, [
-            "title",
-            "action",
-            "autoClose",
-            "mode"
-        ]);
-        return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread._({
-            Component: restActionProps.href ? "a" : "button",
-            className: (0, _vkjs.classNames)("vkuiAlert__action", mode === "destructive" && "vkuiAlert__action--mode-destructive", mode === "cancel" && "vkuiAlert__action--mode-cancel"),
-            onClick: handleItemClick
-        }, restActionProps, restProps), title);
-    }
-    var mode1 = "tertiary";
-    if (platform === _platform.Platform.VKCOM) {
-        mode1 = action.mode === "cancel" ? "secondary" : "primary";
-    }
-    return /*#__PURE__*/ _react.createElement(_Button.Button, {
-        className: (0, _vkjs.classNames)("vkuiAlert__button", action.mode === "cancel" && "vkuiAlert__button--mode-cancel"),
-        mode: mode1,
-        size: "m",
-        onClick: handleItemClick,
-        Component: action.Component,
-        href: action.href,
-        target: action.target
-    }, action.title);
-};
+var _AlertActions = require("./AlertActions");
+var _AlertTypography = require("./AlertTypography");
 var Alert = function(_param) {
-    var _param_actions = _param.actions, actions = _param_actions === void 0 ? [] : _param_actions, _param_actionsLayout = _param.actionsLayout, actionsLayout = _param_actionsLayout === void 0 ? "horizontal" : _param_actionsLayout, children = _param.children, className = _param.className, style = _param.style, text = _param.text, header = _param.header, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Закрыть предупреждение" : _param_dismissLabel, restProps = _object_without_properties._(_param, [
+    var _param_actions = _param.actions, actions = _param_actions === void 0 ? [] : _param_actions, _param_actionsLayout = _param.actionsLayout, actionsLayout = _param_actionsLayout === void 0 ? "horizontal" : _param_actionsLayout, children = _param.children, className = _param.className, style = _param.style, text = _param.text, header = _param.header, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Закрыть предупреждение" : _param_dismissLabel, renderAction = _param.renderAction, actionsAlign = _param.actionsAlign, restProps = _object_without_properties._(_param, [
         "actions",
         "actionsLayout",
         "children",
@@ -116,7 +37,9 @@ var Alert = function(_param) {
         "text",
         "header",
         "onClose",
-        "dismissLabel"
+        "dismissLabel",
+        "renderAction",
+        "actionsAlign"
     ]);
     var generatedId = (0, _useId.useId)();
     var headerId = "vkui-alert-".concat(generatedId, "-header");
@@ -126,7 +49,6 @@ var Alert = function(_param) {
     var waitTransitionFinish = (0, _useWaitTransitionFinish.useWaitTransitionFinish)().waitTransitionFinish;
     var _React_useState = _sliced_to_array._(_react.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
     var elementRef = _react.useRef(null);
-    var resolvedActionsLayout = platform === _platform.Platform.VKCOM ? "horizontal" : actionsLayout;
     var timeout = platform === _platform.Platform.IOS ? 300 : 200;
     var close = _react.useCallback(function() {
         setClosing(true);
@@ -171,26 +93,24 @@ var Alert = function(_param) {
         onClick: _utils.stopPropagation,
         onClose: close,
         timeout: timeout,
-        className: (0, _vkjs.classNames)("vkuiAlert", platform === _platform.Platform.IOS && "vkuiAlert--ios", platform === _platform.Platform.VKCOM && "vkuiAlert--vkcom", resolvedActionsLayout === "vertical" ? "vkuiAlert--v" : "vkuiAlert--h", closing && "vkuiAlert--closing", isDesktop && "vkuiAlert--desktop"),
+        className: (0, _vkjs.classNames)("vkuiAlert", platform === _platform.Platform.IOS && "vkuiAlert--ios", platform === _platform.Platform.VKCOM && "vkuiAlert--vkcom", closing && "vkuiAlert--closing", isDesktop && "vkuiAlert--desktop"),
         role: "alertdialog",
         "aria-modal": true,
         "aria-labelledby": headerId,
         "aria-describedby": textId
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiAlert__content"
-    }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(AlertHeader, {
+    }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(_AlertTypography.AlertHeader, {
         id: headerId
-    }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(AlertText, {
+    }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(_AlertTypography.AlertText, {
         id: textId
-    }, text), children), /*#__PURE__*/ _react.createElement("div", {
-        className: "vkuiAlert__actions"
-    }, actions.map(function(action, i) {
-        return /*#__PURE__*/ _react.createElement(AlertAction, {
-            key: i,
-            action: action,
-            onItemClick: onItemClick
-        });
-    })), isDesktop && /*#__PURE__*/ _react.createElement(_ModalDismissButton.ModalDismissButton, {
+    }, text), children), /*#__PURE__*/ _react.createElement(_AlertActions.AlertActions, {
+        actions: actions,
+        actionsAlign: actionsAlign,
+        actionsLayout: actionsLayout,
+        renderAction: renderAction,
+        onItemClick: onItemClick
+    }), isDesktop && /*#__PURE__*/ _react.createElement(_ModalDismissButton.ModalDismissButton, {
         onClick: close,
         "aria-label": dismissLabel
     })));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const generatedId = useId();\n\n  const headerId = `vkui-alert-${generatedId}-header`;\n  const textId = `vkui-alert-${generatedId}-text`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby={headerId}\n        aria-describedby={textId}\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Alert","AlertHeader","props","platform","usePlatform","Platform","IOS","Title","className","weight","level","AlertText","VKCOM","Footnote","Caption","Text","Component","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","title","actionProp","autoClose","mode","restActionProps","Tappable","href","classNames","onClick","Button","size","target","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","generatedId","useId","headerId","textId","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","PopoutWrapper","FocusTrap","getRootRef","stopPropagation","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","id","map","i","key","ModalDismissButton","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AlignType, AnchorHTMLAttributesOnly } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertHeader, AlertText } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  ...restProps\n}: AlertProps) => {\n  const generatedId = useId();\n\n  const headerId = `vkui-alert-${generatedId}-header`;\n  const textId = `vkui-alert-${generatedId}-text`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby={headerId}\n        aria-describedby={textId}\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n          {children}\n        </div>\n        <AlertActions\n          actions={actions}\n          actionsAlign={actionsAlign}\n          actionsLayout={actionsLayout}\n          renderAction={renderAction}\n          onItemClick={onItemClick}\n        />\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","renderAction","actionsAlign","restProps","generatedId","useId","headerId","textId","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","elementRef","useRef","timeout","Platform","IOS","close","useCallback","current","e","propertyName","onItemClick","item","action","autoClose","useScrollLock","PopoutWrapper","onClick","FocusTrap","getRootRef","stopPropagation","classNames","VKCOM","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","AlertHeader","id","AlertText","AlertActions","ModalDismissButton","aria-label"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;+DAhDU;oBACkB;+CACO;qBAC1B;2BACM;uCACY;wBACf;qBACO;6BAEF;yBAEJ;kCACS;6BACL;4BAED;+BACU;AAgChC,IAAMA,QAAQ;gCACnBC,SAAAA,sCAAU,EAAE,iDACZC,eAAAA,kDAAgB,qCAChBC,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,cAAAA,MACAC,gBAAAA,QACAC,iBAAAA,sCACAC,cAAAA,gDAAe,gDACfC,sBAAAA,cACAC,sBAAAA,cACGC;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,cAAcC,IAAAA,YAAK;IAEzB,IAAMC,WAAW,AAAC,cAAyB,OAAZF,aAAY;IAC3C,IAAMG,SAAS,AAAC,cAAyB,OAAZH,aAAY;IAEzC,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IACR,IAAM,AAAEE,uBAAyBC,IAAAA,gDAAuB,IAAhDD;IAER,IAA8BE,qCAAAA,OAAMC,QAAQ,CAAC,YAAtCC,UAAuBF,oBAAdG,aAAcH;IAE9B,IAAMI,aAAaJ,OAAMK,MAAM,CAAiB;IAEhD,IAAMC,UAAUZ,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM;IAElD,IAAMC,QAAQT,OAAMU,WAAW,CAAC;QAC9BP,WAAW;QACXL,qBACEM,WAAWO,OAAO,EAClB,SAACC;YACC,IAAI,CAACA,KAAKA,EAAEC,YAAY,KAAK,WAAW;gBACtC5B;YACF;QACF,GACAqB;IAEJ,GAAG;QAACF;QAAYN;QAAsBb;QAASqB;KAAQ;IAEvD,IAAMQ,cAAcd,OAAMU,WAAW,CACnC,SAACK;QACC,IAAQC,SAAsBD,KAAtBC,QAAQC,YAAcF,KAAdE;QAEhB,IAAIA,WAAW;YACbd,WAAW;YACXL,qBACEM,WAAWO,OAAO,EAClB,SAACC;gBACC,IAAI,CAACA,KAAKA,EAAEC,YAAY,KAAK,WAAW;oBACtC5B;oBACA+B,UAAUA;gBACZ;YACF,GACAV;QAEJ,OAAO;YACLU,UAAUA;QACZ;IACF,GACA;QAACZ;QAAYN;QAAsBb;QAASqB;KAAQ;IAGtDY,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QAACtC,WAAWA;QAAWqB,SAASA;QAASpB,OAAOA;QAAOsC,SAASX;qBAC5E,qBAACY,oBAAS,8CACJhC;QACJiC,YAAYlB;QACZgB,SAASG,sBAAe;QACxBtC,SAASwB;QACTH,SAASA;QACTzB,WAAW2C,IAAAA,gBAAU,eAEnB9B,aAAaa,kBAAQ,CAACC,GAAG,sBACzBd,aAAaa,kBAAQ,CAACkB,KAAK,wBAC3BvB,iCACAN;QAEF8B,MAAK;QACLC,cAAAA;QACAC,mBAAiBpC;QACjBqC,oBAAkBpC;sBAElB,qBAACqC;QAAIjD,SAAS;OACXkD,IAAAA,kBAAY,EAAC/C,yBAAW,qBAACgD,4BAAW;QAACC,IAAIzC;OAAWR,SACpD+C,IAAAA,kBAAY,EAAChD,uBAAS,qBAACmD,0BAAS;QAACD,IAAIxC;OAASV,OAC9CH,yBAEH,qBAACuD,0BAAY;QACXzD,SAASA;QACTU,cAAcA;QACdT,eAAeA;QACfQ,cAAcA;QACd2B,aAAaA;QAEdlB,2BAAa,qBAACwC,sCAAkB;QAAChB,SAASX;QAAO4B,cAAYnD;;AAItE"}

package/dist/cjs/components/Alert/AlertAction.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AnchorHTMLAttributesOnly } from '../../types';
+import { AlertActionInterface } from './Alert';
+export interface AlertActionProps extends Pick<AlertActionInterface, 'Component' | 'mode'>, AnchorHTMLAttributesOnly {
+    children: string;
+    onClick: React.MouseEventHandler<HTMLElement>;
+}
+export declare const AlertAction: (props: AlertActionProps) => React.JSX.Element;

package/dist/cjs/components/Alert/AlertAction.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertAction", {
+    enumerable: true,
+    get: function() {
+        return AlertAction;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
+var _usePlatform = require("../../hooks/usePlatform");
+var _platform = require("../../lib/platform");
+var _Button = require("../Button/Button");
+var _Tappable = require("../Tappable/Tappable");
+var AlertActionIos = function(_param) {
+    var mode = _param.mode, restProps = _object_without_properties._(_param, [
+        "mode"
+    ]);
+    return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread._({
+        Component: restProps.href ? "a" : "button",
+        className: (0, _vkjs.classNames)("vkuiAlert__action", mode === "destructive" && "vkuiAlert__action--mode-destructive", mode === "cancel" && "vkuiAlert__action--mode-cancel")
+    }, restProps));
+};
+var AlertActionBase = function(_param) {
+    var mode = _param.mode, restProps = _object_without_properties._(_param, [
+        "mode"
+    ]);
+    var platform = (0, _usePlatform.usePlatform)();
+    var buttonMode = "tertiary";
+    if (platform === _platform.Platform.VKCOM) {
+        buttonMode = mode === "cancel" ? "secondary" : "primary";
+    }
+    return /*#__PURE__*/ _react.createElement(_Button.Button, _object_spread._({
+        className: (0, _vkjs.classNames)("vkuiAlert__button", mode === "cancel" && "vkuiAlert__button--mode-cancel"),
+        mode: buttonMode,
+        size: "m"
+    }, restProps));
+};
+var AlertAction = function(props) {
+    var platform = (0, _usePlatform.usePlatform)();
+    if (platform === _platform.Platform.IOS) {
+        return /*#__PURE__*/ _react.createElement(AlertActionIos, props);
+    }
+    return /*#__PURE__*/ _react.createElement(AlertActionBase, props);
+};
+
+//# sourceMappingURL=AlertAction.js.map

package/dist/cjs/components/Alert/AlertAction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertAction.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { AnchorHTMLAttributesOnly } from '../../types';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport { AlertActionInterface } from './Alert';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionProps\n  extends Pick<AlertActionInterface, 'Component' | 'mode'>,\n    AnchorHTMLAttributesOnly {\n  children: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n}\n\nconst AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      className={classNames(\n        styles['Alert__action'],\n        mode === 'destructive' && styles['Alert__action--mode-destructive'],\n        mode === 'cancel' && styles['Alert__action--mode-cancel'],\n      )}\n      {...restProps}\n    />\n  );\n};\n\nconst AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n\n  let buttonMode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    buttonMode = mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={buttonMode}\n      size=\"m\"\n      {...restProps}\n    />\n  );\n};\n\nexport const AlertAction = (props: AlertActionProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return <AlertActionIos {...props} />;\n  }\n\n  return <AlertActionBase {...props} />;\n};\n"],"names":["AlertAction","AlertActionIos","mode","restProps","Tappable","Component","href","className","classNames","AlertActionBase","platform","usePlatform","buttonMode","Platform","VKCOM","Button","size","props","IOS"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;+DArDU;oBACI;2BACC;wBACH;sBAEW;wBACX;AAWzB,IAAMC,iBAAiB;QAAGC,cAAAA,MAASC;QAATD;;IACxB,qBACE,qBAACE,kBAAQ;QACPC,WAAWF,UAAUG,IAAI,GAAG,MAAM;QAClCC,WAAWC,IAAAA,gBAAU,uBAEnBN,SAAS,wDACTA,SAAS;OAEPC;AAGV;AAEA,IAAMM,kBAAkB;QAAGP,cAAAA,MAASC;QAATD;;IACzB,IAAMQ,WAAWC,IAAAA,wBAAW;IAE5B,IAAIC,aAAkC;IAEtC,IAAIF,aAAaG,kBAAQ,CAACC,KAAK,EAAE;QAC/BF,aAAaV,SAAS,WAAW,cAAc;IACjD;IAEA,qBACE,qBAACa,cAAM;QACLR,WAAWC,IAAAA,gBAAU,uBAEnBN,SAAS;QAEXA,MAAMU;QACNI,MAAK;OACDb;AAGV;AAEO,IAAMH,cAAc,SAACiB;IAC1B,IAAMP,WAAWC,IAAAA,wBAAW;IAE5B,IAAID,aAAaG,kBAAQ,CAACK,GAAG,EAAE;QAC7B,qBAAO,qBAACjB,gBAAmBgB;IAC7B;IAEA,qBAAO,qBAACR,iBAAoBQ;AAC9B"}

package/dist/cjs/components/Alert/AlertActions.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AlertActionInterface, AlertProps } from './Alert';
+type ItemClickHandler = (item: AlertActionInterface) => void;
+interface AlertActionsProps extends Pick<AlertProps, 'actions' | 'actionsAlign' | 'renderAction' | 'actionsLayout'> {
+    onItemClick: ItemClickHandler;
+}
+export declare const AlertActions: ({ actions, renderAction, onItemClick, actionsAlign, actionsLayout, }: AlertActionsProps) => React.JSX.Element;
+export {};