@mezzanine-ui/react 1.0.0-rc.5 → 1.0.0-rc.7

package/Dropdown/DropdownItem.js

@@ -33,7 +33,7 @@ function truncateArrayDepth(input, maxDepth = 3, warn = true) {
             // Stop going deeper once maximum depth is reached, remove children
             return options.map(({ children: _children, ...option }) => option);
         }
-        return options.map(option => {
+        return options.map((option) => {
             if (!option.children)
                 return option;
             return {
@@ -65,13 +65,15 @@ function truncateArrayDepth(input, maxDepth = 3, warn = true) {
     return truncate(input);
 }
 function DropdownItem(props) {
-    const { activeIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, toggleCheckedOnClick, value, type, maxHeight, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', onReachBottom, onLeaveBottom, onScroll, scrollbarDefer = true, scrollbarDisabled = false, scrollbarMaxWidth, scrollbarOptions, } = props;
+    const { activeIndex, keyboardActiveIndex, disabled = false, listboxId, listboxLabel, mode = 'single', options, toggleCheckedOnClick, value, type, maxHeight, minWidth, actionConfig, onHover, onSelect, followText, headerContent, status, loadingText, emptyText, emptyIcon, loadingPosition = 'full', onReachBottom, onLeaveBottom, onScroll, scrollbarDefer = true, scrollbarDisabled = false, scrollbarMaxWidth, scrollbarOptions, } = props;
+    const { expandedNodes: expandedNodesProp, onToggleExpand: onToggleExpandProp, } = props;
     const optionsContent = truncateArrayDepth(options, 3);
     const listRef = useRef(null);
     const listWrapperRef = useRef(null);
     const viewportRef = useRef(null);
     const wasAtBottomRef = useRef(false);
-    const [expandedNodes, setExpandedNodes] = useState(new Set());
+    const [internalExpandedNodes, setInternalExpandedNodes] = useState(new Set());
+    const expandedNodes = expandedNodesProp !== null && expandedNodesProp !== void 0 ? expandedNodesProp : internalExpandedNodes;
     const hasActions = Boolean(actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.showActions);
     const hasHeader = Boolean(headerContent);
     const shouldUseScrollbar = maxHeight && !scrollbarDisabled;
@@ -79,7 +81,11 @@ function DropdownItem(props) {
     const [actionRef, actionHeight] = useElementHeight(hasActions && !!maxHeight);
     const [headerRef, headerHeight] = useElementHeight(hasHeader && !!maxHeight);
     const toggleExpand = useCallback((optionId) => {
-        setExpandedNodes((prev) => {
+        if (onToggleExpandProp) {
+            onToggleExpandProp(optionId);
+            return;
+        }
+        setInternalExpandedNodes((prev) => {
             const next = new Set(prev);
             if (next.has(optionId)) {
                 next.delete(optionId);
@@ -89,7 +95,7 @@ function DropdownItem(props) {
             }
             return next;
         });
-    }, []);
+    }, [onToggleExpandProp]);
     const visibleShortcutOptions = useMemo(() => {
         const result = [];
         const collectDefault = (optionList) => {
@@ -164,10 +170,10 @@ function DropdownItem(props) {
         });
         if (!mainToken)
             return false;
-        if (requireMeta !== event.metaKey
-            || requireCtrl !== event.ctrlKey
-            || requireAlt !== event.altKey
-            || requireShift !== event.shiftKey) {
+        if (requireMeta !== event.metaKey ||
+            requireCtrl !== event.ctrlKey ||
+            requireAlt !== event.altKey ||
+            requireShift !== event.shiftKey) {
             return false;
         }
         const mainCode = keycode(mainToken);
@@ -179,7 +185,8 @@ function DropdownItem(props) {
             return true;
         }
         const eventKeyName = keycode(eventCode);
-        return typeof eventKeyName === 'string' && eventKeyName.toLowerCase() === mainToken;
+        return (typeof eventKeyName === 'string' &&
+            eventKeyName.toLowerCase() === mainToken);
     }, []);
     const renderGroupedOptions = (optionList, startIndex) => {
         let currentIndex = startIndex;
@@ -190,10 +197,13 @@ function DropdownItem(props) {
             if (hasChildren) {
                 groupElements.push(jsx(Typography, { variant: "body", className: dropdownClasses.groupLabel, children: groupOption.name }, groupOption.id));
                 (_a = groupOption.children) === null || _a === void 0 ? void 0 : _a.forEach((option) => {
-                    var _a, _b, _c;
+                    var _a, _b, _c, _d;
                     currentIndex += 1;
                     const optionIndex = currentIndex;
-                    const isActive = optionIndex === activeIndex;
+                    const isActive = optionIndex ===
+                        (keyboardActiveIndex !== undefined
+                            ? keyboardActiveIndex
+                            : activeIndex);
                     const isSelected = Array.isArray(value)
                         ? value.includes(option.id)
                         : value === option.id;
@@ -204,7 +214,7 @@ function DropdownItem(props) {
                             if (disabled)
                                 return;
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
-                        }, checkSite: "none", validate: (_b = option.validate) !== null && _b !== void 0 ? _b : 'default', onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), showUnderline: (_c = option.showUnderline) !== null && _c !== void 0 ? _c : false, appendContent: shortcutText }, option.id));
+                        }, checkSite: (_b = option === null || option === void 0 ? void 0 : option.checkSite) !== null && _b !== void 0 ? _b : 'suffix', validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), showUnderline: (_d = option.showUnderline) !== null && _d !== void 0 ? _d : false, appendContent: shortcutText }, option.id));
                 });
             }
             return groupElements;
@@ -230,37 +240,49 @@ function DropdownItem(props) {
     }, []);
     const renderTreeOptions = (optionList, depth, startIndex) => {
         let currentIndex = startIndex;
-        const selectedIds = Array.isArray(value) ? value.map((id) => String(id)) : value ? [String(value)] : [];
+        const selectedIds = Array.isArray(value)
+            ? value.map((id) => String(id))
+            : value
+                ? [String(value)]
+                : [];
         const elements = (optionList !== null && optionList !== void 0 ? optionList : []).flatMap((option) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             currentIndex += 1;
             const optionIndex = currentIndex;
             const level = Math.min(depth, 2);
-            const isActive = optionIndex === activeIndex;
+            const isActive = optionIndex ===
+                (keyboardActiveIndex !== undefined ? keyboardActiveIndex : activeIndex);
             const hasChildren = Boolean(option.children && option.children.length > 0);
             const isExpanded = hasChildren && expandedNodes.has(option.id);
             let prependIcon = undefined;
             if (hasChildren && level !== 2) {
                 prependIcon = isExpanded ? CaretDownIcon : CaretRightIcon;
             }
-            const checkSite = option.showCheckbox ? 'prefix' : 'none';
+            const checkSite = option.showCheckbox
+                ? 'prefix'
+                : ((_a = option.checkSite) !== null && _a !== void 0 ? _a : (mode === 'single' ? 'suffix' : 'none'));
             const shortcutText = option.shortcutText
                 ? option.shortcutText
-                : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
+                : shortcutTextHandler((_b = option.shortcutKeys) !== null && _b !== void 0 ? _b : []);
             const selectionState = hasChildren && mode === 'multiple'
                 ? calculateNodeSelectionState(option, selectedIds)
                 : {
                     checked: selectedIds.includes(String(option.id)),
                     indeterminate: false,
                 };
-            const resolvedToggleCheckedOnClick = toggleCheckedOnClick !== null && toggleCheckedOnClick !== void 0 ? toggleCheckedOnClick : !(hasChildren
-                && type === 'tree'
-                && mode === 'multiple'
-                && option.showCheckbox);
-            const card = (jsx(DropdownItemCard, { active: isActive, checked: selectionState.checked, indeterminate: selectionState.indeterminate, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, toggleCheckedOnClick: resolvedToggleCheckedOnClick, onClick: () => {
+            const resolvedToggleCheckedOnClick = toggleCheckedOnClick !== null && toggleCheckedOnClick !== void 0 ? toggleCheckedOnClick : !(hasChildren &&
+                type === 'tree' &&
+                mode === 'multiple' &&
+                option.showCheckbox);
+            const card = (jsx(DropdownItemCard, { active: isActive, checked: selectionState.checked, className: !hasChildren && level === 1
+                    ? dropdownClasses.cardLeafLevel1
+                    : undefined, indeterminate: selectionState.indeterminate, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, level: level, mode: mode, name: option.name, toggleCheckedOnClick: resolvedToggleCheckedOnClick, onClick: () => {
                     if (disabled)
                         return;
-                    if (hasChildren && type === 'tree' && mode === 'multiple' && option.showCheckbox) {
+                    if (hasChildren &&
+                        type === 'tree' &&
+                        mode === 'multiple' &&
+                        option.showCheckbox) {
                         toggleExpand(option.id);
                     }
                     else if (hasChildren && type === 'tree') {
@@ -270,7 +292,10 @@ function DropdownItem(props) {
                         // In `tree` + `multiple` mode, `DropdownItemCard` already triggers selection via
                         // `onCheckedChange` when row is clicked (it toggles checked first, then calls `onClick`),
                         // so calling `onSelect` here would cause it to fire twice for leaf nodes.
-                        if (!(type === 'tree' && mode === 'multiple')) {
+                        // In `multiple` mode, row click also triggers `onCheckedChange` when
+                        // `toggleCheckedOnClick` is enabled, so avoid firing `onSelect` twice.
+                        if (!(type === 'tree' && mode === 'multiple') &&
+                            !(mode === 'multiple' && resolvedToggleCheckedOnClick)) {
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
                         }
                     }
@@ -278,7 +303,7 @@ function DropdownItem(props) {
                     if (!disabled) {
                         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
                     }
-                }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_b = option.showUnderline) !== null && _b !== void 0 ? _b : false, validate: (_c = option.validate) !== null && _c !== void 0 ? _c : 'default', appendContent: shortcutText }, option.id));
+                }, followText: followText, checkSite: checkSite, onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(optionIndex), prependIcon: prependIcon, showUnderline: (_c = option.showUnderline) !== null && _c !== void 0 ? _c : false, validate: (_d = option.validate) !== null && _d !== void 0 ? _d : 'default', appendContent: shortcutText }, option.id));
             if (hasChildren && isExpanded && type === 'tree') {
                 const childResult = renderTreeOptions(option.children, depth + 1, currentIndex);
                 currentIndex = childResult.nextIndex;
@@ -297,11 +322,12 @@ function DropdownItem(props) {
             const isSelected = Array.isArray(value)
                 ? value.includes(option.id)
                 : value === option.id;
-            const isActive = optionIndex === activeIndex;
+            const isActive = optionIndex ===
+                (keyboardActiveIndex !== undefined ? keyboardActiveIndex : activeIndex);
             const shortcutText = option.shortcutText
                 ? option.shortcutText
                 : shortcutTextHandler((_a = option.shortcutKeys) !== null && _a !== void 0 ? _a : []);
-            const checkSite = (_b = option === null || option === void 0 ? void 0 : option.checkSite) !== null && _b !== void 0 ? _b : 'none';
+            const checkSite = (_b = option === null || option === void 0 ? void 0 : option.checkSite) !== null && _b !== void 0 ? _b : 'suffix';
             return (jsx(DropdownItemCard, { followText: followText, active: isActive, checked: isSelected, disabled: disabled, id: `${listboxId}-option-${optionIndex}`, label: option.name, mode: mode, name: option.name, toggleCheckedOnClick: toggleCheckedOnClick, onClick: () => {
                     if (disabled)
                         return;
@@ -328,13 +354,17 @@ function DropdownItem(props) {
     // Show bottom loading when status is loading and loadingPosition is bottom
     const shouldShowBottomLoading = status === 'loading' && loadingPosition === 'bottom';
     const listStyle = useMemo(() => {
-        if (!maxHeight) {
-            return undefined;
+        const styles = {};
+        if (maxHeight) {
+            styles.maxHeight =
+                typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
         }
-        return {
-            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
-        };
-    }, [maxHeight]);
+        if (minWidth !== undefined) {
+            styles['--mzn-dropdown-list-min-width'] =
+                typeof minWidth === 'number' ? `${minWidth}px` : minWidth;
+        }
+        return Object.keys(styles).length > 0 ? styles : undefined;
+    }, [maxHeight, minWidth]);
     const listWrapperStyle = useMemo(() => {
         if (!maxHeight) {
             return undefined;
@@ -358,7 +388,8 @@ function DropdownItem(props) {
             if (event.repeat)
                 return;
             const targetOption = visibleShortcutOptions.find((option) => {
-                if (!Array.isArray(option.shortcutKeys) || option.shortcutKeys.length === 0) {
+                if (!Array.isArray(option.shortcutKeys) ||
+                    option.shortcutKeys.length === 0) {
                     return false;
                 }
                 return option.shortcutKeys.some((shortcut) => matchShortcut(event, shortcut));
@@ -367,7 +398,9 @@ function DropdownItem(props) {
                 return;
             event.preventDefault();
             event.stopPropagation();
-            if (type === 'tree' && targetOption.children && targetOption.children.length > 0) {
+            if (type === 'tree' &&
+                targetOption.children &&
+                targetOption.children.length > 0) {
                 toggleExpand(targetOption.id);
                 return;
             }
@@ -377,7 +410,14 @@ function DropdownItem(props) {
         return () => {
             listElement.removeEventListener('keydown', handleKeyDown);
         };
-    }, [disabled, matchShortcut, onSelect, type, toggleExpand, visibleShortcutOptions]);
+    }, [
+        disabled,
+        matchShortcut,
+        onSelect,
+        type,
+        toggleExpand,
+        visibleShortcutOptions,
+    ]);
     const handleViewportReady = useCallback((viewport) => {
         viewportRef.current = viewport;
         listWrapperRef.current = viewport;
@@ -416,7 +456,9 @@ function DropdownItem(props) {
             return;
         }
         const listWrapperElement = listWrapperRef.current;
-        if (!listWrapperElement || !maxHeight || (!onReachBottom && !onLeaveBottom && !onScroll)) {
+        if (!listWrapperElement ||
+            !maxHeight ||
+            (!onReachBottom && !onLeaveBottom && !onScroll)) {
             return;
         }
         // Initialize wasAtBottom state by checking current position
@@ -453,7 +495,8 @@ function DropdownItem(props) {
         };
     }, [maxHeight, onReachBottom, onLeaveBottom, onScroll, shouldUseScrollbar]);
     const scrollbarEvents = useMemo(() => {
-        if (!shouldUseScrollbar || (!onReachBottom && !onLeaveBottom && !onScroll)) {
+        if (!shouldUseScrollbar ||
+            (!onReachBottom && !onLeaveBottom && !onScroll)) {
             return undefined;
         }
         return {
@@ -479,10 +522,15 @@ function DropdownItem(props) {
                 wasAtBottomRef.current = isAtBottom;
             },
         };
-    }, [getIsAtBottom, shouldUseScrollbar, onReachBottom, onLeaveBottom, onScroll]);
-    return (jsxs("ul", { "aria-label": listboxLabel || (optionsContent.length === 0 ? 'Dropdown options' : undefined), className: dropdownClasses.list, id: listboxId, ref: listRef, role: "listbox", style: listStyle, tabIndex: -1, children: [hasHeader && (jsx("li", { className: dropdownClasses.listHeader, role: "presentation", ref: headerRef, children: jsx("div", { className: dropdownClasses.listHeaderInner, children: headerContent }) })), maxHeight
-                ? (shouldUseScrollbar ? (jsx(Scrollbar, { className: dropdownClasses.listWrapper, defer: scrollbarDefer, disabled: false, events: scrollbarEvents, maxHeight: listWrapperStyle === null || listWrapperStyle === void 0 ? void 0 : listWrapperStyle.maxHeight, maxWidth: scrollbarMaxWidth, onViewportReady: handleViewportReady, options: scrollbarOptions, children: shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })) })) : (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })) })))
-                : shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
+    }, [
+        getIsAtBottom,
+        shouldUseScrollbar,
+        onReachBottom,
+        onLeaveBottom,
+        onScroll,
+    ]);
+    return (jsxs("ul", { "aria-label": listboxLabel ||
+            (optionsContent.length === 0 ? 'Dropdown options' : undefined), className: dropdownClasses.list, id: listboxId, ref: listRef, role: "listbox", style: listStyle, tabIndex: -1, children: [hasHeader && (jsx("li", { className: dropdownClasses.listHeader, role: "presentation", ref: headerRef, children: jsx("div", { className: dropdownClasses.listHeaderInner, children: headerContent }) })), maxHeight ? (shouldUseScrollbar ? (jsx(Scrollbar, { className: dropdownClasses.listWrapper, defer: scrollbarDefer, disabled: false, events: scrollbarEvents, maxHeight: listWrapperStyle === null || listWrapperStyle === void 0 ? void 0 : listWrapperStyle.maxHeight, maxWidth: scrollbarMaxWidth, onViewportReady: handleViewportReady, options: scrollbarOptions, children: shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })) })) : (jsx("div", { ref: listWrapperRef, className: dropdownClasses.listWrapper, style: listWrapperStyle, children: shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })) }))) : shouldShowFullStatus ? (jsx(DropdownStatus, { status: status, loadingText: loadingText, emptyText: emptyText, emptyIcon: emptyIcon })) : (jsxs(Fragment, { children: [renderedOptions, shouldShowBottomLoading && (jsx("li", { className: dropdownClasses.loadingMore, "aria-live": "polite", role: "status", children: jsx(DropdownStatus, { status: "loading", loadingText: loadingText }) }))] })), hasActions && (jsx("div", { ref: actionRef, children: jsx(DropdownAction, { ...actionConfig }) }))] }));
 }
 
 export { DropdownItem as default };

package/Dropdown/DropdownItemCard.d.ts

@@ -3,8 +3,9 @@ import { type IconDefinition } from '@mezzanine-ui/icons';
 export interface DropdownItemCardProps {
     /**
      * Whether the option is currently active (highlighted by keyboard navigation).
-     * This controls the aria-selected attribute according to W3C ARIA spec.
-     * When an option is referenced by aria-activedescendant, it should have aria-selected="true".
+     * Used to apply visual highlight and drive the `--active` CSS modifier.
+     * Note: keyboard focus position is communicated to screen readers via `aria-activedescendant`
+     * on the trigger element, not via `aria-selected` on the option itself.
      */
     active?: boolean;
     /**

package/Dropdown/DropdownItemCard.js

@@ -57,8 +57,10 @@ function DropdownItemCard(props) {
             ];
     }, [cardLabel, followText]);
     const showPrependContent = useMemo(() => {
-        return prependIcon || (checkSite === 'prefix' && mode === 'multiple');
-    }, [prependIcon, checkSite, mode]);
+        return (prependIcon ||
+            (checkSite === 'prefix' && mode === 'multiple') ||
+            (checkSite === 'prefix' && mode === 'single' && isChecked));
+    }, [prependIcon, checkSite, mode, isChecked]);
     const showAppendContent = useMemo(() => {
         return appendContent || appendIcon || (checkSite === 'suffix' && isChecked);
     }, [appendContent, appendIcon, checkSite, isChecked]);
@@ -105,11 +107,12 @@ function DropdownItemCard(props) {
             return;
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            onClick === null || onClick === void 0 ? void 0 : onClick();
+            handleClick();
         }
     };
-    return (jsxs(Fragment, { children: [jsx("li", { ...(labelId ? { 'aria-labelledby': labelId } : {}), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), "aria-selected": active, className: cx(dropdownClasses.card, dropdownClasses.cardLevel(level), {
+    return (jsxs(Fragment, { children: [jsx("li", { ...(labelId ? { 'aria-labelledby': labelId } : {}), ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), "aria-selected": isChecked, className: cx(dropdownClasses.card, dropdownClasses.cardLevel(level), {
                     [dropdownClasses.cardActive]: active || isChecked,
+                    [dropdownClasses.cardKeyboardActive]: active,
                     [dropdownClasses.cardDisabled]: disabled,
                     [dropdownClasses.cardDanger]: validate === 'danger',
                 }, className), id: id, role: "option", tabIndex: -1, onMouseEnter: onMouseEnter, onClick: handleClick, onKeyDown: handleKeyDown, children: jsxs("div", { className: dropdownClasses.cardContainer, children: [showPrependContent && (jsxs("div", { className: dropdownClasses.cardPrependContent, children: [prependIcon && jsx(Icon, { icon: prependIcon, color: iconColor }), checkSite === 'prefix' && mode === 'multiple' && (jsx(Checkbox, { checked: isChecked, disabled: disabled, indeterminate: indeterminate, onChange: handleCheckboxChange, ...(onCheckedChange
@@ -117,7 +120,7 @@ function DropdownItemCard(props) {
                                             onClick: (event) => event.stopPropagation(),
                                             onMouseDown: (event) => event.stopPropagation(),
                                         }
-                                        : {}) }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel &&
+                                        : {}) })), checkSite === 'prefix' && mode === 'single' && isChecked && (jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 }))] })), jsxs("div", { className: dropdownClasses.cardBody, children: [cardLabel &&
                                     renderHighlightedText(labelParts, dropdownClasses.cardTitle, labelId), subTitleParts.length > 0 &&
                                     renderHighlightedText(subTitleParts, dropdownClasses.cardDescription)] }), showAppendContent && (jsxs("div", { className: dropdownClasses.cardAppendContent, children: [appendContent && (jsx(Typography, { color: "text-neutral-light", children: appendContent })), appendIcon && jsx(Icon, { icon: appendIcon, color: iconColor }), checkSite === 'suffix' && isChecked && (jsx(Icon, { icon: CheckedIcon, color: appendIconColor, size: 16 }))] }))] }) }), showUnderline && (jsx("li", { role: "presentation", "aria-hidden": "true", children: jsx(Separator, { orientation: "horizontal", className: dropdownClasses.cardUnderline }) }))] }));
 }

package/Dropdown/DropdownStatus.d.ts

@@ -1,5 +1,5 @@
-import { DropdownStatus as DropdownStatusType } from "@mezzanine-ui/core/dropdown/dropdown";
-import { IconDefinition } from "@mezzanine-ui/icons";
+import { DropdownStatus as DropdownStatusType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export interface DropdownStatusProps {
     /**
      * The status of the dropdown.

package/Dropdown/DropdownStatus.js

@@ -2,8 +2,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { dropdownClasses } from '@mezzanine-ui/core/dropdown/dropdown';
-import { SpinnerIcon, FolderOpenIcon } from '@mezzanine-ui/icons';
+import { FolderOpenIcon } from '@mezzanine-ui/icons';
 import Typography from '../Typography/Typography.js';
+import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
 
 function DropdownStatus(props) {
@@ -19,7 +20,7 @@ function DropdownStatus(props) {
     }, [status, loadingText, emptyText]);
     const IconElement = useMemo(() => {
         if (status === 'loading') {
-            return jsx(Icon, { icon: SpinnerIcon, size: 16, spin: true, color: "brand" });
+            return jsx(Spin, { loading: true, size: "minor" });
         }
         return jsx(Icon, { icon: emptyIcon !== null && emptyIcon !== void 0 ? emptyIcon : FolderOpenIcon, size: 16 });
     }, [status, emptyIcon]);

package/Dropdown/dropdownKeydownHandler.d.ts

@@ -11,6 +11,12 @@ export declare function createDropdownKeydownHandler(params: {
     open: boolean;
     options: DropdownOption[];
     setActiveIndex: Dispatch<SetStateAction<number | null>>;
+    /**
+     * Optional setter for keyboard-only active index.
+     * When provided, it is updated alongside `setActiveIndex` on arrow key navigation,
+     * and cleared on Escape / directional keys that exit the list.
+     */
+    setKeyboardActiveIndex?: Dispatch<SetStateAction<number | null>>;
     setListboxHasVisualFocus: (focus: boolean) => void;
     setOpen: (open: boolean) => void;
 }): (e: React.KeyboardEvent<HTMLInputElement>) => void;

package/Dropdown/dropdownKeydownHandler.js

@@ -3,7 +3,7 @@
  * Keeps logic centralized in DropdownItem for easy reuse.
  */
 function createDropdownKeydownHandler(params) {
-    const { activeIndex, onEnterSelect, onEscape, open, options, setActiveIndex, setListboxHasVisualFocus, setOpen, } = params;
+    const { activeIndex, onEnterSelect, onEscape, open, options, setActiveIndex, setKeyboardActiveIndex, setListboxHasVisualFocus, setOpen, } = params;
     return (e) => {
         if (options.length === 0)
             return;
@@ -15,13 +15,14 @@ function createDropdownKeydownHandler(params) {
                     setOpen(true);
                     setListboxHasVisualFocus(true);
                     setActiveIndex(() => 0);
+                    setKeyboardActiveIndex === null || setKeyboardActiveIndex === void 0 ? void 0 : setKeyboardActiveIndex(() => 0);
                     return;
                 }
                 setListboxHasVisualFocus(true);
                 setActiveIndex((prev) => {
-                    if (prev === null)
-                        return 0;
-                    return prev >= options.length - 1 ? 0 : prev + 1;
+                    const next = prev === null ? 0 : prev >= options.length - 1 ? 0 : prev + 1;
+                    setKeyboardActiveIndex === null || setKeyboardActiveIndex === void 0 ? void 0 : setKeyboardActiveIndex(() => next);
+                    return next;
                 });
                 break;
             }
@@ -32,13 +33,18 @@ function createDropdownKeydownHandler(params) {
                     setOpen(true);
                     setListboxHasVisualFocus(true);
                     setActiveIndex(() => options.length - 1);
+                    setKeyboardActiveIndex === null || setKeyboardActiveIndex === void 0 ? void 0 : setKeyboardActiveIndex(() => options.length - 1);
                     return;
                 }
                 setListboxHasVisualFocus(true);
                 setActiveIndex((prev) => {
-                    if (prev === null)
-                        return options.length - 1;
-                    return prev <= 0 ? options.length - 1 : prev - 1;
+                    const next = prev === null
+                        ? options.length - 1
+                        : prev <= 0
+                            ? options.length - 1
+                            : prev - 1;
+                    setKeyboardActiveIndex === null || setKeyboardActiveIndex === void 0 ? void 0 : setKeyboardActiveIndex(() => next);
+                    return next;
                 });
                 break;
             }
@@ -64,6 +70,7 @@ function createDropdownKeydownHandler(params) {
             case 'ArrowRight': {
                 setListboxHasVisualFocus(false);
                 setActiveIndex(() => null);
+                setKeyboardActiveIndex === null || setKeyboardActiveIndex === void 0 ? void 0 : setKeyboardActiveIndex(() => null);
                 break;
             }
         }

package/Empty/icons/EmptyMainInitialDataIcon.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 const EmptyMainInitialDataIcon = forwardRef(function EmptyInitialDataIcon(props, ref) {
     const { className, size = 64, ...rest } = props;
-    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15033_10920", x1: "27.52", x2: "5.12", y1: "11.7333", y2: "52.6933", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15033_10920", x1: "43.2", x2: "38.2673", y1: "11.7333", y2: "52.0904", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsx("clipPath", { id: "clip0_15033_10920", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_15033_10920)", children: [jsx("path", { d: "M5.12 11.7333H27.52V52.6933H6.11999C5.56771 52.6933 5.12 52.2456 5.12 51.6933V11.7333Z", fill: "url(#paint0_linear_15033_10920)" }), jsx("path", { d: "M5.10416 11.7333H27.4282L22.3184 27.5737C22.1852 27.9867 21.8007 28.2667 21.3667 28.2667H1.14414C0.465656 28.2667 -0.0158672 27.6054 0.192428 26.9597L5.10416 11.7333Z", fill: "#E5E7EB" }), jsx("path", { d: "M27.52 11.7333H58.88V51.6933C58.88 52.2456 58.4323 52.6933 57.88 52.6933H27.52V11.7333Z", fill: "url(#paint1_linear_15033_10920)" }), jsx("path", { d: "M27.4282 11.7333H58.8871L63.7988 26.9597C64.0071 27.6054 63.5255 28.2667 62.8471 28.2667H33.4897C33.0557 28.2667 32.6712 27.9867 32.5379 27.5737L27.4282 11.7333Z", fill: "#E5E7EB" })] })] }));
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15033_10920", x1: "27.52", x2: "5.12", y1: "11.7333", y2: "52.6933", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15033_10920", x1: "43.2", x2: "38.2673", y1: "11.7333", y2: "52.0904", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] }), jsx("clipPath", { id: "clip0_15033_10920", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_15033_10920)", children: [jsx("path", { d: "M5.12 11.7333H27.52V52.6933H6.11999C5.56771 52.6933 5.12 52.2456 5.12 51.6933V11.7333Z", fill: "url(#paint0_linear_15033_10920)" }), jsx("path", { d: "M5.10416 11.7333H27.4282L22.3184 27.5737C22.1852 27.9867 21.8007 28.2667 21.3667 28.2667H1.14414C0.465656 28.2667 -0.0158672 27.6054 0.192428 26.9597L5.10416 11.7333Z", fill: "#E5E7EB" }), jsx("path", { d: "M27.52 11.7333H58.88V51.6933C58.88 52.2456 58.4323 52.6933 57.88 52.6933H27.52V11.7333Z", fill: "url(#paint1_linear_15033_10920)" }), jsx("path", { d: "M27.4282 11.7333H58.8871L63.7988 26.9597C64.0071 27.6054 63.5255 28.2667 62.8471 28.2667H33.4897C33.0557 28.2667 32.6712 27.9867 32.5379 27.5737L27.4282 11.7333Z", fill: "#E5E7EB" })] })] }));
 });
 
 export { EmptyMainInitialDataIcon };

package/Empty/icons/EmptyMainNotificationIcon.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 const EmptyMainNotificationIcon = forwardRef(function EmptyMainNotificationIcon(props, ref) {
     const { className, size = 64, ...rest } = props;
-    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 44 47", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_8482_10235", x1: "22", x2: "20.7012", y1: "33", y2: "46.8785", children: [jsx("stop", { stopColor: "#9DA4AE" }), jsx("stop", { offset: "1", stopColor: "#E5E7EB" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_8482_10235", x1: "44", x2: "-3.06232", y1: "-1.43647e-06", y2: "35.9963", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] })] }), jsx("circle", { cx: "22", cy: "40", fill: "url(#paint0_linear_8482_10235)", r: "7" }), jsx("path", { d: "M6.69446 15.305C6.69446 6.85228 13.5467 0 21.9995 0C30.4522 0 37.3045 6.85228 37.3045 15.305V26.5731C37.3045 26.6145 37.3141 26.6552 37.3326 26.6922L43.2746 38.5521C43.6077 39.217 43.1242 40 42.3805 40H1.61938C0.875674 40 0.392197 39.2171 0.725289 38.5521L6.66632 26.6922C6.68483 26.6552 6.69446 26.6145 6.69446 26.5731V15.305Z", fill: "url(#paint1_linear_8482_10235)" })] }));
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 44 47", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_8482_10235", x1: "22", x2: "20.7012", y1: "33", y2: "46.8785", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral-subtle)" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_8482_10235", x1: "44", x2: "-3.06232", y1: "-1.43647e-06", y2: "35.9963", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] })] }), jsx("circle", { cx: "22", cy: "40", fill: "url(#paint0_linear_8482_10235)", r: "7" }), jsx("path", { d: "M6.69446 15.305C6.69446 6.85228 13.5467 0 21.9995 0C30.4522 0 37.3045 6.85228 37.3045 15.305V26.5731C37.3045 26.6145 37.3141 26.6552 37.3326 26.6922L43.2746 38.5521C43.6077 39.217 43.1242 40 42.3805 40H1.61938C0.875674 40 0.392197 39.2171 0.725289 38.5521L6.66632 26.6922C6.68483 26.6552 6.69446 26.6145 6.69446 26.5731V15.305Z", fill: "url(#paint1_linear_8482_10235)" })] }));
 });
 
 export { EmptyMainNotificationIcon };

package/Empty/icons/EmptyMainResultIcon.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 const EmptyMainResultIcon = forwardRef(function EmptyResultIcon(props, ref) {
     const { className, size = 64, ...rest } = props;
-    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_14988_13929", x1: "28.9684", x2: "24.6011", y1: "-4.50146", y2: "54.5206", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_14988_13929", x1: "32", x2: "30.1462", y1: "23.8542", y2: "64.7656", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsx("clipPath", { id: "clip0_14988_13929", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_14988_13929)", children: [jsx("path", { d: "M0 10.0332V53.8437C0 54.396 0.447713 54.8437 0.999998 54.8437L56.9368 54.8437C57.4891 54.8437 57.9368 54.396 57.9368 53.8437V14.8554C57.9368 14.3031 57.4891 13.8554 56.9368 13.8554H30.1099C29.8426 13.8554 29.5864 13.7483 29.3985 13.5582L25.2219 9.33041C25.034 9.14024 24.7778 9.0332 24.5105 9.0332H1C0.447715 9.0332 0 9.48092 0 10.0332Z", fill: "url(#paint0_linear_14988_13929)" }), jsx("path", { d: "M5.90507 24.6622C5.9969 24.1929 6.40821 23.8542 6.88646 23.8542H62.7854C63.4147 23.8542 63.8876 24.4286 63.7668 25.0463L58.0949 54.0357C58.0031 54.5051 57.5918 54.8437 57.1135 54.8437H1.21461C0.58527 54.8437 0.112379 54.2693 0.23322 53.6517L5.90507 24.6622Z", fill: "url(#paint1_linear_14988_13929)" })] })] }));
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_14988_13929", x1: "28.9684", x2: "24.6011", y1: "-4.50146", y2: "54.5206", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_14988_13929", x1: "32", x2: "30.1462", y1: "23.8542", y2: "64.7656", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] }), jsx("clipPath", { id: "clip0_14988_13929", children: jsx("rect", { fill: "white", height: "64", width: "64" }) })] }), jsxs("g", { clipPath: "url(#clip0_14988_13929)", children: [jsx("path", { d: "M0 10.0332V53.8437C0 54.396 0.447713 54.8437 0.999998 54.8437L56.9368 54.8437C57.4891 54.8437 57.9368 54.396 57.9368 53.8437V14.8554C57.9368 14.3031 57.4891 13.8554 56.9368 13.8554H30.1099C29.8426 13.8554 29.5864 13.7483 29.3985 13.5582L25.2219 9.33041C25.034 9.14024 24.7778 9.0332 24.5105 9.0332H1C0.447715 9.0332 0 9.48092 0 10.0332Z", fill: "url(#paint0_linear_14988_13929)" }), jsx("path", { d: "M5.90507 24.6622C5.9969 24.1929 6.40821 23.8542 6.88646 23.8542H62.7854C63.4147 23.8542 63.8876 24.4286 63.7668 25.0463L58.0949 54.0357C58.0031 54.5051 57.5918 54.8437 57.1135 54.8437H1.21461C0.58527 54.8437 0.112379 54.2693 0.23322 53.6517L5.90507 24.6622Z", fill: "url(#paint1_linear_14988_13929)" })] })] }));
 });
 
 export { EmptyMainResultIcon };

package/Empty/icons/EmptyMainSystemIcon.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 const EmptyMainSystemIcon = forwardRef(function EmptySystemIcon(props, ref) {
     const { className, size = 64, ...rest } = props;
-    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15103_25151", x1: "20.9997", x2: "17.2887", y1: "22.9988", y2: "62.6527", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15103_25151", x1: "46.9988", x2: "44.0018", y1: "0.845703", y2: "32.8715", children: [jsx("stop", { stopColor: "#E5E7EB" }), jsx("stop", { offset: "1", stopColor: "#9DA4AE" })] })] }), jsx("path", { d: "M28.5453 24.2114C29.025 24.34 29.3377 24.8011 29.2796 25.2944L28.9089 28.4387C28.8618 28.8389 29.061 29.2259 29.4033 29.4385C30.3233 30.01 31.1807 30.6725 31.9633 31.4135C32.237 31.6727 32.628 31.7729 32.9875 31.6594L36.1757 30.6527C36.623 30.5114 37.1083 30.7001 37.3429 31.1063L39.6193 35.0496C39.8676 35.4796 39.7627 36.0268 39.3729 36.3345L36.8886 38.2954C36.5722 38.5452 36.4395 38.9599 36.5314 39.3524C36.8056 40.5238 36.9512 41.7448 36.9512 42.9998C36.9512 43.1076 37.0086 43.2069 37.1042 43.2566L40.4602 45.0005C40.8765 45.2168 41.0864 45.6935 40.965 46.1467L39.7864 50.545C39.6578 51.0248 39.1967 51.3375 38.7034 51.2793L35.5592 50.9087C35.1589 50.8615 34.7719 51.0608 34.5593 51.4032C33.9876 52.3238 33.3249 53.1817 32.5836 53.9647C32.3243 54.2386 32.224 54.6298 32.3378 54.9894L33.3456 58.1761C33.4871 58.6236 33.2985 59.1092 32.8921 59.3438L28.9482 61.6202C28.5181 61.8684 27.9711 61.7634 27.6634 61.3737L25.7024 58.8893C25.4526 58.5729 25.0379 58.4402 24.6454 58.5322C23.4743 58.8066 22.2536 58.9528 20.999 58.9529C20.8906 58.9529 20.7908 59.0106 20.7408 59.1068L18.9983 62.4608C18.7819 62.8771 18.3053 63.0871 17.852 62.9657L13.4535 61.7871C12.9739 61.6585 12.6612 61.1975 12.7192 60.7043L13.0893 57.5587C13.1364 57.1586 12.9372 56.7717 12.5949 56.5592C11.6746 55.9877 10.8168 55.3254 10.034 54.5843C9.76014 54.325 9.36898 54.2247 9.00937 54.3384L5.82349 55.3455C5.37613 55.487 4.8906 55.2983 4.65603 54.892L2.37963 50.9489C2.13136 50.5188 2.23626 49.9718 2.62599 49.6641L5.10963 47.7031C5.42595 47.4533 5.55855 47.0387 5.46669 46.6463C5.19255 45.4751 5.04691 44.2544 5.04688 42.9998C5.04688 42.8907 4.98784 42.7903 4.89111 42.7401L1.53887 40.998C1.12256 40.7817 0.912625 40.305 1.03405 39.8519L2.21267 35.4533C2.34121 34.9736 2.80227 34.661 3.29546 34.719L6.44003 35.089C6.84019 35.1361 7.22705 34.9369 7.43962 34.5946C8.01115 33.6743 8.67359 32.8164 9.41466 32.0336C9.67386 31.7598 9.77413 31.3688 9.66058 31.0093L8.65395 27.8221C8.51268 27.3748 8.70131 26.8894 9.10755 26.6549L13.0507 24.3785C13.4808 24.1302 14.028 24.2351 14.3357 24.625L16.2957 27.1082C16.5454 27.4246 16.9601 27.5573 17.3527 27.4655C18.5238 27.1916 19.7445 27.0467 20.999 27.0466C21.1074 27.0466 21.2073 26.9879 21.2573 26.8917L23.0007 23.5375C23.2171 23.1213 23.6937 22.9114 24.1468 23.0328L28.5453 24.2114ZM20.999 35.8386C17.0447 35.8389 13.839 39.0452 13.8389 42.9998C13.8391 46.9542 17.0448 50.1596 20.999 50.1599C24.9533 50.1597 28.1599 46.9542 28.1602 42.9998C28.16 39.0452 24.9534 35.8389 20.999 35.8386Z", fill: "url(#paint0_linear_15103_25151)" }), jsx("path", { d: "M51.5436 1.43766C52.0327 1.52392 52.3844 1.95611 52.3695 2.45257L52.3023 4.68433C52.2901 5.0873 52.5229 5.45489 52.8806 5.64086C53.5763 6.00255 54.234 6.42699 54.8475 6.90552C55.1449 7.13744 55.5428 7.20387 55.8912 7.05945L58.1098 6.13956C58.5431 5.95991 59.043 6.10557 59.312 6.48982L61.2159 9.20937C61.5007 9.61623 61.4437 10.1705 61.0822 10.5109L59.4567 12.0414C59.163 12.318 59.0677 12.7429 59.1898 13.1274C59.4235 13.863 59.5926 14.6272 59.69 15.4137C59.7364 15.7884 59.9711 16.1173 60.32 16.2615L62.534 17.1766C62.9676 17.3558 63.2184 17.8124 63.1369 18.2744L62.5604 21.5436C62.4741 22.0327 62.0419 22.3844 61.5455 22.3695L59.3127 22.3023C58.9097 22.2901 58.5422 22.5229 58.3562 22.8806C57.9946 23.5762 57.5703 24.2339 57.0918 24.8474C56.8597 25.1448 56.7933 25.5429 56.9379 25.8914L57.8582 28.1097C58.038 28.5431 57.8924 29.0431 57.5081 29.3122L54.7885 31.216C54.3817 31.5007 53.8276 31.4439 53.4871 31.0824L51.9556 29.4564C51.6791 29.1628 51.2543 29.0676 50.8699 29.1896C50.1346 29.423 49.3706 29.5918 48.5844 29.6891C48.2097 29.7355 47.8807 29.9701 47.7365 30.3191L46.8214 32.5339C46.6422 32.9676 46.1856 33.2183 45.7235 33.1369L42.4542 32.5603C41.9652 32.4741 41.6135 32.0421 41.6283 31.5457L41.695 29.3125C41.707 28.9097 41.4743 28.5422 41.1166 28.3564C40.4207 27.9947 39.7626 27.5704 39.1489 27.0918C38.8513 26.8598 38.4531 26.7934 38.1047 26.938L35.8884 27.858C35.455 28.0379 34.9549 27.8923 34.6858 27.5079L32.782 24.7884C32.4973 24.3817 32.5541 23.8276 32.9154 23.4871L34.5408 21.9556C34.8343 21.6791 34.9295 21.2543 34.8074 20.87C34.5738 20.1346 34.4045 19.3706 34.3071 18.5843C34.2606 18.2096 34.026 17.8807 33.6771 17.7365L31.4639 16.8215C31.0304 16.6423 30.7797 16.1857 30.8612 15.7237L31.4377 12.4542C31.5239 11.9652 31.956 11.6135 32.4523 11.6283L34.6846 11.695C35.0874 11.707 35.4549 11.4743 35.6407 11.1166C36.0024 10.4207 36.4267 9.76253 36.9054 9.14874C37.1373 8.85127 37.2038 8.45317 37.0592 8.10474L36.1397 5.88822C35.96 5.45493 36.1056 4.95495 36.4898 4.68589L39.2086 2.78214C39.6154 2.49733 40.1695 2.55412 40.51 2.91551L42.0414 4.54078C42.318 4.8343 42.7427 4.92944 43.1271 4.80734C43.8625 4.57374 44.6267 4.40454 45.413 4.30706C45.7876 4.26062 46.1164 4.02615 46.2607 3.67739L47.1764 1.46366C47.3558 1.03023 47.8122 0.779666 48.2742 0.861125L51.5436 1.43766ZM46.999 11.2578C43.8288 11.2578 41.258 13.8288 41.2578 16.999C41.258 20.1693 43.8287 22.7392 46.999 22.7393C50.169 22.7389 52.7391 20.1691 52.7393 16.999C52.739 13.829 50.169 11.2582 46.999 11.2578Z", fill: "url(#paint1_linear_15103_25151)" })] }));
+    return (jsxs("svg", { ...rest, className: className, fill: "none", height: size, ref: ref, viewBox: "0 0 64 64", width: size, xmlns: "http://www.w3.org/2000/svg", children: [jsxs("defs", { children: [jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint0_linear_15103_25151", x1: "20.9997", x2: "17.2887", y1: "22.9988", y2: "62.6527", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] }), jsxs("linearGradient", { gradientUnits: "userSpaceOnUse", id: "paint1_linear_15103_25151", x1: "46.9988", x2: "44.0018", y1: "0.845703", y2: "32.8715", children: [jsx("stop", { stopColor: "var(--mzn-color-background-neutral-subtle)" }), jsx("stop", { offset: "1", stopColor: "var(--mzn-color-background-neutral)" })] })] }), jsx("path", { d: "M28.5453 24.2114C29.025 24.34 29.3377 24.8011 29.2796 25.2944L28.9089 28.4387C28.8618 28.8389 29.061 29.2259 29.4033 29.4385C30.3233 30.01 31.1807 30.6725 31.9633 31.4135C32.237 31.6727 32.628 31.7729 32.9875 31.6594L36.1757 30.6527C36.623 30.5114 37.1083 30.7001 37.3429 31.1063L39.6193 35.0496C39.8676 35.4796 39.7627 36.0268 39.3729 36.3345L36.8886 38.2954C36.5722 38.5452 36.4395 38.9599 36.5314 39.3524C36.8056 40.5238 36.9512 41.7448 36.9512 42.9998C36.9512 43.1076 37.0086 43.2069 37.1042 43.2566L40.4602 45.0005C40.8765 45.2168 41.0864 45.6935 40.965 46.1467L39.7864 50.545C39.6578 51.0248 39.1967 51.3375 38.7034 51.2793L35.5592 50.9087C35.1589 50.8615 34.7719 51.0608 34.5593 51.4032C33.9876 52.3238 33.3249 53.1817 32.5836 53.9647C32.3243 54.2386 32.224 54.6298 32.3378 54.9894L33.3456 58.1761C33.4871 58.6236 33.2985 59.1092 32.8921 59.3438L28.9482 61.6202C28.5181 61.8684 27.9711 61.7634 27.6634 61.3737L25.7024 58.8893C25.4526 58.5729 25.0379 58.4402 24.6454 58.5322C23.4743 58.8066 22.2536 58.9528 20.999 58.9529C20.8906 58.9529 20.7908 59.0106 20.7408 59.1068L18.9983 62.4608C18.7819 62.8771 18.3053 63.0871 17.852 62.9657L13.4535 61.7871C12.9739 61.6585 12.6612 61.1975 12.7192 60.7043L13.0893 57.5587C13.1364 57.1586 12.9372 56.7717 12.5949 56.5592C11.6746 55.9877 10.8168 55.3254 10.034 54.5843C9.76014 54.325 9.36898 54.2247 9.00937 54.3384L5.82349 55.3455C5.37613 55.487 4.8906 55.2983 4.65603 54.892L2.37963 50.9489C2.13136 50.5188 2.23626 49.9718 2.62599 49.6641L5.10963 47.7031C5.42595 47.4533 5.55855 47.0387 5.46669 46.6463C5.19255 45.4751 5.04691 44.2544 5.04688 42.9998C5.04688 42.8907 4.98784 42.7903 4.89111 42.7401L1.53887 40.998C1.12256 40.7817 0.912625 40.305 1.03405 39.8519L2.21267 35.4533C2.34121 34.9736 2.80227 34.661 3.29546 34.719L6.44003 35.089C6.84019 35.1361 7.22705 34.9369 7.43962 34.5946C8.01115 33.6743 8.67359 32.8164 9.41466 32.0336C9.67386 31.7598 9.77413 31.3688 9.66058 31.0093L8.65395 27.8221C8.51268 27.3748 8.70131 26.8894 9.10755 26.6549L13.0507 24.3785C13.4808 24.1302 14.028 24.2351 14.3357 24.625L16.2957 27.1082C16.5454 27.4246 16.9601 27.5573 17.3527 27.4655C18.5238 27.1916 19.7445 27.0467 20.999 27.0466C21.1074 27.0466 21.2073 26.9879 21.2573 26.8917L23.0007 23.5375C23.2171 23.1213 23.6937 22.9114 24.1468 23.0328L28.5453 24.2114ZM20.999 35.8386C17.0447 35.8389 13.839 39.0452 13.8389 42.9998C13.8391 46.9542 17.0448 50.1596 20.999 50.1599C24.9533 50.1597 28.1599 46.9542 28.1602 42.9998C28.16 39.0452 24.9534 35.8389 20.999 35.8386Z", fill: "url(#paint0_linear_15103_25151)" }), jsx("path", { d: "M51.5436 1.43766C52.0327 1.52392 52.3844 1.95611 52.3695 2.45257L52.3023 4.68433C52.2901 5.0873 52.5229 5.45489 52.8806 5.64086C53.5763 6.00255 54.234 6.42699 54.8475 6.90552C55.1449 7.13744 55.5428 7.20387 55.8912 7.05945L58.1098 6.13956C58.5431 5.95991 59.043 6.10557 59.312 6.48982L61.2159 9.20937C61.5007 9.61623 61.4437 10.1705 61.0822 10.5109L59.4567 12.0414C59.163 12.318 59.0677 12.7429 59.1898 13.1274C59.4235 13.863 59.5926 14.6272 59.69 15.4137C59.7364 15.7884 59.9711 16.1173 60.32 16.2615L62.534 17.1766C62.9676 17.3558 63.2184 17.8124 63.1369 18.2744L62.5604 21.5436C62.4741 22.0327 62.0419 22.3844 61.5455 22.3695L59.3127 22.3023C58.9097 22.2901 58.5422 22.5229 58.3562 22.8806C57.9946 23.5762 57.5703 24.2339 57.0918 24.8474C56.8597 25.1448 56.7933 25.5429 56.9379 25.8914L57.8582 28.1097C58.038 28.5431 57.8924 29.0431 57.5081 29.3122L54.7885 31.216C54.3817 31.5007 53.8276 31.4439 53.4871 31.0824L51.9556 29.4564C51.6791 29.1628 51.2543 29.0676 50.8699 29.1896C50.1346 29.423 49.3706 29.5918 48.5844 29.6891C48.2097 29.7355 47.8807 29.9701 47.7365 30.3191L46.8214 32.5339C46.6422 32.9676 46.1856 33.2183 45.7235 33.1369L42.4542 32.5603C41.9652 32.4741 41.6135 32.0421 41.6283 31.5457L41.695 29.3125C41.707 28.9097 41.4743 28.5422 41.1166 28.3564C40.4207 27.9947 39.7626 27.5704 39.1489 27.0918C38.8513 26.8598 38.4531 26.7934 38.1047 26.938L35.8884 27.858C35.455 28.0379 34.9549 27.8923 34.6858 27.5079L32.782 24.7884C32.4973 24.3817 32.5541 23.8276 32.9154 23.4871L34.5408 21.9556C34.8343 21.6791 34.9295 21.2543 34.8074 20.87C34.5738 20.1346 34.4045 19.3706 34.3071 18.5843C34.2606 18.2096 34.026 17.8807 33.6771 17.7365L31.4639 16.8215C31.0304 16.6423 30.7797 16.1857 30.8612 15.7237L31.4377 12.4542C31.5239 11.9652 31.956 11.6135 32.4523 11.6283L34.6846 11.695C35.0874 11.707 35.4549 11.4743 35.6407 11.1166C36.0024 10.4207 36.4267 9.76253 36.9054 9.14874C37.1373 8.85127 37.2038 8.45317 37.0592 8.10474L36.1397 5.88822C35.96 5.45493 36.1056 4.95495 36.4898 4.68589L39.2086 2.78214C39.6154 2.49733 40.1695 2.55412 40.51 2.91551L42.0414 4.54078C42.318 4.8343 42.7427 4.92944 43.1271 4.80734C43.8625 4.57374 44.6267 4.40454 45.413 4.30706C45.7876 4.26062 46.1164 4.02615 46.2607 3.67739L47.1764 1.46366C47.3558 1.03023 47.8122 0.779666 48.2742 0.861125L51.5436 1.43766ZM46.999 11.2578C43.8288 11.2578 41.258 13.8288 41.2578 16.999C41.258 20.1693 43.8287 22.7392 46.999 22.7393C50.169 22.7389 52.7391 20.1691 52.7393 16.999C52.739 13.829 50.169 11.2582 46.999 11.2578Z", fill: "url(#paint1_linear_15103_25151)" })] }));
 });
 
 export { EmptyMainSystemIcon };

package/FilterArea/Filter.d.ts

@@ -13,7 +13,7 @@ export interface FilterProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
      */
     children: ReactElement<FormFieldProps> | ReactElement<FormFieldProps>[];
     /**
-     * Layout control - Whether the field should automatically expand to fill the entire row (equivalent to span={12}).
+     * Layout control - Whether the field should automatically expand to fill the entire row (equivalent to span={6}).
      * @default false
      */
     grow?: boolean;
@@ -22,11 +22,34 @@ export interface FilterProps extends Omit<NativeElementPropsWithoutKeyAndRef<'di
      */
     minWidth?: string | number;
     /**
-     * Layout control - Number of columns the field occupies in the Grid (1-12, Grid has 12 columns total).
+     * Layout control - Number of columns the field occupies in the Grid (1-6, Grid has 6 columns total).
      * This property is ignored when grow is true.
      * @default 2
      */
     span?: FilterSpan;
 }
+/**
+ * 單一篩選條件元件，用於在 FilterLine 中定義欄位的佔位寬度。
+ *
+ * 使用 6 欄 Grid，`span` 決定欄位佔用幾欄（1–6）；
+ * `grow` 設為 `true` 時欄位自動填滿整行。
+ * 從 FilterAreaContext 繼承 `size`，統一套用至內部的輸入元件。
+ *
+ * @example
+ * ```tsx
+ * import { Filter } from '@mezzanine-ui/react';
+ * import { FormField } from '@mezzanine-ui/react';
+ * import Input from '@mezzanine-ui/react/Input';
+ *
+ * <Filter span={2}>
+ *   <FormField label="名稱" name="name" layout="horizontal">
+ *     <Input placeholder="請輸入" />
+ *   </FormField>
+ * </Filter>
+ * ```
+ *
+ * @see {@link FilterLine} 包含 Filter 的行容器
+ * @see {@link FilterArea} 管理整個篩選器的容器
+ */
 declare const Filter: import("react").ForwardRefExoticComponent<FilterProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Filter;