@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/dist/components/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CA0BlC,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG;IACjD,OAAO,EAAE,OAAO,gBAAgB,CAAC;IACjC,OAAO,EAAE,OAAO,gBAAgB,CAAC;CA6BlC,CAAC"}

package/dist/components/Accordion/Accordion.js

@@ -3,7 +3,6 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 import { AccordionContent } from "./AccordionContent.js";
 import { AccordionContext } from "./AccordionContext.js";
 import { AccordionSummary } from "./AccordionSummary.js";
@@ -31,12 +30,17 @@ export const Accordion = (_param)=>{
         onChange: onChangeProp,
         disabled: restProps.disabled
     });
-    const context = useObjectMemo({
-        labelId,
+    const context = React.useMemo(()=>({
+            labelId,
+            contentId,
+            expanded: expanded || false,
+            onChange
+        }), [
         contentId,
-        expanded: expanded || false,
+        expanded,
+        labelId,
         onChange
-    });
+    ]);
     return /*#__PURE__*/ _jsx(AccordionContext.Provider, {
         value: context,
         children: children

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport type { HasChildren } from '../../types';\nimport { AccordionContent } from './AccordionContent';\nimport { AccordionContext } from './AccordionContext';\nimport { AccordionSummary } from './AccordionSummary';\n\nfunction useAccordionId(id: AccordionProps['id']) {\n  const generatedId = React.useId();\n  const labelId = id ?? `Accordion${generatedId}`;\n  const contentId = `AccordionContent${id ?? generatedId}`;\n\n  return { labelId, contentId };\n}\n\nexport interface AccordionProps extends HasChildren {\n  id?: string;\n  /**\n   * Управляет раскрытием и скрытием контента.\n   */\n  expanded?: boolean;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Функция изменения\n   */\n  onChange?: (e: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Accordion: React.FC<AccordionProps> & {\n  Summary: typeof AccordionSummary;\n  Content: typeof AccordionContent;\n} = ({\n  id,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onChange: onChangeProp,\n  children,\n  ...restProps\n}: AccordionProps) => {\n  const { labelId, contentId } = useAccordionId(id);\n\n  const [expanded, onChange] = useCustomEnsuredControl({\n    value: expandedProp,\n    defaultValue: defaultExpanded,\n    onChange: onChangeProp,\n    disabled: restProps.disabled,\n  });\n\n  const context = useObjectMemo({\n    labelId,\n    contentId,\n    expanded: expanded || false,\n    onChange,\n  });\n\n  return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;\n};\n\nAccordion.displayName = 'Accordion';\n\nAccordion.Summary = AccordionSummary;\nAccordion.Summary.displayName = 'Accordion.Summary';\n\nAccordion.Content = AccordionContent;\nAccordion.Content.displayName = 'Accordion.Content';\n"],"names":["React","useCustomEnsuredControl","useObjectMemo","AccordionContent","AccordionContext","AccordionSummary","useAccordionId","id","generatedId","useId","labelId","contentId","Accordion","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","value","defaultValue","disabled","context","Provider","displayName","Summary","Content"],"mappings":"AAAA;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mCAAgC;AACxE,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AAEtD,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcR,MAAMS,KAAK;IAC/B,MAAMC,UAAUH,eAAAA,gBAAAA,KAAM,CAAC,SAAS,EAAEC,aAAa;IAC/C,MAAMG,YAAY,CAAC,gBAAgB,EAAEJ,eAAAA,gBAAAA,KAAMC,aAAa;IAExD,OAAO;QAAEE;QAASC;IAAU;AAC9B;AAmBA,OAAO,MAAMC,YAGT;QAAC,EACHL,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EAEO,WADZC;QALHZ;QACAM;QACAE;QACAC;QACAE;;IAGA,MAAM,EAAER,OAAO,EAAEC,SAAS,EAAE,GAAGL,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGf,wBAAwB;QACnDmB,OAAON;QACPO,cAAcN;QACdC,UAAUC;QACVK,UAAUH,UAAUG,QAAQ;IAC9B;IAEA,MAAMC,UAAUrB,cAAc;QAC5BQ;QACAC;QACAE,UAAUA,YAAY;QACtBG;IACF;IAEA,qBAAO,KAACZ,iBAAiBoB,QAAQ;QAACJ,OAAOG;kBAAUL;;AACrD,EAAE;AAEFN,UAAUa,WAAW,GAAG;AAExBb,UAAUc,OAAO,GAAGrB;AACpBO,UAAUc,OAAO,CAACD,WAAW,GAAG;AAEhCb,UAAUe,OAAO,GAAGxB;AACpBS,UAAUe,OAAO,CAACF,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport type { HasChildren } from '../../types';\nimport { AccordionContent } from './AccordionContent';\nimport { AccordionContext } from './AccordionContext';\nimport { AccordionSummary } from './AccordionSummary';\n\nfunction useAccordionId(id: AccordionProps['id']) {\n  const generatedId = React.useId();\n  const labelId = id ?? `Accordion${generatedId}`;\n  const contentId = `AccordionContent${id ?? generatedId}`;\n\n  return { labelId, contentId };\n}\n\nexport interface AccordionProps extends HasChildren {\n  id?: string;\n  /**\n   * Управляет раскрытием и скрытием контента.\n   */\n  expanded?: boolean;\n  /**\n   * Значение по умолчанию.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Функция изменения\n   */\n  onChange?: (e: boolean) => void;\n  disabled?: boolean;\n}\n\nexport const Accordion: React.FC<AccordionProps> & {\n  Summary: typeof AccordionSummary;\n  Content: typeof AccordionContent;\n} = ({\n  id,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onChange: onChangeProp,\n  children,\n  ...restProps\n}: AccordionProps) => {\n  const { labelId, contentId } = useAccordionId(id);\n\n  const [expanded, onChange] = useCustomEnsuredControl({\n    value: expandedProp,\n    defaultValue: defaultExpanded,\n    onChange: onChangeProp,\n    disabled: restProps.disabled,\n  });\n\n  const context = React.useMemo(\n    () => ({\n      labelId,\n      contentId,\n      expanded: expanded || false,\n      onChange,\n    }),\n    [contentId, expanded, labelId, onChange],\n  );\n\n  return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;\n};\n\nAccordion.displayName = 'Accordion';\n\nAccordion.Summary = AccordionSummary;\nAccordion.Summary.displayName = 'Accordion.Summary';\n\nAccordion.Content = AccordionContent;\nAccordion.Content.displayName = 'Accordion.Content';\n"],"names":["React","useCustomEnsuredControl","AccordionContent","AccordionContext","AccordionSummary","useAccordionId","id","generatedId","useId","labelId","contentId","Accordion","expanded","expandedProp","defaultExpanded","onChange","onChangeProp","children","restProps","value","defaultValue","disabled","context","useMemo","Provider","displayName","Summary","Content"],"mappings":"AAAA;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mCAAgC;AAExE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,gBAAgB,QAAQ,wBAAqB;AAEtD,SAASC,eAAeC,EAAwB;IAC9C,MAAMC,cAAcP,MAAMQ,KAAK;IAC/B,MAAMC,UAAUH,eAAAA,gBAAAA,KAAM,CAAC,SAAS,EAAEC,aAAa;IAC/C,MAAMG,YAAY,CAAC,gBAAgB,EAAEJ,eAAAA,gBAAAA,KAAMC,aAAa;IAExD,OAAO;QAAEE;QAASC;IAAU;AAC9B;AAmBA,OAAO,MAAMC,YAGT;QAAC,EACHL,EAAE,EACFM,UAAUC,YAAY,EACtBC,kBAAkB,KAAK,EACvBC,UAAUC,YAAY,EACtBC,QAAQ,EAEO,WADZC;QALHZ;QACAM;QACAE;QACAC;QACAE;;IAGA,MAAM,EAAER,OAAO,EAAEC,SAAS,EAAE,GAAGL,eAAeC;IAE9C,MAAM,CAACM,UAAUG,SAAS,GAAGd,wBAAwB;QACnDkB,OAAON;QACPO,cAAcN;QACdC,UAAUC;QACVK,UAAUH,UAAUG,QAAQ;IAC9B;IAEA,MAAMC,UAAUtB,MAAMuB,OAAO,CAC3B,IAAO,CAAA;YACLd;YACAC;YACAE,UAAUA,YAAY;YACtBG;QACF,CAAA,GACA;QAACL;QAAWE;QAAUH;QAASM;KAAS;IAG1C,qBAAO,KAACZ,iBAAiBqB,QAAQ;QAACL,OAAOG;kBAAUL;;AACrD,EAAE;AAEFN,UAAUc,WAAW,GAAG;AAExBd,UAAUe,OAAO,GAAGtB;AACpBO,UAAUe,OAAO,CAACD,WAAW,GAAG;AAEhCd,UAAUgB,OAAO,GAAGzB;AACpBS,UAAUgB,OAAO,CAACF,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,EACnB,WAAW,GAAG,qBAAqB,GAAG,WAAW,GAAG,WAAW,CAChE,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,4IAYrB,gBAAgB,KAAG,KAAK,CAAC,SAgG3B,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,mBAAmB,EACnB,WAAW,GAAG,qBAAqB,GAAG,WAAW,GAAG,WAAW,CAChE,EACD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,4IAYrB,gBAAgB,KAAG,KAAK,CAAC,SAqG3B,CAAC"}

package/dist/components/ActionSheet/ActionSheet.js

@@ -6,9 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { noop } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
+import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
@@ -33,7 +33,7 @@ import { ActionSheetDropdownSheet } from "./ActionSheetDropdownSheet.js";
     ]);
     const platform = usePlatform();
     const [closingBy, setClosingBy] = React.useState(undefined);
-    const onCloseWithOther = ()=>setClosingBy('other');
+    const onCloseWithOther = React.useCallback(()=>setClosingBy('other'), []);
     const actionCallbackRef = React.useRef(noop);
     const [animationState, animationHandlers] = useCSSKeyframesAnimationController(closingBy !== undefined ? 'exit' : 'enter', {
         onExited () {
@@ -59,11 +59,15 @@ import { ActionSheetDropdownSheet } from "./ActionSheetDropdownSheet.js";
                 action && action(event);
             }
         }, []);
-    const contextValue = useObjectMemo({
-        onItemClick,
+    const contextValue = React.useMemo(()=>({
+            onItemClick,
+            mode,
+            onClose: onCloseWithOther
+        }), [
         mode,
-        onClose: onCloseWithOther
-    });
+        onCloseWithOther,
+        onItemClick
+    ]);
     const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;
     const dropdownProps = mode === 'menu' ? Object.assign(restProps, {
         popupOffsetDistance,
@@ -111,14 +115,16 @@ import { ActionSheetDropdownSheet } from "./ActionSheetDropdownSheet.js";
     if (mode === 'menu') {
         return actionSheet;
     }
-    return /*#__PURE__*/ _jsx(PopoutWrapper, {
-        closing: Boolean(closingBy),
-        alignY: "bottom",
-        className: className,
-        style: style,
-        onClick: onCloseWithOther,
-        fixed: true,
-        children: actionSheet
+    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+        children: /*#__PURE__*/ _jsx(PopoutWrapper, {
+            closing: Boolean(closingBy),
+            alignY: "bottom",
+            className: className,
+            style: style,
+            onClick: onCloseWithOther,
+            fixed: true,
+            children: actionSheet
+        })
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  title,\n  description,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps): React.ReactNode => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = () => setClosingBy('other');\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, mode, onClose: onCloseWithOther });\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles.contentWrapper}>\n          {(title || description) && (\n            <div className={styles.header}>\n              {title && (\n                <Footnote weight=\"2\" className={styles.title}>\n                  {title}\n                </Footnote>\n              )}\n              {description && <Footnote className={styles.description}>{description}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles.closeItemWrapperIos}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onCloseWithOther}\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useCSSKeyframesAnimationController","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","ActionSheet","children","className","title","description","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","weight","alignY","onClick","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  title,\n  description,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps): React.ReactNode => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = React.useCallback(() => setClosingBy('other'), []);\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = React.useMemo(\n    () => ({ onItemClick, mode, onClose: onCloseWithOther }),\n    [mode, onCloseWithOther, onItemClick],\n  );\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles.contentWrapper}>\n          {(title || description) && (\n            <div className={styles.header}>\n              {title && (\n                <Footnote weight=\"2\" className={styles.title}>\n                  {title}\n                </Footnote>\n              )}\n              {description && <Footnote className={styles.description}>{description}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles.closeItemWrapperIos}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <ModalPopoutPortal>\n      <PopoutWrapper\n        closing={Boolean(closingBy)}\n        alignY=\"bottom\"\n        className={className}\n        style={style}\n        onClick={onCloseWithOther}\n        fixed\n      >\n        {actionSheet}\n      </PopoutWrapper>\n    </ModalPopoutPortal>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","ModalPopoutPortal","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","ActionSheet","children","className","title","description","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","useCallback","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useMemo","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","weight","alignY","onClick","fixed"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 import type { ButtonProps } from '../Button/Button';
 import type { AlertActionProps } from './AlertAction';
 type AlertActionMode = 'cancel' | 'destructive' | 'default';
@@ -41,10 +42,11 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLElement>, 'tit
      * `data-testid` для кнопки закрытия
      */
     dismissButtonTestId?: string;
+    usePortal?: AppRootPortalProps['usePortal'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */
-export declare const Alert: ({ actions, actionsLayout, children, className, style, title, description, onClose, dismissLabel, renderAction, actionsAlign, dismissButtonMode, dismissButtonTestId, getRootRef, ...restProps }: AlertProps) => React.ReactNode;
+export declare const Alert: ({ actions, actionsLayout, children, className, style, title, description, onClose, dismissLabel, renderAction, actionsAlign, dismissButtonMode, dismissButtonTestId, getRootRef, usePortal, ...restProps }: AlertProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=Alert.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,SAAS,EACT,wBAAwB,EACxB,gBAAgB,EAChB,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKtD,KAAK,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EACpC,wBAAwB,EACxB,gBAAgB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,YAAY,CAAA;KAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,UAAU,CAAC,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,oMAgBf,UAAU,KAAG,KAAK,CAAC,SAgHrB,CAAC"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EACV,SAAS,EACT,wBAAwB,EACxB,gBAAgB,EAChB,UAAU,EACX,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKtD,KAAK,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EACpC,wBAAwB,EACxB,gBAAgB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,YAAY,CAAA;KAAE,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,UAAU,CAAC,cAAc,CAAC;IAC5B,aAAa,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACzC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;CAC7C;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,+MAiBf,UAAU,KAAG,KAAK,CAAC,SAkHrB,CAAC"}

package/dist/components/Alert/Alert.js

@@ -10,6 +10,7 @@ import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJS
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
 import { stopPropagation } from "../../lib/utils.js";
+import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -20,7 +21,7 @@ import { AlertDescription, AlertTitle } from "./AlertTypography.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */ export const Alert = (_param)=>{
-    var { actions, actionsLayout = 'horizontal', children, className, style, title, description, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, dismissButtonMode = 'outside', dismissButtonTestId, getRootRef } = _param, restProps = _object_without_properties(_param, [
+    var { actions, actionsLayout = 'horizontal', children, className, style, title, description, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, dismissButtonMode = 'outside', dismissButtonTestId, getRootRef, usePortal } = _param, restProps = _object_without_properties(_param, [
         "actions",
         "actionsLayout",
         "children",
@@ -34,7 +35,8 @@ import { AlertDescription, AlertTitle } from "./AlertTypography.js";
         "actionsAlign",
         "dismissButtonMode",
         "dismissButtonTestId",
-        "getRootRef"
+        "getRootRef",
+        "usePortal"
     ]);
     const generatedId = React.useId();
     const titleId = `vkui-alert-${generatedId}-title`;
@@ -71,60 +73,63 @@ import { AlertDescription, AlertTitle } from "./AlertTypography.js";
         close
     ]);
     useScrollLock();
-    return /*#__PURE__*/ _jsx(PopoutWrapper, {
-        className: className,
-        closing: closing,
-        style: style,
-        onClick: close,
-        getRootRef: getRootRef,
-        children: /*#__PURE__*/ _jsxs(FocusTrap, _object_spread_props(_object_spread({}, restProps, animationHandlers), {
-            getRootRef: elementRef,
-            onClick: stopPropagation,
-            onClose: close,
-            autoFocus: animationState === 'entered',
-            className: classNames("vkuiAlert__host", platform === 'ios' && "vkuiAlert__ios", platform === 'vkcom' && "vkuiAlert__vkcom", closing ? "vkuiAlert__closing" : "vkuiAlert__opening", isDesktop && "vkuiAlert__desktop"),
-            role: "alertdialog",
-            "aria-modal": true,
-            "aria-labelledby": titleId,
-            "aria-describedby": descriptionId,
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: classNames("vkuiAlert__content", dismissButtonMode === 'inside' && "vkuiAlert__contentWithButton"),
-                    children: [
-                        hasReactNode(title) && /*#__PURE__*/ _jsx(AlertTitle, {
-                            id: titleId,
-                            children: title
-                        }),
-                        hasReactNode(description) && /*#__PURE__*/ _jsx(AlertDescription, {
-                            id: descriptionId,
-                            children: description
-                        }),
-                        children,
-                        isDismissButtonVisible && dismissButtonMode === 'inside' && /*#__PURE__*/ _jsx(IconButton, {
-                            label: dismissLabel,
-                            className: classNames("vkuiAlert__dismiss", 'vkuiInternalAlert__dismiss'),
-                            onClick: close,
-                            hoverMode: "opacity",
-                            activeMode: "opacity",
-                            "data-testid": dismissButtonTestId,
-                            children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(AlertActions, {
-                    actions: actions,
-                    actionsAlign: actionsAlign,
-                    actionsLayout: actionsLayout,
-                    renderAction: renderAction,
-                    onItemClick: onItemClick
-                }),
-                isDismissButtonVisible && dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalDismissButton, {
-                    onClick: close,
-                    "data-testid": dismissButtonTestId,
-                    children: dismissLabel
-                })
-            ]
-        }))
+    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+        usePortal: usePortal,
+        children: /*#__PURE__*/ _jsx(PopoutWrapper, {
+            className: className,
+            closing: closing,
+            style: style,
+            onClick: close,
+            getRootRef: getRootRef,
+            children: /*#__PURE__*/ _jsxs(FocusTrap, _object_spread_props(_object_spread({}, restProps, animationHandlers), {
+                getRootRef: elementRef,
+                onClick: stopPropagation,
+                onClose: close,
+                autoFocus: animationState === 'entered',
+                className: classNames("vkuiAlert__host", platform === 'ios' && "vkuiAlert__ios", platform === 'vkcom' && "vkuiAlert__vkcom", closing ? "vkuiAlert__closing" : "vkuiAlert__opening", isDesktop && "vkuiAlert__desktop"),
+                role: "alertdialog",
+                "aria-modal": true,
+                "aria-labelledby": titleId,
+                "aria-describedby": descriptionId,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: classNames("vkuiAlert__content", dismissButtonMode === 'inside' && "vkuiAlert__contentWithButton"),
+                        children: [
+                            hasReactNode(title) && /*#__PURE__*/ _jsx(AlertTitle, {
+                                id: titleId,
+                                children: title
+                            }),
+                            hasReactNode(description) && /*#__PURE__*/ _jsx(AlertDescription, {
+                                id: descriptionId,
+                                children: description
+                            }),
+                            children,
+                            isDismissButtonVisible && dismissButtonMode === 'inside' && /*#__PURE__*/ _jsx(IconButton, {
+                                label: dismissLabel,
+                                className: classNames("vkuiAlert__dismiss", 'vkuiInternalAlert__dismiss'),
+                                onClick: close,
+                                hoverMode: "opacity",
+                                activeMode: "opacity",
+                                "data-testid": dismissButtonTestId,
+                                children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(AlertActions, {
+                        actions: actions,
+                        actionsAlign: actionsAlign,
+                        actionsLayout: actionsLayout,
+                        renderAction: renderAction,
+                        onItemClick: onItemClick
+                    }),
+                    isDismissButtonVisible && dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalDismissButton, {
+                        onClick: close,
+                        "data-testid": dismissButtonTestId,
+                        children: dismissLabel
+                    })
+                ]
+            }))
+        })
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n  AlignType,\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n} from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } 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    HasDataAttribute {\n  title: string;\n  /**\n   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n   * то в аргументы `action` передаётся объект с функцией close,\n   * вызвав которую можно закрыть `action` вручную.\n   */\n  action?: (args?: { close?: VoidFunction }) => void;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    HasRootRef<HTMLDivElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  onClose: VoidFunction;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   * Доступно только в `compact`-режиме, не отображается на `iOS`\n   */\n  dismissButtonMode?: 'inside' | 'outside';\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  dismissButtonTestId?: 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  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  getRootRef,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const generatedId = React.useId();\n\n  const titleId = `vkui-alert-${generatedId}-title`;\n  const descriptionId = `vkui-alert-${generatedId}-description`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const [closing, setClosing] = React.useState(false);\n  const itemActionCallbackRef = React.useRef(noop);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closing ? 'exit' : 'enter',\n    {\n      onExited() {\n        itemActionCallbackRef.current();\n        itemActionCallbackRef.current = noop;\n        onClose();\n      },\n    },\n  );\n  const isDismissButtonVisible = isDesktop && platform !== 'ios';\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action: itemAction, autoCloseDisabled = false } = item;\n\n      if (autoCloseDisabled) {\n        itemAction && itemAction({ close });\n      } else {\n        if (itemAction) {\n          itemActionCallbackRef.current = itemAction;\n        }\n        setClosing(true);\n      }\n    },\n    [close],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      className={className}\n      closing={closing}\n      style={style}\n      onClick={close}\n      getRootRef={getRootRef}\n    >\n      <FocusTrap\n        {...restProps}\n        {...animationHandlers}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        autoFocus={animationState === 'entered'}\n        className={classNames(\n          styles.host,\n          platform === 'ios' && styles.ios,\n          platform === 'vkcom' && styles.vkcom,\n          closing ? styles.closing : styles.opening,\n          isDesktop && styles.desktop,\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n      >\n        <div\n          className={classNames(\n            styles.content,\n            dismissButtonMode === 'inside' && styles.contentWithButton,\n          )}\n        >\n          {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n          {hasReactNode(description) && (\n            <AlertDescription id={descriptionId}>{description}</AlertDescription>\n          )}\n          {children}\n          {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n            <IconButton\n              label={dismissLabel}\n              className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n              onClick={close}\n              hoverMode=\"opacity\"\n              activeMode=\"opacity\"\n              data-testid={dismissButtonTestId}\n            >\n              <Icon20Cancel />\n            </IconButton>\n          )}\n        </div>\n        <AlertActions\n          actions={actions}\n          actionsAlign={actionsAlign}\n          actionsLayout={actionsLayout}\n          renderAction={renderAction}\n          onItemClick={onItemClick}\n        />\n        {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n          <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n            {dismissLabel}\n          </ModalDismissButton>\n        )}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","role","aria-modal","aria-labelledby","aria-describedby","div","id","label","hoverMode","activeMode","data-testid"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n  AlignType,\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } 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    HasDataAttribute {\n  title: string;\n  /**\n   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n   * то в аргументы `action` передаётся объект с функцией close,\n   * вызвав которую можно закрыть `action` вручную.\n   */\n  action?: (args?: { close?: VoidFunction }) => void;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    HasRootRef<HTMLDivElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  onClose: VoidFunction;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   * Доступно только в `compact`-режиме, не отображается на `iOS`\n   */\n  dismissButtonMode?: 'inside' | 'outside';\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  dismissButtonTestId?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\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  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  getRootRef,\n  usePortal,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const generatedId = React.useId();\n\n  const titleId = `vkui-alert-${generatedId}-title`;\n  const descriptionId = `vkui-alert-${generatedId}-description`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const [closing, setClosing] = React.useState(false);\n  const itemActionCallbackRef = React.useRef(noop);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closing ? 'exit' : 'enter',\n    {\n      onExited() {\n        itemActionCallbackRef.current();\n        itemActionCallbackRef.current = noop;\n        onClose();\n      },\n    },\n  );\n  const isDismissButtonVisible = isDesktop && platform !== 'ios';\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action: itemAction, autoCloseDisabled = false } = item;\n\n      if (autoCloseDisabled) {\n        itemAction && itemAction({ close });\n      } else {\n        if (itemAction) {\n          itemActionCallbackRef.current = itemAction;\n        }\n        setClosing(true);\n      }\n    },\n    [close],\n  );\n\n  useScrollLock();\n\n  return (\n    <ModalPopoutPortal usePortal={usePortal}>\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={close}\n        getRootRef={getRootRef}\n      >\n        <FocusTrap\n          {...restProps}\n          {...animationHandlers}\n          getRootRef={elementRef}\n          onClick={stopPropagation}\n          onClose={close}\n          autoFocus={animationState === 'entered'}\n          className={classNames(\n            styles.host,\n            platform === 'ios' && styles.ios,\n            platform === 'vkcom' && styles.vkcom,\n            closing ? styles.closing : styles.opening,\n            isDesktop && styles.desktop,\n          )}\n          role=\"alertdialog\"\n          aria-modal\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n        >\n          <div\n            className={classNames(\n              styles.content,\n              dismissButtonMode === 'inside' && styles.contentWithButton,\n            )}\n          >\n            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n            {hasReactNode(description) && (\n              <AlertDescription id={descriptionId}>{description}</AlertDescription>\n            )}\n            {children}\n            {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n              <IconButton\n                label={dismissLabel}\n                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n                onClick={close}\n                hoverMode=\"opacity\"\n                activeMode=\"opacity\"\n                data-testid={dismissButtonTestId}\n              >\n                <Icon20Cancel />\n              </IconButton>\n            )}\n          </div>\n          <AlertActions\n            actions={actions}\n            actionsAlign={actionsAlign}\n            actionsLayout={actionsLayout}\n            renderAction={renderAction}\n            onItemClick={onItemClick}\n          />\n          {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n              {dismissLabel}\n            </ModalDismissButton>\n          )}\n        </FocusTrap>\n      </PopoutWrapper>\n    </ModalPopoutPortal>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","ModalPopoutPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","role","aria-modal","aria-labelledby","aria-describedby","div","id","label","hoverMode","activeMode","data-testid"],"mappings":"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"}

package/dist/components/AppRoot/AppRoot.d.ts

@@ -46,9 +46,10 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
      * @since 6.2.0
      */
     userSelectMode?: AppRootUserSelectMode;
+    disableSettingVKUIClassesInRuntime?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, ...props }: AppRootProps) => React.ReactNode;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, ...props }: AppRootProps) => React.ReactNode;
 //# sourceMappingURL=AppRoot.d.ts.map

package/dist/components/AppRoot/AppRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,cAAc,EACf,MAAM,SAAS,CAAC;AAGjB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;CACxC;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,2MAYjB,YAAY,KAAG,KAAK,CAAC,SAqJvB,CAAC"}
+{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,cAAc,EACf,MAAM,SAAS,CAAC;AAGjB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,qBAAqB,CAAC;IAUvC,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,oOAYjB,YAAY,KAAG,KAAK,CAAC,SAkHvB,CAAC"}