@workday/canvas-kit-react 9.0.0 → 9.0.2

package/checkbox/lib/Checkbox.tsx

@@ -359,7 +359,7 @@ export const Checkbox = createComponent('input')({
             htmlFor={inputId}
             disabled={disabled}
             variant={variant}
-            paddingLeft={checkboxLabelDistance}
+            paddingInlineStart={checkboxLabelDistance}
           >
             {label}
           </LabelText>

package/collection/lib/useListItemRovingFocus.tsx

@@ -33,28 +33,34 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
     const stateRef = React.useRef(model.state);
     stateRef.current = model.state;
 
-    const keyDownRef = React.useRef(false);
+    const keyElementRef = React.useRef<Element | null>(null);
     const isRTL = useIsRTL();
 
     React.useEffect(() => {
-      if (keyDownRef.current) {
+      if (keyElementRef.current) {
         const item = model.navigation.getItem(model.state.cursorId, model);
         if (model.state.isVirtualized) {
           model.state.UNSTABLE_virtual.scrollToIndex(item.index);
         }
 
+        const selector = (id?: string) => {
+          return document.querySelector<HTMLElement>(`[data-focus-id="${`${id}-${item.id}`}"]`);
+        };
+
         // In React concurrent mode, there could be several render attempts before the element we're
         // looking for could be available in the DOM
         retryEachFrame(() => {
-          const element = document.querySelector<HTMLElement>(
-            `[data-focus-id="${`${model.state.id}-${item.id}`}"]`
-          );
+          // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
+          // do not agree on a generated ID
+          const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
+          const element = selector(clientId) || selector(model.state.id);
 
           element?.focus();
+          if (element) {
+            keyElementRef.current = null;
+          }
           return !!element;
         }, 5); // 5 should be enough, right?!
-
-        keyDownRef.current = false;
       }
       // we only want to run this effect if the cursor changes and not any other time
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -72,7 +78,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
         const handled = keyboardEventToCursorEvents(event, model, isRTL);
         if (handled) {
           event.preventDefault();
-          keyDownRef.current = true;
+          keyElementRef.current = event.currentTarget;
         }
       },
       onClick() {

package/common/lib/utils/changeFocus.ts

@@ -10,15 +10,27 @@ export const changeFocus = (element: unknown) => {
     return;
   }
 
-  if (element instanceof HTMLElement) {
+  if (hasCallableProperty(element, 'focus')) {
     // Dispatch an unidentified keyboard event for an input provider prior to a focus change so that
     // the ring will appear.
-    if (typeof KeyboardEvent === 'function') {
+    if (typeof KeyboardEvent === 'function' && hasCallableProperty(element, 'dispatchEvent')) {
       const event = new KeyboardEvent('keydown', {bubbles: true, key: 'Unidentified'});
-
       element.dispatchEvent(event);
     }
 
     element.focus();
   }
 };
+
+type Callable<K extends string> = {
+  [P in K]: Function;
+};
+
+function hasCallableProperty<K extends string>(input: unknown, method: K): input is Callable<K> {
+  return (
+    !!input &&
+    typeof input === 'object' &&
+    method in input! &&
+    typeof (input as any)[method] === 'function'
+  );
+}

package/dist/commonjs/checkbox/lib/Checkbox.js

@@ -242,7 +242,7 @@ exports.Checkbox = common_1.createComponent('input')({
                     React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingLeft: checkboxLabelDistance }, label))));
+            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance }, label))));
     },
     subComponents: {
         ErrorType: common_1.ErrorType,

package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2CZ,mBAAmB;;;;EAkBzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiDZ,mBAAmB;;;;EAkBzC,CAAC"}

package/dist/commonjs/collection/lib/useListItemRovingFocus.js

@@ -34,22 +34,31 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
     // empty array
     const stateRef = react_1.default.useRef(model.state);
     stateRef.current = model.state;
-    const keyDownRef = react_1.default.useRef(false);
+    const keyElementRef = react_1.default.useRef(null);
     const isRTL = common_1.useIsRTL();
     react_1.default.useEffect(() => {
-        if (keyDownRef.current) {
+        if (keyElementRef.current) {
             const item = model.navigation.getItem(model.state.cursorId, model);
             if (model.state.isVirtualized) {
                 model.state.UNSTABLE_virtual.scrollToIndex(item.index);
             }
+            const selector = (id) => {
+                return document.querySelector(`[data-focus-id="${`${id}-${item.id}`}"]`);
+            };
             // In React concurrent mode, there could be several render attempts before the element we're
             // looking for could be available in the DOM
             retryEachFrame(() => {
-                const element = document.querySelector(`[data-focus-id="${`${model.state.id}-${item.id}`}"]`);
+                var _a, _b;
+                // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
+                // do not agree on a generated ID
+                const clientId = (_b = (_a = keyElementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-focus-id')) === null || _b === void 0 ? void 0 : _b.split('-')[0];
+                const element = selector(clientId) || selector(model.state.id);
                 element === null || element === void 0 ? void 0 : element.focus();
+                if (element) {
+                    keyElementRef.current = null;
+                }
                 return !!element;
             }, 5); // 5 should be enough, right?!
-            keyDownRef.current = false;
         }
         // we only want to run this effect if the cursor changes and not any other time
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +74,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
             const handled = keyUtils_1.keyboardEventToCursorEvents(event, model, isRTL);
             if (handled) {
                 event.preventDefault();
-                keyDownRef.current = true;
+                keyElementRef.current = event.currentTarget;
             }
         },
         onClick() {

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

@@ -1 +1 @@
-{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAmB3C,CAAC"}
+{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAkB3C,CAAC"}

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

@@ -12,10 +12,10 @@ const changeFocus = (element) => {
     if (document.activeElement === element || !element) {
         return;
     }
-    if (element instanceof HTMLElement) {
+    if (hasCallableProperty(element, 'focus')) {
         // Dispatch an unidentified keyboard event for an input provider prior to a focus change so that
         // the ring will appear.
-        if (typeof KeyboardEvent === 'function') {
+        if (typeof KeyboardEvent === 'function' && hasCallableProperty(element, 'dispatchEvent')) {
             const event = new KeyboardEvent('keydown', { bubbles: true, key: 'Unidentified' });
             element.dispatchEvent(event);
         }
@@ -23,3 +23,9 @@ const changeFocus = (element) => {
     }
 };
 exports.changeFocus = changeFocus;
+function hasCallableProperty(input, method) {
+    return (!!input &&
+        typeof input === 'object' &&
+        method in input &&
+        typeof input[method] === 'function');
+}

package/dist/es6/checkbox/lib/Checkbox.js

@@ -220,7 +220,7 @@ export const Checkbox = createComponent('input')({
                     React.createElement(CheckboxCheck, { checked: checked }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast }))))),
-            label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingLeft: checkboxLabelDistance }, label))));
+            label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance }, label))));
     },
     subComponents: {
         ErrorType,

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2CZ,mBAAmB;;;;EAkBzC,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiDZ,mBAAmB;;;;EAkBzC,CAAC"}

package/dist/es6/collection/lib/useListItemRovingFocus.js

@@ -28,22 +28,31 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)((m
     // empty array
     const stateRef = React.useRef(model.state);
     stateRef.current = model.state;
-    const keyDownRef = React.useRef(false);
+    const keyElementRef = React.useRef(null);
     const isRTL = useIsRTL();
     React.useEffect(() => {
-        if (keyDownRef.current) {
+        if (keyElementRef.current) {
             const item = model.navigation.getItem(model.state.cursorId, model);
             if (model.state.isVirtualized) {
                 model.state.UNSTABLE_virtual.scrollToIndex(item.index);
             }
+            const selector = (id) => {
+                return document.querySelector(`[data-focus-id="${`${id}-${item.id}`}"]`);
+            };
             // In React concurrent mode, there could be several render attempts before the element we're
             // looking for could be available in the DOM
             retryEachFrame(() => {
-                const element = document.querySelector(`[data-focus-id="${`${model.state.id}-${item.id}`}"]`);
+                var _a, _b;
+                // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
+                // do not agree on a generated ID
+                const clientId = (_b = (_a = keyElementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-focus-id')) === null || _b === void 0 ? void 0 : _b.split('-')[0];
+                const element = selector(clientId) || selector(model.state.id);
                 element === null || element === void 0 ? void 0 : element.focus();
+                if (element) {
+                    keyElementRef.current = null;
+                }
                 return !!element;
             }, 5); // 5 should be enough, right?!
-            keyDownRef.current = false;
         }
         // we only want to run this effect if the cursor changes and not any other time
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -59,7 +68,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)((m
             const handled = keyboardEventToCursorEvents(event, model, isRTL);
             if (handled) {
                 event.preventDefault();
-                keyDownRef.current = true;
+                keyElementRef.current = event.currentTarget;
             }
         },
         onClick() {

package/dist/es6/common/lib/utils/changeFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAmB3C,CAAC"}
+{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAkB3C,CAAC"}

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

@@ -9,13 +9,19 @@ export const changeFocus = (element) => {
     if (document.activeElement === element || !element) {
         return;
     }
-    if (element instanceof HTMLElement) {
+    if (hasCallableProperty(element, 'focus')) {
         // Dispatch an unidentified keyboard event for an input provider prior to a focus change so that
         // the ring will appear.
-        if (typeof KeyboardEvent === 'function') {
+        if (typeof KeyboardEvent === 'function' && hasCallableProperty(element, 'dispatchEvent')) {
             const event = new KeyboardEvent('keydown', { bubbles: true, key: 'Unidentified' });
             element.dispatchEvent(event);
         }
         element.focus();
     }
 };
+function hasCallableProperty(input, method) {
+    return (!!input &&
+        typeof input === 'object' &&
+        method in input &&
+        typeof input[method] === 'function');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "9.0.0",
+  "version": "9.0.2",
   "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.0.0",
+    "@workday/canvas-kit-popup-stack": "^9.0.2",
     "@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": "4e8110ad9758d19ef214fc6792f4803c2e25bac3"
+  "gitHead": "9e43c415e80c1586df4b5b8cdd81c8cdbfc4171d"
 }