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

package/emotion/es/components/TextField/TextField.template-doc.mdx

@@ -37,7 +37,7 @@ export function App() {
 ```
 
 ### Размер поля
-Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l"` и `"m"`:
+Размер поля задаётся с помощью свойства `size`. Свойство принимает значения `"l" | "m" | "s" | "xs"`:
 
 ```tsx live
 import React from 'react';
@@ -53,8 +53,8 @@ export function App() {
             />
             <TextField
                 placeholder="Размер"
-                size="m"
-                defaultValue="M48"
+                size="s"
+                defaultValue="S40"
             />
         </div>
     );
@@ -62,9 +62,9 @@ export function App() {
 ```
 
 ### Статус поля
-Статус поля задается с помощью свойства `status`.
-Возможные значения свойства: `success`, `warning` и `error`.
-На отображение TextField так же влияют свойства `clear` и `hasDivider`:
+Статус поля задается с помощью свойства `view`.
+
+Возможные значения свойства: `"positive" | "warning" | "negative"`
 
 ```tsx live
 import React from 'react';
@@ -75,46 +75,61 @@ export function App() {
         <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <div style=\{{ display: "flex", gap: "0.5rem" }}>
                 <TextField
-                    placeholder="Статус"
-                    status="success"
+                    placeholder="Статус positive"
+                    view="positive"
                     size="m"
-                    defaultValue="Успех"
+                    defaultValue="Positive"
                 />
                 <TextField
-                    placeholder="Статус"
-                    status="warning"
+                    placeholder="Статус warning"
+                    view="warning"
                     size="m"
-                    defaultValue="Предупреждение"
+                    defaultValue="Warning"
                 />
                 <TextField
-                    placeholder="Статус"
-                    status="error"
+                    placeholder="Статус Ошибка"
+                    view="negative"
                     size="m"
-                    defaultValue="Ошибка"
+                    defaultValue="Negative"
                 />
             </div>
+        </div>
+    );
+}
+```
+
+### Вариация Clear
+На отображение компонента так же влияют свойства `clear` и `hasDivider`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div style=\{{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <div style=\{{ display: "flex", gap: "0.5rem" }}>
                 <TextField
-                    placeholder="Статус"
-                    status="success"
+                    placeholder="Статус positive"
+                    view="positive"
                     size="m"
-                    defaultValue="Успех"
+                    defaultValue="Positive"
                     clear
                     hasDivider
                 />
                 <TextField
-                    placeholder="Статус"
-                    status="warning"
+                    placeholder="Статус warning"
+                    view="warning"
                     size="m"
-                    defaultValue="Предупреждение"
+                    defaultValue="Warning"
                     clear
                     hasDivider
                 />
                 <TextField
-                    placeholder="Статус"
-                    status="error"
+                    placeholder="Статус negative"
+                    view="negative"
                     size="m"
-                    defaultValue="Ошибка"
+                    defaultValue="Negative"
                     clear
                     hasDivider
                 />
@@ -125,8 +140,11 @@ export function App() {
 ```
 
 ### Подсказка
-Для вывода подсказки снизу от поля используйте свойство `helperText`,
-для подсказки в виде Tooltip - `hintText`, для подсказки сверху справа - `titleCaption`:
+Для вывода подсказок:
+
+- `leftHelper` внизу слева под компонентом
+- `titleCaption` сверху справа над компонентом
+- `hintText` для подсказки в виде `Tooltip`
 
 ```tsx live
 import React from 'react';
@@ -138,7 +156,7 @@ export function App() {
             <TextField
                 placeholder="Введите значение"
                 defaultValue="Значение"
-                helperText="Подсказка снизу"
+                leftHelper="Подсказка снизу"
                 titleCaption="Подсказка сверху"
                 hintText="Подсказка в виде Tooltip"
                 hintView="default"
@@ -151,7 +169,9 @@ export function App() {
 
 ### Режим ввода
 С помощью свойства `enumerationType` можно вводить элементы как теги. Свойство `chipType` изменяет внешний вид чипа.
-С помощью `chipView` можно задать общий вид Chip. Валидация Chip происходит с помощью функции chipValidator.
+
+С помощью `chipView` можно задать общий вид `Chip`. Валидация `Chip` происходит с помощью функции `chipValidator`.
+
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip.
 
 ```tsx live
@@ -168,7 +188,7 @@ export function App() {
                 defaultValue="Значение"
                 size="l"
                 enumerationType="chip"
-                helperText="Подсказка снизу"
+                leftHelper="Подсказка снизу"
                 chips={["Значение 1", "Значение 2"]}
                 chipView="positive"
                 chipValidator={validateChip}
@@ -179,7 +199,7 @@ export function App() {
                 defaultValue="Значение"
                 size="l"
                 enumerationType="chip"
-                helperText="Подсказка снизу"
+                leftHelper="Подсказка снизу"
                 chips={["Значение 1"]}
                 chipType="text"
             />
@@ -188,9 +208,15 @@ export function App() {
 }
 ```
 
-
 ### Обязательность поля
-Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+:::tip
+Наличие индикатора регулируется свойством `hasRequiredIndicator`.
+:::
+
+Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`.
+
+Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
 
 ```tsx live
 import React from 'react';
@@ -209,7 +235,66 @@ export function App() {
                 required
                 requiredPlacement="right"
             />
+            <TextField
+                placeholder="Введите значение"
+                label="Поле обязательное, но не имеет визуального индикатора"
+                required
+                requiredPlacement="right"
+                hasRequiredIndicator={false}
+            />
         </div>
     );
 }
 ```
+
+## Примеры
+
+### TextField + очистка поля
+
+```tsx live
+import React, { useState } from "react";
+import { TextField } from "@salutejs/{{ package }}";
+import { IconClose } from "@salutejs/plasma-icons";
+
+export function App() {
+  const [value, setValue] = useState("");
+
+  const ControlClear = (props: { onClick: () => void }) => {
+      return (
+        <div {...props}>
+          <IconClose size="xs" color="inherit" />
+        </div>
+      );
+  };
+
+  return (
+    <div>
+      <TextField
+        placeholder="Положение иконки"
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+        contentRight={
+          <ControlClear
+            onClick={() => {
+              setValue("");
+            }}
+          />
+        }
+      />
+    </div>
+  );
+}
+```
+
+## Клавиатурная навигация
+
+Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
+-  по нажатию `Tab` фокусируемся на input
+-  если enumeratinType=`chip` после ввода текста, по нажатию `Enter`, input очистится и появится Chip
+-  если введен текст в input по нажатию `ArrowLeft` или `ArrowRight` каретка передвигается по тексту
+-  при достижении левой границы текста или отсутствии текста в input, при нажатии `Backspace` удаляем последний Chip, если он есть
+-  при достижении левой границы текста или отсутствии текста в input, при нажатии `ArrowLeft` переключаемся на последний Chip, если он есть
+-  при фокусе на Chip работает переключение фокуса на другие Chip по нажатию `ArrowLeft`, `ArrowRight`; если же Chip крайний правый, при нажатии `ArrowRight` фокус переходит на input
+

package/emotion/es/components/Toast/Toast.template-doc.mdx

@@ -9,6 +9,11 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="Toast" />
 <PropsTable name="Toast" />
 
+:::caution Устаревшие значения свойства `view`
+Значения `dark` и `light` являются устаревшими.<br/>
+Для изменения фона `Toast` используйте компонент `ViewContainer` (см. <a href="#пример-использования">пример использования</a>)
+:::
+
 ## Система подсказок
 Существует готовая система текстовых подсказок, для использования которой необходимо обернуть приложение в `ToastProvider`:
 
@@ -120,7 +125,6 @@ export interface ShowToastArgs {
 ```
 
 ## Пример использования
-
 Для изменения цветовой темы компонента `Toast` используйте свойство `view` компонента `ViewContainer`.
 
 ```jsx live
@@ -130,7 +134,7 @@ import { useToast, ToastProvider, Button, ViewContainer } from '@salutejs/{{ pac
 export function App() {
 
     const ToastExample = () => {
-        const { showToast, hideToast } = useToast()
+        const { showToast } = useToast()
 
         const onShow = () => {}
         const onHide = () => {}
@@ -168,3 +172,45 @@ export function App() {
     )
 }
 ```
+
+## Вид иконки
+Значения `positive` и `negative` свойства `view` изменяют цвет иконки.<br/>
+Чтобы цвет применился, установите в иконке свойство `color` со значением `inherit`:
+
+```jsx live
+import React from 'react'
+import { IconBell } from '@salutejs/plasma-icons';
+import { useToast, ToastProvider, Button } from '@salutejs/{{ package }}'
+
+export function App() {
+    const Icon = () => <IconBell color="inherit" size="xs" />;
+
+    const ToastExample = () => {
+        const { showToast } = useToast()
+
+        const onShow = () => {}
+        const onHide = () => {}
+        const toastData = {
+            contentLeft: <Icon />,
+            text: 'Подсказка c иконкой',
+            position: 'bottom',
+            role: 'status',
+            hasClose: true,
+            fade: false,
+            size: 'm',
+            view: 'positive',
+            timeout: 3000,
+            onShow,
+            onHide
+        }
+
+        return <Button onClick={() => showToast(toastData)} text="Вызвать подсказку" />
+    }
+
+    return (
+        <ToastProvider>
+            <ToastExample />
+        </ToastProvider>
+    )
+}
+```

package/emotion/es/components/Tooltip/Tooltip.template-doc.mdx

@@ -17,13 +17,28 @@ import { PropsTable, Description } from '@site/src/components';
 
 ```tsx live
 import React from 'react';
-import { Tooltip } from '@salutejs/{{ package }}';
-import { IconApps } from '@salutejs/plasma-icons';
+import { Tooltip, Button } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <div style=\{{marginLeft: '100px',marginBottom: '35px'}}>
-            <Tooltip target={( <IconApps />)} text="Высокое качество воспроизведения" placement="bottom" hasArrow opened />
+        <div style=\{{display: 'grid', gridTemplateColumns: 'repeat(3, max-content)', gridGap: '1rem 3.5rem', padding: '3.5rem'}}>
+            <Tooltip
+                target={<Tooltip target={<Button>Btn</Button>} placement="left" opened text="left" />}
+                placement="top-start"
+                opened
+                text="top-start"
+                view="default"
+            />
+            <Tooltip target={<Button>Btn</Button>} placement="top" opened text="top" />
+            <Tooltip
+                target={<Tooltip target={<Button>Btn</Button>} placement="right" opened text="right" />}
+                placement="top-end"
+                opened
+                text="top-end"
+            />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom-start" opened text="bottom-start" />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom" opened text="bottom" />
+            <Tooltip target={<Button>Btn</Button>} placement="bottom-end" opened text="bottom-end" />
         </div>
     );
 }

package/emotion/es/components/Tree/Tree.template-doc.mdx

@@ -218,4 +218,3 @@ type TreeItem = {
         ```
     </TabItem>
 </Tabs>
-

package/es/components/Calendar/utils/calendarRangeHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendarRangeHelper.js","sources":["../../../../src/components/Calendar/utils/calendarRangeHelper.ts"],"sourcesContent":["import { CalendarValueType, DateObject, DateType } from '../Calendar.types';\n\nexport const getSortedValues = (values: [DateType, DateType?]) =>\n    values.sort((start, end) => {\n        if (!start || !end) {\n            return -1;\n        }\n\n        return start.getTime() - end.getTime();\n    });\n\nexport const isDateInRange = (year: number, monthIndex: number, currentDay: number, values: [DateType, DateType]) => {\n    const [startValue, endValue] = getSortedValues(values);\n\n    if (!endValue || !startValue) {\n        return false;\n    }\n\n    const day = new Date(year, monthIndex, currentDay);\n    return startValue < day && day <= endValue;\n};\n\nexport const isSameDay = (firstDate: DateObject, secondDate?: DateObject) =>\n    secondDate &&\n    firstDate.day === secondDate.day &&\n    firstDate.monthIndex === secondDate.monthIndex &&\n    firstDate.year === secondDate.year;\n\nexport const isValueUpdate = (value: DateType | [DateType, DateType], prevValue: DateType | [DateType, DateType]) => {\n    if (!Array.isArray(value) && !Array.isArray(prevValue)) {\n        return prevValue?.getTime() !== value?.getTime();\n    }\n\n    if (Array.isArray(value) && Array.isArray(prevValue)) {\n        return prevValue[0]?.getTime() !== value[0]?.getTime() || prevValue[1]?.getTime() !== value[1]?.getTime();\n    }\n\n    return false;\n};\n\n/**\n * Метод проверяет, находится ли календарь в режиме выбора второго значения.\n */\nexport const isSelectProcess = (array: unknown | unknown[]): array is [Date, Date?] =>\n    Array.isArray(array) && !array[1];\n\n/**\n * Метод возвращает сторону, когда выбор второго значения диапазона завершён.\n */\nexport const getSideForSelected = (date: DateObject, startValue: Date, endValue: Date) => {\n    const currentDateTime = new Date(date.year, date.monthIndex, date.day).getTime();\n    const startValueTime = startValue.getTime();\n    const endValueTime = endValue.getTime();\n\n    if (currentDateTime === startValueTime) {\n        return 'right';\n    }\n\n    if (currentDateTime === endValueTime) {\n        return 'left';\n    }\n\n    return undefined;\n};\n\n/**\n * Метод возвращает сторону, во время выбора второго значения диапазона.\n */\nexport const getSideForHovered = (date: DateObject, hoveredDay: DateObject, startValue: Date, isSelected?: boolean) => {\n    const dateHover = new Date(hoveredDay.year, hoveredDay.monthIndex, hoveredDay.day);\n    const isHovered = isSameDay(date, hoveredDay);\n\n    if ((isSelected && startValue > dateHover) || (isHovered && startValue < dateHover)) {\n        return 'left';\n    }\n\n    if ((isSelected && startValue < dateHover) || (isHovered && startValue > dateHover)) {\n        return 'right';\n    }\n\n    return undefined;\n};\n\n/**\n * Метод возвращает сторону, с которой нужно отрисовать направление полоски диапазона.\n */\nexport const getSideInRange = (\n    value: CalendarValueType,\n    date: DateObject,\n    hoveredDay?: DateObject,\n    isSelected?: boolean,\n) => {\n    if (!Array.isArray(value)) {\n        return undefined;\n    }\n\n    const [startValue, endValue] = value;\n\n    if (startValue && isSelected && endValue) {\n        return getSideForSelected(date, startValue, endValue);\n    }\n\n    if (startValue && hoveredDay) {\n        return getSideForHovered(date, hoveredDay, startValue, isSelected);\n    }\n\n    return undefined;\n};\n\n/**\n * Метод проверяет, находится ли выбранный день в диапазоне.\n */\nexport const getInRange = (value: CalendarValueType, date: DateObject, hoveredDay?: DateObject, inRange?: boolean) => {\n    if (!isSelectProcess(value) || !hoveredDay) {\n        return inRange;\n    }\n\n    const dateSelected = value[0];\n    const dateHover = new Date(hoveredDay.year, hoveredDay.monthIndex, hoveredDay.day);\n    const dateCurrent = new Date(date.year, date.monthIndex, date.day);\n\n    if (\n        (dateSelected < dateCurrent && dateCurrent < dateHover) ||\n        (dateSelected > dateCurrent && dateCurrent > dateHover)\n    ) {\n        return true;\n    }\n\n    return inRange;\n};\n"],"names":["getSortedValues","values","sort","start","end","getTime","isDateInRange","year","monthIndex","currentDay","_getSortedValues","_getSortedValues2","_slicedToArray","startValue","endValue","day","Date","isSameDay","firstDate","secondDate","isValueUpdate","value","prevValue","Array","isArray","_prevValue$","_value$","_prevValue$2","_value$2","isSelectProcess","array","getSideForSelected","date","currentDateTime","startValueTime","endValueTime","undefined","getSideForHovered","hoveredDay","isSelected","dateHover","isHovered","getSideInRange","_value","getInRange","inRange","dateSelected","dateCurrent"],"mappings":"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"}
+{"version":3,"file":"calendarRangeHelper.js","sources":["../../../../src/components/Calendar/utils/calendarRangeHelper.ts"],"sourcesContent":["import { CalendarValueType, DateObject, DateType } from '../Calendar.types';\n\nexport const getSortedValues = (values: [DateType, DateType]) =>\n    values.sort((start, end) => {\n        if (!start || !end) {\n            return -1;\n        }\n\n        return start.getTime() - end.getTime();\n    });\n\nexport const isDateInRange = (year: number, monthIndex: number, currentDay: number, values: [DateType, DateType]) => {\n    const [startValue, endValue] = getSortedValues(values);\n\n    if (!endValue || !startValue) {\n        return false;\n    }\n\n    const day = new Date(year, monthIndex, currentDay);\n    return startValue < day && day <= endValue;\n};\n\nexport const isSameDay = (firstDate: DateObject, secondDate?: DateObject) =>\n    secondDate &&\n    firstDate.day === secondDate.day &&\n    firstDate.monthIndex === secondDate.monthIndex &&\n    firstDate.year === secondDate.year;\n\nexport const isValueUpdate = (value: DateType | [DateType, DateType], prevValue: DateType | [DateType, DateType]) => {\n    if (!Array.isArray(value) && !Array.isArray(prevValue)) {\n        return prevValue?.getTime() !== value?.getTime();\n    }\n\n    if (Array.isArray(value) && Array.isArray(prevValue)) {\n        return prevValue[0]?.getTime() !== value[0]?.getTime() || prevValue[1]?.getTime() !== value[1]?.getTime();\n    }\n\n    return false;\n};\n\n/**\n * Метод проверяет, находится ли календарь в режиме выбора второго значения.\n */\nexport const isSelectProcess = (array: unknown | unknown[]): array is [Date, Date?] =>\n    Array.isArray(array) && !array[1];\n\n/**\n * Метод возвращает сторону, когда выбор второго значения диапазона завершён.\n */\nexport const getSideForSelected = (date: DateObject, startValue: Date, endValue: Date) => {\n    const currentDateTime = new Date(date.year, date.monthIndex, date.day).getTime();\n    const startValueTime = startValue.getTime();\n    const endValueTime = endValue.getTime();\n\n    if (currentDateTime === startValueTime) {\n        return 'right';\n    }\n\n    if (currentDateTime === endValueTime) {\n        return 'left';\n    }\n\n    return undefined;\n};\n\n/**\n * Метод возвращает сторону, во время выбора второго значения диапазона.\n */\nexport const getSideForHovered = (date: DateObject, hoveredDay: DateObject, startValue: Date, isSelected?: boolean) => {\n    const dateHover = new Date(hoveredDay.year, hoveredDay.monthIndex, hoveredDay.day);\n    const isHovered = isSameDay(date, hoveredDay);\n\n    if ((isSelected && startValue > dateHover) || (isHovered && startValue < dateHover)) {\n        return 'left';\n    }\n\n    if ((isSelected && startValue < dateHover) || (isHovered && startValue > dateHover)) {\n        return 'right';\n    }\n\n    return undefined;\n};\n\n/**\n * Метод возвращает сторону, с которой нужно отрисовать направление полоски диапазона.\n */\nexport const getSideInRange = (\n    value: CalendarValueType,\n    date: DateObject,\n    hoveredDay?: DateObject,\n    isSelected?: boolean,\n) => {\n    if (!Array.isArray(value)) {\n        return undefined;\n    }\n\n    const [startValue, endValue] = value;\n\n    if (startValue && isSelected && endValue) {\n        return getSideForSelected(date, startValue, endValue);\n    }\n\n    if (startValue && hoveredDay) {\n        return getSideForHovered(date, hoveredDay, startValue, isSelected);\n    }\n\n    return undefined;\n};\n\n/**\n * Метод проверяет, находится ли выбранный день в диапазоне.\n */\nexport const getInRange = (value: CalendarValueType, date: DateObject, hoveredDay?: DateObject, inRange?: boolean) => {\n    if (!isSelectProcess(value) || !hoveredDay) {\n        return inRange;\n    }\n\n    const dateSelected = value[0];\n    const dateHover = new Date(hoveredDay.year, hoveredDay.monthIndex, hoveredDay.day);\n    const dateCurrent = new Date(date.year, date.monthIndex, date.day);\n\n    if (\n        (dateSelected < dateCurrent && dateCurrent < dateHover) ||\n        (dateSelected > dateCurrent && dateCurrent > dateHover)\n    ) {\n        return true;\n    }\n\n    return inRange;\n};\n"],"names":["getSortedValues","values","sort","start","end","getTime","isDateInRange","year","monthIndex","currentDay","_getSortedValues","_getSortedValues2","_slicedToArray","startValue","endValue","day","Date","isSameDay","firstDate","secondDate","isValueUpdate","value","prevValue","Array","isArray","_prevValue$","_value$","_prevValue$2","_value$2","isSelectProcess","array","getSideForSelected","date","currentDateTime","startValueTime","endValueTime","undefined","getSideForHovered","hoveredDay","isSelected","dateHover","isHovered","getSideInRange","_value","getInRange","inRange","dateSelected","dateCurrent"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useState, useCallback, useEffect, useLayoutEffect, createRef } from 'react';
+import React, { forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, createRef } from 'react';
 import { cx } from '../../../utils/index.js';
 import { getDateFormatDelimiter } from '../utils/dateHelper.js';
 import { useDatePicker } from '../hooks/useDatePicker.js';
 import { classes } from '../DatePicker.tokens.js';
-import { useKeyNavigation, keys } from '../hooks/useKeyboardNavigation.js';
+import { keys, useKeyNavigation } from '../hooks/useKeyboardNavigation.js';
 import { InputHidden } from '../DatePickerBase.styles.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
@@ -109,7 +109,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _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__*/createRef();
     var rootRef = useRef(null);
@@ -127,16 +127,14 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
-    var dateFormatDelimiter = useCallback(function () {
-      return getDateFormatDelimiter(format);
-    }, [format]);
+    var dateFormatDelimiter = getDateFormatDelimiter(format);
     var _ref2 = externalValue || [],
       _ref3 = _slicedToArray(_ref2, 2),
       startExternalValue = _ref3[0],
       endExternalValue = _ref3[1];
     var startInitialValues = getFormattedDates({
       value: startExternalValue || defaultFirstDate,
-      delimiter: dateFormatDelimiter(),
+      delimiter: dateFormatDelimiter,
       lang: lang,
       format: format,
       includeEdgeDates: includeEdgeDates,
@@ -145,7 +143,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     });
     var endInitialValues = getFormattedDates({
       value: endExternalValue || defaultSecondDate,
-      delimiter: dateFormatDelimiter(),
+      delimiter: dateFormatDelimiter,
       lang: lang,
       format: format,
       includeEdgeDates: includeEdgeDates,
@@ -228,12 +226,12 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         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,
@@ -253,12 +251,12 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         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,
@@ -303,7 +301,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       }
       var _getFormattedDates = getFormattedDates({
           value: inputFirstValue,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -313,7 +311,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         startOriginalDate = _getFormattedDates.originalDate;
       var _getFormattedDates2 = getFormattedDates({
           value: inputSecondValue,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -333,7 +331,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         endValue = _getSortedValues2[1];
       var _getFormattedDates3 = getFormattedDates({
           value: startValue || null,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -343,7 +341,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         startFormattedDate = _getFormattedDates3.formattedDate;
       var _getFormattedDates4 = getFormattedDates({
           value: endValue || null,
-          delimiter: dateFormatDelimiter(),
+          delimiter: dateFormatDelimiter,
           lang: lang,
           format: format,
           includeEdgeDates: includeEdgeDates,
@@ -361,7 +359,7 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
         isCalendarOpen: isInnerOpen,
         format: format,
         maskWithFormat: maskWithFormat,
-        delimiter: dateFormatDelimiter(),
+        delimiter: dateFormatDelimiter,
         closeOnEsc: closeOnEsc,
         onToggle: handleToggle
       }),
@@ -475,10 +473,10 @@ var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       updateExternalSecondDate(endExternalValue || undefined);
     }, [endExternalValue, format, lang]);
     useLayoutEffect(function () {
-      !startExternalValue && updateExternalFirstDate(defaultFirstDate);
+      updateExternalFirstDate(defaultFirstDate);
     }, [defaultFirstDate, format, lang]);
     useLayoutEffect(function () {
-      !endExternalValue && updateExternalSecondDate(defaultSecondDate);
+      updateExternalSecondDate(defaultSecondDate);
     }, [defaultSecondDate, format, lang]);
     var RootWrapper = useCallback(function (_ref6) {
       var children = _ref6.children;