@vkontakte/vkui 5.3.2 → 5.4.0

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

@@ -7,8 +7,8 @@ export type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> & H
  *
  * Обертка над details.
  *
- * @version 5.3.0
- * @see  https://vkcom.github.io/VKUI/#/Accordion
+ * @since 5.3.0
+ * @see https://vkcom.github.io/VKUI/#/Accordion
  */
 export declare const Accordion: {
     ({ getRootRef, className, ...restProps }: AccordionProps): JSX.Element;

package/dist/cssm/components/Accordion/Accordion.js

@@ -8,8 +8,8 @@ import styles from './Accordion.module.css';
  *
  * Обертка над details.
  *
- * @version 5.3.0
- * @see  https://vkcom.github.io/VKUI/#/Accordion
+ * @since 5.3.0
+ * @see https://vkcom.github.io/VKUI/#/Accordion
  */ export const Accordion = ({ getRootRef , className , ...restProps })=>/*#__PURE__*/ React.createElement("details", {
         className: classNames(styles['Accordion'], className),
         ref: getRootRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { AccordionSummary } from './AccordionSummary';\nimport styles from './Accordion.module.css';\n\nexport type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> &\n  HasRootRef<HTMLDetailsElement>;\n\n/**\n * Компонент, позволяет отображать несколько разделов контента в ограниченном\n * пространстве и сворачивать или разворачивать их пользователем.\n *\n * Обертка над details.\n *\n * @version 5.3.0\n * @see  https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const Accordion = ({ getRootRef, className, ...restProps }: AccordionProps) => (\n  <details className={classNames(styles['Accordion'], className)} ref={getRootRef} {...restProps} />\n);\n\nAccordion.Summary = AccordionSummary;\n"],"names":["React","classNames","AccordionSummary","styles","Accordion","getRootRef","className","restProps","details","ref","Summary"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAK5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBAC/E,oBAACC;QAAQF,WAAWL,WAAWE,MAAM,CAAC,YAAY,EAAEG;QAAYG,KAAKJ;QAAa,GAAGE,SAAS;OAC9F;AAEFH,UAAUM,OAAO,GAAGR"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { AccordionSummary } from './AccordionSummary';\nimport styles from './Accordion.module.css';\n\nexport type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> &\n  HasRootRef<HTMLDetailsElement>;\n\n/**\n * Компонент, позволяет отображать несколько разделов контента в ограниченном\n * пространстве и сворачивать или разворачивать их пользователем.\n *\n * Обертка над details.\n *\n * @since 5.3.0\n * @see https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const Accordion = ({ getRootRef, className, ...restProps }: AccordionProps) => (\n  <details className={classNames(styles['Accordion'], className)} ref={getRootRef} {...restProps} />\n);\n\nAccordion.Summary = AccordionSummary;\n"],"names":["React","classNames","AccordionSummary","styles","Accordion","getRootRef","className","restProps","details","ref","Summary"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAK5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,WAA2B,iBAC/E,oBAACC;QAAQF,WAAWL,WAAWE,MAAM,CAAC,YAAY,EAAEG;QAAYG,KAAKJ;QAAa,GAAGE,SAAS;OAC9F;AAEFH,UAAUM,OAAO,GAAGR"}

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

@@ -1 +1,13 @@
-.vkuiAccordionSummary::-webkit-details-marker{display:none}.vkuiAccordionSummary__icon{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiAccordion:not([open])>summary .vkuiAccordionSummary__icon--collapse,.vkuiAccordion[open]>summary .vkuiAccordionSummary__icon--expand{display:none}
+/* stylelint-disable @project-tools/stylelint-atomic */
+.AccordionSummary::-webkit-details-marker {
+  display: none;
+}
+.AccordionSummary__icon {
+  color: var(--vkui--color_icon_secondary);
+}
+.Accordion:not([open]) > summary .AccordionSummary__icon--collapse {
+  display: none;
+}
+.Accordion[open] > summary .AccordionSummary__icon--expand {
+  display: none;
+}

package/dist/cssm/components/Accordion/AccordionSummary.d.ts

@@ -17,7 +17,7 @@ export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable
 /**
  * Обертка над summary.
  *
- * @version 5.3.0
+ * @since 5.3.0
  * @see  https://vkcom.github.io/VKUI/#/Accordion
  */
 export declare const AccordionSummary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: AccordionSummaryProps) => JSX.Element;

package/dist/cssm/components/Accordion/AccordionSummary.js

@@ -6,7 +6,7 @@ import styles from './Accordion.module.css';
 /**
  * Обертка над summary.
  *
- * @version 5.3.0
+ * @since 5.3.0
  * @see  https://vkcom.github.io/VKUI/#/Accordion
  */ export const AccordionSummary = ({ className , after , before , ExpandIcon =Icon24ChevronDown , CollapseIcon =Icon24ChevronUp , iconPosition ='after' , children , ...restProps })=>{
     const accordionIcon = // Обертка нужна для правильной работы с отступами в SimpleCell

package/dist/cssm/components/Accordion/AccordionSummary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/AccordionSummary.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon24ChevronDown, Icon24ChevronUp } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './Accordion.module.css';\n\nexport interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable'> {\n  /**\n   * Иконка для раскрытия контента.\n   */\n  ExpandIcon?: React.ElementType;\n  /**\n   * Иконка для сворачивания контента.\n   */\n  CollapseIcon?: React.ElementType;\n  /**\n   * Позиция иконки.\n   */\n  iconPosition?: 'before' | 'after';\n}\n\n/**\n * Обертка над summary.\n *\n * @version 5.3.0\n * @see  https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const AccordionSummary = ({\n  className,\n  after,\n  before,\n  ExpandIcon = Icon24ChevronDown,\n  CollapseIcon = Icon24ChevronUp,\n  iconPosition = 'after',\n  children,\n  ...restProps\n}: AccordionSummaryProps) => {\n  const accordionIcon = (\n    // Обертка нужна для правильной работы с отступами в SimpleCell\n    // Без обертки на AccordionSummary__icon--collapse не будет действовать правило `last-child`\n    <span className=\"vkuiIcon\">\n      <ExpandIcon\n        className={classNames(\n          styles['AccordionSummary__icon'],\n          styles['AccordionSummary__icon--expand'],\n        )}\n      />\n      <CollapseIcon\n        className={classNames(\n          styles['AccordionSummary__icon'],\n          styles['AccordionSummary__icon--collapse'],\n        )}\n      />\n    </span>\n  );\n\n  return (\n    <SimpleCell\n      className={classNames(styles['AccordionSummary'], className)}\n      Component=\"summary\"\n      before={\n        <>\n          {iconPosition === 'before' && accordionIcon}\n          {before}\n        </>\n      }\n      after={\n        <>\n          {after}\n          {iconPosition === 'after' && accordionIcon}\n        </>\n      }\n      {...restProps}\n    >\n      {children}\n    </SimpleCell>\n  );\n};\n"],"names":["React","Icon24ChevronDown","Icon24ChevronUp","classNames","SimpleCell","styles","AccordionSummary","className","after","before","ExpandIcon","CollapseIcon","iconPosition","children","restProps","accordionIcon","span","Component"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,mBAAmB;AACtE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,yBAAyB;AAiB5C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,YAAaT,kBAAiB,EAC9BU,cAAeT,gBAAe,EAC9BU,cAAe,QAAO,EACtBC,SAAQ,EACR,GAAGC,WACmB,GAAK;IAC3B,MAAMC,gBACJ,+DAA+D;IAC/D,4FAA4F;kBAC5F,oBAACC;QAAKT,WAAU;qBACd,oBAACG;QACCH,WAAWJ,WACTE,MAAM,CAAC,yBAAyB,EAChCA,MAAM,CAAC,iCAAiC;sBAG5C,oBAACM;QACCJ,WAAWJ,WACTE,MAAM,CAAC,yBAAyB,EAChCA,MAAM,CAAC,mCAAmC;;IAMlD,qBACE,oBAACD;QACCG,WAAWJ,WAAWE,MAAM,CAAC,mBAAmB,EAAEE;QAClDU,WAAU;QACVR,sBACE,0CACGG,iBAAiB,YAAYG,eAC7BN;QAGLD,qBACE,0CACGA,OACAI,iBAAiB,WAAWG;QAGhC,GAAGD,SAAS;OAEZD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Accordion/AccordionSummary.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon24ChevronDown, Icon24ChevronUp } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './Accordion.module.css';\n\nexport interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable'> {\n  /**\n   * Иконка для раскрытия контента.\n   */\n  ExpandIcon?: React.ElementType;\n  /**\n   * Иконка для сворачивания контента.\n   */\n  CollapseIcon?: React.ElementType;\n  /**\n   * Позиция иконки.\n   */\n  iconPosition?: 'before' | 'after';\n}\n\n/**\n * Обертка над summary.\n *\n * @since 5.3.0\n * @see  https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const AccordionSummary = ({\n  className,\n  after,\n  before,\n  ExpandIcon = Icon24ChevronDown,\n  CollapseIcon = Icon24ChevronUp,\n  iconPosition = 'after',\n  children,\n  ...restProps\n}: AccordionSummaryProps) => {\n  const accordionIcon = (\n    // Обертка нужна для правильной работы с отступами в SimpleCell\n    // Без обертки на AccordionSummary__icon--collapse не будет действовать правило `last-child`\n    <span className=\"vkuiIcon\">\n      <ExpandIcon\n        className={classNames(\n          styles['AccordionSummary__icon'],\n          styles['AccordionSummary__icon--expand'],\n        )}\n      />\n      <CollapseIcon\n        className={classNames(\n          styles['AccordionSummary__icon'],\n          styles['AccordionSummary__icon--collapse'],\n        )}\n      />\n    </span>\n  );\n\n  return (\n    <SimpleCell\n      className={classNames(styles['AccordionSummary'], className)}\n      Component=\"summary\"\n      before={\n        <>\n          {iconPosition === 'before' && accordionIcon}\n          {before}\n        </>\n      }\n      after={\n        <>\n          {after}\n          {iconPosition === 'after' && accordionIcon}\n        </>\n      }\n      {...restProps}\n    >\n      {children}\n    </SimpleCell>\n  );\n};\n"],"names":["React","Icon24ChevronDown","Icon24ChevronUp","classNames","SimpleCell","styles","AccordionSummary","className","after","before","ExpandIcon","CollapseIcon","iconPosition","children","restProps","accordionIcon","span","Component"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,mBAAmB;AACtE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,yBAAyB;AAiB5C;;;;;CAKC,GACD,OAAO,MAAMC,mBAAmB,CAAC,EAC/BC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,YAAaT,kBAAiB,EAC9BU,cAAeT,gBAAe,EAC9BU,cAAe,QAAO,EACtBC,SAAQ,EACR,GAAGC,WACmB,GAAK;IAC3B,MAAMC,gBACJ,+DAA+D;IAC/D,4FAA4F;kBAC5F,oBAACC;QAAKT,WAAU;qBACd,oBAACG;QACCH,WAAWJ,WACTE,MAAM,CAAC,yBAAyB,EAChCA,MAAM,CAAC,iCAAiC;sBAG5C,oBAACM;QACCJ,WAAWJ,WACTE,MAAM,CAAC,yBAAyB,EAChCA,MAAM,CAAC,mCAAmC;;IAMlD,qBACE,oBAACD;QACCG,WAAWJ,WAAWE,MAAM,CAAC,mBAAmB,EAAEE;QAClDU,WAAU;QACVR,sBACE,0CACGG,iBAAiB,YAAYG,eAC7BN;QAGLD,qBACE,0CACGA,OACAI,iBAAiB,WAAWG;QAGhC,GAAGD,SAAS;OAEZD;AAGP,EAAE"}

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

@@ -1 +1,115 @@
-.vkuiActionSheet{align-items:stretch;animation:vkui-animation-actionsheet-intro .2s cubic-bezier(.4,0,.2,1);animation:vkui-animation-actionsheet-intro .2s var(--vkui--animation_easing_platform);background:#fff;background:var(--vkui--color_background_modal);border-radius:12px;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;margin:10px;max-width:420px;max-width:var(--vkui--size_popup_small--regular);overflow:hidden;padding:8px 0;position:relative;width:calc(100% - 20px)}.vkuiActionSheet__header{color:#6d7885;color:var(--vkui--color_text_subhead);padding:16px 20px}.vkuiActionSheet--closing{transform:translateY(calc(100% + 20px));transition:transform .2s cubic-bezier(.4,0,.2,1);transition:transform .2s var(--vkui--animation_easing_platform)}.vkuiActionSheet__title+.vkuiActionSheet__text{margin-top:8px}.vkuiActionSheet--ios{animation:vkui-animation-actionsheet-intro .3s cubic-bezier(.4,0,.2,1);animation:vkui-animation-actionsheet-intro .3s var(--vkui--animation_easing_platform);background:transparent;margin:unset;padding:10px;width:100%}.vkuiActionSheet--ios.vkuiActionSheet--closing{transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiActionSheet--ios .vkuiActionSheet__header{border-radius:14px 14px 0 0;overflow:hidden;position:relative;text-align:center}.vkuiActionSheet--ios .vkuiActionSheet__title{position:relative}.vkuiActionSheet--ios .vkuiActionSheet__title+.vkuiActionSheet__text{margin-top:9px}.vkuiActionSheet--ios .vkuiActionSheet__text{position:relative}.vkuiActionSheet--ios .vkuiActionSheet__header:before{background-color:#fff;background-color:var(--vkui--color_background_modal);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.vkuiActionSheet--sizeY-compact .vkuiActionSheet__header{padding:12px 20px}.vkuiActionSheet--desktop{animation:none;height:auto;margin:0;max-width:100%;width:auto}.vkuiActionSheet--desktop.vkuiActionSheet--ios{border-radius:14px;padding:0}@keyframes vkui-animation-actionsheet-intro{0%{transform:translateY(100%)}to{transform:translateY(0)}}
+.ActionSheet {
+  position: relative;
+  overflow: hidden;
+  box-shadow: var(--vkui--elevation3);
+  width: calc(100% - 20px);
+  max-width: var(--vkui--size_popup_small--regular);
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  animation: vkui-animation-actionsheet-intro 0.2s var(--vkui--animation_easing_platform);
+  padding: 8px 0;
+  margin: 10px;
+  border-radius: 12px;
+  background: var(--vkui--color_background_modal);
+}
+
+.ActionSheet__header {
+  color: var(--vkui--color_text_subhead);
+  padding: 16px 20px;
+}
+
+.ActionSheet--closing {
+  transform: translateY(calc(100% + 20px));
+  transition: transform 0.2s var(--vkui--animation_easing_platform);
+}
+
+.ActionSheet__title + .ActionSheet__text {
+  margin-top: 8px;
+}
+
+/**
+ * iOS
+ */
+
+.ActionSheet--ios {
+  width: 100%;
+  animation: vkui-animation-actionsheet-intro 0.3s var(--vkui--animation_easing_platform);
+  padding: 10px;
+  margin: unset;
+  background: transparent;
+}
+
+.ActionSheet--ios.ActionSheet--closing {
+  transform: translateY(100%);
+  transition: transform 0.3s var(--vkui--animation_easing_platform);
+}
+
+.ActionSheet--ios .ActionSheet__header {
+  position: relative;
+  overflow: hidden;
+  border-radius: 14px 14px 0 0;
+  text-align: center;
+}
+
+.ActionSheet--ios .ActionSheet__title {
+  position: relative;
+}
+
+.ActionSheet--ios .ActionSheet__title + .ActionSheet__text {
+  margin-top: 9px;
+}
+
+.ActionSheet--ios .ActionSheet__text {
+  position: relative;
+}
+
+.ActionSheet--ios .ActionSheet__header::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_background_modal);
+  content: '';
+}
+
+/**
+ * Compact
+ */
+
+.ActionSheet--sizeY-compact .ActionSheet__header {
+  padding: 12px 20px;
+}
+
+/**
+ * Desktop version
+ */
+
+.ActionSheet--desktop {
+  width: auto;
+  height: auto;
+  animation: none;
+  margin: 0;
+  max-width: 100%;
+}
+
+.ActionSheet--desktop.ActionSheet--ios {
+  border-radius: 14px;
+  padding: 0;
+}
+
+/**
+* Animations
+*/
+
+@keyframes vkui-animation-actionsheet-intro {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

package/dist/cssm/components/ActionSheet/types.d.ts

@@ -7,7 +7,7 @@ export interface SharedDropdownProps extends FocusTrapProps {
     /**
      * Элемент, рядом с которым вылезает попап на десктопе.
      * Лучше передавать RefObject c current.
-     * В v5 будет обязательным.
+     * В v6 будет обязательным.
      */
     toggleRef?: ToggleRef;
     /**

package/dist/cssm/components/ActionSheet/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type PopupDirection =\n  | 'top'\n  | 'bottom'\n  | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v5 будет обязательным.\n   */\n  toggleRef?: ToggleRef;\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { FocusTrapProps } from '../FocusTrap/FocusTrap';\n\nexport type PopupDirection =\n  | 'top'\n  | 'bottom'\n  | ((elRef: React.RefObject<HTMLDivElement>) => 'top' | 'bottom');\nexport type ToggleRef = Element | null | undefined | React.RefObject<Element>;\n\nexport interface SharedDropdownProps extends FocusTrapProps {\n  closing: boolean;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v6 будет обязательным.\n   */\n  toggleRef?: ToggleRef; // TODO [>=6]: сделать обязательным\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Отступ, где заданное кол-во единиц равняется пикселям\n   * */\n  popupOffsetDistance?: number;\n}\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1,241 @@
-.vkuiActionSheetItem{align-items:center;border-radius:0;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;min-height:48px;overflow:hidden;padding:0 20px;position:relative;text-decoration:none}.vkuiActionSheetItem__after,.vkuiActionSheetItem__before,.vkuiActionSheetItem__container{position:relative}.vkuiActionSheetItem__after,.vkuiActionSheetItem__before{flex-shrink:0}.vkuiActionSheetItem__before{margin-left:-2px;margin-right:18px}.vkuiActionSheetItem__container{flex-grow:1;max-width:100%;padding:10px 0}.vkuiActionSheetItem--ellipsis{overflow:hidden;white-space:nowrap}.vkuiActionSheetItem__content{align-items:baseline;display:flex;justify-content:space-between;overflow:hidden}.vkuiActionSheetItem--ellipsis .vkuiActionSheetItem__content{justify-content:flex-start}.vkuiActionSheetItem__children{min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiActionSheetItem__subtitle{color:#818c99;color:var(--vkui--color_text_secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis}.vkuiActionSheetItem__meta{color:#818c99;color:var(--vkui--color_text_secondary);flex-shrink:0;margin-left:6px}.vkuiActionSheetItem__before{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiActionSheetItem--ios .vkuiActionSheetItem__before{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiActionSheetItem--mode-destructive .vkuiActionSheetItem__container:first-child{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiActionSheetItem--mode-destructive .vkuiActionSheetItem__before{color:#e64646;color:var(--vkui--color_icon_negative)}.vkuiActionSheetItem__radio{display:none}.vkuiActionSheetItem__marker{align-items:center;background-color:initial;color:#2688eb;color:var(--vkui--color_icon_accent);display:none;justify-content:center;margin-left:16px}.vkuiActionSheetItem__radio:checked~.vkuiActionSheetItem__marker{display:flex}.vkuiActionSheetItem--ios{background:#fff;background:var(--vkui--color_background_modal);border-radius:0;color:#2688eb;color:var(--vkui--color_text_accent_themed);min-height:56px;padding:14px 20px 14px 19px}.vkuiActionSheetItem--rich{color:#000;color:var(--vkui--color_text_primary)}.vkuiActionSheetItem--ios.vkuiActionSheetItem--mode-destructive{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiActionSheetItem--ios:first-child{border-top-left-radius:14px;border-top-right-radius:14px}.vkuiActionSheetItem--ios:last-child,.vkuiActionSheetItem--ios:not(.vkuiActionSheetItem--desktop):nth-last-child(2){border-bottom-left-radius:14px;border-bottom-right-radius:14px}.vkuiActionSheetItem--ios:before{background-color:#fff;background-color:var(--vkui--color_background_modal);content:"";height:100%;left:0;position:absolute;top:0;transition:opacity .15s ease-out,background-color .15s ease-out;width:100%}.vkuiActionSheetItem--ios:after{background:rgba(0,0,0,.12);background:var(--vkui--color_separator_primary_alpha);content:"";height:1px;left:0;position:absolute;right:0;top:0;transform-origin:center bottom}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiActionSheetItem--ios:after{transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiActionSheetItem--ios:after{transform:scaleY(.33)}}.vkuiActionSheet--ios .vkuiActionSheetItem--last:after,.vkuiActionSheet--ios .vkuiActionSheet__header:empty,.vkuiActionSheetItem--ios:first-child:after,.vkuiActionSheetItem--mode-cancel:after{content:none}.vkuiActionSheetItem--ios.vkuiActionSheetItem--active:before{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);opacity:1;transition:none}.vkuiActionSheetItem--ios .vkuiActionSheetItem__container{padding:0}.vkuiActionSheetItem--ios .vkuiActionSheetItem--centered{justify-content:center}.vkuiActionSheetItem--mode-cancel{border-radius:14px;margin-bottom:0;margin-bottom:var(--vkui_internal--safe_area_inset_bottom);margin-top:8px;min-height:52px}.vkuiActionSheetItem--desktop{cursor:pointer;width:auto}.vkuiActionSheetItem[disabled] .vkuiActionSheetItem__children,.vkuiActionSheetItem[disabled] .vkuiActionSheetItem__meta,.vkuiActionSheetItem[disabled] .vkuiActionSheetItem__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiActionSheetItem[disabled] .vkuiActionSheetItem__before,.vkuiActionSheetItem[disabled] .vkuiActionSheetItem__marker{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiActionSheetItem--sizeY-compact{min-height:32px}.vkuiActionSheetItem--sizeY-compact.vkuiActionSheetItem--ios{min-height:36px;padding:4px 20px 4px 18px}.vkuiActionSheetItem--sizeY-compact:not(.vkuiActionSheetItem--ios)+.vkuiActionSheetItem--sizeY-compact:not(.vkuiActionSheetItem--ios){margin-top:2px}.vkuiActionSheetItem--sizeY-compact .vkuiActionSheetItem__container{padding:5px 0}
+.ActionSheetItem {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--vkui--color_text_primary);
+  padding: 0 20px;
+  min-height: 48px;
+  border-radius: 0;
+  box-sizing: border-box;
+}
+
+.ActionSheetItem__container,
+.ActionSheetItem__before,
+.ActionSheetItem__after {
+  position: relative;
+}
+
+.ActionSheetItem__before,
+.ActionSheetItem__after {
+  flex-shrink: 0;
+}
+
+.ActionSheetItem__before {
+  margin-right: 18px;
+  margin-left: -2px;
+}
+
+.ActionSheetItem__container {
+  max-width: 100%;
+  flex-grow: 1;
+  padding: 10px 0;
+}
+
+.ActionSheetItem--ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.ActionSheetItem__content {
+  display: flex;
+  align-items: baseline;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.ActionSheetItem--ellipsis .ActionSheetItem__content {
+  justify-content: flex-start;
+}
+
+.ActionSheetItem__children {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ActionSheetItem__subtitle {
+  color: var(--vkui--color_text_secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+.ActionSheetItem__meta {
+  color: var(--vkui--color_text_secondary);
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.ActionSheetItem__before {
+  color: var(--vkui--color_icon_accent);
+}
+
+.ActionSheetItem--ios .ActionSheetItem__before {
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.ActionSheetItem--mode-destructive .ActionSheetItem__container:first-child {
+  color: var(--vkui--color_text_negative);
+}
+
+.ActionSheetItem--mode-destructive .ActionSheetItem__before {
+  color: var(--vkui--color_icon_negative);
+}
+
+.ActionSheetItem__radio {
+  display: none;
+}
+
+.ActionSheetItem__marker {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  color: var(--vkui--color_icon_accent);
+  margin-left: 16px;
+}
+
+.ActionSheetItem__radio:checked ~ .ActionSheetItem__marker {
+  display: flex;
+}
+
+/**
+ * iOS
+ */
+
+.ActionSheetItem--ios {
+  padding: 14px 20px 14px 19px;
+  min-height: 56px;
+  border-radius: 0;
+  color: var(--vkui--color_text_accent_themed);
+  background: var(--vkui--color_background_modal);
+}
+
+.ActionSheetItem--rich {
+  color: var(--vkui--color_text_primary);
+}
+
+.ActionSheetItem--ios.ActionSheetItem--mode-destructive {
+  color: var(--vkui--color_text_negative);
+}
+
+.ActionSheetItem--ios:first-child {
+  border-top-left-radius: 14px;
+  border-top-right-radius: 14px;
+}
+
+.ActionSheetItem--ios:not(.ActionSheetItem--desktop):nth-last-child(2),
+.ActionSheetItem--ios:last-child {
+  border-bottom-left-radius: 14px;
+  border-bottom-right-radius: 14px;
+}
+
+.ActionSheetItem--ios::before {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_background_modal);
+  content: '';
+  transition: opacity 0.15s ease-out, background-color 0.15s ease-out;
+}
+
+.ActionSheetItem--ios::after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 1px;
+  content: '';
+  top: 0;
+  background: var(--vkui--color_separator_primary_alpha);
+  transform-origin: center bottom;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .ActionSheetItem--ios::after {
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
+  .ActionSheetItem--ios::after {
+    transform: scaleY(0.33);
+  }
+}
+
+.ActionSheetItem--ios:first-child::after,
+.ActionSheetItem--mode-cancel::after,
+.ActionSheet--ios .ActionSheetItem--last::after,
+.ActionSheet--ios .ActionSheet__header:empty {
+  content: none;
+}
+
+.ActionSheetItem--ios.ActionSheetItem--active::before {
+  background-color: var(--vkui--color_transparent--active);
+  opacity: 1;
+  transition: none;
+}
+
+.ActionSheetItem--ios .ActionSheetItem__container {
+  padding: 0;
+}
+
+.ActionSheetItem--ios .ActionSheetItem--centered {
+  justify-content: center;
+}
+
+.ActionSheetItem--mode-cancel {
+  margin-top: 8px;
+  margin-bottom: var(--vkui_internal--safe_area_inset_bottom);
+  border-radius: 14px;
+  min-height: 52px;
+}
+
+/**
+ * Desktop
+ */
+
+.ActionSheetItem--desktop {
+  width: auto;
+  cursor: pointer;
+}
+
+/**
+ * Disabled
+ */
+
+.ActionSheetItem[disabled] .ActionSheetItem__children,
+.ActionSheetItem[disabled] .ActionSheetItem__meta,
+.ActionSheetItem[disabled] .ActionSheetItem__subtitle {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ActionSheetItem[disabled] .ActionSheetItem__marker,
+.ActionSheetItem[disabled] .ActionSheetItem__before {
+  color: var(--vkui--color_icon_secondary);
+}
+
+/**
+ * SizeY = compact
+ */
+
+.ActionSheetItem--sizeY-compact {
+  min-height: 32px;
+}
+
+.ActionSheetItem--sizeY-compact.ActionSheetItem--ios {
+  min-height: 36px;
+  padding: 4px 20px 4px 18px;
+}
+
+.ActionSheetItem--sizeY-compact:not(.ActionSheetItem--ios)
+  + .ActionSheetItem--sizeY-compact:not(.ActionSheetItem--ios) {
+  margin-top: 2px;
+}
+
+.ActionSheetItem--sizeY-compact .ActionSheetItem__container {
+  padding: 5px 0;
+}

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface AdaptiveIconRendererProps {
+    IconCompact: React.ComponentType<{
+        className?: string;
+    }>;
+    IconRegular: React.ComponentType<{
+        className?: string;
+    }>;
+}
+/**
+ * @since 5.4.0
+ * @see https://vkcom.github.io/VKUI/#/AdaptiveIconRenderer
+ */
+export declare const AdaptiveIconRenderer: ({ IconCompact, IconRegular }: AdaptiveIconRendererProps) => JSX.Element;

package/dist/cssm/components/{WriteBarIcon/WriteBarIconRenderer.js → AdaptiveIconRenderer/AdaptiveIconRenderer.js}

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
-export const WriteBarIconRenderer = ({ IconCompact , IconRegular  })=>{
+/**
+ * @since 5.4.0
+ * @see https://vkcom.github.io/VKUI/#/AdaptiveIconRenderer
+ */ export const AdaptiveIconRenderer = ({ IconCompact , IconRegular  })=>{
     const { sizeY  } = useAdaptivityConditionalRender();
     return /*#__PURE__*/ React.createElement(React.Fragment, null, sizeY.compact && /*#__PURE__*/ React.createElement(IconCompact, {
         className: sizeY.compact.className
@@ -9,4 +12,4 @@ export const WriteBarIconRenderer = ({ IconCompact , IconRegular  })=>{
     }));
 };
 
-//# sourceMappingURL=WriteBarIconRenderer.js.map
+//# sourceMappingURL=AdaptiveIconRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/AdaptiveIconRenderer/AdaptiveIconRenderer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\n\nexport interface AdaptiveIconRendererProps {\n  IconCompact: React.ComponentType<{ className?: string }>;\n  IconRegular: React.ComponentType<{ className?: string }>;\n}\n\n/**\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/AdaptiveIconRenderer\n */\nexport const AdaptiveIconRenderer = ({ IconCompact, IconRegular }: AdaptiveIconRendererProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && <IconCompact className={sizeY.compact.className} />}\n      {sizeY.regular && <IconRegular className={sizeY.regular.className} />}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useAdaptivityConditionalRender","AdaptiveIconRenderer","IconCompact","IconRegular","sizeY","Fragment","compact","className","regular"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,YAAW,EAAEC,YAAW,EAA6B,GAAK;IAC/F,MAAM,EAAEC,MAAK,EAAE,GAAGJ;IAElB,qBACE,oBAACD,MAAMM,QAAQ,QACZD,MAAME,OAAO,kBAAI,oBAACJ;QAAYK,WAAWH,MAAME,OAAO,CAACC,SAAS;QAChEH,MAAMI,OAAO,kBAAI,oBAACL;QAAYI,WAAWH,MAAMI,OAAO,CAACD,SAAS;;AAGvE,EAAE"}

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

@@ -1,9 +1,9 @@
-import * as React from 'react';
+/// <reference types="react" />
+import { HasChildren } from '../../types';
 import { type AdaptivityProps } from './AdaptivityContext';
-export interface AdaptivityProviderProps extends AdaptivityProps {
-    children?: React.ReactNode;
+export interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
  */
-export declare const AdaptivityProvider: ({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, children, }: React.PropsWithChildren<AdaptivityProps>) => JSX.Element;
+export declare const AdaptivityProvider: ({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, children, }: AdaptivityProviderProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasMouse as _hasPointer } from '@vkontakte/vkjs';\nimport { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';\nimport { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\nimport { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';\n\nexport interface AdaptivityProviderProps extends AdaptivityProps {\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider\n */\nexport const AdaptivityProvider = ({\n  viewWidth,\n  viewHeight,\n  sizeX,\n  sizeY,\n  hasPointer,\n  hasHover,\n  children,\n}: React.PropsWithChildren<AdaptivityProps>) => {\n  const bridge = useBridgeAdaptivity();\n  const adaptivity = React.useMemo(\n    () =>\n      calculateAdaptivity(\n        {\n          viewWidth,\n          viewHeight,\n          sizeX,\n          sizeY,\n          hasPointer,\n          hasHover,\n        },\n        bridge,\n      ),\n    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, bridge],\n  );\n\n  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;\n};\n\nfunction calculateAdaptivity(\n  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,\n  bridge: BridgeAdaptivity,\n) {\n  if (bridge.type === 'adaptive') {\n    const { viewportWidth, viewportHeight } = bridge;\n\n    if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n      viewWidth = ViewWidth.DESKTOP;\n    } else if (viewportWidth >= BREAKPOINTS.TABLET) {\n      viewWidth = ViewWidth.TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n      viewWidth = ViewWidth.SMALL_TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {\n      viewWidth = ViewWidth.MOBILE;\n    } else {\n      viewWidth = ViewWidth.SMALL_MOBILE;\n    }\n\n    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n      viewHeight = ViewHeight.MEDIUM;\n    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n      viewHeight = ViewHeight.SMALL;\n    } else {\n      viewHeight = ViewHeight.EXTRA_SMALL;\n    }\n\n    if (viewWidth <= ViewWidth.MOBILE) {\n      sizeX = SizeType.COMPACT;\n    } else {\n      sizeX = SizeType.REGULAR;\n    }\n\n    if (\n      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n      viewHeight <= ViewHeight.EXTRA_SMALL\n    ) {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else if (bridge.type === 'force_mobile' || bridge.type === 'force_mobile_compact') {\n    viewWidth = ViewWidth.MOBILE;\n    sizeX = SizeType.COMPACT;\n\n    if (bridge.type === 'force_mobile_compact') {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else {\n    if (sizeX === undefined && viewWidth !== undefined) {\n      if (viewWidth <= ViewWidth.MOBILE) {\n        sizeX = SizeType.COMPACT;\n      } else {\n        sizeX = SizeType.REGULAR;\n      }\n    }\n    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {\n      if (\n        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n        viewHeight <= ViewHeight.EXTRA_SMALL\n      ) {\n        sizeY = SizeType.COMPACT;\n      } else {\n        sizeY = SizeType.REGULAR;\n      }\n    }\n  }\n\n  return {\n    viewWidth,\n    viewHeight,\n    sizeX,\n    sizeY,\n    hasPointer,\n    hasHover,\n  };\n}\n"],"names":["React","hasMouse","_hasPointer","useBridgeAdaptivity","BREAKPOINTS","SizeType","ViewHeight","ViewWidth","AdaptivityContext","AdaptivityProvider","viewWidth","viewHeight","sizeX","sizeY","hasPointer","hasHover","children","bridge","adaptivity","useMemo","calculateAdaptivity","Provider","value","type","viewportWidth","viewportHeight","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","COMPACT","REGULAR","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasMouse as _hasPointer } from '@vkontakte/vkjs';\nimport { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';\nimport { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';\n\nexport interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider\n */\nexport const AdaptivityProvider = ({\n  viewWidth,\n  viewHeight,\n  sizeX,\n  sizeY,\n  hasPointer,\n  hasHover,\n  children,\n}: AdaptivityProviderProps) => {\n  const bridge = useBridgeAdaptivity();\n  const adaptivity = React.useMemo(\n    () =>\n      calculateAdaptivity(\n        {\n          viewWidth,\n          viewHeight,\n          sizeX,\n          sizeY,\n          hasPointer,\n          hasHover,\n        },\n        bridge,\n      ),\n    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, bridge],\n  );\n\n  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;\n};\n\nfunction calculateAdaptivity(\n  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,\n  bridge: BridgeAdaptivity,\n) {\n  if (bridge.type === 'adaptive') {\n    const { viewportWidth, viewportHeight } = bridge;\n\n    if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n      viewWidth = ViewWidth.DESKTOP;\n    } else if (viewportWidth >= BREAKPOINTS.TABLET) {\n      viewWidth = ViewWidth.TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n      viewWidth = ViewWidth.SMALL_TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {\n      viewWidth = ViewWidth.MOBILE;\n    } else {\n      viewWidth = ViewWidth.SMALL_MOBILE;\n    }\n\n    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n      viewHeight = ViewHeight.MEDIUM;\n    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n      viewHeight = ViewHeight.SMALL;\n    } else {\n      viewHeight = ViewHeight.EXTRA_SMALL;\n    }\n\n    if (viewWidth <= ViewWidth.MOBILE) {\n      sizeX = SizeType.COMPACT;\n    } else {\n      sizeX = SizeType.REGULAR;\n    }\n\n    if (\n      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n      viewHeight <= ViewHeight.EXTRA_SMALL\n    ) {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else if (bridge.type === 'force_mobile' || bridge.type === 'force_mobile_compact') {\n    viewWidth = ViewWidth.MOBILE;\n    sizeX = SizeType.COMPACT;\n\n    if (bridge.type === 'force_mobile_compact') {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else {\n    if (sizeX === undefined && viewWidth !== undefined) {\n      if (viewWidth <= ViewWidth.MOBILE) {\n        sizeX = SizeType.COMPACT;\n      } else {\n        sizeX = SizeType.REGULAR;\n      }\n    }\n    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {\n      if (\n        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n        viewHeight <= ViewHeight.EXTRA_SMALL\n      ) {\n        sizeY = SizeType.COMPACT;\n      } else {\n        sizeY = SizeType.REGULAR;\n      }\n    }\n  }\n\n  return {\n    viewWidth,\n    viewHeight,\n    sizeX,\n    sizeY,\n    hasPointer,\n    hasHover,\n  };\n}\n"],"names":["React","hasMouse","_hasPointer","useBridgeAdaptivity","BREAKPOINTS","SizeType","ViewHeight","ViewWidth","AdaptivityContext","AdaptivityProvider","viewWidth","viewHeight","sizeX","sizeY","hasPointer","hasHover","children","bridge","adaptivity","useMemo","calculateAdaptivity","Provider","value","type","viewportWidth","viewportHeight","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","COMPACT","REGULAR","undefined"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography {\n  id: string;\n  children?: React.ReactNode;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","styles","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","closing","setClosing","useState","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","useWaitTransitionFinish","Platform","stopPropagation","useScrollLock","Button","FocusTrap","ModalDismissButton","PopoutWrapper","Tappable","Caption","Footnote","Text","Title","styles","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component","AlertAction","action","onItemClick","restProps","handleItemClick","useCallback","title","actionProp","autoClose","mode","restActionProps","href","onClick","size","target","Alert","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","waitTransitionFinish","closing","setClosing","useState","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","getRootRef","role","aria-modal","aria-labelledby","aria-describedby","div","id","map","i","key","aria-label"],"mappings":"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"}