npm - @vkontakte/vkui - Versions diffs - 5.2.0 → 5.2.2 - Mend

@vkontakte/vkui 5.2.0 → 5.2.2

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 (1184) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBase.js","names":["ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","classNames","styles","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { type ImageBaseBadgeProps, ~~ImageBaseBadge~~ } from './ImageBaseBadge/ImageBaseBadge';\nimport { type ImageBaseOverlayProps, ~~ImageBaseOverlay~~ } from './ImageBaseOverlay/ImageBaseOverlay';\nimport ~~type~~ { ~~ImageBaseExpectedIconProps,~~ ~~ImageBaseSize, ImageBaseContextProps~~ } from './~~types~~';\nimport { ~~ImageBaseContext~~ } from './~~context~~';\nimport { ~~validateSize~~, ~~validateFallbackIcon~~ } 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\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\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?: ImageBaseSize \| number;\n /\n Включает или отключает обводку.\n /\n withBorder?: 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/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n getRef,\n size = 24,\n width,\n height,\n style,\n className,\n getRootRef,\n withBorder = true,\n 'fallbackIcon': fallbackIconProp,\n children,\n 'aria-label': ariaLabel,\n onClick,\n onLoad,\n onError,\n ...restProps\n}: ImageBaseProps) => {\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 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 return (\n <ImageBaseContext.Provider value={{ size }}>\n <div\n {...restProps}\n ref={getRootRef}\n style={{ ...style, width: size, height: size }}\n className={classNames(\n className,\n styles['ImageBase'],\n styles[`ImageBase--size-${size as ImageBaseSize}`],\n withBorder && styles['ImageBase--withBorder'],\n loaded && styles['ImageBase--loaded'],\n )}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {hasSrc && (\n <img\n ref={getRef}\n alt={alt}\n className={styles['ImageBase__img']}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n height={height}\n onLoad={handleImageLoad}\n onError={handleImageError}\n />\n )}\n {fallbackIcon && (\n <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n )}\n {children}\n </div>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAEA;~~AACA;~~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"}
1	+ {"version":3,"file":"ImageBase.js","names":["ImageBase","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","getRef","size","width","height","style","className","getRootRef","withBorder","fallbackIconProp","children","ariaLabel","onClick","onLoad","onError","restProps","React","useState","loaded","setLoaded","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","fallbackIcon","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","value","handleImageLoad","event","handleImageError","classNames","styles","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRef, HasRootRef } from '../../types';\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\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\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?: ImageBaseSize \| number;\n /\n Включает или отключает обводку.\n /\n withBorder?: 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/\n @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n getRef,\n size = 24,\n width,\n height,\n style,\n className,\n getRootRef,\n withBorder = true,\n 'fallbackIcon': fallbackIconProp,\n children,\n 'aria-label': ariaLabel,\n onClick,\n onLoad,\n onError,\n ...restProps\n}: ImageBaseProps) => {\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 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 return (\n <ImageBaseContext.Provider value={{ size }}>\n <div\n {...restProps}\n ref={getRootRef}\n style={{ ...style, width: size, height: size }}\n className={classNames(\n className,\n styles['ImageBase'],\n styles[`ImageBase--size-${size as ImageBaseSize}`],\n withBorder && styles['ImageBase--withBorder'],\n loaded && styles['ImageBase--loaded'],\n )}\n role={hasSrc ? 'img' : 'presentation'}\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {hasSrc && (\n <img\n ref={getRef}\n alt={alt}\n className={styles['ImageBase__img']}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={width}\n height={height}\n onLoad={handleImageLoad}\n onError={handleImageError}\n />\n )}\n {fallbackIcon && (\n <div className={classNames(styles['ImageBase__fallback'])}>{fallbackIcon}</div>\n )}\n {children}\n </div>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.Badge = ImageBaseBadge;\n\nImageBase.Overlay = ImageBaseOverlay;\n"],"mappings":"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"}

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js CHANGED Viewed

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _useAppearance = require("../../../hooks/useAppearance");
 var _useAdaptivityHasPointer = require("../../../hooks/useAdaptivityHasPointer");
+var _useAppearance = require("../../../hooks/useAppearance");
 var _Tappable = require("../../Tappable/Tappable");
 var _context = require("../context");
 var _validators = require("../validators");

package/dist/cjs/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBaseOverlay.js","names":["ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","React","useContext","ImageBaseContext","size","validateOverlayIcon","name","value","classNames","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~useAppearance~~ } from '../../../hooks/~~useAppearance~~';\nimport { ~~useAdaptivityHasPointer~~ } from '../../../hooks/~~useAdaptivityHasPointer~~';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n /*\n Задаёт тему оформления.\n \n > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n /\n theme?: 'dark' \| 'light';\n /\n Определяет каким образом должен показываться оверлей.\n \n - `\"on-hover\"` – на наведение указателя мыши.\n * - `\"always\"` – всегда показывать.\n \n > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n /\n visibility?: 'on-hover' \| 'always';\n /\n Принимает иконку.\n \n \n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n /\n children: React.ReactElement<ImageBaseExpectedIconProps>;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/\n Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n className,\n theme: themeProp,\n visibility: visibilityProp,\n children,\n onClick,\n ...restProps\n}: ImageBaseOverlayProps) => {\n const appearance = useAppearance();\n const hasPointer = useAdaptivityHasPointer();\n const theme = themeProp ?? appearance;\n const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n if (process.env.NODE_ENV === 'development') {\n if (children) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { size } = React.useContext(ImageBaseContext);\n validateOverlayIcon(size, { name: 'children', value: children });\n }\n }\n\n return (\n <Tappable\n {...restProps}\n type=\"button\"\n Component=\"button\"\n className={classNames(\n styles['ImageBaseOverlay'],\n visibility === 'always' && styles['ImageBaseOverlay--visible'],\n theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n className,\n )}\n hasHover={visibility === 'on-hover'}\n hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n hasActive={false}\n onClick={onClick}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAoCpD;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAClC,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAC5C,IAAMT,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKO,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIT,QAAQ,EAAE;MACZ;MACA,wBAAiBU,KAAK,CAACC,UAAU,CAACC,yBAAgB,CAAC;QAA3CC,IAAI,qBAAJA,IAAI;MACZ,IAAAC,+BAAmB,EAACD,IAAI,EAAE;QAAEE,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEhB;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,kBAAQ,6BACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,IAAAe,gBAAU,0BAEnBlB,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EAAEA,UAAU,KAAK,UAAU,qCAAyCmB,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEjB;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC;AAAC"}
1	+ {"version":3,"file":"ImageBaseOverlay.js","names":["ImageBaseOverlay","className","themeProp","theme","visibilityProp","visibility","children","onClick","restProps","appearance","useAppearance","hasPointer","useAdaptivityHasPointer","process","env","NODE_ENV","React","useContext","ImageBaseContext","size","validateOverlayIcon","name","value","classNames","undefined"],"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { ImageBaseContext } from '../context';\nimport type { ImageBaseExpectedIconProps } from '../types';\nimport { validateOverlayIcon } from '../validators';\nimport styles from './ImageBaseOverlay.module.css';\n\nexport interface ImageBaseOverlayProps extends React.AriaAttributes {\n /*\n Задаёт тему оформления.\n \n > По умолчанию берётся из параметра `appearance` в `ConfigProvider`.\n /\n theme?: 'dark' \| 'light';\n /\n Определяет каким образом должен показываться оверлей.\n \n - `\"on-hover\"` – на наведение указателя мыши.\n * - `\"always\"` – всегда показывать.\n \n > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.\n /\n visibility?: 'on-hover' \| 'always';\n /\n Принимает иконку.\n \n \n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getOverlayIconSizeByImageBaseSize()`.\n \n > Предпочтительней использовать иконки из `@vkontakte/icons`.\n \n > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n /\n children: React.ReactElement<ImageBaseExpectedIconProps>;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n}\n\n/\n Интерактивный оверлей над картинкой.\n */\nexport const ImageBaseOverlay = ({\n className,\n theme: themeProp,\n visibility: visibilityProp,\n children,\n onClick,\n ...restProps\n}: ImageBaseOverlayProps) => {\n const appearance = useAppearance();\n const hasPointer = useAdaptivityHasPointer();\n const theme = themeProp ?? appearance;\n const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n if (process.env.NODE_ENV === 'development') {\n if (children) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { size } = React.useContext(ImageBaseContext);\n validateOverlayIcon(size, { name: 'children', value: children });\n }\n }\n\n return (\n <Tappable\n {...restProps}\n type=\"button\"\n Component=\"button\"\n className={classNames(\n styles['ImageBaseOverlay'],\n visibility === 'always' && styles['ImageBaseOverlay--visible'],\n theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n className,\n )}\n hasHover={visibility === 'on-hover'}\n hoverMode={visibility === 'on-hover' ? styles['ImageBaseOverlay--visible'] : undefined}\n focusVisibleMode={styles['ImageBaseOverlay--focus-visible']}\n hasActive={false}\n onClick={onClick}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAoCpD;AACA;AACA;AACO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAOA;EAAA,IAN3BC,SAAS,QAATA,SAAS;IACFC,SAAS,QAAhBC,KAAK;IACOC,cAAc,QAA1BC,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,UAAU,GAAG,IAAAC,4BAAa,GAAE;EAClC,IAAMC,UAAU,GAAG,IAAAC,gDAAuB,GAAE;EAC5C,IAAMT,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIO,UAAU;EACrC,IAAMJ,UAAU,GAAGD,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAKO,UAAU,GAAG,UAAU,GAAG,QAAS;EAEzE,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIT,QAAQ,EAAE;MACZ;MACA,wBAAiBU,KAAK,CAACC,UAAU,CAACC,yBAAgB,CAAC;QAA3CC,IAAI,qBAAJA,IAAI;MACZ,IAAAC,+BAAmB,EAACD,IAAI,EAAE;QAAEE,IAAI,EAAE,UAAU;QAAEC,KAAK,EAAEhB;MAAS,CAAC,CAAC;IAClE;EACF;EAEA,oBACE,oBAAC,kBAAQ,6BACHE,SAAS;IACb,IAAI,EAAC,QAAQ;IACb,SAAS,EAAC,QAAQ;IAClB,SAAS,EAAE,IAAAe,gBAAU,0BAEnBlB,UAAU,KAAK,QAAQ,mCAAuC,EAC9DF,KAAK,KAAK,OAAO,uCAA2C,EAC5DA,KAAK,KAAK,MAAM,sCAA0C,EAC1DF,SAAS,CACT;IACF,QAAQ,EAAEI,UAAU,KAAK,UAAW;IACpC,SAAS,EAAEA,UAAU,KAAK,UAAU,qCAAyCmB,SAAU;IACvF,gBAAgB,uCAA4C;IAC5D,SAAS,EAAE,KAAM;IACjB,OAAO,EAAEjB;EAAQ,IAEhBD,QAAQ,CACA;AAEf,CAAC;AAAC"}

package/dist/cjs/components/ImageBase/validators.js CHANGED Viewed

@@ -8,8 +8,8 @@ exports.validateFallbackIcon = validateFallbackIcon;
 exports.validateOverlayIcon = validateOverlayIcon;
 exports.validateSize = validateSize;
 var _warnOnce = require("../../lib/warnOnce");
-var _types = require("./types");
 var _helpers = require("./helpers");
+var _types = require("./types");
 /**
  * Пример,
  *

package/dist/cjs/components/ImageBase/validators.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validators.js","names":["parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","warnOnce","validateFallbackIcon","getFallbackIconSizeByImageBaseSize","mapOfExpectedSize","Set","imageBaseSizes","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","getBadgeIconSizeByImageBaseSize","warnImageBaseOverlay","validateOverlayIcon","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport { ~~imageBaseSizes } from './types';\nimport {~~\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\n/*\n Пример,\n \n Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number \| null {\n if (typeof displayName !== 'string') {\n return null;\n }\n const rawSize = displayName\n .replace(/\\d+$/g, '') // удаляем цифры в конце\n .replace(/\\D/g, ''); // удаляем всё, что не является числом\n const size = Number(rawSize);\n return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number \| null {\n if (typeof width !== 'string' && typeof width !== 'number') {\n return null;\n }\n const size = Number(width);\n return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string \| null {\n return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number \| string \| null {\n return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number \| null {\n const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n name: string;\n value: JSX.Element;\n}\n\ninterface SelectorFn {\n (imageSize: number): number;\n MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n imageSize: number,\n iconProp: IconProp,\n selectorFn: SelectorFn,\n logger: ReturnType<typeof warnOnce>,\n) {\n const iconSize = getIconSizeByElement(iconProp.value);\n\n if (iconSize === null) {\n return;\n }\n\n const result = selectorFn(imageSize);\n\n if (result === iconSize \|\| (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n return;\n }\n\n const iconName = getElementDisplayName(iconProp.value);\n const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n logger(\n `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n 'log',\n );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n return validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getFallbackIconSizeByImageBaseSize,\n warnImageBase,\n );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n if (imageSize > maxSize \|\| mapOfExpectedSize.has(imageSize)) {\n return;\n }\n warnImageBase(\n `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n ' \| ',\n )}`,\n 'log',\n );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n if (imageSize < 24 && iconProp) {\n return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n }\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getBadgeIconSizeByImageBaseSize,\n warnImageBaseBadge,\n );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getOverlayIconSizeByImageBaseSize,\n warnImageBaseOverlay,\n );\n}\n"],"mappings":";;;;;;;;;AAAA;AACA;~~AACA~~;~~AAMA~~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"}
1	+ {"version":3,"file":"validators.js","names":["parseIconSizeByDisplayName","displayName","rawSize","replace","size","Number","parseIconSizeByWidthProp","width","getElementDisplayName","element","type","getElementWidthProp","props","getIconSizeByElement","sizeByDisplayName","sizeByWidth","validateIconComponentSizeByImageSize","imageSize","iconProp","selectorFn","logger","iconSize","value","result","MAX_SIZE","iconName","propMessage","name","warnImageBase","warnOnce","validateFallbackIcon","getFallbackIconSizeByImageBaseSize","mapOfExpectedSize","Set","imageBaseSizes","arrayOfSizes","Object","keys","map","str","maxSize","reduce","validateSize","has","join","warnImageBaseBadge","validateBadgeIcon","getBadgeIconSizeByImageBaseSize","warnImageBaseOverlay","validateOverlayIcon","getOverlayIconSizeByImageBaseSize"],"sources":["../../../../src/components/ImageBase/validators.ts"],"sourcesContent":["import { warnOnce } from '../../lib/warnOnce';\nimport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\nimport { imageBaseSizes } from './types';\n\n/*\n Пример,\n \n Icon28User -> 28\n * Icon12Circle1 -> 12\n * Icon12Circle2 -> 12\n */\nfunction parseIconSizeByDisplayName(displayName: unknown): number \| null {\n if (typeof displayName !== 'string') {\n return null;\n }\n const rawSize = displayName\n .replace(/\\d+$/g, '') // удаляем цифры в конце\n .replace(/\\D/g, ''); // удаляем всё, что не является числом\n const size = Number(rawSize);\n return size > 0 ? size : null;\n}\n\nfunction parseIconSizeByWidthProp(width: unknown): number \| null {\n if (typeof width !== 'string' && typeof width !== 'number') {\n return null;\n }\n const size = Number(width);\n return size > 0 ? size : null;\n}\n\nfunction getElementDisplayName(element: JSX.Element): string \| null {\n return element.type.displayName ?? null;\n}\n\nfunction getElementWidthProp(element: JSX.Element): number \| string \| null {\n return element.props.width ?? null;\n}\n\nfunction getIconSizeByElement(element: JSX.Element): number \| null {\n const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));\n const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));\n return sizeByWidth ? sizeByWidth : sizeByDisplayName;\n}\n\ninterface IconProp {\n name: string;\n value: JSX.Element;\n}\n\ninterface SelectorFn {\n (imageSize: number): number;\n MAX_SIZE: number;\n}\n\nfunction validateIconComponentSizeByImageSize(\n imageSize: number,\n iconProp: IconProp,\n selectorFn: SelectorFn,\n logger: ReturnType<typeof warnOnce>,\n) {\n const iconSize = getIconSizeByElement(iconProp.value);\n\n if (iconSize === null) {\n return;\n }\n\n const result = selectorFn(imageSize);\n\n if (result === iconSize \|\| (result === selectorFn.MAX_SIZE && iconSize >= result)) {\n return;\n }\n\n const iconName = getElementDisplayName(iconProp.value);\n const propMessage = iconName ? `${iconProp.name}={<${iconName} />}` : iconProp.name;\n\n logger(\n `Размер \\`${propMessage}\\` не соответствует дизайн-системе. Для \\`size={${imageSize}}\\` размер иконки для \\`${iconProp.name}\\` должен соответствовать <Icon${result}<name> />. Если такого размера нет, то используйте <${iconName} width={${result}} height={${result}} />`,\n 'log',\n );\n}\n\nconst warnImageBase = warnOnce('ImageBase');\n\nexport function validateFallbackIcon(imageSize: number, iconProp: IconProp) {\n return validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getFallbackIconSizeByImageBaseSize,\n warnImageBase,\n );\n}\n\nconst mapOfExpectedSize = new Set<number>(imageBaseSizes);\n\nconst arrayOfSizes = Object.keys(mapOfExpectedSize).map((str) => Number(str));\nconst maxSize = arrayOfSizes.reduce((maxSize, size) => (size > maxSize ? size : maxSize), 0);\n\nexport function validateSize(imageSize: number): void {\n if (imageSize > maxSize \|\| mapOfExpectedSize.has(imageSize)) {\n return;\n }\n warnImageBase(\n `\\`size={${imageSize}}\\` не соответствует дизайн-системе. Пожалуйста, используйте один из следующих вариантов: ${arrayOfSizes.join(\n ' \| ',\n )}`,\n 'log',\n );\n}\n\nconst warnImageBaseBadge = warnOnce('ImageBase.Badge');\n\nexport function validateBadgeIcon(imageSize: number, iconProp: IconProp): void {\n if (imageSize < 24 && iconProp) {\n return warnImageBaseBadge('Не используйте бейдж при `size < 24`.', 'log');\n }\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getBadgeIconSizeByImageBaseSize,\n warnImageBaseBadge,\n );\n}\n\nconst warnImageBaseOverlay = warnOnce('ImageBase.Overlay');\n\nexport function validateOverlayIcon(imageSize: number, iconProp: IconProp): void {\n validateIconComponentSizeByImageSize(\n imageSize,\n iconProp,\n getOverlayIconSizeByImageBaseSize,\n warnImageBaseOverlay,\n );\n}\n"],"mappings":";;;;;;;;;AAAA;AACA;AAKA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,0BAA0B,CAACC,WAAoB,EAAiB;EACvE,IAAI,OAAOA,WAAW,KAAK,QAAQ,EAAE;IACnC,OAAO,IAAI;EACb;EACA,IAAMC,OAAO,GAAGD,WAAW,CACxBE,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;EAAA,CACrBA,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;EACvB,IAAMC,IAAI,GAAGC,MAAM,CAACH,OAAO,CAAC;EAC5B,OAAOE,IAAI,GAAG,CAAC,GAAGA,IAAI,GAAG,IAAI;AAC/B;AAEA,SAASE,wBAAwB,CAACC,KAAc,EAAiB;EAC/D,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC1D,OAAO,IAAI;EACb;EACA,IAAMH,IAAI,GAAGC,MAAM,CAACE,KAAK,CAAC;EAC1B,OAAOH,IAAI,GAAG,CAAC,GAAGA,IAAI,GAAG,IAAI;AAC/B;AAEA,SAASI,qBAAqB,CAACC,OAAoB,EAAiB;EAAA;EAClE,gCAAOA,OAAO,CAACC,IAAI,CAACT,WAAW,yEAAI,IAAI;AACzC;AAEA,SAASU,mBAAmB,CAACF,OAAoB,EAA0B;EAAA;EACzE,+BAAOA,OAAO,CAACG,KAAK,CAACL,KAAK,uEAAI,IAAI;AACpC;AAEA,SAASM,oBAAoB,CAACJ,OAAoB,EAAiB;EACjE,IAAMK,iBAAiB,GAAGd,0BAA0B,CAACQ,qBAAqB,CAACC,OAAO,CAAC,CAAC;EACpF,IAAMM,WAAW,GAAGT,wBAAwB,CAACK,mBAAmB,CAACF,OAAO,CAAC,CAAC;EAC1E,OAAOM,WAAW,GAAGA,WAAW,GAAGD,iBAAiB;AACtD;AAYA,SAASE,oCAAoC,CAC3CC,SAAiB,EACjBC,QAAkB,EAClBC,UAAsB,EACtBC,MAAmC,EACnC;EACA,IAAMC,QAAQ,GAAGR,oBAAoB,CAACK,QAAQ,CAACI,KAAK,CAAC;EAErD,IAAID,QAAQ,KAAK,IAAI,EAAE;IACrB;EACF;EAEA,IAAME,MAAM,GAAGJ,UAAU,CAACF,SAAS,CAAC;EAEpC,IAAIM,MAAM,KAAKF,QAAQ,IAAKE,MAAM,KAAKJ,UAAU,CAACK,QAAQ,IAAIH,QAAQ,IAAIE,MAAO,EAAE;IACjF;EACF;EAEA,IAAME,QAAQ,GAAGjB,qBAAqB,CAACU,QAAQ,CAACI,KAAK,CAAC;EACtD,IAAMI,WAAW,GAAGD,QAAQ,aAAMP,QAAQ,CAACS,IAAI,gBAAMF,QAAQ,YAASP,QAAQ,CAACS,IAAI;EAEnFP,MAAM,iDACQM,WAAW,sNAAmDT,SAAS,8GAA2BC,QAAQ,CAACS,IAAI,oJAAkCJ,MAAM,sOAAuDE,QAAQ,qBAAWF,MAAM,uBAAaA,MAAM,WACtQ,KAAK,CACN;AACH;AAEA,IAAMK,aAAa,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;AAEpC,SAASC,oBAAoB,CAACb,SAAiB,EAAEC,QAAkB,EAAE;EAC1E,OAAOF,oCAAoC,CACzCC,SAAS,EACTC,QAAQ,EACRa,2CAAkC,EAClCH,aAAa,CACd;AACH;AAEA,IAAMI,iBAAiB,GAAG,IAAIC,GAAG,CAASC,qBAAc,CAAC;AAEzD,IAAMC,YAAY,GAAGC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,GAAG,CAAC,UAACC,GAAG;EAAA,OAAKlC,MAAM,CAACkC,GAAG,CAAC;AAAA,EAAC;AAC7E,IAAMC,OAAO,GAAGL,YAAY,CAACM,MAAM,CAAC,UAACD,OAAO,EAAEpC,IAAI;EAAA,OAAMA,IAAI,GAAGoC,OAAO,GAAGpC,IAAI,GAAGoC,OAAO;AAAA,CAAC,EAAE,CAAC,CAAC;AAErF,SAASE,YAAY,CAACzB,SAAiB,EAAQ;EACpD,IAAIA,SAAS,GAAGuB,OAAO,IAAIR,iBAAiB,CAACW,GAAG,CAAC1B,SAAS,CAAC,EAAE;IAC3D;EACF;EACAW,aAAa,kBACAX,SAAS,mdAA6FkB,YAAY,CAACS,IAAI,CAChI,KAAK,CACN,GACD,KAAK,CACN;AACH;AAEA,IAAMC,kBAAkB,GAAG,IAAAhB,kBAAQ,EAAC,iBAAiB,CAAC;AAE/C,SAASiB,iBAAiB,CAAC7B,SAAiB,EAAEC,QAAkB,EAAQ;EAC7E,IAAID,SAAS,GAAG,EAAE,IAAIC,QAAQ,EAAE;IAC9B,OAAO2B,kBAAkB,CAAC,uCAAuC,EAAE,KAAK,CAAC;EAC3E;EACA7B,oCAAoC,CAClCC,SAAS,EACTC,QAAQ,EACR6B,wCAA+B,EAC/BF,kBAAkB,CACnB;AACH;AAEA,IAAMG,oBAAoB,GAAG,IAAAnB,kBAAQ,EAAC,mBAAmB,CAAC;AAEnD,SAASoB,mBAAmB,CAAChC,SAAiB,EAAEC,QAAkB,EAAQ;EAC/EF,oCAAoC,CAClCC,SAAS,EACTC,QAAQ,EACRgC,0CAAiC,EACjCF,oBAAoB,CACrB;AACH"}

package/dist/cjs/components/InfoRow/InfoRow.js CHANGED Viewed

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _Subhead = require("../Typography/Subhead/Subhead");
 var _Headline = require("../Typography/Headline/Headline");
+var _Subhead = require("../Typography/Subhead/Subhead");
 var _excluded = ["header", "children", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow

package/dist/cjs/components/InfoRow/InfoRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InfoRow.js","names":["InfoRow","header","children","className","restProps","classNames","hasReactNode"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { ~~Subhead~~ } from '../Typography/~~Subhead~~/~~Subhead~~';\nimport { ~~Headline~~ } from '../Typography/~~Headline~~/~~Headline~~';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n header: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n <Headline\n {...restProps}\n Component=\"span\"\n className={classNames(styles['InfoRow'], className)}\n weight=\"3\"\n >\n {hasReactNode(header) && (\n <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n {header}\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;~~AAA2D~~;~~AAO3D~~;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,kBAAQ,6BACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAE,IAAAC,gBAAU,iBAAoBF,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAET,IAAAG,kBAAY,EAACL,MAAM,CAAC,iBACnB,oBAAC,gBAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ;AAAC"}
1	+ {"version":3,"file":"InfoRow.js","names":["InfoRow","header","children","className","restProps","classNames","hasReactNode"],"sources":["../../../../src/components/InfoRow/InfoRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './InfoRow.module.css';\n\nexport interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {\n header: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/InfoRow\n */\nexport const InfoRow = ({ header, children, className, ...restProps }: InfoRowProps) => (\n <Headline\n {...restProps}\n Component=\"span\"\n className={classNames(styles['InfoRow'], className)}\n weight=\"3\"\n >\n {hasReactNode(header) && (\n <Subhead Component=\"span\" className={styles['InfoRow__header']}>\n {header}\n </Subhead>\n )}\n {children}\n </Headline>\n);\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAwD;AAOxD;AACA;AACA;AACO,IAAMA,OAAO,GAAG,SAAVA,OAAO;EAAA,IAAMC,MAAM,QAANA,MAAM;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAAA,oBACjE,oBAAC,kBAAQ,6BACHA,SAAS;IACb,SAAS,EAAC,MAAM;IAChB,SAAS,EAAE,IAAAC,gBAAU,iBAAoBF,SAAS,CAAE;IACpD,MAAM,EAAC;EAAG,IAET,IAAAG,kBAAY,EAACL,MAAM,CAAC,iBACnB,oBAAC,gBAAO;IAAC,SAAS,EAAC,MAAM;IAAC,SAAS;EAA4B,GAC5DA,MAAM,CAEV,EACAC,QAAQ,CACA;AAAA,CACZ;AAAC"}

package/dist/cjs/components/Input/Input.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { FormFieldProps } from '../FormField/FormField';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
-export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, ...restProps }: InputProps) => JSX.Element;
+export declare const Input: ({ type, align, getRef, className, getRootRef, style, before, after, status, mode, ...restProps }: InputProps) => JSX.Element;

package/dist/cjs/components/Input/Input.js CHANGED Viewed

@@ -8,12 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.Input = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _FormField = require("../FormField/FormField");
-var _getSizeYClassName = require("../../helpers/getSizeYClassName");
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status"];
+var _adaptivity = require("../../lib/adaptivity");
+var _FormField = require("../FormField/FormField");
+var _excluded = ["type", "align", "getRef", "className", "getRootRef", "style", "before", "after", "status", "mode"];
+var sizeYClassNames = (0, _defineProperty2.default)({
+  none: "vkuiInput--sizeY-none"
+}, _adaptivity.SizeType.COMPACT, "vkuiInput--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Input
  */
@@ -28,16 +32,19 @@ var Input = function Input(_ref) {
     before = _ref.before,
     after = _ref.after,
     status = _ref.status,
+    mode = _ref.mode,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   return /*#__PURE__*/React.createElement(_FormField.FormField, {
     style: style,
-    className: (0, _vkjs.classNames)("vkuiInput", align && styles["Input--align-".concat(align)], (0, _getSizeYClassName.getSizeYClassName)("vkuiInput", sizeY), before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
+    className: (0, _vkjs.classNames)("vkuiInput", align && styles["Input--align-".concat(align)], sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY], before && "vkuiInput--hasBefore", after && "vkuiInput--hasAfter", className),
     getRootRef: getRootRef,
     before: before,
     after: after,
     disabled: restProps.disabled,
+    mode: mode,
     status: status
   }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, restProps, {
     type: type,

package/dist/cjs/components/Input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":["Input","type","align","getRef","className","getRootRef","style","before","after","status","restProps","useAdaptivity","sizeY","classNames","styles","~~getSizeYClassName~~","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~FormField,~~ ~~FormFieldProps~~ } from '~~../FormField~~/~~FormField~~';\nimport { ~~HasAlign,~~ ~~HasRef, HasRootRef~~ } from '../../~~types~~';\nimport { ~~getSizeYClassName~~ } from '../../~~helpers/getSizeYClassName~~';\nimport { ~~useAdaptivity~~ } from '~~../../hooks~~/~~useAdaptivity~~';\nimport styles from './Input.module.css';\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n FormFieldProps {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align,\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n ...restProps\n}: InputProps) => {\n const { sizeY } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align && styles[`Input--align-${align}`],\n ~~getSizeYClassName(styles~~[~~'Input'~~]~~, sizeY)~~,\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n status={status}\n >\n <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n </FormField>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAAA;AACA;AACA;AAEA;~~AACA~~;~~AAA0D~~;~~AAU1D~~;AACA;AACA;AACO,~~IAAMA~~,KAAK,GAAG,SAARA,KAAK,~~OAWA~~;EAAA,~~qBAVhBC~~,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;~~IACHC~~,SAAS;EAEZ,~~qBAAkB~~,IAAAC,6BAAa,GAAE;~~IAAzBC~~,KAAK,~~kBAALA~~,~~KAAK~~;~~EAEb~~,oBACE,oBAAC,oBAAS;IACR,KAAK,~~EAAEN~~,KAAM;IACb,SAAS,EAAE,~~IAAAO~~,gBAAU,~~eAEnBX~~,KAAK,~~IAAIY~~,MAAM,~~wBAAiBZ~~,KAAK,EAAG,~~EACxC~~,~~IAAAa~~,~~oCAAiB~~,~~eAAkBH~~,KAAK,CAAC,~~EACzCL~~,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,~~EAAEE~~,SAAS,CAACM,QAAS;IAC7B,~~MAAM~~,EAAEP;EAAO,gBAEf,~~wDAAWC~~,SAAS;IAAE,IAAI,~~EAAET~~,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"Input.js","names":["sizeYClassNames","none","SizeType","COMPACT","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","useAdaptivity","sizeY","classNames","styles","REGULAR","disabled"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n none: styles['Input--sizeY-none'],\n [SizeType.COMPACT]: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n extends React.InputHTMLAttributes<HTMLInputElement>,\n HasRef<HTMLInputElement>,\n HasRootRef<HTMLDivElement>,\n HasAlign,\n FormFieldProps {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n type = 'text',\n align,\n getRef,\n className,\n getRootRef,\n style,\n before,\n after,\n status,\n mode,\n ...restProps\n}: InputProps) => {\n const { sizeY = 'none' } = useAdaptivity();\n\n return (\n <FormField\n style={style}\n className={classNames(\n styles['Input'],\n align && styles[`Input--align-${align}`],\n sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n before && styles['Input--hasBefore'],\n after && styles['Input--hasAfter'],\n className,\n )}\n getRootRef={getRootRef}\n before={before}\n after={after}\n disabled={restProps.disabled}\n mode={mode}\n status={status}\n >\n <input {...restProps} type={type} className={styles['Input__el']} ref={getRef} />\n </FormField>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAmE;AAGnE,IAAMA,eAAe;EACnBC,IAAI;AAA6B,GAChCC,oBAAQ,CAACC,OAAO,6BAClB;AASD;AACA;AACA;AACO,IAAMC,KAAK,GAAG,SAARA,KAAK,OAYA;EAAA,qBAXhBC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IACbC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,qBAA2B,IAAAC,6BAAa,GAAE;IAAA,sCAAlCC,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,oBACE,oBAAC,oBAAS;IACR,KAAK,EAAEP,KAAM;IACb,SAAS,EAAE,IAAAQ,gBAAU,eAEnBZ,KAAK,IAAIa,MAAM,wBAAiBb,KAAK,EAAG,EACxCW,KAAK,KAAKf,oBAAQ,CAACkB,OAAO,IAAIpB,eAAe,CAACiB,KAAK,CAAC,EACpDN,MAAM,0BAA8B,EACpCC,KAAK,yBAA6B,EAClCJ,SAAS,CACT;IACF,UAAU,EAAEC,UAAW;IACvB,MAAM,EAAEE,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEG,SAAS,CAACM,QAAS;IAC7B,IAAI,EAAEP,IAAK;IACX,MAAM,EAAED;EAAO,gBAEf,wDAAWE,SAAS;IAAE,IAAI,EAAEV,IAAK;IAAC,SAAS,iBAAsB;IAAC,GAAG,EAAEE;EAAO,GAAG,CACvE;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/InputLike/InputLike.js CHANGED Viewed

@@ -9,9 +9,9 @@ exports.InputLike = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
 var _callMultiple = require("../../lib/callMultiple");
 var _utils = require("../../lib/utils");
-var _vkjs = require("@vkontakte/vkjs");
 var _excluded = ["value", "length", "index", "onElementSelect", "onClick", "onFocus", "getRootRef", "className"];
 var MASK_SYMBOL = String.fromCharCode(0x2007);
 function getMaskElements(length) {

package/dist/cjs/components/InputLike/InputLike.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputLike.js","names":["MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","React","useCallback","event","stopPropagation","classNames","callMultiple","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~callMultiple~~ } from '~~../../lib~~/~~callMultiple~~';\nimport { ~~stopPropagation~~ } from '../../lib/~~utils~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n HasRootRef<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n const result = [];\n for (let index = 0; index < length; index += 1) {\n result.push(\n <span key={index} className={styles['InputLike__mask']}>\n {MASK_SYMBOL}\n </span>,\n );\n }\n return result;\n}\n\nexport const InputLike = ({\n value,\n length,\n index,\n onElementSelect,\n onClick,\n onFocus,\n getRootRef,\n className,\n ...props\n}: InputLikeProps) => {\n const handleElementSelect = React.useCallback(\n (event: React.MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n onElementSelect?.(index);\n },\n [index, onElementSelect],\n );\n\n return (\n <span\n className={classNames(\n styles['InputLike'],\n value?.length === length && styles[`InputLike--full`],\n className,\n )}\n tabIndex={0}\n ref={getRootRef}\n onClick={callMultiple(onClick, handleElementSelect)}\n onFocus={callMultiple(stopPropagation, onFocus)}\n {...props}\n >\n {value?.slice(0, length - 1)}\n {value?.slice(length - 1) && (\n <span key={index} className={styles['InputLike__last_character']}>\n {value.slice(length - 1)}\n </span>\n )}\n {getMaskElements(length - (value?.length ?? 0))}\n </span>\n );\n};\n\nInputLike.displayName = 'InputLike';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;~~AAA6C~~;~~AAa7C~~,IAAMA,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGC,KAAK,CAACC,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5C,IAAAC,sBAAe,EAACD,KAAK,CAAC;IACtBT,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAE,IAAAW,gBAAU,mBAEnB,CAAAZ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAE,IAAAS,0BAAY,EAACX,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAE,IAAAM,0BAAY,EAACF,sBAAe,EAAER,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAAC,CAAC,EAAEnB,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAAC;AAEFI,SAAS,CAACgB,WAAW,GAAG,WAAW"}
1	+ {"version":3,"file":"InputLike.js","names":["MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","className","props","handleElementSelect","React","useCallback","event","stopPropagation","classNames","callMultiple","slice","displayName"],"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { HasRootRef } from '../../types';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps\n extends React.HTMLAttributes<HTMLSpanElement>,\n HasRootRef<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n onElementSelect?(index: number): void;\n}\n\nconst MASK_SYMBOL = String.fromCharCode(0x2007);\n\nfunction getMaskElements(length: number) {\n const result = [];\n for (let index = 0; index < length; index += 1) {\n result.push(\n <span key={index} className={styles['InputLike__mask']}>\n {MASK_SYMBOL}\n </span>,\n );\n }\n return result;\n}\n\nexport const InputLike = ({\n value,\n length,\n index,\n onElementSelect,\n onClick,\n onFocus,\n getRootRef,\n className,\n ...props\n}: InputLikeProps) => {\n const handleElementSelect = React.useCallback(\n (event: React.MouseEvent<HTMLSpanElement>) => {\n stopPropagation(event);\n onElementSelect?.(index);\n },\n [index, onElementSelect],\n );\n\n return (\n <span\n className={classNames(\n styles['InputLike'],\n value?.length === length && styles[`InputLike--full`],\n className,\n )}\n tabIndex={0}\n ref={getRootRef}\n onClick={callMultiple(onClick, handleElementSelect)}\n onFocus={callMultiple(stopPropagation, onFocus)}\n {...props}\n >\n {value?.slice(0, length - 1)}\n {value?.slice(length - 1) && (\n <span key={index} className={styles['InputLike__last_character']}>\n {value.slice(length - 1)}\n </span>\n )}\n {getMaskElements(length - (value?.length ?? 0))}\n </span>\n );\n};\n\nInputLike.displayName = 'InputLike';\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAkD;AAalD,IAAMA,WAAW,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;AAE/C,SAASC,eAAe,CAACC,MAAc,EAAE;EACvC,IAAMC,MAAM,GAAG,EAAE;EACjB,KAAK,IAAIC,MAAK,GAAG,CAAC,EAAEA,MAAK,GAAGF,MAAM,EAAEE,MAAK,IAAI,CAAC,EAAE;IAC9CD,MAAM,CAACE,IAAI,eACT;MAAM,GAAG,EAAED,MAAM;MAAC,SAAS;IAA4B,GACpDN,WAAW,CACP,CACR;EACH;EACA,OAAOK,MAAM;AACf;AAEO,IAAMG,SAAS,GAAG,SAAZA,SAAS,OAUA;EAAA;EAAA,IATpBC,KAAK,QAALA,KAAK;IACLL,MAAM,QAANA,MAAM;IACNE,KAAK,QAALA,KAAK;IACLI,eAAe,QAAfA,eAAe;IACfC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,KAAK;EAER,IAAMC,mBAAmB,GAAGC,KAAK,CAACC,WAAW,CAC3C,UAACC,KAAwC,EAAK;IAC5C,IAAAC,sBAAe,EAACD,KAAK,CAAC;IACtBT,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAGJ,KAAK,CAAC;EAC1B,CAAC,EACD,CAACA,KAAK,EAAEI,eAAe,CAAC,CACzB;EAED,oBACE;IACE,SAAS,EAAE,IAAAW,gBAAU,mBAEnB,CAAAZ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,MAAKA,MAAM,yBAA6B,EACrDU,SAAS,CACT;IACF,QAAQ,EAAE,CAAE;IACZ,GAAG,EAAED,UAAW;IAChB,OAAO,EAAE,IAAAS,0BAAY,EAACX,OAAO,EAAEK,mBAAmB,CAAE;IACpD,OAAO,EAAE,IAAAM,0BAAY,EAACF,sBAAe,EAAER,OAAO;EAAE,GAC5CG,KAAK,GAERN,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAAC,CAAC,EAAEnB,MAAM,GAAG,CAAC,CAAC,EAC3B,CAAAK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,kBACvB;IAAM,GAAG,EAAEE,KAAM;IAAC,SAAS;EAAsC,GAC9DG,KAAK,CAACc,KAAK,CAACnB,MAAM,GAAG,CAAC,CAAC,CAE3B,EACAD,eAAe,CAACC,MAAM,qBAAIK,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEL,MAAM,yDAAI,CAAC,CAAC,CAAC,CAC1C;AAEX,CAAC;AAAC;AAEFI,SAAS,CAACgB,WAAW,GAAG,WAAW"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.js","names":["Link","hasVisited","children","className","restProps","href","classNames"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~TappableProps~~, ~~Tappable~~ } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n /*\n Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n /\n hasVisited?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n hasHover={false}\n activeMode=\"opacity\"\n focusVisibleMode={styles['Link--focus-visible']}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA+D;AAU/D;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAqE;EAAA,IAA/DC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAE,IAAAE,gBAAU,cAAiBL,UAAU,2BAA+B,EAAEE,SAAS,CAAE;IAC5F,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC;AAAC"}
1	+ {"version":3,"file":"Link.js","names":["Link","hasVisited","children","className","restProps","href","classNames"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends TappableProps {\n /*\n Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет\n /\n hasVisited?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/Link\n */\nexport const Link = ({ hasVisited, children, className, ...restProps }: LinkProps) => {\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n {...restProps}\n className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n hasHover={false}\n activeMode=\"opacity\"\n focusVisibleMode={styles['Link--focus-visible']}\n >\n {children}\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAA+D;AAU/D;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAI,OAAqE;EAAA,IAA/DC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EAClE,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAEA,SAAS,CAACC,IAAI,GAAG,GAAG,GAAG;EAAS,GACvCD,SAAS;IACb,SAAS,EAAE,IAAAE,gBAAU,cAAiBL,UAAU,2BAA+B,EAAEE,SAAS,CAAE;IAC5F,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAC,SAAS;IACpB,gBAAgB;EAAgC,IAE/CD,QAAQ,CACA;AAEf,CAAC;AAAC"}

package/dist/cjs/components/LocaleProvider/LocaleProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocaleProvider.js","names":["LocaleProvider","value","children"],"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ~~ConfigProviderOverride~~ } from '../ConfigProvider/~~ConfigProviderOverride~~';\nimport { ~~ConfigProviderContextInterface~~ } from '../ConfigProvider/~~ConfigProviderContext~~';\n\nexport interface LocaleProviderProps {\n /*\n Строка с языковой меткой BCP 47\n /\n value: ConfigProviderContextInterface['locale'];\n children: React.ReactNode;\n}\n\n/\n Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подмёток IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n \n @version 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"mappings":";;;;;;;AAAA;~~AACA~~;~~AAWA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,cAAc,OAA2C;EAAA,IAAxCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAC9C,oBAAO,6BAAC,8CAAsB;IAAC,MAAM,EAAED;EAAM,GAAEC,QAAQ,CAA0B;AACnF"}
1	+ {"version":3,"file":"LocaleProvider.js","names":["LocaleProvider","value","children"],"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface LocaleProviderProps {\n /*\n Строка с языковой меткой BCP 47\n /\n value: ConfigProviderContextInterface['locale'];\n children: React.ReactNode;\n}\n\n/\n Компонент, прокидывающий локаль. Список можно найти в\n * [реестре языковых подмёток IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)\n \n @version 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"mappings":";;;;;;;AAAA;AAEA;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,cAAc,OAA2C;EAAA,IAAxCC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAC9C,oBAAO,6BAAC,8CAAsB;IAAC,MAAM,EAAED;EAAM,GAAEC,QAAQ,CAA0B;AACnF"}

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

@@ -9,10 +9,10 @@ exports.MiniInfoCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
+var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _Paragraph = require("../Typography/Paragraph/Paragraph");
 var _Tappable = require("../Tappable/Tappable");
-var _icons = require("@vkontakte/icons");
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
 var _excluded = ["before", "after", "children", "mode", "textWrap", "expandable", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MiniInfoCell.js","names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","styles","cellContent","undefined","hasReactNode","onClick"],"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~classNames,~~ ~~hasReactNode~~ } from '@vkontakte/~~vkjs~~';\nimport { ~~Paragraph~~ } from '~~../Typography~~/~~Paragraph/Paragraph~~';\nimport { Tappable } from '../Tappable/Tappable';\nimport { ~~Icon16Chevron~~ } from '~~@vkontakte~~/~~icons~~';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<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` – текст отображается полностью.\n /\n textWrap?: 'nowrap' \| 'short' \| 'full';\n\n /\n Передавать `true`, если предполагается переход при клике по ячейке.\n /\n expandable?: 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 expandable = false,\n className,\n ...restProps\n}: MiniInfoCellProps) => {\n const cellClasses = classNames(\n styles['MiniInfoCell'],\n styles[`MiniInfoCell--textWrap-${textWrap}`],\n mode !== 'base' && styles[`MiniInfoCell--mode-${mode}`],\n className,\n );\n\n const cellContent = (\n <React.Fragment>\n <span className={styles['MiniInfoCell__before']}>{before}</span>\n <div className={styles['MiniInfoCell__middle']}>\n <Paragraph\n className={styles['MiniInfoCell__content']}\n weight={mode === 'more' ? '2' : undefined}\n >\n {children}\n </Paragraph>\n {expandable && <Icon16Chevron />}\n </div>\n {hasReactNode(after) && <span className={styles['MiniInfoCell__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 <div {...restProps} className={cellClasses}>\n {cellContent}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;~~AAAiD~~;~~AAyCjD~~;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY,OASA;EAAA,IARvBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAA,uBACnBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAClBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG,IAAAC,gBAAU,sBAE5BC,MAAM,kCAA2BN,QAAQ,EAAG,EAC5CD,IAAI,KAAK,MAAM,IAAIO,MAAM,8BAAuBP,IAAI,EAAG,EACvDG,SAAS,CACV;EAED,IAAMK,WAAW,gBACf,oBAAC,KAAK,CAAC,QAAQ,qBACb;IAAM,SAAS;EAAiC,GAAEX,MAAM,CAAQ,eAChE;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,oBAAS;IACR,SAAS,6BAAkC;IAC3C,MAAM,EAAEG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAGS;EAAU,GAEzCV,QAAQ,CACC,EACXG,UAAU,iBAAI,oBAAC,oBAAa,OAAG,CAC5B,EACL,IAAAQ,kBAAY,EAACZ,KAAK,CAAC,iBAAI;IAAM,SAAS;EAAgC,GAAEA,KAAK,CAAQ,CAEzF;EAED,OAAOM,SAAS,CAACO,OAAO,gBACtB,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,IAAI,EAAC;EAAQ,GAAKP,SAAS;IAAE,SAAS,EAAEC;EAAY,IAC3EG,WAAW,CACH,gBAEX,sDAASJ,SAAS;IAAE,SAAS,EAAEC;EAAY,IACxCG,WAAW,CAEf;AACH,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"MiniInfoCell.js","names":["MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","styles","cellContent","undefined","hasReactNode","onClick"],"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nexport interface MiniInfoCellProps extends React.HTMLAttributes<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` – текст отображается полностью.\n /\n textWrap?: 'nowrap' \| 'short' \| 'full';\n\n /\n Передавать `true`, если предполагается переход при клике по ячейке.\n /\n expandable?: 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 expandable = false,\n className,\n ...restProps\n}: MiniInfoCellProps) => {\n const cellClasses = classNames(\n styles['MiniInfoCell'],\n styles[`MiniInfoCell--textWrap-${textWrap}`],\n mode !== 'base' && styles[`MiniInfoCell--mode-${mode}`],\n className,\n );\n\n const cellContent = (\n <React.Fragment>\n <span className={styles['MiniInfoCell__before']}>{before}</span>\n <div className={styles['MiniInfoCell__middle']}>\n <Paragraph\n className={styles['MiniInfoCell__content']}\n weight={mode === 'more' ? '2' : undefined}\n >\n {children}\n </Paragraph>\n {expandable && <Icon16Chevron />}\n </div>\n {hasReactNode(after) && <span className={styles['MiniInfoCell__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 <div {...restProps} className={cellClasses}>\n {cellContent}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA8D;AAyC9D;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY,OASA;EAAA,IARvBC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAAA,uBACnBC,UAAU;IAAVA,UAAU,gCAAG,KAAK;IAClBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,WAAW,GAAG,IAAAC,gBAAU,sBAE5BC,MAAM,kCAA2BN,QAAQ,EAAG,EAC5CD,IAAI,KAAK,MAAM,IAAIO,MAAM,8BAAuBP,IAAI,EAAG,EACvDG,SAAS,CACV;EAED,IAAMK,WAAW,gBACf,oBAAC,KAAK,CAAC,QAAQ,qBACb;IAAM,SAAS;EAAiC,GAAEX,MAAM,CAAQ,eAChE;IAAK,SAAS;EAAiC,gBAC7C,oBAAC,oBAAS;IACR,SAAS,6BAAkC;IAC3C,MAAM,EAAEG,IAAI,KAAK,MAAM,GAAG,GAAG,GAAGS;EAAU,GAEzCV,QAAQ,CACC,EACXG,UAAU,iBAAI,oBAAC,oBAAa,OAAG,CAC5B,EACL,IAAAQ,kBAAY,EAACZ,KAAK,CAAC,iBAAI;IAAM,SAAS;EAAgC,GAAEA,KAAK,CAAQ,CAEzF;EAED,OAAOM,SAAS,CAACO,OAAO,gBACtB,oBAAC,kBAAQ;IAAC,SAAS,EAAC,KAAK;IAAC,IAAI,EAAC;EAAQ,GAAKP,SAAS;IAAE,SAAS,EAAEC;EAAY,IAC3EG,WAAW,CACH,gBAEX,sDAASJ,SAAS;IAAE,SAAS,EAAEC;EAAY,IACxCG,WAAW,CAEf;AACH,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/ModalCard/ModalCard.js CHANGED Viewed

@@ -9,15 +9,15 @@ exports.ModalCard = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _getPlatformClassName = require("../../helpers/getPlatformClassName");
 var _vkjs = require("@vkontakte/vkjs");
-var _ModalRootContext = require("../ModalRoot/ModalRootContext");
-var _types = require("../ModalRoot/types");
+var _getPlatformClassName = require("../../helpers/getPlatformClassName");
+var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _usePlatform = require("../../hooks/usePlatform");
 var _getNavId = require("../../lib/getNavId");
 var _warnOnce = require("../../lib/warnOnce");
 var _ModalCardBase = require("../ModalCardBase/ModalCardBase");
-var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
-var _usePlatform = require("../../hooks/usePlatform");
+var _ModalRootContext = require("../ModalRoot/ModalRootContext");
+var _types = require("../ModalRoot/types");
 var _excluded = ["icon", "header", "subheader", "children", "actions", "onClose", "nav", "id", "className", "size"];
 var warn = (0, _warnOnce.warnOnce)('ModalCard');

package/dist/cjs/components/ModalCard/ModalCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalCard.js","names":["warn","warnOnce","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","restProps","useAdaptivityWithJSMediaQueries","isDesktop","platform","usePlatform","modalContext","React","useContext","ModalRootContext","useModalRegistry","getNavId","ModalType","CARD","refs","classNames","getPlatformClassName","innerElement"],"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~getPlatformClassName~~ } from '~~../../helpers~~/~~getPlatformClassName~~';\nimport { ~~classNames~~ } from '~~@vkontakte~~/~~vkjs~~';\nimport { ~~ModalRootContext,~~ ~~useModalRegistry~~ } from '~~../ModalRoot~~/~~ModalRootContext~~';\nimport { ~~ModalType~~ } from '~~../ModalRoot~~/~~types~~';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ~~useAdaptivityWithJSMediaQueries~~ } from '~~../../hooks~~/~~useAdaptivityWithJSMediaQueries~~';\nimport { ~~usePlatform~~ } from '~~../../hooks~~/~~usePlatform~~';\nimport styles from './ModalCard.module.css';\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n icon,\n header,\n subheader,\n children,\n actions,\n onClose,\n nav,\n id,\n className,\n size,\n ...restProps\n}: ModalCardProps) => {\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const platform = usePlatform();\n\n const modalContext = React.useContext(ModalRootContext);\n const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n return (\n <div\n {...restProps}\n id={id}\n className={classNames(\n styles['ModalCard'],\n getPlatformClassName(styles['ModalCard'], platform),\n isDesktop && styles['ModalCard--desktop'],\n className,\n )}\n >\n <ModalCardBase\n className={styles['ModalCard__in']}\n getRootRef={refs.innerElement}\n icon={icon}\n header={header}\n subheader={subheader}\n actions={actions}\n onClose={onClose \|\| modalContext.onClose}\n size={size}\n >\n {children}\n </ModalCardBase>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAAsD~~;~~AAKtD~~,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAYA;EAAA,IAXpBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,GAAG,QAAHA,GAAG;IACHC,EAAE,QAAFA,EAAE;IACFC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,YAAY,GAAGC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;EACvD,wBAAiB,IAAAC,kCAAgB,EAAC,IAAAC,kBAAQ,EAAC;MAAEd,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEV,IAAI,CAAC,EAAEwB,gBAAS,CAACC,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,sDACMb,SAAS;IACb,EAAE,EAAEH,EAAG;IACP,SAAS,EAAE,IAAAiB,gBAAU,mBAEnB,IAAAC,0CAAoB,mBAAsBZ,QAAQ,CAAC,EACnDD,SAAS,4BAAgC,EACzCJ,SAAS;EACT,iBAEF,oBAAC,4BAAa;IACZ,SAAS,qBAA0B;IACnC,UAAU,EAAEe,IAAI,CAACG,YAAa;IAC9B,IAAI,EAAE1B,IAAK;IACX,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,OAAO,EAAEC,OAAO,IAAIU,YAAY,CAACV,OAAQ;IACzC,IAAI,EAAEI;EAAK,GAEVN,QAAQ,CACK,CACZ;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"ModalCard.js","names":["warn","warnOnce","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","restProps","useAdaptivityWithJSMediaQueries","isDesktop","platform","usePlatform","modalContext","React","useContext","ModalRootContext","useModalRegistry","getNavId","ModalType","CARD","refs","classNames","getPlatformClassName","innerElement"],"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalCard.module.css';\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n icon,\n header,\n subheader,\n children,\n actions,\n onClose,\n nav,\n id,\n className,\n size,\n ...restProps\n}: ModalCardProps) => {\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const platform = usePlatform();\n\n const modalContext = React.useContext(ModalRootContext);\n const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);\n\n return (\n <div\n {...restProps}\n id={id}\n className={classNames(\n styles['ModalCard'],\n getPlatformClassName(styles['ModalCard'], platform),\n isDesktop && styles['ModalCard--desktop'],\n className,\n )}\n >\n <ModalCardBase\n className={styles['ModalCard__in']}\n getRootRef={refs.innerElement}\n icon={icon}\n header={header}\n subheader={subheader}\n actions={actions}\n onClose={onClose \|\| modalContext.onClose}\n size={size}\n >\n {children}\n </ModalCardBase>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAA+C;AAK/C,IAAMA,IAAI,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAYA;EAAA,IAXpBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,GAAG,QAAHA,GAAG;IACHC,EAAE,QAAFA,EAAE;IACFC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACDC,SAAS;EAEZ,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAE9B,IAAMC,YAAY,GAAGC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;EACvD,wBAAiB,IAAAC,kCAAgB,EAAC,IAAAC,kBAAQ,EAAC;MAAEd,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEV,IAAI,CAAC,EAAEwB,gBAAS,CAACC,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,sDACMb,SAAS;IACb,EAAE,EAAEH,EAAG;IACP,SAAS,EAAE,IAAAiB,gBAAU,mBAEnB,IAAAC,0CAAoB,mBAAsBZ,QAAQ,CAAC,EACnDD,SAAS,4BAAgC,EACzCJ,SAAS;EACT,iBAEF,oBAAC,4BAAa;IACZ,SAAS,qBAA0B;IACnC,UAAU,EAAEe,IAAI,CAACG,YAAa;IAC9B,IAAI,EAAE1B,IAAK;IACX,MAAM,EAAEC,MAAO;IACf,SAAS,EAAEC,SAAU;IACrB,OAAO,EAAEE,OAAQ;IACjB,OAAO,EAAEC,OAAO,IAAIU,YAAY,CAACV,OAAQ;IACzC,IAAI,EAAEI;EAAK,GAEVN,QAAQ,CACK,CACZ;AAEV,CAAC;AAAC"}

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

@@ -10,17 +10,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _Title = require("../Typography/Title/Title");
-var _Subhead = require("../Typography/Subhead/Subhead");
+var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _getPlatformClassName = require("../../helpers/getPlatformClassName");
+var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _useKeyboard = require("../../hooks/useKeyboard");
 var _usePlatform = require("../../hooks/usePlatform");
-var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
 var _platform = require("../../lib/platform");
 var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
-var _icons = require("@vkontakte/icons");
-var _useKeyboard = require("../../hooks/useKeyboard");
-var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _PanelHeaderButton = require("../PanelHeaderButton/PanelHeaderButton");
+var _Subhead = require("../Typography/Subhead/Subhead");
+var _Title = require("../Typography/Title/Title");
 var _excluded = ["getRootRef", "icon", "header", "subheader", "children", "actions", "onClose", "dismissLabel", "className", "style", "size"];
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalCardBase.js","names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","sizeProp","size","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","isDesktop","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","classNames","getPlatformClassName","maxWidth","hasReactNode"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~Title~~ } from '~~../Typography~~/~~Title/Title~~';\nimport { ~~Subhead } from '../Typography/Subhead/Subhead';\nimport {~~ classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { ~~usePlatform~~ } from '../../hooks/~~usePlatform~~';\nimport { ~~HasRootRef~~ } from '../../~~types~~';\nimport { ~~PanelHeaderButton~~ } from '~~../PanelHeaderButton~~/~~PanelHeaderButton~~';\nimport { Platform } from '../../lib/platform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ~~Icon24Dismiss~~ } from '~~@vkontakte~~/~~icons~~';\nimport { ~~useKeyboard~~ } from '~~../../hooks~~/~~useKeyboard~~';\nimport { ~~useAdaptivityWithJSMediaQueries~~ } from '~~../../hooks~~/~~useAdaptivityWithJSMediaQueries~~';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Иконка.\n \n Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n /\n icon?: React.ReactNode;\n\n /\n Заголовок карточки\n /\n header?: React.ReactNode;\n\n /\n Подзаголовок\n /\n subheader?: React.ReactNode;\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 `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n /\n dismissLabel?: string;\n\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: number;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n getRootRef,\n icon,\n header,\n subheader,\n children,\n actions,\n onClose,\n dismissLabel = 'Скрыть',\n className,\n style,\n size: sizeProp,\n ...restProps\n}: ModalCardBaseProps) => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n const size = isDesktop ? sizeProp : undefined;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['ModalCardBase'],\n getPlatformClassName(styles['ModalCardBase'], platform),\n isDesktop && styles['ModalCardBase--desktop'],\n className,\n )}\n ref={getRootRef}\n style={{\n ...style,\n maxWidth: size,\n }}\n >\n <div\n className={classNames(\n styles['ModalCardBase__container'],\n isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n )}\n >\n {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n {hasReactNode(header) && (\n <Title level=\"2\" weight=\"2\" className={styles['ModalCardBase__header']}>\n {header}\n </Title>\n )}\n {hasReactNode(subheader) && (\n <Subhead className={styles['ModalCardBase__subheader']}>{subheader}</Subhead>\n )}\n\n {children}\n\n {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n {isDesktop && <ModalDismissButton onClick={onClose} />}\n {canShowCloseButtonIOS && (\n <PanelHeaderButton\n aria-label={dismissLabel}\n className={styles['ModalCardBase__dismiss']}\n onClick={onClose}\n >\n <Icon24Dismiss />\n </PanelHeaderButton>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;~~AAEA;~~AACA;AACA;AACA;AACA;AACA;~~AAA8F~~;~~AAiD9F~~;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAaA;EAAA,IAZxBC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,QAAQ;IACvBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACCC,QAAQ,QAAdC,IAAI;IACDC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,wBAAwB,GAAG,IAAAC,wBAAW,GAAE,CAACC,QAAQ;EAEvD,IAAMC,qBAAqB,GAAGP,QAAQ,KAAKQ,kBAAQ,CAACC,GAAG,IAAI,CAACN,SAAS;EAErE,IAAML,IAAI,GAAGK,SAAS,GAAGN,QAAQ,GAAGa,SAAS;EAE7C,oBACE,sDACMX,SAAS;IACb,SAAS,EAAE,IAAAY,gBAAU,uBAEnB,IAAAC,0CAAoB,uBAA0BZ,QAAQ,CAAC,EACvDG,SAAS,gCAAoC,EAC7CR,SAAS,CACT;IACF,GAAG,EAAER,UAAW;IAChB,KAAK,8DACAS,KAAK;MACRiB,QAAQ,EAAEf;IAAI;EACd,iBAEF;IACE,SAAS,EAAE,IAAAa,gBAAU,kCAEnBP,wBAAwB,0DAA8D;EACtF,GAED,IAAAU,kBAAY,EAAC1B,IAAI,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,IAAI,CAAO,EACjF,IAAA0B,kBAAY,EAACzB,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GACpEA,MAAM,CAEV,EACA,IAAAyB,kBAAY,EAACxB,SAAS,CAAC,iBACtB,oBAAC,gBAAO;IAAC,SAAS;EAAqC,GAAEA,SAAS,CACnE,EAEAC,QAAQ,EAER,IAAAuB,kBAAY,EAACtB,OAAO,CAAC,iBAAI;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAAO,EAE1FW,SAAS,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEV;EAAQ,EAAG,EACrDc,qBAAqB,iBACpB,oBAAC,oCAAiB;IAChB,cAAYb,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,oBAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"ModalCardBase.js","names":["ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","sizeProp","size","restProps","platform","usePlatform","useAdaptivityWithJSMediaQueries","isDesktop","isSoftwareKeyboardOpened","useKeyboard","isOpened","canShowCloseButtonIOS","Platform","IOS","undefined","classNames","getPlatformClassName","maxWidth","hasReactNode"],"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../helpers/getPlatformClassName';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n extends React.HTMLAttributes<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n /*\n Иконка.\n \n Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n /\n icon?: React.ReactNode;\n\n /\n Заголовок карточки\n /\n header?: React.ReactNode;\n\n /\n Подзаголовок\n /\n subheader?: React.ReactNode;\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 `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n /\n dismissLabel?: string;\n\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: number;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n getRootRef,\n icon,\n header,\n subheader,\n children,\n actions,\n onClose,\n dismissLabel = 'Скрыть',\n className,\n style,\n size: sizeProp,\n ...restProps\n}: ModalCardBaseProps) => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;\n\n const size = isDesktop ? sizeProp : undefined;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['ModalCardBase'],\n getPlatformClassName(styles['ModalCardBase'], platform),\n isDesktop && styles['ModalCardBase--desktop'],\n className,\n )}\n ref={getRootRef}\n style={{\n ...style,\n maxWidth: size,\n }}\n >\n <div\n className={classNames(\n styles['ModalCardBase__container'],\n isSoftwareKeyboardOpened && styles['ModalCardBase__container--softwareKeyboardOpened'],\n )}\n >\n {hasReactNode(icon) && <div className={styles['ModalCardBase__icon']}>{icon}</div>}\n {hasReactNode(header) && (\n <Title level=\"2\" weight=\"2\" className={styles['ModalCardBase__header']}>\n {header}\n </Title>\n )}\n {hasReactNode(subheader) && (\n <Subhead className={styles['ModalCardBase__subheader']}>{subheader}</Subhead>\n )}\n\n {children}\n\n {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n {isDesktop && <ModalDismissButton onClick={onClose} />}\n {canShowCloseButtonIOS && (\n <PanelHeaderButton\n aria-label={dismissLabel}\n className={styles['ModalCardBase__dismiss']}\n onClick={onClose}\n >\n <Icon24Dismiss />\n </PanelHeaderButton>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAkD;AAiDlD;AACA;AACA;AACO,IAAMA,aAAa,GAAG,SAAhBA,aAAa,OAaA;EAAA,IAZxBC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,QAAQ;IACvBC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACCC,QAAQ,QAAdC,IAAI;IACDC,SAAS;EAEZ,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,4BAAsB,IAAAC,gEAA+B,GAAE;IAA/CC,SAAS,yBAATA,SAAS;EACjB,IAAMC,wBAAwB,GAAG,IAAAC,wBAAW,GAAE,CAACC,QAAQ;EAEvD,IAAMC,qBAAqB,GAAGP,QAAQ,KAAKQ,kBAAQ,CAACC,GAAG,IAAI,CAACN,SAAS;EAErE,IAAML,IAAI,GAAGK,SAAS,GAAGN,QAAQ,GAAGa,SAAS;EAE7C,oBACE,sDACMX,SAAS;IACb,SAAS,EAAE,IAAAY,gBAAU,uBAEnB,IAAAC,0CAAoB,uBAA0BZ,QAAQ,CAAC,EACvDG,SAAS,gCAAoC,EAC7CR,SAAS,CACT;IACF,GAAG,EAAER,UAAW;IAChB,KAAK,8DACAS,KAAK;MACRiB,QAAQ,EAAEf;IAAI;EACd,iBAEF;IACE,SAAS,EAAE,IAAAa,gBAAU,kCAEnBP,wBAAwB,0DAA8D;EACtF,GAED,IAAAU,kBAAY,EAAC1B,IAAI,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,IAAI,CAAO,EACjF,IAAA0B,kBAAY,EAACzB,MAAM,CAAC,iBACnB,oBAAC,YAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAkC,GACpEA,MAAM,CAEV,EACA,IAAAyB,kBAAY,EAACxB,SAAS,CAAC,iBACtB,oBAAC,gBAAO;IAAC,SAAS;EAAqC,GAAEA,SAAS,CACnE,EAEAC,QAAQ,EAER,IAAAuB,kBAAY,EAACtB,OAAO,CAAC,iBAAI;IAAK,SAAS;EAAmC,GAAEA,OAAO,CAAO,EAE1FW,SAAS,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEV;EAAQ,EAAG,EACrDc,qBAAqB,iBACpB,oBAAC,oCAAiB;IAChB,cAAYb,YAAa;IACzB,SAAS,8BAAmC;IAC5C,OAAO,EAAED;EAAQ,gBAEjB,oBAAC,oBAAa,OAAG,CAEpB,CACG,CACF;AAEV,CAAC;AAAC"}

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

@@ -9,8 +9,8 @@ exports.ModalDismissButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
 var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
 var _Tappable = require("../Tappable/Tappable");
 var _excluded = ["aria-label", "className"];
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalDismissButton.js","names":["ModalDismissButton","ariaLabel","className","restProps","classNames"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ~~classNames~~ } from '@vkontakte/~~vkjs~~';\nimport { ~~Icon20Cancel~~ } from '@vkontakte/~~icons~~';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n 'aria-label': ariaLabel = 'Закрыть',\n className,\n ...restProps\n}: ModalDismissButtonProps) => {\n return (\n <Tappable\n className={classNames(styles['ModalDismissButton'], className)}\n {...restProps}\n aria-label={ariaLabel}\n activeMode={styles['ModalDismissButton--active']}\n hoverMode={styles['ModalDismissButton--hover']}\n >\n <Icon20Cancel />\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAgD;AAKhD;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,0BAH7B,YAAY;IAAEC,SAAS,+BAAG,SAAS;IACnCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAE,IAAAC,gBAAU,4BAA+BF,SAAS;EAAE,GAC3DC,SAAS;IACb,cAAYF,SAAU;IACtB,UAAU,kCAAuC;IACjD,SAAS;EAAsC,iBAE/C,oBAAC,mBAAY,OAAG,CACP;AAEf,CAAC;AAAC"}
1	+ {"version":3,"file":"ModalDismissButton.js","names":["ModalDismissButton","ariaLabel","className","restProps","classNames"],"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n 'aria-label': ariaLabel = 'Закрыть',\n className,\n ...restProps\n}: ModalDismissButtonProps) => {\n return (\n <Tappable\n className={classNames(styles['ModalDismissButton'], className)}\n {...restProps}\n aria-label={ariaLabel}\n activeMode={styles['ModalDismissButton--active']}\n hoverMode={styles['ModalDismissButton--hover']}\n >\n <Icon20Cancel />\n </Tappable>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAAgD;AAKhD;AACA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,OAIA;EAAA,0BAH7B,YAAY;IAAEC,SAAS,+BAAG,SAAS;IACnCC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAE,IAAAC,gBAAU,4BAA+BF,SAAS;EAAE,GAC3DC,SAAS;IACb,cAAYF,SAAU;IACtB,UAAU,kCAAuC;IACjD,SAAS;EAAsC,iBAE/C,oBAAC,mBAAY,OAAG,CACP;AAEf,CAAC;AAAC"}

package/dist/cjs/components/ModalPage/ModalPage.js CHANGED Viewed

@@ -10,21 +10,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var React = _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
-var _platform = require("../../lib/platform");
-var _ModalRootContext = require("../ModalRoot/ModalRootContext");
-var _usePlatform = require("../../hooks/usePlatform");
+var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
 var _useOrientationChange = require("../../hooks/useOrientationChange");
-var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
-var _utils = require("../../lib/utils");
-var _types = require("../ModalRoot/types");
+var _usePlatform = require("../../hooks/usePlatform");
+var _adaptivity = require("../../lib/adaptivity");
 var _getNavId = require("../../lib/getNavId");
+var _platform = require("../../lib/platform");
+var _utils = require("../../lib/utils");
 var _warnOnce = require("../../lib/warnOnce");
-var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _ModalDismissButton = require("../ModalDismissButton/ModalDismissButton");
+var _ModalRootContext = require("../ModalRoot/ModalRootContext");
+var _types = require("../ModalRoot/types");
 var _excluded = ["children", "header", "size", "onOpen", "onOpened", "onClose", "onClosed", "settlingHeight", "dynamicContentHeight", "getModalContentRef", "nav", "id", "hideCloseButton", "className"];
-var sizeXClassNames = {
-  regular: "vkuiModalPage--sizeX-regular",
-  compact: ''
-};
 var sizeClassName = {
   s: "vkuiModalPage--size-s",
   m: "vkuiModalPage--size-m",
@@ -71,7 +68,7 @@ var ModalPage = function ModalPage(_ref) {
     refs = _useModalRegistry.refs;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
     id: id,
-    className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeXClassNames[sizeX], typeof size === 'string' && sizeClassName[size], className)
+    className: (0, _vkjs.classNames)("vkuiModalPage", platform === _platform.Platform.IOS && "vkuiModalPage--ios", isDesktop && "vkuiModalPage--desktop", sizeX === _adaptivity.SizeType.REGULAR && "vkuiModalPage--sizeX-regular", typeof size === 'string' && sizeClassName[size], className)
   }), /*#__PURE__*/React.createElement("div", {
     className: "vkuiModalPage__in-wrap",
     style: {

package/dist/cjs/components/ModalPage/ModalPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalPage.js","names":["~~sizeXClassNames","regular","compact","~~sizeClassName","s","m","l","warn","warnOnce","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","React","useContext","ModalRootContext","updateModalHeight","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","useModalRegistry","getNavId","ModalType","PAGE","refs","classNames","Platform","IOS","maxWidth","undefined","innerElement","headerElement","multiRef","contentElement"],"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ~~Platform~~ } from '../../~~lib~~/~~platform~~';\nimport { ~~ModalRootContext,~~ ~~useModalRegistry~~ } from '~~../ModalRoot~~/~~ModalRootContext~~';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ~~useOrientationChange~~ } from '../../~~hooks~~/~~useOrientationChange~~';\nimport { ~~ModalDismissButton~~ } from '~~../ModalDismissButton~~/~~ModalDismissButton~~';\nimport { ~~multiRef~~ } from '../../lib/~~utils~~';\nimport { ~~ModalType~~ } from '~~../ModalRoot~~/~~types~~';\nimport { ~~getNavId,~~ ~~NavIdProps~~ } from '../../lib/~~getNavId~~';\nimport { ~~warnOnce~~ } from '~~../../lib~~/~~warnOnce~~';\nimport { ~~useAdaptivityWithJSMediaQueries~~ } from '~~../../hooks~~/~~useAdaptivityWithJSMediaQueries~~';\nimport styles from './ModalPage.module.css';\n\nconst ~~sizeXClassNames = {\n regular: styles['ModalPage--sizeX-regular'],\n compact: '',\n};\n\nconst~~ sizeClassName = {\n s: styles[`ModalPage--size-s`],\n m: styles[`ModalPage--size-m`],\n l: styles[`ModalPage--size-l`],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n /*\n Шапка модальной страницы, `<ModalPageHeader />`\n /\n header?: React.ReactNode;\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: 's' \| 'm' \| 'l' \| number;\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 /\n Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n /\n settlingHeight?: number;\n /\n Если высота контента в модальной странице может поменяться, нужно установить это свойство\n /\n dynamicContentHeight?: boolean;\n getModalContentRef?: React.Ref<HTMLDivElement>;\n /\n Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n /\n hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n children,\n header,\n size: sizeProp = 's',\n onOpen,\n onOpened,\n onClose,\n onClosed,\n settlingHeight, // 75\n dynamicContentHeight,\n getModalContentRef,\n nav,\n id,\n hideCloseButton = false,\n className,\n ...restProps\n}: ModalPageProps) => {\n const { updateModalHeight } = React.useContext(ModalRootContext);\n\n const platform = usePlatform();\n const orientation = useOrientationChange();\n const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n const isCloseButtonShown = !hideCloseButton && isDesktop;\n const size = isDesktop ? sizeProp : 's';\n\n const modalContext = React.useContext(ModalRootContext);\n const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n return (\n <div\n {...restProps}\n id={id}\n className={classNames(\n styles['ModalPage'],\n platform === Platform.IOS && styles['ModalPage--ios'],\n isDesktop && styles['ModalPage--desktop'],\n ~~sizeXClassNames~~[sizeX],\n typeof size === 'string' && sizeClassName[size],\n className,\n )}\n >\n <div\n className={styles['ModalPage__in-wrap']}\n style={{\n maxWidth: typeof size === 'number' ? size : undefined,\n }}\n ref={refs.innerElement}\n >\n <div className={styles['ModalPage__in']}>\n <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n {header}\n </div>\n\n <div className={styles['ModalPage__content-wrap']}>\n <div\n className={styles['ModalPage__content']}\n ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n >\n <div className={styles['ModalPage__content-in']}>{children}</div>\n </div>\n </div>\n {isCloseButtonShown && <ModalDismissButton onClick={onClose \|\| modalContext.onClose} />}\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AAA8F~~;~~AAG9F~~,IAAMA,~~eAAe,GAAG;EACtBC,OAAO,gCAAoC;EAC3CC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,~~aAAa,GAAG;EACpBC,CAAC,yBAA6B;EAC9BC,CAAC,yBAA6B;EAC9BC,CAAC;AACH,CAAC;AA0CD,IAAMC,IAAI,GAAG,IAAAC,kBAAQ,EAAC,WAAW,CAAC;;AAElC;AACA;AACA;AACO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAgBA;EAAA,IAfpBC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IAAA,iBACNC,IAAI;IAAEC,QAAQ,0BAAG,GAAG;IACpBC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,GAAG,QAAHA,GAAG;IACHC,EAAE,QAAFA,EAAE;IAAA,4BACFC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACvBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,wBAA8BC,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;IAAxDC,iBAAiB,qBAAjBA,iBAAiB;EAEzB,IAAMC,QAAQ,GAAG,IAAAC,wBAAW,GAAE;EAC9B,IAAMC,WAAW,GAAG,IAAAC,0CAAoB,GAAE;EAC1C,4BAA6B,IAAAC,gEAA+B,GAAE;IAAtDC,KAAK,yBAALA,KAAK;IAAEC,SAAS,yBAATA,SAAS;EAExBV,KAAK,CAACW,SAAS,CAACR,iBAAiB,EAAE,CAACnB,QAAQ,EAAEsB,WAAW,EAAEH,iBAAiB,CAAC,CAAC;EAE9E,IAAMS,kBAAkB,GAAG,CAACf,eAAe,IAAIa,SAAS;EACxD,IAAMxB,IAAI,GAAGwB,SAAS,GAAGvB,QAAQ,GAAG,GAAG;EAEvC,IAAM0B,YAAY,GAAGb,KAAK,CAACC,UAAU,CAACC,kCAAgB,CAAC;EACvD,wBAAiB,IAAAY,kCAAgB,EAAC,IAAAC,kBAAQ,EAAC;MAAEpB,GAAG,EAAHA,GAAG;MAAEC,EAAE,EAAFA;IAAG,CAAC,EAAEf,IAAI,CAAC,EAAEmC,gBAAS,CAACC,IAAI,CAAC;IAAtEC,IAAI,qBAAJA,IAAI;EAEZ,oBACE,sDACMnB,SAAS;IACb,EAAE,EAAEH,EAAG;IACP,SAAS,EAAE,IAAAuB,gBAAU,mBAEnBf,QAAQ,KAAKgB,kBAAQ,CAACC,GAAG,wBAA4B,EACrDX,SAAS,4BAAgC,~~EACzCpC~~,~~eAAe~~,~~CAACmC~~,~~KAAK~~,~~CAAC~~,~~EACtB~~,~~OAAOvB~~,IAAI,KAAK,QAAQ,IAAIT,aAAa,CAACS,IAAI,CAAC,EAC/CY,SAAS;EACT,iBAEF;IACE,SAAS,0BAA+B;IACxC,KAAK,EAAE;~~MACLwB~~,QAAQ,EAAE,~~OAAOpC~~,IAAI,KAAK,QAAQ,GAAGA,IAAI,~~GAAGqC~~;IAC9C,CAAE;IACF,GAAG,~~EAAEL~~,IAAI,~~CAACM~~;EAAa,gBAEvB;IAAK,SAAS;EAA0B,gBACtC;IAAK,SAAS,yBAA8B;IAAC,GAAG,~~EAAEN~~,IAAI,~~CAACO~~;EAAc,~~GAClExC~~,MAAM,CACH,eAEN;IAAK,SAAS;EAAoC,gBAChD;IACE,SAAS,0BAA+B;IACxC,GAAG,EAAE,~~IAAAyC~~,eAAQ,~~EAAiBR~~,IAAI,~~CAACS~~,cAAc,~~EAAEjC~~,kBAAkB;EAAE,gBAEvE;IAAK,SAAS;EAAkC,GAAEV,QAAQ,CAAO,CAC7D,CACF,EACL4B,kBAAkB,iBAAI,oBAAC,sCAAkB;IAAC,OAAO,EAAEtB,OAAO,IAAIuB,YAAY,CAACvB;EAAQ,EAAG,CACnF,CACF,CACF;AAEV,CAAC;AAAC"}
1	+ {"version":3,"file":"ModalPage.js","names":["sizeClassName","s","m","l","warn","warnOnce","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","React","useContext","ModalRootContext","updateModalHeight","platform","usePlatform","orientation","useOrientationChange","useAdaptivityWithJSMediaQueries","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","useModalRegistry","getNavId","ModalType","PAGE","refs","classNames","Platform","IOS","SizeType","REGULAR","maxWidth","undefined","innerElement","headerElement","multiRef","contentElement"],"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n s: styles[`ModalPage--size-s`],\n m: styles[`ModalPage--size-m`],\n l: styles[`ModalPage--size-l`],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n /*\n Шапка модальной страницы, `<ModalPageHeader />`\n /\n header?: React.ReactNode;\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: 's' \| 'm' \| 'l' \| number;\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 /\n Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n /\n settlingHeight?: number;\n /\n Если высота контента в модальной странице может поменяться, нужно установить это свойство\n /\n dynamicContentHeight?: boolean;\n getModalContentRef?: React.Ref<HTMLDivElement>;\n /\n Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n /\n hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n children,\n header,\n size: sizeProp = 's',\n onOpen,\n onOpened,\n onClose,\n onClosed,\n settlingHeight, // 75\n dynamicContentHeight,\n getModalContentRef,\n nav,\n id,\n hideCloseButton = false,\n className,\n ...restProps\n}: ModalPageProps) => {\n const { updateModalHeight } = React.useContext(ModalRootContext);\n\n const platform = usePlatform();\n const orientation = useOrientationChange();\n const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n const isCloseButtonShown = !hideCloseButton && isDesktop;\n const size = isDesktop ? sizeProp : 's';\n\n const modalContext = React.useContext(ModalRootContext);\n const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n return (\n <div\n {...restProps}\n id={id}\n className={classNames(\n styles['ModalPage'],\n platform === Platform.IOS && styles['ModalPage--ios'],\n isDesktop && styles['ModalPage--desktop'],\n sizeX === SizeType.REGULAR && styles['ModalPage--sizeX-regular'],\n typeof size === 'string' && sizeClassName[size],\n className,\n )}\n >\n <div\n className={styles['ModalPage__in-wrap']}\n style={{\n maxWidth: typeof size === 'number' ? size : undefined,\n }}\n ref={refs.innerElement}\n >\n <div className={styles['ModalPage__in']}>\n <div className={styles['ModalPage__header']} ref={refs.headerElement}>\n {header}\n </div>\n\n <div className={styles['ModalPage__content-wrap']}>\n <div\n className={styles['ModalPage__content']}\n ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n >\n <div className={styles['ModalPage__content-in']}>{children}</div>\n </div>\n </div>\n {isCloseButtonShown && <ModalDismissButton onClick={onClose \|\| modalContext.onClose} />}\n </div>\n </div>\n </div>\n );\n};\n"],"mappings":"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"}