@fluixi-ui/date-picker 0.3.0-alpha.18 → 0.3.0-alpha.20

package/dist/date-picker.js

@@ -1,236 +1,341 @@
-import { delegateEvents, createComponent, splitProps, createNativeElement, spread, mergeProps, insert, handleRef } from "@fluixi/dom";
-import { createSignal, createMemo, createEffect, createRenderEffect } from "@fluixi/reactive/signal";
+import { createComponent, createNativeElement, delegateEvents, handleRef, insert, mergeProps, splitProps, spread } from "@fluixi/dom";
+import { createEffect, createMemo, createRenderEffect, createSignal } from "@fluixi/reactive/signal";
 import { fxProps } from "@fluixi-ui/fx";
-import { useRef, Show } from "@fluixi/core";
-import { createSafeContext, createControllableSignal, createControllableBooleanSignal, createId, composeId, composeEventHandlers } from "@fluixi-ui/kit";
-import { Portal, createFloatingPosition, createDismissableLayer, createFocusScope } from "@fluixi-ui/primitives";
+import { Show, useRef } from "@fluixi/core";
+import { composeEventHandlers, composeId, createControllableBooleanSignal, createControllableSignal, createId, createSafeContext } from "@fluixi-ui/kit";
+import { Portal, createDismissableLayer, createFloatingPosition, createFocusScope } from "@fluixi-ui/primitives";
 import { DateField, DateInput } from "@fluixi-ui/date-field";
-import { Calendar, CalendarHeader, CalendarPrevButton, CalendarHeading, CalendarNextButton, CalendarGrid } from "@fluixi-ui/calendar";
-delegateEvents(["change", "keydown", "click"]);
-const [DatePickerProvider, useDatePickerContext] = createSafeContext("DatePicker");
+import { Calendar, CalendarGrid, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from "@fluixi-ui/calendar";
+//#region src/date-picker.tsx
+delegateEvents([
+	"change",
+	"keydown",
+	"click"
+]);
+var [DatePickerProvider, useDatePickerContext] = createSafeContext("DatePicker");
+/**
+* A date picker: a segmented field paired with a popover calendar over one
+* shared value. Typing in the field and picking in the calendar stay in sync;
+* selecting a day closes the popover.
+*/
 function DatePicker(props) {
-  const [value, setValue] = createControllableSignal({
-    value: () => props.value ?? void 0,
-    defaultValue: () => props.defaultValue ?? null,
-    onChange: (v) => props.onChange?.(v)
-  });
-  const [isOpen, setOpen] = createControllableBooleanSignal({
-    value: () => props.open,
-    defaultValue: () => props.defaultOpen ?? false,
-    onChange: (o) => props.onOpenChange?.(o)
-  });
-  const baseId = createId("date-picker");
-  const [triggerRef, setTriggerRef] = createSignal(void 0);
-  const ctx = {
-    value: () => value() ?? null,
-    setValue,
-    isOpen,
-    setOpen: (o) => setOpen(o),
-    ids: { label: composeId(baseId, "label"), content: composeId(baseId, "content") },
-    triggerRef,
-    setTriggerRef,
-    placement: props.placement ?? "bottom-start",
-    offset: props.offset ?? 6,
-    locale: () => props.locale,
-    granularity: props.granularity,
-    hourCycle: props.hourCycle,
-    minValue: () => props.minValue,
-    maxValue: () => props.maxValue,
-    isDisabled: () => props.isDisabled ?? false,
-    isReadOnly: () => props.isReadOnly ?? false,
-    isDateUnavailable: props.isDateUnavailable,
-    name: props.name
-  };
-  return createMemo(() => createComponent(DatePickerProvider, { get value() {
-    return ctx;
-  }, get children() {
-    return props.children;
-  } }));
+	const [value, setValue] = createControllableSignal({
+		value: () => props.value ?? void 0,
+		defaultValue: () => props.defaultValue ?? null,
+		onChange: (v) => props.onChange?.(v)
+	});
+	const [isOpen, setOpen] = createControllableBooleanSignal({
+		value: () => props.open,
+		defaultValue: () => props.defaultOpen ?? false,
+		onChange: (o) => props.onOpenChange?.(o)
+	});
+	const baseId = createId("date-picker");
+	const [triggerRef, setTriggerRef] = createSignal(void 0);
+	const ctx = {
+		value: () => value() ?? null,
+		setValue,
+		isOpen,
+		setOpen: (o) => setOpen(o),
+		ids: {
+			label: composeId(baseId, "label"),
+			content: composeId(baseId, "content")
+		},
+		triggerRef,
+		setTriggerRef,
+		placement: props.placement ?? "bottom-start",
+		offset: props.offset ?? 6,
+		locale: () => props.locale,
+		granularity: props.granularity,
+		hourCycle: props.hourCycle,
+		minValue: () => props.minValue,
+		maxValue: () => props.maxValue,
+		isDisabled: () => props.isDisabled ?? false,
+		isReadOnly: () => props.isReadOnly ?? false,
+		isDateUnavailable: props.isDateUnavailable,
+		name: props.name
+	};
+	return createMemo(() => createComponent(DatePickerProvider, {
+		get value() {
+			return ctx;
+		},
+		get children() {
+			return props.children;
+		}
+	}));
 }
+/** Field label; linked to the segmented input. */
 function DatePickerLabel(props) {
-  const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["children", "fx", "style"]);
-  return (() => {
-    const _el$ = createNativeElement("span");
-    spread({ element: _el$, props: mergeProps(fxProps(
-      () => local.fx,
-      () => local.style
-    ), others, { id: () => ctx.ids.label, "data-date-picker-label": "" }) });
-    insert(_el$, local.children);
-    return _el$;
-  })();
+	const ctx = useDatePickerContext();
+	const [local, others] = splitProps(props, [
+		"children",
+		"fx",
+		"style"
+	]);
+	return (() => {
+		const _el$ = createNativeElement("span");
+		spread({
+			element: _el$,
+			props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+				id: () => ctx.ids.label,
+				"data-date-picker-label": ""
+			})
+		});
+		insert(_el$, local.children, null);
+		return _el$;
+	})();
 }
+/** The bordered control: the segmented date field plus the calendar trigger. */
 function DatePickerField(props) {
-  const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["ref", "children", "fx", "style"]);
-  const setRef = (node) => {
-    ctx.setTriggerRef(node);
-    handleRef(local.ref, node);
-  };
-  return createMemo(() => createComponent(DateField, { get value() {
-    return ctx.value;
-  }, get onChange() {
-    return ctx.setValue;
-  }, get locale() {
-    return ctx.locale;
-  }, get granularity() {
-    return ctx.granularity;
-  }, get hourCycle() {
-    return ctx.hourCycle;
-  }, get minValue() {
-    return ctx.minValue;
-  }, get maxValue() {
-    return ctx.maxValue;
-  }, get isDisabled() {
-    return ctx.isDisabled;
-  }, get isReadOnly() {
-    return ctx.isReadOnly;
-  }, get name() {
-    return ctx.name;
-  }, get "data-date-picker"() {
-    return "";
-  }, get children() {
-    return (() => {
-      const _el$ = createNativeElement("div");
-      spread({ element: _el$, props: mergeProps(fxProps(
-        () => local.fx,
-        () => local.style
-      ), others, { ref: setRef, "data-date-picker-control": "" }) });
-      insert(_el$, createMemo(() => createComponent(DateInput, { get "aria-labelledby"() {
-        return ctx.ids.label;
-      }, get "data-date-picker-input"() {
-        return "";
-      } })), null);
-      insert(_el$, local.children ?? createMemo(() => createComponent(DatePickerTrigger, {})));
-      return _el$;
-    })();
-  } }));
+	const ctx = useDatePickerContext();
+	const [local, others] = splitProps(props, [
+		"ref",
+		"children",
+		"fx",
+		"style"
+	]);
+	const setRef = (node) => {
+		ctx.setTriggerRef(node);
+		handleRef(local.ref, node);
+	};
+	return createMemo(() => createComponent(DateField, {
+		get value() {
+			return ctx.value;
+		},
+		get onChange() {
+			return ctx.setValue;
+		},
+		get locale() {
+			return ctx.locale;
+		},
+		get granularity() {
+			return ctx.granularity;
+		},
+		get hourCycle() {
+			return ctx.hourCycle;
+		},
+		get minValue() {
+			return ctx.minValue;
+		},
+		get maxValue() {
+			return ctx.maxValue;
+		},
+		get isDisabled() {
+			return ctx.isDisabled;
+		},
+		get isReadOnly() {
+			return ctx.isReadOnly;
+		},
+		get name() {
+			return ctx.name;
+		},
+		get "data-date-picker"() {
+			return "";
+		},
+		get children() {
+			return (() => {
+				const _el$ = createNativeElement("div");
+				spread({
+					element: _el$,
+					props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+						ref: setRef,
+						"data-date-picker-control": ""
+					})
+				});
+				insert(_el$, createMemo(() => createComponent(DateInput, {
+					get "aria-labelledby"() {
+						return ctx.ids.label;
+					},
+					get "data-date-picker-input"() {
+						return "";
+					}
+				})), null);
+				insert(_el$, local.children ?? createMemo(() => createComponent(DatePickerTrigger, {})), null);
+				return _el$;
+			})();
+		}
+	}));
 }
+/** Toggles the calendar popover. */
 function DatePickerTrigger(props) {
-  const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["onClick", "children", "fx", "style"]);
-  return (() => {
-    const _el$ = createNativeElement("button");
-    spread({ element: _el$, props: mergeProps(fxProps(
-      () => local.fx,
-      () => local.style
-    ), others, { type: "button", "aria-haspopup": "dialog", "aria-expanded": () => ctx.isOpen() ? "true" : "false", "aria-controls": () => ctx.ids.content, "aria-label": "Open calendar", disabled: () => ctx.isDisabled(), "data-date-picker-trigger": "", onClick: composeEventHandlers([
-      local.onClick,
-      () => {
-        if (ctx.isDisabled() || ctx.isReadOnly()) return;
-        ctx.setOpen(!ctx.isOpen());
-      }
-    ]) }) });
-    insert(_el$, local.children ?? "📅");
-    return _el$;
-  })();
+	const ctx = useDatePickerContext();
+	const [local, others] = splitProps(props, [
+		"onClick",
+		"children",
+		"fx",
+		"style"
+	]);
+	return (() => {
+		const _el$ = createNativeElement("button");
+		spread({
+			element: _el$,
+			props: mergeProps(fxProps(() => local.fx, () => local.style), others, {
+				type: "button",
+				"aria-haspopup": "dialog",
+				"aria-expanded": () => ctx.isOpen() ? "true" : "false",
+				"aria-controls": () => ctx.ids.content,
+				"aria-label": "Open calendar",
+				disabled: () => ctx.isDisabled(),
+				"data-date-picker-trigger": "",
+				onClick: composeEventHandlers([local.onClick, () => {
+					if (ctx.isDisabled() || ctx.isReadOnly()) return;
+					ctx.setOpen(!ctx.isOpen());
+				}])
+			})
+		});
+		insert(_el$, local.children ?? "📅", null);
+		return _el$;
+	})();
 }
+/**
+* The floating calendar panel. Renders a default calendar bound to the shared
+* value (override by passing children); selecting a day closes the popover.
+*/
 function DatePickerContent(props) {
-  const ctx = useDatePickerContext();
-  const [local, others] = splitProps(props, ["ref", "children", "style", "fx", "style"]);
-  const [element, setElement] = createSignal(void 0);
-  const portalRef = useRef(null);
-  createEffect(() => {
-    if (!ctx.isOpen() && portalRef.current) portalRef.current.remove();
-  });
-  return createMemo(() => createComponent(Show, { get when() {
-    return ctx.isOpen();
-  }, get children() {
-    return createMemo(() => createComponent(Portal, { get ref() {
-      return portalRef;
-    }, get children() {
-      return createMemo(() => createComponent(FloatingPanel, mergeProps(others, { get setElement() {
-        return setElement;
-      }, get element() {
-        return element;
-      }, get forwardRef() {
-        return local.ref;
-      }, get fx() {
-        return local.fx;
-      }, get style() {
-        return local.style;
-      }, get children() {
-        return local.children ?? createMemo(() => createComponent(DatePickerCalendar, {}));
-      } })));
-    } }));
-  } }));
+	const ctx = useDatePickerContext();
+	const [local, others] = splitProps(props, [
+		"ref",
+		"children",
+		"style",
+		"fx",
+		"style"
+	]);
+	const [element, setElement] = createSignal(void 0);
+	const portalRef = useRef(null);
+	createEffect(() => {
+		if (!ctx.isOpen() && portalRef.current) portalRef.current.remove();
+	});
+	return createMemo(() => createComponent(Show, {
+		get when() {
+			return ctx.isOpen();
+		},
+		get children() {
+			return createMemo(() => createComponent(Portal, {
+				get ref() {
+					return portalRef;
+				},
+				get children() {
+					return createMemo(() => createComponent(FloatingPanel, mergeProps(others, {
+						get setElement() {
+							return setElement;
+						},
+						get element() {
+							return element;
+						},
+						get forwardRef() {
+							return local.ref;
+						},
+						get fx() {
+							return local.fx;
+						},
+						get style() {
+							return local.style;
+						},
+						get children() {
+							return local.children ?? createMemo(() => createComponent(DatePickerCalendar, {}));
+						}
+					})));
+				}
+			}));
+		}
+	}));
 }
+/** Inner panel — split out so the floating hooks run inside the portal. */
 function FloatingPanel(props) {
-  const ctx = useDatePickerContext();
-  const position = createFloatingPosition(ctx.triggerRef, props.element, {
-    placement: ctx.placement,
-    offset: ctx.offset
-  });
-  createDismissableLayer(props.element, {
-    shouldExcludeTarget: (target) => {
-      const trigger = ctx.triggerRef();
-      return !!trigger && (trigger === target || trigger.contains(target));
-    },
-    onDismiss: () => ctx.setOpen(false)
-  });
-  createFocusScope(props.element, { trap: false, autoFocus: true, restoreFocus: true });
-  createRenderEffect(() => {
-    const el = props.element();
-    if (!el) return;
-    el.style.position = "absolute";
-    el.style.left = `${Math.round(position.x())}px`;
-    el.style.top = `${Math.round(position.y())}px`;
-  });
-  const setRef = (node) => {
-    props.setElement(node);
-    handleRef(props.forwardRef, node);
-  };
-  return (() => {
-    const _el$ = createNativeElement("div");
-    spread({ element: _el$, props: mergeProps(fxProps(
-      () => props.fx,
-      () => props.style
-    ), { ref: setRef, role: "dialog", id: () => ctx.ids.content, "aria-label": "Calendar", "data-date-picker-content": "", "data-placement": () => position.placement(), tabindex: -1, onKeyDown: (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        ctx.setOpen(false);
-        ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
-      }
-    } }) });
-    insert(_el$, props.children);
-    return _el$;
-  })();
+	const ctx = useDatePickerContext();
+	const position = createFloatingPosition(ctx.triggerRef, props.element, {
+		placement: ctx.placement,
+		offset: ctx.offset
+	});
+	createDismissableLayer(props.element, {
+		shouldExcludeTarget: (target) => {
+			const trigger = ctx.triggerRef();
+			return !!trigger && (trigger === target || trigger.contains(target));
+		},
+		onDismiss: () => ctx.setOpen(false)
+	});
+	createFocusScope(props.element, {
+		trap: false,
+		autoFocus: true,
+		restoreFocus: true
+	});
+	createRenderEffect(() => {
+		const el = props.element();
+		if (!el) return;
+		el.style.position = "absolute";
+		el.style.left = `${Math.round(position.x())}px`;
+		el.style.top = `${Math.round(position.y())}px`;
+	});
+	const setRef = (node) => {
+		props.setElement(node);
+		handleRef(props.forwardRef, node);
+	};
+	return (() => {
+		const _el$ = createNativeElement("div");
+		spread({
+			element: _el$,
+			props: mergeProps(fxProps(() => props.fx, () => props.style), {
+				ref: setRef,
+				role: "dialog",
+				id: () => ctx.ids.content,
+				"aria-label": "Calendar",
+				"data-date-picker-content": "",
+				"data-placement": () => position.placement(),
+				tabindex: -1,
+				onKeyDown: (e) => {
+					if (e.key === "Escape") {
+						e.stopPropagation();
+						ctx.setOpen(false);
+						ctx.triggerRef()?.querySelector("[data-date-picker-trigger]")?.focus();
+					}
+				}
+			})
+		});
+		insert(_el$, props.children, null);
+		return _el$;
+	})();
 }
+/** Default calendar inside the popover; closes on selection. */
 function DatePickerCalendar() {
-  const ctx = useDatePickerContext();
-  return createMemo(() => createComponent(Calendar, { get value() {
-    return ctx.value;
-  }, get onChange() {
-    return (v) => {
-      ctx.setValue(v);
-      ctx.setOpen(false);
-    };
-  }, get locale() {
-    return ctx.locale;
-  }, get minValue() {
-    return ctx.minValue;
-  }, get maxValue() {
-    return ctx.maxValue;
-  }, get isDateUnavailable() {
-    return ctx.isDateUnavailable;
-  }, get "data-date-picker-calendar"() {
-    return "";
-  }, get children() {
-    return [createMemo(() => createComponent(CalendarHeader, { get children() {
-      return [createMemo(() => createComponent(CalendarPrevButton, { get children() {
-        return "‹";
-      } })), createMemo(() => createComponent(CalendarHeading, {})), createMemo(() => createComponent(CalendarNextButton, { get children() {
-        return "›";
-      } }))];
-    } })), createMemo(() => createComponent(CalendarGrid, {}))];
-  } }));
+	const ctx = useDatePickerContext();
+	return createMemo(() => createComponent(Calendar, {
+		get value() {
+			return ctx.value;
+		},
+		get onChange() {
+			return (v) => {
+				ctx.setValue(v);
+				ctx.setOpen(false);
+			};
+		},
+		get locale() {
+			return ctx.locale;
+		},
+		get minValue() {
+			return ctx.minValue;
+		},
+		get maxValue() {
+			return ctx.maxValue;
+		},
+		get isDateUnavailable() {
+			return ctx.isDateUnavailable;
+		},
+		get "data-date-picker-calendar"() {
+			return "";
+		},
+		get children() {
+			return [createMemo(() => createComponent(CalendarHeader, { get children() {
+				return [
+					createMemo(() => createComponent(CalendarPrevButton, { get children() {
+						return "‹";
+					} })),
+					createMemo(() => createComponent(CalendarHeading, {})),
+					createMemo(() => createComponent(CalendarNextButton, { get children() {
+						return "›";
+					} }))
+				];
+			} })), createMemo(() => createComponent(CalendarGrid, {}))];
+		}
+	}));
 }
-export {
-  DatePicker,
-  DatePickerCalendar,
-  DatePickerContent,
-  DatePickerField,
-  DatePickerLabel,
-  DatePickerTrigger,
-  useDatePickerContext
-};
+//#endregion
+export { DatePicker, DatePickerCalendar, DatePickerContent, DatePickerField, DatePickerLabel, DatePickerTrigger, useDatePickerContext };