@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/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","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","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":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAkBhD;;CAEC,GACD,IAAMC,eAAe;QACnBC,iBAAAA,UACAC,0BAAAA,mBACAC,gCAAAA,yBACAC,iBAAAA;IAEA,IAAM,AAAEC,SAAWV,SAAXU;IAER,IAAMC,kBAAkBlB,MAAMmB,MAAM,CAAc;IAClD,IAAMC,cAAcpB,MAAMmB,MAAM,CAAC;IACjC,IAA2CnB,mCAAAA,MAAMqB,QAAQ,CAAC,QAAnDC,eAAoCtB,oBAAtBuB,qBAAsBvB;IAE3CK,uBACEY,QACA,SACA;QACE,IAAIK,eAAe,GAAG;YACpBC,mBAAmB;QACrB;IACF,GACA;QAAEC,SAAS;IAAK;IAGlB,IAAMC,wBAAwB;QAC5B,IAAIH,eAAe,GAAG;gBACpBJ,0BAAAA;aAAAA,mBAAAA,6BAAAA,wCAAAA,2BAAAA,iBAAiBQ,OAAO,cAAxBR,+CAAAA,yBAA0BS,KAAK;QACjC,OAAO;YACLP,YAAYM,OAAO,GAAG;QACxB;IACF;IAEA,IAAME,wBAAwB,SAACC;QAC7BA,EAAEC,eAAe;QACjB,IAAI,CAACZ,gBAAgBQ,OAAO,EAAE;YAC5B;QACF;QACA,IAAM,AAAEK,cAAgBb,gBAAgBQ,OAAO,CAAvCK;QACRX,YAAYM,OAAO,GAAG;QACtBH,mBAAmBQ;IACrB;IAEA,qBACE,oBAACC;QACCC,WAAW/B,qCAAyC;QACpDgC,OAAO;YAAEC,WAAW,AAAC,eAAgC,OAAlBb,yBAAAA,0BAAAA,eAAgB,GAAE;QAAK;QAC1Dc,iBAAiBX;qBAEjB,oBAACf;QACC2B,WAAW;QACXC,UAAU;QACVC,cAAYxB;QACZkB,WAAW/B;QACXsC,SAASZ;QACTa,UAAUnB,eAAe;qBAEzB,oBAACoB;QAAET,SAAS;QAAkCU,MAAK;SAEpD3B,wBAED,oBAAC4B;QAAKX,SAAS;QAA+BY,eAAAA;sBAE9C,oBAAClC;QACCmC,WAAU;QACVT,WAAW;QACXC,UAAU;QACVG,UAAUrB,YAAYM,OAAO;QAC7BqB,YAAY7B;QACZe,SAAS;QACTO,SAAS3B;qBAET,oBAAC+B;QAAKX,SAAS;OAAmCnB;AAI1D;AAiBA;;CAEC,GACD,OAAO,IAAMkC,YAAY;QACvBD,oBAAAA,YACA/B,kBAAAA,mCACAH,UAAAA,wCAAWV,0DACXW,mBAAAA,0DAAoB,4DACpBmC,OAAAA,kCAAQ,yBACRhB,mBAAAA,kCACAiB,QAAAA,oCAAS,uBACNC;QAPHJ;QACA/B;QACAH;QACAC;QACAmC;QACAhB;QACAiB;;IAGA,IAAME,WAAW9C;IAEjB,IAAM+C,MAAMjD,aAAa2C;IAEzB,IAAMO,gBAAgB,SAACzB;QACrBA,EAAE0B,cAAc;QAChB1C,SAASgB;IACX;IAEA,IAAMd,0BAAkCN,qBAAqBK;IAE7D,qBACE,oBAACkB,+CACKmB;QACJE,KAAKA;QACLpB,WAAW/B,WACTkD,aAAa5C,SAASgD,GAAG,0BACzBP,UAAU,yCACVC,mCACAjB;QAGDmB,aAAa5C,SAASgD,GAAG,kBACxB,oBAACxB;QAAIC,WAAW/B,qCAAyC;OACtDc,wBAED,oBAACN;QACC+C,YAAW;QACXC,WAAU;QACVzB,SAAS;QACTO,SAASc;QACTf,cAAYxB;qBAEZ,oBAACd;QAAa0C,MAAK;uBAGrB,oBAACC;QAAKX,SAAS;QAA+BY,eAAAA;SAIjDO,aAAa5C,SAASgD,GAAG,kBACxB,oBAAC5C;QACCC,UAAUyC;QACVxC,mBAAmBA;QACnBC,yBAAyBA;OAExBC;AAKX,EAAE"}
+{"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","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","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/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/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/components/RichCell/RichCellIcon/RichCellIcon.js

@@ -1,16 +1,10 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
-export var RichCellIcon = function(_param) {
-    var children = _param.children, className = _param.className, restProps = _object_without_properties(_param, [
-        "children",
-        "className"
-    ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiRichCellIcon", className)
-    }), children);
+import { RootComponent } from "../../RootComponent/RootComponent";
+export var RichCellIcon = function(props) {
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        baseClassName: "vkuiRichCellIcon"
+    }, props));
 };
 
 //# sourceMappingURL=RichCellIcon.js.map

package/dist/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","RichCellIcon","children","className","restProps","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,OAAO,IAAMC,eAAe;QAC1BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,oBAACE,+CAAQD;QAAWD,WAAWH,+BAAmCG;QAC/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","RichCellIcon","props","baseClassName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,oCAAoC;AAKlE,OAAO,IAAMC,eAAe,SAACC;IAC3B,qBAAO,oBAACF;QAAcG,aAAa;OAA8BD;AACnE,EAAE"}

package/dist/components/RichTooltip/RichTooltip.js

@@ -3,6 +3,12 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { HoverPopper } from "../HoverPopper/HoverPopper";
+var stylesAppearance = {
+    accent: "vkuiRichTooltip--appearance-accent",
+    white: "vkuiRichTooltip--appearance-white",
+    black: "vkuiRichTooltip--appearance-black",
+    inversion: "vkuiRichTooltip--appearance-inversion"
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/RichTooltip
  */ export var RichTooltip = function(_param) {
@@ -13,12 +19,7 @@ import { HoverPopper } from "../HoverPopper/HoverPopper";
         "className"
     ]);
     return /*#__PURE__*/ React.createElement(HoverPopper, _object_spread({
-        className: classNames("vkuiRichTooltip", appearance !== "neutral" && ({
-            accent: "vkuiRichTooltip--appearance-accent",
-            white: "vkuiRichTooltip--appearance-white",
-            black: "vkuiRichTooltip--appearance-black",
-            inversion: "vkuiRichTooltip--appearance-inversion"
-        })[appearance], className),
+        className: classNames("vkuiRichTooltip", appearance !== "neutral" && stylesAppearance[appearance], className),
         arrow: arrow,
         arrowClassName: "vkuiRichTooltip__arrow"
     }, popperProps), children);

package/dist/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","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;AAU3E;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,kBAAAA,gCACAC,OAAAA,kCAAQ,gDACRC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACL;QACCK,WAAWN,8BAETK,eAAe,aACb,CAAA;YACEG,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACN,WAAW,EACfC;QAEFF,OAAOA;QACPQ,cAAc;OACVL,cAEHJ;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","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;AAG3E,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AASA;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,kBAAAA,gCACAC,OAAAA,kCAAQ,gDACRC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,oBAACV;QACCU,WAAWX,8BAETU,eAAe,aAAaR,gBAAgB,CAACQ,WAAW,EACxDC;QAEFF,OAAOA;QACPI,cAAc;OACVD,cAEHJ;AAGP,EAAE"}

package/dist/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/components/Root/Root.js

@@ -14,17 +14,18 @@ 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";
 var warn = warnOnce("Root");
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
  */ export var Root = function(_param) {
-    var children = _param.children, _activeView = _param.activeView, onTransition = _param.onTransition, nav = _param.nav, className = _param.className, restProps = _object_without_properties(_param, [
+    var children = _param.children, _activeView = _param.activeView, onTransition = _param.onTransition, nav = _param.nav, restProps = _object_without_properties(_param, [
         "children",
         "activeView",
         "onTransition",
-        "nav",
-        "className"
+        "nav"
     ]);
     var scroll = React.useContext(ScrollContext);
     var platform = usePlatform();
@@ -104,16 +105,16 @@ var warn = warnOnce("Root");
     ]);
     var onAnimationEnd = function(e) {
         if ([
-            "vkuivkui-root-android-animation-hide-back",
-            "vkuivkui-root-android-animation-show-forward",
-            "vkuivkui-root-ios-animation-hide-back",
-            "vkuivkui-root-ios-animation-show-forward"
+            "vkuiroot-android-animation-hide-back",
+            "vkuiroot-android-animation-show-forward",
+            "vkuiroot-ios-animation-hide-back",
+            "vkuiroot-ios-animation-show-forward"
         ].includes(e.animationName)) {
             finishTransition();
         }
     };
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiRoot", platform === Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiRoot", platform === Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition")
     }), views.map(function(view) {
         var viewId = getNavId(view.props, warn);
         if (viewId !== activeView && !(transition && viewId === prevView)) {
@@ -129,6 +130,8 @@ var warn = warnOnce("Root");
             },
             onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
             className: classNames("vkuiRoot__view", transition && viewId === prevView && isBack && "vkuiRoot__view--hide-back", transition && viewId === prevView && !isBack && "vkuiRoot__view--hide-forward", transition && viewId === activeView && isBack && "vkuiRoot__view--show-back", transition && viewId === activeView && !isBack && "vkuiRoot__view--show-forward")
+        }, /*#__PURE__*/ React.createElement(NavTransitionDirectionProvider, {
+            isBack: isBack
         }, /*#__PURE__*/ React.createElement(NavTransitionProvider, {
             entering: transition && viewId === activeView
         }, /*#__PURE__*/ React.createElement("div", {
@@ -136,7 +139,7 @@ var warn = warnOnce("Root");
             style: {
                 marginTop: compensateScroll ? viewId && -((_scrolls_viewId = scrolls[viewId]) !== null && _scrolls_viewId !== void 0 ? _scrolls_viewId : 0) : undefined
             }
-        }, view)));
+        }, view))));
     }));
 };
 

package/dist/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","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","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","warn","Root","children","activeView","_activeView","onTransition","nav","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","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":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAoB,qBAAqB;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,0CAA0C;AAC5E,SAASC,qBAAqB,QAAQ,+CAA+C;AACrF,SAASC,8BAA8B,QAAQ,iEAAiE;AAChH,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,eAAe,QAAQ,8BAA8B;AAgB9D,IAAMC,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMQ,OAAO;QAClBC,kBAAAA,UACAC,AAAYC,qBAAZD,YACAE,sBAAAA,cACAC,aAAAA,KACGC;QAJHL;QACAC;QACAE;QACAC;;IAGA,IAAME,SAASvB,MAAMwB,UAAU,CAACf;IAChC,IAAMgB,WAAWvB;IACjB,IAAM,AAAEwB,WAAatB,SAAbsB;IACR,IAAMC,UAAU3B,MAAM4B,MAAM,CAAyB,CAAC,GAAGC,OAAO;IAChE,IAAMC,YAAY9B,MAAM4B,MAAM,CAAqC,CAAC,GAAGC,OAAO;IAE9E,IAA2CnB,qBAAAA,kEAAAA,mBAAnCqB,yBAAAA,kFAA0B;IAClC,IAAM,AAAEC,UAAYhC,MAAMwB,UAAU,CAACV,iBAA7BkB;IACR,IAAMC,mBAAmB,CAACF,2BAA2B,CAACC;IAEtD,IAAME,QAAQlC,MAAMmC,QAAQ,CAACC,OAAO,CAACnB;IAErC,IAAkEjB,mCAAAA,MAAMqC,QAAQ,CAAY;QAC1FnB,YAAYC;QACZmB,YAAY;IACd,2BAHkEtC,oBAAzDuC,4BAAAA,UAAUrB,8BAAAA,YAAYoB,8BAAAA,YAAYE,0BAAAA,QAAUC,YAAazC;IAIlE,IAAM0C,eAAe,SAACC;QACpB,IAAIA,UAAUzB,YAAY;YACxB,IAAM0B,UAAUV,MAAMW,GAAG,CAAC,SAACC;uBAASzC,SAASyC,KAAKC,KAAK,EAAEhC;;YACzD,IAAMyB,SAASI,QAAQI,OAAO,CAACL,SAASC,QAAQI,OAAO,CAAC9B;YACxDS,OAAO,CAACT,WAAW,GAAGK,OAAO0B,SAAS,GAAGC,CAAC;YAC1CT,UAAU;gBACRvB,YAAYyB;gBACZJ,UAAUrB;gBACVoB,YAAY,CAACL;gBACbO,QAAAA;YACF;QACF;IACF;IACA,IAAMW,mBAAmBnD,MAAMoD,WAAW,CACxC;eAAMX,UAAU;YAAEvB,YAAAA;YAAYqB,UAAAA;YAAUC,QAAAA;YAAQF,YAAY;QAAM;OAClE;QAACpB;QAAYsB;QAAQD;KAAS;IAGhChC,0BAA0B;QACvBmB,SAAU2B,aAAa,CAAiBC,IAAI;IAC/C,GAAG;QAACpC;KAAW;IAEf,gBAAgB;IAChBX,0BAA0B;eAAMmC,aAAavB;OAAc;QAACA;KAAY;IACxEZ,0BAA0B;QACxB,IAAI,CAAC+B,cAAcC,UAAU;YAC3B,qBAAqB;YACrBhB,OAAOgC,QAAQ,CAAC,GAAGf,SAASb,OAAO,CAACT,WAAW,GAAG;YAClDE,gBACEA,aAAa;gBACXoB,QAAQgB,QAAQhB;gBAChBiB,MAAMlB;gBACNmB,IAAIxC;YACN;QACJ;IACF,GAAG;QAACoB;QAAYC;KAAS;IAEzB,IAAMoB,qBAAqBxD,WAAWgD,kBAAkB1B,aAAanB,SAASsD,GAAG,GAAG,MAAM;IAC1F5D,MAAM6D,SAAS,CAAC;QACd,IAAI,CAACvB,YAAY;YACfqB,mBAAmBG,KAAK;YACxB;QACF;QACAH,mBAAmBI,GAAG;IACxB,GAAG;QAACJ;QAAoBrB;KAAW;IAEnC,IAAM0B,iBAAiB,SAACC;QACtB,IACE;;;;;SAKC,CAACC,QAAQ,CAACD,EAAEE,aAAa,GAC1B;YACAhB;QACF;IACF;IAEA,qBACE,oBAACtC,uDACKS;QACJ8C,eAAenE,uBAEbwB,aAAanB,SAASsD,GAAG,qBACzBtB;QAGDJ,MAAMW,GAAG,CAAC,SAACC;QACV,IAAMuB,SAAShE,SAASyC,KAAKC,KAAK,EAAEhC;QACpC,IAAIsD,WAAWnD,cAAc,CAAEoB,CAAAA,cAAc+B,WAAW9B,QAAO,GAAI;YACjE,OAAO;QACT;QACA,IAAM+B,qBAAqBhC,cAAc+B,WAAY7B,CAAAA,SAASD,WAAWrB,UAAS;QAClF,IAAMqD,mBACJjC,cAAe+B,CAAAA,WAAW9B,YAAaC,UAAU6B,WAAWnD,UAAU;YAmBlBS;QAlBtD,qBACE,oBAAC6C;YACCC,KAAKJ;YACLK,KAAK,SAACT;uBAAMI,UAAWvC,CAAAA,SAAS,CAACuC,OAAO,GAAGJ,CAAAA;;YAC3CD,gBAAgBM,qBAAqBN,iBAAiBW;YACtDC,WAAW3E,6BAETqC,cAAc+B,WAAW9B,YAAYC,uCACrCF,cAAc+B,WAAW9B,YAAY,CAACC,0CACtCF,cAAc+B,WAAWnD,cAAcsB,uCACvCF,cAAc+B,WAAWnD,cAAc,CAACsB;yBAG1C,oBAAC5B;YAA+B4B,QAAQA;yBACtC,oBAAC7B;YAAsBkE,UAAUvC,cAAc+B,WAAWnD;yBACxD,oBAACsD;YACCI,SAAS;YACTE,OAAO;gBACLC,WAAWR,mBAAmBF,UAAU,CAAE1C,CAAAA,CAAAA,kBAAAA,OAAO,CAAC0C,OAAO,cAAf1C,6BAAAA,kBAAmB,CAAA,IAAKgD;YACpE;WAEC7B;IAMb;AAGN,EAAE"}

package/dist/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/components/RootComponent/RootComponent.js

@@ -0,0 +1,20 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import React from "react";
+import { classNames } from "@vkontakte/vkjs";
+/**
+ * Базовый корневой компонент.
+ */ export var RootComponent = function(_param) /*#__PURE__*/ {
+    var _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, baseClassName = _param.baseClassName, className = _param.className, getRootRef = _param.getRootRef, restProps = _object_without_properties(_param, [
+        "Component",
+        "baseClassName",
+        "className",
+        "getRootRef"
+    ]);
+    return React.createElement(Component, _object_spread({
+        ref: getRootRef,
+        className: classNames(baseClassName, className)
+    }, restProps));
+};
+
+//# sourceMappingURL=RootComponent.js.map

package/dist/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,IAAMC,gBAAgB;kCAC3BC,WAAAA,0CAAY,0BACZC,uBAAAA,eACAC,mBAAAA,WACAC,oBAAAA,YACGC;QAJHJ;QACAC;QACAC;QACAC;;WAGA,oBAACH;QAAUK,KAAKF;QAAYD,WAAWJ,WAAWG,eAAeC;OAAgBE;AAAY,EAC7F"}

package/dist/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/components/ScrollArrow/ScrollArrow.js

@@ -3,6 +3,15 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLeft } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
+import { RootComponent } from "../RootComponent/RootComponent";
+var stylesSize = {
+    m: "vkuiScrollArrow--size-m",
+    l: "vkuiScrollArrow--size-l"
+};
+var stylesDirection = {
+    left: "vkuiScrollArrow--direction-left",
+    right: "vkuiScrollArrow--direction-right"
+};
 var ArrowIcon = function(param) {
     var size = param.size, direction = param.direction;
     if (size === "m") {
@@ -16,26 +25,18 @@ var ArrowIcon = function(param) {
  * @since 5.4.0
  * @see https://vkcom.github.io/VKUI/#/ScrollArrow
  */ export var ScrollArrow = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, offsetY = _param.offsetY, direction = _param.direction, className = _param.className, getRootRef = _param.getRootRef, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ React.createElement(ArrowIcon, {
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, offsetY = _param.offsetY, direction = _param.direction, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ React.createElement(ArrowIcon, {
         direction: direction,
         size: size
     }) : _param_children, restProps = _object_without_properties(_param, [
         "size",
         "offsetY",
         "direction",
-        "className",
-        "getRootRef",
         "children"
     ]);
-    return /*#__PURE__*/ React.createElement("button", _object_spread({
-        className: classNames("vkuiScrollArrow", {
-            m: "vkuiScrollArrow--size-m",
-            l: "vkuiScrollArrow--size-l"
-        }[size], {
-            left: "vkuiScrollArrow--direction-left",
-            right: "vkuiScrollArrow--direction-right"
-        }[direction], className),
-        ref: getRootRef
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+        Component: "button",
+        baseClassName: classNames("vkuiScrollArrow", stylesSize[size], stylesDirection[direction])
     }, restProps), /*#__PURE__*/ React.createElement("span", {
         className: "vkuiScrollArrow__icon",
         style: offsetY ? {

package/dist/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","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;AAI7C,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,oBAACN,yCAAuB,oBAACD;IACzD;IAEA,OAAOO,cAAc,uBAAS,oBAACJ,gDAA8B,oBAACD;AAChE;AAmBA;;;;;CAKC,GACD,OAAO,IAAMM,cAAc;6BACzBF,MAAAA,gCAAO,mBACPG,iBAAAA,SACAF,mBAAAA,WACAG,mBAAAA,WACAC,oBAAAA,qCACAC,UAAAA,sDAAW,oBAACP;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CO;QANHP;QACAG;QACAF;QACAG;QACAC;QACAC;;IAGA,qBACE,oBAACE;QACCJ,WAAWN,8BAET;YACEW,CAAC;YACDC,CAAC;QACH,CAAC,CAACV,KAAK,EACP;YACEW,IAAI;YACJC,KAAK;QACP,CAAC,CAACX,UAAU,EACZG;QAEFS,KAAKR;OACDE,0BAEJ,oBAACO;QAAKV,SAAS;QAA+BW,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","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;AAG/D,IAAMC,aAAa;IACjBC,CAAC;IACDC,CAAC;AACH;AAEA,IAAMC,kBAAkB;IACtBC,IAAI;IACJC,KAAK;AACP;AAEA,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,oBAACb,yCAAuB,oBAACD;IACzD;IAEA,OAAOc,cAAc,uBAAS,oBAACX,gDAA8B,oBAACD;AAChE;AAmBA;;;;;CAKC,GACD,OAAO,IAAMa,cAAc;6BACzBF,MAAAA,gCAAO,mBACPG,iBAAAA,SACAF,mBAAAA,oCACAG,UAAAA,sDAAW,oBAACL;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CK;QAJHL;QACAG;QACAF;QACAG;;IAGA,qBACE,oBAACZ;QACCc,WAAU;QACVC,eAAehB,8BAEbE,UAAU,CAACO,KAAK,EAChBJ,eAAe,CAACK,UAAU;OAExBI,0BAEJ,oBAACG;QAAKC,SAAS;QAA+BC,OAAOP,UAAU;YAAEQ,KAAKR;QAAQ,IAAIS;OAC/ER;AAIT,EAAE"}

package/dist/components/Search/Search.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { VKUITouchEvent } from '../../lib/touch';
-import { HasRef } from '../../types';
-export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+import { HasRef, HasRootRef } from '../../types';
+export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLInputElement> {
     /**
      * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
      */
@@ -20,4 +20,4 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, noPadding, ...inputProps }: SearchProps) => React.JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, noPadding, getRootRef, ...inputProps }: SearchProps) => React.JSX.Element;

package/dist/components/Search/Search.js

@@ -19,7 +19,7 @@ import { Headline } from "../Typography/Headline/Headline";
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */ export var Search = function(_param) {
-    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, noPadding = _param.noPadding, inputProps = _object_without_properties(_param, [
+    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ React.createElement(Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, noPadding = _param.noPadding, getRootRef = _param.getRootRef, inputProps = _object_without_properties(_param, [
         "before",
         "className",
         "defaultValue",
@@ -34,7 +34,8 @@ import { Headline } from "../Typography/Headline/Headline";
         "value",
         "iconAriaLabel",
         "clearAriaLabel",
-        "noPadding"
+        "noPadding",
+        "getRootRef"
     ]);
     var inputRef = useExternRef(getRef);
     var _useBooleanState = useBooleanState(false), isFocused = _useBooleanState.value, setFocusedTrue = _useBooleanState.setTrue, setFocusedFalse = _useBooleanState.setFalse;
@@ -83,6 +84,7 @@ import { Headline } from "../Typography/Headline/Headline";
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", inputProps.disabled && "vkuiSearch--disabled", !noPadding && "vkuiSearch--withPadding", className),
+        ref: getRootRef,
         style: style
     }, /*#__PURE__*/ React.createElement("div", {
         className: "vkuiSearch__field"

package/dist/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { HasRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  noPadding,\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","touchEnabled","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { touchEnabled, VKUITouchEvent } from '../../lib/touch';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button } from '../Button/Button';\nimport { IconButton } from '../IconButton/IconButton';\nimport { TouchEvent } from '../Touch/Touch';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Search.module.css';\n\nexport interface SearchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * iOS only. Текст кнопки \"отмена\", которая чистит текстовое поле и убирает фокус.\n   */\n  after?: React.ReactNode;\n  before?: React.ReactNode;\n  icon?: React.ReactNode;\n  onIconClick?: (e: VKUITouchEvent) => void;\n  defaultValue?: string;\n  iconAriaLabel?: string;\n  clearAriaLabel?: string;\n  /**\n   * Удаляет отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Search\n */\nexport const Search = ({\n  before = <Icon16SearchOutline />,\n  className,\n  defaultValue = '',\n  placeholder = 'Поиск',\n  after = 'Отмена',\n  getRef,\n  icon,\n  onIconClick = noop,\n  style,\n  autoComplete = 'off',\n  onChange: onChangeProp,\n  value: valueProp,\n  iconAriaLabel,\n  clearAriaLabel = 'Очистить',\n  noPadding,\n  getRootRef,\n  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const {\n    value: isFocused,\n    setTrue: setFocusedTrue,\n    setFalse: setFocusedFalse,\n  } = useBooleanState(false);\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedTrue();\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocusedFalse();\n    inputProps.onBlur && inputProps.onBlur(e);\n  };\n\n  const onCancel = React.useCallback(() => {\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      HTMLInputElement.prototype,\n      'value',\n    )?.set;\n    nativeInputValueSetter?.call(inputRef.current, '');\n\n    const ev2 = new Event('input', { bubbles: true });\n    inputRef.current?.dispatchEvent(ev2);\n  }, [inputRef]);\n\n  const onIconClickStart = React.useCallback(\n    (e: TouchEvent) => onIconClick(e.originalEvent),\n    [onIconClick],\n  );\n\n  const onIconCancelClickStart = React.useCallback(\n    (e: TouchEvent) => {\n      e.originalEvent.preventDefault();\n      inputRef.current?.focus();\n      if (touchEnabled()) {\n        onCancel();\n      }\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalSearch',\n        styles['Search'],\n        sizeY === 'none' && styles['Search--sizeY-none'],\n        sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'],\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        inputProps.disabled && styles['Search--disabled'],\n        !noPadding && styles['Search--withPadding'],\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","touchEnabled","Button","IconButton","Headline","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","getRootRef","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","disabled","ref","label","Component","type","level","weight","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
+import { HTMLAttributesWithRootRef } from '../../types';
 export type SegmentedControlValue = string | number | undefined;
 export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {
     label: React.ReactChild;
     value: SegmentedControlValue;
 }
-export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, HasRootRef<HTMLDivElement> {
+export interface SegmentedControlProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {
     options: SegmentedControlOptionInterface[];
     size?: 'm' | 'l';
     name?: string;
@@ -16,4 +16,4 @@ export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDiv
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControl: ({ size, name, options, getRootRef, defaultValue, children, className, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => React.JSX.Element;
+export declare const SegmentedControl: ({ size, name, options, defaultValue, children, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => React.JSX.Element;

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -12,6 +12,7 @@ import { useId } from "../../hooks/useId";
 import { SizeType } from "../../lib/adaptivity";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { warnOnce } from "../../lib/warnOnce";
+import { RootComponent } from "../RootComponent/RootComponent";
 import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
 var sizeYClassNames = _define_property({
     none: "vkuiSegmentedControl--sizeY-none"
@@ -20,14 +21,12 @@ var warn = warnOnce("SegmentedControl");
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */ export var SegmentedControl = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, name = _param.name, options = _param.options, getRootRef = _param.getRootRef, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? (_options_ = options[0]) === null || _options_ === void 0 ? void 0 : _options_.value : _param_defaultValue, children = _param.children, className = _param.className, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties(_param, [
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, name = _param.name, options = _param.options, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? (_options_ = options[0]) === null || _options_ === void 0 ? void 0 : _options_.value : _param_defaultValue, children = _param.children, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _object_without_properties(_param, [
         "size",
         "name",
         "options",
-        "getRootRef",
         "defaultValue",
         "children",
-        "className",
         "onChange",
         "value"
     ]);
@@ -49,9 +48,8 @@ var warn = warnOnce("SegmentedControl");
         actualIndex
     ]);
     var translateX = "translateX(".concat(100 * actualIndex, "%)");
-    return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiSegmentedControl", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], size === "l" && "vkuiSegmentedControl--size-l", className),
-        ref: getRootRef
+    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: classNames("vkuiSegmentedControl", sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY], size === "l" && "vkuiSegmentedControl--size-l")
     }), /*#__PURE__*/ React.createElement("div", {
         role: "radiogroup",
         className: "vkuiSegmentedControl__in"