@workday/canvas-kit-react 8.5.12 → 8.5.13

package/dist/commonjs/popup/lib/PopupCard.d.ts.map

@@ -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,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
+{"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,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA6BpB,CAAC"}

package/dist/commonjs/popup/lib/PopupCard.js

@@ -82,6 +82,33 @@ var StyledPopupCard = common_1.styled(card_1.Card)(function (_a) {
         },
         _b;
 });
+function getSpace(value) {
+    if (value && value in tokens_1.space) {
+        return tokens_1.space[value];
+    }
+    else {
+        return value;
+    }
+}
+function getMaxHeight(margin) {
+    // set the default margin offset to space.xl
+    var marginOffset = tokens_1.space.xl;
+    if (margin) {
+        // parse the margin prop
+        if (typeof margin === 'string') {
+            var marginValues = margin.split(' ');
+            var marginTop = getSpace(marginValues[0]);
+            // If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
+            var marginBottom = getSpace(marginValues[2]) || marginTop;
+            marginOffset = "(" + marginTop + " + " + marginBottom + ")";
+        }
+        else {
+            // if margin is a number, double it to get the offset
+            marginOffset = margin * 2 + "px";
+        }
+    }
+    return "calc(100vh - " + marginOffset + ")";
+}
 exports.PopupCard = common_1.createSubcomponent('div')({
     displayName: 'Popup.Card',
     modelHook: hooks_1.usePopupModel,
@@ -93,6 +120,6 @@ exports.PopupCard = common_1.createSubcomponent('div')({
     }, [model.state.placement]);
     // As is a Flex that will render an element of `Element`
     var As = common_1.useConstant(function () { return layout_1.Flex.as(Element); });
-    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" }, tokens_1.type.levels.subtext.large, elemProps), children));
+    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: getMaxHeight(elemProps.margin), overflowY: "auto" }, tokens_1.type.levels.subtext.large, elemProps), children));
 });
 var templateObject_1;

package/dist/es6/popup/lib/PopupCard.d.ts.map

@@ -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,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0CD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
+{"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,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA6BpB,CAAC"}

package/dist/es6/popup/lib/PopupCard.js

@@ -60,6 +60,33 @@ var StyledPopupCard = styled(Card)(function (_a) {
         },
         _b;
 });
+function getSpace(value) {
+    if (value && value in space) {
+        return space[value];
+    }
+    else {
+        return value;
+    }
+}
+function getMaxHeight(margin) {
+    // set the default margin offset to space.xl
+    var marginOffset = space.xl;
+    if (margin) {
+        // parse the margin prop
+        if (typeof margin === 'string') {
+            var marginValues = margin.split(' ');
+            var marginTop = getSpace(marginValues[0]);
+            // If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
+            var marginBottom = getSpace(marginValues[2]) || marginTop;
+            marginOffset = "(" + marginTop + " + " + marginBottom + ")";
+        }
+        else {
+            // if margin is a number, double it to get the offset
+            marginOffset = margin * 2 + "px";
+        }
+    }
+    return "calc(100vh - " + marginOffset + ")";
+}
 export var PopupCard = createSubcomponent('div')({
     displayName: 'Popup.Card',
     modelHook: usePopupModel,
@@ -71,6 +98,6 @@ export var PopupCard = createSubcomponent('div')({
     }, [model.state.placement]);
     // As is a Flex that will render an element of `Element`
     var As = useConstant(function () { return Flex.as(Element); });
-    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" }, type.levels.subtext.large, elemProps), children));
+    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: getMaxHeight(elemProps.margin), overflowY: "auto" }, type.levels.subtext.large, elemProps), children));
 });
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.5.12",
+  "version": "8.5.13",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.5.12",
+    "@workday/canvas-kit-popup-stack": "^8.5.13",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "e2acfd4c141af475f6914c9b0c698aad3fc490a9"
+  "gitHead": "6111799979f60dfd4a2dccfb9a19a663be3f2474"
 }

package/popup/lib/PopupCard.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {keyframes} from '@emotion/react';
 
 import {Card} from '@workday/canvas-kit-react/card';
-import {space, type, CanvasSpaceKeys} from '@workday/canvas-kit-react/tokens';
+import {space, type} from '@workday/canvas-kit-react/tokens';
 import {
   styled,
   TransformOrigin,
@@ -62,6 +62,35 @@ const StyledPopupCard = styled(Card)<
   };
 });
 
+function getSpace(value?: string | number) {
+  if (value && value in space) {
+    return space[value as keyof typeof space];
+  } else {
+    return value;
+  }
+}
+
+function getMaxHeight(margin?: string | number) {
+  // set the default margin offset to space.xl
+  let marginOffset: string | number = space.xl;
+
+  if (margin) {
+    // parse the margin prop
+    if (typeof margin === 'string') {
+      const marginValues = margin.split(' ');
+      const marginTop = getSpace(marginValues[0]);
+      // If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
+      const marginBottom = getSpace(marginValues[2]) || marginTop;
+
+      marginOffset = `(${marginTop} + ${marginBottom})`;
+    } else {
+      // if margin is a number, double it to get the offset
+      marginOffset = `${margin * 2}px`;
+    }
+  }
+  return `calc(100vh - ${marginOffset})`;
+}
+
 export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
   modelHook: usePopupModel,
@@ -73,7 +102,6 @@ export const PopupCard = createSubcomponent('div')({
 
   // As is a Flex that will render an element of `Element`
   const As = useConstant(() => Flex.as(Element));
-
   return (
     <StyledPopupCard
       as={As}
@@ -84,9 +112,7 @@ export const PopupCard = createSubcomponent('div')({
       flexDirection="column"
       minHeight={0}
       padding="m"
-      maxHeight={`calc(100vh - ${
-        elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
-      } * 2)`}
+      maxHeight={getMaxHeight(elemProps.margin)}
       overflowY="auto"
       {...type.levels.subtext.large}
       {...elemProps}