@northlight/ui 2.36.12 → 2.38.0

package/dist/umd/northlight.cjs

@@ -7742,7 +7742,9 @@
       maxValue,
       firstDayOfWeek,
       onSave,
-      buttonLabel = "Save"
+      buttonLabel = "Save",
+      clearButtonLabel = "Clear",
+      onCancel
     } = props;
     const { locale } = i18n.useLocale();
     const ref = React.useRef(null);
@@ -7773,6 +7775,14 @@
       locale,
       createCalendar: () => new date.GregorianCalendar()
     });
+    const handleOnReset = () => {
+      if (onCancel) {
+        onCancel();
+      } else {
+        resetDate();
+      }
+      handleClose();
+    };
     const focusDateRange = (dateRange) => {
       if (dateRange && dateRange.start && dateRange.end) {
         calendarOneState.setFocusedDate(dateRange.start);
@@ -7814,7 +7824,7 @@
         range: value,
         firstDayOfWeek
       }
-    ))), /* @__PURE__ */ React.createElement(react.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(react.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) => ramda.is(Object, value) && ramda.has("startDate", value) && ramda.has("endDate", value) && ramda.is(String, value.startDate) && ramda.is(String, value.endDate);
@@ -7852,6 +7862,7 @@
     }
     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,
@@ -7869,7 +7880,13 @@
       renderInPortal = false,
       firstDayOfWeek,
       onSave,
-      buttonLabel = "Save"
+      buttonLabel = "Save",
+      clearButtonLabel = "Clear",
+      setIsOpen = () => {
+      },
+      savedDateRange = value,
+      defaultDateRange = value,
+      CustomResetButton
     } = props;
     const ref = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
@@ -7884,10 +7901,22 @@
       minValue: ramda.isNil(minValue) ? void 0 : date.parseDate(minValue),
       maxValue: ramda.isNil(maxValue) ? void 0 : date.parseDate(maxValue)
     };
-    const state = datepicker$1.useDateRangePickerState(__spreadProps$e(__spreadValues$1p(__spreadValues$1p({}, props), parsedProps), {
+    const state = datepicker$1.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
-    }));
+    });
+    React.useEffect(() => {
+      setIsOpen(state.isOpen);
+    }, [state.isOpen]);
     const {
       groupProps,
       startFieldProps,
@@ -7896,20 +7925,60 @@
       dialogProps,
       calendarProps
     } = datepicker.useDateRangePicker(
-      __spreadProps$e(__spreadValues$1p(__spreadValues$1p({}, props), parsedProps), {
-        minValue: parsedProps.minValue || date.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 || date.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);
     };
     react.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: NorthlightIcons.XCloseSolid })
+      }
+    );
+    const isCurrentDateSaved = isDatesEqual(value, savedDateRange);
+    const isCurrentDateDefault = isDatesEqual(value, defaultDateRange);
+    const cancelDateChange = () => {
+      onChangeCallback(savedDateRange);
+    };
+    const handleSave = () => {
+      onSave == null ? void 0 : onSave();
+      handleClose();
+    };
+    const shouldShowResetButton = !state.isOpen && isCurrentDateSaved && !isCurrentDateDefault;
+    const shouldShowSaveAndCancelButtons = !state.isOpen && !isCurrentDateSaved;
     return /* @__PURE__ */ React.createElement(
       Popover,
       {
@@ -7931,19 +8000,28 @@
           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: NorthlightIcons.XCloseSolid })
         }
-      ))),
+      ), /* @__PURE__ */ React.createElement(
+        IconButton,
+        {
+          "aria-label": "save-date",
+          variant: "brand",
+          size: "sm",
+          fontSize: "xs",
+          onClick: handleSave,
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.CheckSolid })
+        }
+      )))),
       /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
         RangeCalendar,
         __spreadProps$e(__spreadValues$1p({}, calendarProps), {
@@ -7954,6 +8032,8 @@
           isClearable,
           firstDayOfWeek,
           onSave,
+          onCancel: cancelDateChange,
+          clearButtonLabel,
           buttonLabel
         })
       )))))