@coveord/plasma-mantine 59.8.0 → 60.0.0

package/src/components/InlineConfirm/InlineConfirmPrompt.tsx

@@ -40,13 +40,13 @@ export type InlineConfirmPromptFactory = Factory<{
     ref: HTMLDivElement;
 }>;
 
-const defaultProps: Partial<InlineConfirmPromptProps> = {
+const defaultProps = {
     label: 'Are you sure?',
     confirm: <Button.DestructivePrimary>Delete</Button.DestructivePrimary>,
     cancel: <Button.Tertiary>Cancel</Button.Tertiary>,
     gap: 'xs',
     wrap: 'nowrap',
-};
+} satisfies Partial<InlineConfirmPromptProps>;
 
 export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, ref) => {
     const {inlineConfirmId, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(

package/src/components/LastUpdated/LastUpdated.tsx

@@ -30,18 +30,17 @@ export type LastUpdatedFactory = Factory<{
     stylesNames: LastUpdatedStylesNames;
 }>;
 
-const defaultProps: Partial<LastUpdatedProps> = {
+const defaultProps = {
     label: 'Last update:',
     formatter: (time) => dayjs(time).format('h:mm:ss A'),
-};
+} satisfies Partial<LastUpdatedProps>;
 
 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>,
+        defaultProps,
         props,
     );
-
     const resolvedTime = time ?? dayjs().valueOf();
 
     const getStyles = useStyles<LastUpdatedFactory>({
@@ -58,12 +57,7 @@ export const LastUpdated = factory<LastUpdatedFactory>((props: LastUpdatedProps,
     const stylesApiProps = {classNames, styles};
 
     return (
-        <Group
-            justify={props.justify}
-            ref={ref}
-            {...getStyles('root', {className, style, ...stylesApiProps})}
-            {...others}
-        >
+        <Group ref={ref} {...getStyles('root', {className, style, ...stylesApiProps})} {...others}>
             <Text size="xs" {...getStyles('label', {className, style, ...stylesApiProps})}>
                 {label}
                 <span role="timer">{formatter(resolvedTime)}</span>

package/src/components/Prompt/Prompt.tsx

@@ -14,6 +14,7 @@ import {
     ComponentType,
     forwardRef,
     ForwardRefExoticComponent,
+    isValidElement,
     ReactElement,
     ReactNode,
     RefAttributes,
@@ -60,10 +61,11 @@ const PromptVariantIconsMapping: Record<PromptVariant, typeof InfoToken.Informat
     information: InfoToken.Information,
 };
 
-const defaultProps: Partial<PromptInternalProps> = {
+const defaultProps = {
     variant: 'information',
     centered: true,
-};
+    size: 'sm',
+} satisfies Partial<PromptInternalProps>;
 
 const _Prompt = factory<PromptFactory>((_props, ref) => {
     const props = useProps('Prompt', defaultProps, _props);
@@ -94,17 +96,22 @@ const _Prompt = factory<PromptFactory>((_props, ref) => {
     const stylesApiProps = {classNames, styles};
 
     const footers: ReactElement[] = [];
-    const otherChildren: ReactElement[] = [];
+    const otherChildren: ReactNode[] = [];
+
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === PromptFooter) {
+            footers.push(child);
+            return;
+        }
 
-    Children.forEach(children, (child: ReactElement) => {
-        (child.type === PromptFooter ? footers : otherChildren).push(child);
+        otherChildren.push(child);
     });
 
     const IconComponent = PromptVariantIconsMapping[variant];
 
     return (
         <PromptContextProvider value={{variant, getStyles}}>
-            <Modal.Root ref={ref} variant="prompt" size="sm" {...others} {...getStyles('root')}>
+            <Modal.Root ref={ref} variant="prompt" {...others} {...getStyles('root')}>
                 <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
                 <Modal.Content {...getStyles('content', stylesApiProps)}>
                     <Modal.Header {...getStyles('header', stylesApiProps)}>

package/src/components/Prompt/PromptCancelButton.tsx

@@ -16,12 +16,12 @@ export type PromptCancelButtonFactory = Factory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<PromptCancelButtonProps> = {};
+const defaultProps = {} satisfies Partial<PromptCancelButtonProps>;
 
 export const PromptCancelButton = factory<PromptCancelButtonFactory>((_props, ref) => {
     const {getStyles} = usePromptContext();
     const props = useProps('PromptCancelButton', defaultProps, _props);
-    const {className, classNames, style, styles, unstyled, vars, ...others} = props;
+    const {className, classNames, style, styles, unstyled: _unstyled, vars: _vars, ...others} = props;
 
     return <Button.Tertiary ref={ref} {...others} {...getStyles('cancel', {style, styles, className, classNames})} />;
 });

package/src/components/Prompt/PromptConfirmButton.tsx

@@ -30,7 +30,7 @@ const COMPONENT_BY_VARIANT: Record<
     critical: Button.DestructivePrimary,
 };
 
-const defaultProps: Partial<PromptConfirmButtonProps> = {};
+const defaultProps = {} satisfies Partial<PromptConfirmButtonProps>;
 
 export const PromptConfirmButton = factory<PromptConfirmButtonFactory>((_props, ref) => {
     const {variant, getStyles} = usePromptContext();
@@ -40,8 +40,8 @@ export const PromptConfirmButton = factory<PromptConfirmButtonFactory>((_props,
         classNames,
         style,
         styles,
-        unstyled,
-        vars,
+        unstyled: _unstyled,
+        vars: _vars,
         disabled,
         disabledTooltip,
         disabledTooltipProps,

package/src/components/RadioCard/RadioCard.tsx

@@ -43,7 +43,7 @@ export type RadioCardProps = MantineRadioCardProps &
         disabledTooltip?: string;
     };
 
-const defaultProps: Partial<RadioCardProps> = {};
+const defaultProps = {} satisfies Partial<RadioCardProps>;
 
 export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
     const {
@@ -57,6 +57,7 @@ export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
         label,
         description,
         disabledTooltip,
+        readOnly,
         ...others
     } = useProps('RadioCard', defaultProps, _props);
     const getStyles = useStyles<RadioCardFactory>({
@@ -75,9 +76,9 @@ export const RadioCard = factory<RadioCardFactory>((_props, ref) => {
             <Radio.Card
                 ref={ref}
                 disabled={disabled}
-                readOnly={_props.readOnly}
                 {...getStyles('card', {className, style, classNames, styles})}
                 {...others}
+                aria-readonly={readOnly}
             >
                 <Radio.Indicator disabled={disabled} {...getStyles('indicator', {classNames, styles})} />
                 <Stack {...getStyles('container', {classNames, styles})}>

package/src/components/StatusToken/StatusToken.tsx

@@ -13,10 +13,10 @@ import {
 } from '@mantine/core';
 
 import Circle from './icons/circle.svg?raw';
+import Info from './icons/info.svg?raw';
 import Ring from './icons/ring.svg?raw';
 import Square from './icons/square.svg?raw';
 import Triangle from './icons/triangle.svg?raw';
-import Info from './icons/info.svg?raw';
 import classes from './StatusToken.module.css';
 
 export type StatusTokenFactory = Factory<{
@@ -49,7 +49,7 @@ export interface StatusTokenProps extends BoxProps, StylesApiProps<StatusTokenFa
     variant?: StatusTokenVariant;
 }
 
-const defaultProps: Partial<StatusTokenProps> = {size: 'lg', variant: 'info'};
+const defaultProps = {size: 'lg', variant: 'info'} satisfies Partial<StatusTokenProps>;
 
 const resolveThemeColorFromVariant = (variant: StatusTokenVariant, theme: MantineTheme): string => {
     switch (variant) {
@@ -93,11 +93,13 @@ const resolveIconSrcFromVariant = (variant: StatusTokenVariant): string => {
 };
 
 const varsResolver = createVarsResolver<StatusTokenFactory>((theme, {variant, size}) => {
-    const color = resolveThemeColorFromVariant(variant, theme);
+    const resolvedVariant = variant ?? defaultProps.variant;
+    const resolvedSize = size ?? defaultProps.size;
+    const color = resolveThemeColorFromVariant(resolvedVariant, theme);
     return {
         root: {
             '--status-token-color': color,
-            '--status-token-size': getSize(resolveSize(size), 'status-token-size'),
+            '--status-token-size': getSize(resolveSize(resolvedSize), 'status-token-size'),
         },
     };
 });
@@ -115,7 +117,7 @@ const statusTokenLabels: Record<StatusTokenVariant, string> = {
 
 export const StatusToken: ReturnType<typeof polymorphicFactory<StatusTokenFactory>> =
     polymorphicFactory<StatusTokenFactory>((props, ref) => {
-        const {variant, vars, size, className, style, unstyled, styles, classNames, ...others} = useProps(
+        const {variant, vars, className, style, unstyled, styles, classNames, ...others} = useProps(
             'StatusToken',
             defaultProps,
             props,

package/src/components/StickyFooter/StickyFooter.tsx

@@ -32,14 +32,25 @@ export type StickyFooterFactory = Factory<{
     stylesNames: StickyFooterStylesNames;
 }>;
 
-const defaultProps: Partial<StickyFooterProps> = {
+const defaultProps = {
     gap: 'xs',
     justify: 'flex-end',
-};
+} satisfies Partial<StickyFooterProps>;
 
 export const StickyFooter = factory<StickyFooterFactory>((props, ref) => {
-    const {borderTop, justify, gap, children, className, classNames, style, styles, unstyled, vars, ...others} =
-        useProps('StickyFooter', defaultProps, props);
+    const {
+        borderTop,
+        justify,
+        gap,
+        children,
+        className,
+        classNames,
+        style,
+        styles,
+        unstyled,
+        vars: _vars,
+        ...others
+    } = useProps('StickyFooter', defaultProps, props);
     const getStyles = useStyles<StickyFooterFactory>({
         name: 'StickyFooter',
         classes,

package/src/components/Table/Table.tsx

@@ -4,6 +4,7 @@ import {
     ColumnDef,
     defaultColumnSizing,
     getCoreRowModel,
+    type PaginationState as TanStackPaginationState,
     Row,
     RowSelectionState,
     useReactTable,
@@ -77,14 +78,14 @@ export type PlasmaTableFactory = Factory<{
     };
 }>;
 
-const defaultProps: Partial<TableProps<unknown>> = {
+const defaultProps = {
     layouts: [TableLayouts.Rows as TableLayout],
     layoutProps: {},
     loading: false,
     additionalRootNodes: [],
     options: {},
     getRowActions: () => [],
-};
+} satisfies Partial<TableProps<unknown>>;
 
 export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElement>}) => {
     const {
@@ -110,7 +111,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
         styles,
         unstyled,
         ...others
-    } = useProps('PlasmaTable', defaultProps as TableProps<T>, props);
+    } = useProps('PlasmaTable', defaultProps, props);
 
     const getStyles = useStyles<PlasmaTableFactory>({
         name: 'PlasmaTable',
@@ -134,18 +135,24 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
         state: {
             globalFilter: store.state.globalFilter,
             sorting: store.state.sorting,
-            pagination: store.state.pagination,
+            pagination: {pageIndex: store.state.pagination.page, pageSize: store.state.pagination.perPage},
             columnVisibility: store.state.columnVisibility,
             expanded: store.state.expanded,
         },
         onGlobalFilterChange: store.setGlobalFilter,
         onExpandedChange: store.setExpanded,
         onSortingChange: store.setSorting,
-        onPaginationChange: store.setPagination,
+        onPaginationChange: (updater) => {
+            store.setPagination((prev) => {
+                const tanstackPrev: TanStackPaginationState = {pageIndex: prev.page, pageSize: prev.perPage};
+                const next = updater instanceof Function ? updater(tanstackPrev) : updater;
+                return {page: next.pageIndex, perPage: next.pageSize};
+            });
+        },
         onColumnVisibilityChange: store.setColumnVisibility,
         columns: store.multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,
         getCoreRowModel: getCoreRowModel(),
-        manualPagination: options?.getPaginationRowModel === undefined,
+        manualPagination: options.getPaginationRowModel === undefined,
         enableMultiRowSelection: !!store.multiRowSelectionEnabled,
         getRowId,
         getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row),
@@ -155,7 +162,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
             minSize: defaultColumnSizing.minSize,
             maxSize: defaultColumnSizing.maxSize,
         },
-        rowCount: options?.getFilteredRowModel ? undefined : store.state.totalEntries,
+        rowCount: options.getFilteredRowModel ? undefined : (store.state.totalEntries ?? undefined),
         ...options,
     });
 
@@ -232,12 +239,23 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
     }
 
     const Layout =
-        store.state.layout === null ? layouts[0] : layouts.find(({displayName}) => displayName === store.state.layout);
+        store.state.layout === null
+            ? layouts[0]
+            : (layouts.find(({displayName}) => displayName === store.state.layout) ?? layouts[0]);
     const hasRows = table.getRowModel().rows.length > 0;
 
     return (
         <Box ref={mergedRef} {...others} {...getStyles('root')}>
-            <TableProvider<T> value={{getStyles, getRowActions, store, table, layouts, containerRef}}>
+            <TableProvider<T>
+                value={{
+                    getStyles,
+                    getRowActions,
+                    store,
+                    table,
+                    layouts,
+                    containerRef,
+                }}
+            >
                 <Layout>
                     {store.isVacant && !store.isFiltered ? (
                         noData

package/src/components/Table/__tests__/TableFilter.spec.tsx

@@ -35,7 +35,7 @@ describe('Table.Filter', () => {
     it('goes back to the first page when changing the filter', async () => {
         const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
         const Fixture = () => {
-            const store = useTable<RowData>({initialState: {pagination: {pageIndex: 1}, totalEntries: 52}});
+            const store = useTable<RowData>({initialState: {pagination: {page: 1}, totalEntries: 52}});
             return (
                 <Table store={store} data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
                     <Table.Header>

package/src/components/Table/__tests__/TablePagination.spec.tsx

@@ -18,12 +18,12 @@ describe('Table.Pagination', () => {
         }
     });
 
-    it('calculates the number of pages based on the pageSize and the total number of entries', () => {
+    it('calculates the number of pages based on the perPage and the total number of entries', () => {
         const data = [{name: 'fruit'}, {name: 'vegetable'}];
         const Fixture = () => {
             const store = useTable<RowData>({
                 initialState: {
-                    pagination: {pageSize: 1},
+                    pagination: {perPage: 1},
                     totalEntries: 3,
                 },
             });
@@ -56,7 +56,7 @@ describe('Table.Pagination', () => {
             {name: 'dairy'},
         ];
         const Fixture = () => {
-            const store = useTable<RowData>({initialState: {pagination: {pageSize: 3}}});
+            const store = useTable<RowData>({initialState: {pagination: {perPage: 3}}});
 
             return (
                 <Table
@@ -104,7 +104,7 @@ describe('Table.Pagination', () => {
         const onChangePage = vi.fn();
         const data = [{name: 'fruit'}, {name: 'vegetable'}];
         const Fixture = () => {
-            const store = useTable<RowData>({initialState: {pagination: {pageSize: 1}}});
+            const store = useTable<RowData>({initialState: {pagination: {perPage: 1}}});
             return (
                 <Table store={store} data={data} columns={columns}>
                     <Table.Footer>
@@ -147,7 +147,7 @@ describe('Table.Pagination', () => {
         const Fixture = () => {
             const store = useTable<RowData>({
                 initialState: {
-                    pagination: {pageSize: 1, pageIndex: 2},
+                    pagination: {perPage: 1, page: 2},
                     totalEntries: 3,
                 },
             });
@@ -231,7 +231,7 @@ describe('Table.Pagination', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({
                     initialState: {
-                        pagination: {pageSize: 1, pageIndex: 0},
+                        pagination: {perPage: 1, page: 0},
                         totalEntries: 3,
                     },
                     syncWithUrl: true,
@@ -255,7 +255,7 @@ describe('Table.Pagination', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({
                     initialState: {
-                        pagination: {pageSize: 1, pageIndex: 0},
+                        pagination: {perPage: 1, page: 0},
                         totalEntries: 3,
                     },
                     syncWithUrl: true,

package/src/components/Table/__tests__/TablePerPage.spec.tsx

@@ -30,7 +30,7 @@ describe('Table.PerPage', () => {
     it('displays the values', () => {
         const data = [{name: 'fruit'}, {name: 'vegetable'}];
         const Fixture = () => {
-            const store = useTable<RowData>({initialState: {pagination: {pageSize: 2}}});
+            const store = useTable<RowData>({initialState: {pagination: {perPage: 2}}});
             return (
                 <Table store={store} data={data} columns={columns}>
                     <Table.Footer>
@@ -55,7 +55,7 @@ describe('Table.PerPage', () => {
         const Fixture = () => {
             const store = useTable<RowData>({
                 initialState: {
-                    pagination: {pageIndex: 1, pageSize: 50},
+                    pagination: {page: 1, perPage: 50},
                     totalEntries: 52,
                 },
             });
@@ -83,7 +83,7 @@ describe('Table.PerPage', () => {
         const Fixture = () => {
             const store = useTable<RowData>({
                 initialState: {
-                    pagination: {pageIndex: 1, pageSize: 50},
+                    pagination: {page: 1, perPage: 50},
                     totalEntries: 52,
                 },
             });
@@ -128,13 +128,13 @@ describe('Table.PerPage', () => {
             window.history.replaceState(null, '', '/');
         });
 
-        it('sets the current page size in the url using the parameter "pageSize"', async () => {
+        it('sets the current page size in the url using the parameter "perPage"', async () => {
             const data = [{name: 'fruit'}, {name: 'vegetable'}];
             const user = userEvent.setup();
             const Fixture = () => {
                 const store = useTable<RowData>({
                     initialState: {
-                        pagination: {pageIndex: 0, pageSize: 50},
+                        pagination: {page: 0, perPage: 50},
                         totalEntries: 52,
                     },
                     syncWithUrl: true,
@@ -150,16 +150,16 @@ describe('Table.PerPage', () => {
             };
             render(<Fixture />);
             await user.click(screen.getByRole('radio', {name: '100'}));
-            expect(window.location.search).toBe('?pageSize=100');
+            expect(window.location.search).toBe('?perPage=100');
         });
 
-        it('determines the initial pageSize from the url', async () => {
-            window.history.replaceState(null, '', '?pageSize=100');
+        it('determines the initial perPage from the url', async () => {
+            window.history.replaceState(null, '', '?perPage=100');
             const data = [{name: 'fruit'}, {name: 'vegetable'}];
             const Fixture = () => {
                 const store = useTable<RowData>({
                     initialState: {
-                        pagination: {pageIndex: 0, pageSize: 50},
+                        pagination: {page: 0, perPage: 50},
                         totalEntries: 52,
                     },
                     syncWithUrl: true,

package/src/components/Table/__tests__/TablePredicate.spec.tsx

@@ -19,7 +19,7 @@ describe('Table.Predicate', () => {
         const user = userEvent.setup();
         const data = [{name: 'fruit'}, {name: 'vegetable'}];
         const Fixture = () => {
-            const store = useTable<RowData>({initialState: {pagination: {pageIndex: 1}, totalEntries: 52}});
+            const store = useTable<RowData>({initialState: {pagination: {page: 1}, totalEntries: 52}});
             return (
                 <Table store={store} data={data} columns={columns}>
                     <Table.Header>

package/src/components/Table/layouts/row-layout/RowLayout.tsx

@@ -19,7 +19,7 @@ export type RowLayoutFactory = Factory<{
     stylesNames: RowLayoutStylesNames;
     staticComponents: TableLayout;
 }>;
-const defaultProps: Partial<RowLayoutProps> = {};
+const defaultProps = {} satisfies Partial<RowLayoutProps>;
 
 export const RowLayout = ((props: RowLayoutProps) => {
     const {children, styles, classNames, unstyled} = useProps('PlasmaRowLayout', defaultProps, props);

package/src/components/Table/layouts/row-layout/RowLayoutBody.tsx

@@ -22,7 +22,7 @@ export type RowLayoutBodyFactory = Factory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<RowLayoutBodyProps<unknown>> = {};
+const defaultProps = {} satisfies Partial<RowLayoutBodyProps<unknown>>;
 
 export const RowLayoutBody = <T,>(props: RowLayoutBodyProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {
     const ctx = useRowLayout();
@@ -36,11 +36,11 @@ export const RowLayoutBody = <T,>(props: RowLayoutBodyProps<T> & {ref?: Forwarde
         style,
         getRowAttributes,
         ...others
-    } = useProps('RowLayoutBody', defaultProps as RowLayoutBodyProps<T>, props);
+    } = useProps('RowLayoutBody', defaultProps, props);
     const {table, store} = useTableContext<T>();
     const toggleCollapsible = (el: HTMLTableRowElement) => {
         const cell = el.children[el.children.length - 1] as HTMLTableCellElement;
-        cell.querySelector('button').click();
+        cell.querySelector('button')?.click();
     };
 
     const rows = table.getRowModel()?.rows.map((row) => {

package/src/components/Table/layouts/row-layout/RowLayoutHeader.tsx

@@ -19,7 +19,7 @@ type RowLayoutHeaderFactory = Factory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<RowLayoutHeaderProps<unknown>> = {};
+const defaultProps = {} satisfies Partial<RowLayoutHeaderProps<unknown>>;
 
 export const RowLayoutHeader = <T,>(props: RowLayoutHeaderProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {
     const ctx = useRowLayout();
@@ -34,7 +34,7 @@ export const RowLayoutHeader = <T,>(props: RowLayoutHeaderProps<T> & {ref?: Forw
         classNames,
         styles,
         ...others
-    } = useProps('RowLayoutHeader', defaultProps as RowLayoutHeaderProps<T>, props);
+    } = useProps('RowLayoutHeader', defaultProps, props);
     const {table, store} = useTableContext<T>();
 
     const headers = table.getHeaderGroups().map((headerGroup) => (

package/src/components/Table/table-actions/TableActionItem.tsx

@@ -30,7 +30,7 @@ type TableActionItemFactory = PolymorphicFactory<{
     compound: true;
 }>;
 
-const defaultProps: Partial<TableActionItemProps> = {};
+const defaultProps = {} satisfies Partial<TableActionItemProps>;
 
 export const TableActionItem = polymorphicFactory<TableActionItemFactory>(
     (props: TableActionItemProps & {component?: any}, ref) => {

package/src/components/Table/table-actions/TableActionsList.tsx

@@ -5,6 +5,7 @@ import {
     CSSProperties,
     ExtendComponent,
     Factory,
+    MantineThemeComponent,
     Menu,
     MenuProps,
     Tooltip,
@@ -53,11 +54,11 @@ type TableActionsListFactory = Factory<{
     variant: 'split' | 'combined';
 }>;
 
-const defaultProps: Partial<TableActionsListProps> = {
+const defaultProps = {
     label: 'More',
     primaryGroupLabel: '',
     icon: <MoreSize16Px height={16} />,
-};
+} satisfies Partial<TableActionsListProps>;
 
 interface ActionsDict {
     $$primary: TableAction[];
@@ -70,7 +71,7 @@ interface ActionGroup {
     actions: ReactNode[];
 }
 
-export const TableActionsList = (props: TableActionsListProps) => {
+export function TableActionsList(props: TableActionsListProps) {
     const {getStyles} = useTableContext();
     const {
         actions,
@@ -81,6 +82,9 @@ export const TableActionsList = (props: TableActionsListProps) => {
         styles,
         vars: _vars,
         variant,
+        withinPortal,
+        opened: controlledOpened,
+        onChange: onMenuChange,
         ...others
     } = useProps('PlasmaTableActionsListColumn', defaultProps, props);
     const [opened, setOpened] = useState(false);
@@ -94,6 +98,7 @@ export const TableActionsList = (props: TableActionsListProps) => {
         if (!newOpened) {
             setOpened(false);
         }
+        onMenuChange?.(newOpened);
     };
 
     const actionsGroups: ActionsDict = actions.reduce<ActionsDict>(
@@ -130,7 +135,7 @@ export const TableActionsList = (props: TableActionsListProps) => {
                 <TableActionProvider value={{primary: true}}>{primaryActions}</TableActionProvider>
                 {secondaryActionGroups.length > 0 ? (
                     <TableActionProvider value={{primary: false}}>
-                        <Menu withinPortal={false} {...others} keepMounted>
+                        <Menu withinPortal={withinPortal ?? false} {...others} keepMounted>
                             <Menu.Target>
                                 <Button.Quaternary
                                     {...getStyles('actionsTarget', {styles, classNames})}
@@ -156,7 +161,7 @@ export const TableActionsList = (props: TableActionsListProps) => {
         <InlineConfirm>
             {confirmPrompts}
             <TableActionProvider value={{primary: false}}>
-                <Menu opened={opened} onChange={onChange} {...others} keepMounted>
+                <Menu opened={controlledOpened ?? opened} onChange={onChange} {...others} keepMounted>
                     <Menu.Target>
                         <Tooltip label={label} {...getStyles('actionsTooltip', {styles, classNames})}>
                             <ActionIcon.Quaternary
@@ -182,15 +187,15 @@ export const TableActionsList = (props: TableActionsListProps) => {
             </TableActionProvider>
         </InlineConfirm>
     );
-};
+}
 
 interface ActionsGroupsMenuItemsProps {
-    styles: Partial<Record<TableActionsListStylesNames, CSSProperties>>;
-    classNames: Partial<Record<TableActionsListStylesNames, string>>;
+    styles?: Partial<Record<TableActionsListStylesNames, CSSProperties>>;
+    classNames?: Partial<Record<TableActionsListStylesNames, string>>;
     actionGroups: ActionGroup[];
 }
 
-const ActionsGroupsMenuItems = ({styles, classNames, actionGroups}: ActionsGroupsMenuItemsProps) => {
+const ActionsGroupsMenuItems = ({styles = {}, classNames = {}, actionGroups}: ActionsGroupsMenuItemsProps) => {
     const {getStyles} = useTableContext();
     return actionGroups.map(({name, actions}, index) => (
         <Box key={name} {...getStyles('actionsGroup', {styles, classNames})}>
@@ -205,4 +210,4 @@ const ActionsGroupsMenuItems = ({styles, classNames, actionGroups}: ActionsGroup
     ));
 };
 
-TableActionsList.extend = (input: ExtendComponent<TableActionsListFactory>) => input;
+TableActionsList.extend = (input: ExtendComponent<TableActionsListFactory>): MantineThemeComponent => input;