@jobber/components 4.45.4 → 4.45.5

package/dist/DataList/index.js

@@ -394,9 +394,14 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const focusTrapRef = useFocusTrap.useFocusTrap(visible);
     useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
-    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef },
+    return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef, onClick: handleClick },
         React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$6.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
         React__default["default"].createElement("button", { className: styles$6.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+    function handleClick(event) {
+        // Prevent menu from firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
+    }
     function getPositionCssVars() {
         const { posX, posY } = getPosition();
         return {
@@ -428,6 +433,9 @@ function DataListItemActionsOverflow({ actions, }) {
             React__default["default"].createElement(Button.Button, { icon: "more", ariaLabel: "More actions", type: "secondary", variation: "subtle", onClick: handleMoreClick })),
         React__default["default"].createElement(DataListActionsMenu, { visible: showMenu, position: menuPosition, onRequestClose: handleClose }, actions)));
     function handleMoreClick(event) {
+        // Prevent firing the parent's onClick event when it is nested
+        // within a clickable list item
+        event.stopPropagation();
         setShowMenu(true);
         const rect = event.currentTarget.getBoundingClientRect();
         const posX = rect.x;
@@ -520,7 +528,15 @@ function DataListItemClickableInternal({ onClick, url, to, children, }) {
         return (React__default["default"].createElement("a", { className: styles$e.listItemClickable, href: href, onClick: handleClick }, children));
     }
     if (onClick) {
-        return (React__default["default"].createElement("button", { className: styles$e.listItemClickable, onClick: handleClick }, children));
+        return (
+        // A button can be nested within the list item. To prevent a button inside
+        // button error, we need to manually declare a div to be a button
+        React__default["default"].createElement("div", { role: "button", tabIndex: 0, className: styles$e.listItemClickable, onClick: handleClick, onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleClick();
+                }
+            } }, children));
     }
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
     function handleClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.45.4",
+  "version": "4.45.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "58229de1e3ea0c47e84fe6d4168f81e4f388a362"
+  "gitHead": "ed8af7e37ad965c44890b8db47b76068c1ee0141"
 }