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

package/dist/components/Gallery/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport type { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  onDragStart,\n  onDragEnd,\n  ...props\n}: GalleryProps): React.ReactNode => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoPlayControls = useAutoPlay({\n    timeout,\n    slideIndex,\n    onNext: () => handleChange((slideIndex + 1) % childCount),\n  });\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}\n      onDragEnd={callMultiple(onDragEnd, autoPlayControls.resume)}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","callMultiple","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","onDragStart","onDragEnd","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","autoPlayControls","onNext","safeSlideIndex","useEffect","Component","dragDisabled","pause","resume"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,YAAY,QAAQ,8CAA2C;AAExE,SAASC,WAAW,QAAQ,aAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EAEI,WADVC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiBC,cAAc,GAAGlB,MAAMmB,QAAQ,CAACX;IACxD,MAAMY,eAAe,OAAOJ,MAAMK,UAAU,KAAK;QACfL;IAAlC,MAAMK,aAAaD,eAAeJ,CAAAA,oBAAAA,MAAMK,UAAU,cAAhBL,+BAAAA,oBAAoB,IAAIC;IAC1D,MAAMK,SAAStB,MAAMuB,OAAO,CAC1B,IAAMvB,MAAMwB,QAAQ,CAACC,OAAO,CAAChB,UAAUiB,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAAClB;KAAS;IAEZ,MAAMoB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW7B;IAEjB,MAAM8B,eAAyChC,MAAMiC,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BvB,YAAYA,SAASuB;IACvB,GACA;QAACd;QAAcT;QAAUU;KAAW;IAGtC,MAAMc,mBAAmB7B,YAAY;QACnCI;QACAW;QACAe,QAAQ,IAAMJ,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAChD;IAEA,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMQ,iBAAiBR,aAAa,IAAI5B,MAAMoB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnCrB,MAAMsC,SAAS,CAAC;QACd,IAAI3B,YAAY0B,mBAAmBhB,YAAY;YAC7CV,SAAS0B;QACX;QACAnB,cAAcmB;IAChB,GAAG;QAAC1B;QAAU0B;QAAgBhB;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMQ,YAAY1B,SAASR,eAAeD;IAE1C,qBACE,KAACmC;QACCC,cAAcpB,gBAAgB,CAACT;OAC3BK;QACJF,aAAaX,aAAaW,aAAaqB,iBAAiBM,KAAK;QAC7D1B,WAAWZ,aAAaY,WAAWoB,iBAAiBO,MAAM;QAC1D9B,SAASiB,aAAa,KAAKjB;QAC3BS,YAAYgB;QACZ1B,UAAUqB;kBAETV;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport type { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  onDragStart,\n  onDragEnd,\n  ...props\n}: GalleryProps): React.ReactNode => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? (props.slideIndex ?? 0) : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  const autoPlayControls = useAutoPlay({\n    timeout,\n    slideIndex,\n    onNext: () => handleChange((slideIndex + 1) % childCount),\n  });\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      onDragStart={callMultiple(onDragStart, autoPlayControls.pause)}\n      onDragEnd={callMultiple(onDragEnd, autoPlayControls.resume)}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","callMultiple","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","onDragStart","onDragEnd","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","autoPlayControls","onNext","safeSlideIndex","useEffect","Component","dragDisabled","pause","resume"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,wBAAqB;AAC3C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,YAAY,QAAQ,8CAA2C;AAExE,SAASC,WAAW,QAAQ,aAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EAEI,WADVC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiBC,cAAc,GAAGlB,MAAMmB,QAAQ,CAACX;IACxD,MAAMY,eAAe,OAAOJ,MAAMK,UAAU,KAAK;QACdL;IAAnC,MAAMK,aAAaD,eAAgBJ,CAAAA,oBAAAA,MAAMK,UAAU,cAAhBL,+BAAAA,oBAAoB,IAAKC;IAC5D,MAAMK,SAAStB,MAAMuB,OAAO,CAC1B,IAAMvB,MAAMwB,QAAQ,CAACC,OAAO,CAAChB,UAAUiB,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAAClB;KAAS;IAEZ,MAAMoB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW7B;IAEjB,MAAM8B,eAAyChC,MAAMiC,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BvB,YAAYA,SAASuB;IACvB,GACA;QAACd;QAAcT;QAAUU;KAAW;IAGtC,MAAMc,mBAAmB7B,YAAY;QACnCI;QACAW;QACAe,QAAQ,IAAMJ,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAChD;IAEA,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMQ,iBAAiBR,aAAa,IAAI5B,MAAMoB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnCrB,MAAMsC,SAAS,CAAC;QACd,IAAI3B,YAAY0B,mBAAmBhB,YAAY;YAC7CV,SAAS0B;QACX;QACAnB,cAAcmB;IAChB,GAAG;QAAC1B;QAAU0B;QAAgBhB;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMQ,YAAY1B,SAASR,eAAeD;IAE1C,qBACE,KAACmC;QACCC,cAAcpB,gBAAgB,CAACT;OAC3BK;QACJF,aAAaX,aAAaW,aAAaqB,iBAAiBM,KAAK;QAC7D1B,WAAWZ,aAAaY,WAAWoB,iBAAiBO,MAAM;QAC1D9B,SAASiB,aAAa,KAAKjB;QAC3BS,YAAYgB;QACZ1B,UAAUqB;kBAETV;;AAGP,EAAE"}

package/dist/components/Group/GroupContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAsD3E,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GACtE,YAAY,GAAG;IACb;;;;KAIC;IACD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACrB,CAAC;AAIJ,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiExD,CAAC"}
+{"version":3,"file":"GroupContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqD3E,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GACtE,YAAY,GAAG;IACb;;;;KAIC;IACD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACrB,CAAC;AAIJ,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiExD,CAAC"}

package/dist/components/Group/GroupContainer.js

@@ -5,10 +5,10 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useModalContext } from "../../context/ModalContext.js";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { warnOnce } from "../../lib/warnOnce.js";
 import { AppRootContext } from "../AppRoot/AppRootContext.js";
-import { ModalRootContext } from "../ModalRoot/ModalRootContext.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 const sizeXClassNames = {
     none: classNames("vkuiGroup__sizeXNone", 'vkuiInternalGroup--sizeX-none'),
@@ -51,7 +51,7 @@ export const GroupContainer = (_param)=>{
         "padding",
         "tabIndex"
     ]);
-    const { isInsideModal } = React.useContext(ModalRootContext);
+    const isInsideModal = useModalContext().id !== null;
     const { sizeX = 'none' } = useAdaptivity();
     const mode = useGroupMode(modeProps, sizeX, isInsideModal);
     const isTabPanel = restProps.role === 'tabpanel';

package/dist/components/Group/GroupContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles.sizeXNone, 'vkuiInternalGroup--sizeX-none'),\n  regular: styles.sizeXRegular,\n  compact: styles.sizeXCompact,\n};\n\nconst stylesMode = {\n  none: classNames(styles.modeNone, 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles.modePlain, 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles.modeCard, 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles.paddingS,\n  m: styles.paddingM,\n};\n\ntype GroupMode = 'plain' | 'card' | 'none';\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupContainerProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): GroupMode {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n    separator?: 'show' | 'hide' | 'auto';\n    /**\n     * Режим отображения. Если установлен `card`, выглядит как карточка c\n     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n     * В модальных окнах по умолчанию `plain`.\n     */\n    mode?: 'plain' | 'card';\n    /**\n     * Отвечает за отступы вокруг контента в режиме `card`.\n     */\n    padding?: 's' | 'm';\n  };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer: React.FC<GroupContainerProps> = ({\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupContainerProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles.separatorSibling} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles.separatorSibling,\n            mode === 'plain' || mode === 'none' ? styles.separatorSiblingForced : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles.host,\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles.modePlainInsideModal,\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {children}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\nGroupContainer.displayName = 'GroupContainer';\n"],"names":["React","classNames","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","sizeXClassNames","none","regular","compact","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","Component","baseClassName","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,gBAAgB,QAAQ,mCAAgC;AACjE,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,MAAMP,mCAA6B;IACnCQ,OAAO;IACPC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBH,MAAMP,kCAA4B;IAClCW,OAAOX,mCAA6B;IACpCY,MAAMZ,kCAA4B;AACpC;AAEA,MAAMa,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGrB,MAAMsB,UAAU,CAAClB;IAEpC,IAAIc,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAuBA,MAAMI,OAAOpB,SAAS;AAEtB,OAAO,MAAMqB,iBAAgD;QAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EAEF,WADjBC;QALHP;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEV,aAAa,EAAE,GAAGpB,MAAMsB,UAAU,CAACjB;IAC3C,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,MAAMyB,OAAOV,aAAaW,WAAWT,OAAOC;IAE5C,MAAMa,aAAaD,UAAUE,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACD,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWG,cAAcF,iBAAiBO,YAAY,IAAIP;IAEhE,IAAIQ,0BAA2C;IAC/C,OAAQb;QACN,KAAK;YACHa,wCAA0B,KAACC;gBAAIC,SAAS;;YACxC;QACF,KAAK;YACHF,wCACE,KAACC;gBACCC,WAAWxC,0CAET0B,SAAS,WAAWA,SAAS,+CAAyCW;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAAChC;gBACCoC,WAAU;eACNV;gBACJF,UAAUA;gBACVa,eAAe1C,WACb,wCAEAM,eAAe,CAACY,MAAM,EACtBQ,SAAS,WAAWP,oDACpBT,UAAU,CAACgB,KAAK,EAChBb,aAAa,CAACe,QAAQ;0BAGvBJ;;YAEFc;;;AAGP,EAAE;AACFf,eAAeoB,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles.sizeXNone, 'vkuiInternalGroup--sizeX-none'),\n  regular: styles.sizeXRegular,\n  compact: styles.sizeXCompact,\n};\n\nconst stylesMode = {\n  none: classNames(styles.modeNone, 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles.modePlain, 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles.modeCard, 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles.paddingS,\n  m: styles.paddingM,\n};\n\ntype GroupMode = 'plain' | 'card' | 'none';\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupContainerProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): GroupMode {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n    separator?: 'show' | 'hide' | 'auto';\n    /**\n     * Режим отображения. Если установлен `card`, выглядит как карточка c\n     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n     * В модальных окнах по умолчанию `plain`.\n     */\n    mode?: 'plain' | 'card';\n    /**\n     * Отвечает за отступы вокруг контента в режиме `card`.\n     */\n    padding?: 's' | 'm';\n  };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer: React.FC<GroupContainerProps> = ({\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupContainerProps) => {\n  const isInsideModal = useModalContext().id !== null;\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles.separatorSibling} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles.separatorSibling,\n            mode === 'plain' || mode === 'none' ? styles.separatorSiblingForced : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles.host,\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles.modePlainInsideModal,\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {children}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\nGroupContainer.displayName = 'GroupContainer';\n"],"names":["React","classNames","useModalContext","useAdaptivity","warnOnce","AppRootContext","RootComponent","sizeXClassNames","none","regular","compact","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","id","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","Component","baseClassName","displayName"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAAQ,wBAAqB;AAE9C,SAASC,cAAc,QAAQ,+BAA4B;AAC3D,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,MAAMP,mCAA6B;IACnCQ,OAAO;IACPC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBH,MAAMP,kCAA4B;IAClCW,OAAOX,mCAA6B;IACpCY,MAAMZ,kCAA4B;AACpC;AAEA,MAAMa,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGrB,MAAMsB,UAAU,CAACjB;IAEpC,IAAIa,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAuBA,MAAMI,OAAOnB,SAAS;AAEtB,OAAO,MAAMoB,iBAAgD;QAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EAEF,WADjBC;QALHP;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAMV,gBAAgBlB,kBAAkB+B,EAAE,KAAK;IAC/C,MAAM,EAAEd,QAAQ,MAAM,EAAE,GAAGhB;IAE3B,MAAMwB,OAAOV,aAAaW,WAAWT,OAAOC;IAE5C,MAAMc,aAAaF,UAAUG,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACF,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWI,cAAcH,iBAAiBQ,YAAY,IAAIR;IAEhE,IAAIS,0BAA2C;IAC/C,OAAQd;QACN,KAAK;YACHc,wCAA0B,KAACC;gBAAIC,SAAS;;YACxC;QACF,KAAK;YACHF,wCACE,KAACC;gBACCC,WAAWzC,0CAET0B,SAAS,WAAWA,SAAS,+CAAyCY;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAACjC;gBACCqC,WAAU;eACNX;gBACJF,UAAUA;gBACVc,eAAe3C,WACb,wCAEAM,eAAe,CAACY,MAAM,EACtBQ,SAAS,WAAWP,oDACpBT,UAAU,CAACgB,KAAK,EAChBb,aAAa,CAACe,QAAQ;0BAGvBJ;;YAEFe;;;AAGP,EAAE;AACFhB,eAAeqB,WAAW,GAAG"}

package/dist/components/Link/Link.d.ts

@@ -1,12 +1,25 @@
+import type { ReactElement } from 'react';
 import { type TappableProps } from '../Tappable/Tappable';
 export interface LinkProps extends TappableProps {
     /**
-     * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет
+     * Иконка слева.
+     */
+    before?: ReactElement;
+    /**
+     * Иконка справа.
+     */
+    after?: ReactElement;
+    /**
+     * Выключает появления нижнего подчеркивания при наведении.
+     */
+    noUnderline?: boolean;
+    /**
+     * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.
      */
     hasVisited?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
-export declare const Link: ({ hasVisited, children, className, ...restProps }: LinkProps) => React.ReactNode;
+export declare const Link: ({ before: beforeProp, after: afterProp, noUnderline, hasVisited, children, className, ...restProps }: LinkProps) => React.ReactNode;
 //# sourceMappingURL=Link.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,sDAKd,SAAS,KAAG,KAAK,CAAC,SAcpB,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,yGAQd,SAAS,KAAG,KAAK,CAAC,SAwBpB,CAAC"}

package/dist/components/Link/Link.js

@@ -1,26 +1,41 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@vkontakte/vkjs";
 import { Tappable } from "../Tappable/Tappable.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */ export const Link = (_param)=>{
-    var { hasVisited, children, className } = _param, restProps = _object_without_properties(_param, [
+    var { before: beforeProp, after: afterProp, noUnderline, hasVisited, children, className } = _param, restProps = _object_without_properties(_param, [
+        "before",
+        "after",
+        "noUnderline",
         "hasVisited",
         "children",
         "className"
     ]);
-    return /*#__PURE__*/ _jsx(Tappable, _object_spread_props(_object_spread({
+    const before = beforeProp ? /*#__PURE__*/ _jsx("span", {
+        className: "vkuiLink__before",
+        children: beforeProp
+    }) : null;
+    const after = afterProp ? /*#__PURE__*/ _jsx("span", {
+        className: "vkuiLink__after",
+        children: afterProp
+    }) : null;
+    return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
         Component: restProps.href ? 'a' : 'button'
     }, restProps), {
-        className: classNames("vkuiLink__host", hasVisited && "vkuiLink__hasVisited", className),
+        className: classNames("vkuiLink__host", hasVisited && "vkuiLink__hasVisited", noUnderline ? undefined : "vkuiLink__withUnderline", className),
         hasHover: false,
         activeMode: "opacity",
         hoverMode: "none",
         focusVisibleMode: "outside",
-        children: children
+        children: [
+            before,
+            children,
+            after
+        ]
     }));
 };
 

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({\n  hasVisited,\n  children,\n  className,\n  ...restProps\n}: LinkProps): React.ReactNode => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(styles.host, hasVisited && styles.hasVisited, className)}\n      hasHover={false}\n      activeMode=\"opacity\"\n      hoverMode=\"none\"\n      focusVisibleMode=\"outside\"\n    >\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["classNames","Tappable","Link","hasVisited","children","className","restProps","Component","href","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAUpE;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEC,WADPC;QAHHH;QACAC;QACAC;;IAGA,qBACE,KAACJ;QACCM,WAAWD,UAAUE,IAAI,GAAG,MAAM;OAC9BF;QACJD,WAAWL,6BAAwBG,sCAAiCE;QACpEI,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;kBAEhBR;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n  /**\n   * Иконка слева.\n   */\n  before?: ReactElement;\n  /**\n   * Иконка справа.\n   */\n  after?: ReactElement;\n  /**\n   * Выключает появления нижнего подчеркивания при наведении.\n   */\n  noUnderline?: boolean;\n  /**\n   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет.\n   */\n  hasVisited?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({\n  before: beforeProp,\n  after: afterProp,\n  noUnderline,\n  hasVisited,\n  children,\n  className,\n  ...restProps\n}: LinkProps): React.ReactNode => {\n  const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;\n  const after = afterProp ? <span className={styles.after}>{afterProp}</span> : null;\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      {...restProps}\n      className={classNames(\n        styles.host,\n        hasVisited && styles.hasVisited,\n        noUnderline ? undefined : styles.withUnderline,\n        className,\n      )}\n      hasHover={false}\n      activeMode=\"opacity\"\n      hoverMode=\"none\"\n      focusVisibleMode=\"outside\"\n    >\n      {before}\n      {children}\n      {after}\n    </Tappable>\n  );\n};\n"],"names":["classNames","Tappable","Link","before","beforeProp","after","afterProp","noUnderline","hasVisited","children","className","restProps","span","Component","href","undefined","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";;;;AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AAsBpE;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,QAAQC,UAAU,EAClBC,OAAOC,SAAS,EAChBC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,SAAS,EAEC,WADPC;QANHR;QACAE;QACAE;QACAC;QACAC;QACAC;;IAGA,MAAMP,SAASC,2BAAa,KAACQ;QAAKF,SAAS;kBAAkBN;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACM;QAAKF,SAAS;kBAAiBJ;SAAoB;IAE9E,qBACE,MAACL;QACCY,WAAWF,UAAUG,IAAI,GAAG,MAAM;OAC9BH;QACJD,WAAWV,6BAETQ,sCACAD,cAAcQ,uCACdL;QAEFM,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;;YAEhBhB;YACAM;YACAJ;;;AAGP,EAAE"}

package/dist/components/ModalCard/ModalCard.d.ts

@@ -1,10 +1,6 @@
-import * as React from 'react';
-import { type NavIdProps } from '../../lib/getNavId';
-import { type ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
-export interface ModalCardProps extends NavIdProps, ModalCardBaseProps {
-}
+import type { ModalCardProps } from './types';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */
-export declare const ModalCard: ({ icon, title, titleComponent, description, descriptionComponent, children, actions, onClose, nav, id, size, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, ...restProps }: ModalCardProps) => React.ReactNode;
+export declare const ModalCard: ({ id: idProp, nav, open, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, keepMounted, ...restProps }: ModalCardProps) => React.ReactNode;
 //# sourceMappingURL=ModalCard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAWxF,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,kBAAkB;CAAG;AAIzE;;GAEG;AACH,eAAO,MAAM,SAAS,uMAiBnB,cAAc,KAAG,KAAK,CAAC,SA8CzB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCard.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C;;GAEG;AACH,eAAO,MAAM,SAAS,mIAYnB,cAAc,KAAG,KAAK,CAAC,SA8BzB,CAAC"}

package/dist/components/ModalCard/ModalCard.js

@@ -1,82 +1,57 @@
 'use client';
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { useExternRef } from "../../hooks/useExternRef.js";
-import { usePlatform } from "../../hooks/usePlatform.js";
+import { useId } from "react";
+import { ModalContext } from "../../context/ModalContext.js";
 import { getNavId } from "../../lib/getNavId.js";
 import { warnOnce } from "../../lib/warnOnce.js";
-import { ModalCardBase } from "../ModalCardBase/ModalCardBase.js";
-import { ModalRootContext, useModalRegistry } from "../ModalRoot/ModalRootContext.js";
-import { RootComponent } from "../RootComponent/RootComponent.js";
-const platformClassNames = {
-    ios: "vkuiModalCard__ios",
-    android: "vkuiModalCard__android",
-    vkcom: "vkuiModalCard__vkcom"
-};
+import { useModalManager } from "../ModalRoot/useModalManager.js";
+import { ModalCardInternal } from "./ModalCardInternal.js";
 const warn = warnOnce('ModalCard');
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
  */ export const ModalCard = (_param)=>{
-    var { icon, title, titleComponent, description, descriptionComponent, children, actions, onClose, nav, id, size, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel } = _param, restProps = _object_without_properties(_param, [
-        "icon",
-        "title",
-        "titleComponent",
-        "description",
-        "descriptionComponent",
-        "children",
-        "actions",
-        "onClose",
-        "nav",
+    var { id: idProp, nav, open = false, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, keepMounted = false } = _param, restProps = _object_without_properties(_param, [
         "id",
-        "size",
-        "modalDismissButtonTestId",
-        "getRootRef",
-        "dismissButtonMode",
-        "dismissLabel"
+        "nav",
+        "open",
+        "modalOverlayTestId",
+        "noFocusToDialog",
+        "onOpen",
+        "onOpened",
+        "onClose",
+        "onClosed",
+        "keepMounted"
     ]);
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    const platform = usePlatform();
-    const modalContext = React.useContext(ModalRootContext);
-    const { refs } = useModalRegistry(getNavId({
+    const generatingId = useId();
+    const id = getNavId({
         nav,
-        id
-    }, warn), 'card');
-    const rootRef = useExternRef(getRootRef, refs.modalElement);
-    const contextValue = React.useMemo(()=>({
-            labelId: `${id}-label`
-        }), [
-        id
+        id: idProp
+    }, warn) || generatingId;
+    const _useModalManager = useModalManager({
+        id,
+        open,
+        keepMounted,
+        modalOverlayTestId,
+        noFocusToDialog,
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed
+    }), { mounted } = _useModalManager, resolvedProps = _object_without_properties(_useModalManager, [
+        "mounted"
     ]);
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-        getRootRef: rootRef,
-        tabIndex: -1,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": contextValue.labelId,
-        id: id,
-        baseClassName: classNames("vkuiModalCard__host", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && "vkuiModalCard__desktop"),
-        children: /*#__PURE__*/ _jsx(ModalCardBase, {
-            className: "vkuiModalCard__in",
-            getRootRef: refs.innerElement,
-            icon: icon,
-            title: title,
-            titleComponent: titleComponent,
-            description: description,
-            descriptionComponent: descriptionComponent,
-            actions: actions,
-            onClose: onClose || modalContext.onClose,
-            size: size,
-            modalDismissButtonTestId: modalDismissButtonTestId,
-            dismissButtonMode: dismissButtonMode,
-            dismissLabel: dismissLabel,
-            children: children
-        })
-    }));
+    if (mounted === false) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(ModalContext.Provider, {
+        value: id,
+        children: /*#__PURE__*/ _jsx(ModalCardInternal, _object_spread({
+            id: id,
+            "aria-labelledby": `${id}-label`
+        }, resolvedProps, restProps))
+    });
 };
 
 //# sourceMappingURL=ModalCard.js.map

package/dist/components/ModalCard/ModalCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, type ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  onClose,\n  nav,\n  id,\n  size,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  ...restProps\n}: ModalCardProps): React.ReactNode => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), 'card');\n  const rootRef = useExternRef(getRootRef, refs.modalElement);\n\n  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootRef}\n      tabIndex={-1}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={contextValue.labelId}\n      id={id}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        isDesktop && styles.desktop,\n      )}\n    >\n      <ModalCardBase\n        className={styles.in}\n        getRootRef={refs.innerElement}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={onClose || modalContext.onClose}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useExternRef","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","RootComponent","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","nav","id","size","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","restProps","isDesktop","platform","modalContext","useContext","refs","rootRef","modalElement","contextValue","useMemo","labelId","tabIndex","role","aria-modal","aria-labelledby","baseClassName","hasOwnProperty","className","innerElement"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,QAAQ,QAAyB,wBAAqB;AAC/D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,mCAAgC;AACnF,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,MAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMU,YAAY;QAAC,EACxBC,IAAI,EACJC,KAAK,EACLC,cAAc,EACdC,WAAW,EACXC,oBAAoB,EACpBC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,GAAG,EACHC,EAAE,EACFC,IAAI,EACJC,wBAAwB,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,YAAY,EAEG,WADZC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,SAAS,EAAE,GAAG/B;IACtB,MAAMgC,WAAW9B;IAEjB,MAAM+B,eAAenC,MAAMoC,UAAU,CAAC5B;IACtC,MAAM,EAAE6B,IAAI,EAAE,GAAG5B,iBAAiBJ,SAAS;QAAEoB;QAAKC;IAAG,GAAGX,OAAO;IAC/D,MAAMuB,UAAUnC,aAAa0B,YAAYQ,KAAKE,YAAY;IAE1D,MAAMC,eAAexC,MAAMyC,OAAO,CAAC,IAAO,CAAA;YAAEC,SAAS,GAAGhB,GAAG,MAAM,CAAC;QAAC,CAAA,GAAI;QAACA;KAAG;IAE3E,qBACE,KAAChB,uDACKsB;QACJH,YAAYS;QACZK,UAAU,CAAC;QACXC,MAAK;QACLC,cAAW;QACXC,mBAAiBN,aAAaE,OAAO;QACrChB,IAAIA;QACJqB,eAAe9C,kCAEbU,mBAAmBqC,cAAc,CAACd,YAC9BvB,kBAAkB,CAACuB,SAAS,GAC5BvB,mBAAmBE,OAAO,EAC9BoB;kBAGF,cAAA,KAAC1B;YACC0C,SAAS;YACTpB,YAAYQ,KAAKa,YAAY;YAC7BjC,MAAMA;YACNC,OAAOA;YACPC,gBAAgBA;YAChBC,aAAaA;YACbC,sBAAsBA;YACtBE,SAASA;YACTC,SAASA,WAAWW,aAAaX,OAAO;YACxCG,MAAMA;YACNC,0BAA0BA;YAC1BE,mBAAmBA;YACnBC,cAAcA;sBAEbT;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalCardInternal } from './ModalCardInternal';\nimport type { ModalCardProps } from './types';\n\nconst warn = warnOnce('ModalCard');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  keepMounted = false,\n  ...restProps\n}: ModalCardProps): React.ReactNode => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const { mounted, ...resolvedProps } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  if (mounted === false) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalCardInternal\n        id={id}\n        aria-labelledby={`${id}-label`}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalCardInternal","warn","ModalCard","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","keepMounted","restProps","generatingId","mounted","resolvedProps","Provider","value","aria-labelledby"],"mappings":"AAAA;;;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,YAAY;QAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,KAAK,EAEJ,WADZC;QAVHX;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAepB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASc;IAElD,MAAsChB,mBAAAA,gBAAgB;QACpDI;QACAG;QACAO;QACAN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,IAVM,EAAEI,OAAO,EAAoB,GAAGjB,kBAAlBkB,2CAAkBlB;QAA9BiB;;IAYR,IAAIA,YAAY,OAAO;QACrB,OAAO;IACT;IAEA,qBACE,KAACpB,aAAasB,QAAQ;QAACC,OAAOhB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJiB,mBAAiB,GAAGjB,GAAG,MAAM,CAAC;WAC1Bc,eACAH;;AAIZ,EAAE"}

package/dist/components/ModalCard/ModalCardInternal.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';
+import type { ModalCardProps } from './types';
+export interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {
+    ModalOverlay?: ComponentType<ModalOverlayProps>;
+}
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */
+export declare const ModalCardInternal: ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose, onClosed, ...restProps }: ModalCardInternalProps) => ReactNode;
+//# sourceMappingURL=ModalCardInternal.d.ts.map

package/dist/components/ModalCard/ModalCardInternal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalCardInternal.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCardInternal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsB,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAa5F,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoB9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,aAAa,CAAC;IACzF,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACjD;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,8TAyB3B,sBAAsB,KAAG,SAqG3B,CAAC"}

package/dist/components/ModalCard/ModalCardInternal.js

@@ -0,0 +1,147 @@
+'use client';
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { classNames, noop } from "@vkontakte/vkjs";
+import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
+import { useExternRef } from "../../hooks/useExternRef.js";
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { usePlatform } from "../../hooks/usePlatform.js";
+import { useVirtualKeyboardState } from "../../hooks/useVirtualKeyboardState.js";
+import { Keys, pressedKey } from "../../lib/accessibility.js";
+import { useCSSTransition } from "../../lib/animation/index.js";
+import { useBottomSheet } from "../../lib/sheet/index.js";
+import { useScrollLock } from "../AppRoot/ScrollContext.js";
+import { ModalCardBase } from "../ModalCardBase/ModalCardBase.js";
+import { ModalOutlet } from "../ModalOutlet/ModalOutlet.js";
+import { ModalOverlay as ModalOverlayDefault } from "../ModalOverlay/ModalOverlay.js";
+const sizeByPlatformClassNames = {
+    vkcom: "vkuiModalCard__hostMaxWidthS",
+    ios: "vkuiModalCard__hostMaxWidthM",
+    android: "vkuiModalCard__hostMaxWidthL"
+};
+const transitionStateClassNames = {
+    appear: "vkuiModalCard__hostStateEnter",
+    appearing: "vkuiModalCard__hostStateEntering",
+    enter: "vkuiModalCard__hostStateEnter",
+    entering: "vkuiModalCard__hostStateEntering",
+    exiting: "vkuiModalCard__hostStateExiting",
+    exited: "vkuiModalCard__hostStateExited"
+};
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */ export const ModalCardInternal = (_param)=>{
+    var { icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose = noop, onClosed } = _param, restProps = _object_without_properties(_param, [
+        "icon",
+        "title",
+        "titleComponent",
+        "description",
+        "descriptionComponent",
+        "children",
+        "actions",
+        "size",
+        "open",
+        "style",
+        "className",
+        "preventClose",
+        "ModalOverlay",
+        "modalOverlayTestId",
+        "modalDismissButtonTestId",
+        "getRootRef",
+        "dismissButtonMode",
+        "dismissLabel",
+        "noFocusToDialog",
+        "onOpen",
+        "onOpened",
+        "onClose",
+        "onClosed"
+    ]);
+    const platform = usePlatform();
+    const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
+        enableAppear: true,
+        onEnter () {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        },
+        onEntered () {
+            onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+        },
+        onExited () {
+            onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+        }
+    });
+    const opened = transitionState === 'appeared' || transitionState === 'entered';
+    const hidden = transitionState === 'exited';
+    const closable = !preventClose && opened;
+    const { isDesktop } = useAdaptivityWithJSMediaQueries();
+    const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';
+    const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);
+    const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(bottomSheetEnabled, {
+        blocked: keyboardOpened,
+        initialSnapPoint: 'auto',
+        sheetCSSProperty: '--vkui_internal_ModalCard--translateY',
+        backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
+        onDismiss () {
+            onClose === null || onClose === void 0 ? void 0 : onClose('swipe-down');
+        }
+    });
+    const handleRef = useExternRef(setSheetEl, ref, getRootRef);
+    const style = keyboardOpened ? _object_spread_props(_object_spread({}, styleProp), {
+        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px'
+    }) : styleProp;
+    const modalOverlay = /*#__PURE__*/ _jsx(ModalOverlay, {
+        getRootRef: setBackdropEl,
+        "data-testid": modalOverlayTestId,
+        visible: open,
+        onClick: closable ? function handleBackdropClick(event) {
+            onClose('click-overlay', event);
+        } : undefined
+    });
+    const handleEscKeyDown = useCallback((event)=>{
+        if (closable && pressedKey(event) === Keys.ESCAPE) {
+            onClose('escape-key');
+        }
+    }, [
+        closable,
+        onClose
+    ]);
+    useScrollLock(!hidden);
+    useFocusTrap(ref, {
+        autoFocus: !noFocusToDialog,
+        disabled: !opened || hidden
+    });
+    return /*#__PURE__*/ _jsxs(ModalOutlet, {
+        hidden: hidden,
+        onKeyDown: handleEscKeyDown,
+        children: [
+            modalOverlay,
+            /*#__PURE__*/ _jsx(ModalCardBase, _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, restProps), {
+                tabIndex: -1,
+                role: "dialog",
+                "aria-modal": "true",
+                getRootRef: handleRef,
+                style: style,
+                className: classNames("vkuiModalCard__host", sizeByPlatformClassNames[platform], transitionStateClassNames[transitionState], className),
+                onTransitionEnd: onTransitionEnd
+            }), bottomSheetEventHandlers), {
+                icon: icon,
+                title: title,
+                titleComponent: titleComponent,
+                description: description,
+                descriptionComponent: descriptionComponent,
+                actions: actions,
+                onClose: ()=>onClose('click-close-button'),
+                size: size,
+                modalDismissButtonTestId: modalDismissButtonTestId,
+                dismissButtonMode: dismissButtonMode,
+                dismissLabel: dismissLabel,
+                children: children
+            }))
+        ]
+    });
+};
+
+//# sourceMappingURL=ModalCardInternal.js.map

package/dist/components/ModalCard/ModalCardInternal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      initialSnapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n  useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });\n\n  return (\n    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","onOpen","onOpened","onClose","onClosed","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","initialSnapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal"],"mappings":"AAAA;;;;;AAEA,SAAiEA,WAAW,QAAQ,QAAQ;AAC5F,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,gBAAgB,QAAoC,+BAAsB;AACnF,SAASC,cAAc,QAAQ,2BAAkB;AACjD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SACEC,gBAAgBC,mBAAmB,QAE9B,kCAA+B;AAItC,MAAMC,2BAA2B;IAC/BC,KAAK;IACLC,GAAG;IACHC,OAAO;AACT;AAEA,MAAMC,4BAA4E;IAChFC,MAAM;IACNC,SAAS;IAETC,KAAK;IACLC,QAAQ;IAERC,OAAO;IACPC,MAAM;AACR;AAMA;;;;CAIC,GACD,OAAO,MAAMC,oBAAoB;QAAC,EAChCC,IAAI,EACJC,KAAK,EACLC,cAAc,EACdC,WAAW,EACXC,oBAAoB,EACpBC,QAAQ,EACRC,OAAO,EACPC,IAAI,EACJC,IAAI,EACJC,OAAOC,SAAS,EAChBC,SAAS,EACTC,YAAY,EACZ1B,eAAeC,mBAAmB,EAClC0B,kBAAkB,EAClBC,wBAAwB,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,YAAY,EACZC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,UAAUhD,IAAI,EACdiD,QAAQ,EAEe,WADpBC;QAvBHvB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACA1B;QACA2B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAW/C;IACjB,MAAM,CAACgD,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAG9C,iBAAiC2B,MAAM;QACzFoB,cAAc;QACdC;YACEV,mBAAAA,6BAAAA;QACF;QACAW;YACEV,qBAAAA,+BAAAA;QACF;QACAW;YACET,qBAAAA,+BAAAA;QACF;IACF;IACA,MAAMU,SAASP,oBAAoB,cAAcA,oBAAoB;IACrE,MAAMQ,SAASR,oBAAoB;IACnC,MAAMS,WAAW,CAACtB,gBAAgBoB;IAElC,MAAM,EAAEG,SAAS,EAAE,GAAG7D;IACtB,MAAM8D,qBAAqB,CAACD,aAAa,CAACvB,gBAAgBa,oBAAoB;IAE9E,MAAM,EAAEO,QAAQK,cAAc,EAAE,GAAG3D,wBAAwB0D;IAC3D,MAAM,CAAC,EAAEE,UAAU,EAAEC,aAAa,EAAE,EAAEC,yBAAyB,GAAG1D,eAChEsD,oBACA;QACEK,SAASJ;QACTK,kBAAkB;QAClBC,kBAAkB;QAClBC,qBAAqB;QACrBC;YACExB,oBAAAA,8BAAAA,QAAU;QACZ;IACF;IAEF,MAAMyB,YAAYvE,aAA6B+D,YAAYZ,KAAKX;IAChE,MAAMN,QAAQ4B,iBACV,wCACK3B;QACH,kDAAkD;SAEpDA;IACJ,MAAMqC,6BACJ,KAAC7D;QACC6B,YAAYwB;QACZS,eAAanC;QACboC,SAASzC;QACT0C,SACEhB,WACI,SAASiB,oBAAoBC,KAAK;YAChC/B,QAAQ,iBAAiB+B;QAC3B,IACAC;;IAIV,MAAMC,mBAAmBnF,YACvB,CAACiF;QACC,IAAIlB,YAAYtD,WAAWwE,WAAWzE,KAAK4E,MAAM,EAAE;YACjDlC,QAAQ;QACV;IACF,GACA;QAACa;QAAUb;KAAQ;IAGrBtC,cAAc,CAACkD;IACfzD,aAAakD,KAAK;QAAE8B,WAAW,CAACtC;QAAiBuC,UAAU,CAACzB,UAAUC;IAAO;IAE7E,qBACE,MAAChD;QAAYgD,QAAQA;QAAQyB,WAAWJ;;YACrCP;0BACD,KAAC/D,2FACKuC;gBACJoC,UAAU,CAAC;gBACXC,MAAK;gBACLC,cAAW;gBACX9C,YAAY+B;gBACZrC,OAAOA;gBACPE,WAAWvC,kCAETgB,wBAAwB,CAACoC,SAAS,EAClChC,yBAAyB,CAACiC,gBAAgB,EAC1Cd;gBAEFgB,iBAAiBA;gBACba;gBACJxC,MAAMA;gBACNC,OAAOA;gBACPC,gBAAgBA;gBAChBC,aAAaA;gBACbC,sBAAsBA;gBACtBE,SAASA;gBACTe,SAAS,IAAMA,QAAQ;gBACvBd,MAAMA;gBACNO,0BAA0BA;gBAC1BE,mBAAmBA;gBACnBC,cAAcA;0BAEbZ;;;;AAIT,EAAE"}

package/dist/components/ModalCard/types.d.ts

@@ -0,0 +1,44 @@
+import type { UIEvent } from 'react';
+import type { NavIdProps } from '../../lib/getNavId';
+import type { UseBottomSheetHandlers } from '../../lib/sheet';
+import type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
+export type ModalCardCloseReason = 'click-overlay' | 'click-close-button' | 'escape-key' | 'swipe-down';
+export interface ModalCardProps extends NavIdProps, Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers> {
+    /**
+     * Состояние видимости.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Сохранять ли компонент в DOM при `open={false}`.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает фокус на интерактивный элемент после открытия модалки.
+     */
+    noFocusToDialog?: boolean;
+    /**
+     * `data-testid` для оверлея.
+     */
+    modalOverlayTestId?: string;
+    /**
+     * Будет вызвано при начале открытия модалки.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Будет вызвано при окончательном открытии модалки.
+     */
+    onOpened?: VoidFunction;
+    /**
+     * Будет вызвано при начале закрытия модалки.
+     */
+    onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;
+    /**
+     * Будет вызвано при окончательном закрытии модалки.
+     */
+    onClosed?: VoidFunction;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/ModalCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEzE,MAAM,MAAM,oBAAoB,GAC5B,eAAe,GACf,oBAAoB,GACpB,YAAY,GACZ,YAAY,CAAC;AAEjB,MAAM,WAAW,cACf,SAAQ,UAAU,EAChB,IAAI,CAAC,kBAAkB,EAAE,IAAI,GAAG,SAAS,GAAG,iBAAiB,GAAG,MAAM,sBAAsB,CAAC;IAC/F;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB"}

package/dist/components/ModalCard/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map