@workday/canvas-kit-react 5.3.4 → 5.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
  2. package/dist/commonjs/popup/lib/PopupCard.js +3 -9
  3. package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
  4. package/dist/es6/popup/lib/PopupCard.js +3 -9
  5. package/package.json +5 -5
  6. package/popup/lib/PopupCard.tsx +19 -29
package/dist/commonjs/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAuBpB,CAAC"}
package/dist/commonjs/popup/lib/PopupCard.js CHANGED
@@ -44,13 +44,7 @@ var popupAnimation = function (transformOrigin) {
44
44
  var translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxs);
45
45
  return core_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: translate(", "px, ", "px);\n }\n 100% {\n opacity: 1;\n transform: translate(0);\n }\n "], ["\n 0% {\n opacity: 0;\n transform: translate(", "px, ", "px);\n }\n 100% {\n opacity: 1;\n transform: translate(0);\n }\n "])), translate.x, translate.y);
46
46
  };
47
- var StyledPopupCard = common_1.styled(card_1.Card)({
48
- position: 'relative',
49
- maxWidth: "calc(100vw - " + tokens_1.space.l + ")",
50
- }, function (_a) {
51
- var width = _a.width;
52
- return width && { width: width };
53
- }, function (_a) {
47
+ var StyledPopupCard = common_1.styled(card_1.Card)(function (_a) {
54
48
  var transformOrigin = _a.transformOrigin;
55
49
  if (transformOrigin == null) {
56
50
  return {};
@@ -69,13 +63,13 @@ var StyledPopupCard = common_1.styled(card_1.Card)({
69
63
  exports.PopupCard = common_1.createComponent('div')({
70
64
  displayName: 'Popup.Card',
71
65
  Component: function (_a, ref, Element) {
72
- var children = _a.children, model = _a.model, _b = _a.padding, padding = _b === void 0 ? 'l' : _b, _c = _a.depth, depth = _c === void 0 ? 2 : _c, width = _a.width, elemProps = __rest(_a, ["children", "model", "padding", "depth", "width"]);
66
+ var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
73
67
  var localModel = common_1.useModelContext(hooks_1.PopupModelContext, model);
74
68
  var props = hooks_1.usePopupCard(localModel, elemProps, ref);
75
69
  var transformOrigin = React.useMemo(function () {
76
70
  return getTransformFromPlacement_1.getTransformFromPlacement(localModel.state.placement || 'bottom');
77
71
  }, [localModel.state.placement]);
78
- return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props),
72
+ return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + tokens_1.space.l + ")" }, props),
79
73
  React.createElement(card_1.Card.Body, null, children)));
80
74
  },
81
75
  });
package/dist/es6/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS,gEA0BpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAOL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAe,UAAU,EAAoB,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS,gEAuBpB,CAAC"}
package/dist/es6/popup/lib/PopupCard.js CHANGED
@@ -35,13 +35,7 @@ var popupAnimation = function (transformOrigin) {
35
35
  var translate = getTranslateFromOrigin(transformOrigin, space.xxs);
36
36
  return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n opacity: 0;\n transform: translate(", "px, ", "px);\n }\n 100% {\n opacity: 1;\n transform: translate(0);\n }\n "], ["\n 0% {\n opacity: 0;\n transform: translate(", "px, ", "px);\n }\n 100% {\n opacity: 1;\n transform: translate(0);\n }\n "])), translate.x, translate.y);
37
37
  };
38
- var StyledPopupCard = styled(Card)({
39
- position: 'relative',
40
- maxWidth: "calc(100vw - " + space.l + ")",
41
- }, function (_a) {
42
- var width = _a.width;
43
- return width && { width: width };
44
- }, function (_a) {
38
+ var StyledPopupCard = styled(Card)(function (_a) {
45
39
  var transformOrigin = _a.transformOrigin;
46
40
  if (transformOrigin == null) {
47
41
  return {};
@@ -60,13 +54,13 @@ var StyledPopupCard = styled(Card)({
60
54
  export var PopupCard = createComponent('div')({
61
55
  displayName: 'Popup.Card',
62
56
  Component: function (_a, ref, Element) {
63
- var children = _a.children, model = _a.model, _b = _a.padding, padding = _b === void 0 ? 'l' : _b, _c = _a.depth, depth = _c === void 0 ? 2 : _c, width = _a.width, elemProps = __rest(_a, ["children", "model", "padding", "depth", "width"]);
57
+ var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
64
58
  var localModel = useModelContext(PopupModelContext, model);
65
59
  var props = usePopupCard(localModel, elemProps, ref);
66
60
  var transformOrigin = React.useMemo(function () {
67
61
  return getTransformFromPlacement(localModel.state.placement || 'bottom');
68
62
  }, [localModel.state.placement]);
69
- return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, depth: depth, width: width, padding: padding }, props),
63
+ return (React.createElement(StyledPopupCard, __assign({ as: Element, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 2, maxWidth: "calc(100vw - " + space.l + ")" }, props),
70
64
  React.createElement(Card.Body, null, children)));
71
65
  },
72
66
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "5.3.4",
3
+ "version": "5.3.5",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -57,9 +57,9 @@
57
57
  "@popperjs/core": "^2.5.4",
58
58
  "@workday/canvas-colors-web": "^2.0.0",
59
59
  "@workday/canvas-depth-web": "^0.16.4",
60
- "@workday/canvas-kit-labs-react": "^5.3.4",
61
- "@workday/canvas-kit-popup-stack": "^5.3.4",
62
- "@workday/canvas-kit-preview-react": "^5.3.4",
60
+ "@workday/canvas-kit-labs-react": "^5.3.5",
61
+ "@workday/canvas-kit-popup-stack": "^5.3.5",
62
+ "@workday/canvas-kit-preview-react": "^5.3.5",
63
63
  "@workday/canvas-system-icons-web": "1.0.41",
64
64
  "@workday/design-assets-types": "^0.2.4",
65
65
  "chroma-js": "^2.1.0",
@@ -75,5 +75,5 @@
75
75
  "@workday/canvas-accent-icons-web": "^1.0.0",
76
76
  "@workday/canvas-applet-icons-web": "^0.17.50"
77
77
  },
78
- "gitHead": "4816e7af5053c69d3dc6f302d0205b4259ffe943"
78
+ "gitHead": "e5979d8754e3a0f302977a2c7e7ac2ca8d4e1740"
79
79
  }
package/popup/lib/PopupCard.tsx CHANGED
@@ -42,36 +42,25 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
42
42
 
43
43
  const StyledPopupCard = styled(Card)<
44
44
  StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
45
- >(
46
- {
47
- position: 'relative',
48
- maxWidth: `calc(100vw - ${space.l})`,
49
- },
50
- ({width}) => width && {width},
51
- ({transformOrigin}) => {
52
- if (transformOrigin == null) {
53
- return {};
54
- }
55
- return {
56
- animation: popupAnimation(transformOrigin),
57
- animationDuration: '150ms',
58
- animationTimingFunction: 'ease-out',
59
- transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
60
- // Allow overriding of animation in special cases
61
- '.wd-no-animation &': {
62
- animation: 'none',
63
- },
64
- };
45
+ >(({transformOrigin}) => {
46
+ if (transformOrigin == null) {
47
+ return {};
65
48
  }
66
- );
49
+ return {
50
+ animation: popupAnimation(transformOrigin),
51
+ animationDuration: '150ms',
52
+ animationTimingFunction: 'ease-out',
53
+ transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
54
+ // Allow overriding of animation in special cases
55
+ '.wd-no-animation &': {
56
+ animation: 'none',
57
+ },
58
+ };
59
+ });
67
60
 
68
61
  export const PopupCard = createComponent('div')({
69
62
  displayName: 'Popup.Card',
70
- Component: (
71
- {children, model, padding = 'l', depth = 2, width, ...elemProps}: PopupCardProps,
72
- ref,
73
- Element
74
- ) => {
63
+ Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
75
64
  const localModel = useModelContext(PopupModelContext, model);
76
65
  const props = usePopupCard(localModel, elemProps, ref);
77
66
  const transformOrigin = React.useMemo(() => {
@@ -82,9 +71,10 @@ export const PopupCard = createComponent('div')({
82
71
  <StyledPopupCard
83
72
  as={Element}
84
73
  transformOrigin={transformOrigin}
85
- depth={depth}
86
- width={width}
87
- padding={padding}
74
+ position="relative"
75
+ padding="l"
76
+ depth={2}
77
+ maxWidth={`calc(100vw - ${space.l})`}
88
78
  {...props}
89
79
  >
90
80
  <Card.Body>{children}</Card.Body>