@coveord/plasma-mantine 52.27.4 → 53.0.1

package/dist/esm/components/table/layouts/{RowLayout.js → row-layout/RowLayoutBody.js}

@@ -1,47 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ListSize16Px } from '@coveord/plasma-react-icons';
-import { Box, Collapse } from '@mantine/core';
+import { Box, Collapse, useProps } from '@mantine/core';
 import { flexRender } from '@tanstack/react-table';
 import { defaultColumnSizing } from '@tanstack/table-core';
 import { Fragment } from 'react';
-import { useTable } from '../TableContext';
-import { TableCollapsibleColumn } from '../table-column/TableCollapsibleColumn';
-import { TableSelectableColumn } from '../table-column/TableSelectableColumn';
-import { Th } from '../table-header/Th';
-import { TableLoading } from '../table-loading/TableLoading';
-import useStyles from './RowLayout.styles';
-const RowLayoutHeader = ({ table, classNames, styles, unstyled })=>{
+import { identity } from '../../../../utils';
+import { TableCollapsibleColumn } from '../../table-column/TableCollapsibleColumn';
+import { TableSelectableColumn } from '../../table-column/TableSelectableColumn';
+import { TableLoading } from '../../table-loading/TableLoading';
+import { useTable } from '../../TableContext';
+import { useRowLayout } from './RowLayoutContext';
+const defaultProps = {};
+export const RowLayoutBody = (props)=>{
+    const ctx = useRowLayout();
+    const { table, doubleClickAction, getExpandChildren, loading, keepSelection, classNames, className, styles, style, ...others } = useProps('RowLayoutBody', defaultProps, props);
     const { multiRowSelectionEnabled, disableRowSelection } = useTable();
-    const { classes } = useStyles({
-        disableRowSelection,
-        multiRowSelectionEnabled
-    }, {
-        name: 'RowLayout',
-        classNames,
-        styles,
-        unstyled
-    });
-    const headers = table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx("tr", {
-            className: classes.headerColumns,
-            children: headerGroup.headers.map((columnHeader)=>/*#__PURE__*/ _jsx(Th, {
-                    header: columnHeader
-                }, columnHeader.id))
-        }, headerGroup.id));
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: headers
-    });
-};
-const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, keepSelection, classNames, styles, unstyled, ...others })=>{
-    const { multiRowSelectionEnabled, disableRowSelection } = useTable();
-    const { classes, cx } = useStyles({
-        disableRowSelection,
-        multiRowSelectionEnabled
-    }, {
-        name: 'RowLayout',
-        classNames,
-        styles,
-        unstyled
-    });
     const toggleCollapsible = (el)=>{
         const cell = el.children[el.children.length - 1];
         cell.querySelector('button').click();
@@ -63,12 +35,18 @@ const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, k
                 /*#__PURE__*/ _jsx("tr", {
                     onClick: onClick,
                     onDoubleClick: ()=>doubleClickAction?.(row.original),
-                    className: cx(classes.row, {
-                        [classes.rowSelected]: isSelected,
-                        [classes.rowUnselectable]: disableRowSelection
-                    }),
+                    "data-selectable": !disableRowSelection,
+                    "data-selected": isSelected,
+                    "data-multi-selection": multiRowSelectionEnabled,
                     "aria-selected": isSelected,
                     "data-testid": row.id,
+                    ...ctx.getStyles('row', {
+                        classNames,
+                        className,
+                        styles,
+                        style
+                    }),
+                    ...others,
                     children: row.getVisibleCells().map((cell)=>{
                         const columnSizing = {
                             ...defaultColumnSizing,
@@ -84,14 +62,20 @@ const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, k
                         };
                         return /*#__PURE__*/ _jsx("td", {
                             "data-testid": cell.id,
+                            className: ctx.getStyles('cell', {
+                                classNames,
+                                styles
+                            }).className,
                             style: {
-                                width: columnSizing.size ?? 'auto',
-                                minWidth: columnSizing.minSize,
-                                maxWidth: columnSizing.maxSize
+                                width: `${columnSizing.size}px` ?? 'auto',
+                                minWidth: `${columnSizing.minSize}px`,
+                                maxWidth: `${columnSizing.maxSize}px`,
+                                ...ctx.getStyles('cell', {
+                                    classNames,
+                                    styles
+                                }).style
                             },
-                            className: cx(classes.cell, {
-                                [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id
-                            }),
+                            "data-collapsible-cell": cell.column.id === TableCollapsibleColumn.id,
                             onClick: onCollapsibleCellClick,
                             children: /*#__PURE__*/ _jsx(TableLoading, {
                                 visible: loading,
@@ -101,6 +85,10 @@ const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, k
                     })
                 }),
                 rowChildren ? /*#__PURE__*/ _jsx("tr", {
+                    ...ctx.getStyles('collapsibleRow', {
+                        classNames,
+                        styles
+                    }),
                     children: /*#__PURE__*/ _jsx("td", {
                         colSpan: table.getAllColumns().length,
                         style: {
@@ -109,7 +97,10 @@ const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, k
                         children: /*#__PURE__*/ _jsx(Collapse, {
                             in: row.getIsExpanded(),
                             children: /*#__PURE__*/ _jsx(Box, {
-                                className: classes.collapsible,
+                                ...ctx.getStyles('collapsibleWrapper', {
+                                    classNames,
+                                    styles
+                                }),
                                 px: "sm",
                                 py: "xs",
                                 children: rowChildren
@@ -124,11 +115,6 @@ const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, k
         children: rows
     });
 };
-export const RowLayout = {
-    name: 'Rows',
-    icon: ListSize16Px,
-    Header: RowLayoutHeader,
-    Body: RowLayoutBody
-};
+RowLayoutBody.extend = identity;
 
-//# sourceMappingURL=RowLayout.js.map
+//# sourceMappingURL=RowLayoutBody.js.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutBody.tsx"],"sourcesContent":["import {Box, BoxProps, Collapse, Factory, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {ForwardedRef, Fragment, type MouseEvent} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../../../utils';\nimport {TableCollapsibleColumn} from '../../table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from '../../table-column/TableSelectableColumn';\nimport {TableLoading} from '../../table-loading/TableLoading';\nimport {useTable} from '../../TableContext';\nimport {TableLayoutProps} from '../TableLayouts';\nimport {useRowLayout} from './RowLayoutContext';\n\nexport type RowLayoutBodyStylesNames = 'row' | 'cell' | 'collapsibleRow' | 'collapsibleWrapper';\n\nexport interface RowLayoutBodyProps<T>\n    extends BoxProps,\n        TableLayoutProps<T>,\n        CompoundStylesApiProps<RowLayoutBodyFactory> {}\n\nexport type RowLayoutBodyFactory = Factory<{\n    props: RowLayoutBodyProps<unknown>;\n    ref: HTMLTableRowElement;\n    stylesNames: RowLayoutBodyStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<RowLayoutBodyProps<unknown>> = {};\n\nexport const RowLayoutBody = <T,>(props: RowLayoutBodyProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {\n    const ctx = useRowLayout();\n    const {\n        table,\n        doubleClickAction,\n        getExpandChildren,\n        loading,\n        keepSelection,\n        classNames,\n        className,\n        styles,\n        style,\n        ...others\n    } = useProps('RowLayoutBody', defaultProps as RowLayoutBodyProps<T>, props);\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\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                    data-selectable={!disableRowSelection}\n                    data-selected={isSelected}\n                    data-multi-selection={multiRowSelectionEnabled}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                    {...ctx.getStyles('row', {classNames, className, styles, style})}\n                    {...others}\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\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                className={ctx.getStyles('cell', {classNames, styles}).className}\n                                style={{\n                                    width: `${columnSizing.size}px` ?? 'auto',\n                                    minWidth: `${columnSizing.minSize}px`,\n                                    maxWidth: `${columnSizing.maxSize}px`,\n                                    ...ctx.getStyles('cell', {classNames, styles}).style,\n                                }}\n                                data-collapsible-cell={cell.column.id === TableCollapsibleColumn.id}\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 {...ctx.getStyles('collapsibleRow', {classNames, styles})}>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box {...ctx.getStyles('collapsibleWrapper', {classNames, styles})} 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\nRowLayoutBody.extend = identity as CustomComponentThemeExtend<RowLayoutBodyFactory>;\n"],"names":["Box","Collapse","useProps","flexRender","defaultColumnSizing","Fragment","identity","TableCollapsibleColumn","TableSelectableColumn","TableLoading","useTable","useRowLayout","defaultProps","RowLayoutBody","props","ctx","table","doubleClickAction","getExpandChildren","loading","keepSelection","classNames","className","styles","style","others","multiRowSelectionEnabled","disableRowSelection","toggleCollapsible","el","cell","children","length","querySelector","click","rows","getRowModel","map","row","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","tr","onDoubleClick","data-selectable","data-selected","data-multi-selection","aria-selected","data-testid","id","getStyles","getVisibleCells","columnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","width","minWidth","maxWidth","data-collapsible-cell","visible","getContext","colSpan","getAllColumns","padding","in","getIsExpanded","px","py","extend"],"mappings":"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"}

package/dist/esm/components/table/layouts/row-layout/RowLayoutContext.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { GetStylesApi } from '@mantine/core';
+import { type RowLayoutFactory } from './RowLayout';
+interface RowLayoutContextType {
+    getStyles: GetStylesApi<RowLayoutFactory>;
+}
+export declare const RowLayoutProvider: ({ children, value }: {
+    value: RowLayoutContextType;
+    children: import("react").ReactNode;
+}) => import("react").JSX.Element, useRowLayout: () => RowLayoutContextType;
+export {};
+//# sourceMappingURL=RowLayoutContext.d.ts.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowLayoutContext.d.ts","sourceRoot":"","sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,YAAY,EAAC,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,UAAU,oBAAoB;IAC1B,SAAS,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AACD,eAAO,MAAO,iBAAiB;;;mCAAE,YAAY,4BAE5C,CAAC"}

package/dist/esm/components/table/layouts/row-layout/RowLayoutContext.js

@@ -0,0 +1,4 @@
+import { createSafeContext } from '@mantine/core';
+export const [RowLayoutProvider, useRowLayout] = createSafeContext('RowLayout was not found in the component tree');
+
+//# sourceMappingURL=RowLayoutContext.js.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutContext.tsx"],"sourcesContent":["import {createSafeContext, GetStylesApi} from '@mantine/core';\nimport {type RowLayoutFactory} from './RowLayout';\n\ninterface RowLayoutContextType {\n    getStyles: GetStylesApi<RowLayoutFactory>;\n}\nexport const [RowLayoutProvider, useRowLayout] = createSafeContext<RowLayoutContextType>(\n    'RowLayout was not found in the component tree',\n);\n"],"names":["createSafeContext","RowLayoutProvider","useRowLayout"],"mappings":"AAAA,SAAQA,iBAAiB,QAAqB,gBAAgB;AAM9D,OAAO,MAAM,CAACC,mBAAmBC,aAAa,GAAGF,kBAC7C,iDACF"}

package/dist/esm/components/table/layouts/row-layout/RowLayoutHeader.d.ts

@@ -0,0 +1,21 @@
+import { BoxProps } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+import { ForwardedRef } from 'react';
+import { CustomComponentThemeExtend } from '../../../../utils';
+import { type TableLayoutProps } from '../TableLayouts';
+import { RowLayoutBodyFactory } from './RowLayoutBody';
+export type RowLayoutHeaderStyleNames = 'headerRow';
+export interface RowLayoutHeaderProps<T> extends BoxProps, TableLayoutProps<T>, CompoundStylesApiProps<RowLayoutBodyFactory> {
+}
+export declare const RowLayoutHeader: {
+    <T>(props: RowLayoutHeaderProps<T> & {
+        ref?: ForwardedRef<HTMLTableRowElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    extend: CustomComponentThemeExtend<{
+        props: RowLayoutHeaderProps<unknown>;
+        ref: HTMLTableRowElement;
+        stylesNames: RowLayoutHeaderStyleNames;
+        compound: true;
+    }>;
+};
+//# sourceMappingURL=RowLayoutHeader.d.ts.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowLayoutHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAoB,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAC,YAAY,EAAC,MAAM,OAAO,CAAC;AACnC,OAAO,EAAC,0BAA0B,EAAW,MAAM,mBAAmB,CAAC;AAGvE,OAAO,EAAC,KAAK,gBAAgB,EAAC,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAC,oBAAoB,EAAC,MAAM,iBAAiB,CAAC;AAGrD,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;AAEpD,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACnC,SAAQ,QAAQ,EACZ,gBAAgB,CAAC,CAAC,CAAC,EACnB,sBAAsB,CAAC,oBAAoB,CAAC;CAAG;AAWvD,eAAO,MAAM,eAAe;;cAAgD,aAAa,mBAAmB,CAAC;;;eARlG,qBAAqB,OAAO,CAAC;aAC/B,mBAAmB;qBACX,yBAAyB;kBAC5B,IAAI;;CAyBjB,CAAC"}

package/dist/esm/components/table/layouts/row-layout/RowLayoutHeader.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProps } from '@mantine/core';
+import { identity } from '../../../../utils';
+import { Th } from '../../table-header/Th';
+import { useTable } from '../../TableContext';
+import { useRowLayout } from './RowLayoutContext';
+const defaultProps = {};
+export const RowLayoutHeader = (props)=>{
+    const ctx = useRowLayout();
+    const { table, getExpandChildren, loading, doubleClickAction, className, style, classNames, styles, ...others } = useProps('RowLayoutHeader', defaultProps, props);
+    const { multiRowSelectionEnabled, disableRowSelection } = useTable();
+    const headers = table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx("tr", {
+            "data-selectable": !disableRowSelection,
+            "data-multi-selection": multiRowSelectionEnabled,
+            ...ctx.getStyles('headerRow', {
+                className,
+                classNames,
+                styles,
+                style
+            }),
+            ...others,
+            children: headerGroup.headers.map((columnHeader)=>/*#__PURE__*/ _jsx(Th, {
+                    header: columnHeader
+                }, columnHeader.id))
+        }, headerGroup.id));
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: headers
+    });
+};
+RowLayoutHeader.extend = identity;
+
+//# sourceMappingURL=RowLayoutHeader.js.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutHeader.tsx"],"sourcesContent":["import {BoxProps, Factory, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {ForwardedRef} from 'react';\nimport {CustomComponentThemeExtend, identity} from '../../../../utils';\nimport {Th} from '../../table-header/Th';\nimport {useTable} from '../../TableContext';\nimport {type TableLayoutProps} from '../TableLayouts';\nimport {RowLayoutBodyFactory} from './RowLayoutBody';\nimport {useRowLayout} from './RowLayoutContext';\n\nexport type RowLayoutHeaderStyleNames = 'headerRow';\n\nexport interface RowLayoutHeaderProps<T>\n    extends BoxProps,\n        TableLayoutProps<T>,\n        CompoundStylesApiProps<RowLayoutBodyFactory> {}\n\ntype RowLayoutHeaderFactory = Factory<{\n    props: RowLayoutHeaderProps<unknown>;\n    ref: HTMLTableRowElement;\n    stylesNames: RowLayoutHeaderStyleNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<RowLayoutHeaderProps<unknown>> = {};\n\nexport const RowLayoutHeader = <T,>(props: RowLayoutHeaderProps<T> & {ref?: ForwardedRef<HTMLTableRowElement>}) => {\n    const ctx = useRowLayout();\n    const {table, getExpandChildren, loading, doubleClickAction, className, style, classNames, styles, ...others} =\n        useProps('RowLayoutHeader', defaultProps as RowLayoutHeaderProps<T>, props);\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr\n            key={headerGroup.id}\n            data-selectable={!disableRowSelection}\n            data-multi-selection={multiRowSelectionEnabled}\n            {...ctx.getStyles('headerRow', {className, classNames, styles, style})}\n            {...others}\n        >\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\nRowLayoutHeader.extend = identity as CustomComponentThemeExtend<RowLayoutHeaderFactory>;\n"],"names":["useProps","identity","Th","useTable","useRowLayout","defaultProps","RowLayoutHeader","props","ctx","table","getExpandChildren","loading","doubleClickAction","className","style","classNames","styles","others","multiRowSelectionEnabled","disableRowSelection","headers","getHeaderGroups","map","headerGroup","tr","data-selectable","data-multi-selection","getStyles","columnHeader","header","id","extend"],"mappings":";AAAA,SAA2BA,QAAQ,QAAO,gBAAgB;AAG1D,SAAoCC,QAAQ,QAAO,oBAAoB;AACvE,SAAQC,EAAE,QAAO,wBAAwB;AACzC,SAAQC,QAAQ,QAAO,qBAAqB;AAG5C,SAAQC,YAAY,QAAO,qBAAqB;AAgBhD,MAAMC,eAAuD,CAAC;AAE9D,OAAO,MAAMC,kBAAkB,CAAKC;IAChC,MAAMC,MAAMJ;IACZ,MAAM,EAACK,KAAK,EAAEC,iBAAiB,EAAEC,OAAO,EAAEC,iBAAiB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAE,GAAGC,QAAO,GACzGjB,SAAS,mBAAmBK,cAAyCE;IACzE,MAAM,EAACW,wBAAwB,EAAEC,mBAAmB,EAAC,GAAGhB;IAExD,MAAMiB,UAAUX,MAAMY,eAAe,GAAGC,GAAG,CAAC,CAACC,4BACzC,KAACC;YAEGC,mBAAiB,CAACN;YAClBO,wBAAsBR;YACrB,GAAGV,IAAImB,SAAS,CAAC,aAAa;gBAACd;gBAAWE;gBAAYC;gBAAQF;YAAK,EAAE;YACrE,GAAGG,MAAM;sBAETM,YAAYH,OAAO,CAACE,GAAG,CAAC,CAACM,6BACtB,KAAC1B;oBAAyB2B,QAAQD;mBAAzBA,aAAaE,EAAE;WAPvBP,YAAYO,EAAE;IAW3B,qBAAO;kBAAGV;;AACd,EAAE;AACFd,gBAAgByB,MAAM,GAAG9B"}

package/dist/esm/components/table/layouts/row-layout/RowLayoutIcon.d.ts

@@ -0,0 +1,20 @@
+import { Icon as IconType } from '@coveord/plasma-react-icons';
+import { Factory } from '@mantine/core';
+import { CompoundStylesApiProps } from '@mantine/core/lib/core/styles-api/styles-api.types';
+export type RowLayoutIconStylesNames = 'icon';
+export interface RowLayoutIconProps extends CompoundStylesApiProps<RowLayoutIconFactory> {
+    icon: IconType;
+}
+export type RowLayoutIconFactory = Factory<{
+    props: RowLayoutIconProps;
+    ref: SVGSVGElement;
+    stylesNames: RowLayoutIconStylesNames;
+    compound: true;
+}>;
+export declare const RowLayoutIcon: import("@mantine/core").MantineComponent<{
+    props: RowLayoutIconProps;
+    ref: SVGSVGElement;
+    stylesNames: RowLayoutIconStylesNames;
+    compound: true;
+}>;
+//# sourceMappingURL=RowLayoutIcon.d.ts.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowLayoutIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,IAAI,QAAQ,EAAe,MAAM,6BAA6B,CAAC;AAC3E,OAAO,EAAU,OAAO,EAAW,MAAM,eAAe,CAAC;AACzD,OAAO,EAAC,sBAAsB,EAAC,MAAM,oDAAoD,CAAC;AAG1F,MAAM,MAAM,wBAAwB,GAAG,MAAM,CAAC;AAC9C,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB,CAAC,oBAAoB,CAAC;IACpF,IAAI,EAAE,QAAQ,CAAC;CAClB;AAED,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC;IACvC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,GAAG,EAAE,aAAa,CAAC;IACnB,WAAW,EAAE,wBAAwB,CAAC;IACtC,QAAQ,EAAE,IAAI,CAAC;CAClB,CAAC,CAAC;AAMH,eAAO,MAAM,aAAa;WAVf,kBAAkB;SACpB,aAAa;iBACL,wBAAwB;cAC3B,IAAI;EAYhB,CAAC"}

package/dist/esm/components/table/layouts/row-layout/RowLayoutIcon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListSize16Px } from '@coveord/plasma-react-icons';
+import { factory, useProps } from '@mantine/core';
+import { useRowLayout } from './RowLayoutContext';
+const defaultProps = {
+    icon: ListSize16Px
+};
+export const RowLayoutIcon = factory((props, ref)=>{
+    const ctx = useRowLayout();
+    const { icon: Icon, classNames, styles } = useProps('RowLayoutIcon', defaultProps, props);
+    return /*#__PURE__*/ _jsx(Icon, {
+        ref: ref,
+        ...ctx.getStyles('icon', {
+            styles,
+            classNames
+        })
+    });
+});
+
+//# sourceMappingURL=RowLayoutIcon.js.map

package/dist/esm/components/table/layouts/row-layout/RowLayoutIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/table/layouts/row-layout/RowLayoutIcon.tsx"],"sourcesContent":["import {Icon as IconType, ListSize16Px} from '@coveord/plasma-react-icons';\nimport {factory, Factory, useProps} from '@mantine/core';\nimport {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';\nimport {useRowLayout} from './RowLayoutContext';\n\nexport type RowLayoutIconStylesNames = 'icon';\nexport interface RowLayoutIconProps extends CompoundStylesApiProps<RowLayoutIconFactory> {\n    icon: IconType;\n}\n\nexport type RowLayoutIconFactory = Factory<{\n    props: RowLayoutIconProps;\n    ref: SVGSVGElement;\n    stylesNames: RowLayoutIconStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<RowLayoutIconProps> = {\n    icon: ListSize16Px,\n};\n\nexport const RowLayoutIcon = factory<RowLayoutIconFactory>((props, ref) => {\n    const ctx = useRowLayout();\n    const {icon: Icon, classNames, styles} = useProps('RowLayoutIcon', defaultProps, props);\n\n    return <Icon ref={ref} {...ctx.getStyles('icon', {styles, classNames})} />;\n});\n"],"names":["ListSize16Px","factory","useProps","useRowLayout","defaultProps","icon","RowLayoutIcon","props","ref","ctx","Icon","classNames","styles","getStyles"],"mappings":";AAAA,SAA0BA,YAAY,QAAO,8BAA8B;AAC3E,SAAQC,OAAO,EAAWC,QAAQ,QAAO,gBAAgB;AAEzD,SAAQC,YAAY,QAAO,qBAAqB;AAchD,MAAMC,eAA4C;IAC9CC,MAAML;AACV;AAEA,OAAO,MAAMM,gBAAgBL,QAA8B,CAACM,OAAOC;IAC/D,MAAMC,MAAMN;IACZ,MAAM,EAACE,MAAMK,IAAI,EAAEC,UAAU,EAAEC,MAAM,EAAC,GAAGV,SAAS,iBAAiBE,cAAcG;IAEjF,qBAAO,KAACG;QAAKF,KAAKA;QAAM,GAAGC,IAAII,SAAS,CAAC,QAAQ;YAACD;YAAQD;QAAU,EAAE;;AAC1E,GAAG"}

package/dist/esm/components/table/table-actions/TableActions.d.ts

@@ -1,4 +1,38 @@
-import { ReactElement } from 'react';
-import { TableActionsProps } from './TableActions.types';
-export declare const TableActions: <T>({ children, classNames, styles, unstyled, ...others }: TableActionsProps<T>) => ReactElement;
+import { GridColProps } from '@mantine/core';
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
+import { CustomComponentThemeExtend } from '../../../utils';
+export type TableActionsStylesNames = 'actionsRoot' | 'actionsGroup';
+export interface TableActionsProps<T> extends Omit<GridColProps, 'children'> {
+    /**
+     * Function that return components for the selected row or selected rows when multi row selection is enabled
+     *
+     * @param datum the data of the selected row(s)
+     * @example
+     * <Table.Actions<MyType>>
+     *     {(datum: MyType) => (
+     *         <Button
+     *             component={Link}
+     *             to={`edit/${datum.id}`}
+     *             leftIcon={<EditSize24Px />}
+     *             variant="subtle"
+     *             color="navy.8"
+     *         >
+     *             Edit
+     *         </Button>
+     *     )}
+     * </Table.Actions>
+     */
+    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);
+}
+export declare const TableActions: {
+    <T>(props: TableActionsProps<T> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }): ReactElement;
+    extend: CustomComponentThemeExtend<{
+        props: TableActionsProps<unknown>;
+        ref: HTMLDivElement;
+        stylesNames: TableActionsStylesNames;
+        compound: true;
+    }>;
+};
 //# sourceMappingURL=TableActions.d.ts.map

package/dist/esm/components/table/table-actions/TableActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAY,MAAM,OAAO,CAAC;AAK9C,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AAEvD,eAAO,MAAM,YAAY,sFAMC,YAkBzB,CAAC"}
+{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,YAAY,EAAkB,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAC,0BAA0B,EAAW,MAAM,gBAAgB,CAAC;AAIpE,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG,cAAc,CAAC;AAErE,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC;IACxE;;;;;;;;;;;;;;;;;;OAkBG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;CACpE;AAWD,eAAO,MAAM,YAAY;;cAA6C,aAAa,cAAc,CAAC;QAAI,YAAY;;eARvG,kBAAkB,OAAO,CAAC;aAC5B,cAAc;qBACN,uBAAuB;kBAC1B,IAAI;;CA4BjB,CAAC"}

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

@@ -1,16 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid, Group } from '@mantine/core';
-import { TableComponentsOrder } from '../Table.styles';
-import { useTable } from '../TableContext';
-import useStyles from './TableActions.styles';
-export const TableActions = ({ children, classNames, styles, unstyled, ...others })=>{
-    const { classes } = useStyles(null, {
-        name: 'TableActions',
-        classNames,
-        styles,
-        unstyled
-    });
+import { Grid, Group, useProps } from '@mantine/core';
+import { identity } from '../../../utils';
+import { TableComponentsOrder } from '../Table';
+import { useTable, useTableStyles } from '../TableContext';
+const defaultProps = {};
+export const TableActions = (props)=>{
+    const ctx = useTableStyles();
     const { getSelectedRows, multiRowSelectionEnabled } = useTable();
+    const { style, className, classNames, styles, children, ...others } = useProps('PlasmaTableActions', defaultProps, props);
     const selectedRows = getSelectedRows();
     if (selectedRows.length <= 0) {
         return null;
@@ -18,15 +15,15 @@ export const TableActions = ({ children, classNames, styles, unstyled, ...others
     return /*#__PURE__*/ _jsx(Grid.Col, {
         span: "content",
         order: TableComponentsOrder.Actions,
-        py: "sm",
-        className: classes.root,
+        ...ctx.getStyles('actionsRoot', {}),
         ...others,
         children: /*#__PURE__*/ _jsx(Group, {
-            spacing: "xs",
-            className: classes.wrapper,
+            gap: "xs",
+            ...ctx.getStyles('actionsGroup', {}),
             children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
         })
     });
 };
+TableActions.extend = identity;
 
 //# sourceMappingURL=TableActions.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableActions.styles';\nimport {TableActionsProps} from './TableActions.types';\n\nexport const TableActions = <T,>({\n    children,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableActionsProps<T>): ReactElement => {\n    const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["Grid","Group","TableComponentsOrder","useTable","useStyles","TableActions","children","classNames","styles","unstyled","others","classes","name","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Col","span","order","Actions","py","className","root","spacing","wrapper"],"mappings":";AAAA,SAAQA,IAAI,EAAEC,KAAK,QAAO,gBAAgB;AAG1C,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,wBAAwB;AAG9C,OAAO,MAAMC,eAAe,CAAK,EAC7BC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACR,GAAGC,QACgB;IACnB,MAAM,EAACC,OAAO,EAAC,GAAGP,UAAU,MAAM;QAACQ,MAAM;QAAgBL;QAAYC;QAAQC;IAAQ;IACrF,MAAM,EAACI,eAAe,EAAEC,wBAAwB,EAAC,GAAGX;IACpD,MAAMY,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,KAAChB,KAAKiB,GAAG;QAACC,MAAK;QAAUC,OAAOjB,qBAAqBkB,OAAO;QAAEC,IAAG;QAAKC,WAAWX,QAAQY,IAAI;QAAG,GAAGb,MAAM;kBACrG,cAAA,KAACT;YAAMuB,SAAQ;YAAKF,WAAWX,QAAQc,OAAO;sBACzCX,2BACK,AAACR,SAAsCS,gBACvC,AAACT,SAAqCS,YAAY,CAAC,EAAE;;;AAI3E,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Factory, Grid, GridColProps, Group, useProps} from '@mantine/core';\nimport {ForwardedRef, ReactElement, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableActionsStylesNames = 'actionsRoot' | 'actionsGroup';\n\nexport interface TableActionsProps<T> extends Omit<GridColProps, 'children'> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navy.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\ntype TableActionsFactory = Factory<{\n    props: TableActionsProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: TableActionsStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableActionsProps<unknown>> = {};\n\nexport const TableActions = <T,>(props: TableActionsProps<T> & {ref?: ForwardedRef<HTMLDivElement>}): ReactElement => {\n    const ctx = useTableStyles();\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const {style, className, classNames, styles, children, ...others} = useProps(\n        'PlasmaTableActions',\n        defaultProps,\n        props,\n    );\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} {...ctx.getStyles('actionsRoot', {})} {...others}>\n            <Group gap=\"xs\" {...ctx.getStyles('actionsGroup', {})}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n\nTableActions.extend = identity as CustomComponentThemeExtend<TableActionsFactory>;\n"],"names":["Grid","Group","useProps","identity","TableComponentsOrder","useTable","useTableStyles","defaultProps","TableActions","props","ctx","getSelectedRows","multiRowSelectionEnabled","style","className","classNames","styles","children","others","selectedRows","length","Col","span","order","Actions","getStyles","gap","extend"],"mappings":";AAAA,SAAiBA,IAAI,EAAgBC,KAAK,EAAEC,QAAQ,QAAO,gBAAgB;AAG3E,SAAoCC,QAAQ,QAAO,iBAAiB;AACpE,SAAQC,oBAAoB,QAAO,WAAW;AAC9C,SAAQC,QAAQ,EAAEC,cAAc,QAAO,kBAAkB;AAkCzD,MAAMC,eAAoD,CAAC;AAE3D,OAAO,MAAMC,eAAe,CAAKC;IAC7B,MAAMC,MAAMJ;IACZ,MAAM,EAACK,eAAe,EAAEC,wBAAwB,EAAC,GAAGP;IACpD,MAAM,EAACQ,KAAK,EAAEC,SAAS,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,QAAO,GAAGhB,SAChE,sBACAK,cACAE;IAEJ,MAAMU,eAAeR;IAErB,IAAIQ,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,KAACpB,KAAKqB,GAAG;QAACC,MAAK;QAAUC,OAAOnB,qBAAqBoB,OAAO;QAAG,GAAGd,IAAIe,SAAS,CAAC,eAAe,CAAC,EAAE;QAAG,GAAGP,MAAM;kBAC1G,cAAA,KAACjB;YAAMyB,KAAI;YAAM,GAAGhB,IAAIe,SAAS,CAAC,gBAAgB,CAAC,EAAE;sBAChDb,2BACK,AAACK,SAAsCE,gBACvC,AAACF,SAAqCE,YAAY,CAAC,EAAE;;;AAI3E,EAAE;AAEFX,aAAamB,MAAM,GAAGxB"}

package/dist/esm/components/table/table-column/TableCollapsibleColumn.d.ts

@@ -1,4 +1,5 @@
 import { ColumnDef } from '@tanstack/table-core';
+export type TableCollapsibleColumnStylesNames = 'collapsibleIcon';
 /**
  * Generic column to use when your table needs collapsible rows
  */

package/dist/esm/components/table/table-column/TableCollapsibleColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCollapsibleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAU5D;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,CAAC,OAAO,CAGrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC,OAAO,CAYnD,CAAC"}
+{"version":3,"file":"TableCollapsibleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAK5D,MAAM,MAAM,iCAAiC,GAAG,iBAAiB,CAAC;AASlE;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,CAAC,OAAO,CAGrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC,OAAO,CAYnD,CAAC"}

package/dist/esm/components/table/table-column/TableCollapsibleColumn.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from '@coveord/plasma-react-icons';
-import { ActionIcon } from '@mantine/core';
-const defaultProps = {
+import { ArrowHeadDownSize16Px, ArrowHeadUpSize16Px } from '@coveord/plasma-react-icons';
+import { factory, useProps } from '@mantine/core';
+import { ActionIcon } from '../../action-icon';
+import { useTableStyles } from '../TableContext';
+const sharedProps = {
     id: 'collapsible',
     enableSorting: false,
     header: '',
-    size: 62
+    size: 84
 };
 /**
  * Generic column to use when your table needs collapsible rows
  */ export const TableCollapsibleColumn = {
-    ...defaultProps,
+    ...sharedProps,
     cell: (info)=>/*#__PURE__*/ _jsx(CollapsibleIcon, {
             info: info
         })
@@ -18,7 +20,7 @@ const defaultProps = {
 /**
  * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
  */ export const TableAccordionColumn = {
-    ...defaultProps,
+    ...sharedProps,
     cell: (info)=>{
         const onToggle = ()=>{
             // close all other rows when the current row not is expanded
@@ -32,7 +34,17 @@ const defaultProps = {
         });
     }
 };
-const CollapsibleIcon = ({ info, onToggle })=>{
+const defaultProps = {
+    iconExpanded: /*#__PURE__*/ _jsx(ArrowHeadUpSize16Px, {
+        height: 16
+    }),
+    iconCollapsed: /*#__PURE__*/ _jsx(ArrowHeadDownSize16Px, {
+        height: 16
+    })
+};
+const CollapsibleIcon = factory((props, ref)=>{
+    const ctx = useTableStyles();
+    const { info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others } = useProps('PlasmaTableCollapsibleColumn', defaultProps, props);
     const handler = info.row.getToggleExpandedHandler();
     const onClick = (e)=>{
         e.stopPropagation();
@@ -40,11 +52,20 @@ const CollapsibleIcon = ({ info, onToggle })=>{
         handler();
     };
     return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
+        ref: ref,
         onClick: onClick,
         variant: "subtle",
+        color: "gray",
         radius: "sm",
-        children: info.row.getIsExpanded() ? /*#__PURE__*/ _jsx(ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ _jsx(ArrowHeadDownSize24Px, {})
+        ...ctx.getStyles('collapsibleIcon', {
+            className,
+            classNames,
+            styles,
+            style
+        }),
+        ...others,
+        children: info.row.getIsExpanded() ? iconExpanded : iconCollapsed
     }) : null;
-};
+});
 
 //# sourceMappingURL=TableCollapsibleColumn.js.map

package/dist/esm/components/table/table-column/TableCollapsibleColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n        </ActionIcon>\n    ) : null;\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","defaultProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius"],"mappings":";AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC,MAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAA6C;IACtD,GAAGL,YAAY;IACfM,MAAM,CAACC,qBAAS,KAACC;YAAgBD,MAAMA;;AAC3C,EAAE;AAEF;;CAEC,GACD,OAAO,MAAME,uBAA2C;IACpD,GAAGT,YAAY;IACfM,MAAM,CAACC;QACH,MAAMG,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;AACJ,EAAE;AAEF,MAAMC,kBAGD,CAAC,EAACD,IAAI,EAAEG,QAAQ,EAAC;IAClB,MAAMK,UAAUR,KAAKI,GAAG,CAACK,wBAAwB;IACjD,MAAMC,UAAU,CAACC;QACbA,EAAEC,eAAe;QACjBT,WAAWQ;QACXH;IACJ;IACA,OAAOR,KAAKI,GAAG,CAACS,YAAY,mBACxB,KAACrB;QAAWkB,SAASA;QAASI,SAAQ;QAASC,QAAO;kBACjDf,KAAKI,GAAG,CAACC,aAAa,mBAAK,KAACd,yCAAyB,KAACD;SAE3D;AACR"}
+{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Factory, factory, useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent, ReactNode} from 'react';\nimport {ActionIcon, ActionIconProps} from '../../action-icon';\nimport {useTableStyles} from '../TableContext';\n\nexport type TableCollapsibleColumnStylesNames = 'collapsibleIcon';\n\nconst sharedProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...sharedProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\ninterface CollapsibleIconProps extends ActionIconProps {\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n    iconExpanded?: ReactNode;\n    iconCollapsed?: ReactNode;\n}\n\ntype TableCollapsibleColumnFactory = Factory<{\n    props: CollapsibleIconProps;\n    ref: HTMLButtonElement;\n    stylesNames: TableCollapsibleColumnStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<CollapsibleIconProps> = {\n    iconExpanded: <ArrowHeadUpSize16Px height={16} />,\n    iconCollapsed: <ArrowHeadDownSize16Px height={16} />,\n};\n\nconst CollapsibleIcon = factory<TableCollapsibleColumnFactory>((props, ref) => {\n    const ctx = useTableStyles();\n    const {info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others} = useProps(\n        'PlasmaTableCollapsibleColumn',\n        defaultProps,\n        props,\n    );\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon\n            ref={ref}\n            onClick={onClick}\n            variant=\"subtle\"\n            color=\"gray\"\n            radius=\"sm\"\n            {...ctx.getStyles('collapsibleIcon', {className, classNames, styles, style})}\n            {...others}\n        >\n            {info.row.getIsExpanded() ? iconExpanded : iconCollapsed}\n        </ActionIcon>\n    ) : null;\n});\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","factory","useProps","ActionIcon","useTableStyles","sharedProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","defaultProps","iconExpanded","height","iconCollapsed","props","ref","ctx","classNames","className","style","styles","others","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","color","radius","getStyles"],"mappings":";AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAiBC,OAAO,EAAEC,QAAQ,QAAO,gBAAgB;AAGzD,SAAQC,UAAU,QAAwB,oBAAoB;AAC9D,SAAQC,cAAc,QAAO,kBAAkB;AAI/C,MAAMC,cAAkC;IACpCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAA6C;IACtD,GAAGL,WAAW;IACdM,MAAM,CAACC,qBAAS,KAACC;YAAgBD,MAAMA;;AAC3C,EAAE;AAEF;;CAEC,GACD,OAAO,MAAME,uBAA2C;IACpD,GAAGT,WAAW;IACdM,MAAM,CAACC;QACH,MAAMG,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;AACJ,EAAE;AAgBF,MAAMQ,eAA8C;IAChDC,4BAAc,KAACrB;QAAoBsB,QAAQ;;IAC3CC,6BAAe,KAACxB;QAAsBuB,QAAQ;;AAClD;AAEA,MAAMT,kBAAkBZ,QAAuC,CAACuB,OAAOC;IACnE,MAAMC,MAAMtB;IACZ,MAAM,EAACQ,IAAI,EAAEG,QAAQ,EAAEM,YAAY,EAAEE,aAAa,EAAEI,UAAU,EAAEC,SAAS,EAAEC,KAAK,EAAEC,MAAM,EAAE,GAAGC,QAAO,GAAG7B,SACnG,gCACAkB,cACAI;IAEJ,MAAMQ,UAAUpB,KAAKI,GAAG,CAACiB,wBAAwB;IACjD,MAAMC,UAAU,CAACC;QACbA,EAAEC,eAAe;QACjBrB,WAAWoB;QACXH;IACJ;IACA,OAAOpB,KAAKI,GAAG,CAACqB,YAAY,mBACxB,KAAClC;QACGsB,KAAKA;QACLS,SAASA;QACTI,SAAQ;QACRC,OAAM;QACNC,QAAO;QACN,GAAGd,IAAIe,SAAS,CAAC,mBAAmB;YAACb;YAAWD;YAAYG;YAAQD;QAAK,EAAE;QAC3E,GAAGE,MAAM;kBAETnB,KAAKI,GAAG,CAACC,aAAa,KAAKI,eAAeE;SAE/C;AACR"}

package/dist/esm/components/table/table-column/TableSelectableColumn.js

@@ -13,7 +13,7 @@ import { Checkbox, Tooltip } from '@mantine/core';
                 checked: table.getIsAllPageRowsSelected(),
                 indeterminate: table.getIsSomePageRowsSelected(),
                 onChange: table.getToggleAllPageRowsSelectedHandler(),
-                sx: {
+                style: {
                     display: 'flex'
                 },
                 "aria-label": label
@@ -24,7 +24,7 @@ import { Checkbox, Tooltip } from '@mantine/core';
             checked: row.getIsSelected(),
             indeterminate: row.getIsSomeSelected(),
             onChange: row.getToggleSelectedHandler(),
-            sx: {
+            style: {
                 display: 'flex'
             },
             "aria-label": "Select row"

package/dist/esm/components/table/table-column/TableSelectableColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-column/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n    id: 'select',\n    enableSorting: false,\n    header: ({table}) => {\n        const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n        return (\n            <Tooltip label={label}>\n                <Checkbox\n                    checked={table.getIsAllPageRowsSelected()}\n                    indeterminate={table.getIsSomePageRowsSelected()}\n                    onChange={table.getToggleAllPageRowsSelectedHandler()}\n                    sx={{display: 'flex'}}\n                    aria-label={label}\n                />\n            </Tooltip>\n        );\n    },\n    cell: ({row}) => (\n        <Checkbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={row.getToggleSelectedHandler()}\n            sx={{display: 'flex'}}\n            aria-label=\"Select row\"\n        />\n    ),\n};\n"],"names":["Checkbox","Tooltip","TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":";AAAA,SAAQA,QAAQ,EAAEC,OAAO,QAAO,gBAAgB;AAGhD;;CAEC,GACD,OAAO,MAAMC,wBAA4C;IACrDC,IAAI;IACJC,eAAe;IACfC,QAAQ,CAAC,EAACC,KAAK,EAAC;QACZ,MAAMC,QAAQD,MAAME,oBAAoB,KAAK,gCAAgC;QAC7E,qBACI,KAACP;YAAQM,OAAOA;sBACZ,cAAA,KAACP;gBACGS,SAASH,MAAMI,wBAAwB;gBACvCC,eAAeL,MAAMM,yBAAyB;gBAC9CC,UAAUP,MAAMQ,mCAAmC;gBACnDC,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYV;;;IAI5B;IACAW,MAAM,CAAC,EAACC,GAAG,EAAC,iBACR,KAACnB;YACGS,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;AAGvB,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/table-column/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n    id: 'select',\n    enableSorting: false,\n    header: ({table}) => {\n        const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n        return (\n            <Tooltip label={label}>\n                <Checkbox\n                    checked={table.getIsAllPageRowsSelected()}\n                    indeterminate={table.getIsSomePageRowsSelected()}\n                    onChange={table.getToggleAllPageRowsSelectedHandler()}\n                    style={{display: 'flex'}}\n                    aria-label={label}\n                />\n            </Tooltip>\n        );\n    },\n    cell: ({row}) => (\n        <Checkbox\n            checked={row.getIsSelected()}\n            indeterminate={row.getIsSomeSelected()}\n            onChange={row.getToggleSelectedHandler()}\n            style={{display: 'flex'}}\n            aria-label=\"Select row\"\n        />\n    ),\n};\n"],"names":["Checkbox","Tooltip","TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","style","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":";AAAA,SAAQA,QAAQ,EAAEC,OAAO,QAAO,gBAAgB;AAGhD;;CAEC,GACD,OAAO,MAAMC,wBAA4C;IACrDC,IAAI;IACJC,eAAe;IACfC,QAAQ,CAAC,EAACC,KAAK,EAAC;QACZ,MAAMC,QAAQD,MAAME,oBAAoB,KAAK,gCAAgC;QAC7E,qBACI,KAACP;YAAQM,OAAOA;sBACZ,cAAA,KAACP;gBACGS,SAASH,MAAMI,wBAAwB;gBACvCC,eAAeL,MAAMM,yBAAyB;gBAC9CC,UAAUP,MAAMQ,mCAAmC;gBACnDC,OAAO;oBAACC,SAAS;gBAAM;gBACvBC,cAAYV;;;IAI5B;IACAW,MAAM,CAAC,EAACC,GAAG,EAAC,iBACR,KAACnB;YACGS,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,OAAO;gBAACC,SAAS;YAAM;YACvBC,cAAW;;AAGvB,EAAE"}