@salutejs/plasma-new-hope 0.239.0-canary.1702.12763507639.0 → 0.239.0-dev.0

package/emotion/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -95,8 +95,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-      _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
-      closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
       onToggle = _ref.onToggle,
       onChange = _ref.onChange,
@@ -149,14 +147,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
-    var _useState15 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
-      _useState16 = _slicedToArray(_useState15, 2),
-      fullDateEntered = _useState16[0],
-      setFullDateEntered = _useState16[1];
-    var _useState17 = useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      secondTextFieldClicked = _useState18[0],
-      setSecondTextFieldClicked = _useState18[1];
     var setFirstInputValue = function setFirstInputValue(value) {
       setInputFirstValue(value);
       if (onChange) {
@@ -217,12 +207,12 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
       handleCommitSecondDate = _useDatePicker2.handleCommitDate;
-    var handleToggle = function handleToggle(currentOpened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains((event === null || event === void 0 ? void 0 : event.target) || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains((event === null || event === void 0 ? void 0 : event.target) || null)) && (event === null || event === void 0 ? void 0 : event.code) !== keys.Escape ? true : currentOpened;
+      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null)) && event.code !== keys.Escape ? true : opened;
       if (!isCalendarOpen) {
         if (calendarFirstValue && !calendarSecondValue) {
           var _secondInputRef$curre2;
@@ -233,22 +223,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
         }
       }
-      if (!isCalendarOpen) {
-        setSecondTextFieldClicked(false);
-      }
       if (onToggle) {
         return onToggle(isCalendarOpen, event);
       }
       setIsInnerOpen(isCalendarOpen);
     };
-    var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
-      onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
-      setSecondTextFieldClicked(false);
-    };
-    var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
-      onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
-      setSecondTextFieldClicked(true);
-    };
     var handleBlur = function handleBlur(event, outerHandler) {
       if (!inputFirstValue || !inputSecondValue) {
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
@@ -288,37 +267,6 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
-      if (!fullDateEntered) {
-        handleCommitFirstDate(chosenDate, false, true, dateInfo);
-        handleCommitSecondDate('');
-        return;
-      }
-      var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
-      var _getSortedValues3 = getSortedValues([prevValue, chosenDate]),
-        _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
-        first = _getSortedValues4[0],
-        second = _getSortedValues4[1];
-      handleCommitFirstDate(first, false, true, dateInfo);
-      handleCommitSecondDate(second, false, true, dateInfo);
-      if (!firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
-      if (firstDate) {
-        handleCommitFirstDate(firstDate, false, true, dateInfo);
-      }
-      if (secondDate) {
-        handleCommitSecondDate(secondDate, false, true, dateInfo);
-      }
-      if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
     var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
       ref: rangeRef,
       autoComplete: autoComplete,
@@ -364,8 +312,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
         }
       },
-      onFocusFirstTextfield: handleFocusFirstTextField,
-      onFocusSecondTextfield: handleFocusSecondTextField,
+      onFocusFirstTextfield: onFocusFirstTextfield,
+      onFocusSecondTextfield: onFocusSecondTextfield,
       onBlurFirstTextfield: function onBlurFirstTextfield(event) {
         return handleBlur(event, _onBlurFirstTextfield);
       },
@@ -414,13 +362,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         lang: lang
       }));
     }, [format, lang]);
-    useEffect(function () {
-      if (calendarFirstValue && calendarSecondValue) {
-        setFullDateEntered(true);
-      }
-    }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = useCallback(function (_ref4) {
-      var children = _ref4.children;
+    var RootWrapper = useCallback(function (_ref2) {
+      var children = _ref2.children;
       return /*#__PURE__*/React.createElement(Root, {
         view: view,
         size: size,
@@ -462,8 +405,20 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       rootWrapper: RootWrapper,
-      onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue
+      onChangeStartOfRange: function onChangeStartOfRange(firstDate, dateInfo) {
+        handleCommitFirstDate(firstDate, false, true, dateInfo);
+        handleCommitSecondDate('');
+      },
+      onChangeValue: function onChangeValue(_ref3, dateInfo) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          firstDate = _ref4[0],
+          secondDate = _ref4[1];
+        firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
+        secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
+        if (firstDate && secondDate && !firstValueError && !secondValueError) {
+          setIsInnerOpen(false);
+        }
+      }
     }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       name: name,
       type: "hidden",

package/emotion/es/components/NumberInput/NumberInput.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "style", "width", "value", "min", "max", "step", "isLoading", "loader", "size", "view", "clear", "shape", "segmentation", "inputBackgroundType", "disabled", "textBefore", "textAfter", "customIncrementButton", "incrementIcon", "customDecrementButton", "decrementIcon", "isManualInput", "onChange", "onIncrement", "onDecrement"];
+var _excluded = ["className", "style", "width", "value", "min", "max", "step", "precision", "isLoading", "loader", "size", "view", "clear", "shape", "segmentation", "inputBackgroundType", "disabled", "textBefore", "textAfter", "customIncrementButton", "incrementIcon", "customDecrementButton", "decrementIcon", "isManualInput", "onChange", "onIncrement", "onDecrement"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -26,6 +26,7 @@ import { base as shapeCSS } from './variations/_shape/base';
 import { base as inputBackgroundTypeCSS } from './variations/_background-type/base';
 import { base as segmentationCSS } from './variations/_segmentation/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { getPreciseValue } from './utils';
 export var numberInputRoot = function numberInputRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var _ref2;
@@ -37,6 +38,8 @@ export var numberInputRoot = function numberInputRoot(Root) {
       max = _ref.max,
       _ref$step = _ref.step,
       step = _ref$step === void 0 ? 1 : _ref$step,
+      _ref$precision = _ref.precision,
+      precision = _ref$precision === void 0 ? 2 : _ref$precision,
       isLoading = _ref.isLoading,
       loader = _ref.loader,
       size = _ref.size,
@@ -70,6 +73,7 @@ export var numberInputRoot = function numberInputRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isAnimationRun = _useState6[0],
       setIsAnimationRun = _useState6[1];
+    console.log('innerValue', innerValue);
     var innerWidth = width ? getSizeValueFromProp(width) : '100%';
     var actionIconSize = size === 'xs' ? 'xs' : 's';
     var solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;
@@ -90,7 +94,8 @@ export var numberInputRoot = function numberInputRoot(Root) {
       if (isLoading || disabled || isAnimationRun) {
         return;
       }
-      var diffValue = Number(innerValue) - step;
+      var preciseDiff = getPreciseValue(Number(innerValue) - step, precision);
+      var diffValue = Number(preciseDiff);
       var resValue = min !== undefined && diffValue <= min ? min : diffValue;
       setInnerValue(resValue);
       if (onDecrement) {
@@ -104,7 +109,8 @@ export var numberInputRoot = function numberInputRoot(Root) {
       if (isLoading || disabled || isAnimationRun) {
         return;
       }
-      var diffValue = Number(innerValue) + step;
+      var preciseDiff = getPreciseValue(Number(innerValue) + step, precision);
+      var diffValue = Number(preciseDiff);
       var resValue = max !== undefined && diffValue >= max ? max : diffValue;
       setInnerValue(resValue);
       if (onIncrement) {
@@ -148,6 +154,7 @@ export var numberInputRoot = function numberInputRoot(Root) {
       ref: ref,
       segmentation: segmentation,
       value: innerValue,
+      precision: precision,
       min: min,
       max: max,
       isManualInput: isManualInput,

package/emotion/es/components/NumberInput/ui/Input/Input.js

@@ -1,5 +1,5 @@
 var _StyledSpinner;
-var _excluded = ["value", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
+var _excluded = ["value", "precision", "min", "max", "isLoading", "loader", "disabled", "segmentation", "textBefore", "textAfter", "isManualInput", "isInputFocused", "setIsInputFocused", "setIsAnimationRun", "setInnerValue", "onChange", "onBlur", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -14,11 +14,12 @@ import { useForkRef } from '@salutejs/plasma-core';
 import { classes } from '../../NumberInput.tokens';
 import { cx, isNumber } from '../../../../utils';
 import { useDidMountEffect } from '../../../../hooks';
-import { defaultCharacterWidth, excludingNumberSchema, numberSchema } from '../../utils';
+import { defaultCharacterWidth, excludingNumberSchema, getPreciseValue, numberSchema } from '../../utils';
 import { keyCodes } from '../../../../utils/constants';
 import { AdditionalText, Input, InputWrapper, DynamicInput, InputWidthHelper, TextWrapper, StyledSpinner, Loader } from './Input.styles';
 export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
+    precision = _ref.precision,
     min = _ref.min,
     max = _ref.max,
     isLoading = _ref.isLoading,
@@ -84,11 +85,6 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setIsAnimationRun(false);
       return;
     }
-    if (String(newValue).endsWith('.')) {
-      setValues(null, Number(newValue));
-      setIsAnimationRun(false);
-      return;
-    }
     var resValue = Number(newValue);
     if (max !== undefined && resValue > max) {
       setErrorClass(classes.errorAnimation);
@@ -100,6 +96,16 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setErrorClass(classes.errorAnimation);
       setErrorValue(min);
       setIsAnimationRun(true);
+      return;
+    }
+    if (String(newValue).endsWith('.')) {
+      setValues(null, Number(newValue));
+      setIsAnimationRun(false);
+      return;
+    }
+    if (precision !== undefined) {
+      var preciseNewValue = Number(getPreciseValue(newValue, precision));
+      setValues(null, preciseNewValue);
     }
     setIsAnimationRun(false);
   };
@@ -125,15 +131,18 @@ export var NumberInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
       return;
     }
+    console.log('here');
     var isValid = numberSchema.test(cleanValue);
     if (!isValid) {
+      console.log('not valid', cleanValue);
       setValues(event, lastValidValue);
       return;
     }
+    console.log('valid!', cleanValue);
     if (textWrapperRef !== null && textWrapperRef !== void 0 && textWrapperRef.current && wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && (textWrapperRef === null || textWrapperRef === void 0 || (_textWrapperRef$curre = textWrapperRef.current) === null || _textWrapperRef$curre === void 0 ? void 0 : _textWrapperRef$curre.clientWidth) > (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientWidth)) {
       wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
     }
-    setValues(event, Number(cleanValue));
+    setValues(event, cleanValue);
   };
   var handleClickInputWrapper = function handleClickInputWrapper() {
     if (!isManualInput || !inputRef.current) {

package/emotion/es/components/NumberInput/utils/index.js

@@ -1,3 +1,12 @@
 export var defaultCharacterWidth = '1ch';
 export var numberSchema = /^(-)?\d+(\.\d+)?$/;
-export var excludingNumberSchema = /[^-.\d]/g;
+export var excludingNumberSchema = /[^-.\d]/g;
+export var getPreciseValue = function getPreciseValue(value, precision) {
+  var innerValue = String(value);
+  if (precision !== undefined) {
+    var factor = Math.pow(10, precision);
+    var preparedValue = Number(innerValue) < 0 ? Number(innerValue) - Number.EPSILON : Number(innerValue) + Number.EPSILON;
+    return String(Math.round(preparedValue * factor) / factor);
+  }
+  return innerValue;
+};

package/emotion/es/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx

@@ -192,6 +192,7 @@ const StoryRange = ({
     const rangeRef = useRef<RangeInputRefs>(null);
 
     const [isOpen, setIsOpen] = useState(false);
+    const [firstDate, setFirstDate] = useState<string | Date>('');
 
     const iconSize = size === 'xs' ? 'xs' : 's';
     const showDividerIcon = dividerVariant === 'icon';
@@ -238,6 +239,12 @@ const StoryRange = ({
             onChangeSecondValue={(e, currentValue) => {
                 onChangeSecondValue(e, currentValue);
             }}
+            onCommitFirstDate={(currentValue) => {
+                setFirstDate(currentValue);
+            }}
+            onCommitSecondDate={(currentValue) => {
+                firstDate && currentValue && setIsOpen(false);
+            }}
             lang={lang}
             {...dividerIconProps}
             {...rest}
@@ -272,7 +279,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         size: 'l',
         view: 'default',
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),

package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.stories.tsx

@@ -96,6 +96,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         segmentation: 'default',
         min: 0,
         max: 9,
+        precision: 2,
         step: 1,
         width: 188,
         isManualInput: false,

package/emotion/es/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -186,12 +186,12 @@ const StoryRange = ({
     secondValueError,
     secondValueSuccess,
     size,
-    lang,
     ...rest
 }: StoryPropsRange) => {
     const rangeRef = useRef<RangeInputRefs>(null);
 
     const [isOpen, setIsOpen] = useState(false);
+    const [firstDate, setFirstDate] = useState<string | Date>('');
 
     const iconSize = size === 'xs' ? 'xs' : 's';
     const showDividerIcon = dividerVariant === 'icon';
@@ -238,7 +238,12 @@ const StoryRange = ({
             onChangeSecondValue={(e, currentValue) => {
                 onChangeSecondValue(e, currentValue);
             }}
-            lang={lang}
+            onCommitFirstDate={(currentValue) => {
+                setFirstDate(currentValue);
+            }}
+            onCommitSecondDate={(currentValue) => {
+                firstDate && currentValue && setIsOpen(false);
+            }}
             {...dividerIconProps}
             {...rest}
         />
@@ -272,7 +277,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         size: 'l',
         view: 'default',
         isDoubleCalendar: false,
-        closeAfterDateSelect: true,
         dividerVariant: 'dash',
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),

package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.stories.tsx

@@ -96,6 +96,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
         segmentation: 'default',
         min: 0,
         max: 9,
+        precision: 2,
         step: 1,
         width: 188,
         isManualInput: false,

package/es/components/DatePicker/RangeDate/RangeDate.js

@@ -15,7 +15,7 @@ import { RangeDatePopover } from './RangeDatePopover/RangeDatePopover.js';
 import { noop } from '../../../utils/noop.js';
 import { getSortedValues } from '../../Calendar/utils/calendarRangeHelper.js';
 
-var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "closeAfterDateSelect", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "autoComplete", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "name", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "required", "requiredPlacement", "format", "lang", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "frame", "usePortal", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChange", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 var datePickerRangeRoot = function datePickerRangeRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var _rangeRef$current, _rangeRef$current2;
@@ -89,8 +89,6 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
-      _ref$closeAfterDateSe = _ref.closeAfterDateSelect,
-      closeAfterDateSelect = _ref$closeAfterDateSe === void 0 ? true : _ref$closeAfterDateSe,
       offset = _ref.offset,
       onToggle = _ref.onToggle,
       onChange = _ref.onChange,
@@ -143,14 +141,6 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
-    var _useState15 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
-      _useState16 = _slicedToArray(_useState15, 2),
-      fullDateEntered = _useState16[0],
-      setFullDateEntered = _useState16[1];
-    var _useState17 = useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      secondTextFieldClicked = _useState18[0],
-      setSecondTextFieldClicked = _useState18[1];
     var setFirstInputValue = function setFirstInputValue(value) {
       setInputFirstValue(value);
       if (onChange) {
@@ -211,12 +201,12 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
       handleCommitSecondDate = _useDatePicker2.handleCommitDate;
-    var handleToggle = function handleToggle(currentOpened, event) {
+    var handleToggle = function handleToggle(opened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
       if (disabled || readOnly) {
         return;
       }
-      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains((event === null || event === void 0 ? void 0 : event.target) || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains((event === null || event === void 0 ? void 0 : event.target) || null)) && (event === null || event === void 0 ? void 0 : event.code) !== keys.Escape ? true : currentOpened;
+      var isCalendarOpen = (firstInputRef !== null && firstInputRef !== void 0 && (_firstInputRef$curren = firstInputRef.current) !== null && _firstInputRef$curren !== void 0 && _firstInputRef$curren.contains(event.target || null) || secondInputRef !== null && secondInputRef !== void 0 && (_secondInputRef$curre = secondInputRef.current) !== null && _secondInputRef$curre !== void 0 && _secondInputRef$curre.contains(event.target || null)) && event.code !== keys.Escape ? true : opened;
       if (!isCalendarOpen) {
         if (calendarFirstValue && !calendarSecondValue) {
           var _secondInputRef$curre2;
@@ -227,22 +217,11 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
         }
       }
-      if (!isCalendarOpen) {
-        setSecondTextFieldClicked(false);
-      }
       if (onToggle) {
         return onToggle(isCalendarOpen, event);
       }
       setIsInnerOpen(isCalendarOpen);
     };
-    var handleFocusFirstTextField = function handleFocusFirstTextField(event) {
-      onFocusFirstTextfield === null || onFocusFirstTextfield === void 0 || onFocusFirstTextfield(event);
-      setSecondTextFieldClicked(false);
-    };
-    var handleFocusSecondTextField = function handleFocusSecondTextField(event) {
-      onFocusSecondTextfield === null || onFocusSecondTextfield === void 0 || onFocusSecondTextfield(event);
-      setSecondTextFieldClicked(true);
-    };
     var handleBlur = function handleBlur(event, outerHandler) {
       if (!inputFirstValue || !inputSecondValue) {
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
@@ -282,37 +261,6 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
-    var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
-      if (!fullDateEntered) {
-        handleCommitFirstDate(chosenDate, false, true, dateInfo);
-        handleCommitSecondDate('');
-        return;
-      }
-      var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
-      var _getSortedValues3 = getSortedValues([prevValue, chosenDate]),
-        _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
-        first = _getSortedValues4[0],
-        second = _getSortedValues4[1];
-      handleCommitFirstDate(first, false, true, dateInfo);
-      handleCommitSecondDate(second, false, true, dateInfo);
-      if (!firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
-    var handleChangeCalendarValue = function handleChangeCalendarValue(_ref2, dateInfo) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        firstDate = _ref3[0],
-        secondDate = _ref3[1];
-      if (firstDate) {
-        handleCommitFirstDate(firstDate, false, true, dateInfo);
-      }
-      if (secondDate) {
-        handleCommitSecondDate(secondDate, false, true, dateInfo);
-      }
-      if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
-        handleToggle(false);
-      }
-    };
     var RangeComponent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledRange, {
       ref: rangeRef,
       autoComplete: autoComplete,
@@ -358,8 +306,8 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           rangeRef === null || rangeRef === void 0 || (_rangeRef$current4 = rangeRef.current) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.firstTextField()) === null || _rangeRef$current4 === void 0 || (_rangeRef$current4 = _rangeRef$current4.current) === null || _rangeRef$current4 === void 0 || _rangeRef$current4.focus();
         }
       },
-      onFocusFirstTextfield: handleFocusFirstTextField,
-      onFocusSecondTextfield: handleFocusSecondTextField,
+      onFocusFirstTextfield: onFocusFirstTextfield,
+      onFocusSecondTextfield: onFocusSecondTextfield,
       onBlurFirstTextfield: function onBlurFirstTextfield(event) {
         return handleBlur(event, _onBlurFirstTextfield);
       },
@@ -408,13 +356,8 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         lang: lang
       }));
     }, [format, lang]);
-    useEffect(function () {
-      if (calendarFirstValue && calendarSecondValue) {
-        setFullDateEntered(true);
-      }
-    }, [calendarFirstValue, calendarSecondValue]);
-    var RootWrapper = useCallback(function (_ref4) {
-      var children = _ref4.children;
+    var RootWrapper = useCallback(function (_ref2) {
+      var children = _ref2.children;
       return /*#__PURE__*/React.createElement(Root, {
         view: view,
         size: size,
@@ -456,8 +399,20 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       lang: lang,
       isDoubleCalendar: isDoubleCalendar,
       rootWrapper: RootWrapper,
-      onChangeStartOfRange: handleChangeStartOfRange,
-      onChangeValue: handleChangeCalendarValue
+      onChangeStartOfRange: function onChangeStartOfRange(firstDate, dateInfo) {
+        handleCommitFirstDate(firstDate, false, true, dateInfo);
+        handleCommitSecondDate('');
+      },
+      onChangeValue: function onChangeValue(_ref3, dateInfo) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          firstDate = _ref4[0],
+          secondDate = _ref4[1];
+        firstDate && handleCommitFirstDate(firstDate, false, true, dateInfo);
+        secondDate && handleCommitSecondDate(secondDate, false, true, dateInfo);
+        if (firstDate && secondDate && !firstValueError && !secondValueError) {
+          setIsInnerOpen(false);
+        }
+      }
     }), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, null, leftHelper), /*#__PURE__*/React.createElement(InputHidden, _extends({
       name: name,
       type: "hidden",