npm - @vkontakte/vkui - Versions diffs - 6.1.1 → 6.2.0 - Mend

@vkontakte/vkui 6.1.1 → 6.2.0

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n label?: 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 label,\n ...restProps\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 <RootComponent\n Component=\"span\"\n baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n tabIndex={0}\n onClick={callMultiple(onClick, handleElementSelect)}\n onFocus={callMultiple(stopPropagation, onFocus)}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\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 </RootComponent>\n );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","React","useCallback","event","stopPropagation","RootComponent","Component","baseClassName","undefined","tabIndex","callMultiple","VisuallyHidden","slice","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;;iEA7BU;8BACM;uBACG;+BACuB;gCACxB;AAW/B,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAiBC,SAAS;sBACxBT;WADQM;IAIf;IACA,OAAOD;AACT;AAEO,MAAMN,YAAY;QAAC,EACxBW,KAAK,EACLN,MAAM,EACNE,KAAK,EACLK,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EAEU,WADZC;QAPHL;QACAN;QACAE;QACAK;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBC,OAAMC,WAAW,CAC3C,CAACC;QACCC,IAAAA,sBAAe,EAACD;QAChBR,4BAAAA,sCAAAA,gBAAkBL;IACpB,GACA;QAACA;QAAOK;KAAgB;QAmBKD;IAhB/B,qBACE,sBAACW,4BAAa;QACZC,WAAU;QACVC,eAAeb,CAAAA,kBAAAA,4BAAAA,MAAON,MAAM,MAAKA,iCAAqCoB;QACtEC,UAAU;QACVb,SAASc,IAAAA,0BAAY,EAACd,SAASI;QAC/BH,SAASa,IAAAA,0BAAY,EAACN,sBAAe,EAAEP;OACnCE;;YAEHD,uBAAS,qBAACa,8BAAc;0BAAEb;;YAC1BJ,kBAAAA,4BAAAA,MAAOkB,KAAK,CAAC,GAAGxB,SAAS;YACzBM,CAAAA,kBAAAA,4BAAAA,MAAOkB,KAAK,CAACxB,SAAS,qBACrB,qBAACI;gBAAiBC,SAAS;0BACxBC,MAAMkB,KAAK,CAACxB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUM,CAAAA,CAAAA,gBAAAA,kBAAAA,4BAAAA,MAAON,MAAM,cAAbM,2BAAAA,gBAAiB,CAAA;;;AAGlD;AAEAX,UAAU8B,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/InputLike/InputLike.tsx"],"sourcesContent":["import * as React from 'react';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { stopPropagation } from '../../lib/utils';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './InputLike.module.css';\n\nexport interface InputLikeProps extends RootComponentProps<HTMLSpanElement> {\n length: number;\n index: number;\n value?: string;\n label?: 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 label,\n ...restProps\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 <RootComponent\n Component=\"span\"\n baseClassName={value?.length === length ? styles['InputLike--full'] : undefined}\n tabIndex={0}\n onClick={callMultiple(onClick, handleElementSelect)}\n onFocus={callMultiple(stopPropagation, onFocus)}\n {...restProps}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\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 </RootComponent>\n );\n};\n\nInputLike.displayName = 'InputLike';\n"],"names":["InputLike","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","className","value","onElementSelect","onClick","onFocus","label","restProps","handleElementSelect","React","useCallback","event","stopPropagation","RootComponent","Component","baseClassName","undefined","tabIndex","callMultiple","VisuallyHidden","slice","displayName"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;;;;;iEA7BU;8BACM;uBACG;+BACuB;gCACxB;AAW/B,MAAMC,cAAcC,OAAOC,YAAY,CAAC;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,IAAI,eACT,qBAACC;YAAiBC,SAAS;sBACxBT;WADQM;IAIf;IACA,OAAOD;AACT;AAEO,MAAMN,YAAY;QAAC,EACxBW,KAAK,EACLN,MAAM,EACNE,KAAK,EACLK,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,KAAK,EAEU,WADZC;QAPHL;QACAN;QACAE;QACAK;QACAC;QACAC;QACAC;;IAGA,MAAME,sBAAsBC,OAAMC,WAAW,CAC3C,CAACC;QACCC,IAAAA,sBAAe,EAACD;QAChBR,4BAAAA,sCAAAA,gBAAkBL;IACpB,GACA;QAACA;QAAOK;KAAgB;QAmBKD;IAhB/B,qBACE,sBAACW,4BAAa;QACZC,WAAU;QACVC,eAAeb,CAAAA,kBAAAA,4BAAAA,MAAON,MAAM,MAAKA,iCAAqCoB;QACtEC,UAAU;QACVb,SAASc,IAAAA,0BAAY,EAACd,SAASI;QAC/BH,SAASa,IAAAA,0BAAY,EAACN,sBAAe,EAAEP;OACnCE;;YAEHD,uBAAS,qBAACa,8BAAc;0BAAEb;;YAC1BJ,kBAAAA,4BAAAA,MAAOkB,KAAK,CAAC,GAAGxB,SAAS;YACzBM,CAAAA,kBAAAA,4BAAAA,MAAOkB,KAAK,CAACxB,SAAS,qBACrB,qBAACI;gBAAiBC,SAAS;0BACxBC,MAAMkB,KAAK,CAACxB,SAAS;eADbE;YAIZH,gBAAgBC,SAAUM,CAAAA,CAAAA,gBAAAA,kBAAAA,4BAAAA,MAAON,MAAM,cAAbM,2BAAAA,gBAAiB,CAAA;;;AAGlD;AAEAX,UAAU8B,WAAW,GAAG"}

package/dist/cjs/components/InputLike/InputLikeDivider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,~~MAAM~~,mBAAmB,CAAC,eAAe,CAAC,4CAM5C,CAAC"}
1	+ {"version":3,"file":"InputLikeDivider.d.ts","sourceRoot":"","sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,gBAAgB,sCAI1B,KAAK,CAAC,mBAAmB,CAAC,eAAe,CAAC,4CAM5C,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n children,\n className,\n ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n return (\n <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n {children}\n </span>\n );\n};\n"],"names":["InputLikeDivider","children","className","props","span","classNames"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAIaA;;;eAAAA;;;;;;;;iEAJU;sBACI;AAGpB,MAAMA,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,SAAS,EAEkC,WADxCC;QAFHF;QACAC;;IAGA,qBACE,qBAACE;QAAKF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;kBACvEF;;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/InputLike/InputLikeDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './InputLike.module.css';\n\nexport const InputLikeDivider = ({\n children,\n className,\n ...props\n}: React.InputHTMLAttributes<HTMLSpanElement>) => {\n return (\n <span className={classNames(styles['InputLike__divider'], className)} {...props}>\n {children}\n </span>\n );\n};\n"],"names":["InputLikeDivider","children","className","props","span","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;;;iEAJU;sBACI;AAGpB,MAAMA,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,SAAS,EAEkC,WADxCC;QAFHF;QACAC;;IAGA,qBACE,qBAACE;QAAKF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAAgBC;kBACvEF;;AAGP"}

package/dist/cjs/components/Link/Link.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,+DAMd,SAAS,~~4CAcX~~,CAAC"}
1	+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,+DAMd,SAAS,4CAeX,CAAC"}

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

@@ -28,6 +28,7 @@ const Link = (_param)=>{
         className: (0, _vkjs.classNames)("vkuiLink", hasVisited && "vkuiLink--has-visited", className),
         hasHover: false,
         activeMode: "opacity",
+        hoverMode: "none",
         focusVisibleMode: "outside",
         children: children
     }));

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { classNames, noop } 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 = ({\n hasVisited,\n children,\n className,\n onClick = noop,\n ...restProps\n}: LinkProps) => {\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n onClick={onClick}\n {...restProps}\n className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n hasHover={false}\n activeMode=\"opacity\"\n focusVisibleMode=\"outside\"\n >\n {children}\n </Tappable>\n );\n};\n"],"names":["Link","hasVisited","children","className","onClick","noop","restProps","Tappable","Component","href","classNames","hasHover","activeMode","~~focusVisibleMode~~"],"~~rangeMappings~~"~~:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"~~,"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;sBAdoB;0BACO;AAajC,MAAMA,OAAO;QAAC,EACnBC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,UAAUC,UAAI,EAEJ,WADPC;QAJHL;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACG,kBAAQ;QACPC,WAAWF,UAAUG,IAAI,GAAG,MAAM;QAClCL,SAASA;OACLE;QACJH,WAAWO,IAAAA,gBAAU,cAAiBT,uCAA2CE;QACjFQ,UAAU;QACVC,YAAW;QACXC,kBAAiB;~~kBAEhBX~~;;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { classNames, noop } 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 = ({\n hasVisited,\n children,\n className,\n onClick = noop,\n ...restProps\n}: LinkProps) => {\n return (\n <Tappable\n Component={restProps.href ? 'a' : 'button'}\n onClick={onClick}\n {...restProps}\n className={classNames(styles['Link'], hasVisited && styles['Link--has-visited'], className)}\n hasHover={false}\n activeMode=\"opacity\"\n hoverMode=\"none\"\n focusVisibleMode=\"outside\"\n >\n {children}\n </Tappable>\n );\n};\n"],"names":["Link","hasVisited","children","className","onClick","noop","restProps","Tappable","Component","href","classNames","hasHover","activeMode","hoverMode","focusVisibleMode"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;sBAdoB;0BACO;AAajC,MAAMA,OAAO;QAAC,EACnBC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,UAAUC,UAAI,EAEJ,WADPC;QAJHL;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACG,kBAAQ;QACPC,WAAWF,UAAUG,IAAI,GAAG,MAAM;QAClCL,SAASA;OACLE;QACJH,WAAWO,IAAAA,gBAAU,cAAiBT,uCAA2CE;QACjFQ,UAAU;QACVC,YAAW;QACXC,WAAU;QACVC,kBAAiB;kBAEhBZ;;AAGP"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, ...restProps }: ListProps) => {\n return (\n <RootComponent role=\"list\" {...restProps}>\n {children}\n <div aria-hidden {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}></div>\n </RootComponent>\n );\n};\n"],"names":["List","children","restProps","RootComponent","role","div","aria-hidden","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BASaA;;;eAAAA;;;;;;;wCATyC;+BAExB;AAOvB,MAAMA,OAAO;QAAC,EAAEC,QAAQ,EAA2B,WAAtBC;QAAbD;;IACrB,qBACE,sBAACE,4BAAa;QAACC,MAAK;OAAWF;;YAC5BD;0BACD,qBAACI;gBAAIC,aAAW;eAAKC,6DAAqC;;;AAGhE"}
1	+ {"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\n\nexport type ListProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, ...restProps }: ListProps) => {\n return (\n <RootComponent role=\"list\" {...restProps}>\n {children}\n <div aria-hidden {...DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP}></div>\n </RootComponent>\n );\n};\n"],"names":["List","children","restProps","RootComponent","role","div","aria-hidden","DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP"],"mappings":";;;;+BASaA;;;eAAAA;;;;;;;wCATyC;+BAExB;AAOvB,MAAMA,OAAO;QAAC,EAAEC,QAAQ,EAA2B,WAAtBC;QAAbD;;IACrB,qBACE,sBAACE,4BAAa;QAACC,MAAK;OAAWF;;YAC5BD;0BACD,qBAACI;gBAAIC,aAAW;eAAKC,6DAAqC;;;AAGhE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import * as 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 @since 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"],"names":["LocaleProvider","value","children","ConfigProviderOverride","locale"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAmBgBA;;;eAAAA;;;;;iEAnBO;wCAEgB;AAiBhC,SAASA,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAuB;IACrE,qBAAO,qBAACC,8CAAsB;QAACC,QAAQH;kBAAQC;;AACjD"}
1	+ {"version":3,"sources":["../../../../src/components/LocaleProvider/LocaleProvider.tsx"],"sourcesContent":["import * as 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 @since 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"],"names":["LocaleProvider","value","children","ConfigProviderOverride","locale"],"mappings":";;;;+BAmBgBA;;;eAAAA;;;;;iEAnBO;wCAEgB;AAiBhC,SAASA,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAuB;IACrE,qBAAO,qBAACC,8CAAsB;QAACC,QAAQH;kBAAQC;;AACjD"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Mark.module.css';\n\nexport type MarkProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n Компонент используется для выделения фрагментов текста,\n * например при поиске определенных слов или выделения текста в цитате.\n \n @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/Mark\n */\nexport const Mark = (props: MarkProps) => (\n <RootComponent baseClassName={styles['Mark']} Component=\"mark\" {...props} />\n);\n"],"names":["Mark","props","RootComponent","baseClassName","Component"],"~~rangeMappings":";;;;;;;;;;;;;;;;","~~mappings":";;;;+BAaaA;;;eAAAA;;;;;+BAZiB;AAYvB,MAAMA,OAAO,CAACC,sBACnB,qBAACC,4BAAa;QAACC,aAAa;QAAkBC,WAAU;OAAWH"}
1	+ {"version":3,"sources":["../../../../src/components/Mark/Mark.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Mark.module.css';\n\nexport type MarkProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/*\n Компонент используется для выделения фрагментов текста,\n * например при поиске определенных слов или выделения текста в цитате.\n \n @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/Mark\n */\nexport const Mark = (props: MarkProps) => (\n <RootComponent baseClassName={styles['Mark']} Component=\"mark\" {...props} />\n);\n"],"names":["Mark","props","RootComponent","baseClassName","Component"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;+BAZiB;AAYvB,MAAMA,OAAO,CAACC,sBACnB,qBAACC,4BAAa;QAACC,aAAa;QAAkBC,WAAU;OAAWH"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nconst stylesMode = {\n add: styles['MiniInfoCell--mode-add'],\n accent: styles['MiniInfoCell--mode-accent'],\n more: styles['MiniInfoCell--mode-more'],\n};\n\nconst stylesTextWrap = {\n nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n full: styles['MiniInfoCell--textWrap-full'],\n short: styles['MiniInfoCell--textWrap-short'],\n};\n\nexport interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Иконка слева.<br />\n * Рекомендуется использовать иконки размера 20.\n /\n before?: React.ReactNode;\n\n /\n Содержимое справа.<br />\n * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n /\n after?: React.ReactNode;\n\n /\n Тип ячейки:\n \n - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n /\n mode?: 'base' \| 'accent' \| 'add' \| 'more';\n\n /\n Тип отображения текста:\n \n - `nowrap` – в одну строку, текст не переносится и обрезается.\n * - `short` – максимально отображается 3 строки, остальное обрезается.\n * - `full` – текст отображается полностью.\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 stylesTextWrap[textWrap],\n mode !== 'base' && stylesMode[mode],\n className,\n );\n\n const cellContent = (\n <React.Fragment>\n {hasReactNode(before) && <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 <RootComponent {...restProps} baseClassName={cellClasses}>\n {cellContent}\n </RootComponent>\n );\n};\n"],"names":["MiniInfoCell","stylesMode","add","accent","more","stylesTextWrap","nowrap","full","short","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","cellContent","React","Fragment","hasReactNode","span","div","Paragraph","weight","undefined","Icon16Chevron","onClick","Tappable","Component","role","RootComponent","baseClassName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BA8DaA;;;eAAAA;;;;;;;;iEA9DU;uBACO;sBACW;+BAEX;0BACL;2BACC;AAG1B,MAAMC,aAAa;IACjBC,GAAG;IACHC,MAAM;IACNC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AA2CO,MAAMR,eAAe;QAAC,EAC3BS,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,aAAa,KAAK,EAClBC,SAAS,EAES,WADfC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcC,IAAAA,gBAAU,sBAE5Bb,cAAc,CAACQ,SAAS,EACxBD,SAAS,UAAUX,UAAU,CAACW,KAAK,EACnCG;IAGF,MAAMI,4BACJ,sBAACC,OAAMC,QAAQ;;YACZC,IAAAA,kBAAY,EAACb,yBAAW,qBAACc;gBAAKR,SAAS;0BAAmCN;;0BAC3E,sBAACe;gBAAIT,SAAS;;kCACZ,qBAACU,oBAAS;wBACRV,SAAS;wBACTW,QAAQd,SAAS,SAAS,MAAMe;kCAE/BhB;;oBAEFG,4BAAc,qBAACc,oBAAa;;;YAE9BN,IAAAA,kBAAY,EAACZ,wBAAU,qBAACa;gBAAKR,SAAS;0BAAkCL;;;;IAI7E,OAAOM,UAAUa,OAAO,iBACtB,qBAACC,kBAAQ;QAACC,WAAU;QAAMC,MAAK;OAAahB;QAAWD,WAAWE;kBAC/DE;wBAGH,qBAACc,4BAAa,8CAAKjB;QAAWkB,eAAejB;kBAC1CE;;AAGP"}
1	+ {"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './MiniInfoCell.module.css';\n\nconst stylesMode = {\n add: styles['MiniInfoCell--mode-add'],\n accent: styles['MiniInfoCell--mode-accent'],\n more: styles['MiniInfoCell--mode-more'],\n};\n\nconst stylesTextWrap = {\n nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n full: styles['MiniInfoCell--textWrap-full'],\n short: styles['MiniInfoCell--textWrap-short'],\n};\n\nexport interface MiniInfoCellProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n /*\n Иконка слева.<br />\n * Рекомендуется использовать иконки размера 20.\n /\n before?: React.ReactNode;\n\n /\n Содержимое справа.<br />\n * `<UsersStack size=\"s\" />` или `<Avatar size={24} />`\n /\n after?: React.ReactNode;\n\n /\n Тип ячейки:\n \n - `base` – базовая ячейка с серой иконкой и серым текстом.<br />\n * В компонент можно передать `Link`, чтобы визуально сделать часть текста ссылкой.\n * - `add` – тип ячейки, который показывает, что взаимодействие с ней должно вызывать действие добавления чего-то.\n * - `more` – взаимодействие с такой ячейкой должно открывать какую-то подробную информацию.\n /\n mode?: 'base' \| 'accent' \| 'add' \| 'more';\n\n /\n Тип отображения текста:\n \n - `nowrap` – в одну строку, текст не переносится и обрезается.\n * - `short` – максимально отображается 3 строки, остальное обрезается.\n * - `full` – текст отображается полностью.\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 stylesTextWrap[textWrap],\n mode !== 'base' && stylesMode[mode],\n className,\n );\n\n const cellContent = (\n <React.Fragment>\n {hasReactNode(before) && <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 <RootComponent {...restProps} baseClassName={cellClasses}>\n {cellContent}\n </RootComponent>\n );\n};\n"],"names":["MiniInfoCell","stylesMode","add","accent","more","stylesTextWrap","nowrap","full","short","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","classNames","cellContent","React","Fragment","hasReactNode","span","div","Paragraph","weight","undefined","Icon16Chevron","onClick","Tappable","Component","role","RootComponent","baseClassName"],"mappings":";;;;+BA8DaA;;;eAAAA;;;;;;;;iEA9DU;uBACO;sBACW;+BAEX;0BACL;2BACC;AAG1B,MAAMC,aAAa;IACjBC,GAAG;IACHC,MAAM;IACNC,IAAI;AACN;AAEA,MAAMC,iBAAiB;IACrBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AA2CO,MAAMR,eAAe;QAAC,EAC3BS,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,aAAa,KAAK,EAClBC,SAAS,EAES,WADfC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcC,IAAAA,gBAAU,sBAE5Bb,cAAc,CAACQ,SAAS,EACxBD,SAAS,UAAUX,UAAU,CAACW,KAAK,EACnCG;IAGF,MAAMI,4BACJ,sBAACC,OAAMC,QAAQ;;YACZC,IAAAA,kBAAY,EAACb,yBAAW,qBAACc;gBAAKR,SAAS;0BAAmCN;;0BAC3E,sBAACe;gBAAIT,SAAS;;kCACZ,qBAACU,oBAAS;wBACRV,SAAS;wBACTW,QAAQd,SAAS,SAAS,MAAMe;kCAE/BhB;;oBAEFG,4BAAc,qBAACc,oBAAa;;;YAE9BN,IAAAA,kBAAY,EAACZ,wBAAU,qBAACa;gBAAKR,SAAS;0BAAkCL;;;;IAI7E,OAAOM,UAAUa,OAAO,iBACtB,qBAACC,kBAAQ;QAACC,WAAU;QAAMC,MAAK;OAAahB;QAAWD,WAAWE;kBAC/DE;wBAGH,qBAACc,4BAAa,8CAAKjB;QAAWkB,eAAejB;kBAC1CE;;AAGP"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n ios: styles['ModalCard--ios'],\n android: styles['ModalCard--android'],\n vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n icon,\n header,\n headerComponent,\n subheader,\n subheaderComponent,\n children,\n actions,\n onClose,\n nav,\n id,\n size,\n modalDismissButtonTestId,\n getRootRef,\n dismissButtonMode,\n dismissLabel,\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), 'card');\n const rootRef = useExternRef(getRootRef, refs.modalElement);\n\n const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootRef}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={contextValue.labelId}\n id={id}\n baseClassName={classNames(\n styles['ModalCard'],\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n isDesktop && styles['ModalCard--desktop'],\n )}\n >\n <ModalCardBase\n className={styles['ModalCard__in']}\n getRootRef={refs.innerElement}\n icon={icon}\n header={header}\n headerComponent={headerComponent}\n subheader={subheader}\n subheaderComponent={subheaderComponent}\n actions={actions}\n onClose={onClose \|\| modalContext.onClose}\n size={size}\n modalDismissButtonTestId={modalDismissButtonTestId}\n dismissButtonMode={dismissButtonMode}\n dismissLabel={dismissLabel}\n >\n {children}\n </ModalCardBase>\n </RootComponent>\n );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","headerComponent","subheader","subheaderComponent","children","actions","onClose","nav","id","size","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","rootRef","useExternRef","modalElement","contextValue","useMemo","labelId","RootComponent","tabIndex","role","aria-modal","aria-labelledby","baseClassName","classNames","hasOwnProperty","ModalCardBase","className","innerElement"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;iDACqB;8BACnB;6BACD;0BACS;0BACZ;+BACyB;kCACC;+BACrB;AAG9B,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMN,YAAY;QAAC,EACxBO,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,GAAG,EACHC,EAAE,EACFC,IAAI,EACJC,wBAAwB,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,YAAY,EAEG,WADZC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IACrD,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,eAAeC,OAAMC,UAAU,CAACC,kCAAgB;IACtD,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAElB;QAAKC;IAAG,GAAGX,OAAO;IAC/D,MAAM6B,UAAUC,IAAAA,0BAAY,EAAChB,YAAYY,KAAKK,YAAY;IAE1D,MAAMC,eAAeT,OAAMU,OAAO,CAAC,IAAO,CAAA;YAAEC,SAAS,CAAC,EAAEvB,GAAG,MAAM,CAAC;QAAC,CAAA,GAAI;QAACA;KAAG;IAE3E,qBACE,qBAACwB,4BAAa,8CACRlB;QACJH,YAAYe;QACZO,UAAU,CAAC;QACXC,MAAK;QACLC,cAAW;QACXC,mBAAiBP,aAAaE,OAAO;QACrCvB,IAAIA;QACJ6B,eAAeC,IAAAA,gBAAU,mBAEvB7C,mBAAmB8C,cAAc,CAACtB,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,OAAO,EAC9BoB;kBAGF,cAAA,qBAACyB,4BAAa;YACZC,SAAS;YACT9B,YAAYY,KAAKmB,YAAY;YAC7B3C,MAAMA;YACNC,QAAQA;YACRC,iBAAiBA;YACjBC,WAAWA;YACXC,oBAAoBA;YACpBE,SAASA;YACTC,SAASA,WAAWa,aAAab,OAAO;YACxCG,MAAMA;YACNC,0BAA0BA;YAC1BE,mBAAmBA;YACnBC,cAAcA;sBAEbT;;;AAIT"}
1	+ {"version":3,"sources":["../../../../src/components/ModalCard/ModalCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalCardBase, ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ModalCard.module.css';\n\nconst platformClassNames = {\n ios: styles['ModalCard--ios'],\n android: styles['ModalCard--android'],\n vkcom: styles['ModalCard--vkcom'],\n};\n\nexport interface ModalCardProps extends NavIdProps, ModalCardBaseProps {}\n\nconst warn = warnOnce('ModalCard');\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalCard\n */\nexport const ModalCard = ({\n icon,\n header,\n headerComponent,\n subheader,\n subheaderComponent,\n children,\n actions,\n onClose,\n nav,\n id,\n size,\n modalDismissButtonTestId,\n getRootRef,\n dismissButtonMode,\n dismissLabel,\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), 'card');\n const rootRef = useExternRef(getRootRef, refs.modalElement);\n\n const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootRef}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={contextValue.labelId}\n id={id}\n baseClassName={classNames(\n styles['ModalCard'],\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\n isDesktop && styles['ModalCard--desktop'],\n )}\n >\n <ModalCardBase\n className={styles['ModalCard__in']}\n getRootRef={refs.innerElement}\n icon={icon}\n header={header}\n headerComponent={headerComponent}\n subheader={subheader}\n subheaderComponent={subheaderComponent}\n actions={actions}\n onClose={onClose \|\| modalContext.onClose}\n size={size}\n modalDismissButtonTestId={modalDismissButtonTestId}\n dismissButtonMode={dismissButtonMode}\n dismissLabel={dismissLabel}\n >\n {children}\n </ModalCardBase>\n </RootComponent>\n );\n};\n"],"names":["ModalCard","platformClassNames","ios","android","vkcom","warn","warnOnce","icon","header","headerComponent","subheader","subheaderComponent","children","actions","onClose","nav","id","size","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","restProps","isDesktop","useAdaptivityWithJSMediaQueries","platform","usePlatform","modalContext","React","useContext","ModalRootContext","refs","useModalRegistry","getNavId","rootRef","useExternRef","modalElement","contextValue","useMemo","labelId","RootComponent","tabIndex","role","aria-modal","aria-labelledby","baseClassName","classNames","hasOwnProperty","ModalCardBase","className","innerElement"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;;iEAzBU;sBACI;iDACqB;8BACnB;6BACD;0BACS;0BACZ;+BACyB;kCACC;+BACrB;AAG9B,MAAMC,qBAAqB;IACzBC,GAAG;IACHC,OAAO;IACPC,KAAK;AACP;AAIA,MAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,MAAMN,YAAY;QAAC,EACxBO,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,SAAS,EACTC,kBAAkB,EAClBC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,GAAG,EACHC,EAAE,EACFC,IAAI,EACJC,wBAAwB,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,YAAY,EAEG,WADZC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IACrD,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,eAAeC,OAAMC,UAAU,CAACC,kCAAgB;IACtD,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,kCAAgB,EAACC,IAAAA,kBAAQ,EAAC;QAAElB;QAAKC;IAAG,GAAGX,OAAO;IAC/D,MAAM6B,UAAUC,IAAAA,0BAAY,EAAChB,YAAYY,KAAKK,YAAY;IAE1D,MAAMC,eAAeT,OAAMU,OAAO,CAAC,IAAO,CAAA;YAAEC,SAAS,CAAC,EAAEvB,GAAG,MAAM,CAAC;QAAC,CAAA,GAAI;QAACA;KAAG;IAE3E,qBACE,qBAACwB,4BAAa,8CACRlB;QACJH,YAAYe;QACZO,UAAU,CAAC;QACXC,MAAK;QACLC,cAAW;QACXC,mBAAiBP,aAAaE,OAAO;QACrCvB,IAAIA;QACJ6B,eAAeC,IAAAA,gBAAU,mBAEvB7C,mBAAmB8C,cAAc,CAACtB,YAC9BxB,kBAAkB,CAACwB,SAAS,GAC5BxB,mBAAmBE,OAAO,EAC9BoB;kBAGF,cAAA,qBAACyB,4BAAa;YACZC,SAAS;YACT9B,YAAYY,KAAKmB,YAAY;YAC7B3C,MAAMA;YACNC,QAAQA;YACRC,iBAAiBA;YACjBC,WAAWA;YACXC,oBAAoBA;YACpBE,SAASA;YACTC,SAASA,WAAWa,aAAab,OAAO;YACxCG,MAAMA;YACNC,0BAA0BA;YAC1BE,mBAAmBA;YACnBC,cAAcA;sBAEbT;;;AAIT"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps extends HTMLAttributesWithRootRef<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 headerComponent?: React.ElementType;\n\n /\n Подзаголовок\n /\n subheader?: React.ReactNode;\n / Позволяет поменять тег используемый для подзаголовка /\n subheaderComponent?: React.ElementType;\n\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `size=\"l\" mode=\"primary\" stretched`\n * - `size=\"l\" mode=\"secondary\" stretched`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `gap=\"s\" mode=\"horizontal\" stretched`\n * - `gap=\"m\" mode=\"vertical\" stretched`\n /\n actions?: React.ReactNode;\n\n onClose?: VoidFunction;\n\n /\n Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n /\n dismissLabel?: string;\n\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: number;\n\n /\n `data-testid` для кнопки закрытия\n /\n modalDismissButtonTestId?: string;\n /\n Расположение кнопки закрытия (внутри и вне `popout'a`)\n \n Доступно только в `compact`-режиме\n \n На `iOS` в `regular`-режиме всегда включен `inside`\n \n ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n /\n dismissButtonMode?: 'inside' \| 'outside' \| 'none';\n /\n Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n \n ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n /\n preventClose?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n icon,\n header,\n headerComponent = 'span',\n subheader,\n subheaderComponent = 'span',\n children,\n actions,\n onClose,\n dismissLabel = 'Скрыть',\n style,\n size: sizeProp,\n modalDismissButtonTestId,\n dismissButtonMode = 'outside',\n preventClose,\n ...restProps\n}: ModalCardBaseProps) => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n const size = isDesktop ? sizeProp : undefined;\n const withSafeZone =\n !icon &&\n (dismissButtonMode === 'inside' \|\|\n (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n const hasHeader = hasReactNode(header);\n const hasSubheader = hasReactNode(subheader);\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n 'vkuiInternalModalCardBase',\n platform === 'ios' && styles['ModalCardBase--ios'],\n isDesktop && styles['ModalCardBase--desktop'],\n withSafeZone && styles['ModalCardBase--withSafeZone'],\n )}\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\n level=\"2\"\n weight=\"2\"\n className={styles['ModalCardBase__header']}\n Component={headerComponent}\n >\n {header}\n </Title>\n )}\n {hasHeader && hasSubheader && <Spacing size={8} />}\n {hasSubheader && (\n <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n <Subhead className={styles['ModalCardBase__subheader']} Component={subheaderComponent}>\n {subheader}\n </Subhead>\n </AdaptivityContext.Provider>\n )}\n\n {children}\n\n {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n {dismissButtonMode !== 'none' && (\n <ModalCardBaseCloseButton\n testId={modalDismissButtonTestId}\n onClose={onClose}\n mode={dismissButtonMode}\n >\n {dismissLabel}\n </ModalCardBaseCloseButton>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["ModalCardBase","icon","header","headerComponent","subheader","subheaderComponent","children","actions","onClose","dismissLabel","style","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","undefined","withSafeZone","hasHeader","hasReactNode","hasSubheader","RootComponent","baseClassName","classNames","maxWidth","div","className","Title","level","weight","Component","Spacing","AdaptivityContext","Provider","value","sizeY","Subhead","ModalCardBaseCloseButton","testId","mode"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAsFaA;;;eAAAA;;;;;;;;iEAtFU;sBACkB;iDACO;6BACpB;6BACA;mCAEM;+BACJ;yBACN;yBACA;uBACF;0CACmB;AA2ElC,MAAMA,gBAAgB;QAAC,EAC5BC,IAAI,EACJC,MAAM,EACNC,kBAAkB,MAAM,EACxBC,SAAS,EACTC,qBAAqB,MAAM,EAC3BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,KAAK,EACLC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EAEO,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IACrD,MAAMC,2BAA2BC,IAAAA,wBAAW,IAAGC,QAAQ;IAEvD,MAAMZ,OAAOQ,YAAYP,WAAWY;IACpC,MAAMC,eACJ,CAACxB,QACAa,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACE,aAAaL,sBAAsB,MAAM;IAErE,MAAMY,YAAYC,IAAAA,kBAAY,EAACzB;IAC/B,MAAM0B,eAAeD,IAAAA,kBAAY,EAACvB;IAClC,qBACE,qBAACyB,4BAAa,8CACRb;QACJc,eAAeC,IAAAA,gBAAU,EACvB,6BACAd,aAAa,mCACbE,2CACAM;QAEFf,OAAO,4CACFA;YACHsB,UAAUrB;;kBAGZ,cAAA,sBAACsB;YACCC,WAAWH,IAAAA,gBAAU,kCAEnBV;;gBAGDM,IAAAA,kBAAY,EAAC1B,uBAAS,qBAACgC;oBAAIC,SAAS;8BAAkCjC;;gBACtE0B,IAAAA,kBAAY,EAACzB,yBACZ,qBAACiC,YAAK;oBACJC,OAAM;oBACNC,QAAO;oBACPH,SAAS;oBACTI,WAAWnC;8BAEVD;;gBAGJwB,aAAaE,8BAAgB,qBAACW,gBAAO;oBAAC5B,MAAM;;gBAC5CiB,8BACC,qBAACY,oCAAiB,CAACC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,qBAACC,gBAAO;wBAACV,SAAS;wBAAsCI,WAAWjC;kCAChED;;;gBAKNE;gBAEAqB,IAAAA,kBAAY,EAACpB,0BAAY,qBAAC0B;oBAAIC,SAAS;8BAAqC3B;;gBAE5EO,sBAAsB,wBACrB,qBAAC+B,kDAAwB;oBACvBC,QAAQjC;oBACRL,SAASA;oBACTuC,MAAMjC;8BAELL;;;;;AAMb"}
1	+ {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps extends HTMLAttributesWithRootRef<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 headerComponent?: React.ElementType;\n\n /\n Подзаголовок\n /\n subheader?: React.ReactNode;\n / Позволяет поменять тег используемый для подзаголовка /\n subheaderComponent?: React.ElementType;\n\n /\n Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n \n - `size=\"l\" mode=\"primary\" stretched`\n * - `size=\"l\" mode=\"secondary\" stretched`\n \n Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n \n - `gap=\"s\" mode=\"horizontal\" stretched`\n * - `gap=\"m\" mode=\"vertical\" stretched`\n /\n actions?: React.ReactNode;\n\n onClose?: VoidFunction;\n\n /\n Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n /\n dismissLabel?: string;\n\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: number;\n\n /\n `data-testid` для кнопки закрытия\n /\n modalDismissButtonTestId?: string;\n /\n Расположение кнопки закрытия (внутри и вне `popout'a`)\n \n Доступно только в `compact`-режиме\n \n На `iOS` в `regular`-режиме всегда включен `inside`\n \n ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n /\n dismissButtonMode?: 'inside' \| 'outside' \| 'none';\n /\n Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n \n ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n /\n preventClose?: boolean;\n}\n\n/\n @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n icon,\n header,\n headerComponent = 'span',\n subheader,\n subheaderComponent = 'span',\n children,\n actions,\n onClose,\n dismissLabel = 'Скрыть',\n style,\n size: sizeProp,\n modalDismissButtonTestId,\n dismissButtonMode = 'outside',\n preventClose,\n ...restProps\n}: ModalCardBaseProps) => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n const size = isDesktop ? sizeProp : undefined;\n const withSafeZone =\n !icon &&\n (dismissButtonMode === 'inside' \|\|\n (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n const hasHeader = hasReactNode(header);\n const hasSubheader = hasReactNode(subheader);\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n 'vkuiInternalModalCardBase',\n platform === 'ios' && styles['ModalCardBase--ios'],\n isDesktop && styles['ModalCardBase--desktop'],\n withSafeZone && styles['ModalCardBase--withSafeZone'],\n )}\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\n level=\"2\"\n weight=\"2\"\n className={styles['ModalCardBase__header']}\n Component={headerComponent}\n >\n {header}\n </Title>\n )}\n {hasHeader && hasSubheader && <Spacing size={8} />}\n {hasSubheader && (\n <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n <Subhead className={styles['ModalCardBase__subheader']} Component={subheaderComponent}>\n {subheader}\n </Subhead>\n </AdaptivityContext.Provider>\n )}\n\n {children}\n\n {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}\n\n {dismissButtonMode !== 'none' && (\n <ModalCardBaseCloseButton\n testId={modalDismissButtonTestId}\n onClose={onClose}\n mode={dismissButtonMode}\n >\n {dismissLabel}\n </ModalCardBaseCloseButton>\n )}\n </div>\n </RootComponent>\n );\n};\n"],"names":["ModalCardBase","icon","header","headerComponent","subheader","subheaderComponent","children","actions","onClose","dismissLabel","style","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","isSoftwareKeyboardOpened","useKeyboard","isOpened","undefined","withSafeZone","hasHeader","hasReactNode","hasSubheader","RootComponent","baseClassName","classNames","maxWidth","div","className","Title","level","weight","Component","Spacing","AdaptivityContext","Provider","value","sizeY","Subhead","ModalCardBaseCloseButton","testId","mode"],"mappings":";;;;+BAsFaA;;;eAAAA;;;;;;;;iEAtFU;sBACkB;iDACO;6BACpB;6BACA;mCAEM;+BACJ;yBACN;yBACA;uBACF;0CACmB;AA2ElC,MAAMA,gBAAgB;QAAC,EAC5BC,IAAI,EACJC,MAAM,EACNC,kBAAkB,MAAM,EACxBC,SAAS,EACTC,qBAAqB,MAAM,EAC3BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,KAAK,EACLC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EAEO,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IACrD,MAAMC,2BAA2BC,IAAAA,wBAAW,IAAGC,QAAQ;IAEvD,MAAMZ,OAAOQ,YAAYP,WAAWY;IACpC,MAAMC,eACJ,CAACxB,QACAa,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACE,aAAaL,sBAAsB,MAAM;IAErE,MAAMY,YAAYC,IAAAA,kBAAY,EAACzB;IAC/B,MAAM0B,eAAeD,IAAAA,kBAAY,EAACvB;IAClC,qBACE,qBAACyB,4BAAa,8CACRb;QACJc,eAAeC,IAAAA,gBAAU,EACvB,6BACAd,aAAa,mCACbE,2CACAM;QAEFf,OAAO,4CACFA;YACHsB,UAAUrB;;kBAGZ,cAAA,sBAACsB;YACCC,WAAWH,IAAAA,gBAAU,kCAEnBV;;gBAGDM,IAAAA,kBAAY,EAAC1B,uBAAS,qBAACgC;oBAAIC,SAAS;8BAAkCjC;;gBACtE0B,IAAAA,kBAAY,EAACzB,yBACZ,qBAACiC,YAAK;oBACJC,OAAM;oBACNC,QAAO;oBACPH,SAAS;oBACTI,WAAWnC;8BAEVD;;gBAGJwB,aAAaE,8BAAgB,qBAACW,gBAAO;oBAAC5B,MAAM;;gBAC5CiB,8BACC,qBAACY,oCAAiB,CAACC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,qBAACC,gBAAO;wBAACV,SAAS;wBAAsCI,WAAWjC;kCAChED;;;gBAKNE;gBAEAqB,IAAAA,kBAAY,EAACpB,0BAAY,qBAAC0B;oBAAIC,SAAS;8BAAqC3B;;gBAE5EO,sBAAsB,wBACrB,qBAAC+B,kDAAwB;oBACvBC,QAAQjC;oBACRL,SAASA;oBACTuC,MAAMjC;8BAELL;;;;;AAMb"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBaseCloseButton.tsx"],"sourcesContent":["import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalCardBase.module.css';\n\ninterface ModalCardBaseCloseButtonProps extends Omit<TappableProps, 'mode' \| 'onClose'> {\n onClose?: VoidFunction;\n testId?: string;\n mode?: 'inside' \| 'outside';\n}\n\nexport function ModalCardBaseCloseButton({\n children = 'Закрыть',\n testId,\n mode,\n onClose,\n}: ModalCardBaseCloseButtonProps) {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n if (isDesktop && mode === 'outside') {\n return (\n <ModalDismissButton data-testid={testId} onClick={onClose}>\n {children}\n </ModalDismissButton>\n );\n }\n\n if (mode === 'inside' \|\| (platform === 'ios' && !isDesktop)) {\n return (\n <Tappable\n className={styles['ModalCardBase__dismiss']}\n onClick={onClose}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n data-testid={testId}\n >\n <VisuallyHidden>{children}</VisuallyHidden>\n {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}\n </Tappable>\n );\n }\n\n return null;\n}\n"],"names":["ModalCardBaseCloseButton","children","testId","mode","onClose","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","ModalDismissButton","data-testid","onClick","Tappable","className","hoverMode","activeMode","VisuallyHidden","Icon24Dismiss","Icon20Cancel"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAcgBA;;;eAAAA;;;;uBAd4B;iDACI;6BACpB;oCACO;0BACK;gCACT;AASxB,SAASA,yBAAyB,EACvCC,WAAW,SAAS,EACpBC,MAAM,EACNC,IAAI,EACJC,OAAO,EACuB;IAC9B,MAAMC,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IAErD,IAAID,aAAaJ,SAAS,WAAW;QACnC,qBACE,qBAACM,sCAAkB;YAACC,eAAaR;YAAQS,SAASP;sBAC/CH;;IAGP;IAEA,IAAIE,SAAS,YAAaE,aAAa,SAAS,CAACE,WAAY;QAC3D,qBACE,sBAACK,kBAAQ;YACPC,SAAS;YACTF,SAASP;YACTU,WAAU;YACVC,YAAW;YACXL,eAAaR;;8BAEb,qBAACc,8BAAc;8BAAEf;;gBAChBI,aAAa,sBAAQ,qBAACY,oBAAa,sBAAM,qBAACC,mBAAY;;;IAG7D;IAEA,OAAO;AACT"}
1	+ {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBaseCloseButton.tsx"],"sourcesContent":["import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalCardBase.module.css';\n\ninterface ModalCardBaseCloseButtonProps extends Omit<TappableProps, 'mode' \| 'onClose'> {\n onClose?: VoidFunction;\n testId?: string;\n mode?: 'inside' \| 'outside';\n}\n\nexport function ModalCardBaseCloseButton({\n children = 'Закрыть',\n testId,\n mode,\n onClose,\n}: ModalCardBaseCloseButtonProps) {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n if (isDesktop && mode === 'outside') {\n return (\n <ModalDismissButton data-testid={testId} onClick={onClose}>\n {children}\n </ModalDismissButton>\n );\n }\n\n if (mode === 'inside' \|\| (platform === 'ios' && !isDesktop)) {\n return (\n <Tappable\n className={styles['ModalCardBase__dismiss']}\n onClick={onClose}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n data-testid={testId}\n >\n <VisuallyHidden>{children}</VisuallyHidden>\n {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}\n </Tappable>\n );\n }\n\n return null;\n}\n"],"names":["ModalCardBaseCloseButton","children","testId","mode","onClose","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","ModalDismissButton","data-testid","onClick","Tappable","className","hoverMode","activeMode","VisuallyHidden","Icon24Dismiss","Icon20Cancel"],"mappings":";;;;+BAcgBA;;;eAAAA;;;;uBAd4B;iDACI;6BACpB;oCACO;0BACK;gCACT;AASxB,SAASA,yBAAyB,EACvCC,WAAW,SAAS,EACpBC,MAAM,EACNC,IAAI,EACJC,OAAO,EACuB;IAC9B,MAAMC,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IAErD,IAAID,aAAaJ,SAAS,WAAW;QACnC,qBACE,qBAACM,sCAAkB;YAACC,eAAaR;YAAQS,SAASP;sBAC/CH;;IAGP;IAEA,IAAIE,SAAS,YAAaE,aAAa,SAAS,CAACE,WAAY;QAC3D,qBACE,sBAACK,kBAAQ;YACPC,SAAS;YACTF,SAASP;YACTU,WAAU;YACVC,YAAW;YACXL,eAAaR;;8BAEb,qBAACc,8BAAc;8BAAEf;;gBAChBI,aAAa,sBAAQ,qBAACY,oBAAa,sBAAM,qBAACC,mBAAY;;;IAG7D;IAEA,OAAO;AACT"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = Omit<TappableProps, 'mode' \| 'onClose'>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n children = 'Закрыть',\n className,\n ...restProps\n}: ModalDismissButtonProps) => {\n return (\n <Tappable\n className={classNames(styles['ModalDismissButton'], className)}\n {...restProps}\n activeMode={styles['ModalDismissButton--active']}\n hoverMode={styles['ModalDismissButton--hover']}\n >\n {children && <VisuallyHidden>{children}</VisuallyHidden>}\n <Icon20Cancel />\n </Tappable>\n );\n};\n"],"names":["ModalDismissButton","children","className","restProps","Tappable","classNames","activeMode","hoverMode","VisuallyHidden","Icon20Cancel"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAWaA;;;eAAAA;;;;;;;uBAXgB;sBACF;0BACkB;gCACd;AAQxB,MAAMA,qBAAqB;QAAC,EACjCC,WAAW,SAAS,EACpBC,SAAS,EAEe,WADrBC;QAFHF;QACAC;;IAGA,qBACE,sBAACE,kBAAQ;QACPF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAChDC;QACJG,UAAU;QACVC,SAAS;;YAERN,0BAAY,qBAACO,8BAAc;0BAAEP;;0BAC9B,qBAACQ,mBAAY;;;AAGnB"}
1	+ {"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalDismissButton.module.css';\n\nexport type ModalDismissButtonProps = Omit<TappableProps, 'mode' \| 'onClose'>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalDismissButton\n */\nexport const ModalDismissButton = ({\n children = 'Закрыть',\n className,\n ...restProps\n}: ModalDismissButtonProps) => {\n return (\n <Tappable\n className={classNames(styles['ModalDismissButton'], className)}\n {...restProps}\n activeMode={styles['ModalDismissButton--active']}\n hoverMode={styles['ModalDismissButton--hover']}\n >\n {children && <VisuallyHidden>{children}</VisuallyHidden>}\n <Icon20Cancel />\n </Tappable>\n );\n};\n"],"names":["ModalDismissButton","children","className","restProps","Tappable","classNames","activeMode","hoverMode","VisuallyHidden","Icon20Cancel"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;uBAXgB;sBACF;0BACkB;gCACd;AAQxB,MAAMA,qBAAqB;QAAC,EACjCC,WAAW,SAAS,EACpBC,SAAS,EAEe,WADrBC;QAFHF;QACAC;;IAGA,qBACE,sBAACE,kBAAQ;QACPF,WAAWG,IAAAA,gBAAU,4BAA+BH;OAChDC;QACJG,UAAU;QACVC,SAAS;;YAERN,0BAAY,qBAACO,8BAAc;0BAAEP;;0BAC9B,qBAACQ,mBAAY;;;AAGnB"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ModalPageContext } from './ModalPageContext';\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 HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n /*\n Шапка модальной страницы, `<ModalPageHeader />`\n /\n header?: React.ReactNode;\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: 's' \| 'm' \| 'l' \| number;\n /\n Задаёт модальному окну фиксированную высоту.\n * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах \"50%\".\n * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.\n /\n height?: string \| 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 modalContentTestId?: string;\n /\n `data-testid` для кнопки закрытия\n /\n modalDismissButtonTestId?: string;\n /\n Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n \n ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n /\n preventClose?: 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: idProp,\n hideCloseButton = false,\n height,\n modalContentTestId,\n modalDismissButtonTestId,\n getRootRef,\n preventClose,\n ...restProps\n}: ModalPageProps) => {\n const generatingId = React.useId();\n const id = idProp \|\| generatingId;\n\n const { updateModalHeight } = React.useContext(ModalRootContext);\n\n const platform = usePlatform();\n const orientation = useOrientationChange();\n const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n React.useEffect(() => {\n if (dynamicContentHeight) {\n updateModalHeight();\n }\n }, [children, dynamicContentHeight, 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), 'page');\n const rootRef = useExternRef(getRootRef, refs.modalElement);\n\n const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n return (\n <ModalPageContext.Provider value={contextValue}>\n <RootComponent\n {...restProps}\n getRootRef={rootRef}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={contextValue.labelId}\n id={id}\n baseClassName={classNames(\n styles['ModalPage'],\n platform === 'ios' && styles['ModalPage--ios'],\n isDesktop && styles['ModalPage--desktop'],\n sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n typeof size === 'string' && sizeClassName[size],\n )}\n >\n <div\n className={styles['ModalPage__in-wrap']}\n style={{\n maxWidth: typeof size === 'number' ? size : undefined,\n height,\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 {...(modalContentTestId && { 'data-testid': modalContentTestId })}\n >\n <div className={styles['ModalPage__content-in']}>{children}</div>\n </div>\n <div ref={refs.bottomInset} className={styles['ModalPage__bottom-inset']} />\n </div>\n {isCloseButtonShown && (\n <ModalDismissButton\n data-testid={modalDismissButtonTestId}\n onClick={onClose \|\| modalContext.onClose}\n />\n )}\n </div>\n </div>\n </RootComponent>\n </ModalPageContext.Provider>\n );\n};\n"],"names":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","height","modalContentTestId","modalDismissButtonTestId","getRootRef","preventClose","restProps","generatingId","React","useId","updateModalHeight","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","sizeX","isDesktop","useAdaptivityWithJSMediaQueries","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","rootRef","useExternRef","modalElement","contextValue","useMemo","labelId","ModalPageContext","Provider","value","RootComponent","tabIndex","role","aria-modal","aria-labelledby","baseClassName","classNames","div","className","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","bottomInset","ModalDismissButton","data-testid","onClick"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ModalPageContext } from './ModalPageContext';\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 HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n /*\n Шапка модальной страницы, `<ModalPageHeader />`\n /\n header?: React.ReactNode;\n /\n Задаёт контенту максимальную ширину для десктопной версии.\n /\n size?: 's' \| 'm' \| 'l' \| number;\n /\n Задаёт модальному окну фиксированную высоту.\n * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах \"50%\".\n * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.\n /\n height?: string \| 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 modalContentTestId?: string;\n /\n `data-testid` для кнопки закрытия\n /\n modalDismissButtonTestId?: string;\n /\n Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n \n ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n /\n preventClose?: 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: idProp,\n hideCloseButton = false,\n height,\n modalContentTestId,\n modalDismissButtonTestId,\n getRootRef,\n preventClose,\n ...restProps\n}: ModalPageProps) => {\n const generatingId = React.useId();\n const id = idProp \|\| generatingId;\n\n const { updateModalHeight } = React.useContext(ModalRootContext);\n\n const platform = usePlatform();\n const orientation = useOrientationChange();\n const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n React.useEffect(() => {\n if (dynamicContentHeight) {\n updateModalHeight();\n }\n }, [children, dynamicContentHeight, 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), 'page');\n const rootRef = useExternRef(getRootRef, refs.modalElement);\n\n const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n return (\n <ModalPageContext.Provider value={contextValue}>\n <RootComponent\n {...restProps}\n getRootRef={rootRef}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={contextValue.labelId}\n id={id}\n baseClassName={classNames(\n styles['ModalPage'],\n platform === 'ios' && styles['ModalPage--ios'],\n isDesktop && styles['ModalPage--desktop'],\n sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n typeof size === 'string' && sizeClassName[size],\n )}\n >\n <div\n className={styles['ModalPage__in-wrap']}\n style={{\n maxWidth: typeof size === 'number' ? size : undefined,\n height,\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 {...(modalContentTestId && { 'data-testid': modalContentTestId })}\n >\n <div className={styles['ModalPage__content-in']}>{children}</div>\n </div>\n <div ref={refs.bottomInset} className={styles['ModalPage__bottom-inset']} />\n </div>\n {isCloseButtonShown && (\n <ModalDismissButton\n data-testid={modalDismissButtonTestId}\n onClick={onClose \|\| modalContext.onClose}\n />\n )}\n </div>\n </div>\n </RootComponent>\n </ModalPageContext.Provider>\n );\n};\n"],"names":["ModalPage","sizeClassName","s","m","l","warn","warnOnce","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","height","modalContentTestId","modalDismissButtonTestId","getRootRef","preventClose","restProps","generatingId","React","useId","updateModalHeight","useContext","ModalRootContext","platform","usePlatform","orientation","useOrientationChange","sizeX","isDesktop","useAdaptivityWithJSMediaQueries","useEffect","isCloseButtonShown","modalContext","refs","useModalRegistry","getNavId","rootRef","useExternRef","modalElement","contextValue","useMemo","labelId","ModalPageContext","Provider","value","RootComponent","tabIndex","role","aria-modal","aria-labelledby","baseClassName","classNames","div","className","style","maxWidth","undefined","ref","innerElement","headerElement","multiRef","contentElement","bottomInset","ModalDismissButton","data-testid","onClick"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalPage/ModalPageContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface ModalPageContextInterface {\n labelId?: string;\n}\n\nexport const ModalPageContext = React.createContext<ModalPageContextInterface>({});\n"],"names":["ModalPageContext","React","createContext"],"~~rangeMappings":";;;;;;;;;;;;","~~mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;AAMhB,MAAMA,iCAAmBC,OAAMC,aAAa,CAA4B,CAAC"}
1	+ {"version":3,"sources":["../../../../src/components/ModalPage/ModalPageContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface ModalPageContextInterface {\n labelId?: string;\n}\n\nexport const ModalPageContext = React.createContext<ModalPageContextInterface>({});\n"],"names":["ModalPageContext","React","createContext"],"mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;AAMhB,MAAMA,iCAAmBC,OAAMC,aAAa,CAA4B,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ModalPageContext } from '../ModalPage/ModalPageContext';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Omit<PanelHeaderProps, 'fixed' \| 'shadow' \| 'delimiter'>,\n HasRef<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n noSeparator?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n children,\n noSeparator = false,\n getRootRef,\n className,\n typographyProps,\n ...restProps\n}: ModalPageHeaderProps) => {\n const platform = usePlatform();\n const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();\n const { labelId } = React.useContext(ModalPageContext);\n\n return (\n <div\n className={classNames(\n styles['ModalPageHeader'],\n platform !== 'vkcom' && styles['ModalPageHeader--withGaps'],\n isDesktop && styles['ModalPageHeader--desktop'],\n )}\n ref={getRootRef}\n >\n <PanelHeader\n className={classNames('vkuiInternalModalPageHeader__in', className)}\n typographyProps={{\n Component: 'h2',\n id: labelId,\n ...typographyProps,\n }}\n {...restProps}\n fixed={false}\n delimiter=\"none\"\n transparent\n >\n {children}\n </PanelHeader>\n {!noSeparator && <Separator wide={sizeX === 'regular'} />}\n </div>\n );\n};\n"],"names":["ModalPageHeader","children","noSeparator","getRootRef","className","typographyProps","restProps","platform","usePlatform","isDesktop","sizeX","useAdaptivityWithJSMediaQueries","labelId","React","useContext","ModalPageContext","div","classNames","ref","PanelHeader","Component","id","fixed","delimiter","transparent","Separator","wide"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;;iEArBU;sBACI;iDACqB;6BACpB;kCAEK;6BACa;2BACpB;AAcnB,MAAMA,kBAAkB;QAAC,EAC9BC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,eAAe,EAEM,WADlBC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gEAA+B;IAC5D,MAAM,EAAEC,OAAO,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAErD,qBACE,sBAACC;QACCZ,WAAWa,IAAAA,gBAAU,yBAEnBV,aAAa,4CACbE;QAEFS,KAAKf;;0BAEL,qBAACgB,wBAAW;gBACVf,WAAWa,IAAAA,gBAAU,EAAC,mCAAmCb;gBACzDC,iBAAiB;oBACfe,WAAW;oBACXC,IAAIT;mBACDP;eAEDC;gBACJgB,OAAO;gBACPC,WAAU;gBACVC,WAAW;0BAEVvB;;YAEF,CAACC,6BAAe,qBAACuB,oBAAS;gBAACC,MAAMhB,UAAU;;;;AAGlD"}
1	+ {"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ModalPageContext } from '../ModalPage/ModalPageContext';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Omit<PanelHeaderProps, 'fixed' \| 'shadow' \| 'delimiter'>,\n HasRef<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n noSeparator?: boolean;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n children,\n noSeparator = false,\n getRootRef,\n className,\n typographyProps,\n ...restProps\n}: ModalPageHeaderProps) => {\n const platform = usePlatform();\n const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();\n const { labelId } = React.useContext(ModalPageContext);\n\n return (\n <div\n className={classNames(\n styles['ModalPageHeader'],\n platform !== 'vkcom' && styles['ModalPageHeader--withGaps'],\n isDesktop && styles['ModalPageHeader--desktop'],\n )}\n ref={getRootRef}\n >\n <PanelHeader\n className={classNames('vkuiInternalModalPageHeader__in', className)}\n typographyProps={{\n Component: 'h2',\n id: labelId,\n ...typographyProps,\n }}\n {...restProps}\n fixed={false}\n delimiter=\"none\"\n transparent\n >\n {children}\n </PanelHeader>\n {!noSeparator && <Separator wide={sizeX === 'regular'} />}\n </div>\n );\n};\n"],"names":["ModalPageHeader","children","noSeparator","getRootRef","className","typographyProps","restProps","platform","usePlatform","isDesktop","sizeX","useAdaptivityWithJSMediaQueries","labelId","React","useContext","ModalPageContext","div","classNames","ref","PanelHeader","Component","id","fixed","delimiter","transparent","Separator","wide"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;;iEArBU;sBACI;iDACqB;6BACpB;kCAEK;6BACa;2BACpB;AAcnB,MAAMA,kBAAkB;QAAC,EAC9BC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,eAAe,EAEM,WADlBC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gEAA+B;IAC5D,MAAM,EAAEC,OAAO,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAErD,qBACE,sBAACC;QACCZ,WAAWa,IAAAA,gBAAU,yBAEnBV,aAAa,4CACbE;QAEFS,KAAKf;;0BAEL,qBAACgB,wBAAW;gBACVf,WAAWa,IAAAA,gBAAU,EAAC,mCAAmCb;gBACzDC,iBAAiB;oBACfe,WAAW;oBACXC,IAAIT;mBACDP;eAEDC;gBACJgB,OAAO;gBACPC,WAAU;gBACVC,WAAW;0BAEVvB;;YAEF,CAACC,6BAAe,qBAACuB,oBAAS;gBAACC,MAAMhB,UAAU;;;;AAGlD"}

package/dist/cjs/components/ModalRoot/ModalRoot.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;~~AAiB~~/B,OAAO,EAAE,qBAAqB,EAAoC,MAAM,SAAS,CAAC;~~AA6mBlF~~,eAAO,MAAM,cAAc,mDAM1B,CAAC"}
1	+ {"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,EAAE,qBAAqB,EAAoC,MAAM,SAAS,CAAC;AA0mBlF,eAAO,MAAM,cAAc,mDAM1B,CAAC"}

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

@@ -22,7 +22,6 @@ const _withPlatform = require("../../hoc/withPlatform");
 const _dom = require("../../lib/dom");
 const _getNavId = require("../../lib/getNavId");
 const _styles = require("../../lib/styles");
-const _supportEvents = require("../../lib/supportEvents");
 const _touch = require("../../lib/touch");
 const _warnOnce = require("../../lib/warnOnce");
 const _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
@@ -349,14 +348,11 @@ class ModalRootTouchComponent extends _react.Component {
         }, setStateCallback);
     }
     waitTransitionFinish(modalState, eventHandler) {
-        if (_supportEvents.transitionEvent.supported) {
-            var _modalState_innerElement;
-            const onceHandler = ()=>{
-                var _modalState_innerElement;
-                modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.removeEventListener(_supportEvents.transitionEvent.name, onceHandler);
-                eventHandler();
-            };
-            modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.addEventListener(_supportEvents.transitionEvent.name, onceHandler);
+        const el = modalState ? modalState.innerElement : null;
+        if (el) {
+            el.addEventListener('transitionend', eventHandler, {
+                once: true
+            });
         } else {
             setTimeout(eventHandler, this.timeout);
         }
@@ -429,6 +425,7 @@ class ModalRootTouchComponent extends _react.Component {
                                     onClose: this.props.onExit,
                                     timeout: this.timeout,
                                     className: (0, _vkjs.classNames)("vkuiModalRoot__modal", dragging && 'vkuiInternalModalRoot__modal--dragging', isPage && modalState.expandable && 'vkuiInternalModalRoot__modal--expandable', isPage && modalState.collapsed && 'vkuiInternalModalRoot__modal--collapsed'),
+                                    autoFocus: false,
                                     restoreFocus: false,
                                     children: Modal
                                 }, key);