@northlight/ui 2.33.8 → 2.33.9

package/dist/es/northlight.d.ts

@@ -908,6 +908,7 @@ interface DatePickerProps extends AriaDatePickerProps<DateValue>, DatePickerSett
 }
 interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>, 'onChange' | 'value' | 'minValue' | 'maxValue'>, DatePickerSettings {
     onChange?: (date: null | DateRange) => void;
+    onSave?: () => void;
     value: DateRange | null;
     minValue?: string | undefined;
     maxValue?: string | undefined;
@@ -925,6 +926,7 @@ interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldP
     direction?: StackDirection;
     dateFormat?: string;
     onChange?: (date: DateValue) => void;
+    onSave?: () => void;
     isClearable?: boolean;
     fiscalStartMonth?: number;
     fiscalStartDay?: number;

package/dist/es/northlight.js

@@ -7448,7 +7448,8 @@ const RangeCalendar = (props) => {
     fiscalStartDay,
     minValue,
     maxValue,
-    firstDayOfWeek
+    firstDayOfWeek,
+    onSave
   } = props;
   const { locale } = useLocale();
   const ref = useRef(null);
@@ -7494,6 +7495,10 @@ const RangeCalendar = (props) => {
     maxValue
   };
   const focusedStartMonthProps = value && value.start ? {} : focusRing;
+  const handleSave = () => {
+    onSave == null ? void 0 : onSave();
+    handleClose();
+  };
   return /* @__PURE__ */ React.createElement(Box, { ref, __css: rangeCalendarContainer }, /* @__PURE__ */ React.createElement(Stack, null, /* @__PURE__ */ React.createElement(Flex, { gap: 4 }, /* @__PURE__ */ React.createElement(
     QuickSelect,
     {
@@ -7516,7 +7521,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: handleClose, size: "sm" }, "Save"))))))));
+  ))), /* @__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" }, "Save"))))))));
 };
 
 const isValidDateRange = (value) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
@@ -7569,7 +7574,8 @@ const DateRangePicker = (props) => {
     minValue = "1994-03-08",
     maxValue,
     renderInPortal = false,
-    firstDayOfWeek
+    firstDayOfWeek,
+    onSave
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7652,7 +7658,8 @@ const DateRangePicker = (props) => {
         fiscalStartMonth: fiscalStartMonth || 0,
         fiscalStartDay: fiscalStartDay || 0,
         isClearable,
-        firstDayOfWeek
+        firstDayOfWeek,
+        onSave
       })
     )))))
   );
@@ -7840,7 +7847,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     validate,
     firstDayOfWeek = "monday",
     onChange: onChangeCallback = identity,
-    isClearable = true
+    isClearable = true,
+    onSave
   } = _b, rest = __objRest$19(_b, [
     "name",
     "minValue",
@@ -7851,7 +7859,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     "validate",
     "firstDayOfWeek",
     "onChange",
-    "isClearable"
+    "isClearable",
+    "onSave"
   ]);
   const { setValue, setError, trigger } = useFormContext();
   const handleChange = (dateRange) => {
@@ -7883,6 +7892,7 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
         "aria-label": label,
         isInvalid: !!errors[name],
         onChange: handleChange,
+        onSave,
         resetDate: () => onChange(null),
         value,
         minValue,