@diwauhris/ui 1.7.23 → 1.7.24

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,7 @@ 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") {
 	const spaceBelow = window.innerHeight - rect.bottom;
 	const spaceAbove = rect.top;
 	const isNarrow = window.innerWidth < 368;
@@ -1407,17 +1407,23 @@ 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 >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - CALENDAR_HEIGHT - 8);
+	else style.top = Math.max(rect.top - CALENDAR_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 }) {
+	const [isOpen, setIsOpenState] = (0, react.useState)(false);
 	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) => {
+		setIsOpenState((prev) => {
+			if (prev !== next) onOpenChange?.(next);
+			return next;
+		});
+	}, [onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1429,7 +1435,7 @@ 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;
@@ -1441,12 +1447,16 @@ 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,
+		placement,
+		setIsOpen
+	]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1504,6 +1514,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,
@@ -1521,7 +1532,21 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				"aria-expanded": isOpen,
 				role: "combobox",
 				className: inputClasses
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarDays, {
+			}), clearable && value && !disabled ? /* @__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"
@@ -1546,6 +1571,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
 				maxDate,
+				locale,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,

package/lib/index.mjs

@@ -1374,7 +1374,7 @@ 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") {
 	const spaceBelow = window.innerHeight - rect.bottom;
 	const spaceAbove = rect.top;
 	const isNarrow = window.innerWidth < 368;
@@ -1383,17 +1383,23 @@ 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 >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - CALENDAR_HEIGHT - 8);
+	else style.top = Math.max(rect.top - CALENDAR_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 }) {
+	const [isOpen, setIsOpenState] = useState(false);
 	const [popupStyle, setPopupStyle] = useState({});
 	const wrapperRef = useRef(null);
 	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
 	const internalId = useId();
+	const setIsOpen = useCallback((next) => {
+		setIsOpenState((prev) => {
+			if (prev !== next) onOpenChange?.(next);
+			return next;
+		});
+	}, [onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1405,7 +1411,7 @@ 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;
@@ -1417,12 +1423,16 @@ 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,
+		placement,
+		setIsOpen
+	]);
 	useEffect(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1480,6 +1490,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				id: inputId,
+				name,
 				type: "text",
 				readOnly: true,
 				value: displayValue,
@@ -1497,7 +1508,21 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				"aria-expanded": isOpen,
 				role: "combobox",
 				className: inputClasses
-			}), /* @__PURE__ */ jsx(CalendarDays, {
+			}), clearable && value && !disabled ? /* @__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"
@@ -1522,6 +1547,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
 				maxDate,
+				locale,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,

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

@@ -12,6 +12,27 @@ 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;
 }
-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'): 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, }: 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.24",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [