@vkontakte/vkui 5.4.2 → 5.5.0

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "Icon48CancelCircle", {
         return Icon48CancelCircle;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var Icon48CancelCircle = function(props) {
-    return /*#__PURE__*/ _react.createElement("svg", _objectSpread({
+    return /*#__PURE__*/ _react.createElement("svg", _object_spread._({
         className: "vkuiIcon",
         width: "48",
         height: "48",

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;2DAFU;AAEhB,IAAMA,qBAAqB,SAACC;yBACjC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP,sBAEJ,qBAACQ;QACCC,UAAS;QACTC,UAAS;QACTC,GAAE;QACFL,MAAK"}
+{"version":3,"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"],"names":["Icon48CancelCircle","props","svg","className","width","height","viewBox","fill","xmlns","path","fillRule","clipRule","d"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;+DAFU;AAEhB,IAAMA,qBAAqB,SAACC;yBACjC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP,sBAEJ,qBAACQ;QACCC,UAAS;QACTC,UAAS;QACTC,GAAE;QACFL,MAAK"}

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

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

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "Icon48DoneOutline", {
         return Icon48DoneOutline;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var Icon48DoneOutline = function(props) {
-    return /*#__PURE__*/ _react.createElement("svg", _objectSpread({
+    return /*#__PURE__*/ _react.createElement("svg", _object_spread._({
         className: "vkuiIcon",
         width: "48",
         height: "48",

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;2DAFU;AAEhB,IAAMA,oBAAoB,SAACC;yBAChC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP,sBAEJ,qBAACQ;QACCC,GAAE;QACFC,QAAO;QACPC,aAAY;QACZC,eAAc;QACdC,gBAAe"}
+{"version":3,"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"],"names":["Icon48DoneOutline","props","svg","className","width","height","viewBox","fill","xmlns","path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"mappings":";;;;+BAEaA;;;eAAAA;;;;;+DAFU;AAEhB,IAAMA,oBAAoB,SAACC;yBAChC,qBAACC;QACCC,WAAU;QACVC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;OACFP,sBAEJ,qBAACQ;QACCC,GAAE;QACFC,QAAO;QACPC,aAAY;QACZC,eAAc;QACdC,gBAAe"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
     state?: 'loading' | 'cancelable' | 'done' | 'error';
@@ -6,4 +6,4 @@ export interface ScreenSpinnerProps extends SpinnerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
-export declare const ScreenSpinner: ({ style, className, state, size, "aria-label": ariaLabel, onClick, ...restProps }: ScreenSpinnerProps) => JSX.Element;
+export declare const ScreenSpinner: ({ style, className, state, size, "aria-label": ariaLabel, onClick, ...restProps }: ScreenSpinnerProps) => React.JSX.Element;

package/dist/cjs/components/ScreenSpinner/ScreenSpinner.js

@@ -8,19 +8,19 @@ Object.defineProperty(exports, "ScreenSpinner", {
         return ScreenSpinner;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
-var _scrollContext = require("../AppRoot/ScrollContext");
-var _popoutWrapper = require("../PopoutWrapper/PopoutWrapper");
-var _spinner = require("../Spinner/Spinner");
-var _icon48CancelCircle = require("./Icon48CancelCircle");
-var _icon48DoneOutline = require("./Icon48DoneOutline");
+var _ScrollContext = require("../AppRoot/ScrollContext");
+var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
+var _Spinner = require("../Spinner/Spinner");
+var _Icon48CancelCircle = require("./Icon48CancelCircle");
+var _Icon48DoneOutline = require("./Icon48DoneOutline");
 var ScreenSpinner = function(_param) {
-    var style = _param.style, className = _param.className, _param_state = _param.state, state = _param_state === void 0 ? "loading" : _param_state, _param_size = _param.size, size = _param_size === void 0 ? "large" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp, onClick = _param.onClick, restProps = _objectWithoutProperties(_param, [
+    var style = _param.style, className = _param.className, _param_state = _param.state, state = _param_state === void 0 ? "loading" : _param_state, _param_size = _param.size, size = _param_size === void 0 ? "large" : _param_size, tmp = _param["aria-label"], ariaLabel = tmp === void 0 ? "Пожалуйста, подождите..." : tmp, onClick = _param.onClick, restProps = _object_without_properties._(_param, [
         "style",
         "className",
         "state",
@@ -34,18 +34,18 @@ var ScreenSpinner = function(_param) {
             return null;
         },
         cancelable: _icons.Icon24Cancel,
-        done: _icon48DoneOutline.Icon48DoneOutline,
-        error: _icon48CancelCircle.Icon48CancelCircle
+        done: _Icon48DoneOutline.Icon48DoneOutline,
+        error: _Icon48CancelCircle.Icon48CancelCircle
     }[state];
-    (0, _scrollContext.useScrollLock)();
-    return /*#__PURE__*/ _react.createElement(_popoutWrapper.PopoutWrapper, {
+    (0, _ScrollContext.useScrollLock)();
+    return /*#__PURE__*/ _react.createElement(_PopoutWrapper.PopoutWrapper, {
         hasMask: false,
         className: (0, _vkjs.classNames)("vkuiScreenSpinner", hideSpinner && "vkuiScreenSpinner--hideSpinner", state === "cancelable" && "vkuiScreenSpinner--state-cancelable", state === "done" && "vkuiScreenSpinner--state-done", className),
         style: style
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiScreenSpinner__container",
         onClick: onClick
-    }, /*#__PURE__*/ _react.createElement(_spinner.Spinner, _objectSpread({
+    }, /*#__PURE__*/ _react.createElement(_Spinner.Spinner, _object_spread._({
         className: "vkuiScreenSpinner__spinner",
         size: size,
         "aria-label": ariaLabel

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\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        state === 'cancelable' && styles['ScreenSpinner--state-cancelable'],\n        state === 'done' && styles['ScreenSpinner--state-done'],\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"],"names":["ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","hasMask","classNames","div","Spinner","aria-label"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;2DAjBU;qBACM;oBACF;6BACG;6BACA;uBACQ;kCACH;iCACD;AAU3B,IAAMA,gBAAgB,iBAQH;QAPxBC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM,IAAI;;QACnBC,YAAYC,mBAAY;QACxBC,MAAMC,oCAAiB;QACvBC,OAAOC,sCAAkB;IAC3B,CAAC,CAACb,MAAM;IAERc,IAAAA,4BAAa;IAEb,qBACE,qBAACC,4BAAa;QACZC,SAAS,KAAK;QACdjB,WAAWkB,IAAAA,gBAAU,uBAEnBZ,iDACAL,UAAU,uDACVA,UAAU,2CACVD;QAEFD,OAAOA;qBAEP,qBAACoB;QAAInB,SAAS;QAAsCI,SAASA;qBAC3D,qBAACgB,gBAAO;QACNpB,SAAS;QACTE,MAAMA;QACNmB,cAAYlB;OACRE,2BAEN,qBAACc;QAAInB,SAAS;qBACZ,qBAACO;AAKX"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\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        state === 'cancelable' && styles['ScreenSpinner--state-cancelable'],\n        state === 'done' && styles['ScreenSpinner--state-done'],\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"],"names":["ScreenSpinner","style","className","state","size","ariaLabel","onClick","restProps","hideSpinner","Icon","loading","cancelable","Icon24Cancel","done","Icon48DoneOutline","error","Icon48CancelCircle","useScrollLock","PopoutWrapper","hasMask","classNames","div","Spinner","aria-label"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;+DAjBU;qBACM;oBACF;6BACG;6BACA;uBACQ;kCACH;iCACD;AAU3B,IAAMA,gBAAgB;QAC3BC,eAAAA,OACAC,mBAAAA,iCACAC,OAAAA,kCAAQ,+CACRC,MAAAA,gCAAO,uBACOC,aAAd,eAAcA,YAAAA,iBAAY,6BAAZA,KACdC,iBAAAA,SACGC;QANHN;QACAC;QACAC;QACAC;QACA;QACAE;;IAGA,IAAME,cAAcL,UAAU,UAAUA,UAAU;IAElD,IAAMM,OAAO;QACXC,SAAS;mBAAM;;QACfC,YAAYC;QACZC,MAAMC;QACNC,OAAOC;IACT,CAAC,CAACb,MAAM;IAERc,IAAAA;IAEA,qBACE,qBAACC;QACCC,SAAS;QACTjB,WAAWkB,IAAAA,uCAETZ,iDACAL,UAAU,uDACVA,UAAU,2CACVD;QAEFD,OAAOA;qBAEP,qBAACoB;QAAInB,SAAS;QAAsCI,SAASA;qBAC3D,qBAACgB;QACCpB,SAAS;QACTE,MAAMA;QACNmB,cAAYlB;OACRE,2BAEN,qBAACc;QAAInB,SAAS;qBACZ,qBAACO;AAKX"}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+export interface ScrollArrowProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, HasRootRef<HTMLButtonElement> {
+    /**
+     * Направление стрелки
+     */
+    direction: 'left' | 'right';
+    /**
+     * Размер стрелки
+     */
+    size?: 'm' | 'l';
+    /**
+     * Смещает иконку кнопки навигации по вертикали.
+     */
+    offsetY?: number | string;
+}
+/**
+ * Компонент стрелки из HorizontalScroll
+ *
+ * @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;

package/dist/cjs/components/ScrollArrow/ScrollArrow.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ScrollArrow", {
+    enumerable: true,
+    get: function() {
+        return ScrollArrow;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _icons = require("@vkontakte/icons");
+var _vkjs = require("@vkontakte/vkjs");
+var ArrowIcon = function(param) {
+    var size = param.size, direction = param.direction;
+    if (size === "m") {
+        return direction === "left" ? /*#__PURE__*/ _react.createElement(_icons.Icon16ChevronLeft, null) : /*#__PURE__*/ _react.createElement(_icons.Icon16Chevron, null);
+    }
+    return direction === "left" ? /*#__PURE__*/ _react.createElement(_icons.Icon24ChevronCompactLeft, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Chevron, null);
+};
+var ScrollArrow = function(_param) {
+    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, offsetY = _param.offsetY, direction = _param.direction, className = _param.className, getRootRef = _param.getRootRef, _param_children = _param.children, children = _param_children === void 0 ? /*#__PURE__*/ _react.createElement(ArrowIcon, {
+        direction: direction,
+        size: size
+    }) : _param_children, restProps = _object_without_properties._(_param, [
+        "size",
+        "offsetY",
+        "direction",
+        "className",
+        "getRootRef",
+        "children"
+    ]);
+    return /*#__PURE__*/ _react.createElement("button", _object_spread._({
+        className: (0, _vkjs.classNames)("vkuiScrollArrow", {
+            m: "vkuiScrollArrow--size-m",
+            l: "vkuiScrollArrow--size-l"
+        }[size], {
+            left: "vkuiScrollArrow--direction-left",
+            right: "vkuiScrollArrow--direction-right"
+        }[direction], className),
+        ref: getRootRef
+    }, restProps), /*#__PURE__*/ _react.createElement("span", {
+        className: "vkuiScrollArrow__icon",
+        style: offsetY ? {
+            top: offsetY
+        } : undefined
+    }, children));
+};
+
+//# sourceMappingURL=ScrollArrow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon16Chevron,\n  Icon16ChevronLeft,\n  Icon24Chevron,\n  Icon24ChevronCompactLeft,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './ScrollArrow.module.css';\n\nconst ArrowIcon = ({ size, direction }: Pick<ScrollArrowProps, 'size' | 'direction'>) => {\n  if (size === 'm') {\n    return direction === 'left' ? <Icon16ChevronLeft /> : <Icon16Chevron />;\n  }\n\n  return direction === 'left' ? <Icon24ChevronCompactLeft /> : <Icon24Chevron />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'left' | 'right';\n  /**\n   * Размер стрелки\n   */\n  size?: 'm' | 'l';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n}\n\n/**\n * Компонент стрелки из HorizontalScroll\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'l',\n  offsetY,\n  direction,\n  className,\n  getRootRef,\n  children = <ArrowIcon direction={direction} size={size} />,\n  ...restProps\n}: ScrollArrowProps) => {\n  return (\n    <button\n      className={classNames(\n        styles['ScrollArrow'],\n        {\n          m: styles['ScrollArrow--size-m'],\n          l: styles['ScrollArrow--size-l'],\n        }[size],\n        {\n          left: styles['ScrollArrow--direction-left'],\n          right: styles['ScrollArrow--direction-right'],\n        }[direction],\n        className,\n      )}\n      ref={getRootRef}\n      {...restProps}\n    >\n      <span className={styles['ScrollArrow__icon']} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </button>\n  );\n};\n"],"names":["ScrollArrow","ArrowIcon","size","direction","Icon16ChevronLeft","Icon16Chevron","Icon24ChevronCompactLeft","Icon24Chevron","offsetY","className","getRootRef","children","restProps","button","classNames","m","l","left","right","ref","span","style","top","undefined"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;+DA1CU;qBAMhB;oBACoB;AAI3B,IAAMC,YAAY;QAAGC,aAAAA,MAAMC,kBAAAA;IACzB,IAAID,SAAS,KAAK;QAChB,OAAOC,cAAc,uBAAS,qBAACC,gDAAuB,qBAACC;IACzD;IAEA,OAAOF,cAAc,uBAAS,qBAACG,uDAA8B,qBAACC;AAChE;AAyBO,IAAMP,cAAc;6BACzBE,MAAAA,gCAAO,mBACPM,iBAAAA,SACAL,mBAAAA,WACAM,mBAAAA,WACAC,oBAAAA,qCACAC,UAAAA,sDAAW,qBAACV;QAAUE,WAAWA;QAAWD,MAAMA;0BAC/CU;QANHV;QACAM;QACAL;QACAM;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCJ,WAAWK,IAAAA,qCAET;YACEC,CAAC;YACDC,CAAC;QACH,CAAC,CAACd,KAAK,EACP;YACEe,IAAI;YACJC,KAAK;QACP,CAAC,CAACf,UAAU,EACZM;QAEFU,KAAKT;OACDE,0BAEJ,qBAACQ;QAAKX,SAAS;QAA+BY,OAAOb,UAAU;YAAEc,KAAKd;QAAQ,IAAIe;OAC/EZ;AAIT"}

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

@@ -16,4 +16,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, ...inputProps }: SearchProps) => JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, ...inputProps }: SearchProps) => React.JSX.Element;

package/dist/cjs/components/Search/Search.js

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "Search", {
         return Search;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
@@ -23,11 +23,11 @@ var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
-var _button = require("../Button/Button");
-var _iconButton = require("../IconButton/IconButton");
-var _headline = require("../Typography/Headline/Headline");
+var _Button = require("../Button/Button");
+var _IconButton = require("../IconButton/IconButton");
+var _Headline = require("../Typography/Headline/Headline");
 var Search = function(_param) {
-    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? _vkjs.noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, inputProps = _objectWithoutProperties(_param, [
+    var _param_before = _param.before, before = _param_before === void 0 ? /*#__PURE__*/ _react.createElement(_icons.Icon16SearchOutline, null) : _param_before, className = _param.className, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Поиск" : _param_placeholder, _param_after = _param.after, after = _param_after === void 0 ? "Отмена" : _param_after, getRef = _param.getRef, icon = _param.icon, _param_onIconClick = _param.onIconClick, onIconClick = _param_onIconClick === void 0 ? _vkjs.noop : _param_onIconClick, style = _param.style, _param_autoComplete = _param.autoComplete, autoComplete = _param_autoComplete === void 0 ? "off" : _param_autoComplete, onChangeProp = _param.onChange, valueProp = _param.value, iconAriaLabel = _param.iconAriaLabel, _param_clearAriaLabel = _param.clearAriaLabel, clearAriaLabel = _param_clearAriaLabel === void 0 ? "Очистить" : _param_clearAriaLabel, inputProps = _object_without_properties._(_param, [
         "before",
         "className",
         "defaultValue",
@@ -45,7 +45,7 @@ var Search = function(_param) {
     ]);
     var inputRef = (0, _useExternRef.useExternRef)(getRef);
     var _useBooleanState1 = (0, _useBooleanState.useBooleanState)(false), isFocused = _useBooleanState1.value, setFocusedTrue = _useBooleanState1.setTrue, setFocusedFalse = _useBooleanState1.setFalse;
-    var _useEnsuredControl1 = _slicedToArray((0, _useEnsuredControl.useEnsuredControl)({
+    var _useEnsuredControl1 = _sliced_to_array._((0, _useEnsuredControl.useEnsuredControl)({
         defaultValue: defaultValue,
         onChange: onChangeProp,
         value: valueProp
@@ -93,7 +93,7 @@ var Search = function(_param) {
         className: "vkuiSearch__field"
     }, /*#__PURE__*/ _react.createElement("label", {
         className: "vkuiSearch__control"
-    }, before, /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpreadProps(_objectSpread({
+    }, before, /*#__PURE__*/ _react.createElement(_Headline.Headline, _object_spread_props._(_object_spread._({
         Component: "input",
         type: "search",
         level: "1",
@@ -109,20 +109,20 @@ var Search = function(_param) {
         value: value
     }))), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiSearch__icons"
-    }, icon && /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {
+    }, icon && /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
         hoverMode: "opacity",
         onStart: onIconClickStart,
         className: "vkuiSearch__icon",
         onFocus: setFocusedTrue,
         onBlur: setFocusedFalse,
         "aria-label": iconAriaLabel
-    }, icon), !!value && /*#__PURE__*/ _react.createElement(_iconButton.IconButton, {
+    }, icon), !!value && /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
         hoverMode: "opacity",
         onStart: onIconCancelClickStart,
         onClick: onCancel,
         className: "vkuiSearch__icon",
         "aria-label": clearAriaLabel
-    }, platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_icons.Icon16Clear, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, null)))), platform === _platform.Platform.IOS && after && /*#__PURE__*/ _react.createElement(_button.Button, {
+    }, platform === _platform.Platform.IOS ? /*#__PURE__*/ _react.createElement(_icons.Icon16Clear, null) : /*#__PURE__*/ _react.createElement(_icons.Icon24Cancel, null)))), platform === _platform.Platform.IOS && after && /*#__PURE__*/ _react.createElement(_Button.Button, {
         mode: "tertiary",
         size: "m",
         className: "vkuiSearch__after",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { 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 * @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  ...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      onCancel();\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        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Search/Search.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon16SearchOutline, Icon24Cancel } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { 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 * @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  ...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      onCancel();\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        className,\n      )}\n      style={style}\n    >\n      <div className={styles['Search__field']}>\n        <label className={styles['Search__control']}>\n          {before}\n          <Headline\n            Component=\"input\"\n            type=\"search\"\n            level=\"1\"\n            weight=\"3\"\n            {...inputProps}\n            placeholder={placeholder}\n            autoComplete={autoComplete}\n            getRootRef={inputRef}\n            className={styles['Search__input']}\n            onFocus={onFocus}\n            onBlur={onBlur}\n            onChange={onChange}\n            value={value}\n          />\n        </label>\n        <div className={styles['Search__icons']}>\n          {icon && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconClickStart}\n              className={styles['Search__icon']}\n              onFocus={setFocusedTrue}\n              onBlur={setFocusedFalse}\n              aria-label={iconAriaLabel}\n            >\n              {icon}\n            </IconButton>\n          )}\n          {!!value && (\n            <IconButton\n              hoverMode=\"opacity\"\n              onStart={onIconCancelClickStart}\n              onClick={onCancel}\n              className={styles['Search__icon']}\n              aria-label={clearAriaLabel}\n            >\n              {platform === Platform.IOS ? <Icon16Clear /> : <Icon24Cancel />}\n            </IconButton>\n          )}\n        </div>\n      </div>\n      {platform === Platform.IOS && after && (\n        <Button\n          mode=\"tertiary\"\n          size=\"m\"\n          className={styles['Search__after']}\n          focusVisibleMode=\"inside\"\n          onClick={onCancel}\n          onFocus={setFocusedTrue}\n          onBlur={setFocusedFalse}\n        >\n          <span className={styles['Search__afterText']}>{after}</span>\n        </Button>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","before","Icon16SearchOutline","className","defaultValue","placeholder","after","getRef","icon","onIconClick","noop","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","useExternRef","useBooleanState","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","useEnsuredControl","useAdaptivity","sizeY","platform","usePlatform","onFocus","e","onBlur","onCancel","React","useCallback","Object","nativeInputValueSetter","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","classNames","SizeType","COMPACT","label","Headline","Component","type","level","weight","getRootRef","IconButton","hoverMode","onStart","aria-label","onClick","Platform","IOS","Icon16Clear","Icon24Cancel","Button","mode","size","focusVisibleMode","span"],"mappings":"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"}

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

@@ -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) => JSX.Element;
+export declare const SegmentedControl: ({ size, name, options, getRootRef, defaultValue, children, className, onChange: onChangeProp, value: valueProp, ...restProps }: SegmentedControlProps) => React.JSX.Element;

package/dist/cjs/components/SegmentedControl/SegmentedControl.js

@@ -8,13 +8,13 @@ Object.defineProperty(exports, "SegmentedControl", {
         return SegmentedControl;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useEnsuredControl = require("../../hooks/useEnsuredControl");
@@ -22,14 +22,14 @@ var _useId = require("../../hooks/useId");
 var _adaptivity = require("../../lib/adaptivity");
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 var _warnOnce = require("../../lib/warnOnce");
-var _segmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
+var _SegmentedControlOption = require("./SegmentedControlOption/SegmentedControlOption");
 var _options_;
-var sizeYClassNames = _defineProperty({
+var sizeYClassNames = _define_property._({
     none: "vkuiSegmentedControl--sizeY-none"
 }, _adaptivity.SizeType.REGULAR, "vkuiSegmentedControl--sizeY-regular");
 var warn = (0, _warnOnce.warnOnce)("SegmentedControl");
 var SegmentedControl = function(_param) {
-    var _param_size = _param.size, size = _param_size === void 0 ? "l" : _param_size, name = _param.name, options = _param.options, getRootRef = _param.getRootRef, _param_defaultValue = _param.defaultValue, defaultValue = _param_defaultValue === void 0 ? (_options_ = options[0]) === null || _options_ === void 0 ? void 0 : _options_.value : _param_defaultValue, children = _param.children, className = _param.className, onChangeProp = _param.onChange, valueProp = _param.value, restProps = _objectWithoutProperties(_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, [
         "size",
         "name",
         "options",
@@ -41,7 +41,7 @@ var SegmentedControl = function(_param) {
         "value"
     ]);
     var id = (0, _useId.useId)();
-    var _useCustomEnsuredControl = _slicedToArray((0, _useEnsuredControl.useCustomEnsuredControl)({
+    var _useCustomEnsuredControl = _sliced_to_array._((0, _useEnsuredControl.useCustomEnsuredControl)({
         onChange: onChangeProp,
         value: valueProp,
         defaultValue: defaultValue
@@ -58,7 +58,7 @@ var SegmentedControl = function(_param) {
         actualIndex
     ]);
     var translateX = "translateX(".concat(100 * actualIndex, "%)");
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiSegmentedControl", sizeY !== _adaptivity.SizeType.COMPACT && sizeYClassNames[sizeY], size === "l" && "vkuiSegmentedControl--size-l", className),
         ref: getRootRef
     }), /*#__PURE__*/ _react.createElement("div", {
@@ -73,11 +73,11 @@ var SegmentedControl = function(_param) {
             WebkitTransform: translateX
         }
     }), options.map(function(_param) /*#__PURE__*/ {
-        var label = _param.label, optionClassName = _param.className, optionProps = _objectWithoutProperties(_param, [
+        var label = _param.label, optionClassName = _param.className, optionProps = _object_without_properties._(_param, [
             "label",
             "className"
         ]);
-        return _react.createElement(_segmentedControlOption.SegmentedControlOption, _objectSpreadProps(_objectSpread({
+        return _react.createElement(_SegmentedControlOption.SegmentedControlOption, _object_spread_props._(_object_spread._({
             key: "".concat(optionProps.value)
         }, optionProps), {
             className: (0, _vkjs.classNames)("vkuiSegmentedControl__option", optionClassName),

package/dist/cjs/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":["SegmentedControl","options","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","div","classNames","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","SegmentedControlOption","key","checked"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;;2DAzCU;oBACI;6BACG;iCACU;qBAClB;0BACG;yCACiB;wBACjB;sCAEc;IAqCtBC;AAlCjB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAsBnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMP,mBAAmB,iBAWH;6BAV3BQ,MAAAA,gCAAO,mBACPC,cAAAA,MACAR,iBAAAA,SACAS,oBAAAA,yCACAC,cAAAA,gDAAeV,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,KAAAA,IAAAA,UAAYW,KAAK,wBAChCC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAR;QACAS;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKC,IAAAA,YAAK;IAEhB,IAA0BC,0CAAAA,IAAAA,0CAAuB,EAAC;QAChDN,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBS,6BAAZN,WAAYM;IAM1B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,cAAcvB,QAAQwB,SAAS,CAAC,SAACC;eAAWA,OAAOd,KAAK,KAAKA;;IAEnEe,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAChExB,KAAK,kDAAkD;QACzD,CAAC;IACH,GAAG;QAACkB;KAAY;IAEhB,IAAMO,aAAa,AAAC,cAA+B,OAAlB,MAAMP,aAAY;IAEnD,qBACE,qBAACQ,4CACKd;QACJJ,WAAWmB,IAAAA,gBAAU,0BAEnBV,UAAUnB,oBAAQ,CAAC8B,OAAO,IAAIhC,eAAe,CAACqB,MAAM,EACpDf,SAAS,uCACTM;QAEFqB,KAAKzB;sBAEL,qBAACsB;QAAII,MAAK;QAAatB,SAAS;OAC7BU,cAAc,CAAC,mBACd,qBAACQ;QACCK,eAAAA,IAAW;QACXvB,SAAS;QACTwB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMtC,QAAQuC,MAAM,EAAC;YAC/BC,WAAWV;YACXW,iBAAiBX;QACnB;QAGH9B,QAAQ0C,GAAG,CAAC,+BACX;YADcC,eAAAA,OAAO9B,AAAW+B,yBAAX/B,WAA+BgC;YAAtCF;YAAO9B;;eACrB,qBAACiC,8CAAsB;YACrBC,KAAK,AAAC,GAAoB,OAAlBF,YAAYlC,KAAK;WACrBkC;YACJhC,WAAWmB,IAAAA,gBAAU,kCAAqCY;YAC1DpC,MAAMA,iBAAAA,kBAAAA,OAAQU,EAAE;YAChB8B,SAASrC,UAAUkC,YAAYlC,KAAK;YACpCG,UAAU;uBAAMA,SAAS+B,YAAYlC,KAAK;;YAEzCgC;IACqB;AAKlC"}
+{"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":["SegmentedControl","options","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","size","name","getRootRef","defaultValue","value","children","className","onChange","onChangeProp","valueProp","restProps","id","useId","useCustomEnsuredControl","useAdaptivity","sizeY","actualIndex","findIndex","option","useIsomorphicLayoutEffect","process","env","NODE_ENV","translateX","div","classNames","COMPACT","ref","role","aria-hidden","style","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps","SegmentedControlOption","key","checked"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;;+DAzCU;oBACI;6BACG;iCACU;qBAClB;0BACG;yCACiB;wBACjB;sCAEc;IAqCtBC;AAlCjB,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAsBZ,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMP,mBAAmB;6BAC9BQ,MAAAA,gCAAO,mBACPC,cAAAA,MACAR,iBAAAA,SACAS,oBAAAA,yCACAC,cAAAA,gDAAeV,CAAAA,YAAAA,OAAO,CAAC,EAAE,cAAVA,uBAAAA,KAAAA,IAAAA,UAAYW,6BAC3BC,kBAAAA,UACAC,mBAAAA,WACAC,AAAUC,sBAAVD,UACAH,AAAOK,mBAAPL,OACGM;QATHV;QACAC;QACAR;QACAS;QACAC;QACAE;QACAC;QACAC;QACAH;;IAGA,IAAMO,KAAKC,IAAAA;IAEX,IAA0BC,8CAAAA,IAAAA,4CAAwB;QAChDN,UAAUC;QACVJ,OAAOK;QACPN,cAAAA;IACF,QAJOC,QAAmBS,6BAAZN,WAAYM;IAM1B,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,cAAcvB,QAAQwB,UAAU,SAACC;eAAWA,OAAOd,UAAUA;;IAEnEe,IAAAA,sDAA0B;QACxB,IAAIH,gBAAgB,CAAC,KAAKI,QAAQC,IAAIC,aAAa,eAAe;YAChExB,KAAK,kDAAkD;QACzD;IACF,GAAG;QAACkB;KAAY;IAEhB,IAAMO,aAAa,AAAC,cAA+B,OAAlB,MAAMP,aAAY;IAEnD,qBACE,qBAACQ,mDACKd;QACJJ,WAAWmB,IAAAA,0CAETV,UAAUnB,qBAAS8B,WAAWhC,eAAe,CAACqB,MAAM,EACpDf,SAAS,uCACTM;QAEFqB,KAAKzB;sBAEL,qBAACsB;QAAII,MAAK;QAAatB,SAAS;OAC7BU,cAAc,CAAC,mBACd,qBAACQ;QACCK,eAAAA;QACAvB,SAAS;QACTwB,OAAO;YACLC,OAAO,AAAC,GAAuB,OAArB,MAAMtC,QAAQuC,QAAO;YAC/BC,WAAWV;YACXW,iBAAiBX;QACnB;QAGH9B,QAAQ0C,IAAI;YAAGC,eAAAA,OAAO9B,AAAW+B,yBAAX/B,WAA+BgC;YAAtCF;YAAO9B;;eACrB,qBAACiC;YACCC,KAAK,AAAC,GAAoB,OAAlBF,YAAYlC;WAChBkC;YACJhC,WAAWmB,IAAAA,kDAA+CY;YAC1DpC,MAAMA,iBAAAA,kBAAAA,OAAQU;YACd8B,SAASrC,UAAUkC,YAAYlC;YAC/BG,UAAU;uBAAMA,SAAS+B,YAAYlC;;YAEpCgC;IACqB;AAKlC"}

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

@@ -5,4 +5,4 @@ export interface SegmentedControlOptionProps extends React.InputHTMLAttributes<H
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */
-export declare const SegmentedControlOption: ({ getRef, className, style, children, ...restProps }: SegmentedControlOptionProps) => JSX.Element;
+export declare const SegmentedControlOption: ({ getRef, className, style, children, ...restProps }: SegmentedControlOptionProps) => React.JSX.Element;

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

@@ -8,24 +8,24 @@ Object.defineProperty(exports, "SegmentedControlOption", {
         return SegmentedControlOption;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../../hooks/useAdaptivity");
 var _useFocusVisible = require("../../../hooks/useFocusVisible");
 var _adaptivity = require("../../../lib/adaptivity");
 var _callMultiple = require("../../../lib/callMultiple");
-var _focusVisible = require("../../FocusVisible/FocusVisible");
-var _visuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
-var sizeYClassNames = _defineProperty({
+var _FocusVisible = require("../../FocusVisible/FocusVisible");
+var _VisuallyHidden = require("../../VisuallyHidden/VisuallyHidden");
+var sizeYClassNames = _define_property._({
     none: "vkuiSegmentedControlOption__content--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiSegmentedControlOption__content--sizeY-compact");
 var SegmentedControlOption = function(_param) {
-    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, restProps = _objectWithoutProperties(_param, [
+    var getRef = _param.getRef, className = _param.className, style = _param.style, children = _param.children, restProps = _object_without_properties._(_param, [
         "getRef",
         "className",
         "style",
@@ -36,7 +36,7 @@ var SegmentedControlOption = function(_param) {
     return /*#__PURE__*/ _react.createElement("label", {
         className: (0, _vkjs.classNames)("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", className),
         style: style
-    }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, _object_spread_props._(_object_spread._({}, restProps), {
         Component: "input",
         getRootRef: getRef,
         type: "radio",
@@ -44,7 +44,7 @@ var SegmentedControlOption = function(_param) {
         onFocus: (0, _callMultiple.callMultiple)(onFocus, restProps.onFocus)
     })), /*#__PURE__*/ _react.createElement("span", {
         className: (0, _vkjs.classNames)("vkuiSegmentedControlOption__content", sizeY !== _adaptivity.SizeType.REGULAR && sizeYClassNames[sizeY])
-    }, children), /*#__PURE__*/ _react.createElement(_focusVisible.FocusVisible, {
+    }, children), /*#__PURE__*/ _react.createElement(_FocusVisible.FocusVisible, {
         visible: focusVisible,
         mode: "inside"
     }));

package/dist/cjs/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 { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\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  const { sizeY = 'none' } = useAdaptivity();\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      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["SegmentedControlOption","sizeYClassNames","none","SizeType","COMPACT","getRef","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","label","classNames","checked","VisuallyHidden","Component","getRootRef","type","callMultiple","span","REGULAR","FocusVisible","visible","mode"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;2DAvBU;oBACI;6BACG;+BACE;0BACP;4BACI;4BAEA;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAUZ,IAAMJ,yBAAyB,iBAMH;QALjCK,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,gCAAe,KAAjDC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAC9B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCV,WAAWW,IAAAA,gBAAU,gCAEnBR,UAAUS,OAAO,2CACjBZ;QAEFC,OAAOA;qBAEP,qBAACY,8BAAc,uCACTV;QACJW,WAAU;QACVC,YAAYhB;QACZiB,MAAK;QACLV,QAAQW,IAAAA,0BAAY,EAACX,QAAQH,UAAUG,MAAM;QAC7CC,SAASU,IAAAA,0BAAY,EAACV,SAASJ,UAAUI,OAAO;uBAElD,qBAACW;QACClB,WAAWW,IAAAA,gBAAU,yCAEnBF,UAAUZ,oBAAQ,CAACsB,OAAO,IAAIxB,eAAe,CAACc,MAAM;OAGrDP,yBAEH,qBAACkB,0BAAY;QAACC,SAAShB;QAAciB,MAAK;;AAGhD"}
+{"version":3,"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { SizeType } from '../../../lib/adaptivity';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { HasRef } from '../../../types';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './SegmentedControlOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SegmentedControlOption__content--sizeY-none'],\n  [SizeType.COMPACT]: styles['SegmentedControlOption__content--sizeY-compact'],\n};\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  const { sizeY = 'none' } = useAdaptivity();\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      <span\n        className={classNames(\n          styles['SegmentedControlOption__content'],\n          sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        )}\n      >\n        {children}\n      </span>\n      <FocusVisible visible={focusVisible} mode=\"inside\" />\n    </label>\n  );\n};\n"],"names":["SegmentedControlOption","sizeYClassNames","none","SizeType","COMPACT","getRef","className","style","children","restProps","useFocusVisible","focusVisible","onBlur","onFocus","useAdaptivity","sizeY","label","classNames","checked","VisuallyHidden","Component","getRootRef","type","callMultiple","span","REGULAR","FocusVisible","visible","mode"],"mappings":";;;;+BAuBaA;;;eAAAA;;;;;;;;+DAvBU;oBACI;6BACG;+BACE;0BACP;4BACI;4BAEA;8BACE;AAG/B,IAAMC;IACJC,IAAI;GACHC,qBAASC;AAUL,IAAMJ,yBAAyB;QACpCK,gBAAAA,QACAC,mBAAAA,WACAC,eAAAA,OACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAA0CE,oBAAAA,IAAAA,qCAAlCC,eAAkCD,kBAAlCC,cAAcC,SAAoBF,kBAApBE,QAAQC,UAAYH,kBAAZG;IAC9B,IAA2BC,kBAAAA,IAAAA,wDAAAA,gBAAnBC,OAAAA,0CAAQ;IAEhB,qBACE,qBAACC;QACCV,WAAWW,IAAAA,gDAETR,UAAUS,kDACVZ;QAEFC,OAAOA;qBAEP,qBAACY,4EACKV;QACJW,WAAU;QACVC,YAAYhB;QACZiB,MAAK;QACLV,QAAQW,IAAAA,4BAAaX,QAAQH,UAAUG;QACvCC,SAASU,IAAAA,4BAAaV,SAASJ,UAAUI;uBAE3C,qBAACW;QACClB,WAAWW,IAAAA,yDAETF,UAAUZ,qBAASsB,WAAWxB,eAAe,CAACc,MAAM;OAGrDP,yBAEH,qBAACkB;QAAaC,SAAShB;QAAciB,MAAK;;AAGhD"}

package/dist/cjs/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SelectProps } from '../CustomSelect/CustomSelect';
 export type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */
-export declare const Select: ({ children, options, popupDirection, renderOption, allowClearButton, ClearButton, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ children, options, popupDirection, renderOption, allowClearButton, ClearButton, ...props }: SelectProps) => React.JSX.Element;