@deque/cauldron-react 7.2.0-canary.8b3853de → 7.2.0-canary.e67992f2

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

@@ -1,19 +1,27 @@
 import React from 'react';
 import type { onActionCallbackFunction } from '../ActionList/ActionListContext';
+import AnchoredOverlay from '../AnchoredOverlay';
 interface ActionMenuListProps {
     ref?: React.Ref<HTMLElement>;
     onAction?: onActionCallbackFunction;
     [key: string]: unknown;
 }
-type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'> & {
-    ref: React.RefObject<HTMLButtonElement | null>;
+/**
+ * Props passed to an `ActionMenu` trigger render function. The element type
+ * defaults to `HTMLButtonElement`; annotate it (e.g. `ActionMenuTriggerProps<HTMLLIElement>`)
+ * when the trigger is not a button — for example a `MenuItem`/`TopBarItem`
+ * (`<li>`) in the documented `TopBar`/`MenuBar` nesting — so the `ref` and
+ * spread handlers type against the actual element without casts.
+ */
+export type ActionMenuTriggerProps<E extends HTMLElement = HTMLButtonElement> = Pick<React.HTMLAttributes<E>, 'children' | 'id' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'> & {
+    ref: React.RefObject<E | null>;
 };
-type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean) => React.ReactElement;
-declare const ActionMenu: React.ForwardRefExoticComponent<{
+export type ActionMenuTriggerFunction<E extends HTMLElement = HTMLButtonElement> = (props: ActionMenuTriggerProps<E>, open: boolean) => React.ReactElement;
+type ActionMenuProps<E extends HTMLElement = HTMLButtonElement> = {
     children: React.ReactElement<ActionMenuListProps>;
-    trigger: React.ReactElement | ActionMenuTriggerFunction;
+    trigger: React.ReactElement | ActionMenuTriggerFunction<E>;
     /** Render the action menu in a different location in the dom. */
-    portal?: HTMLElement | React.RefObject<HTMLElement | null> | undefined;
+    portal?: React.RefObject<HTMLElement | null> | HTMLElement;
     /**
      * Controls whether the menu should render as a child of the trigger, as opposed to
      * rendering as a sibling. Intended for use with nested menu patterns, for example
@@ -21,25 +29,17 @@ declare const ActionMenu: React.ForwardRefExoticComponent<{
      *
      * Only supported if trigger is a function *and* portal is undefined.
      */
-    renderInTrigger?: boolean | undefined;
-} & Pick<{
-    target: HTMLElement | React.RefObject<HTMLElement | null> | React.MutableRefObject<HTMLElement | null>;
-    placement?: "auto" | import("@floating-ui/dom").Placement | "auto-start" | "auto-end" | undefined;
-    open?: boolean | undefined;
-    onOpenChange?: ((open: boolean) => void) | undefined;
-    onPlacementChange?: ((placement: import("@floating-ui/dom").Placement) => void) | undefined;
-    onShiftChange?: ((coords: import("@floating-ui/dom").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;
-    portal?: HTMLElement | React.RefObject<HTMLElement | null> | 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>>;
+    renderInTrigger?: boolean;
+} & Pick<React.ComponentProps<typeof AnchoredOverlay>, 'placement'> & React.HTMLAttributes<HTMLElement>;
+/**
+ * The trigger element type is parameterized (defaulting to `HTMLButtonElement`)
+ * so it can be widened for nested menu patterns where the trigger is not a
+ * button — e.g. a `MenuItem`/`TopBarItem` (`<li>`) inside a `TopBar`/`MenuBar`.
+ * This only widens the public types of the `trigger` function; the internal
+ * implementation is unaffected. See the ActionMenu docs for a usage example.
+ */
+type ActionMenuType = Omit<React.ForwardRefExoticComponent<ActionMenuProps>, keyof CallableFunction> & {
+    <E extends HTMLElement = HTMLButtonElement>(props: ActionMenuProps<E> & React.RefAttributes<HTMLElement>): React.ReactElement;
+};
+declare const ActionMenu: ActionMenuType;
 export default ActionMenu;

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

@@ -1 +1,2 @@
 export { default as ActionMenu } from './ActionMenu';
+export type { ActionMenuTriggerProps, ActionMenuTriggerFunction } from './ActionMenu';

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

@@ -0,0 +1,11 @@
+import React, { type ComponentPropsWithRef } from 'react';
+export type MetadataListProps = {
+    orientation?: 'vertical' | 'horizontal';
+} & ComponentPropsWithRef<'dl'>;
+export declare const MetadataList: React.ForwardRefExoticComponent<Omit<MetadataListProps, "ref"> & React.RefAttributes<HTMLDListElement>>;
+export type MetadataListItemProps = ComponentPropsWithRef<'div'>;
+export declare const MetadataListItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type MetadataListLabelProps = ComponentPropsWithRef<'dt'>;
+export declare const MetadataListLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export type MetadataListValueProps = ComponentPropsWithRef<'dd'>;
+export declare const MetadataListValue: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;

package/lib/index.d.ts

@@ -44,6 +44,7 @@ export { default as TagButton } from './components/TagButton';
 export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from './components/Table';
 export { default as Tabs, Tab, TabPanel } from './components/Tabs';
 export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
+export { MetadataList, MetadataListItem, MetadataListLabel, MetadataListValue } from './components/MetadataList';
 export { default as Stepper, Step } from './components/Stepper';
 export { default as Panel, PanelHeader, PanelContent } from './components/Panel';
 export { default as ProgressBar } from './components/ProgressBar';
@@ -67,7 +68,7 @@ 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';
+export { ActionMenu, type ActionMenuTriggerProps, type ActionMenuTriggerFunction } from './components/ActionMenu';
 export { default as TreeView, type TreeViewNode } from './components/TreeView';
 /**
  * Helpers / Utils

package/lib/index.js

@@ -3366,6 +3366,27 @@ var DescriptionDetails = function (_a) {
 };
 DescriptionDetails.displayName = 'DescriptionDetails';
 
+var MetadataList = React.forwardRef(function (_a, ref) {
+    var _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, className = _a.className, children = _a.children, rest = tslib.__rest(_a, ["orientation", "className", "children"]);
+    return (React__default["default"].createElement("dl", tslib.__assign({ className: classNames__default["default"]('MetadataList', "MetadataList--".concat(orientation), className), ref: ref }, rest), children));
+});
+MetadataList.displayName = 'MetadataList';
+var MetadataListItem = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, rest = tslib.__rest(_a, ["className", "children"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('MetadataList__item', className), ref: ref }, rest), children));
+});
+MetadataListItem.displayName = 'MetadataListItem';
+var MetadataListLabel = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, rest = tslib.__rest(_a, ["className", "children"]);
+    return (React__default["default"].createElement("dt", tslib.__assign({ className: classNames__default["default"]('MetadataList__label', className), ref: ref }, rest), children));
+});
+MetadataListLabel.displayName = 'MetadataListLabel';
+var MetadataListValue = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, rest = tslib.__rest(_a, ["className", "children"]);
+    return (React__default["default"].createElement("dd", tslib.__assign({ className: classNames__default["default"]('MetadataList__value', className), ref: ref }, rest), children));
+});
+MetadataListValue.displayName = 'MetadataListValue';
+
 var isTooltipProps = function (props) {
     return !!props.tooltip;
 };
@@ -5309,7 +5330,7 @@ var ActionListLinkItem = React.forwardRef(function (_a, ref) {
 ActionListLinkItem.displayName = 'ActionListLinkItem';
 
 var _a = tslib.__read(['ArrowDown', 'ArrowUp'], 2), ArrowDown = _a[0], ArrowUp = _a[1];
-var ActionMenu = React.forwardRef(function (_a, ref) {
+var ActionMenuComponent = 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, portal = _a.portal, _c = _a.renderInTrigger, renderInTrigger = _c === void 0 ? false : _c, props = tslib.__rest(_a, ["className", "style", "trigger", "placement", "children", "portal", "renderInTrigger"]);
     var _d = tslib.__read(React.useState(false), 2), open = _d[0], setOpen = _d[1];
     var _e = tslib.__read(React.useState('first'), 2), focusStrategy = _e[0], setFocusStrategy = _e[1];
@@ -5427,7 +5448,8 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
         React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: triggerProps.ref }, actionMenuTrigger),
         renderInTrigger ? null : overlay));
 });
-ActionMenu.displayName = 'ActionMenu';
+ActionMenuComponent.displayName = 'ActionMenu';
+var ActionMenu = ActionMenuComponent;
 
 var TreeViewItem = function (_a) {
     var id = _a.id, textValue = _a.textValue, children = _a.children;
@@ -5744,6 +5766,10 @@ exports.LoaderOverlay = LoaderOverlay;
 exports.Main = Main;
 exports.MenuBar = TopBar$1;
 exports.MenuItem = MenuItem;
+exports.MetadataList = MetadataList;
+exports.MetadataListItem = MetadataListItem;
+exports.MetadataListLabel = MetadataListLabel;
+exports.MetadataListValue = MetadataListValue;
 exports.Modal = Modal;
 exports.ModalCloseButton = ModalCloseButton;
 exports.ModalContent = ModalContent;

package/package.json

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