@coveord/plasma-mantine 53.1.4 → 54.0.1

package/src/components/table/use-table.ts

@@ -0,0 +1,323 @@
+import {useDidUpdate} from '@mantine/hooks';
+import {type PaginationState, type SortingState, type ExpandedState} from '@tanstack/table-core';
+import defaultsDeep from 'lodash.defaultsdeep';
+import {useCallback, useMemo, useState} from 'react';
+import {type DateRangePickerValue} from '../date-range-picker';
+
+// Create a deeply optional version of another type
+type PartialDeep<T> = T extends object
+    ? {
+          [P in keyof T]?: PartialDeep<T[P]>;
+      }
+    : T;
+
+export interface TableState<TData = unknown> {
+    /**
+     * Current pagination state
+     *
+     * @default { pageIndex: 0, pageSize: 50 }
+     */
+    pagination: PaginationState;
+    /**
+     * Total number of entries in the table.
+     * This number is used to calculate the number of pages in the pagination.
+     * When null, the number of pages is calculated using the current data length.
+     *
+     * @default null
+     */
+    totalEntries: number | null;
+    /**
+     * Current sorting state
+     *
+     * @default []
+     */
+    sorting: SortingState;
+    /**
+     * Current global filter value
+     *
+     * @default ''
+     */
+    globalFilter: string;
+
+    /**
+     * Current expanded state
+     *
+     * @default {}
+     */
+    expanded: ExpandedState;
+    /**
+     * Predicates and their current value
+     *
+     * @default {}
+     */
+    predicates: Record<string, string>;
+    /**
+     * Layout currently selected. When null, the first layout is used.
+     *
+     * @default null
+     */
+    layout: string | null;
+    /**
+     * Currently selected date range
+     *
+     * @default [null, null]
+     */
+    dateRange: DateRangePickerValue;
+    /**
+     * Currently selected rows
+     *
+     * @default {}
+     */
+    rowSelection: Record<string, TData>;
+    /**
+     * Columns that are currently visible
+     *
+     * @default {}
+     */
+    columnVisibility: Record<string, boolean>;
+}
+
+export interface TableStore<TData = unknown> {
+    /**
+     * Current state of the table.
+     */
+    state: TableState<TData>;
+    /**
+     * Allows to change the pagination state.
+     */
+    setPagination: React.Dispatch<React.SetStateAction<TableState<TData>['pagination']>>;
+    /**
+     * Allows to change the total number of entries.
+     */
+    setTotalEntries: React.Dispatch<React.SetStateAction<TableState<TData>['totalEntries']>>;
+    /**
+     * Allows to change the sorting state.
+     */
+    setSorting: React.Dispatch<React.SetStateAction<TableState<TData>['sorting']>>;
+    /**
+     * Allows to change the global filter value.
+     */
+    setGlobalFilter: React.Dispatch<React.SetStateAction<TableState<TData>['globalFilter']>>;
+    /**
+     * Allows to change the rows expanded state.
+     */
+    setExpanded: React.Dispatch<React.SetStateAction<TableState<TData>['expanded']>>;
+    /**
+     * Allows to change the predicates values.
+     */
+    setPredicates: React.Dispatch<React.SetStateAction<TableState<TData>['predicates']>>;
+    /**
+     * Allows to change the selected layout.
+     */
+    setLayout: React.Dispatch<React.SetStateAction<TableState<TData>['layout']>>;
+    /**
+     * Allows to change the selected date range.
+     */
+    setDateRange: React.Dispatch<React.SetStateAction<TableState<TData>['dateRange']>>;
+    /**
+     * Allows to change the current row selection.
+     */
+    setRowSelection: React.Dispatch<React.SetStateAction<TableState<TData>['rowSelection']>>;
+    /**
+     * Allows to change the visible columns.
+     */
+    setColumnVisibility: React.Dispatch<React.SetStateAction<TableState<TData>['columnVisibility']>>;
+    /**
+     * Whether the table is currently filtered.
+     */
+    isFiltered: boolean;
+    /**
+     * Whether the table has data when unfiltered.
+     *
+     * This is derived from the totalEntries so make sure you set that number correctly, even if you're using a client side table.
+     */
+    isVacant: boolean;
+    /**
+     * Clear currently applied filters.
+     */
+    clearFilters: () => void;
+    /**
+     * Deselects all currently selected rows.
+     */
+    clearRowSelection: () => void;
+    /**
+     * Get currently selected rows.
+     */
+    getSelectedRows: () => TData[];
+    /**
+     * Get currently selected row
+     */
+    getSelectedRow: () => TData | null;
+    /**
+     * Whether the user can select multiple rows at the same time.
+     */
+    multiRowSelectionEnabled: boolean;
+    /**
+     * Whether rows can be selected.
+     */
+    rowSelectionEnabled: boolean;
+    /**
+     * Whether row selection is forced.
+     */
+    rowSelectionForced: boolean;
+}
+
+export interface UseTableOptions<TData = unknown> {
+    /**
+     * Initial state of the table.
+     */
+    initialState?: PartialDeep<TableState<TData>>;
+    /**
+     * Whether rows can be selected.
+     *
+     * @default true
+     */
+    enableRowSelection?: boolean;
+    /**
+     * Whether multiple rows can be selected at the same time.
+     *
+     * @default false
+     */
+    enableMultiRowSelection?: boolean;
+    /**
+     * Forces the user to always have one row selected.
+     * When activating that setting, a good practice is to have a row already selected in the initial state.
+     *
+     * @default false
+     */
+    forceSelection?: boolean;
+}
+
+const defaultOptions: UseTableOptions = {
+    enableRowSelection: true,
+    enableMultiRowSelection: false,
+    forceSelection: false,
+};
+
+const defaultState: Partial<TableState> = {
+    pagination: {
+        pageIndex: 0,
+        pageSize: 50,
+    },
+    totalEntries: null,
+    sorting: [],
+    globalFilter: '',
+    predicates: {},
+    layout: null,
+    dateRange: [null, null],
+    rowSelection: {},
+    columnVisibility: {},
+};
+
+export const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {
+    const options: UseTableOptions<TData> = defaultsDeep({}, userOptions, defaultOptions);
+    const initialState: TableState<TData> = defaultsDeep({}, options.initialState, defaultState);
+
+    const [pagination, setPagination] = useState<TableState<TData>['pagination']>(
+        initialState.pagination as PaginationState,
+    );
+    const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);
+    const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(
+        initialState.totalEntries,
+    );
+    const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting as SortingState);
+    const [globalFilter, setGlobalFilter] = useState<TableState<TData>['globalFilter']>(initialState.globalFilter);
+    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded as ExpandedState);
+    const [predicates, setPredicates] = useState<TableState<TData>['predicates']>(initialState.predicates);
+    const [layout, setLayout] = useState<TableState<TData>['layout']>(initialState.layout);
+    const [dateRange, setDateRange] = useState<TableState<TData>['dateRange']>(initialState.dateRange);
+    const [rowSelection, setRowSelection] = useState<TableState<TData>['rowSelection']>(initialState.rowSelection);
+    const [columnVisibility, setColumnVisibility] = useState<TableState<TData>['columnVisibility']>(
+        initialState.columnVisibility,
+    );
+
+    const isFiltered =
+        !!globalFilter ||
+        Object.keys(predicates).some((predicate) => !!predicates[predicate]) ||
+        !!dateRange?.[0] ||
+        !!dateRange?.[1];
+
+    const isVacant = unfilteredTotalEntries === 0;
+
+    const setTotalEntries: typeof _setTotalEntries = useCallback(
+        (updater) => {
+            _setTotalEntries((old) => {
+                const newTotalEntries = updater instanceof Function ? updater(old) : updater;
+                if (!isFiltered) {
+                    setUnfilteredTotalEntries(newTotalEntries);
+                }
+                return newTotalEntries;
+            });
+        },
+        [isFiltered],
+    );
+
+    const clearFilters = useCallback(() => {
+        setPredicates(initialState.predicates);
+        setGlobalFilter('');
+    }, []);
+
+    const clearRowSelection = useCallback(() => {
+        setRowSelection({});
+    }, []);
+
+    const getSelectedRows = useCallback(() => Object.values(rowSelection), [rowSelection]);
+
+    const getSelectedRow = () => getSelectedRows()[0] ?? null;
+
+    useDidUpdate(() => {
+        if (!options.enableMultiRowSelection) {
+            clearRowSelection();
+        }
+    }, [globalFilter, pagination, sorting, dateRange, predicates]);
+
+    const state = useMemo(
+        () => ({
+            pagination,
+            totalEntries,
+            sorting,
+            globalFilter,
+            expanded,
+            predicates,
+            layout,
+            dateRange,
+            rowSelection,
+            columnVisibility,
+        }),
+        [
+            pagination,
+            totalEntries,
+            sorting,
+            globalFilter,
+            expanded,
+            predicates,
+            layout,
+            dateRange,
+            rowSelection,
+            columnVisibility,
+        ],
+    );
+
+    return {
+        state,
+        setPagination,
+        setTotalEntries,
+        setSorting,
+        setGlobalFilter,
+        setExpanded,
+        setPredicates,
+        setLayout,
+        setDateRange,
+        setRowSelection,
+        setColumnVisibility,
+        isFiltered,
+        isVacant,
+        clearFilters,
+        clearRowSelection,
+        getSelectedRows,
+        getSelectedRow,
+        rowSelectionEnabled: options.enableRowSelection,
+        rowSelectionForced: options.forceSelection,
+        multiRowSelectionEnabled: options.enableMultiRowSelection,
+    };
+};

package/src/index.ts

@@ -27,7 +27,6 @@ export {
     type ButtonProps,
     type CopyToClipboardProps,
     type HeaderProps,
-    type InitialTableState,
     type MenuItemProps,
     type TableProps,
     type TableState,
@@ -41,3 +40,14 @@ declare module '@mantine/core' {
         colors: Record<keyof typeof PlasmaColors | (string & {}), MantineColorsTuple>;
     }
 }
+
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends unknown, TValue> {
+        /**
+         * Whether the column is a control column.
+         * Control columns are columns that are not part of the data but are used to control the table.
+         * For example, a column that contains checkboxes to select rows.
+         */
+        controlColumn: boolean;
+    }
+}

package/src/theme/Theme.tsx

@@ -42,7 +42,6 @@ import {
     Tabs,
     Text,
     TextInput,
-    Title,
     Tooltip,
     createTheme,
 } from '@mantine/core';
@@ -71,7 +70,6 @@ import SkeletonClasses from '../styles/Skeleton.module.css';
 import StepperClasses from '../styles/Stepper.module.css';
 import TabsClasses from '../styles/Tabs.module.css';
 import TextClasses from '../styles/Text.module.css';
-import TitleClasses from '../styles/Title.module.css';
 import {NotificationVars} from '../vars/Notification.vars';
 import {TextVars} from '../vars/Text.vars';
 import {PlasmaColors} from './PlasmaColors';
@@ -82,7 +80,6 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
     black: color.primary.gray[9],
     defaultRadius: 8,
     lineHeights: {md: '1.5'},
-    fontSmoothing: false,
     spacing: {
         xs: '8px',
         sm: '16px',
@@ -279,9 +276,6 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 radius: 8,
             },
         }),
-        Title: Title.extend({
-            classNames: {root: TitleClasses.root},
-        }),
         Tooltip: Tooltip.extend({
             defaultProps: {
                 color: 'navy',

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

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

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

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

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

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableActions", {
-    enumerable: true,
-    get: function() {
-        return TableActions;
-    }
-});
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _jsxruntime = require("react/jsx-runtime");
-var _core = require("@mantine/core");
-var _utils = require("../../../utils");
-var _Table = require("../Table");
-var _TableContext = require("../TableContext");
-var defaultProps = {};
-var TableActions = function(props) {
-    var ctx = (0, _TableContext.useTableStyles)();
-    var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
-    var _useProps = (0, _core.useProps)('PlasmaTableActions', defaultProps, props), style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, children = _useProps.children, others = _object_without_properties._(_useProps, [
-        "style",
-        "className",
-        "classNames",
-        "styles",
-        "children"
-    ]);
-    var selectedRows = getSelectedRows();
-    if (selectedRows.length <= 0) {
-        return null;
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
-        span: "content",
-        order: _Table.TableComponentsOrder.Actions
-    }, ctx.getStyles('actionsRoot', {}), others), {
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, _object_spread_props._(_object_spread._({
-            gap: "xs"
-        }, ctx.getStyles('actionsGroup', {})), {
-            children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
-        }))
-    }));
-};
-TableActions.extend = _utils.identity;
-
-//# sourceMappingURL=TableActions.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Factory, Grid, GridColProps, Group, useProps} from '@mantine/core';\nimport {ForwardedRef, ReactElement, ReactNode} from 'react';\n\nimport {CustomComponentThemeExtend, identity} from '../../../utils';\nimport {TableComponentsOrder} from '../Table';\nimport {useTable, useTableStyles} from '../TableContext';\n\nexport type TableActionsStylesNames = 'actionsRoot' | 'actionsGroup';\n\nexport interface TableActionsProps<T> extends Omit<GridColProps, 'children'> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navy.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\ntype TableActionsFactory = Factory<{\n    props: TableActionsProps<unknown>;\n    ref: HTMLDivElement;\n    stylesNames: TableActionsStylesNames;\n    compound: true;\n}>;\n\nconst defaultProps: Partial<TableActionsProps<unknown>> = {};\n\nexport const TableActions = <T,>(props: TableActionsProps<T> & {ref?: ForwardedRef<HTMLDivElement>}): ReactElement => {\n    const ctx = useTableStyles();\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const {style, className, classNames, styles, children, ...others} = useProps(\n        'PlasmaTableActions',\n        defaultProps,\n        props,\n    );\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} {...ctx.getStyles('actionsRoot', {})} {...others}>\n            <Group gap=\"xs\" {...ctx.getStyles('actionsGroup', {})}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n\nTableActions.extend = identity as CustomComponentThemeExtend<TableActionsFactory>;\n"],"names":["TableActions","defaultProps","props","ctx","useTableStyles","useTable","getSelectedRows","multiRowSelectionEnabled","useProps","style","className","classNames","styles","children","others","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","getStyles","Group","gap","extend","identity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;oBAzC8C;qBAGR;qBAChB;4BACI;AAkCvC,IAAMC,eAAoD,CAAC;AAEpD,IAAMD,eAAe,SAAKE;IAC7B,IAAMC,MAAMC,IAAAA,4BAAc;IAC1B,IAAoDC,YAAAA,IAAAA,sBAAQ,KAArDC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAoEC,YAAAA,IAAAA,cAAQ,EACxE,sBACAP,cACAC,QAHGO,QAA6DD,UAA7DC,OAAOC,YAAsDF,UAAtDE,WAAWC,aAA2CH,UAA3CG,YAAYC,SAA+BJ,UAA/BI,QAAQC,WAAuBL,UAAvBK,UAAaC,sCAAUN;QAA7DC;QAAOC;QAAWC;QAAYC;QAAQC;;IAK7C,IAAME,eAAeT;IAErB,IAAIS,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,2BAAoB,CAACC,OAAO;OAAMnB,IAAIoB,SAAS,CAAC,eAAe,CAAC,IAAQT;kBACpG,cAAA,qBAACU,WAAK;YAACC,KAAI;WAAStB,IAAIoB,SAAS,CAAC,gBAAgB,CAAC;sBAC9ChB,2BACK,AAACM,SAAsCE,gBACvC,AAACF,SAAqCE,YAAY,CAAC,EAAE;;;AAI3E;AAEAf,aAAa0B,MAAM,GAAGC,eAAQ"}

package/dist/cjs/components/table/table-consumer/TableConsumer.d.ts

@@ -1,5 +0,0 @@
-import type { FunctionComponent, ReactNode } from 'react';
-export declare const TableConsumer: FunctionComponent<{
-    children: ReactNode;
-}>;
-//# sourceMappingURL=TableConsumer.d.ts.map

package/dist/cjs/components/table/table-consumer/TableConsumer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableConsumer.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-consumer/TableConsumer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAExD,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAAmC,CAAC"}

package/dist/cjs/components/table/table-consumer/TableConsumer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../../src/components/table/table-consumer/TableConsumer.tsx"],"sourcesContent":["import type {FunctionComponent, ReactNode} from 'react';\n\nexport const TableConsumer: FunctionComponent<{children: ReactNode}> = ({children}) => <>{children}</>;\n"],"names":["TableConsumer","children"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;;AAAN,IAAMA,gBAA0D;QAAEC,iBAAAA;yBAAc;kBAAGA"}

package/dist/cjs/hooks/useRowSelection.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { Table } from '@tanstack/table-core';
-import { TableProps } from '../components/table/Table.types';
-export declare const useRowSelection: <T>(table: Table<T>, { onRowSelectionChange, multiRowSelectionEnabled, additionalRootNodes, }: Pick<TableProps<T>, "multiRowSelectionEnabled" | "onRowSelectionChange" | "additionalRootNodes">) => {
-    clearSelection: () => void;
-    getSelectedRow: () => T;
-    getSelectedRows: () => T[];
-    outsideClickRef: import("react").MutableRefObject<HTMLDivElement>;
-};
-//# sourceMappingURL=useRowSelection.d.ts.map

package/dist/cjs/hooks/useRowSelection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAoB,KAAK,EAAmB,MAAM,sBAAsB,CAAC;AAIhF,OAAO,EAAuB,UAAU,EAAa,MAAM,iCAAiC,CAAC;AAE7F,eAAO,MAAM,eAAe;;;;;CAoE3B,CAAC"}

package/dist/cjs/hooks/useRowSelection.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useRowSelection", {
-    enumerable: true,
-    get: function() {
-        return useRowSelection;
-    }
-});
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
-var _hooks = require("@mantine/hooks");
-var _tablecore = require("@tanstack/table-core");
-var _fastdeepequal = /*#__PURE__*/ _interop_require_default._(require("fast-deep-equal"));
-var _react = require("react");
-var useRowSelection = function(table, param) {
-    var onRowSelectionChange = param.onRowSelectionChange, multiRowSelectionEnabled = param.multiRowSelectionEnabled, _param_additionalRootNodes = param.additionalRootNodes, additionalRootNodes = _param_additionalRootNodes === void 0 ? [] : _param_additionalRootNodes;
-    var outsideClickRef = (0, _react.useRef)();
-    (0, _hooks.useClickOutside)(function() {
-        if (!multiRowSelectionEnabled) {
-            clearSelection();
-        }
-    }, null, [
-        outsideClickRef.current
-    ].concat(_to_consumable_array._(additionalRootNodes)));
-    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.
-    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render
-    (0, _hooks.useDidUpdate)(function() {
-        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(getSelectedRows());
-    }, [
-        table.getState().rowSelection
-    ]);
-    table.setOptions(function(prev) {
-        return _object_spread_props._(_object_spread._({}, prev), {
-            onRowSelectionChange: function(rowSelectionUpdater) {
-                table.setState(function(old) {
-                    var newRowSelection = (0, _tablecore.functionalUpdate)(rowSelectionUpdater, old['rowSelection']);
-                    if ((0, _fastdeepequal.default)(old['rowSelection'], newRowSelection)) {
-                        return old;
-                    }
-                    var rows = table.getRowModel().rowsById;
-                    Object.keys(newRowSelection).forEach(function(rowId) {
-                        if (newRowSelection[rowId] === true) {
-                            var _rows_rowId;
-                            if (!rows[rowId]) {
-                                console.error('The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.');
-                            }
-                            var _rows_rowId_original;
-                            newRowSelection[rowId] = (_rows_rowId_original = (_rows_rowId = rows[rowId]) === null || _rows_rowId === void 0 ? void 0 : _rows_rowId.original) !== null && _rows_rowId_original !== void 0 ? _rows_rowId_original : true;
-                        }
-                    });
-                    return _object_spread_props._(_object_spread._({}, old), {
-                        rowSelection: newRowSelection
-                    });
-                });
-            }
-        });
-    });
-    var clearSelection = function() {
-        table.resetRowSelection(true);
-    };
-    var getSelectedRows = function() {
-        return Object.values(table.getState().rowSelection);
-    };
-    var getSelectedRow = function() {
-        var _getSelectedRows_;
-        return (_getSelectedRows_ = getSelectedRows()[0]) !== null && _getSelectedRows_ !== void 0 ? _getSelectedRows_ : null;
-    };
-    return {
-        clearSelection: clearSelection,
-        getSelectedRow: getSelectedRow,
-        getSelectedRows: getSelectedRows,
-        outsideClickRef: outsideClickRef
-    };
-};
-
-//# sourceMappingURL=useRowSelection.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/hooks/useRowSelection.ts"],"sourcesContent":["import {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {RowSelectionState, Table, functionalUpdate} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from '../components/table/Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n        additionalRootNodes = [],\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>,\n) => {\n    const outsideClickRef = useRef<HTMLDivElement>();\n    useClickOutside(\n        () => {\n            if (!multiRowSelectionEnabled) {\n                clearSelection();\n            }\n        },\n        null,\n        [outsideClickRef.current, ...additionalRootNodes],\n    );\n\n    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.\n    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render\n    useDidUpdate(() => {\n        onRowSelectionChange?.(getSelectedRows());\n    }, [table.getState().rowSelection]);\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const newRowSelection = functionalUpdate(\n                    rowSelectionUpdater,\n                    old['rowSelection'],\n                ) as RowSelectionWithData<T>;\n\n                if (isEqual(old['rowSelection'], newRowSelection)) {\n                    return old;\n                }\n\n                const rows = table.getRowModel().rowsById;\n\n                Object.keys(newRowSelection).forEach((rowId) => {\n                    if (newRowSelection[rowId] === true) {\n                        if (!rows[rowId]) {\n                            console.error(\n                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',\n                            );\n                        }\n                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n                    }\n                });\n\n                return {\n                    ...old,\n                    rowSelection: newRowSelection as RowSelectionState,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","useRef","useClickOutside","clearSelection","current","useDidUpdate","getSelectedRows","getState","rowSelection","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","functionalUpdate","isEqual","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","resetRowSelection","values","getSelectedRow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOaA;;;eAAAA;;;;;;;qBAP+B;yBACa;sEACrC;qBAEC;AAGd,IAAMA,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBC,IAAAA,aAAM;IAC9BC,IAAAA,sBAAe,EACX;QACI,IAAI,CAACJ,0BAA0B;YAC3BK;QACJ;IACJ,GACA,MACA;QAACH,gBAAgBI,OAAO;KAAyB,CAAjD,OAA0B,uBAAGL;IAGjC,0JAA0J;IAC1J,yJAAyJ;IACzJM,IAAAA,mBAAY,EAAC;QACTR,iCAAAA,2CAAAA,qBAAuBS;IAC3B,GAAG;QAACV,MAAMW,QAAQ,GAAGC,YAAY;KAAC;IAElCZ,MAAMa,UAAU,CAAC,SAACC;eAAU,4CACrBA;YACHb,sBAAsB,SAACc;gBACnBf,MAAMgB,QAAQ,CAAC,SAACC;oBACZ,IAAMC,kBAAkBC,IAAAA,2BAAgB,EACpCJ,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIG,IAAAA,sBAAO,EAACH,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAMI,OAAOrB,MAAMsB,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACP,iBAAiBQ,OAAO,CAAC,SAACC;wBAClC,IAAIT,eAAe,CAACS,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBH,eAAe,CAACS,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;oBAEA,OAAO,4CACAJ;wBACHL,cAAcM;;gBAEtB;YACJ;;;IAGJ,IAAMX,iBAAiB;QACnBP,MAAM+B,iBAAiB,CAAC;IAC5B;IAEA,IAAMrB,kBAAkB;eAAMc,OAAOQ,MAAM,CAAC,AAAChC,MAAMW,QAAQ,GAAqBC,YAAY;;IAE5F,IAAMqB,iBAAiB;YAAMvB;eAAAA,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;IAAG;IAExD,OAAO;QAACH,gBAAAA;QAAgB0B,gBAAAA;QAAgBvB,iBAAAA;QAAiBN,iBAAAA;IAAe;AAC5E"}

package/dist/cjs/styles/Title.module.css

@@ -1,5 +0,0 @@
-.root {
-    &:is(h1, h2, h3, h4, h5, h6) {
-        letter-spacing: 0.011em;
-    }
-}

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

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

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

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