@ballistix.digital/react-components 1.0.3 → 2.0.0

package/dist/index.js

@@ -1196,6 +1196,79 @@ var useExcel = function () {
     };
 };
 
+var SelectMenuForm = function (props) {
+    var _a;
+    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var _j = React.useState(true), isFocus = _j[0], setIsFocus = _j[1];
+    var _k = React.useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
+    var isValid = error === undefined;
+    var selectDataCy = "form-select-".concat(name);
+    var errorDataCy = "form-select-error-".concat(name);
+    var handleGenerateStyle = function () {
+        var result = deepCopyObject(styles$i.base);
+        var keys = calculateNestedKeys(styles$i.base);
+        keys.forEach(function (key) {
+            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), lodash.get(styles$i['normal'], key), isTouched === true && !isValid && lodash.get(styles$i.invalid, key), isDisabled && lodash.get(styles$i.disabled, key), lodash.get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var handleChange = function (selectValue) {
+        setState(selectValue);
+        onChange && onChange(selectValue);
+        setIsFocus(false);
+    };
+    var styles = handleGenerateStyle();
+    // Simulate onClear event.
+    React.useEffect(function () {
+        if (state === null && !isFocus) {
+            onClear && onClear(name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state]);
+    // Simulate onBlur event.
+    React.useEffect(function () {
+        if (!isFocus) {
+            onBlur && onBlur();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocus]);
+    // listen to value changes.
+    React.useEffect(function () {
+        setState(value);
+    }, [value]);
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { "data-cy": selectDataCy, children: jsxRuntime.jsx(Select, { primaryColor: "primary", 
+                            //
+                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
+                            //
+                            loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
+                            //
+                            options: options, 
+                            //
+                            value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
+                            //
+                            classNames: {
+                                menuButton: function () {
+                                    return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
+                                        !isValid &&
+                                        isTouched &&
+                                        '[&>*]:!text-red-300');
+                                },
+                                menu: styles.menu,
+                                tagItem: function () { return styles.tagItem; },
+                                tagItemText: styles.tagItemText,
+                                tagItemIconContainer: styles.tagItemIconContainer,
+                                tagItemIcon: styles.tagItemIcon,
+                                list: styles.list,
+                                listItem: function () { return styles.listItem; },
+                                listDisabledItem: styles.listDisabledItem,
+                                listGroupLabel: styles.listGroupLabel,
+                                searchContainer: styles.searchContainer,
+                                searchBox: styles.searchBox,
+                                searchIcon: styles.searchIcon,
+                                closeIcon: styles.closeIcon,
+                            } }) }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
+};
+
 var base$f = {
     container: '',
     head: 'flex justify-between',
@@ -1287,79 +1360,6 @@ var styles$i = {
     disabled: disabled$6,
 };
 
-var SelectMenuForm = function (props) {
-    var _a;
-    var _b = props.name, name = _b === void 0 ? 'select-menu-form' : _b, label = props.label, description = props.description, placeholder = props.placeholder, options = props.options, required = props.required, value = props.value, error = props.error, _c = props.isRequired, isRequired = _c === void 0 ? false : _c, isLoading = props.isLoading, _d = props.isTouched, isTouched = _d === void 0 ? false : _d, isDisabled = props.isDisabled, _e = props.isClearable, isClearable = _e === void 0 ? true : _e, _f = props.isMultiple, isMultiple = _f === void 0 ? false : _f, _g = props.isSearchable, isSearchable = _g === void 0 ? true : _g, _h = props.isSolo, isSolo = _h === void 0 ? false : _h, onChange = props.onChange, onSearchInputChange = props.onSearchInputChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
-    var _j = React.useState(true), isFocus = _j[0], setIsFocus = _j[1];
-    var _k = React.useState(value !== null && value !== void 0 ? value : null), state = _k[0], setState = _k[1];
-    var isValid = error === undefined;
-    var selectDataCy = "form-select-".concat(name);
-    var errorDataCy = "form-select-error-".concat(name);
-    var handleGenerateStyle = function () {
-        var result = deepCopyObject(styles$i.base);
-        var keys = calculateNestedKeys(styles$i.base);
-        keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$i.base, key), lodash.get(styles$i['normal'], key), isTouched === true && !isValid && lodash.get(styles$i.invalid, key), isDisabled && lodash.get(styles$i.disabled, key), lodash.get(stylesOverrides, key)));
-        });
-        return result;
-    };
-    var handleChange = function (selectValue) {
-        setState(selectValue);
-        onChange && onChange(selectValue);
-        setIsFocus(false);
-    };
-    var styles = handleGenerateStyle();
-    // Simulate onClear event.
-    React.useEffect(function () {
-        if (state === null && !isFocus) {
-            onClear && onClear(name);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
-    // Simulate onBlur event.
-    React.useEffect(function () {
-        if (!isFocus) {
-            onBlur && onBlur();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFocus]);
-    // listen to value changes.
-    React.useEffect(function () {
-        setState(value);
-    }, [value]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles.head, children: [label && (jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { "data-cy": selectDataCy, children: jsxRuntime.jsx(Select, { primaryColor: "primary", 
-                            //
-                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (jsxRuntime.jsx("p", { className: styles.emptyState, children: (_a = placeholder === null || placeholder === void 0 ? void 0 : placeholder.emptyState) !== null && _a !== void 0 ? _a : 'No results found' })), searchInputPlaceholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.searchInput, 
-                            //
-                            loading: isLoading, isDisabled: isDisabled, isClearable: isClearable, isMultiple: isMultiple, isSearchable: isSearchable, 
-                            //
-                            options: options, 
-                            //
-                            value: state, onChange: handleChange, onSearchInputChange: onSearchInputChange, 
-                            //
-                            classNames: {
-                                menuButton: function () {
-                                    return toClassName(styles.input, state === null && '[&>*]:!text-gray-300 ', state === null &&
-                                        !isValid &&
-                                        isTouched &&
-                                        '[&>*]:!text-red-300');
-                                },
-                                menu: styles.menu,
-                                tagItem: function () { return styles.tagItem; },
-                                tagItemText: styles.tagItemText,
-                                tagItemIconContainer: styles.tagItemIconContainer,
-                                tagItemIcon: styles.tagItemIcon,
-                                list: styles.list,
-                                listItem: function () { return styles.listItem; },
-                                listDisabledItem: styles.listDisabledItem,
-                                listGroupLabel: styles.listGroupLabel,
-                                searchContainer: styles.searchContainer,
-                                searchBox: styles.searchBox,
-                                searchIcon: styles.searchIcon,
-                                closeIcon: styles.closeIcon,
-                            } }) }), !isSolo && (jsxRuntime.jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsxRuntime.jsx("p", { className: styles.description, children: description })), error && isTouched && (jsxRuntime.jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
-};
-
 var PanelPaginationNavigation = function (props) {
     var defaultValue = props.current, _a = props.min, min = _a === void 0 ? 1 : _a, _b = props.max, max = _b === void 0 ? 20 : _b, stylesOverrides = props.styles, pageSizeOptions = props.pageSizeOptions, defaultPageSize = props.defaultPageSize, _c = props.onChangePageSize, onChangePageSize = _c === void 0 ? lodash.noop : _c, children = props.children, onChange = props.onChange;
     var _d = React.useState(1), current = _d[0], setCurrent = _d[1];
@@ -1756,11 +1756,11 @@ var isValidState = function (state) {
 };
 
 var TableList2 = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var id = props.id, config = props.table, head = props.head, foot = props.foot, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles;
-    var _g = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _g[0], setSorting = _g[1];
-    var _h = React.useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
-    var _j = React.useState([]), columnOrder = _j[0], setColumnOrder = _j[1];
+    var _j = React.useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _j[0], setSorting = _j[1];
+    var _k = React.useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
+    var _l = React.useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$f.base);
         var keys = calculateNestedKeys(styles$f.base);
@@ -1775,6 +1775,32 @@ var TableList2 = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var initialVisibilityState = React.useMemo(function () {
+        var _a;
+        var columnAccessorKeys = lodash.compact(lodash.map(config.columns, 'accessorKey'));
+        var columnIds = lodash.compact(lodash.map(config.columns, 'id'));
+        var visibilityState = {};
+        if ((_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility) {
+            lodash.forEach(columnAccessorKeys, function (key) {
+                var _a;
+                var _b;
+                visibilityState = lodash.assign(visibilityState, (_a = {},
+                    _a[key] = lodash.includes((_b = config.options) === null || _b === void 0 ? void 0 : _b.defaultVisibility, key),
+                    _a));
+            });
+        }
+        else {
+            lodash.forEach(columnAccessorKeys, function (key) {
+                var _a;
+                visibilityState = lodash.assign(visibilityState, (_a = {}, _a[key] = true, _a));
+            });
+        }
+        lodash.forEach(columnIds, function (key) {
+            var _a;
+            visibilityState = lodash.assign(visibilityState, (_a = {}, _a[key] = true, _a));
+        });
+        return visibilityState;
+    }, [config.columns, (_c = config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility]);
     var table = reactTable.useReactTable({
         getCoreRowModel: reactTable.getCoreRowModel(),
         columns: config.columns,
@@ -1784,6 +1810,10 @@ var TableList2 = function (props) {
             columnVisibility: columnVisibility,
             columnOrder: columnOrder,
         },
+        initialState: {
+            columnVisibility: initialVisibilityState,
+            columnOrder: (_d = config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder,
+        },
         manualPagination: true,
         manualSorting: true,
         onSortingChange: setSorting,
@@ -1832,7 +1862,7 @@ var TableList2 = function (props) {
             }
             setColumnVisibility(visibility_1);
         }
-    }, [(_c = config === null || config === void 0 ? void 0 : config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility, id, table]);
+    }, [(_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.defaultVisibility, id, table]);
     React.useEffect(function () {
         var _a, _b, _c;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -1845,7 +1875,7 @@ var TableList2 = function (props) {
         else if (lodash.some(config.columns, function (column) { return (column === null || column === void 0 ? void 0 : column.id) || lodash.get(column, 'accessorKey'); })) {
             setColumnOrder(lodash.map(config.columns, function (column) { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : lodash.get(column, 'accessorKey')); }));
         }
-    }, [config.columns, (_d = config === null || config === void 0 ? void 0 : config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder, id]);
+    }, [config.columns, (_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.defaultOrder, id]);
     // Write state to local storage when it changes
     React.useEffect(function () {
         if (state) {
@@ -1886,7 +1916,7 @@ var TableList2 = function (props) {
                                                                     ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) - 1 &&
                                                                 'border-b border-gray-200'), children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                     }) }, row.id));
-                                            }) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_e = config === null || config === void 0 ? void 0 : config.options) === null || _e === void 0 ? void 0 : _e.emptyComponent) ? ((_f = config === null || config === void 0 ? void 0 : config.options) === null || _f === void 0 ? void 0 : _f.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
+                                            }) }))] }), lodash.isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.emptyComponent) ? ((_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.emptyComponent) : (jsxRuntime.jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsxRuntime.jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxRuntime.jsxs("div", { className: "flex gap-2", children: [jsxRuntime.jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsxRuntime.jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsxRuntime.jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
 var base$c = {
@@ -2632,7 +2662,7 @@ var TableColumnOptionsCustom = function (props) {
     var styles = handleGenerateStyle();
     return (jsxRuntime.jsxs(react.Popover, { children: [jsxRuntime.jsx(react.Popover.Button, { children: trigger }), jsxRuntime.jsxs(react.Popover.Panel, { className: styles.controls.content, children: [resetConfig && (jsxRuntime.jsxs("div", { className: styles.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
-                            table.resetColumnVisibility(true);
+                            table.resetColumnVisibility();
                             table.resetColumnOrder();
                             resetConfig.onReset && resetConfig.onReset();
                         }, children: [jsxRuntime.jsx(IconElement, { accessor: "rotate-left" }), jsxRuntime.jsx("p", { children: (_a = resetConfig.label) !== null && _a !== void 0 ? _a : 'Reset' })] })), table
@@ -2893,9 +2923,7 @@ var CheckboxInputForm = function (props) {
         var result = deepCopyObject(styles$4.base);
         var keys = calculateNestedKeys(styles$4.base);
         keys.forEach(function (key) {
-            lodash.set(result, key, toClassName(lodash.get(styles$4.base, key), 
-            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && lodash.get(styles$4.disabled, key), lodash.get(stylesOverrides, key)));
+            lodash.set(result, key, toClassName(lodash.get(styles$4.base, key), isDisabled && lodash.get(styles$4.disabled, key), lodash.get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2924,7 +2952,7 @@ var CheckboxInputForm = function (props) {
             inputRef.current.indeterminate = value === null;
         }
     }, [isIndeterminable, value]);
-    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: jsxRuntime.jsx("input", { ref: inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: styles.input, disabled: isDisabled, onChange: handleToggle }) }), jsxRuntime.jsxs("div", { className: styles.body, children: [jsxRuntime.jsx("label", { htmlFor: "comments", className: styles.label, children: title }), description && (jsxRuntime.jsx("p", { id: "comments-description", className: styles.description, children: description }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsx("div", { className: styles.head, children: jsxRuntime.jsx("input", { ref: inputRef, name: name, "data-cy": "form-".concat(name, "-checkbox"), "aria-describedby": "".concat(name, "-description"), type: "checkbox", checked: !!value, className: styles.input, disabled: isDisabled, onChange: handleToggle }) }), jsxRuntime.jsxs("div", { className: styles.body, children: [jsxRuntime.jsx("label", { htmlFor: name, className: styles.label, children: title }), description && (jsxRuntime.jsx("p", { id: "".concat(name, "-description"), className: styles.description, children: description }))] })] }));
 };
 
 var base$3 = {