@vkontakte/vkui 5.4.3 → 5.5.1

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

@@ -11,6 +11,6 @@ export type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> & H
  * @see https://vkcom.github.io/VKUI/#/Accordion
  */
 export declare const Accordion: {
-    ({ getRootRef, className, ...restProps }: AccordionProps): JSX.Element;
-    Summary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: import("./AccordionSummary").AccordionSummaryProps) => JSX.Element;
+    ({ getRootRef, className, ...restProps }: AccordionProps): React.JSX.Element;
+    Summary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: import("./AccordionSummary").AccordionSummaryProps) => React.JSX.Element;
 };

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 * @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"}
+{"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,UAAUR"}

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

@@ -20,4 +20,4 @@ export interface AccordionSummaryProps extends Omit<SimpleCellProps, 'expandable
  * @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;
+export declare const AccordionSummary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: AccordionSummaryProps) => React.JSX.Element;

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 * @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"}
+{"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;IACtB,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.d.ts

@@ -15,4 +15,4 @@ export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef'
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */
-export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, ...restProps }: ActionSheetProps) => JSX.Element;
+export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, ...restProps }: ActionSheetProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: VoidFunction;\n  /**\n   * Только iOS.\n   */\n  iosCloseItem: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection = 'bottom',\n  popupOffsetDistance,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose();\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    (action, immediateAction, autoClose) => (event) => {\n      event.persist();\n      immediateAction && immediateAction(event);\n      if (autoClose) {\n        _action.current = () => action && action(event);\n        setClosing(true);\n      } else {\n        action && action(event);\n      }\n    },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={closing}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS && !isDesktop && iosCloseItem}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","restProps","platform","closing","setClosing","useState","onClose","_action","useRef","afterClose","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","undefined","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: VoidFunction;\n  /**\n   * Только iOS.\n   */\n  iosCloseItem: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection = 'bottom',\n  popupOffsetDistance,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose();\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    (action, immediateAction, autoClose) => (event) => {\n      event.persist();\n      immediateAction && immediateAction(event);\n      if (autoClose) {\n        _action.current = () => action && action(event);\n        setClosing(true);\n      } else {\n        action && action(event);\n      }\n    },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={closing}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS && !isDesktop && iosCloseItem}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","restProps","platform","closing","setClosing","useState","onClose","_action","useRef","afterClose","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","undefined","weight","alignY","onClick","hasMask","fixed"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,kBAAkB,QAA0B,uBAAuB;AAC5E,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,0BAA0B,QAAQ,+BAA+B;AAE1E,OAAOC,YAAY,2BAA2B;AAiB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,UAAS,EACTC,OAAM,EACNC,KAAI,EACJC,MAAK,EACLC,aAAY,EACZC,gBAAiB,SAAQ,EACzBC,oBAAmB,EACnB,GAAGC,WACc;IACjB,MAAMC,WAAWpB;IACjB,MAAM,CAACqB,SAASC,WAAW,GAAG1B,MAAM2B,SAAS;IAC7C,MAAMC,UAAU,IAAMF,WAAW;IACjC,MAAMG,UAAU7B,MAAM8B,OAAO7B;IAE7B,MAAM8B,aAAa;QACjBR,UAAUK;QACVC,QAAQG;QACRH,QAAQG,UAAU/B;IACpB;IAEA,MAAM,EAAEgC,UAAS,EAAE,GAAG/B;IAEtBK,cAAc,CAAC0B;IAEf,IAAIC,UAAUV,aAAalB,SAAS6B,MAAM,MAAM;IAEhD,IAAIF,WAAW;QACbC,UAAU;IACZ;IAEA,MAAME,2BAA2B/B,WAAW0B,YAAYG;IACxDlC,MAAMqC,UAAU;QACd,IAAIZ,SAAS;YACXW,yBAAyBE;QAC3B,OAAO;YACLF,yBAAyBG;QAC3B;IACF,GAAG;QAACd;QAASW;KAAyB;IAEtC,MAAMI,cAAcxC,MAAMyC,YACxB,CAACC,QAAQC,iBAAiBC,YAAc,CAACC;YACvCA,MAAMC;YACNH,mBAAmBA,gBAAgBE;YACnC,IAAID,WAAW;gBACbf,QAAQG,UAAU,IAAMU,UAAUA,OAAOG;gBACzCnB,WAAW;YACb,OAAO;gBACLgB,UAAUA,OAAOG;YACnB;QACF,GACA,EAAE;IAEJ,MAAME,eAAe5C,cAAc;QAAEqC;QAAaP;IAAU;IAE5D,MAAMe,oBAAoBf,YAAYrB,6BAA6BD;IAEnE,MAAMsC,gBAAgBhB,YAClBiB,OAAOC,OAAO5B,WAAW;QAAED;QAAqBD;IAAe,KAC/DE;IAEJ,MAAM6B,4BACJ,oBAAC1C,mBAAmB2C;QAASC,OAAOP;qBAClC,oBAACC;QACCvB,SAASA;QACTS,SAASA;QACR,GAAGe,aAAa;QACjBrB,SAASA;QACTZ,WAAWiB,YAAYjB,YAAYuC;QACnCpC,OAAOc,YAAYd,QAAQoC;OAE1B,AAACtC,CAAAA,UAAUC,IAAG,mBACb,oBAACD;QAAOD,WAAWH,MAAM,CAAC,sBAAsB;OAC7CI,wBACC,oBAACR;QAAS+C,QAAO;QAAIxC,WAAWH,MAAM,CAAC,qBAAqB;OACzDI,SAGJC,sBAAQ,oBAACT;QAASO,WAAWH,MAAM,CAAC,oBAAoB;OAAGK,QAG/DH,UACAS,aAAalB,SAAS6B,OAAO,CAACF,aAAab;IAKlD,IAAIa,WAAW;QACb,OAAOmB;IACT;IAEA,qBACE,oBAAC5C;QACCiB,SAASA;QACTgC,QAAO;QACPzC,WAAWA;QACXG,OAAOA;QACPuC,SAAS9B;QACT+B,SAAAA;QACAC,OAAAA;OAECR;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (\n  action: ActionType<T> | undefined,\n  immediateAction: ActionType<T> | undefined,\n  autoClose: boolean,\n) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  isDesktop?: boolean;\n};\n\nexport const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});\n"],"names":["React","ActionSheetContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAe/B,OAAO,MAAMC,qBAAqBD,MAAME,aAAa,CAA8B,CAAC,GAAG"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (\n  action: ActionType<T> | undefined,\n  immediateAction: ActionType<T> | undefined,\n  autoClose: boolean,\n) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  isDesktop?: boolean;\n};\n\nexport const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});\n"],"names":["React","ActionSheetContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAe/B,OAAO,MAAMC,qBAAqBD,MAAME,cAA2C,CAAC,GAAG"}

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';
-export declare const ActionSheetDefaultIosCloseItem: (props: ActionSheetItemProps) => JSX.Element;
+export declare const ActionSheetDefaultIosCloseItem: (props: ActionSheetItemProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,qBACE,oBAACF;QAAgBG,WAAAA,IAAS;QAACC,MAAK;QAAU,GAAGF,KAAK;OAAE;AAIxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,qBACE,oBAACF;QAAgBG,WAAAA;QAAUC,MAAK;QAAU,GAAGF,KAAK;OAAE;AAIxD,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SharedDropdownProps } from './types';
 export type ActionSheetDropdownProps = Omit<SharedDropdownProps, 'popupDirection' | 'popupOffsetDistance'>;
-export declare const ActionSheetDropdown: ({ children, closing, toggleRef, className, ...restProps }: SharedDropdownProps) => JSX.Element;
+export declare const ActionSheetDropdown: ({ children, closing, toggleRef, className, ...restProps }: SharedDropdownProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport type ActionSheetDropdownProps = Omit<\n  SharedDropdownProps,\n  'popupDirection' | 'popupOffsetDistance'\n>;\n\nexport const ActionSheetDropdown = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  className,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        closing && styles['ActionSheet--closing'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","FocusTrap","styles","stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","className","restProps","sizeY","platform","onClick","IOS","COMPACT"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,kBAA2C,CAACC,IAAMA,EAAED,eAAe;AAOzE,OAAO,MAAME,sBAAsB,CAAC,EAClCC,SAAQ,EACRC,QAAO,EACP,6DAA6D;AAC7DC,UAAS,EACTC,UAAS,EACT,GAAGC,WACiB,GAAK;IACzB,MAAM,EAAEC,MAAK,EAAE,GAAGd;IAClB,MAAMe,WAAWd;IAEjB,qBACE,oBAACG;QACE,GAAGS,SAAS;QACbG,SAASV;QACTM,WAAWb,WACTM,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASc,GAAG,IAAIZ,MAAM,CAAC,mBAAmB,EACvDK,WAAWL,MAAM,CAAC,uBAAuB,EACzCS,UAAUZ,SAASgB,OAAO,IAAIb,MAAM,CAAC,6BAA6B,EAClEO;OAGDH;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport type ActionSheetDropdownProps = Omit<\n  SharedDropdownProps,\n  'popupDirection' | 'popupOffsetDistance'\n>;\n\nexport const ActionSheetDropdown = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  className,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const platform = usePlatform();\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        closing && styles['ActionSheet--closing'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","FocusTrap","styles","stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","className","restProps","sizeY","platform","onClick","IOS","COMPACT"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,kBAA2C,CAACC,IAAMA,EAAED;AAO1D,OAAO,MAAME,sBAAsB,CAAC,EAClCC,SAAQ,EACRC,QAAO,EACP,6DAA6D;AAC7DC,UAAS,EACTC,UAAS,EACT,GAAGC,WACiB;IACpB,MAAM,EAAEC,MAAK,EAAE,GAAGd;IAClB,MAAMe,WAAWd;IAEjB,qBACE,oBAACG;QACE,GAAGS,SAAS;QACbG,SAASV;QACTM,WAAWb,WACTM,MAAM,CAAC,cAAc,EACrBU,aAAaZ,SAASc,OAAOZ,MAAM,CAAC,mBAAmB,EACvDK,WAAWL,MAAM,CAAC,uBAAuB,EACzCS,UAAUZ,SAASgB,WAAWb,MAAM,CAAC,6BAA6B,EAClEO;OAGDH;AAGP,EAAE"}

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SharedDropdownProps } from './types';
-export declare const ActionSheetDropdownDesktop: ({ children, toggleRef, closing, popupDirection, onClose, className, style, popupOffsetDistance, ...restProps }: SharedDropdownProps) => JSX.Element;
+export declare const ActionSheetDropdownDesktop: ({ children, toggleRef, closing, popupDirection, onClose, className, style, popupOffsetDistance, ...restProps }: SharedDropdownProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownDesktop = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const isPopupDirectionTop = React.useMemo(\n    () =>\n      popupDirection === 'top' ||\n      (typeof popupDirection === 'function' && popupDirection(elementRef) === 'top'),\n    [popupDirection, elementRef],\n  );\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={popupOffsetDistance}\n      placement={isPopupDirectionTop ? 'top-end' : 'bottom-end'}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        styles['ActionSheet--desktop'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n      style={style}\n      getRef={elementRef}\n      forcePortal={false}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","SizeType","useDOM","isRefObject","Platform","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","className","style","popupOffsetDistance","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","offsetDistance","placement","IOS","COMPACT","getRef","forcePortal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC,EAA8B;IAChF,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,OAAO,GAAGD,GAAG;AACpD;AAEA,OAAO,MAAME,6BAA6B,CAAC,EACzCC,SAAQ,EACRC,UAAS,EACTC,QAAO,EACPC,eAAc,EACdC,QAAO,EACPC,UAAS,EACTC,MAAK,EACLC,qBAAsB,EAAC,EACvB,GAAGC,WACiB,GAAK;IACzB,MAAM,EAAEC,SAAQ,EAAE,GAAGrB;IACrB,MAAMsB,WAAWxB;IACjB,MAAM,EAAEyB,MAAK,EAAE,GAAG5B;IAClB,MAAM6B,aAAa/B,MAAMgC,MAAM,CAAwB,IAAI;IAE3D7B,aAAa,IAAM;QACjB,MAAM8B,WAAWlB,MAAMK;QACvB,IAAI,CAACa,UAAU;YACbnB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C,CAAC;IACH,GAAG;QAACM;KAAU;IAEd,MAAMc,sBAAsBlC,MAAMmC,OAAO,CACvC,IACEb,mBAAmB,SAClB,OAAOA,mBAAmB,cAAcA,eAAeS,gBAAgB,OAC1E;QAACT;QAAgBS;KAAW;IAG9B,MAAMK,oBAAoBhC,iBAAiB,SAAS,CAACiC,IAAkB;QACrE,MAAMC,kBAAkBP,YAAYd;QACpC,IAAIqB,mBAAmB,CAACA,gBAAgBC,QAAQ,CAACF,EAAEG,MAAM,GAAW;YAClEjB;QACF,CAAC;IACH;IAEAvB,MAAMyC,SAAS,CAAC,IAAM;QACpBC,WAAW,IAAM;YACfN,kBAAkBO,GAAG,CAACf,SAAUgB,IAAI;QACtC;IACF,GAAG;QAACR;QAAmBR;KAAS;IAEhC,MAAMiB,UAAU7C,MAAM8C,WAAW,CAAC,CAACT,IAAqCA,EAAEU,eAAe,IAAI,EAAE;IAE/F,MAAMC,YAAYhD,MAAMmC,OAAO,CAAC,IAAM;QACpC,IAAI3B,YAA2DY,YAAY;YACzE,OAAOA;QACT,CAAC;QAED,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,oBAACR;QACCoC,WAAWA;QACXC,gBAAgBvB;QAChBwB,WAAWhB,sBAAsB,YAAY,YAAY;QACzDV,WAAWvB,WACTY,MAAM,CAAC,cAAc,EACrBgB,aAAapB,SAAS0C,GAAG,IAAItC,MAAM,CAAC,mBAAmB,EACvDA,MAAM,CAAC,uBAAuB,EAC9BiB,UAAUxB,SAAS8C,OAAO,IAAIvC,MAAM,CAAC,6BAA6B,EAClEW;QAEFC,OAAOA;QACP4B,QAAQtB;QACRuB,aAAa,KAAK;qBAElB,oBAAC3C;QAAUY,SAASA;QAAU,GAAGI,SAAS;QAAEkB,SAASA;OAClD1B;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useEffectDev } from '../../hooks/useEffectDev';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper } from '../Popper/Popper';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref;\n}\n\nexport const ActionSheetDropdownDesktop = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  className,\n  style,\n  popupOffsetDistance = 0,\n  ...restProps\n}: SharedDropdownProps) => {\n  const { document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n  const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n  useEffectDev(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      warn(`Свойство \"toggleRef\" не передано`, 'error');\n    }\n  }, [toggleRef]);\n\n  const isPopupDirectionTop = React.useMemo(\n    () =>\n      popupDirection === 'top' ||\n      (typeof popupDirection === 'function' && popupDirection(elementRef) === 'top'),\n    [popupDirection, elementRef],\n  );\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose?.();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document!.body);\n    });\n  }, [bodyClickListener, document]);\n\n  const onClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => e.stopPropagation(), []);\n\n  const targetRef = React.useMemo(() => {\n    if (isRefObject<SharedDropdownProps['toggleRef'], HTMLElement>(toggleRef)) {\n      return toggleRef;\n    }\n\n    return { current: toggleRef as HTMLElement };\n  }, [toggleRef]);\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={popupOffsetDistance}\n      placement={isPopupDirectionTop ? 'top-end' : 'bottom-end'}\n      className={classNames(\n        styles['ActionSheet'],\n        platform === Platform.IOS && styles['ActionSheet--ios'],\n        styles['ActionSheet--desktop'],\n        sizeY === SizeType.COMPACT && styles['ActionSheet--sizeY-compact'],\n        className,\n      )}\n      style={style}\n      getRef={elementRef}\n      forcePortal={false}\n    >\n      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>\n        {children}\n      </FocusTrap>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useEffectDev","useEventListener","usePlatform","SizeType","useDOM","isRefObject","Platform","warnOnce","FocusTrap","Popper","styles","warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","className","style","popupOffsetDistance","restProps","document","platform","sizeY","elementRef","useRef","toggleEl","isPopupDirectionTop","useMemo","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation","targetRef","offsetDistance","placement","IOS","COMPACT","getRef","forcePortal"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOJ,SAAS;AACtB,SAASK,MAAMC,GAAqC;IAClD,OAAOA,OAAO,aAAaA,MAAMA,IAAIC,UAAUD;AACjD;AAEA,OAAO,MAAME,6BAA6B,CAAC,EACzCC,SAAQ,EACRC,UAAS,EACTC,QAAO,EACPC,eAAc,EACdC,QAAO,EACPC,UAAS,EACTC,MAAK,EACLC,qBAAsB,EAAC,EACvB,GAAGC,WACiB;IACpB,MAAM,EAAEC,SAAQ,EAAE,GAAGrB;IACrB,MAAMsB,WAAWxB;IACjB,MAAM,EAAEyB,MAAK,EAAE,GAAG5B;IAClB,MAAM6B,aAAa/B,MAAMgC,OAA8B;IAEvD7B,aAAa;QACX,MAAM8B,WAAWlB,MAAMK;QACvB,IAAI,CAACa,UAAU;YACbnB,KAAK,CAAC,gCAAgC,CAAC,EAAE;QAC3C;IACF,GAAG;QAACM;KAAU;IAEd,MAAMc,sBAAsBlC,MAAMmC,QAChC,IACEb,mBAAmB,SAClB,OAAOA,mBAAmB,cAAcA,eAAeS,gBAAgB,OAC1E;QAACT;QAAgBS;KAAW;IAG9B,MAAMK,oBAAoBhC,iBAAiB,SAAS,CAACiC;QACnD,MAAMC,kBAAkBP,YAAYd;QACpC,IAAIqB,mBAAmB,CAACA,gBAAgBC,SAASF,EAAEG,SAAiB;YAClEjB;QACF;IACF;IAEAvB,MAAMyC,UAAU;QACdC,WAAW;YACTN,kBAAkBO,IAAIf,SAAUgB;QAClC;IACF,GAAG;QAACR;QAAmBR;KAAS;IAEhC,MAAMiB,UAAU7C,MAAM8C,YAAY,CAACT,IAAqCA,EAAEU,mBAAmB,EAAE;IAE/F,MAAMC,YAAYhD,MAAMmC,QAAQ;QAC9B,IAAI3B,YAA2DY,YAAY;YACzE,OAAOA;QACT;QAEA,OAAO;YAAEH,SAASG;QAAyB;IAC7C,GAAG;QAACA;KAAU;IAEd,qBACE,oBAACR;QACCoC,WAAWA;QACXC,gBAAgBvB;QAChBwB,WAAWhB,sBAAsB,YAAY;QAC7CV,WAAWvB,WACTY,MAAM,CAAC,cAAc,EACrBgB,aAAapB,SAAS0C,OAAOtC,MAAM,CAAC,mBAAmB,EACvDA,MAAM,CAAC,uBAAuB,EAC9BiB,UAAUxB,SAAS8C,WAAWvC,MAAM,CAAC,6BAA6B,EAClEW;QAEFC,OAAOA;QACP4B,QAAQtB;QACRuB,aAAa;qBAEb,oBAAC3C;QAAUY,SAASA;QAAU,GAAGI,SAAS;QAAEkB,SAASA;OAClD1B;AAIT,EAAE"}

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

@@ -26,5 +26,5 @@ export interface ActionSheetItemProps extends React.HTMLAttributes<HTMLElement>,
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
  */
-declare const ActionSheetItem: ({ children, autoClose, mode, meta, subtitle, before, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline, iconChecked: iconCheckedProp, className, ...restProps }: ActionSheetItemProps) => JSX.Element;
+declare const ActionSheetItem: ({ children, autoClose, mode, meta, subtitle, before, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline, iconChecked: iconCheckedProp, className, ...restProps }: ActionSheetItemProps) => React.JSX.Element;
 export { ActionSheetItem };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","Title","styles","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","onItemClick","isDesktop","useContext","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","level","input","type","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","Title","styles","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","onItemClick","isDesktop","useContext","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","level","input","type","disabled"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,kBAAkB,QAAqC,oCAAoC;AACpG,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,+BAA+B;AA8BlD;;CAEC,GACD,MAAMC,kBAAkB,CAAC,EACvBC,SAAQ,EACRC,UAAS,EACTC,MAAO,UAAS,EAChBC,KAAI,EACJC,SAAQ,EACRC,OAAM,EACNC,WAAU,EACVC,MAAK,EACLC,KAAI,EACJC,QAAO,EACPC,eAAc,EACdC,SAAQ,EACRC,QAAO,EACPC,iBAAgB,EAChBC,WAAY,MAAK,EACjBC,aAAaC,gBAAe,EAC5BC,UAAS,EACT,GAAGC,WACkB;IACrB,MAAMC,WAAW7B;IACjB,MAAM,EAAE8B,aAAc,IAAMhC,KAAI,EAAEiC,UAAS,EAAE,GAC3CrC,MAAMsC,WAAgD7B;IACxD,MAAM,EAAE8B,MAAK,EAAE,GAAGlC;IAElB,MAAM0B,cACJC,mBACCO,CAAAA,UAAUhC,SAASiC,wBAAU,oBAACvC,2CAAyB,oBAACC,0BAAqB;IAEhF,IAAIuC,YAA+BP,UAAUQ,OAAO,MAAM;IAE1D,IAAIpB,YAAY;QACdmB,YAAY;IACd;IAEA,MAAME,SAASvB,YAAYD,QAAQG;IACnC,MAAMsB,aAAa,CAACD,UAAU,CAACtB,UAAUc,aAAa3B,SAASqC;IAE/D,qBACE,oBAACnC;QACC+B,WAAWA;QACV,GAAGP,SAAS;QACbN,SAASN,aAAaM,UAAUQ,YAAYR,SAASC,kBAAkBiB,QAAQ7B;QAC/E8B,YAAYZ,aAAa3B,SAASqC,MAAM/B,MAAM,CAAC,0BAA0B,GAAGkC;QAC5Ef,WAAW9B,WACTW,MAAM,CAAC,kBAAkB,EACzBqB,aAAa3B,SAASqC,OAAO/B,MAAM,CAAC,uBAAuB,EAC3DI,SAAS,YAAYJ,MAAM,CAAC,+BAA+B,EAC3DI,SAAS,iBAAiBJ,MAAM,CAAC,oCAAoC,EACrEyB,UAAUhC,SAASiC,WAAW1B,MAAM,CAAC,iCAAiC,EACtE6B,UAAU7B,MAAM,CAAC,wBAAwB,EACzCuB,aAAavB,MAAM,CAAC,2BAA2B,EAC/CQ,cAAcR,MAAM,CAAC,8BAA8B,EACnDmB;OAGDZ,wBAAU,oBAAC4B;QAAIhB,WAAWnB,MAAM,CAAC,0BAA0B;OAAGO,uBAC/D,oBAAC4B;QACChB,WAAW9B,WACTW,MAAM,CAAC,6BAA6B,EACpC,CAACgB,aAAahB,MAAM,CAAC,4BAA4B;qBAGnD,oBAACmC;QACChB,WAAW9B,WACTW,MAAM,CAAC,2BAA2B,EAClC8B,cAAc9B,MAAM,CAAC,4BAA4B;OAGlDqB,aAAa3B,SAASqC,oBACrB,oBAAChC;QACCoB,WAAWnB,MAAM,CAAC,4BAA4B;QAC9CoC,QAAQhC,SAAS,WAAW,MAAM;QAClCiC,OAAOP,aAAa,MAAM;OAEzB5B,0BAGH,oBAACJ;QAAKqB,WAAWnB,MAAM,CAAC,4BAA4B;OAAGE,WAExDG,sBAAQ,oBAACP;QAAKqB,WAAWnB,MAAM,CAAC,wBAAwB;OAAGK,QAE7DC,0BAAY,oBAACT;QAAQsB,WAAWnB,MAAM,CAAC,4BAA4B;OAAGM,YAExEE,4BACC,oBAAC2B;QAAIhB,WAAWnB,MAAM,CAAC,yBAAyB;qBAC9C,oBAACsC;QACCC,MAAK;QACLpB,WAAWnB,MAAM,CAAC,yBAAyB;QAC3CU,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASQ,YAAYhC,MAAMA,MAAM0C,QAAQ7B;QACzCS,gBAAgBA;QAChBD,SAASA;QACT6B,UAAUpB,UAAUoB;sBAEtB,oBAACL;QAAIhB,WAAWnB,MAAM,CAAC,0BAA0B;OAAGiB;AAK9D;AAEA,SAAShB,eAAe,GAAG"}

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

@@ -68,6 +68,10 @@
   margin-right: 16px;
 }
 
+.ActionSheetItem--desktop .ActionSheetItem__before {
+  margin-right: 12px;
+}
+
 .ActionSheetItem--ios .ActionSheetItem__before {
   color: var(--vkui--color_icon_accent_themed);
   margin-right: 18px;

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

@@ -11,4 +11,4 @@ export interface AdaptiveIconRendererProps {
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/AdaptiveIconRenderer
  */
-export declare const AdaptiveIconRenderer: ({ IconCompact, IconRegular }: AdaptiveIconRendererProps) => JSX.Element;
+export declare const AdaptiveIconRenderer: ({ IconCompact, IconRegular }: AdaptiveIconRendererProps) => React.JSX.Element;

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

@@ -1 +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"}
+{"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;IAC1F,MAAM,EAAEC,MAAK,EAAE,GAAGJ;IAElB,qBACE,oBAACD,MAAMM,gBACJD,MAAME,yBAAW,oBAACJ;QAAYK,WAAWH,MAAME,QAAQC;QACvDH,MAAMI,yBAAW,oBAACL;QAAYI,WAAWH,MAAMI,QAAQD;;AAG9D,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\n\nexport interface SizeProps {\n  sizeX?: SizeType;\n  sizeY?: SizeType;\n}\n\nexport interface AdaptivityProps extends SizeProps {\n  /**\n   * @ignore\n   */\n  viewWidth?: ViewWidth;\n  /**\n   * @ignore\n   */\n  viewHeight?: ViewHeight;\n  /**\n   * @ignore\n   */\n  hasPointer?: boolean;\n  /**\n   * @ignore\n   */\n  hasHover?: boolean;\n}\n\nexport const AdaptivityContext = React.createContext<AdaptivityProps>({});\n"],"names":["React","AdaptivityContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AA2B/B,OAAO,MAAMC,kCAAoBD,MAAME,aAAa,CAAkB,CAAC,GAAG"}
+{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\n\nexport interface SizeProps {\n  sizeX?: SizeType;\n  sizeY?: SizeType;\n}\n\nexport interface AdaptivityProps extends SizeProps {\n  /**\n   * @ignore\n   */\n  viewWidth?: ViewWidth;\n  /**\n   * @ignore\n   */\n  viewHeight?: ViewHeight;\n  /**\n   * @ignore\n   */\n  hasPointer?: boolean;\n  /**\n   * @ignore\n   */\n  hasHover?: boolean;\n}\n\nexport const AdaptivityContext = React.createContext<AdaptivityProps>({});\n"],"names":["React","AdaptivityContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AA2B/B,OAAO,MAAMC,kCAAoBD,MAAME,cAA+B,CAAC,GAAG"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasChildren } from '../../types';
 import { type AdaptivityProps } from './AdaptivityContext';
 export interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {
@@ -6,4 +6,4 @@ export interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {
 /**
  * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
  */
-export declare const AdaptivityProvider: ({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, children, }: AdaptivityProviderProps) => JSX.Element;
+export declare const AdaptivityProvider: ({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, children, }: AdaptivityProviderProps) => React.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 { 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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"}
+{"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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAYC,WAAW,QAAQ,kBAAkB;AAC1D,SAA2BC,mBAAmB,QAAQ,kCAAkC;AACxF,SAASC,WAAW,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,QAAQ,uBAAuB;AAEpF,SAASC,iBAAiB,QAA8B,sBAAsB;AAI9E;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EACjCC,UAAS,EACTC,WAAU,EACVC,MAAK,EACLC,MAAK,EACLC,WAAU,EACVC,SAAQ,EACRC,SAAQ,EACgB;IACxB,MAAMC,SAASd;IACf,MAAMe,aAAalB,MAAMmB,QACvB,IACEC,oBACE;YACEV;YACAC;YACAC;YACAC;YACAC;YACAC;QACF,GACAE,SAEJ;QAACP;QAAWC;QAAYC;QAAOC;QAAOC;QAAYC;QAAUE;KAAO;IAGrE,qBAAO,oBAACT,kBAAkBa;QAASC,OAAOJ;OAAaF;AACzD,EAAE;AAEF,SAASI,oBACP,EAAEV,UAAS,EAAEC,WAAU,EAAEC,MAAK,EAAEC,MAAK,EAAEC,WAAU,EAAEC,SAAQ,EAAmB,EAC9EE,MAAwB;IAExB,IAAIA,OAAOM,SAAS,YAAY;QAC9B,MAAM,EAAEC,cAAa,EAAEC,eAAc,EAAE,GAAGR;QAE1C,IAAIO,iBAAiBpB,YAAYsB,SAAS;YACxChB,YAAYH,UAAUmB;QACxB,OAAO,IAAIF,iBAAiBpB,YAAYuB,QAAQ;YAC9CjB,YAAYH,UAAUoB;QACxB,OAAO,IAAIH,iBAAiBpB,YAAYwB,cAAc;YACpDlB,YAAYH,UAAUqB;QACxB,OAAO,IAAIJ,iBAAiBpB,YAAYyB,QAAQ;YAC9CnB,YAAYH,UAAUsB;QACxB,OAAO;YACLnB,YAAYH,UAAUuB;QACxB;QAEA,IAAIL,kBAAkBrB,YAAY2B,eAAe;YAC/CpB,aAAaL,WAAW0B;QAC1B,OAAO,IAAIP,kBAAkBrB,YAAY6B,yBAAyB;YAChEtB,aAAaL,WAAW4B;QAC1B,OAAO;YACLvB,aAAaL,WAAW6B;QAC1B;QAEA,IAAIzB,aAAaH,UAAUsB,QAAQ;YACjCjB,QAAQP,SAAS+B;QACnB,OAAO;YACLxB,QAAQP,SAASgC;QACnB;QAEA,IACE,AAAC3B,aAAaH,UAAUqB,gBAAgB1B,eACxCS,cAAcL,WAAW6B,aACzB;YACAtB,QAAQR,SAAS+B;QACnB,OAAO;YACLvB,QAAQR,SAASgC;QACnB;IACF,OAAO,IAAIpB,OAAOM,SAAS,kBAAkBN,OAAOM,SAAS,wBAAwB;QACnFb,YAAYH,UAAUsB;QACtBjB,QAAQP,SAAS+B;QAEjB,IAAInB,OAAOM,SAAS,wBAAwB;YAC1CV,QAAQR,SAAS+B;QACnB,OAAO;YACLvB,QAAQR,SAASgC;QACnB;IACF,OAAO;QACL,IAAIzB,UAAU0B,aAAa5B,cAAc4B,WAAW;YAClD,IAAI5B,aAAaH,UAAUsB,QAAQ;gBACjCjB,QAAQP,SAAS+B;YACnB,OAAO;gBACLxB,QAAQP,SAASgC;YACnB;QACF;QACA,IAAIxB,UAAUyB,aAAa5B,cAAc4B,aAAa3B,eAAe2B,WAAW;YAC9E,IACE,AAAC5B,aAAaH,UAAUqB,gBAAgB1B,eACxCS,cAAcL,WAAW6B,aACzB;gBACAtB,QAAQR,SAAS+B;YACnB,OAAO;gBACLvB,QAAQR,SAASgC;YACnB;QACF;IACF;IAEA,OAAO;QACL3B;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF"}

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

@@ -21,4 +21,4 @@ export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Alert
  */
-export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, ...restProps }: AlertProps) => JSX.Element;
+export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, ...restProps }: AlertProps) => React.JSX.Element;

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, 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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"}
+{"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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"}

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

@@ -14,4 +14,4 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => JSX.Element;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","styles","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","setPortalRoot","useState","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","styles","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","setPortalRoot","useState","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}

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

@@ -9,6 +9,18 @@
           user-select: none;
 }
 
+/** 
+ * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность 
+ * редактировать contenteditable элементы, если выше по дереву задан user-select: none; 
+ */
+
+.AppRoot--pointer-has-not [contenteditable] {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
 @media (pointer: coarse),(pointer: none) {
   .AppRoot--pointer-none {
     -webkit-user-select: none;
@@ -16,6 +28,13 @@
         -ms-user-select: none;
             user-select: none;
   }
+
+  .AppRoot--pointer-none [contenteditable] {
+    -webkit-user-select: text;
+       -moz-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
+  }
 }
 
 :global(.vkui__root--embedded) .AppRoot {

package/dist/cssm/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,MAAMC,iBAAiBD,MAAME,aAAa,CAA0B;IACzEC,YAAY,IAAI;AAClB,GAAG"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAW/B,OAAO,MAAMC,iBAAiBD,MAAME,cAAuC;IACzEC,YAAY;AACd,GAAG"}

package/dist/cssm/components/AppRoot/AppRootPortal.d.ts

@@ -1,7 +1,13 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasChildren } from '../../types';
 export interface AppRootPortalProps extends HasChildren {
     className?: string;
     forcePortal?: boolean;
+    /**
+     * Кастомный root-элемент портала.
+     * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`
+     * из контекста `AppRoot`.
+     */
+    portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
 }
-export declare const AppRootPortal: ({ children, className, forcePortal: forcePortalProp, }: AppRootPortalProps) => JSX.Element | null;
+export declare const AppRootPortal: ({ children, className, forcePortal: forcePortalProp, portalRoot: portalRootProp, }: AppRootPortalProps) => React.JSX.Element | null;