@salutejs/plasma-new-hope 0.322.0-canary.1939.14642328722.0 → 0.322.0-canary.1939.14664752830.0

package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx

@@ -7,12 +7,12 @@ import { PropsTable, Description } from '@site/src/components';
 
 # Checkbox
 <Description name="Checkbox" />
-<PropsTable name="Checkbox" exclude={['css', 'focused']} />
+<PropsTable name="Checkbox" exclude={['css', 'focused']} include={['defaultChecked']} />
 
 :::caution Устаревшие значения для свойства view
-Актуальным значением для свойства `view` - является `accent`. 
+Актуальным значением для свойства `view` - является `accent`.
 
-Все остальные значения `deprecated` и будут удалены в ближайшее время! 
+Все остальные значения `deprecated` и будут удалены в ближайшее время!
 :::
 
 ## Использование

package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx

@@ -26,7 +26,7 @@ type Items = Array<{
          */
         label: string;
         /**
-        * Сторона открытия вложенного дропдауна относительно текущего элемента
+        * Сторона открытия вложенного dropdown относительно текущего элемента
         * @default right
         */
         placement?: Placement;
@@ -49,7 +49,7 @@ type Items = Array<{
     }>;
 ```
 
-Тип выбора комбобокса - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
+Тип выбора Combobox - одиночный или множественный зависит от типа `value` и `onChange`. В одиночном value - `string`, в множественном - `Array<string>`.\
 
 
 ## Примеры
@@ -85,8 +85,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             value={value}
@@ -131,8 +131,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             multiple
                             items={items}
@@ -180,8 +180,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             multiple
                             items={items}
@@ -200,9 +200,9 @@ type Items = Array<{
         ```
     </TabItem>
     <TabItem value="portal" label="Portal">
-        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\
+        Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется scroll, и список будет обрезаться, чего хотелось бы избежать.\
         Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\
-        Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
+        Также нужно прокинуть свойство `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала.
 
         ```tsx live
         import React, { useRef } from 'react';
@@ -232,11 +232,11 @@ type Items = Array<{
                 },
             ];
 
-            const ref = useRef(null)
+            const ref = useRef(null);
 
             return (
-                <div style={{ height: "300px" }} ref={ref}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }} ref={ref}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             value={value}
@@ -283,8 +283,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             placeholder="Placeholder"
@@ -329,9 +329,9 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{width: "300px" }}>
-                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style={{ marginBottom: '1rem' }} />
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{width: "300px" }}>
+                        <Button text={ alwaysOpened ? 'По умолчанию' : 'Всегда открыт' } onClick={() => setAlwaysOpened(!alwaysOpened)} style=\{{ marginBottom: '1rem' }} />
                         <Combobox
                             items={items}
                             placeholder="Placeholder"
@@ -345,6 +345,37 @@ type Items = Array<{
         }
         ```
     </TabItem>
+    <TabItem value="virtual" label="Virtual">
+        :::caution
+            Работает только в одно-уровневых списках.
+        :::
+
+        Свойство `virtual` позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство `listMaxHeight`.
+
+       ```tsx live
+        import React from 'react';
+        import { Combobox } from '@salutejs/{{ package }}';
+
+        export function App() {
+            const items = Array(5000).fill(1).map((_, i) => ({ value: i.toString(), label: i.toString() }));
+
+            return (
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{width: "300px" }}>
+                        <Combobox
+                            items={items}
+                            virtual
+                            listMaxHeight="200px"
+                            placeholder="Placeholder"
+                            label="Label"
+                            helperText="Helper text"
+                        />
+                    </div>
+                </div>
+            );
+        }
+    ```
+    </TabItem>
     <TabItem value="infinite" label="Infinite Loading">
         Пример с бесконечной загрузкой элементов в списке.
 
@@ -388,8 +419,8 @@ type Items = Array<{
             };
 
             return (
-                <div style={{ height: "300px" }}>
-                    <div style={{ width: "300px" }}>
+                <div style=\{{ height: "300px" }}>
+                    <div style=\{{ width: "300px" }}>
                         <Combobox
                             items={items}
                             listMaxHeight="200px"
@@ -411,7 +442,7 @@ type Items = Array<{
 ## Использование с React Hook Form и нативной формой
 
 :::caution Использование атрибута `name`
-Используйте  свойство `name` только когда это необходимо. Оно влияет на выходной тип в `onChange`.
+Используйте свойство `name` только когда это необходимо. Оно влияет на выходной тип в `onChange`.
 :::
 
 <Tabs>
@@ -462,8 +493,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={handleSubmit(onSubmit)} style=\{{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                         <Combobox
                             items={items}
                             {...register('combobox')}
@@ -525,8 +556,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={handleSubmit(onSubmit)} style=\{{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
                         <Controller
                             control={control}
                             name="combobox"
@@ -598,8 +629,8 @@ type Items = Array<{
             ];
 
             return (
-                <div style={{ display: "flex", gap: "30px", height: "300px" }}>
-                    <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+                <div style=\{{ display: "flex", gap: "30px", height: "300px" }}>
+                    <form onSubmit={onSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
                         <Combobox label="Combobox" name="combobox" defaultValue={"brazil"} items={items} />
                         <Combobox label="Combobox" name="comboboxMulti" defaultValue={["brazil"]} items={items} multiple />
                         <Button type="submit">Отправить</Button>

package/styled-components/cjs/components/DatePicker/DatePicker.template-doc.mdx

@@ -194,6 +194,11 @@ export function App() {
 ```
 
 ### Обязательность поля
+
+:::tip
+Наличие индикатора регулируется свойством `hasRequiredIndicator`.
+:::
+
 Обязательность поля задаётся с помощью свойства `required`. 
 Если поле является обязательным, то у компонента появляется специальный индикатор. 
 Изменить расположение индикатора можно с помощью свойства `requiredPlacement`, которое принимает значения `left` и `right`. 

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

@@ -124,7 +124,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _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");
+      throw new Error("Controlled DatePicker can't have `default{First|Second}Date`, use `value` instead");
     }
     var rangeRef = ref && 'current' in ref ? ref : /*#__PURE__*/(0, _react.createRef)();
     var rootRef = (0, _react.useRef)(null);
@@ -142,16 +142,14 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var dateFormatDelimiter = (0, _react.useCallback)(function () {
-      return (0, _dateHelper.getDateFormatDelimiter)(format);
-    }, [format]);
+    var dateFormatDelimiter = (0, _dateHelper.getDateFormatDelimiter)(format);
     var _ref2 = externalValue || [],
       _ref3 = _slicedToArray(_ref2, 2),
       startExternalValue = _ref3[0],
       endExternalValue = _ref3[1];
     var startInitialValues = (0, _utils3.getFormattedDates)({
       value: startExternalValue || defaultFirstDate,
-      delimiter: dateFormatDelimiter(),
+      delimiter: dateFormatDelimiter,
       lang: lang,
       format: format,
       includeEdgeDates: includeEdgeDates,
@@ -160,7 +158,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
     });
     var endInitialValues = (0, _utils3.getFormattedDates)({
       value: endExternalValue || defaultSecondDate,
-      delimiter: dateFormatDelimiter(),
+      delimiter: dateFormatDelimiter,
       lang: lang,
       format: format,
       includeEdgeDates: includeEdgeDates,
@@ -243,12 +241,12 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         min: min,
         max: max,
         includeEdgeDates: includeEdgeDates,
+        dateFormatDelimiter: dateFormatDelimiter,
         setCorrectDates: setCorrectStartDates,
         setInputValue: setFirstInputValue,
         setCalendarValue: setCalendarFirstValue,
         onChangeValue: onChangeFirstValue,
-        onCommitDate: onCommitFirstDate,
-        dateFormatDelimiter: dateFormatDelimiter
+        onCommitDate: onCommitFirstDate
       }),
       handleChangeFirstValue = _useDatePicker.handleChangeValue,
       handleFirstCalendarPick = _useDatePicker.handleCalendarPick,
@@ -268,12 +266,12 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         min: min,
         max: max,
         includeEdgeDates: includeEdgeDates,
+        dateFormatDelimiter: dateFormatDelimiter,
         setCorrectDates: setCorrectEndDates,
         setInputValue: setSecondInputValue,
         setCalendarValue: setCalendarSecondValue,
         onChangeValue: onChangeSecondValue,
-        onCommitDate: onCommitSecondDate,
-        dateFormatDelimiter: dateFormatDelimiter
+        onCommitDate: onCommitSecondDate
       }),
       handleChangeSecondValue = _useDatePicker2.handleChangeValue,
       handleSecondCalendarPick = _useDatePicker2.handleCalendarPick,
@@ -318,7 +316,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       }
       var _getFormattedDates = (0, _utils3.getFormattedDates)({
           value: inputFirstValue,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -328,7 +326,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         startOriginalDate = _getFormattedDates.originalDate;
       var _getFormattedDates2 = (0, _utils3.getFormattedDates)({
           value: inputSecondValue,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -348,7 +346,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         endValue = _getSortedValues2[1];
       var _getFormattedDates3 = (0, _utils3.getFormattedDates)({
           value: startValue || null,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -358,7 +356,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         startFormattedDate = _getFormattedDates3.formattedDate;
       var _getFormattedDates4 = (0, _utils3.getFormattedDates)({
           value: endValue || null,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -376,7 +374,7 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
         isCalendarOpen: isInnerOpen,
         format: format,
         maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
+        delimiter: dateFormatDelimiter,
         closeOnEsc: closeOnEsc,
         onToggle: handleToggle
       }),
@@ -490,10 +488,10 @@ var datePickerRangeRoot = exports.datePickerRangeRoot = function datePickerRange
       updateExternalSecondDate(endExternalValue || undefined);
     }, [endExternalValue, format, lang]);
     (0, _react.useLayoutEffect)(function () {
-      !startExternalValue && updateExternalFirstDate(defaultFirstDate);
+      updateExternalFirstDate(defaultFirstDate);
     }, [defaultFirstDate, format, lang]);
     (0, _react.useLayoutEffect)(function () {
-      !endExternalValue && updateExternalSecondDate(defaultSecondDate);
+      updateExternalSecondDate(defaultSecondDate);
     }, [defaultSecondDate, format, lang]);
     var RootWrapper = (0, _react.useCallback)(function (_ref6) {
       var children = _ref6.children;

package/styled-components/cjs/components/DatePicker/SingleDate/SingleDate.js

@@ -103,7 +103,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       autoComplete = _ref.autoComplete,
       rest = _objectWithoutProperties(_ref, _excluded);
     if (value && defaultDate) {
-      console.error("Controlled DatePicker can't have `defaultDate`, use `value` instead");
+      throw new Error("Controlled DatePicker can't have `defaultDate`, use `value` instead");
     }
     var inputRef = (0, _react.useRef)(null);
     var innerRef = (0, _react.useRef)(null);
@@ -111,12 +111,10 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
-    var dateFormatDelimiter = (0, _react.useCallback)(function () {
-      return (0, _dateHelper.getDateFormatDelimiter)(format);
-    }, [format]);
+    var dateFormatDelimiter = (0, _dateHelper.getDateFormatDelimiter)(format);
     var initialValues = (0, _utils2.getFormattedDates)({
       value: value || defaultDate,
-      delimiter: dateFormatDelimiter(),
+      delimiter: dateFormatDelimiter,
       lang: lang,
       format: format,
       includeEdgeDates: includeEdgeDates,
@@ -186,7 +184,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
         isCalendarOpen: isInnerOpen,
         format: format,
         maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
+        delimiter: dateFormatDelimiter,
         closeOnEsc: closeOnEsc,
         onToggle: handleToggle
       }),
@@ -234,9 +232,7 @@ var datePickerRoot = exports.datePickerRoot = function datePickerRoot(Root) {
       updateExternalDate(value);
     }, [value, format, lang]);
     (0, _react.useLayoutEffect)(function () {
-      if (!value) {
-        updateExternalDate(defaultDate);
-      }
+      updateExternalDate(defaultDate);
     }, [defaultDate, format, lang]);
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: view,

package/styled-components/cjs/components/DatePicker/hooks/useDatePicker.js

@@ -23,10 +23,10 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     max = _ref.max,
     includeEdgeDates = _ref.includeEdgeDates,
     maskWithFormat = _ref.maskWithFormat,
+    dateFormatDelimiter = _ref.dateFormatDelimiter,
     setCorrectDates = _ref.setCorrectDates,
     setInputValue = _ref.setInputValue,
     setCalendarValue = _ref.setCalendarValue,
-    dateFormatDelimiter = _ref.dateFormatDelimiter,
     onChangeValue = _ref.onChangeValue,
     onCommitDate = _ref.onCommitDate,
     onChange = _ref.onChange;
@@ -51,11 +51,11 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       return;
     }
     var value = event.target.value;
-    var newValue = maskWithFormat ? (0, _utils2.getMaskedDateOnInput)(value, format, dateFormatDelimiter(), currentValue) : value;
+    var newValue = maskWithFormat ? (0, _utils2.getMaskedDateOnInput)(value, format, dateFormatDelimiter, currentValue) : value;
     var _getFormattedDates = (0, _utils2.getFormattedDates)({
         value: newValue,
         lang: lang,
-        delimiter: dateFormatDelimiter(),
+        delimiter: dateFormatDelimiter,
         format: format,
         includeEdgeDates: includeEdgeDates,
         min: min,
@@ -70,18 +70,24 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
         input: formattedDate
       });
       var dateInfo = getQuarterInfo(originalDate);
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
+      if (onCommitDate) {
+        onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
+      }
       setCalendarValue(originalDate);
       setInputValue(formattedDate);
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, formattedDate, originalDate, isoDate);
-      onChange === null || onChange === void 0 || onChange({
-        target: {
-          value: formattedDate,
-          originalDate: originalDate,
-          isoDate: isoDate,
-          name: name
-        }
-      });
+      if (onChangeValue) {
+        onChangeValue(event, formattedDate, originalDate, isoDate);
+      }
+      if (onChange) {
+        onChange({
+          target: {
+            value: formattedDate,
+            originalDate: originalDate,
+            isoDate: isoDate,
+            name: name
+          }
+        });
+      }
       return;
     }
     if (formattedDate === '') {
@@ -92,15 +98,19 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     }
     setCalendarValue(originalDate);
     setInputValue(formattedDate);
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, formattedDate, originalDate, isoDate);
-    onChange === null || onChange === void 0 || onChange({
-      target: {
-        value: formattedDate,
-        originalDate: originalDate,
-        isoDate: isoDate,
-        name: name
-      }
-    });
+    if (onChangeValue) {
+      onChangeValue(event, formattedDate, originalDate, isoDate);
+    }
+    if (onChange) {
+      onChange({
+        target: {
+          value: formattedDate,
+          originalDate: originalDate,
+          isoDate: isoDate,
+          name: name
+        }
+      });
+    }
   };
   var handleSearch = function handleSearch(date) {
     if (disabled || readOnly) {
@@ -109,12 +119,15 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
     if (!date) {
       setCalendarValue(undefined);
       setInputValue('');
-      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate('', false, true, undefined, undefined, '');
+      if (onCommitDate) {
+        onCommitDate('', false, true, undefined, undefined, '');
+      }
+      return;
     }
     var _getFormattedDates2 = (0, _utils2.getFormattedDates)({
         value: date,
         lang: lang,
-        delimiter: dateFormatDelimiter(),
+        delimiter: dateFormatDelimiter,
         format: format,
         includeEdgeDates: includeEdgeDates,
         min: min,
@@ -125,7 +138,9 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       originalDate = _getFormattedDates2.originalDate;
     if (originalDate) {
       var dateInfo = getQuarterInfo(originalDate);
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
+      if (onCommitDate) {
+        onCommitDate(formattedDate, false, true, dateInfo, originalDate, isoDate);
+      }
     }
   };
   var handleCalendarPick = function handleCalendarPick(date, dateInfo) {
@@ -139,16 +154,22 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
         calendar: date || undefined,
         input: ''
       });
-      onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, '', date, '');
-      onChange === null || onChange === void 0 || onChange({
-        target: {
-          value: '',
-          originalDate: date,
-          isoDate: '',
-          name: name
-        }
-      });
-      onCommitDate === null || onCommitDate === void 0 || onCommitDate('', false, true, dateInfo, date || undefined, '');
+      if (onChangeValue) {
+        onChangeValue(null, '', date, '');
+      }
+      if (onChange) {
+        onChange({
+          target: {
+            value: '',
+            originalDate: date,
+            isoDate: '',
+            name: name
+          }
+        });
+      }
+      if (onCommitDate) {
+        onCommitDate('', false, true, dateInfo, date || undefined, '');
+      }
       return;
     }
     _datejs.customDayjs.locale(lang);
@@ -160,22 +181,28 @@ var useDatePicker = exports.useDatePicker = function useDatePicker(_ref) {
       calendar: date,
       input: formattedDate
     });
-    onChangeValue === null || onChangeValue === void 0 || onChangeValue(null, formattedDate, date, isoDate);
-    onChange === null || onChange === void 0 || onChange({
-      target: {
-        value: formattedDate,
-        originalDate: date,
-        isoDate: isoDate,
-        name: name
-      }
-    });
-    onCommitDate === null || onCommitDate === void 0 || onCommitDate(formattedDate, false, true, dateInfo, date, isoDate);
+    if (onChangeValue) {
+      onChangeValue(null, formattedDate, date, isoDate);
+    }
+    if (onChange) {
+      onChange({
+        target: {
+          value: formattedDate,
+          originalDate: date,
+          isoDate: isoDate,
+          name: name
+        }
+      });
+    }
+    if (onCommitDate) {
+      onCommitDate(formattedDate, false, true, dateInfo, date, isoDate);
+    }
   };
   var updateExternalDate = function updateExternalDate(externalDate) {
     var _getFormattedDates3 = (0, _utils2.getFormattedDates)({
         value: externalDate || null,
         lang: lang,
-        delimiter: dateFormatDelimiter(),
+        delimiter: dateFormatDelimiter,
         format: format,
         includeEdgeDates: includeEdgeDates,
         min: min,

package/styled-components/cjs/components/DatePicker/utils/getOriginalDates.js

@@ -5,6 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getOriginalDates = void 0;
 var _datejs = /*#__PURE__*/require("../../../utils/datejs");
+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); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var initialValueStructure = {
   isoDate: '',
   originalDate: undefined,
@@ -32,5 +38,7 @@ var getOriginalDates = exports.getOriginalDates = function getOriginalDates(valu
       originalDate: originalDate
     };
   }
-  return initialValueStructure;
+  return _objectSpread(_objectSpread({}, initialValueStructure), {}, {
+    formattedDate: value
+  });
 };