@workday/canvas-kit-react 9.1.33 → 9.1.35

package/common/lib/utils/elements.ts

@@ -29,13 +29,22 @@ export const isFocusable = (element: Element): boolean => {
 
 /**
  * Get the first focusable element in a container.
+ *
+ * Returns an array of elements if the first focusable element is a radio group
  */
-export const getFirstFocusableElement = (container: HTMLElement): HTMLElement | null => {
+export const getFirstFocusableElement = (
+  container: HTMLElement
+): Element[] | HTMLElement | null => {
   const elements = container.querySelectorAll('*');
 
   for (let i = 0; i < elements.length; i++) {
     const element = elements.item(i);
     if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
+      if (isRadioInput(element)) {
+        const radioGroup = getRadioGroup(container, element);
+
+        return radioGroup.length > 1 ? Array.from(radioGroup) : element;
+      }
       return element as HTMLElement;
     }
   }

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

@@ -5,8 +5,10 @@
 export declare const isFocusable: (element: Element) => boolean;
 /**
  * Get the first focusable element in a container.
+ *
+ * Returns an array of elements if the first focusable element is a radio group
  */
-export declare const getFirstFocusableElement: (container: HTMLElement) => HTMLElement | null;
+export declare const getFirstFocusableElement: (container: HTMLElement) => Element[] | HTMLElement | null;
 /**
  * Get the last focusable element in a container.
  *

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;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,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":"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"}

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

@@ -27,12 +27,18 @@ const isFocusable = (element) => {
 exports.isFocusable = isFocusable;
 /**
  * Get the first focusable element in a container.
+ *
+ * Returns an array of elements if the first focusable element is a radio group
  */
 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 (isRadioInput(element)) {
+                const radioGroup = getRadioGroup(container, element);
+                return radioGroup.length > 1 ? Array.from(radioGroup) : element;
+            }
             return element;
         }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;MAsCjC,CAAC"}
+{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;MAwCjC,CAAC"}

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

@@ -28,6 +28,8 @@ exports.useCloseOnOutsideClick = common_1.createElemPropsHook(usePopupModel_1.us
             .sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
         if (elements.length &&
             elements[elements.length - 1] === model.state.stackRef.current &&
+            // Only consider event targets that are currently in the DOM as valid
+            document.contains(event.target) &&
             // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
             // decide if clicking the target should toggle the popup rather than it toggling implicitly
             // because the target is outside `ref.current`

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

@@ -5,8 +5,10 @@
 export declare const isFocusable: (element: Element) => boolean;
 /**
  * Get the first focusable element in a container.
+ *
+ * Returns an array of elements if the first focusable element is a radio group
  */
-export declare const getFirstFocusableElement: (container: HTMLElement) => HTMLElement | null;
+export declare const getFirstFocusableElement: (container: HTMLElement) => Element[] | HTMLElement | null;
 /**
  * Get the last focusable element in a container.
  *

package/dist/es6/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;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,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":"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"}

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

@@ -23,12 +23,18 @@ export const isFocusable = (element) => {
 };
 /**
  * Get the first focusable element in a container.
+ *
+ * Returns an array of elements if the first focusable element is a radio group
  */
 export const getFirstFocusableElement = (container) => {
     const elements = container.querySelectorAll('*');
     for (let i = 0; i < elements.length; i++) {
         const element = elements.item(i);
         if (element && isFocusable(element) && element.getAttribute('tabindex') !== '-1') {
+            if (isRadioInput(element)) {
+                const radioGroup = getRadioGroup(container, element);
+                return radioGroup.length > 1 ? Array.from(radioGroup) : element;
+            }
             return element;
         }
     }

package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;MAsCjC,CAAC"}
+{"version":3,"file":"useCloseOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useCloseOnOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;MAwCjC,CAAC"}

package/dist/es6/popup/lib/hooks/useCloseOnOutsideClick.js

@@ -22,6 +22,8 @@ export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model =
             .sort((a, b) => Number(a.style.zIndex) - Number(b.style.zIndex));
         if (elements.length &&
             elements[elements.length - 1] === model.state.stackRef.current &&
+            // Only consider event targets that are currently in the DOM as valid
+            document.contains(event.target) &&
             // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
             // decide if clicking the target should toggle the popup rather than it toggling implicitly
             // because the target is outside `ref.current`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.1.33",
+  "version": "9.1.35",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^9.1.33",
+    "@workday/canvas-kit-popup-stack": "^9.1.35",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "074ade9a9f7158e9414d0435b8843ed46f4abec7"
+  "gitHead": "ed62cb5cd886db87f0c0e2a74d7afe4df6cb5e61"
 }

package/popup/lib/hooks/useCloseOnOutsideClick.ts

@@ -27,6 +27,8 @@ export const useCloseOnOutsideClick = createElemPropsHook(usePopupModel)(model =
       if (
         elements.length &&
         elements[elements.length - 1] === model.state.stackRef.current &&
+        // Only consider event targets that are currently in the DOM as valid
+        document.contains(event.target as HTMLElement) &&
         // Use `PopupStack.contains` instead of `ref.current.contains` so that the application can
         // decide if clicking the target should toggle the popup rather than it toggling implicitly
         // because the target is outside `ref.current`