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

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":"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"}

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":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,mBAAmB,EAAEC,YAAY,QAAQ,mBAAmB;AAClF,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,YAAY,QAAwB,kBAAkB;AAE/D,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,UAAU,QAAQ,2BAA2B;AAEtD,SAASC,QAAQ,QAAQ,kCAAkC;AAsB3D;;CAEC,GACD,OAAO,IAAMC,SAAS;+BACpBC,QAAAA,kDAAS,oBAAChB,4CACViB,mBAAAA,wCACAC,cAAAA,gDAAe,sDACfC,aAAAA,8CAAc,oDACdC,OAAAA,kCAAQ,yBACRC,gBAAAA,QACAC,cAAAA,kCACAC,aAAAA,8CAAcpB,2BACdqB,eAAAA,oCACAC,cAAAA,gDAAe,6BACfC,AAAUC,sBAAVD,UACAE,AAAOC,mBAAPD,OACAE,uBAAAA,8CACAC,gBAAAA,oDAAiB,oCACjBC,mBAAAA,WACGC;QAfHjB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAE;QACAC;QACAC;;IAGA,IAAME,WAAW3B,aAAac;IAC9B,IAIIhB,mBAAAA,gBAAgB,QAHlBuB,AAAOO,YAGL9B,iBAHFuB,OACAQ,AAASC,iBAEPhC,iBAFF+B,SACAE,AAAUC,kBACRlC,iBADFiC;IAGF,IAA0BhC,sCAAAA,kBAAkB;QAC1CY,cAAAA;QACAQ,UAAUC;QACVC,OAAOC;IACT,QAJOD,QAAmBtB,uBAAZoB,WAAYpB;IAK1B,IAA2BF,iBAAAA,wCAAAA,eAAnBoC,OAAAA,0CAAQ;IAChB,IAAMC,WAAWjC;IAEjB,IAAMkC,UAAU,SAACC;QACfN;QACAJ,WAAWS,OAAO,IAAIT,WAAWS,OAAO,CAACC;IAC3C;IAEA,IAAMC,SAAS,SAACD;QACdJ;QACAN,WAAWW,MAAM,IAAIX,WAAWW,MAAM,CAACD;IACzC;IAEA,IAAME,WAAW/C,MAAMgD,WAAW,CAAC;YAEFC,kCAI/BC,yBAGAd;QARA,6DAA6D;QAC7D,IAAMc,0BAAyBD,mCAAAA,OAAOE,wBAAwB,CAC5DC,iBAAiBC,SAAS,EAC1B,sBAF6BJ,uDAAAA,iCAG5BK,GAAG;SACNJ,0BAAAA,oCAAAA,8CAAAA,wBAAwBK,IAAI,CAACnB,SAASoB,OAAO,EAAE;QAE/C,IAAMC,MAAM,IAAIC,MAAM,SAAS;YAAEC,SAAS;QAAK;SAC/CvB,oBAAAA,SAASoB,OAAO,cAAhBpB,wCAAAA,kBAAkBwB,aAAa,CAACH;IAClC,GAAG;QAACrB;KAAS;IAEb,IAAMyB,mBAAmB7D,MAAMgD,WAAW,CACxC,SAACH;eAAkBpB,YAAYoB,EAAEiB,aAAa;OAC9C;QAACrC;KAAY;IAGf,IAAMsC,yBAAyB/D,MAAMgD,WAAW,CAC9C,SAACH;YAECT;QADAS,EAAEiB,aAAa,CAACE,cAAc;SAC9B5B,oBAAAA,SAASoB,OAAO,cAAhBpB,wCAAAA,kBAAkB6B,KAAK;QACvB,IAAIpD,gBAAgB;YAClBkC;QACF;IACF,GACA;QAACX;QAAUW;KAAS;IAGtB,qBACE,oBAACmB;QACC/C,WAAWf,WACT,oCAEAsC,UAAU,oCACVA,UAAU/B,SAASwD,OAAO,iCAC1B9B,oCACAP,kCACAR,kCACAE,gCACAW,WAAWiC,QAAQ,4BACnB,CAAClC,wCACDf;QAEFO,OAAOA;qBAEP,oBAACwC;QAAI/C,SAAS;qBACZ,oBAACkD;QAAMlD,SAAS;OACbD,sBACD,oBAACF;QACCsD,WAAU;QACVC,MAAK;QACLC,OAAM;QACNC,QAAO;OACHtC;QACJd,aAAaA;QACbM,cAAcA;QACd+C,YAAYtC;QACZjB,SAAS;QACTyB,SAASA;QACTE,QAAQA;QACRlB,UAAUA;QACVE,OAAOA;wBAGX,oBAACoC;QAAI/C,SAAS;OACXK,sBACC,oBAACT;QACC4D,WAAU;QACVC,SAASf;QACT1C,SAAS;QACTyB,SAASL;QACTO,QAAQL;QACRoC,cAAY7C;OAEXR,OAGJ,CAAC,CAACM,uBACD,oBAACf;QACC4D,WAAU;QACVC,SAASb;QACTe,SAAS/B;QACT5B,SAAS;QACT0D,cAAY5C;OAEXU,aAAa/B,SAASmE,GAAG,iBAAG,oBAAC9E,mCAAiB,oBAACE,wBAKvDwC,aAAa/B,SAASmE,GAAG,IAAIzD,uBAC5B,oBAACR;QACCkE,MAAK;QACLC,MAAK;QACL9D,SAAS;QACT+D,kBAAiB;QACjBJ,SAAS/B;QACTH,SAASL;QACTO,QAAQL;qBAER,oBAAC0C;QAAKhE,SAAS;OAAgCG;AAKzD,EAAE"}
+{"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"

package/dist/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>,\n    HasRootRef<HTMLDivElement> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  getRootRef,\n  defaultValue = options[0]?.value,\n  children,\n  className,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","SegmentedControlOption","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","div","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":";;;;;IA8CiBA;AA9CjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,IAAMC;IACJC,IAAI;GACHL,SAASM,OAAO;AAsBnB,IAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMM,mBAAmB;6BAC9BC,MAAAA,gCAAO,mBACPC,cAAAA,MACAhB,iBAAAA,SACAiB,oBAAAA,yCACAC,cAAAA,iDAAelB,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYmB,KAAK,wBAChCC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAhB;QACAiB;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKrB;IAEX,IAA0BD,4CAAAA,wBAAwB;QAChDkB,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBf,6BAAZkB,WAAYlB;IAM1B,IAA2BD,iBAAAA,wCAAAA,eAAnBwB,OAAAA,0CAAQ;IAEhB,IAAMC,cAAc5B,QAAQ6B,SAAS,CAAC,SAACC;eAAWA,OAAOX,KAAK,KAAKA;;IAEnEZ,0BAA0B;QACxB,IAAIqB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChEpB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACe;KAAY;IAEhB,IAAMM,aAAa,AAAC,cAA+B,OAAlB,MAAMN,aAAY;IAEnD,qBACE,oBAACO,+CACKV;QACJJ,WAAWnB,mCAETyB,UAAUrB,SAAS8B,OAAO,IAAI1B,eAAe,CAACiB,MAAM,EACpDZ,SAAS,uCACTM;QAEFgB,KAAKpB;sBAEL,oBAACkB;QAAIG,MAAK;QAAajB,SAAS;OAC7BO,cAAc,CAAC,mBACd,oBAACO;QACCI,eAAAA;QACAlB,SAAS;QACTmB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMzC,QAAQ0C,MAAM,EAAC;YAC/BC,WAAWT;YACXU,iBAAiBV;QACnB;QAGHlC,QAAQ6C,GAAG,CAAC;YAAGC,eAAAA,OAAOzB,AAAW0B,yBAAX1B,WAA+B2B;YAAtCF;YAAOzB;;eACrB,oBAACZ;YACCwC,KAAK,AAAC,GAAoB,OAAlBD,YAAY7B,KAAK;WACrB6B;YACJ3B,WAAWnB,2CAA+C6C;YAC1D/B,MAAMA,iBAAAA,kBAAAA,OAAQU;YACdwB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCG,UAAU;uBAAMA,SAAS0B,YAAY7B,KAAK;;YAEzC2B;IACqB;AAKlC,EAAE"}
+{"version":3,"sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useId } from '../../hooks/useId';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport styles from './SegmentedControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControl--sizeY-none'],\n  [SizeType.REGULAR]: styles['SegmentedControl--sizeY-regular'],\n};\n\nexport type SegmentedControlValue = string | number | undefined;\n\nexport interface SegmentedControlOptionInterface\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {\n  label: React.ReactChild;\n  value: SegmentedControlValue;\n}\n\nexport interface SegmentedControlProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'> {\n  options: SegmentedControlOptionInterface[];\n  size?: 'm' | 'l';\n  name?: string;\n  onChange?: (value: SegmentedControlValue) => void;\n  value?: SegmentedControlValue;\n  defaultValue?: SegmentedControlValue;\n}\n\nconst warn = warnOnce('SegmentedControl');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControl = ({\n  size = 'l',\n  name,\n  options,\n  defaultValue = options[0]?.value,\n  children,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: SegmentedControlProps) => {\n  const id = useId();\n\n  const [value, onChange] = useCustomEnsuredControl({\n    onChange: onChangeProp,\n    value: valueProp,\n    defaultValue,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const actualIndex = options.findIndex((option) => option.value === value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (actualIndex === -1 && process.env.NODE_ENV === 'development') {\n      warn('defaultValue: такого значения нет среди опций!', 'error');\n    }\n  }, [actualIndex]);\n\n  const translateX = `translateX(${100 * actualIndex}%)`;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['SegmentedControl'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        size === 'l' && styles['SegmentedControl--size-l'],\n      )}\n    >\n      <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n        {actualIndex > -1 && (\n          <div\n            aria-hidden\n            className={styles['SegmentedControl__slider']}\n            style={{\n              width: `${100 / options.length}%`,\n              transform: translateX,\n              WebkitTransform: translateX,\n            }}\n          />\n        )}\n        {options.map(({ label, className: optionClassName, ...optionProps }) => (\n          <SegmentedControlOption\n            key={`${optionProps.value}`}\n            {...optionProps}\n            className={classNames(styles['SegmentedControl__option'], optionClassName)}\n            name={name ?? id}\n            checked={value === optionProps.value}\n            onChange={() => onChange(optionProps.value)}\n          >\n            {label}\n          </SegmentedControlOption>\n        ))}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["options","React","classNames","useAdaptivity","useCustomEnsuredControl","useId","SizeType","useIsomorphicLayoutEffect","warnOnce","RootComponent","SegmentedControlOption","sizeYClassNames","none","REGULAR","warn","SegmentedControl","size","name","defaultValue","value","children","onChange","onChangeProp","valueProp","restProps","id","sizeY","actualIndex","findIndex","option","process","env","NODE_ENV","translateX","baseClassName","COMPACT","div","role","className","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","key","checked"],"mappings":";;;;;IA6CiBA;AA7CjB,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,kDAAkD;AAGzF,IAAMC;IACJC,IAAI;GACHN,SAASO,OAAO;AAqBnB,IAAMC,OAAON,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMO,mBAAmB;6BAC9BC,MAAAA,gCAAO,mBACPC,cAAAA,MACAjB,iBAAAA,sCACAkB,cAAAA,iDAAelB,YAAAA,OAAO,CAAC,EAAE,cAAVA,gCAAAA,UAAYmB,KAAK,wBAChCC,kBAAAA,UACAC,AAAUC,sBAAVD,UACAF,AAAOI,mBAAPJ,OACGK;QAPHR;QACAC;QACAjB;QACAkB;QACAE;QACAC;QACAF;;IAGA,IAAMM,KAAKpB;IAEX,IAA0BD,4CAAAA,wBAAwB;QAChDiB,UAAUC;QACVH,OAAOI;QACPL,cAAAA;IACF,QAJOC,QAAmBf,6BAAZiB,WAAYjB;IAM1B,IAA2BD,iBAAAA,wCAAAA,eAAnBuB,OAAAA,0CAAQ;IAEhB,IAAMC,cAAc3B,QAAQ4B,SAAS,CAAC,SAACC;eAAWA,OAAOV,KAAK,KAAKA;;IAEnEZ,0BAA0B;QACxB,IAAIoB,gBAAgB,CAAC,KAAKG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChElB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACa;KAAY;IAEhB,IAAMM,aAAa,AAAC,cAA+B,OAAlB,MAAMN,aAAY;IAEnD,qBACE,oBAAClB,uDACKe;QACJU,eAAehC,mCAEbwB,UAAUpB,SAAS6B,OAAO,IAAIxB,eAAe,CAACe,MAAM,EACpDV,SAAS;sBAGX,oBAACoB;QAAIC,MAAK;QAAaC,SAAS;OAC7BX,cAAc,CAAC,mBACd,oBAACS;QACCG,eAAAA;QACAD,SAAS;QACTE,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMzC,QAAQ0C,MAAM,EAAC;YAC/BC,WAAWV;YACXW,iBAAiBX;QACnB;QAGHjC,QAAQ6C,GAAG,CAAC;YAAGC,eAAAA,OAAOR,AAAWS,yBAAXT,WAA+BU;YAAtCF;YAAOR;;eACrB,oBAAC5B;YACCuC,KAAK,AAAC,GAAoB,OAAlBD,YAAY7B,KAAK;WACrB6B;YACJV,WAAWpC,2CAA+C6C;YAC1D9B,MAAMA,iBAAAA,kBAAAA,OAAQQ;YACdyB,SAAS/B,UAAU6B,YAAY7B,KAAK;YACpCE,UAAU;uBAAMA,SAAS2B,YAAY7B,KAAK;;YAEzC2B;IACqB;AAKlC,EAAE"}

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasRef } from '../../../types';
-export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+import { HasRef, HasRootRef } from '../../../types';
+export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControlOption: ({ getRef, className, style, children, ...restProps }: SegmentedControlOptionProps) => React.JSX.Element;
+export declare const SegmentedControlOption: ({ getRef, className, style, children, getRootRef, ...restProps }: SegmentedControlOptionProps) => React.JSX.Element;

package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js

@@ -11,15 +11,17 @@ import { VisuallyHidden } from "../../VisuallyHidden/VisuallyHidden";
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */ export var SegmentedControlOption = function(_param) {
-    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, restProps = _object_without_properties(_param, [
+    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, getRootRef = _param.getRootRef, restProps = _object_without_properties(_param, [
         "getRef",
         "className",
         "style",
-        "children"
+        "children",
+        "getRootRef"
     ]);
     var _useFocusVisible = useFocusVisible(), focusVisible = _useFocusVisible.focusVisible, onBlur = _useFocusVisible.onBlur, onFocus = _useFocusVisible.onFocus;
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", className),
+        ref: getRootRef,
         style: style
     }, /*#__PURE__*/ React.createElement(VisuallyHidden, _object_spread_props(_object_spread({}, restProps), {
         Component: "input",

package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","callMultiple","FocusVisible","Headline","VisuallyHidden","SegmentedControlOption","getRef","className","style","children","restProps","focusVisible","onBlur","onFocus","label","checked","Component","getRootRef","type","level","weight","visible","mode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAOrE;;CAEC,GACD,OAAO,IAAMC,yBAAyB;QACpCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CT,mBAAAA,mBAAlCW,eAAkCX,iBAAlCW,cAAcC,SAAoBZ,iBAApBY,QAAQC,UAAYb,iBAAZa;IAE9B,qBACE,oBAACC;QACCP,WAAWR,yCAETW,UAAUK,OAAO,2CACjBR;QAEFC,OAAOA;qBAEP,oBAACJ,wDACKM;QACJM,WAAU;QACVC,YAAYX;QACZY,MAAK;QACLN,QAAQX,aAAaW,QAAQF,UAAUE,MAAM;QAC7CC,SAASZ,aAAaY,SAASH,UAAUG,OAAO;uBAElD,oBAACV;QAASI,SAAS;QAA6CY,OAAM;QAAIC,QAAO;OAC9EX,yBAEH,oBAACP;QAAamB,SAASV;QAAcW,MAAK;;AAGhD,EAAE"}
+{"version":3,"sources":["../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { Headline } from '../../Typography/Headline/Headline';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nexport interface SegmentedControlOptionProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n  getRef,\n  className,\n  style,\n  children,\n  getRootRef,\n  ...restProps\n}: SegmentedControlOptionProps) => {\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['SegmentedControlOption'],\n        restProps.checked && styles['SegmentedControlOption--checked'],\n        className,\n      )}\n      ref={getRootRef}\n      style={style}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"radio\"\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <Headline className={styles['SegmentedControlOption__content']} level=\"2\" weight=\"2\">\n        {children}\n      </Headline>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useFocusVisible","callMultiple","FocusVisible","Headline","VisuallyHidden","SegmentedControlOption","getRef","className","style","children","getRootRef","restProps","focusVisible","onBlur","onFocus","label","checked","ref","Component","type","level","weight","visible","mode"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,YAAY,QAAQ,kCAAkC;AAC/D,SAASC,QAAQ,QAAQ,qCAAqC;AAC9D,SAASC,cAAc,QAAQ,sCAAsC;AAQrE;;CAEC,GACD,OAAO,IAAMC,yBAAyB;QACpCC,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA0CV,mBAAAA,mBAAlCY,eAAkCZ,iBAAlCY,cAAcC,SAAoBb,iBAApBa,QAAQC,UAAYd,iBAAZc;IAE9B,qBACE,oBAACC;QACCR,WAAWR,yCAETY,UAAUK,OAAO,2CACjBT;QAEFU,KAAKP;QACLF,OAAOA;qBAEP,oBAACJ,wDACKO;QACJO,WAAU;QACVR,YAAYJ;QACZa,MAAK;QACLN,QAAQZ,aAAaY,QAAQF,UAAUE,MAAM;QAC7CC,SAASb,aAAaa,SAASH,UAAUG,OAAO;uBAElD,oBAACX;QAASI,SAAS;QAA6Ca,OAAM;QAAIC,QAAO;OAC9EZ,yBAEH,oBAACP;QAAaoB,SAASV;QAAcW,MAAK;;AAGhD,EAAE"}

package/dist/components/SelectMimicry/SelectMimicry.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { HasAlign, HasRootRef } from '../../types';
+import { HasAlign, HTMLAttributesWithRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, HasAlign, HasRootRef<HTMLElement>, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
+export interface SelectMimicryProps extends HTMLAttributesWithRootRef<HTMLElement>, HasAlign, Pick<FormFieldProps, 'before' | 'after' | 'status'> {
     multiline?: boolean;
     disabled?: boolean;
     selectType?: SelectType;
@@ -10,4 +10,4 @@ export interface SelectMimicryProps extends React.HTMLAttributes<HTMLElement>, H
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */
-export declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, className, ...restProps }: SelectMimicryProps) => React.JSX.Element;
+export declare const SelectMimicry: ({ tabIndex, placeholder, children, align, getRootRef, multiline, disabled, onClick, before, after, selectType, status, className, autoFocus, ...restProps }: SelectMimicryProps) => React.JSX.Element;

package/dist/components/SelectMimicry/SelectMimicry.js

@@ -5,6 +5,8 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useAutoFocus } from "../../hooks/useAutoFocus";
+import { useExternRef } from "../../hooks/useExternRef";
 import { SizeType } from "../../lib/adaptivity";
 import { getFormFieldModeFromSelectType } from "../../lib/select";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
@@ -16,7 +18,7 @@ var sizeYClassNames = _define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/SelectMimicry
  */ export var SelectMimicry = function(_param) {
-    var _param_tabIndex = _param.tabIndex, tabIndex = _param_tabIndex === void 0 ? 0 : _param_tabIndex, placeholder = _param.placeholder, children = _param.children, align = _param.align, getRootRef = _param.getRootRef, multiline = _param.multiline, disabled = _param.disabled, onClick = _param.onClick, before = _param.before, _param_after = _param.after, after = _param_after === void 0 ? /*#__PURE__*/ React.createElement(DropdownIcon, null) : _param_after, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? "default" : _param_selectType, status = _param.status, className = _param.className, restProps = _object_without_properties(_param, [
+    var _param_tabIndex = _param.tabIndex, tabIndex = _param_tabIndex === void 0 ? 0 : _param_tabIndex, placeholder = _param.placeholder, children = _param.children, align = _param.align, getRootRef = _param.getRootRef, multiline = _param.multiline, disabled = _param.disabled, onClick = _param.onClick, before = _param.before, _param_after = _param.after, after = _param_after === void 0 ? /*#__PURE__*/ React.createElement(DropdownIcon, null) : _param_after, _param_selectType = _param.selectType, selectType = _param_selectType === void 0 ? "default" : _param_selectType, status = _param.status, className = _param.className, autoFocus = _param.autoFocus, restProps = _object_without_properties(_param, [
         "tabIndex",
         "placeholder",
         "children",
@@ -29,14 +31,17 @@ var sizeYClassNames = _define_property({
         "after",
         "selectType",
         "status",
-        "className"
+        "className",
+        "autoFocus"
     ]);
+    var rootRef = useExternRef(getRootRef);
     var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var title = children || placeholder;
+    useAutoFocus(rootRef, autoFocus);
     return /*#__PURE__*/ React.createElement(FormField, _object_spread_props(_object_spread({}, restProps), {
         tabIndex: disabled ? undefined : tabIndex,
         className: classNames("vkuiSelect", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], !children && "vkuiSelect--empty", multiline && "vkuiSelect--multiline", align === "center" && "vkuiSelect--align-center", align === "right" && "vkuiSelect--align-right", before && "vkuiSelect--hasBefore", className),
-        getRootRef: getRootRef,
+        getRootRef: rootRef,
         onClick: disabled ? undefined : onClick,
         disabled: disabled,
         before: before,