fix(TableSettings): group ordering state initializing

src/components/TableSettings/TableSettings.tsx

@@ -64,18 +64,9 @@ export const TableSettings = <TData extends unknown>({
     const [visibilityState, setVisibilityState] = React.useState(
         () => table.getState().columnVisibility,
     );
-    const [orderState, setOrderState] = React.useState(() => getInitialOrderItems(filteredColumns));
-
-    const applyNewSettings = () => {
-        const columnOrder = orderStateToColumnOrder(orderState);
-
-        if (onSettingsApply) onSettingsApply({visibilityState, columnOrder});
-
-        if (filterable) table.setColumnVisibility(visibilityState);
-        if (sortable) table.setColumnOrder(columnOrder);
-
-        setOpen(false);
-    };
+    const [orderState, setOrderState] = React.useState(() =>
+        getInitialOrderItems(filteredColumns, table.getState().columnOrder),
+    );
 
     const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
 
@@ -104,11 +95,37 @@ export const TableSettings = <TData extends unknown>({
         });
     };
 
+    const resetSettings = () => {
+        setVisibilityState(table.getState().columnVisibility);
+        setOrderState(getInitialOrderItems(filteredColumns, table.getState().columnOrder));
+    };
+
+    const cancelEditing = () => {
+        setOpen(false);
+        resetSettings();
+    };
+
+    const togglePopup = () => {
+        if (open) cancelEditing();
+        else setOpen(true);
+    };
+
+    const applyNewSettings = () => {
+        const columnOrder = orderStateToColumnOrder(orderState);
+
+        if (onSettingsApply) onSettingsApply({visibilityState, columnOrder});
+
+        if (filterable) table.setColumnVisibility(visibilityState);
+        if (sortable) table.setColumnOrder(columnOrder);
+
+        setOpen(false);
+    };
+
     return (
         <React.Fragment>
             <Popup
                 open={open}
-                onClose={() => setOpen(false)}
+                onClose={cancelEditing}
                 anchorRef={anchorRef}
                 placement={POPUP_PLACEMENT}
                 contentClassName={b()}
@@ -135,7 +152,7 @@ export const TableSettings = <TData extends unknown>({
                     </Button>
                 </div>
             </Popup>
-            <Button view="flat-secondary" size="m" ref={anchorRef} onClick={() => setOpen(!open)}>
+            <Button view="flat-secondary" size="m" ref={anchorRef} onClick={togglePopup}>
                 <Icon data={Gear} />
             </Button>
         </React.Fragment>

src/components/TableSettings/TableSettings.utils.ts

@@ -98,16 +98,39 @@ export const orderStateToColumnOrder = (state: Record<string, string[]>) => {
     return result;
 };
 
-export const getInitialOrderItems = <TData extends unknown>(treeItems: Column<TData>[]) => {
+export const getInitialOrderItems = <TData extends unknown>(
+    treeItems: Column<TData>[],
+    initialOrder: string[],
+) => {
+    const orderMap = initialOrder.reduce<Record<string, number>>(
+        (acc, id, index) => ({...acc, [id]: index}),
+        {},
+    );
+
     const stack = [...treeItems];
     const result: Record<string, string[]> = {root: treeItems.map(({id}) => id)};
+    const parentNodes: string[] = [];
 
     while (stack.length) {
         const item = stack.shift();
         if (!item) continue;
         result[item.id] = item?.columns?.map(({id}) => id) ?? [];
-        if (item.columns) stack.push(...item.columns);
+        if (item.columns.length) {
+            stack.push(...item.columns);
+            parentNodes.push(item.id);
+        }
     }
 
+    parentNodes.reverse().forEach((parent) => {
+        const childs = result[parent];
+        const childsOrders = childs.map((id) => orderMap[id] ?? -1);
+        const minIndex = Math.min(...childsOrders);
+        orderMap[parent] = minIndex;
+    });
+
+    Object.keys(result).forEach((key) => {
+        result[key] = result[key].sort((a, b) => orderMap[a] - orderMap[b]);
+    });
+
     return result;
 };