@vkontakte/vkui 5.6.2 → 5.7.1

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

@@ -5,16 +5,19 @@ import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useTimeout } from '../../hooks/useTimeout';
 import { Platform } from '../../lib/platform';
+import { warnOnce } from '../../lib/warnOnce';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { ActionSheetContext } from './ActionSheetContext';
+import { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';
 import { ActionSheetDropdown } from './ActionSheetDropdown';
 import { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';
 import styles from './ActionSheet.module.css';
+const warn = warnOnce('ActionSheet');
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
- */ export const ActionSheet = ({ children, className, header, text, style, iosCloseItem, popupDirection = 'bottom', popupOffsetDistance, ...restProps })=>{
+ */ export const ActionSheet = ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, placement, ...restProps })=>{
     const platform = usePlatform();
     const [closing, setClosing] = React.useState(false);
     const onClose = ()=>setClosing(true);
@@ -56,9 +59,15 @@ import styles from './ActionSheet.module.css';
         isDesktop
     });
     const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;
+    if (process.env.NODE_ENV === 'development' && popupDirection) {
+        // TODO [>=6]: popupDirection
+        warn('Свойство "popupDirection" будет удалено в v6. Используйте свойство "placement"');
+    }
+    popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';
     const dropdownProps = isDesktop ? Object.assign(restProps, {
         popupOffsetDistance,
-        popupDirection
+        popupDirection,
+        placement
     }) : restProps;
     const actionSheet = /*#__PURE__*/ React.createElement(ActionSheetContext.Provider, {
         value: contextValue
@@ -76,7 +85,7 @@ import styles from './ActionSheet.module.css';
         className: styles['ActionSheet__title']
     }, header), text && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['ActionSheet__text']
-    }, text)), children, platform === Platform.IOS && !isDesktop && iosCloseItem));
+    }, text)), children, platform === Platform.IOS && !isDesktop && (iosCloseItem ?? /*#__PURE__*/ React.createElement(ActionSheetDefaultIosCloseItem, null))));
     if (isDesktop) {
         return actionSheet;
     }

package/dist/cssm/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":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","restProps","platform","closing","setClosing","useState","onClose","_action","useRef","afterClose","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","undefined","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}
+{"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":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","closing","setClosing","useState","onClose","_action","useRef","afterClose","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","undefined","dropdownProps","Object","assign","actionSheet","Provider","value","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 .ActionSheet {
-  position: relative;
   overflow: hidden;
   box-shadow: var(--vkui--elevation3);
   width: calc(100% - 20px);

package/dist/cssm/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/cssm/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":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","FocusTrap","styles","stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","className","restProps","sizeY","platform","onClick","IOS","COMPACT"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,kBAA2C,CAACC,IAAMA,EAAED,eAAe;AAOzE,OAAO,MAAME,sBAAsB,CAAC,EAClCC,QAAQ,EACRC,OAAO,EACP,6DAA6D;AAC7DC,SAAS,EACTC,SAAS,EACT,GAAGC,WACiB;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGd;IAClB,MAAMe,WAAWd;IAEjB,qBACE,oBAACG;QACE,GAAGS,SAAS;QACbG,SAASV;QACTM,WAAWb,WACTM,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASc,GAAG,IAAIZ,MAAM,CAAC,mBAAmB,EACvDK,WAAWL,MAAM,CAAC,uBAAuB,EACzCS,UAAUZ,SAASgB,OAAO,IAAIb,MAAM,CAAC,6BAA6B,EAClEO;OAGDH;AAGP,EAAE"}
+{"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":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","FocusTrap","styles","stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","className","restProps","sizeY","platform","onClick","IOS","COMPACT"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,kBAA2C,CAACC,IAAMA,EAAED,eAAe;AAOzE,OAAO,MAAME,sBAAsB,CAAC,EAClCC,QAAQ,EACRC,OAAO,EACP,6DAA6D;AAC7DC,SAAS,EACTC,SAAS,EACT,GAAGC,WACiB;IACpB,MAAM,EAAEC,KAAK,EAAE,GAAGd;IAClB,MAAMe,WAAWd;IAEjB,qBACE,oBAACG;QACE,GAAGS,SAAS;QACbG,SAASV;QACTM,WAAWb,WACTM,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASc,GAAG,IAAIZ,MAAM,CAAC,mBAAmB,EACvDK,WAAWL,MAAM,CAAC,uBAAuB,EACzCS,UAAUZ,SAASgB,OAAO,IAAIb,MAAM,CAAC,6BAA6B,EAClEO;OAGDH;AAGP,EAAE"}

package/dist/cssm/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/cssm/components/ActionSheet/ActionSheetDropdownDesktop.js

@@ -16,7 +16,7 @@ const warn = warnOnce('ActionSheet');
 function getEl(ref) {
     return ref && 'current' in ref ? ref.current : ref;
 }
-export const ActionSheetDropdownDesktop = ({ children, toggleRef, closing, popupDirection, onClose, className, style, popupOffsetDistance = 0, ...restProps })=>{
+export const ActionSheetDropdownDesktop = ({ children, toggleRef, closing, popupDirection, onClose, className, style, popupOffsetDistance = 0, placement: placementProp, ...restProps })=>{
     const { document } = useDOM();
     const platform = usePlatform();
     const { sizeY } = useAdaptivityWithJSMediaQueries();
@@ -33,6 +33,7 @@ export const ActionSheetDropdownDesktop = ({ children, toggleRef, closing, popup
         popupDirection,
         elementRef
     ]);
+    const placement = placementProp ?? (isPopupDirectionTop ? 'top-end' : 'bottom-end');
     const bodyClickListener = useEventListener('click', (e)=>{
         const dropdownElement = elementRef?.current;
         if (dropdownElement && !dropdownElement.contains(e.target)) {
@@ -61,7 +62,7 @@ export const ActionSheetDropdownDesktop = ({ children, toggleRef, closing, popup
     return /*#__PURE__*/ React.createElement(Popper, {
         targetRef: targetRef,
         offsetDistance: popupOffsetDistance,
-        placement: isPopupDirectionTop ? 'top-end' : 'bottom-end',
+        placement: placement,
         className: classNames(styles['ActionSheet'], platform === Platform.IOS && styles['ActionSheet--ios'], styles['ActionSheet--desktop'], sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'], className),
         style: style,
         getRef: elementRef,

package/dist/cssm/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":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","SizeType","useDOM","isRefObject","Platform","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","className","style","popupOffsetDistance","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","offsetDistance","placement","IOS","COMPACT","getRef","forcePortal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEA,OAAO,MAAME,6BAA6B,CAAC,EACzCC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,EACdC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,sBAAsB,CAAC,EACvB,GAAGC,WACiB;IACpB,MAAM,EAAEC,QAAQ,EAAE,GAAGrB;IACrB,MAAMsB,WAAWxB;IACjB,MAAM,EAAEyB,KAAK,EAAE,GAAG5B;IAClB,MAAM6B,aAAa/B,MAAMgC,MAAM,CAAwB;IAEvD7B,aAAa;QACX,MAAM8B,WAAWlB,MAAMK;QACvB,IAAI,CAACa,UAAU;YACbnB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMc,sBAAsBlC,MAAMmC,OAAO,CACvC,IACEb,mBAAmB,SAClB,OAAOA,mBAAmB,cAAcA,eAAeS,gBAAgB,OAC1E;QAACT;QAAgBS;KAAW;IAG9B,MAAMK,oBAAoBhC,iBAAiB,SAAS,CAACiC;QACnD,MAAMC,kBAAkBP,YAAYd;QACpC,IAAIqB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClEjB;QACF;IACF;IAEAvB,MAAMyC,SAAS,CAAC;QACdC,WAAW;YACTN,kBAAkBO,GAAG,CAACf,SAAUgB,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBR;KAAS;IAEhC,MAAMiB,UAAU7C,MAAM8C,WAAW,CAAC,CAACT,IAAqCA,EAAEU,eAAe,IAAI,EAAE;IAE/F,MAAMC,YAAYhD,MAAMmC,OAAO,CAAC;QAC9B,IAAI3B,YAA2DY,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,oBAACR;QACCoC,WAAWA;QACXC,gBAAgBvB;QAChBwB,WAAWhB,sBAAsB,YAAY;QAC7CV,WAAWvB,WACTY,MAAM,CAAC,cAAc,EACrBgB,aAAapB,SAAS0C,GAAG,IAAItC,MAAM,CAAC,mBAAmB,EACvDA,MAAM,CAAC,uBAAuB,EAC9BiB,UAAUxB,SAAS8C,OAAO,IAAIvC,MAAM,CAAC,6BAA6B,EAClEW;QAEFC,OAAOA;QACP4B,QAAQtB;QACRuB,aAAa;qBAEb,oBAAC3C;QAAUY,SAASA;QAAU,GAAGI,SAAS;QAAEkB,SAASA;OAClD1B;AAIT,EAAE"}
+{"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":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","SizeType","useDOM","isRefObject","Platform","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","className","style","popupOffsetDistance","placement","placementProp","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","offsetDistance","IOS","COMPACT","getRef","forcePortal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD;AACjD;AAEA,OAAO,MAAME,6BAA6B,CAAC,EACzCC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,cAAc,EACdC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,sBAAsB,CAAC,EACvBC,WAAWC,aAAa,EACxB,GAAGC,WACiB;IACpB,MAAM,EAAEC,QAAQ,EAAE,GAAGvB;IACrB,MAAMwB,WAAW1B;IACjB,MAAM,EAAE2B,KAAK,EAAE,GAAG9B;IAClB,MAAM+B,aAAajC,MAAMkC,MAAM,CAAwB;IAEvD/B,aAAa;QACX,MAAMgC,WAAWpB,MAAMK;QACvB,IAAI,CAACe,UAAU;YACbrB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMgB,sBAAsBpC,MAAMqC,OAAO,CACvC,IACEf,mBAAmB,SAClB,OAAOA,mBAAmB,cAAcA,eAAeW,gBAAgB,OAC1E;QAACX;QAAgBW;KAAW;IAG9B,MAAMN,YAAYC,iBAAkBQ,CAAAA,sBAAsB,YAAY,YAAW;IAEjF,MAAME,oBAAoBlC,iBAAiB,SAAS,CAACmC;QACnD,MAAMC,kBAAkBP,YAAYhB;QACpC,IAAIuB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClEnB;QACF;IACF;IAEAvB,MAAM2C,SAAS,CAAC;QACdC,WAAW;YACTN,kBAAkBO,GAAG,CAACf,SAAUgB,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBR;KAAS;IAEhC,MAAMiB,UAAU/C,MAAMgD,WAAW,CAAC,CAACT,IAAqCA,EAAEU,eAAe,IAAI,EAAE;IAE/F,MAAMC,YAAYlD,MAAMqC,OAAO,CAAC;QAC9B,IAAI7B,YAA2DY,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,oBAACR;QACCsC,WAAWA;QACXC,gBAAgBzB;QAChBC,WAAWA;QACXH,WAAWvB,WACTY,MAAM,CAAC,cAAc,EACrBkB,aAAatB,SAAS2C,GAAG,IAAIvC,MAAM,CAAC,mBAAmB,EACvDA,MAAM,CAAC,uBAAuB,EAC9BmB,UAAU1B,SAAS+C,OAAO,IAAIxC,MAAM,CAAC,6BAA6B,EAClEW;QAEFC,OAAOA;QACP6B,QAAQrB;QACRsB,aAAa;qBAEb,oBAAC5C;QAAUY,SAASA;QAAU,GAAGM,SAAS;QAAEkB,SAASA;OAClD5B;AAIT,EAAE"}

package/dist/cssm/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/cssm/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":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"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":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -7,90 +7,15 @@ import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
 import { Platform } from '../../lib/platform';
 import { stopPropagation } from '../../lib/utils';
 import { useScrollLock } from '../AppRoot/ScrollContext';
-import { Button } from '../Button/Button';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
-import { Tappable } from '../Tappable/Tappable';
-import { Caption } from '../Typography/Caption/Caption';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { Text } from '../Typography/Text/Text';
-import { Title } from '../Typography/Title/Title';
+import { AlertActions } from './AlertActions';
+import { AlertHeader, AlertText } from './AlertTypography';
 import styles from './Alert.module.css';
-const AlertHeader = (props)=>{
-    const platform = usePlatform();
-    switch(platform){
-        case Platform.IOS:
-            return /*#__PURE__*/ React.createElement(Title, {
-                className: styles['Alert__header'],
-                weight: "1",
-                level: "3",
-                ...props
-            });
-        default:
-            return /*#__PURE__*/ React.createElement(Title, {
-                className: styles['Alert__header'],
-                weight: "2",
-                level: "2",
-                ...props
-            });
-    }
-};
-const AlertText = (props)=>{
-    const platform = usePlatform();
-    switch(platform){
-        case Platform.VKCOM:
-            return /*#__PURE__*/ React.createElement(Footnote, {
-                className: styles['Alert__text'],
-                ...props
-            });
-        case Platform.IOS:
-            return /*#__PURE__*/ React.createElement(Caption, {
-                className: styles['Alert__text'],
-                ...props
-            });
-        default:
-            return /*#__PURE__*/ React.createElement(Text, {
-                Component: "span",
-                className: styles['Alert__text'],
-                weight: "3",
-                ...props
-            });
-    }
-};
-const AlertAction = ({ action, onItemClick, ...restProps })=>{
-    const platform = usePlatform();
-    const handleItemClick = React.useCallback(()=>onItemClick(action), [
-        onItemClick,
-        action
-    ]);
-    if (platform === Platform.IOS) {
-        const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;
-        return /*#__PURE__*/ React.createElement(Tappable, {
-            Component: restActionProps.href ? 'a' : 'button',
-            className: classNames(styles['Alert__action'], mode === 'destructive' && styles['Alert__action--mode-destructive'], mode === 'cancel' && styles['Alert__action--mode-cancel']),
-            onClick: handleItemClick,
-            ...restActionProps,
-            ...restProps
-        }, title);
-    }
-    let mode = 'tertiary';
-    if (platform === Platform.VKCOM) {
-        mode = action.mode === 'cancel' ? 'secondary' : 'primary';
-    }
-    return /*#__PURE__*/ React.createElement(Button, {
-        className: classNames(styles['Alert__button'], action.mode === 'cancel' && styles['Alert__button--mode-cancel']),
-        mode: mode,
-        size: "m",
-        onClick: handleItemClick,
-        Component: action.Component,
-        href: action.href,
-        target: action.target
-    }, action.title);
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
- */ export const Alert = ({ actions = [], actionsLayout = 'horizontal', children, className, style, text, header, onClose, dismissLabel = 'Закрыть предупреждение', ...restProps })=>{
+ */ export const Alert = ({ actions = [], actionsLayout = 'horizontal', children, className, style, text, header, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, ...restProps })=>{
     const generatedId = useId();
     const headerId = `vkui-alert-${generatedId}-header`;
     const textId = `vkui-alert-${generatedId}-text`;
@@ -99,7 +24,6 @@ const AlertAction = ({ action, onItemClick, ...restProps })=>{
     const { waitTransitionFinish } = useWaitTransitionFinish();
     const [closing, setClosing] = React.useState(false);
     const elementRef = React.useRef(null);
-    const resolvedActionsLayout = platform === Platform.VKCOM ? 'horizontal' : actionsLayout;
     const timeout = platform === Platform.IOS ? 300 : 200;
     const close = React.useCallback(()=>{
         setClosing(true);
@@ -145,7 +69,7 @@ const AlertAction = ({ action, onItemClick, ...restProps })=>{
         onClick: stopPropagation,
         onClose: close,
         timeout: timeout,
-        className: classNames(styles['Alert'], platform === Platform.IOS && styles['Alert--ios'], platform === Platform.VKCOM && styles['Alert--vkcom'], resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'], closing && styles['Alert--closing'], isDesktop && styles['Alert--desktop']),
+        className: classNames(styles['Alert'], platform === Platform.IOS && styles['Alert--ios'], platform === Platform.VKCOM && styles['Alert--vkcom'], closing && styles['Alert--closing'], isDesktop && styles['Alert--desktop']),
         role: "alertdialog",
         "aria-modal": true,
         "aria-labelledby": headerId,
@@ -156,13 +80,13 @@ const AlertAction = ({ action, onItemClick, ...restProps })=>{
         id: headerId
     }, header), hasReactNode(text) && /*#__PURE__*/ React.createElement(AlertText, {
         id: textId
-    }, text), children), /*#__PURE__*/ React.createElement("div", {
-        className: styles['Alert__actions']
-    }, actions.map((action, i)=>/*#__PURE__*/ React.createElement(AlertAction, {
-            key: i,
-            action: action,
-            onItemClick: onItemClick
-        }))), isDesktop && /*#__PURE__*/ React.createElement(ModalDismissButton, {
+    }, text), children), /*#__PURE__*/ React.createElement(AlertActions, {
+        actions: actions,
+        actionsAlign: actionsAlign,
+        actionsLayout: actionsLayout,
+        renderAction: renderAction,
+        onItemClick: onItemClick
+    }), isDesktop && /*#__PURE__*/ React.createElement(ModalDismissButton, {
         onClick: close,
         "aria-label": dismissLabel
     })));

package/dist/cssm/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":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useId","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","styles","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","generatedId","headerId","textId","isDesktop","waitTransitionFinish","closing","setClosing","useState","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","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":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useId","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","FocusTrap","ModalDismissButton","PopoutWrapper","AlertActions","AlertHeader","AlertText","styles","Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","renderAction","actionsAlign","restProps","generatedId","headerId","textId","platform","isDesktop","waitTransitionFinish","closing","setClosing","useState","elementRef","useRef","timeout","IOS","close","useCallback","current","e","propertyName","onItemClick","item","action","autoClose","onClick","getRootRef","VKCOM","role","aria-modal","aria-labelledby","aria-describedby","div","id","aria-label"],"mappings":"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"}