@coveord/plasma-mantine 52.19.0 → 52.20.0

package/dist/esm/components/table/layouts/RowLayout.js

@@ -15,11 +15,16 @@ import { Th } from "../table-header/Th";
 import { TableLoading } from "../table-loading/TableLoading";
 import useStyles from "./RowLayout.styles";
 var RowLayoutHeader = function(param) {
-    var table = param.table;
+    var table = param.table, classNames = param.classNames, styles = param.styles, unstyled = param.unstyled;
     var _useTable = useTable(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
     var classes = useStyles({
         disableRowSelection: disableRowSelection,
         multiRowSelectionEnabled: multiRowSelectionEnabled
+    }, {
+        name: "RowLayout",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
     }).classes;
     var headers = table.getHeaderGroups().map(function(headerGroup) {
         return /*#__PURE__*/ _jsx("tr", {

package/dist/esm/components/table/layouts/RowLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout} from '../Table.types';\nimport {useTable} from '../TableContext';\nimport {TableCollapsibleColumn} from '../table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from '../table-column/TableSelectableColumn';\nimport {Th} from '../table-header/Th';\nimport {TableLoading} from '../table-loading/TableLoading';\nimport useStyles from './RowLayout.styles';\nimport {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({\n    table,\n    doubleClickAction,\n    getExpandChildren,\n    loading,\n    keepSelection,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const shouldKeepSelection = keepSelection && isSelected;\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const columnSizing = {\n                            ...defaultColumnSizing,\n                            size: cell.column.columnDef.size,\n                            minSize: cell.column.columnDef.minSize,\n                            maxSize: cell.column.columnDef.maxSize,\n                        };\n\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                style={{\n                                    width: columnSizing.size ?? 'auto',\n                                    minWidth: columnSizing.minSize,\n                                    maxWidth: columnSizing.maxSize,\n                                }}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","flexRender","defaultColumnSizing","Fragment","useTable","TableCollapsibleColumn","TableSelectableColumn","Th","TableLoading","useStyles","RowLayoutHeader","table","multiRowSelectionEnabled","disableRowSelection","classes","headers","getHeaderGroups","map","headerGroup","tr","className","headerColumns","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","classNames","styles","unstyled","others","name","cx","toggleCollapsible","el","cell","children","length","querySelector","click","rows","getRowModel","row","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","onDoubleClick","rowSelected","rowUnselectable","aria-selected","data-testid","getVisibleCells","columnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","rowCollapsibleButtonCell","visible","getContext","colSpan","getAllColumns","padding","in","getIsExpanded","collapsible","px","py","RowLayout","icon","Header","Body"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout} from '../Table.types';\nimport {useTable} from '../TableContext';\nimport {TableCollapsibleColumn} from '../table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from '../table-column/TableSelectableColumn';\nimport {Th} from '../table-header/Th';\nimport {TableLoading} from '../table-loading/TableLoading';\nimport useStyles from './RowLayout.styles';\nimport {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182\n\nconst RowLayoutHeader = <T,>({table, classNames, styles, unstyled}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({\n    table,\n    doubleClickAction,\n    getExpandChildren,\n    loading,\n    keepSelection,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const shouldKeepSelection = keepSelection && isSelected;\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const columnSizing = {\n                            ...defaultColumnSizing,\n                            size: cell.column.columnDef.size,\n                            minSize: cell.column.columnDef.minSize,\n                            maxSize: cell.column.columnDef.maxSize,\n                        };\n\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                style={{\n                                    width: columnSizing.size ?? 'auto',\n                                    minWidth: columnSizing.minSize,\n                                    maxWidth: columnSizing.maxSize,\n                                }}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","flexRender","defaultColumnSizing","Fragment","useTable","TableCollapsibleColumn","TableSelectableColumn","Th","TableLoading","useStyles","RowLayoutHeader","table","classNames","styles","unstyled","multiRowSelectionEnabled","disableRowSelection","classes","name","headers","getHeaderGroups","map","headerGroup","tr","className","headerColumns","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","others","cx","toggleCollapsible","el","cell","children","length","querySelector","click","rows","getRowModel","row","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","onDoubleClick","rowSelected","rowUnselectable","aria-selected","data-testid","getVisibleCells","columnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","rowCollapsibleButtonCell","visible","getContext","colSpan","getAllColumns","padding","in","getIsExpanded","collapsible","px","py","RowLayout","icon","Header","Body"],"mappings":"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"}

package/dist/esm/components/table/table-actions/TableActions.styles.js

@@ -1,7 +1,9 @@
 import { createStyles } from "@mantine/core";
 export default createStyles(function(theme) {
     return {
-        root: {},
+        root: {
+            maxWidth: "100%"
+        },
         wrapper: {
             display: "inline-flex"
         }

package/dist/esm/components/table/table-actions/TableActions.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme) => ({\n    root: {},\n    wrapper: {\n        display: 'inline-flex',\n    },\n}));\n"],"names":["createStyles","theme","root","wrapper","display"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAE3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,SAAS;YACLC,SAAS;QACb;IACJ;GAAI"}
+{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme) => ({\n    root: {maxWidth: '100%'},\n    wrapper: {\n        display: 'inline-flex',\n    },\n}));\n"],"names":["createStyles","theme","root","maxWidth","wrapper","display"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAE3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM;YAACC,UAAU;QAAM;QACvBC,SAAS;YACLC,SAAS;QACb;IACJ;GAAI"}

package/dist/esm/hooks/useRowSelection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useRowSelection.ts"],"sourcesContent":["import {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {RowSelectionState, Table, functionalUpdate} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from '../components/table/Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n        additionalRootNodes = [],\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>\n) => {\n    const outsideClickRef = useRef<HTMLDivElement>();\n    useClickOutside(\n        () => {\n            if (!multiRowSelectionEnabled) {\n                clearSelection();\n            }\n        },\n        null,\n        [outsideClickRef.current, ...additionalRootNodes]\n    );\n\n    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.\n    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render\n    useDidUpdate(() => {\n        onRowSelectionChange?.(getSelectedRows());\n    }, [table.getState().rowSelection]);\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const newRowSelection = functionalUpdate(\n                    rowSelectionUpdater,\n                    old['rowSelection']\n                ) as RowSelectionWithData<T>;\n\n                if (isEqual(old['rowSelection'], newRowSelection)) {\n                    return old;\n                }\n\n                const rows = table.getRowModel().rowsById;\n\n                Object.keys(newRowSelection).forEach((rowId) => {\n                    if (newRowSelection[rowId] === true) {\n                        if (!rows[rowId]) {\n                            console.error(\n                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'\n                            );\n                        }\n                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n                    }\n                });\n\n                return {\n                    ...old,\n                    rowSelection: newRowSelection as RowSelectionState,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","useDidUpdate","functionalUpdate","isEqual","useRef","useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","clearSelection","current","getSelectedRows","getState","rowSelection","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","resetRowSelection","values","getSelectedRow"],"mappings":";;;AAAA,SAAQA,eAAe,EAAEC,YAAY,QAAO,iBAAiB;AAC7D,SAAkCC,gBAAgB,QAAO,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;AAEtC,SAAQC,MAAM,QAAO,QAAQ;AAG7B,OAAO,IAAMC,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBN;IACxBJ,gBACI;QACI,IAAI,CAACQ,0BAA0B;YAC3BG;QACJ;IACJ,GACA,MACA;QAACD,gBAAgBE,OAAO;KAAyB,CAAjD,OAA0B,qBAAGH;IAGjC,0JAA0J;IAC1J,yJAAyJ;IACzJR,aAAa;YACTM;SAAAA,wBAAAA,kCAAAA,4CAAAA,sBAAuBM;IAC3B,GAAG;QAACP,MAAMQ,QAAQ,GAAGC,YAAY;KAAC;IAElCT,MAAMU,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHV,sBAAsB,SAACW;gBACnBZ,MAAMa,QAAQ,CAAC,SAACC;oBACZ,IAAMC,kBAAkBnB,iBACpBgB,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIjB,QAAQiB,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAME,OAAOhB,MAAMiB,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC;wBAClC,IAAIP,eAAe,CAACO,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;oBAEA,OAAO,wCACAF;wBACHL,cAAcM;;gBAEtB;YACJ;;;IAGJ,IAAMV,iBAAiB;QACnBL,MAAM0B,iBAAiB,CAAC;IAC5B;IAEA,IAAMnB,kBAAkB;eAAMY,OAAOQ,MAAM,CAAC,AAAC3B,MAAMQ,QAAQ,GAAqBC,YAAY;;QAE/DF;IAA7B,IAAMqB,iBAAiB;eAAMrB,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACF,gBAAAA;QAAgBuB,gBAAAA;QAAgBrB,iBAAAA;QAAiBH,iBAAAA;IAAe;AAC5E,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useRowSelection.ts"],"sourcesContent":["import {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {RowSelectionState, Table, functionalUpdate} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from '../components/table/Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n        additionalRootNodes = [],\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>,\n) => {\n    const outsideClickRef = useRef<HTMLDivElement>();\n    useClickOutside(\n        () => {\n            if (!multiRowSelectionEnabled) {\n                clearSelection();\n            }\n        },\n        null,\n        [outsideClickRef.current, ...additionalRootNodes],\n    );\n\n    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.\n    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render\n    useDidUpdate(() => {\n        onRowSelectionChange?.(getSelectedRows());\n    }, [table.getState().rowSelection]);\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const newRowSelection = functionalUpdate(\n                    rowSelectionUpdater,\n                    old['rowSelection'],\n                ) as RowSelectionWithData<T>;\n\n                if (isEqual(old['rowSelection'], newRowSelection)) {\n                    return old;\n                }\n\n                const rows = table.getRowModel().rowsById;\n\n                Object.keys(newRowSelection).forEach((rowId) => {\n                    if (newRowSelection[rowId] === true) {\n                        if (!rows[rowId]) {\n                            console.error(\n                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',\n                            );\n                        }\n                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n                    }\n                });\n\n                return {\n                    ...old,\n                    rowSelection: newRowSelection as RowSelectionState,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","useDidUpdate","functionalUpdate","isEqual","useRef","useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","clearSelection","current","getSelectedRows","getState","rowSelection","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","resetRowSelection","values","getSelectedRow"],"mappings":";;;AAAA,SAAQA,eAAe,EAAEC,YAAY,QAAO,iBAAiB;AAC7D,SAAkCC,gBAAgB,QAAO,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;AAEtC,SAAQC,MAAM,QAAO,QAAQ;AAG7B,OAAO,IAAMC,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBN;IACxBJ,gBACI;QACI,IAAI,CAACQ,0BAA0B;YAC3BG;QACJ;IACJ,GACA,MACA;QAACD,gBAAgBE,OAAO;KAAyB,CAAjD,OAA0B,qBAAGH;IAGjC,0JAA0J;IAC1J,yJAAyJ;IACzJR,aAAa;YACTM;SAAAA,wBAAAA,kCAAAA,4CAAAA,sBAAuBM;IAC3B,GAAG;QAACP,MAAMQ,QAAQ,GAAGC,YAAY;KAAC;IAElCT,MAAMU,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHV,sBAAsB,SAACW;gBACnBZ,MAAMa,QAAQ,CAAC,SAACC;oBACZ,IAAMC,kBAAkBnB,iBACpBgB,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIjB,QAAQiB,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAME,OAAOhB,MAAMiB,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC;wBAClC,IAAIP,eAAe,CAACO,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;oBAEA,OAAO,wCACAF;wBACHL,cAAcM;;gBAEtB;YACJ;;;IAGJ,IAAMV,iBAAiB;QACnBL,MAAM0B,iBAAiB,CAAC;IAC5B;IAEA,IAAMnB,kBAAkB;eAAMY,OAAOQ,MAAM,CAAC,AAAC3B,MAAMQ,QAAQ,GAAqBC,YAAY;;QAE/DF;IAA7B,IAAMqB,iBAAiB;eAAMrB,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACF,gBAAAA;QAAgBuB,gBAAAA;QAAgBrB,iBAAAA;QAAiBH,iBAAAA;IAAe;AAC5E,EAAE"}

package/dist/esm/index.d.ts

@@ -10,7 +10,7 @@ export * from './components';
 export * from '@mantine/form';
 export { type NotificationProps } from '@mantine/notifications';
 export { Pagination } from '@mantine/core';
-export { Header, type HeaderProps, Table, type TableProps, type TableState, type InitialTableState, ActionIcon, type ActionIconProps, Button, type ButtonProps, Menu, type MenuItemProps, CopyToClipboard, type CopyToClipboardProps, } from './components';
+export { BrowserPreview, Header, type HeaderProps, Table, type TableProps, type TableState, type InitialTableState, ActionIcon, type ActionIconProps, Button, type ButtonProps, Menu, type MenuItemProps, CopyToClipboard, type CopyToClipboardProps, } from './components';
 export { useForm, createFormContext } from './form';
 export * from './theme';
 declare module '@mantine/core' {

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElD,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAC/D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAO,EACH,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,UAAU,EACV,KAAK,eAAe,EACpB,MAAM,EACN,KAAK,WAAW,EAChB,IAAI,EACJ,KAAK,aAAa,EAClB,eAAe,EACf,KAAK,oBAAoB,GAC5B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAElD,cAAc,SAAS,CAAC;AAExB,OAAO,QAAQ,eAAe,CAAC;IAC3B,UAAiB,0BAA0B;QAEvC,MAAM,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;KAChF;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElD,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAC,iBAAiB,EAAC,MAAM,yBAAyB,CAAC;AAC/D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAC,KAAK,iBAAiB,EAAC,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,OAAO,EACH,cAAc,EACd,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,EACL,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,UAAU,EACV,KAAK,eAAe,EACpB,MAAM,EACN,KAAK,WAAW,EAChB,IAAI,EACJ,KAAK,aAAa,EAClB,eAAe,EACf,KAAK,oBAAoB,GAC5B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,QAAQ,CAAC;AAElD,cAAc,SAAS,CAAC;AAExB,OAAO,QAAQ,eAAe,CAAC;IAC3B,UAAiB,0BAA0B;QAEvC,MAAM,EAAE,MAAM,CAAC,MAAM,OAAO,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;KAChF;CACJ"}

package/dist/esm/index.js

@@ -7,7 +7,7 @@ export * from "./components";
 export * from "@mantine/form";
 export { Pagination } from "@mantine/core";
 // explicitly overriding mantine components
-export { Header, Table, ActionIcon, Button, Menu, CopyToClipboard } from "./components";
+export { BrowserPreview, Header, Table, ActionIcon, Button, Menu, CopyToClipboard } from "./components";
 export { useForm, createFormContext } from "./form";
 export * from "./theme";
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/notifications';\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport * from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\nexport {type NotificationProps} from '@mantine/notifications';\nexport {Pagination} from '@mantine/core';\n// explicitly overriding mantine components\nexport {\n    Header,\n    type HeaderProps,\n    Table,\n    type TableProps,\n    type TableState,\n    type InitialTableState,\n    ActionIcon,\n    type ActionIconProps,\n    Button,\n    type ButtonProps,\n    Menu,\n    type MenuItemProps,\n    CopyToClipboard,\n    type CopyToClipboardProps,\n} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["Pagination","Header","Table","ActionIcon","Button","Menu","CopyToClipboard","useForm","createFormContext"],"mappings":"AAIA,cAAc,yBAAyB;AACvC,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAE9B,SAAQA,UAAU,QAAO,gBAAgB;AACzC,2CAA2C;AAC3C,SACIC,MAAM,EAENC,KAAK,EAILC,UAAU,EAEVC,MAAM,EAENC,IAAI,EAEJC,eAAe,QAEZ,eAAe;AACtB,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["import {Tuple} from '@mantine/core';\n\nimport {PlasmaColors} from './theme/PlasmaColors';\n\nexport * from '@mantine/notifications';\nexport * from '@mantine/carousel';\nexport * from '@mantine/core';\nexport type {FormValidateInput} from '@mantine/form/lib/types';\nexport * from '@mantine/hooks';\nexport * from '@tanstack/table-core';\nexport * from './components';\nexport * from '@mantine/form';\nexport {type NotificationProps} from '@mantine/notifications';\nexport {Pagination} from '@mantine/core';\n// explicitly overriding mantine components\nexport {\n    BrowserPreview,\n    Header,\n    type HeaderProps,\n    Table,\n    type TableProps,\n    type TableState,\n    type InitialTableState,\n    ActionIcon,\n    type ActionIconProps,\n    Button,\n    type ButtonProps,\n    Menu,\n    type MenuItemProps,\n    CopyToClipboard,\n    type CopyToClipboardProps,\n} from './components';\nexport {useForm, createFormContext} from './form';\n\nexport * from './theme';\n\ndeclare module '@mantine/core' {\n    export interface MantineThemeColorsOverride {\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;\n    }\n}\n"],"names":["Pagination","BrowserPreview","Header","Table","ActionIcon","Button","Menu","CopyToClipboard","useForm","createFormContext"],"mappings":"AAIA,cAAc,yBAAyB;AACvC,cAAc,oBAAoB;AAClC,cAAc,gBAAgB;AAE9B,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAE9B,SAAQA,UAAU,QAAO,gBAAgB;AACzC,2CAA2C;AAC3C,SACIC,cAAc,EACdC,MAAM,EAENC,KAAK,EAILC,UAAU,EAEVC,MAAM,EAENC,IAAI,EAEJC,eAAe,QAEZ,eAAe;AACtB,SAAQC,OAAO,EAAEC,iBAAiB,QAAO,SAAS;AAElD,cAAc,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.19.0",
+  "version": "52.20.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/components/browser-preview/BrowserPreview.styles.ts

@@ -0,0 +1,14 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {
+        boxShadow: theme.shadows.md,
+        borderRadius: theme.defaultRadius,
+        border: '1px solid',
+        borderColor: theme.colors.gray[3],
+        flex: 1,
+    },
+    header: {boxShadow: theme.shadows.xs, borderRadius: `${theme.defaultRadius}px ${theme.defaultRadius}px 0 0`},
+    content: {overflow: 'auto', flexGrow: 1},
+    infoIcon: {color: theme.colors.gray[5]},
+}));

package/src/components/browser-preview/BrowserPreview.tsx

@@ -0,0 +1,72 @@
+import {InfoSize16Px} from '@coveord/plasma-react-icons';
+import {
+    Box,
+    ColorSwatch,
+    DefaultProps,
+    Flex,
+    Group,
+    Selectors,
+    Stack,
+    Text,
+    Title,
+    Tooltip,
+    useMantineTheme,
+} from '@mantine/core';
+import {PropsWithChildren} from 'react';
+import useStyles from './BrowserPreview.styles';
+
+export interface BrowserPreviewProps extends DefaultProps<Selectors<typeof useStyles>> {
+    /**
+     * Text to display in a tooltip in the header.
+     *
+     */
+    headerTooltip?: string;
+    /**
+     * Custom title to be displayed at the center of the header.
+     */
+    title?: string;
+}
+
+export const BrowserPreview = ({
+    children,
+    headerTooltip,
+    title,
+    // Style props
+    classNames,
+    className,
+    styles,
+    unstyled,
+    ...others
+}: PropsWithChildren<BrowserPreviewProps>) => {
+    const theme = useMantineTheme();
+    const {classes, cx} = useStyles(null, {classNames, name: 'BrowserPreview', styles, unstyled});
+    return (
+        <Stack className={cx(classes.root, className)} spacing={0} maw={544} mih={0} {...others}>
+            <Box>
+                <Group className={classes.header} position="apart" px="sm" py="xs" bg="gray.1" noWrap>
+                    <Group spacing="xs" noWrap>
+                        <Title color="gray.6" order={4}>
+                            Preview
+                        </Title>
+                        {!!headerTooltip && (
+                            <Tooltip label={headerTooltip} position="right" maw={400}>
+                                <InfoSize16Px height={16} className={classes.infoIcon} />
+                            </Tooltip>
+                        )}
+                    </Group>
+                    <Text lineClamp={1} color="gray.6">
+                        {title}
+                    </Text>
+                    <Group spacing="xs" noWrap>
+                        <ColorSwatch color={theme.colors.gray[3]} />
+                        <ColorSwatch color={theme.colors.gray[3]} />
+                        <ColorSwatch color={theme.colors.gray[3]} />
+                    </Group>
+                </Group>
+            </Box>
+            <Flex className={classes.content} p="xl" direction="column">
+                {children}
+            </Flex>
+        </Stack>
+    );
+};

package/src/components/browser-preview/__tests__/BrowserPreview.spec.tsx

@@ -0,0 +1,35 @@
+import userEvent from '@testing-library/user-event';
+import {render, screen, waitFor} from '@testing-library/react';
+import {BrowserPreview} from '../BrowserPreview';
+
+describe('BrowserPreview', () => {
+    it('shows no tooltip when none specified', async () => {
+        render(<BrowserPreview />);
+
+        expect(screen.queryByRole('img', {name: /info/i})).not.toBeInTheDocument();
+    });
+    it('renders the specified text as the header tooltip content', async () => {
+        const user = userEvent.setup();
+        const headerTooltip = 'This is a custom description.';
+
+        render(<BrowserPreview headerTooltip={headerTooltip} />);
+
+        await waitFor(() => screen.findByRole('img', {name: /info/i}));
+        await user.hover(screen.getByRole('img', {name: /info/i}));
+
+        expect(await screen.findByText(headerTooltip)).toBeVisible();
+    });
+
+    it('renders the specific title when provided', () => {
+        const headerTitle = 'Custom title.';
+        render(<BrowserPreview title={headerTitle} />);
+
+        expect(screen.getByText(/custom title/i)).toBeInTheDocument();
+    });
+
+    it('renders the children', () => {
+        render(<BrowserPreview>This is awesome content</BrowserPreview>);
+
+        expect(screen.getByText(/this is awesome content/i)).toBeInTheDocument();
+    });
+});

package/src/components/browser-preview/index.ts

@@ -0,0 +1 @@
+export * from './BrowserPreview';

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from './blank-slate';
+export * from './browser-preview';
 export * from './code-editor';
 export * from './collection';
 export * from './date-range-picker';

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -34,7 +34,7 @@ export const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> =
 
     if (confirmingId === id) {
         return (
-            <Group spacing="xs">
+            <Group spacing="xs" noWrap>
                 {label}
                 <Button onClick={onClickConfirm} color="red">
                     {confirmLabel}

package/src/components/table/Table.styles.ts

@@ -21,6 +21,8 @@ const useStyles = createStyles<string>((theme) => ({
             borderBottom: `1px solid ${theme.colors.gray[3]}`,
         },
     },
+
+    body: {},
 }));
 
 export const TableComponentsOrder = {

package/src/components/table/Table.tsx

@@ -49,6 +49,9 @@ export const Table: TableType = <T,>({
     disableRowSelection,
     onRowSelectionChange,
     additionalRootNodes,
+    classNames,
+    styles,
+    unstyled,
     options = {},
 }: TableProps<T>) => {
     const convertedChildren = Children.toArray(children) as ReactElement[];
@@ -65,7 +68,7 @@ export const Table: TableType = <T,>({
             layout: initialState?.layout ?? layouts[0].name,
         },
     });
-    const {classes} = useStyles();
+    const {classes} = useStyles(null, {name: 'PlasmaTable', classNames, styles, unstyled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {
@@ -184,7 +187,7 @@ export const Table: TableType = <T,>({
                                     loading={loading}
                                 />
                             </thead>
-                            <tbody>
+                            <tbody className={classes.body}>
                                 {hasRows ? (
                                     <Layout.Body
                                         table={table}

package/src/components/table/Table.types.ts

@@ -1,4 +1,5 @@
 import {Icon} from '@coveord/plasma-react-icons';
+import {DefaultProps, Selectors} from '@mantine/core';
 import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
@@ -24,6 +25,7 @@ import {TableLoading} from './table-loading/TableLoading';
 import {TablePagination} from './table-pagination/TablePagination';
 import {TablePerPage} from './table-per-page/TablePerPage';
 import {TablePredicate} from './table-predicate/TablePredicate';
+import useStyles from './Table.styles';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -143,7 +145,9 @@ export type TableContextType<TData> = {
     layouts: TableLayout[];
 };
 
-export interface TableProps<T> {
+type TableStylesNames = Selectors<typeof useStyles>;
+
+export interface TableProps<T> extends DefaultProps<TableStylesNames> {
     /**
      * Data to display in the table
      */

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

@@ -12,9 +12,12 @@ import {TableLoading} from '../table-loading/TableLoading';
 import useStyles from './RowLayout.styles';
 import {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182
 
-const RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {
+const RowLayoutHeader = <T,>({table, classNames, styles, unstyled}: TableLayoutProps<T>) => {
     const {multiRowSelectionEnabled, disableRowSelection} = useTable();
-    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});
+    const {classes} = useStyles(
+        {disableRowSelection, multiRowSelectionEnabled},
+        {name: 'RowLayout', classNames, styles, unstyled},
+    );
     const headers = table.getHeaderGroups().map((headerGroup) => (
         <tr key={headerGroup.id} className={classes.headerColumns}>
             {headerGroup.headers.map((columnHeader) => (

package/src/components/table/table-actions/TableActions.styles.ts

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

package/src/hooks/useRowSelection.ts

@@ -11,7 +11,7 @@ export const useRowSelection = <T>(
         onRowSelectionChange,
         multiRowSelectionEnabled,
         additionalRootNodes = [],
-    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>
+    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>,
 ) => {
     const outsideClickRef = useRef<HTMLDivElement>();
     useClickOutside(
@@ -21,7 +21,7 @@ export const useRowSelection = <T>(
             }
         },
         null,
-        [outsideClickRef.current, ...additionalRootNodes]
+        [outsideClickRef.current, ...additionalRootNodes],
     );
 
     // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.
@@ -36,7 +36,7 @@ export const useRowSelection = <T>(
             table.setState((old) => {
                 const newRowSelection = functionalUpdate(
                     rowSelectionUpdater,
-                    old['rowSelection']
+                    old['rowSelection'],
                 ) as RowSelectionWithData<T>;
 
                 if (isEqual(old['rowSelection'], newRowSelection)) {
@@ -49,7 +49,7 @@ export const useRowSelection = <T>(
                     if (newRowSelection[rowId] === true) {
                         if (!rows[rowId]) {
                             console.error(
-                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'
+                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',
                             );
                         }
                         newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);

package/src/index.ts

@@ -14,6 +14,7 @@ export {type NotificationProps} from '@mantine/notifications';
 export {Pagination} from '@mantine/core';
 // explicitly overriding mantine components
 export {
+    BrowserPreview,
     Header,
     type HeaderProps,
     Table,