@cultureamp/kaizen-component-library - npm Package Compare versions

Comparing version 17.1.0 to 17.2.0

draft/Kaizen/Popover/Popover.d.ts

@@ -15,5 +15,6 @@ import * as React from "react";
     readonly children: React.ReactNode;
+    readonly boxOffset?: number;
 }
 declare type Variant = "default" | "informative" | "positive" | "negative" | "cautionary";
-declare type Side = "top" | "bottom" | "left" | "right";
+declare type Side = "top" | "bottom";
 declare type Position = "start" | "center" | "end";
@@ -20,0 +21,0 @@ declare type Size = "small" | "large";

draft/Kaizen/Popover/Popover.js

@@ -20,26 +20,61 @@ "use strict";
 var React = __importStar(require("react"));
+var react_1 = require("react");
 var styles = require("./styles.scss");
-var Popover = function (_a) {
-    var id = _a.id, automationId = _a.automationId, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.side, side = _c === void 0 ? "bottom" : _c, _d = _a.size, size = _d === void 0 ? "small" : _d, _e = _a.position, position = _e === void 0 ? "center" : _e, heading = _a.heading, _f = _a.dismissible, dismissible = _f === void 0 ? false : _f, onClose = _a.onClose, _g = _a.singleLine, singleLine = _g === void 0 ? false : _g;
-    return (React.createElement("div", { className: classnames_1["default"](mapVariantToRootClass(variant), mapSideToClass(side), mapPositionToClass(position), mapSizeToClass(size)) },
-        React.createElement("div", { className: styles.header },
-            variant !== "default" && (React.createElement("span", { className: styles.icon },
-                React.createElement(kaizen_component_library_1.Icon, { role: "presentation", icon: mapVariantToIcon(variant) }))),
-            React.createElement("div", { className: styles.singleLine }, heading),
-            dismissible && (React.createElement("button", { className: styles.close, onClick: onClose },
-                React.createElement(kaizen_component_library_1.Icon, { role: "presentation", icon: closeIcon })))),
-        React.createElement("div", { className: classnames_1["default"](styles.container, mapLineVariant(singleLine)) }, children)));
+var Popover = react_1.forwardRef(function (_a, ref) {
+    var id = _a.id, automationId = _a.automationId, children = _a.children, _b = _a.variant, variant = _b === void 0 ? "default" : _b, _c = _a.side, side = _c === void 0 ? "bottom" : _c, _d = _a.size, size = _d === void 0 ? "small" : _d, _e = _a.position, position = _e === void 0 ? "center" : _e, heading = _a.heading, _f = _a.dismissible, dismissible = _f === void 0 ? false : _f, onClose = _a.onClose, _g = _a.singleLine, singleLine = _g === void 0 ? false : _g, boxOffset = _a.boxOffset;
+    return (React.createElement("div", { className: classnames_1["default"](styles.root, mapSizeToClass(size)), style: getRootStyle(boxOffset), ref: ref },
+        React.createElement("div", { className: mapVariantToBoxClass(variant) },
+            React.createElement("div", { className: styles.header },
+                variant !== "default" && (React.createElement("span", { className: classnames_1["default"](styles.icon, mapVariantToIconClass(variant)) },
+                    React.createElement(kaizen_component_library_1.Icon, { role: "presentation", icon: mapVariantToIcon(variant) }))),
+                React.createElement("div", { className: styles.singleLine }, heading),
+                dismissible && (React.createElement("button", { className: styles.close, onClick: onClose },
+                    React.createElement(kaizen_component_library_1.Icon, { role: "presentation", icon: closeIcon })))),
+            React.createElement("div", { className: classnames_1["default"](styles.container, mapLineVariant(singleLine)) }, children)),
+        React.createElement("div", { className: classnames_1["default"](mapArrowVariantToClass(variant), mapArrowSideToClass(side), mapArrowPositionToClass(position)), style: getArrowStyle(boxOffset, side) })));
+});
+var getRootStyle = function (boxOffset) { return ({
+    transform: boxOffset == null
+        ? "translateX(-50%)"
+        : "translateX(calc(-50% + " + boxOffset + "px)"
+}); };
+var mapVariantToBoxClass = function (variant) {
+    switch (variant) {
+        case "informative":
+            return styles.informativeBox;
+        case "positive":
+            return styles.positiveBox;
+        case "negative":
+            return styles.negativeBox;
+        case "cautionary":
+            return styles.cautionaryBox;
+        default:
+            return styles.defaultBox;
+    }
 };
-var mapVariantToRootClass = function (variant) {
+var getArrowStyle = function (boxOffset, side) {
+    var rotate = side === "top" ? "rotate(180deg)" : "";
+    var translate = boxOffset == null
+        ? ""
+        : // Because we shifted the popover in the parent, we need to readjust the
+            // arrow back to where it was.
+            "translateX(" + boxOffset * -1 + "px)";
+    return rotate || translate
+        ? {
+            transform: "" + translate + rotate
+        }
+        : undefined;
+};
+var mapVariantToIconClass = function (variant) {
     switch (variant) {
         case "informative":
-            return styles.informative;
+            return styles.informativeIcon;
         case "positive":
-            return styles.positive;
+            return styles.positiveIcon;
         case "negative":
-            return styles.negative;
+            return styles.negativeIcon;
         case "cautionary":
-            return styles.cautionary;
+            return styles.cautionaryIcon;
         default:
-            return styles["default"];
+            return undefined;
     }
@@ -61,18 +96,32 @@ };
 };
-var mapPositionToClass = function (position) {
+var mapArrowVariantToClass = function (variant) {
+    switch (variant) {
+        case "informative":
+            return styles.informativeArrow;
+        case "positive":
+            return styles.positiveArrow;
+        case "negative":
+            return styles.negativeArrow;
+        case "cautionary":
+            return styles.cautionaryArrow;
+        default:
+            return styles.defaultArrow;
+    }
+};
+var mapArrowPositionToClass = function (position) {
     switch (position) {
         case "start":
-            return styles.positionStart;
+            return styles.arrowPositionStart;
         case "end":
-            return styles.positionEnd;
+            return styles.arrowPositionEnd;
         default:
-            return "center";
+            return "";
     }
 };
-var mapSideToClass = function (side) {
+var mapArrowSideToClass = function (side) {
     switch (side) {
         case "top":
-            return styles.sideTop;
+            return styles.arrowSideTop;
         default:
-            return "bottom";
+            return "";
     }
@@ -79,0 +128,0 @@ };

package.json

@@ -24,3 +24,3 @@ {
   "sideEffects": false,
-  "version": "17.1.0",
+  "version": "17.2.0",
   "private": false,
@@ -57,3 +57,3 @@ "license": "MIT",
   },
-  "gitHead": "839410ad64f93f3d9dba0b923fd1b5afcbf8c782"
+  "gitHead": "331a245f820e649f43e65b2fe74afa7ce121330e"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1500598

increased by0.25%

Lines of code

4917

increased by1.03%

No dependency changes