@workday/canvas-kit-react 11.2.1 → 11.2.3

package/common/lib/utils/elements.ts

@@ -1,8 +1,4 @@
-/**
- * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus. Should skip disabled elements as they are not focusable.
- */
-export const isFocusable = (element: Element): boolean => {
+const isBaseFocusable = (element: Element): boolean => {
   if (element.hasAttribute('disabled')) {
     return false;
   }
@@ -12,9 +8,15 @@ export const isFocusable = (element: Element): boolean => {
   const validAnchor = nodeName === 'a' && element.hasAttribute('href');
   const validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
   const validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
-  const validNativelyFocusable =
-    ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
-    element.getAttribute('tabindex') !== '-1';
+  const validNativelyFocusable = [
+    'button',
+    'details',
+    'embed',
+    'iframe',
+    'select',
+    'textarea',
+  ].includes(nodeName);
+
   const hasTabIndex = element.getAttribute('tabindex') === '0';
 
   return (
@@ -27,6 +29,26 @@ export const isFocusable = (element: Element): boolean => {
   );
 };
 
+/**
+ * Is an element focusable? This function performs various tests to see if the element in question
+ * can receive focus via a pointer. Should skip disabled elements as they are not focusable.
+ */
+export const isMouseFocusable = isBaseFocusable;
+
+/**
+ * Is an element focusable? This function performs various tests to see if the element in question
+ * can receive focus via the keyboard. Should skip disabled elements as they are not focusable.
+ */
+export const isKeyboardFocusable = (element: Element): boolean => {
+  return isBaseFocusable(element) && element.getAttribute('tabindex') !== '-1';
+};
+
+/**
+ * @deprecated Use `isMouseFocusable` for mouse events and `isKeyboardFocusable` for keyboard
+ * events. `isFocusable` is an alias to `isKeyboardFocusable`
+ */
+export const isFocusable = isKeyboardFocusable;
+
 /**
  * Get the first focusable element in a container.
  *
@@ -39,7 +61,7 @@ export const getFirstFocusableElement = (
 
   for (let i = 0; i < elements.length; i++) {
     const element = elements.item(i);
-    if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
+    if (element && isKeyboardFocusable(element) && element.getAttribute('tabindex') !== '-1') {
       if (isRadioInput(element)) {
         const radioGroup = getRadioGroup(container, element);
 
@@ -73,7 +95,7 @@ export const getLastFocusableElement = (container: HTMLElement): Element[] | Ele
 
   for (let i = elements.length - 1; i >= 0; i--) {
     const element = elements.item(i);
-    if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
+    if (element && isKeyboardFocusable(element) && element.getAttribute('tabindex') !== '-1') {
       if (isRadioInput(element)) {
         const radioGroup = getRadioGroup(container, element);
 

package/dist/commonjs/common/lib/utils/elements.d.ts

@@ -1,6 +1,16 @@
 /**
  * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus. Should skip disabled elements as they are not focusable.
+ * can receive focus via a pointer. Should skip disabled elements as they are not focusable.
+ */
+export declare const isMouseFocusable: (element: Element) => boolean;
+/**
+ * Is an element focusable? This function performs various tests to see if the element in question
+ * can receive focus via the keyboard. Should skip disabled elements as they are not focusable.
+ */
+export declare const isKeyboardFocusable: (element: Element) => boolean;
+/**
+ * @deprecated Use `isMouseFocusable` for mouse events and `isKeyboardFocusable` for keyboard
+ * events. `isFocusable` is an alias to `isKeyboardFocusable`
  */
 export declare const isFocusable: (element: Element) => boolean;
 /**

package/dist/commonjs/common/lib/utils/elements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,KAAG,OAuB9C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,cACxB,WAAW,KACrB,OAAO,EAAE,GAAG,WAAW,GAAG,IAgB5B,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,OAAO,EAAE,GAAG,OAAO,GAAG,IAgBtF,CAAC"}
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AA+BA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,YAnCK,OAAO,KAAG,OAmCG,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAEtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,YARqB,OAAO,KAAG,OAQT,CAAC;AAE/C;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,cACxB,WAAW,KACrB,OAAO,EAAE,GAAG,WAAW,GAAG,IAgB5B,CAAC;AAaF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,OAAO,EAAE,GAAG,OAAO,GAAG,IAgBtF,CAAC"}

package/dist/commonjs/common/lib/utils/elements.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLastFocusableElement = exports.getFirstFocusableElement = exports.isFocusable = void 0;
-/**
- * Is an element focusable? This function performs various tests to see if the element in question
- * can receive focus. Should skip disabled elements as they are not focusable.
- */
-const isFocusable = (element) => {
+exports.getLastFocusableElement = exports.getFirstFocusableElement = exports.isFocusable = exports.isKeyboardFocusable = exports.isMouseFocusable = void 0;
+const isBaseFocusable = (element) => {
     if (element.hasAttribute('disabled')) {
         return false;
     }
@@ -14,8 +10,14 @@ const isFocusable = (element) => {
     const validAnchor = nodeName === 'a' && element.hasAttribute('href');
     const validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
     const validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
-    const validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
-        element.getAttribute('tabindex') !== '-1';
+    const validNativelyFocusable = [
+        'button',
+        'details',
+        'embed',
+        'iframe',
+        'select',
+        'textarea',
+    ].includes(nodeName);
     const hasTabIndex = element.getAttribute('tabindex') === '0';
     return (validInput ||
         validAnchor ||
@@ -24,7 +26,24 @@ const isFocusable = (element) => {
         validNativelyFocusable ||
         hasTabIndex);
 };
-exports.isFocusable = isFocusable;
+/**
+ * Is an element focusable? This function performs various tests to see if the element in question
+ * can receive focus via a pointer. Should skip disabled elements as they are not focusable.
+ */
+exports.isMouseFocusable = isBaseFocusable;
+/**
+ * Is an element focusable? This function performs various tests to see if the element in question
+ * can receive focus via the keyboard. Should skip disabled elements as they are not focusable.
+ */
+const isKeyboardFocusable = (element) => {
+    return isBaseFocusable(element) && element.getAttribute('tabindex') !== '-1';
+};
+exports.isKeyboardFocusable = isKeyboardFocusable;
+/**
+ * @deprecated Use `isMouseFocusable` for mouse events and `isKeyboardFocusable` for keyboard
+ * events. `isFocusable` is an alias to `isKeyboardFocusable`
+ */
+exports.isFocusable = exports.isKeyboardFocusable;
 /**
  * Get the first focusable element in a container.
  *
@@ -34,7 +53,7 @@ const getFirstFocusableElement = (container) => {
     const elements = container.querySelectorAll('*');
     for (let i = 0; i < elements.length; i++) {
         const element = elements.item(i);
-        if (element && exports.isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
+        if (element && exports.isKeyboardFocusable(element) && element.getAttribute('tabindex') !== '-1') {
             if (isRadioInput(element)) {
                 const radioGroup = getRadioGroup(container, element);
                 return radioGroup.length > 1 ? Array.from(radioGroup) : element;
@@ -60,7 +79,7 @@ const getLastFocusableElement = (container) => {
     const elements = container.querySelectorAll('*');
     for (let i = elements.length - 1; i >= 0; i--) {
         const element = elements.item(i);
-        if (element && exports.isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
+        if (element && exports.isKeyboardFocusable(element) && element.getAttribute('tabindex') !== '-1') {
             if (isRadioInput(element)) {
                 const radioGroup = getRadioGroup(container, element);
                 return radioGroup.length > 1 ? Array.from(radioGroup) : element;

package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkD1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;MA2GzB,CAAC"}
+{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuD1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;MA2GzB,CAAC"}

package/dist/commonjs/popup/lib/hooks/useReturnFocus.js

@@ -25,7 +25,8 @@ function getFocusableElement(element) {
     if (element === null || element === document.body || !element.parentElement) {
         return null;
     }
-    else if (common_1.isFocusable(element)) {
+    else if (common_1.isFocusable(element) ||
+        ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(element.nodeName.toLowerCase())) {
         return element;
     }
     return getFocusableElement(element.parentElement);