@ballistix.digital/react-components 7.1.3-rc-67.0 → 7.1.3-rc-69.0

package/dist/index.js

@@ -633,10 +633,12 @@ var $29a51bd84954e590$export$2e2bcd8739ae039 = $29a51bd84954e590$var$AlertElemen
 
 
 
+
 var $ede6d6a597d91170$var$base = {
     container: 'inline-flex items-center font-medium py-0.5',
     indicator: '',
-    button: 'shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-hidden'
+    button: 'shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:text-white focus:outline-hidden cursor-pointer',
+    closeIcon: ''
 };
 var $ede6d6a597d91170$var$normal = {
     container: 'px-2.5'
@@ -743,7 +745,7 @@ var $ede6d6a597d91170$export$2e2bcd8739ae039 = $ede6d6a597d91170$var$styles;
 
 
 var $0b842d364fa010cf$var$BadgeElement = function(props) {
-    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
+    var children = props.children, _a = props.color, color = _a === void 0 ? 'gray' : _a, _b = props.type, type = _b === void 0 ? 'normal' : _b, _c = props.size, size = _c === void 0 ? 'sm' : _c, _d = props.figure, figure = _d === void 0 ? 'block' : _d, isDisabled = props.isDisabled, isLoading = props.isLoading, onClick = props.onClick, onClose = props.onClose, stylesOverrides = props.styles, dataCy = props.dataCy;
     var handleGenerateStyle = function() {
         var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $ede6d6a597d91170$export$2e2bcd8739ae039).base);
         var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $ede6d6a597d91170$export$2e2bcd8739ae039).base);
@@ -753,17 +755,33 @@ var $0b842d364fa010cf$var$BadgeElement = function(props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    var xIcon = (0, $iA2ta$reactjsxruntime.jsx)("svg", {
-        className: "h-2 w-2",
-        stroke: "currentColor",
-        fill: "none",
-        viewBox: "0 0 8 8",
-        children: (0, $iA2ta$reactjsxruntime.jsx)("path", {
-            strokeLinecap: "round",
-            strokeWidth: "1.5",
-            d: "M1 1l6 6m0-6L1 7"
-        })
-    });
+    var closeButton = (0, $iA2ta$react.useMemo)(function() {
+        if (type !== 'close' || !onClose) return null;
+        var handleClose = function(e) {
+            e.stopPropagation();
+            onClose(e);
+        };
+        return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+            className: styles.button,
+            onClick: handleClose,
+            children: [
+                (0, $iA2ta$reactjsxruntime.jsx)("span", {
+                    className: "sr-only",
+                    children: "Remove large option"
+                }),
+                (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
+                    className: styles.closeIcon,
+                    type: "regular",
+                    accessor: "times"
+                })
+            ]
+        });
+    }, [
+        type,
+        onClose,
+        styles.button,
+        styles.closeIcon
+    ]);
     if (isLoading) return (0, $iA2ta$reactjsxruntime.jsx)("span", {
         className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.container, 'h-4 w-12 animate-pulse'),
         children: type === 'indicator' && (0, $iA2ta$reactjsxruntime.jsx)("svg", {
@@ -778,8 +796,9 @@ var $0b842d364fa010cf$var$BadgeElement = function(props) {
         })
     });
     return (0, $iA2ta$reactjsxruntime.jsxs)("span", {
-        className: styles.container,
+        className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.container, !!onClick && 'cursor-pointer'),
         "data-cy": dataCy,
+        onClick: onClick,
         children: [
             type === 'indicator' && (0, $iA2ta$reactjsxruntime.jsx)("svg", {
                 className: styles.indicator,
@@ -792,18 +811,7 @@ var $0b842d364fa010cf$var$BadgeElement = function(props) {
                 })
             }),
             children,
-            type === 'close' && (0, $iA2ta$reactjsxruntime.jsxs)("button", {
-                type: "button",
-                className: styles.button,
-                onClick: onClose,
-                children: [
-                    (0, $iA2ta$reactjsxruntime.jsx)("span", {
-                        className: "sr-only",
-                        children: "Remove large option"
-                    }),
-                    xIcon
-                ]
-            })
+            closeButton
         ]
     });
 };