@mezzanine-ui/react 1.0.3 → 1.1.0

package/Input/SelectButton/SelectButton.d.ts

@@ -3,6 +3,11 @@ import { DropdownOption } from '@mezzanine-ui/core/dropdown/dropdown';
 import { PopperPlacement } from '../../Popper';
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
 export interface SelectButtonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'disabled' | 'onSelect' | 'type' | 'selectedValue'> {
+    /**
+     * Whether clicking an option should automatically close the dropdown.
+     * @default true
+     */
+    closeOnSelect?: boolean;
     /**
      * Whether the select button is disabled.
      */

package/Input/SelectButton/SelectButton.js

@@ -10,24 +10,24 @@ import Icon from '../../Icon/Icon.js';
 import cx from 'clsx';
 
 const SelectButton = forwardRef(function SelectButton(props, ref) {
-    const { className, disabled, dropdownMaxHeight = 114, dropdownPlacement = 'bottom-start', dropdownWidth = 120, onSelect, options = [], size = 'main', value, ...rest } = props;
+    const { className, closeOnSelect = true, disabled, dropdownMaxHeight = 114, dropdownPlacement = 'bottom-start', dropdownWidth = 120, onSelect, options = [], size = 'main', value, ...rest } = props;
     const [open, setOpen] = useState(false);
-    const handleOpen = useCallback(() => {
-        if (!disabled) {
-            setOpen(true);
-        }
+    const handleVisibilityChange = useCallback((next) => {
+        if (disabled && next)
+            return;
+        setOpen(next);
     }, [disabled]);
-    const handleClose = useCallback(() => {
-        setOpen(false);
-    }, []);
     const handleSelect = useCallback((option) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option.id);
-    }, [onSelect]);
+        if (closeOnSelect) {
+            setOpen(false);
+        }
+    }, [closeOnSelect, onSelect]);
     const dropdownOptions = options.map((option) => ({
         ...option,
         ...(option.id === value ? { checkSite: 'suffix' } : {}),
     }));
-    return (jsx(Dropdown, { customWidth: dropdownWidth, disabled: disabled, maxHeight: dropdownMaxHeight, onClose: handleClose, onOpen: handleOpen, onSelect: handleSelect, options: dropdownOptions, placement: dropdownPlacement, value: value, children: jsxs("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSelectButtonClasses.host, disabled && inputSelectButtonClasses.disabled, size === 'main' ? inputSelectButtonClasses.main : inputSelectButtonClasses.sub, className), title: value, ...rest, children: [jsx("span", { className: inputSelectButtonClasses.text, children: value }), jsx(Rotate, { in: open, duration: MOTION_DURATION.fast, easing: MOTION_EASING.standard, children: jsx(Icon, { className: inputSelectButtonClasses.icon, icon: ChevronDownIcon, size: 16 }) })] }) }));
+    return (jsx(Dropdown, { customWidth: dropdownWidth, disabled: disabled, maxHeight: dropdownMaxHeight, onSelect: handleSelect, onVisibilityChange: handleVisibilityChange, open: open, options: dropdownOptions, placement: dropdownPlacement, value: value, children: jsxs("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSelectButtonClasses.host, disabled && inputSelectButtonClasses.disabled, size === 'main' ? inputSelectButtonClasses.main : inputSelectButtonClasses.sub, className), title: value, ...rest, children: [jsx("span", { className: inputSelectButtonClasses.text, children: value }), jsx(Rotate, { in: open, duration: MOTION_DURATION.fast, easing: MOTION_EASING.standard, children: jsx(Icon, { className: inputSelectButtonClasses.icon, icon: ChevronDownIcon, size: 16 }) })] }) }));
 });
 
 export { SelectButton as default };

package/Picker/getFocusableElements.d.ts

@@ -0,0 +1,3 @@
+export declare function getFocusableElements(container: HTMLElement | null): HTMLElement[];
+export declare function getNextTabbableAfter(element: HTMLElement, skipContainer?: HTMLElement | null): HTMLElement | null;
+export declare function getPreviousTabbableBefore(element: HTMLElement): HTMLElement | null;

package/Picker/getFocusableElements.js

@@ -0,0 +1,70 @@
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    'object',
+    'embed',
+    'audio[controls]',
+    'video[controls]',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+function isVisible(element) {
+    var _a, _b;
+    if (element.hidden)
+        return false;
+    const style = (_b = (_a = element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.getComputedStyle(element);
+    if (!style)
+        return true;
+    return style.visibility !== 'hidden' && style.display !== 'none';
+}
+function getFocusableElements(container) {
+    if (!container)
+        return [];
+    const nodes = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    const result = [];
+    for (const node of Array.from(nodes)) {
+        if (node.getAttribute('aria-hidden') === 'true')
+            continue;
+        if (!isVisible(node))
+            continue;
+        result.push(node);
+    }
+    return result;
+}
+function getNextTabbableAfter(element, skipContainer) {
+    const doc = element.ownerDocument;
+    const all = getFocusableElements(doc.body);
+    for (const node of all) {
+        if (node === element || element.contains(node))
+            continue;
+        if (skipContainer &&
+            (node === skipContainer || skipContainer.contains(node)))
+            continue;
+        const position = element.compareDocumentPosition(node);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return node;
+        }
+    }
+    return null;
+}
+function getPreviousTabbableBefore(element) {
+    const doc = element.ownerDocument;
+    const all = getFocusableElements(doc.body);
+    let previous = null;
+    for (const node of all) {
+        if (node === element || element.contains(node))
+            continue;
+        const position = element.compareDocumentPosition(node);
+        if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            previous = node;
+        }
+    }
+    return previous;
+}
+
+export { getFocusableElements, getNextTabbableAfter, getPreviousTabbableBefore };

package/Picker/usePickerDocumentEventClose.js

@@ -1,27 +1,141 @@
+import { useRef } from 'react';
 import { useClickAway } from '../hooks/useClickAway.js';
 import { useDocumentEscapeKeyDown } from '../hooks/useDocumentEscapeKeyDown.js';
-import { useTabKeyClose } from './useTabKeyClose.js';
+import { useDocumentTabKeyDown } from '../hooks/useDocumentTabKeyDown.js';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
+import { getFocusableElements, getNextTabbableAfter, getPreviousTabbableBefore } from './getFocusableElements.js';
 
 function usePickerDocumentEventClose({ anchorRef, lastElementRefInFlow, onClose, onChangeClose, open, popperRef, }) {
-    useClickAway(() => {
-        if (!open) {
+    /**
+     * Mirror the latest values into refs so the document-level event handlers
+     * (which are installed once and only re-installed when deps change) always
+     * read the freshest props rather than a closure captured at install time.
+     */
+    const openRef = useRef(open);
+    const onCloseRef = useRef(onClose);
+    const onChangeCloseRef = useRef(onChangeClose);
+    useIsomorphicLayoutEffect(() => {
+        openRef.current = open;
+        onCloseRef.current = onClose;
+        onChangeCloseRef.current = onChangeClose;
+    });
+    useClickAway(() => (event) => {
+        var _a;
+        if (!openRef.current)
             return;
+        if (!((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+            onChangeCloseRef.current();
         }
-        return (event) => {
-            var _a;
-            if (!((_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                onChangeClose();
-            }
-        };
-    }, anchorRef, [open, onClose]);
-    /** Close popper when escape key down */
+    }, anchorRef, []);
+    /**
+     * Close popper on Escape and return focus to the trigger input so the
+     * user does not lose their place in the page tab order.
+     */
     useDocumentEscapeKeyDown(() => () => {
-        if (open) {
-            onClose();
+        var _a;
+        if (!openRef.current)
+            return;
+        onCloseRef.current();
+        const popper = popperRef.current;
+        const active = document.activeElement;
+        if (popper && active && popper.contains(active)) {
+            (_a = lastElementRefInFlow.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
-    }, [open, onClose]);
-    /** Close popper when tab key down */
-    useTabKeyClose(onChangeClose, lastElementRefInFlow, [onChangeClose]);
+    }, [lastElementRefInFlow, popperRef]);
+    /**
+     * Keyboard navigation across the trigger input and the portalled popper.
+     *
+     * The popper is rendered into document.body via Portal, so the natural
+     * Tab order skips it entirely. We bridge the trigger and the popper as
+     * a logical sequence:
+     *
+     *   - Tab from trigger input  → first focusable inside popper  (handled by
+     *     the direct trigger listener below, which uses `stopPropagation` so
+     *     this document-level handler does not run again for that case)
+     *   - Shift+Tab from trigger  → close popper                  (same)
+     *   - Tab from last popper    → close + focus next tab stop after anchor
+     *   - Shift+Tab from first    → return focus to trigger input
+     *
+     * Other Tabs inside the popper fall through to the browser's default
+     * focus traversal, so users can walk through calendar buttons, footer
+     * actions, etc. with the regular keyboard.
+     */
+    useDocumentTabKeyDown(() => (event) => {
+        var _a;
+        if (!openRef.current)
+            return;
+        const popper = popperRef.current;
+        const anchor = anchorRef.current;
+        const trigger = lastElementRefInFlow.current;
+        if (!popper || !anchor)
+            return;
+        const active = document.activeElement;
+        if (!active || !popper.contains(active))
+            return;
+        const focusables = getFocusableElements(popper);
+        if (focusables.length === 0)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            onChangeCloseRef.current();
+            const next = getNextTabbableAfter(anchor, popper);
+            if (next) {
+                next.focus();
+            }
+            else {
+                trigger === null || trigger === void 0 ? void 0 : trigger.blur();
+            }
+            return;
+        }
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            if (trigger) {
+                trigger.focus();
+            }
+            else {
+                onChangeCloseRef.current();
+                (_a = getPreviousTabbableBefore(anchor)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+    }, [anchorRef, popperRef, lastElementRefInFlow]);
+    /**
+     * Direct keydown listener on the trigger element for the Tab → popper
+     * bridge. Binding directly on the trigger (instead of the document) is
+     * more reliable: it still fires when the picker lives inside a Modal or
+     * focus trap that stops keydown propagation before it reaches document.
+     */
+    useIsomorphicLayoutEffect(() => {
+        const trigger = lastElementRefInFlow.current;
+        if (!trigger)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key !== 'Tab')
+                return;
+            if (!openRef.current)
+                return;
+            const popper = popperRef.current;
+            if (!popper)
+                return;
+            if (event.shiftKey) {
+                onChangeCloseRef.current();
+                return;
+            }
+            const focusables = getFocusableElements(popper);
+            if (focusables.length === 0) {
+                onChangeCloseRef.current();
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            focusables[0].focus();
+        };
+        trigger.addEventListener('keydown', handleKeyDown);
+        return () => {
+            trigger.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [lastElementRefInFlow, popperRef]);
 }
 
 export { usePickerDocumentEventClose };

package/Table/Table.js

@@ -16,6 +16,7 @@ import { useTableScroll } from './hooks/useTableScroll.js';
 import { useTableSelection } from './hooks/useTableSelection.js';
 import { useTableSorting } from './hooks/useTableSorting.js';
 import { getNumericCSSVariablePixelValue } from '../utils/get-css-variable-value.js';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.js';
 import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import TableBulkActions from './components/TableBulkActions.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
@@ -33,27 +34,31 @@ function TableInner(props, ref) {
         }))
         : dataSource;
     /** Feature: Row Height Preset */
-    const rowHeight = useMemo(() => {
+    const rowHeightVariableName = useMemo(() => {
         switch (rowHeightPreset) {
             case 'condensed':
                 return size === 'main'
-                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-condensed`)
-                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-reduced`);
+                    ? `--${spacingPrefix}-size-container-condensed`
+                    : `--${spacingPrefix}-size-container-reduced`;
             case 'detailed':
                 return size === 'main'
-                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-tiny`)
-                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-tightened`);
+                    ? `--${spacingPrefix}-size-container-tiny`
+                    : `--${spacingPrefix}-size-container-tightened`;
             case 'roomy':
                 return size === 'main'
-                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-small`)
-                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-medium`);
+                    ? `--${spacingPrefix}-size-container-small`
+                    : `--${spacingPrefix}-size-container-medium`;
             case 'base':
             default:
                 return size === 'main'
-                    ? getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimized`)
-                    : getNumericCSSVariablePixelValue(`--${spacingPrefix}-size-container-minimal`);
+                    ? `--${spacingPrefix}-size-container-minimized`
+                    : `--${spacingPrefix}-size-container-minimal`;
         }
     }, [rowHeightPreset, size]);
+    const [rowHeight, setRowHeight] = useState(undefined);
+    useIsomorphicLayoutEffect(() => {
+        setRowHeight(getNumericCSSVariablePixelValue(rowHeightVariableName));
+    }, [rowHeightVariableName]);
     /** Feature: Highlight */
     const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
     const [hoveredColumnIndex, setHoveredColumnIndex] = useState(null);

package/Table/TableContext.d.ts

@@ -60,7 +60,7 @@ export interface TableContextValue<T extends TableDataSource = TableDataSource>
     pinnable?: TablePinnable;
     resizable?: boolean;
     rowState?: TableRowState | ((rowData: TableDataSource) => TableRowState | undefined);
-    rowHeight: number;
+    rowHeight: number | undefined;
     scroll?: TableScroll;
     scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
     selection?: TableSelectionState<T>;

package/Table/components/TableRow.js

@@ -45,7 +45,7 @@ const TableRowInner = forwardRef(function TableRow(props, ref) {
     const resolvedStyle = useMemo(() => ({
         ...style,
         ...draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps.style,
-        height: rowHeight,
+        ...(rowHeight !== undefined && { height: rowHeight }),
     }), [style, rowHeight, draggableProvided === null || draggableProvided === void 0 ? void 0 : draggableProvided.draggableProps.style]);
     const { containerWidth, getResizedColumnWidth, scrollLeft } = useTableSuperContext();
     const rowKey = useMemo(() => getRowKey(record), [record]);

package/Table/hooks/useTableVirtualization.js

@@ -16,7 +16,7 @@ function useTableVirtualization({ dataSource, enabled = true, isContainerReady =
         if (measuredHeight !== undefined) {
             return measuredHeight;
         }
-        return rowHeight;
+        return rowHeight !== null && rowHeight !== void 0 ? rowHeight : 0;
     }, [dataSource, rowHeight]);
     const getItemKey = useCallback((index) => {
         const record = dataSource[index];

package/_internal/InputTriggerPopper/InputTriggerPopper.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { inputTriggerPopperClasses } from '@mezzanine-ui/core/_internal/input-trigger-popper';
-import { offset, size } from '@floating-ui/react-dom';
+import { offset, flip, size } from '@floating-ui/react-dom';
 import { forwardRef } from 'react';
 import Fade from '../../Transition/Fade.js';
 import Popper from '../../Popper/Popper.js';
@@ -20,13 +20,14 @@ const sameWidthMiddleware = size({
 const InputTriggerPopper = forwardRef(function InputTriggerPopper(props, ref) {
     const { anchor, children, className, fadeProps, open, options, sameWidth, ...restPopperProps } = props;
     const { middleware = [], ...restPopperOptions } = options || {};
-    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), disablePortal: true, 
+    return (jsx(Fade, { ...fadeProps, in: open, ref: ref, children: jsx(Popper, { ...restPopperProps, open: true, anchor: anchor, className: cx(inputTriggerPopperClasses.host, className), 
             /** Prevent event bubble (Because popper may use portal, then click away function would be buggy) */
             onClick: (e) => e.stopPropagation(), onTouchStart: (e) => e.stopPropagation(), onTouchMove: (e) => e.stopPropagation(), onTouchEnd: (e) => e.stopPropagation(), options: {
                 placement: 'bottom-start',
                 ...restPopperOptions,
                 middleware: [
                     offset({ mainAxis: 4 }),
+                    flip({ fallbackAxisSideDirection: 'end', padding: 8 }),
                     ...(sameWidth ? [sameWidthMiddleware] : []),
                     ...middleware,
                 ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,7 +32,7 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "1.0.3",
+    "@mezzanine-ui/core": "1.0.4",
     "@mezzanine-ui/icons": "1.0.2",
     "@mezzanine-ui/system": "1.0.2",
     "@tanstack/react-virtual": "^3.13.13",