@versini/ui-panel 3.4.0 → 3.4.1

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v3.4.0
+  @versini/ui-panel v3.4.1
   © 2025 gizmette.com
 */
 try {
   if (!window.__VERSINI_UI_PANEL__) {
     window.__VERSINI_UI_PANEL__ = {
-      version: "3.4.0",
-      buildTime: "11/04/2025 03:43 PM EST",
+      version: "3.4.1",
+      buildTime: "11/04/2025 04:32 PM EST",
       homepage: "https://github.com/aversini/ui-components",
       license: "MIT",
     };
@@ -18,9 +18,9 @@ try {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ButtonIcon } from "@versini/ui-button";
 import { IconClose } from "@versini/ui-icons";
-import { Modal, ModalClose, ModalContent, ModalDescription, ModalHeading } from "@versini/ui-modal";
-import { useEffect, useRef, useState } from "react";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
 import clsx from "clsx";
+import { cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 ;// CONCATENATED MODULE: ./src/common/constants.ts
 const MESSAGEBOX_CLASSNAME = "av-messagebox";
@@ -32,11 +32,174 @@ const PANEL_CLASSNAME = "av-panel";
 
 ;// CONCATENATED MODULE: external "@versini/ui-icons"
 
-;// CONCATENATED MODULE: external "@versini/ui-modal"
+;// CONCATENATED MODULE: external "@floating-ui/react"
+
+;// CONCATENATED MODULE: external "clsx"
 
 ;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: external "clsx"
+;// CONCATENATED MODULE: ../ui-modal/dist/index.js
+/*!
+  @versini/ui-modal v3.1.0
+  © 2025 gizmette.com
+*/ try {
+    if (!window.__VERSINI_UI_MODAL__) {
+        window.__VERSINI_UI_MODAL__ = {
+            version: "3.1.0",
+            buildTime: "11/04/2025 04:31 PM EST",
+            homepage: "https://github.com/aversini/ui-components",
+            license: "MIT"
+        };
+    }
+} catch (error) {
+// nothing to declare officer
+}
+
+
+
+
+const ModalContext = /*#__PURE__*/ createContext(null);
+function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen } = {}) {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+    const [labelId, setLabelId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
+    /* v8 ignore next 2 */ const open = controlledOpen ?? uncontrolledOpen;
+    const setOpen = setControlledOpen ?? setUncontrolledOpen;
+    const data = useFloating({
+        open,
+        onOpenChange: setOpen
+    });
+    const context = data.context;
+    const click = useClick(context, {
+        enabled: controlledOpen == null
+    });
+    const dismiss = useDismiss(context, {
+        outsidePress: false,
+        outsidePressEvent: "mousedown"
+    });
+    const role = useRole(context);
+    const interactions = useInteractions([
+        click,
+        dismiss,
+        role
+    ]);
+    return useMemo(()=>({
+            open,
+            setOpen,
+            ...interactions,
+            ...data,
+            labelId,
+            descriptionId,
+            setLabelId,
+            setDescriptionId
+        }), [
+        open,
+        setOpen,
+        interactions,
+        data,
+        labelId,
+        descriptionId
+    ]);
+}
+const useModalContext = ()=>{
+    const context = useContext(ModalContext);
+    /* v8 ignore next 3 */ if (context == null) {
+        throw new Error("Modal components must be wrapped in <Modal />");
+    }
+    return context;
+};
+function Modal({ children, ...options }) {
+    const dialog = useModal(options);
+    return /*#__PURE__*/ jsx(ModalContext.Provider, {
+        value: dialog,
+        children: children
+    });
+}
+const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props, propRef) {
+    const { context: floatingContext, ...context } = useModalContext();
+    const ref = useMergeRefs([
+        context.refs.setFloating,
+        propRef
+    ]);
+    /* v8 ignore next 3 */ if (!floatingContext.open) {
+        return null;
+    }
+    const { overlayBackground, ...rest } = props;
+    const overlayClass = clsx("grid place-items-center", {
+        [`${overlayBackground}`]: overlayBackground,
+        "bg-black sm:bg-black/[.8]": !overlayBackground
+    });
+    return /*#__PURE__*/ jsx(FloatingPortal, {
+        children: /*#__PURE__*/ jsx(FloatingOverlay, {
+            className: overlayClass,
+            lockScroll: true,
+            children: /*#__PURE__*/ jsx(FloatingFocusManager, {
+                context: floatingContext,
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: ref,
+                    "aria-labelledby": context.labelId,
+                    "aria-describedby": context.descriptionId,
+                    ...context.getFloatingProps(rest),
+                    children: rest.children
+                })
+            })
+        })
+    });
+});
+const Modal_ModalHeading = /*#__PURE__*/ forwardRef(function ModalHeading({ children, ...props }, ref) {
+    const { setLabelId } = useModalContext();
+    const id = useId();
+    // Only sets `aria-labelledby` on the Modal root element
+    // if this component is mounted inside it.
+    useLayoutEffect(()=>{
+        setLabelId(id);
+        return ()=>setLabelId(undefined);
+    }, [
+        id,
+        setLabelId
+    ]);
+    return /*#__PURE__*/ jsx("h1", {
+        ...props,
+        ref: ref,
+        id: id,
+        children: children
+    });
+});
+const Modal_ModalDescription = /*#__PURE__*/ forwardRef(function ModalDescription({ children, ...props }, ref) {
+    const { setDescriptionId } = useModalContext();
+    const id = useId();
+    // Only sets `aria-describedby` on the Modal root element
+    // if this component is mounted inside it.
+    useLayoutEffect(()=>{
+        setDescriptionId(id);
+        return ()=>setDescriptionId(undefined);
+    }, [
+        id,
+        setDescriptionId
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        id: id,
+        children: children
+    });
+});
+const Modal_ModalClose = /*#__PURE__*/ forwardRef(function ModalClose(props, ref) {
+    const { setOpen } = useModalContext();
+    const { trigger, className, ...rest } = props;
+    const handleClose = useCallback(()=>setOpen(false), [
+        setOpen
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: className,
+        children: /*#__PURE__*/ cloneElement(trigger, {
+            ref,
+            onClick: handleClose,
+            ...rest
+        })
+    });
+});
+/* v8 ignore next 1 */ 
 
 ;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
 
@@ -152,14 +315,14 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         children: open && /*#__PURE__*/ jsx(Modal, {
             open: open,
             onOpenChange: onOpenChange,
-            children: /*#__PURE__*/ jsxs(ModalContent, {
+            children: /*#__PURE__*/ jsxs(Modal_ModalContent, {
                 className: panelClassName.main,
                 style: animationStyles,
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         className: "flex flex-row-reverse items-center justify-between",
                         children: [
-                            /*#__PURE__*/ jsx(ModalClose, {
+                            /*#__PURE__*/ jsx(Modal_ModalClose, {
                                 className: panelClassName.close,
                                 trigger: /*#__PURE__*/ jsx(ButtonIcon, {
                                     mode: "dark",
@@ -171,13 +334,13 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
                                     })
                                 })
                             }),
-                            /*#__PURE__*/ jsx(ModalHeading, {
+                            /*#__PURE__*/ jsx(Modal_ModalHeading, {
                                 className: panelClassName.header,
                                 children: title
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsx(ModalDescription, {
+                    /*#__PURE__*/ jsx(Modal_ModalDescription, {
                         className: panelClassName.content,
                         children: children
                     }),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "3.4.0",
+	"version": "3.4.1",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -37,18 +37,18 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "6.9.1"
+		"@testing-library/jest-dom": "6.9.1",
+		"@versini/ui-modal": "3.1.0"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
 		"@versini/ui-button": "8.3.1",
 		"@versini/ui-icons": "4.15.1",
-		"@versini/ui-modal": "3.1.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
+	"gitHead": "21bcec6f5180d6197a7b9073ccae1035bba245c5"
 }