@versini/ui-panel 8.1.1 → 8.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +51 -22
- package/package.json +6 -3
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-panel v8.1.
|
|
2
|
+
@versini/ui-panel v8.1.2
|
|
3
3
|
© 2025 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
|
|
7
|
+
import { FloatingFocusManager, FloatingNode, FloatingOverlay, FloatingPortal, FloatingTree, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
|
|
8
8
|
import clsx from "clsx";
|
|
9
9
|
import { cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
10
10
|
|
|
@@ -30,7 +30,7 @@ const NONE = "none";
|
|
|
30
30
|
|
|
31
31
|
;// CONCATENATED MODULE: ../ui-modal/dist/index.js
|
|
32
32
|
/*!
|
|
33
|
-
@versini/ui-modal v3.3.
|
|
33
|
+
@versini/ui-modal v3.3.2
|
|
34
34
|
© 2025 gizmette.com
|
|
35
35
|
*/
|
|
36
36
|
|
|
@@ -43,7 +43,10 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
|
|
|
43
43
|
const [descriptionId, setDescriptionId] = useState();
|
|
44
44
|
/* v8 ignore start */ const open = controlledOpen ?? uncontrolledOpen;
|
|
45
45
|
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
|
46
|
-
/* v8 ignore stop */
|
|
46
|
+
/* v8 ignore stop */ // Subscribe this modal to the FloatingTree for nested modal support
|
|
47
|
+
const nodeId = useFloatingNodeId();
|
|
48
|
+
const data = useFloating({
|
|
49
|
+
nodeId,
|
|
47
50
|
open,
|
|
48
51
|
onOpenChange: setOpen
|
|
49
52
|
});
|
|
@@ -53,7 +56,10 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
|
|
|
53
56
|
});
|
|
54
57
|
const dismiss = useDismiss(context, {
|
|
55
58
|
outsidePress: false,
|
|
56
|
-
outsidePressEvent: "mousedown"
|
|
59
|
+
outsidePressEvent: "mousedown",
|
|
60
|
+
bubbles: {
|
|
61
|
+
escapeKey: false
|
|
62
|
+
}
|
|
57
63
|
});
|
|
58
64
|
const role = useRole(context);
|
|
59
65
|
const interactions = useInteractions([
|
|
@@ -70,7 +76,8 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
|
|
|
70
76
|
descriptionId,
|
|
71
77
|
setLabelId,
|
|
72
78
|
setDescriptionId,
|
|
73
|
-
initialFocus
|
|
79
|
+
initialFocus,
|
|
80
|
+
nodeId
|
|
74
81
|
}), [
|
|
75
82
|
open,
|
|
76
83
|
setOpen,
|
|
@@ -78,7 +85,8 @@ function useModal({ initialOpen = false, open: controlledOpen, onOpenChange: set
|
|
|
78
85
|
data,
|
|
79
86
|
labelId,
|
|
80
87
|
descriptionId,
|
|
81
|
-
initialFocus
|
|
88
|
+
initialFocus,
|
|
89
|
+
nodeId
|
|
82
90
|
]);
|
|
83
91
|
}
|
|
84
92
|
const useModalContext = ()=>{
|
|
@@ -88,15 +96,33 @@ const useModalContext = ()=>{
|
|
|
88
96
|
}
|
|
89
97
|
/* v8 ignore stop */ return context;
|
|
90
98
|
};
|
|
91
|
-
function
|
|
99
|
+
function ModalComponent({ children, ...options }) {
|
|
92
100
|
const dialog = useModal(options);
|
|
93
101
|
return /*#__PURE__*/ jsx(ModalContext.Provider, {
|
|
94
102
|
value: dialog,
|
|
95
103
|
children: children
|
|
96
104
|
});
|
|
97
105
|
}
|
|
106
|
+
/**
|
|
107
|
+
* Modal component that supports proper nesting with ESC key handling.
|
|
108
|
+
* Automatically wraps root modals in FloatingTree for nested modal support.
|
|
109
|
+
*/ function Modal(props) {
|
|
110
|
+
const parentId = useFloatingParentNodeId();
|
|
111
|
+
// If this is a root modal (no parent), wrap with FloatingTree
|
|
112
|
+
if (parentId === null) {
|
|
113
|
+
return /*#__PURE__*/ jsx(FloatingTree, {
|
|
114
|
+
children: /*#__PURE__*/ jsx(ModalComponent, {
|
|
115
|
+
...props
|
|
116
|
+
})
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
// Nested modal - FloatingTree already exists
|
|
120
|
+
return /*#__PURE__*/ jsx(ModalComponent, {
|
|
121
|
+
...props
|
|
122
|
+
});
|
|
123
|
+
}
|
|
98
124
|
const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props, propRef) {
|
|
99
|
-
const { context: floatingContext, ...context } = useModalContext();
|
|
125
|
+
const { context: floatingContext, nodeId, ...context } = useModalContext();
|
|
100
126
|
const ref = useMergeRefs([
|
|
101
127
|
context.refs.setFloating,
|
|
102
128
|
propRef
|
|
@@ -109,19 +135,22 @@ const Modal_ModalContent = /*#__PURE__*/ forwardRef(function ModalContent(props,
|
|
|
109
135
|
[`${overlayBackground}`]: overlayBackground,
|
|
110
136
|
"bg-black sm:bg-black/[.8]": !overlayBackground
|
|
111
137
|
});
|
|
112
|
-
return /*#__PURE__*/ jsx(
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
"
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
138
|
+
return /*#__PURE__*/ jsx(FloatingNode, {
|
|
139
|
+
id: nodeId,
|
|
140
|
+
children: /*#__PURE__*/ jsx(FloatingPortal, {
|
|
141
|
+
children: /*#__PURE__*/ jsx(FloatingOverlay, {
|
|
142
|
+
className: overlayClass,
|
|
143
|
+
lockScroll: true,
|
|
144
|
+
children: /*#__PURE__*/ jsx(FloatingFocusManager, {
|
|
145
|
+
context: floatingContext,
|
|
146
|
+
initialFocus: context.initialFocus,
|
|
147
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
148
|
+
ref: ref,
|
|
149
|
+
"aria-labelledby": context.labelId,
|
|
150
|
+
"aria-describedby": context.descriptionId,
|
|
151
|
+
...context.getFloatingProps(rest),
|
|
152
|
+
children: rest.children
|
|
153
|
+
})
|
|
125
154
|
})
|
|
126
155
|
})
|
|
127
156
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-panel",
|
|
3
|
-
"version": "8.1.
|
|
3
|
+
"version": "8.1.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -43,15 +43,18 @@
|
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@testing-library/jest-dom": "6.9.1",
|
|
46
|
-
"@versini/ui-modal": "3.3.
|
|
46
|
+
"@versini/ui-modal": "3.3.2"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@tailwindcss/typography": "0.5.19",
|
|
50
50
|
"clsx": "2.1.1",
|
|
51
51
|
"tailwindcss": "4.1.18"
|
|
52
52
|
},
|
|
53
|
+
"peerDependencies": {
|
|
54
|
+
"@floating-ui/react": ">=0.27.0"
|
|
55
|
+
},
|
|
53
56
|
"sideEffects": [
|
|
54
57
|
"**/*.css"
|
|
55
58
|
],
|
|
56
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "8840cff6a204379e7da9fd65494e5ea280cfc7ab"
|
|
57
60
|
}
|