@versini/ui-dialog 8.0.6 → 8.0.7
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 +26 -26
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
@versini/ui-dialog v8.0.
|
|
2
|
+
@versini/ui-dialog v8.0.7
|
|
3
3
|
© 2025 gizmette.com
|
|
4
4
|
*/
|
|
5
5
|
try {
|
|
6
6
|
if (!window.__VERSINI_UI_DIALOG__) {
|
|
7
7
|
window.__VERSINI_UI_DIALOG__ = {
|
|
8
|
-
version: "8.0.
|
|
9
|
-
buildTime: "12/
|
|
8
|
+
version: "8.0.7",
|
|
9
|
+
buildTime: "12/24/2025 09:21 AM EST",
|
|
10
10
|
homepage: "https://www.npmjs.com/package/@versini/ui-dialog",
|
|
11
11
|
license: "MIT",
|
|
12
12
|
};
|
|
@@ -192,16 +192,16 @@ const NONE = "none";
|
|
|
192
192
|
* Get all focusable elements within the dialog. Excludes focus sentinel
|
|
193
193
|
* elements used for circular focus trapping.
|
|
194
194
|
*/ const getFocusableElements = useCallback(()=>{
|
|
195
|
-
/*
|
|
195
|
+
/* v8 ignore start - defensive check, dialogRef is always set when open */ if (!dialogRef.current) {
|
|
196
196
|
return [];
|
|
197
197
|
}
|
|
198
|
-
const elements = dialogRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
|
|
198
|
+
/* v8 ignore stop */ const elements = dialogRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
|
|
199
199
|
return Array.from(elements).filter((el)=>el.offsetParent !== null && // Filter out hidden elements
|
|
200
200
|
!el.hasAttribute("data-focus-sentinel"));
|
|
201
201
|
}, []);
|
|
202
202
|
/**
|
|
203
203
|
* Focus a specific element by index, or the element referenced by a ref.
|
|
204
|
-
*/ const focusElement = useCallback((target)=>{
|
|
204
|
+
*/ /* v8 ignore start - focus element logic with multiple branches */ const focusElement = useCallback((target)=>{
|
|
205
205
|
if (typeof target === "number") {
|
|
206
206
|
if (target === -1) {
|
|
207
207
|
// -1 means don't focus anything.
|
|
@@ -218,7 +218,7 @@ const NONE = "none";
|
|
|
218
218
|
}, [
|
|
219
219
|
getFocusableElements
|
|
220
220
|
]);
|
|
221
|
-
/**
|
|
221
|
+
/* v8 ignore stop */ /**
|
|
222
222
|
* Handle the native cancel event (fired when ESC is pressed). This replaces
|
|
223
223
|
* the custom keydown handler since the native dialog handles ESC
|
|
224
224
|
* automatically.
|
|
@@ -244,11 +244,11 @@ const NONE = "none";
|
|
|
244
244
|
return;
|
|
245
245
|
}
|
|
246
246
|
const focusableElements = getFocusableElements();
|
|
247
|
-
/*
|
|
247
|
+
/* v8 ignore start - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
|
|
248
248
|
event.preventDefault();
|
|
249
249
|
return;
|
|
250
250
|
}
|
|
251
|
-
const firstElement = focusableElements[0];
|
|
251
|
+
/* v8 ignore stop */ const firstElement = focusableElements[0];
|
|
252
252
|
const lastElement = focusableElements[focusableElements.length - 1];
|
|
253
253
|
const activeElement = document.activeElement;
|
|
254
254
|
// Find the current index of the focused element.
|
|
@@ -284,7 +284,7 @@ const NONE = "none";
|
|
|
284
284
|
* programmatic focus operations (e.g., when a nested dialog closes and returns
|
|
285
285
|
* focus to its trigger element).
|
|
286
286
|
*
|
|
287
|
-
*/ /* v8 ignore
|
|
287
|
+
*/ /* v8 ignore start - focus escape handling for iPad Safari, hard to test in jsdom */ const handleFocusIn = useCallback((event)=>{
|
|
288
288
|
// Ignore focus changes triggered by programmatic focus operations.
|
|
289
289
|
if (shouldIgnoreFocusChanges()) {
|
|
290
290
|
return;
|
|
@@ -300,28 +300,28 @@ const NONE = "none";
|
|
|
300
300
|
}, [
|
|
301
301
|
getFocusableElements
|
|
302
302
|
]);
|
|
303
|
-
/**
|
|
303
|
+
/* v8 ignore stop */ /**
|
|
304
304
|
* Handle clicks on the backdrop (the area outside the dialog content). Native
|
|
305
305
|
* dialog doesn't provide backdrop click handling, so we use the dialog
|
|
306
306
|
* element's click event and check if the click target is the dialog itself
|
|
307
307
|
* (not a child element).
|
|
308
|
-
*/ /* v8 ignore
|
|
308
|
+
*/ /* v8 ignore start - backdrop clicks are disabled by design in current implementation */ const handleDialogClick = useCallback((_event)=>{
|
|
309
309
|
/**
|
|
310
310
|
* If the click is directly on the dialog element (the backdrop area), not on
|
|
311
311
|
* any child element, then close the dialog. Currently disabled -
|
|
312
312
|
* outsidePress is false by design. if (_event.target === dialogRef.current)
|
|
313
313
|
* { onClose(); }
|
|
314
314
|
*/ }, []);
|
|
315
|
-
/**
|
|
315
|
+
/* v8 ignore stop */ /**
|
|
316
316
|
* Focus sentinel handler - when a sentinel element receives focus, redirect
|
|
317
317
|
* focus to the appropriate element inside the dialog. This handles iPad
|
|
318
318
|
* Safari's Tab key behavior which can bypass event listeners.
|
|
319
319
|
*/ const handleSentinelFocus = useCallback((position)=>{
|
|
320
320
|
const focusableElements = getFocusableElements();
|
|
321
|
-
/*
|
|
321
|
+
/* v8 ignore start - edge case: dialog with no focusable elements */ if (focusableElements.length === 0) {
|
|
322
322
|
return;
|
|
323
323
|
}
|
|
324
|
-
if (position === "start") {
|
|
324
|
+
/* v8 ignore stop */ if (position === "start") {
|
|
325
325
|
// Focus came from the end, wrap to last element.
|
|
326
326
|
focusableElements[focusableElements.length - 1]?.focus();
|
|
327
327
|
} else {
|
|
@@ -334,12 +334,12 @@ const NONE = "none";
|
|
|
334
334
|
/**
|
|
335
335
|
* Effect to show/hide the dialog and manage focus. Uses the dialog stack
|
|
336
336
|
* manager to coordinate listeners between nested dialogs.
|
|
337
|
-
*/ useEffect(()=>{
|
|
337
|
+
*/ /* v8 ignore start - complex dialog lifecycle management */ useEffect(()=>{
|
|
338
338
|
const dialog = dialogRef.current;
|
|
339
|
-
/*
|
|
339
|
+
/* v8 ignore start - defensive check */ if (!dialog) {
|
|
340
340
|
return;
|
|
341
341
|
}
|
|
342
|
-
// Store the currently focused element to restore later.
|
|
342
|
+
/* v8 ignore stop */ // Store the currently focused element to restore later.
|
|
343
343
|
previouslyFocusedRef.current = document.activeElement;
|
|
344
344
|
// Show the dialog as a modal.
|
|
345
345
|
if (!dialog.open) {
|
|
@@ -406,10 +406,10 @@ const NONE = "none";
|
|
|
406
406
|
initialFocus,
|
|
407
407
|
focusElement
|
|
408
408
|
]);
|
|
409
|
-
/*
|
|
409
|
+
/* v8 ignore stop */ /* v8 ignore start - early return when panel is closed */ if (!open) {
|
|
410
410
|
return null;
|
|
411
411
|
}
|
|
412
|
-
const isMessageBox = kind === TYPE_MESSAGEBOX;
|
|
412
|
+
/* v8 ignore stop */ const isMessageBox = kind === TYPE_MESSAGEBOX;
|
|
413
413
|
const dialogClass = clsx(/**
|
|
414
414
|
* Center the dialog on screen with fixed positioning. Native dialog uses
|
|
415
415
|
* position: fixed by default.
|
|
@@ -563,12 +563,12 @@ const getPanelClassName = ({ className, kind, borderMode, animation, maxWidth =
|
|
|
563
563
|
|
|
564
564
|
const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "light", kind = /* inlined export .TYPE_PANEL */ ("panel"), className, animation = false, animationType = /* inlined export .ANIMATION_SLIDE */ ("slide"), maxWidth = /* inlined export .MEDIUM */ ("medium"), maxHeight, blurEffect = /* inlined export .NONE */ ("none"), initialFocus })=>{
|
|
565
565
|
const originalTitleRef = useRef("");
|
|
566
|
-
/* v8 ignore
|
|
566
|
+
/* v8 ignore start */ const [animationStyles, setAnimationStyles] = useState(!animation ? {} : animationType === /* inlined export .ANIMATION_FADE */ ("fade") ? {
|
|
567
567
|
opacity: 0
|
|
568
568
|
} : {
|
|
569
569
|
transform: "translateY(-100vh)"
|
|
570
570
|
});
|
|
571
|
-
const panelClassName = getPanelClassName({
|
|
571
|
+
/* v8 ignore stop */ const panelClassName = getPanelClassName({
|
|
572
572
|
className,
|
|
573
573
|
kind,
|
|
574
574
|
borderMode,
|
|
@@ -588,7 +588,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
|
|
|
588
588
|
/**
|
|
589
589
|
* If the panel is opened, set the document title to the panel's title. If it's
|
|
590
590
|
* closed, restore the original document.title.
|
|
591
|
-
*/ useEffect(()=>{
|
|
591
|
+
*/ /* v8 ignore start - document title manipulation */ useEffect(()=>{
|
|
592
592
|
if (open) {
|
|
593
593
|
originalTitleRef.current = document.title;
|
|
594
594
|
document.title = `${title} | ${originalTitleRef.current}`;
|
|
@@ -602,9 +602,9 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
|
|
|
602
602
|
title,
|
|
603
603
|
open
|
|
604
604
|
]);
|
|
605
|
-
/**
|
|
605
|
+
/* v8 ignore stop */ /**
|
|
606
606
|
* Effect to handle the opening and closing animations.
|
|
607
|
-
*/ /* v8 ignore
|
|
607
|
+
*/ /* v8 ignore start */ useEffect(()=>{
|
|
608
608
|
if (!animation) {
|
|
609
609
|
return;
|
|
610
610
|
}
|
|
@@ -631,7 +631,7 @@ const Panel = ({ open, onOpenChange, title, children, footer, borderMode = "ligh
|
|
|
631
631
|
animation,
|
|
632
632
|
animationType
|
|
633
633
|
]);
|
|
634
|
-
return /*#__PURE__*/ jsx(PanelPortal, {
|
|
634
|
+
/* v8 ignore stop */ return /*#__PURE__*/ jsx(PanelPortal, {
|
|
635
635
|
open: open,
|
|
636
636
|
onClose: handleClose,
|
|
637
637
|
className: panelClassName.outerWrapper,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versini/ui-dialog",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.7",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Arno Versini",
|
|
6
6
|
"publishConfig": {
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"sideEffects": [
|
|
53
53
|
"**/*.css"
|
|
54
54
|
],
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "7b2640a0650a4c3aa6ca078888f765cb400f9f13"
|
|
56
56
|
}
|