@moneyforward/mfui-components 3.36.1 → 3.37.0

package/dist/src/SelectBox/SelectBox.js

@@ -25,6 +25,8 @@ import { SelectBoxOptionGroup } from './SelectBoxOptionGroup';
 import { isOptionDisabled } from './utils/isSelectableOption';
 import { useVirtualizedOptions } from './hooks/useVirtualizedOptions';
 import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
+import { getGroupLabelId } from '../utilities/dom/getGroupLabelId';
+import { OptionGroupLabelDescriptions } from '../shared/OptionGroupLabelDescriptions';
 const DEFAULT_SCROLL_OPTIONS = {
     behavior: 'auto',
     block: 'center',
@@ -85,48 +87,79 @@ export const SelectBox = forwardRef((props, ref) => {
     // Create a flat structure for virtualization that includes both group headers and options
     const createVirtualizedItems = useCallback(() => {
         if (!shouldVirtualize)
-            return [];
+            return { items: [], rowIndexByOptionIndex: new Map() };
         const items = [];
-        filteredOptions.forEach((option) => {
+        // An option is described by the group label it is rendered under, which is the last group label
+        // rendered before it. Options nested in a group and options that follow a group without being
+        // nested in it are indistinguishable in the rendered list, so they are treated the same way.
+        let currentGroupLabelId;
+        // Group labels occupy a row of their own, so the index of an option in `flatOptions` is not the
+        // index of its row. Callers that scroll to an option know the former and need the latter.
+        const rowIndexByOptionIndex = new Map();
+        // `findFlatOptionIndexByValue` returns -1 for an option without a value. Those are not registered,
+        // so scrolling to them stays out of bounds and is rejected, as it was before this mapping existed.
+        const registerRowIndex = (flatOptionIndex) => {
+            if (flatOptionIndex >= 0)
+                rowIndexByOptionIndex.set(flatOptionIndex, items.length);
+        };
+        filteredOptions.forEach((option, optionIndex) => {
             if (!option)
                 return;
             if ('options' in option && Array.isArray(option.options)) {
+                currentGroupLabelId = getGroupLabelId(listBoxId, optionIndex);
                 // Add group header
                 items.push({
                     type: 'group',
                     option,
+                    groupLabelId: currentGroupLabelId,
                 });
                 // Add group options
                 option.options.forEach((nestedOption) => {
                     const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, nestedOption);
+                    registerRowIndex(flatOptionIndex);
                     items.push({
                         type: 'option',
                         option: nestedOption,
                         originalIndex: flatOptionIndex,
+                        groupLabelId: currentGroupLabelId,
                     });
                 });
             }
             else {
                 // Regular option
                 const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, option);
+                registerRowIndex(flatOptionIndex);
                 items.push({
                     type: 'option',
                     option,
                     originalIndex: flatOptionIndex,
+                    groupLabelId: currentGroupLabelId,
                 });
             }
         });
-        return items;
-    }, [filteredOptions, shouldVirtualize, valueToIndexMap]);
-    const virtualizedItems = useMemo(() => createVirtualizedItems(), [createVirtualizedItems]);
+        return { items, rowIndexByOptionIndex };
+    }, [filteredOptions, shouldVirtualize, valueToIndexMap, listBoxId]);
+    const { items: virtualizedItems, rowIndexByOptionIndex } = useMemo(() => createVirtualizedItems(), [createVirtualizedItems]);
+    // The options reference their group label with `aria-describedby`. A virtualized option list can
+    // unmount the visible label row, so there the referenced element is rendered outside the list
+    // instead - see `OptionGroupLabelDescriptions`. Only one of the two ever carries the id.
+    const rendersHiddenGroupLabels = shouldVirtualize;
+    const optionGroupLabels = useMemo(() => filteredOptions.flatMap((option, optionIndex) => option && 'options' in option && Array.isArray(option.options)
+        ? [{ id: getGroupLabelId(listBoxId, optionIndex), label: option.label }]
+        : []), [filteredOptions, listBoxId]);
     // Initialize virtualization
     const { virtualizer, virtualItems, totalSize, scrollToIndex, isVirtualized } = useVirtualizedOptions({
         enabled: shouldVirtualize,
         parentRef: scrollWrapperRef,
-        flatOptions,
+        rowCount: virtualizedItems.length,
         estimateSize: virtualizationOptions?.estimateSize,
         overscan: virtualizationOptions?.overscan,
     });
+    // Keyboard navigation and type-ahead know the index of an option in `flatOptions`, which is not
+    // the index of its row once group labels are rendered.
+    const scrollToOptionIndex = useCallback((optionIndex, options) => {
+        scrollToIndex(rowIndexByOptionIndex.get(optionIndex) ?? optionIndex, options);
+    }, [scrollToIndex, rowIndexByOptionIndex]);
     // Extract infinite scroll configuration with defaults
     const baseEnabledInfiniteScroll = infiniteScroll?.enabled ?? false;
     const onLoadMore = infiniteScroll?.onLoadMore;
@@ -155,7 +188,7 @@ export const SelectBox = forwardRef((props, ref) => {
     }, [onChange, closeOptionPanel]);
     const { handleTypeAhead, cleanup } = useTypeAhead({
         options: flatOptions,
-        scrollToIndex,
+        scrollToIndex: scrollToOptionIndex,
         isVirtualized,
         onSelectOption: (selectedOption) => {
             if (selectedOption.value !== undefined) {
@@ -195,7 +228,7 @@ export const SelectBox = forwardRef((props, ref) => {
         onCloseOptionPanel: closeOptionPanel,
         optionPanelRef,
         searchInputRef,
-        scrollToIndex,
+        scrollToIndex: scrollToOptionIndex,
         isVirtualized,
     });
     const { handleOnKeyDown: handleKeyDownMenu } = useFocusTrap({
@@ -221,7 +254,7 @@ export const SelectBox = forwardRef((props, ref) => {
         const virtualizedItem = virtualizedItems[virtualItem.index];
         if (!virtualizedItem)
             return null;
-        const { type, option, originalIndex } = virtualizedItem;
+        const { type, option, originalIndex, groupLabelId } = virtualizedItem;
         if (type === 'group') {
             return (_jsx("div", { ref: virtualizer?.measureElement, "data-index": virtualItem.index, style: {
                     position: 'absolute',
@@ -229,7 +262,7 @@ export const SelectBox = forwardRef((props, ref) => {
                     left: 0,
                     width: '100%',
                     transform: `translateY(${String(virtualItem.start)}px)`,
-                }, children: _jsx("li", { className: cx(classes.listItem, 'mfui-SelectBox__listItem'), "data-mfui-group-label": "true", "aria-hidden": "true", children: _jsx(Typography, { variant: "label", children: option.label }) }) }, virtualItem.key));
+                }, children: _jsx("li", { role: "presentation", className: cx(classes.listItem, 'mfui-SelectBox__listItem'), "data-mfui-group-label": "true", children: _jsx(Typography, { variant: "label", children: option.label }) }) }, virtualItem.key));
         }
         return (_jsx("div", { ref: virtualizer?.measureElement, "data-index": virtualItem.index, style: {
                 position: 'absolute',
@@ -237,7 +270,7 @@ export const SelectBox = forwardRef((props, ref) => {
                 left: 0,
                 width: '100%',
                 transform: `translateY(${String(virtualItem.start)}px)`,
-            }, children: _jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: originalIndex ?? virtualItem.index, classes: classes, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
+            }, children: _jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: originalIndex ?? virtualItem.index, classes: classes, groupLabelId: groupLabelId, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
                     handleTypeAhead(event.nativeEvent);
                     createKeyDownHandler(option)(event);
                 } }) }, virtualItem.key));
@@ -255,29 +288,35 @@ export const SelectBox = forwardRef((props, ref) => {
         virtualizer,
     ]);
     // Render non-virtualized items - extracted for better maintainability
-    const renderNonVirtualizedItems = useCallback(() => filteredOptions.map((option, optionIndex) => {
-        if (!option)
-            return null;
-        if ('options' in option && Array.isArray(option.options)) {
-            return (_jsx(React.Fragment, { children: _jsx(SelectBoxOptionGroup, { groupOption: option, selectedOption: localSelectedOption, valueToIndexMap: valueToIndexMap, tabbableOptionIndex: tabbableOptionIndex, classes: classes, renderOption: renderOption, findFlatOptionIndexByValue: (_, option) => findFlatOptionIndexByValue(valueToIndexMap, option), onOptionFocus: handleOptionFocus, onOptionClick: handleSelectOption, onOptionKeyDown: (option) => (event) => {
+    const renderNonVirtualizedItems = useCallback(() => {
+        let currentGroupLabelId;
+        return filteredOptions.map((option, optionIndex) => {
+            if (!option)
+                return null;
+            if ('options' in option && Array.isArray(option.options)) {
+                currentGroupLabelId = getGroupLabelId(listBoxId, optionIndex);
+                return (_jsx(React.Fragment, { children: _jsx(SelectBoxOptionGroup, { groupOption: option, selectedOption: localSelectedOption, valueToIndexMap: valueToIndexMap, tabbableOptionIndex: tabbableOptionIndex, classes: classes, groupLabelId: currentGroupLabelId, hasHiddenGroupLabel: rendersHiddenGroupLabels, renderOption: renderOption, findFlatOptionIndexByValue: (_, option) => findFlatOptionIndexByValue(valueToIndexMap, option), onOptionFocus: handleOptionFocus, onOptionClick: handleSelectOption, onOptionKeyDown: (option) => (event) => {
+                            handleTypeAhead(event.nativeEvent);
+                            createKeyDownHandler(option)(event);
+                        } }) }, `group-label-${option.label}-${String(optionIndex)}`));
+            }
+            if (!('options' in option)) {
+                const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, option);
+                return (_jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, groupLabelId: currentGroupLabelId, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
                         handleTypeAhead(event.nativeEvent);
                         createKeyDownHandler(option)(event);
-                    } }) }, `group-label-${option.label}-${String(optionIndex)}`));
-        }
-        if (!('options' in option)) {
-            const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, option);
-            return (_jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
-                    handleTypeAhead(event.nativeEvent);
-                    createKeyDownHandler(option)(event);
-                } }, option.value ?? `option-${option.label}-${String(optionIndex)}`));
-        }
-        return null;
-    }), [
+                    } }, option.value ?? `option-${option.label}-${String(optionIndex)}`));
+            }
+            return null;
+        });
+    }, [
         filteredOptions,
         localSelectedOption,
         valueToIndexMap,
         tabbableOptionIndex,
         classes,
+        listBoxId,
+        rendersHiddenGroupLabels,
         renderOption,
         handleOptionFocus,
         handleSelectOption,
@@ -329,7 +368,7 @@ export const SelectBox = forwardRef((props, ref) => {
                                 !isVirtualized && renderInfiniteScrollLoading(),
                                 !isVirtualized && renderInfiniteScrollError(),
                             ].filter(Boolean)
-                            : [renderEmptyMessage(), !isVirtualized && renderInfiniteScrollError()].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null] }));
+                            : [renderEmptyMessage(), !isVirtualized && renderInfiniteScrollError()].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
         onChange?.(null);

package/dist/src/SelectBox/SelectBoxOption.d.ts

@@ -23,6 +23,11 @@ type SelectBoxOptionProps<T extends string | number | undefined = string, Additi
     classes: {
         listItem: string;
     };
+    /**
+     * Id of the hidden element that carries the label of the option group this option is rendered
+     * under. See `OptionGroupLabelDescriptions`.
+     */
+    groupLabelId?: string;
     /**
      * Custom render function for the option.
      */

package/dist/src/SelectBox/SelectBoxOption.js

@@ -10,7 +10,7 @@ import { isOptionDisabled } from './utils/isSelectableOption';
  * Individual option component for SelectBox.
  * Memoized to prevent unnecessary re-renders when other options change.
  */
-function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex, optionIndex, classes, renderOption, onFocus, onClick, onKeyDown, }) {
+function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex, optionIndex, classes, groupLabelId, renderOption, onFocus, onClick, onKeyDown, }) {
     const isDisabled = isOptionDisabled(option);
     const tabIndex = useMemo(() => (isDisabled ? -1 : optionIndex === tabbableOptionIndex ? 0 : -1), [optionIndex, tabbableOptionIndex, isDisabled]);
     const handleFocus = useCallback(() => {
@@ -26,7 +26,7 @@ function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex
     // Type-safe property access to satisfy eslint rules
     const optionValue = 'value' in option && option.value !== undefined ? String(option.value) : undefined;
     const optionLabel = option.label;
-    return (_jsx(FocusIndicator, { position: "inside", children: _jsx("li", { role: "option", "data-value": optionValue, className: cx(classes.listItem, 'mfui-SelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: tabIndex, onFocus: handleFocus, onKeyDown: onKeyDown, onClick: handleClick, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx(Current, { "aria-hidden": true }), _jsx(Typography, { variant: "body", children: optionLabel })] })) }) }));
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx("li", { role: "option", "data-value": optionValue, className: cx(classes.listItem, 'mfui-SelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-describedby": groupLabelId, tabIndex: tabIndex, onFocus: handleFocus, onKeyDown: onKeyDown, onClick: handleClick, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx(Current, { "aria-hidden": true }), _jsx(Typography, { variant: "body", children: optionLabel })] })) }) }));
 }
 export const SelectBoxOptionComponent = memo(SelectBoxOptionComponentInner);
 SelectBoxOptionComponent.displayName = 'SelectBoxOptionComponent';

package/dist/src/SelectBox/SelectBoxOptionGroup.d.ts

@@ -25,6 +25,15 @@ type SelectBoxOptionGroupProps<T extends string | number | undefined = string, A
     classes: {
         listItem: string;
     };
+    /**
+     * Id of the element that carries the label of this group, referenced by its options.
+     */
+    groupLabelId: string;
+    /**
+     * Whether that element is rendered outside the option list. When it is not, the label row below
+     * carries the id itself. See `OptionGroupLabelDescriptions`.
+     */
+    hasHiddenGroupLabel: boolean;
     /**
      * Custom render function for options.
      */

package/dist/src/SelectBox/SelectBoxOptionGroup.js

@@ -8,11 +8,14 @@ import { SelectBoxOptionComponent } from './SelectBoxOption';
  * Renders a group label followed by its nested options.
  * Memoized to prevent unnecessary re-renders.
  */
-function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMap, tabbableOptionIndex, classes, renderOption, onOptionFocus, onOptionClick, onOptionKeyDown, findFlatOptionIndexByValue, }) {
+function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMap, tabbableOptionIndex, classes, groupLabelId, hasHiddenGroupLabel, renderOption, onOptionFocus, onOptionClick, onOptionKeyDown, findFlatOptionIndexByValue, }) {
     // Type-safe property access to satisfy eslint rules
     const groupLabel = groupOption.label;
     const nestedOptions = groupOption.options;
-    return (_jsxs(_Fragment, { children: [_jsx("li", { className: classes.listItem, "data-mfui-group-label": "true", "aria-hidden": "true", children: _jsx(Typography, { variant: "label", children: groupLabel }) }), nestedOptions.map((nestedOption, index) => {
+    // See `OptionGroupLabelDescriptions` for why this row is exposed to assistive technology, why
+    // `role="presentation"` replaces the `aria-hidden` it used to carry, and when the id the options
+    // reference lives on a separate element instead of on this row.
+    return (_jsxs(_Fragment, { children: [_jsx("li", { id: hasHiddenGroupLabel ? undefined : groupLabelId, role: "presentation", className: classes.listItem, "data-mfui-group-label": "true", children: _jsx(Typography, { variant: "label", children: groupLabel }) }), nestedOptions.map((nestedOption, index) => {
                 if (!nestedOption)
                     return null;
                 const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, nestedOption);
@@ -20,7 +23,7 @@ function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMa
                 const optionLabel = nestedOption.label;
                 const keyValue = optionValue !== undefined ? String(optionValue) : `${optionLabel}-${String(index)}`;
                 const isSelected = selectedOption && 'value' in selectedOption ? selectedOption.value === optionValue : false;
-                return (_jsx(SelectBoxOptionComponent, { option: nestedOption, isSelected: isSelected, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, renderOption: renderOption, onFocus: onOptionFocus, onClick: onOptionClick, onKeyDown: onOptionKeyDown(nestedOption) }, keyValue));
+                return (_jsx(SelectBoxOptionComponent, { option: nestedOption, isSelected: isSelected, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, groupLabelId: groupLabelId, renderOption: renderOption, onFocus: onOptionFocus, onClick: onOptionClick, onKeyDown: onOptionKeyDown(nestedOption) }, keyValue));
             })] }));
 }
 export const SelectBoxOptionGroup = memo(SelectBoxOptionGroupInner);

package/dist/src/SelectBox/hooks/useVirtualizedOptions.d.ts

@@ -1,7 +1,7 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { type RefObject } from 'react';
-import { type BasedAdditionalProps, type FlatOption, type VirtualOptionTypes } from '../SelectBox.types';
-export type UseVirtualizedOptionsParams<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = {
+import { type VirtualOptionTypes } from '../SelectBox.types';
+export type UseVirtualizedOptionsParams = {
     /**
      * Enable virtualization for the option list
      */
@@ -11,9 +11,10 @@ export type UseVirtualizedOptionsParams<T extends string | number | undefined =
      */
     parentRef: RefObject<HTMLElement | null>;
     /**
-     * Flat array of all options
+     * Number of rows the option list renders. Group labels are rows too, so this is not the number of
+     * options: sizing the scroll area by the option count alone makes the last rows unreachable.
      */
-    flatOptions: FlatOption<T, AdditionalProps>[];
+    rowCount: number;
 } & Partial<VirtualOptionTypes>;
 export type UseVirtualizedOptionsReturn = {
     /**
@@ -54,10 +55,10 @@ export type UseVirtualizedOptionsReturn = {
  * const { virtualItems, totalSize, scrollToIndex, isVirtualized } = useVirtualizedOptions({
  *   enabled: true,
  *   parentRef: optionPanelRef,
- *   flatOptions,
+ *   rowCount: virtualizedItems.length,
  *   estimateSize: () => 36, // or (index) => index < 10 ? 40 : 36 for dynamic sizing
  *   overscan: 5,
  * });
  * ```
  */
-export declare function useVirtualizedOptions<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>({ enabled, parentRef, flatOptions, estimateSize, overscan, }: UseVirtualizedOptionsParams<T, AdditionalProps>): UseVirtualizedOptionsReturn;
+export declare function useVirtualizedOptions({ enabled, parentRef, rowCount, estimateSize, overscan, }: UseVirtualizedOptionsParams): UseVirtualizedOptionsReturn;

package/dist/src/SelectBox/hooks/useVirtualizedOptions.js

@@ -13,16 +13,16 @@ import { useCallback } from 'react';
  * const { virtualItems, totalSize, scrollToIndex, isVirtualized } = useVirtualizedOptions({
  *   enabled: true,
  *   parentRef: optionPanelRef,
- *   flatOptions,
+ *   rowCount: virtualizedItems.length,
  *   estimateSize: () => 36, // or (index) => index < 10 ? 40 : 36 for dynamic sizing
  *   overscan: 5,
  * });
  * ```
  */
-export function useVirtualizedOptions({ enabled, parentRef, flatOptions, estimateSize = () => 36, overscan = 5, }) {
+export function useVirtualizedOptions({ enabled, parentRef, rowCount, estimateSize = () => 36, overscan = 5, }) {
     // Always call useVirtualizer to maintain hook order, but with 0 count when disabled
     const virtualizer = useVirtualizer({
-        count: enabled ? flatOptions.length : 0,
+        count: enabled ? rowCount : 0,
         getScrollElement: () => 
         // parentRef points to scrollWrapper, which is always the scroll container
         // Structure: Popover root > optionPanel > scrollWrapper (parentRef) > listBox

package/dist/src/shared/OptionGroupLabelDescriptions/OptionGroupLabelDescriptions.d.ts

@@ -0,0 +1,37 @@
+type OptionGroupLabelDescriptionsProps = {
+    /**
+     * The option groups of the currently rendered option list, in the order they are rendered.
+     */
+    groups: {
+        id: string;
+        label: string;
+    }[];
+};
+/**
+ * Renders the option group labels of a virtualized listbox as hidden elements that the options of each
+ * group reference with `aria-describedby`, so that assistive technology can tell which group an option
+ * belongs to.
+ *
+ * The visible group label is a row of the option list, and a virtualized option list unmounts the rows
+ * that are scrolled out of view. Referencing the visible row directly would therefore leave the options
+ * of a long group pointing at an element that is no longer in the document. These elements live outside
+ * the option list instead, so the reference always resolves. A hidden element that is referenced directly
+ * by `aria-describedby` still contributes its text to the accessible description, which is what makes
+ * this work.
+ *
+ * A non-virtualized option list renders every row, so there the visible label row carries the id itself
+ * and this component renders nothing. Exactly one element carries a given group label id either way.
+ *
+ * These elements are hidden with `hidden`, not visually hidden like the closed `Tooltip` content is. A
+ * visually hidden element stays in the accessibility tree, and unlike a closed tooltip the visible group
+ * label row is still rendered next to it, so the group label would be announced twice when reading
+ * through the option list. `hidden` keeps the label out of the accessibility tree while the accessible
+ * description computation still reads it, because it is referenced directly.
+ *
+ * The visible label row keeps `role="presentation"` and is not hidden from assistive technology in both
+ * cases, so the heading itself is still announced when navigating through the option list.
+ *
+ * @see https://www.w3.org/TR/accname-1.2/#comp_labelledby
+ */
+export declare const OptionGroupLabelDescriptions: ({ groups }: OptionGroupLabelDescriptionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/shared/OptionGroupLabelDescriptions/OptionGroupLabelDescriptions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders the option group labels of a virtualized listbox as hidden elements that the options of each
+ * group reference with `aria-describedby`, so that assistive technology can tell which group an option
+ * belongs to.
+ *
+ * The visible group label is a row of the option list, and a virtualized option list unmounts the rows
+ * that are scrolled out of view. Referencing the visible row directly would therefore leave the options
+ * of a long group pointing at an element that is no longer in the document. These elements live outside
+ * the option list instead, so the reference always resolves. A hidden element that is referenced directly
+ * by `aria-describedby` still contributes its text to the accessible description, which is what makes
+ * this work.
+ *
+ * A non-virtualized option list renders every row, so there the visible label row carries the id itself
+ * and this component renders nothing. Exactly one element carries a given group label id either way.
+ *
+ * These elements are hidden with `hidden`, not visually hidden like the closed `Tooltip` content is. A
+ * visually hidden element stays in the accessibility tree, and unlike a closed tooltip the visible group
+ * label row is still rendered next to it, so the group label would be announced twice when reading
+ * through the option list. `hidden` keeps the label out of the accessibility tree while the accessible
+ * description computation still reads it, because it is referenced directly.
+ *
+ * The visible label row keeps `role="presentation"` and is not hidden from assistive technology in both
+ * cases, so the heading itself is still announced when navigating through the option list.
+ *
+ * @see https://www.w3.org/TR/accname-1.2/#comp_labelledby
+ */
+export const OptionGroupLabelDescriptions = ({ groups }) => {
+    if (groups.length === 0)
+        return null;
+    return (_jsx("div", { hidden: true, children: groups.map(({ id, label }) => (_jsx("span", { id: id, children: label }, id))) }));
+};

package/dist/src/shared/OptionGroupLabelDescriptions/index.d.ts

@@ -0,0 +1 @@
+export * from './OptionGroupLabelDescriptions';

package/dist/src/shared/OptionGroupLabelDescriptions/index.js

@@ -0,0 +1 @@
+export * from './OptionGroupLabelDescriptions';

package/dist/src/utilities/dom/getGroupLabelId.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Build the id of the element that carries the label of an option group of a listbox.
+ *
+ * The id is derived from the listbox id and the position of the group, so it stays the same across
+ * re-renders. It does not identify the visible group label row, which a virtualized option list
+ * unmounts once it is scrolled out of view, but the hidden element rendered outside the option list
+ * by `OptionGroupLabelDescriptions` - see that component for why the two are separate.
+ *
+ * @param listBoxId - The id of the listbox that owns the option group.
+ *
+ * @param groupIndex - The index of the option group in the rendered option list.
+ *
+ * @returns The id of the element the options of the group reference with `aria-describedby`.
+ */
+export declare const getGroupLabelId: (listBoxId: string, groupIndex: number) => string;

package/dist/src/utilities/dom/getGroupLabelId.js

@@ -0,0 +1,15 @@
+/**
+ * Build the id of the element that carries the label of an option group of a listbox.
+ *
+ * The id is derived from the listbox id and the position of the group, so it stays the same across
+ * re-renders. It does not identify the visible group label row, which a virtualized option list
+ * unmounts once it is scrolled out of view, but the hidden element rendered outside the option list
+ * by `OptionGroupLabelDescriptions` - see that component for why the two are separate.
+ *
+ * @param listBoxId - The id of the listbox that owns the option group.
+ *
+ * @param groupIndex - The index of the option group in the rendered option list.
+ *
+ * @returns The id of the element the options of the group reference with `aria-describedby`.
+ */
+export const getGroupLabelId = (listBoxId, groupIndex) => `${listBoxId}-group-${String(groupIndex)}`;

package/dist/styled-system/recipes/base-main-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type BaseMainNavigationSlotRecipeVariantMap = {
   [key in keyof BaseMainNavigationSlotRecipeVariant]: Array<BaseMainNavigationSlotRecipeVariant[key]>
 }
 
-type BaseMainNavigationSlotRecipeSlot = "root" | "nav" | "list" | "featureShortcut" | "featureShortcutAnchor" | "labelGroup" | "iconAndLabel" | "lockIcon" | "listItem" | "listItemTooltip" | "listItemAnchor" | "listItemAnchorIcon" | "parentDetails" | "parentSummary" | "parentSummaryIcon" | "groupMenuList" | "groupLabelSection" | "groupLabel" | "groupLabelText" | "childrenList" | "childrenListItem" | "childrenListItemAnchor" | "popoverChildrenList" | "footer" | "toggleButton" | "toggleButtonIcon"
+type BaseMainNavigationSlotRecipeSlot = "root" | "nav" | "list" | "featureShortcut" | "featureShortcutAnchor" | "labelGroup" | "iconAndLabel" | "lockIcon" | "listItem" | "listItemTooltip" | "listItemAnchor" | "listItemAnchorIcon" | "parentDetails" | "parentSummary" | "parentSummaryIcon" | "groupMenuList" | "groupLabelSection" | "groupLabel" | "groupLabelText" | "childrenList" | "childrenListItem" | "childrenListItemAnchor" | "popoverChildrenList" | "popoverTrigger" | "popoverTriggerDisclosureIcon" | "footer" | "toggleButton" | "toggleButtonIcon"
 
 export type BaseMainNavigationSlotRecipeVariantProps = {
   [key in keyof BaseMainNavigationSlotRecipeVariant]?: ConditionalValue<BaseMainNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/base-main-navigation-slot-recipe.js

@@ -95,6 +95,14 @@ const baseMainNavigationSlotRecipeSlotNames = [
         "popoverChildrenList",
         "BaseMainNavigation__popoverChildrenList"
     ],
+    [
+        "popoverTrigger",
+        "BaseMainNavigation__popoverTrigger"
+    ],
+    [
+        "popoverTriggerDisclosureIcon",
+        "BaseMainNavigation__popoverTriggerDisclosureIcon"
+    ],
     [
         "footer",
         "BaseMainNavigation__footer"

package/dist/styled-system/recipes/data-table-cell-slot-recipe.d.ts

@@ -10,6 +10,7 @@ fixedColumn: boolean
 verticalBorder: boolean
 edgeFixedColumn: "left" | "right"
 layout: "default" | "edge-to-edge"
+isRowHeader: boolean
 type: "text" | "amount"
 }
 

package/dist/styled-system/recipes/data-table-cell-slot-recipe.js

@@ -55,6 +55,7 @@ const dataTableCellSlotRecipeVariantKeys = [
     "verticalBorder",
     "edgeFixedColumn",
     "layout",
+    "isRowHeader",
     "type"
 ];
 const getVariantProps = (variants) => ({ ...dataTableCellSlotRecipeDefaultVariants, ...compact(variants) });
@@ -89,6 +90,9 @@ export const dataTableCellSlotRecipe = /* @__PURE__ */ Object.assign(dataTableCe
             "default",
             "edge-to-edge"
         ],
+        "isRowHeader": [
+            "true"
+        ],
         "type": [
             "text",
             "amount"

package/dist/styles.css

@@ -2015,6 +2015,16 @@
   padding-left: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
 }
 
+.mfui-dqtPcW {
+  width: 100%;
+}
+
+.mfui-datOaS {
+  flex-shrink: 0;
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: 24px;
+}
+
 .mfui-jlehrW {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort);
   border-block-start: 1px solid;
@@ -7605,6 +7615,11 @@ li:last-child > .mfui-cXGJls {
   border-left-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
+.mfui-VBccL {
+  font-weight: inherit;
+  text-align: inherit;
+}
+
 .mfui-cyVYhU,.mfui-ePuaEb {
   justify-content: flex-start;
   text-align: left;