@versini/ui-modal 3.0.1 → 3.1.0

package/dist/index.d.ts

@@ -1,19 +1,40 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ModalTypes } from '@versini/ui-types';
-import * as React from 'react';
-
-declare function Modal({ children, ...options }: {
-    children: React.ReactNode;
-} & ModalTypes.Options): react_jsx_runtime.JSX.Element;
-type overlayBackgroundProps = {
-    overlayBackground?: string;
-};
-declare const ModalContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & overlayBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ModalHeading: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-declare const ModalDescription: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-declare const ModalClose: React.ForwardRefExoticComponent<{
-    trigger: React.ReactElement;
-    className?: string;
-} & React.RefAttributes<HTMLButtonElement>>;
-
-export { Modal, ModalClose, ModalContent, ModalDescription, ModalHeading };
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare function Modal({ children, ...options }: {
+    children: React_2.ReactNode;
+} & ModalTypes.Options): JSX.Element;
+
+export declare const ModalClose: React_2.ForwardRefExoticComponent<{
+    trigger: React_2.ReactElement;
+    className?: string;
+} & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare const ModalContent: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLProps<HTMLDivElement> & overlayBackgroundProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const ModalDescription: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLProps<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
+
+export declare const ModalHeading: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLProps<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
+
+declare namespace ModalTypes {
+    	type Options = {
+        		initialOpen?: boolean;
+        		onOpenChange?: (open: boolean) => void;
+        		open?: boolean;
+        	};
+
+    	type Context =
+    		| (ReturnType<Options> & {
+        				setDescriptionId: React.Dispatch<
+        					React.SetStateAction<string | undefined>
+        				>;
+        				setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+        		  })
+    		| null;
+}
+
+declare type overlayBackgroundProps = {
+    overlayBackground?: string;
+};
+
+export { }

package/dist/index.js

@@ -1,21 +1,192 @@
-import { Modal as _, ModalClose as n, ModalContent as t, ModalDescription as a, ModalHeading as d } from "./components/Modal/Modal.js";
 /*!
-  @versini/ui-modal v3.0.1
+  @versini/ui-modal v3.1.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_MODAL__ || (window.__VERSINI_UI_MODAL__ = {
-    version: "3.0.1",
-    buildTime: "09/01/2025 04:01 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_MODAL__) {
+    window.__VERSINI_UI_MODAL__ = {
+      version: "3.1.0",
+      buildTime: "11/04/2025 03:43 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  _ as Modal,
-  n as ModalClose,
-  t as ModalContent,
-  a as ModalDescription,
-  d as ModalHeading
+
+import { jsx } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
+import clsx from "clsx";
+import { cloneElement, createContext, forwardRef, useCallback, useContext, useId, useLayoutEffect, useMemo, useState } from "react";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@floating-ui/react"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: ./src/components/Modal/ModalContext.tsx
+
+const ModalContext = /*#__PURE__*/ createContext(null);
+
+;// CONCATENATED MODULE: ./src/components/Modal/ModalHooks.tsx
+
+
+
+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;
 };
+
+;// CONCATENATED MODULE: ./src/components/Modal/Modal.tsx
+
+
+
+
+
+
+
+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
+        })
+    });
+});
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+/* v8 ignore next 1 */ 
+
+export { Modal, Modal_ModalClose as ModalClose, Modal_ModalContent as ModalContent, Modal_ModalDescription as ModalDescription, Modal_ModalHeading as ModalHeading };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-modal",
-	"version": "3.0.1",
+	"version": "3.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,24 +20,20 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
 		"start": "static-server dist --port 5173"
 	},
-	"peerDependencies": {
-		"react": "^19.1.0",
-		"react-dom": "^19.1.0"
-	},
 	"devDependencies": {
-		"@versini/ui-types": "6.0.1"
+		"@versini/ui-types": "6.0.2"
 	},
 	"dependencies": {
 		"@floating-ui/react": "0.27.16",
@@ -46,5 +42,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "dcc216644c8c3e7d43a49ea655a22aed21fa4b83"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/components/Modal/Modal.js

@@ -1,53 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useMergeRefs as m, FloatingPortal as g, FloatingOverlay as p, FloatingFocusManager as M } from "@floating-ui/react";
-import b from "clsx";
-import * as a from "react";
-import { useId as f } from "react";
-import { ModalContext as C } from "./ModalContext.js";
-import { useModalContext as d, useModal as v } from "./ModalHooks.js";
-function I({
-  children: s,
-  ...t
-}) {
-  const n = v(t);
-  return /* @__PURE__ */ l(C.Provider, { value: n, children: s });
-}
-const w = a.forwardRef(function(t, n) {
-  const { context: r, ...o } = d(), e = m([o.refs.setFloating, n]);
-  if (!r.open)
-    return null;
-  const { overlayBackground: c, ...i } = t, u = b("grid place-items-center", {
-    [`${c}`]: c,
-    "bg-black sm:bg-black/[.8]": !c
-  });
-  return /* @__PURE__ */ l(g, { children: /* @__PURE__ */ l(p, { className: u, lockScroll: !0, children: /* @__PURE__ */ l(M, { context: r, children: /* @__PURE__ */ l(
-    "div",
-    {
-      ref: e,
-      "aria-labelledby": o.labelId,
-      "aria-describedby": o.descriptionId,
-      ...o.getFloatingProps(i),
-      children: i.children
-    }
-  ) }) }) });
-}), D = a.forwardRef(function({ children: t, ...n }, r) {
-  const { setLabelId: o } = d(), e = f();
-  return a.useLayoutEffect(() => (o(e), () => o(void 0)), [e, o]), /* @__PURE__ */ l("h1", { ...n, ref: r, id: e, children: t });
-}), E = a.forwardRef(function({ children: t, ...n }, r) {
-  const { setDescriptionId: o } = d(), e = f();
-  return a.useLayoutEffect(() => (o(e), () => o(void 0)), [e, o]), /* @__PURE__ */ l("div", { ...n, ref: r, id: e, children: t });
-}), L = a.forwardRef(function(t, n) {
-  const { setOpen: r } = d(), { trigger: o, className: e, ...c } = t, i = a.useCallback(() => r(!1), [r]);
-  return /* @__PURE__ */ l("div", { className: e, children: a.cloneElement(o, {
-    ref: n,
-    onClick: i,
-    ...c
-  }) });
-});
-export {
-  I as Modal,
-  L as ModalClose,
-  w as ModalContent,
-  E as ModalDescription,
-  D as ModalHeading
-};

package/dist/components/Modal/ModalContext.js

@@ -1,5 +0,0 @@
-import * as t from "react";
-const o = t.createContext(null);
-export {
-  o as ModalContext
-};

package/dist/components/Modal/ModalHooks.js

@@ -1,41 +0,0 @@
-import { useFloating as I, useClick as b, useDismiss as w, useRole as O, useInteractions as g } from "@floating-ui/react";
-import * as e from "react";
-import { ModalContext as h } from "./ModalContext.js";
-function D({
-  initialOpen: t = !1,
-  open: r,
-  onOpenChange: u
-} = {}) {
-  const [d, p] = e.useState(t), [a, m] = e.useState(), [i, f] = e.useState(), o = r ?? d, n = u ?? p, s = I({
-    open: o,
-    onOpenChange: n
-  }), c = s.context, x = b(c, {
-    enabled: r == null
-  }), C = w(c, {
-    outsidePress: !1,
-    outsidePressEvent: "mousedown"
-  }), M = O(c), l = g([x, C, M]);
-  return e.useMemo(
-    () => ({
-      open: o,
-      setOpen: n,
-      ...l,
-      ...s,
-      labelId: a,
-      descriptionId: i,
-      setLabelId: m,
-      setDescriptionId: f
-    }),
-    [o, n, l, s, a, i]
-  );
-}
-const E = () => {
-  const t = e.useContext(h);
-  if (t == null)
-    throw new Error("Modal components must be wrapped in <Modal />");
-  return t;
-};
-export {
-  D as useModal,
-  E as useModalContext
-};