@coveord/plasma-mantine 48.22.5 → 48.23.1

package/dist/cjs/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport {InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {Th} from './Th';\n\nconst useStyles = createStyles<string, {hasHeader: boolean}>((theme, {hasHeader}, getRef) => ({\n    table: {\n        width: '100%',\n        '& td:first-of-type': {\n            paddingLeft: theme.spacing.xl,\n        },\n    },\n\n    header: {\n        position: 'sticky',\n        top: hasHeader ? 69 : 0,\n        backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n        transition: 'box-shadow 150ms ease',\n        zIndex: 12, // skeleton is 11\n        '& tr th:first-of-type button': {\n            paddingLeft: theme.spacing.xl,\n        },\n        '& tr th:first-of-type div': {\n            paddingLeft: theme.spacing.xl,\n        },\n\n        '&::after': {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderBottom: `1px solid ${theme.colors.gray[2]}`,\n        },\n    },\n\n    rowSelected: {\n        ref: getRef('rowSelected'),\n    },\n\n    row: {\n        [`&:hover, &.${getRef('rowSelected')}`]: {\n            backgroundColor:\n                theme.colorScheme === 'dark'\n                    ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n                    : theme.colors[theme.primaryColor][0],\n        },\n    },\n}));\n\ninterface TableProps<T> {\n    /**\n     * Data to display in the table\n     */\n    data: T[];\n    /**\n     * Columns to display in the table.\n     *\n     * @see https://tanstack.com/table/v8/docs/guide/column-defs\n     */\n    columns: Array<ColumnDef<T>>;\n    /**\n     * Function called when the table mounts\n     *\n     * @param state the state of the table\n     */\n    onMount?: onTableChangeEvent;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent;\n    /**\n     * Function that generates the expandable content of a row\n     * Return null for rows that don't need to be expandable\n     *\n     * @param datum the row for which the children should be generated.\n     */\n    getExpandChildren?: (datum: T) => ReactNode;\n    /**\n     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n     */\n    noDataChildren?: ReactNode;\n    /**\n     * Whether the table is loading or not\n     *\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n     *\n     * @example\n     * <Table ...>\n     *     <Table.Header>\n     *         <div>Hello</div>\n     *     </Table.Header>\n     * </Table>\n     */\n    children?: ReactNode;\n\n    /**\n     * Initial state of the table\n     */\n    initialState?: InitialTableState & Partial<TableFormType>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n}\n\ninterface TableType {\n    <T>(props: TableProps<T>): ReactElement;\n    Actions: typeof TableActions;\n    Filter: typeof TableFilter;\n    Footer: typeof TableFooter;\n    Header: typeof TableHeader;\n    Pagination: typeof TablePagination;\n    PerPage: typeof TablePerPage;\n    Predicate: typeof TablePredicate;\n    CollapsibleColumn: typeof TableCollapsibleColumn;\n    DateRangePicker: typeof TableDateRangePicker;\n}\n\nexport const Table: TableType = <T,>({\n    data,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n\n    const {cx, classes} = useStyles({hasHeader: !!header});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: true,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n    });\n    const [state, setState] = useState<TableState>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n\n    const triggerChange = () => onChange?.({...state, ...form.values});\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n    }, []);\n\n    const outsideClickRef = useClickOutside(() => {\n        table.resetRowSelection(true);\n    });\n\n    useDidUpdate(() => {\n        triggerChange();\n        clearSelection();\n    }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    const clearSelection = () => {\n        setState((prevState) => ({...prevState, rowSelection: {}}));\n    };\n\n    const getSelectedRow = useCallback(\n        () => table.getSelectedRowModel().flatRows?.[0]?.original ?? null,\n        [state.rowSelection]\n    );\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const toggleRowSelection = (row: Row<T>) => {\n        table.setRowSelection(() => ({[row.id]: !row.getIsSelected()}));\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => toggleRowSelection(row)}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td key={cell.id} style={{width}}>\n                                <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Skeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={columns.length + 1}\n                            style={{padding: 0, borderBottomColor: row.getIsExpanded() ? undefined : 'transparent'}}\n                        >\n                            <Collapse in={row.getIsExpanded()} px=\"sm\" py=\"xs\">\n                                {rowChildren}\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                }}\n            >\n                {header}\n                <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                    <thead className={classes.header}>\n                        {table.getHeaderGroups().map((headerGroup) => (\n                            <tr key={headerGroup.id}>\n                                {headerGroup.headers.map((columnHeader) => (\n                                    <Th key={columnHeader.id} header={columnHeader} />\n                                ))}\n                            </tr>\n                        ))}\n                    </thead>\n                    <tbody>\n                        {rows.length ? (\n                            rows\n                        ) : (\n                            <tr>\n                                <td colSpan={columns.length}>{noDataChildren}</td>\n                            </tr>\n                        )}\n                    </tbody>\n                </MantineTable>\n                {footer}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","getRef","hasHeader","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","colorScheme","black","white","transition","zIndex","content","left","right","bottom","borderBottom","colors","gray","rowSelected","ref","row","fn","rgba","primaryColor","data","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","getCoreRowModel","manualPagination","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","triggerChange","values","useEffect","outsideClickRef","useClickOutside","resetRowSelection","useDidUpdate","clearSelection","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","rowSelection","getSelectedRow","getSelectedRowModel","flatRows","Center","sx","flexGrow","Loader","toggleRowSelection","setRowSelection","id","getIsSelected","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","onDoubleClick","className","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","undefined","td","style","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","padding","borderBottomColor","getIsExpanded","Collapse","in","px","py","Box","TableContext","Provider","value","containerRef","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","TableCollapsibleColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n    hasHeader: boolean;\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& td:first-of-type, th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: hasHeader ? 69 : 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 12, // skeleton is 11\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[2]}`,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowSelectionCheckboxCell: {\n            verticalAlign: 'middle',\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\ninterface TableProps<T> {\n    /**\n     * Data to display in the table\n     */\n    data: T[];\n    /**\n     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     */\n    getRowId?: CoreOptions<T>['getRowId'];\n    /**\n     * Columns to display in the table.\n     *\n     * @see https://tanstack.com/table/v8/docs/guide/column-defs\n     */\n    columns: Array<ColumnDef<T>>;\n    /**\n     * Function called when the table mounts\n     *\n     * @param state the state of the table\n     */\n    onMount?: onTableChangeEvent;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent;\n    /**\n     * Function that generates the expandable content of a row\n     * Return null for rows that don't need to be expandable\n     *\n     * @param datum the row for which the children should be generated.\n     */\n    getExpandChildren?: (datum: T) => ReactNode;\n    /**\n     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n     */\n    noDataChildren?: ReactNode;\n    /**\n     * Whether the table is loading or not\n     *\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n     *\n     * @example\n     * <Table ...>\n     *     <Table.Header>\n     *         <div>Hello</div>\n     *     </Table.Header>\n     * </Table>\n     */\n    children?: ReactNode;\n\n    /**\n     * Initial state of the table\n     */\n    initialState?: InitialTableState & Partial<TableFormType>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n    /**\n     * Whether the user can select multiple rows in order to perform actions in bulk\n     *\n     * @default false\n     */\n    multiRowSelectionEnabled?: boolean;\n}\n\ninterface TableType {\n    <T>(props: TableProps<T>): ReactElement;\n    Actions: typeof TableActions;\n    Filter: typeof TableFilter;\n    Footer: typeof TableFooter;\n    Header: typeof TableHeader;\n    Pagination: typeof TablePagination;\n    PerPage: typeof TablePerPage;\n    Predicate: typeof TablePredicate;\n    DateRangePicker: typeof TableDateRangePicker;\n    CollapsibleColumn: typeof TableCollapsibleColumn;\n}\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: true,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n    });\n    const [state, setState] = useState<TableState>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n    const triggerChange = () => onChange?.({...state, ...form.values});\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    const outsideClickRef = useClickOutside(() => {\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    });\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n                    aria-selected={row.getIsSelected()}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Skeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={columns.length + 1}\n                            style={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                }}\n            >\n                {header}\n                <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                    <thead className={classes.header}>\n                        {table.getHeaderGroups().map((headerGroup) => (\n                            <tr key={headerGroup.id}>\n                                {headerGroup.headers.map((columnHeader) => (\n                                    <Th key={columnHeader.id} header={columnHeader} />\n                                ))}\n                            </tr>\n                        ))}\n                    </thead>\n                    <tbody>\n                        {rows.length ? (\n                            rows\n                        ) : (\n                            <tr>\n                                <td colSpan={columns.length}>{noDataChildren}</td>\n                            </tr>\n                        )}\n                    </tbody>\n                </MantineTable>\n                {footer}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowSelectionCheckboxCell","verticalAlign","rowCollapsibleButtonCell","textAlign","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","enableMultiRowSelection","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","padding","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}

package/dist/cjs/components/table/TableActions.js

@@ -12,13 +12,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _useTable = require("./useTable");
 var TableActions = function(param) {
     var children = param.children;
-    var getSelectedRow = (0, _useTable.useTable)().getSelectedRow;
-    var selectedRow = getSelectedRow();
-    if (!selectedRow) {
+    var _useTable1 = (0, _useTable.useTable)(), getSelectedRows = _useTable1.getSelectedRows, multiRowSelectionEnabled = _useTable1.multiRowSelectionEnabled;
+    var selectedRows = getSelectedRows();
+    if (selectedRows.length <= 0) {
         return null;
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children(selectedRow)
+        children: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
     });
 };
 

package/dist/cjs/components/table/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row\n     *\n     * @param datum the data of the selected row\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=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: (datum: T) => ReactNode;\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRow} = useTable();\n    const selectedRow = getSelectedRow();\n\n    if (!selectedRow) {\n        return null;\n    }\n\n    return <>{children(selectedRow)}</>;\n};\n"],"names":["TableActions","children","getSelectedRow","useTable","selectedRow"],"mappings":"AAAA;;;;+BA0BaA;;;eAAAA;;;;wBAzBU;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAM,AAACC,iBAAkBC,IAAAA,kBAAQ,IAA1BD;IACP,IAAME,cAAcF;IAEpB,IAAI,CAACE,aAAa;QACd,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;kBAAGH,SAASG;;AACvB"}
+{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\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=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length"],"mappings":"AAAA;;;;+BA0BaA;;;eAAAA;;;;wBAzBU;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,aAAAA,IAAAA,kBAAQ,KAArDC,kBAA6CD,WAA7CC,iBAAiBC,2BAA4BF,WAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;kBAAGL,SAASG,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAChF"}

package/dist/cjs/components/table/TableCollapsibleColumn.js

@@ -13,8 +13,8 @@ var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var TableCollapsibleColumn = {
     id: "collapsible",
-    header: "",
     enableSorting: false,
+    header: "",
     cell: function(info) {
         var handler = info.row.getToggleExpandedHandler();
         var onClick = function(e) {

package/dist/cjs/components/table/TableCollapsibleColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {Button} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table need collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    id: 'collapsible',\n    header: '',\n    enableSorting: false,\n    cell: (info) => {\n        const handler = info.row.getToggleExpandedHandler();\n        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n            handler();\n        };\n\n        return info.row.getCanExpand() ? (\n            <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n            </Button>\n        ) : null;\n    },\n};\n"],"names":["TableCollapsibleColumn","id","header","enableSorting","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","Button","variant","size","getIsExpanded","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":"AAAA;;;;+BAQaA;;;eAAAA;;;;gCAR4C;oBACpC;AAOd,IAAMA,yBAA6C;IACtDC,IAAI;IACJC,QAAQ;IACRC,eAAe,KAAK;IACpBC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,qBAACC,YAAM;YAACJ,SAASA;YAASK,SAAQ;YAASC,MAAK;sBAC3CV,KAAKE,GAAG,CAACS,aAAa,mBAAK,qBAACC,qCAAmB,sBAAM,qBAACC,uCAAqB,KAAG;aAEnF,IAAI;IACZ;AACJ"}
+{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {Button} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    cell: (info) => {\n        const handler = info.row.getToggleExpandedHandler();\n        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n            handler();\n        };\n\n        return info.row.getCanExpand() ? (\n            <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n            </Button>\n        ) : null;\n    },\n};\n"],"names":["TableCollapsibleColumn","id","enableSorting","header","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","Button","variant","size","getIsExpanded","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":"AAAA;;;;+BAQaA;;;eAAAA;;;;gCAR4C;oBACpC;AAOd,IAAMA,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,qBAACC,YAAM;YAACJ,SAASA;YAASK,SAAQ;YAASC,MAAK;sBAC3CV,KAAKE,GAAG,CAACS,aAAa,mBAAK,qBAACC,qCAAmB,sBAAM,qBAACC,uCAAqB,KAAG;aAEnF,IAAI;IACZ;AACJ"}

package/dist/cjs/components/table/TableContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n    /**\n     * Object containing the table predicates and their selected values\n     *\n     * @example {type: \"LONG\", origin: \"system\"}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Selected date range in the table\n     *\n     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n     */\n    dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n    /**\n     * Function to call when the table needs an update\n     */\n    onChange: () => void;\n    /**\n     * Internal state of the table\n     *\n     * @see https://tanstack.com/table/v8/docs/api/core/table#state\n     */\n    state: TableState;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState) => TableState>;\n    /**\n     * Function that clears the filter and predicates\n     */\n    clearFilters: () => void;\n    /**\n     * Function that returns the selected row if any\n     */\n    getSelectedRow: () => any | null;\n    /**\n     * Function that clear the selected row\n     */\n    clearSelection: () => void;\n    /**\n     * Form used to handle predicates and dateRange\n     */\n    form: UseFormReturnType<TableFormType>;\n    /**\n     * Table container ref\n     */\n    containerRef: RefObject<HTMLDivElement>;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":"AAAA;;;;+BA2DaA;;;eAAAA;;;qBAxDoC;AAwD1C,IAAMA,6BAAeC,IAAAA,oBAAa,EAA0B,IAAI"}
+{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n    /**\n     * Object containing the table predicates and their selected values\n     *\n     * @example {type: \"LONG\", origin: \"system\"}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Selected date range in the table\n     *\n     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n     */\n    dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n    /**\n     * Function to call when the table needs an update\n     */\n    onChange: () => void;\n    /**\n     * Internal state of the table\n     *\n     * @see https://tanstack.com/table/v8/docs/api/core/table#state\n     */\n    state: TableState;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState) => TableState>;\n    /**\n     * Function that clears the filter and predicates\n     */\n    clearFilters: () => void;\n    /**\n     * Function that returns the selected row if any.\n     */\n    getSelectedRow: () => any | null;\n    /**\n     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n     */\n    getSelectedRows: () => any[];\n    /**\n     * Function that clear the selected row\n     */\n    clearSelection: () => void;\n    /**\n     * Form used to handle predicates and dateRange\n     */\n    form: UseFormReturnType<TableFormType>;\n    /**\n     * Table container ref\n     */\n    containerRef: RefObject<HTMLDivElement>;\n    multiRowSelectionEnabled: boolean;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":"AAAA;;;;+BAgEaA;;;eAAAA;;;qBA7DoC;AA6D1C,IAAMA,6BAAeC,IAAAA,oBAAa,EAA0B,IAAI"}

package/dist/cjs/components/table/TableFilter.js

@@ -44,6 +44,10 @@ var TableFilter = function(_param) {
         var value = event.currentTarget.value;
         setState(function(prevState) {
             return _objectSpreadProps(_objectSpread({}, prevState), {
+                pagination: prevState.pagination ? {
+                    pageIndex: 0,
+                    pageSize: prevState.pagination.pageSize
+                } : prevState.pagination,
                 globalFilter: value
             });
         });

package/dist/cjs/components/table/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":"AAAA;;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,qBAACI,eAAS;QACNC,WAAWZ,QAAQZ,OAAO;QAC1BM,aAAaA;QACbmB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWX,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBO,UAAUZ;OACNP;AAGhB"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":"AAAA;;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,qBAACO,eAAS;QACNC,WAAWf,QAAQZ,OAAO;QAC1BM,aAAaA;QACbsB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWd,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBO,UAAUf;OACNP;AAGhB"}

package/dist/cjs/components/table/TableHeader.js

@@ -12,7 +12,9 @@ var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
 var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
 var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
+var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
+var _useTable = require("./useTable");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {
@@ -20,7 +22,7 @@ var useStyles = (0, _core.createStyles)(function(theme) {
             top: 0,
             zIndex: 13,
             backgroundColor: theme.colors.gray[1],
-            borderBottom: "1px solid ".concat(theme.colors.gray[4])
+            borderBottom: "1px solid ".concat(theme.colors.gray[3])
         }
     };
 });
@@ -31,18 +33,48 @@ var TableHeader = function(_param) {
         "unstyled",
         "children"
     ]);
+    var _useTable1 = (0, _useTable.useTable)(), getSelectedRows = _useTable1.getSelectedRows, multiRowSelectionEnabled = _useTable1.multiRowSelectionEnabled, clearSelection = _useTable1.clearSelection;
     var classes = useStyles(null, {
         name: "TableHeader",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
     }).classes;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, _objectSpreadProps(_objectSpread({
+    var selectedRows = getSelectedRows();
+    return multiRowSelectionEnabled ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Group, {
+        position: "apart",
+        className: classes.root,
+        children: [
+            selectedRows.length > 0 ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
+                label: "Unselect all",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Button, {
+                    onClick: clearSelection,
+                    ml: "lg",
+                    variant: "subtle",
+                    leftIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CrossSize16Px, {
+                        height: 16
+                    }),
+                    children: [
+                        selectedRows.length,
+                        " selected"
+                    ]
+                })
+            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Space, {}),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, _objectSpreadProps(_objectSpread({
+                position: "right",
+                spacing: "lg",
+                px: "md",
+                py: "sm"
+            }, others), {
+                children: children
+            }))
+        ]
+    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, _objectSpreadProps(_objectSpread({
         position: "right",
         spacing: "lg",
-        className: classes.root,
         px: "md",
-        py: "sm"
+        py: "sm",
+        className: classes.root
     }, others), {
         children: children
     }));

package/dist/cjs/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nconst useStyles = createStyles((theme) => ({\n    root: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 13, // skeleton is 11\n        backgroundColor: theme.colors.gray[1],\n        borderBottom: `1px solid ${theme.colors.gray[4]}`,\n    },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    return (\n        <Group position=\"right\" spacing=\"lg\" className={classes.root} px=\"md\" py=\"sm\" {...others}>\n            {children}\n        </Group>\n    );\n};\n"],"names":["TableHeader","useStyles","createStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","classNames","styles","unstyled","children","others","classes","name","Group","spacing","className","px","py"],"mappings":"AAAA;;;;+BAkBaA;;;eAAAA;;;;;;;oBAlB8C;AAG3D,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOO,IAAMV,cAAmD,iBAM1D;QALFY,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWhB,UAAU,IAAI,EAAE;QAACiB,MAAM;QAAeN,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EG;IACP,qBACI,qBAACE,WAAK;QAACd,UAAS;QAAQe,SAAQ;QAAKC,WAAWJ,QAAQb,IAAI;QAAEkB,IAAG;QAAKC,IAAG;OAASP;kBAC7ED;;AAGb"}
+{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Button, createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    root: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 13, // skeleton is 11\n        backgroundColor: theme.colors.gray[1],\n        borderBottom: `1px solid ${theme.colors.gray[3]}`,\n    },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n    /* Children of header (ie: actions, datepicker, etc.) */\n    children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...others\n}) => {\n    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const selectedRows = getSelectedRows();\n    return multiRowSelectionEnabled ? (\n        <Group position=\"apart\" className={classes.root}>\n            {selectedRows.length > 0 ? (\n                <Tooltip label=\"Unselect all\">\n                    <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n                        {selectedRows.length} selected\n                    </Button>\n                </Tooltip>\n            ) : (\n                <Space />\n            )}\n            <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n                {children}\n            </Group>\n        </Group>\n    ) : (\n        <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n            {children}\n        </Group>\n    );\n};\n"],"names":["TableHeader","useStyles","createStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","Group","className","length","Tooltip","label","Button","onClick","ml","variant","leftIcon","CrossSize16Px","height","Space","spacing","px","py"],"mappings":"AAAA;;;;+BAqBaA;;;eAAAA;;;;;;;gCArBe;oBACuD;wBAG5D;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOO,IAAMV,cAAmD,iBAM1D;QALFY,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEE,aAAAA,IAAAA,kBAAQ,KAArEC,kBAA6DD,WAA7DC,iBAAiBC,2BAA4CF,WAA5CE,0BAA0BC,iBAAkBH,WAAlBG;IAClD,IAAM,AAACC,UAAWpB,UAAU,IAAI,EAAE;QAACqB,MAAM;QAAeV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EO;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,sBAACK,WAAK;QAACnB,UAAS;QAAQoB,WAAWJ,QAAQjB,IAAI;;YAC1CmB,aAAaG,MAAM,GAAG,kBACnB,qBAACC,aAAO;gBAACC,OAAM;0BACX,cAAA,sBAACC,YAAM;oBAACC,SAASV;oBAAgBW,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,qBAACC,+BAAa;wBAACC,QAAQ;;;wBACtFZ,aAAaG,MAAM;wBAAC;;;+BAI7B,qBAACU,WAAK,KACT;0BACD,qBAACZ,WAAK;gBAACnB,UAAS;gBAAQgC,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASvB;0BACpDD;;;uBAIT,qBAACS,WAAK;QAACnB,UAAS;QAAQgC,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKd,WAAWJ,QAAQjB,IAAI;OAAMY;kBAC7ED;OAER;AACL"}

package/dist/cjs/components/table/TableSelectableColumn.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableSelectableColumn", {
+    enumerable: true,
+    get: function() {
+        return TableSelectableColumn;
+    }
+});
+var _jsxRuntime = require("react/jsx-runtime");
+var _core = require("@mantine/core");
+var TableSelectableColumn = {
+    id: "select",
+    enableSorting: false,
+    header: function(param) {
+        var table = param.table;
+        var label = table.getIsAllRowsSelected() ? "Unselect all from this page" : "Select all from this page";
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
+            label: label,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Checkbox, {
+                checked: table.getIsAllPageRowsSelected(),
+                indeterminate: table.getIsSomePageRowsSelected(),
+                onChange: table.getToggleAllPageRowsSelectedHandler(),
+                sx: {
+                    display: "flex"
+                },
+                "aria-label": label
+            })
+        });
+    },
+    cell: function(param) {
+        var row = param.row;
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Checkbox, {
+            checked: row.getIsSelected(),
+            indeterminate: row.getIsSomeSelected(),
+            onChange: row.getToggleSelectedHandler(),
+            sx: {
+                display: "flex"
+            },
+            "aria-label": "Select row"
+        });
+    }
+};
+
+//# sourceMappingURL=TableSelectableColumn.js.map

package/dist/cjs/components/table/TableSelectableColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/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":["TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","Tooltip","Checkbox","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":"AAAA;;;;+BAMaA;;;eAAAA;;;;oBANmB;AAMzB,IAAMA,wBAA4C;IACrDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ,gBAAa;YAAXC,cAAAA;QACN,IAAMC,QAAQD,MAAME,oBAAoB,KAAK,gCAAgC,2BAA2B;QACxG,qBACI,qBAACC,aAAO;YAACF,OAAOA;sBACZ,cAAA,qBAACG,cAAQ;gBACLC,SAASL,MAAMM,wBAAwB;gBACvCC,eAAeP,MAAMQ,yBAAyB;gBAC9CC,UAAUT,MAAMU,mCAAmC;gBACnDC,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYZ;;;IAI5B;IACAa,MAAM;YAAEC,YAAAA;6BACJ,qBAACX,cAAQ;YACLC,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;;AAGvB"}

package/dist/cjs/components/table/Th.js

@@ -15,25 +15,15 @@ var _reactTable = require("@tanstack/react-table");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         th: {
-            padding: "0 !important",
             fontWeight: "400 !important",
+            padding: "0 !important",
             color: theme.black + "!important",
-            button: {
-                padding: "8px 16px",
-                div: {
-                    padding: "0px !important"
-                }
-            },
-            div: {
-                padding: "8px 16px"
-            }
-        },
-        noSort: {
-            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.md, "px")
+            verticalAlign: "middle"
         },
         control: {
             width: "100%",
-            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.md, "px"),
+            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.sm, "px"),
+            whiteSpace: "nowrap",
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[6] : theme.colors.gray[2]
             }
@@ -63,7 +53,6 @@ var Th = function(param) {
                 width: width
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Text, {
-                className: classes.noSort,
                 size: "xs",
                 children: (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())
             })
@@ -83,6 +72,7 @@ var Th = function(param) {
             className: classes.control,
             children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Group, {
                 position: "apart",
+                noWrap: true,
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Text, {
                         size: "xs",

package/dist/cjs/components/table/Th.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        padding: '0 !important',\n        fontWeight: '400 !important' as any,\n        color: theme.black + '!important',\n        button: {\n            padding: '8px 16px',\n            div: {\n                padding: '0px !important',\n            },\n        },\n        div: {\n            padding: '8px 16px',\n        },\n    },\n\n    noSort: {\n        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowHeadDownSize16Px,\n    desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text className={classes.noSort} size=\"xs\">\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted();\n    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\">\n                    <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","padding","fontWeight","color","black","button","div","noSort","spacing","xs","md","control","width","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","ArrowHeadDownSize16Px","desc","ArrowHeadUpSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","UnstyledButton","onClick","Group","position","Center","sx","action","height"],"mappings":"AAAA;;;;+BAgDaA;;;eAAAA;;;;gCAhD4C;oBACO;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,IAAI;YACAC,SAAS;YACTC,YAAY;YACZC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,QAAQ;gBACJJ,SAAS;gBACTK,KAAK;oBACDL,SAAS;gBACb;YACJ;YACAK,KAAK;gBACDL,SAAS;YACb;QACJ;QAEAM,QAAQ;YACJN,SAAS,AAAC,GAAwBF,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;QACvD;QAEAC,SAAS;YACLC,OAAO;YACPX,SAAS,AAAC,GAAwBF,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YAEnD,WAAW;gBACPG,iBAAiBd,MAAMe,WAAW,KAAK,SAASf,MAAMgB,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGjB,MAAMgB,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAKC,uCAAqB;IAC1BC,MAAMC,qCAAmB;AAC7B;AAEA,IAAMC,gBAAgB;IAClBJ,KAAK;IACLE,MAAM;AACV;AAEO,IAAMxB,KAAK,gBAA8B;QAAxB2B,eAAAA;IACpB,IAAM,AAACC,UAAW3B,YAAX2B;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMf,QAAQa,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI,SAAS;IAElE,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACP,OAAOG,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWR,QAAQxB,EAAE;YAAEiC,OAAO;gBAACrB,OAAAA;YAAK;sBACpC,cAAA,qBAACsB,UAAI;gBAACF,WAAWR,QAAQjB,MAAM;gBAAEkB,MAAK;0BACjCU,IAAAA,sBAAU,EAACZ,OAAOG,MAAM,CAACU,SAAS,CAACb,MAAM,EAAEA,OAAOc,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASf,OAAOG,MAAM,CAACa,uBAAuB;IACpD,IAAMC,eAAejB,OAAOG,MAAM,CAACe,WAAW;IAC9C,IAAMC,OAAOzB,YAAY,CAACuB,gBAAgBjB,OAAOG,MAAM,CAACiB,eAAe,GAAG;IAE1E,qBACI,qBAAC3C;QAAGgC,WAAWR,QAAQxB,EAAE;QAAEiC,OAAO;YAACrB,OAAAA;QAAK;QAAGgC,aAAWJ,eAAelB,aAAa,CAACkB,aAAa,GAAG,MAAM;kBACrG,cAAA,qBAACK,oBAAc;YAACC,SAASR;YAAQN,WAAWR,QAAQb,OAAO;sBACvD,cAAA,sBAACoC,WAAK;gBAACC,UAAS;;kCACZ,qBAACd,UAAI;wBAACT,MAAK;kCAAMU,IAAAA,sBAAU,EAACZ,OAAOG,MAAM,CAACU,SAAS,CAACb,MAAM,EAAEA,OAAOc,UAAU;;kCAC7E,qBAACY,YAAM;wBAACC,IAAI,SAACnD;mCAAW;gCAACI,OAAOqC,eAAezC,MAAMgB,MAAM,CAACoC,MAAM,CAAC,EAAE,GAAGtB,SAAS;4BAAA;;kCAC7E,cAAA,qBAACa;4BAAKU,QAAQ;;;;;;;AAMtC"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        color: theme.black + '!important',\n        verticalAlign: 'middle',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n        whiteSpace: 'nowrap',\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowHeadDownSize16Px,\n    desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted();\n    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","ArrowHeadDownSize16Px","desc","ArrowHeadUpSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","sx","action","height"],"mappings":"AAAA;;;;+BAqCaA;;;eAAAA;;;;gCArC4C;oBACO;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAKC,uCAAqB;IAC1BC,MAAMC,qCAAmB;AAC7B;AAEA,IAAMC,gBAAgB;IAClBJ,KAAK;IACLE,MAAM;AACV;AAEO,IAAMvB,KAAK,gBAA8B;QAAxB0B,eAAAA;IACpB,IAAM,AAACC,UAAW1B,YAAX0B;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMnB,QAAQiB,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI,SAAS;IAElE,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACP,OAAOG,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,qBAAC9B;YAAG+B,WAAWR,QAAQvB,EAAE;YAAEgC,OAAO;gBAACzB,OAAAA;YAAK;sBACpC,cAAA,qBAAC0B,UAAI;gBAACT,MAAK;0BAAMU,IAAAA,sBAAU,EAACZ,OAAOG,MAAM,CAACU,SAAS,CAACb,MAAM,EAAEA,OAAOc,UAAU;;;IAGzF,CAAC;IAED,IAAMC,SAASf,OAAOG,MAAM,CAACa,uBAAuB;IACpD,IAAMC,eAAejB,OAAOG,MAAM,CAACe,WAAW;IAC9C,IAAMC,OAAOzB,YAAY,CAACuB,gBAAgBjB,OAAOG,MAAM,CAACiB,eAAe,GAAG;IAE1E,qBACI,qBAAC1C;QAAG+B,WAAWR,QAAQvB,EAAE;QAAEgC,OAAO;YAACzB,OAAAA;QAAK;QAAGoC,aAAWJ,eAAelB,aAAa,CAACkB,aAAa,GAAG,MAAM;kBACrG,cAAA,qBAACK,oBAAc;YAACC,SAASR;YAAQN,WAAWR,QAAQjB,OAAO;sBACvD,cAAA,sBAACwC,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACf,UAAI;wBAACT,MAAK;kCAAMU,IAAAA,sBAAU,EAACZ,OAAOG,MAAM,CAACU,SAAS,CAACb,MAAM,EAAEA,OAAOc,UAAU;;kCAC7E,qBAACa,YAAM;wBAACC,IAAI,SAACnD;mCAAW;gCAACI,OAAOoC,eAAexC,MAAMe,MAAM,CAACqC,MAAM,CAAC,EAAE,GAAGvB,SAAS;4BAAA;;kCAC7E,cAAA,qBAACa;4BAAKW,QAAQ;;;;;;;AAMtC"}

package/dist/cjs/components/table/useRowSelection.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useRowSelection", {
+    enumerable: true,
+    get: function() {
+        return useRowSelection;
+    }
+});
+var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
+var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
+var _tableCore = require("@tanstack/table-core");
+var _react = require("react");
+var useRowSelection = function(table) {
+    var _useState = _slicedToArray((0, _react.useState)({}), 2), rowSelection = _useState[0], setRowSelection = _useState[1];
+    table.setOptions(function(prev) {
+        return _objectSpreadProps(_objectSpread({}, prev), {
+            onRowSelectionChange: function(rowSelectionUpdater) {
+                table.setState(function(old) {
+                    var selectedRowsIds = (0, _tableCore.functionalUpdate)(rowSelectionUpdater, old["rowSelection"]);
+                    setRowSelection(function(current) {
+                        var currentRowsById = table.getRowModel().rowsById;
+                        return Object.keys(selectedRowsIds).reduce(function(memo, rowId) {
+                            if (current[rowId]) {
+                                memo[rowId] = current[rowId];
+                            } else {
+                                memo[rowId] = currentRowsById[rowId].original;
+                            }
+                            return memo;
+                        }, {});
+                    });
+                    return _objectSpreadProps(_objectSpread({}, old), {
+                        rowSelection: selectedRowsIds
+                    });
+                });
+            }
+        });
+    });
+    var clearSelection = function() {
+        table.resetRowSelection(true);
+    };
+    var getSelectedRows = function() {
+        return Object.values(rowSelection);
+    };
+    var _getSelectedRows_;
+    var getSelectedRow = function() {
+        return (_getSelectedRows_ = getSelectedRows()[0]) !== null && _getSelectedRows_ !== void 0 ? _getSelectedRows_ : null;
+    };
+    return {
+        clearSelection: clearSelection,
+        getSelectedRow: getSelectedRow,
+        getSelectedRows: getSelectedRows
+    };
+};
+
+//# sourceMappingURL=useRowSelection.js.map

package/dist/cjs/components/table/useRowSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {functionalUpdate, Table} from '@tanstack/table-core';\nimport {useState} from 'react';\n\nexport const useRowSelection = <T>(table: Table<T>) => {\n    const [rowSelection, setRowSelection] = useState<Record<string, T>>({});\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);\n                setRowSelection((current) => {\n                    const currentRowsById = table.getRowModel().rowsById;\n                    return Object.keys(selectedRowsIds).reduce((memo, rowId) => {\n                        if (current[rowId]) {\n                            memo[rowId] = current[rowId];\n                        } else {\n                            memo[rowId] = currentRowsById[rowId].original;\n                        }\n                        return memo;\n                    }, {} as Record<string, T>);\n                });\n\n                return {\n                    ...old,\n                    rowSelection: selectedRowsIds,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values(rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {\n        clearSelection,\n        getSelectedRow,\n        getSelectedRows,\n    };\n};\n"],"names":["useRowSelection","table","useState","rowSelection","setRowSelection","setOptions","prev","onRowSelectionChange","rowSelectionUpdater","setState","old","selectedRowsIds","functionalUpdate","current","currentRowsById","getRowModel","rowsById","Object","keys","reduce","memo","rowId","original","clearSelection","resetRowSelection","getSelectedRows","values","getSelectedRow"],"mappings":"AAAA;;;;+BAGaA;;;eAAAA;;;;;;yBAHyB;qBACf;AAEhB,IAAMA,kBAAkB,SAAIC,OAAoB;IACnD,IAAwCC,2BAAAA,IAAAA,eAAQ,EAAoB,CAAC,QAA9DC,eAAiCD,cAAnBE,kBAAmBF;IAExCD,MAAMI,UAAU,CAAC,SAACC;eAAU,qCACrBA;YACHC,sBAAsB,SAACC,qBAAwB;gBAC3CP,MAAMQ,QAAQ,CAAC,SAACC,KAAQ;oBACpB,IAAMC,kBAAkBC,IAAAA,2BAAgB,EAACJ,qBAAqBE,GAAG,CAAC,eAAe;oBACjFN,gBAAgB,SAACS,SAAY;wBACzB,IAAMC,kBAAkBb,MAAMc,WAAW,GAAGC,QAAQ;wBACpD,OAAOC,OAAOC,IAAI,CAACP,iBAAiBQ,MAAM,CAAC,SAACC,MAAMC,OAAU;4BACxD,IAAIR,OAAO,CAACQ,MAAM,EAAE;gCAChBD,IAAI,CAACC,MAAM,GAAGR,OAAO,CAACQ,MAAM;4BAChC,OAAO;gCACHD,IAAI,CAACC,MAAM,GAAGP,eAAe,CAACO,MAAM,CAACC,QAAQ;4BACjD,CAAC;4BACD,OAAOF;wBACX,GAAG,CAAC;oBACR;oBAEA,OAAO,qCACAV;wBACHP,cAAcQ;;gBAEtB;YACJ;;;IAGJ,IAAMY,iBAAiB,WAAM;QACzBtB,MAAMuB,iBAAiB,CAAC,IAAI;IAChC;IAEA,IAAMC,kBAAkB;eAAMR,OAAOS,MAAM,CAACvB;;QAEfsB;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB,IAAI;;IAEzD,OAAO;QACHF,gBAAAA;QACAI,gBAAAA;QACAF,iBAAAA;IACJ;AACJ"}

package/dist/cjs/theme/Theme.js

@@ -14,6 +14,7 @@ var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _plasmaTokens = require("@coveord/plasma-tokens");
 var _plasmaColors = require("./PlasmaColors");
 var plasmaTheme = {
+    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
     colorScheme: "light",
     fontFamily: "canada-type-gibson, sans-serif",
     black: _plasmaTokens.color.primary.gray[9],
@@ -100,9 +101,7 @@ var plasmaTheme = {
             styles: function(theme, params) {
                 return {
                     root: {
-                        "&": {
-                            fontWeight: 400
-                        },
+                        fontWeight: 400,
                         backgroundColor: params.variant === "outline" ? "white" : undefined
                     }
                 };
@@ -134,21 +133,27 @@ var plasmaTheme = {
         InputWrapper: {
             defaultProps: {
                 withAsterisk: false
-            }
-        },
-        TextInput: {
-            defaultProps: {
-                radius: 8
             },
             styles: function(theme) {
                 return {
+                    label: {
+                        marginBottom: theme.spacing.xs,
+                        lineHeight: "20px"
+                    },
                     description: {
-                        fontSize: "inherit",
-                        paddingBottom: theme.spacing.xs
+                        lineHeight: "20px",
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.gray[7],
+                        marginBottom: theme.spacing.xs
                     }
                 };
             }
         },
+        TextInput: {
+            defaultProps: {
+                radius: 8
+            }
+        },
         Tooltip: {
             defaultProps: {
                 color: "navy",

package/dist/cjs/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    '&': {fontWeight: 400},\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 320, sm: 440, md: '45%', lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n            styles: (theme) => ({\n                description: {\n                    fontSize: 'inherit',\n                    paddingBottom: theme.spacing.xs,\n                },\n            }),\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n    },\n};\n"],"names":["plasmaTheme","colorScheme","fontFamily","black","color","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","PlasmaColors","components","Alert","defaultProps","icon","InfoSize24Px","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","TextInput","radius","description","paddingBottom","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","ArrowHeadRightSize24Px","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding"],"mappings":"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"}
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 320, sm: 440, md: '45%', lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n    },\n};\n"],"names":["plasmaTheme","colorScheme","fontFamily","black","color","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","PlasmaColors","components","Alert","defaultProps","icon","InfoSize24Px","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","TextInput","radius","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","ArrowHeadRightSize24Px","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding"],"mappings":"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"}

package/dist/definitions/components/code-editor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAMH,YAAY,EAGZ,qBAAqB,EAErB,SAAS,EAKZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAK7D,QAAA,MAAM,SAAS;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA6IzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAMH,YAAY,EAGZ,qBAAqB,EAErB,SAAS,EAKZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAK7D,QAAA,MAAM,SAAS;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAyIzD,CAAC"}