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

package/dist/cssm/components/FormItem/FormItem.js

@@ -4,7 +4,6 @@ import * as React from "react";
 import { classNames, hasReactNode, isPrimitiveReactNode } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 import { Removable } from "../Removable/Removable.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
@@ -45,10 +44,13 @@ const stylesStatus = {
             })
         ]
     });
-    const context = useObjectMemo({
+    const context = React.useMemo(()=>({
+            required,
+            topMultiline
+        }), [
         required,
         topMultiline
-    });
+    ]);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         getRootRef: rootEl,

package/dist/cssm/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles.sizeYNone, 'vkuiInternalFormItem--sizeY-none'),\n  compact: classNames(styles.sizeYCompact, 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n  error: classNames(styles.statusError, 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles.statusValid, 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  topId?: string;\n  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n  /**\n   * Помечает поле обязательным\n   */\n  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem: React.FC<FormItemProps> & {\n  Top: typeof FormItemTop;\n  TopLabel: typeof FormItemTopLabel;\n  TopAside: typeof FormItemTopAside;\n} = ({\n  children,\n  top,\n  topId,\n  topMultiline = false,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {isPrimitiveReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} id={topId}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : hasReactNode(top) ? (\n        top\n      ) : null}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles.bottom}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  const context = useObjectMemo({ required, topMultiline });\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles.host,\n        !noPadding && styles.withPadding,\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) && classNames(styles.withTop, 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles.withRemovable, 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\n        {removable ? (\n          <Removable\n            align=\"start\"\n            onRemove={(e) => {\n              if (rootEl?.current) {\n                onRemove?.(e, rootEl.current);\n              }\n            }}\n            removePlaceholder={removePlaceholder}\n            indent={removable === 'indent'}\n          >\n            <div className={classNames(styles.removable, 'vkuiInternalFormItem__removable')}>\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","useAdaptivity","useExternRef","useObjectMemo","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesStatus","error","statusError","valid","statusValid","FormItem","children","top","topId","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","id","className","role","undefined","context","baseClassName","host","withPadding","withTop","withRemovable","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,eAAe,QAAQ,eAAY;AAC5C,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMf,WAAWa,OAAOG,SAAS,EAAE;IACnCC,SAASjB,WAAWa,OAAOK,YAAY,EAAE;AAC3C;AAEA,MAAMC,eAAe;IACnBC,OAAOpB,WAAWa,OAAOQ,WAAW,EAAE;IACtCC,OAAOtB,WAAWa,OAAOU,WAAW,EAAE;AACxC;AA4CA;;CAEC,GACD,OAAO,MAAMC,WAIT,CAAC,EACHC,QAAQ,EACRC,GAAG,EACHC,KAAK,EACLC,eAAe,KAAK,EACpBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAW,KAAK,EAChB,GAAGC,WACW;IACd,MAAMC,SAAStC,aAAagC;IAC5B,MAAM,EAAEO,QAAQ,MAAM,EAAE,GAAGxC;IAE3B,MAAMyC,gCACJ,MAAC7C,MAAM8C,QAAQ;;YACZ3C,qBAAqBwB,qBACpB,KAACjB;0BACC,cAAA,KAACE;oBAAiB0B,SAASA;oBAASS,WAAWhB;oBAAkBiB,IAAIpB;8BAClED;;iBAGHzB,aAAayB,OACfA,MACE;YACHD;YACAxB,aAAa8B,yBACZ,KAACvB;gBACCwC,WAAWnC,OAAOkB,MAAM;gBACxBgB,IAAIT;gBACJW,MAAMjB,WAAW,UAAU,UAAUkB;0BAEpCnB;;;;IAMT,MAAMoB,UAAU9C,cAAc;QAAEmC;QAAUZ;IAAa;IAEvD,qBACE,KAACrB;QACE,GAAGkC,SAAS;QACbL,YAAYM;QACZU,eAAepD,WACba,OAAOwC,IAAI,EACX,CAACd,aAAa1B,OAAOyC,WAAW,EAChC,wBACAtB,WAAW,aAAab,YAAY,CAACa,OAAO,EAC5CW,UAAU,aAAa7B,eAAe,CAAC6B,MAAM,EAC7C1C,aAAayB,QAAQ1B,WAAWa,OAAO0C,OAAO,EAAE,kCAChDtB,aAAajC,WAAWa,OAAO2C,aAAa,EAAE;kBAGhD,cAAA,KAAC5C,gBAAgB6C,QAAQ;YAACC,OAAOP;sBAC9BlB,0BACC,KAAC3B;gBACCqD,OAAM;gBACNzB,UAAU,CAAC0B;oBACT,IAAIlB,QAAQmB,SAAS;wBACnB3B,WAAW0B,GAAGlB,OAAOmB,OAAO;oBAC9B;gBACF;gBACA1B,mBAAmBA;gBACnB2B,QAAQ7B,cAAc;0BAEtB,cAAA,KAAC8B;oBAAIf,WAAWhD,WAAWa,OAAOoB,SAAS,EAAE;8BAC1CW;;iBAILA;;;AAKV,EAAE;AAEFpB,SAASwC,WAAW,GAAG;AAEvBxC,SAASyC,GAAG,GAAGxD;AACfe,SAASyC,GAAG,CAACD,WAAW,GAAG;AAE3BxC,SAAS0C,QAAQ,GAAGvD;AACpBa,SAAS0C,QAAQ,CAACF,WAAW,GAAG;AAEhCxC,SAAS2C,QAAQ,GAAGzD;AACpBc,SAAS2C,QAAQ,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles.sizeYNone, 'vkuiInternalFormItem--sizeY-none'),\n  compact: classNames(styles.sizeYCompact, 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n  error: classNames(styles.statusError, 'vkuiInternalFormItem--status-error'),\n  valid: classNames(styles.statusValid, 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  topId?: string;\n  /**\n   * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n   */\n  topMultiline?: boolean;\n  /**\n   * Позволяет поменять тег используемый для top\n   * Если оставить пустым, то тег top будет span.\n   * Если оставить пустым и использовать htmlFor, то тег top будет label.\n   */\n  topComponent?: React.ElementType;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n  /**\n   * Удаляет внешние отступы вокруг компонента\n   * @since 5.8.0\n   */\n  noPadding?: boolean;\n  /**\n   * Помечает поле обязательным\n   */\n  required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem: React.FC<FormItemProps> & {\n  Top: typeof FormItemTop;\n  TopLabel: typeof FormItemTopLabel;\n  TopAside: typeof FormItemTopAside;\n} = ({\n  children,\n  top,\n  topId,\n  topMultiline = false,\n  topComponent: topComponentProp,\n  bottom,\n  status = 'default',\n  removable,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  htmlFor,\n  bottomId,\n  noPadding,\n  required = false,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {isPrimitiveReactNode(top) ? (\n        <FormItemTop>\n          <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} id={topId}>\n            {top}\n          </FormItemTopLabel>\n        </FormItemTop>\n      ) : hasReactNode(top) ? (\n        top\n      ) : null}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles.bottom}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  const context = React.useMemo(() => ({ required, topMultiline }), [required, topMultiline]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootEl}\n      baseClassName={classNames(\n        styles.host,\n        !noPadding && styles.withPadding,\n        'vkuiInternalFormItem',\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        hasReactNode(top) && classNames(styles.withTop, 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles.withRemovable, 'vkuiInternalFormItem--removable'),\n      )}\n    >\n      <FormItemContext.Provider value={context}>\n        {removable ? (\n          <Removable\n            align=\"start\"\n            onRemove={(e) => {\n              if (rootEl?.current) {\n                onRemove?.(e, rootEl.current);\n              }\n            }}\n            removePlaceholder={removePlaceholder}\n            indent={removable === 'indent'}\n          >\n            <div className={classNames(styles.removable, 'vkuiInternalFormItem__removable')}>\n              {wrappedChildren}\n            </div>\n          </Removable>\n        ) : (\n          wrappedChildren\n        )}\n      </FormItemContext.Provider>\n    </RootComponent>\n  );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","useAdaptivity","useExternRef","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesStatus","error","statusError","valid","statusValid","FormItem","children","top","topId","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","id","className","role","undefined","context","useMemo","baseClassName","host","withPadding","withTop","withRemovable","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":"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"}

package/dist/cssm/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,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACT,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGlB,MAAMmB,QAAQ,CAACX;IACxD,MAAMY,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAeJ,MAAMK,UAAU,IAAI,IAAIJ;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;QAC9B,GAAGK,KAAK;QACTF,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,CAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXC,SAAS,EACT,GAAGC,OACU;IACb,MAAM,CAACC,iBAAiBC,cAAc,GAAGlB,MAAMmB,QAAQ,CAACX;IACxD,MAAMY,eAAe,OAAOJ,MAAMK,UAAU,KAAK;IACjD,MAAMA,aAAaD,eAAgBJ,MAAMK,UAAU,IAAI,IAAKJ;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;QAC9B,GAAGK,KAAK;QACTF,aAAaX,aAAaW,aAAaqB,iBAAiBM,KAAK;QAC7D1B,WAAWZ,aAAaY,WAAWoB,iBAAiBO,MAAM;QAC1D9B,SAASiB,aAAa,KAAKjB;QAC3BS,YAAYgB;QACZ1B,UAAUqB;kBAETV;;AAGP,EAAE"}

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

@@ -2,10 +2,10 @@
 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";
 import styles from "./Group.module.css";
 const sizeXClassNames = {
@@ -42,7 +42,7 @@ const stylesPadding = {
 }
 const warn = warnOnce('Group');
 export const GroupContainer = ({ children, separator = 'auto', mode: modeProps, padding = 'm', tabIndex: tabIndexProp, ...restProps })=>{
-    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/cssm/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","styles","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","compact","sizeXCompact","stylesMode","modeNone","plain","modePlain","card","modeCard","stylesPadding","s","paddingS","m","paddingM","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","separatorSibling","separatorSiblingForced","Component","baseClassName","host","modePlainInsideModal","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;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMR,WAAWM,OAAOG,SAAS,EAAE;IACnCC,SAASJ,OAAOK,YAAY;IAC5BC,SAASN,OAAOO,YAAY;AAC9B;AAEA,MAAMC,aAAa;IACjBN,MAAMR,WAAWM,OAAOS,QAAQ,EAAE;IAClCC,OAAOhB,WAAWM,OAAOW,SAAS,EAAE;IACpCC,MAAMlB,WAAWM,OAAOa,QAAQ,EAAE;AACpC;AAEA,MAAMC,gBAAgB;IACpBC,GAAGf,OAAOgB,QAAQ;IAClBC,GAAGjB,OAAOkB,QAAQ;AACpB;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC3B;IAEpC,IAAIuB,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,OAAO7B,SAAS;AAEtB,OAAO,MAAM8B,iBAAgD,CAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAM,EAAEZ,aAAa,EAAE,GAAG7B,MAAM+B,UAAU,CAAC1B;IAC3C,MAAM,EAAEuB,QAAQ,MAAM,EAAE,GAAG1B;IAE3B,MAAMkC,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,WAAW3C,OAAO4C,gBAAgB;;YACjE;QACF,KAAK;YACHH,wCACE,KAACC;gBACCC,WAAWjD,WACTM,OAAO4C,gBAAgB,EACvBf,SAAS,WAAWA,SAAS,SAAS7B,OAAO6C,sBAAsB,GAAGL;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAACzC;gBACC+C,WAAU;gBACT,GAAGZ,SAAS;gBACbF,UAAUA;gBACVe,eAAerD,WACb,qBACAM,OAAOgD,IAAI,EACX/C,eAAe,CAACoB,MAAM,EACtBQ,SAAS,WAAWP,iBAAiBtB,OAAOiD,oBAAoB,EAChEzC,UAAU,CAACqB,KAAK,EAChBf,aAAa,CAACiB,QAAQ;0BAGvBJ;;YAEFc;;;AAGP,EAAE;AACFf,eAAewB,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","styles","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","compact","sizeXCompact","stylesMode","modeNone","plain","modePlain","card","modeCard","stylesPadding","s","paddingS","m","paddingM","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","separatorSibling","separatorSiblingForced","Component","baseClassName","host","modePlainInsideModal","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;AAC/D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMR,WAAWM,OAAOG,SAAS,EAAE;IACnCC,SAASJ,OAAOK,YAAY;IAC5BC,SAASN,OAAOO,YAAY;AAC9B;AAEA,MAAMC,aAAa;IACjBN,MAAMR,WAAWM,OAAOS,QAAQ,EAAE;IAClCC,OAAOhB,WAAWM,OAAOW,SAAS,EAAE;IACpCC,MAAMlB,WAAWM,OAAOa,QAAQ,EAAE;AACpC;AAEA,MAAMC,gBAAgB;IACpBC,GAAGf,OAAOgB,QAAQ;IAClBC,GAAGjB,OAAOkB,QAAQ;AACpB;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAAC1B;IAEpC,IAAIsB,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,OAAO5B,SAAS;AAEtB,OAAO,MAAM6B,iBAAgD,CAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EACtB,GAAGC,WACiB;IACpB,MAAMZ,gBAAgB3B,kBAAkBwC,EAAE,KAAK;IAC/C,MAAM,EAAEd,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAMiC,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,WAAW5C,OAAO6C,gBAAgB;;YACjE;QACF,KAAK;YACHH,wCACE,KAACC;gBACCC,WAAWlD,WACTM,OAAO6C,gBAAgB,EACvBhB,SAAS,WAAWA,SAAS,SAAS7B,OAAO8C,sBAAsB,GAAGL;;YAI5E;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAAC1C;gBACCgD,WAAU;gBACT,GAAGb,SAAS;gBACbF,UAAUA;gBACVgB,eAAetD,WACb,qBACAM,OAAOiD,IAAI,EACXhD,eAAe,CAACoB,MAAM,EACtBQ,SAAS,WAAWP,iBAAiBtB,OAAOkD,oBAAoB,EAChE1C,UAAU,CAACqB,KAAK,EAChBf,aAAa,CAACiB,QAAQ;0BAGvBJ;;YAEFe;;;AAGP,EAAE;AACFhB,eAAeyB,WAAW,GAAG"}

package/dist/cssm/components/Link/Link.js

@@ -1,19 +1,31 @@
-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";
 import styles from "./Link.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
- */ export const Link = ({ hasVisited, children, className, ...restProps })=>{
-    return /*#__PURE__*/ _jsx(Tappable, {
+ */ export const Link = ({ before: beforeProp, after: afterProp, noUnderline, hasVisited, children, className, ...restProps })=>{
+    const before = beforeProp ? /*#__PURE__*/ _jsx("span", {
+        className: styles.before,
+        children: beforeProp
+    }) : null;
+    const after = afterProp ? /*#__PURE__*/ _jsx("span", {
+        className: styles.after,
+        children: afterProp
+    }) : null;
+    return /*#__PURE__*/ _jsxs(Tappable, {
         Component: restProps.href ? 'a' : 'button',
         ...restProps,
-        className: classNames(styles.host, hasVisited && styles.hasVisited, className),
+        className: classNames(styles.host, hasVisited && styles.hasVisited, noUnderline ? undefined : styles.withUnderline, className),
         hasHover: false,
         activeMode: "opacity",
         hoverMode: "none",
         focusVisibleMode: "outside",
-        children: children
+        children: [
+            before,
+            children,
+            after
+        ]
     });
 };
 

package/dist/cssm/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","styles","Link","hasVisited","children","className","restProps","Component","href","host","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACO;IACV,qBACE,KAACN;QACCO,WAAWD,UAAUE,IAAI,GAAG,MAAM;QACjC,GAAGF,SAAS;QACbD,WAAWN,WAAWE,OAAOQ,IAAI,EAAEN,cAAcF,OAAOE,UAAU,EAAEE;QACpEK,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;kBAEhBT;;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","styles","Link","before","beforeProp","after","afterProp","noUnderline","hasVisited","children","className","restProps","span","Component","href","host","undefined","withUnderline","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";AACA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,OAAOC,YAAY,oBAAoB;AAqBvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQC,UAAU,EAClBC,OAAOC,SAAS,EAChBC,WAAW,EACXC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACO;IACV,MAAMR,SAASC,2BAAa,KAACQ;QAAKF,WAAWT,OAAOE,MAAM;kBAAGC;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACM;QAAKF,WAAWT,OAAOI,KAAK;kBAAGC;SAAoB;IAE9E,qBACE,MAACN;QACCa,WAAWF,UAAUG,IAAI,GAAG,MAAM;QACjC,GAAGH,SAAS;QACbD,WAAWX,WACTE,OAAOc,IAAI,EACXP,cAAcP,OAAOO,UAAU,EAC/BD,cAAcS,YAAYf,OAAOgB,aAAa,EAC9CP;QAEFQ,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;;YAEhBlB;YACAM;YACAJ;;;AAGP,EAAE"}

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

@@ -14,7 +14,7 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .host:hover {
+  .withUnderline:hover {
     text-decoration: underline;
   }
 }
@@ -23,9 +23,18 @@
   color: var(--vkui--color_text_link_visited);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-
-.host :global(.vkuiIcon) {
+.before,
+.after {
   display: inline-block;
   vertical-align: middle;
 }
+
+.before {
+  -webkit-margin-end: var(--vkui--spacing_size_xs);
+          margin-inline-end: var(--vkui--spacing_size_xs);
+}
+
+.after {
+  -webkit-margin-start: var(--vkui--spacing_size_xs);
+          margin-inline-start: var(--vkui--spacing_size_xs);
+}

package/dist/cssm/components/ModalCard/ModalCard.js

@@ -1,62 +1,41 @@
 'use client';
 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";
-import styles from "./ModalCard.module.css";
-const platformClassNames = {
-    ios: styles.ios,
-    android: styles.android,
-    vkcom: styles.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 = ({ icon, title, titleComponent, description, descriptionComponent, children, actions, onClose, nav, id, size, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, ...restProps })=>{
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    const platform = usePlatform();
-    const modalContext = React.useContext(ModalRootContext);
-    const { refs } = useModalRegistry(getNavId({
+ */ export const ModalCard = ({ id: idProp, nav, open = false, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, keepMounted = false, ...restProps })=>{
+    const generatingId = useId();
+    const id = getNavId({
         nav,
-        id
-    }, warn), 'card');
-    const rootRef = useExternRef(getRootRef, refs.modalElement);
-    const contextValue = React.useMemo(()=>({
-            labelId: `${id}-label`
-        }), [
-        id
-    ]);
-    return /*#__PURE__*/ _jsx(RootComponent, {
-        ...restProps,
-        getRootRef: rootRef,
-        tabIndex: -1,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-labelledby": contextValue.labelId,
-        id: id,
-        baseClassName: classNames(styles.host, platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && styles.desktop),
-        children: /*#__PURE__*/ _jsx(ModalCardBase, {
-            className: styles.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
+        id: idProp
+    }, warn) || generatingId;
+    const { mounted, ...resolvedProps } = useModalManager({
+        id,
+        open,
+        keepMounted,
+        modalOverlayTestId,
+        noFocusToDialog,
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed
+    });
+    if (mounted === false) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(ModalContext.Provider, {
+        value: id,
+        children: /*#__PURE__*/ _jsx(ModalCardInternal, {
+            id: id,
+            "aria-labelledby": `${id}-label`,
+            ...resolvedProps,
+            ...restProps
         })
     });
 };

package/dist/cssm/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","styles","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","host","hasOwnProperty","desktop","className","in","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;AAC/D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAIA,MAAMC,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,YAAY,CAAC,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,EACZ,GAAGC,WACY;IACf,MAAM,EAAEC,SAAS,EAAE,GAAGhC;IACtB,MAAMiC,WAAW/B;IAEjB,MAAMgC,eAAepC,MAAMqC,UAAU,CAAC7B;IACtC,MAAM,EAAE8B,IAAI,EAAE,GAAG7B,iBAAiBJ,SAAS;QAAEqB;QAAKC;IAAG,GAAGX,OAAO;IAC/D,MAAMuB,UAAUpC,aAAa2B,YAAYQ,KAAKE,YAAY;IAE1D,MAAMC,eAAezC,MAAM0C,OAAO,CAAC,IAAO,CAAA;YAAEC,SAAS,GAAGhB,GAAG,MAAM,CAAC;QAAC,CAAA,GAAI;QAACA;KAAG;IAE3E,qBACE,KAACjB;QACE,GAAGuB,SAAS;QACbH,YAAYS;QACZK,UAAU,CAAC;QACXC,MAAK;QACLC,cAAW;QACXC,mBAAiBN,aAAaE,OAAO;QACrChB,IAAIA;QACJqB,eAAe/C,WACbU,OAAOsC,IAAI,EACXrC,mBAAmBsC,cAAc,CAACf,YAC9BvB,kBAAkB,CAACuB,SAAS,GAC5BvB,mBAAmBE,OAAO,EAC9BoB,aAAavB,OAAOwC,OAAO;kBAG7B,cAAA,KAAC5C;YACC6C,WAAWzC,OAAO0C,EAAE;YACpBvB,YAAYQ,KAAKgB,YAAY;YAC7BpC,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,CAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,KAAK,EACnB,GAAGC,WACY;IACf,MAAMC,eAAepB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASc;IAElD,MAAM,EAAEC,OAAO,EAAE,GAAGC,eAAe,GAAGlB,gBAAgB;QACpDI;QACAG;QACAO;QACAN;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAII,YAAY,OAAO;QACrB,OAAO;IACT;IAEA,qBACE,KAACpB,aAAasB,QAAQ;QAACC,OAAOhB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJiB,mBAAiB,GAAGjB,GAAG,MAAM,CAAC;YAC7B,GAAGc,aAAa;YAChB,GAAGH,SAAS;;;AAIrB,EAAE"}

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

@@ -1,67 +1,85 @@
 .host {
-  box-sizing: border-box;
-  position: absolute;
-  inset-block-start: 0;
-  padding: 8px;
-  inset-inline-start: 0;
+  padding: var(--vkui--spacing_size_m);
+  margin-inline: auto;
   inline-size: 100%;
-  block-size: 100%;
-  display: flex;
-  align-items: flex-end;
+  box-sizing: border-box;
 }
 
 .host:focus {
   outline: none;
 }
 
-.in {
-  inline-size: 100%;
-  margin-inline: auto;
-  transform: translateY(calc(100% + 16px));
-  transition: transform 340ms var(--vkui--animation_easing_platform);
+.hostMaxWidthS {
+  max-inline-size: calc(400px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * iOS
- */
+.hostMaxWidthM {
+  max-inline-size: calc(414px + var(--vkui--spacing_size_2xl));
+}
 
-.ios .in {
-  max-inline-size: 414px;
+.hostMaxWidthL {
+  max-inline-size: calc(440px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * Android + vkcom
- */
+/* Mobile */
 
-.android .in {
-  max-inline-size: 440px;
-}
+@media (max-width: 767.9px) {
+  .host {
+    --vkui_internal_ModalCard--translateY: 100%;
+    --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
-.vkcom .in {
-  max-inline-size: 400px;
-}
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    -webkit-margin-after: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+            margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+    transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
+    transition: transform 0.4s var(--vkui_internal--spring-easing);
+  }
 
-/**
- * Desktop
- */
+  .hostStateEnter {
+    transform: translate3d(0, 100%, 0);
+    transition: none;
+  }
 
-.desktop {
-  align-items: center;
-}
+  .hostStateEntering {
+    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
+  }
+
+  .hostStateExiting {
+    transform: translate3d(0, 100%, 0);
+    transition: transform 0.2s ease;
+  }
 
-.desktop .in {
-  transform: unset;
-  opacity: 0;
-  transition: opacity 340ms var(--vkui--animation_easing_platform);
+  .hostStateExited {
+    transform: translate3d(0, 100%, 0);
+    transition: none;
+  }
 }
 
-/**
- * CMP:
- * ModalRoot
- */
+/* Desktop */
+
+@media (min-width: 768px) {
+  .host {
+    margin-block: auto;
+    opacity: 1;
+    transition: opacity 340ms var(--vkui--animation_easing_platform);
+  }
+
+  .hostStateEnter {
+    opacity: 0;
+    transition-property: none;
+  }
+
+  .hostStateEntering {
+    opacity: 1;
+  }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  .hostStateExiting {
+    opacity: 0;
+  }
 
-:global(.vkuiInternalModalRoot--touched) .in {
-  transition: none;
+  .hostStateExited {
+    opacity: 0;
+  }
 }

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

@@ -0,0 +1,122 @@
+'use client';
+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";
+import styles from "./ModalCard.module.css";
+const sizeByPlatformClassNames = {
+    vkcom: styles['hostMaxWidthS'],
+    ios: styles['hostMaxWidthM'],
+    android: styles['hostMaxWidthL']
+};
+const transitionStateClassNames = {
+    appear: styles['hostStateEnter'],
+    appearing: styles['hostStateEntering'],
+    enter: styles['hostStateEnter'],
+    entering: styles['hostStateEntering'],
+    exiting: styles['hostStateExiting'],
+    exited: styles['hostStateExited']
+};
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */ export const ModalCardInternal = ({ 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, ...restProps })=>{
+    const platform = usePlatform();
+    const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
+        enableAppear: true,
+        onEnter () {
+            onOpen?.();
+        },
+        onEntered () {
+            onOpened?.();
+        },
+        onExited () {
+            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?.('swipe-down');
+        }
+    });
+    const handleRef = useExternRef(setSheetEl, ref, getRootRef);
+    const style = keyboardOpened ? {
+        ...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, {
+                ...restProps,
+                tabIndex: -1,
+                role: "dialog",
+                "aria-modal": "true",
+                getRootRef: handleRef,
+                style: style,
+                className: classNames(styles.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