@deque/cauldron-react 6.24.0 → 6.25.0-canary.bc36343e

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

@@ -1,5 +1,5 @@
 import React from 'react';
-type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup'> & {
+type ActionMenuTriggerProps = Pick<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'onKeyDown' | 'aria-expanded' | 'aria-haspopup' | 'aria-controls'> & {
     ref: React.RefObject<HTMLButtonElement>;
 };
 type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean) => React.ReactElement;

package/lib/components/Dialog/DialogContext.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface DialogContextValue {
+    headingId: string;
+    headingRef: React.RefObject<HTMLHeadingElement>;
+    headingLevel: number;
+    onClose: () => void;
+    forceAction: boolean;
+    closeButtonText: string;
+}
+declare const DialogContext: React.Context<DialogContextValue | null>;
+declare function useDialogContext(): DialogContextValue;
+export { DialogContext, useDialogContext };
+export type { DialogContextValue };

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

@@ -6,7 +6,7 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     dialogRef?: React.Ref<HTMLDivElement>;
     onClose?: () => void;
     forceAction?: boolean;
-    heading: string | React.ReactElement<any> | {
+    heading?: string | React.ReactElement<any> | {
         text: React.ReactElement<any> | string;
         level: number | undefined;
     };
@@ -32,4 +32,28 @@ declare const DialogFooter: {
     ({ children, className, align, ...other }: DialogFooterProps): React.JSX.Element;
     displayName: string;
 };
-export { Dialog, DialogContent, DialogFooter };
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+};
+declare const DialogHeader: {
+    ({ children, className, ...other }: DialogHeaderProps): React.JSX.Element;
+    displayName: string;
+};
+export interface DialogHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    className?: string;
+    level?: number;
+}
+declare const DialogHeading: {
+    ({ children, className, level: levelProp, ...other }: DialogHeadingProps): React.JSX.Element;
+    displayName: string;
+};
+export interface DialogCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const DialogCloseButton: {
+    ({ children, className, ...other }: DialogCloseButtonProps): React.JSX.Element | null;
+    displayName: string;
+};
+export { Dialog, DialogContent, DialogFooter, DialogHeader, DialogHeading, DialogCloseButton };

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

@@ -4,6 +4,18 @@ interface ModalProps extends Omit<DialogProps, 'forceAction'> {
     variant?: 'info';
 }
 declare const Modal: ({ children, className, variant, ...other }: ModalProps) => React.JSX.Element;
+declare const ModalHeader: {
+    ({ children, className, ...other }: import("../Dialog").DialogHeaderProps): React.JSX.Element;
+    displayName: string;
+};
+declare const ModalHeading: {
+    ({ children, className, level: levelProp, ...other }: import("../Dialog").DialogHeadingProps): React.JSX.Element;
+    displayName: string;
+};
+declare const ModalCloseButton: {
+    ({ children, className, ...other }: import("../Dialog").DialogCloseButtonProps): React.JSX.Element | null;
+    displayName: string;
+};
 declare const ModalContent: {
     ({ children, className, align, ...other }: import("../Dialog").DialogContentProps): React.JSX.Element;
     displayName: string;
@@ -13,4 +25,4 @@ declare const ModalFooter: {
     displayName: string;
 };
 export default Modal;
-export { Modal, ModalContent, ModalFooter };
+export { Modal, ModalHeader, ModalHeading, ModalCloseButton, ModalContent, ModalFooter };

package/lib/index.d.ts

@@ -14,8 +14,8 @@ export { default as TopBar, TopBarTrigger, TopBarMenu, TopBarItem } from './comp
 export { default as NavBar, NavItem } from './components/NavBar';
 export { default as SideBar } from './components/SideBar';
 export { Alert, AlertContent, AlertActions } from './components/Alert';
-export { Dialog, DialogContent, DialogFooter } from './components/Dialog';
-export { default as Modal, ModalContent, ModalFooter } from './components/Modal';
+export { Dialog, DialogHeader, DialogHeading, DialogCloseButton, DialogContent, DialogFooter } from './components/Dialog';
+export { default as Modal, ModalCloseButton, ModalHeader, ModalHeading, ModalContent, ModalFooter } from './components/Modal';
 export { default as SkipLink } from './components/SkipLink';
 export { default as Button } from './components/Button';
 export { default as IconButton } from './components/IconButton';

package/lib/index.js

@@ -1517,6 +1517,15 @@ function useFocusTrap(target, options) {
     return focusTrap;
 }
 
+var DialogContext = React.createContext(null);
+function useDialogContext() {
+    var context = React.useContext(DialogContext);
+    if (!context) {
+        throw new Error('Dialog compound components must be rendered within a Dialog');
+    }
+    return context;
+}
+
 var isEscape = function (event) {
     return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
 };
@@ -1526,6 +1535,9 @@ var Dialog = React.forwardRef(function (_a, ref) {
     var _f = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _f[0];
     var headingRef = React.useRef(null);
     var isolatorRef = React.useRef();
+    var headingLevel = typeof heading === 'object' && 'level' in heading && heading.level
+        ? heading.level
+        : 2;
     var handleClose = React.useCallback(function () {
         var _a;
         (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
@@ -1577,6 +1589,29 @@ var Dialog = React.forwardRef(function (_a, ref) {
         disabled: !show,
         initialFocusElement: headingRef
     });
+    React.useEffect(function () {
+        if (show && !heading && dialogRef.current) {
+            var hasHeading = dialogRef.current.querySelector('.Dialog__heading');
+            if (process.env.NODE_ENV !== 'production' && !hasHeading) {
+                throw Error('Dialog: No heading provided. When using a custom header, include a DialogHeading component for accessibility.');
+            }
+        }
+    }, [show, heading]);
+    var contextValue = React.useMemo(function () { return ({
+        headingId: headingId,
+        headingRef: headingRef,
+        headingLevel: headingLevel,
+        onClose: handleClose,
+        forceAction: forceAction,
+        closeButtonText: closeButtonText
+    }); }, [
+        headingId,
+        headingRef,
+        headingLevel,
+        handleClose,
+        forceAction,
+        closeButtonText
+    ]);
     if (!show || !isBrowser()) {
         return null;
     }
@@ -1586,23 +1621,18 @@ var Dialog = React.forwardRef(function (_a, ref) {
             : portal
         : // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
             document.body;
-    var closeButton = !forceAction ? (React__default["default"].createElement("button", { className: "Dialog__close", type: "button", onClick: handleClose },
-        React__default["default"].createElement(Icon, { type: "close", "aria-hidden": "true" }),
-        React__default["default"].createElement(Offscreen, null, closeButtonText))) : null;
-    var HeadingLevel = "h".concat(typeof heading === 'object' && 'level' in heading && heading.level
-        ? heading.level
-        : 2);
     var dialog = (React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
         React__default["default"].createElement("div", tslib.__assign({ role: "dialog", className: classNames__default["default"]('Dialog', className, {
                 'Dialog--show': show
             }), ref: dialogRef, "aria-labelledby": headingId }, other),
-            React__default["default"].createElement("div", { className: "Dialog__inner" },
-                React__default["default"].createElement("div", { className: "Dialog__header" },
-                    React__default["default"].createElement(HeadingLevel, { className: "Dialog__heading", ref: headingRef, tabIndex: -1, id: headingId }, typeof heading === 'object' && 'text' in heading
-                        ? heading.text
-                        : heading),
-                    closeButton),
-                children))));
+            React__default["default"].createElement(DialogContext.Provider, { value: contextValue },
+                React__default["default"].createElement("div", { className: "Dialog__inner" },
+                    heading ? (React__default["default"].createElement(DialogHeader, null,
+                        React__default["default"].createElement(DialogHeading, null, typeof heading === 'object' && 'text' in heading
+                            ? heading.text
+                            : heading),
+                        React__default["default"].createElement(DialogCloseButton, null))) : null,
+                    children)))));
     return reactDom.createPortal(dialog, 
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
     portalElement || document.body);
@@ -1626,6 +1656,30 @@ var DialogFooter = function (_a) {
         }) }, other), children));
 };
 DialogFooter.displayName = 'DialogFooter';
+var DialogHeader = function (_a) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__header', className) }, other), children));
+};
+DialogHeader.displayName = 'DialogHeader';
+var DialogHeading = function (_a) {
+    var children = _a.children, className = _a.className, levelProp = _a.level, other = tslib.__rest(_a, ["children", "className", "level"]);
+    var _b = useDialogContext(), headingId = _b.headingId, headingRef = _b.headingRef, headingLevel = _b.headingLevel;
+    var HeadingLevel = "h".concat(levelProp !== null && levelProp !== void 0 ? levelProp : headingLevel);
+    return (React__default["default"].createElement(HeadingLevel, tslib.__assign({ className: classNames__default["default"]('Dialog__heading', className), ref: headingRef, tabIndex: -1, id: headingId }, other), children));
+};
+DialogHeading.displayName = 'DialogHeading';
+var DialogCloseButton = function (_a) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    var _b = useDialogContext(), onClose = _b.onClose, forceAction = _b.forceAction, closeButtonText = _b.closeButtonText;
+    if (forceAction && process.env.NODE_ENV !== 'production') {
+        console.warn('DialogCloseButton: Component will not render because forceAction is true. Remove DialogCloseButton from your custom header when using forceAction.');
+        return null;
+    }
+    return (React__default["default"].createElement("button", tslib.__assign({ className: classNames__default["default"]('Dialog__close', className), type: "button", onClick: onClose }, other), children !== null && children !== void 0 ? children : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Icon, { type: "close", "aria-hidden": "true" }),
+        React__default["default"].createElement(Offscreen, null, closeButtonText)))));
+};
+DialogCloseButton.displayName = 'DialogCloseButton';
 
 var Alert = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, heading = _a.heading, other = tslib.__rest(_a, ["children", "className", "variant", "heading"]);
@@ -1649,6 +1703,9 @@ var Modal = function (_a) {
             'Modal--info': variant === 'info'
         }) }, other, { forceAction: false }), children));
 };
+var ModalHeader = DialogHeader;
+var ModalHeading = DialogHeading;
+var ModalCloseButton = DialogCloseButton;
 var ModalContent = DialogContent;
 var ModalFooter = DialogFooter;
 
@@ -5260,6 +5317,7 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
     var actionMenuRef = useSharedRef(ref);
     var actionMenuListRef = useSharedRef(actionMenuList.props.ref);
     var _f = tslib.__read(nextId.useId(1, 'menu-trigger'), 1), triggerId = _f[0];
+    var _g = tslib.__read(nextId.useId(1, 'menu'), 1), menuId = _g[0];
     var handleTriggerClick = React.useCallback(function (event) {
         // istanbul ignore else
         if (!event.defaultPrevented) {
@@ -5293,6 +5351,9 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
             setOpen(false);
         }
     }, []);
+    var handleOverlayBlur = React.useCallback(function () {
+        setOpen(false);
+    }, []);
     var handleAction = React.useCallback(function (key, event) {
         // istanbul ignore else
         if (!event.defaultPrevented) {
@@ -5312,13 +5373,16 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
             (_c = triggerRef.current) === null || _c === void 0 ? void 0 : _c.focus();
         }
     }, [open]);
-    var overlay = (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, portal: portal, style: tslib.__assign({ display: !open ? 'none' : undefined }, style) }, props), React__default["default"].cloneElement(actionMenuList, {
+    var hidden = renderInTrigger && !open;
+    var overlay = (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, portal: portal, style: tslib.__assign({ display: !open ? 'none' : undefined }, style), "aria-hidden": hidden, onBlur: handleOverlayBlur }, props), React__default["default"].cloneElement(actionMenuList, {
         ref: actionMenuListRef,
+        id: menuId,
         role: 'menu',
         onAction: handleAction,
         'aria-labelledby': triggerId,
         focusStrategy: focusStrategy,
-        focusDisabledOptions: true
+        focusDisabledOptions: true,
+        hidden: hidden
     })));
     var triggerProps = React.useMemo(function () {
         return {
@@ -5327,9 +5391,10 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
             onClick: handleTriggerClick,
             onKeyDown: handleTriggerKeyDown,
             'aria-expanded': open,
-            'aria-haspopup': 'menu'
+            'aria-haspopup': 'menu',
+            'aria-controls': menuId
         };
-    }, [handleTriggerClick, open]);
+    }, [handleTriggerClick, open, menuId]);
     if (renderInTrigger) {
         // istanbul ignore next
         if (portal && process.env.NODE_ENV !== 'production') {
@@ -5458,8 +5523,11 @@ exports.DescriptionList = DescriptionList;
 exports.DescriptionListItem = DescriptionListItem;
 exports.DescriptionTerm = DescriptionTerm;
 exports.Dialog = Dialog;
+exports.DialogCloseButton = DialogCloseButton;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogHeading = DialogHeading;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.ExpandCollapsePanel = ExpandCollapsePanel;
@@ -5480,8 +5548,11 @@ exports.Main = Main;
 exports.MenuBar = TopBar$1;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.ModalCloseButton = ModalCloseButton;
 exports.ModalContent = ModalContent;
 exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalHeading = ModalHeading;
 exports.NavBar = NavBar;
 exports.NavItem = NavItem;
 exports.Notice = Notice;

package/package.json

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