npm - @aurora-ds/components - Versions diffs - 1.7.16 → 1.7.17 - Mend

@aurora-ds/components 1.7.16 → 1.7.17

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.

Files changed (6) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -3749,33 +3749,90 @@ const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom',
     return { panelRef, style, activeDescendant, setChildOpen };
 };
+/** Returns the visible scrollbar width (0 with overlay/inset scrollbars like macOS). */
+const getScrollbarWidth = () => window.innerWidth - document.documentElement.clientWidth;
 /**
- * Locks scrolling on `document.body` while `active` is true.
+ * Returns every element that is currently scrollable, skipping entire subtrees
+ * rooted at `[data-scroll-lock-ignore]` (overlays: menus, dialogs, drawers…).
  *
- * Preserves the current scroll position and keeps the scrollbar gutter
- * (`overflow-y: scroll`) to avoid horizontal layout shift when the scrollbar
- * disappears. The original styles and scroll position are restored on cleanup.
+ * Uses a TreeWalker so ignored subtrees are never visited at all.
+ * `getComputedStyle` is called only for elements whose scroll dimensions already
+ * confirm overflow — avoiding expensive style recalculation for every node.
  *
- * @example useBodyScrollLock(isDialogOpen)
+ * `<html>` is checked separately; its computed `overflow` is often `'visible'`
+ * even when the full page scrolls.
+ */
+const getScrollableElements = () => {
+    const scrollable = [];
+    // Document-level scroll lives on <html>.
+    if (document.documentElement.scrollHeight > window.innerHeight) {
+        scrollable.push(document.documentElement);
+    }
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
+        acceptNode(node) {
+            const el = node;
+            // Reject entire overlay subtrees in one step (menus, dialogs, drawers…).
+            if (el.hasAttribute('data-scroll-lock-ignore')) {
+                return NodeFilter.FILTER_REJECT;
+            }
+            // Cheap dimension pre-check — skips getComputedStyle for most nodes.
+            const mayScrollY = el.scrollHeight > el.clientHeight;
+            const mayScrollX = el.scrollWidth > el.clientWidth;
+            if (!mayScrollY && !mayScrollX) {
+                return NodeFilter.FILTER_SKIP;
+            }
+            // Confirm that overflow is actually set to scroll/auto.
+            const { overflowY, overflowX } = window.getComputedStyle(el);
+            const scrollsY = mayScrollY && (overflowY === 'scroll' || overflowY === 'auto');
+            const scrollsX = mayScrollX && (overflowX === 'scroll' || overflowX === 'auto');
+            return scrollsY || scrollsX ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        },
+    });
+    let node;
+    while ((node = walker.nextNode())) {
+        scrollable.push(node);
+    }
+    return scrollable;
+};
+/**
+ * Locks **all** currently scrollable elements while `active` is true.
+ *
+ * Instead of assuming the scroll lives on `document.body`, this hook discovers
+ * every element with real overflow and freezes it with `overflow: hidden`.
+ * Elements marked `data-scroll-lock-ignore` — and their entire subtrees — are
+ * skipped so overlays (menus, dialogs, drawers…) remain scrollable internally.
+ *
+ * For `<html>`, `paddingRight` is compensated when a native scrollbar is present
+ * to prevent horizontal layout shift.
+ *
+ * All original styles are restored on cleanup.
+ *
+ * @example useBodyScrollLock(isMenuOpen)
  */
 const useBodyScrollLock = (active) => {
     useEffect(() => {
         if (!active) {
             return;
         }
-        const scrollY = window.scrollY;
-        const body = document.body;
-        body.style.position = 'fixed';
-        body.style.top = `-${scrollY}px`;
-        body.style.overflowY = 'scroll';
-        body.style.width = '100%';
-        return () => {
-            body.style.position = '';
-            body.style.top = '';
-            body.style.overflowY = '';
-            body.style.width = '';
-            window.scrollTo(0, scrollY);
-        };
+        const scrollbarWidth = getScrollbarWidth();
+        const elements = getScrollableElements();
+        const restorers = elements.map((el) => {
+            const savedOverflow = el.style.overflow;
+            const savedPaddingRight = el.style.paddingRight;
+            el.style.overflow = 'hidden';
+            // Preserve the scrollbar gutter on the document root.
+            if (el === document.documentElement && scrollbarWidth > 0) {
+                const currentPadding = parseFloat(window.getComputedStyle(el).paddingRight) || 0;
+                el.style.paddingRight = `${currentPadding + scrollbarWidth}px`;
+            }
+            return () => {
+                el.style.overflow = savedOverflow;
+                if (el === document.documentElement && scrollbarWidth > 0) {
+                    el.style.paddingRight = savedPaddingRight;
+                }
+            };
+        });
+        return () => restorers.forEach((restore) => restore());
     }, [active]);
 };
@@ -3808,7 +3865,7 @@ const MenuPanel = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', pla
     if (!open) {
         return null;
     }
-    return createPortal(jsxs(MenuContext.Provider, { value: contextValue, children: [!isSubmenu && (jsx("div", { className: MENU_PANEL_STYLES.backdrop, onClick: onClose, "aria-hidden": true })), jsx("div", { ref: panelRef, id: id, role: role, tabIndex: -1, "data-menu-panel": true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-activedescendant": activeDescendant, className: MENU_PANEL_STYLES.panel, style: { ...style, maxHeight, outline: 'none' }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children })] }), document.body);
+    return createPortal(jsxs(MenuContext.Provider, { value: contextValue, children: [!isSubmenu && (jsx("div", { className: MENU_PANEL_STYLES.backdrop, onClick: onClose, "aria-hidden": true })), jsx("div", { ref: panelRef, id: id, role: role, tabIndex: -1, "data-menu-panel": true, "data-scroll-lock-ignore": true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-activedescendant": activeDescendant, className: MENU_PANEL_STYLES.panel, style: { ...style, maxHeight, outline: 'none' }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children })] }), document.body);
 };
 MenuPanel.displayName = 'MenuPanel';
@@ -3955,14 +4012,15 @@ const useMenuItem = ({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, }
 const MENU_ITEM_STYLES = createStyles((theme) => {
     const c = theme.colors;
     return {
-        root: {
+        root: ({ size }) => ({
             display: 'flex',
             alignItems: 'center',
             gap: theme.spacing.sm,
-            paddingTop: theme.spacing.xs,
-            paddingBottom: theme.spacing.xs,
             paddingLeft: theme.spacing.md,
             paddingRight: theme.spacing.md,
+            ...(size === 'default'
+                ? { height: DEFAULT_DRAWER_ITEM_SIZE }
+                : { paddingTop: theme.spacing.xs, paddingBottom: theme.spacing.xs }),
             cursor: 'pointer',
             userSelect: 'none',
             color: c.textPrimary,
@@ -3990,7 +4048,7 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
             ':active:not([data-disabled])': {
                 backgroundColor: c.defaultSubtleActive,
             },
-        },
+        }),
         /** Fixed-width leading slot keeping labels aligned for checkbox/radio items. */
         indicator: {
             display: 'inline-flex',
@@ -4022,13 +4080,13 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
     };
 }, { id: 'menu-item' });
-const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, closeOnClick, submenu, submenuPlacement = 'right', onClick, ...rest }) => {
+const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuPlacement = 'right', onClick, ...rest }) => {
     const hasSubmenu = submenu !== undefined;
     const isCheckable = role === 'menuitemcheckbox' || role === 'menuitemradio';
     const isOption = role === 'option';
     const isHighlighted = isCheckable ? Boolean(checked) : Boolean(selected);
     const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick });
-    return (jsxs(Fragment$1, { children: [jsxs("li", { ref: mergedRef, role: role, "aria-checked": isCheckable ? Boolean(checked) : undefined, "aria-selected": isOption ? Boolean(selected) : undefined, "aria-disabled": disabled, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? submenuOpen : undefined, "data-selected": isHighlighted || undefined, "data-focused": focused || undefined, "data-disabled": disabled || undefined, className: MENU_ITEM_STYLES.root, onClick: handleClick, onMouseEnter: hasSubmenu && !disabled ? scheduleOpen : undefined, onMouseLeave: hasSubmenu ? scheduleClose : undefined, ...rest, children: [isCheckable && (jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsx(Icon, { icon: CheckIcon, size: 'sm', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (jsx(MenuPanel, { open: submenuOpen, onClose: () => closeSubmenu(true), onArrowLeft: () => closeSubmenu(true), anchorEl: liRef.current, placement: submenuPlacement, isSubmenu: true, "aria-label": label, onMouseEnter: clearTimers, onMouseLeave: scheduleClose, children: submenu }))] }));
+    return (jsxs(Fragment$1, { children: [jsxs("li", { ref: mergedRef, role: role, "aria-checked": isCheckable ? Boolean(checked) : undefined, "aria-selected": isOption ? Boolean(selected) : undefined, "aria-disabled": disabled, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? submenuOpen : undefined, "data-selected": isHighlighted || undefined, "data-focused": focused || undefined, "data-disabled": disabled || undefined, className: MENU_ITEM_STYLES.root({ size }), onClick: handleClick, onMouseEnter: hasSubmenu && !disabled ? scheduleOpen : undefined, onMouseLeave: hasSubmenu ? scheduleClose : undefined, ...rest, children: [isCheckable && (jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsx(Icon, { icon: CheckIcon, size: 'sm', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (jsx(MenuPanel, { open: submenuOpen, onClose: () => closeSubmenu(true), onArrowLeft: () => closeSubmenu(true), anchorEl: liRef.current, placement: submenuPlacement, isSubmenu: true, "aria-label": label, onMouseEnter: clearTimers, onMouseLeave: scheduleClose, children: submenu }))] }));
 };
 MenuItem.displayName = 'MenuItem';
@@ -4223,7 +4281,7 @@ const useSelect = ({ id, ref, value, defaultValue, onChange, options, disabled,
 const Select = ({ ref, value, defaultValue, onChange, options, label, helperText, placeholder, size = 'md', status = 'default', disabled, required, width, id, }) => {
     const { fieldId, labelId, helperId, menuId, triggerRef, mergedRef, open, toggle, close, currentValue, selectedOption, groupedOptions, handleSelect, } = useSelect({ id, ref, value, defaultValue, onChange, options, disabled });
     return (jsxs(Stack, { flexDirection: 'column', gap: 'xs', style: { width: width ?? '100%' }, children: [label !== undefined && (jsxs(Text, { variant: 'label', fontSize: 'sm', fontWeight: 'medium', color: 'textSecondary', htmlFor: fieldId, id: labelId, children: [label, required && (jsx(Text, { variant: 'span', color: 'errorMain', "aria-hidden": true, children: ' *' }))] })), jsx(SelectTrigger, { ref: mergedRef, id: fieldId, size: size, status: status, open: open, hasValue: selectedOption !== undefined, startIcon: selectedOption?.icon, startIconColor: selectedOption?.iconColor, disabled: disabled, "aria-haspopup": 'listbox', "aria-expanded": open, "aria-controls": menuId, "aria-labelledby": label !== undefined ? `${labelId} ${fieldId}` : undefined, "aria-required": required || undefined, "aria-invalid": status === 'error' || undefined, "aria-errormessage": status === 'error' && helperText !== undefined ? helperId : undefined, "aria-describedby": helperText !== undefined ? helperId : undefined, onClick: toggle, children: selectedOption !== undefined ? selectedOption.label : placeholder }), jsx(Menu, { open: open, onClose: close, anchorEl: triggerRef.current, id: menuId, role: 'listbox', "aria-labelledby": label !== undefined ? labelId : undefined, "aria-label": label === undefined ? placeholder : undefined, children: Array.from(groupedOptions.entries()).map(([groupKey, groupOpts], groupIndex) => {
-                    const items = groupOpts.map((opt) => (jsx(Menu.Item, { role: 'option', label: opt.label, icon: opt.icon, iconColor: opt.iconColor, selected: opt.value === currentValue, disabled: opt.disabled, onClick: () => handleSelect(opt.value) }, opt.value)));
+                    const items = groupOpts.map((opt) => (jsx(Menu.Item, { role: 'option', size: 'compact', label: opt.label, icon: opt.icon, iconColor: opt.iconColor, selected: opt.value === currentValue, disabled: opt.disabled, onClick: () => handleSelect(opt.value) }, opt.value)));
                     return groupKey !== undefined ? (jsx(Menu.Group, { label: groupKey, divider: groupIndex > 0, children: items }, groupKey)) : (jsx(Menu.Group, { divider: groupIndex > 0, children: items }, '__ungrouped'));
                 }) }), helperText !== undefined && (jsx(FormHelperText, { id: helperId, status: status, children: helperText }))] }));
 };
@@ -5941,7 +5999,7 @@ const DrawerTemporaryPanel = ({ isExpanded, onClose, children, role, ariaLabel,
     if (!isVisible) {
         return null;
     }
-    return createPortal(jsxs(Fragment$1, { children: [jsx(Backdrop, { visible: isFadingIn, onClick: onClose }), jsx(DrawerContext.Provider, { value: { isExpanded: true }, children: jsx("nav", { className: cx(DRAWER_STYLES.temporaryPanel, isFadingIn && DRAWER_STYLES.temporaryPanelVisible), role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children: children }) })] }), document.body);
+    return createPortal(jsxs(Fragment$1, { children: [jsx(Backdrop, { visible: isFadingIn, onClick: onClose }), jsx(DrawerContext.Provider, { value: { isExpanded: true }, children: jsx("nav", { className: cx(DRAWER_STYLES.temporaryPanel, isFadingIn && DRAWER_STYLES.temporaryPanelVisible), role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-scroll-lock-ignore": true, children: children }) })] }), document.body);
 };
 DrawerTemporaryPanel.displayName = 'DrawerTemporaryPanel';
 // ─── Main Drawer ─────────────────────────────────────────────────────────────
@@ -6850,7 +6908,7 @@ const DialogBase = ({ open, onClose, children, closeOnBackdropClick = false, ful
     if (!isVisible) {
         return null;
     }
-    return createPortal(jsxs(Fragment$1, { children: [jsx(Backdrop, { visible: isFadingIn, onClick: handleBackdropClick }), jsx("div", { ref: panelRef, role: 'dialog', "aria-modal": true, "aria-labelledby": labelledBy, "aria-label": ariaLabel, tabIndex: -1, className: cx(DIALOG_STYLES.panel, isFadingIn && DIALOG_STYLES.panelVisible, fullscreen && DIALOG_STYLES.panelFullscreen), style: cssVars, children: jsx(DialogContext.Provider, { value: { titleId, CloseIconComponent: CloseIcon }, children: children }) })] }), document.body);
+    return createPortal(jsxs(Fragment$1, { children: [jsx(Backdrop, { visible: isFadingIn, onClick: handleBackdropClick }), jsx("div", { ref: panelRef, role: 'dialog', "aria-modal": true, "aria-labelledby": labelledBy, "aria-label": ariaLabel, tabIndex: -1, "data-scroll-lock-ignore": true, className: cx(DIALOG_STYLES.panel, isFadingIn && DIALOG_STYLES.panelVisible, fullscreen && DIALOG_STYLES.panelFullscreen), style: cssVars, children: jsx(DialogContext.Provider, { value: { titleId, CloseIconComponent: CloseIcon }, children: children }) })] }), document.body);
 };
 DialogBase.displayName = 'Dialog';
 const Dialog = DialogBase;