@diwauhris/ui 1.7.23 → 1.7.25

package/lib/assets/ui.css

@@ -378,6 +378,10 @@
   right: 0.5rem;
 }
 
+.right-2\.5 {
+  right: 0.625rem;
+}
+
 .right-3 {
   right: 0.75rem;
 }

package/lib/index.cjs

@@ -1398,7 +1398,8 @@ function getScrollParent(el) {
 	if (["auto", "scroll"].includes(overflowY) || ["auto", "scroll"].includes(overflow)) return el;
 	return getScrollParent(el.parentElement);
 }
-function computePopupStyle(rect) {
+function computePopupStyle(rect, placement = "auto", measuredHeight) {
+	const height = measuredHeight ?? CALENDAR_HEIGHT;
 	const spaceBelow = window.innerHeight - rect.bottom;
 	const spaceAbove = rect.top;
 	const isNarrow = window.innerWidth < 368;
@@ -1407,17 +1408,29 @@ function computePopupStyle(rect) {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	if (spaceAbove > spaceBelow && spaceBelow < CALENDAR_HEIGHT / 3) style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
-	else style.top = rect.bottom + 6;
+	if (placement === "below" ? true : placement === "above" ? false : spaceBelow >= height || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - height - 8);
+	else style.top = Math.max(rect.top - height - 6, 8);
 	return style;
 }
-function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
-	const [isOpen, setIsOpen] = (0, react.useState)(false);
+function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name, isDateDisabled, readOnly = false, open, defaultOpen = false }) {
+	const isControlled = open !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
+	const isOpen = isControlled ? open : uncontrolledOpen;
 	const [popupStyle, setPopupStyle] = (0, react.useState)({});
 	const wrapperRef = (0, react.useRef)(null);
 	const popoverRef = (0, react.useRef)(null);
 	const inputRef = (0, react.useRef)(null);
 	const internalId = (0, react.useId)();
+	const setIsOpen = (0, react.useCallback)((next) => {
+		if (isControlled) {
+			onOpenChange?.(next);
+			return;
+		}
+		setUncontrolledOpen((prev) => {
+			if (prev !== next) onOpenChange?.(next);
+			return next;
+		});
+	}, [isControlled, onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1429,10 +1442,10 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		const d2 = new Date(value);
 		return isNaN(d2.getTime()) ? void 0 : d2;
 	})() : void 0;
-	const displayValue = selectedDate ? (0, date_fns.format)(selectedDate, "MMM d, yyyy") : "";
+	const displayValue = selectedDate ? (0, date_fns.format)(selectedDate, dateFormat) : "";
 	const skipNextOpen = (0, react.useRef)(false);
 	const openPopup = (0, react.useCallback)(() => {
-		if (disabled) return;
+		if (disabled || readOnly) return;
 		if (skipNextOpen.current) {
 			skipNextOpen.current = false;
 			return;
@@ -1441,12 +1454,23 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			if (!wrapperRef.current) return;
 			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect());
+				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
 				setIsOpen(true);
 			});
 		}, 50);
-	}, [disabled]);
+	}, [
+		disabled,
+		readOnly,
+		placement,
+		setIsOpen
+	]);
+	(0, react.useEffect)(() => {
+		if (!isOpen || !popoverRef.current || !wrapperRef.current) return;
+		const measuredHeight = popoverRef.current.offsetHeight;
+		const rect = wrapperRef.current.getBoundingClientRect();
+		setPopupStyle(computePopupStyle(rect, placement, measuredHeight));
+	}, [isOpen, placement]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1504,6 +1528,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref: inputRef,
 				id: inputId,
+				name,
 				type: "text",
 				readOnly: true,
 				value: displayValue,
@@ -1517,16 +1542,31 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				"aria-required": resolvedRequired ? "true" : void 0,
 				"aria-invalid": resolvedInvalid ? "true" : void 0,
 				"aria-describedby": describedBy,
-				"aria-haspopup": "dialog",
-				"aria-expanded": isOpen,
+				"aria-readonly": readOnly ? "true" : void 0,
+				"aria-haspopup": readOnly ? void 0 : "dialog",
+				"aria-expanded": readOnly ? void 0 : isOpen,
 				role: "combobox",
 				className: inputClasses
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarDays, {
+			}), clearable && value && !disabled && !readOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": "Clear date",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				onClick: () => {
+					onChange("");
+					setIsOpen(false);
+					inputRef.current?.focus();
+				},
+				className: "absolute right-2.5 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full text-slate-300 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { size: 14 })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarDays, {
 				size: 16,
 				className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
 				"aria-hidden": "true"
 			})]
-		}), isOpen && !disabled && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), isOpen && !disabled && !readOnly && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: popoverRef,
 			className: "pis-datepicker-popover",
 			style: popupStyle,
@@ -1546,6 +1586,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
 				maxDate,
+				tileDisabled: isDateDisabled ? ({ date, view }) => view === "month" && isDateDisabled(date) : void 0,
+				locale,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,

package/lib/index.mjs

@@ -1374,7 +1374,8 @@ function getScrollParent(el) {
 	if (["auto", "scroll"].includes(overflowY) || ["auto", "scroll"].includes(overflow)) return el;
 	return getScrollParent(el.parentElement);
 }
-function computePopupStyle(rect) {
+function computePopupStyle(rect, placement = "auto", measuredHeight) {
+	const height = measuredHeight ?? CALENDAR_HEIGHT;
 	const spaceBelow = window.innerHeight - rect.bottom;
 	const spaceAbove = rect.top;
 	const isNarrow = window.innerWidth < 368;
@@ -1383,17 +1384,29 @@ function computePopupStyle(rect) {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	if (spaceAbove > spaceBelow && spaceBelow < CALENDAR_HEIGHT / 3) style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
-	else style.top = rect.bottom + 6;
+	if (placement === "below" ? true : placement === "above" ? false : spaceBelow >= height || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - height - 8);
+	else style.top = Math.max(rect.top - height - 6, 8);
 	return style;
 }
-function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
-	const [isOpen, setIsOpen] = useState(false);
+function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name, isDateDisabled, readOnly = false, open, defaultOpen = false }) {
+	const isControlled = open !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const isOpen = isControlled ? open : uncontrolledOpen;
 	const [popupStyle, setPopupStyle] = useState({});
 	const wrapperRef = useRef(null);
 	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
 	const internalId = useId();
+	const setIsOpen = useCallback((next) => {
+		if (isControlled) {
+			onOpenChange?.(next);
+			return;
+		}
+		setUncontrolledOpen((prev) => {
+			if (prev !== next) onOpenChange?.(next);
+			return next;
+		});
+	}, [isControlled, onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1405,10 +1418,10 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		const d2 = new Date(value);
 		return isNaN(d2.getTime()) ? void 0 : d2;
 	})() : void 0;
-	const displayValue = selectedDate ? format(selectedDate, "MMM d, yyyy") : "";
+	const displayValue = selectedDate ? format(selectedDate, dateFormat) : "";
 	const skipNextOpen = useRef(false);
 	const openPopup = useCallback(() => {
-		if (disabled) return;
+		if (disabled || readOnly) return;
 		if (skipNextOpen.current) {
 			skipNextOpen.current = false;
 			return;
@@ -1417,12 +1430,23 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			if (!wrapperRef.current) return;
 			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect());
+				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
 				setIsOpen(true);
 			});
 		}, 50);
-	}, [disabled]);
+	}, [
+		disabled,
+		readOnly,
+		placement,
+		setIsOpen
+	]);
+	useEffect(() => {
+		if (!isOpen || !popoverRef.current || !wrapperRef.current) return;
+		const measuredHeight = popoverRef.current.offsetHeight;
+		const rect = wrapperRef.current.getBoundingClientRect();
+		setPopupStyle(computePopupStyle(rect, placement, measuredHeight));
+	}, [isOpen, placement]);
 	useEffect(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1480,6 +1504,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				id: inputId,
+				name,
 				type: "text",
 				readOnly: true,
 				value: displayValue,
@@ -1493,16 +1518,31 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				"aria-required": resolvedRequired ? "true" : void 0,
 				"aria-invalid": resolvedInvalid ? "true" : void 0,
 				"aria-describedby": describedBy,
-				"aria-haspopup": "dialog",
-				"aria-expanded": isOpen,
+				"aria-readonly": readOnly ? "true" : void 0,
+				"aria-haspopup": readOnly ? void 0 : "dialog",
+				"aria-expanded": readOnly ? void 0 : isOpen,
 				role: "combobox",
 				className: inputClasses
-			}), /* @__PURE__ */ jsx(CalendarDays, {
+			}), clearable && value && !disabled && !readOnly ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Clear date",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				onClick: () => {
+					onChange("");
+					setIsOpen(false);
+					inputRef.current?.focus();
+				},
+				className: "absolute right-2.5 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full text-slate-300 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				children: /* @__PURE__ */ jsx(X, { size: 14 })
+			}) : /* @__PURE__ */ jsx(CalendarDays, {
 				size: 16,
 				className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
 				"aria-hidden": "true"
 			})]
-		}), isOpen && !disabled && createPortal(/* @__PURE__ */ jsx("div", {
+		}), isOpen && !disabled && !readOnly && createPortal(/* @__PURE__ */ jsx("div", {
 			ref: popoverRef,
 			className: "pis-datepicker-popover",
 			style: popupStyle,
@@ -1522,6 +1562,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
 				maxDate,
+				tileDisabled: isDateDisabled ? ({ date, view }) => view === "month" && isDateDisabled(date) : void 0,
+				locale,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,

package/lib/types/ui-library/gallery/date-picker/DatePicker.d.ts

@@ -12,6 +12,47 @@ interface DatePickerProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     required?: boolean;
+    /**
+     * date-fns format string for the text shown in the trigger.
+     * The committed `onChange` value is always ISO `yyyy-MM-dd` regardless of this.
+     * Default: 'MMM d, yyyy'.
+     */
+    dateFormat?: string;
+    /** Show a clear (×) button that resets the value to '' when a date is set. */
+    clearable?: boolean;
+    /** Notified whenever the calendar popover opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Popover placement relative to the trigger.
+     * 'auto' (default) flips above/below based on viewport space;
+     * 'below'/'above' force a side (still clamped to stay on-screen).
+     */
+    placement?: 'auto' | 'below' | 'above';
+    /** BCP-47 locale forwarded to the calendar (e.g. 'en-US', 'fr-FR'). */
+    locale?: string;
+    /** Name forwarded to the trigger input for form association. */
+    name?: string;
+    /**
+     * Per-day predicate to disable individual dates that min/maxDate can't express
+     * (weekends, holidays, already-booked days). Return true to disable the date.
+     * Only consulted on the day (month) view.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Read-only: the value is shown but the calendar can't be opened and no date
+     * can be picked. Unlike `disabled`, it keeps normal (non-greyed) styling for
+     * view/detail screens.
+     */
+    readOnly?: boolean;
+    /**
+     * Controlled open state. When provided, the component no longer manages its
+     * own open/close — the parent owns it via `onOpenChange`. Leave undefined for
+     * the default uncontrolled behavior.
+     */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Ignored when `open` is provided. */
+    defaultOpen?: boolean;
 }
-export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, }: DatePickerProps): import("react").JSX.Element;
+export declare function computePopupStyle(rect: DOMRect, placement?: 'auto' | 'below' | 'above', measuredHeight?: number): React.CSSProperties;
+export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, dateFormat, clearable, onOpenChange, placement, locale, name, isDateDisabled, readOnly, open, defaultOpen, }: DatePickerProps): import("react").JSX.Element;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.23",
+  "version": "1.7.25",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [