@coveord/plasma-mantine 58.0.1 → 59.0.0

package/src/components/Badge/Badge.tsx

@@ -4,41 +4,44 @@ import {
     BadgeProps,
     BadgeStylesNames,
     BadgeVariant,
+    ElementProps,
     Badge as MantineBadge,
+    PolymorphicComponentProps,
     polymorphicFactory,
     PolymorphicFactory,
-    PolymorphicComponentProps,
     useComputedColorScheme,
 } from '@mantine/core';
 import {forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes} from 'react';
 
 export interface SemanticBadgeProps
-    extends Pick<
-        BadgeProps,
-        | 'm'
-        | 'mt'
-        | 'mb'
-        | 'ml'
-        | 'mr'
-        | 'ms'
-        | 'me'
-        | 'mx'
-        | 'my'
-        | 'miw'
-        | 'maw'
-        | 'pos'
-        | 'top'
-        | 'left'
-        | 'right'
-        | 'bottom'
-        | 'inset'
-        | 'display'
-        | 'flex'
-        | 'leftSection'
-        | 'rightSection'
-        | 'fullWidth'
-        | 'circle'
-    > {
+    extends
+        Pick<
+            BadgeProps,
+            | 'm'
+            | 'mt'
+            | 'mb'
+            | 'ml'
+            | 'mr'
+            | 'ms'
+            | 'me'
+            | 'mx'
+            | 'my'
+            | 'miw'
+            | 'maw'
+            | 'pos'
+            | 'top'
+            | 'left'
+            | 'right'
+            | 'bottom'
+            | 'inset'
+            | 'display'
+            | 'flex'
+            | 'leftSection'
+            | 'rightSection'
+            | 'fullWidth'
+            | 'circle'
+        >,
+        ElementProps<'div'> {
     /**
      * The size of the badge.
      * @default 'small'

package/src/components/Header/HeaderRight/HeaderRight.tsx

@@ -19,7 +19,7 @@ export type HeaderRightFactory = Factory<{
 }>;
 
 const defaultProps: Partial<HeaderRightProps> = {
-    gap: 'sm',
+    gap: 'xs',
 };
 
 export const HeaderRight = factory<HeaderRightFactory>((_props, ref) => {

package/src/components/LastUpdated/LastUpdated.tsx

@@ -1,6 +1,6 @@
 import {BoxProps, factory, Factory, Group, GroupProps, StylesApiProps, Text, useProps, useStyles} from '@mantine/core';
 import dayjs from 'dayjs';
-import React from 'react';
+import {ForwardedRef} from 'react';
 
 export type LastUpdatedStylesNames = 'root' | 'label';
 
@@ -35,43 +35,41 @@ const defaultProps: Partial<LastUpdatedProps> = {
     formatter: (time) => dayjs(time).format('h:mm:ss A'),
 };
 
-export const LastUpdated = factory<LastUpdatedFactory>(
-    (props: LastUpdatedProps, ref: React.ForwardedRef<HTMLDivElement>) => {
-        const {formatter, label, time, classNames, className, styles, style, vars, unstyled, ...others} = useProps(
-            'PlasmaLastUpdated',
-            defaultProps as Partial<LastUpdatedProps>,
-            props,
-        );
+export const LastUpdated = factory<LastUpdatedFactory>((props: LastUpdatedProps, ref: ForwardedRef<HTMLDivElement>) => {
+    const {formatter, label, time, classNames, className, styles, style, vars, unstyled, ...others} = useProps(
+        'PlasmaLastUpdated',
+        defaultProps as Partial<LastUpdatedProps>,
+        props,
+    );
 
-        const resolvedTime = time ?? dayjs().valueOf();
+    const resolvedTime = time ?? dayjs().valueOf();
 
-        const getStyles = useStyles<LastUpdatedFactory>({
-            name: 'LastUpdated',
-            classes: {},
-            props,
-            className,
-            style,
-            classNames,
-            styles,
-            unstyled,
-            vars,
-        });
-        const stylesApiProps = {classNames, styles};
+    const getStyles = useStyles<LastUpdatedFactory>({
+        name: 'LastUpdated',
+        classes: {},
+        props,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+    });
+    const stylesApiProps = {classNames, styles};
 
-        return (
-            <Group
-                justify={props.justify}
-                ref={ref}
-                {...getStyles('root', {className, style, ...stylesApiProps})}
-                {...others}
-            >
-                <Text size="xs" {...getStyles('label', {className, style, ...stylesApiProps})}>
-                    {label}
-                    <span role="timer">{formatter(resolvedTime)}</span>
-                </Text>
-            </Group>
-        );
-    },
-);
+    return (
+        <Group
+            justify={props.justify}
+            ref={ref}
+            {...getStyles('root', {className, style, ...stylesApiProps})}
+            {...others}
+        >
+            <Text size="xs" {...getStyles('label', {className, style, ...stylesApiProps})}>
+                {label}
+                <span role="timer">{formatter(resolvedTime)}</span>
+            </Text>
+        </Group>
+    );
+});
 
 LastUpdated.displayName = 'LastUpdated';

package/src/components/Modal/ModalFooter.module.css

@@ -2,6 +2,7 @@
     .root {
         margin: calc(-1 * var(--mb-padding));
         margin-top: var(--mb-padding);
+        bottom: calc(-1 * var(--mb-padding));
     }
 }
 

package/src/components/Prompt/Prompt.tsx

@@ -1,5 +1,4 @@
 import {
-    Box,
     factory,
     Factory,
     ModalRootProps,
@@ -9,7 +8,16 @@ import {
     useProps,
     useStyles,
 } from '@mantine/core';
-import {Children, ComponentProps, ComponentType, forwardRef, FunctionComponent, ReactElement, ReactNode} from 'react';
+import {
+    Children,
+    ComponentProps,
+    ComponentType,
+    forwardRef,
+    ForwardRefExoticComponent,
+    ReactElement,
+    ReactNode,
+    RefAttributes,
+} from 'react';
 import {InfoToken} from '../InfoToken/InfoToken.js';
 import {Modal} from '../Modal/Modal.js';
 import {PromptContextProvider} from './Prompt.context.js';
@@ -114,9 +122,9 @@ const _Prompt = factory<PromptFactory>((_props, ref) => {
                         <Modal.CloseButton {...getStyles('close', stylesApiProps)} />
                     </Modal.Header>
                     <Modal.Body {...getStyles('body', stylesApiProps)}>
-                        <Box {...getStyles('inner', stylesApiProps)}>{otherChildren}</Box>
+                        {otherChildren}
+                        {footers}
                     </Modal.Body>
-                    {footers}
                 </Modal.Content>
             </Modal.Root>
         </PromptContextProvider>
@@ -124,12 +132,12 @@ const _Prompt = factory<PromptFactory>((_props, ref) => {
 });
 _Prompt.displayName = 'Prompt';
 
-type PromptCompoundComponent = ((props: PromptProps) => ReactElement) & Omit<FunctionComponent<PromptProps>, never>;
+type PromptCompoundComponent = ForwardRefExoticComponent<PromptProps & RefAttributes<HTMLDivElement>>;
 
 const PromptFooter: ComponentType<ComponentProps<typeof Modal.Footer>> = (props) => <Modal.Footer {...props} />;
 PromptFooter.displayName = 'Prompt.Footer';
 
-const createPromptCompound = (variant: PromptVariant, displayName: string): PromptCompoundComponent => {
+const createPromptCompound = (variant: PromptVariant, displayName: string) => {
     const Component = forwardRef<HTMLDivElement, PromptProps>((props, ref) => (
         <_Prompt ref={ref} {...props} variant={variant} />
     ));

package/src/components/Table/__tests__/use-persisted-column-visibility.spec.ts

@@ -0,0 +1,203 @@
+import {act, renderHook} from '@test-utils';
+import {CURRENT_STORAGE_VERSION, STORAGE_KEY} from '../../../utils/local-storage.js';
+import {usePersistedColumnVisibility} from '../use-persisted-column-visibility.js';
+import {useTable} from '../use-table.js';
+
+const setStoredVisibility = (tableId: string, value: unknown) => {
+    const existing = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? 'null') ?? {
+        'storage-version': CURRENT_STORAGE_VERSION,
+        storage: {},
+    };
+    if (!existing.storage.table) {
+        existing.storage.table = {};
+    }
+    if (!existing.storage.table[tableId]) {
+        existing.storage.table[tableId] = {};
+    }
+    existing.storage.table[tableId].columnVisibility = value;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(existing));
+};
+
+const getStoredVisibility = (tableId: string): unknown => {
+    const data = JSON.parse(localStorage.getItem(STORAGE_KEY)!);
+    return data?.storage?.table?.[tableId]?.columnVisibility ?? null;
+};
+
+describe('usePersistedColumnVisibility', () => {
+    afterEach(() => {
+        localStorage.clear();
+    });
+
+    describe('without tableId', () => {
+        it('returns the default visibility and does not persist', () => {
+            const defaults = {col1: true, col2: false};
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity));
+
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: false});
+
+            act(() => {
+                result.current.persistColumnVisibility({col1: false});
+            });
+
+            expect(localStorage.length).toBe(0);
+        });
+    });
+
+    describe('with tableId', () => {
+        const tableId = 'test-table';
+
+        it('returns the default visibility when nothing is stored', () => {
+            const defaults = {col1: true, col2: true, col3: false};
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity, tableId));
+
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: true, col3: false});
+        });
+
+        it('merges stored visibility with defaults', () => {
+            setStoredVisibility(tableId, {col2: false});
+            const defaults = {col1: true, col2: true, col3: false};
+
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity, tableId));
+
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: false, col3: false});
+        });
+
+        it('ignores stored keys not present in defaults and non-boolean values', () => {
+            setStoredVisibility(tableId, {unknown: true, col1: 'yes', col2: false});
+            const defaults = {col1: true, col2: true};
+
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity, tableId));
+
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: false});
+        });
+
+        it('caps visible columns to maxSelectableColumns from both defaults and storage', () => {
+            setStoredVisibility(tableId, {col1: true, col2: true, col3: true});
+            const defaults = {col1: false, col2: false, col3: false};
+
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, 2, tableId));
+
+            const visibleCount = Object.values(result.current.initialColumnVisibility).filter(Boolean).length;
+            expect(visibleCount).toBe(2);
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: true, col3: false});
+        });
+
+        it('persists visibility to localStorage', () => {
+            const defaults = {col1: true, col2: true};
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity, tableId));
+
+            act(() => {
+                result.current.persistColumnVisibility({col1: false, col2: true});
+            });
+
+            expect(getStoredVisibility(tableId)).toEqual({col1: false, col2: true});
+        });
+
+        it('clears invalid stored data and falls back to defaults', () => {
+            localStorage.setItem(STORAGE_KEY, 'not-valid-json{{{');
+            const defaults = {col1: true, col2: false};
+
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity, tableId));
+
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: false});
+            expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+        });
+
+        it.each([
+            ['an array', [true, false]],
+            ['null', null],
+            ['an empty object', {}],
+        ])('falls back to defaults when stored value is %s', (_, storedValue) => {
+            setStoredVisibility(tableId, storedValue);
+            const defaults = {col1: true, col2: false};
+
+            const {result} = renderHook(() => usePersistedColumnVisibility(defaults, Infinity, tableId));
+
+            expect(result.current.initialColumnVisibility).toEqual({col1: true, col2: false});
+        });
+
+        it('skips localStorage when defaultVisibleColumns is empty', () => {
+            setStoredVisibility(tableId, {col1: true});
+
+            const {result} = renderHook(() => usePersistedColumnVisibility({}, Infinity, tableId));
+
+            expect(result.current.initialColumnVisibility).toEqual({});
+
+            act(() => {
+                result.current.persistColumnVisibility({col1: false});
+            });
+
+            expect(getStoredVisibility(tableId)).toEqual({col1: true});
+        });
+    });
+});
+
+describe('useTable column visibility persistence', () => {
+    const tableId = 'integration-table';
+
+    afterEach(() => {
+        localStorage.clear();
+    });
+
+    it('initializes column visibility from localStorage when tableId is provided', () => {
+        setStoredVisibility(tableId, {col1: false, col2: true});
+
+        const {result} = renderHook(() =>
+            useTable({
+                tableId,
+                initialState: {columnVisibility: {col1: true, col2: false}},
+            }),
+        );
+
+        expect(result.current.state.columnVisibility).toEqual({col1: false, col2: true});
+    });
+
+    it('does not read from or write to localStorage when no tableId is provided', () => {
+        const {result} = renderHook(() =>
+            useTable({
+                initialState: {columnVisibility: {col1: true, col2: true}},
+            }),
+        );
+
+        expect(result.current.state.columnVisibility).toEqual({col1: true, col2: true});
+
+        act(() => {
+            result.current.setColumnVisibility({col1: false});
+        });
+
+        expect(result.current.state.columnVisibility).toEqual({col1: false});
+        expect(localStorage.length).toBe(0);
+    });
+
+    it('persists to localStorage when setColumnVisibility is called with a value', () => {
+        const {result} = renderHook(() =>
+            useTable({
+                tableId,
+                initialState: {columnVisibility: {col1: true, col2: true}},
+            }),
+        );
+
+        act(() => {
+            result.current.setColumnVisibility({col1: false, col2: true});
+        });
+
+        expect(result.current.state.columnVisibility).toEqual({col1: false, col2: true});
+        expect(getStoredVisibility(tableId)).toEqual({col1: false, col2: true});
+    });
+
+    it('persists to localStorage when setColumnVisibility is called with an updater function', () => {
+        const {result} = renderHook(() =>
+            useTable({
+                tableId,
+                initialState: {columnVisibility: {col1: true, col2: false}},
+            }),
+        );
+
+        act(() => {
+            result.current.setColumnVisibility((prev) => ({...prev, col2: true}));
+        });
+
+        expect(result.current.state.columnVisibility).toEqual({col1: true, col2: true});
+        expect(getStoredVisibility(tableId)).toEqual({col1: true, col2: true});
+    });
+});

package/src/components/Table/use-persisted-column-visibility.ts

@@ -0,0 +1,79 @@
+import {useCallback, useMemo} from 'react';
+import {getStorageItem, setStorageItem} from '../../utils/local-storage.js';
+import type {TableState} from './use-table.js';
+
+type ColumnVisibility = TableState['columnVisibility'];
+
+const storagePath = (tableId: string) => ['table', tableId, 'columnVisibility'] as const;
+
+const capVisibleColumns = (visibility: ColumnVisibility, max: number): ColumnVisibility => {
+    let visibleCount = 0;
+    const result: ColumnVisibility = {};
+    for (const [key, isVisible] of Object.entries(visibility)) {
+        const shouldShow = isVisible && visibleCount < max;
+        result[key] = shouldShow;
+        if (shouldShow) {
+            visibleCount++;
+        }
+    }
+    return result;
+};
+
+const sanitizeFromStorage = (raw: unknown, validColumnIds: Set<string>): ColumnVisibility => {
+    const result: ColumnVisibility = {};
+
+    if (typeof raw !== 'object' || raw === null || Array.isArray(raw)) {
+        return result;
+    }
+
+    for (const [key, value] of Object.entries(raw as Record<string, unknown>)) {
+        if (validColumnIds.has(key) && typeof value === 'boolean') {
+            result[key] = value;
+        }
+    }
+    return result;
+};
+
+/**
+ * Hook that persists column visibility preferences to localStorage.
+ *
+ * @param defaultVisibleColumns - The default visibility map. Its keys define the set of valid column IDs.
+ * Must be a stable reference (e.g. via `useRef`) to avoid re-reading localStorage on every render.
+ * @param maxSelectableColumns - Maximum number of columns that can be visible at the same time.
+ * @param tableId - Unique identifier for the table. When omitted, no persistence occurs.
+ */
+export const usePersistedColumnVisibility = (
+    defaultVisibleColumns: ColumnVisibility,
+    maxSelectableColumns: number,
+    tableId?: string,
+) => {
+    const path = tableId ? storagePath(tableId) : null;
+    const validIds = useMemo(() => new Set(Object.keys(defaultVisibleColumns)), [defaultVisibleColumns]);
+    const hasValidIds = validIds.size > 0;
+
+    const initialColumnVisibility = useMemo((): ColumnVisibility => {
+        if (!path || !hasValidIds) {
+            return defaultVisibleColumns;
+        }
+        const stored = getStorageItem<unknown>([...path]);
+        if (stored !== null) {
+            const sanitized = sanitizeFromStorage(stored, validIds);
+            if (Object.keys(sanitized).length > 0) {
+                return capVisibleColumns({...defaultVisibleColumns, ...sanitized}, maxSelectableColumns);
+            }
+        }
+        return capVisibleColumns(defaultVisibleColumns, maxSelectableColumns);
+    }, [path, validIds, defaultVisibleColumns, maxSelectableColumns]);
+
+    const persistColumnVisibility = useCallback(
+        (visibility: ColumnVisibility) => {
+            if (!path || !hasValidIds) {
+                return;
+            }
+            setStorageItem([...path], visibility);
+        },
+        [path, hasValidIds],
+    );
+
+    return {initialColumnVisibility, persistColumnVisibility};
+};

package/src/components/Table/use-table.ts

@@ -4,6 +4,7 @@ import {type ExpandedState, type PaginationState, type SortingState} from '@tans
 import defaultsDeep from 'lodash.defaultsdeep';
 import {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';
 import {useUrlSyncedState, UseUrlSyncedStateOptions} from '../../hooks/use-url-synced-state.js';
+import {usePersistedColumnVisibility} from './use-persisted-column-visibility.js';
 
 // Create a deeply optional version of another type
 type DeepPartial<T> = {
@@ -191,6 +192,18 @@ export interface UseTableOptions<TData = unknown> {
      * @default false
      */
     syncWithUrl?: boolean;
+    /**
+     * Unique identifier for the table. When provided, column visibility preferences are persisted to localStorage.
+     */
+    tableId?: string;
+    /**
+     * Maximum number of columns that can be visible when restoring persisted visibility from localStorage.
+     * This only affects the initial column visibility resolved on mount when `tableId` is set.
+     * It does not enforce a runtime limit on `setColumnVisibility` — use `TableColumnsSelector` for UI enforcement.
+     *
+     * @default Infinity
+     */
+    maxSelectableColumns?: number;
 }
 
 const defaultOptions: UseTableOptions = {
@@ -317,7 +330,9 @@ const COLUMN_VISIBILITY_SERIALIZATION = serialization<'columnVisibility'>({
 
 export const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {
     const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;
-    const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;
+    const [initialState] = useState(
+        () => defaultsDeep({}, userOptions.initialState, defaultState) as TableState<TData>,
+    );
     /**
      * The `useUrlSyncedState` hook defaults to synchronize, but the table wants to default to not synchronize,
      * so always pass the sync option as a resolved boolean value.
@@ -355,12 +370,30 @@ export const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): Table
         initialState: initialState.dateRange,
         sync,
     });
-    const [columnVisibility, setColumnVisibility] = useUrlSyncedState<TableState<TData>['columnVisibility']>({
+
+    const {initialColumnVisibility, persistColumnVisibility} = usePersistedColumnVisibility(
+        initialState.columnVisibility,
+        options.maxSelectableColumns ?? Infinity,
+        options.tableId,
+    );
+
+    const [columnVisibility, _setColumnVisibility] = useUrlSyncedState<TableState<TData>['columnVisibility']>({
         ...COLUMN_VISIBILITY_SERIALIZATION,
-        initialState: initialState.columnVisibility,
+        initialState: initialColumnVisibility,
         sync,
     });
 
+    const setColumnVisibility: typeof _setColumnVisibility = useCallback(
+        (updater) => {
+            _setColumnVisibility((old) => {
+                const newVis = updater instanceof Function ? updater(old) : updater;
+                persistColumnVisibility(newVis);
+                return newVis;
+            });
+        },
+        [_setColumnVisibility, persistColumnVisibility],
+    );
+
     // unsynced
     const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);
     const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(

package/src/styles/Modal.module.css

@@ -4,8 +4,21 @@
 
 .header {
     gap: var(--mantine-spacing-sm);
+    min-height: unset;
 }
 
 .close {
     align-self: flex-start;
 }
+
+.content {
+    overflow-y: initial;
+    display: flex;
+    flex-direction: column;
+}
+
+.body {
+    overflow-y: scroll;
+    border-end-start-radius: var(--modal-radius, var(--mantine-radius-default));
+    border-end-end-radius: var(--modal-radius, var(--mantine-radius-default));
+}