@deque/cauldron-react 6.18.0 → 6.18.1-canary.cad74a2e

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

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

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

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

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

@@ -7,6 +7,7 @@ interface MenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
     autoClickLink?: boolean;
 }
 export default class MenuItem extends Component<MenuItemProps> {
+    static displayName: string;
     static defaultProps: {
         menuItemRef: () => void;
         onClick: () => void;

package/lib/index.js

@@ -628,6 +628,7 @@ var MenuItem = /** @class */ (function (_super) {
                 setRef(menuItemRef, item);
             }, onClick: this.onClick, onKeyDown: this.onKeyDown }), children));
     };
+    MenuItem.displayName = 'MenuItem';
     MenuItem.defaultProps = {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         menuItemRef: function () { },
@@ -659,7 +660,6 @@ var TopBar$1 = /** @class */ (function (_super) {
     tslib.__extends(TopBar, _super);
     function TopBar(props) {
         var _this = _super.call(this, props) || this;
-        _this.menuItems = [];
         _this.onResize = function () {
             var wide = isWide();
             if (wide === _this.state.wide) {
@@ -683,27 +683,7 @@ var TopBar$1 = /** @class */ (function (_super) {
             }
             return React.cloneElement(child, {
                 key: index,
-                onKeyDown: function () {
-                    var _a;
-                    var args = [];
-                    for (var _i = 0; _i < arguments.length; _i++) {
-                        args[_i] = arguments[_i];
-                    }
-                    // @ts-ignore we're just spreading the original args
-                    _this.onKeyDown.apply(_this, tslib.__spreadArray([], tslib.__read(args), false));
-                    if (child.props.onKeyDown) {
-                        (_a = child.props).onKeyDown.apply(_a, tslib.__spreadArray([], tslib.__read(args), false));
-                    }
-                },
-                tabIndex: 0,
-                menuItemRef: function (menuItem) {
-                    if (menuItem) {
-                        _this.menuItems.push(menuItem);
-                    }
-                    if (child.props.menuItemRef) {
-                        child.props.menuItemRef(menuItem);
-                    }
-                }
+                tabIndex: typeof child.props.tabIndex === 'undefined' ? 0 : child.props.tabIndex
             });
         };
         var wide = isWide();
@@ -728,7 +708,11 @@ var TopBar$1 = /** @class */ (function (_super) {
     };
     TopBar.prototype.onKeyDown = function (e) {
         var key = keyname__default["default"](e.which);
-        var menuItems = tslib.__spreadArray([], tslib.__read(this.menuItems), false);
+        // 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 menuItems = Array.from(menuBarElement.children);
         // account for hidden side bar trigger (hamburger)
         if (this.state.wide && this.props.hasTrigger) {
             menuItems.shift();
@@ -751,11 +735,10 @@ var TopBar$1 = /** @class */ (function (_super) {
         menuItems[adjacentIndex].focus();
     };
     TopBar.prototype.render = function () {
-        this.menuItems = [];
         // 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", className: className }, React.Children.map(children, this.renderChild)));
+        return (React__default["default"].createElement("ul", { role: "menubar", onKeyDown: this.onKeyDown, className: className }, React.Children.map(children, this.renderChild)));
     };
     TopBar.defaultProps = {
         thin: false,
@@ -4704,9 +4687,6 @@ var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
         props.style = tslib.__assign({ WebkitLineClamp: maxLines || 2 }, props.style);
     }
     React.useEffect(function () {
-        if (hideTooltip) {
-            return;
-        }
         var listener = function () {
             requestAnimationFrame(function () {
                 var overflowElement = sharedRef.current;
@@ -4723,12 +4703,12 @@ var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
         return function () {
             observer === null || observer === void 0 ? void 0 : observer.disconnect();
         };
-    }, [hideTooltip]);
+    }, []);
     React.useEffect(function () {
         if (typeof onOverflowChange === 'function') {
             onOverflowChange(hasOverflow);
         }
-    }, [hasOverflow]);
+    }, [onOverflowChange, hasOverflow]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Element, tslib.__assign({ className: classNames__default["default"]('TextEllipsis', className, {
                 'TextEllipsis--multiline': !!maxLines
@@ -5155,7 +5135,7 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
         }
     }, [open]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false }, actionMenuTrigger),
+        React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false, target: triggerProps.ref }, actionMenuTrigger),
         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, {
             ref: actionMenuListRef,
             role: 'menu',

package/package.json

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