universal-datetime-picker 2.0.0 → 2.0.1

package/dist/index.js

@@ -568,23 +568,28 @@ var PickerController = class {
     this.draft = this.draft.year(day.year()).month(day.month()).date(day.date());
     this.focusedDay = day;
     this.emit();
+    this.maybeCommitInline();
   }
   setHour(hourValue) {
     this.draft = this.draft.hour(hourValue);
     this.emit();
+    this.maybeCommitInline();
   }
   setMinute(minute) {
     this.draft = this.draft.minute(minute);
     this.emit();
+    this.maybeCommitInline();
   }
   setSecond(second) {
     this.draft = this.draft.second(second);
     this.emit();
+    this.maybeCommitInline();
   }
   setAmPm(isAm) {
     const { hour } = to12Hour(this.draft.hour());
     this.draft = this.draft.hour(to24Hour(hour, isAm));
     this.emit();
+    this.maybeCommitInline();
   }
   toggleHours() {
     this.showHours = !this.showHours;
@@ -630,22 +635,26 @@ var PickerController = class {
     }
     this.showHours = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectMinuteOption(opt) {
     this.draft = this.draft.minute(Number(opt));
     this.showMinutes = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectSecondOption(opt) {
     this.draft = this.draft.second(Number(opt));
     this.showSecondsOpen = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectAmPmOption(opt) {
     const { hour } = to12Hour(this.draft.hour());
     this.draft = this.draft.hour(to24Hour(hour, opt === "AM"));
     this.showAmPm = false;
     this.emit();
+    this.maybeCommitInline();
   }
   handleGridKeyDown(key) {
     const snap = this.snapshot;
@@ -695,23 +704,30 @@ var PickerController = class {
     this.emit();
     return true;
   }
-  confirm() {
+  buildPayload() {
     const snap = this.snapshot;
-    let payload;
     if (snap.asString === false) {
       if (snap.mode === "time") {
-        payload = buildTimeValue(this.draft, snap.resolvedFormat);
-      } else if (snap.mode === "date") {
-        payload = this.draft.startOf("day").toDate();
-      } else {
-        payload = this.draft.toDate();
+        return buildTimeValue(this.draft, snap.resolvedFormat);
       }
-    } else {
-      if (snap.asString === void 0) {
-        warnAsStringDeprecation();
+      if (snap.mode === "date") {
+        return this.draft.startOf("day").toDate();
       }
-      payload = formatValue(this.draft, snap.resolvedFormat);
+      return this.draft.toDate();
+    }
+    if (snap.asString === void 0) {
+      warnAsStringDeprecation();
+    }
+    return formatValue(this.draft, snap.resolvedFormat);
+  }
+  maybeCommitInline() {
+    if (!this.options.inline) {
+      return;
     }
+    this.options.onChange?.(this.buildPayload());
+  }
+  confirm() {
+    const payload = this.buildPayload();
     this.options.onChange?.(payload);
     this.close();
     return payload;
@@ -885,6 +901,11 @@ function useControllableState(options) {
   );
   return [state, setState];
 }
+function useLatest(value) {
+  const ref = react.useRef(value);
+  ref.current = value;
+  return ref;
+}
 function cx2(...parts) {
   return parts.filter(Boolean).join(" ");
 }
@@ -990,10 +1011,12 @@ function DateTime(props) {
     });
   }
   const controller = controllerRef.current;
+  const onChangeRef = useLatest(onChange);
+  const setOpenRef = useLatest(setOpen);
   react.useEffect(() => {
     controller.setOptions({
       value,
-      onChange,
+      onChange: (next) => onChangeRef.current?.(next),
       asString,
       showSeconds,
       format,
@@ -1013,12 +1036,11 @@ function DateTime(props) {
       open,
       popover,
       anchorEl,
-      onOpenChange: setOpen
+      onOpenChange: (next) => setOpenRef.current(next)
     });
   }, [
     controller,
     value,
-    onChange,
     asString,
     showSeconds,
     format,
@@ -1037,8 +1059,7 @@ function DateTime(props) {
     theme,
     open,
     popover,
-    anchorEl,
-    setOpen
+    anchorEl
   ]);
   const snap = react.useSyncExternalStore(
     controller.subscribe,
@@ -1304,7 +1325,7 @@ function DateTime(props) {
             }
           ),
           !inline && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ctp-cancel", onClick: close, children: snap.labels.close }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !inline && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1459,6 +1480,7 @@ function DateTimeInput(props) {
     onChange: onOpenChange
   });
   const display = internalValue ?? "";
+  const pickerValue = asString === false ? value !== void 0 ? value : defaultValue : internalValue;
   const setInputRef = react.useCallback((node) => {
     setAnchorEl(node);
   }, []);
@@ -1503,7 +1525,7 @@ function DateTimeInput(props) {
         use12Hours,
         asString,
         showSeconds,
-        value: internalValue,
+        value: pickerValue,
         open,
         onOpenChange: setOpen,
         popover: true,
@@ -1547,6 +1569,15 @@ var RangeController = class {
       end: parseValue(range?.end ?? null, format)
     };
   }
+  sameDay(a, b) {
+    if (a === null && b === null) {
+      return true;
+    }
+    if (a === null || b === null) {
+      return false;
+    }
+    return a.isSame(b, "day");
+  }
   setOptions(partial) {
     this.options = { ...this.options, ...partial };
     if (partial.open !== void 0) {
@@ -1560,11 +1591,14 @@ var RangeController = class {
       } else if (partial.value !== void 0) {
         const format = this.options.format ?? DATE_FORMAT;
         const parsed = this.parseRange(partial.value, format);
-        this.start = parsed.start;
-        this.end = parsed.end;
-        if (parsed.start) {
-          this.viewMonth = parsed.start.startOf("month");
-          this.focusedDay = parsed.start;
+        const unchanged = this.sameDay(parsed.start, this.start) && this.sameDay(parsed.end, this.end);
+        if (!unchanged) {
+          this.start = parsed.start;
+          this.end = parsed.end;
+          if (parsed.start) {
+            this.viewMonth = parsed.start.startOf("month");
+            this.focusedDay = parsed.start;
+          }
         }
       }
     }
@@ -1696,6 +1730,11 @@ var RangeController = class {
       this.focusedDay = day;
     }
     this.emit();
+    if (this.options.asString === false) {
+      this.emitRange(this.start, this.end);
+    } else if (this.options.inline && this.start && this.end) {
+      this.emitRange(this.start, this.end);
+    }
   }
   setHoverEnd(day) {
     if (this.start && !this.end) {
@@ -1824,10 +1863,12 @@ function DateTimeRange(props) {
     });
   }
   const controller = controllerRef.current;
+  const onChangeRef = useLatest(onChange);
+  const setOpenRef = useLatest(setOpen);
   react.useEffect(() => {
     controller.setOptions({
       value,
-      onChange,
+      onChange: (next) => onChangeRef.current?.(next),
       asString,
       format,
       minDate,
@@ -1840,12 +1881,11 @@ function DateTimeRange(props) {
       inline,
       className,
       open,
-      onOpenChange: setOpen
+      onOpenChange: (next) => setOpenRef.current(next)
     });
   }, [
     controller,
     value,
-    onChange,
     asString,
     format,
     minDate,
@@ -1857,8 +1897,7 @@ function DateTimeRange(props) {
     labelsProp,
     inline,
     className,
-    open,
-    setOpen
+    open
   ]);
   const snap = react.useSyncExternalStore(
     controller.subscribe,
@@ -1922,6 +1961,7 @@ function DateTimeRange(props) {
               "aria-label": snap.labels.chooseDateRange,
               tabIndex: 0,
               onKeyDown: onGridKeyDown,
+              onMouseLeave: () => controller.setHoverEnd(null),
               children: [
                 snap.weekdayLabels.map((label) => /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
@@ -1997,7 +2037,7 @@ function DateTimeRange(props) {
             }
           ),
           !inline && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ctp-cancel", onClick: close, children: snap.labels.close }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !inline && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",

package/dist/index.mjs

@@ -556,23 +556,28 @@ var PickerController = class {
     this.draft = this.draft.year(day.year()).month(day.month()).date(day.date());
     this.focusedDay = day;
     this.emit();
+    this.maybeCommitInline();
   }
   setHour(hourValue) {
     this.draft = this.draft.hour(hourValue);
     this.emit();
+    this.maybeCommitInline();
   }
   setMinute(minute) {
     this.draft = this.draft.minute(minute);
     this.emit();
+    this.maybeCommitInline();
   }
   setSecond(second) {
     this.draft = this.draft.second(second);
     this.emit();
+    this.maybeCommitInline();
   }
   setAmPm(isAm) {
     const { hour } = to12Hour(this.draft.hour());
     this.draft = this.draft.hour(to24Hour(hour, isAm));
     this.emit();
+    this.maybeCommitInline();
   }
   toggleHours() {
     this.showHours = !this.showHours;
@@ -618,22 +623,26 @@ var PickerController = class {
     }
     this.showHours = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectMinuteOption(opt) {
     this.draft = this.draft.minute(Number(opt));
     this.showMinutes = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectSecondOption(opt) {
     this.draft = this.draft.second(Number(opt));
     this.showSecondsOpen = false;
     this.emit();
+    this.maybeCommitInline();
   }
   selectAmPmOption(opt) {
     const { hour } = to12Hour(this.draft.hour());
     this.draft = this.draft.hour(to24Hour(hour, opt === "AM"));
     this.showAmPm = false;
     this.emit();
+    this.maybeCommitInline();
   }
   handleGridKeyDown(key) {
     const snap = this.snapshot;
@@ -683,23 +692,30 @@ var PickerController = class {
     this.emit();
     return true;
   }
-  confirm() {
+  buildPayload() {
     const snap = this.snapshot;
-    let payload;
     if (snap.asString === false) {
       if (snap.mode === "time") {
-        payload = buildTimeValue(this.draft, snap.resolvedFormat);
-      } else if (snap.mode === "date") {
-        payload = this.draft.startOf("day").toDate();
-      } else {
-        payload = this.draft.toDate();
+        return buildTimeValue(this.draft, snap.resolvedFormat);
       }
-    } else {
-      if (snap.asString === void 0) {
-        warnAsStringDeprecation();
+      if (snap.mode === "date") {
+        return this.draft.startOf("day").toDate();
       }
-      payload = formatValue(this.draft, snap.resolvedFormat);
+      return this.draft.toDate();
+    }
+    if (snap.asString === void 0) {
+      warnAsStringDeprecation();
+    }
+    return formatValue(this.draft, snap.resolvedFormat);
+  }
+  maybeCommitInline() {
+    if (!this.options.inline) {
+      return;
     }
+    this.options.onChange?.(this.buildPayload());
+  }
+  confirm() {
+    const payload = this.buildPayload();
     this.options.onChange?.(payload);
     this.close();
     return payload;
@@ -873,6 +889,11 @@ function useControllableState(options) {
   );
   return [state, setState];
 }
+function useLatest(value) {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
 function cx2(...parts) {
   return parts.filter(Boolean).join(" ");
 }
@@ -978,10 +999,12 @@ function DateTime(props) {
     });
   }
   const controller = controllerRef.current;
+  const onChangeRef = useLatest(onChange);
+  const setOpenRef = useLatest(setOpen);
   useEffect(() => {
     controller.setOptions({
       value,
-      onChange,
+      onChange: (next) => onChangeRef.current?.(next),
       asString,
       showSeconds,
       format,
@@ -1001,12 +1024,11 @@ function DateTime(props) {
       open,
       popover,
       anchorEl,
-      onOpenChange: setOpen
+      onOpenChange: (next) => setOpenRef.current(next)
     });
   }, [
     controller,
     value,
-    onChange,
     asString,
     showSeconds,
     format,
@@ -1025,8 +1047,7 @@ function DateTime(props) {
     theme,
     open,
     popover,
-    anchorEl,
-    setOpen
+    anchorEl
   ]);
   const snap = useSyncExternalStore(
     controller.subscribe,
@@ -1292,7 +1313,7 @@ function DateTime(props) {
             }
           ),
           !inline && /* @__PURE__ */ jsx("button", { type: "button", className: "ctp-cancel", onClick: close, children: snap.labels.close }),
-          /* @__PURE__ */ jsx(
+          !inline && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -1447,6 +1468,7 @@ function DateTimeInput(props) {
     onChange: onOpenChange
   });
   const display = internalValue ?? "";
+  const pickerValue = asString === false ? value !== void 0 ? value : defaultValue : internalValue;
   const setInputRef = useCallback((node) => {
     setAnchorEl(node);
   }, []);
@@ -1491,7 +1513,7 @@ function DateTimeInput(props) {
         use12Hours,
         asString,
         showSeconds,
-        value: internalValue,
+        value: pickerValue,
         open,
         onOpenChange: setOpen,
         popover: true,
@@ -1535,6 +1557,15 @@ var RangeController = class {
       end: parseValue(range?.end ?? null, format)
     };
   }
+  sameDay(a, b) {
+    if (a === null && b === null) {
+      return true;
+    }
+    if (a === null || b === null) {
+      return false;
+    }
+    return a.isSame(b, "day");
+  }
   setOptions(partial) {
     this.options = { ...this.options, ...partial };
     if (partial.open !== void 0) {
@@ -1548,11 +1579,14 @@ var RangeController = class {
       } else if (partial.value !== void 0) {
         const format = this.options.format ?? DATE_FORMAT;
         const parsed = this.parseRange(partial.value, format);
-        this.start = parsed.start;
-        this.end = parsed.end;
-        if (parsed.start) {
-          this.viewMonth = parsed.start.startOf("month");
-          this.focusedDay = parsed.start;
+        const unchanged = this.sameDay(parsed.start, this.start) && this.sameDay(parsed.end, this.end);
+        if (!unchanged) {
+          this.start = parsed.start;
+          this.end = parsed.end;
+          if (parsed.start) {
+            this.viewMonth = parsed.start.startOf("month");
+            this.focusedDay = parsed.start;
+          }
         }
       }
     }
@@ -1684,6 +1718,11 @@ var RangeController = class {
       this.focusedDay = day;
     }
     this.emit();
+    if (this.options.asString === false) {
+      this.emitRange(this.start, this.end);
+    } else if (this.options.inline && this.start && this.end) {
+      this.emitRange(this.start, this.end);
+    }
   }
   setHoverEnd(day) {
     if (this.start && !this.end) {
@@ -1812,10 +1851,12 @@ function DateTimeRange(props) {
     });
   }
   const controller = controllerRef.current;
+  const onChangeRef = useLatest(onChange);
+  const setOpenRef = useLatest(setOpen);
   useEffect(() => {
     controller.setOptions({
       value,
-      onChange,
+      onChange: (next) => onChangeRef.current?.(next),
       asString,
       format,
       minDate,
@@ -1828,12 +1869,11 @@ function DateTimeRange(props) {
       inline,
       className,
       open,
-      onOpenChange: setOpen
+      onOpenChange: (next) => setOpenRef.current(next)
     });
   }, [
     controller,
     value,
-    onChange,
     asString,
     format,
     minDate,
@@ -1845,8 +1885,7 @@ function DateTimeRange(props) {
     labelsProp,
     inline,
     className,
-    open,
-    setOpen
+    open
   ]);
   const snap = useSyncExternalStore(
     controller.subscribe,
@@ -1910,6 +1949,7 @@ function DateTimeRange(props) {
               "aria-label": snap.labels.chooseDateRange,
               tabIndex: 0,
               onKeyDown: onGridKeyDown,
+              onMouseLeave: () => controller.setHoverEnd(null),
               children: [
                 snap.weekdayLabels.map((label) => /* @__PURE__ */ jsx(
                   "div",
@@ -1985,7 +2025,7 @@ function DateTimeRange(props) {
             }
           ),
           !inline && /* @__PURE__ */ jsx("button", { type: "button", className: "ctp-cancel", onClick: close, children: snap.labels.close }),
-          /* @__PURE__ */ jsx(
+          !inline && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",

package/dist/{rangeController-Bq35aBwe.d.mts → rangeController-BBZcdM0Z.d.mts}

@@ -204,6 +204,8 @@ declare class PickerController {
     selectSecondOption(opt: string): void;
     selectAmPmOption(opt: string): void;
     handleGridKeyDown(key: string): boolean;
+    private buildPayload;
+    private maybeCommitInline;
     confirm(): DateTimeChangeValue;
     clear(): void;
     /** Year window helpers for month/year panels */
@@ -248,6 +250,7 @@ declare class RangeController {
     subscribe: (listener: Listener) => (() => void);
     getSnapshot: () => RangeSnapshot;
     getServerSnapshot: () => RangeSnapshot;
+    private sameDay;
     setOptions(partial: Partial<DateTimeRangeOptions>): void;
     private getLabels;
     private emit;

package/dist/{rangeController-Bq35aBwe.d.ts → rangeController-BBZcdM0Z.d.ts}

@@ -204,6 +204,8 @@ declare class PickerController {
     selectSecondOption(opt: string): void;
     selectAmPmOption(opt: string): void;
     handleGridKeyDown(key: string): boolean;
+    private buildPayload;
+    private maybeCommitInline;
     confirm(): DateTimeChangeValue;
     clear(): void;
     /** Year window helpers for month/year panels */
@@ -248,6 +250,7 @@ declare class RangeController {
     subscribe: (listener: Listener) => (() => void);
     getSnapshot: () => RangeSnapshot;
     getServerSnapshot: () => RangeSnapshot;
+    private sameDay;
     setOptions(partial: Partial<DateTimeRangeOptions>): void;
     private getLabels;
     private emit;

package/dist/{rangeRenderer-AVv6PJbW.d.mts → rangeRenderer-CE99Ji3Q.d.mts}

@@ -1,4 +1,4 @@
-import { j as PickerControllerOptions, P as PickerController, i as DateTimeRangeOptions, R as RangeController } from './rangeController-Bq35aBwe.mjs';
+import { j as PickerControllerOptions, P as PickerController, i as DateTimeRangeOptions, R as RangeController } from './rangeController-BBZcdM0Z.mjs';
 
 interface DateTimePickerHandle {
     update: (options: Partial<PickerControllerOptions>) => void;

package/dist/{rangeRenderer-a3hFk-kK.d.ts → rangeRenderer-CeLuwT6V.d.ts}

@@ -1,4 +1,4 @@
-import { j as PickerControllerOptions, P as PickerController, i as DateTimeRangeOptions, R as RangeController } from './rangeController-Bq35aBwe.js';
+import { j as PickerControllerOptions, P as PickerController, i as DateTimeRangeOptions, R as RangeController } from './rangeController-BBZcdM0Z.js';
 
 interface DateTimePickerHandle {
     update: (options: Partial<PickerControllerOptions>) => void;

package/dist/svelte/index.d.mts

@@ -1,6 +1,6 @@
 export { defineCustomElements } from '../wc/index.mjs';
-import '../rangeRenderer-AVv6PJbW.mjs';
-import '../rangeController-Bq35aBwe.mjs';
+import '../rangeRenderer-CE99Ji3Q.mjs';
+import '../rangeController-BBZcdM0Z.mjs';
 import 'dayjs';
 
 /** Svelte action: mounts nothing; ensures custom elements are defined. */

package/dist/svelte/index.d.ts

@@ -1,6 +1,6 @@
 export { defineCustomElements } from '../wc/index.js';
-import '../rangeRenderer-a3hFk-kK.js';
-import '../rangeController-Bq35aBwe.js';
+import '../rangeRenderer-CeLuwT6V.js';
+import '../rangeController-BBZcdM0Z.js';
 import 'dayjs';
 
 /** Svelte action: mounts nothing; ensures custom elements are defined. */