@deque/cauldron-react 6.16.0-canary.d7ad0332 → 6.16.0-canary.dce6ee58

package/lib/components/ActionList/ActionList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ActionListSelectionType, type onActionCallbackFunction } from './ActionListContext';
+interface ActionListProps extends React.HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+    /** Limits the amount of selections that can be made within an action list */
+    selectionType?: ActionListSelectionType | null;
+    /** A callback function that is called when an action list item is selected. */
+    onAction?: onActionCallbackFunction;
+}
+declare const ActionList: React.ForwardRefExoticComponent<ActionListProps & React.RefAttributes<HTMLUListElement>>;
+export default ActionList;

package/lib/components/ActionList/ActionListContext.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type onActionEvent = React.MouseEvent<HTMLLIElement | HTMLAnchorElement> | React.KeyboardEvent<HTMLLIElement | HTMLAnchorElement>;
+export type onActionCallbackFunction = (key: string, event: onActionEvent) => void;
+export type ActionListSelectionType = 'single' | 'multiple';
+type ActionListContext = {
+    role: 'list' | 'menu' | 'listbox' | null;
+    selectionType: ActionListSelectionType | null;
+    onAction?: onActionCallbackFunction;
+};
+type ActionListProviderProps = {
+    children: React.ReactNode;
+} & ActionListContext;
+declare const ActionListContext: React.Context<ActionListContext>;
+declare function ActionListProvider({ role, selectionType, onAction, children }: ActionListProviderProps): React.JSX.Element;
+declare function useActionListContext(): ActionListContext;
+export { ActionListProvider, useActionListContext };

package/lib/components/ActionList/ActionListGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type ActionListSelectionType, type onActionCallbackFunction } from './ActionListContext';
+import { ContentNode } from '../../types';
+interface ActionListGroupProps extends React.HTMLAttributes<HTMLLIElement> {
+    /** Provides a label for the group of action items */
+    label: ContentNode;
+    /** Limits the amount of selections that can be made within an action group */
+    selectionType?: ActionListSelectionType | null;
+    /** A callback function that is called when an action list item is selected. */
+    onAction?: onActionCallbackFunction;
+}
+declare const ActionListGroup: React.ForwardRefExoticComponent<ActionListGroupProps & React.RefAttributes<HTMLLIElement>>;
+export default ActionListGroup;

package/lib/components/ActionList/ActionListItem.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type IconType } from '../Icon';
+import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+import { type onActionEvent } from './ActionListContext';
+interface ActionListItemProps extends PolymorphicProps<React.HTMLAttributes<HTMLLIElement>> {
+    /**
+     * A unique key to identify the action when triggered, when not provided
+     * will use the child text content as the key.
+     */
+    actionKey?: string;
+    /** Displays a leading icon for the action item. */
+    leadingIcon?: IconType;
+    /** Displays a trailing icon for the action item. */
+    trailingIcon?: IconType;
+    /** Provides an additional description for the action item. */
+    description?: React.ReactNode;
+    /** Indicates if the current action item is selected. */
+    selected?: boolean;
+    /** When an action item is disabled, it cannot be selected or activated. */
+    disabled?: boolean;
+    /** A callback function that is called when an action item is selected. */
+    onAction?: (event: onActionEvent) => void;
+}
+declare const ActionListItem: PolymorphicComponent<ActionListItemProps>;
+export default ActionListItem;

package/lib/components/ActionList/ActionListLinkItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import ActionListItem from './ActionListItem';
+type ActionListLinkItemProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & Omit<React.ComponentProps<typeof ActionListItem>, keyof React.HTMLAttributes<HTMLLIElement> | 'selected'> & {
+    href: string;
+};
+declare const ActionListLinkItem: React.ForwardRefExoticComponent<Omit<ActionListLinkItemProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export default ActionListLinkItem;

package/lib/components/ActionList/ActionListSeparator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type ActionListSeparatorProps = React.HTMLAttributes<HTMLLIElement>;
+declare const ActionListSeparator: React.ForwardRefExoticComponent<ActionListSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+export default ActionListSeparator;

package/lib/components/ActionList/index.d.ts

@@ -0,0 +1,5 @@
+export { default as ActionList } from './ActionList';
+export { default as ActionListItem } from './ActionListItem';
+export { default as ActionListGroup } from './ActionListGroup';
+export { default as ActionListSeparator } from './ActionListSeparator';
+export { default as ActionListLinkItem } from './ActionListLinkItem';

package/lib/components/ActionMenu/ActionMenu.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'>;
+type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean) => React.ReactElement;
+declare const ActionMenu: React.ForwardRefExoticComponent<{
+    children: React.ReactElement;
+    trigger: React.ReactElement | ActionMenuTriggerFunction;
+} & Pick<{
+    target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
+    placement?: "auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end" | undefined;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    onPlacementChange?: ((placement: import("@floating-ui/utils").Placement) => void) | undefined;
+    onShiftChange?: ((coords: import("@floating-ui/utils").Coords) => void) | undefined;
+    offset?: number | undefined;
+    focusTrap?: boolean | undefined;
+    focusTrapOptions?: {
+        disabled?: boolean | undefined;
+        initialFocusElement?: import("../../types").ElementOrRef<HTMLElement> | undefined;
+        returnFocus?: boolean | undefined;
+        returnFocusElement?: import("../../types").ElementOrRef<HTMLElement> | undefined;
+    } | undefined;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & {
+    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+} & React.RefAttributes<HTMLElement>, "placement"> & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export default ActionMenu;

package/lib/components/ActionMenu/index.d.ts

@@ -0,0 +1 @@
+export { default as ActionMenu } from './ActionMenu';

package/lib/components/EmptyState/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Heading text to be displayed for the empty state. */
+    heading: React.ReactNode;
+    /** Description for the empty state. */
+    description: React.ReactNode;
+    /** Slot for primary actions. */
+    primaryActions?: React.ReactNode;
+    /** Slot for secondary actions. */
+    secondaryActions?: React.ReactNode;
+}
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+export default EmptyState;

package/lib/components/FieldGroup/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: React.ReactNode;
+    children: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+}
+declare const FieldGroup: React.ForwardRefExoticComponent<FieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default FieldGroup;

package/lib/components/Listbox/Listbox.d.ts

@@ -4,6 +4,8 @@ import type { ListboxValue } from './ListboxOption';
 import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
 interface BaseListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'defaultValue'>> {
     navigation?: 'cycle' | 'bound';
+    focusStrategy?: 'lastSelected' | 'first' | 'last';
+    focusDisabledOptions?: boolean;
     onActiveChange?: (option: ListboxOption) => void;
     disabled?: boolean;
 }

package/lib/components/Stepper/index.d.ts

@@ -14,7 +14,7 @@ export declare const Step: {
     (props: StepProps): React.JSX.Element;
     displayName: string;
 };
-interface StepperProps {
+interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
     children: React.ReactNode;
     className?: string;
 }

package/lib/index.d.ts

@@ -62,8 +62,12 @@ export { default as CopyButton } from './components/CopyButton';
 export { default as Drawer } from './components/Drawer';
 export { default as BottomSheet } from './components/BottomSheet';
 export { default as AnchoredOverlay } from './components/AnchoredOverlay';
+export { default as FieldGroup } from './components/FieldGroup';
 export { default as PageHeader } from './components/PageHeader';
 export { default as SectionHeader } from './components/SectionHeader';
+export { default as EmptyState } from './components/EmptyState';
+export { ActionList, ActionListItem, ActionListGroup, ActionListSeparator, ActionListLinkItem } from './components/ActionList';
+export { ActionMenu } from './components/ActionMenu';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -859,7 +859,7 @@ function ClickOutsideListener(_a, ref) {
 ClickOutsideListener.displayName = 'ClickOutsideListener';
 var ClickOutsideListener$1 = React__default["default"].forwardRef(ClickOutsideListener);
 
-var _a$2 = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a$2[0], down$1 = _a$2[1], tab = _a$2[2], enter = _a$2[3], space = _a$2[4], esc = _a$2[5];
+var _a$3 = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a$3[0], down$1 = _a$3[1], tab = _a$3[2], enter = _a$3[3], space = _a$3[4], esc = _a$3[5];
 var OptionsMenuList = function (_a) {
     var children = _a.children, menuRef = _a.menuRef, show = _a.show, className = _a.className, _b = _a.onClose, onClose = _b === void 0 ? function () { } : _b, // eslint-disable-line @typescript-eslint/no-empty-function
     _c = _a.onSelect, // eslint-disable-line @typescript-eslint/no-empty-function
@@ -970,7 +970,7 @@ var OptionsMenuList = function (_a) {
             } }), items)));
 };
 
-var _a$1 = tslib.__read([40], 1), down = _a$1[0];
+var _a$2 = tslib.__read([40], 1), down = _a$2[0];
 var OptionsMenu = function (_a) {
     var children = _a.children, className = _a.className; _a.closeOnSelect; var menuRef = _a.menuRef, trigger = _a.trigger, _b = _a.align, align = _b === void 0 ? 'right' : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, // eslint-disable-line @typescript-eslint/no-empty-function
     _d = _a.onSelect, // eslint-disable-line @typescript-eslint/no-empty-function
@@ -3652,10 +3652,10 @@ var optionMatchesValue = function (option, value) {
         option.value === value;
 };
 var Listbox = React.forwardRef(function (_a, ref) {
-    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, _d = _a.multiselect, multiselect = _d === void 0 ? false : _d, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, _e = _a.disabled, disabled = _e === void 0 ? false : _e, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "multiselect", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange", "disabled"]);
-    var _f = tslib.__read(React.useState([]), 2), options = _f[0], setOptions = _f[1];
-    var _g = tslib.__read(React.useState(null), 2), activeOption = _g[0], setActiveOption = _g[1];
-    var _h = tslib.__read(React.useState([]), 2), selectedOptions = _h[0], setSelectedOptions = _h[1];
+    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, _d = _a.focusStrategy, focusStrategy = _d === void 0 ? 'lastSelected' : _d, _e = _a.focusDisabledOptions, focusDisabledOptions = _e === void 0 ? false : _e, _f = _a.multiselect, multiselect = _f === void 0 ? false : _f, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, _g = _a.disabled, disabled = _g === void 0 ? false : _g, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "focusStrategy", "focusDisabledOptions", "multiselect", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange", "disabled"]);
+    var _h = tslib.__read(React.useState([]), 2), options = _h[0], setOptions = _h[1];
+    var _j = tslib.__read(React.useState(null), 2), activeOption = _j[0], setActiveOption = _j[1];
+    var _k = tslib.__read(React.useState([]), 2), selectedOptions = _k[0], setSelectedOptions = _k[1];
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     React.useLayoutEffect(function () {
@@ -3737,7 +3737,9 @@ var Listbox = React.forwardRef(function (_a, ref) {
             return;
         }
         event.preventDefault();
-        var enabledOptions = options.filter(function (option) { return !isDisabledOption(option); });
+        var enabledOptions = !focusDisabledOptions
+            ? options.filter(function (option) { return !isDisabledOption(option); })
+            : options;
         // istanbul ignore next
         if (!enabledOptions.length) {
             return;
@@ -3782,9 +3784,29 @@ var Listbox = React.forwardRef(function (_a, ref) {
         }
     }, [options, activeOption, navigation, handleSelect]);
     var handleFocus = React.useCallback(function (event) {
+        if (focusStrategy === 'first') {
+            var firstOption = !focusDisabledOptions
+                ? options.find(function (option) { return !isDisabledOption(option); })
+                : options[0];
+            if (firstOption) {
+                setActiveOption(firstOption);
+            }
+            return;
+        }
+        if (focusStrategy === 'last') {
+            var lastOption = !focusDisabledOptions
+                ? tslib.__spreadArray([], tslib.__read(options), false).reverse().find(function (option) { return !isDisabledOption(option); })
+                : options[options.length - 1];
+            if (lastOption) {
+                setActiveOption(lastOption);
+            }
+            return;
+        }
         if (!activeOption ||
             !options.some(function (option) { return option.element === activeOption.element; })) {
-            var firstOption = options.find(function (option) { return !isDisabledOption(option); });
+            var firstOption = !focusDisabledOptions
+                ? options.find(function (option) { return !isDisabledOption(option); })
+                : options[0];
             // istanbul ignore else
             if (firstOption) {
                 setActiveOption(firstOption);
@@ -3796,7 +3818,7 @@ var Listbox = React.forwardRef(function (_a, ref) {
             setActiveOption(selectedOptions[selectedOptions.length - 1]);
         }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-    }, [options, activeOption, selectedOptions]);
+    }, [options, activeOption, selectedOptions, focusStrategy]);
     return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-multiselectable": multiselect ? true : undefined, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
         React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, multiselect: multiselect, selected: selectedOptions, setOptions: setOptions, onSelect: handleSelect }, children)));
 });
@@ -4105,20 +4127,20 @@ var ComboboxPill = React.forwardRef(function (_a, ref) {
 ComboboxPill.displayName = 'ComboboxPill';
 
 // Event Keys
-var _a = tslib.__read([
+var _a$1 = tslib.__read([
     'Enter',
     'Escape',
     'Home',
     'End',
     'Backspace',
     'Delete'
-], 6), Enter = _a[0], Escape = _a[1], Home = _a[2], End = _a[3], Backspace = _a[4], Delete = _a[5];
+], 6), Enter = _a$1[0], Escape = _a$1[1], Home = _a$1[2], End = _a$1[3], Backspace = _a$1[4], Delete = _a$1[5];
 var _b = tslib.__read([
     'ArrowDown',
     'ArrowUp',
     'ArrowLeft',
     'ArrowRight'
-], 4), ArrowDown = _b[0], ArrowUp = _b[1], ArrowLeft = _b[2], ArrowRight = _b[3];
+], 4), ArrowDown$1 = _b[0], ArrowUp$1 = _b[1], ArrowLeft = _b[2], ArrowRight = _b[3];
 var PillKeys = [Backspace, Delete, ArrowLeft, ArrowRight];
 var defaultAutoCompleteMatches = function (inputValue, value) {
     // istanbul ignore if
@@ -4290,7 +4312,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
         var escKeypress = event.key === Escape;
         var deleteKeypress = event.key === Delete;
         var backspaceKeypress = event.key === Backspace;
-        var listboxArrowKeypress = [ArrowUp, ArrowDown].includes(event.key);
+        var listboxArrowKeypress = [ArrowUp$1, ArrowDown$1].includes(event.key);
         if (
         // prevent the page from scrolling and allow start/end option activation
         [Home, End].includes(event.key) ||
@@ -4790,6 +4812,28 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
 });
 BottomSheet.displayName = 'BottomSheet';
 
+var FieldGroup = React.forwardRef(function (_a, ref) {
+    var label = _a.label, description = _a.description, error = _a.error, children = _a.children, className = _a.className, propId = _a.id, props = tslib.__rest(_a, ["label", "description", "error", "children", "className", "id"]);
+    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'fieldgroup'), 1), id = _b[0];
+    var descriptionId = "".concat(id, "-description");
+    var errorId = "".concat(id, "-error");
+    var ariaDescribedbyId = '';
+    if (description) {
+        ariaDescribedbyId = addIdRef(ariaDescribedbyId, descriptionId);
+    }
+    if (error) {
+        ariaDescribedbyId = addIdRef(ariaDescribedbyId, errorId);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ role: "group", className: classNames__default["default"]('FieldGroup', className), ref: ref }, props, { "aria-labelledby": "".concat(id, "-label"), "aria-describedby": ariaDescribedbyId || undefined }),
+        React__default["default"].createElement("label", { id: "".concat(id, "-label"), className: "Field__label" }, label),
+        description && (React__default["default"].createElement("div", { id: descriptionId, className: "Field__description" }, description)),
+        error && (React__default["default"].createElement("div", { className: "Field__error", id: errorId },
+            React__default["default"].createElement(Icon, { type: "caution" }),
+            error)),
+        children));
+});
+FieldGroup.displayName = 'FieldGroup';
+
 var SectionHeader = React.forwardRef(function (_a, ref) {
     var className = _a.className, heading = _a.heading, description = _a.description, children = _a.children, otherProps = tslib.__rest(_a, ["className", "heading", "description", "children"]);
     if (typeof heading === 'string') {
@@ -4814,6 +4858,297 @@ var PageHeader = React.forwardRef(function (_a, ref) {
 });
 PageHeader.displayName = 'PageHeader';
 
+var EmptyState = React.forwardRef(function (_a, ref) {
+    var className = _a.className, heading = _a.heading, description = _a.description, primaryActions = _a.primaryActions, secondaryActions = _a.secondaryActions, props = tslib.__rest(_a, ["className", "heading", "description", "primaryActions", "secondaryActions"]);
+    if (typeof heading === 'string') {
+        heading = React__default["default"].createElement("h2", null, heading);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ ref: ref, className: classNames__default["default"]('EmptyState', className) }, props),
+        heading,
+        React__default["default"].createElement("p", null, description),
+        primaryActions && (React__default["default"].createElement("div", { className: "EmptyState__primary" }, primaryActions)),
+        secondaryActions && (React__default["default"].createElement("div", { className: "EmptyState__secondary" }, secondaryActions))));
+});
+EmptyState.displayName = 'EmptyState';
+
+/* istanbul ignore next */
+var ActionListContext = React.createContext({
+    role: null,
+    selectionType: null,
+    onAction: function () { return null; }
+});
+function ActionListProvider(_a) {
+    var role = _a.role, selectionType = _a.selectionType, onAction = _a.onAction, children = _a.children;
+    var Provider = ActionListContext.Provider;
+    var contextValue = React.useMemo(function () { return ({
+        role: role,
+        selectionType: selectionType,
+        onAction: onAction
+    }); }, [role, selectionType, onAction]);
+    return React__default["default"].createElement(Provider, { value: contextValue }, children);
+}
+function useActionListContext() {
+    return React.useContext(ActionListContext);
+}
+
+var ActionList = React.forwardRef(function (_a, ref) {
+    var _b = _a.selectionType, selectionType = _b === void 0 ? null : _b, onAction = _a.onAction, className = _a.className, children = _a.children, props = tslib.__rest(_a, ["selectionType", "onAction", "className", "children"]);
+    var actionListContext = useActionListContext();
+    var activeElement = React.useRef();
+    var handleActiveChange = React.useCallback(function (value) {
+        activeElement.current = value === null || value === void 0 ? void 0 : value.element;
+    }, []);
+    var handleAction = React.useCallback(function (key, event) {
+        if (typeof onAction === 'function') {
+            onAction(key, event);
+        }
+    }, [onAction]);
+    var handleKeyDown = React.useCallback(function (event) {
+        var _a;
+        if (event.defaultPrevented) {
+            return;
+        }
+        // Since focus is managed in the action list using `aria-activedescendant`
+        // we want to simulate a keypress on the current active list item
+        if (event.key === 'Enter' || event.key === ' ') {
+            (_a = activeElement.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, []);
+    return (
+    // Note: we should be able to use listbox without passing a prop
+    // value for "multiselect"
+    // see: https://github.com/dequelabs/cauldron/issues/1890
+    // @ts-expect-error this should be allowed
+    React__default["default"].createElement(Listbox, tslib.__assign({ ref: ref, 
+        /* Listbox comes with an explicit role of "listbox", but we want to either
+         * use the role from props, or default to the intrinsic role */
+        // eslint-disable-next-line jsx-a11y/aria-role
+        role: undefined, "aria-multiselectable": actionListContext.role === 'listbox' ? undefined : null, className: classNames__default["default"]('ActionList', className) }, props, { onKeyDown: handleKeyDown, onActiveChange: handleActiveChange, navigation: "bound" }),
+        React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
+});
+ActionList.displayName = 'ActionList';
+
+var ActionListItem = React.forwardRef(function (_a, ref) {
+    var _b = _a.as, Component = _b === void 0 ? 'li' : _b, actionKey = _a.actionKey, className = _a.className, description = _a.description, selected = _a.selected, leadingIcon = _a.leadingIcon, trailingIcon = _a.trailingIcon, onAction = _a.onAction, children = _a.children, props = tslib.__rest(_a, ["as", "actionKey", "className", "description", "selected", "leadingIcon", "trailingIcon", "onAction", "children"]);
+    var _c = tslib.__read(nextId.useId(1, 'action-list-item'), 1), id = _c[0];
+    var actionListItemRef = useSharedRef(ref);
+    var labelRef = React.useRef(null);
+    var active = useListboxContext().active;
+    var _d = useActionListContext(), contextRole = _d.role, onActionListAction = _d.onAction, selectionType = _d.selectionType;
+    var intersectionRef = useIntersectionRef(actionListItemRef, {
+        root: null,
+        threshold: 1.0
+    });
+    var isActive = !!(active === null || active === void 0 ? void 0 : active.element) && active.element === actionListItemRef.current;
+    var handleAction = React.useCallback(function (event) {
+        var _a;
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (selectionType === 'multiple') {
+            // If action list is part of a multiselect menu, prevent the menu from closing
+            event.preventDefault();
+        }
+        if (typeof onAction === 'function') {
+            onAction(event);
+        }
+        // istanbul ignore else
+        if (typeof onActionListAction === 'function') {
+            onActionListAction(actionKey || ((_a = labelRef === null || labelRef === void 0 ? void 0 : labelRef.current) === null || _a === void 0 ? void 0 : _a.innerText.trim()) || '', event);
+        }
+    }, [onAction, onActionListAction, selectionType, actionKey]);
+    var listItemRole = undefined;
+    if (contextRole === 'menu') {
+        switch (selectionType) {
+            case 'single':
+                listItemRole = 'menuitemradio';
+                break;
+            case 'multiple':
+                listItemRole = 'menuitemcheckbox';
+                break;
+            default:
+                listItemRole = 'menuitem';
+                break;
+        }
+    }
+    else if (contextRole === 'listbox') {
+        listItemRole = 'option';
+    }
+    // Keep the currently active item on screen when navigating via up/down arrow key navigation
+    // istanbul ignore next
+    React.useLayoutEffect(function () {
+        var intersectionEntry = intersectionRef.current;
+        if (!intersectionEntry || !isActive) {
+            return;
+        }
+        var rect = actionListItemRef.current.getBoundingClientRect();
+        var isInViewport = rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth;
+        if (!isInViewport || !intersectionEntry.isIntersecting) {
+            actionListItemRef.current.scrollIntoView({
+                inline: 'nearest',
+                block: rect.top <= 0 ? 'end' : 'nearest'
+            });
+        }
+    }, [isActive]);
+    var allowsSelection = !!selectionType;
+    var isSelected = allowsSelection ? !!selected : undefined;
+    return (React__default["default"].createElement(ListboxOption, tslib.__assign({ as: Component, ref: actionListItemRef, id: id, role: listItemRole, className: classNames__default["default"]('ActionListItem', className), activeClass: "ActionListItem--active", "aria-selected": undefined, "aria-checked": listItemRole !== 'option' ? isSelected : undefined, onClick: handleAction }, props),
+        allowsSelection && (React__default["default"].createElement("span", { className: "ActionListItem__selection" },
+            React__default["default"].createElement(Icon, { type: "check" }))),
+        leadingIcon && (React__default["default"].createElement("span", { className: "ActionListItem__leadingIcon" },
+            React__default["default"].createElement(Icon, { type: leadingIcon }))),
+        React__default["default"].createElement("div", { className: "ActionListItem__label", ref: labelRef }, children),
+        description && (React__default["default"].createElement("div", { className: "ActionListItem__description" }, description)),
+        trailingIcon && (React__default["default"].createElement("span", { className: "ActionListItem__trailingIcon" },
+            React__default["default"].createElement(Icon, { type: trailingIcon })))));
+});
+ActionListItem.displayName = 'ActionListItem';
+
+var ActionListGroup = React.forwardRef(function (_a, ref) {
+    var propId = _a.id, label = _a.label, children = _a.children, selectionType = _a.selectionType, onAction = _a.onAction, props = tslib.__rest(_a, ["id", "label", "children", "selectionType", "onAction"]);
+    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'actionlist-group-label'), 1), id = _b[0];
+    var actionListContext = useActionListContext();
+    var handleAction = React.useCallback(function (key, event) {
+        // istanbul ignore else
+        if (typeof onAction === 'function') {
+            onAction(key, event);
+        }
+        // istanbul ignore else
+        if (typeof actionListContext.onAction === 'function') {
+            actionListContext.onAction(key, event);
+        }
+    }, [onAction, actionListContext.onAction]);
+    var listItemRole = [
+        'menu',
+        'listbox'
+    ].includes(actionListContext.role)
+        ? 'none'
+        : undefined;
+    var groupRole = ['menu', 'listbox'].includes(actionListContext.role)
+        ? 'group'
+        : 'list';
+    return (React__default["default"].createElement("li", tslib.__assign({ ref: ref, role: listItemRole }, props),
+        React__default["default"].createElement(ListboxGroup, { id: id, role: groupRole, className: "ActionListGroup", label: label, as: "ul" },
+            React__default["default"].createElement(ActionListProvider, tslib.__assign({}, actionListContext, { onAction: handleAction, selectionType: selectionType || actionListContext.selectionType }), children))));
+});
+ActionListGroup.displayName = 'ActionListGroup';
+
+var ActionListSeparator = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = tslib.__rest(_a, ["className"]);
+    var contextRole = useActionListContext().role;
+    // list and listbox roles only support listitem or option roles respectively
+    // see https://github.com/w3c/aria/issues/1889
+    var separatorRole = ['list', 'listbox'].includes(contextRole)
+        ? 'presentation'
+        : 'separator';
+    return (React__default["default"].createElement("li", tslib.__assign({ ref: ref, className: classNames__default["default"]('ActionListSeparator', className), role: separatorRole, "aria-hidden": separatorRole === 'presentation' || undefined }, props)));
+});
+ActionListSeparator.displayName = 'ActionListSeparator';
+
+var ActionListLinkItem = React.forwardRef(function (_a, ref) {
+    var key = _a.key, className = _a.className; 
+    // ActionListLinkItem should not be able to be "selected"
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _a.selected; var props = tslib.__rest(_a, ["key", "className", "selected"]);
+    var contextRole = useActionListContext().role;
+    var listItemRole = React.useMemo(function () {
+        if (contextRole === 'menu') {
+            return 'menuitem';
+        }
+        // istanbul ignore next
+        if (contextRole && process.env.NODE_ENV !== 'production') {
+            console.warn('Use of ActionListLinkItem outside of a menu is unsupported and may result in unintentional accessibility issues.');
+        }
+        return undefined;
+    }, [contextRole]);
+    return (React__default["default"].createElement(ActionListItem, tslib.__assign({ key: key, ref: ref, className: classNames__default["default"]('Link ActionListLinkItem', className), as: "a", role: listItemRole }, props)));
+});
+ActionListLinkItem.displayName = 'ActionListLinkItem';
+
+var _a = tslib.__read(['ArrowDown', 'ArrowUp'], 2), ArrowDown = _a[0], ArrowUp = _a[1];
+var ActionMenu = React.forwardRef(function (_a, ref) {
+    var className = _a.className, style = _a.style, trigger = _a.trigger, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, actionMenuList = _a.children, props = tslib.__rest(_a, ["className", "style", "trigger", "placement", "children"]);
+    var _c = tslib.__read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
+    var _d = tslib.__read(React.useState('first'), 2), focusStrategy = _d[0], setFocusStrategy = _d[1];
+    var triggerRef = React.useRef(null);
+    var actionMenuRef = useSharedRef(ref);
+    var actionMenuListRef = useSharedRef(actionMenuList.props.ref);
+    var _e = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _e[0];
+    var handleTriggerClick = React.useCallback(function (event) {
+        // istanbul ignore else
+        if (!event.defaultPrevented) {
+            setOpen(!open);
+            setFocusStrategy('first');
+        }
+    }, [open]);
+    var handleTriggerKeyDown = React.useCallback(function (event) {
+        // istanbul ignore else
+        if ([ArrowDown, ArrowUp].includes(event.key) && !open) {
+            // prevent page from scrolling if the user triggers the action menu
+            // via an "ArrowDown" key press
+            event.preventDefault();
+            // allow other functions that may consume the event after
+            // default is prevented to perform as normal
+            event.defaultPrevented = false;
+            setFocusStrategy(event.key === ArrowUp ? 'last' : 'first');
+            setOpen(true);
+        }
+    }, [open]);
+    var triggerProps = React.useMemo(function () {
+        return {
+            ref: triggerRef,
+            id: triggerId,
+            onClick: handleTriggerClick,
+            onKeyDown: handleTriggerKeyDown,
+            'aria-expanded': open,
+            'aria-haspopup': 'menu'
+        };
+    }, [handleTriggerClick, open]);
+    var actionMenuTrigger = React__default["default"].isValidElement(trigger)
+        ? React__default["default"].cloneElement(trigger, triggerProps)
+        : trigger(triggerProps, open);
+    var handleClickOutside = React.useCallback(function (event) {
+        var _a, _b;
+        if (!((_a = actionMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
+            !((_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
+            setOpen(false);
+        }
+    }, []);
+    var handleAction = React.useCallback(function (key, event) {
+        // istanbul ignore else
+        if (!event.defaultPrevented) {
+            setOpen(false);
+        }
+        var onAction = actionMenuList.props.onAction;
+        if (typeof onAction === 'function') {
+            onAction(key, event);
+        }
+    }, [actionMenuList.props.onAction]);
+    React.useEffect(function () {
+        var _a, _b, _c;
+        if (open) {
+            (_a = actionMenuListRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else if ((_b = actionMenuListRef.current) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement)) {
+            (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    }, [open]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false }, actionMenuTrigger),
+        React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ ref: actionMenuRef, role: "presentation", className: classNames__default["default"]('ActionMenu', className), open: open, onOpenChange: setOpen, target: triggerRef, placement: placement, offset: 4, style: tslib.__assign({ display: !open ? 'none' : undefined }, style) }, props), React__default["default"].cloneElement(actionMenuList, {
+            ref: actionMenuListRef,
+            role: 'menu',
+            onAction: handleAction,
+            'aria-labelledby': triggerId,
+            focusStrategy: focusStrategy,
+            focusDisabledOptions: true
+        }))));
+});
+ActionMenu.displayName = 'ActionMenu';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4884,6 +5219,12 @@ function useThemeContext() {
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionTrigger = AccordionTrigger;
+exports.ActionList = ActionList;
+exports.ActionListGroup = ActionListGroup;
+exports.ActionListItem = ActionListItem;
+exports.ActionListLinkItem = ActionListLinkItem;
+exports.ActionListSeparator = ActionListSeparator;
+exports.ActionMenu = ActionMenu;
 exports.Address = Address;
 exports.AddressCityStateZip = AddressCityStateZip;
 exports.AddressLine = AddressLine;
@@ -4919,7 +5260,9 @@ exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.Drawer = Drawer;
+exports.EmptyState = EmptyState;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
+exports.FieldGroup = FieldGroup;
 exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;
 exports.IconButton = IconButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.16.0-canary.d7ad0332",
+  "version": "6.16.0-canary.dce6ee58",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",