@diwauhris/ui 1.7.10 → 1.7.12

package/lib/assets/ui.css

@@ -370,6 +370,10 @@
   right: 0px;
 }
 
+.right-1\/2 {
+  right: 50%;
+}
+
 .right-2 {
   right: 0.5rem;
 }

package/lib/index.cjs

@@ -1377,6 +1377,10 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 * Updated to import FieldContext from gallery-local field directory.
 * Uses react-calendar and date-fns.
 * Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.
+*
+* Popover is rendered via createPortal into document.body so that
+* position:fixed works correctly even when the DatePicker is inside a
+* CSS transform context (e.g. a Modal with -translate-x/y centering).
 */
 var POPOVER_WIDTH = 352;
 var CALENDAR_HEIGHT = 360;
@@ -1384,6 +1388,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	const [isOpen, setIsOpen] = (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 ctx = useFieldContext();
@@ -1421,7 +1426,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	}, [disabled]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
-			if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setIsOpen(false);
+			const target = e.target;
+			if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
@@ -1492,7 +1498,8 @@ 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 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		}), isOpen && !disabled && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: popoverRef,
 			className: "pis-datepicker-popover",
 			style: popupStyle,
 			role: "dialog",
@@ -1525,7 +1532,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				},
 				className: "pis-rc-calendar"
 			}, isOpen ? "open" : "closed")
-		})]
+		}), document.body)]
 	});
 }
 //#endregion
@@ -3548,6 +3555,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		className: cn("flex flex-col", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "flex flex-col",
+			"aria-orientation": "vertical",
 			children: steps.map((step, idx) => {
 				const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
 				const isCurrent = state === "current";
@@ -3611,30 +3619,28 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		className: cn("w-full", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
 			className: "grid w-full",
+			"aria-orientation": "horizontal",
 			style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
 			children: steps.map((step, idx) => {
 				const state = resolvedStates[idx];
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
-				const prevState = idx > 0 ? resolvedStates[idx - 1] : null;
-				const connectorDone = prevState === "completed" || prevState === "current";
+				const connectorDone = (idx > 0 ? resolvedStates[idx - 1] : null) === "completed";
 				const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
 				const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex flex-col items-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex w-full items-center",
+						className: "relative flex h-9 w-full items-center justify-center",
 						children: [
-							idx > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `h-0.5 flex-1 ${connectorLeft}`,
-								"aria-hidden": "true"
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "flex-1",
-								"aria-hidden": "true"
+							idx > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `absolute inset-y-0 left-0 right-1/2 flex items-center`,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-0.5 w-full ${connectorLeft}` })
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "shrink-0 z-10",
+								className: "relative shrink-0 z-10",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
 									state,
 									number: idx + 1,
@@ -3642,12 +3648,10 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 									dark
 								})
 							}),
-							!isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `h-0.5 flex-1 ${connectorRight}`,
-								"aria-hidden": "true"
-							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "flex-1",
-								"aria-hidden": "true"
+							!isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `absolute inset-y-0 left-1/2 right-0 flex items-center`,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `h-0.5 w-full ${connectorRight}` })
 							})
 						]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {

package/lib/index.mjs

@@ -1353,6 +1353,10 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
 * Updated to import FieldContext from gallery-local field directory.
 * Uses react-calendar and date-fns.
 * Note: CSS for .pis-datepicker-popover and .pis-rc-calendar is in index.css.
+*
+* Popover is rendered via createPortal into document.body so that
+* position:fixed works correctly even when the DatePicker is inside a
+* CSS transform context (e.g. a Modal with -translate-x/y centering).
 */
 var POPOVER_WIDTH = 352;
 var CALENDAR_HEIGHT = 360;
@@ -1360,6 +1364,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	const [isOpen, setIsOpen] = useState(false);
 	const [popupStyle, setPopupStyle] = useState({});
 	const wrapperRef = useRef(null);
+	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
 	const internalId = useId();
 	const ctx = useFieldContext();
@@ -1397,7 +1402,8 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 	}, [disabled]);
 	useEffect(() => {
 		function handleClickOutside(e) {
-			if (wrapperRef.current && !wrapperRef.current.contains(e.target)) setIsOpen(false);
+			const target = e.target;
+			if (wrapperRef.current && !wrapperRef.current.contains(target) && popoverRef.current && !popoverRef.current.contains(target)) setIsOpen(false);
 		}
 		document.addEventListener("mousedown", handleClickOutside);
 		return () => document.removeEventListener("mousedown", handleClickOutside);
@@ -1468,7 +1474,8 @@ 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 && /* @__PURE__ */ jsx("div", {
+		}), isOpen && !disabled && createPortal(/* @__PURE__ */ jsx("div", {
+			ref: popoverRef,
 			className: "pis-datepicker-popover",
 			style: popupStyle,
 			role: "dialog",
@@ -1501,7 +1508,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				},
 				className: "pis-rc-calendar"
 			}, isOpen ? "open" : "closed")
-		})]
+		}), document.body)]
 	});
 }
 //#endregion
@@ -3524,6 +3531,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		className: cn("flex flex-col", className),
 		children: /* @__PURE__ */ jsx("ol", {
 			className: "flex flex-col",
+			"aria-orientation": "vertical",
 			children: steps.map((step, idx) => {
 				const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
 				const isCurrent = state === "current";
@@ -3587,30 +3595,28 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		className: cn("w-full", className),
 		children: /* @__PURE__ */ jsx("ol", {
 			className: "grid w-full",
+			"aria-orientation": "horizontal",
 			style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` },
 			children: steps.map((step, idx) => {
 				const state = resolvedStates[idx];
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
-				const prevState = idx > 0 ? resolvedStates[idx - 1] : null;
-				const connectorDone = prevState === "completed" || prevState === "current";
+				const connectorDone = (idx > 0 ? resolvedStates[idx - 1] : null) === "completed";
 				const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
 				const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ jsxs("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex flex-col items-center",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex w-full items-center",
+						className: "relative flex h-9 w-full items-center justify-center",
 						children: [
-							idx > 0 ? /* @__PURE__ */ jsx("div", {
-								className: `h-0.5 flex-1 ${connectorLeft}`,
-								"aria-hidden": "true"
-							}) : /* @__PURE__ */ jsx("div", {
-								className: "flex-1",
-								"aria-hidden": "true"
+							idx > 0 && /* @__PURE__ */ jsx("div", {
+								className: `absolute inset-y-0 left-0 right-1/2 flex items-center`,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("div", { className: `h-0.5 w-full ${connectorLeft}` })
 							}),
 							/* @__PURE__ */ jsx("div", {
-								className: "shrink-0 z-10",
+								className: "relative shrink-0 z-10",
 								children: /* @__PURE__ */ jsx(StepCircle, {
 									state,
 									number: idx + 1,
@@ -3618,12 +3624,10 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 									dark
 								})
 							}),
-							!isLast ? /* @__PURE__ */ jsx("div", {
-								className: `h-0.5 flex-1 ${connectorRight}`,
-								"aria-hidden": "true"
-							}) : /* @__PURE__ */ jsx("div", {
-								className: "flex-1",
-								"aria-hidden": "true"
+							!isLast && /* @__PURE__ */ jsx("div", {
+								className: `absolute inset-y-0 left-1/2 right-0 flex items-center`,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("div", { className: `h-0.5 w-full ${connectorRight}` })
 							})
 						]
 					}), /* @__PURE__ */ jsxs("div", {

package/package.json

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