@ballistix.digital/react-components 6.0.3-next-42.0 → 6.0.3-next-44.0

package/dist/index.js

@@ -45,6 +45,7 @@ $parcel$export(module.exports, "ButtonElement", () => $98b8616b6ef0f950$export$2
 $parcel$export(module.exports, "ButtonGroupElement", () => $49256f91bd9e1c3f$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "DropdownElement", () => $6f7275eb03c2b93c$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "IconElement", () => $2125901b4a9afff9$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "CollapsibleElement", () => $9a91e005c750fbb3$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "InputGroupForm", () => $75cfef1d7ff66e89$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "ContainerLayout", () => $f73096bc2c28d1e8$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "DividerLayout", () => $b249780162e56cf8$export$2e2bcd8739ae039);
@@ -1142,6 +1143,10 @@ var $87a4b9b6cee76290$var$topLeft = {
 var $87a4b9b6cee76290$var$topRight = {
     items: 'origin-bottom-left left-0 bottom-0'
 };
+var $87a4b9b6cee76290$var$disabled = {
+    button: 'opacity-50 cursor-not-allowed',
+    compact: 'opacity-50 cursor-not-allowed'
+};
 var $87a4b9b6cee76290$var$styles = {
     base: $87a4b9b6cee76290$var$base,
     button: $87a4b9b6cee76290$var$button,
@@ -1149,18 +1154,19 @@ var $87a4b9b6cee76290$var$styles = {
     'bottom-left': $87a4b9b6cee76290$var$bottomLeft,
     'bottom-right': $87a4b9b6cee76290$var$bottomRight,
     'top-left': $87a4b9b6cee76290$var$topLeft,
-    'top-right': $87a4b9b6cee76290$var$topRight
+    'top-right': $87a4b9b6cee76290$var$topRight,
+    disabled: $87a4b9b6cee76290$var$disabled
 };
 var $87a4b9b6cee76290$export$2e2bcd8739ae039 = $87a4b9b6cee76290$var$styles;
 
 
 var $6f7275eb03c2b93c$var$Container = function(props) {
-    var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom end' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
+    var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom end' : _b, _c = props.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = props.isEscapingOverflow, isEscapingOverflow = _d === void 0 ? false : _d, stylesOverrides = props.styles;
     var handleGenerateStyle = function() {
         var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039).base);
         var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039).base);
         keys.forEach(function(key) {
-            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039).base, key), type && (0, $iA2ta$lodash.get)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039)[type], key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
+            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039).base, key), type && (0, $iA2ta$lodash.get)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039)[type], key), isDisabled && (0, $iA2ta$lodash.get)((0, $87a4b9b6cee76290$export$2e2bcd8739ae039).disabled, key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
         });
         return result;
     };
@@ -1172,6 +1178,7 @@ var $6f7275eb03c2b93c$var$Container = function(props) {
             (0, $iA2ta$reactjsxruntime.jsxs)("div", {
                 children: [
                     type === 'button' && (!trigger ? (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$headlessuireact.MenuButton), {
+                        disabled: isDisabled,
                         className: styles.button,
                         "data-cy": dataCy,
                         children: [
@@ -1182,10 +1189,12 @@ var $6f7275eb03c2b93c$var$Container = function(props) {
                             })
                         ]
                     }) : (0, $iA2ta$reactjsxruntime.jsx)((0, $iA2ta$headlessuireact.MenuButton), {
+                        disabled: isDisabled,
                         "data-cy": dataCy,
                         children: trigger
                     })),
                     type === 'compact' && (0, $iA2ta$reactjsxruntime.jsxs)((0, $iA2ta$headlessuireact.MenuButton), {
+                        disabled: isDisabled,
                         className: styles.compact,
                         "data-cy": dataCy,
                         children: [
@@ -1229,6 +1238,71 @@ var $6f7275eb03c2b93c$export$2e2bcd8739ae039 = $6f7275eb03c2b93c$var$DropdownEle
 
 
 
+var $4b59a3e0d0d66995$var$styles = {
+    container: '',
+    icon: {
+        container: 'w-4 h-4 flex ease-in-out duration-300',
+        rotate: 'transform rotate-90',
+        svg: 'w-4 h-4 flex'
+    }
+};
+var $4b59a3e0d0d66995$export$2e2bcd8739ae039 = $4b59a3e0d0d66995$var$styles;
+
+
+
+
+
+
+var $9a91e005c750fbb3$var$RotatingIcon = function(_a) {
+    var isVisible = _a.isVisible, styles = _a.styles;
+    return (0, $iA2ta$reactjsxruntime.jsx)("div", {
+        className: styles.icon.container,
+        children: (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
+            className: styles.icon.svg,
+            accessor: "chevron-right"
+        })
+    });
+};
+var $9a91e005c750fbb3$var$Collapsible = function(props) {
+    var children = props.children, _a = props.isDefaultOpen, isDefaultOpen = _a === void 0 ? false : _a, trigger = props.trigger, stylesOverrides = props.styles;
+    var _b = (0, $iA2ta$react.useState)(isDefaultOpen), isVisible = _b[0], setIsVisible = _b[1];
+    var handleToggle = (0, $iA2ta$react.useCallback)(function() {
+        return setIsVisible(function(visibility) {
+            return !visibility;
+        });
+    }, []);
+    var handleGenerateStyle = function() {
+        var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $4b59a3e0d0d66995$export$2e2bcd8739ae039));
+        var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $4b59a3e0d0d66995$export$2e2bcd8739ae039));
+        keys.forEach(function(key) {
+            (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $4b59a3e0d0d66995$export$2e2bcd8739ae039), key), isVisible && key.includes('icon.container') && (0, $4b59a3e0d0d66995$export$2e2bcd8739ae039).icon.rotate, (0, $iA2ta$lodash.get)(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var styles = handleGenerateStyle();
+    return (0, $iA2ta$reactjsxruntime.jsxs)("div", {
+        className: styles.container,
+        children: [
+            trigger({
+                handleToggle: handleToggle,
+                rotatingIcon: (0, $iA2ta$reactjsxruntime.jsx)($9a91e005c750fbb3$var$RotatingIcon, {
+                    isVisible: isVisible,
+                    styles: styles
+                }),
+                isVisible: isVisible
+            }),
+            isVisible && (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                children: children
+            })
+        ]
+    });
+};
+var $9a91e005c750fbb3$export$2e2bcd8739ae039 = $9a91e005c750fbb3$var$Collapsible;
+
+
+
+
+