@deque/cauldron-react 7.1.0-canary.cdc8a15a → 7.1.0-canary.d650efcc

package/lib/components/ActionList/ActionList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ActionListSelectionType, type onActionCallbackFunction } from './ActionListContext';
-interface ActionListProps extends React.HTMLAttributes<HTMLUListElement> {
+interface ActionListProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'defaultValue' | 'onSelect'> {
     children: React.ReactNode;
     /** Limits the amount of selections that can be made within an action list */
     selectionType?: ActionListSelectionType | null;

package/lib/components/Listbox/Listbox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ListboxOption } from './ListboxContext';
 import type { ListboxValue } from './ListboxOption';
-import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
+import type { PolymorphicProps, PolymorphicComponentProps } from '../../utils/polymorphicComponent';
 interface BaseListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'defaultValue'>> {
     navigation?: 'cycle' | 'bound';
     focusStrategy?: 'lastSelected' | 'first' | 'last';
@@ -30,5 +30,10 @@ interface MultiSelectListboxProps extends BaseListboxProps {
         value: ListboxValue[];
     }) => void;
 }
-declare const Listbox: PolymorphicComponent<SingleSelectListboxProps | MultiSelectListboxProps>;
+type ListboxComponent = Omit<React.ForwardRefExoticComponent<SingleSelectListboxProps | MultiSelectListboxProps>, keyof CallableFunction> & {
+    <T extends React.ElementType = React.ElementType>(props: PolymorphicComponentProps<MultiSelectListboxProps, T>): React.ReactElement | null;
+    <T extends React.ElementType = React.ElementType>(props: PolymorphicComponentProps<SingleSelectListboxProps, T>): React.ReactElement | null;
+    <T extends React.ElementType = React.ElementType>(props: PolymorphicComponentProps<SingleSelectListboxProps | MultiSelectListboxProps, T>): React.ReactElement | null;
+};
+declare const Listbox: ListboxComponent;
 export default Listbox;

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

@@ -12,6 +12,7 @@ export default class TopBar extends React.Component<MenuBarProps, MenuBarState>
         thin: boolean;
         hasTrigger: boolean;
     };
+    private menuBarRef;
     constructor(props: MenuBarProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

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

@@ -3,6 +3,9 @@ export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
     type: 'confirmation' | 'caution' | 'error' | 'action-needed' | 'info';
     onDismiss?: () => void;
     dismissText?: string;
+    /**
+     * @deprecated Use the forwarded `ref` instead. Will be removed in the next major version.
+     */
     toastRef?: React.Ref<HTMLDivElement>;
     focus?: boolean;
     show?: boolean;
@@ -12,8 +15,5 @@ export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * The cauldron toast notification component
  */
-declare const Toast: {
-    ({ type, children, onDismiss, dismissText, toastRef, focus, show, dismissible, className, ...otherProps }: ToastProps): React.JSX.Element;
-    displayName: string;
-};
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
 export default Toast;

package/lib/index.js

@@ -672,6 +672,7 @@ var TopBar$1 = /** @class */ (function (_super) {
     tslib.__extends(TopBar, _super);
     function TopBar(props) {
         var _this = _super.call(this, props) || this;
+        _this.menuBarRef = React__default["default"].createRef();
         _this.onResize = function () {
             var wide = isWide();
             if (wide === _this.state.wide) {
@@ -720,10 +721,10 @@ var TopBar$1 = /** @class */ (function (_super) {
     };
     TopBar.prototype.onKeyDown = function (e) {
         var key = keyname__default["default"](e.which);
-        // This is a temporary workaround until have an opportunity to refactor or replace menubar
-        // see: https://github.com/dequelabs/cauldron/issues/1934
-        // eslint-disable-next-line react/no-find-dom-node
-        var menuBarElement = reactDom.findDOMNode(this);
+        var menuBarElement = this.menuBarRef.current;
+        if (!menuBarElement) {
+            return;
+        }
         var menuItems = Array.from(menuBarElement.children);
         // account for hidden side bar trigger (hamburger)
         if (this.state.wide && this.props.hasTrigger) {
@@ -750,7 +751,7 @@ var TopBar$1 = /** @class */ (function (_super) {
         // disabling no-unused-vars to prevent thin/hasTrigger from being passed through to div
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var _a = this.props, children = _a.children, className = _a.className; _a.thin; _a.hasTrigger; tslib.__rest(_a, ["children", "className", "thin", "hasTrigger"]);
-        return (React__default["default"].createElement("ul", { role: "menubar", onKeyDown: this.onKeyDown, className: className }, React.Children.map(children, this.renderChild)));
+        return (React__default["default"].createElement("ul", { role: "menubar", onKeyDown: this.onKeyDown, className: className, ref: this.menuBarRef }, React.Children.map(children, this.renderChild)));
     };
     TopBar.defaultProps = {
         thin: false,
@@ -2243,14 +2244,22 @@ var useDidUpdate = function (effect, dependencies) {
 /**
  * The cauldron toast notification component
  */
-var Toast = function (_a) {
+var Toast = React.forwardRef(function (_a, ref) {
     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 elRef = useSharedRef(ref);
     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];
+    // Backwards-compat: propagate to the deprecated toastRef prop as well
+    React.useEffect(function () {
+        var _a;
+        if (!toastRef)
+            return;
+        setRef(toastRef, (_a = elRef.current) !== null && _a !== void 0 ? _a : null);
+        return function () { return setRef(toastRef, null); };
+    }, [toastRef]);
     // 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
@@ -2324,7 +2333,7 @@ var Toast = function (_a) {
             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) {
@@ -4314,6 +4323,17 @@ var Combobox = React.forwardRef(function (_a, ref) {
             return value === lastSelectedValue;
         }) || [], 2), element = _a[0], option = _a[1];
         if (autocomplete === 'manual') {
+            // In multiselect, the listbox manages its own active option via
+            // keyboard navigation. When the last-selected value no longer
+            // matches any option (e.g. after deselecting the only selected
+            // option), preserve the existing active descendant so the next
+            // Enter keypress can re-toggle the highlighted option.
+            if (multiselect &&
+                !element &&
+                activeDescendant &&
+                matchingOptions.has(activeDescendant.element)) {
+                return;
+            }
             setActiveDescendant(!element ? null : tslib.__assign({ element: element }, option));
         }
         else if (autocomplete === 'automatic' &&
@@ -5097,7 +5117,6 @@ function useMnemonics(_a) {
 
 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 _c = tslib.__read(React.useState(), 2), activeOption = _c[0], setActiveOption = _c[1];
     var handleActiveChange = React.useCallback(function (value) {
@@ -5119,12 +5138,7 @@ var ActionList = React.forwardRef(function (_a, ref) {
             ? '[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio]'
             : '[role=option]'
     });
-    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: function (element) {
+    return (React__default["default"].createElement(Listbox, tslib.__assign({ ref: function (element) {
             if (ref) {
                 setRef(ref, element);
             }
@@ -5133,7 +5147,7 @@ var ActionList = React.forwardRef(function (_a, 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), activeOption: activeOption }, props, { onActiveChange: handleActiveChange, navigation: "bound" }),
+        role: undefined, "aria-multiselectable": undefined, className: classNames__default["default"]('ActionList', className), activeOption: activeOption }, props, { onActiveChange: handleActiveChange, navigation: "bound" }),
         React__default["default"].createElement(ActionListProvider, { role: props.role || 'list', onAction: handleAction, selectionType: selectionType }, children)));
 });
 ActionList.displayName = 'ActionList';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.1.0-canary.cdc8a15a",
+  "version": "7.1.0-canary.d650efcc",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -41,7 +41,7 @@
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@figma/code-connect": "^1.4.4",
+    "@figma/code-connect": "^1.4.5",
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.4.2",
     "@rollup/plugin-typescript": "^11.1.2",