@workday/canvas-kit-react 10.3.20 → 10.3.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/common/lib/CanvasProvider.tsx +2 -2
  2. package/dist/commonjs/common/lib/CanvasProvider.d.ts.map +1 -1
  3. package/dist/commonjs/common/lib/CanvasProvider.js +2 -2
  4. package/dist/commonjs/layout/lib/utils/mergeStyles.d.ts.map +1 -1
  5. package/dist/commonjs/layout/lib/utils/mergeStyles.js +3 -8
  6. package/dist/es6/common/lib/CanvasProvider.d.ts.map +1 -1
  7. package/dist/es6/common/lib/CanvasProvider.js +2 -2
  8. package/dist/es6/layout/lib/utils/mergeStyles.d.ts.map +1 -1
  9. package/dist/es6/layout/lib/utils/mergeStyles.js +3 -8
  10. package/layout/lib/utils/mergeStyles.ts +3 -11
  11. package/package.json +4 -5
package/common/lib/CanvasProvider.tsx CHANGED
@@ -3,8 +3,7 @@ import {Theme, ThemeProvider, CacheProvider} from '@emotion/react';
3
3
  import {InputProvider} from './InputProvider';
4
4
  import {defaultCanvasTheme, PartialEmotionCanvasTheme, useTheme} from './theming';
5
5
  import {brand} from '@workday/canvas-tokens-web';
6
- import {cache} from '@emotion/css';
7
- import {createStyles} from '@workday/canvas-kit-styling';
6
+ import {createStyles, getCache} from '@workday/canvas-kit-styling';
8
7
 
9
8
  export interface CanvasProviderProps {
10
9
  theme?: PartialEmotionCanvasTheme;
@@ -89,6 +88,7 @@ export const CanvasProvider = ({
89
88
  ...props
90
89
  }: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => {
91
90
  const elemProps = useCanvasThemeToCssVars(theme, props);
91
+ const cache = getCache();
92
92
  return (
93
93
  <CacheProvider value={cache}>
94
94
  <ThemeProvider theme={theme as Theme}>
package/dist/commonjs/common/lib/CanvasProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAKlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAezD,CAAC"}
1
+ {"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAIlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAgBzD,CAAC"}
package/dist/commonjs/common/lib/CanvasProvider.js CHANGED
@@ -25,7 +25,6 @@ const react_1 = require("@emotion/react");
25
25
  const InputProvider_1 = require("./InputProvider");
26
26
  const theming_1 = require("./theming");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
- const css_1 = require("@emotion/css");
29
28
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
30
29
  // copied from brand/_variables.css
31
30
  const defaultBranding = canvas_kit_styling_1.createStyles({ name: "fijyj9", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400, rgba(74,85,97,1));--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600, rgba(185,192,199,1));--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600, rgba(33,122,55,1));--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500, rgba(49,156,76,1));--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400, rgba(67,196,99,1));--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300, rgba(95,227,128,1));--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100, rgba(235,255,240,1));--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600, rgba(163,27,18,1));--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200, rgba(252,201,197,1));--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100, rgba(255,239,238,1));--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1));--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500, rgba(243,139,0,1));--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200, rgba(252,212,159,1));--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100, rgba(255,238,217,1));--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600, rgba(0,67,135,1));--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500, rgba(0,92,185,1));--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200, rgba(166,210,255,1));--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100, rgba(215,234,252,1));--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base, rgba(8,117,225,1)) 0%, var(--cnvs-brand-primary-dark, rgba(0,92,185,1)) 100%);" });
@@ -62,7 +61,8 @@ exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
62
61
  const CanvasProvider = ({ children, theme = { canvas: theming_1.defaultCanvasTheme }, ...props }) => {
63
62
  var _a;
64
63
  const elemProps = exports.useCanvasThemeToCssVars(theme, props);
65
- return (React.createElement(react_1.CacheProvider, { value: css_1.cache },
64
+ const cache = canvas_kit_styling_1.getCache();
65
+ return (React.createElement(react_1.CacheProvider, { value: cache },
66
66
  React.createElement(react_1.ThemeProvider, { theme: theme },
67
67
  React.createElement(InputProvider_1.InputProvider, null),
68
68
  React.createElement("div", Object.assign({ dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || theming_1.defaultCanvasTheme.direction }, elemProps), children))));
package/dist/commonjs/layout/lib/utils/mergeStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CAmCxC"}
1
+ {"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CA4BxC"}
package/dist/commonjs/layout/lib/utils/mergeStyles.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.mergeStyles = void 0;
4
- const css_1 = require("@emotion/css");
5
4
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
6
5
  const Box_1 = require("../Box");
7
6
  const background_1 = require("./background");
@@ -67,16 +66,12 @@ localCs) {
67
66
  }
68
67
  return result;
69
68
  }, {});
70
- // We need to determine if style props have been used. If they have, we need to merge all the CSS
71
- // classes into a single class name in the order that the class names are listed. This variable
72
- // will collect the CSS class name created by Emotion if we detect style props.
73
- let stylePropsClassName = '';
69
+ let styles = {};
74
70
  // We have style props. We need to create style and merge with our `csToProps` to get the correct
75
71
  // merging order for styles
76
72
  if (shouldRuntimeMergeStyles) {
77
- const styles = Box_1.boxStyleFn(styleProps);
78
- stylePropsClassName = css_1.css(styles);
73
+ styles = Box_1.boxStyleFn(styleProps);
79
74
  }
80
- return canvas_kit_styling_1.handleCsProp(elemProps, [localCs, stylePropsClassName]);
75
+ return canvas_kit_styling_1.handleCsProp(elemProps, [localCs, styles]);
81
76
  }
82
77
  exports.mergeStyles = mergeStyles;
package/dist/es6/common/lib/CanvasProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAKlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAezD,CAAC"}
1
+ {"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAIlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAgBzD,CAAC"}
package/dist/es6/common/lib/CanvasProvider.js CHANGED
@@ -3,8 +3,7 @@ import { ThemeProvider, CacheProvider } from '@emotion/react';
3
3
  import { InputProvider } from './InputProvider';
4
4
  import { defaultCanvasTheme, useTheme } from './theming';
5
5
  import { brand } from '@workday/canvas-tokens-web';
6
- import { cache } from '@emotion/css';
7
- import { createStyles } from '@workday/canvas-kit-styling';
6
+ import { createStyles, getCache } from '@workday/canvas-kit-styling';
8
7
  // copied from brand/_variables.css
9
8
  const defaultBranding = createStyles({ name: "fijyj9", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400, rgba(74,85,97,1));--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600, rgba(185,192,199,1));--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600, rgba(33,122,55,1));--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500, rgba(49,156,76,1));--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400, rgba(67,196,99,1));--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300, rgba(95,227,128,1));--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100, rgba(235,255,240,1));--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600, rgba(163,27,18,1));--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200, rgba(252,201,197,1));--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100, rgba(255,239,238,1));--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1));--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500, rgba(243,139,0,1));--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200, rgba(252,212,159,1));--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100, rgba(255,238,217,1));--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600, rgba(0,67,135,1));--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500, rgba(0,92,185,1));--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200, rgba(166,210,255,1));--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100, rgba(215,234,252,1));--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base, rgba(8,117,225,1)) 0%, var(--cnvs-brand-primary-dark, rgba(0,92,185,1)) 100%);" });
10
9
  const mappedKeys = {
@@ -39,6 +38,7 @@ export const useCanvasThemeToCssVars = (theme, elemProps) => {
39
38
  export const CanvasProvider = ({ children, theme = { canvas: defaultCanvasTheme }, ...props }) => {
40
39
  var _a;
41
40
  const elemProps = useCanvasThemeToCssVars(theme, props);
41
+ const cache = getCache();
42
42
  return (React.createElement(CacheProvider, { value: cache },
43
43
  React.createElement(ThemeProvider, { theme: theme },
44
44
  React.createElement(InputProvider, null),
package/dist/es6/layout/lib/utils/mergeStyles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CAmCxC"}
1
+ {"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CA4BxC"}
package/dist/es6/layout/lib/utils/mergeStyles.js CHANGED
@@ -1,4 +1,3 @@
1
- import { css } from '@emotion/css';
2
1
  import { handleCsProp } from '@workday/canvas-kit-styling';
3
2
  import { boxStyleFn } from '../Box';
4
3
  import { backgroundStyleFnConfigs } from './background';
@@ -64,15 +63,11 @@ localCs) {
64
63
  }
65
64
  return result;
66
65
  }, {});
67
- // We need to determine if style props have been used. If they have, we need to merge all the CSS
68
- // classes into a single class name in the order that the class names are listed. This variable
69
- // will collect the CSS class name created by Emotion if we detect style props.
70
- let stylePropsClassName = '';
66
+ let styles = {};
71
67
  // We have style props. We need to create style and merge with our `csToProps` to get the correct
72
68
  // merging order for styles
73
69
  if (shouldRuntimeMergeStyles) {
74
- const styles = boxStyleFn(styleProps);
75
- stylePropsClassName = css(styles);
70
+ styles = boxStyleFn(styleProps);
76
71
  }
77
- return handleCsProp(elemProps, [localCs, stylePropsClassName]);
72
+ return handleCsProp(elemProps, [localCs, styles]);
78
73
  }
package/layout/lib/utils/mergeStyles.ts CHANGED
@@ -1,4 +1,3 @@
1
- import {css} from '@emotion/css';
2
1
  import {CSToPropsInput, handleCsProp} from '@workday/canvas-kit-styling';
3
2
  import {boxStyleFn} from '../Box';
4
3
  import {backgroundStyleFnConfigs} from './background';
@@ -71,20 +70,13 @@ export function mergeStyles<T extends {}>(
71
70
  return result;
72
71
  }, {});
73
72
 
74
- // We need to determine if style props have been used. If they have, we need to merge all the CSS
75
- // classes into a single class name in the order that the class names are listed. This variable
76
- // will collect the CSS class name created by Emotion if we detect style props.
77
- let stylePropsClassName = '';
73
+ let styles = {};
78
74
 
79
75
  // We have style props. We need to create style and merge with our `csToProps` to get the correct
80
76
  // merging order for styles
81
77
  if (shouldRuntimeMergeStyles) {
82
- const styles = boxStyleFn(styleProps);
83
- stylePropsClassName = css(styles);
78
+ styles = boxStyleFn(styleProps);
84
79
  }
85
80
 
86
- return handleCsProp(elemProps, [localCs, stylePropsClassName]) as Omit<
87
- T,
88
- 'cs' | keyof CommonStyleProps
89
- >;
81
+ return handleCsProp(elemProps, [localCs, styles]) as Omit<T, 'cs' | keyof CommonStyleProps>;
90
82
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "10.3.20",
3
+ "version": "10.3.21",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -44,14 +44,13 @@
44
44
  "react": ">=16.14"
45
45
  },
46
46
  "dependencies": {
47
- "@emotion/css": "^11.7.1",
48
47
  "@emotion/is-prop-valid": "^1.1.1",
49
48
  "@emotion/react": "^11.7.1",
50
49
  "@emotion/styled": "^11.6.0",
51
50
  "@popperjs/core": "^2.5.4",
52
51
  "@workday/canvas-colors-web": "^2.0.0",
53
- "@workday/canvas-kit-popup-stack": "^10.3.20",
54
- "@workday/canvas-kit-styling": "^10.3.20",
52
+ "@workday/canvas-kit-popup-stack": "^10.3.21",
53
+ "@workday/canvas-kit-styling": "^10.3.21",
55
54
  "@workday/canvas-system-icons-web": "^3.0.0",
56
55
  "@workday/canvas-tokens-web": "^1.0.0",
57
56
  "@workday/design-assets-types": "^0.2.8",
@@ -69,5 +68,5 @@
69
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
70
  },
72
- "gitHead": "9b527c32c8b8000389bad9dd308cefac74964011"
71
+ "gitHead": "34c1299ee9d566e02138463314a7d7eaf8ddde85"
73
72
  }