@workday/canvas-kit-labs-react 6.5.0-next.0 → 6.6.0

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 (13) hide show
  1. package/combobox/lib/Status.tsx +2 -2
  2. package/common/lib/Box.tsx +21 -4
  3. package/dist/commonjs/combobox/lib/Status.d.ts +1 -1
  4. package/dist/commonjs/combobox/lib/Status.js +2 -2
  5. package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
  6. package/dist/commonjs/common/lib/Box.js +10 -2
  7. package/dist/es6/combobox/lib/Status.d.ts +1 -1
  8. package/dist/es6/combobox/lib/Status.js +2 -2
  9. package/dist/es6/common/lib/Box.d.ts.map +1 -1
  10. package/dist/es6/common/lib/Box.js +11 -3
  11. package/package.json +4 -4
  12. package/ts3.5/dist/commonjs/combobox/lib/Status.d.ts +1 -1
  13. package/ts3.5/dist/es6/combobox/lib/Status.d.ts +1 -1
package/combobox/lib/Status.tsx CHANGED
@@ -15,11 +15,11 @@ const Container = styled('div')(accessibleHide);
15
15
 
16
16
  const Status = ({
17
17
  ariaLive = 'polite',
18
- role = 'log',
19
- ariaAtomic = false,
18
+ role = 'status',
20
19
  ariaRelevant = 'additions',
21
20
  expireMilliseconds = 500,
22
21
  announcementText = '',
22
+ ariaAtomic,
23
23
  }: StatusProps) => {
24
24
  const [displayText, setDisplayText] = useState(announcementText);
25
25
  useEffect(() => {
package/common/lib/Box.tsx CHANGED
@@ -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';
@@ -28,7 +28,8 @@ const shouldForwardProp = (prop: string) => {
28
28
  return isPropValid(prop) && !omittedProps.includes(prop);
29
29
  };
30
30
 
31
- const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
31
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
32
+ const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
32
33
  {
33
34
  boxSizing: 'border-box',
34
35
  },
@@ -41,6 +42,19 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
41
42
  space
42
43
  );
43
44
 
45
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
46
+ const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
47
+ {
48
+ boxSizing: 'border-box',
49
+ },
50
+ border,
51
+ color,
52
+ depth,
53
+ flexItem,
54
+ layout,
55
+ position,
56
+ space
57
+ );
44
58
  /**
45
59
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
46
60
  * It is highly flexible, and its primary purpose is to build other components.
@@ -61,10 +75,13 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
61
75
  export const Box = createComponent('div')({
62
76
  displayName: 'Box',
63
77
  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
78
+ const BoxComponent = useConstant(() =>
79
+ typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
80
+ );
64
81
  return (
65
- <StyledBox as={Element} ref={ref} {...elemProps}>
82
+ <BoxComponent as={Element} ref={ref} {...elemProps}>
66
83
  {children}
67
- </StyledBox>
84
+ </BoxComponent>
68
85
  );
69
86
  },
70
87
  });
package/dist/commonjs/combobox/lib/Status.d.ts CHANGED
@@ -6,6 +6,6 @@ export interface StatusProps {
6
6
  expireMilliseconds?: number;
7
7
  announcementText?: string;
8
8
  }
9
- declare const Status: ({ ariaLive, role, ariaAtomic, ariaRelevant, expireMilliseconds, announcementText, }: StatusProps) => JSX.Element;
9
+ declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => JSX.Element;
10
10
  export default Status;
11
11
  //# sourceMappingURL=Status.d.ts.map
package/dist/commonjs/combobox/lib/Status.js CHANGED
@@ -15,8 +15,8 @@ var styled_1 = __importDefault(require("@emotion/styled"));
15
15
  var common_1 = require("@workday/canvas-kit-react/common");
16
16
  var Container = styled_1.default('div')(common_1.accessibleHide);
17
17
  var Status = function (_a) {
18
- var _b = _a.ariaLive, ariaLive = _b === void 0 ? 'polite' : _b, _c = _a.role, role = _c === void 0 ? 'log' : _c, _d = _a.ariaAtomic, ariaAtomic = _d === void 0 ? false : _d, _e = _a.ariaRelevant, ariaRelevant = _e === void 0 ? 'additions' : _e, _f = _a.expireMilliseconds, expireMilliseconds = _f === void 0 ? 500 : _f, _g = _a.announcementText, announcementText = _g === void 0 ? '' : _g;
19
- var _h = react_1.useState(announcementText), displayText = _h[0], setDisplayText = _h[1];
18
+ var _b = _a.ariaLive, ariaLive = _b === void 0 ? 'polite' : _b, _c = _a.role, role = _c === void 0 ? 'status' : _c, _d = _a.ariaRelevant, ariaRelevant = _d === void 0 ? 'additions' : _d, _e = _a.expireMilliseconds, expireMilliseconds = _e === void 0 ? 500 : _e, _f = _a.announcementText, announcementText = _f === void 0 ? '' : _f, ariaAtomic = _a.ariaAtomic;
19
+ var _g = react_1.useState(announcementText), displayText = _g[0], setDisplayText = _g[1];
20
20
  react_1.useEffect(function () {
21
21
  if (!announcementText) {
22
22
  return;
package/dist/commonjs/common/lib/Box.d.ts.map CHANGED
@@ -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,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;AAmCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBAYd,CAAC"}
package/dist/commonjs/common/lib/Box.js CHANGED
@@ -48,7 +48,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
48
48
  var shouldForwardProp = function (prop) {
49
49
  return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
50
50
  };
51
- var StyledBox = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
51
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
52
+ var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
53
+ boxSizing: 'border-box',
54
+ }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
55
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
56
+ var StyledBoxComponent = styled_1.default('div')({
52
57
  boxSizing: 'border-box',
53
58
  }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
54
59
  /**
@@ -72,6 +77,9 @@ exports.Box = common_1.createComponent('div')({
72
77
  displayName: 'Box',
73
78
  Component: function (_a, ref, Element) {
74
79
  var children = _a.children, elemProps = __rest(_a, ["children"]);
75
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
80
+ var BoxComponent = common_1.useConstant(function () {
81
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
82
+ });
83
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
76
84
  },
77
85
  });
package/dist/es6/combobox/lib/Status.d.ts CHANGED
@@ -6,6 +6,6 @@ export interface StatusProps {
6
6
  expireMilliseconds?: number;
7
7
  announcementText?: string;
8
8
  }
9
- declare const Status: ({ ariaLive, role, ariaAtomic, ariaRelevant, expireMilliseconds, announcementText, }: StatusProps) => JSX.Element;
9
+ declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => JSX.Element;
10
10
  export default Status;
11
11
  //# sourceMappingURL=Status.d.ts.map
package/dist/es6/combobox/lib/Status.js CHANGED
@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
3
3
  import { accessibleHide } from '@workday/canvas-kit-react/common';
4
4
  var Container = styled('div')(accessibleHide);
5
5
  var Status = function (_a) {
6
- var _b = _a.ariaLive, ariaLive = _b === void 0 ? 'polite' : _b, _c = _a.role, role = _c === void 0 ? 'log' : _c, _d = _a.ariaAtomic, ariaAtomic = _d === void 0 ? false : _d, _e = _a.ariaRelevant, ariaRelevant = _e === void 0 ? 'additions' : _e, _f = _a.expireMilliseconds, expireMilliseconds = _f === void 0 ? 500 : _f, _g = _a.announcementText, announcementText = _g === void 0 ? '' : _g;
7
- var _h = useState(announcementText), displayText = _h[0], setDisplayText = _h[1];
6
+ var _b = _a.ariaLive, ariaLive = _b === void 0 ? 'polite' : _b, _c = _a.role, role = _c === void 0 ? 'status' : _c, _d = _a.ariaRelevant, ariaRelevant = _d === void 0 ? 'additions' : _d, _e = _a.expireMilliseconds, expireMilliseconds = _e === void 0 ? 500 : _e, _f = _a.announcementText, announcementText = _f === void 0 ? '' : _f, ariaAtomic = _a.ariaAtomic;
7
+ var _g = useState(announcementText), displayText = _g[0], setDisplayText = _g[1];
8
8
  useEffect(function () {
9
9
  if (!announcementText) {
10
10
  return;
package/dist/es6/common/lib/Box.d.ts.map CHANGED
@@ -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,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;AAmCJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ynBAYd,CAAC"}
package/dist/es6/common/lib/Box.js CHANGED
@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import * as React from 'react';
24
24
  import styled from '@emotion/styled';
25
25
  import isPropValid from '@emotion/is-prop-valid';
26
- import { createComponent } from '@workday/canvas-kit-react/common';
26
+ import { createComponent, useConstant } from '@workday/canvas-kit-react/common';
27
27
  // style props
28
28
  import { border } from './utils/border';
29
29
  import { color } from './utils/color';
@@ -36,7 +36,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
36
36
  var shouldForwardProp = function (prop) {
37
37
  return isPropValid(prop) && !omittedProps.includes(prop);
38
38
  };
39
- var StyledBox = styled('div', { shouldForwardProp: shouldForwardProp })({
39
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
40
+ var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
41
+ boxSizing: 'border-box',
42
+ }, border, color, depth, flexItem, layout, position, space);
43
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
44
+ var StyledBoxComponent = styled('div')({
40
45
  boxSizing: 'border-box',
41
46
  }, border, color, depth, flexItem, layout, position, space);
42
47
  /**
@@ -60,6 +65,9 @@ export var Box = createComponent('div')({
60
65
  displayName: 'Box',
61
66
  Component: function (_a, ref, Element) {
62
67
  var children = _a.children, elemProps = __rest(_a, ["children"]);
63
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
68
+ var BoxComponent = useConstant(function () {
69
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
70
+ });
71
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
64
72
  },
65
73
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-react",
3
- "version": "6.5.0-next.0+209a7864",
3
+ "version": "6.6.0",
4
4
  "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -55,8 +55,8 @@
55
55
  "@emotion/core": "^10.0.28",
56
56
  "@emotion/is-prop-valid": "^0.8.2",
57
57
  "@emotion/styled": "^10.0.27",
58
- "@workday/canvas-kit-preview-react": "^6.5.0-next.0+209a7864",
59
- "@workday/canvas-kit-react": "^6.5.0-next.0+209a7864",
58
+ "@workday/canvas-kit-preview-react": "^6.6.0",
59
+ "@workday/canvas-kit-react": "^6.6.0",
60
60
  "@workday/canvas-system-icons-web": "1.0.41",
61
61
  "chroma-js": "^2.1.0",
62
62
  "csstype": "^2.6.17",
@@ -66,5 +66,5 @@
66
66
  "devDependencies": {
67
67
  "@types/lodash.flatten": "^4.4.6"
68
68
  },
69
- "gitHead": "209a78649cac234a5e4bc08ec1fb87a848ecbd5a"
69
+ "gitHead": "ff77c5bd83e41c3ab2b9c55e41a8b7c1fde33a1b"
70
70
  }
package/ts3.5/dist/commonjs/combobox/lib/Status.d.ts CHANGED
@@ -6,6 +6,6 @@ export interface StatusProps {
6
6
  expireMilliseconds?: number;
7
7
  announcementText?: string;
8
8
  }
9
- declare const Status: ({ ariaLive, role, ariaAtomic, ariaRelevant, expireMilliseconds, announcementText, }: StatusProps) => JSX.Element;
9
+ declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => JSX.Element;
10
10
  export default Status;
11
11
  //# sourceMappingURL=Status.d.ts.map
package/ts3.5/dist/es6/combobox/lib/Status.d.ts CHANGED
@@ -6,6 +6,6 @@ export interface StatusProps {
6
6
  expireMilliseconds?: number;
7
7
  announcementText?: string;
8
8
  }
9
- declare const Status: ({ ariaLive, role, ariaAtomic, ariaRelevant, expireMilliseconds, announcementText, }: StatusProps) => JSX.Element;
9
+ declare const Status: ({ ariaLive, role, ariaRelevant, expireMilliseconds, announcementText, ariaAtomic, }: StatusProps) => JSX.Element;
10
10
  export default Status;
11
11
  //# sourceMappingURL=Status.d.ts.map