@diwauhris/ui 1.7.41 → 1.7.42

package/lib/index.cjs

@@ -54,6 +54,7 @@ let sonner = require("sonner");
 function cn(...inputs) {
 	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
 }
+var FLOATING_LAYER_SELECTOR = `.pis-datepicker-popover, [data-pis-floating]`;
 //#endregion
 //#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
 var __defProp$1 = Object.defineProperty;
@@ -2471,7 +2472,7 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 				onCloseAutoFocus,
 				onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
 				onInteractOutside: (e) => {
-					if (e.target?.closest(".pis-datepicker-popover")) {
+					if (e.target?.closest(FLOATING_LAYER_SELECTOR)) {
 						e.preventDefault();
 						return;
 					}
@@ -2596,7 +2597,7 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size]),
 			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
 			onInteractOutside: (e) => {
-				if (e.target?.closest(".pis-datepicker-popover")) {
+				if (e.target?.closest(FLOATING_LAYER_SELECTOR)) {
 					e.preventDefault();
 					return;
 				}
@@ -4265,7 +4266,11 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			ref: panelRef,
 			role: "menu",
 			"aria-label": ariaLabel,
-			style: panelStyle,
+			["data-pis-floating"]: "",
+			style: {
+				...panelStyle,
+				pointerEvents: "auto"
+			},
 			className: cn("overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 				ref: (node) => {

package/lib/index.mjs

@@ -30,6 +30,7 @@ var __exportAll = (all, no_symbols) => {
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
+var FLOATING_LAYER_SELECTOR = `.pis-datepicker-popover, [data-pis-floating]`;
 //#endregion
 //#region node_modules/@radix-ui/react-compose-refs/dist/index.mjs
 var __defProp$1 = Object.defineProperty;
@@ -2447,7 +2448,7 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 				onCloseAutoFocus,
 				onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
 				onInteractOutside: (e) => {
-					if (e.target?.closest(".pis-datepicker-popover")) {
+					if (e.target?.closest(FLOATING_LAYER_SELECTOR)) {
 						e.preventDefault();
 						return;
 					}
@@ -2572,7 +2573,7 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 			className: cn("fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2", "flex w-full flex-col overflow-hidden", "rounded-lg bg-white shadow-xl", "max-h-[90vh] outline-none", SIZE_CLASS[size]),
 			onEscapeKeyDown: preventClose ? (e) => e.preventDefault() : onEscapeKeyDown,
 			onInteractOutside: (e) => {
-				if (e.target?.closest(".pis-datepicker-popover")) {
+				if (e.target?.closest(FLOATING_LAYER_SELECTOR)) {
 					e.preventDefault();
 					return;
 				}
@@ -4241,7 +4242,11 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			ref: panelRef,
 			role: "menu",
 			"aria-label": ariaLabel,
-			style: panelStyle,
+			["data-pis-floating"]: "",
+			style: {
+				...panelStyle,
+				pointerEvents: "auto"
+			},
 			className: cn("overflow-y-auto overscroll-contain rounded-xl border border-slate-200 bg-white py-1 shadow-xl", panelClassName),
 			children: items.map((item, index) => /* @__PURE__ */ jsxs("button", {
 				ref: (node) => {

package/lib/types/lib/utils.d.ts

@@ -1,2 +1,11 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Floating layers (Menu panels, DatePicker calendars) portal to document.body.
+ * Inside an open Modal/Dialog, Radix blocks pointer events outside its content
+ * and treats any interaction there as "outside" (closing the dialog). Floating
+ * layers opt out by setting `pointer-events: auto` and carrying this marker;
+ * Modal and Dialog then ignore interactions that land inside them.
+ */
+export declare const FLOATING_LAYER_ATTR = "data-pis-floating";
+export declare const FLOATING_LAYER_SELECTOR = ".pis-datepicker-popover, [data-pis-floating]";

package/package.json

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