@bizapps/ui 1.4.0 → 1.4.1

package/dist/main.d.cts

@@ -663,8 +663,12 @@ interface DatePickerSingleProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
 }
 interface DatePickerRangeProps {
     mode: 'range';
@@ -673,8 +677,12 @@ interface DatePickerRangeProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
 }
 interface DatePickerProps {
     mode?: 'single' | 'range';
@@ -683,10 +691,14 @@ interface DatePickerProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
 }
-declare function DatePicker({ mode, selected, onSelect, placeholder, disabled, className, fromDate, toDate, }: DatePickerProps): react.JSX.Element;
+declare function DatePicker({ mode, selected, onSelect, placeholder, disabled, className, fromDate, toDate, numberOfMonths, }: DatePickerProps): react.JSX.Element;
 
 interface NavbarDropdownItem {
     href: string;

package/dist/main.d.ts

@@ -663,8 +663,12 @@ interface DatePickerSingleProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
 }
 interface DatePickerRangeProps {
     mode: 'range';
@@ -673,8 +677,12 @@ interface DatePickerRangeProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
 }
 interface DatePickerProps {
     mode?: 'single' | 'range';
@@ -683,10 +691,14 @@ interface DatePickerProps {
     placeholder?: string;
     disabled?: boolean;
     className?: string;
+    /** Earliest selectable date. Earlier days are disabled and unreachable. */
     fromDate?: Date;
+    /** Latest selectable date. Later days are disabled and unreachable. */
     toDate?: Date;
+    /** Months rendered side by side. Defaults to 1. */
+    numberOfMonths?: number;
 }
-declare function DatePicker({ mode, selected, onSelect, placeholder, disabled, className, fromDate, toDate, }: DatePickerProps): react.JSX.Element;
+declare function DatePicker({ mode, selected, onSelect, placeholder, disabled, className, fromDate, toDate, numberOfMonths, }: DatePickerProps): react.JSX.Element;
 
 interface NavbarDropdownItem {
     href: string;

package/dist/main.js

@@ -4542,22 +4542,52 @@ function DatePicker({
   disabled = false,
   className,
   fromDate,
-  toDate
+  toDate,
+  numberOfMonths = 1
 }) {
   const [open, setOpen] = useState(false);
+  const [awaitingRangeEnd, setAwaitingRangeEnd] = useState(false);
   const label = useMemo(() => {
     if (mode === "range") {
       const range = selected;
-      if (range?.from && range?.to)
-        return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
-      if (range?.from) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
-      return placeholder;
+      if (!range?.from) return placeholder;
+      if (!range.to) return `${format(range.from, "MMM d, yyyy")} \u2013 \u2026`;
+      return `${format(range.from, "MMM d, yyyy")} \u2013 ${format(range.to, "MMM d, yyyy")}`;
     }
     const date = selected;
     return date ? 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 = 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__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
@@ -4581,14 +4611,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__ */ jsx(
@@ -4601,9 +4627,9 @@ function DatePicker({
             onSelect?.(date);
             setOpen(false);
           },
-          fromDate,
-          toDate,
-          initialFocus: true
+          ...dateConstraints,
+          numberOfMonths,
+          autoFocus: true
         }
       }
     ) })