@nulogy/components 14.8.2 → 15.0.1

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const DatePickerStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
+/// <reference types="react" />
+export declare const DatePickerStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

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

@@ -0,0 +1,165 @@
+import { createGlobalStyle } from "styled-components";
+export const DatePickerStyles = createGlobalStyle(({ theme }) => ({
+    ".nds-date-picker": {
+        ".react-datepicker-wrapper": {
+            width: "fit-content",
+        },
+        ".react-datepicker__input-container": {
+            input: {
+                position: "relative",
+            },
+        },
+        ".react-datepicker__header": {
+            backgroundColor: theme.colors.white,
+            borderBottom: "none",
+            borderTopLeftRadius: theme.radii.medium,
+            borderTopRightRadius: theme.radii.medium,
+        },
+        ".react-datepicker__triangle": {
+            display: "none",
+        },
+        ".react-datepicker-popper": {
+            zIndex: theme.zIndices.openControl,
+        },
+        ".react-datepicker-popper[data-placement^='bottom']": {
+            marginTop: "0",
+        },
+        ".react-datepicker": {
+            backgroundColor: theme.colors.white,
+            outline: "none",
+            border: `1px solid ${theme.colors.blue}`,
+            boxShadow: theme.shadows.focus,
+            borderRadius: theme.radii.medium,
+            display: "inline-block",
+            position: "relative",
+            padding: theme.space.x1,
+            paddingTop: theme.space.x2,
+        },
+        ".react-datepicker__day-names": {
+            paddingTop: theme.space.x2,
+            ".react-datepicker__day-name": {
+                textTransform: "uppercase",
+                fontSize: theme.fontSizes.smaller,
+                display: "inline-block",
+                width: theme.space.x5,
+                color: theme.colors.darkGrey,
+                textAlign: "center",
+            },
+        },
+        ".react-datepicker__day": {
+            fontSize: theme.fontSizes.base,
+            borderRadius: theme.radii.medium,
+            color: theme.colors.darkGrey,
+            border: "2px solid transparent",
+            display: "inline-block",
+            lineHeight: theme.space.x4,
+            textAlign: "center",
+            width: `calc(${theme.space.x3} + ${theme.space.half})`,
+            margin: theme.space.half,
+            boxSizing: "content-box",
+            "&:hover": {
+                backgroundColor: theme.colors.lightBlue,
+                color: theme.colors.black,
+            },
+            "&--today": {
+                fontWeight: theme.fontWeights.bold,
+                color: theme.colors.black,
+            },
+            "&--outside-month": {
+                color: theme.colors.midGrey,
+                fontSize: theme.fontSizes.small,
+            },
+            "&--disabled": {
+                color: theme.colors.grey,
+                "&:hover": {
+                    color: theme.colors.grey,
+                },
+            },
+            "&--highlighted": {
+                backgroundColor: theme.colors.darkBlue,
+                color: theme.colors.white,
+                "&:hover": {
+                    backgroundColor: theme.colors.darkBlue,
+                    color: theme.colors.white,
+                },
+            },
+        },
+        ".react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text": {
+            "&[aria-disabled='false']": {
+                cursor: "pointer",
+            },
+        },
+        ".react-datepicker__month-text--today": {
+            fontWeight: theme.fontWeights.bold,
+            color: theme.colors.black,
+        },
+        ".react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover": {
+            backgroundColor: "transparent",
+        },
+        ".react-datepicker__day-names, .react-datepicker__week": {
+            whiteSpace: "nowrap",
+        },
+        ".react-datepicker__day--selected": {
+            color: theme.colors.white,
+            background: theme.colors.darkBlue,
+            border: `2px solid ${theme.colors.darkBlue}`,
+            lineHeight: theme.space.x4,
+            cursor: "initial",
+            "&:hover": {
+                color: theme.colors.white,
+                background: theme.colors.darkBlue,
+            },
+        },
+        ".react-datepicker__aria-live": {
+            position: "absolute",
+            clipPath: "circle(0)",
+            border: "0",
+            height: "1px",
+            margin: "-1px",
+            overflow: "hidden",
+            padding: "0",
+            width: "1px",
+            whiteSpace: "nowrap",
+        },
+        ".react-datepicker:has(.react-datepicker__month)": {
+            padding: theme.space.x2,
+        },
+        ".react-datepicker__monthPicker": {
+            display: "grid",
+            padding: theme.space.x1,
+            gridTemplateColumns: "repeat(3, 1fr)",
+            columnGap: theme.space.x4,
+            rowGap: theme.space.x1,
+        },
+        ".react-datepicker__month-wrapper": {
+            display: "contents",
+            width: "fit-content",
+        },
+        ".react-datepicker__month-text": {
+            padding: theme.space.x1,
+            fontSize: theme.fontSizes.base,
+            color: theme.colors.darkGrey,
+            borderRadius: theme.radii.medium,
+            textAlign: "center",
+            "&:not(.react-datepicker__month-text--disabled):hover": {
+                backgroundColor: theme.colors.lightBlue,
+                color: theme.colors.darkGrey,
+            },
+            "&--disabled": {
+                userSelect: "none",
+                color: theme.colors.grey,
+                "&:hover": {
+                    color: theme.colors.grey,
+                },
+            },
+        },
+        ".react-datepicker__month-text--selected": {
+            backgroundColor: theme.colors.darkBlue,
+            color: theme.colors.white,
+            "&:hover": {
+                backgroundColor: theme.colors.darkBlue,
+                color: theme.colors.white,
+            },
+        },
+    },
+}));

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

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-import { ReactDatePickerProps } from "react-datepicker";
-import { InputFieldProps } from "../../Input/InputField";
-import { FieldProps } from "../../Form/Field";
-type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
-export interface DatePickerProps extends Omit<FieldProps, OmittedFieldProps> {
-    className?: string;
-    dateFormat?: string;
-    disableFlipping?: boolean;
-    errorList?: string[];
-    errorMessage?: string;
-    highlightDates?: ReactDatePickerProps["highlightDates"];
-    inputProps?: InputFieldProps;
-    locale?: string;
-    maxDate?: Date;
-    minDate?: Date;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onChange?: (date: Date) => void;
-    onInputChange?: (value: string) => void;
-    selected?: Date;
-}
-export {};
+/// <reference types="react" />
+import { ReactDatePickerProps } from "react-datepicker";
+import { InputFieldProps } from "../../Input/InputField";
+import { FieldProps } from "../../Form/Field";
+type OmittedFieldProps = "onChange" | "onBlur" | "onFocus";
+export interface DatePickerProps extends Omit<FieldProps, OmittedFieldProps> {
+    className?: string;
+    dateFormat?: string;
+    disableFlipping?: boolean;
+    errorList?: string[];
+    errorMessage?: string;
+    highlightDates?: ReactDatePickerProps["highlightDates"];
+    inputProps?: InputFieldProps;
+    locale?: string;
+    maxDate?: Date;
+    minDate?: Date;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (date: Date) => void;
+    onInputChange?: (value: string) => void;
+    selected?: Date;
+}
+export {};

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

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

package/dist/src/DatePickers/stories/DatePicker.story.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithCustomDateFormat: () => React.JSX.Element;
-export declare const WithCustomPlaceholder: () => React.JSX.Element;
-export declare const WithErrorState: () => React.JSX.Element;
-export declare const WithMinAndMaxDate: () => React.JSX.Element;
-export declare const DisableFlipping: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithCustomDateFormat: () => React.JSX.Element;
+export declare const WithCustomPlaceholder: () => React.JSX.Element;
+export declare const WithErrorState: () => React.JSX.Element;
+export declare const WithMinAndMaxDate: () => React.JSX.Element;
+export declare const DisableFlipping: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: () => React.JSX.Element;

package/dist/src/DatePickers/stories/DatePicker.story.js

@@ -0,0 +1,46 @@
+import React, { useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { select, boolean } from "@storybook/addon-knobs";
+import { DatePicker } from "../index";
+import { Button } from "../..";
+const selectedDateExamples = [
+    new Date("2019-01-01T05:00:00.000Z"),
+    new Date("2019-02-05T05:00:00.000Z"),
+    new Date("2019-03-07T05:00:00.000Z"),
+];
+export default {
+    title: "Components/DatePickers/DatePicker",
+};
+export const Default = () => (React.createElement(DatePicker
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+, { 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    selected: select("selected", selectedDateExamples, selectedDateExamples[0], "selected"), onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
+export const WithCustomDateFormat = () => (React.createElement(DatePicker
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+, { 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    selected: select("selected", selectedDateExamples, selectedDateExamples[0], "selected"), dateFormat: "MMMM d, yyyy", onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
+export const WithCustomPlaceholder = () => (React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date", placeholder: "Month day, year" } }));
+export const WithErrorState = () => (React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, errorMessage: "The date is invalid" }));
+export const WithMinAndMaxDate = () => (React.createElement(DatePicker, { selected: new Date("2019-01-05T05:00:00.000Z"), minDate: new Date("2019-01-03T05:00:00.000Z"), maxDate: new Date("2019-01-10T05:00:00.000Z"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" } }));
+export const DisableFlipping = () => (React.createElement(DatePicker
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+, { 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    selected: select("selected", selectedDateExamples, selectedDateExamples[0], "selected"), onBlur: action("date selector blurred"), onFocus: action("date selector focused"), onChange: action("date changed"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, disableFlipping: boolean("disableFlipping", true) }));
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.setFocus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePicker, { dateFormat: "MMMM d, yyyy", onChange: action("date changed"), onFocus: action("date selector focused"), onBlur: action("date selector blurred"), onInputChange: action("input changed"), inputProps: { labelText: "Expiry Date" }, ref: ref }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Toggle")));
+};

package/dist/src/DatePickers/stories/MonthPicker.story.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithPlaceholder: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const WithDefaultValue: () => React.JSX.Element;
-export declare const WithMinMaxDate: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithPlaceholder: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const WithDefaultValue: () => React.JSX.Element;
+export declare const WithMinMaxDate: () => React.JSX.Element;
+export declare const AdvancedUsage: () => React.JSX.Element;

package/dist/src/DatePickers/stories/MonthPicker.story.js

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { format } from "date-fns";
+import MonthPicker from "../MonthPicker";
+export default {
+    title: "Components/DatePickers/MonthPicker",
+};
+export const Default = () => {
+    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date" } });
+};
+export const WithPlaceholder = () => {
+    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date", placeholder: "Select month" } });
+};
+export const Disabled = () => {
+    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date", disabled: true } });
+};
+export const WithDefaultValue = () => {
+    const defaultDate = new Date();
+    defaultDate.setMonth(defaultDate.getMonth() - 1);
+    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date" }, selected: defaultDate });
+};
+export const WithMinMaxDate = () => {
+    const minDate = new Date();
+    minDate.setFullYear(minDate.getFullYear() - 1);
+    const maxDate = new Date();
+    maxDate.setFullYear(maxDate.getFullYear() + 1);
+    return React.createElement(MonthPicker, { inputProps: { labelText: "Expiry Date" }, minDate: minDate, maxDate: new Date() });
+};
+export const AdvancedUsage = () => {
+    const [selectedDate, setSelectedDate] = useState(null);
+    const [inputValue, setInputValue] = useState("");
+    const [hasError, setHasError] = useState(false);
+    const handleMonthChange = (date) => {
+        setSelectedDate(date);
+        setHasError(false);
+        // Format for display: "January 2023"
+        setInputValue(format(date, "MMMM yyyy"));
+    };
+    const handleInputChange = (value) => {
+        setInputValue(value);
+        // Custom validation could be implemented here
+    };
+    return (React.createElement(MonthPicker, { selected: selectedDate, onChange: handleMonthChange, onInputChange: handleInputChange, minDate: new Date(2023, 0, 1), maxDate: new Date(), errorMessage: hasError ? "Please select a valid month" : undefined, inputProps: {
+            value: inputValue,
+            inputWidth: "300px",
+            placeholder: "Select a month",
+            labelText: "Reporting Month",
+            requirementText: "(Required)",
+            helpText: "Select the month for your monthly report submission",
+        } }));
+};

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

@@ -1,13 +1,13 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithError: () => React.JSX.Element;
-export declare const WithMinMaxDates: () => React.JSX.Element;
-export declare const WithCustomDateFormat: () => React.JSX.Element;
-export declare const WithPreselectedDate: () => React.JSX.Element;
-export declare const WithCustomLocale: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const AdvancedUsage: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;
+export declare const WithError: () => React.JSX.Element;
+export declare const WithMinMaxDates: () => React.JSX.Element;
+export declare const WithCustomDateFormat: () => React.JSX.Element;
+export declare const WithPreselectedDate: () => React.JSX.Element;
+export declare const WithCustomLocale: () => React.JSX.Element;
+export declare const Disabled: () => React.JSX.Element;
+export declare const AdvancedUsage: () => React.JSX.Element;

package/dist/src/DatePickers/stories/WeekPicker.story.js

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { format } from "date-fns";
+import { Text } from "../../Type";
+import WeekPicker from "../WeekPicker";
+export default {
+    title: "Components/DatePickers/WeekPicker",
+};
+export const Default = () => React.createElement(WeekPicker, { inputProps: { labelText: "Expiry Date" } });
+export const WithError = () => (React.createElement(WeekPicker, { inputProps: { labelText: "Week Selection" }, errorMessage: "Please select a valid week" }));
+export const WithMinMaxDates = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { mb: "x2" }, "If a min or a max day falls in the middle of the week, no day in the week will be selectable."),
+        React.createElement(WeekPicker, { inputProps: { labelText: "Select Week" }, minDate: new Date("01/15/2025"), maxDate: new Date("01/29/2025") })));
+};
+export const WithCustomDateFormat = () => (React.createElement(WeekPicker, { inputProps: { labelText: "Week", inputWidth: "320px" }, dateFormat: "'Week starting' dd/MM/yyyy" }));
+export const WithPreselectedDate = () => (React.createElement(WeekPicker, { inputProps: { labelText: "Selected Week" }, selected: new Date("01/21/2025") }));
+export const WithCustomLocale = () => React.createElement(WeekPicker, { inputProps: { labelText: "Semaine" }, locale: "fr_FR" });
+export const Disabled = () => (React.createElement(WeekPicker, { inputProps: {
+        labelText: "Week Selection",
+        disabled: true,
+    } }));
+export const AdvancedUsage = () => {
+    const [selectedWeek, setSelectedWeek] = useState(null);
+    const [inputValue, setInputValue] = useState("");
+    const [hasError, setHasError] = useState(false);
+    const handleWeekChange = (weekRange) => {
+        setSelectedWeek(weekRange);
+        setHasError(false);
+        // Format for display: "Week 12, 2023 (Mar 20 - Mar 26)"
+        setInputValue(`Week ${weekRange.weekNumber}, ${weekRange.year} (${format(weekRange.startDate, "MM/dd/yyyy")} - ${format(weekRange.endDate, "MM/dd/yyyy")})`);
+    };
+    const handleInputChange = (value) => {
+        setInputValue(value);
+        // Custom validation could be implemented here
+    };
+    return (React.createElement(WeekPicker, { selected: selectedWeek === null || selectedWeek === void 0 ? void 0 : selectedWeek.startDate, onChange: handleWeekChange, onInputChange: handleInputChange, minDate: new Date(2023, 0, 1), maxDate: new Date(), errorMessage: hasError ? "Please select a valid week" : undefined, inputProps: {
+            value: inputValue,
+            inputWidth: "560px",
+            placeholder: "Select a week",
+            labelText: "Reporting Week",
+            requirementText: "(Required)",
+            helpText: "Select the week for your weekly report submission",
+        } }));
+};

package/dist/src/DateRange/DateRange.d.ts

@@ -1,36 +1,36 @@
-import React from "react";
-import { FieldProps } from "../Form/Field";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type DateRangeProps = FieldProps & {
-    dateFormat?: string;
-    onRangeChange?: (...args: any[]) => any;
-    onStartDateChange?: (...args: any[]) => any;
-    onEndDateChange?: (...args: any[]) => any;
-    endDateErrorMessage?: string;
-    startDateErrorMessage?: string;
-    errorMessage?: string;
-    defaultStartDate?: any;
-    defaultEndDate?: any;
-    endDateInputProps?: any;
-    startDateInputProps?: any;
-    disableRangeValidation?: boolean;
-    labelProps?: any;
-    minDate?: any;
-    maxDate?: any;
-    showTimes?: boolean;
-    minTime?: string;
-    maxTime?: string;
-    defaultStartTime?: string;
-    defaultEndTime?: string;
-    onStartTimeChange?: (...args: any[]) => any;
-    onEndTimeChange?: (...args: any[]) => any;
-    timeFormat?: string;
-    interval?: number;
-    locale?: string;
-    disableFlipping?: boolean;
-    endTimeProps?: any;
-    startTimeProps?: any;
-    variant?: ComponentVariant;
-};
-declare const DateRange: React.ForwardRefExoticComponent<Omit<DateRangeProps, "ref"> & React.RefAttributes<unknown>>;
-export default DateRange;
+import React from "react";
+import { FieldProps } from "../Form/Field";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type DateRangeProps = FieldProps & {
+    dateFormat?: string;
+    onRangeChange?: (...args: any[]) => any;
+    onStartDateChange?: (...args: any[]) => any;
+    onEndDateChange?: (...args: any[]) => any;
+    endDateErrorMessage?: string;
+    startDateErrorMessage?: string;
+    errorMessage?: string;
+    defaultStartDate?: any;
+    defaultEndDate?: any;
+    endDateInputProps?: any;
+    startDateInputProps?: any;
+    disableRangeValidation?: boolean;
+    labelProps?: any;
+    minDate?: any;
+    maxDate?: any;
+    showTimes?: boolean;
+    minTime?: string;
+    maxTime?: string;
+    defaultStartTime?: string;
+    defaultEndTime?: string;
+    onStartTimeChange?: (...args: any[]) => any;
+    onEndTimeChange?: (...args: any[]) => any;
+    timeFormat?: string;
+    interval?: number;
+    locale?: string;
+    disableFlipping?: boolean;
+    endTimeProps?: any;
+    startTimeProps?: any;
+    variant?: ComponentVariant;
+};
+declare const DateRange: React.ForwardRefExoticComponent<Omit<DateRangeProps, "ref"> & React.RefAttributes<unknown>>;
+export default DateRange;

package/dist/src/DateRange/DateRange.js

@@ -0,0 +1,105 @@
+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, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import { isBefore, isSameDay } from "date-fns";
+import { useTranslation } from "react-i18next";
+import { DatePicker } from "../DatePickers";
+import { RangeContainer } from "../RangeContainer";
+import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type";
+import { DateRangeStyles, highlightDates } from "./DateRangeStyles";
+import { getDuration } from "../TimeRange/TimeRange.utils";
+import EndTime from "./EndTime";
+import StartTime from "./StartTime";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+const DEFAULT_LABEL = "Date Range";
+const DateRange = forwardRef((_a, ref) => {
+    var { dateFormat, onRangeChange, onStartDateChange, onEndDateChange, errorMessage, startDateErrorMessage, endDateErrorMessage, defaultStartDate = null, defaultEndDate = null, endDateInputProps, startDateInputProps, disableRangeValidation, labelProps = Object.assign(Object.assign({}, FieldLabelDefaultProps), { labelText: DEFAULT_LABEL }), minDate, maxDate, showTimes, minTime, maxTime, defaultStartTime, defaultEndTime, onStartTimeChange, onEndTimeChange, timeFormat, interval, disableFlipping = false, locale, endTimeProps, startTimeProps, variant } = _a, props = __rest(_a, ["dateFormat", "onRangeChange", "onStartDateChange", "onEndDateChange", "errorMessage", "startDateErrorMessage", "endDateErrorMessage", "defaultStartDate", "defaultEndDate", "endDateInputProps", "startDateInputProps", "disableRangeValidation", "labelProps", "minDate", "maxDate", "showTimes", "minTime", "maxTime", "defaultStartTime", "defaultEndTime", "onStartTimeChange", "onEndTimeChange", "timeFormat", "interval", "disableFlipping", "locale", "endTimeProps", "startTimeProps", "variant"]);
+    const dateRef1 = useRef(null);
+    const dateRef2 = useRef(null);
+    const timeRef1 = useRef(null);
+    const timeRef2 = useRef(null);
+    const [startDate, setStartDate] = useState(defaultStartDate);
+    const [endDate, setEndDate] = useState(defaultEndDate);
+    const [startTime, setStartTime] = useState(defaultStartTime);
+    const [endTime, setEndTime] = useState(defaultEndTime);
+    const [rangeError, setRangeError] = useState();
+    const { t } = useTranslation();
+    const componentVariant = useComponentVariant(variant);
+    useImperativeHandle(ref, () => ({
+        dateRef1: Object.assign(Object.assign({}, dateRef1), { focus: () => { var _a; return (_a = dateRef1.current) === null || _a === void 0 ? void 0 : _a.setFocus(); } }),
+        dateRef2: Object.assign(Object.assign({}, dateRef2), { focus: () => { var _a; return (_a = dateRef2.current) === null || _a === void 0 ? void 0 : _a.setFocus(); } }),
+        timeRef1: Object.assign(Object.assign({}, timeRef1), { focus: () => { var _a; return (_a = timeRef1.current) === null || _a === void 0 ? void 0 : _a.focus(); } }),
+        timeRef2: Object.assign(Object.assign({}, timeRef2), { focus: () => { var _a; return (_a = timeRef2.current) === null || _a === void 0 ? void 0 : _a.focus(); } }),
+    }));
+    useEffect(() => {
+        validateDateRange();
+    }, [startDate, endDate, startTime, endTime]);
+    const changeStartTimeHandler = (label, value) => {
+        setStartTime(value);
+        if (onStartTimeChange) {
+            onStartTimeChange(label, value);
+        }
+    };
+    const changeEndTimeHandler = (label, value) => {
+        setEndTime(value);
+        if (onEndTimeChange) {
+            onEndTimeChange(label, value);
+        }
+    };
+    const changeStartDateHandler = (date) => {
+        setStartDate(date);
+        if (onStartDateChange) {
+            onStartDateChange(date);
+        }
+    };
+    const changeEndDateHandler = (date) => {
+        setEndDate(date);
+        if (onEndDateChange) {
+            onEndDateChange(date);
+        }
+    };
+    const validateDateRange = () => {
+        let error;
+        if (endDate && startDate) {
+            if (isBefore(endDate, startDate) && (showTimes || !isSameDay(endDate, startDate))) {
+                error = "end date is before start date";
+            }
+            if (isSameDay(endDate, startDate) && showTimes) {
+                const duration = getDuration(startTime, endTime);
+                if (duration < 0) {
+                    error = "end time is before start time";
+                }
+            }
+        }
+        setRangeError(error);
+        if (onRangeChange) {
+            onRangeChange({
+                startDate,
+                endDate,
+                startTime,
+                endTime,
+                error,
+            });
+        }
+    };
+    const startInputProps = Object.assign({ "aria-label": t("select a start date"), error: rangeError }, startDateInputProps);
+    const startDateInput = (React.createElement(React.Fragment, null,
+        React.createElement(DatePicker, { dateFormat: dateFormat, selected: startDate, onChange: changeStartDateHandler, inputProps: startInputProps, errorMessage: startDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef1 }),
+        showTimes && (React.createElement(StartTime, Object.assign({ variant: componentVariant, selected: startTime, defaultValue: defaultStartTime, "aria-label": t("select a start time"), minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeStartTimeHandler, locale: locale, "data-testid": "daterange-start-time", ref: timeRef1, error: !!rangeError }, startTimeProps)))));
+    const endDateInput = (React.createElement(React.Fragment, null,
+        showTimes && (React.createElement(EndTime, Object.assign({ variant: componentVariant, selected: endTime, defaultValue: defaultEndTime, minTime: minTime, maxTime: maxTime, timeFormat: timeFormat, interval: interval, onChange: changeEndTimeHandler, locale: locale, "aria-label": t("select an end time"), "data-testid": "daterange-end-time", ref: timeRef2, error: !!rangeError }, endTimeProps))),
+        React.createElement(DatePicker, { dateFormat: dateFormat, selected: endDate, onChange: changeEndDateHandler, inputProps: Object.assign({ "aria-label": t("select an end date"), error: rangeError }, endDateInputProps), errorMessage: endDateErrorMessage, minDate: minDate, maxDate: maxDate, highlightDates: highlightDates(startDate, endDate), locale: locale, disableFlipping: disableFlipping, ref: dateRef2 })));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DateRangeStyles, null),
+        React.createElement(RangeContainer, Object.assign({ variant: componentVariant, labelProps: Object.assign(Object.assign({}, labelProps), { labelText: labelProps.labelText === DEFAULT_LABEL ? t("date range") : labelProps.labelText }), startComponent: startDateInput, endComponent: endDateInput, errorMessages: !disableRangeValidation ? [t(rangeError), errorMessage] : [errorMessage] }, props))));
+});
+export default DateRange;