@ballistix.digital/react-components 0.4.103 → 0.4.105

package/dist/index.d.ts

@@ -105,6 +105,7 @@ type TProps$c = {
     trigger?: ReactNode;
     type?: 'button' | 'compact';
     direction?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    isEscapingOverflow?: boolean;
     styles?: TDropdownElementStyles;
 };
 declare const DropdownElement: {
@@ -528,6 +529,7 @@ type TNavigationItemProps$1 = {
     isInitial?: boolean;
     onClick?: ((accessor: MouseEvent) => void) | any;
     styles?: Pick<TTabNavigationStyles, 'tab'>;
+    isLoading?: boolean;
 };
 type TViewProps$1 = {
     children: ReactNode;

package/dist/index.esm.js

@@ -3382,7 +3382,7 @@ var styles$k = {
 };
 
 var Container$3 = function (props) {
-    var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
+    var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$j.base);
         var keys = calculateNestedKeys(styles$j.base);
@@ -3392,7 +3392,7 @@ var Container$3 = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxs(Menu, __assign({ as: "div", className: styles.container }, { children: [jsxs("div", { children: [type === 'button' &&
+    return (jsxs(Menu, __assign({ as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative') }, { children: [jsxs("div", { children: [type === 'button' &&
                         (!trigger ? (jsxs(Menu.Button, __assign({ className: styles.button }, { children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))) : (jsx(Menu.Button, { children: trigger }))), type === 'compact' && (jsxs(Menu.Button, __assign({ className: styles.compact }, { children: [jsx("span", __assign({ className: "sr-only" }, { children: label })), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] })))] }), jsx(Transition, __assign({ as: Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsx(Menu.Items, __assign({ className: styles.items }, { children: children })) }))] })));
 };
 var DropdownElement = {
@@ -3401,7 +3401,7 @@ var DropdownElement = {
 };
 
 var base$g = {
-    container: 'relative inline-block text-left',
+    container: 'inline-block text-left',
     button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     dots: 'h-7 w-7 p-1',
@@ -4281,7 +4281,7 @@ var TableList2 = function (props) {
             onChange && onChange(state);
         }
     }, [onChange, state]);
-    return (jsxs("div", __assign({ className: styles$a.container }, { children: [jsx("div", __assign({ className: styles$a.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "flow-root" }, { children: jsx("div", __assign({ className: "overflow-x-scroll overflow-y-visible" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$a.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
+    return (jsxs("div", __assign({ className: styles$a.container }, { children: [jsx("div", __assign({ className: styles$a.head }, { children: head && head(state) })), jsx("div", __assign({ className: "" }, { children: jsx("div", __assign({ className: "flow-root relative" }, { children: jsx("div", __assign({ className: "overflow-x-scroll overflow-y-visible" }, { children: jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$a.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
                                                         minWidth: !!header.column.columnDef.size &&
                                                             header.column.columnDef.size !== 150
                                                             ? "".concat(header.column.columnDef.size, "px")
@@ -4612,7 +4612,7 @@ var List$1 = function (props) {
                         }) }))] })), jsx("div", __assign({ className: styles.list.body }, { children: jsx("nav", __assign({ className: styles.list.navigation }, { children: children })) }))] })));
 };
 var Item$2 = function (props) {
-    var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles;
+    var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles, _c = props.isLoading, isLoading = _c === void 0 ? true : _c;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$7.base);
         var keys = calculateNestedKeys(styles$7.base);
@@ -4625,7 +4625,7 @@ var Item$2 = function (props) {
     if (href && LinkComponent) {
         return (jsx(LinkComponent, __assign({ href: href, className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive), onClick: onClick }, { children: children })));
     }
-    return (jsx("div", __assign({ className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive), onClick: onClick }, { children: children })));
+    return (jsx("div", __assign({ className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && 'opacity-30 !text-gray-300 !cursor-default', isLoading && styles.tab.inactive), onClick: !isLoading ? onClick : function () { return null; } }, { children: children })));
 };
 var View$1 = function (props) {
     var children = props.children;

package/dist/index.js

@@ -3393,7 +3393,7 @@ var styles$k = {
 };
 
 var Container$3 = function (props) {
-    var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, stylesOverrides = props.styles;
+    var children = props.children, label = props.label, trigger = props.trigger, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$j.base);
         var keys = calculateNestedKeys(styles$j.base);
@@ -3403,7 +3403,7 @@ var Container$3 = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxRuntime.jsxs(react.Menu, __assign({ as: "div", className: styles.container }, { children: [jsxRuntime.jsxs("div", { children: [type === 'button' &&
+    return (jsxRuntime.jsxs(react.Menu, __assign({ as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative') }, { children: [jsxRuntime.jsxs("div", { children: [type === 'button' &&
                         (!trigger ? (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: styles.button }, { children: [label, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] }))) : (jsxRuntime.jsx(react.Menu.Button, { children: trigger }))), type === 'compact' && (jsxRuntime.jsxs(react.Menu.Button, __assign({ className: styles.compact }, { children: [jsxRuntime.jsx("span", __assign({ className: "sr-only" }, { children: label })), jsxRuntime.jsx(solid.EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] })))] }), jsxRuntime.jsx(react.Transition, __assign({ as: React.Fragment, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95" }, { children: jsxRuntime.jsx(react.Menu.Items, __assign({ className: styles.items }, { children: children })) }))] })));
 };
 var DropdownElement = {
@@ -3412,7 +3412,7 @@ var DropdownElement = {
 };
 
 var base$g = {
-    container: 'relative inline-block text-left',
+    container: 'inline-block text-left',
     button: 'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     compact: 'bg-gray-100 rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500',
     dots: 'h-7 w-7 p-1',
@@ -4292,7 +4292,7 @@ var TableList2 = function (props) {
             onChange && onChange(state);
         }
     }, [onChange, state]);
-    return (jsxRuntime.jsxs("div", __assign({ className: styles$a.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles$a.head }, { children: head && head(state) })), jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsx("div", __assign({ className: "flow-root" }, { children: jsxRuntime.jsx("div", __assign({ className: "overflow-x-scroll overflow-y-visible" }, { children: jsxRuntime.jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxRuntime.jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsxRuntime.jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxRuntime.jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$a.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
+    return (jsxRuntime.jsxs("div", __assign({ className: styles$a.container }, { children: [jsxRuntime.jsx("div", __assign({ className: styles$a.head }, { children: head && head(state) })), jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsx("div", __assign({ className: "flow-root relative" }, { children: jsxRuntime.jsx("div", __assign({ className: "overflow-x-scroll overflow-y-visible" }, { children: jsxRuntime.jsxs("div", __assign({ className: "inline-block min-w-full align-middle" }, { children: [jsxRuntime.jsxs("table", __assign({ className: "min-w-full border-separate border-spacing-0 " }, { children: [jsxRuntime.jsx("thead", __assign({ className: "" }, { children: table === null || table === void 0 ? void 0 : table.getHeaderGroups().map(function (headerGroup) { return (jsxRuntime.jsx("tr", { children: headerGroup.headers.map(function (header) { return (jsxRuntime.jsxs("th", __assign({ colSpan: header.colSpan, className: toClassName(styles$a.body.table.head.cell, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
                                                         minWidth: !!header.column.columnDef.size &&
                                                             header.column.columnDef.size !== 150
                                                             ? "".concat(header.column.columnDef.size, "px")
@@ -4623,7 +4623,7 @@ var List$1 = function (props) {
                         }) }))] })), jsxRuntime.jsx("div", __assign({ className: styles.list.body }, { children: jsxRuntime.jsx("nav", __assign({ className: styles.list.navigation }, { children: children })) }))] })));
 };
 var Item$2 = function (props) {
-    var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles;
+    var children = props.children, _a = props.as, LinkComponent = _a === void 0 ? 'a' : _a, _b = props.type, type = _b === void 0 ? 'underline' : _b, href = props.href, isCurrent = props.isCurrent, onClick = props.onClick, stylesOverrides = props.styles, _c = props.isLoading, isLoading = _c === void 0 ? true : _c;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$7.base);
         var keys = calculateNestedKeys(styles$7.base);
@@ -4636,7 +4636,7 @@ var Item$2 = function (props) {
     if (href && LinkComponent) {
         return (jsxRuntime.jsx(LinkComponent, __assign({ href: href, className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive), onClick: onClick }, { children: children })));
     }
-    return (jsxRuntime.jsx("div", __assign({ className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive), onClick: onClick }, { children: children })));
+    return (jsxRuntime.jsx("div", __assign({ className: toClassName(styles.tab.base, isCurrent ? styles.tab.active : styles.tab.inactive, isLoading && 'opacity-30 !text-gray-300 !cursor-default', isLoading && styles.tab.inactive), onClick: !isLoading ? onClick : function () { return null; } }, { children: children })));
 };
 var View$1 = function (props) {
     var children = props.children;

package/package.json

@@ -7,7 +7,7 @@
     "email": "info@ballistix.digital",
     "url": "https://ballistix.digital"
   },
-  "version": "0.4.103",
+  "version": "0.4.105",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.esm.js",