@alfalab/core-components 46.0.0-beta.5 → 46.0.0-beta.7

package/amount-input/@alfalab/core-components-shared/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@alfalab/core-components-shared",
+    "version": "0.9.1",
+    "description": "Shared package for core-components",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0"
+    },
+    "dependencies": {
+        "@alfalab/hooks": "^1.13.0",
+        "tslib": "^2.4.0"
+    },
+    "devDependencies": {
+        "@maskito/core": "^1.7.0"
+    }
+}

package/amount-input/Component.js

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsInput = require('../input');
+var coreComponentsShared = require('../shared');
 var coreComponentsWithSuffix = require('../with-suffix');
 var utils = require('@alfalab/utils');
 var utils_index = require('./utils/index.js');
@@ -35,7 +36,7 @@ var SuffixInput = coreComponentsWithSuffix.withSuffix(coreComponentsInput.Input)
  */
 var AmountInput = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? utils_index.getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? 1024 : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor"]);
+    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? utils_index.getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? coreComponentsShared.getComponentBreakpoint() : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor"]);
     var integerLength = Math.min(integerLengthProp, 15);
     var getFormattedAmount = React.useCallback(function (val) {
         if (val === '' || val === null || val === '-')

package/amount-input/cssm/Component.js

@@ -4,6 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsInput = require('../../input/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 var coreComponentsWithSuffix = require('../../with-suffix/cssm');
 var utils = require('@alfalab/utils');
 var utils_index = require('./utils/index.js');
@@ -32,7 +33,7 @@ var SuffixInput = coreComponentsWithSuffix.withSuffix(coreComponentsInput.Input)
  */
 var AmountInput = React.forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? utils_index.getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? 1024 : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor"]);
+    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? utils_index.getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? coreComponentsShared.getComponentBreakpoint() : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, restProps = tslib.__rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor"]);
     var integerLength = Math.min(integerLengthProp, 15);
     var getFormattedAmount = React.useCallback(function (val) {
         if (val === '' || val === null || val === '-')

package/amount-input/esm/Component.js

@@ -2,6 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useCallback, useState, useEffect, Fragment } from 'react';
 import cn from 'classnames';
 import { Input } from '../../input/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { withSuffix } from '../../with-suffix/esm';
 import { formatAmount, THINSP } from '@alfalab/utils';
 import { getCurrencyCodeWithFormat, getAmountValueFromStr, getFormattedValue } from './utils/index.js';
@@ -28,7 +29,7 @@ var SuffixInput = withSuffix(Input);
  */
 var AmountInput = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? 1024 : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, restProps = __rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor"]);
+    var _d = _a.view, view = _d === void 0 ? 'default' : _d, _e = _a.value, value = _e === void 0 ? null : _e, _f = _a.integerLength, integerLengthProp = _f === void 0 ? 9 : _f, _g = _a.minority, minority = _g === void 0 ? 100 : _g, _h = _a.currency, currency = _h === void 0 ? 'RUR' : _h, _j = _a.suffix, suffix = _j === void 0 ? currency : _j, _k = _a.codeFormat, codeFormat = _k === void 0 ? 'symbolic' : _k, _l = _a.placeholder, placeholder = _l === void 0 ? "0\u2009".concat(suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix) : _l, _m = _a.integersOnly, integersOnly = _m === void 0 ? false : _m, _o = _a.positiveOnly, positiveOnly = _o === void 0 ? true : _o, _p = _a.bold, bold = _p === void 0 ? true : _p, _q = _a.colors, colors = _q === void 0 ? 'default' : _q, className = _a.className, focusedClassName = _a.focusedClassName, dataTestId = _a.dataTestId, _r = _a.clear, clear = _r === void 0 ? false : _r, onChange = _a.onChange, onClear = _a.onClear, onBlur = _a.onBlur, _s = _a.breakpoint, breakpoint = _s === void 0 ? getComponentBreakpoint() : _s, onKeyDown = _a.onKeyDown, _t = _a.transparentMinor, transparentMinor = _t === void 0 ? true : _t, restProps = __rest(_a, ["view", "value", "integerLength", "minority", "currency", "suffix", "codeFormat", "placeholder", "integersOnly", "positiveOnly", "bold", "colors", "className", "focusedClassName", "dataTestId", "clear", "onChange", "onClear", "onBlur", "breakpoint", "onKeyDown", "transparentMinor"]);
     var integerLength = Math.min(integerLengthProp, 15);
     var getFormattedAmount = useCallback(function (val) {
         if (val === '' || val === null || val === '-')

package/amount-input/esm/index.js

@@ -3,6 +3,7 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../../input/esm';
+import '../../shared/esm';
 import '../../with-suffix/esm';
 import '@alfalab/utils';
 import './utils/index.js';

package/amount-input/modern/Component.js

@@ -1,6 +1,7 @@
 import React, { forwardRef, useCallback, useState, useEffect, Fragment } from 'react';
 import cn from 'classnames';
 import { Input } from '../../input/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { withSuffix } from '../../with-suffix/modern';
 import { formatAmount, THINSP } from '@alfalab/utils';
 import { getCurrencyCodeWithFormat, getAmountValueFromStr, getFormattedValue } from './utils/index.js';
@@ -25,7 +26,7 @@ const SuffixInput = withSuffix(Input);
 /**
  * Компонент для ввода денежных значений
  */
-const AmountInput = forwardRef(({ view = 'default', value = null, integerLength: integerLengthProp = 9, minority = 100, currency = 'RUR', suffix = currency, codeFormat = 'symbolic', placeholder = `0\u2009${suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, onBlur, breakpoint = 1024, onKeyDown, transparentMinor = true, ...restProps }, ref) => {
+const AmountInput = forwardRef(({ view = 'default', value = null, integerLength: integerLengthProp = 9, minority = 100, currency = 'RUR', suffix = currency, codeFormat = 'symbolic', placeholder = `0\u2009${suffix === currency ? getCurrencyCodeWithFormat(currency, codeFormat) || '' : suffix}`, integersOnly = false, positiveOnly = true, bold = true, colors = 'default', className, focusedClassName, dataTestId, clear = false, onChange, onClear, onBlur, breakpoint = getComponentBreakpoint(), onKeyDown, transparentMinor = true, ...restProps }, ref) => {
     const integerLength = Math.min(integerLengthProp, 15);
     const getFormattedAmount = useCallback((val) => {
         if (val === '' || val === null || val === '-')

package/amount-input/modern/index.js

@@ -2,6 +2,7 @@ export { AmountInput } from './Component.js';
 import 'react';
 import 'classnames';
 import '../../input/modern';
+import '../../shared/modern';
 import '../../with-suffix/modern';
 import '@alfalab/utils';
 import './utils/index.js';

package/bottom-sheet/component.js

@@ -30,7 +30,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
     var fullHeight = reactDiv100vh.use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
-    var initialIndexRef = React.useRef(initialActiveAreaIndex);
     var magneticAreas = React.useMemo(function () {
         var _a;
         if (magneticAreasProp) {
@@ -105,10 +104,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var scrollToArea = function (idx) {
-        if (isFirstRender) {
-            initialIndexRef.current = idx;
-            return;
-        }
         stopSwiping(null);
         var nextArea = magneticAreas[idx];
         var nextAreaIdx = getActiveAreaIndex(nextArea);
@@ -272,7 +267,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         delta: swipeThreshold,
     });
     var handleExited = function (node) {
-        var idx = initialIndexRef.current;
+        var idx = initialActiveAreaIndex;
         setBackdropOpacity(1);
         setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
         setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
@@ -282,8 +277,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var handleEnter = function (node, isAppearing) {
-        var _a;
-        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize((_a = initialIndexRef.current) !== null && _a !== void 0 ? _a : magneticAreas.length - 1);
+        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
         if (transitionProps.onEnter) {
             transitionProps.onEnter(node, isAppearing);
         }
@@ -308,7 +302,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         if (!isFirstRender) {
             // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (activeAreaIdx === -1) {
-                var idx = initialIndexRef.current;
+                var idx = initialActiveAreaIndex;
                 setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
                 setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
             }

package/bottom-sheet/cssm/component.js

@@ -29,7 +29,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
     var fullHeight = reactDiv100vh.use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
-    var initialIndexRef = React.useRef(initialActiveAreaIndex);
     var magneticAreas = React.useMemo(function () {
         var _a;
         if (magneticAreasProp) {
@@ -104,10 +103,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var scrollToArea = function (idx) {
-        if (isFirstRender) {
-            initialIndexRef.current = idx;
-            return;
-        }
         stopSwiping(null);
         var nextArea = magneticAreas[idx];
         var nextAreaIdx = getActiveAreaIndex(nextArea);
@@ -271,7 +266,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         delta: swipeThreshold,
     });
     var handleExited = function (node) {
-        var idx = initialIndexRef.current;
+        var idx = initialActiveAreaIndex;
         setBackdropOpacity(1);
         setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
         setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
@@ -281,8 +276,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         }
     };
     var handleEnter = function (node, isAppearing) {
-        var _a;
-        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize((_a = initialIndexRef.current) !== null && _a !== void 0 ? _a : magneticAreas.length - 1);
+        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
         if (transitionProps.onEnter) {
             transitionProps.onEnter(node, isAppearing);
         }
@@ -307,7 +301,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
         if (!isFirstRender) {
             // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (activeAreaIdx === -1) {
-                var idx = initialIndexRef.current;
+                var idx = initialActiveAreaIndex;
                 setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
                 setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
             }

package/bottom-sheet/esm/component.js

@@ -1,5 +1,5 @@
 import { __assign } from 'tslib';
-import React, { forwardRef, useRef, useMemo, useState, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useMemo, useState, useRef, useEffect, useImperativeHandle } from 'react';
 import { use100vh } from 'react-div-100vh';
 import mergeRefs from 'react-merge-refs';
 import { useSwipeable } from 'react-swipeable';
@@ -25,7 +25,6 @@ var BottomSheet = forwardRef(function (_a, ref) {
     var fullHeight = use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     var isFirstRender = fullHeight === 0;
-    var initialIndexRef = useRef(initialActiveAreaIndex);
     var magneticAreas = useMemo(function () {
         var _a;
         if (magneticAreasProp) {
@@ -100,10 +99,6 @@ var BottomSheet = forwardRef(function (_a, ref) {
         }
     };
     var scrollToArea = function (idx) {
-        if (isFirstRender) {
-            initialIndexRef.current = idx;
-            return;
-        }
         stopSwiping(null);
         var nextArea = magneticAreas[idx];
         var nextAreaIdx = getActiveAreaIndex(nextArea);
@@ -267,7 +262,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
         delta: swipeThreshold,
     });
     var handleExited = function (node) {
-        var idx = initialIndexRef.current;
+        var idx = initialActiveAreaIndex;
         setBackdropOpacity(1);
         setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
         setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
@@ -277,8 +272,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
         }
     };
     var handleEnter = function (node, isAppearing) {
-        var _a;
-        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize((_a = initialIndexRef.current) !== null && _a !== void 0 ? _a : magneticAreas.length - 1);
+        onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
         if (transitionProps.onEnter) {
             transitionProps.onEnter(node, isAppearing);
         }
@@ -303,7 +297,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
         if (!isFirstRender) {
             // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (activeAreaIdx === -1) {
-                var idx = initialIndexRef.current;
+                var idx = initialActiveAreaIndex;
                 setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
                 setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
             }

package/bottom-sheet/modern/component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useMemo, useState, useEffect, useImperativeHandle } from 'react';
+import React, { forwardRef, useMemo, useState, useRef, useEffect, useImperativeHandle } from 'react';
 import { use100vh } from 'react-div-100vh';
 import mergeRefs from 'react-merge-refs';
 import { useSwipeable } from 'react-swipeable';
@@ -22,7 +22,6 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
     const fullHeight = use100vh() || 0;
     // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
     const isFirstRender = fullHeight === 0;
-    const initialIndexRef = useRef(initialActiveAreaIndex);
     const magneticAreas = useMemo(() => {
         if (magneticAreasProp) {
             return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight, headerOffset));
@@ -117,10 +116,6 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         }
     };
     const scrollToArea = (idx) => {
-        if (isFirstRender) {
-            initialIndexRef.current = idx;
-            return;
-        }
         stopSwiping(null);
         const nextArea = magneticAreas[idx];
         const nextAreaIdx = getActiveAreaIndex(nextArea);
@@ -280,7 +275,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         delta: swipeThreshold,
     });
     const handleExited = (node) => {
-        const idx = initialIndexRef.current;
+        const idx = initialActiveAreaIndex;
         setBackdropOpacity(1);
         setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
         setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
@@ -290,7 +285,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         }
     };
     const handleEnter = (node, isAppearing) => {
-        onMagnetize?.(initialIndexRef.current ?? magneticAreas.length - 1);
+        onMagnetize?.(initialActiveAreaIndex ?? magneticAreas.length - 1);
         if (transitionProps.onEnter) {
             transitionProps.onEnter(node, isAppearing);
         }
@@ -315,7 +310,7 @@ const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundC
         if (!isFirstRender) {
             // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (activeAreaIdx === -1) {
-                const idx = initialIndexRef.current;
+                const idx = initialActiveAreaIndex;
                 setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
                 setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
             }

package/button/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
+var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Button = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.ButtonDesktop : mobile_Component_mobile.ButtonMobile;

package/button/cssm/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Button = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.ButtonDesktop : mobile_Component_mobile.ButtonMobile;

package/button/esm/Component.responsive.js

@@ -1,17 +1,17 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { ButtonDesktop } from './desktop/Component.desktop.js';
 import { ButtonMobile } from './mobile/Component.mobile.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../shared/esm';
 import '../../spinner/esm';
 import '@alfalab/hooks';
 
 var Button = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? ButtonDesktop : ButtonMobile;

package/button/esm/index.js

@@ -2,11 +2,11 @@ export { Button } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../shared/esm';
 import '../../spinner/esm';
 import '@alfalab/hooks';
 import './mobile/Component.mobile.js';

package/button/modern/Component.responsive.js

@@ -1,15 +1,15 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { ButtonDesktop } from './desktop/Component.desktop.js';
 import { ButtonMobile } from './mobile/Component.mobile.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../shared/modern';
 import '../../spinner/modern';
 import '@alfalab/hooks';
 
-const Button = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
+const Button = forwardRef(({ children, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? ButtonDesktop : ButtonMobile;

package/button/modern/index.js

@@ -1,11 +1,11 @@
 export { Button } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '../../shared/modern';
 import '../../spinner/modern';
 import '@alfalab/hooks';
 import './mobile/Component.mobile.js';

package/calendar/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
+var coreComponentsShared = require('../shared');
 var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });

package/calendar/cssm/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../mq/cssm');
+var coreComponentsShared = require('../../shared/cssm');
 var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var CalendarResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(components_calendarMobile_Component.CalendarMobile, tslib.__assign({}, restProps, { ref: ref })));
 });

package/calendar/esm/Component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
 import { CalendarDesktop } from './desktop/Component.desktop.js';
 import 'react-merge-refs';
@@ -13,7 +14,6 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
-import '../../shared/esm';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -70,7 +70,7 @@ import './components/years-table/Component.js';
 import 'date-fns/isThisYear';
 
 var CalendarResponsive = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"))[0];
     return isDesktop ? (React.createElement(CalendarDesktop, __assign({}, restProps, { ref: ref }))) : (React.createElement(CalendarMobile, __assign({}, restProps, { ref: ref })));
 });

package/calendar/esm/index.js

@@ -2,6 +2,7 @@ export { CalendarResponsive as Calendar } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './components/calendar-mobile/Component.js';
 import 'react-merge-refs';
 import 'react-virtuoso';
@@ -13,7 +14,6 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/esm/mobile';
 import '../../modal/esm/mobile';
-import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';

package/calendar/modern/Component.responsive.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { CalendarMobile } from './components/calendar-mobile/Component.js';
 import { CalendarDesktop } from './desktop/Component.desktop.js';
 import 'react-merge-refs';
@@ -12,7 +13,6 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
-import '../../shared/modern';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -68,7 +68,7 @@ import 'date-fns/startOfQuarter';
 import './components/years-table/Component.js';
 import 'date-fns/isThisYear';
 
-const CalendarResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+const CalendarResponsive = forwardRef(({ breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`);
     return isDesktop ? (React.createElement(CalendarDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarMobile, { ...restProps, ref: ref }));
 });

package/calendar/modern/index.js

@@ -1,6 +1,7 @@
 export { CalendarResponsive as Calendar } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './components/calendar-mobile/Component.js';
 import 'react-merge-refs';
 import 'react-virtuoso';
@@ -12,7 +13,6 @@ import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
-import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';

package/calendar-input/@alfalab/core-components-shared/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "@alfalab/core-components-shared",
+    "version": "0.9.1",
+    "description": "Shared package for core-components",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0"
+    },
+    "dependencies": {
+        "@alfalab/hooks": "^1.13.0",
+        "tslib": "^2.4.0"
+    },
+    "devDependencies": {
+        "@maskito/core": "^1.7.0"
+    }
+}

package/calendar-input/Component.responsive.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var coreComponentsShared = require('../shared');
 var hooks = require('@alfalab/hooks');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
@@ -15,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],

package/calendar-input/cssm/Component.responsive.js

@@ -2,6 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+var coreComponentsShared = require('../../shared/cssm');
 var hooks = require('@alfalab/hooks');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
@@ -15,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],

package/calendar-input/esm/Component.responsive.js

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { useMedia } from '@alfalab/hooks';
 import { CalendarInputDesktop } from './desktop/Component.desktop.js';
 import { CalendarInputMobile } from './mobile/Component.mobile.js';
@@ -22,7 +23,7 @@ import '../../calendar/esm/mobile';
  * use UniversalDateInput instead
  */
 var CalendarInputResponsive = forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["breakpoint"]);
     var view = useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],