@vkontakte/vkui 5.3.1 → 5.4.0

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

@@ -1 +1,31 @@
-.vkuiInputLike__mask{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);position:relative}.vkuiInputLike__mask:after{border-bottom:1px solid #818c99;border-bottom:1px solid var(--vkui--color_text_secondary);bottom:0;content:"";height:1px;left:0;position:absolute;width:calc(100% - .1em)}.vkuiInputLike__mask:last-child{margin-right:1px}.vkuiInputLike__divider,.vkuiInputLike__last_character{letter-spacing:1px!important}.vkuiInputLike__divider{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiInputLike--full+.vkuiInputLike__divider{color:#000;color:var(--vkui--color_text_primary)}
+.InputLike__mask {
+  position: relative;
+  font-family: var(--vkui--font_family_base);
+}
+
+.InputLike__mask::after {
+  content: '';
+  position: absolute;
+  width: calc(100% - 0.1em);
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  border-bottom: solid 1px var(--vkui--color_text_secondary);
+}
+
+.InputLike__mask:last-child {
+  margin-right: 1px;
+}
+
+.InputLike__last_character {
+  letter-spacing: 1px !important;
+}
+
+.InputLike__divider {
+  color: var(--vkui--color_text_secondary);
+  letter-spacing: 1px !important;
+}
+
+.InputLike--full + .InputLike__divider {
+  color: var(--vkui--color_text_primary);
+}

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

@@ -1 +1,43 @@
-.vkuiLink{background:none;border:0;border-radius:0;color:#2d81e0;color:var(--vkui--color_text_link);cursor:pointer;display:inline;font-family:inherit;font-size:inherit;margin:0;padding:0;text-decoration:none}@media (hover:hover) and (pointer:fine){.vkuiLink:hover{text-decoration:underline}}.vkuiLink--focus-visible{outline:2px solid #2688eb!important;outline:2px solid var(--vkui--color_stroke_accent)!important}.vkuiLink--has-visited:visited{color:#4986cc;color:var(--vkui--color_text_link_visited)}.vkuiLink .vkuiIcon{display:inline-block;margin-left:4px;vertical-align:middle}
+.Link {
+  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
+  text-decoration: none;
+  border: 0;
+  background: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  display: inline;
+  border-radius: 0;
+}
+
+/* See https://www.ctrl.blog/entry/css-media-hover-samsung.html */
+
+@media (hover: hover) and (pointer: fine) {
+  .Link:hover {
+    text-decoration: underline;
+  }
+}
+
+.Link--focus-visible {
+  /**
+   * На момент v4.33.0, реализация <FocusVisible /> не подошла, т.к. текст может быть многострочным.
+   * Поэтому используем свой класс и применяем `outline`.
+   *
+   * `!important` – чтобы перебить глобальное обнуление `outline` на `:focus`.
+   */
+  outline: 2px solid var(--vkui--color_stroke_accent) !important;
+}
+
+.Link--has-visited:visited {
+  color: var(--vkui--color_text_link_visited);
+}
+
+/* stylelint-disable-next-line vkui/atomic */
+
+.Link :global(.vkuiIcon) {
+  margin-left: 4px;
+  display: inline-block;
+  vertical-align: middle;
+}

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

@@ -1 +1,3 @@
-.vkuiList{isolation:isolate}
+.List {
+  isolation: isolate;
+}

package/dist/cssm/components/LocaleProvider/LocaleProvider.d.ts

@@ -9,9 +9,9 @@ export interface LocaleProviderProps {
 }
 /**
  * Компонент, прокидывающий локаль. Список можно найти в
- * [реестре языковых подмёток IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
+ * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
  *
- * @version 5.0.0
+ * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
  */
 export declare function LocaleProvider({ value, children }: LocaleProviderProps): JSX.Element;

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 /**
  * Компонент, прокидывающий локаль. Список можно найти в
- * [реестре языковых подмёток IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
+ * [реестре языковых подметок IANA](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry)
  *
- * @version 5.0.0
+ * @since 5.0.0
  * @see https://vkcom.github.io/VKUI/#/LocaleProvider
  */ export function LocaleProvider({ value , children  }) {
     return /*#__PURE__*/ React.createElement(ConfigProviderOverride, {

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

@@ -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 * @version 5.0.0\n * @see https://vkcom.github.io/VKUI/#/LocaleProvider\n */\nexport function LocaleProvider({ value, children }: LocaleProviderProps) {\n  return <ConfigProviderOverride locale={value}>{children}</ConfigProviderOverride>;\n}\n"],"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,EAAE;IACvE,qBAAO,oBAACH;QAAuBI,QAAQF;OAAQC;AACjD,CAAC"}
+{"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,EAAE;IACvE,qBAAO,oBAACH;QAAuBI,QAAQF;OAAQC;AACjD,CAAC"}

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

@@ -1 +1,78 @@
-.vkuiMiniInfoCell{color:#6d7885;color:var(--vkui--color_text_subhead);display:flex;padding:6px 16px;padding:6px var(--vkui--size_base_padding_horizontal--regular)}.vkuiMiniInfoCell--mode-accent{color:#000;color:var(--vkui--color_text_primary)}.vkuiMiniInfoCell__before{color:#99a2ad;color:var(--vkui--color_icon_secondary);margin-right:12px}.vkuiMiniInfoCell__middle{align-items:center;display:flex;flex:1;min-width:0;overflow:hidden}.vkuiMiniInfoCell__content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiMiniInfoCell--textWrap-short .vkuiMiniInfoCell__content{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;max-height:60px;white-space:normal}.vkuiMiniInfoCell--textWrap-full .vkuiMiniInfoCell__content{overflow:inherit;white-space:normal}.vkuiMiniInfoCell--textWrap-nowrap .vkuiMiniInfoCell__content{flex:0 1 auto}.vkuiMiniInfoCell__after{margin-bottom:-2px;margin-left:12px;margin-top:-2px}.vkuiMiniInfoCell--mode-add,.vkuiMiniInfoCell--mode-more{color:#2d81e0;color:var(--vkui--color_text_link_themed)}.vkuiMiniInfoCell--mode-add .vkuiMiniInfoCell__before,.vkuiMiniInfoCell--mode-more .vkuiMiniInfoCell__before{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiMiniInfoCell--mode-more{padding-bottom:10px;padding-top:10px}.vkuiMiniInfoCell__middle .vkuiIcon{color:#2688eb;color:var(--vkui--color_text_accent);margin-left:4px}.vkuiMiniInfoCell--mode-add .vkuiMiniInfoCell__middle .vkuiIcon,.vkuiMiniInfoCell--mode-more .vkuiMiniInfoCell__middle .vkuiIcon{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}
+.MiniInfoCell {
+  display: flex;
+  padding: 6px var(--vkui--size_base_padding_horizontal--regular);
+  color: var(--vkui--color_text_subhead);
+}
+
+.MiniInfoCell--mode-accent {
+  color: var(--vkui--color_text_primary);
+}
+
+.MiniInfoCell__before {
+  margin-right: 12px;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.MiniInfoCell__middle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.MiniInfoCell__content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.MiniInfoCell--textWrap-short .MiniInfoCell__content {
+  white-space: initial;
+  display: -webkit-box;
+  max-height: 60px;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.MiniInfoCell--textWrap-full .MiniInfoCell__content {
+  overflow: inherit;
+  white-space: initial;
+}
+
+.MiniInfoCell--textWrap-nowrap .MiniInfoCell__content {
+  flex: 0 1 auto;
+}
+
+.MiniInfoCell__after {
+  margin-left: 12px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+}
+
+.MiniInfoCell--mode-add,
+.MiniInfoCell--mode-more {
+  color: var(--vkui--color_text_link_themed);
+}
+
+.MiniInfoCell--mode-add .MiniInfoCell__before,
+.MiniInfoCell--mode-more .MiniInfoCell__before {
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.MiniInfoCell--mode-more {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.MiniInfoCell__middle :global(.vkuiIcon) {
+  margin-left: 4px;
+  color: var(--vkui--color_text_accent);
+}
+
+.MiniInfoCell--mode-add .MiniInfoCell__middle :global(.vkuiIcon),
+.MiniInfoCell--mode-more .MiniInfoCell__middle :global(.vkuiIcon) {
+  color: var(--vkui--color_icon_accent_themed);
+}

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

@@ -1 +1,62 @@
-.vkuiModalCard{align-items:flex-end;box-sizing:border-box;display:flex;height:100%;left:0;padding:8px;position:absolute;top:0;width:100%}.vkuiModalCard__in{margin-left:auto;margin-right:auto;transform:translateY(calc(100% + 16px));transition:transform .34s cubic-bezier(.4,0,.2,1);transition:transform .34s var(--vkui--animation_easing_platform);width:100%}.vkuiModalCard--ios .vkuiModalCard__in{max-width:414px}.vkuiModalCard--android .vkuiModalCard__in{max-width:440px}.vkuiModalCard--vkcom .vkuiModalCard__in{max-width:400px}.vkuiModalCard--desktop{align-items:center}.vkuiModalCard--desktop .vkuiModalCard__in{opacity:0;transform:unset;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--vkui--animation_easing_platform)}.vkuiInternalModalRoot--touched .vkuiModalCard__in{transition:none}
+.ModalCard {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  padding: 8px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+}
+
+.ModalCard__in {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  transform: translateY(calc(100% + 16px));
+  transition: transform 340ms var(--vkui--animation_easing_platform);
+}
+
+/**
+ * iOS
+ */
+
+.ModalCard--ios .ModalCard__in {
+  max-width: 414px;
+}
+
+/**
+ * Android + vkcom
+ */
+
+.ModalCard--android .ModalCard__in {
+  max-width: 440px;
+}
+
+.ModalCard--vkcom .ModalCard__in {
+  max-width: 400px;
+}
+
+/**
+ * Desktop
+ */
+
+.ModalCard--desktop {
+  align-items: center;
+}
+
+.ModalCard--desktop .ModalCard__in {
+  transform: unset;
+  opacity: 0;
+  transition: opacity 340ms var(--vkui--animation_easing_platform);
+}
+
+/**
+ * CMP:
+ * ModalRoot
+ */
+
+:global(.vkuiInternalModalRoot--touched) .ModalCard__in {
+  transition: none;
+}

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

@@ -1 +1,102 @@
-.vkuiModalCardBase__container{--vkui_internal--background:var(--vkui--color_background_modal);background:#fff;background:var(--vkui--color_background_modal);border-radius:18px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin-bottom:0;margin-bottom:var(--vkui_internal--safe_area_inset_bottom);padding:16px;pointer-events:auto;position:relative}.vkuiModalCardBase__container--softwareKeyboardOpened{margin-bottom:0}.vkuiModalCardBase__header,.vkuiModalCardBase__subheader{margin:0;padding:0 8px;text-align:center;word-break:break-word}.vkuiModalCardBase__header{color:#000;color:var(--vkui--color_text_primary)}.vkuiModalCardBase__subheader{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiModalCardBase__header+.vkuiModalCardBase__subheader{margin-top:8px}.vkuiModalCardBase__icon{color:#2688eb;color:var(--vkui--color_icon_accent);margin:8px auto 16px}.vkuiModalCardBase__actions{display:flex;margin-top:16px}.vkuiUsersStack+.vkuiModalCardBase__actions{margin-top:24px}.vkuiModalCardBase__header+.vkuiModalCardBase__actions,.vkuiModalCardBase__subheader+.vkuiModalCardBase__actions{margin-top:32px}.vkuiModalCardBase__dismiss{color:#99a2ad;color:var(--vkui--color_icon_secondary);height:48px;justify-content:center;position:absolute;right:4px;top:4px;width:48px}.vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child{padding-left:36px;padding-right:36px}.vkuiModalCardBase--android .vkuiModalCardBase__container,.vkuiModalCardBase--vkcom .vkuiModalCardBase__container{border-radius:12px}.vkuiModalCardBase--desktop .vkuiModalCardBase__container{border-radius:8px}
+.ModalCardBase__container {
+  box-sizing: border-box;
+  position: relative;
+  background: var(--vkui--color_background_modal);
+  border-radius: 18px;
+  padding: 16px;
+  margin-bottom: var(--vkui_internal--safe_area_inset_bottom);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: initial;
+  box-shadow: var(--vkui--elevation3);
+
+  --vkui_internal--background: var(--vkui--color_background_modal);
+}
+
+.ModalCardBase__container--softwareKeyboardOpened {
+  margin-bottom: 0;
+}
+
+.ModalCardBase__header,
+.ModalCardBase__subheader {
+  text-align: center;
+  margin: 0;
+  padding: 0 8px;
+  word-break: break-word;
+}
+
+.ModalCardBase__header {
+  color: var(--vkui--color_text_primary);
+}
+
+.ModalCardBase__subheader {
+  color: var(--vkui--color_text_subhead);
+}
+
+.ModalCardBase__header + .ModalCardBase__subheader {
+  margin-top: 8px;
+}
+
+.ModalCardBase__icon {
+  margin: 8px auto 16px;
+  color: var(--vkui--color_icon_accent);
+}
+
+.ModalCardBase__actions {
+  display: flex;
+  margin-top: 16px;
+}
+
+:global(.vkuiInternalUsersStack) + .ModalCardBase__actions {
+  margin-top: 24px;
+}
+
+.ModalCardBase__header + .ModalCardBase__actions,
+.ModalCardBase__subheader + .ModalCardBase__actions {
+  margin-top: 32px;
+}
+
+/**
+ * iOS
+ */
+
+.ModalCardBase__dismiss {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 48px;
+  height: 48px;
+  color: var(--vkui--color_icon_secondary);
+  justify-content: center;
+}
+
+/**
+ * iOS
+ */
+
+/*
+ * TODO [>=6]: зачем этот стиль? Удалить?
+*/
+
+.ModalCardBase--ios .ModalCardBase__header:first-child {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+
+/**
+ * Android + vkcom
+ */
+
+.ModalCardBase--android .ModalCardBase__container,
+.ModalCardBase--vkcom .ModalCardBase__container {
+  border-radius: 12px;
+}
+
+/**
+ * Desktop
+ */
+
+.ModalCardBase--desktop .ModalCardBase__container {
+  border-radius: 8px;
+}

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

@@ -1 +1,38 @@
-.vkuiModalDismissButton{box-sizing:border-box;color:#fff;color:var(--vkui--color_icon_contrast);height:56px;justify-content:center;padding:18px;position:absolute;right:-56px;top:0;transition:opacity .15s ease-out;width:56px}.vkuiModalDismissButton:before{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary);border-radius:50%;bottom:14px;content:"";display:block;left:14px;position:absolute;right:14px;top:14px}.vkuiModalDismissButton .vkuiIcon{transform:translateX(0)}.vkuiModalDismissButton--hover.vkuiModalDismissButton:before{background:rgba(0,0,0,.44);background:var(--vkui--color_overlay_primary--hover)}.vkuiModalDismissButton--active.vkuiModalDismissButton:before{background:rgba(0,0,0,.48);background:var(--vkui--color_overlay_primary--active)}
+.ModalDismissButton {
+  position: absolute;
+  justify-content: center;
+  top: 0;
+  right: -56px;
+  width: 56px;
+  height: 56px;
+  padding: 18px;
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_contrast);
+  transition: opacity 0.15s ease-out;
+}
+
+.ModalDismissButton::before {
+  display: block;
+  content: '';
+  top: 14px;
+  right: 14px;
+  bottom: 14px;
+  left: 14px;
+  background: var(--vkui--color_overlay_primary);
+  border-radius: 50%;
+  position: absolute;
+}
+
+/* fixes icon misplacement on Safari in some cases */
+
+.ModalDismissButton :global(.vkuiIcon) {
+  transform: translateX(0);
+}
+
+.ModalDismissButton--hover.ModalDismissButton::before {
+  background: var(--vkui--color_overlay_primary--hover);
+}
+
+.ModalDismissButton--active.ModalDismissButton::before {
+  background: var(--vkui--color_overlay_primary--active);
+}

package/dist/cssm/components/ModalPage/ModalPage.d.ts

@@ -42,4 +42,4 @@ export interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, Na
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
-export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id, hideCloseButton, className, ...restProps }: ModalPageProps) => JSX.Element;
+export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton, className, ...restProps }: ModalPageProps) => JSX.Element;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useId } from '../../hooks/useId';
 import { useOrientationChange } from '../../hooks/useOrientationChange';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
@@ -11,6 +12,7 @@ import { warnOnce } from '../../lib/warnOnce';
 import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
 import { ModalType } from '../ModalRoot/types';
+import { ModalPageContext } from './ModalPageContext';
 import styles from './ModalPage.module.css';
 const sizeClassName = {
     s: styles['ModalPage--size-s'],
@@ -20,7 +22,9 @@ 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 , 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 platform = usePlatform();
     const orientation = useOrientationChange();
@@ -37,8 +41,18 @@ const warn = warnOnce('ModalPage');
         nav,
         id
     }, warn), ModalType.PAGE);
-    return /*#__PURE__*/ React.createElement("div", {
+    const contextValue = React.useMemo(()=>({
+            labelId: `${id}-label`
+        }), [
+        id
+    ]);
+    return /*#__PURE__*/ React.createElement(ModalPageContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ React.createElement("div", {
         ...restProps,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": contextValue.labelId,
         id: id,
         className: classNames(styles['ModalPage'], platform === Platform.IOS && styles['ModalPage--ios'], isDesktop && styles['ModalPage--desktop'], sizeX === SizeType.REGULAR && 'vkuiInternalModalPage--sizeX-regular', typeof size === 'string' && sizeClassName[size], className)
     }, /*#__PURE__*/ React.createElement("div", {
@@ -61,7 +75,7 @@ const warn = warnOnce('ModalPage');
         className: styles['ModalPage__content-in']
     }, children))), isCloseButtonShown && /*#__PURE__*/ React.createElement(ModalDismissButton, {
         onClick: onClose || modalContext.onClose
-    }))));
+    })))));
 };
 
 //# sourceMappingURL=ModalPage.js.map

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

@@ -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 { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { ModalType } from '../ModalRoot/types';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles['ModalPage--size-s'],\n  m: styles['ModalPage--size-m'],\n  l: styles['ModalPage--size-l'],\n};\n\nexport interface ModalPageProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id,\n  hideCloseButton = false,\n  className,\n  ...restProps\n}: ModalPageProps) => {\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  return (\n    <div\n      {...restProps}\n      id={id}\n      className={classNames(\n        styles['ModalPage'],\n        platform === Platform.IOS && styles['ModalPage--ios'],\n        isDesktop && styles['ModalPage--desktop'],\n        sizeX === SizeType.REGULAR && '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  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useOrientationChange","usePlatform","SizeType","getNavId","Platform","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","ModalType","styles","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","hideCloseButton","className","restProps","updateModalHeight","useContext","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","PAGE","div","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,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,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,gBAAgB;IACpBC,GAAGF,MAAM,CAAC,oBAAoB;IAC9BG,GAAGH,MAAM,CAAC,oBAAoB;IAC9BI,GAAGJ,MAAM,CAAC,oBAAoB;AAChC;AA0CA,MAAMK,OAAOV,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMW,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,GAAE,EACFC,iBAAkB,KAAK,CAAA,EACvBC,UAAS,EACT,GAAGC,WACY,GAAK;IACpB,MAAM,EAAEC,kBAAiB,EAAE,GAAGrC,MAAMsC,UAAU,CAAC3B;IAE/C,MAAM4B,WAAWnC;IACjB,MAAMoC,cAAcrC;IACpB,MAAM,EAAEsC,MAAK,EAAEC,UAAS,EAAE,GAAGxC;IAE7BF,MAAM2C,SAAS,CAACN,mBAAmB;QAAChB;QAAUmB;QAAaH;KAAkB;IAE7E,MAAMO,qBAAqB,CAACV,mBAAmBQ;IAC/C,MAAMnB,OAAOmB,YAAYlB,WAAW,GAAG;IAEvC,MAAMqB,eAAe7C,MAAMsC,UAAU,CAAC3B;IACtC,MAAM,EAAEmC,KAAI,EAAE,GAAGlC,iBAAiBN,SAAS;QAAE0B;QAAKC;IAAG,GAAGd,OAAON,UAAUkC,IAAI;IAE7E,qBACE,oBAACC;QACE,GAAGZ,SAAS;QACbH,IAAIA;QACJE,WAAWlC,WACTa,MAAM,CAAC,YAAY,EACnByB,aAAahC,SAAS0C,GAAG,IAAInC,MAAM,CAAC,iBAAiB,EACrD4B,aAAa5B,MAAM,CAAC,qBAAqB,EACzC2B,UAAUpC,SAAS6C,OAAO,IAAI,wCAC9B,OAAO3B,SAAS,YAAYR,aAAa,CAACQ,KAAK,EAC/CY;qBAGF,oBAACa;QACCb,WAAWrB,MAAM,CAAC,qBAAqB;QACvCqC,OAAO;YACLC,UAAU,OAAO7B,SAAS,WAAWA,OAAO8B,SAAS;QACvD;QACAC,KAAKR,KAAKS,YAAY;qBAEtB,oBAACP;QAAIb,WAAWrB,MAAM,CAAC,gBAAgB;qBACrC,oBAACkC;QAAIb,WAAWrB,MAAM,CAAC,oBAAoB;QAAEwC,KAAKR,KAAKU,aAAa;OACjElC,uBAGH,oBAAC0B;QAAIb,WAAWrB,MAAM,CAAC,0BAA0B;qBAC/C,oBAACkC;QACCb,WAAWrB,MAAM,CAAC,qBAAqB;QACvCwC,KAAK9C,SAAyBsC,KAAKW,cAAc,EAAE1B;qBAEnD,oBAACiB;QAAIb,WAAWrB,MAAM,CAAC,wBAAwB;OAAGO,aAGrDuB,oCAAsB,oBAAClC;QAAmBgD,SAAS/B,WAAWkB,aAAalB,OAAO;;AAK7F,EAAE"}
+{"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(updateModalHeight, [children, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);\n\n  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":"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"}