npm - @vkontakte/vkui - Versions diffs - 5.5.4 → 5.6.0 - Mend

@vkontakte/vkui 5.5.4 → 5.6.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 (1179) hide show

package/dist/cssm/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 { 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"],"names":["React","classNames","callMultiple","stopPropagation","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","tabIndex","ref","slice","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAOC,YAAY,yBAAyB;AAW5C,MAAMC,cAAcC,OAAOC,~~aAAa~~;AAExC,SAASC,gBAAgBC,MAAc;IACrC,MAAMC,SAAS,EAAE;IACjB,IAAK,IAAIC,QAAQ,GAAGA,QAAQF,QAAQE,SAAS,EAAG;QAC9CD,OAAOE,~~mBACL~~,oBAACC;YAAKC,KAAKH;YAAOI,WAAWX,MAAM,CAAC,kBAAkB;WACnDC;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,MAAMM,YAAY,CAAC,EACxBC,~~MAAK~~,EACLR,~~OAAM~~,EACNE,~~MAAK~~,EACLO,~~gBAAe~~,EACfC,~~QAAO~~,EACPC,~~QAAO~~,EACPC,~~WAAU~~,EACVN,~~UAAS~~,EACT,GAAGO,OACY;IACf,MAAMC,sBAAsBvB,MAAMwB,~~YAChC~~,CAACC;QACCtB,gBAAgBsB;QAChBP,kBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;IAG1B,qBACE,oBAACL;QACCE,WAAWd,WACTG,MAAM,CAAC,YAAY,EACnBa,OAAOR,WAAWA,UAAUL,MAAM,CAAC,kBAAkB,EACrDW;QAEFW,UAAU;QACVC,KAAKN;QACLF,SAASjB,aAAaiB,SAASI;QAC/BH,SAASlB,aAAaC,iBAAiBiB;QACtC,GAAGE,KAAK;OAERL,OAAOW,MAAM,GAAGnB,SAAS,IACzBQ,OAAOW,MAAMnB,SAAS,oBACrB,oBAACI;QAAKC,KAAKH;QAAOI,WAAWX,MAAM,CAAC,4BAA4B;OAC7Da,MAAMW,~~MAAMnB~~,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,OAAOR,UAAU,CAAA;AAGlD,EAAE;AAEFO,UAAUa,~~cAAc~~"}
1	+ {"version":3,"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"],"names":["React","classNames","callMultiple","stopPropagation","styles","MASK_SYMBOL","String","fromCharCode","getMaskElements","length","result","index","push","span","key","className","InputLike","value","onElementSelect","onClick","onFocus","getRootRef","props","handleElementSelect","useCallback","event","tabIndex","ref","slice","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,eAAe,QAAQ,kBAAkB;AAElD,OAAOC,YAAY,yBAAyB;AAW5C,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,oBAACC;YAAKC,KAAKH;YAAOI,WAAWX,MAAM,CAAC,kBAAkB;WACnDC;IAGP;IACA,OAAOK;AACT;AAEA,OAAO,MAAMM,YAAY,CAAC,EACxBC,KAAK,EACLR,MAAM,EACNE,KAAK,EACLO,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,UAAU,EACVN,SAAS,EACT,GAAGO,OACY;IACf,MAAMC,sBAAsBvB,MAAMwB,WAAW,CAC3C,CAACC;QACCtB,gBAAgBsB;QAChBP,kBAAkBP;IACpB,GACA;QAACA;QAAOO;KAAgB;IAG1B,qBACE,oBAACL;QACCE,WAAWd,WACTG,MAAM,CAAC,YAAY,EACnBa,OAAOR,WAAWA,UAAUL,MAAM,CAAC,kBAAkB,EACrDW;QAEFW,UAAU;QACVC,KAAKN;QACLF,SAASjB,aAAaiB,SAASI;QAC/BH,SAASlB,aAAaC,iBAAiBiB;QACtC,GAAGE,KAAK;OAERL,OAAOW,MAAM,GAAGnB,SAAS,IACzBQ,OAAOW,MAAMnB,SAAS,oBACrB,oBAACI;QAAKC,KAAKH;QAAOI,WAAWX,MAAM,CAAC,4BAA4B;OAC7Da,MAAMW,KAAK,CAACnB,SAAS,KAGzBD,gBAAgBC,SAAUQ,CAAAA,OAAOR,UAAU,CAAA;AAGlD,EAAE;AAEFO,UAAUa,WAAW,GAAG"}

package/dist/cssm/components/InputLike/InputLikeDivider.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import styles from './InputLike.module.css';
-export const InputLikeDivider = ({ children , className , ...props })=>{
+export const InputLikeDivider = ({ children, className, ...props })=>{
     return /*#__PURE__*/ React.createElement("span", {
         className: classNames(styles['InputLike__divider'], className),
         ...props

package/dist/cssm/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":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,~~SAAQ~~,EACRC,~~UAAS~~,EACT,GAAGC,OACwC;IAC3C,qBACE,oBAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;OAC5EF;AAGP,EAAE"}
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":["React","classNames","styles","InputLikeDivider","children","className","props","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACwC;IAC3C,qBACE,oBAACC;QAAKF,WAAWJ,WAAWC,MAAM,CAAC,qBAAqB,EAAEG;QAAa,GAAGC,KAAK;OAC5EF;AAGP,EAAE"}

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

@@ -4,7 +4,7 @@ import { Tappable } from '../Tappable/Tappable';
 import styles from './Link.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
- */ export const Link = ({ hasVisited , children , className , ...restProps })=>{
+ */ export const Link = ({ hasVisited, children, className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Tappable, {
         Component: restProps.href ? 'a' : 'button',
         ...restProps,

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

	@@ -1 +1 @@
1	- {"version":3,"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"],"names":["React","classNames","Tappable","styles","Link","hasVisited","children","className","restProps","Component","href","hasHover","activeMode","focusVisibleMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,~~WAAU~~,EAAEC,~~SAAQ~~,EAAEC,~~UAAS~~,EAAE,GAAGC,WAAsB;IAC/E,qBACE,oBAACN;QACCO,WAAWD,UAAUE,~~OAAO~~,MAAM;QACjC,GAAGF,SAAS;QACbD,WAAWN,WAAWE,MAAM,CAAC,OAAO,EAAEE,cAAcF,MAAM,CAAC,oBAAoB,EAAEI;QACjFI,UAAU;QACVC,YAAW;QACXC,kBAAkBV,MAAM,CAAC,sBAAsB;OAE9CG;AAGP,EAAE"}
1	+ {"version":3,"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"],"names":["React","classNames","Tappable","styles","Link","hasVisited","children","className","restProps","Component","href","hasHover","activeMode","focusVisibleMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,OAAOC,YAAY,oBAAoB;AASvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAsB;IAC/E,qBACE,oBAACN;QACCO,WAAWD,UAAUE,IAAI,GAAG,MAAM;QACjC,GAAGF,SAAS;QACbD,WAAWN,WAAWE,MAAM,CAAC,OAAO,EAAEE,cAAcF,MAAM,CAAC,oBAAoB,EAAEI;QACjFI,UAAU;QACVC,YAAW;QACXC,kBAAkBV,MAAM,CAAC,sBAAsB;OAE9CG;AAGP,EAAE"}

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

@@ -4,7 +4,7 @@ import { ListContext } from './ListContext';
 import styles from './List.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/List
- */ export const List = ({ children , className , ...restProps })=>{
+ */ export const List = ({ children, className, ...restProps })=>{
     const [isDragging, toggleDrag] = React.useState(false);
     return /*#__PURE__*/ React.createElement("div", {
         role: "list",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n const [isDragging, toggleDrag] = React.useState(false);\n\n return (\n <div\n role=\"list\"\n {...restProps}\n className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n >\n <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n {children}\n </ListContext.Provider>\n </div>\n );\n};\n"],"names":["React","classNames","ListContext","styles","List","children","className","restProps","isDragging","toggleDrag","useState","div","role","Provider","value","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAIvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,~~SAAQ~~,EAAEC,~~UAAS~~,EAAE,GAAGC,WAAsB;IACnE,MAAM,CAACC,YAAYC,WAAW,GAAGT,MAAMU,~~SAAS~~;IAEhD,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGL,SAAS;QACbD,WAAWL,WAAWE,MAAM,CAAC,OAAO,EAAEK,cAAc,8BAA8BF;qBAElF,oBAACJ,YAAYW;~~QAASC~~,OAAOd,MAAMe,~~QAAQ~~,IAAO,CAAA;gBAAEN;YAAW,CAAA,GAAI,EAAE;OAClEJ;AAIT,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ListContext } from './ListContext';\nimport styles from './List.module.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement>;\n\n/*\n @see https://vkcom.github.io/VKUI/#/List\n */\nexport const List = ({ children, className, ...restProps }: ListProps) => {\n const [isDragging, toggleDrag] = React.useState(false);\n\n return (\n <div\n role=\"list\"\n {...restProps}\n className={classNames(styles['List'], isDragging && 'vkuiInternalList--dragging', className)}\n >\n <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>\n {children}\n </ListContext.Provider>\n </div>\n );\n};\n"],"names":["React","classNames","ListContext","styles","List","children","className","restProps","isDragging","toggleDrag","useState","div","role","Provider","value","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAIvC;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAsB;IACnE,MAAM,CAACC,YAAYC,WAAW,GAAGT,MAAMU,QAAQ,CAAC;IAEhD,qBACE,oBAACC;QACCC,MAAK;QACJ,GAAGL,SAAS;QACbD,WAAWL,WAAWE,MAAM,CAAC,OAAO,EAAEK,cAAc,8BAA8BF;qBAElF,oBAACJ,YAAYW,QAAQ;QAACC,OAAOd,MAAMe,OAAO,CAAC,IAAO,CAAA;gBAAEN;YAAW,CAAA,GAAI,EAAE;OAClEJ;AAIT,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const ListContext = React.createContext({\n toggleDrag: noop as (value: boolean) => void,\n});\n"],"names":["React","noop","ListContext","createContext","toggleDrag"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,cAAcF,MAAMG,~~cAAc~~;IAC7CC,YAAYH;AACd,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/List/ListContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\n\nexport const ListContext = React.createContext({\n toggleDrag: noop as (value: boolean) => void,\n});\n"],"names":["React","noop","ListContext","createContext","toggleDrag"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAO,MAAMC,cAAcF,MAAMG,aAAa,CAAC;IAC7CC,YAAYH;AACd,GAAG"}

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

@@ -6,7 +6,7 @@ import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride
  *
  * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
- */ export function LocaleProvider({ value , children  }) {
+ */ export function LocaleProvider({ value, children }) {
     return /*#__PURE__*/ React.createElement(ConfigProviderOverride, {
         locale: value
     }, children);

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

	@@ -1 +1 @@
1	- {"version":3,"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 @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":["React","ConfigProviderOverride","LocaleProvider","value","children","locale"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAE1B,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;;CAMC,GACD,OAAO,SAASC,eAAe,EAAEC,~~MAAK~~,EAAEC,~~SAAQ~~,EAAuB;IACrE,qBAAO,oBAACH;QAAuBI,QAAQF;OAAQC;AACjD"}
1	+ {"version":3,"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 @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":["React","ConfigProviderOverride","LocaleProvider","value","children","locale"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAE1B,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;;CAMC,GACD,OAAO,SAASC,eAAe,EAAEC,KAAK,EAAEC,QAAQ,EAAuB;IACrE,qBAAO,oBAACH;QAAuBI,QAAQF;OAAQC;AACjD"}

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

@@ -6,7 +6,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import styles from './MiniInfoCell.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
- */ export const MiniInfoCell = ({ before , after , children , mode ='base' , textWrap ='nowrap' , expandable =false , className , ...restProps })=>{
+ */ export const MiniInfoCell = ({ before, after, children, mode = 'base', textWrap = 'nowrap', expandable = false, className, ...restProps })=>{
     const cellClasses = classNames(styles['MiniInfoCell'], {
         nowrap: styles['MiniInfoCell--textWrap-nowrap'],
         full: styles['MiniInfoCell--textWrap-full'],

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { 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 {\n nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n full: styles['MiniInfoCell--textWrap-full'],\n short: styles['MiniInfoCell--textWrap-short'],\n }[textWrap],\n mode !== 'base' &&\n {\n add: styles['MiniInfoCell--mode-add'],\n accent: styles['MiniInfoCell--mode-accent'],\n more: styles['MiniInfoCell--mode-more'],\n }[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"],"names":["React","Icon16Chevron","classNames","hasReactNode","Tappable","Paragraph","styles","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","nowrap","full","short","add","accent","more","cellContent","Fragment","span","div","weight","undefined","onClick","Component","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,4BAA4B;AAwC/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAC3BC,~~OAAM~~,EACNC,~~MAAK~~,EACLC,~~SAAQ~~,EACRC,~~MAAO~~,~~OAAM~~,EACbC,~~UAAW~~,~~SAAQ~~,EACnBC,~~YAAa~~,~~MAAK~~,EAClBC,~~UAAS~~,EACT,GAAGC,WACe;IAClB,MAAMC,cAAcd,WAClBI,MAAM,CAAC,eAAe,EACtB;QACEW,QAAQX,MAAM,CAAC,gCAAgC;QAC/CY,MAAMZ,MAAM,CAAC,8BAA8B;QAC3Ca,OAAOb,MAAM,CAAC,+BAA+B;IAC/C,CAAC,CAACM,SAAS,EACXD,SAAS,UACP,CAAA;QACES,KAAKd,MAAM,CAAC,yBAAyB;QACrCe,QAAQf,MAAM,CAAC,4BAA4B;QAC3CgB,MAAMhB,MAAM,CAAC,0BAA0B;IACzC,CAAA,CAAC,CAACK,KAAK,EACTG;IAGF,MAAMS,4BACJ,oBAACvB,MAAMwB,~~8BACL~~,oBAACC;QAAKX,WAAWR,MAAM,CAAC,uBAAuB;OAAGE,uBAClD,oBAACkB;QAAIZ,WAAWR,MAAM,CAAC,uBAAuB;qBAC5C,oBAACD;QACCS,WAAWR,MAAM,CAAC,wBAAwB;QAC1CqB,QAAQhB,SAAS,SAAS,MAAMiB;OAE/BlB,WAEFG,4BAAc,oBAACZ,uBAEjBE,aAAaM,wBAAU,oBAACgB;QAAKX,WAAWR,MAAM,CAAC,sBAAsB;OAAGG;IAI7E,OAAOM,UAAUc,~~wBACf~~,oBAACzB;QAAS0B,WAAU;QAAMC,MAAK;QAAU,GAAGhB,SAAS;QAAED,WAAWE;OAC/DO,6BAGH,oBAACG;QAAK,GAAGX,SAAS;QAAED,WAAWE;OAC5BO;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/MiniInfoCell/MiniInfoCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { 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 {\n nowrap: styles['MiniInfoCell--textWrap-nowrap'],\n full: styles['MiniInfoCell--textWrap-full'],\n short: styles['MiniInfoCell--textWrap-short'],\n }[textWrap],\n mode !== 'base' &&\n {\n add: styles['MiniInfoCell--mode-add'],\n accent: styles['MiniInfoCell--mode-accent'],\n more: styles['MiniInfoCell--mode-more'],\n }[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"],"names":["React","Icon16Chevron","classNames","hasReactNode","Tappable","Paragraph","styles","MiniInfoCell","before","after","children","mode","textWrap","expandable","className","restProps","cellClasses","nowrap","full","short","add","accent","more","cellContent","Fragment","span","div","weight","undefined","onClick","Component","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,4BAA4B;AAwC/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAC3BC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,MAAM,EACbC,WAAW,QAAQ,EACnBC,aAAa,KAAK,EAClBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,cAAcd,WAClBI,MAAM,CAAC,eAAe,EACtB;QACEW,QAAQX,MAAM,CAAC,gCAAgC;QAC/CY,MAAMZ,MAAM,CAAC,8BAA8B;QAC3Ca,OAAOb,MAAM,CAAC,+BAA+B;IAC/C,CAAC,CAACM,SAAS,EACXD,SAAS,UACP,CAAA;QACES,KAAKd,MAAM,CAAC,yBAAyB;QACrCe,QAAQf,MAAM,CAAC,4BAA4B;QAC3CgB,MAAMhB,MAAM,CAAC,0BAA0B;IACzC,CAAA,CAAC,CAACK,KAAK,EACTG;IAGF,MAAMS,4BACJ,oBAACvB,MAAMwB,QAAQ,sBACb,oBAACC;QAAKX,WAAWR,MAAM,CAAC,uBAAuB;OAAGE,uBAClD,oBAACkB;QAAIZ,WAAWR,MAAM,CAAC,uBAAuB;qBAC5C,oBAACD;QACCS,WAAWR,MAAM,CAAC,wBAAwB;QAC1CqB,QAAQhB,SAAS,SAAS,MAAMiB;OAE/BlB,WAEFG,4BAAc,oBAACZ,uBAEjBE,aAAaM,wBAAU,oBAACgB;QAAKX,WAAWR,MAAM,CAAC,sBAAsB;OAAGG;IAI7E,OAAOM,UAAUc,OAAO,iBACtB,oBAACzB;QAAS0B,WAAU;QAAMC,MAAK;QAAU,GAAGhB,SAAS;QAAED,WAAWE;OAC/DO,6BAGH,oBAACG;QAAK,GAAGX,SAAS;QAAED,WAAWE;OAC5BO;AAGP,EAAE"}

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

@@ -16,11 +16,11 @@ const platformClassNames = {
 const warn = warnOnce('ModalCard');
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCard
- */ export const ModalCard = ({ icon , header , subheader , children , actions , onClose , nav , id , className , size , getRootRef , ...restProps })=>{
-    const { isDesktop  } = useAdaptivityWithJSMediaQueries();
+ */ export const ModalCard = ({ icon, header, subheader, children, actions, onClose, nav, id, className, size, getRootRef, ...restProps })=>{
+    const { isDesktop } = useAdaptivityWithJSMediaQueries();
     const platform = usePlatform();
     const modalContext = React.useContext(ModalRootContext);
-    const { refs  } = useModalRegistry(getNavId({
+    const { refs } = useModalRegistry(getNavId({
         nav,
         id
     }, warn), ModalType.CARD);

package/dist/cssm/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 { 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\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 subheader,\n children,\n actions,\n onClose,\n nav,\n id,\n className,\n size,\n getRootRef,\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 ref={getRootRef}\n id={id}\n className={classNames(\n styles['ModalCard'],\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\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"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","styles","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","platform","modalContext","useContext","refs","CARD","div","ref","hasOwnProperty","innerElement"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAA4B,iCAAiC;AACnF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,iBAAiB;IAC7BG,SAASH,MAAM,CAAC,qBAAqB;IACrCI,OAAOJ,MAAM,CAAC,mBAAmB;AACnC;AAIA,MAAMK,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,YAAY,CAAC,EACxBC,~~KAAI~~,EACJC,~~OAAM~~,EACNC,~~UAAS~~,EACTC,~~SAAQ~~,EACRC,~~QAAO~~,EACPC,~~QAAO~~,EACPC,~~IAAG~~,EACHC,~~GAAE~~,EACFC,~~UAAS~~,EACTC,~~KAAI~~,EACJC,~~WAAU~~,EACV,GAAGC,WACY;IACf,MAAM,EAAEC,~~UAAS~~,EAAE,GAAG3B;IACtB,MAAM4B,WAAW3B;IAEjB,MAAM4B,eAAe/B,MAAMgC,~~WAAWzB~~;IACtC,MAAM,EAAE0B,~~KAAI~~,EAAE,GAAGzB,iBAAiBJ,SAAS;QAAEmB;QAAKC;IAAG,GAAGT,OAAON,UAAUyB;~~IAEzE~~,qBACE,oBAACC;QACE,GAAGP,SAAS;QACbQ,KAAKT;QACLH,IAAIA;QACJC,WAAWxB,WACTS,MAAM,CAAC,YAAY,EACnBC,mBAAmB0B,~~eAAeP~~,YAC9BnB,kBAAkB,CAACmB,SAAS,GAC5BnB,mBAAmBE,~~SACvBgB~~,aAAanB,MAAM,CAAC,qBAAqB,EACzCe;qBAGF,oBAACnB;QACCmB,WAAWf,MAAM,CAAC,gBAAgB;QAClCiB,YAAYM,KAAKK;~~QACjBrB~~,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWS,aAAaT;~~QACjCI~~,MAAMA;OAELN;AAIT,EAAE"}
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 { 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\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 subheader,\n children,\n actions,\n onClose,\n nav,\n id,\n className,\n size,\n getRootRef,\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 ref={getRootRef}\n id={id}\n className={classNames(\n styles['ModalCard'],\n platformClassNames.hasOwnProperty(platform)\n ? platformClassNames[platform]\n : platformClassNames.android,\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"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","getNavId","warnOnce","ModalCardBase","ModalRootContext","useModalRegistry","ModalType","styles","platformClassNames","ios","android","vkcom","warn","ModalCard","icon","header","subheader","children","actions","onClose","nav","id","className","size","getRootRef","restProps","isDesktop","platform","modalContext","useContext","refs","CARD","div","ref","hasOwnProperty","innerElement"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAA4B,iCAAiC;AACnF,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,iBAAiB;IAC7BG,SAASH,MAAM,CAAC,qBAAqB;IACrCI,OAAOJ,MAAM,CAAC,mBAAmB;AACnC;AAIA,MAAMK,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,YAAY,CAAC,EACxBC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,GAAG,EACHC,EAAE,EACFC,SAAS,EACTC,IAAI,EACJC,UAAU,EACV,GAAGC,WACY;IACf,MAAM,EAAEC,SAAS,EAAE,GAAG3B;IACtB,MAAM4B,WAAW3B;IAEjB,MAAM4B,eAAe/B,MAAMgC,UAAU,CAACzB;IACtC,MAAM,EAAE0B,IAAI,EAAE,GAAGzB,iBAAiBJ,SAAS;QAAEmB;QAAKC;IAAG,GAAGT,OAAON,UAAUyB,IAAI;IAE7E,qBACE,oBAACC;QACE,GAAGP,SAAS;QACbQ,KAAKT;QACLH,IAAIA;QACJC,WAAWxB,WACTS,MAAM,CAAC,YAAY,EACnBC,mBAAmB0B,cAAc,CAACP,YAC9BnB,kBAAkB,CAACmB,SAAS,GAC5BnB,mBAAmBE,OAAO,EAC9BgB,aAAanB,MAAM,CAAC,qBAAqB,EACzCe;qBAGF,oBAACnB;QACCmB,WAAWf,MAAM,CAAC,gBAAgB;QAClCiB,YAAYM,KAAKK,YAAY;QAC7BrB,MAAMA;QACNC,QAAQA;QACRC,WAAWA;QACXE,SAASA;QACTC,SAASA,WAAWS,aAAaT,OAAO;QACxCI,MAAMA;OAELN;AAIT,EAAE"}

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

@@ -4,28 +4,25 @@ import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useKeyboard } from '../../hooks/useKeyboard';
 import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
+import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
 import styles from './ModalCardBase.module.css';
-const platformClassNames = {
-    ios: styles['ModalCardBase--ios'],
-    android: styles['ModalCardBase--android'],
-    vkcom: styles['ModalCardBase--vkcom']
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalCardBase
- */ export const ModalCardBase = ({ getRootRef , icon , header , subheader , children , actions , onClose , dismissLabel ='Скрыть' , className , style , size: sizeProp , ...restProps })=>{
+ */ export const ModalCardBase = ({ getRootRef, icon, header, subheader, children, actions, onClose, dismissLabel = 'Скрыть', className, style, size: sizeProp, ...restProps })=>{
     const platform = usePlatform();
-    const { isDesktop  } = useAdaptivityWithJSMediaQueries();
+    const { isDesktop } = useAdaptivityWithJSMediaQueries();
     const isSoftwareKeyboardOpened = useKeyboard().isOpened;
     const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;
     const size = isDesktop ? sizeProp : undefined;
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        className: classNames('vkuiInternalModalCardBase', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, isDesktop && styles['ModalCardBase--desktop'], className),
+        className: classNames('vkuiInternalModalCardBase', platform === Platform.IOS && styles['ModalCardBase--ios'], isDesktop && styles['ModalCardBase--desktop'], className),
         ref: getRootRef,
         style: {
             ...style,
@@ -39,9 +36,13 @@ const platformClassNames = {
         level: "2",
         weight: "2",
         className: classNames(styles['ModalCardBase__header'], 'vkuiInternalModalCardBase__header')
-    }, header), hasReactNode(subheader) && /*#__PURE__*/ React.createElement(Subhead, {
+    }, header), hasReactNode(subheader) && /*#__PURE__*/ React.createElement(AdaptivityContext.Provider, {
+        value: {
+            sizeY: SizeType.REGULAR
+        }
+    }, /*#__PURE__*/ React.createElement(Subhead, {
         className: classNames(styles['ModalCardBase__subheader'], 'vkuiInternalModalCardBase__subheader')
-    }, subheader), children, hasReactNode(actions) && /*#__PURE__*/ React.createElement("div", {
+    }, subheader)), children, hasReactNode(actions) && /*#__PURE__*/ React.createElement("div", {
         className: styles['ModalCardBase__actions']
     }, actions), isDesktop && /*#__PURE__*/ React.createElement(ModalDismissButton, {
         onClick: onClose

package/dist/cssm/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 { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\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\~~nconst platformClassNames = {\n ios: styles['ModalCardBase--ios'],\n android: styles['ModalCardBase--android'],\n vkcom: styles['ModalCardBase--vkcom'],\n};\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 'vkuiInternalModalCardBase',\n ~~platformClassNames.hasOwnProperty(~~platform~~)\n ?~~ ~~platformClassNames~~[~~platform~~]~~\n : platformClassNames.android~~,\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\n level=\"2\"\n weight=\"2\"\n className={classNames(\n styles['ModalCardBase__header'],\n 'vkuiInternalModalCardBase__header',\n )}\n >\n {header}\n </Title>\n )}\n {hasReactNode(subheader) && (\n <Subhead\n className={classNames(\n styles['ModalCardBase__subheader'],\n 'vkuiInternalModalCardBase__subheader',\n )}\n >\n {subheader}\n </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"],"names":["React","Icon24Dismiss","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useKeyboard","usePlatform","Platform","ModalDismissButton","PanelHeaderButton","Subhead","Title","styles","~~platformClassNames","ios","android","vkcom","~~ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseButtonIOS","IOS","undefined","div","~~hasOwnProperty","~~ref","maxWidth","level","weight","onClick","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,6BAA6B;~~AAEhD,MAAMC,qBAAqB;IACzBC,KAAKF,MAAM,CAAC,qBAAqB;IACjCG,SAASH,MAAM,CAAC,yBAAyB;IACzCI,OAAOJ,MAAM,CAAC,uBAAuB;AACvC;AAgDA~~;;CAEC,GACD,OAAO,~~MAAMK~~,gBAAgB,CAAC,EAC5BC,~~WAAU~~,EACVC,~~KAAI~~,EACJC,~~OAAM~~,EACNC,~~UAAS~~,EACTC,~~SAAQ~~,EACRC,~~QAAO~~,EACPC,~~QAAO~~,EACPC,~~cAAe~~,~~SAAQ~~,EACvBC,~~UAAS~~,EACTC,~~MAAK~~,EACLC,MAAMC,~~SAAQ~~,EACd,GAAGC,WACgB;IACnB,MAAMC,~~WAAWzB~~;IACjB,MAAM,~~EAAE0B~~,~~UAAS~~,EAAE,~~GAAG5B~~;IACtB,~~MAAM6B~~,~~2BAA2B5B~~,~~cAAc6B~~;~~IAE/C~~,MAAMC,wBAAwBJ,~~aAAaxB~~,~~SAAS6B~~,~~OAAO~~,CAACJ;IAE5D,MAAMJ,OAAOI,YAAYH,WAAWQ;IAEpC,qBACE,oBAACC;QACE,GAAGR,SAAS;QACbJ,~~WAAWxB~~,WACT,~~6BACAW~~,~~mBAAmB0B~~,~~eAAeR~~,~~YAC9BlB~~,~~kBAAkB~~,~~CAACkB~~,~~SAAS~~,~~GAC5BlB~~,~~mBAAmBE~~,~~SACvBiB~~,~~aAAapB,~~MAAM,CAAC,yBAAyB,~~EAC7Cc~~;~~QAEFc~~,~~KAAKtB~~;QACLS,OAAO;YACL,GAAGA,KAAK;~~YACRc~~,~~UAAUb~~;QACZ;qBAEA,oBAACU;QACCZ,~~WAAWxB~~,~~WACTU~~,MAAM,CAAC,2BAA2B,~~EAClCqB~~,~~4BAA4BrB~~,MAAM,CAAC,mDAAmD;~~OAGvFT~~,~~aAAagB~~,uBAAS,oBAACmB;QAAIZ,~~WAAWd~~,MAAM,CAAC,sBAAsB;~~OAAGO~~,~~OACtEhB~~,~~aAAaiB~~,yBACZ,~~oBAACT~~;~~QACC+B~~,OAAM;QACNC,QAAO;~~QACPjB~~,~~WAAWxB~~,~~WACTU~~,MAAM,CAAC,wBAAwB,EAC/B;~~OAGDQ~~,~~SAGJjB~~,~~aAAakB~~,4BACZ,~~oBAACX~~;~~QACCgB~~,~~WAAWxB~~,~~WACTU~~,MAAM,CAAC,2BAA2B,EAClC;~~OAGDS~~,~~YAIJC~~,~~UAEAnB~~,~~aAAaoB~~,0BAAY,oBAACe;QAAIZ,~~WAAWd~~,MAAM,CAAC,yBAAyB;~~OAAGW~~,UAE5ES,2BAAa,~~oBAACxB~~;~~QAAmBoC~~,~~SAASpB~~;QAC1CW,uCACC,~~oBAAC1B~~;~~QACCoC~~,~~cAAYpB~~;QACZC,~~WAAWd~~,MAAM,CAAC,yBAAyB;~~QAC3CgC~~,~~SAASpB~~;qBAET,~~oBAACvB~~;AAMb,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Dismiss } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\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 'vkuiInternalModalCardBase',\n platform === Platform.IOS && styles['ModalCardBase--ios'],\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\n level=\"2\"\n weight=\"2\"\n className={classNames(\n styles['ModalCardBase__header'],\n 'vkuiInternalModalCardBase__header',\n )}\n >\n {header}\n </Title>\n )}\n {hasReactNode(subheader) && (\n <AdaptivityContext.Provider value={{ sizeY: SizeType.REGULAR }}>\n <Subhead\n className={classNames(\n styles['ModalCardBase__subheader'],\n 'vkuiInternalModalCardBase__subheader',\n )}\n >\n {subheader}\n </Subhead>\n </AdaptivityContext.Provider>\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"],"names":["React","Icon24Dismiss","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useKeyboard","usePlatform","SizeType","Platform","AdaptivityContext","ModalDismissButton","PanelHeaderButton","Subhead","Title","styles","ModalCardBase","getRootRef","icon","header","subheader","children","actions","onClose","dismissLabel","className","style","size","sizeProp","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","canShowCloseButtonIOS","IOS","undefined","div","ref","maxWidth","level","weight","Provider","value","sizeY","REGULAR","onClick","aria-label"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,mBAAmB;AACjD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,6BAA6B;AAgDhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,UAAU,EACVC,IAAI,EACJC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,SAAS,EACTC,KAAK,EACLC,MAAMC,QAAQ,EACd,GAAGC,WACgB;IACnB,MAAMC,WAAWvB;IACjB,MAAM,EAAEwB,SAAS,EAAE,GAAG1B;IACtB,MAAM2B,2BAA2B1B,cAAc2B,QAAQ;IAEvD,MAAMC,wBAAwBJ,aAAarB,SAAS0B,GAAG,IAAI,CAACJ;IAE5D,MAAMJ,OAAOI,YAAYH,WAAWQ;IAEpC,qBACE,oBAACC;QACE,GAAGR,SAAS;QACbJ,WAAWtB,WACT,6BACA2B,aAAarB,SAAS0B,GAAG,IAAIpB,MAAM,CAAC,qBAAqB,EACzDgB,aAAahB,MAAM,CAAC,yBAAyB,EAC7CU;QAEFa,KAAKrB;QACLS,OAAO;YACL,GAAGA,KAAK;YACRa,UAAUZ;QACZ;qBAEA,oBAACU;QACCZ,WAAWtB,WACTY,MAAM,CAAC,2BAA2B,EAClCiB,4BAA4BjB,MAAM,CAAC,mDAAmD;OAGvFX,aAAac,uBAAS,oBAACmB;QAAIZ,WAAWV,MAAM,CAAC,sBAAsB;OAAGG,OACtEd,aAAae,yBACZ,oBAACL;QACC0B,OAAM;QACNC,QAAO;QACPhB,WAAWtB,WACTY,MAAM,CAAC,wBAAwB,EAC/B;OAGDI,SAGJf,aAAagB,4BACZ,oBAACV,kBAAkBgC,QAAQ;QAACC,OAAO;YAAEC,OAAOpC,SAASqC,OAAO;QAAC;qBAC3D,oBAAChC;QACCY,WAAWtB,WACTY,MAAM,CAAC,2BAA2B,EAClC;OAGDK,aAKNC,UAEAjB,aAAakB,0BAAY,oBAACe;QAAIZ,WAAWV,MAAM,CAAC,yBAAyB;OAAGO,UAE5ES,2BAAa,oBAACpB;QAAmBmC,SAASvB;QAC1CW,uCACC,oBAACtB;QACCmC,cAAYvB;QACZC,WAAWV,MAAM,CAAC,yBAAyB;QAC3C+B,SAASvB;qBAET,oBAACrB;AAMb,EAAE"}

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

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   position: relative;
   background: var(--vkui--color_background_modal);
-  border-radius: 18px;
+  border-radius: 12px;
   padding: 16px;
   margin-bottom: var(--vkui_internal--safe_area_inset_bottom);
   display: flex;
@@ -88,9 +88,8 @@
  * Android + vkcom
  */
-.ModalCardBase--android .ModalCardBase__container,
-.ModalCardBase--vkcom .ModalCardBase__container {
-  border-radius: 12px;
+.ModalCardBase--ios .ModalCardBase__container {
+  border-radius: 14px;
 }
 /**
@@ -98,5 +97,5 @@
  */
 .ModalCardBase--desktop .ModalCardBase__container {
-  border-radius: 8px;
+  padding: 24px;
 }

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

@@ -5,7 +5,7 @@ import { Tappable } from '../Tappable/Tappable';
 import styles from './ModalDismissButton.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
- */ export const ModalDismissButton = ({ 'aria-label': ariaLabel = 'Закрыть' , className , ...restProps })=>{
+ */ export const ModalDismissButton = ({ 'aria-label': ariaLabel = 'Закрыть', className, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Tappable, {
         className: classNames(styles['ModalDismissButton'], className),
         ...restProps,

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } 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"],"names":["React","Icon20Cancel","classNames","Tappable","styles","ModalDismissButton","ariaLabel","className","restProps","aria-label","activeMode","hoverMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,kCAAkC;AAIrD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjC,cAAcC,YAAY,SAAS,~~CAAA,~~EACnCC,~~UAAS~~,EACT,GAAGC,WACqB;IACxB,qBACE,oBAACL;QACCI,WAAWL,WAAWE,MAAM,CAAC,qBAAqB,EAAEG;QACnD,GAAGC,SAAS;QACbC,cAAYH;QACZI,YAAYN,MAAM,CAAC,6BAA6B;QAChDO,WAAWP,MAAM,CAAC,4BAA4B;qBAE9C,oBAACH;AAGP,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ModalDismissButton/ModalDismissButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Tappable } 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"],"names":["React","Icon20Cancel","classNames","Tappable","styles","ModalDismissButton","ariaLabel","className","restProps","aria-label","activeMode","hoverMode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,OAAOC,YAAY,kCAAkC;AAIrD;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjC,cAAcC,YAAY,SAAS,EACnCC,SAAS,EACT,GAAGC,WACqB;IACxB,qBACE,oBAACL;QACCI,WAAWL,WAAWE,MAAM,CAAC,qBAAqB,EAAEG;QACnD,GAAGC,SAAS;QACbC,cAAYH;QACZI,YAAYN,MAAM,CAAC,6BAA6B;QAChDO,WAAWP,MAAM,CAAC,4BAA4B;qBAE9C,oBAACH;AAGP,EAAE"}

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

@@ -22,13 +22,13 @@ const sizeClassName = {
 const warn = warnOnce('ModalPage');
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
- */ export const ModalPage = ({ children , header , size: sizeProp = 's' , onOpen , onOpened , onClose , onClosed , settlingHeight , dynamicContentHeight , getModalContentRef , nav , id: idProp , hideCloseButton =false , className , ...restProps })=>{
+ */ export const ModalPage = ({ children, header, size: sizeProp = 's', onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton = false, className, ...restProps })=>{
     const generatingId = useId();
     const id = idProp || generatingId;
-    const { updateModalHeight  } = React.useContext(ModalRootContext);
+    const { updateModalHeight } = React.useContext(ModalRootContext);
     const platform = usePlatform();
     const orientation = useOrientationChange();
-    const { sizeX , isDesktop  } = useAdaptivityWithJSMediaQueries();
+    const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
     React.useEffect(()=>{
         if (dynamicContentHeight) {
             updateModalHeight();
@@ -42,7 +42,7 @@ const warn = warnOnce('ModalPage');
     const isCloseButtonShown = !hideCloseButton && isDesktop;
     const size = isDesktop ? sizeProp : 's';
     const modalContext = React.useContext(ModalRootContext);
-    const { refs  } = useModalRegistry(getNavId({
+    const { refs } = useModalRegistry(getNavId({
         nav,
         id
     }, warn), ModalType.PAGE);

package/dist/cssm/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 { useId } from '../../hooks/useId';\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 { 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 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: idProp,\n hideCloseButton = false,\n className,\n ...restProps\n}: ModalPageProps) => {\n const generatingId = 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), ModalType.PAGE);\n\n const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n return (\n <ModalPageContext.Provider value={contextValue}>\n <div\n {...restProps}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={contextValue.labelId}\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 && 'vkuiInternalModalPage--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 </ModalPageContext.Provider>\n );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useId","useOrientationChange","usePlatform","SizeType","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","ModalPageContext","styles","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","className","restProps","generatingId","updateModalHeight","useContext","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","PAGE","contextValue","useMemo","labelId","Provider","value","div","role","aria-modal","aria-labelledby","IOS","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","contentElement","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,gBAAgB;IACpBC,GAAGF,MAAM,CAAC,oBAAoB;IAC9BG,GAAGH,MAAM,CAAC,oBAAoB;IAC9BI,GAAGJ,MAAM,CAAC,oBAAoB;AAChC;AA0CA,MAAMK,OAAOX,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMY,YAAY,CAAC,EACxBC,~~SAAQ~~,EACRC,~~OAAM~~,EACNC,MAAMC,WAAW,GAAG,~~CAAA,~~EACpBC,~~OAAM~~,EACNC,~~SAAQ~~,EACRC,~~QAAO~~,EACPC,~~SAAQ~~,EACRC,~~eAAc~~,EACdC,~~qBAAoB~~,EACpBC,~~mBAAkB~~,EAClBC,~~IAAG~~,EACHC,IAAIC,~~OAAM~~,EACVC,~~iBAAkB~~,~~MAAK~~,EACvBC,~~UAAS~~,EACT,GAAGC,WACY;IACf,MAAMC,eAAerC;IACrB,MAAMgC,KAAKC,UAAUI;IAErB,MAAM,EAAEC,~~kBAAiB~~,EAAE,GAAGzC,MAAM0C,~~WAAW9B~~;IAE/C,MAAM+B,WAAWtC;IACjB,MAAMuC,cAAcxC;IACpB,MAAM,EAAEyC,~~MAAK~~,EAAEC,~~UAAS~~,EAAE,GAAG5C;IAE7BF,MAAM+C,~~UAAU~~;QACd,IAAIf,sBAAsB;YACxBS;QACF;IACF,GAAG;QAAClB;QAAUS;QAAsBY;QAAaH;KAAkB;IAEnE,MAAMO,qBAAqB,CAACX,mBAAmBS;IAC/C,MAAMrB,OAAOqB,YAAYpB,WAAW;IAEpC,MAAMuB,eAAejD,MAAM0C,~~WAAW9B~~;IACtC,MAAM,EAAEsC,~~KAAI~~,EAAE,GAAGrC,iBAAiBN,SAAS;QAAE2B;QAAKC;IAAG,GAAGd,OAAOP,UAAUqC;~~IAEzE~~,MAAMC,eAAepD,MAAMqD,~~QAAQ~~,IAAO,CAAA;YAAEC,SAAS,CAAC,EAAEnB,GAAG,MAAM,CAAC;QAAC,CAAA,GAAI;QAACA;KAAG;IAE3E,qBACE,oBAACpB,iBAAiBwC;~~QAASC~~,OAAOJ;qBAChC,oBAACK;QACE,GAAGlB,SAAS;QACbmB,MAAK;QACLC,cAAW;QACXC,mBAAiBR,aAAaE;~~QAC9BnB~~,IAAIA;QACJG,WAAWrC,WACTe,MAAM,CAAC,YAAY,EACnB2B,aAAanC,SAASqD,~~OAAO7C~~,MAAM,CAAC,iBAAiB,EACrD8B,aAAa9B,MAAM,CAAC,qBAAqB,EACzC6B,UAAUvC,SAASwD,~~WAAW~~,wCAC9B,OAAOrC,SAAS,YAAYR,aAAa,CAACQ,KAAK,EAC/Ca;qBAGF,oBAACmB;QACCnB,WAAWtB,MAAM,CAAC,qBAAqB;QACvC+C,OAAO;YACLC,UAAU,OAAOvC,SAAS,WAAWA,OAAOwC;QAC9C;QACAC,KAAKhB,KAAKiB;~~qBAEV~~,oBAACV;QAAInB,WAAWtB,MAAM,CAAC,gBAAgB;qBACrC,oBAACyC;QAAInB,WAAWtB,MAAM,CAAC,oBAAoB;QAAEkD,KAAKhB,KAAKkB;~~OACpD5C~~,uBAGH,oBAACiC;QAAInB,WAAWtB,MAAM,CAAC,0BAA0B;qBAC/C,oBAACyC;QACCnB,WAAWtB,MAAM,CAAC,qBAAqB;QACvCkD,KAAKzD,SAAyByC,KAAKmB,~~gBAAgBpC~~;qBAEnD,oBAACwB;QAAInB,WAAWtB,MAAM,CAAC,wBAAwB;OAAGO,aAGrDyB,oCAAsB,oBAACrC;QAAmB2D,SAASzC,WAAWoB,aAAapB;;~~AAMxF~~,EAAE"}
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 { useId } from '../../hooks/useId';\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 { 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 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: idProp,\n hideCloseButton = false,\n className,\n ...restProps\n}: ModalPageProps) => {\n const generatingId = 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), ModalType.PAGE);\n\n const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n return (\n <ModalPageContext.Provider value={contextValue}>\n <div\n {...restProps}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={contextValue.labelId}\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 && 'vkuiInternalModalPage--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 </ModalPageContext.Provider>\n );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useId","useOrientationChange","usePlatform","SizeType","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","ModalPageContext","styles","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","className","restProps","generatingId","updateModalHeight","useContext","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","PAGE","contextValue","useMemo","labelId","Provider","value","div","role","aria-modal","aria-labelledby","IOS","REGULAR","style","maxWidth","undefined","ref","innerElement","headerElement","contentElement","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,kBAAkB;AAC3C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,kBAAkB,QAAQ,2CAA2C;AAC9E,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,gCAAgC;AACnF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,gBAAgB;IACpBC,GAAGF,MAAM,CAAC,oBAAoB;IAC9BG,GAAGH,MAAM,CAAC,oBAAoB;IAC9BI,GAAGJ,MAAM,CAAC,oBAAoB;AAChC;AA0CA,MAAMK,OAAOX,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMY,YAAY,CAAC,EACxBC,QAAQ,EACRC,MAAM,EACNC,MAAMC,WAAW,GAAG,EACpBC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,oBAAoB,EACpBC,kBAAkB,EAClBC,GAAG,EACHC,IAAIC,MAAM,EACVC,kBAAkB,KAAK,EACvBC,SAAS,EACT,GAAGC,WACY;IACf,MAAMC,eAAerC;IACrB,MAAMgC,KAAKC,UAAUI;IAErB,MAAM,EAAEC,iBAAiB,EAAE,GAAGzC,MAAM0C,UAAU,CAAC9B;IAE/C,MAAM+B,WAAWtC;IACjB,MAAMuC,cAAcxC;IACpB,MAAM,EAAEyC,KAAK,EAAEC,SAAS,EAAE,GAAG5C;IAE7BF,MAAM+C,SAAS,CAAC;QACd,IAAIf,sBAAsB;YACxBS;QACF;IACF,GAAG;QAAClB;QAAUS;QAAsBY;QAAaH;KAAkB;IAEnE,MAAMO,qBAAqB,CAACX,mBAAmBS;IAC/C,MAAMrB,OAAOqB,YAAYpB,WAAW;IAEpC,MAAMuB,eAAejD,MAAM0C,UAAU,CAAC9B;IACtC,MAAM,EAAEsC,IAAI,EAAE,GAAGrC,iBAAiBN,SAAS;QAAE2B;QAAKC;IAAG,GAAGd,OAAOP,UAAUqC,IAAI;IAE7E,MAAMC,eAAepD,MAAMqD,OAAO,CAAC,IAAO,CAAA;YAAEC,SAAS,CAAC,EAAEnB,GAAG,MAAM,CAAC;QAAC,CAAA,GAAI;QAACA;KAAG;IAE3E,qBACE,oBAACpB,iBAAiBwC,QAAQ;QAACC,OAAOJ;qBAChC,oBAACK;QACE,GAAGlB,SAAS;QACbmB,MAAK;QACLC,cAAW;QACXC,mBAAiBR,aAAaE,OAAO;QACrCnB,IAAIA;QACJG,WAAWrC,WACTe,MAAM,CAAC,YAAY,EACnB2B,aAAanC,SAASqD,GAAG,IAAI7C,MAAM,CAAC,iBAAiB,EACrD8B,aAAa9B,MAAM,CAAC,qBAAqB,EACzC6B,UAAUvC,SAASwD,OAAO,IAAI,wCAC9B,OAAOrC,SAAS,YAAYR,aAAa,CAACQ,KAAK,EAC/Ca;qBAGF,oBAACmB;QACCnB,WAAWtB,MAAM,CAAC,qBAAqB;QACvC+C,OAAO;YACLC,UAAU,OAAOvC,SAAS,WAAWA,OAAOwC;QAC9C;QACAC,KAAKhB,KAAKiB,YAAY;qBAEtB,oBAACV;QAAInB,WAAWtB,MAAM,CAAC,gBAAgB;qBACrC,oBAACyC;QAAInB,WAAWtB,MAAM,CAAC,oBAAoB;QAAEkD,KAAKhB,KAAKkB,aAAa;OACjE5C,uBAGH,oBAACiC;QAAInB,WAAWtB,MAAM,CAAC,0BAA0B;qBAC/C,oBAACyC;QACCnB,WAAWtB,MAAM,CAAC,qBAAqB;QACvCkD,KAAKzD,SAAyByC,KAAKmB,cAAc,EAAEpC;qBAEnD,oBAACwB;QAAInB,WAAWtB,MAAM,CAAC,wBAAwB;OAAGO,aAGrDyB,oCAAsB,oBAACrC;QAAmB2D,SAASzC,WAAWoB,aAAapB,OAAO;;AAM/F,EAAE"}

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

@@ -91,6 +91,7 @@
 .ModalPage__content-wrap {
   position: relative;
   display: flex;
+  height: 100%;
   flex-direction: column;
   overflow: hidden;
   border-bottom-left-radius: inherit;
@@ -115,7 +116,10 @@
 }
 .ModalPage--desktop .ModalPage__content-in,
-:global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content-in {
+:global(.vkuiInternalModalRoot__modal--expandable):not(
+    :global(.vkuiInternalModalRoot__modal--collapsed)
+  )
+  .ModalPage__content-in {
   height: 100%;
 }

package/dist/cssm/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":["React","ModalPageContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,iCAAmBD,MAAME,~~cAAyC~~,CAAC,GAAG"}
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":["React","ModalPageContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,iCAAmBD,MAAME,aAAa,CAA4B,CAAC,GAAG"}

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

@@ -9,11 +9,11 @@ import { Separator } from '../Separator/Separator';
 import styles from './ModalPageHeader.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
- */ export const ModalPageHeader = ({ children , separator =true , getRef , className , ...restProps })=>{
+ */ export const ModalPageHeader = ({ children, separator = true, getRef, className, ...restProps })=>{
     const platform = usePlatform();
     const hasSeparator = separator && platform === Platform.VKCOM;
-    const { isDesktop  } = useAdaptivityWithJSMediaQueries();
-    const { labelId  } = React.useContext(ModalPageContext);
+    const { isDesktop } = useAdaptivityWithJSMediaQueries();
+    const { labelId } = React.useContext(ModalPageContext);
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['ModalPageHeader'], platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'], isDesktop && styles['ModalPageHeader--desktop']),
         ref: getRef

package/dist/cssm/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 { Platform } from '../../lib/platform';\nimport { HasRef } 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'>,\n HasRef<HTMLDivElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n children,\n separator = true,\n getRef,\n className,\n ...restProps\n}: ModalPageHeaderProps) => {\n const platform = usePlatform();\n const hasSeparator = separator && platform === Platform.VKCOM;\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { labelId } = React.useContext(ModalPageContext);\n\n return (\n <div\n className={classNames(\n styles['ModalPageHeader'],\n platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n isDesktop && styles['ModalPageHeader--desktop'],\n )}\n ref={getRef}\n >\n <PanelHeader\n className={classNames('vkuiInternalModalPageHeader__in', className)}\n {...restProps}\n fixed={false}\n separator={false}\n transparent\n typographyProps={{\n Component: 'h2',\n id: labelId,\n }}\n >\n {children}\n </PanelHeader>\n {hasSeparator && <Separator wide />}\n </div>\n );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","Platform","ModalPageContext","PanelHeader","Separator","styles","ModalPageHeader","children","separator","getRef","className","restProps","platform","hasSeparator","VKCOM","isDesktop","labelId","useContext","div","ref","fixed","transparent","typographyProps","Component","id","wide"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,SAAS,QAAQ,yBAAyB;AACnD,OAAOC,YAAY,+BAA+B;AAOlD;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,~~SAAQ~~,EACRC,~~WAAY~~,~~KAAI~~,EAChBC,~~OAAM~~,EACNC,~~UAAS~~,EACT,GAAGC,WACkB;IACrB,MAAMC,WAAWZ;IACjB,MAAMa,eAAeL,aAAaI,aAAaX,SAASa;~~IACxD~~,MAAM,EAAEC,~~UAAS~~,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,~~QAAO~~,EAAE,GAAGnB,MAAMoB,~~WAAWf~~;IAErC,qBACE,oBAACgB;QACCR,WAAWZ,WACTO,MAAM,CAAC,kBAAkB,EACzBO,aAAaX,SAASa,~~SAAST~~,MAAM,CAAC,4BAA4B,EAClEU,aAAaV,MAAM,CAAC,2BAA2B;QAEjDc,KAAKV;qBAEL,oBAACN;QACCO,WAAWZ,WAAW,mCAAmCY;QACxD,GAAGC,SAAS;QACbS,OAAO;QACPZ,WAAW;QACXa,aAAAA;QACAC,iBAAiB;YACfC,WAAW;YACXC,IAAIR;QACN;OAECT,WAEFM,8BAAgB,oBAACT;QAAUqB,MAAAA;;AAGlC,EAAE"}
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 { Platform } from '../../lib/platform';\nimport { HasRef } 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'>,\n HasRef<HTMLDivElement> {}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n children,\n separator = true,\n getRef,\n className,\n ...restProps\n}: ModalPageHeaderProps) => {\n const platform = usePlatform();\n const hasSeparator = separator && platform === Platform.VKCOM;\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { labelId } = React.useContext(ModalPageContext);\n\n return (\n <div\n className={classNames(\n styles['ModalPageHeader'],\n platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],\n isDesktop && styles['ModalPageHeader--desktop'],\n )}\n ref={getRef}\n >\n <PanelHeader\n className={classNames('vkuiInternalModalPageHeader__in', className)}\n {...restProps}\n fixed={false}\n separator={false}\n transparent\n typographyProps={{\n Component: 'h2',\n id: labelId,\n }}\n >\n {children}\n </PanelHeader>\n {hasSeparator && <Separator wide />}\n </div>\n );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","Platform","ModalPageContext","PanelHeader","Separator","styles","ModalPageHeader","children","separator","getRef","className","restProps","platform","hasSeparator","VKCOM","isDesktop","labelId","useContext","div","ref","fixed","transparent","typographyProps","Component","id","wide"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,SAASC,SAAS,QAAQ,yBAAyB;AACnD,OAAOC,YAAY,+BAA+B;AAOlD;;CAEC,GACD,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,QAAQ,EACRC,YAAY,IAAI,EAChBC,MAAM,EACNC,SAAS,EACT,GAAGC,WACkB;IACrB,MAAMC,WAAWZ;IACjB,MAAMa,eAAeL,aAAaI,aAAaX,SAASa,KAAK;IAC7D,MAAM,EAAEC,SAAS,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,OAAO,EAAE,GAAGnB,MAAMoB,UAAU,CAACf;IAErC,qBACE,oBAACgB;QACCR,WAAWZ,WACTO,MAAM,CAAC,kBAAkB,EACzBO,aAAaX,SAASa,KAAK,IAAIT,MAAM,CAAC,4BAA4B,EAClEU,aAAaV,MAAM,CAAC,2BAA2B;QAEjDc,KAAKV;qBAEL,oBAACN;QACCO,WAAWZ,WAAW,mCAAmCY;QACxD,GAAGC,SAAS;QACbS,OAAO;QACPZ,WAAW;QACXa,aAAAA;QACAC,iBAAiB;YACfC,WAAW;YACXC,IAAIR;QACN;OAECT,WAEFM,8BAAgB,oBAACT;QAAUqB,MAAAA;;AAGlC,EAAE"}

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

@@ -40,7 +40,7 @@ class ModalRootTouchComponent extends React.Component {
         this.maskElementRef = /*#__PURE__*/ React.createRef();
         this.modalRootContext = {
             updateModalHeight: this.updateModalHeight,
-            registerModal: ({ id , ...data })=>Object.assign(this.props.getModalState(id) ?? {}, data),
+            registerModal: ({ id, ...data })=>Object.assign(this.props.getModalState(id) ?? {}, data),
             onClose: ()=>this.props.onExit(),
             isInsideModal: true
         };
@@ -80,7 +80,7 @@ class ModalRootTouchComponent extends React.Component {
         }
         // transition phase 3: animate entering modal
         if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
-            const { enteringModal  } = this.props;
+            const { enteringModal } = this.props;
             const enteringState = this.props.getModalState(enteringModal);
             this.props.onEnter();
             this.waitTransitionFinish(enteringState, ()=>{
@@ -227,7 +227,7 @@ class ModalRootTouchComponent extends React.Component {
         }
     };
     onPageTouchMove(event, modalState) {
-        const { shiftY , originalEvent  } = event;
+        const { shiftY, originalEvent } = event;
         const target = originalEvent.target;
         if (!event.isY) {
             if (this.viewportRef.current?.contains(target)) {
@@ -239,7 +239,7 @@ class ModalRootTouchComponent extends React.Component {
             return originalEvent.preventDefault();
         }
         originalEvent.stopPropagation();
-        const { expandable , contentScrolled , collapsed , expanded  } = modalState;
+        const { expandable, contentScrolled, collapsed, expanded } = modalState;
         if (!this.state.touchDown) {
             modalState.touchStartContentScrollTop = modalState.contentElement?.scrollTop ?? 0;
             this.setState({
@@ -269,7 +269,7 @@ class ModalRootTouchComponent extends React.Component {
         }
     }
     onCardTouchMove(event, modalState) {
-        const { originalEvent , shiftY  } = event;
+        const { originalEvent, shiftY } = event;
         const target = originalEvent.target;
         if (modalState.innerElement?.contains(target)) {
             if (!this.state.touchDown) {
@@ -296,7 +296,7 @@ class ModalRootTouchComponent extends React.Component {
         }
     };
     onPageTouchEnd(event, modalState) {
-        const { startY , shiftY  } = event;
+        const { startY, shiftY } = event;
         modalState.contentScrolled = false;
         modalState.touchMovePositive = null;
         let setStateCallback;
@@ -348,7 +348,7 @@ class ModalRootTouchComponent extends React.Component {
             dragging: false
         }, setStateCallback);
     }
-    onCardTouchEnd({ duration  }, modalState) {
+    onCardTouchEnd({ duration }, modalState) {
         let setStateCallback;
         if (this.state.dragging) {
             let translateY = modalState.translateYCurrent ?? 0;
@@ -427,15 +427,15 @@ class ModalRootTouchComponent extends React.Component {
         }
         this.maskAnimationFrame = requestAnimationFrame(()=>{
             if (this.maskElementRef.current) {
-                const { translateY =0 , translateYCurrent =0  } = modalState;
+                const { translateY = 0, translateYCurrent = 0 } = modalState;
                 const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
                 this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
             }
         });
     }
     render() {
-        const { activeModal , exitingModal , enteringModal  } = this.props;
-        const { touchDown , dragging  } = this.state;
+        const { activeModal, exitingModal, enteringModal } = this.props;
+        const { touchDown, dragging } = this.state;
         if (!activeModal && !exitingModal) {
             return null;
         }
@@ -497,10 +497,10 @@ export const ModalRootTouch = withContext(withPlatform(withDOM(withModalManager(
     }
 }
 function initPageModal(modalState) {
-    const { contentElement  } = modalState;
+    const { contentElement } = modalState;
     const contentHeight = (contentElement?.firstElementChild).offsetHeight;
     let prevTranslateY = modalState.translateY;
-    modalState.expandable = contentHeight > (contentElement?.clientHeight ?? 0) || modalState.settlingHeight === 100;
+    modalState.expandable = contentHeight > (contentElement?.clientHeight ?? 0) || modalState.settlingHeight === 100 || modalState.expanded;
     let collapsed = false;
     let expanded = false;
     let translateYFrom;