@vkontakte/vkui 5.8.0-beta.0 → 5.8.1-alpha.0

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     mode?: 'vertical' | 'horizontal';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
  */
-export declare const RadioGroup: ({ mode, children, className, ...restProps }: RadioGroupProps) => React.JSX.Element;
+export declare const RadioGroup: ({ mode, ...restProps }: RadioGroupProps) => React.JSX.Element;

package/dist/cssm/components/RadioGroup/RadioGroup.js

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './RadioGroup.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/RadioGroup
- */ export const RadioGroup = ({ mode = 'vertical', children, className, ...restProps })=>/*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['RadioGroup'], 'vkuiInternalRadioGroup', mode === 'horizontal' && styles['RadioGroup--mode-horizontal'], className),
+ */ export const RadioGroup = ({ mode = 'vertical', ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: classNames(styles['RadioGroup'], 'vkuiInternalRadioGroup', mode === 'horizontal' && styles['RadioGroup--mode-horizontal']),
         ...restProps
-    }, children);
+    });
 
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({\n  mode = 'vertical',\n  children,\n  className,\n  ...restProps\n}: RadioGroupProps) => (\n  <div\n    className={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n      className,\n    )}\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n"],"names":["React","classNames","styles","RadioGroup","mode","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,OAAO,UAAU,EACjBC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACa,iBAChB,oBAACC;QACCF,WAAWL,WACTC,MAAM,CAAC,aAAa,EACpB,0BACAE,SAAS,gBAAgBF,MAAM,CAAC,8BAA8B,EAC9DI;QAED,GAAGC,SAAS;OAEZF,UAEH"}
+{"version":3,"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RadioGroup\n */\nexport const RadioGroup = ({ mode = 'vertical', ...restProps }: RadioGroupProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['RadioGroup'],\n      'vkuiInternalRadioGroup',\n      mode === 'horizontal' && styles['RadioGroup--mode-horizontal'],\n    )}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","RadioGroup","mode","restProps","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EAAEC,OAAO,UAAU,EAAE,GAAGC,WAA4B,iBAC7E,oBAACJ;QACCK,eAAeN,WACbE,MAAM,CAAC,aAAa,EACpB,0BACAE,SAAS,gBAAgBF,MAAM,CAAC,8BAA8B;QAE/D,GAAGG,SAAS;OAEf"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 export interface RemovableProps {
     /**
      * iOS only. Текст в выезжающей кнопке для удаления ячейки.
@@ -10,7 +10,7 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;
 }
-interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {
     /**
      * Расположение кнопки удаления.
      */
@@ -24,5 +24,5 @@ interface RemovableOwnProps extends React.HTMLAttributes<HTMLDivElement>, Remova
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
  */
-export declare const Removable: ({ getRootRef, children, onRemove, removePlaceholder, align, className, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
+export declare const Removable: ({ children, onRemove, removePlaceholder, align, indent, ...restProps }: RemovableOwnProps) => React.JSX.Element;
 export {};

package/dist/cssm/components/Removable/Removable.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
 import { getTitleFromChildren } from '../../lib/utils';
 import { IconButton } from '../IconButton/IconButton';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import styles from './Removable.module.css';
 /**
@@ -73,18 +73,16 @@ import styles from './Removable.module.css';
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Removable
- */ export const Removable = ({ getRootRef, children, onRemove = noop, removePlaceholder = 'Удалить', align = 'center', className, indent = false, ...restProps })=>{
+ */ export const Removable = ({ children, onRemove = noop, removePlaceholder = 'Удалить', align = 'center', indent = false, ...restProps })=>{
     const platform = usePlatform();
-    const ref = useExternRef(getRootRef);
     const onRemoveClick = (e)=>{
         e.preventDefault();
         onRemove(e);
     };
     const removePlaceholderString = getTitleFromChildren(removePlaceholder);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        ref: ref,
-        className: classNames(platform === Platform.IOS && styles['Removable--ios'], align === 'start' && styles['Removable--align-start'], indent && styles['Removable--indent'], className)
+        baseClassName: classNames(platform === Platform.IOS && styles['Removable--ios'], align === 'start' && styles['Removable--align-start'], indent && styles['Removable--indent'])
     }, platform !== Platform.IOS && /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')
     }, children, /*#__PURE__*/ React.createElement(IconButton, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  className,\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      className={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n        className,\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","ref","onRemoveClick","preventDefault","IOS","activeMode","hoverMode"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps, HasChildren {\n  removePlaceholderString?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        className={classNames(styles['Removable__action'], styles['Removable__toggle'])}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i className={styles['Removable__toggle-in']} role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span className={styles['Removable__offset']} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles['Removable__remove']}\n        onClick={onRemove}\n      >\n        <span className={styles['Removable__remove-in']}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends HTMLAttributesWithRootRef<HTMLDivElement>, RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === Platform.IOS && styles['Removable--ios'],\n        align === 'start' && styles['Removable--align-start'],\n        indent && styles['Removable--indent'],\n      )}\n    >\n      {platform !== Platform.IOS && (\n        <div className={classNames(styles['Removable__content'], 'vkuiInternalRemovable__content')}>\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={styles['Removable__action']}\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles['Removable__offset']} aria-hidden />\n        </div>\n      )}\n\n      {platform === Platform.IOS && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","noop","useGlobalEventListener","usePlatform","useDOM","Platform","getTitleFromChildren","IconButton","RootComponent","Tappable","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","style","transform","onTransitionEnd","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Component","getRootRef","Removable","align","indent","restProps","platform","onRemoveClick","preventDefault","baseClassName","IOS","activeMode","hoverMode"],"mappings":"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"}

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

@@ -54,5 +54,5 @@ export interface RichCellProps extends TappableProps {
  */
 export declare const RichCell: {
     ({ subhead, children, text, caption, before, after, afterCaption, bottom, actions, multiline, className, ...restProps }: RichCellProps): React.JSX.Element;
-    Icon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+    Icon: (props: import("./RichCellIcon/RichCellIcon").RichCellIconProps) => React.JSX.Element;
 };

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const RichCellIcon: ({ children, className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+import { HTMLAttributesWithRootRef } from '../../../types';
+export type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export declare const RichCellIcon: (props: RichCellIconProps) => React.JSX.Element;

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../../RootComponent/RootComponent';
 import styles from './RichCellIcon.module.css';
-export const RichCellIcon = ({ children, className, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        ...restProps,
-        className: classNames(styles['RichCellIcon'], className)
-    }, children);
+export const RichCellIcon = (props)=>{
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['RichCellIcon'],
+        ...props
+    });
 };
 
 //# sourceMappingURL=RichCellIcon.js.map

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './RichCellIcon.module.css';\n\nexport const RichCellIcon = ({\n  children,\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div {...restProps} className={classNames(styles['RichCellIcon'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","RichCellIcon","children","className","restProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,MAAMC,eAAe,CAAC,EAC3BC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACkC;IACrC,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAED,WAAWJ,WAAWC,MAAM,CAAC,eAAe,EAAEG;OAC/DD;AAGP,EAAE"}
+{"version":3,"sources":["../../../../../src/components/RichCell/RichCellIcon/RichCellIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './RichCellIcon.module.css';\n\nexport type RichCellIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const RichCellIcon = (props: RichCellIconProps) => {\n  return <RootComponent baseClassName={styles['RichCellIcon']} {...props} />;\n};\n"],"names":["React","RootComponent","styles","RichCellIcon","props","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAI/C,OAAO,MAAMC,eAAe,CAACC;IAC3B,qBAAO,oBAACH;QAAcI,eAAeH,MAAM,CAAC,eAAe;QAAG,GAAGE,KAAK;;AACxE,EAAE"}

package/dist/cssm/components/RichTooltip/RichTooltip.js

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HoverPopper } from '../HoverPopper/HoverPopper';
 import styles from './RichTooltip.module.css';
+const stylesAppearance = {
+    accent: styles['RichTooltip--appearance-accent'],
+    white: styles['RichTooltip--appearance-white'],
+    black: styles['RichTooltip--appearance-black'],
+    inversion: styles['RichTooltip--appearance-inversion']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
  */ export const RichTooltip = ({ children, arrow = true, appearance = 'neutral', className, ...popperProps })=>{
     return /*#__PURE__*/ React.createElement(HoverPopper, {
-        className: classNames(styles['RichTooltip'], appearance !== 'neutral' && ({
-            accent: styles['RichTooltip--appearance-accent'],
-            white: styles['RichTooltip--appearance-white'],
-            black: styles['RichTooltip--appearance-black'],
-            inversion: styles['RichTooltip--appearance-inversion']
-        })[appearance], className),
+        className: classNames(styles['RichTooltip'], appearance !== 'neutral' && stylesAppearance[appearance], className),
         arrow: arrow,
         arrowClassName: styles['RichTooltip__arrow'],
         ...popperProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        appearance !== 'neutral' &&\n          {\n            accent: styles['RichTooltip--appearance-accent'],\n            white: styles['RichTooltip--appearance-white'],\n            black: styles['RichTooltip--appearance-black'],\n            inversion: styles['RichTooltip--appearance-inversion'],\n          }[appearance],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","HoverPopper","styles","RichTooltip","children","arrow","appearance","className","popperProps","accent","white","black","inversion","arrowClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,OAAOC,YAAY,2BAA2B;AAS9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,QAAQ,IAAI,EACZC,aAAa,SAAS,EACtBC,SAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACP;QACCM,WAAWP,WACTE,MAAM,CAAC,cAAc,EACrBI,eAAe,aACb,CAAA;YACEG,QAAQP,MAAM,CAAC,iCAAiC;YAChDQ,OAAOR,MAAM,CAAC,gCAAgC;YAC9CS,OAAOT,MAAM,CAAC,gCAAgC;YAC9CU,WAAWV,MAAM,CAAC,oCAAoC;QACxD,CAAA,CAAC,CAACI,WAAW,EACfC;QAEFF,OAAOA;QACPQ,gBAAgBX,MAAM,CAAC,qBAAqB;QAC3C,GAAGM,WAAW;OAEdJ;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/RichTooltip/RichTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HoverPopper, HoverPopperProps } from '../HoverPopper/HoverPopper';\nimport styles from './RichTooltip.module.css';\n\nconst stylesAppearance = {\n  accent: styles['RichTooltip--appearance-accent'],\n  white: styles['RichTooltip--appearance-white'],\n  black: styles['RichTooltip--appearance-black'],\n  inversion: styles['RichTooltip--appearance-inversion'],\n};\n\nexport interface RichTooltipProps extends Omit<HoverPopperProps, 'arrowClassName'> {\n  /**\n   * Стиль отображения подсказки\n   */\n  appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichTooltip\n */\nexport const RichTooltip = ({\n  children,\n  arrow = true,\n  appearance = 'neutral',\n  className,\n  ...popperProps\n}: RichTooltipProps) => {\n  return (\n    <HoverPopper\n      className={classNames(\n        styles['RichTooltip'],\n        appearance !== 'neutral' && stylesAppearance[appearance],\n        className,\n      )}\n      arrow={arrow}\n      arrowClassName={styles['RichTooltip__arrow']}\n      {...popperProps}\n    >\n      {children}\n    </HoverPopper>\n  );\n};\n"],"names":["React","classNames","HoverPopper","styles","stylesAppearance","accent","white","black","inversion","RichTooltip","children","arrow","appearance","className","popperProps","arrowClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAA0B,6BAA6B;AAC3E,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,mBAAmB;IACvBC,QAAQF,MAAM,CAAC,iCAAiC;IAChDG,OAAOH,MAAM,CAAC,gCAAgC;IAC9CI,OAAOJ,MAAM,CAAC,gCAAgC;IAC9CK,WAAWL,MAAM,CAAC,oCAAoC;AACxD;AASA;;CAEC,GACD,OAAO,MAAMM,cAAc,CAAC,EAC1BC,QAAQ,EACRC,QAAQ,IAAI,EACZC,aAAa,SAAS,EACtBC,SAAS,EACT,GAAGC,aACc;IACjB,qBACE,oBAACZ;QACCW,WAAWZ,WACTE,MAAM,CAAC,cAAc,EACrBS,eAAe,aAAaR,gBAAgB,CAACQ,WAAW,EACxDC;QAEFF,OAAOA;QACPI,gBAAgBZ,MAAM,CAAC,qBAAqB;QAC3C,GAAGW,WAAW;OAEdJ;AAGP,EAAE"}

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

@@ -2,7 +2,7 @@
   box-shadow: var(--vkui--elevation3);
   border-radius: var(--vkui--size_border_radius--regular);
   background-color: var(--vkui--color_background_modal);
-  animation: vkui-richtooltip-fadein 0.2s ease;
+  animation: richtooltip-fade-in 0.2s ease;
   color: var(--vkui--color_text_primary);
 }
 
@@ -46,7 +46,7 @@
   color: var(--vkui--color_background_modal_inverse);
 }
 
-@keyframes vkui-richtooltip-fadein {
+@keyframes richtooltip-fade-in {
   from {
     opacity: 0;
   }

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { NavIdProps } from '../../lib/getNavId';
-export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
     activeView: string;
     onTransition?(params: {
         isBack: boolean;
@@ -18,4 +19,4 @@ export interface RootState {
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */
-export declare const Root: ({ children, activeView: _activeView, onTransition, nav, className, ...restProps }: RootProps) => React.JSX.Element;
+export declare const Root: ({ children, activeView: _activeView, onTransition, nav, ...restProps }: RootProps) => React.JSX.Element;

package/dist/cssm/components/Root/Root.js

@@ -10,12 +10,14 @@ import { warnOnce } from '../../lib/warnOnce';
 import { ScrollContext } from '../AppRoot/ScrollContext';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
+import { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { SplitColContext } from '../SplitCol/SplitColContext';
 import styles from './Root.module.css';
 const warn = warnOnce('Root');
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
- */ export const Root = ({ children, activeView: _activeView, onTransition, nav, className, ...restProps })=>{
+ */ export const Root = ({ children, activeView: _activeView, onTransition, nav, ...restProps })=>{
     const scroll = React.useContext(ScrollContext);
     const platform = usePlatform();
     const { document } = useDOM();
@@ -88,17 +90,17 @@ const warn = warnOnce('Root');
     ]);
     const onAnimationEnd = (e)=>{
         if ([
-            styles['vkui-root-android-animation-hide-back'],
-            styles['vkui-root-android-animation-show-forward'],
-            styles['vkui-root-ios-animation-hide-back'],
-            styles['vkui-root-ios-animation-show-forward']
+            styles['root-android-animation-hide-back'],
+            styles['root-android-animation-show-forward'],
+            styles['root-ios-animation-hide-back'],
+            styles['root-ios-animation-show-forward']
         ].includes(e.animationName)) {
             finishTransition();
         }
     };
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['Root'], platform === Platform.IOS && styles['Root--ios'], transition && styles['Root--transition'], className)
+        baseClassName: classNames(styles['Root'], platform === Platform.IOS && styles['Root--ios'], transition && styles['Root--transition'])
     }, views.map((view)=>{
         const viewId = getNavId(view.props, warn);
         if (viewId !== activeView && !(transition && viewId === prevView)) {
@@ -111,6 +113,8 @@ const warn = warnOnce('Root');
             ref: (e)=>viewId && (viewNodes[viewId] = e),
             onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
             className: classNames(styles['Root__view'], transition && viewId === prevView && isBack && styles['Root__view--hide-back'], transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'], transition && viewId === activeView && isBack && styles['Root__view--show-back'], transition && viewId === activeView && !isBack && styles['Root__view--show-forward'])
+        }, /*#__PURE__*/ React.createElement(NavTransitionDirectionProvider, {
+            isBack: isBack
         }, /*#__PURE__*/ React.createElement(NavTransitionProvider, {
             entering: transition && viewId === activeView
         }, /*#__PURE__*/ React.createElement("div", {
@@ -118,7 +122,7 @@ const warn = warnOnce('Root');
             style: {
                 marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined
             }
-        }, view)));
+        }, view))));
     }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['root-android-animation-hide-back'],\n        styles['root-android-animation-show-forward'],\n        styles['root-ios-animation-hide-back'],\n        styles['root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionDirectionProvider isBack={isBack}>\n              <NavTransitionProvider entering={transition && viewId === activeView}>\n                <div\n                  className={styles['Root__scrollCompensation']}\n                  style={{\n                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                  }}\n                >\n                  {view}\n                </div>\n              </NavTransitionProvider>\n            </NavTransitionDirectionProvider>\n          </div>\n        );\n      })}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","NavTransitionDirectionProvider","RootComponent","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","baseClassName","viewId","isTransitionTarget","compensateScroll","div","key","ref","undefined","className","entering","style","marginTop"],"mappings":"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"}

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

@@ -27,12 +27,11 @@
 }
 
 .Root__view--show-forward {
-  animation: vkui-root-android-animation-show-forward 0.3s var(--vkui--animation_easing_platform);
+  animation: root-android-animation-show-forward 0.3s var(--vkui--animation_easing_platform);
 }
 
 .Root__view--hide-back {
-  animation: vkui-root-android-animation-hide-back 0.3s var(--vkui--animation_easing_platform)
-    forwards;
+  animation: root-android-animation-hide-back 0.3s var(--vkui--animation_easing_platform) forwards;
 }
 
 /**
@@ -52,22 +51,22 @@
 }
 
 .Root--ios .Root__view--show-back::after {
-  animation: vkui-root-ios-animation-show-back 0.6s var(--vkui--animation_easing_platform) forwards;
+  animation: root-ios-animation-show-back 0.6s var(--vkui--animation_easing_platform) forwards;
 }
 
 .Root--ios .Root__view--hide-forward::after {
-  animation: vkui-root-ios-animation-hide-forward 0.6s var(--vkui--animation_easing_platform);
+  animation: root-ios-animation-hide-forward 0.6s var(--vkui--animation_easing_platform);
 }
 
 .Root--ios .Root__view--show-forward {
-  animation: vkui-root-ios-animation-show-forward 0.6s var(--vkui--animation_easing_platform);
+  animation: root-ios-animation-show-forward 0.6s var(--vkui--animation_easing_platform);
 }
 
 .Root--ios .Root__view--hide-back {
-  animation: vkui-root-ios-animation-hide-back 0.6s var(--vkui--animation_easing_platform) forwards;
+  animation: root-ios-animation-hide-back 0.6s var(--vkui--animation_easing_platform) forwards;
 }
 
-@keyframes vkui-root-ios-animation-show-back {
+@keyframes root-ios-animation-show-back {
   from {
     opacity: 0.3;
   }
@@ -77,7 +76,7 @@
   }
 }
 
-@keyframes vkui-root-ios-animation-hide-forward {
+@keyframes root-ios-animation-hide-forward {
   from {
     opacity: 0;
   }
@@ -87,7 +86,7 @@
   }
 }
 
-@keyframes vkui-root-ios-animation-hide-back {
+@keyframes root-ios-animation-hide-back {
   from {
     transform: translate3d(0, 0, 0);
   }
@@ -97,7 +96,7 @@
   }
 }
 
-@keyframes vkui-root-ios-animation-show-forward {
+@keyframes root-ios-animation-show-forward {
   from {
     transform: translate3d(0, 100%, 0);
   }
@@ -111,7 +110,7 @@
  * Android
  */
 
-@keyframes vkui-root-android-animation-hide-back {
+@keyframes root-android-animation-hide-back {
   from {
     transform: scale(1);
     opacity: 1;
@@ -123,7 +122,7 @@
   }
 }
 
-@keyframes vkui-root-android-animation-show-forward {
+@keyframes root-android-animation-show-forward {
   from {
     transform: scale(1.05);
     opacity: 0;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
+export interface RootComponentProps<T> extends React.AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
+    baseClassName?: string;
+}
+/**
+ * Базовый корневой компонент.
+ */
+export declare const RootComponent: <T>({ Component, baseClassName, className, getRootRef, ...restProps }: RootComponentProps<T>) => React.JSX.Element;

package/dist/cssm/components/RootComponent/RootComponent.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+/**
+ * Базовый корневой компонент.
+ */ export const RootComponent = ({ Component = 'div', baseClassName, className, getRootRef, ...restProps })=>/*#__PURE__*/ React.createElement(Component, {
+        ref: getRootRef,
+        className: classNames(baseClassName, className),
+        ...restProps
+    });
+
+//# sourceMappingURL=RootComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>) => (\n  <Component ref={getRootRef} className={classNames(baseClassName, className)} {...restProps} />\n);\n"],"names":["React","classNames","RootComponent","Component","baseClassName","className","getRootRef","restProps","ref"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAU7C;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EACV,GAAGC,WACmB,iBACtB,oBAACJ;QAAUK,KAAKF;QAAYD,WAAWJ,WAAWG,eAAeC;QAAa,GAAGE,SAAS;OAC1F"}

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

@@ -1,5 +1,5 @@
 .ScreenSpinner {
-  animation: vkui-screen-spinner-intro 0.3s ease;
+  animation: screen-spinner-intro 0.3s ease;
 }
 
 .ScreenSpinner--clickable {
@@ -36,16 +36,18 @@
 }
 
 .ScreenSpinner__icon :global(.vkuiIcon) {
-  animation: vkui-screen-spinner-intro 0.2s ease;
+  animation: screen-spinner-intro 0.2s ease;
 }
 
+/* stylelint-disable-next-line selector-max-type */
+
 .ScreenSpinner__icon--state-done :global(.vkuiIcon) path {
   stroke-dasharray: 50;
   stroke-dashoffset: 50;
-  animation: vkui-screen-spinner-iconDone 0.6s 0.3s var(--vkui--animation_easing_platform) forwards;
+  animation: screen-spinner-icon-done 0.6s 0.3s var(--vkui--animation_easing_platform) forwards;
 }
 
-@keyframes vkui-screen-spinner-iconDone {
+@keyframes screen-spinner-icon-done {
   from {
     stroke-dashoffset: 50;
   }
@@ -55,7 +57,7 @@
   }
 }
 
-@keyframes vkui-screen-spinner-intro {
+@keyframes screen-spinner-intro {
   from {
     opacity: 0;
   }

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

@@ -20,4 +20,4 @@ export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonE
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/ScrollArrow
  */
-export declare const ScrollArrow: ({ size, offsetY, direction, className, getRootRef, children, ...restProps }: ScrollArrowProps) => React.JSX.Element;
+export declare const ScrollArrow: ({ size, offsetY, direction, children, ...restProps }: ScrollArrowProps) => React.JSX.Element;

package/dist/cssm/components/ScrollArrow/ScrollArrow.js

@@ -1,7 +1,16 @@
 import * as React from 'react';
 import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './ScrollArrow.module.css';
+const stylesSize = {
+    m: styles['ScrollArrow--size-m'],
+    l: styles['ScrollArrow--size-l']
+};
+const stylesDirection = {
+    left: styles['ScrollArrow--direction-left'],
+    right: styles['ScrollArrow--direction-right']
+};
 const ArrowIcon = ({ size, direction })=>{
     if (size === 'm') {
         return direction === 'left' ? /*#__PURE__*/ React.createElement(Icon16ChevronLeft, null) : /*#__PURE__*/ React.createElement(Icon16Chevron, null);
@@ -13,19 +22,13 @@ const ArrowIcon = ({ size, direction })=>{
  *
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/ScrollArrow
- */ export const ScrollArrow = ({ size = 'l', offsetY, direction, className, getRootRef, children = /*#__PURE__*/ React.createElement(ArrowIcon, {
+ */ export const ScrollArrow = ({ size = 'l', offsetY, direction, children = /*#__PURE__*/ React.createElement(ArrowIcon, {
     direction: direction,
     size: size
 }), ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("button", {
-        className: classNames(styles['ScrollArrow'], {
-            m: styles['ScrollArrow--size-m'],
-            l: styles['ScrollArrow--size-l']
-        }[size], {
-            left: styles['ScrollArrow--direction-left'],
-            right: styles['ScrollArrow--direction-right']
-        }[direction], className),
-        ref: getRootRef,
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "button",
+        baseClassName: classNames(styles['ScrollArrow'], stylesSize[size], stylesDirection[direction]),
         ...restProps
     }, /*#__PURE__*/ React.createElement("span", {
         className: styles['ScrollArrow__icon'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './ScrollArrow.module.css';\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  className,\n  getRootRef,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <button\n      className={classNames(\n        styles['ScrollArrow'],\n        {\n          m: styles['ScrollArrow--size-m'],\n          l: styles['ScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['ScrollArrow--direction-left'],\n          right: styles['ScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </button>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","styles","ArrowIcon","size","direction","ScrollArrow","offsetY","className","getRootRef","children","restProps","button","m","l","left","right","ref","span","style","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,YAAY,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAgD;IAClF,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,oBAACP,yCAAuB,oBAACD;IACzD;IAEA,OAAOQ,cAAc,uBAAS,oBAACL,gDAA8B,oBAACD;AAChE;AAmBA;;;;;CAKC,GACD,OAAO,MAAMO,cAAc,CAAC,EAC1BF,OAAO,GAAG,EACVG,OAAO,EACPF,SAAS,EACTG,SAAS,EACTC,UAAU,EACVC,yBAAW,oBAACP;IAAUE,WAAWA;IAAWD,MAAMA;EAAQ,EAC1D,GAAGO,WACc;IACjB,qBACE,oBAACC;QACCJ,WAAWP,WACTC,MAAM,CAAC,cAAc,EACrB;YACEW,GAAGX,MAAM,CAAC,sBAAsB;YAChCY,GAAGZ,MAAM,CAAC,sBAAsB;QAClC,CAAC,CAACE,KAAK,EACP;YACEW,MAAMb,MAAM,CAAC,8BAA8B;YAC3Cc,OAAOd,MAAM,CAAC,+BAA+B;QAC/C,CAAC,CAACG,UAAU,EACZG;QAEFS,KAAKR;QACJ,GAAGE,SAAS;qBAEb,oBAACO;QAAKV,WAAWN,MAAM,CAAC,oBAAoB;QAAEiB,OAAOZ,UAAU;YAAEa,KAAKb;QAAQ,IAAIc;OAC/EX;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  m: styles['ScrollArrow--size-m'],\n  l: styles['ScrollArrow--size-l'],\n};\n\nconst stylesDirection = {\n  left: styles['ScrollArrow--direction-left'],\n  right: styles['ScrollArrow--direction-right'],\n};\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <RootComponent\n      Component=\"button\"\n      baseClassName={classNames(\n        styles['ScrollArrow'],\n        stylesSize[size],\n        stylesDirection[direction],\n      )}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon16ChevronLeft","Icon24Chevron","Icon24ChevronCompactLeft","classNames","RootComponent","styles","stylesSize","m","l","stylesDirection","left","right","ArrowIcon","size","direction","ScrollArrow","offsetY","children","restProps","Component","baseClassName","span","className","style","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,wBAAwB,QACnB,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,MAAM,CAAC,sBAAsB;IAChCG,GAAGH,MAAM,CAAC,sBAAsB;AAClC;AAEA,MAAMI,kBAAkB;IACtBC,MAAML,MAAM,CAAC,8BAA8B;IAC3CM,OAAON,MAAM,CAAC,+BAA+B;AAC/C;AAEA,MAAMO,YAAY,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAgD;IAClF,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,oBAACd,yCAAuB,oBAACD;IACzD;IAEA,OAAOe,cAAc,uBAAS,oBAACZ,gDAA8B,oBAACD;AAChE;AAmBA;;;;;CAKC,GACD,OAAO,MAAMc,cAAc,CAAC,EAC1BF,OAAO,GAAG,EACVG,OAAO,EACPF,SAAS,EACTG,yBAAW,oBAACL;IAAUE,WAAWA;IAAWD,MAAMA;EAAQ,EAC1D,GAAGK,WACc;IACjB,qBACE,oBAACd;QACCe,WAAU;QACVC,eAAejB,WACbE,MAAM,CAAC,cAAc,EACrBC,UAAU,CAACO,KAAK,EAChBJ,eAAe,CAACK,UAAU;QAE3B,GAAGI,SAAS;qBAEb,oBAACG;QAAKC,WAAWjB,MAAM,CAAC,oBAAoB;QAAEkB,OAAOP,UAAU;YAAEQ,KAAKR;QAAQ,IAAIS;OAC/ER;AAIT,EAAE"}