@deque/cauldron-react 6.27.0-canary.2c4ec65c → 6.27.0-canary.34834ec5

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

@@ -1,8 +1,17 @@
 import React, { type ButtonHTMLAttributes, type Ref } from 'react';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import type { TagSize } from '../Tag';
+interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     buttonRef?: Ref<HTMLButtonElement>;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'danger' | 'danger-secondary' | 'link' | 'tag' | 'badge';
     thin?: boolean;
 }
+interface ButtonTagProps extends ButtonBaseProps {
+    variant: 'tag';
+    size?: TagSize;
+}
+interface ButtonNonTagProps extends ButtonBaseProps {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'danger' | 'danger-secondary' | 'link' | 'badge';
+    size?: never;
+}
+export type ButtonProps = ButtonTagProps | ButtonNonTagProps;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

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

@@ -3,7 +3,7 @@ import { ContentNode } from '../../types';
 import Button from '../Button';
 import Tooltip from '../Tooltip';
 type ButtonProps = React.ComponentProps<typeof Button>;
-export interface CopyButtonProps extends Omit<ButtonProps, 'onCopy' | 'onClick'> {
+export interface CopyButtonProps extends Omit<ButtonProps, 'onCopy' | 'onClick' | 'size'> {
     value: string;
     variant?: Extract<ButtonProps['variant'], 'primary' | 'secondary' | 'tertiary'>;
     children?: ContentNode;

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

@@ -6,6 +6,7 @@ interface DialogContextValue {
     onClose: () => void;
     forceAction: boolean;
     closeButtonText: string;
+    scrollable: boolean;
 }
 declare const DialogContext: React.Context<DialogContextValue | null>;
 declare function useDialogContext(): DialogContextValue;

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

@@ -12,6 +12,7 @@ export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
     };
     closeButtonText?: string;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
+    scrollable?: boolean;
 }
 declare const Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLDivElement>>;
 export default Dialog;

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

@@ -7,18 +7,6 @@ export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<H
     label: React.ReactNode;
     tooltipProps?: Omit<TooltipProps, 'children' | 'target'>;
     disabled?: boolean;
-    /**
-     * @deprecated use `tooltipProps.placement` instead
-     */
-    tooltipPlacement?: TooltipProps['placement'];
-    /**
-     * @deprecated use `tooltipProps.variant` instead
-     */
-    tooltipVariant?: TooltipProps['variant'];
-    /**
-     * @deprecated use `tooltipProps.portal` instead
-     */
-    tooltipPortal?: TooltipProps['portal'];
     variant?: 'primary' | 'secondary' | 'tertiary' | 'error';
     large?: boolean;
 }

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { DialogProps } from '../Dialog';
 interface ModalProps extends Omit<DialogProps, 'forceAction'> {
     variant?: 'info';
+    scrollable?: boolean;
 }
-declare const Modal: ({ children, className, variant, ...other }: ModalProps) => React.JSX.Element;
+declare const Modal: ({ children, className, variant, scrollable, ...other }: ModalProps) => React.JSX.Element;
 declare const ModalHeader: {
     ({ children, className, ...other }: import("../Dialog").DialogHeaderProps): React.JSX.Element;
     displayName: string;

package/lib/components/Table/TableHeader.d.ts

@@ -4,7 +4,9 @@ type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableHeaderProps extends Omit<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, 'align'> {
     sortDirection?: SortDirection;
     onSort?: () => void;
+    /** @deprecated No longer used. Sort state is communicated via aria-sort. */
     sortAscendingAnnouncement?: string;
+    /** @deprecated No longer used. Sort state is communicated via aria-sort. */
     sortDescendingAnnouncement?: string;
     align?: ColumnAlignment;
     variant?: 'header' | 'cell';

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

@@ -1,8 +1,9 @@
 import React from 'react';
+export type TagSize = 'default' | 'small';
 interface TagProps {
     children: React.ReactNode;
     className?: string;
-    size?: 'default' | 'small';
+    size?: TagSize;
 }
 export declare const TagLabel: {
     ({ children, className, ...other }: TagProps): React.JSX.Element;

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

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { type ButtonHTMLAttributes } from 'react';
 import { IconType } from '../Icon';
 import { ContentNode } from '../../types';
-interface TagButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+import { type TagSize } from '../Tag';
+interface TagButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
     label: ContentNode;
     value: ContentNode;
     icon: IconType;
     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    size?: TagSize;
 }
 declare const TagButton: React.ForwardRefExoticComponent<TagButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default TagButton;

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

@@ -1,39 +1,19 @@
 import React from 'react';
-import AriaIsolate from '../../utils/aria-isolate';
 export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
     type: 'confirmation' | 'caution' | 'error' | 'action-needed' | 'info';
-    onDismiss: () => void;
+    onDismiss?: () => void;
     dismissText?: string;
-    toastRef: React.Ref<HTMLDivElement>;
+    toastRef?: React.Ref<HTMLDivElement>;
     focus?: boolean;
     show?: boolean;
     dismissible?: boolean;
     children: React.ReactNode;
 }
-interface ToastState {
-    animationClass: string;
-    isolator?: AriaIsolate;
-}
 /**
  * The cauldron toast notification component
  */
-export default class Toast extends React.Component<ToastProps, ToastState> {
-    static defaultProps: {
-        dismissText: string;
-        onDismiss: () => void;
-        toastRef: () => void;
-        focus: boolean;
-        show: boolean;
-        dismissible: boolean;
-    };
-    static displayName: string;
-    private el;
-    constructor(props: ToastProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ToastProps): void;
-    componentWillUnmount(): void;
-    render(): React.JSX.Element;
-    dismissToast(): void;
-    showToast(): void;
-}
-export {};
+declare const Toast: {
+    ({ type, children, onDismiss, dismissText, toastRef, focus, show, dismissible, className, ...otherProps }: ToastProps): React.JSX.Element;
+    displayName: string;
+};
+export default Toast;

package/lib/index.d.ts

@@ -37,7 +37,7 @@ export { default as Sidebar, SideBarItem } from './components/SideBar';
 export { default as Code } from './components/Code';
 export { default as LoaderOverlay } from './components/LoaderOverlay';
 export { default as Line } from './components/Line';
-export { default as Tag, TagLabel } from './components/Tag';
+export { default as Tag, TagLabel, type TagSize } from './components/Tag';
 export { default as Badge, BadgeLabel } from './components/Badge';
 export { default as ImpactBadge } from './components/ImpactBadge';
 export { default as TagButton } from './components/TagButton';

package/lib/index.js

@@ -1532,9 +1532,9 @@ var isEscape = function (event) {
     return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
 };
 var Dialog = React.forwardRef(function (_a, ref) {
-    var dialogRefProp = _a.dialogRef, _b = _a.forceAction, forceAction = _b === void 0 ? false : _b, className = _a.className, children = _a.children, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, heading = _a.heading, _d = _a.show, show = _d === void 0 ? false : _d, portal = _a.portal, _e = _a.onClose, onClose = _e === void 0 ? function () { return null; } : _e, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal", "onClose"]);
+    var dialogRefProp = _a.dialogRef, _b = _a.forceAction, forceAction = _b === void 0 ? false : _b, className = _a.className, children = _a.children, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, heading = _a.heading, _d = _a.show, show = _d === void 0 ? false : _d, portal = _a.portal, _e = _a.scrollable, scrollable = _e === void 0 ? false : _e, _f = _a.onClose, onClose = _f === void 0 ? function () { return null; } : _f, other = tslib.__rest(_a, ["dialogRef", "forceAction", "className", "children", "closeButtonText", "heading", "show", "portal", "scrollable", "onClose"]);
     var dialogRef = useSharedRef(dialogRefProp || ref);
-    var _f = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _f[0];
+    var _g = tslib.__read(nextId.useId(1, 'dialog-title-'), 1), headingId = _g[0];
     var headingRef = React.useRef(null);
     var isolatorRef = React.useRef();
     var headingLevel = typeof heading === 'object' && 'level' in heading && heading.level
@@ -1605,14 +1605,16 @@ var Dialog = React.forwardRef(function (_a, ref) {
         headingLevel: headingLevel,
         onClose: handleClose,
         forceAction: forceAction,
-        closeButtonText: closeButtonText
+        closeButtonText: closeButtonText,
+        scrollable: scrollable
     }); }, [
         headingId,
         headingRef,
         headingLevel,
         handleClose,
         forceAction,
-        closeButtonText
+        closeButtonText,
+        scrollable
     ]);
     if (!show || !isBrowser()) {
         return null;
@@ -1642,11 +1644,12 @@ var Dialog = React.forwardRef(function (_a, ref) {
 Dialog.displayName = 'Dialog';
 var DialogContent = function (_a) {
     var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
+    var context = React.useContext(DialogContext);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className, {
             'text--align-left': align === 'left',
             'text--align-center': align === 'center',
             'text--align-right': align === 'right'
-        }) }, other), children));
+        }), tabIndex: (context === null || context === void 0 ? void 0 : context.scrollable) ? -1 : undefined }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
 var DialogFooter = function (_a) {
@@ -1700,10 +1703,11 @@ var AlertContent = DialogContent;
 var AlertActions = DialogFooter;
 
 var Modal = function (_a) {
-    var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
+    var children = _a.children, className = _a.className, variant = _a.variant, scrollable = _a.scrollable, other = tslib.__rest(_a, ["children", "className", "variant", "scrollable"]);
     return (React__default["default"].createElement(Dialog, tslib.__assign({ className: classNames__default["default"]('Modal', className, {
-            'Modal--info': variant === 'info'
-        }) }, other, { forceAction: false }), children));
+            'Modal--info': variant === 'info',
+            'Modal--scrollable': scrollable
+        }) }, other, { scrollable: scrollable, forceAction: false }), children));
 };
 var ModalHeader = DialogHeader;
 var ModalHeading = DialogHeading;
@@ -1768,7 +1772,7 @@ var SkipLink = /** @class */ (function (_super) {
 }(React__default["default"].Component));
 
 var Button = React.forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, thin = _a.thin, children = _a.children, className = _a.className, buttonRef = _a.buttonRef, other = tslib.__rest(_a, ["variant", "thin", "children", "className", "buttonRef"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, thin = _a.thin, size = _a.size, children = _a.children, className = _a.className, buttonRef = _a.buttonRef, other = tslib.__rest(_a, ["variant", "thin", "size", "children", "className", "buttonRef"]);
     return (React__default["default"].createElement("button", tslib.__assign({ type: "button", className: classNames__default["default"](className, {
             'Button--primary': variant === 'primary',
             'Button--secondary': variant === 'secondary',
@@ -1779,6 +1783,7 @@ var Button = React.forwardRef(function (_a, ref) {
             Link: variant === 'link',
             Tag: variant === 'tag',
             'Button--tag': variant === 'tag',
+            'Tag--small': variant === 'tag' && size === 'small',
             'Button--thin': thin,
             'Button--badge': variant === 'badge'
         }), ref: ref || buttonRef }, other), children));
@@ -2028,10 +2033,17 @@ function Tooltip(_a) {
                 fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
+    }, [target]);
+    // Cancel any pending hide timeout when the Tooltip unmounts so it
+    // does not fire setShowTooltip on an unmounted component.
+    React.useEffect(function () {
         return function () {
-            clearTimeout(hideTimeoutRef.current);
+            if (hideTimeoutRef.current) {
+                clearTimeout(hideTimeoutRef.current);
+                hideTimeoutRef.current = null;
+            }
         };
-    }, [target]);
+    }, []);
     React.useEffect(function () {
         if (typeof showProp === 'boolean') {
             setShowTooltip(showProp);
@@ -2118,7 +2130,7 @@ var looksLikeLink = function (props) {
     return 'to' in props || 'href' in props;
 };
 var IconButton = React.forwardRef(function (_a, ref) {
-    var _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, tooltipPlacement = _a.tooltipPlacement, tooltipVariant = _a.tooltipVariant, tooltipPortal = _a.tooltipPortal, _c = _a.tooltipProps, tooltipPropsProp = _c === void 0 ? {} : _c, className = _a.className, _d = _a.variant, variant = _d === void 0 ? 'secondary' : _d, disabled = _a.disabled, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, large = _a.large, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipPlacement", "tooltipVariant", "tooltipPortal", "tooltipProps", "className", "variant", "disabled", "tabIndex", "large"]);
+    var _b = _a.as, Component = _b === void 0 ? 'button' : _b, icon = _a.icon, label = _a.label, _c = _a.tooltipProps, tooltipPropsProp = _c === void 0 ? {} : _c, className = _a.className, _d = _a.variant, variant = _d === void 0 ? 'secondary' : _d, disabled = _a.disabled, _e = _a.tabIndex, tabIndex = _e === void 0 ? 0 : _e, large = _a.large, other = tslib.__rest(_a, ["as", "icon", "label", "tooltipProps", "className", "variant", "disabled", "tabIndex", "large"]);
     var internalRef = React.useRef();
     React.useImperativeHandle(ref, function () { return internalRef.current; });
     // Configure additional properties based on the type of the Component
@@ -2136,15 +2148,7 @@ var IconButton = React.forwardRef(function (_a, ref) {
             accessibilityProps['aria-disabled'] = disabled;
         }
     }
-    if (process.env.NODE_ENV !== 'production') {
-        if (!!tooltipPlacement || !!tooltipVariant || !!tooltipPortal) {
-            React__default["default"].useEffect(function () {
-                console.warn('[IconButton] The following props are deprecated: tooltipPlacement, tooltipVariant, tooltipPortal. ' +
-                    'See https://cauldron.dequelabs.com/components/IconButton for recommended replacement.');
-            }, []);
-        }
-    }
-    var tooltipProps = tslib.__assign({ placement: tooltipPlacement || 'auto', variant: tooltipVariant, portal: tooltipPortal, association: 'aria-labelledby', hideElementOnHidden: true }, tooltipPropsProp);
+    var tooltipProps = tslib.__assign({ placement: 'auto', association: 'aria-labelledby', hideElementOnHidden: true }, tooltipPropsProp);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Component, tslib.__assign({ className: classNames__default["default"](className, {
                 IconButton: true,
@@ -2216,126 +2220,110 @@ var tabIndexHandler = function (reset, toast) {
 };
 
 /**
- * The cauldron toast notification component
+ * Hook to be used similarly to the React.Component#componentDidMount.
+ * Executes the provided `effect` when `dependencies` change but does not
+ * execute the effect initially (on mount) - only on update.
+ *
+ * @param effect {Function} function to be executed when dependencies update
+ * @param dependencies {Any} any valid dependency argument to React.useEffect
  */
-var Toast = /** @class */ (function (_super) {
-    tslib.__extends(Toast, _super);
-    function Toast(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            animationClass: props.show ? 'FadeIn--flex' : 'is--hidden'
-        };
-        _this.dismissToast = _this.dismissToast.bind(_this);
-        _this.showToast = _this.showToast.bind(_this);
-        return _this;
-    }
-    Toast.prototype.componentDidMount = function () {
-        var show = this.props.show;
-        if (show) {
-            // Timeout because CSS display: none/block and opacity:
-            // 0/1 properties cannot be toggled in the same tick
-            // see: https://codepen.io/isnerms/pen/eyQaLP
-            setTimeout(this.showToast);
+var useDidUpdate = function (effect, dependencies) {
+    var mounted = React__default["default"].useRef(false);
+    React__default["default"].useEffect(function () {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
         }
+        effect();
+    }, dependencies);
+};
+
+/**
+ * The cauldron toast notification component
+ */
+var Toast = function (_a) {
+    var type = _a.type, children = _a.children, _b = _a.onDismiss, onDismiss = _b === void 0 ? function () {
+        // noop
+    } : _b, _c = _a.dismissText, dismissText = _c === void 0 ? 'Dismiss' : _c, toastRef = _a.toastRef, _d = _a.focus, focus = _d === void 0 ? true : _d, _e = _a.show, show = _e === void 0 ? false : _e, _f = _a.dismissible, dismissible = _f === void 0 ? true : _f, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
+    var elRef = useSharedRef(toastRef !== null && toastRef !== void 0 ? toastRef : null);
+    var isolatorRef = React.useRef(null);
+    var timeoutsRef = React.useRef(new Set());
+    var _g = tslib.__read(React.useState(show ? 'FadeIn--flex' : 'is--hidden'), 2), animationClass = _g[0], setAnimationClass = _g[1];
+    // Timeout because CSS display: none/block and opacity:
+    // 0/1 properties cannot be toggled in the same tick
+    // see: https://codepen.io/isnerms/pen/eyQaLP
+    var scheduleNextTick = function (fn) {
+        var id = setTimeout(function () {
+            timeoutsRef.current.delete(id);
+            fn();
+        });
+        timeoutsRef.current.add(id);
     };
-    Toast.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-        var show = this.props.show;
-        if (prevProps.show !== show) {
-            if (show) {
-                this.setState({ animationClass: 'FadeIn--flex' }, function () {
-                    setTimeout(_this.showToast);
-                });
-            }
-            else {
-                this.dismissToast();
-            }
+    var showToast = React.useCallback(function () {
+        setAnimationClass('FadeIn--flex FadeIn');
+        if (type === 'action-needed' && elRef.current) {
+            var isolator = new AriaIsolate(elRef.current);
+            tabIndexHandler(false, elRef.current);
+            isolatorRef.current = isolator;
+            isolator.activate();
         }
-    };
-    Toast.prototype.componentWillUnmount = function () {
-        var isolator = this.state.isolator;
-        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-    };
-    Toast.prototype.render = function () {
-        var _this = this;
-        var animationClass = this.state.animationClass;
-        var _a = this.props, type = _a.type, children = _a.children; 
-        // prevent `onDismiss` from being passed-through to DOM
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        _a.onDismiss; var dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, className = _a.className, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible", "className"]);
-        var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
-        var defaultProps = {
-            tabIndex: -1,
-            className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
-        };
-        if (!focus) {
-            defaultProps.role = 'alert';
+        if (elRef.current && !!focus) {
+            elRef.current.focus();
         }
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", tslib.__assign({ ref: function (el) {
-                    _this.el = el;
-                    setRef(toastRef, el);
-                } }, defaultProps, otherProps),
-                React__default["default"].createElement("div", { className: "Toast__message" },
-                    React__default["default"].createElement(Icon, { type: typeMap[type].icon }),
-                    React__default["default"].createElement("div", { className: "Toast__message-content" }, children)),
-                type !== 'action-needed' && dismissible && (React__default["default"].createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
-                    React__default["default"].createElement(Icon, { type: "close" })))),
-            scrim));
-    };
-    Toast.prototype.dismissToast = function () {
-        var _this = this;
-        if (!this.el) {
+    }, [type, focus]);
+    var dismissToast = React.useCallback(function () {
+        if (!elRef.current) {
             return;
         }
-        var _a = this.props, onDismiss = _a.onDismiss, type = _a.type;
-        var isolator = this.state.isolator;
-        this.setState({
-            animationClass: 'FadeIn--flex'
-        }, function () {
-            // Timeout because CSS display: none/block and opacity:
-            // 0/1 properties cannot be toggled in the same tick
-            // see: https://codepen.io/isnerms/pen/eyQaLP
-            setTimeout(function () {
-                if (type === 'action-needed') {
-                    tabIndexHandler(true, _this.el);
-                    isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-                }
-                _this.setState({ animationClass: 'is--hidden' }, onDismiss);
-            });
-        });
-    };
-    Toast.prototype.showToast = function () {
-        var _this = this;
-        var _a = this.props, type = _a.type, focus = _a.focus;
-        this.setState({
-            animationClass: 'FadeIn--flex FadeIn'
-        }, function () {
+        setAnimationClass('FadeIn--flex');
+        scheduleNextTick(function () {
+            var _a;
             if (type === 'action-needed') {
-                var isolator = new AriaIsolate(_this.el);
-                tabIndexHandler(false, _this.el);
-                _this.setState({ isolator: isolator });
-                isolator.activate();
-            }
-            if (_this.el && !!focus) {
-                // focus the toast
-                _this.el.focus();
+                tabIndexHandler(true, elRef.current);
+                (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
             }
+            setAnimationClass('is--hidden');
+            onDismiss();
         });
+    }, [type, onDismiss]);
+    React.useEffect(function () {
+        if (show) {
+            scheduleNextTick(showToast);
+        }
+        return function () {
+            var _a;
+            timeoutsRef.current.forEach(clearTimeout);
+            timeoutsRef.current.clear();
+            (_a = isolatorRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
+        };
+    }, []);
+    useDidUpdate(function () {
+        if (show) {
+            setAnimationClass('FadeIn--flex');
+            scheduleNextTick(showToast);
+        }
+        else {
+            dismissToast();
+        }
+    }, [show]);
+    var scrim = type === 'action-needed' && show ? (React__default["default"].createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
+    var defaultProps = {
+        tabIndex: -1,
+        className: classNames__default["default"]('Toast', "Toast--".concat(typeMap[type].className), animationClass, { 'Toast--non-dismissible': !dismissible }, className)
     };
-    Toast.defaultProps = {
-        dismissText: 'Dismiss',
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onDismiss: function () { },
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        toastRef: function () { },
-        focus: true,
-        show: false,
-        dismissible: true
-    };
-    Toast.displayName = 'Toast';
-    return Toast;
-}(React__default["default"].Component));
+    if (!focus) {
+        defaultProps.role = 'alert';
+    }
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", tslib.__assign({ ref: elRef }, defaultProps, otherProps),
+            React__default["default"].createElement("div", { className: "Toast__message" },
+                React__default["default"].createElement(Icon, { type: typeMap[type].icon }),
+                React__default["default"].createElement("div", { className: "Toast__message-content" }, children)),
+            type !== 'action-needed' && dismissible && (React__default["default"].createElement("button", { type: "button", className: "Toast__dismiss", "aria-label": dismissText, onClick: dismissToast },
+                React__default["default"].createElement(Icon, { type: "close" })))),
+        scrim));
+};
+Toast.displayName = 'Toast';
 
 var Link = React.forwardRef(function (_a, ref) {
     var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, thin = _a.thin, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant", "thin"]);
@@ -3042,8 +3030,8 @@ var ImpactBadge = React.forwardRef(function (_a, ref) {
 ImpactBadge.displayName = 'ImpactBadge';
 
 var TagButton = React__default["default"].forwardRef(function (_a, ref) {
-    var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, rest = tslib.__rest(_a, ["label", "value", "icon", "className"]);
-    return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), ref: ref }, rest),
+    var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, size = _a.size, rest = tslib.__rest(_a, ["label", "value", "icon", "className", "size"]);
+    return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), size: size, ref: ref }, rest),
         React__default["default"].createElement(TagLabel, null, label),
         value,
         React__default["default"].createElement(Icon, { className: "TagButton__icon", type: icon })));
@@ -3186,23 +3174,25 @@ var TableHead = React.forwardRef(function (_a, ref) {
 TableHead.displayName = 'TableHead';
 
 var TableHeader = React.forwardRef(function (_a, ref) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, align = _a.align, _d = _a.variant, variant = _d === void 0 ? 'header' : _d, style = _a.style, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement", "align", "variant", "style"]);
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _sortAscendingAnnouncement = _a.sortAscendingAnnouncement, _sortDescendingAnnouncement = _a.sortDescendingAnnouncement, align = _a.align, _b = _a.variant, variant = _b === void 0 ? 'header' : _b, style = _a.style, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement", "align", "variant", "style"]);
     var tableHeaderRef = useSharedRef(ref);
-    var _e = useTable(), layout = _e.layout, columns = _e.columns;
+    var _c = useTable(), layout = _c.layout, columns = _c.columns;
     var tableGridStyles = useTableGridStyles({
         elementRef: tableHeaderRef,
         align: align,
         columns: columns,
         layout: layout
     });
-    // When the sort direction changes, we want to announce the change in a live region
-    // because changes to the sort value is not widely supported yet
-    // see: https://a11ysupport.io/tech/aria/aria-sort_attribute
-    var announcement = sortDirection === 'ascending'
-        ? sortAscendingAnnouncement
-        : sortDirection === 'descending'
-            ? sortDescendingAnnouncement
-            : '';
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production')
+            return;
+        if (_sortAscendingAnnouncement !== undefined ||
+            _sortDescendingAnnouncement !== undefined) {
+            console.warn('[TableHeader] The following props are deprecated and no longer used: sortAscendingAnnouncement, sortDescendingAnnouncement. ' +
+                'Sort state is communicated via aria-sort. ' +
+                'See https://cauldron.dequelabs.com/components/Table for more information.');
+        }
+    }, [_sortAscendingAnnouncement, _sortDescendingAnnouncement]);
     return (React__default["default"].createElement("th", tslib.__assign({ ref: tableHeaderRef, "aria-sort": sortDirection, className: classNames__default["default"](variant === 'cell'
             ? ['TableCell', 'TableHeader--cell-variant']
             : 'TableHeader', className, {
@@ -3210,9 +3200,7 @@ var TableHeader = React.forwardRef(function (_a, ref) {
             'TableHeader--sort-descending': sortDirection === 'descending'
         }), style: tslib.__assign(tslib.__assign({}, tableGridStyles), style) }, other), !!onSort && !!sortDirection ? (React__default["default"].createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
         children,
-        React__default["default"].createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default["default"].createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default["default"].createElement(Icon, { type: "table-sort-ascending" })) : (React__default["default"].createElement(Icon, { type: "table-sort-descending" }))),
-        React__default["default"].createElement(Offscreen, null,
-            React__default["default"].createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
+        React__default["default"].createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default["default"].createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default["default"].createElement(Icon, { type: "table-sort-ascending" })) : (React__default["default"].createElement(Icon, { type: "table-sort-descending" }))))) : (children)));
 });
 TableHeader.displayName = 'TableHeader';
 
@@ -3234,25 +3222,6 @@ var Tab = React__default["default"].forwardRef(function (_a, ref) {
 });
 Tab.displayName = 'Tab';
 
-/**
- * Hook to be used similarly to the React.Component#componentDidMount.
- * Executes the provided `effect` when `dependencies` change but does not
- * execute the effect initially (on mount) - only on update.
- *
- * @param effect {Function} function to be executed when dependencies update
- * @param dependencies {Any} any valid dependency argument to React.useEffect
- */
-var useDidUpdate = function (effect, dependencies) {
-    var mounted = React__default["default"].useRef(false);
-    React__default["default"].useEffect(function () {
-        if (!mounted.current) {
-            mounted.current = true;
-            return;
-        }
-        effect();
-    }, dependencies);
-};
-
 var Tabs = function (_a) {
     var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
     var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
@@ -4609,16 +4578,6 @@ var Combobox = React.forwardRef(function (_a, ref) {
                 : ComboboxNoResults;
     }, [renderNoResults]);
     var noMatchingOptions = !!inputValue && !matchingOptions.size && (React__default["default"].createElement(NoMatchingOptions, null));
-    var comboboxListbox = (
-    // eslint-disable-next-line
-    // @ts-expect-error
-    // multiselect & value props are passed to Listbox, but TS is unable to infer that
-    // it's a correct mapping from Combobox's multiselect & value props
-    React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
-            'Combobox__listbox--open': open
-        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: multiselect ? selectedValues : selectedValues[0], onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: noMatchingOptions ? undefined : -1, "aria-activedescendant": undefined, multiselect: multiselect, disabled: disabled },
-        comboboxOptions,
-        noMatchingOptions));
     var errorId = "".concat(id, "-error");
     var descriptionId = "".concat(id, "-description");
     var describedby = ariaDescribedby;
@@ -4629,6 +4588,16 @@ var Combobox = React.forwardRef(function (_a, ref) {
         describedby = addIdRef(describedby, errorId);
     }
     var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': describedby });
+    var comboboxListbox = (
+    // eslint-disable-next-line
+    // @ts-expect-error
+    // multiselect & value props are passed to Listbox, but TS is unable to infer that
+    // it's a correct mapping from Combobox's multiselect & value props
+    React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
+            'Combobox__listbox--open': open
+        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), "aria-describedby": describedby, id: "".concat(id, "-listbox"), value: multiselect ? selectedValues : selectedValues[0], onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: noMatchingOptions ? undefined : -1, "aria-activedescendant": undefined, multiselect: multiselect, disabled: disabled },
+        comboboxOptions,
+        noMatchingOptions));
     return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', { 'Combobox--multiselect': multiselect }, className), ref: comboboxRef },
         name &&
             formValues.map(function (formValue, index) { return (React__default["default"].createElement("input", { type: "hidden", key: index, name: name, value: formValue })); }),
@@ -4661,7 +4630,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
                     };
                     return (React__default["default"].createElement(ComboboxPill, { ref: refCallback, key: value, value: value, removeOptionLabel: removeOptionLabels[index], disabled: disabled, onClick: handleClick, onKeyDown: handlePillKeyDown }));
                 }),
-            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: inputValue, role: "combobox", disabled: disabled, "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, inputProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
+            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: inputValue, role: "combobox", disabled: disabled, "aria-invalid": error ? true : undefined, "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, inputProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
             React__default["default"].createElement("span", { className: "Combobox__arrow" })),
         React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: inputValue, formValues: formValues, selectedValues: selectedValues, removeOptionLabels: removeOptionLabels, setRemoveOptionLabels: setRemoveOptionLabels, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValues: setFormValues }, portal && typeof document !== 'undefined'
             ? reactDom.createPortal(comboboxListbox, 

package/package.json

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