@deque/cauldron-react 7.2.0-canary.f495a82b → 7.3.0-canary.3a9f8d48

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;
@@ -5625,7 +5647,7 @@ var ThemeProvider = function (_a) {
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     _b = _a.context, 
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-    context = _b === void 0 ? document === null || document === void 0 ? void 0 : document.body : _b, _c = _a.initialTheme, initialTheme = _c === void 0 ? 'light' : _c;
+    context = _b === void 0 ? typeof document !== 'undefined' ? document.body : undefined : _b, _c = _a.initialTheme, initialTheme = _c === void 0 ? 'light' : _c;
     var _d = tslib.__read(React.useState(initialTheme), 2), theme = _d[0], setTheme = _d[1];
     var getThemeFromContext = function () {
         return (context === null || context === void 0 ? void 0 : context.classList.contains(DARK_THEME_CLASS)) ? 'dark' : 'light';
@@ -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.f495a82b",
+  "version": "7.3.0-canary.3a9f8d48",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -25,6 +25,7 @@
     "tslib": "^2.4.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.4",
     "@babel/core": "^7.29.7",
     "@babel/plugin-proposal-export-default-from": "^7.29.7",
     "@babel/preset-env": "^7.29.7",
@@ -60,6 +61,7 @@
     "postcss-import": "^16.1.1",
     "postcss-loader": "^8.2.1",
     "prop-types": "^15.8.1",
+    "publint": "^0.3.21",
     "react": "^19",
     "react-dom": "^19",
     "rollup": "^2.23.0",
@@ -81,6 +83,7 @@
     "build:lib": "rollup -c",
     "build:css": "postcss --output=lib/cauldron.css src/index.css",
     "typecheck": "tsc --noEmit --skipLibCheck",
+    "verify:packaging": "pnpm build && node scripts/verifyPackaging.js",
     "dev": "concurrently 'pnpm build:css --watch' 'rollup -c --watch'",
     "test": "jest --maxWorkers=1 --coverage",
     "figma:parse": "figma connect parse",