@jobber/components 6.31.0 → 6.31.1

package/dist/Chip-cjs.js

@@ -22,7 +22,7 @@ var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
     const buttonRef = React.useRef();
-    return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+    return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React.createElement(Icon.Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&

package/dist/Chip-es.js

@@ -20,7 +20,7 @@ var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
     const buttonRef = useRef();
-    return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+    return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": disabled, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
         React__default.createElement(Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&

package/dist/useScrollToActive-cjs.js

@@ -290,6 +290,25 @@ function createAnnouncedElement() {
     return el;
 }
 
+/**
+ * Recursively finds a focusable element (div or button) in the specified direction
+ */
+function findFocusableElement(element, direction) {
+    if (!element)
+        return null;
+    const nextElement = direction === "previous"
+        ? element.previousElementSibling
+        : element.nextElementSibling;
+    if (!nextElement)
+        return null;
+    // Check if element is a div or button
+    if (nextElement instanceof HTMLElement &&
+        (nextElement.tagName === "DIV" || nextElement.tagName === "BUTTON")) {
+        return nextElement;
+    }
+    // Recursively continue search
+    return findFocusableElement(nextElement, direction);
+}
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
     const ref = React.useRef(null);
     const chipOptions = children.map(chip => chip.props);
@@ -316,15 +335,17 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
             if (isInputAndHasValue)
                 return;
-            const nextElementToFocus = target.nextElementSibling;
-            const prevElementToFocus = target.previousElementSibling;
-            if (event.key === "ArrowLeft" &&
-                prevElementToFocus instanceof HTMLElement) {
-                prevElementToFocus.focus();
+            if (event.key === "ArrowLeft") {
+                const prevFocusable = findFocusableElement(target, "previous");
+                if (prevFocusable) {
+                    prevFocusable.focus();
+                }
             }
-            if (event.key === "ArrowRight" &&
-                nextElementToFocus instanceof HTMLElement) {
-                nextElementToFocus.focus();
+            if (event.key === "ArrowRight") {
+                const nextFocusable = findFocusableElement(target, "next");
+                if (nextFocusable) {
+                    nextFocusable.focus();
+                }
             }
         },
         handleChipKeyDown: (value) => {
@@ -332,13 +353,13 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
                 if (event.key === "Backspace" || event.key === "Delete") {
                     const target = event.target;
                     if (target instanceof HTMLElement) {
-                        const prevElement = target.previousElementSibling;
-                        const nextElement = target.nextElementSibling;
-                        if (prevElement instanceof HTMLElement) {
-                            prevElement.focus();
+                        const prevFocusable = findFocusableElement(target, "previous");
+                        const nextFocusable = findFocusableElement(target, "next");
+                        if (prevFocusable) {
+                            prevFocusable.focus();
                         }
-                        else if (nextElement instanceof HTMLElement) {
-                            nextElement.focus();
+                        else if (nextFocusable) {
+                            nextFocusable.focus();
                         }
                     }
                     actions.handleChipRemove(value)();

package/dist/useScrollToActive-es.js

@@ -288,6 +288,25 @@ function createAnnouncedElement() {
     return el;
 }
 
+/**
+ * Recursively finds a focusable element (div or button) in the specified direction
+ */
+function findFocusableElement(element, direction) {
+    if (!element)
+        return null;
+    const nextElement = direction === "previous"
+        ? element.previousElementSibling
+        : element.nextElementSibling;
+    if (!nextElement)
+        return null;
+    // Check if element is a div or button
+    if (nextElement instanceof HTMLElement &&
+        (nextElement.tagName === "DIV" || nextElement.tagName === "BUTTON")) {
+        return nextElement;
+    }
+    // Recursively continue search
+    return findFocusableElement(nextElement, direction);
+}
 function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
     const ref = useRef(null);
     const chipOptions = children.map(chip => chip.props);
@@ -314,15 +333,17 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
             const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
             if (isInputAndHasValue)
                 return;
-            const nextElementToFocus = target.nextElementSibling;
-            const prevElementToFocus = target.previousElementSibling;
-            if (event.key === "ArrowLeft" &&
-                prevElementToFocus instanceof HTMLElement) {
-                prevElementToFocus.focus();
+            if (event.key === "ArrowLeft") {
+                const prevFocusable = findFocusableElement(target, "previous");
+                if (prevFocusable) {
+                    prevFocusable.focus();
+                }
             }
-            if (event.key === "ArrowRight" &&
-                nextElementToFocus instanceof HTMLElement) {
-                nextElementToFocus.focus();
+            if (event.key === "ArrowRight") {
+                const nextFocusable = findFocusableElement(target, "next");
+                if (nextFocusable) {
+                    nextFocusable.focus();
+                }
             }
         },
         handleChipKeyDown: (value) => {
@@ -330,13 +351,13 @@ function useInternalChipDismissible({ children, selected, onChange, onClick, onC
                 if (event.key === "Backspace" || event.key === "Delete") {
                     const target = event.target;
                     if (target instanceof HTMLElement) {
-                        const prevElement = target.previousElementSibling;
-                        const nextElement = target.nextElementSibling;
-                        if (prevElement instanceof HTMLElement) {
-                            prevElement.focus();
+                        const prevFocusable = findFocusableElement(target, "previous");
+                        const nextFocusable = findFocusableElement(target, "next");
+                        if (prevFocusable) {
+                            prevFocusable.focus();
                         }
-                        else if (nextElement instanceof HTMLElement) {
-                            nextElement.focus();
+                        else if (nextFocusable) {
+                            nextFocusable.focus();
                         }
                     }
                     actions.handleChipRemove(value)();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.31.0",
+  "version": "6.31.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -490,5 +490,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "01b07bb9befa08500981551d32fd7c54d2f7dfe3"
+  "gitHead": "fc7b94413203d2412defd168c6e765e3fd114f8a"
 }