@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.0 → 7.0.0-alpha.0-next.5

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 (115) hide show
  1. package/combobox/lib/Combobox.tsx +5 -3
  2. package/common/README.md +10 -4
  3. package/common/lib/Box.tsx +26 -4
  4. package/common/lib/theming/useThemedRing.ts +9 -5
  5. package/common/lib/utils/other.ts +20 -0
  6. package/dist/commonjs/combobox/index.js +12 -4
  7. package/dist/commonjs/combobox/lib/AutocompleteList.d.ts.map +1 -1
  8. package/dist/commonjs/combobox/lib/AutocompleteList.js +19 -7
  9. package/dist/commonjs/combobox/lib/Combobox.d.ts.map +1 -1
  10. package/dist/commonjs/combobox/lib/Combobox.js +27 -12
  11. package/dist/commonjs/combobox/lib/Status.d.ts.map +1 -1
  12. package/dist/commonjs/combobox/lib/Status.js +14 -2
  13. package/dist/commonjs/common/index.js +15 -7
  14. package/dist/commonjs/common/lib/Box.d.ts +3 -2
  15. package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
  16. package/dist/commonjs/common/lib/Box.js +31 -9
  17. package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts.map +1 -1
  18. package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.js +3 -1
  19. package/dist/commonjs/common/lib/storybook-utils/permutateProps.d.ts.map +1 -1
  20. package/dist/commonjs/common/lib/storybook-utils/permutateProps.js +3 -1
  21. package/dist/commonjs/common/lib/theming/index.js +12 -5
  22. package/dist/commonjs/common/lib/theming/useThemeRTL.d.ts.map +1 -1
  23. package/dist/commonjs/common/lib/theming/useThemeRTL.js +1 -0
  24. package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +1 -1
  25. package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +1 -1
  26. package/dist/commonjs/common/lib/theming/useThemedRing.js +8 -2
  27. package/dist/commonjs/common/lib/utils/border.js +1 -0
  28. package/dist/commonjs/common/lib/utils/color.js +1 -0
  29. package/dist/commonjs/common/lib/utils/depth.js +1 -0
  30. package/dist/commonjs/common/lib/utils/flexItem.js +1 -0
  31. package/dist/commonjs/common/lib/utils/layout.js +1 -0
  32. package/dist/commonjs/common/lib/utils/other.d.ts +5 -0
  33. package/dist/commonjs/common/lib/utils/other.d.ts.map +1 -0
  34. package/dist/commonjs/common/lib/utils/other.js +19 -0
  35. package/dist/commonjs/common/lib/utils/position.js +1 -0
  36. package/dist/commonjs/common/lib/utils/space.js +1 -0
  37. package/dist/commonjs/drawer/index.js +12 -4
  38. package/dist/commonjs/drawer/lib/Drawer.js +21 -8
  39. package/dist/commonjs/drawer/lib/DrawerHeader.js +20 -8
  40. package/dist/commonjs/header/index.js +14 -6
  41. package/dist/commonjs/header/lib/GlobalHeader.js +20 -8
  42. package/dist/commonjs/header/lib/Header.js +22 -10
  43. package/dist/commonjs/header/lib/parts/DubLogoTitle.js +16 -3
  44. package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.js +21 -8
  45. package/dist/commonjs/header/lib/parts/index.js +3 -2
  46. package/dist/commonjs/header/lib/shared/themes.js +1 -0
  47. package/dist/commonjs/header/lib/shared/types.js +1 -0
  48. package/dist/commonjs/index.js +16 -9
  49. package/dist/commonjs/layout/index.js +12 -5
  50. package/dist/commonjs/layout/lib/Flex.d.ts +1 -1
  51. package/dist/commonjs/layout/lib/Flex.d.ts.map +1 -1
  52. package/dist/commonjs/layout/lib/Flex.js +20 -7
  53. package/dist/commonjs/layout/lib/Stack.d.ts +8 -8
  54. package/dist/commonjs/layout/lib/Stack.d.ts.map +1 -1
  55. package/dist/commonjs/layout/lib/Stack.js +26 -13
  56. package/dist/commonjs/layout/lib/utils/flex.js +1 -0
  57. package/dist/commonjs/layout/lib/utils/getValidChildren.js +15 -2
  58. package/dist/commonjs/layout/lib/utils/stack.js +1 -0
  59. package/dist/commonjs/search-form/index.js +12 -5
  60. package/dist/commonjs/search-form/lib/SearchForm.d.ts +3 -2
  61. package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +1 -1
  62. package/dist/commonjs/search-form/lib/SearchForm.js +21 -8
  63. package/dist/commonjs/search-form/lib/themes.d.ts.map +1 -1
  64. package/dist/commonjs/search-form/lib/themes.js +1 -0
  65. package/dist/es6/combobox/lib/AutocompleteList.d.ts.map +1 -1
  66. package/dist/es6/combobox/lib/Combobox.d.ts.map +1 -1
  67. package/dist/es6/combobox/lib/Combobox.js +1 -1
  68. package/dist/es6/combobox/lib/Status.d.ts.map +1 -1
  69. package/dist/es6/common/lib/Box.d.ts +3 -2
  70. package/dist/es6/common/lib/Box.d.ts.map +1 -1
  71. package/dist/es6/common/lib/Box.js +12 -3
  72. package/dist/es6/common/lib/storybook-utils/ComponentStatesTable.d.ts.map +1 -1
  73. package/dist/es6/common/lib/storybook-utils/permutateProps.d.ts.map +1 -1
  74. package/dist/es6/common/lib/storybook-utils/propTypes.js +1 -0
  75. package/dist/es6/common/lib/theming/useThemeRTL.d.ts.map +1 -1
  76. package/dist/es6/common/lib/theming/useThemedRing.d.ts +1 -1
  77. package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +1 -1
  78. package/dist/es6/common/lib/theming/useThemedRing.js +5 -1
  79. package/dist/es6/common/lib/utils/other.d.ts +5 -0
  80. package/dist/es6/common/lib/utils/other.d.ts.map +1 -0
  81. package/dist/es6/common/lib/utils/other.js +15 -0
  82. package/dist/es6/common/lib/utils/types.js +1 -0
  83. package/dist/es6/drawer/lib/Drawer.js +1 -1
  84. package/dist/es6/drawer/lib/DrawerHeader.js +1 -1
  85. package/dist/es6/header/lib/GlobalHeader.js +1 -1
  86. package/dist/es6/header/lib/Header.js +2 -2
  87. package/dist/es6/header/lib/parts/DubLogoTitle.js +1 -1
  88. package/dist/es6/header/lib/parts/WorkdayLogoTitle.js +1 -1
  89. package/dist/es6/layout/lib/Flex.d.ts +1 -1
  90. package/dist/es6/layout/lib/Flex.d.ts.map +1 -1
  91. package/dist/es6/layout/lib/Stack.d.ts +8 -8
  92. package/dist/es6/layout/lib/Stack.d.ts.map +1 -1
  93. package/dist/es6/layout/lib/Stack.js +6 -6
  94. package/dist/es6/layout/lib/utils/types.js +1 -0
  95. package/dist/es6/search-form/lib/SearchForm.d.ts +3 -2
  96. package/dist/es6/search-form/lib/SearchForm.d.ts.map +1 -1
  97. package/dist/es6/search-form/lib/SearchForm.js +1 -1
  98. package/dist/es6/search-form/lib/themes.d.ts.map +1 -1
  99. package/header/lib/Header.tsx +2 -2
  100. package/layout/lib/Stack.tsx +10 -26
  101. package/package.json +7 -7
  102. package/search-form/lib/SearchForm.tsx +3 -3
  103. package/search-form/lib/themes.ts +2 -1
  104. package/ts3.5/dist/commonjs/common/lib/Box.d.ts +3 -2
  105. package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +1 -1
  106. package/ts3.5/dist/commonjs/common/lib/utils/other.d.ts +5 -0
  107. package/ts3.5/dist/commonjs/layout/lib/Flex.d.ts +1 -1
  108. package/ts3.5/dist/commonjs/layout/lib/Stack.d.ts +8 -8
  109. package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts +3 -2
  110. package/ts3.5/dist/es6/common/lib/Box.d.ts +3 -2
  111. package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +1 -1
  112. package/ts3.5/dist/es6/common/lib/utils/other.d.ts +5 -0
  113. package/ts3.5/dist/es6/layout/lib/Flex.d.ts +1 -1
  114. package/ts3.5/dist/es6/layout/lib/Stack.d.ts +8 -8
  115. package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts +3 -2
@@ -1,5 +1,5 @@
1
1
  import React, {useEffect, useLayoutEffect, useRef, useState, useCallback} from 'react';
2
- import {CSSObject, jsx, keyframes} from '@emotion/core';
2
+ import {jsx, keyframes, CSSObject} from '@emotion/react';
3
3
  import {
4
4
  GrowthBehavior,
5
5
  useForkRef,
@@ -426,8 +426,10 @@ const Combobox = ({
426
426
  [paddingDirection]: space.xl,
427
427
  };
428
428
  }
429
- const newTextInputProps: Partial<TextInputProps &
430
- React.InputHTMLAttributes<HTMLInputElement> & {ref: React.Ref<HTMLInputElement>}> = {
429
+ const newTextInputProps: Partial<
430
+ TextInputProps &
431
+ React.InputHTMLAttributes<HTMLInputElement> & {ref: React.Ref<HTMLInputElement>}
432
+ > & {css: CSSObject} = {
431
433
  type: 'text',
432
434
  id: componentId,
433
435
  grow: grow,
package/common/README.md CHANGED
@@ -31,6 +31,7 @@ together.
31
31
  ### Usage
32
32
 
33
33
  ```tsx
34
+ /** @jsxRuntime classic */
34
35
  /** @jsx jsx */
35
36
  import {jsx} from '@emotion/core';
36
37
  import {ComponentStyles, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
@@ -67,19 +68,23 @@ export const HelloWorld = ({backgroundImagePath}) => {
67
68
 
68
69
  ## useThemedRing
69
70
 
70
- This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline` ring when the input is focused.
71
- Note: You should not rely on these colors alone to differentiate alerts, but use them in combination with icons or hint text.
71
+ This is a way to automatically add themed colors to your inputs. This is helpful when showing alerts
72
+ to users. It supports `error`, `alert`, and `success` states. It will try and use the corresponding
73
+ `main` colors from your `CanvasThemePalette` unless they do not meet accessibility contrast, in
74
+ which case the outer ring will use the `darkest` color. This hook will also show a `focusOutline`
75
+ ring when the input is focused. Note: You should not rely on these colors alone to differentiate
76
+ alerts, but use them in combination with icons or hint text.
72
77
 
73
78
  ### Usage
74
79
 
75
80
  ```tsx
81
+ /** @jsxRuntime classic */
76
82
  /** @jsx jsx */
77
83
  import {jsx} from '@emotion/core';
78
84
  import React from 'react';
79
85
  import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
80
86
  import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
81
87
 
82
-
83
88
  export const MyInput = ({handleChange}) => {
84
89
  const [value, setValue] = React.useState('invalid@email');
85
90
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -95,4 +100,5 @@ export const MyInput = ({handleChange}) => {
95
100
  <TextInput.Hint>Please enter a valid email.</TextInput.Hint>
96
101
  </TextInput>
97
102
  );
98
- }
103
+ };
104
+ ```
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import styled from '@emotion/styled';
3
3
  import isPropValid from '@emotion/is-prop-valid';
4
- import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
4
+ import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
5
5
 
6
6
  // style props
7
7
  import {border, BorderStyleProps} from './utils/border';
@@ -9,6 +9,7 @@ import {color, ColorStyleProps} from './utils/color';
9
9
  import {depth, DepthStyleProps} from './utils/depth';
10
10
  import {flexItem, FlexItemStyleProps} from './utils/flexItem';
11
11
  import {layout, LayoutStyleProps} from './utils/layout';
12
+ import {other, OtherStyleProps} from './utils/other';
12
13
  import {position, PositionStyleProps} from './utils/position';
13
14
  import {space, SpaceStyleProps} from './utils/space';
14
15
 
@@ -17,6 +18,7 @@ export type BoxProps = BorderStyleProps &
17
18
  DepthStyleProps &
18
19
  FlexItemStyleProps &
19
20
  LayoutStyleProps &
21
+ OtherStyleProps &
20
22
  PositionStyleProps &
21
23
  SpaceStyleProps & {
22
24
  children?: React.ReactNode;
@@ -28,7 +30,8 @@ const shouldForwardProp = (prop: string) => {
28
30
  return isPropValid(prop) && !omittedProps.includes(prop);
29
31
  };
30
32
 
31
- const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
33
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
34
+ const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
32
35
  {
33
36
  boxSizing: 'border-box',
34
37
  },
@@ -41,6 +44,21 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
41
44
  space
42
45
  );
43
46
 
47
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
48
+ const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
49
+ {
50
+ boxSizing: 'border-box',
51
+ },
52
+ border,
53
+ color,
54
+ depth,
55
+ flexItem,
56
+ layout,
57
+ other,
58
+ position,
59
+ space
60
+ );
61
+
44
62
  /**
45
63
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
46
64
  * It is highly flexible, and its primary purpose is to build other components.
@@ -61,10 +79,14 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
61
79
  export const Box = createComponent('div')({
62
80
  displayName: 'Box',
63
81
  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
82
+ const BoxComponent = useConstant(() =>
83
+ typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
84
+ );
85
+
64
86
  return (
65
- <StyledBox as={Element} ref={ref} {...elemProps}>
87
+ <BoxComponent as={Element} ref={ref} {...elemProps}>
66
88
  {children}
67
- </StyledBox>
89
+ </BoxComponent>
68
90
  );
69
91
  },
70
92
  });
@@ -15,12 +15,16 @@ const isAccessible = (foreground: string, background: string = colors.frenchVani
15
15
 
16
16
  const getPaletteColorsFromTheme = (
17
17
  palette: CanvasThemePalette,
18
- fallbackColors?: ContrastColors,
18
+ fallbackColors?: ContrastColors
19
19
  ): ContrastColors => {
20
20
  return {
21
- outer: isAccessible(palette.main) ? palette.main : isAccessible(palette.darkest) ? palette.darkest : fallbackColors?.outer,
21
+ outer: isAccessible(palette.main)
22
+ ? palette.main
23
+ : isAccessible(palette.darkest)
24
+ ? palette.darkest
25
+ : fallbackColors?.outer,
22
26
  inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
23
- }
27
+ };
24
28
  };
25
29
 
26
30
  export function getPaletteColors(
@@ -31,10 +35,10 @@ export function getPaletteColors(
31
35
 
32
36
  switch (type) {
33
37
  case 'error': {
34
- return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
38
+ return getPaletteColorsFromTheme(palette, {outer: inputColors.error.border});
35
39
  }
36
40
  case 'alert': {
37
- return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
41
+ return getPaletteColorsFromTheme(palette, {outer: colors.cantaloupe600});
38
42
  }
39
43
  case 'success': {
40
44
  return getPaletteColorsFromTheme(palette, {
@@ -0,0 +1,20 @@
1
+ export type OtherStyleProps = {
2
+ animation?: string;
3
+ };
4
+
5
+ const otherProps = {
6
+ animation: (value: string) => {
7
+ return {animation: value};
8
+ },
9
+ };
10
+
11
+ export function other<P extends OtherStyleProps>(props: P) {
12
+ for (const key in props) {
13
+ if (key in otherProps) {
14
+ const value = props[key as keyof OtherStyleProps] as keyof OtherStyleProps;
15
+ const styleFn = otherProps[key as keyof OtherStyleProps];
16
+ return styleFn(value);
17
+ }
18
+ }
19
+ return {};
20
+ }
@@ -1,12 +1,20 @@
1
1
  "use strict";
2
- function __export(m) {
3
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
4
- }
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
+ };
5
12
  var __importDefault = (this && this.__importDefault) || function (mod) {
6
13
  return (mod && mod.__esModule) ? mod : { "default": mod };
7
14
  };
8
15
  Object.defineProperty(exports, "__esModule", { value: true });
16
+ exports.Combobox = void 0;
9
17
  var Combobox_1 = __importDefault(require("./lib/Combobox"));
10
18
  exports.Combobox = Combobox_1.default;
11
19
  exports.default = Combobox_1.default;
12
- __export(require("./lib/Combobox"));
20
+ __exportStar(require("./lib/Combobox"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,mJAwFrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"AutocompleteList.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/AutocompleteList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAiD,MAAM,YAAY,CAAC;AAYjG,UAAU,qBAAqB;IAC7B;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACjF;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,uBAAuB,EAAE,CACvB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,EAC3C,aAAa,EAAE,aAAa,KACzB,IAAI,CAAC;IACV;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,gBAAgB,uGAOnB,qBAAqB,uBAiFvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
13
32
  var __spreadArrays = (this && this.__spreadArrays) || function () {
14
33
  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
15
34
  for (var r = Array(s), k = 0, i = 0; i < il; i++)
@@ -17,13 +36,6 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
17
36
  r[k] = a[j];
18
37
  return r;
19
38
  };
20
- var __importStar = (this && this.__importStar) || function (mod) {
21
- if (mod && mod.__esModule) return mod;
22
- var result = {};
23
- if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
24
- result["default"] = mod;
25
- return result;
26
- };
27
39
  var __importDefault = (this && this.__importDefault) || function (mod) {
28
40
  return (mod && mod.__esModule) ? mod : { "default": mod };
29
41
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,wCAc9B,CAAC;AAYF,QAAA,MAAM,QAAQ,qNAuUb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EACL,cAAc,EAKf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AAErE,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,cAAc,EAAC,MAAM,sCAAsC,CAAC;AAKpE,MAAM,WAAW,qBAAqB;IAEpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAE1C,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;CAC5C;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACtF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAClF;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AA6DD,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,eAAO,MAAM,WAAW,qEACc,CAAC;AAEvC,eAAO,MAAM,kBAAkB,cAAe,MAAM,SAAS,WAc5D,CAAC;AAYF,QAAA,MAAM,QAAQ,wLAeX,aAAa,gBA0Tf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
13
32
  var __rest = (this && this.__rest) || function (s, e) {
14
33
  var t = {};
15
34
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,19 +40,13 @@ var __rest = (this && this.__rest) || function (s, e) {
21
40
  }
22
41
  return t;
23
42
  };
24
- var __importStar = (this && this.__importStar) || function (mod) {
25
- if (mod && mod.__esModule) return mod;
26
- var result = {};
27
- if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
28
- result["default"] = mod;
29
- return result;
30
- };
31
43
  var __importDefault = (this && this.__importDefault) || function (mod) {
32
44
  return (mod && mod.__esModule) ? mod : { "default": mod };
33
45
  };
34
46
  Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.getTextFromElement = exports.getOptionId = exports.listBoxIdPart = void 0;
35
48
  var react_1 = __importStar(require("react"));
36
- var core_1 = require("@emotion/core");
49
+ var react_2 = require("@emotion/react");
37
50
  var common_1 = require("@workday/canvas-kit-react/common");
38
51
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
39
52
  var card_1 = require("@workday/canvas-kit-react/card");
@@ -55,7 +68,7 @@ var InputContainer = common_1.styled('div')({
55
68
  alignItems: "center",
56
69
  position: 'relative',
57
70
  });
58
- var fadeInKeyframes = core_1.keyframes({
71
+ var fadeInKeyframes = react_2.keyframes({
59
72
  '0%': {
60
73
  opacity: 0,
61
74
  },
@@ -98,10 +111,11 @@ var ResetButton = common_1.styled(button_1.IconButton)({
98
111
  });
99
112
  exports.listBoxIdPart = "listbox";
100
113
  var optionIdPart = "option";
101
- exports.getOptionId = function (baseId, index) {
114
+ var getOptionId = function (baseId, index) {
102
115
  return baseId + "-" + optionIdPart + "-" + index;
103
116
  };
104
- exports.getTextFromElement = function (children) {
117
+ exports.getOptionId = getOptionId;
118
+ var getTextFromElement = function (children) {
105
119
  var text = '';
106
120
  react_1.default.Children.map(children, function (child) {
107
121
  if (child == null || typeof child === 'boolean' || child === {}) {
@@ -119,6 +133,7 @@ exports.getTextFromElement = function (children) {
119
133
  });
120
134
  return text;
121
135
  };
136
+ exports.getTextFromElement = getTextFromElement;
122
137
  var buildStatusString = function (listCount) {
123
138
  return "There " + (listCount === 1 ? 'is' : 'are') + " " + listCount + " suggestion" + (listCount === 1 ? '' : 's') + ".";
124
139
  };
@@ -344,7 +359,7 @@ var Combobox = function (_a) {
344
359
  'aria-expanded': showingAutocomplete,
345
360
  };
346
361
  var cloneElement = function (element, props) {
347
- return core_1.jsx(element.type, __assign(__assign({}, element.props), props));
362
+ return react_2.jsx(element.type, __assign(__assign({}, element.props), props));
348
363
  };
349
364
  return cloneElement(inputElement, __assign(__assign({}, inputElement.props), newTextInputProps));
350
365
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,QAAA,MAAM,MAAM,mHA8BX,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../../../combobox/lib/Status.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;IAC1C,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACxE,YAAY,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID,QAAA,MAAM,MAAM,wFAOT,WAAW,gBAuBb,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -1,9 +1,21 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
2
14
  var __importStar = (this && this.__importStar) || function (mod) {
3
15
  if (mod && mod.__esModule) return mod;
4
16
  var result = {};
5
- if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
6
- result["default"] = mod;
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
7
19
  return result;
8
20
  };
9
21
  var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -1,11 +1,19 @@
1
1
  "use strict";
2
- function __export(m) {
3
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
4
- }
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
+ };
5
12
  Object.defineProperty(exports, "__esModule", { value: true });
6
- __export(require("./lib/Box"));
7
- __export(require("./lib/theming"));
13
+ exports.permutateProps = exports.ComponentStatesTable = void 0;
14
+ __exportStar(require("./lib/Box"), exports);
15
+ __exportStar(require("./lib/theming"), exports);
8
16
  var ComponentStatesTable_1 = require("./lib/storybook-utils/ComponentStatesTable");
9
- exports.ComponentStatesTable = ComponentStatesTable_1.ComponentStatesTable;
17
+ Object.defineProperty(exports, "ComponentStatesTable", { enumerable: true, get: function () { return ComponentStatesTable_1.ComponentStatesTable; } });
10
18
  var permutateProps_1 = require("./lib/storybook-utils/permutateProps");
11
- exports.permutateProps = permutateProps_1.permutateProps;
19
+ Object.defineProperty(exports, "permutateProps", { enumerable: true, get: function () { return permutateProps_1.permutateProps; } });
@@ -4,9 +4,10 @@ import { ColorStyleProps } from './utils/color';
4
4
  import { DepthStyleProps } from './utils/depth';
5
5
  import { FlexItemStyleProps } from './utils/flexItem';
6
6
  import { LayoutStyleProps } from './utils/layout';
7
+ import { OtherStyleProps } from './utils/other';
7
8
  import { PositionStyleProps } from './utils/position';
8
9
  import { SpaceStyleProps } from './utils/space';
9
- export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & PositionStyleProps & SpaceStyleProps & {
10
+ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
10
11
  children?: React.ReactNode;
11
12
  };
12
13
  /**
@@ -26,5 +27,5 @@ export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStylePr
26
27
  * );
27
28
  *
28
29
  */
29
- export declare const Box: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
30
+ export declare const Box: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
30
31
  //# sourceMappingURL=Box.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBASd,CAAC"}
1
+ {"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../common/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAqCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,2oBAad,CAAC"}
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
13
32
  var __rest = (this && this.__rest) || function (s, e) {
14
33
  var t = {};
15
34
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,17 +40,11 @@ var __rest = (this && this.__rest) || function (s, e) {
21
40
  }
22
41
  return t;
23
42
  };
24
- var __importStar = (this && this.__importStar) || function (mod) {
25
- if (mod && mod.__esModule) return mod;
26
- var result = {};
27
- if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
28
- result["default"] = mod;
29
- return result;
30
- };
31
43
  var __importDefault = (this && this.__importDefault) || function (mod) {
32
44
  return (mod && mod.__esModule) ? mod : { "default": mod };
33
45
  };
34
46
  Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.Box = void 0;
35
48
  var React = __importStar(require("react"));
36
49
  var styled_1 = __importDefault(require("@emotion/styled"));
37
50
  var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
@@ -42,15 +55,21 @@ var color_1 = require("./utils/color");
42
55
  var depth_1 = require("./utils/depth");
43
56
  var flexItem_1 = require("./utils/flexItem");
44
57
  var layout_1 = require("./utils/layout");
58
+ var other_1 = require("./utils/other");
45
59
  var position_1 = require("./utils/position");
46
60
  var space_1 = require("./utils/space");
47
61
  var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
48
62
  var shouldForwardProp = function (prop) {
49
63
  return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
50
64
  };
51
- var StyledBox = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
65
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
66
+ var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
52
67
  boxSizing: 'border-box',
53
68
  }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
69
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
70
+ var StyledBoxComponent = styled_1.default('div')({
71
+ boxSizing: 'border-box',
72
+ }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, other_1.other, position_1.position, space_1.space);
54
73
  /**
55
74
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
56
75
  * It is highly flexible, and its primary purpose is to build other components.
@@ -72,6 +91,9 @@ exports.Box = common_1.createComponent('div')({
72
91
  displayName: 'Box',
73
92
  Component: function (_a, ref, Element) {
74
93
  var children = _a.children, elemProps = __rest(_a, ["children"]);
75
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
94
+ var BoxComponent = common_1.useConstant(function () {
95
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
96
+ });
97
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
76
98
  },
77
99
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,kFAsChC,CAAC"}
1
+ {"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,gBAkC3B,CAAC"}
@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.ComponentStatesTable = void 0;
17
18
  var react_1 = __importDefault(require("react"));
18
19
  var common_1 = require("@workday/canvas-kit-react/common");
19
20
  var Table = common_1.styled('table')({
@@ -29,7 +30,7 @@ var Table = common_1.styled('table')({
29
30
  textAlign: 'left',
30
31
  },
31
32
  });
32
- exports.ComponentStatesTable = function (_a) {
33
+ var ComponentStatesTable = function (_a) {
33
34
  var rowProps = _a.rowProps, columnProps = _a.columnProps, children = _a.children;
34
35
  return (react_1.default.createElement(Table, null,
35
36
  react_1.default.createElement("thead", null,
@@ -44,3 +45,4 @@ exports.ComponentStatesTable = function (_a) {
44
45
  })));
45
46
  }))));
46
47
  };
48
+ exports.ComponentStatesTable = ComponentStatesTable;
@@ -1 +1 @@
1
- {"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/permutateProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEtF,eAAO,MAAM,cAAc;;uBA4C1B,CAAC"}
1
+ {"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/permutateProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAEtF,eAAO,MAAM,cAAc,aACf,gBAAgB,oBACT,KAAK,KAAK,OAAO,gCAClB,MAAM,EAAE;;MAEvB,eAAe,EAuCjB,CAAC"}
@@ -11,7 +11,8 @@ var __assign = (this && this.__assign) || function () {
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.permutateProps = function (allProps, filter, remainingProps, values) {
14
+ exports.permutateProps = void 0;
15
+ var permutateProps = function (allProps, filter, remainingProps, values) {
15
16
  if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
16
17
  if (values === void 0) { values = {}; }
17
18
  // When there are no more props to combine with, return result
@@ -43,3 +44,4 @@ exports.permutateProps = function (allProps, filter, remainingProps, values) {
43
44
  });
44
45
  return permutations.flat();
45
46
  };
47
+ exports.permutateProps = permutateProps;
@@ -1,7 +1,14 @@
1
1
  "use strict";
2
- function __export(m) {
3
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
4
- }
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
10
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
11
+ };
5
12
  Object.defineProperty(exports, "__esModule", { value: true });
6
- __export(require("./useThemeRTL"));
7
- __export(require("./useThemedRing"));
13
+ __exportStar(require("./useThemeRTL"), exports);
14
+ __exportStar(require("./useThemedRing"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW;;;EAkB1B"}
1
+ {"version":3,"file":"useThemeRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemeRTL.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAI/D,oBAAY,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAW5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW;6BAMD,aAAa,EAAE;;EAYxC"}
@@ -21,6 +21,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
21
21
  return (mod && mod.__esModule) ? mod : { "default": mod };
22
22
  };
23
23
  Object.defineProperty(exports, "__esModule", { value: true });
24
+ exports.useThemeRTL = void 0;
24
25
  var common_1 = require("@workday/canvas-kit-react/common");
25
26
  var react_1 = require("react");
26
27
  var rtl_css_js_1 = __importDefault(require("rtl-css-js"));
@@ -6,6 +6,6 @@ interface ContrastColors {
6
6
  inner?: string;
7
7
  }
8
8
  export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
9
- export declare const useThemedRing: (type: "alert" | "error" | "primary" | "success" | "neutral") => CSSProperties;
9
+ export declare const useThemedRing: (type: paletteSelection) => CSSProperties;
10
10
  export {};
11
11
  //# sourceMappingURL=useThemedRing.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAgBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,gFAyBzB,CAAC"}
1
+ {"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,SAAU,gBAAgB,KAAG,aAyBtD,CAAC"}