@workday/canvas-kit-react 10.1.3 → 10.1.4

package/dist/es6/common/lib/CanvasProvider.js

@@ -5,6 +5,9 @@ import { defaultCanvasTheme, useTheme } from './theming';
 import { brand } from '@workday/canvas-tokens-web';
 // eslint-disable-next-line @emotion/no-vanilla
 import { cache } from '@emotion/css';
+import { createStyles } from '@workday/canvas-kit-styling';
+// copied from brand/_variables.css
+const defaultBranding = createStyles({ name: "xyx30", styles: "--cnvs-brand-error-darkest{}--cnvs-brand-common-alert-inner{}--cnvs-brand-common-error-inner{}--cnvs-brand-common-focus-outline{}--cnvs-brand-neutral-accent{}--cnvs-brand-neutral-darkest{}--cnvs-brand-neutral-dark{}--cnvs-brand-neutral-base{}--cnvs-brand-neutral-light{}--cnvs-brand-neutral-lightest{}--cnvs-brand-success-accent{}--cnvs-brand-success-darkest{}--cnvs-brand-success-dark{}--cnvs-brand-success-base{}--cnvs-brand-success-light{}--cnvs-brand-success-lightest{}--cnvs-brand-error-accent{}--cnvs-brand-error-dark{}--cnvs-brand-error-base{}--cnvs-brand-error-light{}--cnvs-brand-error-lightest{}--cnvs-brand-alert-accent{}--cnvs-brand-alert-darkest{}--cnvs-brand-alert-dark{}--cnvs-brand-alert-base{}--cnvs-brand-alert-light{}--cnvs-brand-alert-lightest{}--cnvs-brand-primary-accent{}--cnvs-brand-primary-darkest{}--cnvs-brand-primary-dark{}--cnvs-brand-primary-base{}--cnvs-brand-primary-light{}--cnvs-brand-primary-lightest{}--cnvs-brand-gradient-primary{}" });
 const mappedKeys = {
     lightest: 'lightest',
     light: 'light',
@@ -13,21 +16,26 @@ const mappedKeys = {
     darkest: 'darkest',
     contrast: 'accent',
 };
-const useCanvasThemeToCssVars = (theme, elemProps) => {
+export const useCanvasThemeToCssVars = (theme, elemProps) => {
     const filledTheme = useTheme(theme);
+    const className = (elemProps.className || '').split(' ').concat(defaultBranding).join(' ');
+    const style = elemProps.style || {};
     const { palette } = filledTheme.canvas;
-    const style = ['common', 'primary', 'error', 'alert', 'success', 'neutral'].reduce((result, color) => {
+    ['common', 'primary', 'error', 'alert', 'success', 'neutral'].forEach(color => {
         if (color === 'common') {
             // @ts-ignore
-            result[brand.common.focusOutline] = palette.common.focusOutline;
+            style[brand.common.focusOutline] = palette.common.focusOutline;
         }
         ['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
+            // We only want to set custom colors if they do not match the default. The `defaultBranding` class will take care of the rest.
             // @ts-ignore
-            result[brand[color][mappedKeys[key]]] = palette[color][key];
+            if (palette[color][key] !== defaultCanvasTheme.palette[color][key]) {
+                // @ts-ignore
+                style[brand[color][mappedKeys[key]]] = palette[color][key];
+            }
         });
-        return result;
-    }, elemProps.style || {});
-    return { ...elemProps, style };
+    });
+    return { ...elemProps, className, style };
 };
 export const CanvasProvider = ({ children, theme = { canvas: defaultCanvasTheme }, ...props }) => {
     var _a;

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

@@ -1 +1 @@
-{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,8HAGvB,MAAM,SAAS,CAAC,WAAW,CA2C7B,CAAC"}
+{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,8HAGvB,MAAM,SAAS,CAAC,WAAW,CA0E7B,CAAC"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
-import { useLocalRef, useIsRTL } from '@workday/canvas-kit-react/common';
+import { useLocalRef, useIsRTL, useCanvasThemeToCssVars } from '@workday/canvas-kit-react/common';
+import { ThemeContext } from '@emotion/react';
 /**
  * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
  *
@@ -46,6 +47,8 @@ import { useLocalRef, useIsRTL } from '@workday/canvas-kit-react/common';
 export const usePopupStack = (ref, target) => {
     const { elementRef, localRef } = useLocalRef(ref);
     const isRTL = useIsRTL();
+    const theme = React.useContext(ThemeContext);
+    const { className, style } = useCanvasThemeToCssVars(theme, {});
     // useState function input ensures we only create a container once.
     const [popupRef] = React.useState(() => {
         const container = PopupStack.createContainer();
@@ -81,5 +84,32 @@ export const usePopupStack = (ref, target) => {
             (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('dir');
         }
     }, [localRef, isRTL]);
+    // theming className
+    React.useLayoutEffect(() => {
+        const element = localRef.current;
+        element === null || element === void 0 ? void 0 : element.classList.add(className.trim());
+        return () => {
+            element === null || element === void 0 ? void 0 : element.classList.remove(className.trim());
+        };
+    }, [localRef, className]);
+    React.useLayoutEffect(() => {
+        const element = localRef.current;
+        if (element) {
+            // eslint-disable-next-line guard-for-in
+            for (const key in style) {
+                // @ts-ignore
+                element.style.setProperty(key, style[key]);
+            }
+        }
+        return () => {
+            if (element) {
+                // eslint-disable-next-line guard-for-in
+                for (const key in style) {
+                    // @ts-ignore
+                    element.style.removeProperty(key, style[key]);
+                }
+            }
+        };
+    }, [localRef, style]);
     return localRef;
 };

package/dist/es6/select/lib/Select.js

@@ -9,7 +9,7 @@ import { useSelectModel } from './hooks/useSelectModel';
 import { useSelectCard } from './hooks/useSelectCard';
 import { useSelectInput } from './hooks/useSelectInput';
 import { createStyles } from '@workday/canvas-kit-styling';
-const selectInputStyles = createStyles({ name: "q2du11", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
+const selectInputStyles = createStyles({ name: "xyx312", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
 export const SelectInput = createSubcomponent(TextInput)({
     modelHook: useSelectModel,
     elemPropsHook: useSelectInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.1.3",
+  "version": "10.1.4",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,8 +50,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.1.3",
-    "@workday/canvas-kit-styling": "^10.1.3",
+    "@workday/canvas-kit-popup-stack": "^10.1.4",
+    "@workday/canvas-kit-styling": "^10.1.4",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.0",
     "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "2936b4918f4df739c86417d45700bbde98130fe9"
+  "gitHead": "6dbd6f678e12887b64fa3c6289bbd026849fc26a"
 }

package/popup/lib/hooks/usePopupStack.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {useLocalRef, useIsRTL} from '@workday/canvas-kit-react/common';
+import {useLocalRef, useIsRTL, useCanvasThemeToCssVars} from '@workday/canvas-kit-react/common';
+import {ThemeContext, Theme} from '@emotion/react';
 
 /**
  * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
@@ -51,6 +52,8 @@ export const usePopupStack = <E extends HTMLElement>(
 ): React.RefObject<HTMLElement> => {
   const {elementRef, localRef} = useLocalRef(ref);
   const isRTL = useIsRTL();
+  const theme = React.useContext(ThemeContext as React.Context<Theme>);
+  const {className, style} = useCanvasThemeToCssVars(theme, {});
 
   // useState function input ensures we only create a container once.
   const [popupRef] = React.useState(() => {
@@ -90,5 +93,34 @@ export const usePopupStack = <E extends HTMLElement>(
     }
   }, [localRef, isRTL]);
 
+  // theming className
+  React.useLayoutEffect(() => {
+    const element = localRef.current;
+    element?.classList.add(className.trim());
+    return () => {
+      element?.classList.remove(className.trim());
+    };
+  }, [localRef, className]);
+
+  React.useLayoutEffect(() => {
+    const element = localRef.current;
+    if (element) {
+      // eslint-disable-next-line guard-for-in
+      for (const key in style) {
+        // @ts-ignore
+        element.style.setProperty(key, style[key]);
+      }
+    }
+    return () => {
+      if (element) {
+        // eslint-disable-next-line guard-for-in
+        for (const key in style) {
+          // @ts-ignore
+          element.style.removeProperty(key, style[key]);
+        }
+      }
+    };
+  }, [localRef, style]);
+
   return localRef;
 };