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

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' &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "7.1.0-canary.cdc8a15a",
+  "version": "7.1.0-canary.ec0e4309",
   "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",