@variocube/app-ui 1.15.0 → 1.16.1

package/src/data-table/DataTableColumnSettings.tsx

@@ -1,204 +1,204 @@
-import {DataTableColumn} from "./DataTable";
-import React, {Fragment, useState} from "react";
 import {
-    Avatar,
-    Dialog,
-    DialogActions,
-    DialogTitle,
-    IconButton,
-    List,
-    ListItemAvatar,
-    ListItemButton,
-    ListItemText,
-    ListSubheader,
-    Menu,
-    Stack,
+	Avatar,
+	Dialog,
+	DialogActions,
+	DialogTitle,
+	IconButton,
+	List,
+	ListItemAvatar,
+	ListItemButton,
+	ListItemText,
+	ListSubheader,
+	Menu,
+	Stack,
 } from "@mui/material";
+import React, {Fragment, useState} from "react";
 import {AddCircleIcon, CloseIcon, MoveDownCircleIcon, MoveUpCircleIcon, RemoveCircleIcon, TuningIcon} from "../icons";
-import {useFlag} from "../utils";
 import {Labels} from "../localization";
+import {useFlag} from "../utils";
+import {DataTableColumn} from "./DataTable";
 
 export interface DataTableColumnButtonProps<T> {
-    columns: ReadonlyArray<DataTableColumn<T>>;
-    selected: ReadonlyArray<DataTableColumn<T>>;
-    onChange: (selected: ReadonlyArray<DataTableColumn<T>>) => any;
-    labels: Labels<"title" | "close" | "add" | "remove" | "moveUp" | "moveDown">;
+	columns: ReadonlyArray<DataTableColumn<T>>;
+	selected: ReadonlyArray<DataTableColumn<T>>;
+	onChange: (selected: ReadonlyArray<DataTableColumn<T>>) => any;
+	labels: Labels<"title" | "close" | "add" | "remove" | "moveUp" | "moveDown">;
 }
 
 function groupColumns<T>(available: ReadonlyArray<DataTableColumn<T>>) {
-    const groups: Record<string, Array<DataTableColumn<T>>> = {};
-    const other: Array<DataTableColumn<T>> = [];
-    for (const column of available) {
-        const group = column.group;
-        if (group) {
-            if (!groups[group]) {
-                groups[group] = [column]
-            } else {
-                groups[group].push(column);
-            }
-        } else {
-            other.push(column);
-        }
-    }
-    return {groups, other};
+	const groups: Record<string, Array<DataTableColumn<T>>> = {};
+	const other: Array<DataTableColumn<T>> = [];
+	for (const column of available) {
+		const group = column.group;
+		if (group) {
+			if (!groups[group]) {
+				groups[group] = [column];
+			} else {
+				groups[group].push(column);
+			}
+		} else {
+			other.push(column);
+		}
+	}
+	return {groups, other};
 }
 
 export function DataTableColumnSettings<T>(props: DataTableColumnButtonProps<T>) {
-    const {
-        columns,
-        selected,
-        onChange,
-        labels,
-    } = props;
+	const {
+		columns,
+		selected,
+		onChange,
+		labels,
+	} = props;
 
-    const [open, setOpen, clearOpen] = useFlag(false);
-    const [focus, setFocus] = useState<string>();
-    const [addMenu, setAddMenu, clearAddMenu] = useFlag(false);
-    const [addAnchor, setAddAnchor] = useState<HTMLElement | null>(null);
+	const [open, setOpen, clearOpen] = useFlag(false);
+	const [focus, setFocus] = useState<string>();
+	const [addMenu, setAddMenu, clearAddMenu] = useFlag(false);
+	const [addAnchor, setAddAnchor] = useState<HTMLElement | null>(null);
 
-    const available = columns.filter(column => !selected.find(s => s.field == column.field));
-    const {groups, other} = groupColumns(available);
+	const available = columns.filter(column => !selected.find(s => s.field == column.field));
+	const {groups, other} = groupColumns(available);
 
-    function move(sourceIndex: number, targetIndex: number) {
-        const newSelected = [...selected];
-        const temp = newSelected[targetIndex];
-        newSelected[targetIndex] = newSelected[sourceIndex];
-        newSelected[sourceIndex] = temp;
-        onChange(newSelected);
-    }
+	function move(sourceIndex: number, targetIndex: number) {
+		const newSelected = [...selected];
+		const temp = newSelected[targetIndex];
+		newSelected[targetIndex] = newSelected[sourceIndex];
+		newSelected[sourceIndex] = temp;
+		onChange(newSelected);
+	}
 
-    function moveUp() {
-        const index = selected.findIndex(s => s.field == focus);
-        if (index >= 1) {
-            move(index, index - 1);
-        }
-    }
+	function moveUp() {
+		const index = selected.findIndex(s => s.field == focus);
+		if (index >= 1) {
+			move(index, index - 1);
+		}
+	}
 
-    function moveDown() {
-        const index = selected.findIndex(s => s.field == focus);
-        if (index >= 0 && index + 1 < selected.length) {
-            move(index, index + 1);
-        }
-    }
+	function moveDown() {
+		const index = selected.findIndex(s => s.field == focus);
+		if (index >= 0 && index + 1 < selected.length) {
+			move(index, index + 1);
+		}
+	}
 
-    function remove() {
-        onChange(selected.filter(c => c.field != focus));
-        setFocus(undefined);
-    }
+	function remove() {
+		onChange(selected.filter(c => c.field != focus));
+		setFocus(undefined);
+	}
 
-    function add(column: DataTableColumn<T>) {
-        onChange([...selected, column]);
-        clearAddMenu();
-    }
+	function add(column: DataTableColumn<T>) {
+		onChange([...selected, column]);
+		clearAddMenu();
+	}
 
-    function changeFocus(column: DataTableColumn<T>) {
-        setFocus(focus != column.field ? column.field : undefined)
-    }
+	function changeFocus(column: DataTableColumn<T>) {
+		setFocus(focus != column.field ? column.field : undefined);
+	}
 
-    function renderSelectListItems(columns: ReadonlyArray<DataTableColumn<T>>) {
-        return columns.map(column => (
-            <ListItemButton key={column.field} onClick={() => add(column)}>
-                <ListItemText primary={column.label}/>
-            </ListItemButton>
-        ));
-    }
+	function renderSelectListItems(columns: ReadonlyArray<DataTableColumn<T>>) {
+		return columns.map(column => (
+			<ListItemButton key={column.field} onClick={() => add(column)}>
+				<ListItemText primary={column.label} />
+			</ListItemButton>
+		));
+	}
 
-    return (
-        <Fragment>
-            <IconButton onClick={setOpen} title={labels("title")}>
-                <TuningIcon/>
-            </IconButton>
-            <Dialog open={open} onClose={clearOpen} fullWidth maxWidth="xs">
-                <DialogTitle>
-                    {labels("title")}
-                </DialogTitle>
-                <IconButton
-                    aria-label={labels("close")}
-                    title={labels("close")}
-                    onClick={clearOpen}
-                    sx={{
-                        position: 'absolute',
-                        right: 8,
-                        top: 8,
-                    }}
-                >
-                    <CloseIcon/>
-                </IconButton>
-                <List sx={{flex: 1, overflowY: "scroll"}}>
-                    {selected.map((column, index) => (
-                        <ListItemButton
-                            key={column.field}
-                            onClick={() => changeFocus(column)}
-                            selected={focus == column.field}
-                        >
-                            <ListItemAvatar>
-                                <Avatar>{index + 1}</Avatar>
-                            </ListItemAvatar>
-                            <ListItemText
-                                primary={column.label}
-                                secondary={column.group}
-                            />
-                        </ListItemButton>
-                    ))}
-                </List>
-                <DialogActions>
-                    <Stack spacing={2} direction="row" justifyContent="space-between" flex={1}>
-                        <IconButton
-                            onClick={setAddMenu}
-                            ref={setAddAnchor}
-                            disabled={available.length == 0}
-                            color="primary"
-                            title={labels("add")}
-                            size="large"
-                        >
-                            <AddCircleIcon fontSize="large"/>
-                        </IconButton>
-                        <Stack spacing={2} direction="row" justifyContent="center">
-                            <IconButton
-                                onClick={moveUp}
-                                disabled={!focus}
-                                color="secondary"
-                                title={labels("moveUp")}
-                                size="large"
-                            >
-                                <MoveUpCircleIcon fontSize="large"/>
-                            </IconButton>
-                            <IconButton
-                                onClick={moveDown}
-                                disabled={!focus}
-                                color="secondary"
-                                title={labels("moveDown")}
-                                size="large"
-                            >
-                                <MoveDownCircleIcon fontSize="large"/>
-                            </IconButton>
-                        </Stack>
-                        <IconButton
-                            onClick={remove}
-                            disabled={!focus}
-                            color="error"
-                            title={labels("remove")}
-                            size="large"
-                        >
-                            <RemoveCircleIcon fontSize="large"/>
-                        </IconButton>
-                    </Stack>
-                </DialogActions>
+	return (
+		<Fragment>
+			<IconButton onClick={setOpen} title={labels("title")}>
+				<TuningIcon />
+			</IconButton>
+			<Dialog open={open} onClose={clearOpen} fullWidth maxWidth="xs">
+				<DialogTitle>
+					{labels("title")}
+				</DialogTitle>
+				<IconButton
+					aria-label={labels("close")}
+					title={labels("close")}
+					onClick={clearOpen}
+					sx={{
+						position: "absolute",
+						right: 8,
+						top: 8,
+					}}
+				>
+					<CloseIcon />
+				</IconButton>
+				<List sx={{flex: 1, overflowY: "scroll"}}>
+					{selected.map((column, index) => (
+						<ListItemButton
+							key={column.field}
+							onClick={() => changeFocus(column)}
+							selected={focus == column.field}
+						>
+							<ListItemAvatar>
+								<Avatar>{index + 1}</Avatar>
+							</ListItemAvatar>
+							<ListItemText
+								primary={column.label}
+								secondary={column.group}
+							/>
+						</ListItemButton>
+					))}
+				</List>
+				<DialogActions>
+					<Stack spacing={2} direction="row" justifyContent="space-between" flex={1}>
+						<IconButton
+							onClick={setAddMenu}
+							ref={setAddAnchor}
+							disabled={available.length == 0}
+							color="primary"
+							title={labels("add")}
+							size="large"
+						>
+							<AddCircleIcon fontSize="large" />
+						</IconButton>
+						<Stack spacing={2} direction="row" justifyContent="center">
+							<IconButton
+								onClick={moveUp}
+								disabled={!focus}
+								color="secondary"
+								title={labels("moveUp")}
+								size="large"
+							>
+								<MoveUpCircleIcon fontSize="large" />
+							</IconButton>
+							<IconButton
+								onClick={moveDown}
+								disabled={!focus}
+								color="secondary"
+								title={labels("moveDown")}
+								size="large"
+							>
+								<MoveDownCircleIcon fontSize="large" />
+							</IconButton>
+						</Stack>
+						<IconButton
+							onClick={remove}
+							disabled={!focus}
+							color="error"
+							title={labels("remove")}
+							size="large"
+						>
+							<RemoveCircleIcon fontSize="large" />
+						</IconButton>
+					</Stack>
+				</DialogActions>
 
-                <Menu
-                    open={addMenu}
-                    anchorEl={addAnchor}
-                    onClose={clearAddMenu}
-                >
-                    {Object.entries(groups).map(([group, columns]) => (
-                        <Fragment>
-                            <ListSubheader>{group}</ListSubheader>
-                            {renderSelectListItems(columns)}
-                        </Fragment>
-                    ))}
-                    {renderSelectListItems(other)}
-                </Menu>
-            </Dialog>
-        </Fragment>
-    )
-}
+				<Menu
+					open={addMenu}
+					anchorEl={addAnchor}
+					onClose={clearAddMenu}
+				>
+					{Object.entries(groups).map(([group, columns]) => (
+						<Fragment>
+							<ListSubheader>{group}</ListSubheader>
+							{renderSelectListItems(columns)}
+						</Fragment>
+					))}
+					{renderSelectListItems(other)}
+				</Menu>
+			</Dialog>
+		</Fragment>
+	);
+}

package/src/data-table/DataTableHeader.tsx

@@ -1,10 +1,10 @@
-import React, {PropsWithChildren} from "react";
 import {Box} from "@mui/material";
+import React, {PropsWithChildren} from "react";
 
 export function DataTableHeader({children}: PropsWithChildren<{}>) {
-    return (
-        <Box p={2} display="flex" alignItems="center">
-            {children}
-        </Box>
-    )
+	return (
+		<Box p={2} display="flex" alignItems="center">
+			{children}
+		</Box>
+	);
 }

package/src/data-table/DataTableToolbar.tsx

@@ -1,10 +1,10 @@
-import React, {PropsWithChildren} from "react";
 import {Stack} from "@mui/material";
+import React, {PropsWithChildren} from "react";
 
 export function DataTableToolbar({children}: PropsWithChildren<{}>) {
-    return (
-        <Stack spacing={1} pl={1} minHeight="52px" direction="row" alignItems="center">
-            {children}
-        </Stack>
-    )
+	return (
+		<Stack spacing={1} pl={1} minHeight="52px" direction="row" alignItems="center">
+			{children}
+		</Stack>
+	);
 }

package/src/data-table/index.tsx

@@ -1,8 +1,8 @@
 export * from "./DataTable";
-export * from "./useDataTableStorage";
-export * from "./useDataTableColumnStorage";
-export * from "./useSpringPageable";
-export * from "./useSpringPage";
 export * from "./DataTableColumnSettings";
 export * from "./DataTableHeader";
 export * from "./DataTableToolbar";
+export * from "./useDataTableColumnStorage";
+export * from "./useDataTableStorage";
+export * from "./useSpringPage";
+export * from "./useSpringPageable";

package/src/data-table/useDataTableColumnStorage.ts

@@ -1,26 +1,37 @@
-import {useStorage} from "../storage";
 import {useCallback, useMemo} from "react";
-import {DataTableColumn} from "./DataTable";
+import {StorageType, useStorage} from "../storage";
 import {defined} from "../utils";
+import {DataTableColumn} from "./DataTable";
 
-export function useDataTableColumnStorage<T>(key: string, availableColumns: ReadonlyArray<DataTableColumn<T>>) {
-
-    const defaultColumns = useMemo(() => availableColumns
-        .filter(c => c.default)
-        .map(c => c.field), [availableColumns]);
+/**
+ * Hook for persisting DataTable column visibility to browser storage.
+ *
+ * @param key - Unique storage key for column settings
+ * @param availableColumns - All available columns for this DataTable
+ * @param storageType - Optional storage type ('local' or 'session'). Defaults to 'local'.
+ */
+export function useDataTableColumnStorage<T>(
+	key: string,
+	availableColumns: ReadonlyArray<DataTableColumn<T>>,
+	storageType?: StorageType,
+) {
+	const defaultColumns = useMemo(() =>
+		availableColumns
+			.filter(c => c.default)
+			.map(c => c.field), [availableColumns]);
 
-    const [storage, setStorage] = useStorage(key, defaultColumns);
+	const [storage, setStorage] = useStorage(key, defaultColumns, storageType);
 
-    const columns = storage
-        .map(c => availableColumns.find(a => a.field == c))
-        .filter(defined);
+	const columns = storage
+		.map(c => availableColumns.find(a => a.field == c))
+		.filter(defined);
 
-    const setColumns = useCallback((columns: ReadonlyArray<DataTableColumn<T>>) => {
-        setStorage(columns.map(c => c.field));
-    }, []);
+	const setColumns = useCallback((columns: ReadonlyArray<DataTableColumn<T>>) => {
+		setStorage(columns.map(c => c.field));
+	}, [setStorage]);
 
-    return {
-        columns,
-        setColumns
-    }
-}
+	return {
+		columns,
+		setColumns,
+	};
+}

package/src/data-table/useDataTableStorage.spec.ts

@@ -0,0 +1,108 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {DataTableStorage, DataTableStorageOptions} from "./useDataTableStorage";
+
+// Test the type guard function logic
+function isDataTableStorageOptions(value: unknown): value is DataTableStorageOptions {
+	return typeof value === "object" && value !== null && ("defaults" in value || "storageType" in value);
+}
+
+describe("useDataTableStorage parameter parsing", () => {
+	describe("isDataTableStorageOptions type guard", () => {
+		test("returns false for undefined", () => {
+			expect(isDataTableStorageOptions(undefined)).toBe(false);
+		});
+
+		test("returns false for null", () => {
+			expect(isDataTableStorageOptions(null)).toBe(false);
+		});
+
+		test("returns false for string (StorageType)", () => {
+			expect(isDataTableStorageOptions("local")).toBe(false);
+			expect(isDataTableStorageOptions("session")).toBe(false);
+		});
+
+		test("returns false for DataTableStorage (backwards compat object)", () => {
+			const defaults: DataTableStorage = {pageSize: 25, pageIndex: 0};
+			expect(isDataTableStorageOptions(defaults)).toBe(false);
+		});
+
+		test("returns true for object with defaults property", () => {
+			const options: DataTableStorageOptions = {defaults: {pageSize: 25}};
+			expect(isDataTableStorageOptions(options)).toBe(true);
+		});
+
+		test("returns true for object with storageType property", () => {
+			const options: DataTableStorageOptions = {storageType: "session"};
+			expect(isDataTableStorageOptions(options)).toBe(true);
+		});
+
+		test("returns true for object with both defaults and storageType", () => {
+			const options: DataTableStorageOptions = {
+				defaults: {pageSize: 25},
+				storageType: "session",
+			};
+			expect(isDataTableStorageOptions(options)).toBe(true);
+		});
+	});
+
+	describe("parameter normalization logic", () => {
+		// Test the normalization logic that's used in useDataTableStorage
+		function normalizeParams(optionsOrDefaultsOrType?: string | DataTableStorage | DataTableStorageOptions) {
+			let defaults: DataTableStorage = {};
+			let storageType: string | undefined;
+
+			if (typeof optionsOrDefaultsOrType === "string") {
+				storageType = optionsOrDefaultsOrType;
+			} else if (isDataTableStorageOptions(optionsOrDefaultsOrType)) {
+				defaults = optionsOrDefaultsOrType.defaults ?? {};
+				storageType = optionsOrDefaultsOrType.storageType;
+			} else if (optionsOrDefaultsOrType) {
+				defaults = optionsOrDefaultsOrType;
+			}
+
+			return {defaults, storageType};
+		}
+
+		test("no second parameter returns empty defaults and undefined storageType", () => {
+			const result = normalizeParams();
+			expect(result.defaults).toEqual({});
+			expect(result.storageType).toBeUndefined();
+		});
+
+		test("string parameter is treated as storageType", () => {
+			const result = normalizeParams("session");
+			expect(result.defaults).toEqual({});
+			expect(result.storageType).toBe("session");
+		});
+
+		test("DataTableStorage object is treated as defaults (backwards compat)", () => {
+			const result = normalizeParams({pageSize: 25, sortField: "name"});
+			expect(result.defaults).toEqual({pageSize: 25, sortField: "name"});
+			expect(result.storageType).toBeUndefined();
+		});
+
+		test("DataTableStorageOptions with defaults only", () => {
+			const result = normalizeParams({defaults: {pageSize: 50}});
+			expect(result.defaults).toEqual({pageSize: 50});
+			expect(result.storageType).toBeUndefined();
+		});
+
+		test("DataTableStorageOptions with storageType only", () => {
+			const result = normalizeParams({storageType: "session"});
+			expect(result.defaults).toEqual({});
+			expect(result.storageType).toBe("session");
+		});
+
+		test("DataTableStorageOptions with both defaults and storageType", () => {
+			const result = normalizeParams({
+				defaults: {pageSize: 100, sortDirection: "desc"},
+				storageType: "local",
+			});
+			expect(result.defaults).toEqual({pageSize: 100, sortDirection: "desc"});
+			expect(result.storageType).toBe("local");
+		});
+	});
+});