@coveord/plasma-mantine 52.26.6 → 52.27.1

package/src/components/table/layouts/RowLayout.tsx

@@ -50,7 +50,7 @@ const RowLayoutBody = <T,>({
         cell.querySelector('button').click();
     };
 
-    const rows = table.getRowModel().rows.map((row) => {
+    const rows = table.getRowModel()?.rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
         const isSelected = !!row.getIsSelected();
         const shouldKeepSelection = keepSelection && isSelected;

package/src/components/table/table-columns-selector/TableColumnsSelector.styles.ts

@@ -0,0 +1,8 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {maxWidth: '100%'},
+    wrapper: {
+        display: 'inline-flex',
+    },
+}));

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

@@ -0,0 +1,78 @@
+import {Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip} from '@mantine/core';
+import {FunctionComponent} from 'react';
+
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TableColumnsSelector.styles';
+import {TableColumnsSelectorProps} from './TableColumnsSelector.types';
+
+const COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];
+
+export const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps> = ({
+    classNames,
+    styles,
+    unstyled,
+    label = 'Edit columns',
+    buttonVariant = 'outline',
+    showVisibleCountLabel = false,
+    nonHideableColumns = [],
+    maxSelectableColumns,
+    footer,
+    limitReachedTooltip = 'You have reached the maximum display limit.',
+    columnNames,
+}) => {
+    const {classes} = useStyles(null, {name: 'TableColumnsSelector', classNames, styles, unstyled});
+    const {getAllColumns} = useTable();
+
+    const columnsToExclude = [...nonHideableColumns, ...COLUMNS_IDS_TO_EXCLUDE];
+
+    const filteredColumns = getAllColumns().filter((column) => !columnsToExclude.includes(column.id));
+
+    const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;
+
+    if (filteredColumns.length <= 0) {
+        return null;
+    }
+
+    return (
+        <Grid.Col span="content" order={TableComponentsOrder.ColumnsSelector} py="sm" className={classes.root}>
+            <Popover withinPortal position="bottom" shadow="md">
+                <Popover.Target>
+                    <Button variant={buttonVariant}>{`${label}${
+                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''
+                    }`}</Button>
+                </Popover.Target>
+                <Popover.Dropdown miw={240}>
+                    <ScrollArea.Autosize mah={154}>
+                        <Stack>
+                            {filteredColumns.map((column) => {
+                                const isDisabled =
+                                    selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();
+                                return (
+                                    <Tooltip label={limitReachedTooltip} disabled={!isDisabled} position="left">
+                                        <div>
+                                            <Checkbox
+                                                key={column.id}
+                                                label={columnNames?.[column.id] || column.id}
+                                                name={column.id}
+                                                checked={column.getIsVisible()}
+                                                disabled={isDisabled}
+                                                onChange={column.getToggleVisibilityHandler()}
+                                            />
+                                        </div>
+                                    </Tooltip>
+                                );
+                            })}
+                        </Stack>
+                    </ScrollArea.Autosize>
+                    {maxSelectableColumns && (
+                        <>
+                            <Divider mb="xs" mt="sm" />
+                            {footer}
+                        </>
+                    )}
+                </Popover.Dropdown>
+            </Popover>
+        </Grid.Col>
+    );
+};

package/src/components/table/table-columns-selector/TableColumnsSelector.types.ts

@@ -0,0 +1,46 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import {ReactNode} from 'react';
+import useStyles from './TableColumnsSelector.styles';
+
+type TableColumnsSelectorStylesNames = Selectors<typeof useStyles>;
+
+export interface TableColumnsSelectorProps extends DefaultProps<TableColumnsSelectorStylesNames> {
+    /**
+     * The label of the button
+     * @default 'Edit columns'
+     */
+    label?: ReactNode;
+    /**
+     * The style variant of the button
+     * @default 'outline'
+     */
+    buttonVariant?: string;
+    /**
+     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.
+     * @default []
+     */
+    nonHideableColumns?: string[];
+    /**
+     * Whether the count of visible columns is shown in the button label.
+     * @default false
+     */
+    showVisibleCountLabel?: boolean;
+    /**
+     * The maximum number of columns that can be selected at the same time.
+     * If defined a footer will render with the remaining number of columns that can be selected.
+     */
+    maxSelectableColumns?: number;
+    /**
+     * A dictionary of column ids and names to use for the checkbox labels.
+     */
+    columnNames: Record<string, string>;
+    /**
+     * The content to display in the footer when maxSelectableColumns is defined.
+     */
+    footer?: ReactNode;
+    /**
+     * The tooltip to display when the user hovers over a disabled checkbox.
+     * @default 'You have reached the maximum display limit.'
+     */
+    limitReachedTooltip?: string;
+}

package/src/theme/Theme.tsx

@@ -26,6 +26,14 @@ export const plasmaTheme: MantineThemeOverride = {
         lg: '32px',
         xl: '40px',
     },
+    globalStyles: (theme) => ({
+        body: {
+            ...theme.fn.fontStyles(),
+            fontSize: theme.fontSizes.sm,
+            lineHeight: theme.lineHeight,
+            fontWeight: 300,
+        },
+    }),
     primaryColor: 'action',
     headings: {
         fontFamily: 'canada-type-gibson, sans-serif',