@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/cjs/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":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","useDOM","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Tappable","Component","getRootRef","noop","align","indent","restProps","platform","usePlatform","ref","useExternRef","onRemoveClick","preventDefault","getTitleFromChildren","Platform","IOS","activeMode","hoverMode","Icon24Cancel"],"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":["Removable","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","window","useDOM","removeButtonRef","React","useRef","disabledRef","useState","removeOffset","updateRemoveOffset","useGlobalEventListener","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","classNames","style","transform","onTransitionEnd","IconButton","hasActive","hasHover","aria-label","onClick","disabled","i","role","span","aria-hidden","Tappable","Component","getRootRef","noop","align","indent","restProps","platform","usePlatform","onRemoveClick","preventDefault","getTitleFromChildren","RootComponent","baseClassName","Platform","IOS","activeMode","hoverMode","Icon24Cancel"],"mappings":";;;;+BA2HaA;;;eAAAA;;;;;;;;+DA3HU;qBACM;oBACI;sCACM;2BACX;mBACL;wBACE;qBACY;0BAEV;6BACG;wBACL;AAkBzB;;CAEC,GACD,IAAMC,eAAe;QACnBC,iBAAAA,UACAC,0BAAAA,mBACAC,gCAAAA,yBACAC,iBAAAA;IAEA,IAAM,AAAEC,SAAWC,IAAAA,WAAM,IAAjBD;IAER,IAAME,kBAAkBC,OAAMC,MAAM,CAAc;IAClD,IAAMC,cAAcF,OAAMC,MAAM,CAAC;IACjC,IAA2CD,qCAAAA,OAAMG,QAAQ,CAAC,QAAnDC,eAAoCJ,oBAAtBK,qBAAsBL;IAE3CM,IAAAA,8CAAsB,EACpBT,QACA,SACA;QACE,IAAIO,eAAe,GAAG;YACpBC,mBAAmB;QACrB;IACF,GACA;QAAEE,SAAS;IAAK;IAGlB,IAAMC,wBAAwB;QAC5B,IAAIJ,eAAe,GAAG;gBACpBL,0BAAAA;aAAAA,mBAAAA,6BAAAA,wCAAAA,2BAAAA,iBAAiBU,OAAO,cAAxBV,+CAAAA,yBAA0BW,KAAK;QACjC,OAAO;YACLR,YAAYO,OAAO,GAAG;QACxB;IACF;IAEA,IAAME,wBAAwB,SAACC;QAC7BA,EAAEC,eAAe;QACjB,IAAI,CAACd,gBAAgBU,OAAO,EAAE;YAC5B;QACF;QACA,IAAM,AAAEK,cAAgBf,gBAAgBU,OAAO,CAAvCK;QACRZ,YAAYO,OAAO,GAAG;QACtBJ,mBAAmBS;IACrB;IAEA,qBACE,qBAACC;QACCC,WAAWC,IAAAA,gBAAU,4BAA+B;QACpDC,OAAO;YAAEC,WAAW,AAAC,eAAgC,OAAlBf,yBAAAA,0BAAAA,eAAgB,GAAE;QAAK;QAC1DgB,iBAAiBZ;qBAEjB,qBAACa,sBAAU;QACTC,WAAW;QACXC,UAAU;QACVC,cAAY7B;QACZqB,WAAWC,IAAAA,gBAAU;QACrBQ,SAASd;QACTe,UAAUtB,eAAe;qBAEzB,qBAACuB;QAAEX,SAAS;QAAkCY,MAAK;SAEpDhC,wBAED,qBAACiC;QAAKb,SAAS;QAA+Bc,eAAAA;sBAE9C,qBAACC,kBAAQ;QACPC,WAAU;QACVV,WAAW;QACXC,UAAU;QACVG,UAAUxB,YAAYO,OAAO;QAC7BwB,YAAYlC;QACZiB,SAAS;QACTS,SAAShC;qBAET,qBAACoC;QAAKb,SAAS;OAAmCtB;AAI1D;AAiBO,IAAMH,YAAY;QACvBK,kBAAAA,mCACAH,UAAAA,wCAAWyC,UAAI,sDACfxC,mBAAAA,0DAAoB,4DACpByC,OAAAA,kCAAQ,gDACRC,QAAAA,oCAAS,uBACNC;QALHzC;QACAH;QACAC;QACAyC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAE5B,IAAMC,gBAAgB,SAAC5B;QACrBA,EAAE6B,cAAc;QAChBhD,SAASmB;IACX;IAEA,IAAMjB,0BAAkC+C,IAAAA,2BAAoB,EAAChD;IAE7D,qBACE,qBAACiD,4BAAa,8CACRN;QACJO,eAAe3B,IAAAA,gBAAU,EACvBqB,aAAaO,kBAAQ,CAACC,GAAG,0BACzBX,UAAU,yCACVC;QAGDE,aAAaO,kBAAQ,CAACC,GAAG,kBACxB,qBAAC/B;QAAIC,WAAWC,IAAAA,gBAAU,4BAA+B;OACtDrB,wBAED,qBAACyB,sBAAU;QACT0B,YAAW;QACXC,WAAU;QACVhC,SAAS;QACTS,SAASe;QACThB,cAAY7B;qBAEZ,qBAACsD,mBAAY;QAACrB,MAAK;uBAGrB,qBAACC;QAAKb,SAAS;QAA+Bc,eAAAA;SAIjDQ,aAAaO,kBAAQ,CAACC,GAAG,kBACxB,qBAACtD;QACCC,UAAU+C;QACV9C,mBAAmBA;QACnBC,yBAAyBA;OAExBC;AAKX"}

package/dist/cjs/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/cjs/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/cjs/components/RichCell/RichCellIcon/RichCellIcon.js

@@ -10,18 +10,12 @@ Object.defineProperty(exports, "RichCellIcon", {
 });
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
-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: (0, _vkjs.classNames)("vkuiRichCellIcon", className)
-    }), children);
+var _RootComponent = require("../../RootComponent/RootComponent");
+var RichCellIcon = function(props) {
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        baseClassName: "vkuiRichCellIcon"
+    }, props));
 };
 
 //# sourceMappingURL=RichCellIcon.js.map

package/dist/cjs/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":["RichCellIcon","children","className","restProps","div","classNames"],"mappings":";;;;+BAIaA;;;eAAAA;;;;;;;+DAJU;oBACI;AAGpB,IAAMA,eAAe;QAC1BC,kBAAAA,UACAC,mBAAAA,WACGC;QAFHF;QACAC;;IAGA,qBACE,qBAACE,mDAAQD;QAAWD,WAAWG,IAAAA,gBAAU,sBAAyBH;QAC/DD;AAGP"}
+{"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":["RichCellIcon","props","RootComponent","baseClassName"],"mappings":";;;;+BAOaA;;;eAAAA;;;;;+DAPU;6BAEO;AAKvB,IAAMA,eAAe,SAACC;IAC3B,qBAAO,qBAACC,4BAAa;QAACC,aAAa;OAA8BF;AACnE"}

package/dist/cjs/components/RichTooltip/RichTooltip.js

@@ -14,6 +14,12 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _HoverPopper = require("../HoverPopper/HoverPopper");
+var stylesAppearance = {
+    accent: "vkuiRichTooltip--appearance-accent",
+    white: "vkuiRichTooltip--appearance-white",
+    black: "vkuiRichTooltip--appearance-black",
+    inversion: "vkuiRichTooltip--appearance-inversion"
+};
 var RichTooltip = function(_param) {
     var children = _param.children, _param_arrow = _param.arrow, arrow = _param_arrow === void 0 ? true : _param_arrow, _param_appearance = _param.appearance, appearance = _param_appearance === void 0 ? "neutral" : _param_appearance, className = _param.className, popperProps = _object_without_properties._(_param, [
         "children",
@@ -22,12 +28,7 @@ var RichTooltip = function(_param) {
         "className"
     ]);
     return /*#__PURE__*/ _react.createElement(_HoverPopper.HoverPopper, _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiRichTooltip", appearance !== "neutral" && ({
-            accent: "vkuiRichTooltip--appearance-accent",
-            white: "vkuiRichTooltip--appearance-white",
-            black: "vkuiRichTooltip--appearance-black",
-            inversion: "vkuiRichTooltip--appearance-inversion"
-        })[appearance], className),
+        className: (0, _vkjs.classNames)("vkuiRichTooltip", appearance !== "neutral" && stylesAppearance[appearance], className),
         arrow: arrow,
         arrowClassName: "vkuiRichTooltip__arrow"
     }, popperProps), children);

package/dist/cjs/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":["RichTooltip","children","arrow","appearance","className","popperProps","HoverPopper","classNames","accent","white","black","inversion","arrowClassName"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;+DAfU;oBACI;2BACmB;AAavC,IAAMA,cAAc;QACzBC,kBAAAA,gCACAC,OAAAA,kCAAQ,gDACRC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,wBAAW;QACVF,WAAWG,IAAAA,gBAAU,qBAEnBJ,eAAe,aACb,CAAA;YACEK,MAAM;YACNC,KAAK;YACLC,KAAK;YACLC,SAAS;QACX,CAAA,CAAC,CAACR,WAAW,EACfC;QAEFF,OAAOA;QACPU,cAAc;OACVP,cAEHJ;AAGP"}
+{"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":["RichTooltip","stylesAppearance","accent","white","black","inversion","children","arrow","appearance","className","popperProps","HoverPopper","classNames","arrowClassName"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;+DAtBU;oBACI;2BACmB;AAG9C,IAAMC,mBAAmB;IACvBC,MAAM;IACNC,KAAK;IACLC,KAAK;IACLC,SAAS;AACX;AAYO,IAAML,cAAc;QACzBM,kBAAAA,gCACAC,OAAAA,kCAAQ,gDACRC,YAAAA,4CAAa,+BACbC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,wBAAW;QACVF,WAAWG,IAAAA,gBAAU,qBAEnBJ,eAAe,aAAaP,gBAAgB,CAACO,WAAW,EACxDC;QAEFF,OAAOA;QACPM,cAAc;OACVH,cAEHJ;AAGP"}

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

@@ -25,15 +25,16 @@ var _warnOnce = require("../../lib/warnOnce");
 var _ScrollContext = require("../AppRoot/ScrollContext");
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _NavTransitionContext = require("../NavTransitionContext/NavTransitionContext");
+var _NavTransitionDirectionContext = require("../NavTransitionDirectionContext/NavTransitionDirectionContext");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _SplitColContext = require("../SplitCol/SplitColContext");
 var warn = (0, _warnOnce.warnOnce)("Root");
 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.ScrollContext);
     var platform = (0, _usePlatform.usePlatform)();
@@ -113,16 +114,16 @@ var Root = function(_param) {
     ]);
     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: (0, _vkjs.classNames)("vkuiRoot", platform === _platform.Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiRoot", platform === _platform.Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition")
     }), views.map(function(view) {
         var viewId = (0, _getNavId.getNavId)(view.props, warn);
         if (viewId !== activeView && !(transition && viewId === prevView)) {
@@ -138,6 +139,8 @@ var Root = function(_param) {
             },
             onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
             className: (0, _vkjs.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(_NavTransitionDirectionContext.NavTransitionDirectionProvider, {
+            isBack: isBack
         }, /*#__PURE__*/ _react.createElement(_NavTransitionContext.NavTransitionProvider, {
             entering: transition && viewId === activeView
         }, /*#__PURE__*/ _react.createElement("div", {
@@ -145,7 +148,7 @@ var Root = function(_param) {
             style: {
                 marginTop: compensateScroll ? viewId && -((_scrolls_viewId = scrolls[viewId]) !== null && _scrolls_viewId !== void 0 ? _scrolls_viewId : 0) : undefined
             }
-        }, view)));
+        }, view))));
     }));
 };
 

package/dist/cjs/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":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","animate","SplitColContext","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","classNames","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","NavTransitionProvider","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":["Root","warn","warnOnce","children","activeView","_activeView","onTransition","nav","restProps","scroll","React","useContext","ScrollContext","platform","usePlatform","document","useDOM","scrolls","useRef","current","viewNodes","useConfigProvider","transitionMotionEnabled","animate","SplitColContext","disableAnimation","views","Children","toArray","useState","transition","prevView","isBack","_setState","transitionTo","panel","viewIds","map","view","getNavId","props","indexOf","getScroll","y","finishTransition","useCallback","useIsomorphicLayoutEffect","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","useTimeout","Platform","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","RootComponent","baseClassName","classNames","viewId","isTransitionTarget","compensateScroll","div","key","ref","undefined","className","NavTransitionDirectionProvider","NavTransitionProvider","entering","style","marginTop"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RootComponent", {
+    enumerable: true,
+    get: function() {
+        return RootComponent;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _vkjs = require("@vkontakte/vkjs");
+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.default.createElement(Component, _object_spread._({
+        ref: getRootRef,
+        className: (0, _vkjs.classNames)(baseClassName, className)
+    }, restProps));
+};
+
+//# sourceMappingURL=RootComponent.js.map

package/dist/cjs/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":["RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;8DAdK;oBACS;AAapB,IAAMA,gBAAgB;kCAC3BC,WAAAA,0CAAY,0BACZC,uBAAAA,eACAC,mBAAAA,WACAC,oBAAAA,YACGC;QAJHJ;QACAC;QACAC;QACAC;;WAGA,6BAACH;QAAUK,KAAKF;QAAYD,WAAWI,IAAAA,gBAAU,EAACL,eAAeC;OAAgBE;AAAY"}

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

@@ -14,6 +14,15 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../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") {
@@ -22,26 +31,18 @@ var ArrowIcon = function(param) {
     return direction === "left" ? /*#__PURE__*/ _react.createElement(_icons.Icon24ChevronCompactLeft, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, null);
 };
 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: (0, _vkjs.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.RootComponent, _object_spread._({
+        Component: "button",
+        baseClassName: (0, _vkjs.classNames)("vkuiScrollArrow", stylesSize[size], stylesDirection[direction])
     }, restProps), /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiScrollArrow__icon",
         style: offsetY ? {

package/dist/cjs/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":["ScrollArrow","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","className","getRootRef","children","restProps","button","classNames","m","l","left","right","ref","span","style","top","undefined"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;+DA1CU;qBAMhB;oBACoB;AAI3B,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,qBAACC,wBAAiB,wBAAM,qBAACC,oBAAa;IACtE;IAEA,OAAOF,cAAc,uBAAS,qBAACG,+BAAwB,wBAAM,qBAACC,oBAAa;AAC7E;AAyBO,IAAMP,cAAc;6BACzBE,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,WACAM,mBAAAA,WACAC,oBAAAA,qCACAC,UAAAA,sDAAW,qBAACV;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CU;QANHV;QACAM;QACAL;QACAM;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCJ,WAAWK,IAAAA,gBAAU,qBAEnB;YACEC,CAAC;YACDC,CAAC;QACH,CAAC,CAACd,KAAK,EACP;YACEe,IAAI;YACJC,KAAK;QACP,CAAC,CAACf,UAAU,EACZM;QAEFU,KAAKT;OACDE,0BAEJ,qBAACQ;QAAKX,SAAS;QAA+BY,OAAOb,UAAU;YAAEc,KAAKd;QAAQ,IAAIe;OAC/EZ;AAIT"}
+{"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":["ScrollArrow","stylesSize","m","l","stylesDirection","left","right","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","children","restProps","RootComponent","Component","baseClassName","classNames","span","className","style","top","undefined"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;+DArDU;qBAMhB;oBACoB;6BAEG;AAG9B,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,qBAACC,wBAAiB,wBAAM,qBAACC,oBAAa;IACtE;IAEA,OAAOF,cAAc,uBAAS,qBAACG,+BAAwB,wBAAM,qBAACC,oBAAa;AAC7E;AAyBO,IAAMb,cAAc;6BACzBQ,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,oCACAM,UAAAA,sDAAW,qBAACR;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CQ;QAJHR;QACAM;QACAL;QACAM;;IAGA,qBACE,qBAACE,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,qBAEvBnB,UAAU,CAACO,KAAK,EAChBJ,eAAe,CAACK,UAAU;OAExBO,0BAEJ,qBAACK;QAAKC,SAAS;QAA+BC,OAAOT,UAAU;YAAEU,KAAKV;QAAQ,IAAIW;OAC/EV;AAIT"}

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

@@ -28,7 +28,7 @@ var _Button = require("../Button/Button");
 var _IconButton = require("../IconButton/IconButton");
 var _Headline = require("../Typography/Headline/Headline");
 var Search = function(_param) {
-    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ _react.createElement(_icons.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 ? _vkjs.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(_icons.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 ? _vkjs.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",
@@ -43,7 +43,8 @@ var Search = function(_param) {
         "value",
         "iconAriaLabel",
         "clearAriaLabel",
-        "noPadding"
+        "noPadding",
+        "getRootRef"
     ]);
     var inputRef = (0, _useExternRef.useExternRef)(getRef);
     var _useBooleanState1 = (0, _useBooleanState.useBooleanState)(false), isFocused = _useBooleanState1.value, setFocusedTrue = _useBooleanState1.setTrue, setFocusedFalse = _useBooleanState1.setFalse;
@@ -92,6 +93,7 @@ var Search = function(_param) {
     ]);
     return /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === _adaptivity.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/cjs/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":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","touchEnabled","div","classNames","SizeType","COMPACT","disabled","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","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":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","noPadding","getRootRef","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","touchEnabled","div","classNames","SizeType","COMPACT","disabled","ref","label","Headline","Component","type","level","weight","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -22,6 +22,7 @@ var _useId = require("../../hooks/useId");
 var _adaptivity = require("../../lib/adaptivity");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _warnOnce = require("../../lib/warnOnce");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _SegmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
 var _options_;
 var sizeYClassNames = _define_property._({
@@ -29,14 +30,12 @@ var sizeYClassNames = _define_property._({
 }, _adaptivity.SizeType.REGULAR, "vkuiSegmentedControl--sizeY-regular");
 var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
 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"
     ]);
@@ -58,9 +57,8 @@ var SegmentedControl = function(_param) {
         actualIndex
     ]);
     var translateX = "translateX(".concat(100 * actualIndex, "%)");
-    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiSegmentedControl", sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], size === "l" && "vkuiSegmentedControl--size-l", className),
-        ref: getRootRef
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
+        baseClassName: (0, _vkjs.classNames)("vkuiSegmentedControl", sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], size === "l" && "vkuiSegmentedControl--size-l")
     }), /*#__PURE__*/ _react.createElement("div", {
         role: "radiogroup",
         className: "vkuiSegmentedControl__in"