@diwauhris/ui 1.7.24 → 1.7.26

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, placement = "auto") {
+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,23 +1408,30 @@ function computePopupStyle(rect, placement = "auto") {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	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);
+	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, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name }) {
-	const [isOpen, setIsOpenState] = (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 [positioned, setPositioned] = (0, react.useState)(false);
 	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 (isControlled) {
+			onOpenChange?.(next);
+			return;
+		}
+		setUncontrolledOpen((prev) => {
 			if (prev !== next) onOpenChange?.(next);
 			return next;
 		});
-	}, [onOpenChange]);
+	}, [isControlled, onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1438,7 +1446,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	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;
@@ -1449,14 +1457,27 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				if (!wrapperRef.current) return;
 				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
+				setPositioned(false);
 				setIsOpen(true);
 			});
 		}, 50);
 	}, [
 		disabled,
+		readOnly,
 		placement,
 		setIsOpen
 	]);
+	(0, react.useLayoutEffect)(() => {
+		if (!isOpen) {
+			setPositioned(false);
+			return;
+		}
+		if (!popoverRef.current || !wrapperRef.current) return;
+		const measuredHeight = popoverRef.current.offsetHeight;
+		const rect = wrapperRef.current.getBoundingClientRect();
+		setPopupStyle(computePopupStyle(rect, placement, measuredHeight));
+		setPositioned(true);
+	}, [isOpen, placement]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1528,11 +1549,12 @@ 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
-			}), clearable && value && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			}), clearable && value && !disabled && !readOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				"aria-label": "Clear date",
 				onMouseDown: (e) => {
@@ -1551,10 +1573,13 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				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,
+			style: {
+				...popupStyle,
+				visibility: positioned ? void 0 : "hidden"
+			},
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",
@@ -1571,6 +1596,7 @@ 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,

package/lib/index.mjs

@@ -1,7 +1,7 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as React$1 from "react";
-import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import React, { cloneElement, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { AlertCircle, AlertTriangle, Archive, ArchiveRestore, ArrowDown, Ban, CalendarDays, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Command, File, Home, Info, Minus, RotateCcw, Search as Search$1, ShieldCheck, TrendingDown, TrendingUp, UploadCloud, X, ZoomIn, ZoomOut } from "lucide-react";
@@ -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, placement = "auto") {
+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,23 +1384,30 @@ function computePopupStyle(rect, placement = "auto") {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	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);
+	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, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name }) {
-	const [isOpen, setIsOpenState] = 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 [positioned, setPositioned] = useState(false);
 	const wrapperRef = useRef(null);
 	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
 	const internalId = useId();
 	const setIsOpen = useCallback((next) => {
-		setIsOpenState((prev) => {
+		if (isControlled) {
+			onOpenChange?.(next);
+			return;
+		}
+		setUncontrolledOpen((prev) => {
 			if (prev !== next) onOpenChange?.(next);
 			return next;
 		});
-	}, [onOpenChange]);
+	}, [isControlled, onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1414,7 +1422,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	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;
@@ -1425,14 +1433,27 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				if (!wrapperRef.current) return;
 				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
+				setPositioned(false);
 				setIsOpen(true);
 			});
 		}, 50);
 	}, [
 		disabled,
+		readOnly,
 		placement,
 		setIsOpen
 	]);
+	useLayoutEffect(() => {
+		if (!isOpen) {
+			setPositioned(false);
+			return;
+		}
+		if (!popoverRef.current || !wrapperRef.current) return;
+		const measuredHeight = popoverRef.current.offsetHeight;
+		const rect = wrapperRef.current.getBoundingClientRect();
+		setPopupStyle(computePopupStyle(rect, placement, measuredHeight));
+		setPositioned(true);
+	}, [isOpen, placement]);
 	useEffect(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1504,11 +1525,12 @@ 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
-			}), clearable && value && !disabled ? /* @__PURE__ */ jsx("button", {
+			}), clearable && value && !disabled && !readOnly ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"aria-label": "Clear date",
 				onMouseDown: (e) => {
@@ -1527,10 +1549,13 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				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,
+			style: {
+				...popupStyle,
+				visibility: positioned ? void 0 : "hidden"
+			},
 			role: "dialog",
 			"aria-label": ariaLabel ? `${ariaLabel} calendar` : "Date picker",
 			"aria-modal": "false",
@@ -1547,6 +1572,7 @@ 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,

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

@@ -32,7 +32,27 @@ interface DatePickerProps {
     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 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 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.24",
+  "version": "1.7.26",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [