npm - @vkontakte/vkui - Versions diffs - 5.0.3 → 5.1.2 - Mend

@vkontakte/vkui 5.0.3 → 5.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2443) hide show

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js.map CHANGED Viewed

	@@ -1 +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~~;AAAC;~~AAOxD~~;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"}
1	+ {"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;AAAC;AAO7C;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/cssm/components/ScreenSpinner/ScreenSpinner.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiScreenSpinner{animation:vkui-screen-spinner-intro .3s ease}.vkuiScreenSpinner--state-cancelable{cursor:pointer}.vkuiScreenSpinner__spinner{opacity:1}.vkuiScreenSpinner--hideSpinner .vkuiScreenSpinner__spinner{opacity:0;transition:opacity .1s ease}.vkuiScreenSpinner__container{background:var(--vkui--color_background_modal);border-radius:var(--vkui--size_border_radius--regular);box-shadow:var(--vkui--elevation4);color:var(--vkui--color_icon_medium);height:88px;position:relative;width:88px}.vkuiScreenSpinner__icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.vkuiScreenSpinner__icon .vkuiIcon{animation:vkui-screen-spinner-intro .2s ease}.vkuiScreenSpinner--state-done .vkuiScreenSpinner__icon .vkuiIcon path{stroke-dasharray:50;stroke-dashoffset:50;animation:vkui-screen-spinner-iconDone .6s .3s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-screen-spinner-iconDone{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes vkui-screen-spinner-intro{0%{opacity:0}to{opacity:1}}
1	+ .vkuiScreenSpinner{animation:vkui-screen-spinner-intro .3s ease}.vkuiScreenSpinner--state-cancelable{cursor:pointer}.vkuiScreenSpinner__spinner{opacity:1}.vkuiScreenSpinner--hideSpinner .vkuiScreenSpinner__spinner{opacity:0;transition:opacity .1s ease}.vkuiScreenSpinner__container{background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);color:#818c99;color:var(--vkui--color_icon_medium);height:88px;position:relative;width:88px}.vkuiScreenSpinner__icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.vkuiScreenSpinner__icon .vkuiIcon{animation:vkui-screen-spinner-intro .2s ease}.vkuiScreenSpinner--state-done .vkuiScreenSpinner__icon .vkuiIcon path{stroke-dasharray:50;stroke-dashoffset:50;animation:vkui-screen-spinner-iconDone .6s cubic-bezier(.4,0,.2,1) .3s forwards;animation:vkui-screen-spinner-iconDone .6s .3s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-screen-spinner-iconDone{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes vkui-screen-spinner-intro{0%{opacity:0}to{opacity:1}}

package/dist/cssm/components/Search/Search.d.ts CHANGED Viewed

@@ -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/cssm/components/Search/Search.js CHANGED Viewed

@@ -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';
 import "./Search.module.css";
 var SearchPlaceholderTypography = function SearchPlaceholderTypography(_ref) {
   var children = _ref.children,
@@ -41,26 +40,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],
@@ -79,9 +82,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);
@@ -96,7 +99,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"
@@ -125,8 +128,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, {
@@ -134,9 +136,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/cssm/components/Search/Search.js.map CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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/cssm/components/Search/Search.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative~~;z-index:2~~}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100~~%;z-index:1~~}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s var(--vkui--animation_easing_platform)~~;z-index:2~~}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative~~;z-index:2~~}.vkuiSearch__after:after{border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}@media (~~max~~-width:~~767px~~) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:var(--vkui--color_search_field_background);color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:var(--vkui--color_background_content);color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:var(--vkui--color_search_field_background);color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:var(--vkui--color_header_background);color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:var(--vkui--color_header_background)}~~.vkuiSearch--ios{padding:8px 12px}~~
1	+ .vkuiSearch{-webkit-tap-highlight-color:transparent;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);font-weight:400;line-height:normal;overflow:hidden;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);transform:translateZ(0)}.vkuiSearch__in{position:relative}.vkuiSearch__width{color:transparent;white-space:nowrap;width:10000px}.vkuiSearch__control{align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:flex;height:100%;justify-content:flex-start;left:0;position:absolute;top:0;width:calc(100% - 1px)}.vkuiSearch__input{-webkit-appearance:none;background-color:initial;border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;flex-grow:1;font-family:inherit;font-size:17px;margin:0;max-width:100%;min-width:0;padding:0 22px 0 36px;position:relative}.vkuiSearch__input::-webkit-search-cancel-button,.vkuiSearch__input::-webkit-search-decoration,.vkuiSearch__input::-webkit-search-results-button,.vkuiSearch__input::-webkit-search-results-decoration{display:none}.vkuiSearch__input:focus{outline:none}.vkuiSearch--has-after .vkuiSearch__input{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiSearch--has-icon .vkuiSearch__input,.vkuiSearch--has-icon .vkuiSearch__placeholder,.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:40px}.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input,.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder{padding-right:80px}.vkuiSearch__after-width{cursor:text;flex-shrink:0;font-size:17px;padding-left:12px;padding-right:4px;pointer-events:none}.vkuiSearch__placeholder{box-sizing:border-box;cursor:text;display:flex;font-size:0;left:0;padding-left:12px;padding-right:22px;pointer-events:none;position:absolute;text-align:left;width:100%}.vkuiSearch__placeholder-in{align-items:center;display:flex;flex-grow:1;max-width:100%;overflow:hidden}.vkuiSearch__placeholder-text{color:#818c99;color:var(--vkui--color_text_secondary);margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSearch--has-value .vkuiSearch__placeholder-text{opacity:0}.vkuiSearch__icons{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:absolute;right:100%;top:0}.vkuiSearch__icon,.vkuiSearch__icons{align-items:center;display:flex;justify-content:center}.vkuiSearch__icon{cursor:pointer;width:40px}.vkuiSearch__after{cursor:default;left:100%;position:absolute;top:0;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1);transition:transform .3s var(--vkui--animation_easing_platform)}.vkuiSearch--focused .vkuiSearch__after,.vkuiSearch--has-value .vkuiSearch__after{transform:translate(-100%)}.vkuiSearch__after:before{content:"";display:block;height:100%;pointer-events:none;position:absolute;right:calc(100% - 1px);width:10px}.vkuiSearch__after-in{cursor:pointer;font-size:17px;padding-left:12px;padding-right:4px;position:relative}.vkuiSearch__after:after{border-radius:0 8px 8px 0;border-radius:0 var(--vkui--size_border_radius--regular) var(--vkui--size_border_radius--regular) 0;content:"";cursor:text;display:block;height:100%;pointer-events:none;position:absolute;right:100%;top:0;width:10px}.vkuiGroup--mode-plain .vkuiSearch{padding-top:4px}.vkuiSearch__after-width,.vkuiSearch__icon,.vkuiSearch__input,.vkuiSearch__placeholder,.vkuiSearch__placeholder-in,.vkuiSearch__width{height:32px;height:var(--vkui--size_search_height--compact)}.vkuiSearch__after,.vkuiSearch__after-width{line-height:32px;line-height:var(--vkui--size_search_height--compact)}.vkuiSearch--sizeY-regular .vkuiSearch__after-width,.vkuiSearch--sizeY-regular .vkuiSearch__icon,.vkuiSearch--sizeY-regular .vkuiSearch__input,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder,.vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-regular .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-regular .vkuiSearch__after,.vkuiSearch--sizeY-regular .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSearch--sizeY-none .vkuiSearch__after-width,.vkuiSearch--sizeY-none .vkuiSearch__icon,.vkuiSearch--sizeY-none .vkuiSearch__input,.vkuiSearch--sizeY-none .vkuiSearch__placeholder,.vkuiSearch--sizeY-none .vkuiSearch__placeholder-in,.vkuiSearch--sizeY-none .vkuiSearch__width{height:36px;height:var(--vkui--size_search_height--regular)}.vkuiSearch--sizeY-none .vkuiSearch__after,.vkuiSearch--sizeY-none .vkuiSearch__after-width{line-height:36px;line-height:var(--vkui--size_search_height--regular)}}.vkuiSearch{background:#fff;background:var(--vkui--color_background_content)}.vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__in:hover .vkuiSearch__after-width,.vkuiSearch__in:hover .vkuiSearch__after:after,.vkuiSearch__in:hover .vkuiSearch__control{background-color:#e2e4e9;background-color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:hover .vkuiSearch__after-width{color:#e2e4e9;color:var(--vkui--color_search_field_background--hover)}.vkuiSearch__in:active .vkuiSearch__after-width,.vkuiSearch__in:active .vkuiSearch__after:after,.vkuiSearch__in:active .vkuiSearch__control{background-color:#d8dbe2;background-color:var(--vkui--color_search_field_background--active)}.vkuiSearch__in:active .vkuiSearch__after-width{color:#d8dbe2;color:var(--vkui--color_search_field_background--active)}.vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiSearch__placeholder{color:#818c99;color:var(--vkui--color_icon_medium)}.vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiSearch__after{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_background_content)}.vkuiPanelHeader .vkuiSearch{background:#fff;background:var(--vkui--color_header_background)}.vkuiPanelHeader .vkuiSearch__control{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__input{color:#000;color:var(--vkui--color_text_primary)}.vkuiPanelHeader .vkuiSearch__placeholder{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiPanelHeader .vkuiSearch__after-width{background:#ebedf0;background:var(--vkui--color_search_field_background);color:#ebedf0;color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after{background:#fff;background:var(--vkui--color_header_background);color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiPanelHeader .vkuiSearch__after:after{background-color:#ebedf0;background-color:var(--vkui--color_search_field_background)}.vkuiPanelHeader .vkuiSearch__after:before{background-color:#fff;background-color:var(--vkui--color_header_background)}

package/dist/cssm/components/SegmentedControl/SegmentedControl.d.ts CHANGED Viewed

@@ -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;

package/dist/cssm/components/SegmentedControl/SegmentedControl.js CHANGED Viewed

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "name", "options", "getRootRef", "onChange", "value", "defaultValue", "children", "className"],
+var _excluded = ["size", "name", "options", "getRootRef", "defaultValue", "children", "className", "onChange", "value"],
   _excluded2 = ["label", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { noop } from "../../lib/utils";
-import { useId } from "../../hooks/useId";
-import { warnOnce } from "../../lib/warnOnce";
-import { SegmentedControlOption } from "./SegmentedControlOption/SegmentedControlOption";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { useId } from '../../hooks/useId';
+import { warnOnce } from '../../lib/warnOnce';
+import { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import "./SegmentedControl.module.css";
-var warn = warnOnce("SegmentedControl");
+var warn = warnOnce('SegmentedControl');
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
@@ -21,59 +21,50 @@ var warn = warnOnce("SegmentedControl");
 export var SegmentedControl = function SegmentedControl(_ref) {
   var _options$;
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? "l" : _ref$size,
+    size = _ref$size === void 0 ? 'l' : _ref$size,
     name = _ref.name,
     options = _ref.options,
     getRootRef = _ref.getRootRef,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-    valueProp = _ref.value,
-    defaultValue = _ref.defaultValue,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value : _ref$defaultValue,
     children = _ref.children,
     className = _ref.className,
+    onChangeProp = _ref.onChange,
+    valueProp = _ref.value,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var id = useId();
+  var _useCustomEnsuredCont = useCustomEnsuredControl({
+      onChange: onChangeProp,
+      value: valueProp,
+      defaultValue: defaultValue
+    }),
+    _useCustomEnsuredCont2 = _slicedToArray(_useCustomEnsuredCont, 2),
+    value = _useCustomEnsuredCont2[0],
+    _onChange = _useCustomEnsuredCont2[1];
   var _useAdaptivity = useAdaptivity(),
     sizeY = _useAdaptivity.sizeY;
-  var initialValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
-  if (process.env.NODE_ENV === "development") {
-    if (valueProp !== undefined && defaultValue !== undefined) {
-      warn("SegmentedControl должен быть либо управляемым, либо неуправляемым" + "(укажите либо свойство value, либо свойство defaultValue, но не оба).", "error");
-    }
-  }
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeOptionIdx = _React$useState2[0],
     updateActiveOptionIdx = _React$useState2[1];
-  var _React$useState3 = React.useState(initialValue),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    valueLocal = _React$useState4[0],
-    updateValueLocal = _React$useState4[1];
-  var value = valueProp !== null && valueProp !== void 0 ? valueProp : valueLocal;
   useIsomorphicLayoutEffect(function () {
     var _activeOptionIdx = options.findIndex(function (option) {
       return option.value === value;
     });
-    if (_activeOptionIdx === -1 && process.env.NODE_ENV === "development") {
-      warn("defaultValue: такого значения нет среди опций!", "error");
+    if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {
+      warn('defaultValue: такого значения нет среди опций!', 'error');
     }
     updateActiveOptionIdx(_activeOptionIdx);
   }, [value, options]);
   var translateX = "translateX(".concat(100 * activeOptionIdx, "%)");
-  var handleOnChange = function handleOnChange(value) {
-    if (valueProp === undefined) {
-      updateValueLocal(value);
-    }
-    onChange(value);
-  };
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    className: classNamesString("vkuiSegmentedControl", getSizeYClassName("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
+    className: classNames("vkuiSegmentedControl", getSizeYClassName("vkuiSegmentedControl", sizeY), styles["SegmentedControl--size-".concat(size)], className),
     ref: getRootRef
   }), /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
     className: "vkuiSegmentedControl__in"
   }, activeOptionIdx > -1 && /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": "true",
+    "aria-hidden": true,
     className: "vkuiSegmentedControl__slider",
     style: {
       width: "".concat(100 / options.length, "%"),
@@ -87,11 +78,11 @@ export var SegmentedControl = function SegmentedControl(_ref) {
     return /*#__PURE__*/React.createElement(SegmentedControlOption, _extends({
       key: "".concat(optionProps.value)
     }, optionProps, {
-      className: classNamesString("vkuiSegmentedControl__option", optionClassName),
+      className: classNames("vkuiSegmentedControl__option", optionClassName),
       name: name !== null && name !== void 0 ? name : id,
       checked: value === optionProps.value,
       onChange: function onChange() {
-        return handleOnChange(optionProps.value);
+        return _onChange(optionProps.value);
       }
     }), label);
   })));

package/dist/cssm/components/SegmentedControl/SegmentedControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControl.js","names":["React","~~classNamesString~~","useIsomorphicLayoutEffect","~~noop","~~useId","warnOnce","SegmentedControlOption","useAdaptivity","getSizeYClassName","warn","SegmentedControl","size","name","options","getRootRef","~~onChange~~","~~valueProp","~~value","~~defaultValue","~~children","className","~~restProps~~","id","~~sizeY~~","~~initialValue~~","~~process~~","~~env~~","~~NODE_ENV","undefined","~~useState","activeOptionIdx","updateActiveOptionIdx","~~valueLocal~~","~~updateValueLocal~~","~~_activeOptionIdx~~","~~findIndex~~","~~option~~","~~translateX~~","~~handleOnChange~~","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ~~classNamesString~~ } from ~~\"../../lib~~/~~classNames\"~~;\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { ~~noop } from \"../../lib/utils\";\nimport {~~ useId } from \"../../hooks/useId\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { SegmentedControlOption } from \"./SegmentedControlOption/SegmentedControlOption\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControl.module.css\";\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 ~~onChange~~ = ~~noop~~,\n ~~value: valueProp~~,\n ~~defaultValue~~,\n ~~children~~,\n ~~className~~,\n ...restProps\n}: SegmentedControlProps) => {\n const id = useId();\n\n const { ~~sizeY~~ } = ~~useAdaptivity~~(~~);\n const initialValue = defaultValue ?? options[0]?.value;\n~~\n if ~~(process.env.NODE_ENV === \"development\") {\~~n if (valueProp ~~!== undefined &&~~ defaultValue ~~!== undefined~~) {\n ~~warn(~~\n ~~\"SegmentedControl~~ ~~должен~~ ~~быть~~ ~~либо~~ ~~управляемым,~~ ~~либо неуправляемым\" +\n \"~~(~~укажите либо свойство value, либо свойство defaultValue, но не оба~~)~~.\",\n \"error\"\n )~~;\n }\n ~~}\n\n~~ const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n ~~const [valueLocal, updateValueLocal] =\n React.useState<SegmentedControlValue>(initialValue);\n~~\n ~~const value = valueProp ?? valueLocal;\n\n~~ useIsomorphicLayoutEffect(() => {\n const _activeOptionIdx = options.findIndex(\n (option) => option.value === value\n );\n\n if (_activeOptionIdx === -1 && process.env.NODE_ENV === \"development\") {\n warn(\"defaultValue: такого значения нет среди ~~опций!\"~~, \"error\");\n }\n\n updateActiveOptionIdx(_activeOptionIdx);\n }, [value, options]);\n\n const translateX = `translateX(${100 activeOptionIdx}%)`;\n\n ~~const handleOnChange = (value: SegmentedControlValue) => {\n if (valueProp === undefined) {\n updateValueLocal(value);\n }\n onChange(value);\n };\n\n~~ return (\n <div\n {...restProps}\n className={~~classNamesString~~(\n styles[\"SegmentedControl\"],\n getSizeYClassName(styles[\"SegmentedControl\"], sizeY),\n styles[`SegmentedControl--size-${size}`],\n className\n )}\n ref={getRootRef}\n >\n <div role=\"radiogroup\" className={styles[\"SegmentedControl__in\"]}>\n {activeOptionIdx > -1 && (\n <div\n aria-hidden~~=\"true~~\"\n className={styles[\"SegmentedControl__slider\"]}\n style={{\n width: `${100 / options.length}%`,\n transform: translateX,\n WebkitTransform: translateX,\n }}\n />\n )}\n {options.map(\n ({ label, className: optionClassName, ...optionProps }) => (\n <SegmentedControlOption\n key={`${optionProps.value}`}\n {...optionProps}\n className={~~classNamesString~~(\n styles[\"SegmentedControl__option\"]~~,\n~~ optionClassName\n )}\n name={name ?? id}\n checked={value === optionProps.value}\n onChange={() => ~~handleOnChange~~(optionProps.value)}\n >\n {label}\n </SegmentedControlOption>\n ~~)\n~~ )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,~~gBAAgB~~,QAAQ,~~sBAAsB~~;~~AACvD~~,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,~~IAAI,QAAQ,iBAAiB;AACtC,SAASC,~~KAAK,QAAQ,mBAAmB;AACzC,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,sBAAsB,QAAQ,iDAAiD;AAExF,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AAAC;~~AAsBpE~~,IAAMC,IAAI,~~GAAGJ~~,QAAQ,CAAC,kBAAkB,CAAC;;AAEzC;AACA;AACA;AACA,OAAO,~~IAAMK~~,gBAAgB,GAAG,SAAnBA,gBAAgB,OAWA;EAAA;EAAA,qBAV3BC,IAAI;IAAJA,IAAI,0BAAG,GAAG;IACVC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IAAA,~~qBACVC~~,~~QAAQ~~;~~IAARA~~,~~QAAQ~~,~~8BAAGZ~~,~~IAAI;IACRa~~,~~SAAS~~,~~QAAhBC~~,~~KAAK;IACLC~~,~~YAAY~~,~~QAAZA,YAAY~~;~~IACZC~~,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;~~IACNC~~,SAAS;EAEZ,IAAMC,EAAE,~~GAAGlB~~,KAAK,EAAE;EAElB,~~qBAAkBG~~,~~aAAa~~,~~EAAE~~;~~IAAzBgB~~,~~KAAK~~,~~kBAALA~~,~~KAAK~~;~~EACb~~,~~IAAMC~~,~~YAAY~~,~~GAAGN~~,YAAY,~~aAAZA~~,~~YAAY,cAAZA,YAAY,gBAAIL,OAAO,~~CAAC,CAAC,~~CAAC,8CAAV,UAAYI,~~KAAK;~~EAEtD~~,~~IAAIQ~~,~~OAAO~~,~~CAACC,GAAG,CAACC,QAAQ,KAAK,~~aAAa,EAAE;~~IAC1C~~,~~IAAIX~~,~~SAAS~~,~~KAAKY,SAAS,IAAIV,YAAY,KAAKU,SAAS,EAAE~~;~~MACzDnB~~,~~IAAI~~,~~CACF,mEAAmE,GACjE,uEAAuE,EACzE,OAAO,CACR;IACH;EACF;EAEA,sBAAiDT,~~KAAK,~~CAAC6B~~,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAnEC,eAAe;IAAEC,qBAAqB;~~EAC7C~~,~~uBACE/B,KAAK,CAAC6B,QAAQ,CAAwBL,YAAY,CAAC;IAAA;IAD9CQ,UAAU;IAAEC,gBAAgB;EAGnC,IAAMhB,KAAK,GAAGD,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIgB,UAAU;EAErC9B,~~yBAAyB,CAAC,YAAM;IAC9B,~~IAAMgC~~,gBAAgB,~~GAAGrB~~,OAAO,~~CAACsB~~,SAAS,~~CACxC~~,UAACC,MAAM;MAAA,OAAKA,MAAM,~~CAACnB~~,KAAK,KAAKA,KAAK;IAAA,~~EACnC~~;~~IAED~~,~~IAAIiB~~,gBAAgB,KAAK,CAAC,CAAC,~~IAAIT~~,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;~~MACrElB~~,IAAI,CAAC,gDAAgD,EAAE,OAAO,CAAC;IACjE;~~IAEAsB~~,qBAAqB,~~CAACG~~,gBAAgB,CAAC;EACzC,CAAC,EAAE,~~CAACjB~~,KAAK,~~EAAEJ~~,OAAO,CAAC,CAAC;EAEpB,~~IAAMwB~~,UAAU,wBAAiB,GAAG,~~GAAGP~~,eAAe,OAAI;EAE1D,~~IAAMQ,cAAc,GAAG,SAAjBA,cAAc,CAAIrB,KAA4B,EAAK;IACvD,IAAID,SAAS,KAAKY,SAAS,EAAE;MAC3BK,gBAAgB,CAAChB,KAAK,CAAC;IACzB;IACAF,QAAQ,CAACE,KAAK,CAAC;EACjB,CAAC;EAED,~~oBACE,~~wCACMI~~,SAAS;IACb,SAAS,~~EAAEpB~~,~~gBAAgB~~,~~yBAEzBO~~,iBAAiB,~~yBAA6Be~~,KAAK,CAAC,~~EACpDgB~~,MAAM,~~kCAA2B5B~~,IAAI,EAAG,~~EACxCS~~,SAAS,CACT;IACF,GAAG,~~EAAEN~~;EAAW,iBAEhB;IAAK,IAAI,EAAC,YAAY;IAAC,SAAS;EAAiC,~~GAC9DgB~~,eAAe,GAAG,CAAC,CAAC,iBACnB;IACE,~~eAAY,MAAM~~;~~IAClB~~,SAAS,gCAAqC;IAC9C,KAAK,EAAE;MACLU,KAAK,YAAK,GAAG,~~GAAG3B~~,OAAO,~~CAAC4B~~,MAAM,MAAG;MACjCC,SAAS,~~EAAEL~~,UAAU;~~MACrBM~~,eAAe,~~EAAEN~~;IACnB;EAAE,EAEL,~~EACAxB~~,OAAO,~~CAAC+B~~,GAAG,~~CACV~~;IAAA,IAAGC,KAAK,SAALA,KAAK;MAAaC,eAAe,~~SAA1B1B~~,SAAS;~~MAAsB2B~~,WAAW;IAAA,~~oBAClD~~,oBAAC,sBAAsB;MACrB,GAAG,YAAKA,WAAW,~~CAAC9B~~,KAAK;IAAG,~~GACxB8B~~,WAAW;MACf,SAAS,~~EAAE9C~~,~~gBAAgB~~,~~iCAEzB6C~~,eAAe,~~CACf~~;~~MACF~~,IAAI,~~EAAElC~~,IAAI,aAAJA,IAAI,cAAJA,IAAI,~~GAAIU~~,EAAG;MACjB,OAAO,~~EAAEL~~,KAAK,~~KAAK8B~~,WAAW,~~CAAC9B~~,KAAM;MACrC,QAAQ,EAAE;QAAA,~~OAAMqB~~,~~cAAc~~,~~CAACS~~,WAAW,~~CAAC9B~~,KAAK,CAAC;MAAA;IAAC,~~IAEjD4B~~,KAAK,CACiB;EAAA,CAC1B,~~CACF~~,~~CACG~~,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;AAAA"}
1	+ {"version":3,"file":"SegmentedControl.js","names":["React","classNames","useIsomorphicLayoutEffect","useId","warnOnce","SegmentedControlOption","useAdaptivity","getSizeYClassName","useCustomEnsuredControl","warn","SegmentedControl","size","name","options","getRootRef","defaultValue","value","children","className","onChangeProp","onChange","valueProp","restProps","id","sizeY","useState","activeOptionIdx","updateActiveOptionIdx","_activeOptionIdx","findIndex","option","process","env","NODE_ENV","translateX","styles","width","length","transform","WebkitTransform","map","label","optionClassName","optionProps"],"sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useId } from '../../hooks/useId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SegmentedControlOption } from './SegmentedControlOption/SegmentedControlOption';\nimport { HasRootRef } from '../../types';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport styles from './SegmentedControl.module.css';\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 } = useAdaptivity();\n\n const [activeOptionIdx, updateActiveOptionIdx] = React.useState<number>(0);\n\n useIsomorphicLayoutEffect(() => {\n const _activeOptionIdx = options.findIndex((option) => option.value === value);\n\n if (_activeOptionIdx === -1 && process.env.NODE_ENV === 'development') {\n warn('defaultValue: такого значения нет среди опций!', 'error');\n }\n\n updateActiveOptionIdx(_activeOptionIdx);\n }, [value, options]);\n\n const translateX = `translateX(${100 activeOptionIdx}%)`;\n\n return (\n <div\n {...restProps}\n className={classNames(\n styles['SegmentedControl'],\n getSizeYClassName(styles['SegmentedControl'], sizeY),\n styles[`SegmentedControl--size-${size}`],\n className,\n )}\n ref={getRootRef}\n >\n <div role=\"radiogroup\" className={styles['SegmentedControl__in']}>\n {activeOptionIdx > -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"],"mappings":"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"}

package/dist/cssm/components/SegmentedControl/SegmentedControl.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSegmentedControl{background-color:var(--vkui--color_background_secondary);border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative~~;z-index:1~~}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (~~max~~-width:~~767px~~) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}
1	+ .vkuiSegmentedControl{background-color:#f5f5f5;background-color:var(--vkui--color_background_secondary);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;font-family:VK Sans Text,-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);height:30px;padding:2px}.vkuiSegmentedControl--size-l{height:36px}.vkuiSegmentedControl__in{border-radius:inherit;display:flex;height:100%;position:relative;transition:all .1s ease-out;width:100%}.vkuiSegmentedControl__slider{background-color:#fff;background-color:var(--vkui--color_segmented_control);border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);box-shadow:inset 0 0 0 .5px var(--vkui--color_image_border_alpha),0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);left:0;position:absolute;top:0;transform-origin:0 0;transition:transform .15s}.vkuiSegmentedControl__option{display:block;flex:1;margin:0;padding:0;position:relative}.vkuiSegmentedControl--sizeY-regular{height:36px}.vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--size-l{height:44px}@media (not (min-width:768px)) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkuiSegmentedControl--sizeY-none{height:36px}.vkuiSegmentedControl--sizeY-none.vkuiSegmentedControl--size-l{height:44px}}

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { VisuallyHiddenInputProps } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
+import { VisuallyHiddenInputProps } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
  */

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "style", "children"];
-import * as React from "react";
-import { useAdaptivity } from "../../../hooks/useAdaptivity";
-import { useFocusVisible } from "../../../hooks/useFocusVisible";
-import { callMultiple } from "../../../lib/callMultiple";
-import { classNamesString } from "../../../lib/classNames";
-import { FocusVisible } from "../../FocusVisible/FocusVisible";
-import { VisuallyHiddenInput } from "../../VisuallyHiddenInput/VisuallyHiddenInput";
-import { getSizeYClassName } from "../../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
+import { useFocusVisible } from '../../../hooks/useFocusVisible';
+import { callMultiple } from '../../../lib/callMultiple';
+import { classNames } from '@vkontakte/vkjs';
+import { FocusVisible } from '../../FocusVisible/FocusVisible';
+import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
+import { getSizeYClassName } from '../../../helpers/getSizeYClassName';
 import "./SegmentedControlOption.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/SegmentedControl
@@ -25,14 +25,14 @@ export var SegmentedControlOption = function SegmentedControlOption(_ref) {
   var _useAdaptivity = useAdaptivity(),
     sizeY = _useAdaptivity.sizeY;
   return /*#__PURE__*/React.createElement("label", {
-    className: classNamesString("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
+    className: classNames("vkuiSegmentedControlOption", restProps.checked && "vkuiSegmentedControlOption--checked", focusVisible && "vkuiSegmentedControlOption--focus-visible", className),
     style: style
   }, /*#__PURE__*/React.createElement(VisuallyHiddenInput, _extends({}, restProps, {
     type: "radio",
     onBlur: callMultiple(onBlur, restProps.onBlur),
     onFocus: callMultiple(onFocus, restProps.onFocus)
   })), /*#__PURE__*/React.createElement("span", {
-    className: classNamesString("vkuiSegmentedControlOption__content", getSizeYClassName("vkuiSegmentedControlOption__content", sizeY))
+    className: classNames("vkuiSegmentedControlOption__content", getSizeYClassName("vkuiSegmentedControlOption__content", sizeY))
   }, children), /*#__PURE__*/React.createElement(FocusVisible, {
     mode: "inside"
   }));

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SegmentedControlOption.js","names":["React","useAdaptivity","useFocusVisible","callMultiple","~~classNamesString~~","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAdaptivity } from \"../../../hooks/useAdaptivity\";\nimport { useFocusVisible } from \"../../../hooks/useFocusVisible\";\nimport { callMultiple } from \"../../../lib/callMultiple\";\nimport { ~~classNamesString~~ } from ~~\"../../../lib~~/~~classNames\"~~;\nimport { FocusVisible } from \"../../FocusVisible/FocusVisible\";\nimport {\n VisuallyHiddenInput,\n VisuallyHiddenInputProps,\n} from \"../../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { getSizeYClassName } from \"../../../helpers/getSizeYClassName\";\nimport styles from \"./SegmentedControlOption.module.css\";\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n className,\n style,\n children,\n ...restProps\n}: VisuallyHiddenInputProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeY } = useAdaptivity();\n\n return (\n <label\n className={~~classNamesString~~(\n styles[\"SegmentedControlOption\"],\n restProps.checked && styles[\"SegmentedControlOption--checked\"],\n focusVisible && styles[\"SegmentedControlOption--focus-visible\"],\n className\n )}\n style={style}\n >\n <VisuallyHiddenInput\n {...restProps}\n type=\"radio\"\n onBlur={callMultiple(onBlur, restProps.onBlur)}\n onFocus={callMultiple(onFocus, restProps.onFocus)}\n />\n <span\n className={~~classNamesString~~(\n styles[\"SegmentedControlOption__content\"],\n getSizeYClassName(styles[\"SegmentedControlOption__content\"], sizeY)\n )}\n >\n {children}\n </span>\n <FocusVisible mode=\"inside\" />\n </label>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,~~gBAAgB~~,QAAQ,~~yBAAyB~~;~~AAC1D~~,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SACEC,mBAAmB,QAEd,+CAA+C;AACtD,SAASC,iBAAiB,QAAQ,oCAAoC;AAAC;AAGvE;AACA;AACA;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0CV,eAAe,EAAE;IAAnDW,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkBd,aAAa,EAAE;IAAzBe,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAEZ,~~gBAAgB~~,+~~BAEzBQ~~,SAAS,CAACK,OAAO,yCAA6C,EAC9DJ,YAAY,+CAAmD,EAC/DJ,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB,eACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAET,YAAY,CAACW,MAAM,EAAEF,SAAS,CAACE,MAAM,CAAE;IAC/C,OAAO,EAAEX,YAAY,CAACY,OAAO,EAAEH,SAAS,CAACG,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAEX,~~gBAAgB~~,~~wCAEzBG~~,iBAAiB,wCAA4CS,KAAK,CAAC;EACnE,GAEDL,QAAQ,CACJ,eACP,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC"}
1	+ {"version":3,"file":"SegmentedControlOption.js","names":["React","useAdaptivity","useFocusVisible","callMultiple","classNames","FocusVisible","VisuallyHiddenInput","getSizeYClassName","SegmentedControlOption","className","style","children","restProps","focusVisible","onBlur","onFocus","sizeY","checked"],"sources":["../../../../../src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { classNames } from '@vkontakte/vkjs';\nimport { FocusVisible } from '../../FocusVisible/FocusVisible';\nimport {\n VisuallyHiddenInput,\n VisuallyHiddenInputProps,\n} from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { getSizeYClassName } from '../../../helpers/getSizeYClassName';\nimport styles from './SegmentedControlOption.module.css';\n\n/*\n @see https://vkcom.github.io/VKUI/#/SegmentedControl\n */\nexport const SegmentedControlOption = ({\n className,\n style,\n children,\n ...restProps\n}: VisuallyHiddenInputProps) => {\n const { focusVisible, onBlur, onFocus } = useFocusVisible();\n const { sizeY } = useAdaptivity();\n\n return (\n <label\n className={classNames(\n styles['SegmentedControlOption'],\n restProps.checked && styles['SegmentedControlOption--checked'],\n focusVisible && styles['SegmentedControlOption--focus-visible'],\n className,\n )}\n style={style}\n >\n <VisuallyHiddenInput\n {...restProps}\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 getSizeYClassName(styles['SegmentedControlOption__content'], sizeY),\n )}\n >\n {children}\n </span>\n <FocusVisible mode=\"inside\" />\n </label>\n );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SACEC,mBAAmB,QAEd,+CAA+C;AACtD,SAASC,iBAAiB,QAAQ,oCAAoC;AAAC;AAGvE;AACA;AACA;AACA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,OAKH;EAAA,IAJ9BC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,uBAA0CV,eAAe,EAAE;IAAnDW,YAAY,oBAAZA,YAAY;IAAEC,MAAM,oBAANA,MAAM;IAAEC,OAAO,oBAAPA,OAAO;EACrC,qBAAkBd,aAAa,EAAE;IAAzBe,KAAK,kBAALA,KAAK;EAEb,oBACE;IACE,SAAS,EAAEZ,UAAU,+BAEnBQ,SAAS,CAACK,OAAO,yCAA6C,EAC9DJ,YAAY,+CAAmD,EAC/DJ,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB,eACdE,SAAS;IACb,IAAI,EAAC,OAAO;IACZ,MAAM,EAAET,YAAY,CAACW,MAAM,EAAEF,SAAS,CAACE,MAAM,CAAE;IAC/C,OAAO,EAAEX,YAAY,CAACY,OAAO,EAAEH,SAAS,CAACG,OAAO;EAAE,GAClD,eACF;IACE,SAAS,EAAEX,UAAU,wCAEnBG,iBAAiB,wCAA4CS,KAAK,CAAC;EACnE,GAEDL,QAAQ,CACJ,eACP,oBAAC,YAAY;IAAC,IAAI,EAAC;EAAQ,EAAG,CACxB;AAEZ,CAAC"}

package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.module.css CHANGED Viewed

	@@ -1 +1 @@
1	- .vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:var(--vkui--color_text_primary);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:var(--vkui--color_icon_primary)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;font-size:var(--vkui--font_text--font_size--regular);font-weight:var(--vkui--font_weight_accent2);height:100%;justify-content:center;line-height:var(--vkui--font_text--line_height--regular);width:100%}.vkuiSegmentedControlOption__content--sizeY-compact.vkuiSegmentedControlOption__content{font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_footnote--line_height--regular)}@media (~~max-height:414px),(~~pointer:fine) and (min-width:768px){.vkuiSegmentedControlOption__content--sizeY-none.vkuiSegmentedControlOption__content{font-size:var(--vkui--font_footnote--font_size--regular);font-weight:var(--vkui--font_weight_accent3);line-height:var(--vkui--font_footnote--line_height--regular)}}
1	+ .vkuiSegmentedControlOption{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:inherit;box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);cursor:pointer;height:100%;transition:color .1s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSegmentedControlOption .vkuiIcon{color:#2c2d2e;color:var(--vkui--color_icon_primary)}.vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover{opacity:.5}.vkuiSegmentedControlOption__content{align-content:center;align-items:center;border-radius:inherit;display:flex;font-size:16px;font-size:var(--vkui--font_text--font_size--regular);font-weight:500;font-weight:var(--vkui--font_weight_accent2);height:100%;justify-content:center;line-height:20px;line-height:var(--vkui--font_text--line_height--regular);width:100%}.vkuiSegmentedControlOption__content--sizeY-compact.vkuiSegmentedControlOption__content{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}@media (pointer:fine) and (min-width:768px),not (min-height:415px){.vkuiSegmentedControlOption__content--sizeY-none.vkuiSegmentedControlOption__content{font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);font-weight:400;font-weight:var(--vkui--font_weight_accent3);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular)}}

package/dist/cssm/components/Select/Select.d.ts CHANGED Viewed

@@ -1,10 +1,6 @@
-import * as React from "react";
-import { SelectProps } from "../CustomSelect/CustomSelect";
-export declare type SelectType = "default" | "plain" | "accent";
-/**
- * @see https://vkcom.github.io/VKUI/#/SelectTypography
- */
-export declare const SelectTypography: ({ selectType, children, className, ...restProps }: React.PropsWithChildren<Pick<SelectProps, "selectType" | "className">>) => JSX.Element;
+/// <reference types="react" />
+import { SelectProps } from '../CustomSelect/CustomSelect';
+export declare type SelectType = 'default' | 'plain' | 'accent';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */