@northlight/ui 2.37.0 → 2.38.1

package/dist/es/northlight.d.ts

@@ -1006,6 +1006,11 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     renderInPortal?: boolean;
     buttonLabel?: string;
     setIsOpen?: (isOpen: boolean) => void;
+    savedDateRange?: DateRange | null;
+    defaultDateRange?: DateRange | null;
+    CustomResetButton?: React.ReactNode;
+    clearButtonLabel?: string;
+    onCancelChanges?: () => void;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     name: string;

package/dist/es/northlight.js

@@ -7764,7 +7764,9 @@ const RangeCalendar = (props) => {
     maxValue,
     firstDayOfWeek,
     onSave,
-    buttonLabel = "Save"
+    buttonLabel = "Save",
+    clearButtonLabel = "Clear",
+    onCancel
   } = props;
   const { locale } = useLocale();
   const ref = useRef(null);
@@ -7795,6 +7797,14 @@ const RangeCalendar = (props) => {
     locale,
     createCalendar: () => new GregorianCalendar()
   });
+  const handleOnReset = () => {
+    if (onCancel) {
+      onCancel();
+    } else {
+      resetDate();
+    }
+    handleClose();
+  };
   const focusDateRange = (dateRange) => {
     if (dateRange && dateRange.start && dateRange.end) {
       calendarOneState.setFocusedDate(dateRange.start);
@@ -7836,7 +7846,7 @@ const RangeCalendar = (props) => {
       range: value,
       firstDayOfWeek
     }
-  ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
+  ))), /* @__PURE__ */ React.createElement(HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: handleOnReset, variant: "ghost", size: "sm" }, clearButtonLabel), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
 };
 
 const isValidDateRange = (value) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
@@ -7874,6 +7884,7 @@ const PortalWrapper = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 };
+const isDatesEqual = (date1, date2) => (date1 == null ? void 0 : date1.startDate) === (date2 == null ? void 0 : date2.startDate) && (date1 == null ? void 0 : date1.endDate) === (date2 == null ? void 0 : date2.endDate);
 const DateRangePicker = (props) => {
   const {
     isDisabled,
@@ -7892,8 +7903,13 @@ const DateRangePicker = (props) => {
     firstDayOfWeek,
     onSave,
     buttonLabel = "Save",
+    clearButtonLabel = "Clear",
     setIsOpen = () => {
-    }
+    },
+    savedDateRange = value,
+    defaultDateRange = value,
+    CustomResetButton,
+    onCancelChanges
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7908,10 +7924,19 @@ const DateRangePicker = (props) => {
     minValue: isNil(minValue) ? void 0 : parseDate(minValue),
     maxValue: isNil(maxValue) ? void 0 : parseDate(maxValue)
   };
-  const state = useDateRangePickerState(__spreadProps$e(__spreadValues$1p(__spreadValues$1p({}, props), parsedProps), {
+  const state = useDateRangePickerState({
+    value: parsedProps.value,
+    onChange: parsedProps.onChange,
+    minValue: parsedProps.minValue,
+    maxValue: parsedProps.maxValue,
+    isDisabled,
+    isInvalid,
+    placeholderValue: props.placeholderValue,
+    isDateUnavailable: props.isDateUnavailable,
+    allowsNonContiguousRanges: props.allowsNonContiguousRanges,
     shouldCloseOnSelect: false,
     hideTimeZone: true
-  }));
+  });
   useEffect(() => {
     setIsOpen(state.isOpen);
   }, [state.isOpen]);
@@ -7923,20 +7948,64 @@ const DateRangePicker = (props) => {
     dialogProps,
     calendarProps
   } = useDateRangePicker(
-    __spreadProps$e(__spreadValues$1p(__spreadValues$1p({}, props), parsedProps), {
-      minValue: parsedProps.minValue || parseDate("1994-03-08")
-    }),
+    {
+      onChange: (date) => {
+        onChangeCallback({
+          startDate: date == null ? void 0 : date.start.toString(),
+          endDate: date == null ? void 0 : date.end.toString()
+        });
+      },
+      value: parseValue(value),
+      minValue: parsedProps.minValue || parseDate("1994-03-08"),
+      maxValue: parsedProps.maxValue,
+      placeholderValue: props.placeholderValue,
+      isDateUnavailable: props.isDateUnavailable,
+      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+      isDisabled,
+      isInvalid,
+      startName: props.startName,
+      endName: props.endName
+    },
     state,
     ref
   );
   const togglePopup = () => state.setOpen(!state.isOpen);
   const handleClose = () => {
+    onChangeCallback(savedDateRange);
     state.setOpen(false);
   };
   useOutsideClick({
     ref,
     handler: () => state.setOpen(false)
   });
+  const ResetButton = CustomResetButton || /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      "aria-label": "reset-date",
+      variant: "danger",
+      size: "sm",
+      fontSize: "xs",
+      hidden: !isClearable,
+      isDisabled,
+      onClick: resetDate,
+      icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
+    }
+  );
+  const isCurrentDateSaved = isDatesEqual(value, savedDateRange);
+  const isCurrentDateDefault = isDatesEqual(value, defaultDateRange);
+  const cancelDateChange = () => {
+    if (onCancelChanges) {
+      onCancelChanges();
+    } else {
+      resetDate();
+    }
+  };
+  const handleSave = () => {
+    onSave == null ? void 0 : onSave();
+    handleClose();
+  };
+  const shouldShowResetButton = !state.isOpen && isCurrentDateSaved && !isCurrentDateDefault;
+  const shouldShowSaveAndCancelButtons = !state.isOpen && !isCurrentDateSaved;
   return /* @__PURE__ */ React.createElement(
     Popover,
     {
@@ -7958,19 +8027,28 @@ const DateRangePicker = (props) => {
         isDisabled,
         handleClick: togglePopup
       })
-    ))), /* @__PURE__ */ React.createElement(
+    ))), shouldShowResetButton && ResetButton, shouldShowSaveAndCancelButtons && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       IconButton,
       {
-        "aria-label": "reset-date",
-        variant: "danger",
+        "aria-label": "cancel-date-change",
+        variant: "ghost",
         size: "sm",
         fontSize: "xs",
-        onClick: resetDate,
-        hidden: !isClearable,
+        onClick: cancelDateChange,
         isDisabled,
         icon: /* @__PURE__ */ React.createElement(Icon, { as: XCloseSolid })
       }
-    ))),
+    ), /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        "aria-label": "save-date",
+        variant: "brand",
+        size: "sm",
+        fontSize: "xs",
+        onClick: handleSave,
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: CheckSolid })
+      }
+    )))),
     /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
       RangeCalendar,
       __spreadProps$e(__spreadValues$1p({}, calendarProps), {
@@ -7981,6 +8059,8 @@ const DateRangePicker = (props) => {
         isClearable,
         firstDayOfWeek,
         onSave,
+        onCancel: onCancelChanges,
+        clearButtonLabel,
         buttonLabel
       })
     )))))