@ballistix.digital/react-components 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -847,6 +847,11 @@ type TProps$1 = {
     table: Table<any>;
     setColumnOrder: Dispatch<SetStateAction<ColumnOrderState>>;
     trigger: ReactNode;
+    resetConfig?: {
+        tableId: string;
+        label?: string;
+        onReset?: () => void;
+    };
 };
 declare const TableColumnOptionsCustom: FC<TProps$1>;
 

package/dist/index.esm.js

@@ -1727,6 +1727,9 @@ var setTableState = function (tableName, state) {
         localStorage.setItem("TableList.".concat(tableName, ".state"), JSON.stringify(cherryPickedState));
     }
 };
+var removeTableState = function (tableName) {
+    localStorage.removeItem("TableList.".concat(tableName, ".state"));
+};
 var isValidState = function (state) {
     if (!(state === null || state === void 0 ? void 0 : state.columnOrder) ||
         !(state === null || state === void 0 ? void 0 : state.columnVisibility) ||
@@ -2341,7 +2344,7 @@ var ModalOverlay = function (props) {
             onClose && onClose();
         }
     }, [isOpen, onClose]);
-    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, "data-cy": dataCy, children: jsx("div", { className: styles.layout.content, children: jsx(Transition.Child, { as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
+    return (jsxs(Fragment$1, { children: [jsx(Transition.Root, { show: isOpen, as: Fragment, children: jsxs(Dialog, { as: "div", className: styles.container, onClose: setIsOpen, children: [jsx(Transition.Child, { as: Fragment, enter: styles.background.transition.enter, enterFrom: styles.background.transition.enterFrom, enterTo: styles.background.transition.enterTo, leave: styles.background.transition.leave, leaveFrom: styles.background.transition.leaveFrom, leaveTo: styles.background.transition.leaveTo, children: jsx("div", { className: styles.background.container }) }), jsx("div", { className: styles.layout.container, children: jsx("div", { className: styles.layout.content, "data-cy": dataCy, children: jsx(Transition.Child, { as: Fragment, enter: styles.panel.transition.enter, enterFrom: styles.panel.transition.enterFrom, enterTo: styles.panel.transition.enterTo, leave: styles.panel.transition.leave, leaveFrom: styles.panel.transition.leaveFrom, leaveTo: styles.panel.transition.leaveTo, children: jsx(Dialog.Panel, { className: styles.panel.container, children: children(options) }) }) }) })] }) }), trigger && trigger(options)] }));
 };
 
 var base$7 = {
@@ -2596,7 +2599,8 @@ var styles$7 = {
 };
 
 var TableColumnOptionsCustom = function (props) {
-    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder;
+    var _a;
+    var table = props.table, trigger = props.trigger, setColumnOrder = props.setColumnOrder, resetConfig = props.resetConfig;
     var handleUpdateColumnOrder = useCallback(function (table, column, location, setColumnOrder) {
         var _a;
         var ids = (_a = table
@@ -2608,26 +2612,31 @@ var TableColumnOptionsCustom = function (props) {
         ids.splice(location, 0, column.id);
         setColumnOrder(ids);
     }, []);
-    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsx(Popover.Panel, { className: styles$6.controls.content, children: table
-                    .getAllLeafColumns()
-                    .map(function (column, index) {
-                    var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
-                    return (jsxs("div", { className: toClassName(styles$6.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles$6.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles$6.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles$6.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles$6.controls.dropdown.upIcon, onClick: function () {
-                                            return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
-                                        } }), jsx(ChevronDownIcon$1, { className: styles$6.controls.dropdown.downIcon, onClick: function () {
-                                            return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
-                                        } })] })] }, column.id));
-                }) })] }));
+    return (jsxs(Popover, { children: [jsx(Popover.Button, { children: trigger }), jsxs(Popover.Panel, { className: styles$6.controls.content, children: [resetConfig && (jsxs("div", { className: styles$6.controls.dropdown.reset, onClick: function () {
+                            removeTableState(resetConfig.tableId);
+                            table.resetColumnVisibility(true);
+                            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
+                        .getAllLeafColumns()
+                        .map(function (column, index) {
+                        var isAccessorColumn = !!(column === null || column === void 0 ? void 0 : column.accessorFn);
+                        return (jsxs("div", { className: toClassName(styles$6.controls.dropdown.container, !isAccessorColumn && 'hidden'), children: [jsx("input", { className: styles$6.controls.dropdown.input, type: "checkbox", checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }), jsx("label", { className: styles$6.controls.dropdown.label, children: column.columnDef.header }), jsxs("div", { className: styles$6.controls.dropdown.actions, children: [jsx(ChevronDownIcon$1, { className: styles$6.controls.dropdown.upIcon, onClick: function () {
+                                                return handleUpdateColumnOrder(table, column, index - 1, setColumnOrder);
+                                            } }), jsx(ChevronDownIcon$1, { className: styles$6.controls.dropdown.downIcon, onClick: function () {
+                                                return handleUpdateColumnOrder(table, column, index + 1, setColumnOrder);
+                                            } })] })] }, column.id));
+                    })] })] }));
 };
 
 var styles$6 = {
-    container: '',
     controls: {
         container: 'flex-row justify-between z-10 relative mb-4 gap-2 hidden',
-        content: 'absolute rounded-md z-20 bg-white w-fit -translate-x-1/2 my-2 flex flex-col',
+        content: 'absolute rounded-md z-20 bg-white w-fit -translate-x-1/2 my-2 flex flex-col border-[1px]',
         head: '',
         body: 'flex flex-row justify-end gap-2',
         dropdown: {
+            reset: 'flex px-4 py-2 text-sm cursor-pointer hover:bg-red-100 bg-red-50 items-center flex-row gap-3',
             container: 'px-4 py-2 text-sm flex flex-row items-center font-medium group',
             input: 'mr-3 cursor-pointer',
             label: 'mr-3',
@@ -2676,8 +2685,8 @@ var DateMenuForm = function (props) {
         return result;
     };
     var styles = handleGenerateStyle();
-    var inputDataCy = "form-input-date-".concat(name);
-    var errorDataCy = "form-input-date-error-".concat(name);
+    var inputDataCy = "form-date-".concat(name);
+    var errorDataCy = "form-date-error-".concat(name);
     // Simulate onClear event.
     useEffect(function () {
         if (state.startDate === null && state.endDate === null) {