@nulogy/components 14.8.2 → 15.0.1

package/dist/src/DatePickers/MonthPicker.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useState, useEffect } from "react";
+import { noop } from "../utils/noop";
+import { BasePicker } from "./shared/components/BasePicker";
+import { MonthDatePickerHeader } from "./custom/MonthPickerHeader";
+export const DEFAULT_MONTH_FORMAT = "yyyy-MMM";
+export const DEFAULT_PLACEHOLDER = "YYYY-Mon";
+const MonthPicker = forwardRef((_a, monthPickerRef) => {
+    var { selected, dateFormat = DEFAULT_MONTH_FORMAT, onChange } = _a, props = __rest(_a, ["selected", "dateFormat", "onChange"]);
+    const [selectedDate, setSelectedDate] = useState(selected);
+    const [ref] = useState(null);
+    useEffect(() => {
+        setSelectedDate(selected);
+    }, [selected]);
+    const handleSelectedDateChange = (date) => {
+        if (onChange) {
+            onChange(date);
+        }
+        setSelectedDate(date);
+    };
+    const handleUpKey = noop;
+    const handleDownKey = noop;
+    const handleEnterKey = () => {
+        if (ref) {
+            const isOpen = ref.isCalendarOpen();
+            ref.setOpen(!isOpen);
+        }
+    };
+    return (React.createElement(BasePicker, Object.assign({}, props, { selected: selectedDate, onChange: handleSelectedDateChange, ref: monthPickerRef, dateFormat: dateFormat, defaultFormat: DEFAULT_MONTH_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: true, renderHeader: (headerProps) => (React.createElement(MonthDatePickerHeader, Object.assign({ locale: props.locale }, headerProps))), onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey })));
+});
+export default MonthPicker;

package/dist/src/DatePickers/WeekPicker.d.ts

@@ -1,27 +1,27 @@
-import React from "react";
-import { FieldProps } from "../Form/Field";
-import { InputFieldProps } from "../Input/InputField";
-type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
-interface WeekRange {
-    startDate: Date;
-    endDate: Date;
-    weekNumber: number;
-    year: number;
-}
-interface WeekPickerProps extends Omit<FieldProps, OmittedFieldProps> {
-    selected?: Date | null;
-    onChange?: (weekRange: WeekRange) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onInputChange?: (value: string) => void;
-    dateFormat?: string;
-    inputProps?: InputFieldProps;
-    errorMessage?: string;
-    errorList?: string[];
-    minDate?: Date;
-    maxDate?: Date;
-    locale?: string;
-    disableFlipping?: boolean;
-}
-declare const WeekPicker: React.ForwardRefExoticComponent<Omit<WeekPickerProps, "ref"> & React.RefAttributes<unknown>>;
-export default WeekPicker;
+import React from "react";
+import { FieldProps } from "../Form/Field";
+import { InputFieldProps } from "../Input/InputField";
+type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
+interface WeekRange {
+    startDate: Date;
+    endDate: Date;
+    weekNumber: number;
+    year: number;
+}
+interface WeekPickerProps extends Omit<FieldProps, OmittedFieldProps> {
+    selected?: Date | null;
+    onChange?: (weekRange: WeekRange) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInputChange?: (value: string) => void;
+    dateFormat?: string;
+    inputProps?: InputFieldProps;
+    errorMessage?: string;
+    errorList?: string[];
+    minDate?: Date;
+    maxDate?: Date;
+    locale?: string;
+    disableFlipping?: boolean;
+}
+declare const WeekPicker: React.ForwardRefExoticComponent<Omit<WeekPickerProps, "ref"> & React.RefAttributes<unknown>>;
+export default WeekPicker;

package/dist/src/DatePickers/WeekPicker.js

@@ -0,0 +1,131 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import propTypes from "@styled-system/prop-types";
+import { addDays, endOfWeek, getWeek, getYear, isAfter, isBefore, isSameDay, isValid, startOfWeek, subDays, } from "date-fns";
+import React, { forwardRef, useEffect, useState } from "react";
+import ReactDatePicker from "react-datepicker";
+import { useTranslation } from "react-i18next";
+import Field from "../Form/Field";
+import { InputFieldDefaultProps } from "../Input/InputField";
+import { NDS_TO_DATE_FN_LOCALES_MAP } from "../locales.const";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import { useLocale } from "../NDSProvider/LocaleContext";
+import { registerDatePickerLocales } from "../utils/datePickerLocales";
+import { getSubset } from "../utils/subset";
+import { InlineValidation } from "../Validation";
+import { WeekPickerStyles } from "./custom/weekPickerStyles";
+import { DatePickerHeader } from "./shared/components/DatePickerHeader";
+import DatePickerInput from "./shared/components/DatePickerInput";
+import { getPopperModifiers } from "./shared/helpers";
+import { DatePickerStyles } from "./shared/styles";
+const WEEK_START_DAY = 1; // Monday
+const roundMinDateToWeekStart = (date) => {
+    if (!date)
+        return undefined;
+    const weekStart = startOfWeek(date, { weekStartsOn: WEEK_START_DAY });
+    return isBefore(date, weekStart) ? weekStart : addDays(weekStart, 7);
+};
+const roundMaxDateToWeekEnd = (date) => {
+    if (!date)
+        return undefined;
+    const weekEnd = endOfWeek(date, { weekStartsOn: WEEK_START_DAY });
+    return isBefore(date, weekEnd) ? addDays(startOfWeek(date, { weekStartsOn: WEEK_START_DAY }), -1) : weekEnd;
+};
+const WeekPicker = forwardRef((_a, datePickerRef) => {
+    var { dateFormat, errorMessage, errorList, inputProps, minDate, maxDate, locale, disableFlipping, className, onInputChange, onChange, onBlur, onFocus, selected } = _a, props = __rest(_a, ["dateFormat", "errorMessage", "errorList", "inputProps", "minDate", "maxDate", "locale", "disableFlipping", "className", "onInputChange", "onChange", "onBlur", "onFocus", "selected"]);
+    const [selectedDate, setSelectedDate] = useState(selected);
+    const { locale: contextLocale } = useLocale();
+    const { i18n } = useTranslation();
+    const [ref, setRef] = useState(null);
+    const spaceProps = getSubset(props, propTypes.space);
+    const currentLocale = locale || contextLocale;
+    const componentVariant = useComponentVariant();
+    const t = React.useMemo(() => {
+        return i18n.getFixedT(currentLocale);
+    }, [i18n, currentLocale]);
+    const defaultDateFormat = t("weekPicker date format");
+    const defaultPlaceholder = t("weekPicker placeholder");
+    const weekShorthand = t("week shorthand");
+    const finalDateFormat = dateFormat || defaultDateFormat;
+    useEffect(() => {
+        registerDatePickerLocales();
+    }, []);
+    useEffect(() => {
+        setSelectedDate(selected);
+    }, [selected]);
+    const roundedMinDate = roundMinDateToWeekStart(minDate);
+    const roundedMaxDate = roundMaxDateToWeekEnd(maxDate);
+    const onRefChange = React.useCallback((node) => {
+        if (node) {
+            setRef(node);
+        }
+    }, []);
+    const handleInputChange = (event) => {
+        if (onInputChange) {
+            onInputChange(event.target.value);
+        }
+    };
+    const handleSelectedDateChange = (date) => {
+        if (!isValid(date)) {
+            return;
+        }
+        if (onChange) {
+            onChange({
+                startDate: startOfWeek(date, { weekStartsOn: WEEK_START_DAY }),
+                endDate: endOfWeek(date, { weekStartsOn: WEEK_START_DAY }),
+                weekNumber: getWeek(date, { weekStartsOn: WEEK_START_DAY }),
+                year: getYear(date),
+            });
+        }
+        setSelectedDate(date);
+    };
+    const handleUpKey = () => {
+        const newSelectedDate = isValid(selectedDate)
+            ? subDays(selectedDate, 7)
+            : startOfWeek(new Date(), { weekStartsOn: 1 });
+        if (!roundedMinDate || isAfter(newSelectedDate, roundedMinDate) || isSameDay(newSelectedDate, roundedMinDate)) {
+            handleSelectedDateChange(newSelectedDate);
+        }
+    };
+    const handleDownKey = () => {
+        const newSelectedDate = isValid(selectedDate)
+            ? addDays(selectedDate, 7)
+            : startOfWeek(new Date(), { weekStartsOn: 1 });
+        if (!roundedMaxDate || isBefore(newSelectedDate, roundedMaxDate) || isSameDay(newSelectedDate, roundedMaxDate)) {
+            handleSelectedDateChange(newSelectedDate);
+        }
+    };
+    const handleEnterKey = () => {
+        if (ref) {
+            const isOpen = ref.isCalendarOpen();
+            ref.setOpen(!isOpen);
+        }
+    };
+    const renderCustomHeader = (props) => {
+        return React.createElement(DatePickerHeader, Object.assign({ locale: currentLocale }, props));
+    };
+    const weekPickerRefHandler = (r) => {
+        if (datePickerRef) {
+            datePickerRef["current"] = r;
+        }
+        onRefChange(r);
+    };
+    const customInputProps = Object.assign(Object.assign(Object.assign(Object.assign({}, InputFieldDefaultProps), { error: !!(errorMessage || errorList) }), inputProps), { placeholder: (inputProps && inputProps.placeholder) ||
+            (finalDateFormat === defaultDateFormat ? defaultPlaceholder : finalDateFormat) });
+    const customInput = (React.createElement(DatePickerInput, { locale: currentLocale, variant: componentVariant, inputProps: customInputProps, dateFormat: finalDateFormat, onInputChange: handleInputChange, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey }));
+    return (React.createElement(Field, Object.assign({ className: `${className} nds-date-picker` }, spaceProps),
+        React.createElement(DatePickerStyles, null),
+        React.createElement(WeekPickerStyles, { variant: componentVariant }),
+        React.createElement(ReactDatePicker, { showWeekNumbers: true, showWeekPicker: true, weekLabel: weekShorthand, calendarStartDay: WEEK_START_DAY, selected: selectedDate, openToDate: selectedDate, dateFormat: finalDateFormat, onChange: handleSelectedDateChange, customInput: customInput, renderCustomHeader: renderCustomHeader, strictParsing: true, minDate: roundedMinDate, maxDate: roundedMaxDate, locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale], ref: weekPickerRefHandler, onFocus: onFocus, onBlur: onBlur, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: true }),
+        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+});
+export default WeekPicker;

package/dist/src/DatePickers/custom/MonthPickerHeader.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
-export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
-    locale?: string;
-}): React.JSX.Element;
+import React from "react";
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
+    locale?: string;
+}): React.JSX.Element;

package/dist/src/DatePickers/custom/MonthPickerHeader.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ControlIcon } from "../../Button";
+import { Flex } from "../../Flex";
+import { localizedFormat } from "../../utils/localized-date-fns";
+import { Text } from "../../Type";
+export function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }) {
+    const { t } = useTranslation();
+    return (React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5" },
+        React.createElement(ControlIcon, { icon: "leftArrow", label: t("go to previous year"), onClick: decreaseYear, disabled: prevMonthButtonDisabled }),
+        React.createElement(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" } }, localizedFormat(date, "yyyy", locale)),
+        React.createElement(ControlIcon, { icon: "rightArrow", label: t("go to next year"), onClick: increaseYear, disabled: nextMonthButtonDisabled })));
+}

package/dist/src/DatePickers/custom/weekPickerStyles.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ComponentVariant } from "../../NDSProvider/ComponentVariantContext";
-export declare const WeekPickerStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
-    variant: ComponentVariant;
-}>;
+/// <reference types="react" />
+import { ComponentVariant } from "../../NDSProvider/ComponentVariantContext";
+export declare const WeekPickerStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    variant: ComponentVariant;
+}>;

package/dist/src/DatePickers/custom/weekPickerStyles.js

@@ -0,0 +1,107 @@
+import { createGlobalStyle } from "styled-components";
+export const WeekPickerStyles = createGlobalStyle(({ theme, variant }) => ({
+    ".nds-date-picker": {
+        ".react-datepicker__week-number": {
+            marginRight: theme.space.x2,
+        },
+        ".react-datepicker__day, .react-datepicker__week-number": {
+            fontSize: theme.fontSizes.base,
+            borderRadius: theme.radii.large,
+            color: theme.colors.darkGrey,
+            border: "2px solid transparent",
+            display: "inline-block",
+            lineHeight: theme.lineHeights.base,
+            textAlign: "center",
+            width: `calc(${theme.space.x3} + ${theme.space.half})`,
+            margin: theme.space.half,
+            boxSizing: "content-box",
+            "&--today": {
+                fontWeight: theme.fontWeights.bold,
+                color: theme.colors.black,
+            },
+            "&--disabled": {
+                color: theme.colors.grey,
+                "&:hover": {
+                    color: theme.colors.grey,
+                },
+            },
+        },
+        ".react-datepicker__day--selected, .react-datepicker__week-number--selected": {
+            color: theme.colors.white,
+            lineHeight: theme.lineHeights.base,
+            cursor: "initial",
+            "&:hover": {
+                color: theme.colors.white,
+                background: theme.colors.darkBlue,
+            },
+        },
+    },
+    ".nds-date-picker .react-datepicker__week-number": {
+        border: "none",
+        margin: theme.space.none,
+        borderRight: `1px solid ${theme.colors.grey}`,
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        paddingLeft: theme.space.x1,
+        paddingRight: theme.space.x3,
+        paddingTop: theme.space.x1_5,
+        paddingBottom: theme.space.x1_5,
+        color: theme.colors.grey,
+        "&--clickable:not(:has(~ .react-datepicker__day--disabled))": {
+            color: theme.colors.darkGrey,
+            cursor: "pointer",
+        },
+    },
+    ".nds-date-picker .react-datepicker__day-names .react-datepicker__day-name": {
+        paddingTop: theme.space.x1,
+        paddingBottom: theme.space.x1_5,
+        "&:first-child": {
+            width: variant === "desktop" ? 61 : 85,
+            paddingLeft: theme.space.x1,
+            paddingRight: theme.space.x3,
+            borderRight: `1px solid ${theme.colors.grey}`,
+        },
+        "&:nth-child(2)": {
+            width: variant === "desktop" ? 61 : 85,
+            paddingLeft: theme.space.x3,
+            paddingRight: theme.space.x3,
+        },
+    },
+    ".nds-date-picker .react-datepicker__day-names": {
+        marginBottom: -1,
+    },
+    ".nds-date-picker .react-datepicker__day": {
+        margin: 0,
+        border: "none",
+        paddingRight: `calc(${theme.space.half} + 2px)`,
+        paddingLeft: `calc(${theme.space.half} + 2px)`,
+        paddingTop: theme.space.x1_5,
+        paddingBottom: theme.space.x1_5,
+        "&:nth-child(2)": {
+            marginLeft: theme.space.none,
+            paddingLeft: theme.space.x3,
+        },
+    },
+    ".nds-date-picker .react-datepicker__week": {
+        borderRadius: theme.radii.large,
+        "&:not(:has(.react-datepicker__day--disabled)):hover": {
+            backgroundColor: theme.colors.lightBlue,
+        },
+        "&--selected .react-datepicker__day": {
+            "&:hover": {
+                backgroundColor: theme.colors.darkBlue,
+                color: theme.colors.white,
+            },
+        },
+        "&--selected, &:has(.react-datepicker__day--selected)": {
+            backgroundColor: theme.colors.darkBlue,
+            ".react-datepicker__day, .react-datepicker__week-number": {
+                color: theme.colors.white,
+            },
+            "&:hover": {
+                background: theme.colors.darkBlue,
+                color: theme.colors.white,
+            },
+        },
+    },
+}));

package/dist/src/DatePickers/index.d.ts

@@ -1,3 +1,3 @@
-export { default as DatePicker } from "./DatePicker";
-export { default as MonthPicker } from "./MonthPicker";
-export { default as WeekPicker } from "./WeekPicker";
+export { default as DatePicker } from "./DatePicker";
+export { default as MonthPicker } from "./MonthPicker";
+export { default as WeekPicker } from "./WeekPicker";

package/dist/src/DatePickers/index.js

@@ -0,0 +1,3 @@
+export { default as DatePicker } from "./DatePicker";
+export { default as MonthPicker } from "./MonthPicker";
+export { default as WeekPicker } from "./WeekPicker";

package/dist/src/DatePickers/shared/components/BasePicker.d.ts

@@ -1,16 +1,16 @@
-import React from "react";
-import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
-import { DatePickerProps } from "../types";
-interface BasePickerProps extends DatePickerProps {
-    defaultFormat: string;
-    disabledKeyboardNavigation?: boolean;
-    defaultPlaceholder: string;
-    showMonthYearPicker?: boolean;
-    showWeekNumbers?: boolean;
-    renderHeader: (props: ReactDatePickerCustomHeaderProps) => JSX.Element;
-    onUpKeyPress?: () => void;
-    onDownKeyPress?: () => void;
-    onEnterKeyPress?: () => void;
-}
-export declare const BasePicker: React.ForwardRefExoticComponent<Omit<BasePickerProps, "ref"> & React.RefAttributes<ReactDatePicker>>;
-export {};
+import React from "react";
+import { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+import { DatePickerProps } from "../types";
+interface BasePickerProps extends DatePickerProps {
+    defaultFormat: string;
+    disabledKeyboardNavigation?: boolean;
+    defaultPlaceholder: string;
+    showMonthYearPicker?: boolean;
+    showWeekNumbers?: boolean;
+    renderHeader: (props: ReactDatePickerCustomHeaderProps) => JSX.Element;
+    onUpKeyPress?: () => void;
+    onDownKeyPress?: () => void;
+    onEnterKeyPress?: () => void;
+}
+export declare const BasePicker: React.ForwardRefExoticComponent<Omit<BasePickerProps, "ref"> & React.RefAttributes<ReactDatePicker>>;
+export {};

package/dist/src/DatePickers/shared/components/BasePicker.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useState } from "react";
+import propTypes from "@styled-system/prop-types";
+import ReactDatePicker from "react-datepicker";
+import { Field } from "../../../Form";
+import { InputFieldDefaultProps } from "../../../Input/InputField";
+import { NDS_TO_DATE_FN_LOCALES_MAP } from "../../../locales.const";
+import { useComponentVariant } from "../../../NDSProvider/ComponentVariantContext";
+import { useLocale } from "../../../NDSProvider/LocaleContext";
+import { registerDatePickerLocales } from "../../../utils/datePickerLocales";
+import { getSubset } from "../../../utils/subset";
+import { InlineValidation } from "../../../Validation";
+import { DatePickerStyles } from "../styles";
+import { getPopperModifiers } from "../helpers";
+import DatePickerInput from "./DatePickerInput";
+export const BasePicker = forwardRef((_a, pickerRef) => {
+    var { dateFormat, errorMessage, errorList, inputProps, minDate, maxDate, disableFlipping, className, onInputChange, onChange, onBlur, onFocus, selected, highlightDates, defaultFormat, defaultPlaceholder, showMonthYearPicker, showWeekNumbers, renderHeader, onUpKeyPress, onDownKeyPress, onEnterKeyPress, locale, disabledKeyboardNavigation } = _a, props = __rest(_a, ["dateFormat", "errorMessage", "errorList", "inputProps", "minDate", "maxDate", "disableFlipping", "className", "onInputChange", "onChange", "onBlur", "onFocus", "selected", "highlightDates", "defaultFormat", "defaultPlaceholder", "showMonthYearPicker", "showWeekNumbers", "renderHeader", "onUpKeyPress", "onDownKeyPress", "onEnterKeyPress", "locale", "disabledKeyboardNavigation"]);
+    const { locale: contextLocale } = useLocale();
+    const [ref, setRef] = useState(null);
+    const componentVariant = useComponentVariant();
+    const currentLocale = locale || contextLocale;
+    React.useEffect(() => {
+        registerDatePickerLocales();
+    }, []);
+    const handleInputChange = (event) => {
+        if (onInputChange) {
+            onInputChange(event.target.value);
+        }
+    };
+    const onRefChange = React.useCallback((node) => {
+        if (node) {
+            setRef(node);
+        }
+    }, []);
+    const handleEnterKey = () => {
+        if (ref) {
+            const isOpen = ref.isCalendarOpen();
+            ref.setOpen(!isOpen);
+        }
+    };
+    const customInputProps = Object.assign(Object.assign(Object.assign(Object.assign({}, InputFieldDefaultProps), { inputWidth: componentVariant === "touch" ? "280px" : "184px", error: !!(errorMessage || errorList) }), inputProps), { placeholder: (inputProps && inputProps.placeholder) || (dateFormat === defaultFormat ? defaultPlaceholder : dateFormat) });
+    const customInput = (React.createElement(DatePickerInput, { locale: currentLocale, variant: componentVariant, inputProps: customInputProps, dateFormat: dateFormat, onInputChange: handleInputChange, onUpKeyPress: onUpKeyPress, onDownKeyPress: onDownKeyPress, onEnterKeyPress: handleEnterKey }));
+    const pickerRefHandler = (r) => {
+        if (pickerRef) {
+            pickerRef["current"] = r;
+        }
+        onRefChange(r);
+    };
+    const spaceProps = getSubset(props, propTypes.space);
+    return (React.createElement(Field, Object.assign({ className: `${className} nds-date-picker` }, spaceProps),
+        React.createElement(DatePickerStyles, null),
+        React.createElement(ReactDatePicker, { highlightDates: highlightDates, selected: selected, openToDate: selected, dateFormat: dateFormat, onChange: onChange, customInput: customInput, renderCustomHeader: renderHeader, strictParsing: true, minDate: minDate, maxDate: maxDate, locale: NDS_TO_DATE_FN_LOCALES_MAP[currentLocale], ref: pickerRefHandler, onFocus: onFocus, onBlur: onBlur, showMonthYearPicker: showMonthYearPicker, showWeekNumbers: showWeekNumbers, onEnterKeyPress: onEnterKeyPress, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: disabledKeyboardNavigation }),
+        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+});

package/dist/src/DatePickers/shared/components/DatePickerHeader.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";
-type Props = {
-    date: Date;
-    decreaseMonth: React.MouseEventHandler<HTMLButtonElement>;
-    increaseMonth: React.MouseEventHandler<HTMLButtonElement>;
-    prevMonthButtonDisabled: boolean;
-    nextMonthButtonDisabled: boolean;
-    locale?: string;
-};
-export declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): React.JSX.Element;
-export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
-    locale?: string;
-}): React.JSX.Element;
-export {};
+import React from "react";
+import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";
+type Props = {
+    date: Date;
+    decreaseMonth: React.MouseEventHandler<HTMLButtonElement>;
+    increaseMonth: React.MouseEventHandler<HTMLButtonElement>;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    locale?: string;
+};
+export declare function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: Props): React.JSX.Element;
+export declare function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }: ReactDatePickerCustomHeaderProps & {
+    locale?: string;
+}): React.JSX.Element;
+export {};

package/dist/src/DatePickers/shared/components/DatePickerHeader.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Flex } from "../../../Flex";
+import { Text } from "../../../Type";
+import { ControlIcon } from "../../../Button";
+import { localizedFormat } from "../../../utils/localized-date-fns";
+export function DatePickerHeader({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }) {
+    return (React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", py: "half", px: "x1" },
+        React.createElement(ControlIcon, { icon: "leftArrow", label: "go to previous month", onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
+        React.createElement(Text, { fontWeight: "bold", color: "blackBlue", px: "x1", ml: "half", fontSize: "large", style: { textTransform: "capitalize" } }, localizedFormat(date, "MMMM yyyy", locale)),
+        React.createElement(ControlIcon, { icon: "rightArrow", label: "go to next month", onClick: increaseMonth, disabled: nextMonthButtonDisabled })));
+}
+export function MonthDatePickerHeader({ date, increaseYear, decreaseYear, prevMonthButtonDisabled, nextMonthButtonDisabled, locale, }) {
+    const { t } = useTranslation();
+    return (React.createElement(Flex, { justifyContent: "space-between", alignItems: "center", pb: "x1_5" },
+        React.createElement(ControlIcon, { icon: "leftArrow", label: t("go to previous year"), onClick: decreaseYear, disabled: prevMonthButtonDisabled }),
+        React.createElement(Text, { fontWeight: "bold", color: "blackBlue", px: "x8", fontSize: "large", style: { textTransform: "capitalize" } }, localizedFormat(date, "yyyy", locale)),
+        React.createElement(ControlIcon, { icon: "rightArrow", label: t("go to next year"), onClick: increaseYear, disabled: nextMonthButtonDisabled })));
+}

package/dist/src/DatePickers/shared/components/DatePickerInput.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-import { InputFieldProps } from "../../../Input/InputField";
-import { ComponentVariant } from "../../../NDSProvider/ComponentVariantContext";
-interface InputProps extends InputFieldProps {
-    placeholder?: string;
-}
-type DatePickerInputProps = React.ComponentPropsWithRef<"input"> & {
-    variant?: ComponentVariant;
-    dateFormat?: string;
-    inputProps?: InputProps;
-    locale: string;
-    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onUpKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onDownKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onEnterKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-};
-declare const DatePickerInput: React.ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export default DatePickerInput;
+import React from "react";
+import { InputFieldProps } from "../../../Input/InputField";
+import { ComponentVariant } from "../../../NDSProvider/ComponentVariantContext";
+interface InputProps extends InputFieldProps {
+    placeholder?: string;
+}
+type DatePickerInputProps = React.ComponentPropsWithRef<"input"> & {
+    variant?: ComponentVariant;
+    dateFormat?: string;
+    inputProps?: InputProps;
+    locale: string;
+    onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onUpKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onDownKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onEnterKeyPress: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+declare const DatePickerInput: React.ForwardRefExoticComponent<Omit<DatePickerInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default DatePickerInput;

package/dist/src/DatePickers/shared/components/DatePickerInput.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { InputField, InputFieldDefaultProps } from "../../../Input/InputField";
+const DatePickerInput = forwardRef(({ onChange, onClick, onBlur, onFocus, onInputChange, value, inputProps = InputFieldDefaultProps, onUpKeyPress, onDownKeyPress, onEnterKeyPress, variant, locale, "aria-label": ariaLabel, }, ref) => {
+    const { i18n } = useTranslation();
+    const { placeholder } = inputProps, inputFieldProps = __rest(inputProps, ["placeholder"]);
+    const handleChange = (event) => {
+        onInputChange(event);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    const t = React.useMemo(() => {
+        return i18n.getFixedT(locale);
+    }, [i18n, locale]);
+    const handleKeyDown = (event) => {
+        switch (event.key) {
+            case "ArrowUp":
+                if (onUpKeyPress)
+                    onUpKeyPress(event);
+                break;
+            case "ArrowDown":
+                if (onDownKeyPress)
+                    onDownKeyPress(event);
+                break;
+            case "Enter":
+                if (onEnterKeyPress)
+                    onEnterKeyPress(event);
+                break;
+        }
+    };
+    return (React.createElement(InputField, Object.assign({ onBlur: onBlur, onFocus: onFocus, ref: ref, variant: variant, "aria-label": ariaLabel || t("select a date"), autoComplete: "off", value: value, placeholder: placeholder, iconRight: "calendarToday", iconRightSize: "x2", onClick: onClick, onKeyDown: handleKeyDown, onChange: handleChange }, inputFieldProps)));
+});
+export default DatePickerInput;

package/dist/src/DatePickers/shared/helpers.d.ts

@@ -1,4 +1,4 @@
-export declare const getPopperModifiers: (disableFlipping: boolean) => {
-    name: string;
-    enabled: boolean;
-}[];
+export declare const getPopperModifiers: (disableFlipping: boolean) => {
+    name: string;
+    enabled: boolean;
+}[];

package/dist/src/DatePickers/shared/helpers.js

@@ -0,0 +1,6 @@
+export const getPopperModifiers = (disableFlipping) => [
+    {
+        name: "flip",
+        enabled: !disableFlipping,
+    },
+];