@coveord/plasma-mantine 56.10.0 → 56.12.0

package/src/components/Table/__tests__/{TableColumnsSelectorHeader.spec.tsx → TableColumnsSelector.spec.tsx}

@@ -21,7 +21,7 @@ const getBaseColumns = (): Array<ColumnDef<RowData>> => [
     TableActionsColumn as ColumnDef<RowData>,
 ];
 
-describe('TableColumnsSelectorHeader', () => {
+describe('TableColumnsSelector', () => {
     it('renders the column selector button in the actions column header when rowConfigurable is true', () => {
         const Fixture = () => {
             const store = useTable<RowData>();
@@ -269,7 +269,8 @@ describe('TableColumnsSelectorHeader', () => {
 
             await user.click(screen.getByRole('button', {name: 'settings'}));
 
-            expect(await screen.findByText('You can display up to 5 columns.')).toBeVisible();
+            await screen.findByRole('checkbox', {name: 'Name'});
+            expect(screen.getByText('You can display up to 5 columns.')).toBeInTheDocument();
         });
 
         it('does not render a footer when maxSelectableColumns is not set', async () => {

package/src/components/Table/table-columns-selector/TableColumnsSelector.tsx

@@ -1,5 +1,6 @@
 import {IconSettings} from '@coveord/plasma-react-icons';
-import {Checkbox, Combobox, Text, Tooltip, useCombobox} from '@mantine/core';
+import {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';
+import {useDisclosure} from '@mantine/hooks';
 import {flexRender, Header, Table} from '@tanstack/react-table';
 import {ActionIcon} from '../../ActionIcon/ActionIcon';
 
@@ -47,12 +48,7 @@ export const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelecto
         ...options,
     };
 
-    const combobox = useCombobox({
-        onDropdownClose: () => {
-            combobox.resetSelectedOption();
-        },
-        onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),
-    });
+    const [opened, {toggle, close}] = useDisclosure(false);
 
     const allColumns = table.getAllLeafColumns();
     const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);
@@ -77,59 +73,53 @@ export const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelecto
         return {alwaysVisible, isDisabled, isVisible};
     };
 
-    const handleOptionClick = (columnId: string) => {
-        const column = filteredColumns.find((col) => col.id === columnId);
-        if (column) {
-            const {isDisabled} = getColumnState(column);
-            if (!isDisabled) {
-                column.toggleVisibility();
-            }
-        }
-    };
-
     const columnOptions = filteredColumns.map((column) => {
         const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);
 
         return (
-            <Combobox.Option value={column.id} key={column.id} disabled={isDisabled} active={isVisible}>
-                <Tooltip
-                    label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
-                    disabled={!isDisabled}
-                    position="left"
-                >
-                    <div>
-                        <Checkbox
-                            checked={isVisible}
-                            label={flexRender(column.columnDef.header, {
-                                table,
-                                column,
-                                header: {column} as Header<unknown, unknown>,
-                            })}
-                            disabled={isDisabled}
-                        />
-                    </div>
-                </Tooltip>
-            </Combobox.Option>
+            <Tooltip
+                label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}
+                disabled={!isDisabled}
+                position="left"
+                key={column.id}
+            >
+                <div>
+                    <Checkbox
+                        label={flexRender(column.columnDef.header, {
+                            table,
+                            column,
+                            header: {column} as Header<unknown, unknown>,
+                        })}
+                        name={column.id}
+                        checked={isVisible}
+                        disabled={isDisabled}
+                        onChange={column.getToggleVisibilityHandler()}
+                    />
+                </div>
+            </Tooltip>
         );
     });
 
     return (
-        <Combobox store={combobox} position="bottom-end" shadow="md" onOptionSubmit={handleOptionClick}>
-            <Combobox.Target>
-                <ActionIcon.Tertiary onClick={() => combobox.toggleDropdown()} aria-label="settings">
+        <Popover opened={opened} onClose={close} position="bottom-end" shadow="md">
+            <Popover.Target>
+                <ActionIcon.Tertiary onClick={toggle} aria-label="settings">
                     <IconSettings height={16} />
                 </ActionIcon.Tertiary>
-            </Combobox.Target>
-            <Combobox.Dropdown miw={270}>
-                <Combobox.Options>{columnOptions}</Combobox.Options>
+            </Popover.Target>
+            <Popover.Dropdown miw={270} pb="xs">
+                <ScrollArea.Autosize mah={200} type="auto">
+                    <Stack gap="xs">{columnOptions}</Stack>
+                </ScrollArea.Autosize>
                 {effectiveMaxColumns && (
-                    <Combobox.Footer>
+                    <>
+                        <Divider my="xs" mx="-sm" />
                         <Text size="sm" c="dimmed">
                             {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}
                         </Text>
-                    </Combobox.Footer>
+                    </>
                 )}
-            </Combobox.Dropdown>
-        </Combobox>
+            </Popover.Dropdown>
+        </Popover>
     );
 };

package/src/components/Tabs/Tabs.ts

@@ -1 +1,8 @@
+import {Tabs} from '@mantine/core';
+
+Tabs.displayName = 'Tabs';
+Tabs.List.displayName = 'Tabs.List';
+Tabs.Tab.displayName = 'Tabs.Tab';
+Tabs.Panel.displayName = 'Tabs.Panel';
+
 export {Tabs, type TabsFactory, type TabsProps} from '@mantine/core';

package/src/components/Tooltip/Tooltip.ts

@@ -1 +1,5 @@
+import {Tooltip} from '@mantine/core';
+
+Tooltip.displayName = 'Tooltip';
+
 export {Tooltip, type TooltipFactory, type TooltipProps} from '@mantine/core';