@salutejs/plasma-new-hope 0.322.0-canary.1939.14616445713.0 → 0.322.0-canary.1941.14637562685.0

package/styled-components/cjs/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx

@@ -1,24 +1,23 @@
 import React, { ComponentProps, useEffect, useRef, useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { disableProps, getConfigVariations, IconPlaceholder } from '@salutejs/plasma-sb-utils';
+import { disableProps, IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
 import { IconButton } from '../IconButton/IconButton';
 import { RangeInputRefs } from '../../../../components/Range/Range.types';
 
 import { DatePicker, DatePickerRange } from './DatePicker';
-import { config } from './DatePicker.config';
 
 const onChangeValue = action('onChangeValue');
-const onCommitDate = action('onCommitDate');
 const onBlur = action('onBlur');
 const onFocus = action('onFocus');
 
 const onChangeFirstValue = action('onChangeFirstValue');
 const onChangeSecondValue = action('onChangeSecondValue');
 
-const { sizes, views } = getConfigVariations(config);
+const sizes = ['l', 'm', 's', 'xs'];
+const views = ['default'];
 const dividers = ['none', 'dash', 'icon'];
 const labelPlacements = ['outer', 'inner'];
 const requiredPlacements = ['left', 'right'];
@@ -49,11 +48,6 @@ const meta: Meta = {
                 type: 'date',
             },
         },
-        includeEdgeDates: {
-            control: {
-                type: 'boolean',
-            },
-        },
         renderFromDate: {
             control: {
                 type: 'date',
@@ -119,10 +113,12 @@ const StoryDefault = ({
             onBlur={onBlur}
             onFocus={onFocus}
             onToggle={(is) => setIsOpen(is)}
-            onChangeValue={onChangeValue}
-            onCommitDate={onCommitDate}
+            onChangeValue={(e, currentValue) => {
+                onChangeValue(e, currentValue);
+            }}
             lang={lang}
             format={format}
+            onCommitDate={() => setIsOpen(false)}
             min={min}
             max={max}
             {...rest}
@@ -144,7 +140,7 @@ export const Default: StoryObj<StoryPropsDefault> = {
             },
         },
         format: {
-            options: ['DD.MM.YYYY', 'DD MMMM YYYY', 'YYYY DD MM', 'DD YYYY MM'],
+            options: ['DD.MM.YYYY', 'DD MMMM YYYY'],
             control: {
                 type: 'select',
             },
@@ -159,7 +155,6 @@ export const Default: StoryObj<StoryPropsDefault> = {
         labelPlacement: 'outer',
         defaultDate: new Date(2024, 5, 14),
         renderFromDate: new Date(2024, 4, 14),
-        includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
         maskWithFormat: false,
@@ -304,7 +299,6 @@ export const Range: StoryObj<StoryPropsRange> = {
         isDoubleCalendar: false,
         closeAfterDateSelect: true,
         dividerVariant: 'dash',
-        includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
         renderFromDate: new Date(2024, 4, 14),
@@ -368,8 +362,10 @@ const StoryDeferred = ({
                 onBlur={onBlur}
                 onFocus={onFocus}
                 onToggle={(is) => setIsOpen(is)}
-                onChangeValue={onChangeValue}
-                onCommitDate={onCommitDate}
+                onChangeValue={(e, currentValue) => {
+                    onChangeValue(e, currentValue);
+                }}
+                onCommitDate={() => setIsOpen(false)}
                 min={min}
                 max={max}
                 {...rest}
@@ -405,7 +401,6 @@ export const Deferred: StoryObj<StoryPropsDefault> = {
         size: 'l',
         view: 'default',
         labelPlacement: 'outer',
-        includeEdgeDates: true,
         min: new Date(2024, 1, 1),
         max: new Date(2024, 12, 29),
         maskWithFormat: false,

package/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -128,6 +128,9 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
       }
     }, [calendarState]);
     useEffect(function () {
+      if (!prevValue) {
+        setPrevValue(value);
+      }
       if (value && prevValue && isValueUpdate(value, prevValue) || value && !prevValue) {
         dispatch({
           type: ActionType.UPDATE_DATE,
@@ -135,8 +138,9 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
             value: value
           }
         });
+        setPrevValue(value);
       }
-      if (!value && !prevValue) {
+      if (!value) {
         dispatch({
           type: ActionType.UPDATE_DATE,
           payload: {
@@ -144,8 +148,7 @@ export var calendarBaseRoot = function calendarBaseRoot(Root) {
           }
         });
       }
-      setPrevValue(value);
-    }, [value]);
+    }, [value, prevValue]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: outerRootRef,
       "aria-label": I18N.selectDate[locale]

package/styled-components/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -175,6 +175,9 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
       }
     }, [calendarState]);
     useEffect(function () {
+      if (!prevValue) {
+        setPrevValue(value);
+      }
       if (value && prevValue && isValueUpdate(value, prevValue) || value && !prevValue) {
         var _getBoundaryDates = getBoundaryDates(),
           _getBoundaryDates2 = _slicedToArray(_getBoundaryDates, 2),
@@ -188,8 +191,9 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
             }
           });
         }
+        setPrevValue(value);
       }
-      if (!value && !prevValue) {
+      if (!value) {
         dispatch({
           type: ActionType.UPDATE_DATE,
           payload: {
@@ -197,8 +201,7 @@ export var calendarDoubleRoot = function calendarDoubleRoot(Root) {
           }
         });
       }
-      setPrevValue(value);
-    }, [value]);
+    }, [value, prevValue]);
     useEffect(function () {
       setFirstDate(date);
       updateSecondDate();

package/styled-components/es/components/CodeField/CodeField.types.js

@@ -0,0 +1 @@
+export {};

package/styled-components/es/components/DatePicker/DatePicker.tokens.js

@@ -218,6 +218,5 @@ export var tokens = {
   calendarContentPrimaryColor: '--plasma-date-picker-calendar__content-primary-color',
   calendarContentSecondaryColor: '--plasma-date-picker-calendar__content-secondary-color',
   calendarContentPrimaryDisabledColor: '--plasma-date-picker-calendar__content-primary-disabled-color',
-  calendarContentSecondaryDisabledColor: '--plasma-date-picker-calendar__content-secondary-disabled-color',
-  calendarDisabledOpacity: '--plasma-date-picker-calendar__disabled-opacity'
+  calendarContentSecondaryDisabledColor: '--plasma-date-picker-calendar__content-secondary-disabled-color'
 };

package/styled-components/es/components/DatePicker/DatePickerBase.styles.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
+import { calendarBaseConfig, calendarBaseTokens } from "../Calendar";
 import { component, mergeConfig } from "../../engines";
 import { applyHidden } from "../../mixins";
-import { calendarBaseConfig, calendarBaseTokens } from "../Calendar";
 import { tokens } from "./DatePicker.tokens";
 var mergedCalendarConfig = /*#__PURE__*/mergeConfig(calendarBaseConfig);
 var Calendar = /*#__PURE__*/component(mergedCalendarConfig);
-export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(tokens.calendarPaddingTop, ");\n    box-shadow: var(").concat(tokens.calendarShadow, ");\n    border-radius: var(").concat(tokens.calendarBorderRadius, ");\n    margin-top: var(").concat(tokens.calendarMarginTop, ");\n\n    ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n    ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderWidth, ": var(").concat(tokens.calendarCurrentItemBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n    ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n    ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n    ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryDisabledColor, ": var(").concat(tokens.calendarContentPrimaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryDisabledColor, ": var(").concat(tokens.calendarContentSecondaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarDisabledOpacity, ": var(").concat(tokens.calendarDisabledOpacity, ");\n\n    ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n    ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(calendarBaseTokens.calendarWidth, ": var(").concat(tokens.calendarWidth, ");\n    ").concat(calendarBaseTokens.calendarHeight, ": var(").concat(tokens.calendarHeight, ");\n    ").concat(calendarBaseTokens.calendarBorderWidth, ": var(").concat(tokens.calendarBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarBorderColor, ": var(").concat(tokens.calendarBorderColor, ");\n\n    ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n    ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarYearItemWidth, ": var(").concat(tokens.calendarYearItemWidth, ");\n    ").concat(calendarBaseTokens.calendarYearItemHeight, ": var(").concat(tokens.calendarYearItemHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n    ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n    ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n    ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n    ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n    ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarMonthItemWidth, ": var(").concat(tokens.calendarMonthItemWidth, ");\n    ").concat(calendarBaseTokens.calendarMonthItemHeight, ": var(").concat(tokens.calendarMonthItemHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n    ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n    ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarQuartersPadding, ": var(").concat(tokens.calendarQuartersPadding, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemBorderRadius, ": var(").concat(tokens.calendarQuarterItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemWidth, ": var(").concat(tokens.calendarQuarterItemWidth, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemHeight, ": var(").concat(tokens.calendarQuarterItemHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontFamily, ": var(").concat(tokens.calendarQuarterFontFamily, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontSize, ": var(").concat(tokens.calendarQuarterFontSize, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontStyle, ": var(").concat(tokens.calendarQuarterFontStyle, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLetterSpacing, ": var(").concat(tokens.calendarQuarterFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLineHeight, ": var(").concat(tokens.calendarQuarterFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontWeight, ": var(").concat(tokens.calendarQuarterFontWeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterSelectedFontWeight, ": var(").concat(tokens.calendarQuarterSelectedFontWeight, ");\n    \n    ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n    ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarDayItemWidth, ": var(").concat(tokens.calendarDayItemWidth, ");\n    ").concat(calendarBaseTokens.calendarDayItemHeight, ": var(").concat(tokens.calendarDayItemHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n    ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n    ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n    ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDayOfWeekColor, ": var(").concat(tokens.calendarDayOfWeekColor, ");\n    \n    ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowColor, ": var(").concat(tokens.calendarHeaderArrowColor, ");\n    \n    ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n    ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n    ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
+export var baseCalendarTokens = /*#__PURE__*/"\n    padding-top: var(".concat(tokens.calendarPaddingTop, ");\n    box-shadow: var(").concat(tokens.calendarShadow, ");\n    border-radius: var(").concat(tokens.calendarBorderRadius, ");\n    margin-top: var(").concat(tokens.calendarMarginTop, ");\n\n    ").concat(calendarBaseTokens.calendarBackgroundColor, ": var(").concat(tokens.calendarBackgroundColor, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemBackground, ": var(").concat(tokens.calendarSelectedItemBackground, ");\n    ").concat(calendarBaseTokens.calendarSelectedItemColor, ": var(").concat(tokens.calendarSelectedItemColor, ");\n    ").concat(calendarBaseTokens.calendarSelectableItemBackgroundHover, ": var(").concat(tokens.calendarSelectableItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderColor, ": var(").concat(tokens.calendarCurrentItemBorderColor, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBorderWidth, ": var(").concat(tokens.calendarCurrentItemBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemBackgroundHover, ": var(").concat(tokens.calendarCurrentItemBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemColorHover, ": var(").concat(tokens.calendarCurrentItemColorHover, ");\n    ").concat(calendarBaseTokens.calendarCurrentItemChildBackgroundHover, ": var(").concat(tokens.calendarCurrentItemChildBackgroundHover, ");\n    ").concat(calendarBaseTokens.calendarActiveItemBackground, ": var(").concat(tokens.calendarActiveItemBackground, ");\n    ").concat(calendarBaseTokens.calendarActiveItemColor, ": var(").concat(tokens.calendarActiveItemColor, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemBackground, ": var(").concat(tokens.calendarHoveredItemBackground, ");\n    ").concat(calendarBaseTokens.calendarHoveredItemColor, ": var(").concat(tokens.calendarHoveredItemColor, ");\n    ").concat(calendarBaseTokens.calendarRangeBackground, ": var(").concat(tokens.calendarRangeBackground, ");\n    ").concat(calendarBaseTokens.calendarOutlineFocusColor, ": var(").concat(tokens.calendarOutlineFocusColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryColor, ": var(").concat(tokens.calendarContentPrimaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentPrimaryDisabledColor, ": var(").concat(tokens.calendarContentPrimaryDisabledColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryColor, ": var(").concat(tokens.calendarContentSecondaryColor, ");\n    ").concat(calendarBaseTokens.calendarContentSecondaryDisabledColor, ": var(").concat(tokens.calendarContentSecondaryDisabledColor, ");\n\n    ").concat(calendarBaseTokens.iconButtonColor, ": var(").concat(tokens.iconButtonColor, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColor, ": var(").concat(tokens.iconButtonBackgroundColor, ");\n    ").concat(calendarBaseTokens.iconButtonColorHover, ": var(").concat(tokens.iconButtonColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorHover, ": var(").concat(tokens.iconButtonBackgroundColorHover, ");\n    ").concat(calendarBaseTokens.iconButtonColorActive, ": var(").concat(tokens.iconButtonColorActive, ");\n    ").concat(calendarBaseTokens.iconButtonBackgroundColorActive, ": var(").concat(tokens.iconButtonBackgroundColorActive, ");\n\n    ").concat(calendarBaseTokens.calendarWidth, ": var(").concat(tokens.calendarWidth, ");\n    ").concat(calendarBaseTokens.calendarHeight, ": var(").concat(tokens.calendarHeight, ");\n    ").concat(calendarBaseTokens.calendarBorderWidth, ": var(").concat(tokens.calendarBorderWidth, ");\n    ").concat(calendarBaseTokens.calendarBorderColor, ": var(").concat(tokens.calendarBorderColor, ");\n\n    ").concat(calendarBaseTokens.calendarYearsPadding, ": var(").concat(tokens.calendarYearsPadding, ");\n    ").concat(calendarBaseTokens.calendarYearItemBorderRadius, ": var(").concat(tokens.calendarYearItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarYearItemWidth, ": var(").concat(tokens.calendarYearItemWidth, ");\n    ").concat(calendarBaseTokens.calendarYearItemHeight, ": var(").concat(tokens.calendarYearItemHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontFamily, ": var(").concat(tokens.calendarYearFontFamily, ");\n    ").concat(calendarBaseTokens.calendarYearFontSize, ": var(").concat(tokens.calendarYearFontSize, ");\n    ").concat(calendarBaseTokens.calendarYearFontStyle, ": var(").concat(tokens.calendarYearFontStyle, ");\n    ").concat(calendarBaseTokens.calendarYearFontLetterSpacing, ": var(").concat(tokens.calendarYearFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarYearFontLineHeight, ": var(").concat(tokens.calendarYearFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarYearFontWeight, ": var(").concat(tokens.calendarYearFontWeight, ");\n    ").concat(calendarBaseTokens.calendarYearSelectedFontWeight, ": var(").concat(tokens.calendarYearSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarMonthsPadding, ": var(").concat(tokens.calendarMonthsPadding, ");\n    ").concat(calendarBaseTokens.calendarMonthItemBorderRadius, ": var(").concat(tokens.calendarMonthItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarMonthItemWidth, ": var(").concat(tokens.calendarMonthItemWidth, ");\n    ").concat(calendarBaseTokens.calendarMonthItemHeight, ": var(").concat(tokens.calendarMonthItemHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontFamily, ": var(").concat(tokens.calendarMonthFontFamily, ");\n    ").concat(calendarBaseTokens.calendarMonthFontSize, ": var(").concat(tokens.calendarMonthFontSize, ");\n    ").concat(calendarBaseTokens.calendarMonthFontStyle, ": var(").concat(tokens.calendarMonthFontStyle, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLetterSpacing, ": var(").concat(tokens.calendarMonthFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarMonthFontLineHeight, ": var(").concat(tokens.calendarMonthFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarMonthFontWeight, ": var(").concat(tokens.calendarMonthFontWeight, ");\n    ").concat(calendarBaseTokens.calendarMonthSelectedFontWeight, ": var(").concat(tokens.calendarMonthSelectedFontWeight, ");\n\n    ").concat(calendarBaseTokens.calendarQuartersPadding, ": var(").concat(tokens.calendarQuartersPadding, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemBorderRadius, ": var(").concat(tokens.calendarQuarterItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemWidth, ": var(").concat(tokens.calendarQuarterItemWidth, ");\n    ").concat(calendarBaseTokens.calendarQuarterItemHeight, ": var(").concat(tokens.calendarQuarterItemHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontFamily, ": var(").concat(tokens.calendarQuarterFontFamily, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontSize, ": var(").concat(tokens.calendarQuarterFontSize, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontStyle, ": var(").concat(tokens.calendarQuarterFontStyle, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLetterSpacing, ": var(").concat(tokens.calendarQuarterFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontLineHeight, ": var(").concat(tokens.calendarQuarterFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterFontWeight, ": var(").concat(tokens.calendarQuarterFontWeight, ");\n    ").concat(calendarBaseTokens.calendarQuarterSelectedFontWeight, ": var(").concat(tokens.calendarQuarterSelectedFontWeight, ");\n    \n    ").concat(calendarBaseTokens.calendarDaysPadding, ": var(").concat(tokens.calendarDaysPadding, ");\n    ").concat(calendarBaseTokens.calendarDayItemBorderRadius, ": var(").concat(tokens.calendarDayItemBorderRadius, ");\n    ").concat(calendarBaseTokens.calendarDayItemWidth, ": var(").concat(tokens.calendarDayItemWidth, ");\n    ").concat(calendarBaseTokens.calendarDayItemHeight, ": var(").concat(tokens.calendarDayItemHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontFamily, ": var(").concat(tokens.calendarDayFontFamily, ");\n    ").concat(calendarBaseTokens.calendarDayFontSize, ": var(").concat(tokens.calendarDayFontSize, ");\n    ").concat(calendarBaseTokens.calendarDayFontStyle, ": var(").concat(tokens.calendarDayFontStyle, ");\n    ").concat(calendarBaseTokens.calendarDayFontLetterSpacing, ": var(").concat(tokens.calendarDayFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarDayFontLineHeight, ": var(").concat(tokens.calendarDayFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarDayFontWeight, ": var(").concat(tokens.calendarDayFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDaySelectedFontWeight, ": var(").concat(tokens.calendarDaySelectedFontWeight, ");\n    ").concat(calendarBaseTokens.calendarDayOfWeekColor, ": var(").concat(tokens.calendarDayOfWeekColor, ");\n    \n    ").concat(calendarBaseTokens.calendarHeaderWrapperPadding, ": var(").concat(tokens.calendarHeaderWrapperPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowGap, ": var(").concat(tokens.calendarHeaderArrowGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowPadding, ": var(").concat(tokens.calendarHeaderArrowPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderPadding, ": var(").concat(tokens.calendarHeaderPadding, ");\n    ").concat(calendarBaseTokens.calendarHeaderDateGap, ": var(").concat(tokens.calendarHeaderDateGap, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontFamily, ": var(").concat(tokens.calendarHeaderFontFamily, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontSize, ": var(").concat(tokens.calendarHeaderFontSize, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontStyle, ": var(").concat(tokens.calendarHeaderFontStyle, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLetterSpacing, ": var(").concat(tokens.calendarHeaderFontLetterSpacing, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontLineHeight, ": var(").concat(tokens.calendarHeaderFontLineHeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeight, ": var(").concat(tokens.calendarHeaderFontWeight, ");\n    ").concat(calendarBaseTokens.calendarHeaderFontWeightBold, ": var(").concat(tokens.calendarHeaderFontWeightBold, ");\n    ").concat(calendarBaseTokens.calendarHeaderArrowColor, ": var(").concat(tokens.calendarHeaderArrowColor, ");\n    \n    ").concat(calendarBaseTokens.iconButtonHeight, ": var(").concat(tokens.iconButtonHeight, ");\n    ").concat(calendarBaseTokens.iconButtonWidth, ": var(").concat(tokens.iconButtonWidth, ");\n    ").concat(calendarBaseTokens.iconButtonPadding, ": var(").concat(tokens.iconButtonPadding, ");\n    ").concat(calendarBaseTokens.iconButtonRadius, ": var(").concat(tokens.iconButtonRadius, ");\n    ").concat(calendarBaseTokens.iconButtonFocusColor, ": var(").concat(tokens.iconButtonFocusColor, ");\n");
 
 // NOTE: переопределение токенов Calendar
 export var StyledCalendar = /*#__PURE__*/styled(Calendar).withConfig({

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

@@ -10,13 +10,12 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { createRef, forwardRef, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { cx, noop } from "../../../utils";
-import { getDateFormatDelimiter } from "../utils/dateHelper";
+import { formatCalendarValue, formatInputValue, getDateFormatDelimiter, getDateFromFormat } from "../utils/dateHelper";
 import { useDatePicker } from "../hooks/useDatePicker";
 import { classes } from "../DatePicker.tokens";
 import { keys, useKeyNavigation } from "../hooks/useKeyboardNavigation";
 import { InputHidden } from "../DatePickerBase.styles";
 import { getSortedValues } from "../../Calendar/utils";
-import { getFormattedDates } from "../utils";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
@@ -114,13 +113,14 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _onBlurFirstTextfield = _ref.onBlurFirstTextfield,
       _onBlurSecondTextfield = _ref.onBlurSecondTextfield,
       rest = _objectWithoutProperties(_ref, _excluded);
-    if (externalValue !== null && externalValue !== void 0 && externalValue.length && (defaultFirstDate || defaultSecondDate)) {
-      console.error("Controlled DatePicker can't have `default{First|Second}Date`, use `value` instead");
-    }
     var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/createRef();
     var rootRef = useRef(null);
     var innerRefFirst = useRef(null);
     var innerRefSecond = useRef(null);
+    var _ref2 = externalValue || [],
+      _ref3 = _slicedToArray(_ref2, 2),
+      startExternalValue = _ref3[0],
+      endExternalValue = _ref3[1];
     var _useState = useState(rangeRef === null || rangeRef === void 0 || (_rangeRef$current = rangeRef.current) === null || _rangeRef$current === void 0 ? void 0 : _rangeRef$current.firstTextField()),
       _useState2 = _slicedToArray(_useState, 2),
       firstInputRef = _useState2[0],
@@ -133,69 +133,38 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var dateFormatDelimiter = useCallback(function () {
-      return getDateFormatDelimiter(format);
-    }, [format]);
-    var _ref2 = externalValue || [],
-      _ref3 = _slicedToArray(_ref2, 2),
-      startExternalValue = _ref3[0],
-      endExternalValue = _ref3[1];
-    var startInitialValues = getFormattedDates({
-      value: startExternalValue || defaultFirstDate,
-      delimiter: dateFormatDelimiter(),
-      lang: lang,
-      format: format,
-      includeEdgeDates: includeEdgeDates,
-      min: min,
-      max: max
-    });
-    var endInitialValues = getFormattedDates({
-      value: endExternalValue || defaultSecondDate,
-      delimiter: dateFormatDelimiter(),
-      lang: lang,
-      format: format,
-      includeEdgeDates: includeEdgeDates,
-      min: min,
-      max: max
-    });
-    var _useState7 = useState({
-        calendar: startInitialValues.originalDate,
-        input: startInitialValues.formattedDate
-      }),
+    var _useState7 = useState(formatCalendarValue(startExternalValue || defaultFirstDate, format, lang)),
       _useState8 = _slicedToArray(_useState7, 2),
-      correctStartDates = _useState8[0],
-      setCorrectStartDates = _useState8[1];
-    var _useState9 = useState({
-        calendar: endInitialValues.originalDate,
-        input: endInitialValues.formattedDate
-      }),
+      calendarFirstValue = _useState8[0],
+      setCalendarFirstValue = _useState8[1];
+    var _useState9 = useState(formatInputValue({
+        value: startExternalValue || defaultFirstDate,
+        format: format,
+        lang: lang
+      })),
       _useState10 = _slicedToArray(_useState9, 2),
-      correctEndDates = _useState10[0],
-      setCorrectEndDates = _useState10[1];
-    var _useState11 = useState(startInitialValues.originalDate),
+      inputFirstValue = _useState10[0],
+      setInputFirstValue = _useState10[1];
+    var _useState11 = useState(formatCalendarValue(endExternalValue || defaultSecondDate, format, lang)),
       _useState12 = _slicedToArray(_useState11, 2),
-      calendarFirstValue = _useState12[0],
-      setCalendarFirstValue = _useState12[1];
-    var _useState13 = useState(startInitialValues.formattedDate),
+      calendarSecondValue = _useState12[0],
+      setCalendarSecondValue = _useState12[1];
+    var _useState13 = useState(formatInputValue({
+        value: endExternalValue || defaultSecondDate,
+        format: format,
+        lang: lang
+      })),
       _useState14 = _slicedToArray(_useState13, 2),
-      inputFirstValue = _useState14[0],
-      setInputFirstValue = _useState14[1];
-    var _useState15 = useState(endInitialValues.originalDate),
+      inputSecondValue = _useState14[0],
+      setInputSecondValue = _useState14[1];
+    var _useState15 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
       _useState16 = _slicedToArray(_useState15, 2),
-      calendarSecondValue = _useState16[0],
-      setCalendarSecondValue = _useState16[1];
-    var _useState17 = useState(endInitialValues.formattedDate),
+      fullDateEntered = _useState16[0],
+      setFullDateEntered = _useState16[1];
+    var _useState17 = useState(false),
       _useState18 = _slicedToArray(_useState17, 2),
-      inputSecondValue = _useState18[0],
-      setInputSecondValue = _useState18[1];
-    var _useState19 = useState(Boolean(calendarFirstValue && calendarSecondValue)),
-      _useState20 = _slicedToArray(_useState19, 2),
-      fullDateEntered = _useState20[0],
-      setFullDateEntered = _useState20[1];
-    var _useState21 = useState(false),
-      _useState22 = _slicedToArray(_useState21, 2),
-      secondTextFieldClicked = _useState22[0],
-      setSecondTextFieldClicked = _useState22[1];
+      secondTextFieldClicked = _useState18[0],
+      setSecondTextFieldClicked = _useState18[1];
     var rangeErrorClass = firstValueError || secondValueError ? classes.datePickerError : undefined;
     var rangeSuccessClass = firstValueSuccess || secondValueSuccess ? classes.datePickerSuccess : undefined;
     var setFirstInputValue = function setFirstInputValue(value) {
@@ -220,55 +189,45 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         });
       }
     };
+    var dateFormatDelimiter = useCallback(function () {
+      return getDateFormatDelimiter(format);
+    }, [format]);
     var _useDatePicker = useDatePicker({
         currentValue: inputFirstValue,
+        setInputValue: setFirstInputValue,
+        setCalendarValue: setCalendarFirstValue,
+        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
         valueError: firstValueError,
-        valueSuccess: firstValueError,
+        valueSuccess: firstValueSuccess,
         name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        setCorrectDates: setCorrectStartDates,
-        setInputValue: setFirstInputValue,
-        setCalendarValue: setCalendarFirstValue,
         onChangeValue: onChangeFirstValue,
-        onCommitDate: onCommitFirstDate,
-        dateFormatDelimiter: dateFormatDelimiter
+        onCommitDate: onCommitFirstDate
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
-      handleFirstCalendarPick = _useDatePicker.handleCalendarPick,
-      handleSearchFirst = _useDatePicker.handleSearch,
+      handleCommitFirstDate = _useDatePicker.handleCommitDate,
       updateExternalFirstDate = _useDatePicker.updateExternalDate;
     var _useDatePicker2 = useDatePicker({
         currentValue: inputSecondValue,
+        setInputValue: setSecondInputValue,
+        setCalendarValue: setCalendarSecondValue,
+        dateFormatDelimiter: dateFormatDelimiter,
         format: format,
         lang: lang,
         disabled: disabled,
         readOnly: readOnly,
         maskWithFormat: maskWithFormat,
         valueError: secondValueError,
-        valueSuccess: secondValueError,
-        name: name,
-        type: type,
-        min: min,
-        max: max,
-        includeEdgeDates: includeEdgeDates,
-        setCorrectDates: setCorrectEndDates,
-        setInputValue: setSecondInputValue,
-        setCalendarValue: setCalendarSecondValue,
+        valueSuccess: secondValueSuccess,
         onChangeValue: onChangeSecondValue,
-        onCommitDate: onCommitSecondDate,
-        dateFormatDelimiter: dateFormatDelimiter
+        onCommitDate: onCommitSecondDate
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
-      handleSecondCalendarPick = _useDatePicker2.handleCalendarPick,
-      handleSearchSecond = _useDatePicker2.handleSearch,
+      handleCommitSecondDate = _useDatePicker2.handleCommitDate,
       updateExternalSecondDate = _useDatePicker2.updateExternalDate;
     var handleToggle = function handleToggle(currentOpened, event) {
       var _firstInputRef$curren, _secondInputRef$curre;
@@ -281,7 +240,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
           var _secondInputRef$curre2;
           secondInputRef === null || secondInputRef === void 0 || (_secondInputRef$curre2 = secondInputRef.current) === null || _secondInputRef$curre2 === void 0 || _secondInputRef$curre2.focus();
         }
-        if (calendarSecondValue && !calendarFirstValue) {
+        if (calendarSecondValue || !calendarFirstValue) {
           var _firstInputRef$curren2;
           firstInputRef === null || firstInputRef === void 0 || (_firstInputRef$curren2 = firstInputRef.current) === null || _firstInputRef$curren2 === void 0 || _firstInputRef$curren2.focus();
         }
@@ -307,75 +266,44 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         outerHandler === null || outerHandler === void 0 || outerHandler(event);
         return;
       }
-      var _getFormattedDates = getFormattedDates({
-          value: inputFirstValue,
-          delimiter: dateFormatDelimiter(),
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        startOriginalDate = _getFormattedDates.originalDate;
-      var _getFormattedDates2 = getFormattedDates({
-          value: inputSecondValue,
-          delimiter: dateFormatDelimiter(),
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        endOriginalDate = _getFormattedDates2.originalDate;
-      if (!calendarFirstValue && correctStartDates.calendar) {
-        startOriginalDate = new Date(correctStartDates.calendar);
-      }
-      if (!calendarSecondValue && correctEndDates.calendar) {
-        endOriginalDate = new Date(correctEndDates.calendar);
+      var _getDateFromFormat = getDateFromFormat(inputFirstValue, format, lang),
+        firstDate = _getDateFromFormat.value,
+        firstIsSuccess = _getDateFromFormat.isSuccess;
+      var _getDateFromFormat2 = getDateFromFormat(inputSecondValue, format, lang),
+        secondDate = _getDateFromFormat2.value,
+        secondIsSuccess = _getDateFromFormat2.isSuccess;
+      if (!firstIsSuccess || !secondIsSuccess) {
+        outerHandler === null || outerHandler === void 0 || outerHandler(event);
+        return;
       }
-      var _getSortedValues = getSortedValues([startOriginalDate, endOriginalDate]),
+      var _getSortedValues = getSortedValues([new Date(firstDate), new Date(secondDate)]),
         _getSortedValues2 = _slicedToArray(_getSortedValues, 2),
         startValue = _getSortedValues2[0],
         endValue = _getSortedValues2[1];
-      var _getFormattedDates3 = getFormattedDates({
-          value: startValue || null,
-          delimiter: dateFormatDelimiter(),
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        startFormattedDate = _getFormattedDates3.formattedDate;
-      var _getFormattedDates4 = getFormattedDates({
-          value: endValue || null,
-          delimiter: dateFormatDelimiter(),
-          lang: lang,
-          format: format,
-          includeEdgeDates: includeEdgeDates,
-          min: min,
-          max: max
-        }),
-        endFormattedDate = _getFormattedDates4.formattedDate;
-      setFirstInputValue(startFormattedDate);
-      setSecondInputValue(endFormattedDate);
-      setCalendarFirstValue(startOriginalDate);
-      setCalendarSecondValue(endOriginalDate);
+      setFirstInputValue(formatInputValue({
+        value: startValue,
+        format: format,
+        lang: lang
+      }));
+      setSecondInputValue(formatInputValue({
+        value: endValue,
+        format: format,
+        lang: lang
+      }));
+      setCalendarFirstValue(formatCalendarValue(startValue, format, lang));
+      setCalendarSecondValue(formatCalendarValue(endValue, format, lang));
       outerHandler === null || outerHandler === void 0 || outerHandler(event);
     };
     var _useKeyNavigation = useKeyNavigation({
         isCalendarOpen: isInnerOpen,
-        format: format,
-        maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
-        closeOnEsc: closeOnEsc,
-        onToggle: handleToggle
+        onToggle: handleToggle,
+        closeOnEsc: closeOnEsc
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var handleChangeStartOfRange = function handleChangeStartOfRange(chosenDate, dateInfo) {
       if (!fullDateEntered) {
-        handleFirstCalendarPick(chosenDate, dateInfo);
-        handleSecondCalendarPick(undefined);
+        handleCommitFirstDate(chosenDate, false, true, dateInfo);
+        handleCommitSecondDate('');
         return;
       }
       var prevValue = secondTextFieldClicked ? calendarFirstValue : calendarSecondValue;
@@ -383,8 +311,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         _getSortedValues4 = _slicedToArray(_getSortedValues3, 2),
         first = _getSortedValues4[0],
         second = _getSortedValues4[1];
-      handleFirstCalendarPick(first, dateInfo);
-      handleSecondCalendarPick(second, dateInfo);
+      handleCommitFirstDate(first, false, true, dateInfo);
+      handleCommitSecondDate(second, false, true, dateInfo);
       if (!firstValueError && !secondValueError && closeAfterDateSelect) {
         handleToggle(false);
       }
@@ -394,10 +322,10 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         firstDate = _ref5[0],
         secondDate = _ref5[1];
       if (firstDate) {
-        handleFirstCalendarPick(firstDate, dateInfo);
+        handleCommitFirstDate(firstDate, false, true, dateInfo);
       }
       if (secondDate) {
-        handleSecondCalendarPick(secondDate, dateInfo);
+        handleCommitSecondDate(secondDate, false, true, dateInfo);
       }
       if (firstDate && secondDate && !firstValueError && !secondValueError && closeAfterDateSelect) {
         handleToggle(false);
@@ -436,14 +364,14 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       onChangeSecondValue: handleChangeSecondValue,
       name: name,
       onSearchFirstValue: function onSearchFirstValue(_, date) {
-        handleSearchFirst(String(date));
+        handleCommitFirstDate(String(date), true, false);
         if (!calendarSecondValue || secondValueError) {
           var _rangeRef$current3;
           rangeRef === null || rangeRef === void 0 || (_rangeRef$current3 = rangeRef.current) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.secondTextField()) === null || _rangeRef$current3 === void 0 || (_rangeRef$current3 = _rangeRef$current3.current) === null || _rangeRef$current3 === void 0 || _rangeRef$current3.focus();
         }
       },
       onSearchSecondValue: function onSearchSecondValue(_, date) {
-        handleSearchSecond(String(date));
+        handleCommitSecondDate(String(date), true, false);
         if (!calendarFirstValue || firstValueError) {
           var _rangeRef$current4;
           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();
@@ -475,17 +403,13 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       }
     }, [calendarFirstValue, calendarSecondValue]);
     useLayoutEffect(function () {
-      updateExternalFirstDate(startExternalValue || undefined);
-    }, [startExternalValue, format, lang]);
-    useLayoutEffect(function () {
-      updateExternalSecondDate(endExternalValue || undefined);
-    }, [endExternalValue, format, lang]);
-    useLayoutEffect(function () {
-      !startExternalValue && updateExternalFirstDate(defaultFirstDate);
-    }, [defaultFirstDate, format, lang]);
+      var externalDate = startExternalValue || defaultFirstDate;
+      updateExternalFirstDate(externalDate, setFirstInputValue, setCalendarFirstValue);
+    }, [startExternalValue, defaultFirstDate, format, lang]);
     useLayoutEffect(function () {
-      !endExternalValue && updateExternalSecondDate(defaultSecondDate);
-    }, [defaultSecondDate, format, lang]);
+      var externalDate = endExternalValue || defaultSecondDate;
+      updateExternalSecondDate(externalDate, setSecondInputValue, setCalendarSecondValue);
+    }, [endExternalValue, defaultSecondDate, format, lang]);
     var RootWrapper = useCallback(function (_ref6) {
       var children = _ref6.children;
       return /*#__PURE__*/React.createElement(Root, {

package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { calendarDoubleConfig, calendarBaseTokens, withRange, calendarBaseConfig } from "../../../Calendar";
-import { component, mergeConfig } from "../../../../engines";
 import { tokens } from "../../DatePicker.tokens";
+import { component, mergeConfig } from "../../../../engines";
 import { baseCalendarTokens } from "../../DatePickerBase.styles";
 var mergedCalendarDoubleConfig = /*#__PURE__*/mergeConfig(calendarDoubleConfig);
 var CalendarDouble = /*#__PURE__*/component(mergedCalendarDoubleConfig);