@nulogy/components 15.2.1 → 15.2.3

package/dist/src/DatePickers/DatePicker.js

@@ -1,22 +1,10 @@
-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 { subDays, addDays, isValid, isAfter, isBefore, isSameDay } from "date-fns";
 import { BasePicker } from "./shared/components/BasePicker";
 import { DatePickerHeader } from "./shared/components/DatePickerHeader";
 const DEFAULT_DATE_FORMAT = "yyyy-MMM-dd";
 const DEFAULT_PLACEHOLDER = "YYYY-Mon-DD";
-const DatePicker = forwardRef((_a, datePickerRef) => {
-    var { selected, dateFormat = DEFAULT_DATE_FORMAT, onChange } = _a, props = __rest(_a, ["selected", "dateFormat", "onChange"]);
+const DatePicker = forwardRef(({ selected, dateFormat = DEFAULT_DATE_FORMAT, onChange, ...props }, datePickerRef) => {
     const [selectedDate, setSelectedDate] = useState(selected);
     const [ref] = useState(null);
     useEffect(() => {
@@ -46,6 +34,6 @@ const DatePicker = forwardRef((_a, datePickerRef) => {
             ref.setOpen(!isOpen);
         }
     };
-    return (React.createElement(BasePicker, Object.assign({}, props, { selected: selectedDate, dateFormat: dateFormat, onChange: handleSelectedDateChange, ref: datePickerRef, defaultFormat: DEFAULT_DATE_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: false, disabledKeyboardNavigation: true, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey, renderHeader: (headerProps) => (React.createElement(DatePickerHeader, Object.assign({ locale: props.locale }, headerProps))) })));
+    return (React.createElement(BasePicker, { ...props, selected: selectedDate, dateFormat: dateFormat, onChange: handleSelectedDateChange, ref: datePickerRef, defaultFormat: DEFAULT_DATE_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: false, disabledKeyboardNavigation: true, onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey, renderHeader: (headerProps) => (React.createElement(DatePickerHeader, { locale: props.locale, ...headerProps })) }));
 });
 export default DatePicker;

package/dist/src/DatePickers/MonthPicker.js

@@ -1,22 +1,10 @@
-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 MonthPicker = forwardRef(({ selected, dateFormat = DEFAULT_MONTH_FORMAT, onChange, ...props }, monthPickerRef) => {
     const [selectedDate, setSelectedDate] = useState(selected);
     const [ref] = useState(null);
     useEffect(() => {
@@ -36,6 +24,6 @@ const MonthPicker = forwardRef((_a, monthPickerRef) => {
             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 })));
+    return (React.createElement(BasePicker, { ...props, selected: selectedDate, onChange: handleSelectedDateChange, ref: monthPickerRef, dateFormat: dateFormat, defaultFormat: DEFAULT_MONTH_FORMAT, defaultPlaceholder: DEFAULT_PLACEHOLDER, showMonthYearPicker: true, renderHeader: (headerProps) => (React.createElement(MonthDatePickerHeader, { locale: props.locale, ...headerProps })), onUpKeyPress: handleUpKey, onDownKeyPress: handleDownKey, onEnterKeyPress: handleEnterKey }));
 });
 export default MonthPicker;

package/dist/src/DatePickers/WeekPicker.js

@@ -1,14 +1,3 @@
-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";
@@ -40,8 +29,7 @@ const roundMaxDateToWeekEnd = (date) => {
     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 WeekPicker = forwardRef(({ dateFormat, errorMessage, errorList, inputProps, minDate, maxDate, locale, disableFlipping, className, onInputChange, onChange, onBlur, onFocus, selected, ...props }, datePickerRef) => {
     const [selectedDate, setSelectedDate] = useState(selected);
     const { locale: contextLocale } = useLocale();
     const { i18n } = useTranslation();
@@ -111,7 +99,7 @@ const WeekPicker = forwardRef((_a, datePickerRef) => {
         }
     };
     const renderCustomHeader = (props) => {
-        return React.createElement(DatePickerHeader, Object.assign({ locale: currentLocale }, props));
+        return React.createElement(DatePickerHeader, { locale: currentLocale, ...props });
     };
     const weekPickerRefHandler = (r) => {
         if (datePickerRef) {
@@ -119,10 +107,15 @@ const WeekPicker = forwardRef((_a, datePickerRef) => {
         }
         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 customInputProps = {
+        ...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),
+    return (React.createElement(Field, { 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 }),

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

@@ -1,4 +1,3 @@
-/// <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/shared/components/BasePicker.js

@@ -1,14 +1,3 @@
-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";
@@ -23,8 +12,7 @@ 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, name, required } = _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", "name", "required"]);
+export const BasePicker = forwardRef(({ dateFormat, errorMessage, errorList, inputProps, minDate, maxDate, disableFlipping, className, onInputChange, onChange, onBlur, onFocus, selected, highlightDates, defaultFormat, defaultPlaceholder, showMonthYearPicker, showWeekNumbers, renderHeader, onUpKeyPress, onDownKeyPress, onEnterKeyPress, locale, disabledKeyboardNavigation, name, required, ...props }, pickerRef) => {
     const { locale: contextLocale } = useLocale();
     const [ref, setRef] = useState(null);
     const componentVariant = useComponentVariant();
@@ -48,7 +36,13 @@ export const BasePicker = forwardRef((_a, pickerRef) => {
             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 customInputProps = {
+        ...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) {
@@ -57,7 +51,7 @@ export const BasePicker = forwardRef((_a, pickerRef) => {
         onRefChange(r);
     };
     const spaceProps = getSubset(props, propTypes.space);
-    return (React.createElement(Field, Object.assign({ className: `${className} nds-date-picker` }, spaceProps),
+    return (React.createElement(Field, { 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, name: name, required: required, onEnterKeyPress: onEnterKeyPress, popperModifiers: getPopperModifiers(disableFlipping), disabledKeyboardNavigation: disabledKeyboardNavigation }),
         React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));

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

@@ -1,20 +1,9 @@
-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 { placeholder, ...inputFieldProps } = inputProps;
     const handleChange = (event) => {
         onInputChange(event);
         if (onChange) {
@@ -40,6 +29,6 @@ const DatePickerInput = forwardRef(({ onChange, onClick, onBlur, onFocus, onInpu
                 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)));
+    return (React.createElement(InputField, { 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/styles.d.ts

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReactDatePickerProps } from "react-datepicker";
 import { InputFieldProps } from "../../Input/InputField";
 import { FieldProps } from "../../Form/Field";

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

@@ -1,12 +1,16 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { DatePicker } from "../index";
 declare const _default: {
     title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("../shared/types").DatePickerProps, "ref"> & React.RefAttributes<ReactDatePicker>>;
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const WithCustomDateFormat: () => React.JSX.Element;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const WithCustomDateFormat: Story;
 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 DisableFlipping: Story;
 export declare const UsingRefToControlFocus: () => React.JSX.Element;

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

@@ -1,6 +1,5 @@
 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 = [
@@ -10,31 +9,64 @@ const selectedDateExamples = [
 ];
 export default {
     title: "Components/DatePickers/DatePicker",
+    component: DatePicker,
+};
+export const Default = {
+    args: {
+        selected: selectedDateExamples[0],
+        onChange: action("date changed"),
+        onFocus: action("date selector focused"),
+        onBlur: action("date selector blurred"),
+        onInputChange: action("input changed"),
+        inputProps: { labelText: "Expiry Date" },
+    },
+    argTypes: {
+        selected: {
+            control: { type: "select" },
+            options: selectedDateExamples,
+        },
+    },
+};
+export const WithCustomDateFormat = {
+    args: {
+        selected: selectedDateExamples[0],
+        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" },
+    },
+    argTypes: {
+        selected: {
+            control: { type: "select" },
+            options: selectedDateExamples,
+        },
+    },
 };
-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 DisableFlipping = {
+    args: {
+        selected: selectedDateExamples[0],
+        onBlur: action("date selector blurred"),
+        onFocus: action("date selector focused"),
+        onChange: action("date changed"),
+        onInputChange: action("input changed"),
+        inputProps: { labelText: "Expiry Date" },
+        disableFlipping: true,
+    },
+    argTypes: {
+        selected: {
+            control: { type: "select" },
+            options: selectedDateExamples,
+        },
+        disableFlipping: {
+            control: { type: "boolean" },
+        },
+    },
+};
 export const UsingRefToControlFocus = () => {
     const ref = useRef(null);
     const handleClick = () => {

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

@@ -33,7 +33,7 @@ export const AdvancedUsage = () => {
         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: {
+    return (React.createElement(WeekPicker, { selected: 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",

package/dist/src/DateRange/DateRange.js

@@ -1,14 +1,3 @@
-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";
@@ -21,8 +10,10 @@ 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 DateRange = forwardRef(({ dateFormat, onRangeChange, onStartDateChange, onEndDateChange, errorMessage, startDateErrorMessage, endDateErrorMessage, defaultStartDate = null, defaultEndDate = null, endDateInputProps, startDateInputProps, disableRangeValidation, labelProps = {
+    ...FieldLabelDefaultProps,
+    labelText: DEFAULT_LABEL,
+}, minDate, maxDate, showTimes, minTime, maxTime, defaultStartTime, defaultEndTime, onStartTimeChange, onEndTimeChange, timeFormat, interval, disableFlipping = false, locale, endTimeProps, startTimeProps, variant, ...props }, ref) => {
     const dateRef1 = useRef(null);
     const dateRef2 = useRef(null);
     const timeRef1 = useRef(null);
@@ -35,10 +26,22 @@ const DateRange = forwardRef((_a, ref) => {
     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(); } }),
+        dateRef1: {
+            ...dateRef1,
+            focus: () => dateRef1.current?.setFocus(),
+        },
+        dateRef2: {
+            ...dateRef2,
+            focus: () => dateRef2.current?.setFocus(),
+        },
+        timeRef1: {
+            ...timeRef1,
+            focus: () => timeRef1.current?.focus(),
+        },
+        timeRef2: {
+            ...timeRef2,
+            focus: () => timeRef2.current?.focus(),
+        },
     }));
     useEffect(() => {
         validateDateRange();
@@ -91,15 +94,26 @@ const DateRange = forwardRef((_a, ref) => {
             });
         }
     };
-    const startInputProps = Object.assign({ "aria-label": t("select a start date"), error: rangeError }, startDateInputProps);
+    const startInputProps = {
+        "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)))));
+        showTimes && (React.createElement(StartTime, { 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 })));
+        showTimes && (React.createElement(EndTime, { 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: {
+                "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))));
+        React.createElement(RangeContainer, { variant: componentVariant, labelProps: {
+                ...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;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const highlightDates: (startDate: Date, endDate: Date) => ({
     "nds-datepicker-day--start-date": Date[];
     "nds-datepicker-day--end-date"?: undefined;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const EndTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
@@ -14,14 +13,14 @@ declare const EndTime: import("styled-components/dist/types").IStyledComponentBa
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 }, "ref"> & {
     ref?: any;
 }, never>> & string & Omit<import("react").FC<import("react").PropsWithChildren<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
@@ -39,7 +38,7 @@ declare const EndTime: import("styled-components/dist/types").IStyledComponentBa
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const StartTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
     disabled?: boolean;
@@ -14,14 +13,14 @@ declare const StartTime: import("styled-components/dist/types").IStyledComponent
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;
     onFocus?: (...args: any[]) => any;
     onClick?: (...args: any[]) => any;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 }, "ref"> & {
     ref?: any;
 }, never>> & string & Omit<import("react").FC<import("react").PropsWithChildren<import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
@@ -39,7 +38,7 @@ declare const StartTime: import("styled-components/dist/types").IStyledComponent
     defaultValue?: string;
     "aria-label"?: string;
     errorMessage?: string;
-    errorList?: import("react").ReactNode;
+    errorList?: React.ReactNode;
     labelText?: string;
     ref?: any;
     onBlur?: (...args: any[]) => any;

package/dist/src/Decorations/index.js

@@ -11,7 +11,7 @@ const RightAngleTriangle = styled(Box) `
 `;
 export default function BackgroundTriangles(props) {
     const theme = useTheme();
-    return (React.createElement(Box, Object.assign({ "aria-hidden": "true", transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)", position: "absolute", bottom: 0, right: 0, height: "100%", maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" }, width: "90%" }, props),
+    return (React.createElement(Box, { "aria-hidden": "true", transition: "max-width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955)", position: "absolute", bottom: 0, right: 0, height: "100%", maxWidth: { extraSmall: "320px", small: "768px", medium: "1024px", large: "1280px" }, width: "90%", ...props },
         React.createElement(RightAngleTriangle, { "aria-hidden": "true", height: "44.85%", opacity: "0.5", background: "linear-gradient(178.25deg, rgba(192, 200, 209, 0.5) 62.98%, rgba(225, 235, 250, 0.25) 98.52%)" }),
         React.createElement(RightAngleTriangle, { "aria-hidden": "true", height: "19.85%", opacity: "0.25", background: `linear-gradient(196.88deg, ${theme.colors.grey} 11.92%, rgba(0, 67, 143, 0) 88.36%)` })));
 }

package/dist/src/DescriptionList/DescriptionList.js

@@ -1,20 +1,8 @@
-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 from "react";
 import { DescriptionListProvider } from "./DescriptionListContext";
 import { validateAndExtractGridProps } from "./lib/utils";
 import { DescriptionList as Dl, DescriptionListContainer } from "./DescriptionList.parts";
-export default function DescriptionList(_a) {
-    var { descriptionTermMaxWidth = "320px", layout = "stacked", autoLayoutBreakpoint = "640px", showDivider = false, density = "medium", fontSize = "medium", lineHeight = "base", children } = _a, props = __rest(_a, ["descriptionTermMaxWidth", "layout", "autoLayoutBreakpoint", "showDivider", "density", "fontSize", "lineHeight", "children"]);
+export default function DescriptionList({ descriptionTermMaxWidth = "320px", layout = "stacked", autoLayoutBreakpoint = "640px", showDivider = false, density = "medium", fontSize = "medium", lineHeight = "base", children, ...props }) {
     const { columns, groupMinWidth } = validateAndExtractGridProps(props);
     return (React.createElement(DescriptionListProvider, { descriptionTermMaxWidth: descriptionTermMaxWidth, layout: layout, autoLayoutBreakpoint: autoLayoutBreakpoint, showDivider: showDivider, density: density, fontSize: fontSize, lineHeight: lineHeight, columns: columns, groupMinWidth: groupMinWidth },
         React.createElement(DescriptionListContainer, null,

package/dist/src/DescriptionList/DescriptionList.parts.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseDescriptionListProps, Columns, GroupMinWidth } from "./lib/types";
 export type DescriptionListPartsProps = BaseDescriptionListProps & {
     columns?: Columns;