@vkontakte/vkui 5.6.0 → 5.6.1

package/dist/components.js.tmp

@@ -207,8 +207,10 @@ var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
         }
         setPortalRoot(portal);
         return function() {
-            var _portal_parentElement, _portal;
-            (_portal = portal) === null || _portal === void 0 ? void 0 : (_portal_parentElement = _portal.parentElement) === null || _portal_parentElement === void 0 ? void 0 : _portal_parentElement.removeChild(portal);
+            if (!portalRootProp) {
+                var _portal_parentElement, _portal;
+                (_portal = portal) === null || _portal === void 0 ? void 0 : (_portal_parentElement = _portal.parentElement) === null || _portal_parentElement === void 0 ? void 0 : _portal_parentElement.removeChild(portal);
+            }
         };
     }, [
         portalRootProp
@@ -8916,19 +8918,30 @@ function precisionRound(number) {
     var factor = Math.pow(10, precision);
     return Math.round(number * factor) / factor;
 }
-function precision(number) {
-    return ("".concat(number).split(".")[1] || "").length;
+/**
+ * Решение скопировано без изменений у MUI:
+ * https://github.com/mui/material-ui/blob/v5.13.7/packages/mui-base/src/useSlider/useSlider.ts#L89-L105
+ */ function getDecimalPrecision(num) {
+    // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+    // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+    if (Math.abs(num) < 1) {
+        var parts = num.toExponential().split("e-");
+        var matissaDecimalPart = parts[0].split(".")[1];
+        return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+    }
+    var decimalPart = num.toString().split(".")[1];
+    return decimalPart ? decimalPart.length : 0;
+}
+function roundValueToStep(value, step, min) {
+    var nearest = Math.round((value - min) / step) * step + min;
+    return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
 function decimatedClamp(val, min, max, step) {
     if (step == null || step <= 0) {
         return clamp(val, min, max);
     }
-    var prec = precision(step);
-    // Round value to nearest min + k1 * step
-    var decimatedOffset = precisionRound(Math.round((val - min) / step) * step, prec);
-    // Round range length _down_ to nearest min + k2 * step
-    var decimatedRange = precisionRound(Math.floor((max - min) / step) * step, prec);
-    return min + clamp(decimatedOffset, 0, decimatedRange);
+    var roundedValue = roundValueToStep(val, step, min);
+    return clamp(roundedValue, min, max);
 }
 function rescale(value, from, to) {
     var options = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};
@@ -58334,10 +58347,8 @@ function _unsupported_iterable_to_array(o, minLen) {
         var _inputRef_current;
         e.originalEvent.preventDefault();
         (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
-        onCancel();
     }, [
-        inputRef,
-        onCancel
+        inputRef
     ]);
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
         className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalSearch", "vkuiSearch", sizeY === "none" && "vkuiSearch--sizeY-none", sizeY === _lib_adaptivity__WEBPACK_IMPORTED_MODULE_9__.SizeType.COMPACT && "vkuiSearch--sizeY-compact", isFocused && "vkuiSearch--focused", value && "vkuiSearch--has-value", after && "vkuiSearch--has-after", icon && "vkuiSearch--has-icon", className),
@@ -61501,12 +61512,22 @@ var defaultScrollToRight = function(x) {
         };
     }
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalSubnavigationBar", mode === "fixed" && (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalSubnavigationBar--mode-fixed"), className)
+        className: (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)(// TODO: [>=6]
+        // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`
+        // и удалить применение селектора в `SubnavigationButton.module.css`.
+        // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`
+        // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')
+        mode === "fixed" && (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.classNames)("vkuiInternalSubnavigationBar--mode-fixed"), className)
     }), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(ScrollWrapper, _object_spread({
         className: "vkuiSubnavigationBar__in"
-    }, scrollWrapperProps), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+    }, scrollWrapperProps), /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("ul", {
         className: "vkuiSubnavigationBar__scrollIn"
-    }, children)));
+    }, react__WEBPACK_IMPORTED_MODULE_0__.Children.map(children, function(child, idx) {
+        return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement("li", {
+            key: idx,
+            className: "vkuiSubnavigationBar__item"
+        }, child);
+    }))));
 };
 
 
@@ -62523,7 +62544,7 @@ var sizeYClassNames = _define_property({
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */ var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, restProps = _object_without_properties(_param, [
+    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, bottomId = _param.bottomId, restProps = _object_without_properties(_param, [
         "children",
         "top",
         "bottom",
@@ -62534,7 +62555,8 @@ var sizeYClassNames = _define_property({
         "removePlaceholder",
         "getRootRef",
         "className",
-        "htmlFor"
+        "htmlFor",
+        "bottomId"
     ]);
     var rootEl = (0,_hooks_useExternRef__WEBPACK_IMPORTED_MODULE_4__.useExternRef)(getRootRef);
     var _useAdaptivity = (0,_hooks_useAdaptivity__WEBPACK_IMPORTED_MODULE_5__.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
@@ -62543,7 +62565,9 @@ var sizeYClassNames = _define_property({
         Component: htmlFor ? "label" : "h5",
         htmlFor: htmlFor
     }, top), children, (0,_vkontakte_vkjs__WEBPACK_IMPORTED_MODULE_1__.hasReactNode)(bottom) && /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(_Typography_Footnote_Footnote__WEBPACK_IMPORTED_MODULE_7__.Footnote, {
-        className: "vkuiFormItem__bottom"
+        className: "vkuiFormItem__bottom",
+        id: bottomId,
+        role: status === "error" ? "alert" : undefined
     }, bottom));
     return /*#__PURE__*/ react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component, _object_spread_props(_object_spread({}, restProps), {
         ref: rootEl,

package/dist/cssm/components/AppRoot/AppRoot.js

@@ -43,7 +43,9 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
         }
         setPortalRoot(portal);
         return ()=>{
-            portal?.parentElement?.removeChild(portal);
+            if (!portalRootProp) {
+                portal?.parentElement?.removeChild(portal);
+            }
         };
     }, [
         portalRootProp

package/dist/cssm/components/AppRoot/AppRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","styles","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","setPortalRoot","useState","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","IconSettingsProvider","classNames","noop","useAdaptivity","useAppearance","useInsets","useKeyboardInputTracker","SizeType","useDOM","isRefObject","useIsomorphicLayoutEffect","AppRootContext","ElementScrollController","GlobalScrollController","styles","vkuiSizeXClassNames","none","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","className","props","isKeyboardInputActive","rootRef","useRef","setPortalRoot","useState","document","insets","appearance","hasPointer","sizeX","portal","current","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","content","Provider","value","appRoot","embedded","keyboardInput","elRef","classPrefix","div","ref"],"mappings":"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"}

package/dist/cssm/components/FormItem/FormItem.d.ts

@@ -4,6 +4,12 @@ import { RemovableProps } from '../Removable/Removable';
 export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
     top?: React.ReactNode;
     bottom?: React.ReactNode;
+    /**
+     * Передаётся при использовании `bottom`.
+     *
+     * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.
+     */
+    bottomId?: string;
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
@@ -15,4 +21,4 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, ...restProps }: FormItemProps) => React.JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, bottomId, ...restProps }: FormItemProps) => React.JSX.Element;

package/dist/cssm/components/FormItem/FormItem.js

@@ -13,7 +13,7 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
- */ export const FormItem = ({ children, top, bottom, status = 'default', Component = 'div', removable, onRemove = noop, removePlaceholder = 'Удалить', getRootRef, className, htmlFor, ...restProps })=>{
+ */ export const FormItem = ({ children, top, bottom, status = 'default', Component = 'div', removable, onRemove = noop, removePlaceholder = 'Удалить', getRootRef, className, htmlFor, bottomId, ...restProps })=>{
     const rootEl = useExternRef(getRootRef);
     const { sizeY = 'none' } = useAdaptivity();
     const wrappedChildren = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(top) && /*#__PURE__*/ React.createElement(Subhead, {
@@ -21,7 +21,9 @@ const sizeYClassNames = {
         Component: htmlFor ? 'label' : 'h5',
         htmlFor: htmlFor
     }, top), children, hasReactNode(bottom) && /*#__PURE__*/ React.createElement(Footnote, {
-        className: styles['FormItem__bottom']
+        className: styles['FormItem__bottom'],
+        id: bottomId,
+        role: status === 'error' ? 'alert' : undefined
     }, bottom));
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,

package/dist/cssm/components/FormItem/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAkBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,YAAY,KAAK,EACjBC,SAAS,EACTC,WAAWlB,IAAI,EACfmB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,SAAS,EACTC,OAAO,EACP,GAAGC,WACW;IACd,MAAMC,SAAStB,aAAakB;IAC5B,MAAM,EAAEK,QAAQ,MAAM,EAAE,GAAGxB;IAE3B,MAAMyB,gCACJ,oBAAC7B,MAAM8B,QAAQ,QACZ5B,aAAac,sBACZ,oBAACP;QACCe,WAAWd,MAAM,CAAC,gBAAgB;QAClCS,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGO,SAAS;QACbK,KAAKJ;QACLH,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEc,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFuB,OAAOhC,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXU,UAAUtB,SAAS4B,OAAO,IAAIvB,eAAe,CAACiB,MAAM,EACpD1B,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC4B,OAAM;QACNd,UAAU,CAACe;YACT,IAAIT,QAAQU,SAAS;gBACnBhB,SAASe,GAAGT,OAAOU,OAAO;YAC5B;QACF;QACAf,mBAAmBA;QACnBgB,QAAQlB,cAAc;qBAEtB,oBAACmB;QACCf,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDmB,oBAILA;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  bottomId,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","htmlFor","bottomId","restProps","rootEl","sizeY","wrappedChildren","Fragment","id","role","undefined","ref","error","valid","REGULAR","align","e","current","indent","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAwBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,QAAQ,EACRC,GAAG,EACHC,MAAM,EACNC,SAAS,SAAS,EAClBC,YAAY,KAAK,EACjBC,SAAS,EACTC,WAAWlB,IAAI,EACfmB,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,EACR,GAAGC,WACW;IACd,MAAMC,SAASvB,aAAakB;IAC5B,MAAM,EAAEM,QAAQ,MAAM,EAAE,GAAGzB;IAE3B,MAAM0B,gCACJ,oBAAC9B,MAAM+B,QAAQ,QACZ7B,aAAac,sBACZ,oBAACP;QACCe,WAAWd,MAAM,CAAC,gBAAgB;QAClCS,WAAWM,UAAU,UAAU;QAC/BA,SAASA;OAERT,MAGJD,UACAb,aAAae,yBACZ,oBAACT;QACCgB,WAAWd,MAAM,CAAC,mBAAmB;QACrCsB,IAAIN;QACJO,MAAMf,WAAW,UAAU,UAAUgB;OAEpCjB;IAMT,qBACE,oBAACE;QACE,GAAGQ,SAAS;QACbQ,KAAKP;QACLJ,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEkB,OAAOnC,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEF2B,OAAOpC,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXW,UAAUvB,SAASgC,OAAO,IAAI3B,eAAe,CAACkB,MAAM,EACpD3B,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACCgC,OAAM;QACNlB,UAAU,CAACmB;YACT,IAAIZ,QAAQa,SAAS;gBACnBpB,SAASmB,GAAGZ,OAAOa,OAAO;YAC5B;QACF;QACAnB,mBAAmBA;QACnBoB,QAAQtB,cAAc;qBAEtB,oBAACuB;QACCnB,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDoB,oBAILA;AAIR,EAAE"}

package/dist/cssm/components/Search/Search.js

@@ -49,10 +49,8 @@ import styles from './Search.module.css';
     const onIconCancelClickStart = React.useCallback((e)=>{
         e.originalEvent.preventDefault();
         inputRef.current?.focus();
-        onCancel();
     }, [
-        inputRef,
-        onCancel
+        inputRef
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: classNames('vkuiInternalSearch', styles['Search'], sizeY === 'none' && styles['Search--sizeY-none'], sizeY === SizeType.COMPACT && styles['Search--sizeY-compact'], isFocused && styles['Search--focused'], value && styles['Search--has-value'], after && styles['Search--has-after'], icon && styles['Search--has-icon'], className),

package/dist/cssm/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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","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    },\n    [inputRef],\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":["React","Icon16Clear","Icon16SearchOutline","Icon24Cancel","classNames","noop","useAdaptivity","useBooleanState","useEnsuredControl","useExternRef","usePlatform","SizeType","Platform","Button","IconButton","Headline","styles","Search","before","className","defaultValue","placeholder","after","getRef","icon","onIconClick","style","autoComplete","onChange","onChangeProp","value","valueProp","iconAriaLabel","clearAriaLabel","inputProps","inputRef","isFocused","setTrue","setFocusedTrue","setFalse","setFocusedFalse","sizeY","platform","onFocus","e","onBlur","onCancel","useCallback","nativeInputValueSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","current","ev2","Event","bubbles","dispatchEvent","onIconClickStart","originalEvent","onIconCancelClickStart","preventDefault","focus","div","COMPACT","label","Component","type","level","weight","getRootRef","hoverMode","onStart","aria-label","onClick","IOS","mode","size","focusVisibleMode","span"],"mappings":"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"}

package/dist/cssm/components/Search/Search.module.css

@@ -70,6 +70,9 @@
   max-width: 100%;
   flex-grow: 1;
   min-width: 0;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch; /* автопрефиксер добавит фолбеки https://caniuse.com/mdn-css_properties_width_stretch */
   background-color: transparent;
   color: var(--vkui--color_text_primary);
 }

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js

@@ -22,13 +22,21 @@ const defaultScrollToRight = (x)=>x + 240;
     }
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        className: classNames('vkuiInternalSubnavigationBar', mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'), className)
+        className: classNames(// TODO: [>=6]
+        // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`
+        // и удалить применение селектора в `SubnavigationButton.module.css`.
+        // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`
+        // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')
+        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'), className)
     }, /*#__PURE__*/ React.createElement(ScrollWrapper, {
         className: styles['SubnavigationBar__in'],
         ...scrollWrapperProps
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("ul", {
         className: styles['SubnavigationBar__scrollIn']
-    }, children)));
+    }, React.Children.map(children, (child, idx)=>/*#__PURE__*/ React.createElement("li", {
+            key: idx,
+            className: styles['SubnavigationBar__item']
+        }, child)))));
 };
 
 //# sourceMappingURL=SubnavigationBar.js.map

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        'vkuiInternalSubnavigationBar',\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <div className={styles['SubnavigationBar__scrollIn']}>{children}</div>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["React","classNames","HorizontalScroll","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvBC,SAAS,EACT,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBP;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbD,WAAWb,WACT,gCACAO,SAAS,WAAWP,WAAW,6CAC/Ba;qBAGF,oBAACE;QAAcF,WAAWX,MAAM,CAAC,uBAAuB;QAAG,GAAGc,kBAAkB;qBAC9E,oBAACC;QAAIJ,WAAWX,MAAM,CAAC,6BAA6B;OAAGM;AAI/D,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  HorizontalScroll,\n  HorizontalScrollProps,\n  ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  mode?: 'fixed' | 'overflow';\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  mode = 'overflow',\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  className,\n  ...restProps\n}: SubnavigationBarProps) => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (mode === 'fixed') {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        // TODO: [>=6]\n        // Заменить у SubnavigationButton `display: inline-block` на `width: 100%`\n        // и удалить применение селектора в `SubnavigationButton.module.css`.\n        // 2. Заменить глобальный селектор на CSS Modules `styles['SubnavigationBar--mode-fixed']`\n        // mode !== 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed')\n        mode === 'fixed' && classNames('vkuiInternalSubnavigationBar--mode-fixed'),\n        className,\n      )}\n    >\n      <ScrollWrapper className={styles['SubnavigationBar__in']} {...scrollWrapperProps}>\n        <ul className={styles['SubnavigationBar__scrollIn']}>\n          {React.Children.map(children, (child, idx) => (\n            <li key={idx} className={styles['SubnavigationBar__item']}>\n              {child}\n            </li>\n          ))}\n        </ul>\n      </ScrollWrapper>\n    </div>\n  );\n};\n"],"names":["React","classNames","HorizontalScroll","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","mode","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","className","restProps","ScrollWrapper","scrollWrapperProps","div","ul","Children","map","child","idx","li","key"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,gBAAgB,QAGX,uCAAuC;AAC9C,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,OAAO,UAAU,EACjBC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvBC,SAAS,EACT,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIT,SAAS,SAAS;QACpBQ,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBP;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,oBAACK;QACE,GAAGH,SAAS;QACbD,WAAWb,WACT,cAAc;QACd,0EAA0E;QAC1E,qEAAqE;QACrE,0FAA0F;QAC1F,6EAA6E;QAC7EO,SAAS,WAAWP,WAAW,6CAC/Ba;qBAGF,oBAACE;QAAcF,WAAWX,MAAM,CAAC,uBAAuB;QAAG,GAAGc,kBAAkB;qBAC9E,oBAACE;QAAGL,WAAWX,MAAM,CAAC,6BAA6B;OAChDH,MAAMoB,QAAQ,CAACC,GAAG,CAACZ,UAAU,CAACa,OAAOC,oBACpC,oBAACC;YAAGC,KAAKF;YAAKT,WAAWX,MAAM,CAAC,yBAAyB;WACtDmB;AAOf,EAAE"}

package/dist/cssm/components/SubnavigationBar/SubnavigationBar.module.css

@@ -4,8 +4,8 @@
 }
 
 .SubnavigationBar__scrollIn {
-  padding-top: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
-  padding-bottom: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
+  margin: 0;
+  padding: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px) 0;
   display: flex;
 }
 
@@ -14,3 +14,22 @@
   content: '';
   min-width: var(--vkui--size_base_padding_horizontal--regular);
 }
+
+.SubnavigationBar__item {
+  list-style-type: none;
+  display: flex;
+}
+
+.SubnavigationBar__item + .SubnavigationBar__item {
+  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
+}
+
+/**
+ * CMP:
+ * SubnavigationBar
+ */
+
+:global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationBar__item {
+  flex: 1;
+  min-width: 0;
+}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.module.css

@@ -151,15 +151,6 @@
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_accent_themed);
 }
 
-/**
- * CMP:
- * SubnavigationBar
- */
-
-:global(.vkuiInternalSubnavigationBar) .SubnavigationButton + .SubnavigationButton {
-  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
-}
-
 :global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationButton {
   flex: 1;
   min-width: 0;

package/dist/cssm/components/Switch/Switch.module.css

@@ -1,4 +1,8 @@
 .Switch {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   position: relative;
   display: block;
   cursor: pointer;

package/dist/cssm/helpers/math.js

@@ -3,19 +3,30 @@ export function precisionRound(number, precision = 1) {
     let factor = Math.pow(10, precision);
     return Math.round(number * factor) / factor;
 }
-function precision(number) {
-    return (`${number}`.split('.')[1] || '').length;
+/**
+ * Решение скопировано без изменений у MUI:
+ * https://github.com/mui/material-ui/blob/v5.13.7/packages/mui-base/src/useSlider/useSlider.ts#L89-L105
+ */ function getDecimalPrecision(num) {
+    // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+    // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+    if (Math.abs(num) < 1) {
+        const parts = num.toExponential().split('e-');
+        const matissaDecimalPart = parts[0].split('.')[1];
+        return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+    }
+    const decimalPart = num.toString().split('.')[1];
+    return decimalPart ? decimalPart.length : 0;
+}
+function roundValueToStep(value, step, min) {
+    const nearest = Math.round((value - min) / step) * step + min;
+    return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
 function decimatedClamp(val, min, max, step) {
     if (step == null || step <= 0) {
         return clamp(val, min, max);
     }
-    const prec = precision(step);
-    // Round value to nearest min + k1 * step
-    const decimatedOffset = precisionRound(Math.round((val - min) / step) * step, prec);
-    // Round range length _down_ to nearest min + k2 * step
-    const decimatedRange = precisionRound(Math.floor((max - min) / step) * step, prec);
-    return min + clamp(decimatedOffset, 0, decimatedRange);
+    const roundedValue = roundValueToStep(val, step, min);
+    return clamp(roundedValue, min, max);
 }
 export function rescale(value, from, to, options = {}) {
     const scaled = (value - from[0]) / (from[1] - from[0]) * (to[1] - to[0]) + to[0];

package/dist/cssm/helpers/math.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/helpers/math.ts"],"sourcesContent":["export const clamp = (value: number, min: number, max: number) =>\n  Math.max(min, Math.min(value, max));\n\nexport function precisionRound(number: number, precision = 1) {\n  let factor = Math.pow(10, precision);\n  return Math.round(number * factor) / factor;\n}\n\nfunction precision(number: number) {\n  return (`${number}`.split('.')[1] || '').length;\n}\n\nfunction decimatedClamp(val: number, min: number, max: number, step?: number) {\n  if (step == null || step <= 0) {\n    return clamp(val, min, max);\n  }\n  const prec = precision(step);\n  // Round value to nearest min + k1 * step\n  const decimatedOffset = precisionRound(Math.round((val - min) / step) * step, prec);\n  // Round range length _down_ to nearest min + k2 * step\n  const decimatedRange = precisionRound(Math.floor((max - min) / step) * step, prec);\n  return min + clamp(decimatedOffset, 0, decimatedRange);\n}\n\nexport function rescale(\n  value: number,\n  from: [number, number],\n  to: [number, number],\n  options: { step?: number } = {},\n) {\n  const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];\n  return decimatedClamp(scaled, to[0], to[1], options.step);\n}\n"],"names":["clamp","value","min","max","Math","precisionRound","number","precision","factor","pow","round","split","length","decimatedClamp","val","step","prec","decimatedOffset","decimatedRange","floor","rescale","from","to","options","scaled"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,CAACC,OAAeC,KAAaC,MAChDC,KAAKD,GAAG,CAACD,KAAKE,KAAKF,GAAG,CAACD,OAAOE,MAAM;AAEtC,OAAO,SAASE,eAAeC,MAAc,EAAEC,YAAY,CAAC;IAC1D,IAAIC,SAASJ,KAAKK,GAAG,CAAC,IAAIF;IAC1B,OAAOH,KAAKM,KAAK,CAACJ,SAASE,UAAUA;AACvC;AAEA,SAASD,UAAUD,MAAc;IAC/B,OAAO,AAAC,CAAA,CAAC,EAAEA,OAAO,CAAC,CAACK,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,EAAGC,MAAM;AACjD;AAEA,SAASC,eAAeC,GAAW,EAAEZ,GAAW,EAAEC,GAAW,EAAEY,IAAa;IAC1E,IAAIA,QAAQ,QAAQA,QAAQ,GAAG;QAC7B,OAAOf,MAAMc,KAAKZ,KAAKC;IACzB;IACA,MAAMa,OAAOT,UAAUQ;IACvB,yCAAyC;IACzC,MAAME,kBAAkBZ,eAAeD,KAAKM,KAAK,CAAC,AAACI,CAAAA,MAAMZ,GAAE,IAAKa,QAAQA,MAAMC;IAC9E,uDAAuD;IACvD,MAAME,iBAAiBb,eAAeD,KAAKe,KAAK,CAAC,AAAChB,CAAAA,MAAMD,GAAE,IAAKa,QAAQA,MAAMC;IAC7E,OAAOd,MAAMF,MAAMiB,iBAAiB,GAAGC;AACzC;AAEA,OAAO,SAASE,QACdnB,KAAa,EACboB,IAAsB,EACtBC,EAAoB,EACpBC,UAA6B,CAAC,CAAC;IAE/B,MAAMC,SAAS,AAAEvB,CAAAA,QAAQoB,IAAI,CAAC,EAAE,AAAD,IAAMA,CAAAA,IAAI,CAAC,EAAE,GAAGA,IAAI,CAAC,EAAE,AAAD,IAAOC,CAAAA,EAAE,CAAC,EAAE,GAAGA,EAAE,CAAC,EAAE,AAAD,IAAKA,EAAE,CAAC,EAAE;IAClF,OAAOT,eAAeW,QAAQF,EAAE,CAAC,EAAE,EAAEA,EAAE,CAAC,EAAE,EAAEC,QAAQR,IAAI;AAC1D"}
+{"version":3,"sources":["../../../src/helpers/math.ts"],"sourcesContent":["export const clamp = (value: number, min: number, max: number) =>\n  Math.max(min, Math.min(value, max));\n\nexport function precisionRound(number: number, precision = 1) {\n  let factor = Math.pow(10, precision);\n  return Math.round(number * factor) / factor;\n}\n\n/**\n * Решение скопировано без изменений у MUI:\n * https://github.com/mui/material-ui/blob/v5.13.7/packages/mui-base/src/useSlider/useSlider.ts#L89-L105\n */\nfunction getDecimalPrecision(num: number) {\n  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.\n  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.\n  if (Math.abs(num) < 1) {\n    const parts = num.toExponential().split('e-');\n    const matissaDecimalPart = parts[0].split('.')[1];\n    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);\n  }\n\n  const decimalPart = num.toString().split('.')[1];\n  return decimalPart ? decimalPart.length : 0;\n}\n\nfunction roundValueToStep(value: number, step: number, min: number) {\n  const nearest = Math.round((value - min) / step) * step + min;\n  return Number(nearest.toFixed(getDecimalPrecision(step)));\n}\n\nfunction decimatedClamp(val: number, min: number, max: number, step?: number) {\n  if (step == null || step <= 0) {\n    return clamp(val, min, max);\n  }\n  const roundedValue = roundValueToStep(val, step, min);\n  return clamp(roundedValue, min, max);\n}\n\nexport function rescale(\n  value: number,\n  from: [number, number],\n  to: [number, number],\n  options: { step?: number } = {},\n) {\n  const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];\n  return decimatedClamp(scaled, to[0], to[1], options.step);\n}\n"],"names":["clamp","value","min","max","Math","precisionRound","number","precision","factor","pow","round","getDecimalPrecision","num","abs","parts","toExponential","split","matissaDecimalPart","length","parseInt","decimalPart","toString","roundValueToStep","step","nearest","Number","toFixed","decimatedClamp","val","roundedValue","rescale","from","to","options","scaled"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,CAACC,OAAeC,KAAaC,MAChDC,KAAKD,GAAG,CAACD,KAAKE,KAAKF,GAAG,CAACD,OAAOE,MAAM;AAEtC,OAAO,SAASE,eAAeC,MAAc,EAAEC,YAAY,CAAC;IAC1D,IAAIC,SAASJ,KAAKK,GAAG,CAAC,IAAIF;IAC1B,OAAOH,KAAKM,KAAK,CAACJ,SAASE,UAAUA;AACvC;AAEA;;;CAGC,GACD,SAASG,oBAAoBC,GAAW;IACtC,0FAA0F;IAC1F,kGAAkG;IAClG,IAAIR,KAAKS,GAAG,CAACD,OAAO,GAAG;QACrB,MAAME,QAAQF,IAAIG,aAAa,GAAGC,KAAK,CAAC;QACxC,MAAMC,qBAAqBH,KAAK,CAAC,EAAE,CAACE,KAAK,CAAC,IAAI,CAAC,EAAE;QACjD,OAAO,AAACC,CAAAA,qBAAqBA,mBAAmBC,MAAM,GAAG,CAAA,IAAKC,SAASL,KAAK,CAAC,EAAE,EAAE;IACnF;IAEA,MAAMM,cAAcR,IAAIS,QAAQ,GAAGL,KAAK,CAAC,IAAI,CAAC,EAAE;IAChD,OAAOI,cAAcA,YAAYF,MAAM,GAAG;AAC5C;AAEA,SAASI,iBAAiBrB,KAAa,EAAEsB,IAAY,EAAErB,GAAW;IAChE,MAAMsB,UAAUpB,KAAKM,KAAK,CAAC,AAACT,CAAAA,QAAQC,GAAE,IAAKqB,QAAQA,OAAOrB;IAC1D,OAAOuB,OAAOD,QAAQE,OAAO,CAACf,oBAAoBY;AACpD;AAEA,SAASI,eAAeC,GAAW,EAAE1B,GAAW,EAAEC,GAAW,EAAEoB,IAAa;IAC1E,IAAIA,QAAQ,QAAQA,QAAQ,GAAG;QAC7B,OAAOvB,MAAM4B,KAAK1B,KAAKC;IACzB;IACA,MAAM0B,eAAeP,iBAAiBM,KAAKL,MAAMrB;IACjD,OAAOF,MAAM6B,cAAc3B,KAAKC;AAClC;AAEA,OAAO,SAAS2B,QACd7B,KAAa,EACb8B,IAAsB,EACtBC,EAAoB,EACpBC,UAA6B,CAAC,CAAC;IAE/B,MAAMC,SAAS,AAAEjC,CAAAA,QAAQ8B,IAAI,CAAC,EAAE,AAAD,IAAMA,CAAAA,IAAI,CAAC,EAAE,GAAGA,IAAI,CAAC,EAAE,AAAD,IAAOC,CAAAA,EAAE,CAAC,EAAE,GAAGA,EAAE,CAAC,EAAE,AAAD,IAAKA,EAAE,CAAC,EAAE;IAClF,OAAOL,eAAeO,QAAQF,EAAE,CAAC,EAAE,EAAEA,EAAE,CAAC,EAAE,EAAEC,QAAQV,IAAI;AAC1D"}

package/dist/helpers/math.js

@@ -6,19 +6,30 @@ export function precisionRound(number) {
     var factor = Math.pow(10, precision);
     return Math.round(number * factor) / factor;
 }
-function precision(number) {
-    return ("".concat(number).split(".")[1] || "").length;
+/**
+ * Решение скопировано без изменений у MUI:
+ * https://github.com/mui/material-ui/blob/v5.13.7/packages/mui-base/src/useSlider/useSlider.ts#L89-L105
+ */ function getDecimalPrecision(num) {
+    // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+    // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+    if (Math.abs(num) < 1) {
+        var parts = num.toExponential().split("e-");
+        var matissaDecimalPart = parts[0].split(".")[1];
+        return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+    }
+    var decimalPart = num.toString().split(".")[1];
+    return decimalPart ? decimalPart.length : 0;
+}
+function roundValueToStep(value, step, min) {
+    var nearest = Math.round((value - min) / step) * step + min;
+    return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
 function decimatedClamp(val, min, max, step) {
     if (step == null || step <= 0) {
         return clamp(val, min, max);
     }
-    var prec = precision(step);
-    // Round value to nearest min + k1 * step
-    var decimatedOffset = precisionRound(Math.round((val - min) / step) * step, prec);
-    // Round range length _down_ to nearest min + k2 * step
-    var decimatedRange = precisionRound(Math.floor((max - min) / step) * step, prec);
-    return min + clamp(decimatedOffset, 0, decimatedRange);
+    var roundedValue = roundValueToStep(val, step, min);
+    return clamp(roundedValue, min, max);
 }
 export function rescale(value, from, to) {
     var options = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : {};

package/dist/helpers/math.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/helpers/math.ts"],"sourcesContent":["export const clamp = (value: number, min: number, max: number) =>\n  Math.max(min, Math.min(value, max));\n\nexport function precisionRound(number: number, precision = 1) {\n  let factor = Math.pow(10, precision);\n  return Math.round(number * factor) / factor;\n}\n\nfunction precision(number: number) {\n  return (`${number}`.split('.')[1] || '').length;\n}\n\nfunction decimatedClamp(val: number, min: number, max: number, step?: number) {\n  if (step == null || step <= 0) {\n    return clamp(val, min, max);\n  }\n  const prec = precision(step);\n  // Round value to nearest min + k1 * step\n  const decimatedOffset = precisionRound(Math.round((val - min) / step) * step, prec);\n  // Round range length _down_ to nearest min + k2 * step\n  const decimatedRange = precisionRound(Math.floor((max - min) / step) * step, prec);\n  return min + clamp(decimatedOffset, 0, decimatedRange);\n}\n\nexport function rescale(\n  value: number,\n  from: [number, number],\n  to: [number, number],\n  options: { step?: number } = {},\n) {\n  const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];\n  return decimatedClamp(scaled, to[0], to[1], options.step);\n}\n"],"names":["clamp","value","min","max","Math","precisionRound","number","precision","factor","pow","round","split","length","decimatedClamp","val","step","prec","decimatedOffset","decimatedRange","floor","rescale","from","to","options","scaled"],"mappings":"AAAA,OAAO,IAAMA,QAAQ,SAACC,OAAeC,KAAaC;WAChDC,KAAKD,GAAG,CAACD,KAAKE,KAAKF,GAAG,CAACD,OAAOE;EAAM;AAEtC,OAAO,SAASE,eAAeC,MAAc;QAAEC,YAAAA,iEAAY;IACzD,IAAIC,SAASJ,KAAKK,GAAG,CAAC,IAAIF;IAC1B,OAAOH,KAAKM,KAAK,CAACJ,SAASE,UAAUA;AACvC;AAEA,SAASD,UAAUD,MAAc;IAC/B,OAAO,AAAC,CAAA,AAAC,GAAS,OAAPA,QAASK,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAC,EAAGC,MAAM;AACjD;AAEA,SAASC,eAAeC,GAAW,EAAEZ,GAAW,EAAEC,GAAW,EAAEY,IAAa;IAC1E,IAAIA,QAAQ,QAAQA,QAAQ,GAAG;QAC7B,OAAOf,MAAMc,KAAKZ,KAAKC;IACzB;IACA,IAAMa,OAAOT,UAAUQ;IACvB,yCAAyC;IACzC,IAAME,kBAAkBZ,eAAeD,KAAKM,KAAK,CAAC,AAACI,CAAAA,MAAMZ,GAAE,IAAKa,QAAQA,MAAMC;IAC9E,uDAAuD;IACvD,IAAME,iBAAiBb,eAAeD,KAAKe,KAAK,CAAC,AAAChB,CAAAA,MAAMD,GAAE,IAAKa,QAAQA,MAAMC;IAC7E,OAAOd,MAAMF,MAAMiB,iBAAiB,GAAGC;AACzC;AAEA,OAAO,SAASE,QACdnB,KAAa,EACboB,IAAsB,EACtBC,EAAoB;QACpBC,UAAAA,iEAA6B,CAAC;IAE9B,IAAMC,SAAS,AAAEvB,CAAAA,QAAQoB,IAAI,CAAC,EAAE,AAAD,IAAMA,CAAAA,IAAI,CAAC,EAAE,GAAGA,IAAI,CAAC,EAAE,AAAD,IAAOC,CAAAA,EAAE,CAAC,EAAE,GAAGA,EAAE,CAAC,EAAE,AAAD,IAAKA,EAAE,CAAC,EAAE;IAClF,OAAOT,eAAeW,QAAQF,EAAE,CAAC,EAAE,EAAEA,EAAE,CAAC,EAAE,EAAEC,QAAQR,IAAI;AAC1D"}
+{"version":3,"sources":["../../src/helpers/math.ts"],"sourcesContent":["export const clamp = (value: number, min: number, max: number) =>\n  Math.max(min, Math.min(value, max));\n\nexport function precisionRound(number: number, precision = 1) {\n  let factor = Math.pow(10, precision);\n  return Math.round(number * factor) / factor;\n}\n\n/**\n * Решение скопировано без изменений у MUI:\n * https://github.com/mui/material-ui/blob/v5.13.7/packages/mui-base/src/useSlider/useSlider.ts#L89-L105\n */\nfunction getDecimalPrecision(num: number) {\n  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.\n  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.\n  if (Math.abs(num) < 1) {\n    const parts = num.toExponential().split('e-');\n    const matissaDecimalPart = parts[0].split('.')[1];\n    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);\n  }\n\n  const decimalPart = num.toString().split('.')[1];\n  return decimalPart ? decimalPart.length : 0;\n}\n\nfunction roundValueToStep(value: number, step: number, min: number) {\n  const nearest = Math.round((value - min) / step) * step + min;\n  return Number(nearest.toFixed(getDecimalPrecision(step)));\n}\n\nfunction decimatedClamp(val: number, min: number, max: number, step?: number) {\n  if (step == null || step <= 0) {\n    return clamp(val, min, max);\n  }\n  const roundedValue = roundValueToStep(val, step, min);\n  return clamp(roundedValue, min, max);\n}\n\nexport function rescale(\n  value: number,\n  from: [number, number],\n  to: [number, number],\n  options: { step?: number } = {},\n) {\n  const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];\n  return decimatedClamp(scaled, to[0], to[1], options.step);\n}\n"],"names":["clamp","value","min","max","Math","precisionRound","number","precision","factor","pow","round","getDecimalPrecision","num","abs","parts","toExponential","split","matissaDecimalPart","length","parseInt","decimalPart","toString","roundValueToStep","step","nearest","Number","toFixed","decimatedClamp","val","roundedValue","rescale","from","to","options","scaled"],"mappings":"AAAA,OAAO,IAAMA,QAAQ,SAACC,OAAeC,KAAaC;WAChDC,KAAKD,GAAG,CAACD,KAAKE,KAAKF,GAAG,CAACD,OAAOE;EAAM;AAEtC,OAAO,SAASE,eAAeC,MAAc;QAAEC,YAAAA,iEAAY;IACzD,IAAIC,SAASJ,KAAKK,GAAG,CAAC,IAAIF;IAC1B,OAAOH,KAAKM,KAAK,CAACJ,SAASE,UAAUA;AACvC;AAEA;;;CAGC,GACD,SAASG,oBAAoBC,GAAW;IACtC,0FAA0F;IAC1F,kGAAkG;IAClG,IAAIR,KAAKS,GAAG,CAACD,OAAO,GAAG;QACrB,IAAME,QAAQF,IAAIG,aAAa,GAAGC,KAAK,CAAC;QACxC,IAAMC,qBAAqBH,KAAK,CAAC,EAAE,CAACE,KAAK,CAAC,IAAI,CAAC,EAAE;QACjD,OAAO,AAACC,CAAAA,qBAAqBA,mBAAmBC,MAAM,GAAG,CAAA,IAAKC,SAASL,KAAK,CAAC,EAAE,EAAE;IACnF;IAEA,IAAMM,cAAcR,IAAIS,QAAQ,GAAGL,KAAK,CAAC,IAAI,CAAC,EAAE;IAChD,OAAOI,cAAcA,YAAYF,MAAM,GAAG;AAC5C;AAEA,SAASI,iBAAiBrB,KAAa,EAAEsB,IAAY,EAAErB,GAAW;IAChE,IAAMsB,UAAUpB,KAAKM,KAAK,CAAC,AAACT,CAAAA,QAAQC,GAAE,IAAKqB,QAAQA,OAAOrB;IAC1D,OAAOuB,OAAOD,QAAQE,OAAO,CAACf,oBAAoBY;AACpD;AAEA,SAASI,eAAeC,GAAW,EAAE1B,GAAW,EAAEC,GAAW,EAAEoB,IAAa;IAC1E,IAAIA,QAAQ,QAAQA,QAAQ,GAAG;QAC7B,OAAOvB,MAAM4B,KAAK1B,KAAKC;IACzB;IACA,IAAM0B,eAAeP,iBAAiBM,KAAKL,MAAMrB;IACjD,OAAOF,MAAM6B,cAAc3B,KAAKC;AAClC;AAEA,OAAO,SAAS2B,QACd7B,KAAa,EACb8B,IAAsB,EACtBC,EAAoB;QACpBC,UAAAA,iEAA6B,CAAC;IAE9B,IAAMC,SAAS,AAAEjC,CAAAA,QAAQ8B,IAAI,CAAC,EAAE,AAAD,IAAMA,CAAAA,IAAI,CAAC,EAAE,GAAGA,IAAI,CAAC,EAAE,AAAD,IAAOC,CAAAA,EAAE,CAAC,EAAE,GAAGA,EAAE,CAAC,EAAE,AAAD,IAAKA,EAAE,CAAC,EAAE;IAClF,OAAOL,eAAeO,QAAQF,EAAE,CAAC,EAAE,EAAEA,EAAE,CAAC,EAAE,EAAEC,QAAQV,IAAI;AAC1D"}