@deque/cauldron-react 6.16.0 → 6.17.0-canary.4145c2a7

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/AnchoredOverlay/index.d.ts

@@ -1,4 +1,4 @@
-import { type Placement } from '@floating-ui/dom';
+import { type Placement, type Coords } from '@floating-ui/dom';
 import React from 'react';
 import useFocusTrap from '../../utils/useFocusTrap';
 declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
@@ -12,6 +12,8 @@ declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     onOpenChange?: ((open: boolean) => void) | undefined;
     /** A callback function that is called when the placement of the overlay changes. */
     onPlacementChange?: ((placement: Placement) => void) | undefined;
+    /** A callback function that is called when the shift of the overlay changes. */
+    onShiftChange?: ((coords: Coords) => void) | undefined;
     /** An optional offset number to position the anchor element from its anchored target. */
     offset?: number | undefined;
     /** When set, traps focus within the AnchoredOverlay. */

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/PageHeader/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading: ReactNode;
+    overline?: ReactNode;
+    description?: ReactNode;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default PageHeader;

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+export interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    heading: ReactNode;
+    description?: ReactNode;
+}
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeader;

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.OlHTMLAttributes<HTMLOListElement> {
     children: React.ReactNode;
     className?: string;
 }

package/lib/index.d.ts

@@ -62,6 +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
@@ -1782,10 +1782,11 @@ function getAutoAlignment(placement) {
     }
 }
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
-    var as = _a.as, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, target = _a.target, children = _a.children, style = _a.style, _c = _a.open, open = _c === void 0 ? false : _c, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange"]);
+    var _b, _c;
+    var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange"]);
     var ref = useSharedRef(refProp);
     var Component = as || 'div';
-    var _d = reactDom$1.useFloating({
+    var _f = reactDom$1.useFloating({
         open: open,
         // default to initial placement on top when placement is auto
         // @ts-expect-error auto placement is not a valid placement for floating-ui
@@ -1796,14 +1797,15 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
                 ? reactDom$1.autoPlacement({
                     alignment: getAutoAlignment(initialPlacement)
                 })
-                : reactDom$1.flip()
+                : reactDom$1.flip(),
+            reactDom$1.shift({ crossAxis: false })
         ].filter(Boolean),
         elements: {
             reference: resolveElement(target),
             floating: ref.current
         },
         whileElementsMounted: dom.autoUpdate
-    }), floatingStyles = _d.floatingStyles, placement = _d.placement;
+    }), floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
     useEscapeKey({
         active: open,
         capture: true,
@@ -1823,7 +1825,16 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
         if (typeof onPlacementChange === 'function') {
             onPlacementChange(placement);
         }
-    }, [placement]);
+    }, [onPlacementChange, placement]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (typeof onShiftChange === 'function') {
+            onShiftChange({
+                x: ((_a = middlewareData.shift) === null || _a === void 0 ? void 0 : _a.x) || 0,
+                y: ((_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.y) || 0
+            });
+        }
+    }, [onShiftChange, (_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.x, (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y]);
     return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
 });
 AnchoredOverlay.displayName = 'AnchoredOverlay';
@@ -1885,6 +1896,7 @@ function Tooltip(_a) {
     var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
     var _j = tslib.__read(React.useState(null), 2), tooltipElement = _j[0], setTooltipElement = _j[1];
     var _k = tslib.__read(React.useState(initialPlacement), 2), placement = _k[0], setPlacement = _k[1];
+    var _l = tslib.__read(React.useState(), 2), arrowShift = _l[0], setArrowShift = _l[1];
     var hasAriaAssociation = association !== 'none';
     // Show the tooltip
     var show = React.useCallback(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -1963,13 +1975,23 @@ function Tooltip(_a) {
             }
         };
     }, [target, id, association]);
+    var updateArrowShiftPosition = React.useCallback(function (_a) {
+        var x = _a.x;
+        if (variant === 'big' || x === 0) {
+            setArrowShift(null);
+            return;
+        }
+        // The tooltip shift position is inversely related to the direction
+        // that the arrow needs to shift
+        setArrowShift(x * -1);
+    }, [variant]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
+        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, onShiftChange: updateArrowShiftPosition, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
                 TooltipInfo: variant === 'info',
                 'Tooltip--hidden': !showTooltip && hideElementOnHidden,
                 'Tooltip--big': variant === 'big'
             }), ref: setTooltipElement, role: "tooltip", offset: 8 }, props),
-            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow" }),
+            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow", style: arrowShift ? { transform: "translateX(".concat(arrowShift, "px)") } : undefined }),
             children), (portal && 'current' in portal ? portal.current : portal) ||
             (
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
@@ -3630,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 () {
@@ -3715,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;
@@ -3760,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);
@@ -3774,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)));
 });
@@ -4083,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
@@ -4268,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) ||
@@ -4768,6 +4812,343 @@ 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') {
+        heading = React__default["default"].createElement("h2", null, heading);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('SectionHeader', className), ref: ref }, otherProps),
+        React__default["default"].createElement("div", { className: "SectionHeader__content" },
+            heading,
+            description && (React__default["default"].createElement("p", { className: "SectionHeader__description" }, description)),
+            children && React__default["default"].createElement("div", { className: "SectionHeader__actions" }, children))));
+});
+SectionHeader.displayName = 'SectionHeader';
+
+var PageHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, heading = _a.heading, overline = _a.overline, description = _a.description, children = _a.children, otherProps = tslib.__rest(_a, ["className", "heading", "overline", "description", "children"]);
+    if (typeof heading === 'string') {
+        heading = React__default["default"].createElement("h1", null, heading);
+    }
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('PageHeader', className), ref: ref }, otherProps),
+        overline && React__default["default"].createElement("div", { className: "PageHeader__overline" }, overline),
+        React__default["default"].createElement(SectionHeader, { heading: heading, description: description }, children)));
+});
+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({
@@ -4838,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;
@@ -4873,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;
@@ -4901,6 +5290,7 @@ exports.OptionsMenuItem = OptionsMenuItem;
 exports.OptionsMenuList = OptionsMenuList;
 exports.OptionsMenuTrigger = OptionsMenuTrigger;
 exports.OptionsMenuWrapper = OptionsMenuWrapper;
+exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Panel = Panel;
 exports.PanelContent = PanelContent;
@@ -4912,6 +5302,7 @@ exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
 exports.Scrim = Scrim;
 exports.SearchField = SearchField;
+exports.SectionHeader = SectionHeader;
 exports.Select = Select;
 exports.SideBar = SideBar;
 exports.SideBarItem = SideBarItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.16.0",
+  "version": "6.17.0-canary.4145c2a7",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -79,22 +79,5 @@
   "peerDependencies": {
     "react": ">=16.6 <= 18",
     "react-dom": ">=16.6 <= 18"
-  },
-  "nyc": {
-    "checkCoverage": true,
-    "reporter": [
-      "text-summary",
-      "html"
-    ],
-    "statements": 85,
-    "branches": 78,
-    "functions": 85,
-    "lines": 85,
-    "exclude": [
-      "lib",
-      "coverage",
-      "test/**/*.js",
-      "test/**/*.e2e.tsx"
-    ]
   }
 }