@diwauhris/ui 1.7.40 → 1.7.42

package/lib/assets/ui.css

@@ -4169,11 +4169,6 @@
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.backdrop-blur {
-  --tw-backdrop-blur: blur(8px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -4249,14 +4244,6 @@
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
-.will-change-\[opacity\] {
-  will-change: opacity;
-}
-
-.will-change-\[transform\2c opacity\] {
-  will-change: transform,opacity;
-}
-
 @keyframes enter {
   from {
     opacity: var(--tw-enter-opacity, 1);

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;
@@ -2462,16 +2463,16 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60 will-change-[opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-150 ease-out" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
-				className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "will-change-[transform,opacity]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-150 ease-out"),
+				className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth),
 				style: { padding: 0 },
 				onOpenAutoFocus,
 				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;
 					}
@@ -2592,11 +2593,11 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
-			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], "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Portal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+			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;
@@ -2438,16 +2439,16 @@ function Modal({ isOpen, onClose, title, children, icon, subtitle, headerMeta, f
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60 will-change-[opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-150 ease-out" }), /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4",
 			children: /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-				className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth, "will-change-[transform,opacity]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-150 ease-out"),
+				className: cn("pointer-events-auto relative", "flex w-full flex-col", "rounded-lg border border-slate-200 bg-white shadow-xl", "max-h-[85vh] outline-none", maxWidth),
 				style: { padding: 0 },
 				onOpenAutoFocus,
 				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;
 					}
@@ -2568,11 +2569,11 @@ function Dialog({ open, onClose, title, description, preventClose = false, size
 		onOpenChange: (isOpen) => {
 			if (!isOpen && !preventClose) onClose();
 		},
-		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 duration-200" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-			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], "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0", "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95", "duration-200"),
+		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [/* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-brand-navy/60" }), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+			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.40",
+  "version": "1.7.42",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [