@jobber/components 4.45.4 → 4.45.6-fix-data-l.0

package/dist/DataList/index.js

@@ -22,7 +22,6 @@ var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var ReactDOM = require('react-dom');
-var foundation = require('@jobber/design/foundation');
 var Checkbox = require('../Checkbox-eac63b7f.js');
 var reactRouterDom = require('react-router-dom');
 var AnimatedSwitcher = require('../AnimatedSwitcher-d1e1ddcf.js');
@@ -394,9 +393,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 {
@@ -410,7 +414,7 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
         const { x, y } = position;
         const xIsOffScreen = x + width > window.innerWidth;
         const yIsOffScreen = y + height > window.innerHeight;
-        const xOffSet = x + width - window.innerWidth + foundation.tokens["space-base"];
+        const xOffSet = x + width - window.innerWidth + design.tokens["space-base"];
         const yOffSet = y + height - window.innerHeight;
         const newPosX = Math.floor(xIsOffScreen ? x - xOffSet : x);
         const newPosY = Math.floor(yIsOffScreen ? y - yOffSet : y);
@@ -428,6 +432,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 +527,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.6-fix-data-l.0+ee94d52f",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.45.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.4.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "58229de1e3ea0c47e84fe6d4168f81e4f388a362"
+  "gitHead": "ee94d52f9a0384925470c39abfd044c9dbc0eac3"
 }