@workday/canvas-kit-react 8.0.0-alpha.216-next.4 → 8.0.0-alpha.224-next.7

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 (76) hide show
  1. package/common/lib/theming/index.ts +1 -1
  2. package/common/lib/theming/styled.ts +6 -3
  3. package/common/lib/utils/index.ts +0 -1
  4. package/dist/commonjs/common/lib/theming/index.d.ts +1 -1
  5. package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
  6. package/dist/commonjs/common/lib/theming/styled.d.ts +2 -0
  7. package/dist/commonjs/common/lib/theming/styled.d.ts.map +1 -1
  8. package/dist/commonjs/common/lib/theming/styled.js +1 -2
  9. package/dist/commonjs/common/lib/utils/index.d.ts +0 -1
  10. package/dist/commonjs/common/lib/utils/index.d.ts.map +1 -1
  11. package/dist/commonjs/common/lib/utils/index.js +0 -1
  12. package/dist/commonjs/index.d.ts +1 -0
  13. package/dist/commonjs/index.d.ts.map +1 -1
  14. package/dist/commonjs/index.js +1 -0
  15. package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts.map +1 -1
  16. package/dist/commonjs/popup/lib/hooks/useReturnFocus.js +21 -27
  17. package/dist/commonjs/tabs/lib/TabsItem.d.ts +1 -1
  18. package/dist/commonjs/testing/index.d.ts +5 -0
  19. package/dist/commonjs/testing/index.d.ts.map +1 -0
  20. package/dist/commonjs/testing/index.js +16 -0
  21. package/dist/commonjs/testing/lib/ComponentStatesTable.d.ts +26 -0
  22. package/dist/commonjs/testing/lib/ComponentStatesTable.d.ts.map +1 -0
  23. package/dist/commonjs/testing/lib/ComponentStatesTable.js +48 -0
  24. package/dist/commonjs/testing/lib/StaticStates.d.ts +7 -0
  25. package/dist/commonjs/testing/lib/StaticStates.d.ts.map +1 -0
  26. package/dist/commonjs/{common/lib/utils → testing/lib}/StaticStates.js +1 -1
  27. package/dist/commonjs/testing/lib/permutateProps.d.ts +5 -0
  28. package/dist/commonjs/testing/lib/permutateProps.d.ts.map +1 -0
  29. package/dist/commonjs/testing/lib/permutateProps.js +47 -0
  30. package/dist/commonjs/testing/lib/propTypes.d.ts +15 -0
  31. package/dist/commonjs/testing/lib/propTypes.d.ts.map +1 -0
  32. package/dist/commonjs/testing/lib/propTypes.js +2 -0
  33. package/dist/es6/common/lib/theming/index.d.ts +1 -1
  34. package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
  35. package/dist/es6/common/lib/theming/styled.d.ts +2 -0
  36. package/dist/es6/common/lib/theming/styled.d.ts.map +1 -1
  37. package/dist/es6/common/lib/theming/styled.js +1 -2
  38. package/dist/es6/common/lib/utils/index.d.ts +0 -1
  39. package/dist/es6/common/lib/utils/index.d.ts.map +1 -1
  40. package/dist/es6/common/lib/utils/index.js +0 -1
  41. package/dist/es6/index.d.ts +1 -0
  42. package/dist/es6/index.d.ts.map +1 -1
  43. package/dist/es6/index.js +1 -0
  44. package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts.map +1 -1
  45. package/dist/es6/popup/lib/hooks/useReturnFocus.js +21 -27
  46. package/dist/es6/tabs/lib/TabsItem.d.ts +1 -1
  47. package/dist/es6/testing/index.d.ts +5 -0
  48. package/dist/es6/testing/index.d.ts.map +1 -0
  49. package/dist/es6/testing/index.js +4 -0
  50. package/dist/es6/testing/lib/ComponentStatesTable.d.ts +26 -0
  51. package/dist/es6/testing/lib/ComponentStatesTable.d.ts.map +1 -0
  52. package/dist/es6/testing/lib/ComponentStatesTable.js +41 -0
  53. package/dist/es6/testing/lib/StaticStates.d.ts +7 -0
  54. package/dist/es6/testing/lib/StaticStates.d.ts.map +1 -0
  55. package/dist/es6/{common/lib/utils → testing/lib}/StaticStates.js +1 -1
  56. package/dist/es6/testing/lib/permutateProps.d.ts +5 -0
  57. package/dist/es6/testing/lib/permutateProps.d.ts.map +1 -0
  58. package/dist/es6/testing/lib/permutateProps.js +43 -0
  59. package/dist/es6/testing/lib/propTypes.d.ts +15 -0
  60. package/dist/es6/testing/lib/propTypes.d.ts.map +1 -0
  61. package/dist/es6/testing/lib/propTypes.js +1 -0
  62. package/index.ts +1 -0
  63. package/package.json +3 -3
  64. package/popup/lib/hooks/useReturnFocus.tsx +25 -30
  65. package/testing/LICENSE +52 -0
  66. package/testing/README.md +6 -0
  67. package/testing/index.ts +4 -0
  68. package/testing/lib/ComponentStatesTable.tsx +80 -0
  69. package/{common/lib/utils → testing/lib}/StaticStates.tsx +5 -4
  70. package/testing/lib/permutateProps.ts +47 -0
  71. package/testing/lib/propTypes.ts +15 -0
  72. package/testing/package.json +6 -0
  73. package/dist/commonjs/common/lib/utils/StaticStates.d.ts +0 -8
  74. package/dist/commonjs/common/lib/utils/StaticStates.d.ts.map +0 -1
  75. package/dist/es6/common/lib/utils/StaticStates.d.ts +0 -8
  76. package/dist/es6/common/lib/utils/StaticStates.d.ts.map +0 -1
@@ -1,7 +1,7 @@
1
1
  export * from './breakpoints';
2
2
  export {createCanvasTheme} from './createCanvasTheme';
3
3
  export * from './types';
4
- export {default as styled} from './styled';
4
+ export {default as styled, StyleRewriteFn} from './styled';
5
5
  export * from './theme';
6
6
  export * from './useTheme';
7
7
  export * from './useIsRTL';
@@ -1,22 +1,25 @@
1
1
  import {default as emotionStyled, CreateStyled, Interpolation, CSSObject} from '@emotion/styled';
2
+ import {CSSProperties} from '@workday/canvas-kit-react/tokens';
2
3
 
3
4
  import {useTheme, EmotionCanvasTheme, ContentDirection} from './index';
4
5
  import rtlCSSJS from 'rtl-css-js';
5
- import {convertToStaticStates} from '../utils/StaticStates';
6
6
 
7
7
  const noop = (styles: any) => styles;
8
8
 
9
9
  // Pulled from https://github.com/emotion-js/emotion/blob/master/packages/styled-base/src/utils.js#L6 (not exported)
10
10
  type Interpolations = Array<any>;
11
+ export type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
11
12
 
12
13
  function styled<Props>(node: any) {
13
14
  return (...args: Interpolation<Props>[]) => {
14
15
  const newArgs: Interpolations = args.map(
15
- interpolation => (props: Props & {theme: EmotionCanvasTheme & {_staticStates?: boolean}}) => {
16
+ interpolation => (
17
+ props: Props & {theme: EmotionCanvasTheme & {_styleRewriteFn?: StyleRewriteFn}}
18
+ ) => {
16
19
  props.theme = useTheme(props.theme);
17
20
  const direction = props.theme.canvas.direction;
18
21
  const maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
19
- const maybeConvert = props.theme._staticStates ? convertToStaticStates : noop;
22
+ const maybeConvert = props.theme._styleRewriteFn || noop;
20
23
  try {
21
24
  if (typeof interpolation === 'function') {
22
25
  return maybeFlip(maybeConvert(interpolation(props)) as CSSObject);
@@ -15,4 +15,3 @@ export * from './useIsFullscreen';
15
15
  export * from './useModalityType';
16
16
  export * from './useWindowSize';
17
17
  export * from './useResizeObserver';
18
- export * from './StaticStates';
@@ -1,7 +1,7 @@
1
1
  export * from './breakpoints';
2
2
  export { createCanvasTheme } from './createCanvasTheme';
3
3
  export * from './types';
4
- export { default as styled } from './styled';
4
+ export { default as styled, StyleRewriteFn } from './styled';
5
5
  export * from './theme';
6
6
  export * from './useTheme';
7
7
  export * from './useIsRTL';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
@@ -1,4 +1,6 @@
1
1
  import { CreateStyled } from '@emotion/styled';
2
+ import { CSSProperties } from '@workday/canvas-kit-react/tokens';
3
+ export declare type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
2
4
  declare const _default: CreateStyled;
3
5
  export default _default;
4
6
  //# sourceMappingURL=styled.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;;AAkCjG,wBAAsC"}
1
+ {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAS/D,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA2BhF,wBAAsC"}
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var styled_1 = __importDefault(require("@emotion/styled"));
7
7
  var index_1 = require("./index");
8
8
  var rtl_css_js_1 = __importDefault(require("rtl-css-js"));
9
- var StaticStates_1 = require("../utils/StaticStates");
10
9
  var noop = function (styles) { return styles; };
11
10
  function styled(node) {
12
11
  return function () {
@@ -18,7 +17,7 @@ function styled(node) {
18
17
  props.theme = index_1.useTheme(props.theme);
19
18
  var direction = props.theme.canvas.direction;
20
19
  var maybeFlip = direction === index_1.ContentDirection.RTL ? rtl_css_js_1.default : noop;
21
- var maybeConvert = props.theme._staticStates ? StaticStates_1.convertToStaticStates : noop;
20
+ var maybeConvert = props.theme._styleRewriteFn || noop;
22
21
  try {
23
22
  if (typeof interpolation === 'function') {
24
23
  return maybeFlip(maybeConvert(interpolation(props)));
@@ -15,5 +15,4 @@ export * from './useIsFullscreen';
15
15
  export * from './useModalityType';
16
16
  export * from './useWindowSize';
17
17
  export * from './useResizeObserver';
18
- export * from './StaticStates';
19
18
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
@@ -27,4 +27,3 @@ __exportStar(require("./useIsFullscreen"), exports);
27
27
  __exportStar(require("./useModalityType"), exports);
28
28
  __exportStar(require("./useWindowSize"), exports);
29
29
  __exportStar(require("./useResizeObserver"), exports);
30
- __exportStar(require("./StaticStates"), exports);
@@ -28,6 +28,7 @@ export * from './status-indicator';
28
28
  export * from './switch';
29
29
  export * from './table';
30
30
  export * from './tabs';
31
+ export * from './testing';
31
32
  export * from './text';
32
33
  export * from './text-area';
33
34
  export * from './text-input';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
@@ -40,6 +40,7 @@ __exportStar(require("./status-indicator"), exports);
40
40
  __exportStar(require("./switch"), exports);
41
41
  __exportStar(require("./table"), exports);
42
42
  __exportStar(require("./tabs"), exports);
43
+ __exportStar(require("./testing"), exports);
43
44
  __exportStar(require("./text"), exports);
44
45
  __exportStar(require("./text-area"), exports);
45
46
  __exportStar(require("./text-input"), exports);
@@ -1 +1 @@
1
- {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAsGzB,CAAC"}
1
+ {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAgGzB,CAAC"}
@@ -7,6 +7,7 @@ exports.useReturnFocus = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
8
  var common_1 = require("@workday/canvas-kit-react/common");
9
9
  var usePopupModel_1 = require("./usePopupModel");
10
+ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
10
11
  function getScrollParent(element) {
11
12
  if (element === document.body || !element.parentElement) {
12
13
  return element;
@@ -49,17 +50,15 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
49
50
  requiresFocusChangeRef.current = true;
50
51
  }
51
52
  }, []);
52
- var onKeyUp = react_1.default.useCallback(function (event) {
53
- requiresFocusChangeRef.current = false;
54
- }, []);
55
53
  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
56
54
  // should not return focus
57
55
  var onMouseDown = react_1.default.useCallback(function (event) {
58
- elementRef.current = event.target;
59
- }, []);
60
- var onMouseUp = react_1.default.useCallback(function () {
61
- elementRef.current = null;
62
- }, []);
56
+ if (model.state.stackRef.current && event.target instanceof HTMLElement) {
57
+ if (!canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, event.target)) {
58
+ elementRef.current = event.target;
59
+ }
60
+ }
61
+ }, [model.state.stackRef]);
63
62
  // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
64
63
  // focus. This allows the browser to change focus as normal. For example, if the popup closes
65
64
  // because the user hits the tab key when focused on the last focusable element,
@@ -80,26 +79,29 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
80
79
  return;
81
80
  }
82
81
  // capture the element here. The refs will be null by the time the cleanup function is called
83
- var element = (model.state.returnFocusRef || model.state.targetRef).current;
82
+ var element = (model.state.returnFocusRef || model.state.targetRef)
83
+ .current;
84
84
  document.addEventListener('mousedown', onMouseDown, true);
85
- document.addEventListener('mouseup', onMouseUp, true);
86
85
  document.addEventListener('keydown', onKeyDown, true);
87
- document.addEventListener('keyup', onKeyUp, true);
88
86
  return function () {
89
87
  document.removeEventListener('mousedown', onMouseDown, true);
90
- document.removeEventListener('mouseup', onMouseUp, true);
91
88
  document.removeEventListener('keydown', onKeyDown, true);
92
- document.removeEventListener('keyup', onKeyUp, true);
89
+ if (!element) {
90
+ return;
91
+ }
93
92
  var scrollParent = getScrollParent(element);
94
93
  var scrollParentRect = scrollParent.getBoundingClientRect();
95
94
  var elementRect = element.getBoundingClientRect();
96
95
  // Don't change focus if user focused on a different element like a `input` or the target
97
96
  // element isn't on at least halfway rendered on the screen.
98
- if ((elementRef.current && getFocusableElement(elementRef.current)) ||
99
- elementRect.top + elementRect.height / 2 < scrollParentRect.top ||
100
- elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom ||
101
- elementRect.left + elementRect.width / 2 < scrollParentRect.left ||
102
- elementRect.right - elementRect.width / 2 > scrollParentRect.right) {
97
+ if ((elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
98
+ elementRect.top + elementRect.height / 2 < scrollParentRect.top || // is the top half of the target element visible?
99
+ elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom || // is the bottom half of the target element visible?
100
+ elementRect.left + elementRect.width / 2 < scrollParentRect.left || // is the left half of the target element visible?
101
+ elementRect.right - elementRect.width / 2 > scrollParentRect.right // is the right half of the target element visible?
102
+ ) {
103
+ // reset the focus element and bail early
104
+ elementRef.current = null;
103
105
  return;
104
106
  }
105
107
  if (requiresFocusChangeRef.current) {
@@ -117,14 +119,6 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
117
119
  }
118
120
  elementRef.current = null;
119
121
  };
120
- }, [
121
- model.state.returnFocusRef,
122
- model.state.targetRef,
123
- visible,
124
- onMouseDown,
125
- onMouseUp,
126
- onKeyDown,
127
- onKeyUp,
128
- ]);
122
+ }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
129
123
  return {};
130
124
  });
@@ -53,7 +53,7 @@ export interface TabsItemProps extends ExtractProps<typeof Box, never>, Partial<
53
53
  */
54
54
  tabIndex?: number;
55
55
  }
56
- export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("../../layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").GridItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout").OtherStyleProps & import("../../layout").PositionStyleProps & import("../../layout").SpaceStyleProps & import("../../layout").TextStyleProps & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "name" | "style" | "ref" | "form" | "slot" | "title" | "dir" | "value" | "children" | "hidden" | "disabled" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & {
56
+ export declare const StyledTabItem: import("@emotion/styled").StyledComponent<import("../../layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../../layout").ColorStyleProps & import("../../layout").DepthStyleProps & import("../../layout").FlexItemStyleProps & import("../../layout").GridItemStyleProps & import("../../layout").LayoutStyleProps & import("../../layout").OtherStyleProps & import("../../layout").PositionStyleProps & import("../../layout").SpaceStyleProps & import("../../layout").TextStyleProps & Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "name" | "style" | "ref" | "form" | "slot" | "title" | "dir" | "value" | "children" | "hidden" | "disabled" | "type" | "translate" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & {
57
57
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
58
58
  } & {
59
59
  theme?: import("@emotion/react").Theme | undefined;
@@ -0,0 +1,5 @@
1
+ export * from './lib/ComponentStatesTable';
2
+ export * from './lib/StaticStates';
3
+ export * from './lib/permutateProps';
4
+ export * from './lib/propTypes';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../testing/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}
@@ -0,0 +1,16 @@
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 __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
+ };
12
+ Object.defineProperty(exports, "__esModule", { value: true });
13
+ __exportStar(require("./lib/ComponentStatesTable"), exports);
14
+ __exportStar(require("./lib/StaticStates"), exports);
15
+ __exportStar(require("./lib/permutateProps"), exports);
16
+ __exportStar(require("./lib/propTypes"), exports);
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import { PropCombination, Props } from './propTypes';
3
+ /**
4
+ * A helper to generate a table of all possible states for component visual testing.
5
+ */
6
+ export interface ComponentStatesTableProps {
7
+ /**
8
+ * The props that will be passed to the component when it is rendered and the corresponding
9
+ * row label for that permutation. It is encouraged to use the result of permutateProps()
10
+ * rather than passing in a list so we don't miss any combinations.
11
+ */
12
+ rowProps: PropCombination[];
13
+ /**
14
+ * The props that will be passed to the component when it is rendered and the corresponding
15
+ * column label for that permutation. It is encouraged to use the result of permutateProps()
16
+ * rather than passing in a list so we don't miss any combinations.
17
+ */
18
+ columnProps: PropCombination[];
19
+ /**
20
+ * The render function called to render the component in each cell of the table. This gives you
21
+ * the ability to add extra styling or markup (a blue background for an inverse variant, for example).
22
+ */
23
+ children(props: Props): React.ReactNode;
24
+ }
25
+ export declare const ComponentStatesTable: ({ rowProps, columnProps, children, }: ComponentStatesTableProps) => JSX.Element;
26
+ //# sourceMappingURL=ComponentStatesTable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../testing/lib/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"}
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.ComponentStatesTable = void 0;
18
+ var react_1 = __importDefault(require("react"));
19
+ var common_1 = require("@workday/canvas-kit-react/common");
20
+ var Table = common_1.styled('table')({
21
+ width: '100%',
22
+ thead: {
23
+ textAlign: 'left',
24
+ paddingBottom: 16,
25
+ },
26
+ 'td, th': {
27
+ minWidth: 100,
28
+ paddingBottom: 16,
29
+ paddingRight: 16,
30
+ textAlign: 'left',
31
+ },
32
+ });
33
+ var ComponentStatesTable = function (_a) {
34
+ var rowProps = _a.rowProps, columnProps = _a.columnProps, children = _a.children;
35
+ return (react_1.default.createElement(Table, null,
36
+ react_1.default.createElement("thead", null,
37
+ react_1.default.createElement("tr", null,
38
+ react_1.default.createElement("th", null, "Variants"),
39
+ columnProps.map(function (col) { return (react_1.default.createElement("th", { key: "component-table-heading-" + col.label.toLowerCase().replace(' ', ',') }, col.label)); }))),
40
+ react_1.default.createElement("tbody", null, rowProps.map(function (row) {
41
+ return (react_1.default.createElement("tr", { key: row.label.toLowerCase().replace(' ', '-') },
42
+ react_1.default.createElement("td", null, row.label),
43
+ columnProps.map(function (col) {
44
+ return (react_1.default.createElement("td", { key: col.label.toLowerCase().replace(' ', '-') }, children(__assign(__assign({}, row.props), col.props))));
45
+ })));
46
+ }))));
47
+ };
48
+ exports.ComponentStatesTable = ComponentStatesTable;
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ import { PartialEmotionCanvasTheme, StyleRewriteFn } from '@workday/canvas-kit-react/common';
3
+ export declare const convertToStaticStates: StyleRewriteFn;
4
+ export declare const StaticStates: React.FC<React.PropsWithChildren<{
5
+ theme?: PartialEmotionCanvasTheme;
6
+ } & React.HTMLAttributes<HTMLElement>>>;
7
+ //# sourceMappingURL=StaticStates.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../testing/lib/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,yBAAyB,EACzB,cAAc,EACf,MAAM,kCAAkC,CAAC;AAG1C,eAAO,MAAM,qBAAqB,EAAE,cAoBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CACzD;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CACxE,CASA,CAAC"}
@@ -67,7 +67,7 @@ exports.convertToStaticStates = convertToStaticStates;
67
67
  var StaticStates = function (_a) {
68
68
  var children = _a.children, theme = _a.theme, elemProps = __rest(_a, ["children", "theme"]);
69
69
  var localTheme = common_1.useTheme(theme);
70
- localTheme._staticStates = true;
70
+ localTheme._styleRewriteFn = exports.convertToStaticStates;
71
71
  return (React.createElement(common_1.CanvasProvider, __assign({ theme: localTheme }, elemProps), children));
72
72
  };
73
73
  exports.StaticStates = StaticStates;
@@ -0,0 +1,5 @@
1
+ import { PropCombination, PropDeclaration, Props, PropsDeclaration } from './propTypes';
2
+ export declare const permutateProps: (allProps: PropsDeclaration, filter?: ((props: Props) => boolean) | undefined, remainingProps?: string[], values?: {
3
+ [key: string]: PropDeclaration;
4
+ }) => PropCombination[];
5
+ //# sourceMappingURL=permutateProps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"permutateProps.d.ts","sourceRoot":"","sources":["../../../../testing/lib/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"}
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ Object.defineProperty(exports, "__esModule", { value: true });
14
+ exports.permutateProps = void 0;
15
+ var permutateProps = function (allProps, filter, remainingProps, values) {
16
+ if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
17
+ if (values === void 0) { values = {}; }
18
+ // When there are no more props to combine with, return result
19
+ var prop = remainingProps[0];
20
+ if (!prop) {
21
+ var props_1 = {};
22
+ Object.keys(values).forEach(function (prop) {
23
+ var _a;
24
+ props_1[prop] = (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.value;
25
+ });
26
+ if (filter && !filter(props_1)) {
27
+ return [];
28
+ }
29
+ var label = Object.keys(values)
30
+ .map(function (prop) { var _a; return (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.label; })
31
+ .join(' ');
32
+ return [
33
+ {
34
+ label: label,
35
+ props: props_1,
36
+ },
37
+ ];
38
+ }
39
+ var possiblePropValues = allProps[prop];
40
+ var permutations = possiblePropValues === null || possiblePropValues === void 0 ? void 0 : possiblePropValues.map(function (value) {
41
+ var newValues = __assign({}, values); // Required so we don't overwrite previous references
42
+ newValues[prop] = value;
43
+ return exports.permutateProps(allProps, filter, remainingProps.slice(1, remainingProps.length), newValues);
44
+ });
45
+ return permutations.flat();
46
+ };
47
+ exports.permutateProps = permutateProps;
@@ -0,0 +1,15 @@
1
+ export declare type PropDeclaration = {
2
+ value: any;
3
+ label: string;
4
+ };
5
+ export declare type PropsDeclaration = {
6
+ [key: string]: PropDeclaration[];
7
+ };
8
+ export declare type Props = {
9
+ [key: string]: any;
10
+ };
11
+ export declare type PropCombination = {
12
+ label: string;
13
+ props: Props;
14
+ };
15
+ //# sourceMappingURL=propTypes.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../../testing/lib/propTypes.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,EAAE,CAAA;CAAC,CAAC;AAElE,oBAAY,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC"}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -1,7 +1,7 @@
1
1
  export * from './breakpoints';
2
2
  export { createCanvasTheme } from './createCanvasTheme';
3
3
  export * from './types';
4
- export { default as styled } from './styled';
4
+ export { default as styled, StyleRewriteFn } from './styled';
5
5
  export * from './theme';
6
6
  export * from './useTheme';
7
7
  export * from './useIsRTL';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,UAAU,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,OAAO,EAAC,OAAO,IAAI,MAAM,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC3D,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
@@ -1,4 +1,6 @@
1
1
  import { CreateStyled } from '@emotion/styled';
2
+ import { CSSProperties } from '@workday/canvas-kit-react/tokens';
3
+ export declare type StyleRewriteFn = (obj?: CSSProperties) => CSSProperties | undefined;
2
4
  declare const _default: CreateStyled;
3
5
  export default _default;
4
6
  //# sourceMappingURL=styled.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;;AAkCjG,wBAAsC"}
1
+ {"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAS/D,oBAAY,cAAc,GAAG,CAAC,GAAG,CAAC,EAAE,aAAa,KAAK,aAAa,GAAG,SAAS,CAAC;;AA2BhF,wBAAsC"}
@@ -1,7 +1,6 @@
1
1
  import { default as emotionStyled } from '@emotion/styled';
2
2
  import { useTheme, ContentDirection } from './index';
3
3
  import rtlCSSJS from 'rtl-css-js';
4
- import { convertToStaticStates } from '../utils/StaticStates';
5
4
  var noop = function (styles) { return styles; };
6
5
  function styled(node) {
7
6
  return function () {
@@ -13,7 +12,7 @@ function styled(node) {
13
12
  props.theme = useTheme(props.theme);
14
13
  var direction = props.theme.canvas.direction;
15
14
  var maybeFlip = direction === ContentDirection.RTL ? rtlCSSJS : noop;
16
- var maybeConvert = props.theme._staticStates ? convertToStaticStates : noop;
15
+ var maybeConvert = props.theme._styleRewriteFn || noop;
17
16
  try {
18
17
  if (typeof interpolation === 'function') {
19
18
  return maybeFlip(maybeConvert(interpolation(props)));
@@ -15,5 +15,4 @@ export * from './useIsFullscreen';
15
15
  export * from './useModalityType';
16
16
  export * from './useWindowSize';
17
17
  export * from './useResizeObserver';
18
- export * from './StaticStates';
19
18
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
@@ -15,4 +15,3 @@ export * from './useIsFullscreen';
15
15
  export * from './useModalityType';
16
16
  export * from './useWindowSize';
17
17
  export * from './useResizeObserver';
18
- export * from './StaticStates';
@@ -28,6 +28,7 @@ export * from './status-indicator';
28
28
  export * from './switch';
29
29
  export * from './table';
30
30
  export * from './tabs';
31
+ export * from './testing';
31
32
  export * from './text';
32
33
  export * from './text-area';
33
34
  export * from './text-input';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
package/dist/es6/index.js CHANGED
@@ -28,6 +28,7 @@ export * from './status-indicator';
28
28
  export * from './switch';
29
29
  export * from './table';
30
30
  export * from './tabs';
31
+ export * from './testing';
31
32
  export * from './text';
32
33
  export * from './text-area';
33
34
  export * from './text-input';
@@ -1 +1 @@
1
- {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAsGzB,CAAC"}
1
+ {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAgGzB,CAAC"}