@versini/ui-panel 8.1.1 → 8.1.3

package/dist/index.js

@@ -1,12 +1,12 @@
 /*!
-  @versini/ui-panel v8.1.1
+  @versini/ui-panel v8.1.3
   © 2025 gizmette.com
 */
 
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
+import { Modal, ModalClose, ModalContent, ModalDescription, ModalHeading } from "@versini/ui-modal";
+import { useEffect, useRef, useState } from "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";
@@ -22,165 +22,11 @@ const NONE = "none";
 
 ;// CONCATENATED MODULE: external "react/jsx-runtime"
 
-;// CONCATENATED MODULE: external "@floating-ui/react"
-
-;// CONCATENATED MODULE: external "clsx"
+;// CONCATENATED MODULE: external "@versini/ui-modal"
 
 ;// CONCATENATED MODULE: external "react"
 
-;// CONCATENATED MODULE: ../ui-modal/dist/index.js
-/*!
-  @versini/ui-modal v3.3.1
-  © 2025 gizmette.com
-*/ 
-
-
-
-const ModalContext = /*#__PURE__*/ createContext(null);
-function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen, initialFocus } = {}) {
-    const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
-    const [labelId, setLabelId] = useState();
-    const [descriptionId, setDescriptionId] = useState();
-    /* v8 ignore start */ const open = controlledOpen ?? uncontrolledOpen;
-    const setOpen = setControlledOpen ?? setUncontrolledOpen;
-    /* v8 ignore stop */ 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,
-            initialFocus
-        }), [
-        open,
-        setOpen,
-        interactions,
-        data,
-        labelId,
-        descriptionId,
-        initialFocus
-    ]);
-}
-const useModalContext = ()=>{
-    const context = useContext(ModalContext);
-    /* v8 ignore start */ if (context == null) {
-        throw new Error("Modal components must be wrapped in <Modal />");
-    }
-    /* v8 ignore stop */ 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 start */ if (!floatingContext.open) {
-        return null;
-    }
-    /* v8 ignore stop */ 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,
-                initialFocus: context.initialFocus,
-                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 start */ /* v8 ignore stop */ 
+;// CONCATENATED MODULE: external "clsx"
 
 ;// CONCATENATED MODULE: ./src/components/Panel/utilities.ts
 
@@ -282,9 +128,8 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
         hasFooter: Boolean(footer)
     });
     /**
-	 * If the panel is opened, set the document
-	 * title to the panel's title. If it's closed,
-	 * restore the original document.title.
+	 * If the panel is opened, set the document title to the panel's title. If it's
+	 * closed, restore the original document.title.
 	 */ /* v8 ignore start - document title manipulation */ useEffect(()=>{
         if (open) {
             originalTitleRef.current = document.title;
@@ -311,9 +156,10 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
             } : {
                 transform: "translateY(-666vh)"
             });
-            // Small delay to ensure the opening state is applied after
-            // the component is rendered.
-            const timer = setTimeout(()=>{
+            /**
+			 * Small delay to ensure the opening state is applied after the component is
+			 * rendered.
+			 */ const timer = setTimeout(()=>{
                 setAnimationStyles(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
                     opacity: 1
                 } : {
@@ -332,18 +178,18 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
             open: open,
             onOpenChange: onOpenChange,
             initialFocus: initialFocus,
-            children: /*#__PURE__*/ jsx(Modal_ModalContent, {
+            children: /*#__PURE__*/ jsx(ModalContent, {
                 className: panelClassName.outerWrapper,
                 style: {
                     ...animationStyles
                 },
-                children: /*#__PURE__*/ jsxs(Modal_ModalDescription, {
+                children: /*#__PURE__*/ jsxs(ModalDescription, {
                     className: panelClassName.innerWrapper,
                     children: [
                         /*#__PURE__*/ jsxs("div", {
                             className: panelClassName.header,
                             children: [
-                                /*#__PURE__*/ jsx(Modal_ModalClose, {
+                                /*#__PURE__*/ jsx(ModalClose, {
                                     className: panelClassName.closeWrapper,
                                     trigger: /*#__PURE__*/ jsx("button", {
                                         className: panelClassName.closeButton,
@@ -366,7 +212,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ jsx(Modal_ModalHeading, {
+                                /*#__PURE__*/ jsx(ModalHeading, {
                                     className: panelClassName.title,
                                     children: title
                                 })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-panel",
-	"version": "8.1.1",
+	"version": "8.1.3",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -42,16 +42,19 @@
 		"test": "vitest run"
 	},
 	"devDependencies": {
-		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-modal": "3.3.1"
+		"@testing-library/jest-dom": "6.9.1"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
+		"@versini/ui-modal": "3.3.2",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.18"
 	},
+	"peerDependencies": {
+		"@floating-ui/react": ">=0.27.0"
+	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "a3730974df8fcea3c016bd83844c4243dbb10208"
+	"gitHead": "b356a479b6ee29fd3d3dbabc59658ebdac6255d1"
 }