@bizapps/ui 1.4.0 → 1.4.1

package/dist/main.cjs

@@ -4547,22 +4547,52 @@ function DatePicker({
   disabled = false,
   className,
   fromDate,
-  toDate
+  toDate,
+  numberOfMonths = 1
 }) {
   const [open, setOpen] = react.useState(false);
+  const [awaitingRangeEnd, setAwaitingRangeEnd] = react.useState(false);
   const label = react.useMemo(() => {
     if (mode === "range") {
       const range = selected;
-      if (range?.from && range?.to)
-        return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
+      if (!range?.from) return placeholder;
+      if (!range.to) return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return `${dateFns.format(range.from, "MMM d, yyyy")} \u2013 ${dateFns.format(range.to, "MMM d, yyyy")}`;
     }
     const date = selected;
     return date ? dateFns.format(date, "MMM d, yyyy") : placeholder;
   }, [mode, selected, placeholder]);
+  const handleOpenChange = (nextOpen) => {
+    setOpen(nextOpen);
+    if (!nextOpen) setAwaitingRangeEnd(false);
+  };
+  const handleRangeSelect = (range, triggerDate) => {
+    const emit = onSelect;
+    if (!awaitingRangeEnd) {
+      setAwaitingRangeEnd(true);
+      emit?.({ from: triggerDate, to: void 0 });
+      return;
+    }
+    emit?.(range);
+    if (!range?.from || !range.to) {
+      setAwaitingRangeEnd(!!range?.from);
+      return;
+    }
+    setAwaitingRangeEnd(false);
+    setOpen(false);
+  };
+  const dateConstraints = react.useMemo(() => {
+    const disabledMatchers = [];
+    if (fromDate) disabledMatchers.push({ before: fromDate });
+    if (toDate) disabledMatchers.push({ after: toDate });
+    return {
+      ...disabledMatchers.length > 0 && { disabled: disabledMatchers },
+      ...fromDate && { startMonth: fromDate },
+      ...toDate && { endMonth: toDate }
+    };
+  }, [fromDate, toDate]);
   const hasValue = mode === "range" ? !!selected?.from : !!selected;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Button,
       {
@@ -4586,14 +4616,10 @@ function DatePicker({
         ...{
           mode: "range",
           selected,
-          onSelect: (range) => {
-            onSelect?.(range);
-            if (range?.to) setOpen(false);
-          },
-          fromDate,
-          toDate,
-          numberOfMonths: 2,
-          initialFocus: true
+          onSelect: handleRangeSelect,
+          ...dateConstraints,
+          numberOfMonths,
+          autoFocus: true
         }
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -4606,9 +4632,9 @@ function DatePicker({
             onSelect?.(date);
             setOpen(false);
           },
-          fromDate,
-          toDate,
-          initialFocus: true
+          ...dateConstraints,
+          numberOfMonths,
+          autoFocus: true
         }
       }
     ) })