@dnanpm/styleguide 4.0.8 → 4.0.10

package/build/es/components/DateTimePicker/DateTimePicker.js

@@ -13,353 +13,217 @@ import Input from '../Input/Input.js';
  * Contains only used and functionality wise necessary properties
  */
 const localeData = {
-    // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
-    'fi-FI': {
-        code: 'fi',
-        formatLong: {
-            date: () => 'eeee d. MMMM y',
-            time: () => 'HH.mm',
-        },
-        localize: {
-            day: (i) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
-            month: (i) => [
-                'Tammikuu',
-                'Helmikuu',
-                'Maaliskuu',
-                'Huhtikuu',
-                'Toukokuu',
-                'Kesäkuu',
-                'Heinäkuu',
-                'Elokuu',
-                'Syyskuu',
-                'Lokakuu',
-                'Marraskuu',
-                'Joulukuu',
-            ][i],
-            timeCaption: 'Aika',
-        },
-        options: {
-            weekStartsOn: 1,
-            firstWeekContainsDate: 4,
-        },
+  // https://github.com/date-fns/date-fns/blob/main/src/locale/fi/index.ts
+  'fi-FI': {
+    code: 'fi',
+    formatLong: {
+      date: () => 'eeee d. MMMM y',
+      time: () => 'HH.mm'
     },
-    // Use react-datepicker default language
-    'en-GB': undefined,
-};
-const sentenceCase = (string) => `${string[0].toUpperCase()}${string.slice(1)}`;
-const parseFIDateString = (dateString) => {
-    const parts = dateString.split(/\D+/);
-    if (!parts || parts.length < 3) {
-        return null;
+    localize: {
+      day: i => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][i],
+      month: i => ['Tammikuu', 'Helmikuu', 'Maaliskuu', 'Huhtikuu', 'Toukokuu', 'Kesäkuu', 'Heinäkuu', 'Elokuu', 'Syyskuu', 'Lokakuu', 'Marraskuu', 'Joulukuu'][i],
+      timeCaption: 'Aika'
+    },
+    options: {
+      weekStartsOn: 1,
+      firstWeekContainsDate: 4
     }
-    const [day, month, year] = parts.map(Number);
-    const date = new Date(year, month - 1, day);
-    return !Number.isNaN(date.getTime()) ? date : null;
+  },
+  // Use react-datepicker default language
+  'en-GB': undefined
+};
+const sentenceCase = string => `${string[0].toUpperCase()}${string.slice(1)}`;
+const parseFIDateString = dateString => {
+  const parts = dateString.split(/\D+/);
+  if (!parts || parts.length < 3) {
+    return null;
+  }
+  const [day, month, year] = parts.map(Number);
+  const date = new Date(year, month - 1, day);
+  return !Number.isNaN(date.getTime()) ? date : null;
 };
 // TODO: change `& .react-datepicker` value back to `1` after z-index of Footer removed
-const Wrapper = styled.div `
-    position: relative;
-
-    & .react-datepicker {
-        position: absolute;
-        display: flex;
-        font-size: ${theme.fontSize.xs};
-        border-radius: ${theme.radius.default};
-        border: 1px solid ${theme.color.line.L03};
-        background-color: ${theme.color.background.white.default};
-        z-index: 2;
-
-        .react-datepicker__aria-live {
-            display: none;
-        }
+const Wrapper = styled.div.withConfig({
+  displayName: "DateTimePicker__Wrapper",
+  componentId: "sc-1qaz26g-0"
+})(["position:relative;& .react-datepicker{position:absolute;display:flex;font-size:", ";border-radius:", ";border:1px solid ", ";background-color:", ";z-index:2;.react-datepicker__aria-live{display:none;}}& .react-datepicker__month-container + .react-datepicker__time-container{border-left:1px solid ", ";}& .react-datepicker__header{display:flex;flex-direction:column;gap:", ";color:", ";padding:", " ", " ", ";background-color:", ";.react-datepicker-time__header{font-size:", ";line-height:", ";font-weight:", ";text-align:center;}}& .react-datepicker__month,.react-datepicker__time-list{display:grid;border-top:1px solid ", ";gap:", ";color:", ";padding:", " ", " ", ";.react-datepicker__day--outside-month{visibility:hidden;}}& .react-datepicker__sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}& .react-datepicker__day-names{background-color:", ";padding:", " 0;}& .react-datepicker__day-names,& .react-datepicker__week{display:flex;gap:", ";justify-content:center;.react-datepicker__day-name,.react-datepicker__day{text-align:center;font-weight:", ";line-height:", ";width:", ";height:", ";}.react-datepicker__day{cursor:pointer;font-weight:", ";border:1px solid transparent;border-radius:", ";&.react-datepicker__day--today{color:", ";font-weight:", ";}&.react-datepicker__day--disabled{color:", ";font-weight:", ";&:hover{cursor:default;color:", ";font-weight:", ";background-color:transparent;border:1px solid transparent;}}&.react-datepicker__day--in-selecting-range{color:", ";font-weight:", ";background-color:", ";}&.react-datepicker__day--selected{color:", ";font-weight:", ";background-color:", ";}&:hover{color:", ";font-weight:", ";background-color:", ";border:1px solid ", ";}&.react-datepicker__day--selecting-range-start{color:", ";background-color:", ";&.react-datepicker__day--selecting-range-end{color:", ";background-color:", ";}}&.react-datepicker__day--selecting-range-end{color:", ";background-color:", ";&:hover{border:1px solid ", ";}}}}& .react-datepicker__time{width:", ";.react-datepicker__time-list{padding-left:0;padding-right:0;list-style:none;margin:0;gap:0;overflow-y:scroll;height:", ";.react-datepicker__time-list-item{cursor:pointer;text-align:center;font-weight:", ";line-height:", ";height:", ";&.react-datepicker__time-list-item--selected{color:", ";font-weight:", ";background-color:", ";}&:hover{color:", ";font-weight:", ";background-color:", ";}}}}"], theme.fontSize.xs, theme.radius.default, theme.color.line.L03, theme.color.background.white.default, theme.color.line.L03, getMultipliedSize(theme.base.baseWidth, 1), theme.color.text.black, getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseWidth, 0.5), theme.color.background.sand.E01, theme.fontSize.default, theme.lineHeight.default, theme.fontWeight.bold, theme.color.line.L03, getMultipliedSize(theme.base.baseWidth, 0.5), theme.color.text.gray, getMultipliedSize(theme.base.baseWidth, 0.5), getMultipliedSize(theme.base.baseWidth, 1), getMultipliedSize(theme.base.baseWidth, 1), theme.color.background.sand.E01, getMultipliedSize(theme.base.baseWidth, 0.5), getMultipliedSize(theme.base.baseWidth, 0.8), theme.fontWeight.book, theme.lineHeight.default, getMultipliedSize(theme.base.baseHeight, 2.4), getMultipliedSize(theme.base.baseHeight, 2.4), theme.fontWeight.book, theme.radius.s, theme.color.text.pink, theme.fontWeight.bold, theme.color.text.gray + theme.color.transparency.T40, theme.fontWeight.book, theme.color.text.gray + theme.color.transparency.T40, theme.fontWeight.book, theme.color.text.white, theme.fontWeight.bold, theme.color.background.pink.default, theme.color.text.white, theme.fontWeight.bold, theme.color.background.pink.default, theme.color.text.gray, theme.fontWeight.bold, theme.color.background.sand.E01, theme.color.line.L03, theme.color.text.white, theme.color.background.pink.default, theme.color.text.white, theme.color.background.pink.default, theme.color.text.black, theme.color.background.pink.E02, theme.color.background.pink.E02, getMultipliedSize(theme.base.baseWidth, 15), getMultipliedSize(theme.base.baseHeight, 19), theme.fontWeight.book, theme.lineHeight.h2S, getMultipliedSize(theme.base.baseHeight, 3.2), theme.color.text.white, theme.fontWeight.bold, theme.color.background.pink.default, theme.color.text.gray, theme.fontWeight.bold, theme.color.background.sand.E01);
+const MonthSelector = styled.div.withConfig({
+  displayName: "DateTimePicker__MonthSelector",
+  componentId: "sc-1qaz26g-1"
+})(["display:flex;align-items:center;justify-content:space-between;span.dnasg-icon > svg{fill:", ";}"], theme.color.text.gray);
+const CurrentMonth = styled.div.withConfig({
+  displayName: "DateTimePicker__CurrentMonth",
+  componentId: "sc-1qaz26g-2"
+})(["font-size:", ";line-height:", ";font-weight:", ";"], theme.fontSize.default, theme.lineHeight.default, theme.fontWeight.bold);
+/**
+ * TODO: Replace the VisuallyHiddenStatus styled component with the global class name.
+ * Ticket: https://jira.dna.fi/browse/STYLE-916
+ */
+const VisuallyHiddenStatus = styled.div.withConfig({
+  displayName: "DateTimePicker__VisuallyHiddenStatus",
+  componentId: "sc-1qaz26g-3"
+})(["position:absolute;left:-9999px;"]);
+const DateTimePickerCustomHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  locale,
+  ariaLabelPreviousMonth,
+  ariaLabelNextMonth
+}) => (/*#__PURE__*/React__default.createElement(MonthSelector, null, /*#__PURE__*/React__default.createElement(ButtonIcon, {
+  icon: ChevronLeft,
+  onClick: decreaseMonth,
+  ariaLabel: ariaLabelPreviousMonth
+}), /*#__PURE__*/React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
+  month: 'long',
+  year: 'numeric'
+}))), /*#__PURE__*/React__default.createElement(ButtonIcon, {
+  icon: ChevronRight,
+  onClick: increaseMonth,
+  ariaLabel: ariaLabelNextMonth
+})));
+/** @visibleName DateTime Picker */
+const DateTimePicker = _a => {
+  var _b, _c, _d;
+  var {
+      date: startDate,
+      locale = 'fi-FI',
+      isDatePicker = true,
+      isTimePicker = false,
+      timeInterval = 30,
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
+  const [showReactDatePicker, setShowReactDatePicker] = useState(false);
+  const [manualInputValue, setManualInputValue] = useState(null);
+  const isRange = props.endDate !== undefined;
+  const callOnChange = (date, event) => {
+    props.onChange(date, event);
+  };
+  const handleOnInputFocus = () => {
+    setShowReactDatePicker(true);
+  };
+  const handleOnInputChange = (_, e) => {
+    if (props.isEditable) {
+      setManualInputValue(e.target.value);
+      return;
     }
-
-    & .react-datepicker__month-container + .react-datepicker__time-container {
-        border-left: 1px solid ${theme.color.line.L03};
+    if (props.onInputChange) {
+      props.onInputChange(e);
     }
-
-    & .react-datepicker__header {
-        display: flex;
-        flex-direction: column;
-        gap: ${getMultipliedSize(theme.base.baseWidth, 1)};
-        color: ${theme.color.text.black};
-        padding: ${getMultipliedSize(theme.base.baseWidth, 1)}
-            ${getMultipliedSize(theme.base.baseWidth, 1)}
-            ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-        background-color: ${theme.color.background.sand.E01};
-
-        .react-datepicker-time__header {
-            font-size: ${theme.fontSize.default};
-            line-height: ${theme.lineHeight.default};
-            font-weight: ${theme.fontWeight.bold};
-            text-align: center;
-        }
+  };
+  const handleOnKeyDown = e => {
+    const isNavigationKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key);
+    if (isNavigationKey && showReactDatePicker) {
+      return;
     }
-
-    & .react-datepicker__month,
-    .react-datepicker__time-list {
-        display: grid;
-        border-top: 1px solid ${theme.color.line.L03};
-        gap: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
-        color: ${theme.color.text.gray};
-        padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)}
-            ${getMultipliedSize(theme.base.baseWidth, 1)}
-            ${getMultipliedSize(theme.base.baseWidth, 1)};
-
-        .react-datepicker__day--outside-month {
-            visibility: hidden;
-        }
+    if (e.key === 'Escape') {
+      setShowReactDatePicker(false);
     }
-
-    & .react-datepicker__sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
+    if (e.key === 'Enter' && showReactDatePicker) {
+      setShowReactDatePicker(false);
     }
-
-    & .react-datepicker__day-names {
-        background-color: ${theme.color.background.sand.E01};
-        padding: ${getMultipliedSize(theme.base.baseWidth, 0.5)} 0;
+    if (!props.isEditable && ['Backspace', 'Delete', 'Clear'].includes(e.key)) {
+      callOnChange(null, e);
     }
-
-    & .react-datepicker__day-names,
-    & .react-datepicker__week {
-        display: flex;
-        gap: ${getMultipliedSize(theme.base.baseWidth, 0.8)};
-        justify-content: center;
-
-        .react-datepicker__day-name,
-        .react-datepicker__day {
-            text-align: center;
-            font-weight: ${theme.fontWeight.book};
-            line-height: ${theme.lineHeight.default};
-            width: ${getMultipliedSize(theme.base.baseHeight, 2.4)};
-            height: ${getMultipliedSize(theme.base.baseHeight, 2.4)};
-        }
-
-        .react-datepicker__day {
-            cursor: pointer;
-            font-weight: ${theme.fontWeight.book};
-            border: 1px solid transparent;
-            border-radius: ${theme.radius.s};
-
-            &.react-datepicker__day--today {
-                color: ${theme.color.text.pink};
-                font-weight: ${theme.fontWeight.bold};
-            }
-            &.react-datepicker__day--disabled {
-                color: ${theme.color.text.gray + theme.color.transparency.T40};
-                font-weight: ${theme.fontWeight.book};
-                &:hover {
-                    cursor: default;
-                    color: ${theme.color.text.gray + theme.color.transparency.T40};
-                    font-weight: ${theme.fontWeight.book};
-                    background-color: transparent;
-                    border: 1px solid transparent;
-                }
-            }
-            &.react-datepicker__day--in-selecting-range {
-                color: ${theme.color.text.white};
-                font-weight: ${theme.fontWeight.bold};
-                background-color: ${theme.color.background.pink.default};
-            }
-
-            &.react-datepicker__day--selected {
-                color: ${theme.color.text.white};
-                font-weight: ${theme.fontWeight.bold};
-                background-color: ${theme.color.background.pink.default};
-            }
-
-            &:hover {
-                color: ${theme.color.text.gray};
-                font-weight: ${theme.fontWeight.bold};
-                background-color: ${theme.color.background.sand.E01};
-                border: 1px solid ${theme.color.line.L03};
-            }
-
-            &.react-datepicker__day--selecting-range-start {
-                color: ${theme.color.text.white};
-                background-color: ${theme.color.background.pink.default};
-
-                &.react-datepicker__day--selecting-range-end {
-                    color: ${theme.color.text.white};
-                    background-color: ${theme.color.background.pink.default};
-                }
-            }
-
-            &.react-datepicker__day--selecting-range-end {
-                color: ${theme.color.text.black};
-                background-color: ${theme.color.background.pink.E02};
-
-                &:hover {
-                    border: 1px solid ${theme.color.background.pink.E02};
-                }
-            }
-        }
+  };
+  const handleClearable = e => {
+    callOnChange(null, e);
+  };
+  const handleOnReactDatePickerChange = (date, event) => {
+    var _a, _b;
+    let shouldKeepOpen = false;
+    if (isRange) {
+      const [start, end] = Array.isArray(date) && date.length === 2 ? date : [null, null];
+      shouldKeepOpen = !(start && end);
+    } else if (isDatePicker && isTimePicker && date instanceof Date && ((_a = date.getHours) === null || _a === void 0 ? void 0 : _a.call(date)) === 0 && ((_b = date.getMinutes) === null || _b === void 0 ? void 0 : _b.call(date)) === 0) {
+      shouldKeepOpen = true;
     }
-
-    & .react-datepicker__time {
-        width: ${getMultipliedSize(theme.base.baseWidth, 15)};
-
-        .react-datepicker__time-list {
-            padding-left: 0;
-            padding-right: 0;
-            list-style: none;
-            margin: 0;
-            gap: 0;
-            overflow-y: scroll;
-            height: ${getMultipliedSize(theme.base.baseHeight, 19)};
-
-            .react-datepicker__time-list-item {
-                cursor: pointer;
-                text-align: center;
-                font-weight: ${theme.fontWeight.book};
-                line-height: ${theme.lineHeight.h2S};
-                height: ${getMultipliedSize(theme.base.baseHeight, 3.2)};
-
-                &.react-datepicker__time-list-item--selected {
-                    color: ${theme.color.text.white};
-                    font-weight: ${theme.fontWeight.bold};
-                    background-color: ${theme.color.background.pink.default};
-                }
-
-                &:hover {
-                    color: ${theme.color.text.gray};
-                    font-weight: ${theme.fontWeight.bold};
-                    background-color: ${theme.color.background.sand.E01};
-                }
-            }
-        }
+    if (!shouldKeepOpen) {
+      setShowReactDatePicker(false);
     }
-`;
-const MonthSelector = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    span.dnasg-icon > svg {
-        fill: ${theme.color.text.gray};
+    setManualInputValue(null);
+    callOnChange(date, event);
+  };
+  const handleOnReactDatePickerClickOutside = () => {
+    setShowReactDatePicker(false);
+  };
+  const formatInputValue = [startDate, props.endDate].filter(Boolean).map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, isDatePicker && {
+    dateStyle: 'medium'
+  }), props.endDate === undefined && isTimePicker && {
+    timeStyle: 'short'
+  }))).join(' - ');
+  const getDateTimePickerCustomHeader = args => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), {
+    locale,
+    ariaLabelPreviousMonth: props.ariaLabelPreviousMonth,
+    ariaLabelNextMonth: props.ariaLabelNextMonth
+  }));
+  return /*#__PURE__*/React__default.createElement(Wrapper, {
+    id: props.id,
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    id: `datetimepicker-input-${props.id}`,
+    name: `datetimepicker-input-${props.id}`,
+    label: props.label,
+    placeholder: props.placeholder,
+    value: manualInputValue !== null && manualInputValue !== void 0 ? manualInputValue : formatInputValue,
+    onFocus: handleOnInputFocus,
+    onChange: handleOnInputChange,
+    onKeyDown: handleOnKeyDown,
+    onClearableButtonClick: props.isClearable ? handleClearable : undefined,
+    className: "react-datepicker-ignore-onclickoutside",
+    "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`,
+    disabled: props.isDisabled,
+    required: props.isRequired,
+    readonlyUnstyled: !props.isEditable,
+    status: props.isInError ? 'error' : undefined,
+    errorMessage: props.errorMessage,
+    ariaLabel: props.ariaLabelInput,
+    onBlur: (_val, e) => {
+      if (!props.isEditable || !e.target.value) {
+        return;
+      }
+      const date = locale === 'fi-FI' ? parseFIDateString(e.target.value) : new Date(e.target.value);
+      if (date && !Number.isNaN(date.getTime())) {
+        callOnChange(date, e);
+      }
     }
-`;
-const CurrentMonth = styled.div `
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.bold};
-`;
-/**
- * TODO: Replace the VisuallyHiddenStatus styled component with the global class name.
- * Ticket: https://jira.dna.fi/browse/STYLE-916
- */
-const VisuallyHiddenStatus = styled.div `
-    position: absolute;
-    left: -9999px;
-`;
-const DateTimePickerCustomHeader = ({ date, decreaseMonth, increaseMonth, locale, ariaLabelPreviousMonth, ariaLabelNextMonth, }) => (React__default.createElement(MonthSelector, null,
-    React__default.createElement(ButtonIcon, { icon: ChevronLeft, onClick: decreaseMonth, ariaLabel: ariaLabelPreviousMonth }),
-    React__default.createElement(CurrentMonth, null, sentenceCase(date.toLocaleString(locale, {
-        month: 'long',
-        year: 'numeric',
-    }))),
-    React__default.createElement(ButtonIcon, { icon: ChevronRight, onClick: increaseMonth, ariaLabel: ariaLabelNextMonth })));
-/** @visibleName DateTime Picker */
-const DateTimePicker = (_a) => {
-    var _b, _c, _d;
-    var { date: startDate, locale = 'fi-FI', isDatePicker = true, isTimePicker = false, timeInterval = 30, 'data-testid': dataTestId } = _a, props = __rest(_a, ["date", "locale", "isDatePicker", "isTimePicker", "timeInterval", 'data-testid']);
-    const [showReactDatePicker, setShowReactDatePicker] = useState(false);
-    const [manualInputValue, setManualInputValue] = useState(null);
-    const isRange = props.endDate !== undefined;
-    const callOnChange = (date, event) => {
-        props.onChange(date, event);
-    };
-    const handleOnInputFocus = () => {
-        setShowReactDatePicker(true);
-    };
-    const handleOnInputChange = (_, e) => {
-        if (props.isEditable) {
-            setManualInputValue(e.target.value);
-            return;
-        }
-        if (props.onInputChange) {
-            props.onInputChange(e);
-        }
-    };
-    const handleOnKeyDown = (e) => {
-        const isNavigationKey = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key);
-        if (isNavigationKey && showReactDatePicker) {
-            return;
-        }
-        if (e.key === 'Escape') {
-            setShowReactDatePicker(false);
-        }
-        if (e.key === 'Enter' && showReactDatePicker) {
-            setShowReactDatePicker(false);
-        }
-        if (!props.isEditable && ['Backspace', 'Delete', 'Clear'].includes(e.key)) {
-            callOnChange(null, e);
-        }
-    };
-    const handleClearable = (e) => {
-        callOnChange(null, e);
-    };
-    const handleOnReactDatePickerChange = (date, event) => {
-        var _a, _b;
-        let shouldKeepOpen = false;
-        if (isRange) {
-            const [start, end] = Array.isArray(date) && date.length === 2 ? date : [null, null];
-            shouldKeepOpen = !(start && end);
-        }
-        else if (isDatePicker &&
-            isTimePicker &&
-            date instanceof Date &&
-            ((_a = date.getHours) === null || _a === void 0 ? void 0 : _a.call(date)) === 0 &&
-            ((_b = date.getMinutes) === null || _b === void 0 ? void 0 : _b.call(date)) === 0) {
-            shouldKeepOpen = true;
-        }
-        if (!shouldKeepOpen) {
-            setShowReactDatePicker(false);
-        }
-        setManualInputValue(null);
-        callOnChange(date, event);
-    };
-    const handleOnReactDatePickerClickOutside = () => {
-        setShowReactDatePicker(false);
-    };
-    const formatInputValue = [startDate, props.endDate]
-        .filter(Boolean)
-        .map(date => date === null || date === void 0 ? void 0 : date.toLocaleString(locale, Object.assign(Object.assign({}, (isDatePicker && {
-        dateStyle: 'medium',
-    })), (props.endDate === undefined &&
-        isTimePicker && {
-        timeStyle: 'short',
-    }))))
-        .join(' - ');
-    const getDateTimePickerCustomHeader = (args) => DateTimePickerCustomHeader(Object.assign(Object.assign({}, args), { locale, ariaLabelPreviousMonth: props.ariaLabelPreviousMonth, ariaLabelNextMonth: props.ariaLabelNextMonth }));
-    return (React__default.createElement(Wrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { id: `datetimepicker-input-${props.id}`, name: `datetimepicker-input-${props.id}`, label: props.label, placeholder: props.placeholder, value: manualInputValue !== null && manualInputValue !== void 0 ? manualInputValue : formatInputValue, onFocus: handleOnInputFocus, onChange: handleOnInputChange, onKeyDown: handleOnKeyDown, onClearableButtonClick: props.isClearable ? handleClearable : undefined, className: "react-datepicker-ignore-onclickoutside", "data-testid": dataTestId && `${dataTestId}-datetimepicker-input`, disabled: props.isDisabled, required: props.isRequired, readonlyUnstyled: !props.isEditable, status: props.isInError ? 'error' : undefined, errorMessage: props.errorMessage, ariaLabel: props.ariaLabelInput, onBlur: (_val, e) => {
-                if (!props.isEditable || !e.target.value) {
-                    return;
-                }
-                const date = locale === 'fi-FI'
-                    ? parseFIDateString(e.target.value)
-                    : new Date(e.target.value);
-                if (date && !Number.isNaN(date.getTime())) {
-                    callOnChange(date, e);
-                }
-            } }),
-        React__default.createElement(VisuallyHiddenStatus, { role: "status", "aria-live": "polite" }, startDate instanceof Date && !Number.isNaN(startDate.getTime())
-            ? (_b = props.ariaLiveAnnouncement) === null || _b === void 0 ? void 0 : _b.replace('{{date}}', startDate.toLocaleDateString(locale))
-            : ''),
-        showReactDatePicker &&
-            (isRange ? (React__default.createElement(ReactDatePicker, { selectsRange: true, endDate: props.endDate, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
-                    .filter(Boolean)
-                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })) : (React__default.createElement(ReactDatePicker, { showTimeSelect: isTimePicker, showTimeSelectOnly: !isDatePicker && isTimePicker, inline: true, selected: startDate, startDate: startDate, maxDate: props.maxDate, minDate: props.minDate, onChange: handleOnReactDatePickerChange, timeCaption: (_d = localeData[locale]) === null || _d === void 0 ? void 0 : _d.localize.timeCaption, timeIntervals: timeInterval, onClickOutside: handleOnReactDatePickerClickOutside, locale: localeData[locale], dateFormat: [isDatePicker && 'P', isTimePicker && 'p']
-                    .filter(Boolean)
-                    .join(''), renderCustomHeader: getDateTimePickerCustomHeader })))));
+  }), /*#__PURE__*/React__default.createElement(VisuallyHiddenStatus, {
+    role: "status",
+    "aria-live": "polite"
+  }, startDate instanceof Date && !Number.isNaN(startDate.getTime()) ? (_b = props.ariaLiveAnnouncement) === null || _b === void 0 ? void 0 : _b.replace('{{date}}', startDate.toLocaleDateString(locale)) : ''), showReactDatePicker && (isRange ? (/*#__PURE__*/React__default.createElement(ReactDatePicker, {
+    selectsRange: true,
+    endDate: props.endDate,
+    inline: true,
+    selected: startDate,
+    startDate: startDate,
+    maxDate: props.maxDate,
+    minDate: props.minDate,
+    onChange: handleOnReactDatePickerChange,
+    timeCaption: (_c = localeData[locale]) === null || _c === void 0 ? void 0 : _c.localize.timeCaption,
+    timeIntervals: timeInterval,
+    onClickOutside: handleOnReactDatePickerClickOutside,
+    locale: localeData[locale],
+    dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''),
+    renderCustomHeader: getDateTimePickerCustomHeader
+  })) : (/*#__PURE__*/React__default.createElement(ReactDatePicker, {
+    showTimeSelect: isTimePicker,
+    showTimeSelectOnly: !isDatePicker && isTimePicker,
+    inline: true,
+    selected: startDate,
+    startDate: startDate,
+    maxDate: props.maxDate,
+    minDate: props.minDate,
+    onChange: handleOnReactDatePickerChange,
+    timeCaption: (_d = localeData[locale]) === null || _d === void 0 ? void 0 : _d.localize.timeCaption,
+    timeIntervals: timeInterval,
+    onClickOutside: handleOnReactDatePickerClickOutside,
+    locale: localeData[locale],
+    dateFormat: [isDatePicker && 'P', isTimePicker && 'p'].filter(Boolean).join(''),
+    renderCustomHeader: getDateTimePickerCustomHeader
+  }))));
 };
 
 export { DateTimePicker as default };

package/build/es/components/Divider/Divider.js

@@ -4,21 +4,35 @@ import { styled } from 'styled-components';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 
-const DividerWrapper = styled.div `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    margin: ${({ $margin }) => $margin || `${getMultipliedSize(theme.base.baseHeight, 1)} 0`};
-    ${({ $padding }) => $padding && `padding: ${$padding}`};
-    border-style: solid;
-    border-color: ${theme.color.line.L03};
-    border-width: 1px ${({ children }) => !children && '0 0 0'};
-`;
-const Divider = (_a) => {
-    var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    const isFocusableSeparator = Boolean(props.children);
-    return (React__default.createElement(DividerWrapper, { id: props.id, "$margin": props.margin, "$padding": props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
+const DividerWrapper = styled.div.withConfig({
+  displayName: "Divider__DividerWrapper",
+  componentId: "sc-1exe9ao-0"
+})(["display:flex;justify-content:center;align-items:center;width:100%;margin:", ";", ";border-style:solid;border-color:", ";border-width:1px ", ";"], ({
+  $margin
+}) => $margin || `${getMultipliedSize(theme.base.baseHeight, 1)} 0`, ({
+  $padding
+}) => $padding && `padding: ${$padding}`, theme.color.line.L03, ({
+  children
+}) => !children && '0 0 0');
+const Divider = _a => {
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ['data-testid']);
+  const isFocusableSeparator = Boolean(props.children);
+  return /*#__PURE__*/React__default.createElement(DividerWrapper, {
+    id: props.id,
+    "$margin": props.margin,
+    "$padding": props.padding,
+    className: props.className,
+    "data-testid": dataTestId,
+    as: isFocusableSeparator ? 'div' : 'hr',
+    role: isFocusableSeparator ? 'separator' : undefined,
+    "aria-orientation": "horizontal",
+    "aria-label": props.ariaLabelFocusableSeparator,
+    "aria-hidden": !isFocusableSeparator,
+    tabIndex: isFocusableSeparator ? 0 : -1
+  }, props.children);
 };
 
 export { Divider as default };