@workday/canvas-kit-react 9.0.0-alpha.420-next.22 → 9.0.1

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/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/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/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-alpha.420-next.22+87587db5",
+  "version": "9.0.1",
   "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-alpha.420-next.22+87587db5",
+    "@workday/canvas-kit-popup-stack": "^9.0.1",
     "@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": "87587db5b8bc197a9b1a544d8851b884848647e9"
+  "gitHead": "dc49ff11c7d7597d8362cbf4fb796d9d143468b0"
 }