@uxf/ui 11.104.0 → 11.105.0

package/modal/README.md

@@ -50,7 +50,7 @@ function Component(props: AppProps) {
     return (
         <div>
             <Button onClick={() => setIsOpen(true)}>Click to open modal</Button>
-            <Modal close={() => setIsOpen(false)} isOpen={isOpen}>
+            <Modal onClose={() => setIsOpen(false)} isOpen={isOpen}>
                 <DialogPanel width="xs">Whatever content inside Modal</DialogPanel>
             </Modal>
         </div>
@@ -64,15 +64,13 @@ The modal system supports opening multiple modals simultaneously in different la
 
 ### Default Layer Configuration
 
-By default, four layers are available:
+By default, two layers are available:
 
 ```typescript
 {
   layers: {
-    main: { name: "main", zIndex: 1000 },
-    confirmation: { name: "confirmation", zIndex: 1010 },
-    alert: { name: "alert", zIndex: 1020 },
-    critical: { name: "critical", zIndex: 1030 },
+    main: { name: "main", zIndex: 100 },
+    confirm: { name: "confirm", zIndex: 1000 },
   },
   defaultLayer: "main"
 }
@@ -81,7 +79,7 @@ By default, four layers are available:
 ### Basic Usage with Layers
 
 ```tsx
-import { openModal, closeModal, closeAllModals, closeModalsByLayer } from "@uxf/ui/modal";
+import { openModal, closeModal, closeModalLayer, closeAllModals } from "@uxf/ui/modal";
 
 // Open modal in default "main" layer
 openModal({
@@ -92,17 +90,14 @@ openModal({
 openModal({
     children: <DialogPanel>Confirmation dialog</DialogPanel>
 }, {
-    layer: "confirmation" // TypeScript autocompletes: "main" | "confirmation" | "alert" | "critical"
+    layer: "confirm" // TypeScript autocompletes: "main" | "confirm"
 });
 
-// Close topmost modal
+// Close topmost modal (highest z-index)
 closeModal();
 
-// Close modal in specific layer
-closeModal("confirmation");
-
-// Close all modals in a layer
-closeModalsByLayer("alert");
+// Close all modals in a specific layer
+closeModalLayer("confirm");
 
 // Close all modals across all layers
 closeAllModals();
@@ -113,7 +108,58 @@ closeAllModals();
 - Modals with higher z-index appear on top of modals with lower z-index
 - Only the topmost modal (highest z-index) responds to backdrop clicks and ESC key
 - Clicking inside a higher-layer modal will NOT close lower-layer modals
-- Each layer can have one modal by default (use `replace: false` option to allow multiple)
+- Each layer can have one modal by default (use `shouldReplace: false` option to allow multiple)
+
+## Closing Modals
+
+### Service functions (for modals opened via `openModal`)
+
+| Function | Description |
+|---|---|
+| `closeModal()` | Closes the topmost modal (highest z-index across all layers) |
+| `closeModalLayer(layer)` | Closes all modals in the specified layer |
+| `closeAllModals()` | Closes all modals across all layers |
+
+```tsx
+import { closeModal, closeModalLayer, closeAllModals } from "@uxf/ui/modal";
+
+closeModal();                  // closes topmost
+closeModalLayer("confirm");    // closes all in "confirm" layer
+closeAllModals();              // closes everything
+```
+
+### `onClose` callback
+
+When opening a modal via `openModal`, you can pass an `onClose` callback that fires whenever the modal is closed (by backdrop click, ESC key, or programmatic close):
+
+```tsx
+openModal({
+    children: <DialogPanel>Content</DialogPanel>,
+    onClose: () => console.log("modal closed"),
+});
+```
+
+### Disabling close triggers
+
+You can prevent the modal from being closed by backdrop click or ESC key:
+
+```tsx
+openModal({
+    children: <DialogPanel>Content</DialogPanel>,
+    isBackdropCloseDisabled: true,    // backdrop click won't close
+    isEscapeKeyCloseDisabled: true,   // ESC key won't close
+});
+```
+
+### `Modal` component (controlled)
+
+When using the `Modal` component directly, pass `onClose` to handle close events:
+
+```tsx
+<Modal onClose={() => setIsOpen(false)} isOpen={isOpen} isBackdropCloseDisabled={false}>
+    <DialogPanel>Content</DialogPanel>
+</Modal>
+```
 
 ## Custom Layer Configuration
 
@@ -180,10 +226,9 @@ You can extend the available layer names using TypeScript declaration merging:
 // types/modal.d.ts (in your project)
 import "@uxf/ui/modal";
 
-declare module "@uxf/ui/modal" {
+declare module "@uxf/ui/modal/theme" {
     interface ModalLayers {
         // Add your custom layer names
-        base: true;
         form: true;
         notification: true;
         tooltip: true;
@@ -201,11 +246,8 @@ const customModalLayers = {
     layers: {
         // Default layers (keep or override)
         main: { name: "main", zIndex: 1000 },
-        confirmation: { name: "confirmation", zIndex: 1010 },
-        alert: { name: "alert", zIndex: 1020 },
-        critical: { name: "critical", zIndex: 1030 },
+        confirm: { name: "confirm", zIndex: 1010 },
         // Your custom layers
-        base: { name: "base", zIndex: 900 },
         form: { name: "form", zIndex: 1100 },
         notification: { name: "notification", zIndex: 9000 },
         tooltip: { name: "tooltip", zIndex: 9999 },
@@ -228,7 +270,7 @@ openModal({
     children: <DialogPanel>Form content</DialogPanel>
 }, {
     layer: "form" // ✅ TypeScript autocompletes and validates!
-    // Available: "main" | "confirmation" | "alert" | "critical" | "base" | "form" | "notification" | "tooltip"
+    // Available: "main" | "confirm" | "form" | "notification" | "tooltip"
 });
 ```
 

package/modal/index.d.ts

@@ -2,7 +2,7 @@ export { DEFAULT_MODAL_LAYERS } from "./constants";
 export { Modal } from "./modal";
 export { ModalLayerConfigProvider, useModalLayerConfig } from "./modal-layer-config";
 export { ModalProvider } from "./modal-provider";
-export { closeAllModals, closeModal, closeModalsByLayer, getModalStackRef, openModal } from "./modal-service";
+export { closeAllModals, closeModal, closeModalLayer, getModalStackRef, openModal } from "./modal-service";
 export type { ModalInstance, ModalLayerConfig, ModalLayerName, ModalLayersConfiguration, ModalProps, ModalProviderProps, ModalRef, ModalStackRef, ModalVariant, OpenModalOptions, } from "./types";
 /** @deprecated use getModalStackRef */
 export { getModalStackRef as getModalRef } from "./modal-service";

package/modal/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getModalRef = exports.openModal = exports.getModalStackRef = exports.closeModalsByLayer = exports.closeModal = exports.closeAllModals = exports.ModalProvider = exports.useModalLayerConfig = exports.ModalLayerConfigProvider = exports.Modal = exports.DEFAULT_MODAL_LAYERS = void 0;
+exports.getModalRef = exports.openModal = exports.getModalStackRef = exports.closeModalLayer = exports.closeModal = exports.closeAllModals = exports.ModalProvider = exports.useModalLayerConfig = exports.ModalLayerConfigProvider = exports.Modal = exports.DEFAULT_MODAL_LAYERS = void 0;
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "DEFAULT_MODAL_LAYERS", { enumerable: true, get: function () { return constants_1.DEFAULT_MODAL_LAYERS; } });
 var modal_1 = require("./modal");
@@ -13,7 +13,7 @@ Object.defineProperty(exports, "ModalProvider", { enumerable: true, get: functio
 var modal_service_1 = require("./modal-service");
 Object.defineProperty(exports, "closeAllModals", { enumerable: true, get: function () { return modal_service_1.closeAllModals; } });
 Object.defineProperty(exports, "closeModal", { enumerable: true, get: function () { return modal_service_1.closeModal; } });
-Object.defineProperty(exports, "closeModalsByLayer", { enumerable: true, get: function () { return modal_service_1.closeModalsByLayer; } });
+Object.defineProperty(exports, "closeModalLayer", { enumerable: true, get: function () { return modal_service_1.closeModalLayer; } });
 Object.defineProperty(exports, "getModalStackRef", { enumerable: true, get: function () { return modal_service_1.getModalStackRef; } });
 Object.defineProperty(exports, "openModal", { enumerable: true, get: function () { return modal_service_1.openModal; } });
 // Backwards compatibility: getModalRef is now an alias for getModalStackRef

package/modal/modal-service.d.ts

@@ -6,13 +6,13 @@ export declare function getModalStackRef(): import("react").RefObject<ModalStack
  */
 export declare function openModal(modal: ModalProviderProps, options?: OpenModalOptions): string;
 /**
- * Closes the topmost modal or a modal in specific layer
+ * Closes the topmost modal (highest z-index)
  */
-export declare function closeModal(layer?: ModalLayerName): void;
+export declare function closeModal(): void;
 /**
  * Closes all modals in a specific layer
  */
-export declare function closeModalsByLayer(layer: ModalLayerName): void;
+export declare function closeModalLayer(layer: ModalLayerName): void;
 /**
  * Closes all modals across all layers
  */

package/modal/modal-service.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getModalStackRef = getModalStackRef;
 exports.openModal = openModal;
 exports.closeModal = closeModal;
-exports.closeModalsByLayer = closeModalsByLayer;
+exports.closeModalLayer = closeModalLayer;
 exports.closeAllModals = closeAllModals;
 const react_1 = require("react");
 const modalStackRef = (0, react_1.createRef)();
@@ -23,23 +23,18 @@ function openModal(modal, options) {
     return modalStackRef.current.openInLayer(modal, options);
 }
 /**
- * Closes the topmost modal or a modal in specific layer
+ * Closes the topmost modal (highest z-index)
  */
-function closeModal(layer) {
+function closeModal() {
     if (!modalStackRef.current) {
         return;
     }
-    if (layer) {
-        modalStackRef.current.closeLayer(layer);
-    }
-    else {
-        modalStackRef.current.closeTopmost();
-    }
+    modalStackRef.current.closeTopmost();
 }
 /**
  * Closes all modals in a specific layer
  */
-function closeModalsByLayer(layer) {
+function closeModalLayer(layer) {
     if (!modalStackRef.current) {
         return;
     }

package/modal/modal.stories.js

@@ -129,13 +129,13 @@ function ModalProviderWithLayers() {
                                 react_1.default.createElement("p", { className: "mb-2 text-lg font-bold" }, "Main Layer Modal"),
                                 react_1.default.createElement("p", { className: "mb-4 text-sm text-gray-600" }, "This is in the \"main\" layer (default)"),
                                 react_1.default.createElement("div", { className: "space-y-2" },
-                                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => (0, modal_service_1.closeModal)("main") }, "Close Main Layer"),
+                                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => (0, modal_service_1.closeModalLayer)("main") }, "Close Main Layer"),
                                     react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => (0, modal_service_1.openModal)({
                                             children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "sm" },
                                                 react_1.default.createElement("div", { className: "p-4" },
                                                     react_1.default.createElement("p", { className: "mb-2 text-lg font-bold" }, "Confirmation Layer"),
                                                     react_1.default.createElement("p", { className: "mb-4 text-sm text-gray-600" }, "This is in the \"confirmation\" layer (above main)"),
-                                                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => (0, modal_service_1.closeModal)("confirm") }, "Close Confirmation")))),
+                                                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: () => (0, modal_service_1.closeModalLayer)("confirm") }, "Close Confirmation")))),
                                         }, { layer: "confirm" }) }, "Open Confirmation Layer"))))),
                     }, { layer: "main" }) }, "Open in Main Layer"),
                 react_1.default.createElement(button_1.Button, { onClick: () => {
@@ -144,13 +144,13 @@ function ModalProviderWithLayers() {
                             children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "xl" },
                                 react_1.default.createElement("div", { className: "p-4" },
                                     react_1.default.createElement("p", { className: "mb-2 text-lg font-bold" }, "Main Layer"),
-                                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, "Layer 0 - z-index: 100")))),
+                                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, "Layer: main - z-index: 100")))),
                         }, { layer: "main" });
                         (0, modal_service_1.openModal)({
                             children: (react_1.default.createElement(dialog_1.DialogPanel, { width: "default" },
                                 react_1.default.createElement("div", { className: "p-4" },
                                     react_1.default.createElement("p", { className: "mb-2 text-lg font-bold" }, "Confirmation Layer"),
-                                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, "Layer 1 - z-index: 101")))),
+                                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, "Layer: confirm - z-index: 1000")))),
                         }, { layer: "confirm" });
                     }, variant: "secondary" }, "Open All 2 Layers")),
             react_1.default.createElement("h3", { className: "uxf-typo-h5 mb-2" }, "Default Layer Configuration"),
@@ -160,5 +160,5 @@ function ModalProviderWithLayers() {
                     " z-index 100"),
                 react_1.default.createElement("li", null,
                     react_1.default.createElement("strong", null, "confirm:"),
-                    " z-index 101")))));
+                    " z-index 1000")))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.104.0",
+    "version": "11.105.0",
     "description": "",
     "publishConfig": {
         "access": "public"