npm - @vkontakte/vkui - Versions diffs - 7.0.0-dev-efd91c.2 → 7.0.0-dev-efd91c.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

package/dist/cssm/components/ImageBase/ImageBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/*\n Размер по умолчанию.\n /\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /\n Задаёт размер картинки.\n \n Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`.\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n /\n size?: LiteralUnion<ImageBaseSize, number>;\n /\n Ширина изображения\n /\n widthSize?: number \| string;\n /\n Высота изображения\n /\n heightSize?: number \| string;\n /\n Отключает обводку.\n /\n noBorder?: boolean;\n /\n Фолбек на случай, если картинка не прогрузилась.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n \n > ⚠️ Может перекрывать `children`.\n /\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n /\n Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n * @since 5.10.0\n /\n withTransparentBackground?: boolean;\n /\n Пользовательское значения стиля object-fit\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n /\n objectFit?: React.CSSProperties['objectFit'];\n /\n Флаг для сохранения пропорций картинки.\n * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n /\n keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n switch (objectFit) {\n case 'contain':\n return styles.imgObjectFitContain;\n case 'cover':\n return styles.imgObjectFitCover;\n case 'none':\n return styles.imgObjectFitNone;\n case 'scale-down':\n return styles.imgObjectFitScaleDown;\n }\n return undefined;\n};\n\nconst parsePx = (value: string): number \| undefined => {\n if (value.endsWith('px')) {\n return parseInt(value);\n }\n return undefined;\n};\n\nconst sizeToNumber = (size: number \| string \| undefined): number \| undefined => {\n if (typeof size === 'string') {\n return parsePx(size);\n }\n return size;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n Badge: typeof ImageBaseBadge;\n Overlay: typeof ImageBaseOverlay;\n} = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n fetchPriority,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n style,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n objectFit = 'cover',\n keepAspectRatio = false,\n ...restProps\n}: ImageBaseProps) => {\n const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n const width = widthSize ?? (keepAspectRatio ? undefined : size);\n const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src \|\| srcSet;\n const needShowFallbackIcon = (failed \|\| !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (loaded) {\n return;\n }\n\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const imgRef = useExternRef(getRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <Clickable\n style={{ width, height, ...style }}\n baseClassName={classNames(\n styles.host,\n loaded && styles.loaded,\n withTransparentBackground && styles.transparentBackground,\n )}\n {...restProps}\n >\n {hasSrc && (\n <img\n ref={imgRef}\n alt={alt}\n className={classNames(\n styles.img,\n getObjectFitClassName(objectFit),\n keepAspectRatio && styles.imgKeepRatio,\n )}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n style={\n keepAspectRatio\n ? {\n width: widthImg \|\| width,\n height: heightImg \|\| height,\n }\n : undefined\n }\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={widthImg}\n height={heightImg}\n onLoad={handleImageLoad}\n onError={handleImageError}\n {...getFetchPriorityProp(fetchPriority)}\n />\n )}\n {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n {children && <div className={styles.children}>{children}</div>}\n {!noBorder && <div aria-hidden className={styles.border} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseClassName","host","transparentBackground","img","ref","className","imgKeepRatio","div","fallback","aria-hidden","border","displayName","Badge","Overlay"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/*\n Размер по умолчанию.\n /\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /\n Задаёт размер картинки.\n \n Используйте размеры заданные дизайн-системой `16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40 \| 44 \| 48 \| 56 \| 64 \| 72 \| 80 \| 88 \| 96`.\n \n > ⚠️ Использование кастомного размера – это пограничный кейс.\n /\n size?: LiteralUnion<ImageBaseSize, number>;\n /\n Ширина изображения\n /\n widthSize?: number \| string;\n /\n Высота изображения\n /\n heightSize?: number \| string;\n /\n Отключает обводку.\n /\n noBorder?: boolean;\n /\n Фолбек на случай, если картинка не прогрузилась.\n \n > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n \n > ⚠️ Может перекрывать `children`.\n /\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n /\n Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n * @since 5.10.0\n /\n withTransparentBackground?: boolean;\n /\n Пользовательское значения стиля object-fit\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n /\n objectFit?: React.CSSProperties['objectFit'];\n /\n Флаг для сохранения пропорций картинки.\n * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n /\n keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n switch (objectFit) {\n case 'contain':\n return styles.imgObjectFitContain;\n case 'cover':\n return styles.imgObjectFitCover;\n case 'none':\n return styles.imgObjectFitNone;\n case 'scale-down':\n return styles.imgObjectFitScaleDown;\n }\n return undefined;\n};\n\nconst parsePx = (value: string): number \| undefined => {\n if (value.endsWith('px')) {\n return parseInt(value);\n }\n return undefined;\n};\n\nconst sizeToNumber = (size: number \| string \| undefined): number \| undefined => {\n if (typeof size === 'string') {\n return parsePx(size);\n }\n return size;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n Badge: typeof ImageBaseBadge;\n Overlay: typeof ImageBaseOverlay;\n} = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n fetchPriority,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n objectFit = 'cover',\n keepAspectRatio = false,\n ...restProps\n}: ImageBaseProps) => {\n const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n const width = widthSize ?? (keepAspectRatio ? undefined : size);\n const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src \|\| srcSet;\n const needShowFallbackIcon = (failed \|\| !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (loaded) {\n return;\n }\n\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const imgRef = useExternRef(getRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <Clickable\n baseStyle={{ width, height }}\n baseClassName={classNames(\n styles.host,\n loaded && styles.loaded,\n withTransparentBackground && styles.transparentBackground,\n )}\n {...restProps}\n >\n {hasSrc && (\n <img\n ref={imgRef}\n alt={alt}\n className={classNames(\n styles.img,\n getObjectFitClassName(objectFit),\n keepAspectRatio && styles.imgKeepRatio,\n )}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n style={\n keepAspectRatio\n ? {\n width: widthImg \|\| width,\n height: heightImg \|\| height,\n }\n : undefined\n }\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={widthImg}\n height={heightImg}\n onLoad={handleImageLoad}\n onError={handleImageError}\n {...getFetchPriorityProp(fetchPriority)}\n />\n )}\n {fallbackIcon && <div className={styles.fallback}>{fallbackIcon}</div>}\n {children && <div className={styles.children}>{children}</div>}\n {!noBorder && <div aria-hidden className={styles.border} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["React","classNames","useExternRef","minOr","getFetchPriorityProp","Clickable","ImageBaseBadge","ImageBaseOverlay","ImageBaseContext","validateFallbackIcon","validateSize","styles","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","imgObjectFitContain","imgObjectFitCover","imgObjectFitNone","imgObjectFitScaleDown","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","loaded","setLoaded","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","name","handleImageLoad","event","handleImageError","imgRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","baseStyle","baseClassName","host","transparentBackground","img","ref","className","imgKeepRatio","style","div","fallback","aria-hidden","border","displayName","Badge","Overlay"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import { Tappable } from "../Tappable/Tappable.js";
 import styles from "./Link.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
- */ export const Link = ({ before: beforeProp, after: afterProp, noUnderline, hasVisited, children, className, ...restProps })=>{
+ */ export const Link = ({ before: beforeProp, after: afterProp, noUnderline, hasVisited, children, ...restProps })=>{
     const before = beforeProp ? /*#__PURE__*/ _jsx("span", {
         className: styles.before,
         children: beforeProp
@@ -16,7 +16,7 @@ import styles from "./Link.module.css";
     return /*#__PURE__*/ _jsxs(Tappable, {
         Component: restProps.href ? 'a' : 'button',
         ...restProps,
-        className: classNames(styles.host, hasVisited && styles.hasVisited, noUnderline ? undefined : styles.withUnderline, className),
+        baseClassName: classNames(styles.host, hasVisited && styles.hasVisited, noUnderline ? undefined : styles.withUnderline),
         hasHover: false,
         activeMode: "opacity",
         hoverMode: "none",

package/dist/cssm/components/Link/Link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
1	+ {"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 ...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 baseClassName={classNames(\n styles.host,\n hasVisited && styles.hasVisited,\n noUnderline ? undefined : styles.withUnderline,\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","restProps","span","className","Component","href","baseClassName","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,EACR,GAAGC,WACO;IACV,MAAMP,SAASC,2BAAa,KAACO;QAAKC,WAAWX,OAAOE,MAAM;kBAAGC;SAAqB;IAClF,MAAMC,QAAQC,0BAAY,KAACK;QAAKC,WAAWX,OAAOI,KAAK;kBAAGC;SAAoB;IAE9E,qBACE,MAACN;QACCa,WAAWH,UAAUI,IAAI,GAAG,MAAM;QACjC,GAAGJ,SAAS;QACbK,eAAehB,WACbE,OAAOe,IAAI,EACXR,cAAcP,OAAOO,UAAU,EAC/BD,cAAcU,YAAYhB,OAAOiB,aAAa;QAEhDC,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;;YAEhBnB;YACAM;YACAJ;;;AAGP,EAAE"}

package/dist/cssm/components/List/List.js CHANGED Viewed

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
 import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from "../../hooks/useDraggableWithDomApi/index.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./List.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/List
- */ export const List = ({ children, gap = 0, className, style, ...restProps })=>{
+ */ export const List = ({ children, gap = 0, ...restProps })=>{
     return /*#__PURE__*/ _jsxs(RootComponent, {
         role: "list",
-        className: classNames(styles.host, className),
-        style: {
-            gridGap: gap,
-            ...style
+        baseClassName: styles.host,
+        baseStyle: {
+            gridGap: gap
         },
         ...restProps,
         children: [

package/dist/cssm/components/List/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~classNames } from '@vkontakte/vkjs';\nimport {~~ DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './List.module.css';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {\n /*\n Задает отступ между элементами\n /\n gap?: number;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({\n children~~,\n~~ gap = 0~~,\n className,\n style,\n~~ ...restProps\n}: ListProps): React.ReactNode => {\n return (\n <RootComponent\n role=\"list\"\n ~~className~~={~~classNames(~~styles.host~~, className)~~}\n ~~style~~={{\n gridGap: gap,\n ~~...style,\n~~ }}\n {...restProps}\n >\n {children}\n <div\n aria-hidden\n {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}\n className={styles.placeholder}\n ></div>\n </RootComponent>\n );\n};\n"],"names":["React","~~classNames","~~DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP","RootComponent","styles","List","children","gap","~~className~~","~~style~~","~~restProps~~","~~role~~","~~host~~","gridGap","div","aria-hidden","placeholder"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,~~UAAU,QAAQ,kBAAkB;AAC7C,SAASC,~~qCAAqC,QAAQ,8CAAqC;AAE3F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,~~EACnBC~~,QAAQ,~~EACRC~~,MAAM,CAAC,~~EACPC~~,~~SAAS,EACTC,KAAK,EACL,~~GAAGC,~~WACO~~;~~IACV~~,qBACE,~~MAACP~~;~~QACCQ~~,MAAK;~~QACLH~~,~~WAAWP~~,~~WAAWG~~,~~OAAOQ,~~IAAI~~,EAAEJ~~;~~QACnCC~~,~~OAAO~~;~~YACLI~~,SAASN;~~YACT,GAAGE,KAAK~~;~~QACV;~~QACC,GAAGC,SAAS;;~~YAEZJ~~;0BACD,KAACQ;gBACCC,aAAW;gBACV,GAAGb,qCAAqC;~~gBACzCM~~,~~WAAWJ~~,~~OAAOY~~,WAAW;;;;AAIrC,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './List.module.css';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {\n /*\n Задает отступ между элементами\n /\n gap?: number;\n};\n\n/\n @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, gap = 0, ...restProps }: ListProps): React.ReactNode => {\n return (\n <RootComponent\n role=\"list\"\n baseClassName={styles.host}\n baseStyle={{\n gridGap: gap,\n }}\n {...restProps}\n >\n {children}\n <div\n aria-hidden\n {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}\n className={styles.placeholder}\n ></div>\n </RootComponent>\n );\n};\n"],"names":["React","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP","RootComponent","styles","List","children","gap","restProps","role","baseClassName","host","baseStyle","gridGap","div","aria-hidden","className","placeholder"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qCAAqC,QAAQ,8CAAqC;AAE3F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,QAAQ,EAAEC,MAAM,CAAC,EAAE,GAAGC,WAAsB;IACjE,qBACE,MAACL;QACCM,MAAK;QACLC,eAAeN,OAAOO,IAAI;QAC1BC,WAAW;YACTC,SAASN;QACX;QACC,GAAGC,SAAS;;YAEZF;0BACD,KAACQ;gBACCC,aAAW;gBACV,GAAGb,qCAAqC;gBACzCc,WAAWZ,OAAOa,WAAW;;;;AAIrC,EAAE"}

package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js CHANGED Viewed

@@ -18,8 +18,8 @@ const stylesTextWrap = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
- */ export const MiniInfoCell = ({ before, after, children, mode = 'base', textWrap = 'nowrap', chevron = false, className, ...restProps })=>{
-    const cellClasses = classNames(styles.host, stylesTextWrap[textWrap], mode !== 'base' && stylesMode[mode], className);
+ */ export const MiniInfoCell = ({ before, after, children, mode = 'base', textWrap = 'nowrap', chevron = false, ...restProps })=>{
+    const cellClasses = classNames(styles.host, stylesTextWrap[textWrap], mode !== 'base' && stylesMode[mode]);
     const cellContent = /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
             hasReactNode(before) && /*#__PURE__*/ _jsx("span", {
@@ -47,7 +47,7 @@ const stylesTextWrap = {
         Component: "div",
         role: "button",
         ...restProps,
-        className: cellClasses,
+        baseClassName: cellClasses,
         children: cellContent
     }) : /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,

package/dist/cssm/components/MiniInfoCell/MiniInfoCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nconst stylesMode = {\n add: styles.modeAdd,\n accent: styles.modeAccent,\n more: styles.modeMore,\n};\n\nconst stylesTextWrap = {\n nowrap: styles.textWrapNowrap,\n full: styles.textWrapFull,\n short: styles.textWrapShort,\n};\n\nexport interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Иконка слева.<br />\n * Рекомендуется использовать иконки размера 20.\n /\n before?: React.ReactNode;\n\n /\n Содержимое справа.<br />\n * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n /\n after?: React.ReactNode;\n\n /\n Тип ячейки:\n \n - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n /\n mode?: 'base' \| 'accent' \| 'add' \| 'more';\n\n /\n Тип отображения текста:\n \n - `nowrap` – в одну строку, текст не переносится и обрезается.\n * - `short` – максимально отображается 3 строки, остальное обрезается.\n * - `full` – текст отображается полностью. В дизайне это свойство `multiline`\n /\n textWrap?: 'nowrap' \| 'short' \| 'full';\n\n /\n Передавать `true`, если предполагается переход при клике по ячейке.\n /\n chevron?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n before,\n after,\n children,\n mode = 'base',\n textWrap = 'nowrap',\n chevron = false,\n ~~className,\n~~ ...restProps\n}: MiniInfoCellProps): React.ReactNode => {\n const cellClasses = classNames(\n styles.host,\n stylesTextWrap[textWrap],\n mode !== 'base' && stylesMode[mode],\n ~~className,\n~~ );\n\n const cellContent = (\n <React.Fragment>\n {hasReactNode(before) && <span className={styles.before}>{before}</span>}\n <div className={styles.middle}>\n <Paragraph className={styles.content} weight={mode === 'more' ? '2' : undefined}>\n {children}\n </Paragraph>\n {chevron && <Icon16Chevron />}\n </div>\n {hasReactNode(after) && <span className={styles.after}>{after}</span>}\n </React.Fragment>\n );\n\n return restProps.onClick ? (\n <Tappable Component=\"div\" role=\"button\" {...restProps} ~~className~~={cellClasses}>\n {cellContent}\n </Tappable>\n ) : (\n <RootComponent {...restProps} baseClassName={cellClasses}>\n {cellContent}\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Chevron","classNames","hasReactNode","RootComponent","Tappable","Paragraph","styles","stylesMode","add","modeAdd","accent","modeAccent","more","modeMore","stylesTextWrap","nowrap","textWrapNowrap","full","textWrapFull","short","textWrapShort","MiniInfoCell","before","after","children","mode","textWrap","chevron","~~className","~~restProps","cellClasses","host","cellContent","Fragment","span","div","middle","content","weight","undefined","onClick","Component","role","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa;IACjBC,KAAKF,OAAOG,OAAO;IACnBC,QAAQJ,OAAOK,UAAU;IACzBC,MAAMN,OAAOO,QAAQ;AACvB;AAEA,MAAMC,iBAAiB;IACrBC,QAAQT,OAAOU,cAAc;IAC7BC,MAAMX,OAAOY,YAAY;IACzBC,OAAOb,OAAOc,aAAa;AAC7B;AAwCA;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAC3BC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,UAAU,KAAK,~~EACfC~~,~~SAAS,EACT,~~GAAGC,WACe;IAClB,MAAMC,~~cAAc7B~~,WAClBK,~~OAAOyB~~,IAAI,~~EACXjB~~,cAAc,CAACY,SAAS,EACxBD,SAAS,UAAUlB,UAAU,CAACkB,KAAK~~,EACnCG~~;~~IAGF~~,~~MAAMI~~,4BACJ,~~MAACjC~~,~~MAAMkC~~,QAAQ;;~~YACZ/B~~,aAAaoB,yBAAW,~~KAACY~~;~~gBAAKN~~,~~WAAWtB~~,OAAOgB,MAAM;0BAAGA;;0BAC1D,MAACa;~~gBAAIP~~,~~WAAWtB~~,OAAO8B,MAAM;;kCAC3B,KAAC/B;~~wBAAUuB~~,~~WAAWtB~~,OAAO+B,OAAO;wBAAEC,QAAQb,SAAS,SAAS,MAAMc;kCACnEf;;oBAEFG,yBAAW,KAAC3B;;;YAEdE,aAAaqB,wBAAU,~~KAACW~~;~~gBAAKN~~,~~WAAWtB~~,OAAOiB,KAAK;0BAAGA;;;;IAI5D,~~OAAOM~~,~~UAAUW~~,OAAO,iBACtB,KAACpC;QAASqC,WAAU;QAAMC,MAAK;QAAU,~~GAAGb~~,SAAS;~~QAAED~~,~~WAAWE~~;~~kBAC/DE~~;uBAGH,~~KAAC7B~~;QAAe,~~GAAG0B~~,SAAS;~~QAAEc~~,~~eAAeb~~;kBAC1CE;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nconst stylesMode = {\n add: styles.modeAdd,\n accent: styles.modeAccent,\n more: styles.modeMore,\n};\n\nconst stylesTextWrap = {\n nowrap: styles.textWrapNowrap,\n full: styles.textWrapFull,\n short: styles.textWrapShort,\n};\n\nexport interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Иконка слева.<br />\n * Рекомендуется использовать иконки размера 20.\n /\n before?: React.ReactNode;\n\n /\n Содержимое справа.<br />\n * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n /\n after?: React.ReactNode;\n\n /\n Тип ячейки:\n \n - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n /\n mode?: 'base' \| 'accent' \| 'add' \| 'more';\n\n /\n Тип отображения текста:\n \n - `nowrap` – в одну строку, текст не переносится и обрезается.\n * - `short` – максимально отображается 3 строки, остальное обрезается.\n * - `full` – текст отображается полностью. В дизайне это свойство `multiline`\n /\n textWrap?: 'nowrap' \| 'short' \| 'full';\n\n /\n Передавать `true`, если предполагается переход при клике по ячейке.\n /\n chevron?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/MiniInfoCell\n */\nexport const MiniInfoCell = ({\n before,\n after,\n children,\n mode = 'base',\n textWrap = 'nowrap',\n chevron = false,\n ...restProps\n}: MiniInfoCellProps): React.ReactNode => {\n const cellClasses = classNames(\n styles.host,\n stylesTextWrap[textWrap],\n mode !== 'base' && stylesMode[mode],\n );\n\n const cellContent = (\n <React.Fragment>\n {hasReactNode(before) && <span className={styles.before}>{before}</span>}\n <div className={styles.middle}>\n <Paragraph className={styles.content} weight={mode === 'more' ? '2' : undefined}>\n {children}\n </Paragraph>\n {chevron && <Icon16Chevron />}\n </div>\n {hasReactNode(after) && <span className={styles.after}>{after}</span>}\n </React.Fragment>\n );\n\n return restProps.onClick ? (\n <Tappable Component=\"div\" role=\"button\" {...restProps} baseClassName={cellClasses}>\n {cellContent}\n </Tappable>\n ) : (\n <RootComponent {...restProps} baseClassName={cellClasses}>\n {cellContent}\n </RootComponent>\n );\n};\n"],"names":["React","Icon16Chevron","classNames","hasReactNode","RootComponent","Tappable","Paragraph","styles","stylesMode","add","modeAdd","accent","modeAccent","more","modeMore","stylesTextWrap","nowrap","textWrapNowrap","full","textWrapFull","short","textWrapShort","MiniInfoCell","before","after","children","mode","textWrap","chevron","restProps","cellClasses","host","cellContent","Fragment","span","className","div","middle","content","weight","undefined","onClick","Component","role","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,SAAS,QAAQ,uCAAoC;AAC9D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa;IACjBC,KAAKF,OAAOG,OAAO;IACnBC,QAAQJ,OAAOK,UAAU;IACzBC,MAAMN,OAAOO,QAAQ;AACvB;AAEA,MAAMC,iBAAiB;IACrBC,QAAQT,OAAOU,cAAc;IAC7BC,MAAMX,OAAOY,YAAY;IACzBC,OAAOb,OAAOc,aAAa;AAC7B;AAwCA;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAC3BC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,UAAU,KAAK,EACf,GAAGC,WACe;IAClB,MAAMC,cAAc5B,WAClBK,OAAOwB,IAAI,EACXhB,cAAc,CAACY,SAAS,EACxBD,SAAS,UAAUlB,UAAU,CAACkB,KAAK;IAGrC,MAAMM,4BACJ,MAAChC,MAAMiC,QAAQ;;YACZ9B,aAAaoB,yBAAW,KAACW;gBAAKC,WAAW5B,OAAOgB,MAAM;0BAAGA;;0BAC1D,MAACa;gBAAID,WAAW5B,OAAO8B,MAAM;;kCAC3B,KAAC/B;wBAAU6B,WAAW5B,OAAO+B,OAAO;wBAAEC,QAAQb,SAAS,SAAS,MAAMc;kCACnEf;;oBAEFG,yBAAW,KAAC3B;;;YAEdE,aAAaqB,wBAAU,KAACU;gBAAKC,WAAW5B,OAAOiB,KAAK;0BAAGA;;;;IAI5D,OAAOK,UAAUY,OAAO,iBACtB,KAACpC;QAASqC,WAAU;QAAMC,MAAK;QAAU,GAAGd,SAAS;QAAEe,eAAed;kBACnEE;uBAGH,KAAC5B;QAAe,GAAGyB,SAAS;QAAEe,eAAed;kBAC1CE;;AAGP,EAAE"}

package/dist/cssm/components/ModalCardBase/ModalCardBase.js CHANGED Viewed

@@ -13,7 +13,7 @@ import { ModalCardBaseCloseButton } from "./ModalCardBaseCloseButton.js";
 import styles from "./ModalCardBase.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
- */ export const ModalCardBase = ({ icon, title, titleComponent = 'span', description, descriptionComponent = 'span', children, actions, onClose, dismissLabel = 'Скрыть', style, size: sizeProp, modalDismissButtonTestId, dismissButtonMode = 'outside', preventClose, ...restProps })=>{
+ */ export const ModalCardBase = ({ icon, title, titleComponent = 'span', description, descriptionComponent = 'span', children, actions, onClose, dismissLabel = 'Скрыть', size: sizeProp, modalDismissButtonTestId, dismissButtonMode = 'outside', preventClose, ...restProps })=>{
     const platform = usePlatform();
     const { isDesktop } = useAdaptivityWithJSMediaQueries();
     const size = isDesktop ? sizeProp : undefined;
@@ -23,9 +23,8 @@ import styles from "./ModalCardBase.module.css";
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames('vkuiInternalModalCardBase', platform === 'ios' && styles.ios, isDesktop && styles.desktop, withSafeZone && styles.withSafeZone),
-        style: {
-            maxWidth: size,
-            ...style
+        baseStyle: {
+            maxWidth: size
         },
         children: /*#__PURE__*/ _jsxs("div", {
             className: styles.container,

package/dist/cssm/components/ModalCardBase/ModalCardBase.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {\n /*\n Иконка.\n \n Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n /\n icon?: React.ReactNode;\n\n /\n Заголовок карточки\n /\n title?: React.ReactNode;\n / Позволяет поменять тег используемый для заголовка /\n titleComponent?: React.ElementType;\n\n /\n Описание\n /\n description?: React.ReactNode;\n / Позволяет поменять тег используемый для описания /\n descriptionComponent?: React.ElementType;\n\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `size=\"l\" mode=\"primary\" stretched`\n * - `size=\"l\" mode=\"secondary\" stretched`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `gap=\"s\" mode=\"horizontal\" stretched`\n * - `gap=\"m\" mode=\"vertical\" stretched`\n /\n actions?: React.ReactNode;\n\n onClose?: VoidFunction;\n\n /\n Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n /\n dismissLabel?: string;\n\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: number;\n\n /\n `data-testid` для кнопки закрытия\n /\n modalDismissButtonTestId?: string;\n /\n Расположение кнопки закрытия (внутри и вне `popout'a`)\n \n Доступно только в `compact`-режиме\n \n На `iOS` в `regular`-режиме всегда включен `inside`\n \n ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n /\n dismissButtonMode?: 'inside' \| 'outside' \| 'none';\n /\n Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n \n ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n /\n preventClose?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n icon,\n title,\n titleComponent = 'span',\n description,\n descriptionComponent = 'span',\n children,\n actions,\n onClose,\n dismissLabel = 'Скрыть',\n ~~style,\n~~ size: sizeProp,\n modalDismissButtonTestId,\n dismissButtonMode = 'outside',\n preventClose,\n ...restProps\n}: ModalCardBaseProps): React.ReactNode => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n const size = isDesktop ? sizeProp : undefined;\n const withSafeZone =\n !icon &&\n (dismissButtonMode === 'inside' \|\|\n (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n const hasTitle = hasReactNode(title);\n const hasDescription = hasReactNode(description);\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n 'vkuiInternalModalCardBase',\n platform === 'ios' && styles.ios,\n isDesktop && styles.desktop,\n withSafeZone && styles.withSafeZone,\n )}\n ~~style~~={{\n maxWidth: size,\n ~~...style,\n~~ }}\n >\n <div className={styles.container}>\n {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}\n {hasReactNode(title) && (\n <Title level=\"2\" weight=\"2\" className={styles.title} Component={titleComponent}>\n {title}\n </Title>\n )}\n {hasTitle && hasDescription && <Spacing size={8} />}\n {hasDescription && (\n <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n <Subhead className={styles.description} Component={descriptionComponent}>\n {description}\n </Subhead>\n </AdaptivityContext.Provider>\n )}\n\n {children}\n\n {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}\n\n {dismissButtonMode !== 'none' && (\n <ModalCardBaseCloseButton\n testId={modalDismissButtonTestId}\n onClose={onClose}\n mode={dismissButtonMode}\n >\n {dismissLabel}\n </ModalCardBaseCloseButton>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","AdaptivityContext","RootComponent","Spacing","Subhead","Title","ModalCardBaseCloseButton","styles","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","~~style","~~size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","isDesktop","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","ios","desktop","maxWidth","div","className","container","level","weight","Component","Provider","value","sizeY","testId","mode"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAClD,SAASC,wBAAwB,QAAQ,gCAA6B;AACtE,OAAOC,YAAY,6BAA6B;AAwEhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,IAAI,EACJC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,uBAAuB,MAAM,EAC7BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,~~KAAK,EACLC,~~MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EACZ,GAAGC,WACgB;IACnB,MAAMC,~~WAAWzB~~;IACjB,MAAM,~~EAAE0B~~,SAAS,EAAE,~~GAAG3B~~;IAEtB,~~MAAMoB~~,OAAOO,YAAYN,WAAWO;IACpC,MAAMC,eACJ,~~CAACnB~~,~~QACAa~~,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMO,~~WAAW/B~~,aAAaY;IAC9B,~~MAAMoB~~,~~iBAAiBhC~~,aAAac;IACpC,qBACE,KAACV;QACE,~~GAAGsB~~,SAAS;QACbO,~~eAAelC~~,WACb,~~6BACA4B~~,aAAa,~~SAASlB~~,~~OAAOyB~~,GAAG,EAChCN,~~aAAanB~~,~~OAAO0B~~,OAAO,EAC3BL,~~gBAAgBrB~~,~~OAAOqB~~,YAAY;~~QAErCV~~,~~OAAO~~;~~YACLgB~~,~~UAAUf~~;~~YACV,GAAGD,KAAK~~;~~QACV;~~kBAEA,cAAA,MAACiB;YAAIC,WAAW7B,OAAO8B,SAAS;;gBAC7BvC,aAAaW,uBAAS,KAAC0B;oBAAIC,WAAW7B,OAAOE,IAAI;8BAAGA;;gBACpDX,aAAaY,wBACZ,KAACL;oBAAMiC,OAAM;oBAAIC,QAAO;oBAAIH,WAAW7B,OAAOG,KAAK;oBAAE8B,WAAW7B;8BAC7DD;;~~gBAGJmB~~,YAAYC,gCAAkB,~~KAAC3B~~;~~oBAAQgB~~,MAAM;;gBAC7CW,gCACC,~~KAAC7B~~,kBAAkBwC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAACvC;wBAAQgC,WAAW7B,OAAOK,WAAW;wBAAE4B,WAAW3B;kCAChDD;;;gBAKNE;gBAEAhB,aAAaiB,0BAAY,KAACoB;oBAAIC,WAAW7B,OAAOQ,OAAO;8BAAGA;;~~gBAE1DO~~,sBAAsB,wBACrB,~~KAAChB~~;oBACCsC,~~QAAQvB~~;~~oBACRL~~,SAASA;oBACT6B,~~MAAMvB~~;~~8BAELL~~;;;;;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {\n /*\n Иконка.\n \n Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n /\n icon?: React.ReactNode;\n\n /\n Заголовок карточки\n /\n title?: React.ReactNode;\n / Позволяет поменять тег используемый для заголовка /\n titleComponent?: React.ElementType;\n\n /\n Описание\n /\n description?: React.ReactNode;\n / Позволяет поменять тег используемый для описания /\n descriptionComponent?: React.ElementType;\n\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `size=\"l\" mode=\"primary\" stretched`\n * - `size=\"l\" mode=\"secondary\" stretched`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `gap=\"s\" mode=\"horizontal\" stretched`\n * - `gap=\"m\" mode=\"vertical\" stretched`\n /\n actions?: React.ReactNode;\n\n onClose?: VoidFunction;\n\n /\n Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n /\n dismissLabel?: string;\n\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: number;\n\n /\n `data-testid` для кнопки закрытия\n /\n modalDismissButtonTestId?: string;\n /\n Расположение кнопки закрытия (внутри и вне `popout'a`)\n \n Доступно только в `compact`-режиме\n \n На `iOS` в `regular`-режиме всегда включен `inside`\n \n ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n /\n dismissButtonMode?: 'inside' \| 'outside' \| 'none';\n /\n Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n \n ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n /\n preventClose?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n icon,\n title,\n titleComponent = 'span',\n description,\n descriptionComponent = 'span',\n children,\n actions,\n onClose,\n dismissLabel = 'Скрыть',\n size: sizeProp,\n modalDismissButtonTestId,\n dismissButtonMode = 'outside',\n preventClose,\n ...restProps\n}: ModalCardBaseProps): React.ReactNode => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n const size = isDesktop ? sizeProp : undefined;\n const withSafeZone =\n !icon &&\n (dismissButtonMode === 'inside' \|\|\n (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n const hasTitle = hasReactNode(title);\n const hasDescription = hasReactNode(description);\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n 'vkuiInternalModalCardBase',\n platform === 'ios' && styles.ios,\n isDesktop && styles.desktop,\n withSafeZone && styles.withSafeZone,\n )}\n baseStyle={{\n maxWidth: size,\n }}\n >\n <div className={styles.container}>\n {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}\n {hasReactNode(title) && (\n <Title level=\"2\" weight=\"2\" className={styles.title} Component={titleComponent}>\n {title}\n </Title>\n )}\n {hasTitle && hasDescription && <Spacing size={8} />}\n {hasDescription && (\n <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n <Subhead className={styles.description} Component={descriptionComponent}>\n {description}\n </Subhead>\n </AdaptivityContext.Provider>\n )}\n\n {children}\n\n {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}\n\n {dismissButtonMode !== 'none' && (\n <ModalCardBaseCloseButton\n testId={modalDismissButtonTestId}\n onClose={onClose}\n mode={dismissButtonMode}\n >\n {dismissLabel}\n </ModalCardBaseCloseButton>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","AdaptivityContext","RootComponent","Spacing","Subhead","Title","ModalCardBaseCloseButton","styles","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","isDesktop","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","ios","desktop","baseStyle","maxWidth","div","className","container","level","weight","Component","Provider","value","sizeY","testId","mode"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAClD,SAASC,wBAAwB,QAAQ,gCAA6B;AACtE,OAAOC,YAAY,6BAA6B;AAwEhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,IAAI,EACJC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,uBAAuB,MAAM,EAC7BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EACZ,GAAGC,WACgB;IACnB,MAAMC,WAAWxB;IACjB,MAAM,EAAEyB,SAAS,EAAE,GAAG1B;IAEtB,MAAMmB,OAAOO,YAAYN,WAAWO;IACpC,MAAMC,eACJ,CAAClB,QACAY,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMO,WAAW9B,aAAaY;IAC9B,MAAMmB,iBAAiB/B,aAAac;IACpC,qBACE,KAACV;QACE,GAAGqB,SAAS;QACbO,eAAejC,WACb,6BACA2B,aAAa,SAASjB,OAAOwB,GAAG,EAChCN,aAAalB,OAAOyB,OAAO,EAC3BL,gBAAgBpB,OAAOoB,YAAY;QAErCM,WAAW;YACTC,UAAUhB;QACZ;kBAEA,cAAA,MAACiB;YAAIC,WAAW7B,OAAO8B,SAAS;;gBAC7BvC,aAAaW,uBAAS,KAAC0B;oBAAIC,WAAW7B,OAAOE,IAAI;8BAAGA;;gBACpDX,aAAaY,wBACZ,KAACL;oBAAMiC,OAAM;oBAAIC,QAAO;oBAAIH,WAAW7B,OAAOG,KAAK;oBAAE8B,WAAW7B;8BAC7DD;;gBAGJkB,YAAYC,gCAAkB,KAAC1B;oBAAQe,MAAM;;gBAC7CW,gCACC,KAAC5B,kBAAkBwC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAACvC;wBAAQgC,WAAW7B,OAAOK,WAAW;wBAAE4B,WAAW3B;kCAChDD;;;gBAKNE;gBAEAhB,aAAaiB,0BAAY,KAACoB;oBAAIC,WAAW7B,OAAOQ,OAAO;8BAAGA;;gBAE1DM,sBAAsB,wBACrB,KAACf;oBACCsC,QAAQxB;oBACRJ,SAASA;oBACT6B,MAAMxB;8BAELJ;;;;;AAMb,EAAE"}

package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js CHANGED Viewed

@@ -1,15 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon20Cancel } from "@vkontakte/icons";
-import { classNames } from "@vkontakte/vkjs";
 import { Tappable } from "../Tappable/Tappable.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./ModalDismissButton.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
- */ export const ModalDismissButton = ({ children = 'Закрыть', className, ...restProps })=>{
+ */ export const ModalDismissButton = ({ children = 'Закрыть', ...restProps })=>{
     return /*#__PURE__*/ _jsxs(Tappable, {
-        className: classNames(styles.host, className),
+        baseClassName: styles.host,
         ...restProps,
         activeMode: styles.active,
         hoverMode: styles.hover,

package/dist/cssm/components/ModalDismissButton/ModalDismissButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { ~~classNames } from '@vkontakte/vkjs';\nimport {~~ Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = Omit<TappableProps, 'mode' \| 'onClose'>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n children = 'Закрыть',\n ~~className,\n~~ ...restProps\n}: ModalDismissButtonProps): React.ReactNode => {\n return (\n <Tappable\n ~~className~~={~~classNames(~~styles.host~~, className)~~}\n {...restProps}\n activeMode={styles.active}\n hoverMode={styles.hover}\n >\n {children && <VisuallyHidden>{children}</VisuallyHidden>}\n <Icon20Cancel />\n </Tappable>\n );\n};\n"],"names":["React","Icon20Cancel","~~classNames","~~Tappable","VisuallyHidden","styles","ModalDismissButton","children","~~className~~","~~restProps~~","host","activeMode","active","hoverMode","hover"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,~~UAAU,~~QAAQ,~~kBAAkB;AAC7C,SAASC,QAAQ,~~QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAIrD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,WAAW,SAAS,~~EACpBC~~,~~SAAS,EACT,~~GAAGC,WACqB;IACxB,qBACE,~~MAACN~~;~~QACCK~~,~~WAAWN~~,~~WAAWG,~~OAAOK,IAAI~~,EAAEF~~;~~QAClC~~,~~GAAGC~~,SAAS;~~QACbE~~,YAAYN,OAAOO,MAAM;QACzBC,WAAWR,OAAOS,KAAK;;YAEtBP,0BAAY,KAACH;0BAAgBG;;0BAC9B,~~KAACN~~;;;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = Omit<TappableProps, 'mode' \| 'onClose'>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n children = 'Закрыть',\n ...restProps\n}: ModalDismissButtonProps): React.ReactNode => {\n return (\n <Tappable\n baseClassName={styles.host}\n {...restProps}\n activeMode={styles.active}\n hoverMode={styles.hover}\n >\n {children && <VisuallyHidden>{children}</VisuallyHidden>}\n <Icon20Cancel />\n </Tappable>\n );\n};\n"],"names":["React","Icon20Cancel","Tappable","VisuallyHidden","styles","ModalDismissButton","children","restProps","baseClassName","host","activeMode","active","hoverMode","hover"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAIrD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,WAAW,SAAS,EACpB,GAAGC,WACqB;IACxB,qBACE,MAACL;QACCM,eAAeJ,OAAOK,IAAI;QACzB,GAAGF,SAAS;QACbG,YAAYN,OAAOO,MAAM;QACzBC,WAAWR,OAAOS,KAAK;;YAEtBP,0BAAY,KAACH;0BAAgBG;;0BAC9B,KAACL;;;AAGP,EAAE"}

package/dist/cssm/components/ModalOverlay/ModalOverlay.module.css CHANGED Viewed

@@ -20,6 +20,7 @@
 .hostPositionFixed {
   position: fixed;
+  z-index: var(--vkui--z_index_modal);
 }
 .hostStateEnter {

package/dist/cssm/components/ModalRoot/ModalRoot.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { noop } from "@vkontakte/vkjs";
 import { warnOnce } from "../../lib/warnOnce.js";
-import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
+import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { ModalOverlay } from "../ModalOverlay/ModalOverlay.js";
 import { ModalRootContext, ModalRootOverlayContext } from "./ModalRootContext.js";
 const warn = warnOnce('ModalRoot');
@@ -39,7 +39,7 @@ const warn = warnOnce('ModalRoot');
         onOpened
     ]);
     const modalOverlayRef = React.useRef(null);
-    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+    return /*#__PURE__*/ _jsx(AppRootPortal, {
         usePortal: usePortal,
         children: /*#__PURE__*/ _jsx(ModalRootContext.Provider, {
             value: contextValue,
@@ -47,6 +47,7 @@ const warn = warnOnce('ModalRoot');
                 value: modalOverlayRef,
                 children: [
                     /*#__PURE__*/ _jsx(ModalOverlay, {
+                        position: "fixed",
                         visible: typeof activeModal === 'string',
                         getRootRef: modalOverlayRef
                     }),

package/dist/cssm/components/ModalRoot/ModalRoot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ~~ModalPopoutPortal~~ } from '../AppRoot/~~ModalPopoutPortal~~';\nimport { ModalOverlay } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';\nimport type { ModalRootProps } from './types';\n\nconst warn = warnOnce('ModalRoot');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalRoot\n /\nexport const ModalRoot = ({\n activeModal,\n children,\n modalOverlayTestId,\n noFocusToDialog,\n usePortal,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootProps): React.ReactNode => {\n const contextValue = React.useMemo(\n () => ({\n isInsideModal: true,\n\n // base props\n activeModal,\n modalOverlayTestId,\n noFocusToDialog,\n\n // callbacks\n onOpen,\n onOpened,\n onClose,\n onClosed,\n\n // TODO [>=8] Удалить метод\n updateModalHeight:\n / istanbul ignore next: deprecated /\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод updateModalHeight() устарел и будет удалён в VKUI v8');\n }\n : noop,\n\n // TODO [>=8] Удалить метод\n registerModal:\n / istanbul ignore next: deprecated */\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод registerModal() устарел и будет удалён в VKUI v8');\n }\n : noop,\n }),\n [activeModal, modalOverlayTestId, noFocusToDialog, onClose, onClosed, onOpen, onOpened],\n );\n const modalOverlayRef = React.useRef<HTMLDivElement>(null);\n return (\n <~~ModalPopoutPortal~~ usePortal={usePortal}>\n <ModalRootContext.Provider value={contextValue}>\n <ModalRootOverlayContext.Provider value={modalOverlayRef}>\n <ModalOverlay visible={typeof activeModal === 'string'} getRootRef={modalOverlayRef} />\n {children}\n </ModalRootOverlayContext.Provider>\n </ModalRootContext.Provider>\n </~~ModalPopoutPortal~~>\n );\n};\n"],"names":["React","noop","warnOnce","~~ModalPopoutPortal~~","ModalOverlay","ModalRootContext","ModalRootOverlayContext","warn","ModalRoot","activeModal","children","modalOverlayTestId","noFocusToDialog","usePortal","onOpen","onOpened","onClose","onClosed","contextValue","useMemo","isInsideModal","updateModalHeight","process","env","NODE_ENV","registerModal","modalOverlayRef","useRef","Provider","value","visible","getRootRef"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,~~iBAAiB~~,QAAQ,~~kCAA+B~~;~~AACjE~~,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,wBAAqB;AAG/E,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,EAClBC,eAAe,EACfC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACO;IACf,MAAMC,eAAelB,MAAMmB,OAAO,CAChC,IAAO,CAAA;YACLC,eAAe;YAEf,aAAa;YACbX;YACAE;YACAC;YAEA,YAAY;YACZE;YACAC;YACAC;YACAC;YAEA,2BAA2B;YAC3BI,mBACE,oCAAoC,GACpCC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;YAEN,2BAA2B;YAC3BwB,eACE,oCAAoC,GACpCH,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;QACR,CAAA,GACA;QAACQ;QAAaE;QAAoBC;QAAiBI;QAASC;QAAUH;QAAQC;KAAS;IAEzF,MAAMW,kBAAkB1B,MAAM2B,MAAM,CAAiB;IACrD,qBACE,KAACxB;~~QAAkBU~~,WAAWA;~~kBAC5B~~,cAAA,KAACR,iBAAiBuB,QAAQ;YAACC,OAAOX;sBAChC,cAAA,MAACZ,wBAAwBsB,QAAQ;gBAACC,OAAOH;;kCACvC,KAACtB;~~wBAAa0B~~,SAAS,~~OAAOrB~~,gBAAgB;~~wBAAUsB~~,~~YAAYL~~;;~~oBACnEhB~~;;;;;AAKX,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ModalOverlay } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';\nimport type { ModalRootProps } from './types';\n\nconst warn = warnOnce('ModalRoot');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalRoot\n /\nexport const ModalRoot = ({\n activeModal,\n children,\n modalOverlayTestId,\n noFocusToDialog,\n usePortal,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n}: ModalRootProps): React.ReactNode => {\n const contextValue = React.useMemo(\n () => ({\n isInsideModal: true,\n\n // base props\n activeModal,\n modalOverlayTestId,\n noFocusToDialog,\n\n // callbacks\n onOpen,\n onOpened,\n onClose,\n onClosed,\n\n // TODO [>=8] Удалить метод\n updateModalHeight:\n / istanbul ignore next: deprecated /\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод updateModalHeight() устарел и будет удалён в VKUI v8');\n }\n : noop,\n\n // TODO [>=8] Удалить метод\n registerModal:\n / istanbul ignore next: deprecated */\n process.env.NODE_ENV === 'development'\n ? () => {\n warn('Метод registerModal() устарел и будет удалён в VKUI v8');\n }\n : noop,\n }),\n [activeModal, modalOverlayTestId, noFocusToDialog, onClose, onClosed, onOpen, onOpened],\n );\n const modalOverlayRef = React.useRef<HTMLDivElement>(null);\n return (\n <AppRootPortal usePortal={usePortal}>\n <ModalRootContext.Provider value={contextValue}>\n <ModalRootOverlayContext.Provider value={modalOverlayRef}>\n <ModalOverlay\n position=\"fixed\"\n visible={typeof activeModal === 'string'}\n getRootRef={modalOverlayRef}\n />\n {children}\n </ModalRootOverlayContext.Provider>\n </ModalRootContext.Provider>\n </AppRootPortal>\n );\n};\n"],"names":["React","noop","warnOnce","AppRootPortal","ModalOverlay","ModalRootContext","ModalRootOverlayContext","warn","ModalRoot","activeModal","children","modalOverlayTestId","noFocusToDialog","usePortal","onOpen","onOpened","onClose","onClosed","contextValue","useMemo","isInsideModal","updateModalHeight","process","env","NODE_ENV","registerModal","modalOverlayRef","useRef","Provider","value","position","visible","getRootRef"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,wBAAqB;AAG/E,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,EAClBC,eAAe,EACfC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACO;IACf,MAAMC,eAAelB,MAAMmB,OAAO,CAChC,IAAO,CAAA;YACLC,eAAe;YAEf,aAAa;YACbX;YACAE;YACAC;YAEA,YAAY;YACZE;YACAC;YACAC;YACAC;YAEA,2BAA2B;YAC3BI,mBACE,oCAAoC,GACpCC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;YAEN,2BAA2B;YAC3BwB,eACE,oCAAoC,GACpCH,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;QACR,CAAA,GACA;QAACQ;QAAaE;QAAoBC;QAAiBI;QAASC;QAAUH;QAAQC;KAAS;IAEzF,MAAMW,kBAAkB1B,MAAM2B,MAAM,CAAiB;IACrD,qBACE,KAACxB;QAAcU,WAAWA;kBACxB,cAAA,KAACR,iBAAiBuB,QAAQ;YAACC,OAAOX;sBAChC,cAAA,MAACZ,wBAAwBsB,QAAQ;gBAACC,OAAOH;;kCACvC,KAACtB;wBACC0B,UAAS;wBACTC,SAAS,OAAOtB,gBAAgB;wBAChCuB,YAAYN;;oBAEbhB;;;;;AAKX,EAAE"}

package/dist/cssm/components/ModalRoot/ModalRootContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from "react";
 import { noop } from "@vkontakte/vkjs";
 /**

package/dist/cssm/components/ModalRoot/ModalRootContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootContext.tsx"],"sourcesContent":["~~import~~ { createContext, type RefObject } from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport type { ModalRootContextInterface } from './types';\n\n/*\n Сохраняем `ref` компонента `ModalOverlay` из `ModalRoot` в контекст, чтобы можно было пробросить\n * его до `ModalPage` и `ModalCard`.\n \n @private\n */\nexport const ModalRootOverlayContext = createContext<RefObject<HTMLDivElement>>({ current: null });\n\nexport const ModalRootContext = createContext<ModalRootContextInterface>({\n updateModalHeight: noop,\n registerModal: noop,\n isInsideModal: false,\n});\n"],"names":["createContext","noop","ModalRootOverlayContext","current","ModalRootContext","updateModalHeight","registerModal","isInsideModal"],"mappings":"AAAA,SAASA,aAAa,QAAwB,QAAQ;AACtD,SAASC,IAAI,QAAQ,kBAAkB;AAGvC;;;;;CAKC,GACD,OAAO,MAAMC,wCAA0BF,cAAyC;IAAEG,SAAS;AAAK,GAAG;AAEnG,OAAO,MAAMC,iCAAmBJ,cAAyC;IACvEK,mBAAmBJ;IACnBK,eAAeL;IACfM,eAAe;AACjB,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootContext.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type RefObject } from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport type { ModalRootContextInterface } from './types';\n\n/*\n Сохраняем `ref` компонента `ModalOverlay` из `ModalRoot` в контекст, чтобы можно было пробросить\n * его до `ModalPage` и `ModalCard`.\n \n @private\n */\nexport const ModalRootOverlayContext = createContext<RefObject<HTMLDivElement>>({ current: null });\n\nexport const ModalRootContext = createContext<ModalRootContextInterface>({\n updateModalHeight: noop,\n registerModal: noop,\n isInsideModal: false,\n});\n"],"names":["createContext","noop","ModalRootOverlayContext","current","ModalRootContext","updateModalHeight","registerModal","isInsideModal"],"mappings":"AAAA;AAEA,SAASA,aAAa,QAAwB,QAAQ;AACtD,SAASC,IAAI,QAAQ,kBAAkB;AAGvC;;;;;CAKC,GACD,OAAO,MAAMC,wCAA0BF,cAAyC;IAAEG,SAAS;AAAK,GAAG;AAEnG,OAAO,MAAMC,iCAAmBJ,cAAyC;IACvEK,mBAAmBJ;IACnBK,eAAeL;IACfM,eAAe;AACjB,GAAG"}

package/dist/cssm/components/ModalRoot/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["/** TODO [>=8] Удалить deprecated типы /\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type ModalType = 'page' \| 'card';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type TranslateRange = [number, number];\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport interface ModalElements {\n modalElement?: HTMLElement \| null;\n innerElement?: HTMLElement \| null;\n headerElement?: HTMLElement \| null;\n contentElement?: HTMLElement \| null;\n bottomInset?: HTMLElement \| null;\n}\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport interface ModalsStateEntry extends ModalElements {\n id: string \| null;\n /\n Событие начала открытия модалки.\n /\n onOpen?: VoidFunction;\n /\n Событие открытия модалки.\n /\n onOpened?: VoidFunction;\n /\n Событие начала закрытия модалки.\n /\n onClose?: VoidFunction;\n /\n Событие закрытия модалки.\n /\n onClosed?: VoidFunction;\n type?: ModalType;\n\n settlingHeight?: number;\n expandable?: boolean;\n\n /\n Процент текущего сдвига модалки\n /\n translateY?: number;\n /\n Процент сдвига модалки в изначальном состоянии\n /\n translateYFrom?: number;\n /\n Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n /\n translateYCurrent?: number;\n\n touchStartContentScrollTop?: number;\n touchMovePositive?: boolean \| null;\n touchShiftYPercent?: number;\n\n expanded?: boolean;\n collapsed?: boolean;\n hidden?: boolean;\n\n contentScrolled?: boolean;\n contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n expandedRange?: TranslateRange;\n collapsedRange?: TranslateRange;\n hiddenRange?: TranslateRange;\n /\n Отключает возможность закрыть модалку стандартными способами\n /\n preventClose?: boolean;\n}\n\nexport type ModalRootActiveModal = string \| null;\n\nexport type ModalRootCallbackFunction = (modalId: string) => void;\n\ntype ModalRootBaseProps = {\n activeModal?: ModalRootActiveModal;\n\n /\n `data-testid` для маски\n /\n modalOverlayTestId?: string;\n\n /\n Отключает фокус на контейнер диалогового окна при открытии.\n /\n noFocusToDialog?: boolean;\n\n usePortal?: AppRootPortalProps['usePortal'];\n\n /\n Будет вызвано при начале открытия активной модалки с её id\n /\n onOpen?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном открытии активной модалки с её id\n /\n onOpened?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при начале закрытия активной модалки с её id\n /\n onClose?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном закрытии активной модалки с её id\n /\n onClosed?: ModalRootCallbackFunction;\n};\n\nexport interface ModalRootProps extends ModalRootBaseProps {\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\ntype ModalRootContextBaseInterface = {\n /\n Обозначает, в контексте ли модального окна мы сейчас.\n /\n isInsideModal: boolean;\n\n /\n С VKUI v7 задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.\n \n @deprecated будет удалён в VKUI v8\n /\n updateModalHeight: VoidFunction;\n\n /\n С VKUI v7 регистрация модальных окон больше не требуется.\n \n @deprecated будет удалён в VKUI v8\n */\n registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' \| 'id'>>) => void;\n};\n\nexport interface ModalRootContextInterface\n extends ModalRootContextBaseInterface,\n ModalRootBaseProps {}\n\nexport interface UseModalRootContext extends ModalRootContextBaseInterface {\n onClose?: VoidFunction;\n}\n"],"names":[],"mappings":"AAAA,uCAAuC,~~GAwJvC~~,WAEC"}
1	+ {"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["/** TODO [>=8] Удалить deprecated типы /\n\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type ModalType = 'page' \| 'card';\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport type TranslateRange = [number, number];\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport interface ModalElements {\n modalElement?: HTMLElement \| null;\n innerElement?: HTMLElement \| null;\n headerElement?: HTMLElement \| null;\n contentElement?: HTMLElement \| null;\n bottomInset?: HTMLElement \| null;\n}\n\n/\n @deprecated будет удалён в VKUI v8\n /\nexport interface ModalsStateEntry extends ModalElements {\n id: string \| null;\n /\n Событие начала открытия модалки.\n /\n onOpen?: VoidFunction;\n /\n Событие открытия модалки.\n /\n onOpened?: VoidFunction;\n /\n Событие начала закрытия модалки.\n /\n onClose?: VoidFunction;\n /\n Событие закрытия модалки.\n /\n onClosed?: VoidFunction;\n type?: ModalType;\n\n settlingHeight?: number;\n expandable?: boolean;\n\n /\n Процент текущего сдвига модалки\n /\n translateY?: number;\n /\n Процент сдвига модалки в изначальном состоянии\n /\n translateYFrom?: number;\n /\n Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n /\n translateYCurrent?: number;\n\n touchStartContentScrollTop?: number;\n touchMovePositive?: boolean \| null;\n touchShiftYPercent?: number;\n\n expanded?: boolean;\n collapsed?: boolean;\n hidden?: boolean;\n\n contentScrolled?: boolean;\n contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n expandedRange?: TranslateRange;\n collapsedRange?: TranslateRange;\n hiddenRange?: TranslateRange;\n /\n Отключает возможность закрыть модалку стандартными способами\n /\n preventClose?: boolean;\n}\n\nexport type ModalRootActiveModal = string \| null;\n\nexport type ModalRootCallbackFunction = (modalId: string) => void;\n\ntype ModalRootBaseProps = {\n activeModal?: ModalRootActiveModal;\n\n /\n `data-testid` для маски\n /\n modalOverlayTestId?: string;\n\n /\n Отключает фокус на контейнер диалогового окна при открытии.\n /\n noFocusToDialog?: boolean;\n\n usePortal?: AppRootPortalProps['usePortal'];\n\n /\n Будет вызвано при начале открытия активной модалки с её id\n /\n onOpen?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном открытии активной модалки с её id\n /\n onOpened?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при начале закрытия активной модалки с её id\n /\n onClose?: ModalRootCallbackFunction;\n\n /\n Будет вызвано при окончательном закрытии активной модалки с её id\n /\n onClosed?: ModalRootCallbackFunction;\n};\n\nexport interface ModalRootProps extends ModalRootBaseProps {\n children: React.ReactElement \| Iterable<React.ReactElement>;\n}\n\ntype ModalRootContextBaseInterface = {\n /\n Обозначает, в контексте ли модального окна мы сейчас.\n /\n isInsideModal: boolean;\n\n /\n С VKUI v7 задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.\n \n @deprecated будет удалён в VKUI v8\n /\n updateModalHeight: VoidFunction;\n\n /\n С VKUI v7 регистрация модальных окон больше не требуется.\n \n @deprecated будет удалён в VKUI v8\n */\n registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' \| 'id'>>) => void;\n};\n\nexport interface ModalRootContextInterface\n extends ModalRootContextBaseInterface,\n ModalRootBaseProps {}\n\nexport interface UseModalRootContext extends ModalRootContextBaseInterface {\n onClose?: VoidFunction;\n}\n"],"names":[],"mappings":"AAAA,uCAAuC,GAyJvC,WAEC"}

package/dist/cssm/components/NavIdContext/NavIdContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 export const NavViewIdContext = /*#__PURE__*/ React.createContext(undefined);
 export const NavPanelIdContext = /*#__PURE__*/ React.createContext(undefined);

package/dist/cssm/components/NavIdContext/NavIdContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/NavIdContext/NavIdContext.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\n\nexport const NavViewIdContext: React.Context<string \| undefined> = React.createContext<\n string \| undefined\n>(undefined);\nexport const NavPanelIdContext: React.Context<string \| undefined> = React.createContext<\n string \| undefined\n>(undefined);\n"],"names":["React","NavViewIdContext","createContext","undefined","NavPanelIdContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,iCAAsDD,MAAME,aAAa,CAEpFC,WAAW;AACb,OAAO,MAAMC,kCAAuDJ,MAAME,aAAa,CAErFC,WAAW"}
1	+ {"version":3,"sources":["../../../../src/components/NavIdContext/NavIdContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport const NavViewIdContext: React.Context<string \| undefined> = React.createContext<\n string \| undefined\n>(undefined);\nexport const NavPanelIdContext: React.Context<string \| undefined> = React.createContext<\n string \| undefined\n>(undefined);\n"],"names":["React","NavViewIdContext","createContext","undefined","NavPanelIdContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,iCAAsDD,MAAME,aAAa,CAEpFC,WAAW;AACb,OAAO,MAAMC,kCAAuDJ,MAAME,aAAa,CAErFC,WAAW"}

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js CHANGED Viewed

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { hasReactNode } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { usePatchChildren } from "../../hooks/usePatchChildren.js";
 import { createPortal } from "../../lib/createPortal.js";
@@ -48,16 +49,13 @@ const warn = warnOnce('OnboardingTooltip');
     let tooltip = null;
     if (shown) {
         const floatingStyle = convertFloatingDataToReactCSSProperties(positionStrategy, floatingDataX, floatingDataY);
-        if (styleProp) {
-            Object.assign(floatingStyle, styleProp);
-        }
         tooltip = createPortal(/*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(TooltipBase, {
                     ...restProps,
                     id: tooltipId,
                     getRootRef: tooltipRef,
-                    style: floatingStyle,
+                    style: mergeStyle(floatingStyle, styleProp),
                     maxWidth: maxWidth,
                     arrowProps: disableArrow ? undefined : {
                         offset: arrowOffset,

package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n autoUpdateFloatingElement,\n convertFloatingDataToReactCSSProperties,\n type FloatingComponentProps,\n useFloating,\n useFloatingMiddlewaresBootstrap,\n usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n \| 'arrowHeight'\n \| 'arrowPadding'\n \| 'arrowRef'\n \| 'placement'\n \| 'offsetByMainAxis'\n \| 'offsetByCrossAxis'\n \| 'shown'\n \| 'children'\n \| 'onPlacementChange'\n \| 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n TooltipBaseProps,\n 'arrowProps' \| 'closeIconLabel' \| 'onCloseIconClick'\n>;\n\ntype AllowedFloatingArrowProps = {\n /*\n Сдвиг стрелки относительно текущих координат.\n /\n arrowOffset?: FloatingArrowProps['offset'];\n /\n Включает абсолютное смещение по `arrowOffset`.\n /\n isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n extends AllowedFloatingComponentProps,\n AllowedTooltipBaseProps,\n AllowedFloatingArrowProps {\n /\n Скрывает стрелку, указывающую на якорный элемент.\n /\n disableArrow?: boolean;\n /\n Callback, который вызывается при клике по любому месту в пределах экрана.\n /\n onClose?: (this: void) => void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n id: idProp,\n children,\n shown: shownProp = true,\n arrowPadding = DEFAULT_ARROW_PADDING,\n arrowHeight = DEFAULT_ARROW_HEIGHT,\n offsetByMainAxis = 0,\n offsetByCrossAxis = 0,\n arrowOffset = 0,\n isStaticArrowOffset = false,\n onClose,\n placement: placementProp = 'bottom-start',\n maxWidth = TOOLTIP_MAX_WIDTH,\n style: styleProp,\n getRootRef,\n disableArrow = false,\n onPlacementChange,\n disableFlipMiddleware = false,\n ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\n const generatedId = React.useId();\n const tooltipId = idProp \|\| generatedId;\n const { entering } = useNavTransition();\n\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement \| null>(null);\n const [positionStrategy, setPositionStrategy] = React.useState<'fixed' \| 'absolute'>('absolute');\n const shown = shownProp && tooltipContainer && !entering;\n\n const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n placement: placementProp,\n offsetByMainAxis,\n offsetByCrossAxis,\n arrowRef,\n arrow: !disableArrow,\n arrowHeight,\n arrowPadding,\n disableFlipMiddleware,\n });\n const {\n x: floatingDataX,\n y: floatingDataY,\n refs,\n placement: resolvedPlacement,\n middlewareData: { arrow: arrowCoords },\n } = useFloating({\n strategy: positionStrategy,\n placement: strictPlacement,\n middleware: middlewares,\n whileElementsMounted: autoUpdateFloatingElement,\n });\n const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n const [childRef, child] = usePatchChildren(children, {\n 'aria-describedby': shown ? tooltipId : undefined,\n });\n\n usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n let tooltip: React.ReactPortal \| null = null;\n if (shown) {\n const floatingStyle = convertFloatingDataToReactCSSProperties(\n positionStrategy,\n floatingDataX,\n floatingDataY,\n );\n\n if (styleProp) {\n Object.assign(floatingStyle, styleProp);\n }\n\n tooltip = createPortal(\n <>\n <TooltipBase\n {...restProps}\n id={tooltipId}\n getRootRef={tooltipRef}\n style={floatingStyle}\n maxWidth={maxWidth}\n arrowProps={\n disableArrow\n ? undefined\n : {\n offset: arrowOffset,\n isStaticOffset: isStaticArrowOffset,\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }\n }\n />\n <div className={styles.overlay} onClickCapture={onClose} />\n </>,\n tooltipContainer,\n );\n }\n\n useIsomorphicLayoutEffect(\n function initialize() {\n const referenceEl = childRef.current;\n if (referenceEl) {\n setTooltipContainer(\n referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties\n );\n setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n refs.setReference(referenceEl);\n }\n },\n [childRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n const multiChildren = React.Children.count(children) > 1;\n // Empty children is a noop\n const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n (multiChildren \|\| primitiveChild) &&\n warn(\n [\n 'children должен быть одним React элементом, получено',\n multiChildren && 'несколько',\n primitiveChild && JSON.stringify(children),\n ]\n .filter(Boolean)\n .join(' '),\n 'error',\n );\n\n if (refs.reference.current && !tooltipContainer) {\n throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n }\n }\n\n return (\n <React.Fragment>\n {child}\n {tooltip}\n </React.Fragment>\n );\n};\n"],"names":["React","hasReactNode","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","styles","warn","OnboardingTooltip","id","idProp","children","shown","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placement","placementProp","maxWidth","style","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","restProps","generatedId","useId","tooltipId","entering","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","middlewares","strictPlacement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","tooltip","floatingStyle","Object","assign","arrowProps","offset","isStaticOffset","coords","div","className","overlay","onClickCapture","initialize","referenceEl","current","closest","position","setReference","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/OnboardingTooltip/OnboardingTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport { createPortal } from '../../lib/createPortal';\nimport {\n autoUpdateFloatingElement,\n convertFloatingDataToReactCSSProperties,\n type FloatingComponentProps,\n useFloating,\n useFloatingMiddlewaresBootstrap,\n usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING } from '../FloatingArrow/DefaultIcon';\nimport type { FloatingArrowProps } from '../FloatingArrow/FloatingArrow';\nimport { useNavTransition } from '../NavTransitionContext/NavTransitionContext';\nimport { TOOLTIP_MAX_WIDTH, TooltipBase, type TooltipBaseProps } from '../TooltipBase/TooltipBase';\nimport { onboardingTooltipContainerAttr } from './OnboardingTooltipContainer';\nimport styles from './OnboardingTooltip.module.css';\n\nconst warn = warnOnce('OnboardingTooltip');\n\ntype AllowedFloatingComponentProps = Pick<\n FloatingComponentProps,\n \| 'arrowHeight'\n \| 'arrowPadding'\n \| 'arrowRef'\n \| 'placement'\n \| 'offsetByMainAxis'\n \| 'offsetByCrossAxis'\n \| 'shown'\n \| 'children'\n \| 'onPlacementChange'\n \| 'disableFlipMiddleware'\n>;\n\ntype AllowedTooltipBaseProps = Omit<\n TooltipBaseProps,\n 'arrowProps' \| 'closeIconLabel' \| 'onCloseIconClick'\n>;\n\ntype AllowedFloatingArrowProps = {\n /*\n Сдвиг стрелки относительно текущих координат.\n /\n arrowOffset?: FloatingArrowProps['offset'];\n /\n Включает абсолютное смещение по `arrowOffset`.\n /\n isStaticArrowOffset?: FloatingArrowProps['isStaticOffset'];\n};\n\nexport interface OnboardingTooltipProps\n extends AllowedFloatingComponentProps,\n AllowedTooltipBaseProps,\n AllowedFloatingArrowProps {\n /\n Скрывает стрелку, указывающую на якорный элемент.\n /\n disableArrow?: boolean;\n /\n Callback, который вызывается при клике по любому месту в пределах экрана.\n /\n onClose?: (this: void) => void;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Tooltip\n */\nexport const OnboardingTooltip = ({\n id: idProp,\n children,\n shown: shownProp = true,\n arrowPadding = DEFAULT_ARROW_PADDING,\n arrowHeight = DEFAULT_ARROW_HEIGHT,\n offsetByMainAxis = 0,\n offsetByCrossAxis = 0,\n arrowOffset = 0,\n isStaticArrowOffset = false,\n onClose,\n placement: placementProp = 'bottom-start',\n maxWidth = TOOLTIP_MAX_WIDTH,\n style: styleProp,\n getRootRef,\n disableArrow = false,\n onPlacementChange,\n disableFlipMiddleware = false,\n ...restProps\n}: OnboardingTooltipProps): React.ReactNode => {\n const generatedId = React.useId();\n const tooltipId = idProp \|\| generatedId;\n const { entering } = useNavTransition();\n\n const [arrowRef, setArrowRef] = React.useState<HTMLDivElement \| null>(null);\n const [tooltipContainer, setTooltipContainer] = React.useState<HTMLElement \| null>(null);\n const [positionStrategy, setPositionStrategy] = React.useState<'fixed' \| 'absolute'>('absolute');\n const shown = shownProp && tooltipContainer && !entering;\n\n const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n placement: placementProp,\n offsetByMainAxis,\n offsetByCrossAxis,\n arrowRef,\n arrow: !disableArrow,\n arrowHeight,\n arrowPadding,\n disableFlipMiddleware,\n });\n const {\n x: floatingDataX,\n y: floatingDataY,\n refs,\n placement: resolvedPlacement,\n middlewareData: { arrow: arrowCoords },\n } = useFloating({\n strategy: positionStrategy,\n placement: strictPlacement,\n middleware: middlewares,\n whileElementsMounted: autoUpdateFloatingElement,\n });\n const tooltipRef = useExternRef<HTMLDivElement>(getRootRef, refs.setFloating);\n const [childRef, child] = usePatchChildren(children, {\n 'aria-describedby': shown ? tooltipId : undefined,\n });\n\n usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n let tooltip: React.ReactPortal \| null = null;\n if (shown) {\n const floatingStyle = convertFloatingDataToReactCSSProperties(\n positionStrategy,\n floatingDataX,\n floatingDataY,\n );\n\n tooltip = createPortal(\n <>\n <TooltipBase\n {...restProps}\n id={tooltipId}\n getRootRef={tooltipRef}\n style={mergeStyle(floatingStyle, styleProp)}\n maxWidth={maxWidth}\n arrowProps={\n disableArrow\n ? undefined\n : {\n offset: arrowOffset,\n isStaticOffset: isStaticArrowOffset,\n coords: arrowCoords,\n placement: resolvedPlacement,\n getRootRef: setArrowRef,\n }\n }\n />\n <div className={styles.overlay} onClickCapture={onClose} />\n </>,\n tooltipContainer,\n );\n }\n\n useIsomorphicLayoutEffect(\n function initialize() {\n const referenceEl = childRef.current;\n if (referenceEl) {\n setTooltipContainer(\n referenceEl.closest<HTMLDivElement>(`[${onboardingTooltipContainerAttr}]`), // eslint-disable-line no-restricted-properties\n );\n setPositionStrategy(referenceEl.style.position === 'fixed' ? 'fixed' : 'absolute');\n refs.setReference(referenceEl);\n }\n },\n [childRef],\n );\n\n if (process.env.NODE_ENV === 'development') {\n const multiChildren = React.Children.count(children) > 1;\n // Empty children is a noop\n const primitiveChild = hasReactNode(children) && typeof children !== 'object';\n (multiChildren \|\| primitiveChild) &&\n warn(\n [\n 'children должен быть одним React элементом, получено',\n multiChildren && 'несколько',\n primitiveChild && JSON.stringify(children),\n ]\n .filter(Boolean)\n .join(' '),\n 'error',\n );\n\n if (refs.reference.current && !tooltipContainer) {\n throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');\n }\n }\n\n return (\n <React.Fragment>\n {child}\n {tooltip}\n </React.Fragment>\n );\n};\n"],"names":["React","hasReactNode","mergeStyle","useExternRef","usePatchChildren","createPortal","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","warnOnce","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","useNavTransition","TOOLTIP_MAX_WIDTH","TooltipBase","onboardingTooltipContainerAttr","styles","warn","OnboardingTooltip","id","idProp","children","shown","shownProp","arrowPadding","arrowHeight","offsetByMainAxis","offsetByCrossAxis","arrowOffset","isStaticArrowOffset","onClose","placement","placementProp","maxWidth","style","styleProp","getRootRef","disableArrow","onPlacementChange","disableFlipMiddleware","restProps","generatedId","useId","tooltipId","entering","arrowRef","setArrowRef","useState","tooltipContainer","setTooltipContainer","positionStrategy","setPositionStrategy","middlewares","strictPlacement","arrow","x","floatingDataX","y","floatingDataY","refs","resolvedPlacement","middlewareData","arrowCoords","strategy","middleware","whileElementsMounted","tooltipRef","setFloating","childRef","child","undefined","tooltip","floatingStyle","arrowProps","offset","isStaticOffset","coords","div","className","overlay","onClickCapture","initialize","referenceEl","current","closest","position","setReference","process","env","NODE_ENV","multiChildren","Children","count","primitiveChild","JSON","stringify","filter","Boolean","join","reference","Error","Fragment"],"mappings":"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"}

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js CHANGED Viewed

@@ -32,7 +32,7 @@ const ButtonTypography = ({ primary, children })=>{
 const warn = warnOnce('PanelHeaderButton');
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
- */ export const PanelHeaderButton = ({ children, primary = false, label, className, ...restProps })=>{
+ */ export const PanelHeaderButton = ({ children, primary = false, label, ...restProps })=>{
     const isPrimitive = isPrimitiveReactNode(children);
     const isPrimitiveLabel = isPrimitiveReactNode(label);
     const platform = usePlatform();
@@ -74,7 +74,7 @@ const warn = warnOnce('PanelHeaderButton');
         hoverMode: hoverMode,
         activeEffectDelay: 200,
         activeMode: activeMode,
-        className: classNames(styles.host, platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, onlyPrimitive && styles.primitive, !isPrimitive && !isPrimitiveLabel && styles.notPrimitive, className),
+        baseClassName: classNames(styles.host, platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, onlyPrimitive && styles.primitive, !isPrimitive && !isPrimitiveLabel && styles.notPrimitive),
         children: [
             isPrimitive ? /*#__PURE__*/ _jsx(ButtonTypography, {
                 primary: primary,

package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n ios: styles.ios,\n android: styles.android,\n vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n primary?: boolean;\n // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n const platform = usePlatform();\n\n if (platform === 'ios') {\n return (\n <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n {children}\n </Title>\n );\n }\n\n return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/*\n @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n /\nexport const PanelHeaderButton = ({\n children,\n primary = false,\n label,\n ~~className,\n~~ ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n const isPrimitive = isPrimitiveReactNode(children);\n const isPrimitiveLabel = isPrimitiveReactNode(label);\n const platform = usePlatform();\n\n let hoverMode;\n let activeMode;\n\n switch (platform) {\n case 'ios':\n hoverMode = 'background';\n activeMode = 'opacity';\n break;\n case 'vkcom':\n hoverMode = styles.hover;\n activeMode = styles.active;\n break;\n default:\n hoverMode = 'background';\n activeMode = 'background';\n }\n\n if (process.env.NODE_ENV === 'development') {\n / istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n const elements = [label, children].filter((item) => !!item);\n\n const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n hoverMode={hoverMode}\n activeEffectDelay={200}\n activeMode={activeMode}\n ~~className~~={classNames(\n styles.host,\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n onlyPrimitive && styles.primitive,\n !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n ~~className,\n~~ )}\n >\n {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n {isPrimitiveLabel ? (\n <ButtonTypography primary={primary} className={styles.label}>\n {label}\n </ButtonTypography>\n ) : (\n label\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","~~className","~~restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","host","hasOwnProperty","primitive","notPrimitive"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,~~EACLC~~,~~SAAS,EACT,~~GAAGC,WACoB;IACvB,MAAMC,~~cAAc1B~~,qBAAqBe;IACzC,~~MAAMY~~,~~mBAAmB3B~~,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,~~IAAI2B~~;IACJ,IAAIC;IAEJ,~~OAAQb~~;QACN,KAAK;~~YACHY~~,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,~~YAAYpB~~,~~OAAOsB~~,KAAK;YACxBD,~~aAAarB~~,~~OAAOuB~~,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,~~eAAejC~~,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,~~GAAGE~~,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;~~YACjBd~~,KAAKlB,~~gBAAgBiC~~,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;~~QAACf~~;QAAOR;KAAS,~~CAACwB~~,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,~~KAAK1C~~,~~qBAAqBsC~~,QAAQ,CAAC,EAAE;IAE/E,qBACE,~~MAACjC~~;QACCY,~~WAAWQ~~,UAAUY,IAAI,GAAG,MAAM;QACjC,GAAGZ,SAAS;QACbG,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;~~QACZL~~,~~WAAWzB~~,~~WACTS~~,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,~~EAC9B8B~~,~~iBAAiBjC~~,OAAOsC,SAAS,EACjC,~~CAACpB~~,eAAe,CAACC,~~oBAAoBnB~~,OAAOuC,YAAY~~,EACxDvB~~;;~~YAGDE~~,4BAAc,~~KAACb~~;gBAAiBC,SAASA;0BAAUC;iBAA+BA;~~YAClFY~~,iCACC,~~KAACd~~;gBAAiBC,SAASA;~~gBAASU~~,~~WAAWhB~~,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n ios: styles.ios,\n android: styles.android,\n vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n primary?: boolean;\n // TODO [>=7]: добавить св-во `indicator`, чтобы разграничить кейсы\n label?: React.ReactNode;\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n const platform = usePlatform();\n\n if (platform === 'ios') {\n return (\n <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n {children}\n </Title>\n );\n }\n\n return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/*\n @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n /\nexport const PanelHeaderButton = ({\n children,\n primary = false,\n label,\n ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n const isPrimitive = isPrimitiveReactNode(children);\n const isPrimitiveLabel = isPrimitiveReactNode(label);\n const platform = usePlatform();\n\n let hoverMode;\n let activeMode;\n\n switch (platform) {\n case 'ios':\n hoverMode = 'background';\n activeMode = 'opacity';\n break;\n case 'vkcom':\n hoverMode = styles.hover;\n activeMode = styles.active;\n break;\n default:\n hoverMode = 'background';\n activeMode = 'background';\n }\n\n if (process.env.NODE_ENV === 'development') {\n / istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n const isAccessible = hasAccessibleName({\n children: [children, label],\n ...restProps,\n });\n\n if (!isAccessible) {\n warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n }\n }\n const elements = [label, children].filter((item) => !!item);\n\n const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n hoverMode={hoverMode}\n activeEffectDelay={200}\n activeMode={activeMode}\n baseClassName={classNames(\n styles.host,\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n onlyPrimitive && styles.primitive,\n !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n )}\n >\n {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n {isPrimitiveLabel ? (\n <ButtonTypography primary={primary} className={styles.label}>\n {label}\n </ButtonTypography>\n ) : (\n label\n )}\n </Tappable>\n );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","host","hasOwnProperty","primitive","notPrimitive","className"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAYA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACL,GAAGC,WACoB;IACvB,MAAMC,cAAczB,qBAAqBe;IACzC,MAAMW,mBAAmB1B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYnB,OAAOqB,KAAK;YACxBD,aAAapB,OAAOsB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAehC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGC,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBb,KAAKlB,gBAAgBgC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACd;QAAOR;KAAS,CAACuB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKzC,qBAAqBqC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAChC;QACCY,WAAWO,UAAUY,IAAI,GAAG,MAAM;QACjC,GAAGZ,SAAS;QACbG,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;QACZe,eAAe5C,WACbS,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B6B,iBAAiBhC,OAAOsC,SAAS,EACjC,CAACrB,eAAe,CAACC,oBAAoBlB,OAAOuC,YAAY;;YAGzDtB,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAASkC,WAAWxC,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}

package/dist/cssm/components/Popper/Popper.js CHANGED Viewed

@@ -15,7 +15,7 @@ import styles from "./Popper.module.css";
 placement: placementProp = 'bottom-start', sameWidth, hideWhenReferenceHidden, offsetByMainAxis = 8, offsetByCrossAxis = 0, arrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, customMiddlewares, disableFlipMiddleware = false, // UseFloatingProps
 autoUpdateOnTargetResize = false, // ArrowProps
 arrowProps, ArrowIcon = DefaultIcon, // rest
-targetRef, getRootRef, children, usePortal = true, style: styleProp, onPlacementChange, ...restProps })=>{
+targetRef, getRootRef, children, usePortal = true, onPlacementChange, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({
         placement: placementProp,
@@ -52,10 +52,7 @@ targetRef, getRootRef, children, usePortal = true, style: styleProp, onPlacement
         ...restProps,
         baseClassName: styles.host,
         getRootRef: handleRootRef,
-        style: {
-            ...convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined, middlewareData),
-            ...styleProp
-        },
+        baseStyle: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined, middlewareData),
         children: [
             arrow && /*#__PURE__*/ _jsx(FloatingArrow, {
                 ...arrowProps,