@vkontakte/vkui 5.0.3 → 5.1.2

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { NavIdProps } from "../../lib/getNavId";
+import * as React from 'react';
+import { NavIdProps } from '../../lib/getNavId';
 export interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {
     activeView: string;
     onTransition?(params: {

package/dist/components/Root/Root.js

@@ -2,20 +2,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "activeView", "onTransition", "nav", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Platform } from "../../lib/platform";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
-import { SplitColContext } from "../SplitCol/SplitCol";
-import { ScrollContext } from "../AppRoot/ScrollContext";
-import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
-import { getNavId } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import { useDOM } from "../../lib/dom";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { useTimeout } from "../../hooks/useTimeout";
-import { usePlatform } from "../../hooks/usePlatform";
-var warn = warnOnce("Root");
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Platform } from '../../lib/platform';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { SplitColContext } from '../SplitCol/SplitCol';
+import { ScrollContext } from '../AppRoot/ScrollContext';
+import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
+import { getNavId } from '../../lib/getNavId';
+import { warnOnce } from '../../lib/warnOnce';
+import { useDOM } from '../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useTimeout } from '../../hooks/useTimeout';
+import { usePlatform } from '../../hooks/usePlatform';
+var warn = warnOnce('Root');
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Root
@@ -102,12 +102,12 @@ export var Root = function Root(_ref) {
     fallbackTransition.set();
   }, [fallbackTransition, transition]);
   var onAnimationEnd = function onAnimationEnd(e) {
-    if (["vkui-root-android-animation-hide-back", "vkui-root-android-animation-show-forward", "vkui-root-ios-animation-hide-back", "vkui-root-ios-animation-show-forward"].includes(e.animationName)) {
+    if (['vkui-root-android-animation-hide-back', 'vkui-root-android-animation-show-forward', 'vkui-root-ios-animation-hide-back', 'vkui-root-ios-animation-show-forward'].includes(e.animationName)) {
       finishTransition();
     }
   };
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiRoot", platform === Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
+    className: classNames("vkuiRoot", platform === Platform.IOS && "vkuiRoot--ios", transition && "vkuiRoot--transition", className)
   }), views.map(function (view) {
     var _scrolls$viewId;
     var viewId = getNavId(view.props, warn);
@@ -122,7 +122,7 @@ export var Root = function Root(_ref) {
         return viewId && (viewNodes[viewId] = e);
       },
       onAnimationEnd: isTransitionTarget ? onAnimationEnd : undefined,
-      className: classNamesString("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", !transition && viewId === activeView && "vkuiRoot__view--active")
+      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(NavTransitionProvider, {
       entering: transition && viewId === activeView
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Root.js","names":["React","classNamesString","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","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","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport { useConfigProvider } from \"../ConfigProvider/ConfigProviderContext\";\nimport { SplitColContext } from \"../SplitCol/SplitCol\";\nimport { ScrollContext } from \"../AppRoot/ScrollContext\";\nimport { NavTransitionProvider } from \"../NavTransitionContext/NavTransitionContext\";\nimport { getNavId, NavIdProps } from \"../../lib/getNavId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport styles from \"./Root.module.css\";\n\nexport interface RootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\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>>(\n    {}\n  ).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] =\n    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(\n    finishTransition,\n    platform === Platform.IOS ? 600 : 300\n  );\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        \"vkui-root-android-animation-hide-back\",\n        \"vkui-root-android-animation-show-forward\",\n        \"vkui-root-ios-animation-hide-back\",\n        \"vkui-root-ios-animation-show-forward\",\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNamesString(\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 =\n          transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition &&\n          (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={classNamesString(\n              styles[\"Root__view\"],\n              transition &&\n                viewId === prevView &&\n                isBack &&\n                styles[\"Root__view--hide-back\"],\n              transition &&\n                viewId === prevView &&\n                !isBack &&\n                styles[\"Root__view--hide-forward\"],\n              transition &&\n                viewId === activeView &&\n                isBack &&\n                styles[\"Root__view--show-back\"],\n              transition &&\n                viewId === activeView &&\n                !isBack &&\n                styles[\"Root__view--show-forward\"],\n              !transition &&\n                viewId === activeView &&\n                styles[\"Root__view--active\"]\n            )}\n          >\n            <NavTransitionProvider\n              entering={transition && viewId === activeView}\n            >\n              <div\n                className={styles[\"Root__scrollCompensation\"]}\n                style={{\n                  marginTop: compensateScroll\n                    ? viewId && -(scrolls[viewId] ?? 0)\n                    : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Root.js","names":["React","classNames","Platform","useConfigProvider","SplitColContext","ScrollContext","NavTransitionProvider","getNavId","warnOnce","useDOM","useIsomorphicLayoutEffect","useTimeout","usePlatform","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","viewId","isTransitionTarget","compensateScroll","undefined","marginTop"],"sources":["../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { SplitColContext } from '../SplitCol/SplitCol';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\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}\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        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        '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"],"mappings":"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"}

package/dist/components/ScreenSpinner/Icon48CancelCircle.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const Icon48CancelCircle: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/components/ScreenSpinner/Icon48CancelCircle.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from "react";
+import * as React from 'react';
 export var Icon48CancelCircle = function Icon48CancelCircle(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     className: "vkuiIcon",

package/dist/components/ScreenSpinner/Icon48CancelCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon48CancelCircle.js","names":["React","Icon48CancelCircle","props"],"sources":["../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAoC;EAAA,oBACrE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,8VAA8V;IAChW,IAAI,EAAC;EAAc,EACnB,CACE;AAAA,CACP"}
+{"version":3,"file":"Icon48CancelCircle.js","names":["React","Icon48CancelCircle","props"],"sources":["../../../src/components/ScreenSpinner/Icon48CancelCircle.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48CancelCircle = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M40 24c0 8.837-7.163 16-16 16S8 32.837 8 24 15.163 8 24 8s16 7.163 16 16Zm-10.08-4.33a1.125 1.125 0 0 0-1.59-1.59L24 22.409l-4.33-4.33a1.125 1.125 0 0 0-1.59 0l-.101.116a1.125 1.125 0 0 0 .1 1.476L22.41 24l-4.33 4.33a1.125 1.125 0 0 0 1.591 1.59L24 25.591l4.33 4.33c.439.439 1.151.439 1.59 0l.101-.116a1.125 1.125 0 0 0-.1-1.476L25.59 24l4.33-4.33Z\"\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAAoC;EAAA,oBACrE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,8VAA8V;IAChW,IAAI,EAAC;EAAc,EACnB,CACE;AAAA,CACP"}

package/dist/components/ScreenSpinner/Icon48DoneOutline.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const Icon48DoneOutline: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

package/dist/components/ScreenSpinner/Icon48DoneOutline.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import * as React from "react";
+import * as React from 'react';
 export var Icon48DoneOutline = function Icon48DoneOutline(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     className: "vkuiIcon",

package/dist/components/ScreenSpinner/Icon48DoneOutline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon48DoneOutline.js","names":["React","Icon48DoneOutline","props"],"sources":["../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from \"react\";\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAoC;EAAA,oBACpE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,CAAC,EAAC,mBAAmB;IACrB,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,KAAK;IACjB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACE;AAAA,CACP"}
+{"version":3,"file":"Icon48DoneOutline.js","names":["React","Icon48DoneOutline","props"],"sources":["../../../src/components/ScreenSpinner/Icon48DoneOutline.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const Icon48DoneOutline = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    className=\"vkuiIcon\"\n    width=\"48\"\n    height=\"48\"\n    viewBox=\"0 0 48 48\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      d=\"M9 24L19 34L39 14\"\n      stroke=\"currentColor\"\n      strokeWidth=\"3.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    />\n  </svg>\n);\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAoC;EAAA,oBACpE;IACE,SAAS,EAAC,UAAU;IACpB,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,WAAW;IACnB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,GAC9BA,KAAK,gBAET;IACE,CAAC,EAAC,mBAAmB;IACrB,MAAM,EAAC,cAAc;IACrB,WAAW,EAAC,KAAK;IACjB,aAAa,EAAC,OAAO;IACrB,cAAc,EAAC;EAAO,EACtB,CACE;AAAA,CACP"}

package/dist/components/ScreenSpinner/ScreenSpinner.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SpinnerProps } from "../Spinner/Spinner";
+import { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
-    state?: "loading" | "cancelable" | "done" | "error";
+    state?: 'loading' | 'cancelable' | 'done' | 'error';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner

package/dist/components/ScreenSpinner/ScreenSpinner.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["style", "className", "state", "size", "aria-label", "onClick"];
-import * as React from "react";
-import { Spinner } from "../Spinner/Spinner";
-import { Icon24Cancel } from "@vkontakte/icons";
-import { Icon48DoneOutline } from "./Icon48DoneOutline";
-import { Icon48CancelCircle } from "./Icon48CancelCircle";
-import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
-import { useScrollLock } from "../AppRoot/ScrollContext";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { Spinner } from '../Spinner/Spinner';
+import { Icon24Cancel } from '@vkontakte/icons';
+import { Icon48DoneOutline } from './Icon48DoneOutline';
+import { Icon48CancelCircle } from './Icon48CancelCircle';
+import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { classNames } from '@vkontakte/vkjs';
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
@@ -16,14 +16,14 @@ export var ScreenSpinner = function ScreenSpinner(_ref) {
   var style = _ref.style,
     className = _ref.className,
     _ref$state = _ref.state,
-    state = _ref$state === void 0 ? "loading" : _ref$state,
+    state = _ref$state === void 0 ? 'loading' : _ref$state,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "large" : _ref$size,
-    _ref$ariaLabel = _ref["aria-label"],
-    ariaLabel = _ref$ariaLabel === void 0 ? "Пожалуйста, подождите..." : _ref$ariaLabel,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Пожалуйста, подождите...' : _ref$ariaLabel,
     onClick = _ref.onClick,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  var hideSpinner = state === "done" || state === "error";
+  var hideSpinner = state === 'done' || state === 'error';
   var Icon = {
     loading: function loading() {
       return null;
@@ -35,7 +35,7 @@ export var ScreenSpinner = function ScreenSpinner(_ref) {
   useScrollLock();
   return /*#__PURE__*/React.createElement(PopoutWrapper, {
     hasMask: false,
-    className: classNamesString("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
+    className: classNames("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", styles["ScreenSpinner--state-".concat(state)], className),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiScreenSpinner__container",

package/dist/components/ScreenSpinner/ScreenSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinner.js","names":["React","Spinner","Icon24Cancel","Icon48DoneOutline","Icon48CancelCircle","PopoutWrapper","useScrollLock","classNamesString","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","styles"],"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Spinner, SpinnerProps } from \"../Spinner/Spinner\";\nimport { Icon24Cancel } from \"@vkontakte/icons\";\nimport { Icon48DoneOutline } from \"./Icon48DoneOutline\";\nimport { Icon48CancelCircle } from \"./Icon48CancelCircle\";\nimport { PopoutWrapper } from \"../PopoutWrapper/PopoutWrapper\";\nimport { useScrollLock } from \"../AppRoot/ScrollContext\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./ScreenSpinner.module.css\";\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: \"loading\" | \"cancelable\" | \"done\" | \"error\";\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = \"loading\",\n  size = \"large\",\n  \"aria-label\": ariaLabel = \"Пожалуйста, подождите...\",\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === \"done\" || state === \"error\";\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNamesString(\n        styles[\"ScreenSpinner\"],\n        hideSpinner && styles[\"ScreenSpinner--hideSpinner\"],\n        styles[`ScreenSpinner--state-${state}`],\n        className\n      )}\n      style={style}\n    >\n      <div className={styles[\"ScreenSpinner__container\"]} onClick={onClick}>\n        <Spinner\n          className={styles[\"ScreenSpinner__spinner\"]}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles[\"ScreenSpinner__icon\"]}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAsB,oBAAoB;AAC1D,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,aAAa,QAAQ,gCAAgC;AAC9D,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,gBAAgB,QAAQ,sBAAsB;AAOvD;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAQA;EAAA,IAPxBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,kBACTC,KAAK;IAALA,KAAK,2BAAG,SAAS;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,OAAO;IAAA,sBACd,YAAY;IAAEC,SAAS,+BAAG,0BAA0B;IACpDC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGL,KAAK,KAAK,MAAM,IAAIA,KAAK,KAAK,OAAO;EAEzD,IAAMM,IAAI,GAAG;IACXC,OAAO,EAAE;MAAA,OAAM,IAAI;IAAA;IACnBC,UAAU,EAAEjB,YAAY;IACxBkB,IAAI,EAAEjB,iBAAiB;IACvBkB,KAAK,EAAEjB;EACT,CAAC,CAACO,KAAK,CAAC;EAERL,aAAa,EAAE;EAEf,oBACE,oBAAC,aAAa;IACZ,OAAO,EAAE,KAAM;IACf,SAAS,EAAEC,gBAAgB,sBAEzBS,WAAW,oCAAwC,EACnDM,MAAM,gCAAyBX,KAAK,EAAG,EACvCD,SAAS,CACT;IACF,KAAK,EAAED;EAAM,gBAEb;IAAK,SAAS,gCAAqC;IAAC,OAAO,EAAEK;EAAQ,gBACnE,oBAAC,OAAO;IACN,SAAS,8BAAmC;IAC5C,IAAI,EAAEF,IAAK;IACX,cAAYC;EAAU,GAClBE,SAAS,EACb,eACF;IAAK,SAAS;EAAgC,gBAC5C,oBAAC,IAAI,OAAG,CACJ,CACF,CACQ;AAEpB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"ScreenSpinner.js","names":["React","Spinner","Icon24Cancel","Icon48DoneOutline","Icon48CancelCircle","PopoutWrapper","useScrollLock","classNames","ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","done","error","styles"],"sources":["../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  'aria-label': ariaLabel = 'Пожалуйста, подождите...',\n  onClick,\n  ...restProps\n}: ScreenSpinnerProps) => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      hasMask={false}\n      className={classNames(\n        styles['ScreenSpinner'],\n        hideSpinner && styles['ScreenSpinner--hideSpinner'],\n        styles[`ScreenSpinner--state-${state}`],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={styles['ScreenSpinner__spinner']}\n          size={size}\n          aria-label={ariaLabel}\n          {...restProps}\n        />\n        <div className={styles['ScreenSpinner__icon']}>\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,QAAsB,oBAAoB;AAC1D,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,aAAa,QAAQ,gCAAgC;AAC9D,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAO5C;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAQA;EAAA,IAPxBC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,kBACTC,KAAK;IAALA,KAAK,2BAAG,SAAS;IAAA,iBACjBC,IAAI;IAAJA,IAAI,0BAAG,OAAO;IAAA,sBACd,YAAY;IAAEC,SAAS,+BAAG,0BAA0B;IACpDC,OAAO,QAAPA,OAAO;IACJC,SAAS;EAEZ,IAAMC,WAAW,GAAGL,KAAK,KAAK,MAAM,IAAIA,KAAK,KAAK,OAAO;EAEzD,IAAMM,IAAI,GAAG;IACXC,OAAO,EAAE;MAAA,OAAM,IAAI;IAAA;IACnBC,UAAU,EAAEjB,YAAY;IACxBkB,IAAI,EAAEjB,iBAAiB;IACvBkB,KAAK,EAAEjB;EACT,CAAC,CAACO,KAAK,CAAC;EAERL,aAAa,EAAE;EAEf,oBACE,oBAAC,aAAa;IACZ,OAAO,EAAE,KAAM;IACf,SAAS,EAAEC,UAAU,sBAEnBS,WAAW,oCAAwC,EACnDM,MAAM,gCAAyBX,KAAK,EAAG,EACvCD,SAAS,CACT;IACF,KAAK,EAAED;EAAM,gBAEb;IAAK,SAAS,gCAAqC;IAAC,OAAO,EAAEK;EAAQ,gBACnE,oBAAC,OAAO;IACN,SAAS,8BAAmC;IAC5C,IAAI,EAAEF,IAAK;IACX,cAAYC;EAAU,GAClBE,SAAS,EACb,eACF;IAAK,SAAS;EAAgC,gBAC5C,oBAAC,IAAI,OAAG,CACJ,CACF,CACQ;AAEpB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;AAAA"}

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { HasRef } from "../../types";
-import { VKUITouchEvent } from "../../lib/touch";
+import * as React from 'react';
+import { HasRef } from '../../types';
+import { VKUITouchEvent } from '../../lib/touch';
 export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
     /**
      * iOS only. Текст кнопки "отмена", которая чистит текстовое поле и убирает фокус.
@@ -14,4 +14,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, ...inputProps }: SearchProps) => JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, ...inputProps }: SearchProps) => JSX.Element;

package/dist/components/Search/Search.js

@@ -2,20 +2,19 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
-  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from "@vkontakte/icons";
-import { Platform } from "../../lib/platform";
-import { Touch } from "../Touch/Touch";
-import { noop } from "../../lib/utils";
-import { Title } from "../Typography/Title/Title";
-import { Headline } from "../Typography/Headline/Headline";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useEnsuredControl } from "../../hooks/useEnsuredControl";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+  _excluded2 = ["before", "className", "defaultValue", "placeholder", "after", "getRef", "icon", "onIconClick", "style", "autoComplete", "onChange", "value"];
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';
+import { Platform } from '../../lib/platform';
+import { Touch } from '../Touch/Touch';
+import { Title } from '../Typography/Title/Title';
+import { Headline } from '../Typography/Headline/Headline';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useEnsuredControl } from '../../hooks/useEnsuredControl';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
   var children = _ref.children,
     restProps = _objectWithoutProperties(_ref, _excluded);
@@ -40,26 +39,30 @@ export var Search = function Search(_ref2) {
     before = _ref2$before === void 0 ? /*#__PURE__*/React.createElement(Icon16SearchOutline, null) : _ref2$before,
     className = _ref2.className,
     _ref2$defaultValue = _ref2.defaultValue,
-    defaultValue = _ref2$defaultValue === void 0 ? "" : _ref2$defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? '' : _ref2$defaultValue,
     _ref2$placeholder = _ref2.placeholder,
-    placeholder = _ref2$placeholder === void 0 ? "Поиск" : _ref2$placeholder,
+    placeholder = _ref2$placeholder === void 0 ? 'Поиск' : _ref2$placeholder,
     _ref2$after = _ref2.after,
-    after = _ref2$after === void 0 ? "Отмена" : _ref2$after,
+    after = _ref2$after === void 0 ? 'Отмена' : _ref2$after,
     getRef = _ref2.getRef,
     icon = _ref2.icon,
     _ref2$onIconClick = _ref2.onIconClick,
     onIconClick = _ref2$onIconClick === void 0 ? noop : _ref2$onIconClick,
     style = _ref2.style,
     _ref2$autoComplete = _ref2.autoComplete,
-    autoComplete = _ref2$autoComplete === void 0 ? "off" : _ref2$autoComplete,
+    autoComplete = _ref2$autoComplete === void 0 ? 'off' : _ref2$autoComplete,
+    onChangeProp = _ref2.onChange,
+    valueProp = _ref2.value,
     inputProps = _objectWithoutProperties(_ref2, _excluded2);
   var inputRef = useExternRef(getRef);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setFocused = _React$useState2[1];
-  var _useEnsuredControl = useEnsuredControl(inputProps, {
-      defaultValue: defaultValue
+  var _useEnsuredControl = useEnsuredControl({
+      defaultValue: defaultValue,
+      onChange: onChangeProp,
+      value: valueProp
     }),
     _useEnsuredControl2 = _slicedToArray(_useEnsuredControl, 2),
     value = _useEnsuredControl2[0],
@@ -78,9 +81,9 @@ export var Search = function Search(_ref2) {
   var onCancel = React.useCallback(function () {
     var _Object$getOwnPropert, _inputRef$current;
     // eslint-disable-next-line @typescript-eslint/unbound-method
-    var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
-    nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, "");
-    var ev2 = new Event("input", {
+    var nativeInputValueSetter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+    nativeInputValueSetter === null || nativeInputValueSetter === void 0 ? void 0 : nativeInputValueSetter.call(inputRef.current, '');
+    var ev2 = new Event('input', {
       bubbles: true
     });
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.dispatchEvent(ev2);
@@ -95,7 +98,7 @@ export var Search = function Search(_ref2) {
     onCancel();
   }, [inputRef, onCancel]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNamesString("vkuiSearch", platform === Platform.IOS && "vkuiSearch--ios", getSizeYClassName("vkuiSearch", sizeY), isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
+    className: classNames("vkuiSearch", platform === Platform.IOS && "vkuiSearch--ios", getSizeYClassName("vkuiSearch", sizeY), isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiSearch__in"
@@ -124,8 +127,7 @@ export var Search = function Search(_ref2) {
   }, placeholder)), isFocused && platform === Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
     className: "vkuiSearch__after-width"
   }, after))), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after",
-    onClick: onCancel
+    className: "vkuiSearch__after"
   }, /*#__PURE__*/React.createElement("div", {
     className: "vkuiSearch__icons"
   }, icon && /*#__PURE__*/React.createElement(Touch, {
@@ -133,9 +135,11 @@ export var Search = function Search(_ref2) {
     className: "vkuiSearch__icon"
   }, icon), !!value && /*#__PURE__*/React.createElement(Touch, {
     onStart: onIconCancelClickStart,
+    onClick: onCancel,
     className: "vkuiSearch__icon"
   }, platform === Platform.IOS ? /*#__PURE__*/React.createElement(Icon16Clear, null) : /*#__PURE__*/React.createElement(Icon24Cancel, null))), platform === Platform.IOS && after && /*#__PURE__*/React.createElement("div", {
-    className: "vkuiSearch__after-in"
+    className: "vkuiSearch__after-in",
+    onClick: onCancel
   }, after))));
 };
 //# sourceMappingURL=Search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Search.js","names":["React","classNamesString","usePlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","Platform","Touch","noop","Title","Headline","useExternRef","useEnsuredControl","useAdaptivity","getSizeYClassName","SearchPlaceholderTypography","children","restProps","platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","inputProps","inputRef","useState","isFocused","setFocused","value","onChange","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus"],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  Icon16SearchOutline,\n  Icon16Clear,\n  Icon24Cancel,\n} from \"@vkontakte/icons\";\nimport { Platform } from \"../../lib/platform\";\nimport { HasRef } from \"../../types\";\nimport { Touch, TouchEvent } from \"../Touch/Touch\";\nimport { VKUITouchEvent } from \"../../lib/touch\";\nimport { noop } from \"../../lib/utils\";\nimport { Title } from \"../Typography/Title/Title\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEnsuredControl } from \"../../hooks/useEnsuredControl\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./Search.module.css\";\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\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}\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(inputProps, { defaultValue });\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\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      onCancel();\n    },\n    [inputRef, onCancel]\n  );\n\n  return (\n    <div\n      className={classNamesString(\n        styles[\"Search\"],\n        platform === Platform.IOS && styles[\"Search--ios\"],\n        getSizeYClassName(styles[\"Search\"], sizeY),\n        isFocused && styles[\"Search--focused\"],\n        value && styles[\"Search--has-value\"],\n        after && styles[\"Search--has-after\"],\n        icon && styles[\"Search--has-icon\"],\n        className\n      )}\n      style={style}\n    >\n      <div className={styles[\"Search__in\"]}>\n        <div className={styles[\"Search__width\"]} />\n        <label className={styles[\"Search__control\"]}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles[\"Search__input\"]}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles[\"Search__after-width\"]}>{after}</div>\n          )}\n          <div className={styles[\"Search__placeholder\"]}>\n            <div className={styles[\"Search__placeholder-in\"]}>\n              {before}\n              <SearchPlaceholderTypography\n                className={styles[\"Search__placeholder-text\"]}\n              >\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles[\"Search__after-width\"]}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles[\"Search__after\"]} onClick={onCancel}>\n          <div className={styles[\"Search__icons\"]}>\n            {icon && (\n              <Touch\n                onStart={onIconClickStart}\n                className={styles[\"Search__icon\"]}\n              >\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                className={styles[\"Search__icon\"]}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles[\"Search__after-in\"]}>{after}</div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Search.js","names":["React","classNames","noop","usePlatform","Icon16SearchOutline","Icon16Clear","Icon24Cancel","Platform","Touch","Title","Headline","useExternRef","useEnsuredControl","useAdaptivity","getSizeYClassName","SearchPlaceholderTypography","children","restProps","platform","IOS","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChangeProp","onChange","valueProp","value","inputProps","inputRef","useState","isFocused","setFocused","sizeY","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus"],"sources":["../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Icon16SearchOutline, Icon16Clear, Icon24Cancel } from '@vkontakte/icons';\nimport { Platform } from '../../lib/platform';\nimport { HasRef } from '../../types';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { VKUITouchEvent } from '../../lib/touch';\nimport { Title } from '../Typography/Title/Title';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Search.module.css';\n\nconst SearchPlaceholderTypography = ({\n  children,\n  ...restProps\n}: React.HTMLAttributes<HTMLElement>) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return (\n        <Title {...restProps} level=\"3\" weight=\"3\">\n          {children}\n        </Title>\n      );\n    default:\n      return (\n        <Headline {...restProps} weight=\"3\">\n          {children}\n        </Headline>\n      );\n  }\n};\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}\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  ...inputProps\n}: SearchProps) => {\n  const inputRef = useExternRef(getRef);\n  const [isFocused, setFocused] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const { sizeY } = useAdaptivity();\n  const platform = usePlatform();\n\n  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(true);\n    inputProps.onFocus && inputProps.onFocus(e);\n  };\n\n  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    setFocused(false);\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      onCancel();\n    },\n    [inputRef, onCancel],\n  );\n\n  return (\n    <div\n      className={classNames(\n        styles['Search'],\n        platform === Platform.IOS && styles['Search--ios'],\n        getSizeYClassName(styles['Search'], sizeY),\n        isFocused && styles['Search--focused'],\n        value && styles['Search--has-value'],\n        after && styles['Search--has-after'],\n        icon && styles['Search--has-icon'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__in']}>\n        <div className={styles['Search__width']} />\n        <label className={styles['Search__control']}>\n          <input\n            type=\"search\"\n            {...inputProps}\n            autoComplete={autoComplete}\n            ref={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-width']}>{after}</div>\n          )}\n          <div className={styles['Search__placeholder']}>\n            <div className={styles['Search__placeholder-in']}>\n              {before}\n              <SearchPlaceholderTypography className={styles['Search__placeholder-text']}>\n                {placeholder}\n              </SearchPlaceholderTypography>\n            </div>\n            {isFocused && platform === Platform.IOS && after && (\n              <div className={styles['Search__after-width']}>{after}</div>\n            )}\n          </div>\n        </label>\n        <div className={styles['Search__after']}>\n          <div className={styles['Search__icons']}>\n            {icon && (\n              <Touch onStart={onIconClickStart} className={styles['Search__icon']}>\n                {icon}\n              </Touch>\n            )}\n            {!!value && (\n              <Touch\n                onStart={onIconCancelClickStart}\n                onClick={onCancel}\n                className={styles['Search__icon']}\n              >\n                {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n              </Touch>\n            )}\n          </div>\n          {platform === Platform.IOS && after && (\n            <div className={styles['Search__after-in']} onClick={onCancel}>\n              {after}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export declare type SegmentedControlValue = string | number | undefined;
-export interface SegmentedControlOptionInterface extends Omit<React.HTMLAttributes<HTMLElement>, "label"> {
+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<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, HasRootRef<HTMLDivElement> {
     options: SegmentedControlOptionInterface[];
-    size?: "m" | "l";
+    size?: 'm' | 'l';
     name?: string;
     onChange?: (value: SegmentedControlValue) => void;
     value?: SegmentedControlValue;
@@ -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, onChange, value: valueProp, defaultValue, children, className, ...restProps }: SegmentedControlProps) => JSX.Element;
+export declare const SegmentedControl: ({ size, name, options, getRootRef, defaultValue, children, className, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => JSX.Element;