@ballistix.digital/react-components 1.0.3 → 2.0.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
-import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, forEach, assign, intersection, trim, lastIndexOf } from 'lodash';
+import { isArray, map, set, get, noop as noop$1, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, intersection, trim, lastIndexOf } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, Children, Fragment, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, useReducer, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -1194,6 +1194,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 = useState(true), isFocus = _j[0], setIsFocus = _j[1];
+    var _k = 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) {
+            set(result, key, toClassName(get(styles$i.base, key), get(styles$i['normal'], key), isTouched === true && !isValid && get(styles$i.invalid, key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
+        });
+        return result;
+    };
+    var handleChange = function (selectValue) {
+        setState(selectValue);
+        onChange && onChange(selectValue);
+        setIsFocus(false);
+    };
+    var styles = handleGenerateStyle();
+    // Simulate onClear event.
+    useEffect(function () {
+        if (state === null && !isFocus) {
+            onClear && onClear(name);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state]);
+    // Simulate onBlur event.
+    useEffect(function () {
+        if (!isFocus) {
+            onBlur && onBlur();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFocus]);
+    // listen to value changes.
+    useEffect(function () {
+        setState(value);
+    }, [value]);
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, children: [jsx("div", { "data-cy": selectDataCy, children: jsx(Select, { primaryColor: "primary", 
+                            //
+                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (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 && (jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: JSON.stringify(error).replaceAll('"', '') }))] }))] })] }));
+};
+
 var base$f = {
     container: '',
     head: 'flex justify-between',
@@ -1285,79 +1358,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 = useState(true), isFocus = _j[0], setIsFocus = _j[1];
-    var _k = 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) {
-            set(result, key, toClassName(get(styles$i.base, key), get(styles$i['normal'], key), isTouched === true && !isValid && get(styles$i.invalid, key), isDisabled && get(styles$i.disabled, key), get(stylesOverrides, key)));
-        });
-        return result;
-    };
-    var handleChange = function (selectValue) {
-        setState(selectValue);
-        onChange && onChange(selectValue);
-        setIsFocus(false);
-    };
-    var styles = handleGenerateStyle();
-    // Simulate onClear event.
-    useEffect(function () {
-        if (state === null && !isFocus) {
-            onClear && onClear(name);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state]);
-    // Simulate onBlur event.
-    useEffect(function () {
-        if (!isFocus) {
-            onBlur && onBlur();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFocus]);
-    // listen to value changes.
-    useEffect(function () {
-        setState(value);
-    }, [value]);
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, children: [jsx("div", { "data-cy": selectDataCy, children: jsx(Select, { primaryColor: "primary", 
-                            //
-                            placeholder: placeholder === null || placeholder === void 0 ? void 0 : placeholder.select, noOptionsMessage: (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 && (jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (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 ? noop$1 : _c, children = props.children, onChange = props.onChange;
     var _d = useState(1), current = _d[0], setCurrent = _d[1];
@@ -1754,11 +1754,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 = 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 = useState({}), columnVisibility = _h[0], setColumnVisibility = _h[1];
-    var _j = useState([]), columnOrder = _j[0], setColumnOrder = _j[1];
+    var _j = 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 = useState({}), columnVisibility = _k[0], setColumnVisibility = _k[1];
+    var _l = useState([]), columnOrder = _l[0], setColumnOrder = _l[1];
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$f.base);
         var keys = calculateNestedKeys(styles$f.base);
@@ -1773,6 +1773,32 @@ var TableList2 = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
+    var initialVisibilityState = useMemo(function () {
+        var _a;
+        var columnAccessorKeys = compact$1(map(config.columns, 'accessorKey'));
+        var columnIds = compact$1(map(config.columns, 'id'));
+        var visibilityState = {};
+        if ((_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultVisibility) {
+            forEach(columnAccessorKeys, function (key) {
+                var _a;
+                var _b;
+                visibilityState = assign(visibilityState, (_a = {},
+                    _a[key] = includes((_b = config.options) === null || _b === void 0 ? void 0 : _b.defaultVisibility, key),
+                    _a));
+            });
+        }
+        else {
+            forEach(columnAccessorKeys, function (key) {
+                var _a;
+                visibilityState = assign(visibilityState, (_a = {}, _a[key] = true, _a));
+            });
+        }
+        forEach(columnIds, function (key) {
+            var _a;
+            visibilityState = assign(visibilityState, (_a = {}, _a[key] = true, _a));
+        });
+        return visibilityState;
+    }, [config.columns, (_c = config.options) === null || _c === void 0 ? void 0 : _c.defaultVisibility]);
     var table = useReactTable({
         getCoreRowModel: getCoreRowModel(),
         columns: config.columns,
@@ -1782,6 +1808,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,
@@ -1830,7 +1860,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]);
     useEffect(function () {
         var _a, _b, _c;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -1843,7 +1873,7 @@ var TableList2 = function (props) {
         else if (some(config.columns, function (column) { return (column === null || column === void 0 ? void 0 : column.id) || get(column, 'accessorKey'); })) {
             setColumnOrder(map(config.columns, function (column) { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : 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
     useEffect(function () {
         if (state) {
@@ -1884,7 +1914,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: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                     }) }, row.id));
-                                            }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment$1, { 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) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
+                                            }) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment$1, { 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) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: new Array(8).fill(undefined).map(function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] }) }) }) }), jsx("div", { className: styles.foot, children: foot && foot(state) })] }));
 };
 
 var base$c = {
@@ -2630,7 +2660,7 @@ var TableColumnOptionsCustom = function (props) {
     var styles = handleGenerateStyle();
     return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles.controls.content, children: [resetConfig && (jsxs("div", { className: styles.controls.dropdown.reset, onClick: function () {
                             removeTableState(resetConfig.tableId);
-                            table.resetColumnVisibility(true);
+                            table.resetColumnVisibility();
                             table.resetColumnOrder();
                             resetConfig.onReset && resetConfig.onReset();
                         }, children: [jsx(IconElement, { accessor: "rotate-left" }), jsx("p", { children: (_a = resetConfig.label) !== null && _a !== void 0 ? _a : 'Reset' })] })), table
@@ -2891,9 +2921,7 @@ var CheckboxInputForm = function (props) {
         var result = deepCopyObject(styles$4.base);
         var keys = calculateNestedKeys(styles$4.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$4.base, key), 
-            // isTouched === true && !isValid && get(defaultStyles.invalid, key),
-            isDisabled && get(styles$4.disabled, key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$4.base, key), isDisabled && get(styles$4.disabled, key), get(stylesOverrides, key)));
         });
         return result;
     };
@@ -2922,7 +2950,7 @@ var CheckboxInputForm = function (props) {
             inputRef.current.indeterminate = value === null;
         }
     }, [isIndeterminable, value]);
-    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: 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 }) }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: "comments", className: styles.label, children: title }), description && (jsx("p", { id: "comments-description", className: styles.description, children: description }))] })] }));
+    return (jsxs("div", { className: styles.container, children: [jsx("div", { className: styles.head, children: 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 }) }), jsxs("div", { className: styles.body, children: [jsx("label", { htmlFor: name, className: styles.label, children: title }), description && (jsx("p", { id: "".concat(name, "-description"), className: styles.description, children: description }))] })] }));
 };
 
 var base$3 = {