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

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 (15) hide show
  1. package/common/lib/Box.tsx +23 -4
  2. package/dist/commonjs/common/lib/Box.d.ts.map +1 -1
  3. package/dist/commonjs/common/lib/Box.js +10 -2
  4. package/dist/commonjs/layout/lib/Stack.d.ts +4 -4
  5. package/dist/commonjs/layout/lib/Stack.d.ts.map +1 -1
  6. package/dist/commonjs/layout/lib/Stack.js +6 -6
  7. package/dist/es6/common/lib/Box.d.ts.map +1 -1
  8. package/dist/es6/common/lib/Box.js +11 -3
  9. package/dist/es6/layout/lib/Stack.d.ts +4 -4
  10. package/dist/es6/layout/lib/Stack.d.ts.map +1 -1
  11. package/dist/es6/layout/lib/Stack.js +6 -6
  12. package/layout/lib/Stack.tsx +10 -26
  13. package/package.json +4 -4
  14. package/ts3.5/dist/commonjs/layout/lib/Stack.d.ts +4 -4
  15. package/ts3.5/dist/es6/layout/lib/Stack.d.ts +4 -4
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';
@@ -30,7 +30,22 @@ const shouldForwardProp = (prop: string) => {
30
30
  return isPropValid(prop) && !omittedProps.includes(prop);
31
31
  };
32
32
 
33
- 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>(
35
+ {
36
+ boxSizing: 'border-box',
37
+ },
38
+ border,
39
+ color,
40
+ depth,
41
+ flexItem,
42
+ layout,
43
+ position,
44
+ space
45
+ );
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>(
34
49
  {
35
50
  boxSizing: 'border-box',
36
51
  },
@@ -64,10 +79,14 @@ const StyledBox = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
64
79
  export const Box = createComponent('div')({
65
80
  displayName: 'Box',
66
81
  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
82
+ const BoxComponent = useConstant(() =>
83
+ typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
84
+ );
85
+
67
86
  return (
68
- <StyledBox as={Element} ref={ref} {...elemProps}>
87
+ <BoxComponent as={Element} ref={ref} {...elemProps}>
69
88
  {children}
70
- </StyledBox>
89
+ </BoxComponent>
71
90
  );
72
91
  },
73
92
  });
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,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;AAsBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,2oBASd,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"}
package/dist/commonjs/common/lib/Box.js CHANGED
@@ -49,7 +49,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
49
49
  var shouldForwardProp = function (prop) {
50
50
  return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
51
51
  };
52
- var StyledBox = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
52
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
53
+ var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })({
54
+ boxSizing: 'border-box',
55
+ }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, position_1.position, space_1.space);
56
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
57
+ var StyledBoxComponent = styled_1.default('div')({
53
58
  boxSizing: 'border-box',
54
59
  }, border_1.border, color_1.color, depth_1.depth, flexItem_1.flexItem, layout_1.layout, other_1.other, position_1.position, space_1.space);
55
60
  /**
@@ -73,6 +78,9 @@ exports.Box = common_1.createComponent('div')({
73
78
  displayName: 'Box',
74
79
  Component: function (_a, ref, Element) {
75
80
  var children = _a.children, elemProps = __rest(_a, ["children"]);
76
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
81
+ var BoxComponent = common_1.useConstant(function () {
82
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
83
+ });
84
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
77
85
  },
78
86
  });
package/dist/commonjs/layout/lib/Stack.d.ts CHANGED
@@ -4,23 +4,23 @@ export declare type StackProps = FlexProps & StackStyleProps;
4
4
  export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
5
5
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
6
6
  };
7
- export declare type HStackProps = Omit<StackProps, 'flexDirection'> & {
7
+ export interface HStackProps extends StackProps {
8
8
  /**
9
9
  * sets the direction for the stack
10
10
  * @default "row"
11
11
  * */
12
12
  flexDirection?: 'row' | 'row-reverse';
13
- };
13
+ }
14
14
  export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
15
15
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
16
16
  };
17
- export declare type VStackProps = Omit<StackProps, 'flexDirection'> & {
17
+ export interface VStackProps extends StackProps {
18
18
  /**
19
19
  * sets the direction for the stack
20
20
  * @default "column"
21
21
  * */
22
22
  flexDirection?: 'column' | 'column-reverse';
23
- };
23
+ }
24
24
  export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
25
25
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
26
26
  };
package/dist/commonjs/layout/lib/Stack.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CA+BhB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
1
+ {"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CAehB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
package/dist/commonjs/layout/lib/Stack.js CHANGED
@@ -54,9 +54,9 @@ var StyledStack = styled_1.default(Flex_1.Flex, { shouldForwardProp: shouldForwa
54
54
  exports.Stack = common_1.createComponent('div')({
55
55
  displayName: 'Stack',
56
56
  Component: function (_a, ref, Element) {
57
- var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = _a.spacing, _c = _a.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, elemProps = __rest(_a, ["children", "flexDirection", "spacing", "shouldWrapChildren"]);
57
+ var children = _a.children, _b = _a.shouldWrapChildren, shouldWrapChildren = _b === void 0 ? false : _b, elemProps = __rest(_a, ["children", "shouldWrapChildren"]);
58
58
  var validChildren = getValidChildren_1.getValidChildren(children);
59
- return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: flexDirection, spacing: spacing }, elemProps), shouldWrapChildren
59
+ return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), shouldWrapChildren
60
60
  ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
61
61
  : validChildren));
62
62
  },
@@ -67,8 +67,8 @@ exports.Stack = common_1.createComponent('div')({
67
67
  exports.HStack = common_1.createComponent('div')({
68
68
  displayName: 'HStack',
69
69
  Component: function (_a, ref, Element) {
70
- var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
71
- return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
70
+ var children = _a.children, elemProps = __rest(_a, ["children"]);
71
+ return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
72
72
  },
73
73
  subComponents: {
74
74
  Item: StackItem,
@@ -77,8 +77,8 @@ exports.HStack = common_1.createComponent('div')({
77
77
  exports.VStack = common_1.createComponent('div')({
78
78
  displayName: 'VStack',
79
79
  Component: function (_a, ref, Element) {
80
- var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
81
- return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
80
+ var children = _a.children, elemProps = __rest(_a, ["children"]);
81
+ return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
82
82
  },
83
83
  subComponents: {
84
84
  Item: StackItem,
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,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;AAsBJ;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,2oBASd,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"}
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';
@@ -37,7 +37,12 @@ var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border',
37
37
  var shouldForwardProp = function (prop) {
38
38
  return isPropValid(prop) && !omittedProps.includes(prop);
39
39
  };
40
- var StyledBox = styled('div', { shouldForwardProp: shouldForwardProp })({
40
+ // Meant to be used with elements. The `shouldForwardProps` will remove all style props
41
+ var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
42
+ boxSizing: 'border-box',
43
+ }, border, color, depth, flexItem, layout, position, space);
44
+ // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
45
+ var StyledBoxComponent = styled('div')({
41
46
  boxSizing: 'border-box',
42
47
  }, border, color, depth, flexItem, layout, other, position, space);
43
48
  /**
@@ -61,6 +66,9 @@ export var Box = createComponent('div')({
61
66
  displayName: 'Box',
62
67
  Component: function (_a, ref, Element) {
63
68
  var children = _a.children, elemProps = __rest(_a, ["children"]);
64
- return (React.createElement(StyledBox, __assign({ as: Element, ref: ref }, elemProps), children));
69
+ var BoxComponent = useConstant(function () {
70
+ return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
71
+ });
72
+ return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
65
73
  },
66
74
  });
package/dist/es6/layout/lib/Stack.d.ts CHANGED
@@ -4,23 +4,23 @@ export declare type StackProps = FlexProps & StackStyleProps;
4
4
  export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
5
5
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
6
6
  };
7
- export declare type HStackProps = Omit<StackProps, 'flexDirection'> & {
7
+ export interface HStackProps extends StackProps {
8
8
  /**
9
9
  * sets the direction for the stack
10
10
  * @default "row"
11
11
  * */
12
12
  flexDirection?: 'row' | 'row-reverse';
13
- };
13
+ }
14
14
  export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
15
15
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
16
16
  };
17
- export declare type VStackProps = Omit<StackProps, 'flexDirection'> & {
17
+ export interface VStackProps extends StackProps {
18
18
  /**
19
19
  * sets the direction for the stack
20
20
  * @default "column"
21
21
  * */
22
22
  flexDirection?: 'column' | 'column-reverse';
23
- };
23
+ }
24
24
  export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
25
25
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
26
26
  };
package/dist/es6/layout/lib/Stack.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CA+BhB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,oBAAY,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,eAAe,CAAC,GAAG;IAC5D;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
1
+ {"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;AA2BrD,eAAO,MAAM,KAAK;;CAehB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CACvC;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C;;;SAGK;IACL,aAAa,CAAC,EAAE,QAAQ,GAAG,gBAAgB,CAAC;CAC7C;AAED,eAAO,MAAM,MAAM;;CAYjB,CAAC"}
package/dist/es6/layout/lib/Stack.js CHANGED
@@ -42,9 +42,9 @@ var StyledStack = styled(Flex, { shouldForwardProp: shouldForwardProp })(stack);
42
42
  export var Stack = createComponent('div')({
43
43
  displayName: 'Stack',
44
44
  Component: function (_a, ref, Element) {
45
- var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, spacing = _a.spacing, _c = _a.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, elemProps = __rest(_a, ["children", "flexDirection", "spacing", "shouldWrapChildren"]);
45
+ var children = _a.children, _b = _a.shouldWrapChildren, shouldWrapChildren = _b === void 0 ? false : _b, elemProps = __rest(_a, ["children", "shouldWrapChildren"]);
46
46
  var validChildren = getValidChildren(children);
47
- return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: flexDirection, spacing: spacing }, elemProps), shouldWrapChildren
47
+ return (React.createElement(StyledStack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), shouldWrapChildren
48
48
  ? validChildren.map(function (child) { return React.createElement(StackItem, null, child); })
49
49
  : validChildren));
50
50
  },
@@ -55,8 +55,8 @@ export var Stack = createComponent('div')({
55
55
  export var HStack = createComponent('div')({
56
56
  displayName: 'HStack',
57
57
  Component: function (_a, ref, Element) {
58
- var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
59
- return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
58
+ var children = _a.children, elemProps = __rest(_a, ["children"]);
59
+ return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
60
60
  },
61
61
  subComponents: {
62
62
  Item: StackItem,
@@ -65,8 +65,8 @@ export var HStack = createComponent('div')({
65
65
  export var VStack = createComponent('div')({
66
66
  displayName: 'VStack',
67
67
  Component: function (_a, ref, Element) {
68
- var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
69
- return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
68
+ var children = _a.children, elemProps = __rest(_a, ["children"]);
69
+ return (React.createElement(Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
70
70
  },
71
71
  subComponents: {
72
72
  Item: StackItem,
package/layout/lib/Stack.tsx CHANGED
@@ -35,26 +35,10 @@ const StyledStack = styled(Flex, {shouldForwardProp})<StyledType & StackProps>(s
35
35
 
36
36
  export const Stack = createComponent('div')({
37
37
  displayName: 'Stack',
38
- Component: (
39
- {
40
- children,
41
- flexDirection = 'row',
42
- spacing,
43
- shouldWrapChildren = false,
44
- ...elemProps
45
- }: StackProps,
46
- ref,
47
- Element
48
- ) => {
38
+ Component: ({children, shouldWrapChildren = false, ...elemProps}: StackProps, ref, Element) => {
49
39
  const validChildren = getValidChildren(children);
50
40
  return (
51
- <StyledStack
52
- as={Element}
53
- ref={ref}
54
- flexDirection={flexDirection}
55
- spacing={spacing}
56
- {...elemProps}
57
- >
41
+ <StyledStack as={Element} ref={ref} flexDirection="row" {...elemProps}>
58
42
  {shouldWrapChildren
59
43
  ? validChildren.map(child => <StackItem>{child}</StackItem>)
60
44
  : validChildren}
@@ -66,19 +50,19 @@ export const Stack = createComponent('div')({
66
50
  },
67
51
  });
68
52
 
69
- export type HStackProps = Omit<StackProps, 'flexDirection'> & {
53
+ export interface HStackProps extends StackProps {
70
54
  /**
71
55
  * sets the direction for the stack
72
56
  * @default "row"
73
57
  * */
74
58
  flexDirection?: 'row' | 'row-reverse';
75
- };
59
+ }
76
60
 
77
61
  export const HStack = createComponent('div')({
78
62
  displayName: 'HStack',
79
- Component: ({children, flexDirection = 'row', ...elemProps}: HStackProps, ref, Element) => {
63
+ Component: ({children, ...elemProps}: HStackProps, ref, Element) => {
80
64
  return (
81
- <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
65
+ <Stack as={Element} ref={ref} flexDirection="row" {...elemProps}>
82
66
  {children}
83
67
  </Stack>
84
68
  );
@@ -88,19 +72,19 @@ export const HStack = createComponent('div')({
88
72
  },
89
73
  });
90
74
 
91
- export type VStackProps = Omit<StackProps, 'flexDirection'> & {
75
+ export interface VStackProps extends StackProps {
92
76
  /**
93
77
  * sets the direction for the stack
94
78
  * @default "column"
95
79
  * */
96
80
  flexDirection?: 'column' | 'column-reverse';
97
- };
81
+ }
98
82
 
99
83
  export const VStack = createComponent('div')({
100
84
  displayName: 'VStack',
101
- Component: ({children, flexDirection = 'column', ...elemProps}: VStackProps, ref, Element) => {
85
+ Component: ({children, ...elemProps}: VStackProps, ref, Element) => {
102
86
  return (
103
- <Stack as={Element} ref={ref} flexDirection={flexDirection} {...elemProps}>
87
+ <Stack as={Element} ref={ref} flexDirection="column" {...elemProps}>
104
88
  {children}
105
89
  </Stack>
106
90
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-labs-react",
3
- "version": "7.0.0-alpha.0-next.3+14a81c7e",
3
+ "version": "7.0.0-alpha.0-next.4+bdd1ec94",
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": "^7.0.0-alpha.0-next.3+14a81c7e",
59
- "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.3+14a81c7e",
58
+ "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.4+bdd1ec94",
59
+ "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.4+bdd1ec94",
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": "14a81c7ef3deb9efaf67fa3ec9cc2d2a3161b00b"
69
+ "gitHead": "bdd1ec9493a5a2dc4d67e4cc33adcba13efee4b7"
70
70
  }
package/ts3.5/dist/commonjs/layout/lib/Stack.d.ts CHANGED
@@ -4,23 +4,23 @@ export declare type StackProps = FlexProps & StackStyleProps;
4
4
  export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
5
5
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
6
6
  };
7
- export declare type HStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
7
+ export interface HStackProps extends StackProps {
8
8
  /**
9
9
  * sets the direction for the stack
10
10
  * @default "row"
11
11
  * */
12
12
  flexDirection?: 'row' | 'row-reverse';
13
- };
13
+ }
14
14
  export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
15
15
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
16
16
  };
17
- export declare type VStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
17
+ export interface VStackProps extends StackProps {
18
18
  /**
19
19
  * sets the direction for the stack
20
20
  * @default "column"
21
21
  * */
22
22
  flexDirection?: 'column' | 'column-reverse';
23
- };
23
+ }
24
24
  export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
25
25
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
26
26
  };
package/ts3.5/dist/es6/layout/lib/Stack.d.ts CHANGED
@@ -4,23 +4,23 @@ export declare type StackProps = FlexProps & StackStyleProps;
4
4
  export declare const Stack: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps & import("..").FlexStyleProps & StackStyleProps> & {
5
5
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
6
6
  };
7
- export declare type HStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
7
+ export interface HStackProps extends StackProps {
8
8
  /**
9
9
  * sets the direction for the stack
10
10
  * @default "row"
11
11
  * */
12
12
  flexDirection?: 'row' | 'row-reverse';
13
- };
13
+ }
14
14
  export declare const HStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", HStackProps> & {
15
15
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
16
16
  };
17
- export declare type VStackProps = Pick<StackProps, Exclude<keyof StackProps, 'flexDirection'>> & {
17
+ export interface VStackProps extends StackProps {
18
18
  /**
19
19
  * sets the direction for the stack
20
20
  * @default "column"
21
21
  * */
22
22
  flexDirection?: 'column' | 'column-reverse';
23
- };
23
+ }
24
24
  export declare const VStack: import("@workday/canvas-kit-react/common").ElementComponent<"div", VStackProps> & {
25
25
  Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("../../common/lib/utils/border").BorderShorthandStyleProps & import("../../common/lib/utils/border").BorderColorStyleProps & import("../../common/lib/utils/border").BorderRadiusStyleProps & import("../../common/lib/utils/border").BorderLineStyleProps & import("../../common/lib/utils/border").BorderWidthStyleProps & import("../../common/lib/utils/border").BorderLogicalStyleProps & import("../../common").ColorStyleProps & import("../../common").DepthStyleProps & import("../../common").FlexItemStyleProps & import("../../common").LayoutStyleProps & import("../../common/lib/utils/other").OtherStyleProps & import("../../common/lib/utils/position").PositionStandardProps & import("../../common/lib/utils/position").PositionLogicalProps & import("../../common/lib/utils/space").SpaceStandardProps & import("../../common/lib/utils/space").SpaceLogicalProps>;
26
26
  };