@ballistix.digital/react-components 0.4.2 → 0.4.4

package/dist/index.js

@@ -338,7 +338,7 @@ var ButtonElement = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    return (jsxRuntime.jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ArrowPathIcon, { className: styles.spinner }), jsxRuntime.jsx("p", { children: children })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: styles.icon }), jsxRuntime.jsx("p", { children: children })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.CheckIcon, { className: styles.icon }), jsxRuntime.jsx("p", { children: children })] })))] })));
+    return (jsxRuntime.jsxs("button", __assign({ type: htmlType, className: styles.container, disabled: isDisabled || status !== 'idle', onClick: onClick, ref: innerRef }, { children: [status === 'idle' && children, status === 'loading' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ArrowPathIcon, { className: styles.spinner }), jsxRuntime.jsx("div", { children: children })] }))), status === 'error' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: styles.icon }), jsxRuntime.jsx("div", { children: children })] }))), status === 'success' && (jsxRuntime.jsxs("div", __assign({ className: styles.content }, { children: [jsxRuntime.jsx(solid.CheckIcon, { className: styles.icon }), jsxRuntime.jsx("div", { children: children })] })))] })));
 };
 
 var base$g = {
@@ -547,7 +547,7 @@ var InputGroupForm = function (props) {
     };
     var styles = handleGenerateStyle();
     var invalidIcon = (jsxRuntime.jsx(solid.ExclamationCircleIcon, { className: "h-5 w-5 text-red-500", "aria-hidden": "true" }));
-    return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.head }, { children: [label && (jsxRuntime.jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !required && !isRequired && (jsxRuntime.jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxRuntime.jsxs("div", __assign({ className: styles.body }, { children: [leading && jsxRuntime.jsx("div", __assign({ className: styles.leading }, { children: leading })), jsxRuntime.jsx("input", { type: mask !== '' ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsxRuntime.jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.head }, { children: [label && (jsxRuntime.jsx("label", __assign({ htmlFor: name, className: styles.label }, { children: label }))), !required && !isRequired && typeof label === 'string' && (jsxRuntime.jsx("span", __assign({ className: styles.hint }, { children: "Optional" }))), required && required({ isRequired: isRequired })] })), jsxRuntime.jsxs("div", __assign({ className: styles.body }, { children: [leading && jsxRuntime.jsx("div", __assign({ className: styles.leading }, { children: leading })), jsxRuntime.jsx("input", { type: mask !== '' ? 'text' : htmlType, ref: mask && ref, name: name, id: name, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), type === 'floored' && (jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: trailing }))), !isValid && jsxRuntime.jsx("div", __assign({ className: styles.trailing }, { children: invalidIcon }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.foot }, { children: [description && !error && (jsxRuntime.jsx("p", __assign({ className: styles.description }, { children: description }))), error && isTouched && jsxRuntime.jsx("p", __assign({ className: styles.error }, { children: error }))] }))] })));
 };
 
 var base$d = {
@@ -16878,7 +16878,7 @@ var PanelPaginationNavigation = function (props) {
             component = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === min && styles.button.active), onClick: function () { return handleChangeCurrent(min); } }, { children: min })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 1 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 1); } }, { children: min + 1 })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.button.default, current === min + 2 && styles.button.active), onClick: function () { return handleChangeCurrent(min + 2); } }, { children: min + 2 }))] }));
             break;
     }
-    return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsxRuntime.jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("p", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsxRuntime.jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsxRuntime.jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-1 justify-between sm:hidden" }, { children: [jsxRuntime.jsx("button", __assign({ className: toClassName(styles.mobile.button, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: "Previous" })), jsxRuntime.jsx("button", __assign({ className: toClassName(styles.mobile.button, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: "Next" }))] })), jsxRuntime.jsxs("div", __assign({ className: styles.desktop.container }, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", __assign({ className: "text-sm text-gray-700" }, { children: children({ min: min, max: max, current: current }) })) }), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("nav", __assign({ className: styles.desktop.navigation, "aria-label": "Pagination" }, { children: [jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.desktop.leftButton, current === min && styles.button.disabled), disabled: current === min, onClick: function () { return handleChangeCurrent(current - 1); } }, { children: [jsxRuntime.jsx("span", __assign({ className: styles.label }, { children: "Previous" })), jsxRuntime.jsx(solid.ChevronLeftIcon, { className: styles.icon, "aria-hidden": "true" })] })), component, jsxRuntime.jsxs("button", __assign({ className: toClassName(styles.desktop.rightButton, current === max && styles.button.disabled), disabled: current === max, onClick: function () { return handleChangeCurrent(current + 1); } }, { children: [jsxRuntime.jsx("span", __assign({ className: styles.label }, { children: "Next" })), jsxRuntime.jsx(solid.ChevronRightIcon, { className: styles.icon, "aria-hidden": "true" })] }))] })) })] }))] })));
 };
 
 var base$7 = {
@@ -16907,7 +16907,7 @@ var styles$8 = {
 };
 
 var TableList = function (props) {
-    var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, _a = props.type, type = _a === void 0 ? 'normal' : _a, _b = props.isStriped, isStriped = _b === void 0 ? false : _b, _c = props.hasStickyHeader, hasStickyHeader = _c === void 0 ? false : _c, _d = props.hasVerticalSeparators, hasVerticalSeparators = _d === void 0 ? false : _d, _e = props.areControlsVisible, areControlsVisible = _e === void 0 ? true : _e, stylesOverrides = props.styles;
+    var id = props.id, columns = props.columns, data = props.data, page = props.page, children = props.children, defaultOrder = props.defaultOrder, _a = props.type, type = _a === void 0 ? 'normal' : _a, _b = props.isStriped, isStriped = _b === void 0 ? false : _b, _c = props.hasStickyHeader, hasStickyHeader = _c === void 0 ? false : _c, _d = props.hasVerticalSeparators, hasVerticalSeparators = _d === void 0 ? false : _d, _e = props.areControlsVisible, areControlsVisible = _e === void 0 ? true : _e, stylesOverrides = props.styles, onChange = props.onChange;
     var write = useExcel().write;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$7.base);
@@ -16936,6 +16936,12 @@ var TableList = function (props) {
         onColumnVisibilityChange: setVisibility,
         onColumnOrderChange: setOrder,
     });
+    n.useEffect(function () {
+        if (sorting || visibility || order) {
+            onChange && onChange({ sorting: sorting, visibility: visibility, order: order });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sorting || visibility || order]);
     var handleCalculateExcelTypeFromValue = function (value) {
         var _a;
         var result = 'string';
@@ -16982,8 +16988,7 @@ var TableList = function (props) {
     var handleUpdateColumnOrder = n.useCallback(function (column, location) {
         var _a;
         var ids = (_a = table
-            .getAllLeafColumns()
-            .filter(function (column) { return column === null || column === void 0 ? void 0 : column.getCanSort(); })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
+            .getAllLeafColumns()) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
         var currentIndexOfId = ids.findIndex(function (id) { return id === column.id; });
         // Remove id from array.
         ids.splice(currentIndexOfId, 1);
@@ -16996,6 +17001,9 @@ var TableList = function (props) {
         var _a;
         var state = window === null || window === void 0 ? void 0 : window.localStorage.getItem("TableList.".concat(id, ".state"));
         if (!state) {
+            if (defaultOrder && (defaultOrder === null || defaultOrder === void 0 ? void 0 : defaultOrder.length) > 0) {
+                return setOrder(defaultOrder);
+            }
             return setOrder(columns.map(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : ''; }));
         }
         var savedColumnOrder = (_a = state === null || state === void 0 ? void 0 : state.split(',').map(function (id) { return id.replace('-', ''); })) !== null && _a !== void 0 ? _a : [];
@@ -17005,7 +17013,7 @@ var TableList = function (props) {
         });
         setOrder(savedColumnOrder);
         setVisibility(savedColumnVisibility);
-    }, [columns, id]);
+    }, [columns, defaultOrder, id]);
     // Save state to local storage when column visibility or order updates.
     n.useEffect(function () {
         var _a;
@@ -17013,8 +17021,7 @@ var TableList = function (props) {
         var isMounted = order.length > 0;
         if (isMounted && (order || visibility)) {
             var ids = (_a = table
-                .getAllLeafColumns()
-                .filter(function (column) { return column === null || column === void 0 ? void 0 : column.getCanSort(); })) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
+                .getAllLeafColumns()) === null || _a === void 0 ? void 0 : _a.map(function (column) { return column.id; });
             var idsWithVisibilityIndicator = ids.map(function (id) {
                 // Hardcoding `false` here since `undefined` is allowed.
                 if (visibility[id] === false) {
@@ -17027,9 +17034,10 @@ var TableList = function (props) {
     }, [id, table, order, visibility]);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ className: styles.container }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles.controls.container }, { children: [jsxRuntime.jsx(DropdownElement.Container, __assign({ styles: stylesOverrides === null || stylesOverrides === void 0 ? void 0 : stylesOverrides.components.dropdownElement, label: jsxRuntime.jsx(outline$2.ViewColumnsIcon, { className: "w-6 h-6" }) }, { children: jsxRuntime.jsx("div", __assign({ className: styles.controls.content }, { children: table
                                     .getAllLeafColumns()
-                                    .filter(function (column) { return column === null || column === void 0 ? void 0 : column.getCanSort(); })
+                                    // .filter((column) => column?.getCanSort())
                                     .map(function (column, index) {
-                                    return (jsxRuntime.jsx(DropdownElement.Item, { children: function () { return (jsxRuntime.jsxs("div", __assign({ className: styles.controls.dropdown.container }, { children: [jsxRuntime.jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxRuntime.jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles.controls.dropdown.upIcon, onClick: function () {
+                                    var canSort = column === null || column === void 0 ? void 0 : column.getCanSort();
+                                    return (jsxRuntime.jsx(DropdownElement.Item, { children: function () { return (jsxRuntime.jsxs("div", __assign({ className: toClassName(styles.controls.dropdown.container, !canSort && 'hidden') }, { children: [jsxRuntime.jsx("input", { className: styles.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsxRuntime.jsx("label", __assign({ className: styles.controls.dropdown.label }, { children: column.columnDef.header })), jsxRuntime.jsxs("div", __assign({ className: styles.controls.dropdown.actions }, { children: [jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles.controls.dropdown.upIcon, onClick: function () {
                                                                 return handleUpdateColumnOrder(column, index - 1);
                                                             } }), jsxRuntime.jsx(outline$2.ChevronDownIcon, { className: styles.controls.dropdown.downIcon, onClick: function () {
                                                                 return handleUpdateColumnOrder(column, index + 1);