@careharmony/mantine-react-table-ng 0.0.0-stage → 4.0.0-beta.0

package/src/typings.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css';

package/src/utils/column.utils.ts

@@ -0,0 +1,157 @@
+import { type Row } from '@tanstack/react-table';
+
+import {
+  type MRT_Column,
+  type MRT_ColumnDef,
+  type MRT_ColumnOrderState,
+  type MRT_DefinedColumnDef,
+  type MRT_DefinedTableOptions,
+  type MRT_FilterOption,
+  type MRT_RowData,
+} from '../types';
+
+export const getColumnId = <TData extends MRT_RowData>(
+  columnDef: MRT_ColumnDef<TData>,
+): string =>
+  columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
+
+export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
+  columns: MRT_ColumnDef<TData>[],
+): MRT_ColumnDef<TData>[] => {
+  const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
+  const getLeafColumns = (cols: MRT_ColumnDef<TData>[]) => {
+    cols.forEach((col) => {
+      if (col.columns) {
+        getLeafColumns(col.columns);
+      } else {
+        allLeafColumnDefs.push(col);
+      }
+    });
+  };
+  getLeafColumns(columns);
+  return allLeafColumnDefs;
+};
+
+/**
+ * Marks the placeholder rows that `useMRT_TableInstance` generates for the
+ * loading skeletons. The same `Symbol.for` key is written there.
+ */
+export const skeletonRowKey = Symbol.for('mrt-skeleton-row');
+
+export const isSkeletonRow = (originalRow: unknown): boolean =>
+  !!(originalRow as null | Record<symbol, unknown>)?.[skeletonRowKey];
+
+const skeletonSafeAccessorFns = new WeakSet<object>();
+
+export const prepareColumns = <TData extends MRT_RowData>({
+  columnDefs,
+  tableOptions,
+}: {
+  columnDefs: MRT_ColumnDef<TData>[];
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}): MRT_DefinedColumnDef<TData>[] => {
+  const {
+    aggregationFns = {},
+    defaultDisplayColumn,
+    filterFns = {},
+    sortingFns = {},
+    state: { columnFilterFns = {} } = {},
+  } = tableOptions;
+  return columnDefs.map((columnDef) => {
+    //assign columnId
+    if (!columnDef.id) columnDef.id = getColumnId(columnDef);
+    //assign columnDefType
+    if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
+    if (columnDef.columns?.length) {
+      columnDef.columnDefType = 'group';
+      //recursively prepare columns if this is a group column
+      columnDef.columns = prepareColumns({
+        columnDefs: columnDef.columns,
+        tableOptions,
+      });
+    } else if (columnDef.columnDefType === 'data') {
+      //assign aggregationFns if multiple aggregationFns are provided
+      if (Array.isArray(columnDef.aggregationFn)) {
+        const aggFns = columnDef.aggregationFn as string[];
+        columnDef.aggregationFn = (
+          columnId: string,
+          leafRows: Row<TData>[],
+          childRows: Row<TData>[],
+        ) =>
+          aggFns.map((fn) =>
+            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          );
+      }
+
+      //skeleton rows hold no data, so a custom accessorFn must not read them
+      const { accessorFn } = columnDef;
+      if (accessorFn && !skeletonSafeAccessorFns.has(accessorFn)) {
+        columnDef.accessorFn = ((originalRow: TData, index: number) =>
+          isSkeletonRow(originalRow)
+            ? null
+            : (accessorFn as (originalRow: TData, index: number) => any)(
+                originalRow,
+                index,
+              )) as MRT_ColumnDef<TData>['accessorFn'];
+        skeletonSafeAccessorFns.add(columnDef.accessorFn as object);
+      }
+
+      //assign filterFns
+      //a column added after the first render has no `columnFilterFns` state yet
+      const filterMode: MRT_FilterOption | undefined =
+        columnFilterFns[columnDef.id] ??
+        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn ??
+        (columnDef.filterFn instanceof Function
+          ? undefined
+          : ((columnDef.filterFn as MRT_FilterOption | undefined) ??
+            getDefaultColumnFilterFn(columnDef)));
+      if (filterMode !== undefined) {
+        if (Object.keys(filterFns).includes(filterMode)) {
+          columnDef.filterFn = filterFns[filterMode] ?? filterFns.fuzzy;
+        }
+        //custom filter modes that are not in `filterFns` still need to be tracked
+        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn = filterMode;
+      }
+
+      //assign sortingFns
+      if (Object.keys(sortingFns).includes(columnDef.sortingFn as string)) {
+        // @ts-ignore
+        columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+      }
+    } else if (columnDef.columnDefType === 'display') {
+      columnDef = {
+        ...(defaultDisplayColumn as MRT_ColumnDef<TData>),
+        ...columnDef,
+      };
+    }
+    return columnDef;
+  }) as MRT_DefinedColumnDef<TData>[];
+};
+
+export const reorderColumn = <TData extends MRT_RowData>(
+  draggedColumn: MRT_Column<TData>,
+  targetColumn: MRT_Column<TData>,
+  columnOrder: MRT_ColumnOrderState,
+): MRT_ColumnOrderState => {
+  if (draggedColumn.getCanPin()) {
+    draggedColumn.pin(targetColumn.getIsPinned());
+  }
+  const newColumnOrder = [...columnOrder];
+  newColumnOrder.splice(
+    newColumnOrder.indexOf(targetColumn.id),
+    0,
+    newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0],
+  );
+  return newColumnOrder;
+};
+
+export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
+  columnDef: MRT_ColumnDef<TData>,
+): MRT_FilterOption => {
+  const { filterVariant } = columnDef;
+  if (filterVariant === 'multi-select') return 'arrIncludesSome';
+  if (filterVariant?.includes('range')) return 'betweenInclusive';
+  if (['checkbox', 'date', 'select'].includes(filterVariant || ''))
+    return 'equals';
+  return 'fuzzy';
+};

package/src/utils/displayColumn.utils.ts

@@ -0,0 +1,153 @@
+import {
+  type MRT_ColumnDef,
+  type MRT_DefinedTableOptions,
+  type MRT_DisplayColumnIds,
+  type MRT_Localization,
+  type MRT_RowData,
+  type MRT_StatefulTableOptions,
+} from '../types';
+import { getAllLeafColumnDefs, getColumnId } from './column.utils';
+
+export function defaultDisplayColumnProps<TData extends MRT_RowData>({
+  header,
+  id,
+  size,
+  tableOptions,
+}: {
+  header?: keyof MRT_Localization;
+  id: MRT_DisplayColumnIds;
+  size: number;
+  tableOptions: MRT_DefinedTableOptions<TData>;
+}): MRT_ColumnDef<TData> {
+  const { defaultDisplayColumn, displayColumnDefOptions, localization } =
+    tableOptions;
+  return {
+    ...defaultDisplayColumn,
+    header: header ? localization[header]! : '',
+    size,
+    ...displayColumnDefOptions?.[id],
+    id,
+  };
+}
+
+export const showRowPinningColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
+  return !!(enableRowPinning && !rowPinningDisplayMode?.startsWith('select'));
+};
+
+export const showRowDragColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const { enableRowDragging, enableRowOrdering } = tableOptions;
+  return !!(enableRowDragging || enableRowOrdering);
+};
+
+export const showRowExpandColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const {
+    enableExpanding,
+    enableGrouping,
+    renderDetailPanel,
+    state: { grouping },
+  } = tableOptions;
+  return !!(
+    enableExpanding ||
+    (enableGrouping && grouping?.length) ||
+    renderDetailPanel
+  );
+};
+
+export const showRowActionsColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => {
+  const {
+    createDisplayMode,
+    editDisplayMode,
+    enableEditing,
+    enableRowActions,
+    state: { creatingRow },
+  } = tableOptions;
+  return !!(
+    enableRowActions ||
+    (creatingRow && createDisplayMode === 'row') ||
+    (enableEditing && ['modal', 'row'].includes(editDisplayMode ?? ''))
+  );
+};
+
+export const showRowSelectionColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => !!tableOptions.enableRowSelection;
+
+export const showRowNumbersColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => !!tableOptions.enableRowNumbers;
+
+export const showRowSpacerColumn = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+): boolean => tableOptions.layoutMode === 'grid-no-grow';
+
+export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) =>
+  [
+    showRowPinningColumn(tableOptions) && 'mrt-row-pin',
+    showRowDragColumn(tableOptions) && 'mrt-row-drag',
+    tableOptions.positionActionsColumn === 'first' &&
+      showRowActionsColumn(tableOptions) &&
+      'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'first' &&
+      showRowExpandColumn(tableOptions) &&
+      'mrt-row-expand',
+    showRowSelectionColumn(tableOptions) && 'mrt-row-select',
+    showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
+
+export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+) =>
+  [
+    tableOptions.positionActionsColumn === 'last' &&
+      showRowActionsColumn(tableOptions) &&
+      'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'last' &&
+      showRowExpandColumn(tableOptions) &&
+      'mrt-row-expand',
+    showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
+
+export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
+  tableOptions: MRT_StatefulTableOptions<TData>,
+  reset = false,
+) => {
+  const {
+    state: { columnOrder: currentColumnOrderIds = [] },
+  } = tableOptions;
+
+  const leadingDisplayColIds: string[] =
+    getLeadingDisplayColumnIds(tableOptions);
+  const trailingDisplayColIds: string[] =
+    getTrailingDisplayColumnIds(tableOptions);
+
+  const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map(
+    (columnDef) => getColumnId(columnDef),
+  );
+
+  let allLeafColumnDefIds = reset
+    ? defaultColumnDefIds
+    : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
+
+  allLeafColumnDefIds = allLeafColumnDefIds.filter(
+    (colId) =>
+      !leadingDisplayColIds.includes(colId) &&
+      !trailingDisplayColIds.includes(colId),
+  );
+
+  return [
+    ...leadingDisplayColIds,
+    ...allLeafColumnDefIds,
+    ...trailingDisplayColIds,
+  ];
+};

package/src/utils/row.utils.ts

@@ -0,0 +1,263 @@
+import { type ChangeEvent, type MouseEvent } from 'react';
+
+import { rankGlobalFuzzy } from '../fns/sortingFns';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+import { parseFromValuesOrFunc } from './utils';
+
+export const getMRT_Rows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  all?: boolean,
+): MRT_Row<TData>[] => {
+  const {
+    getCenterRows,
+    getPrePaginationRowModel,
+    getRowModel,
+    getState,
+    getTopRows,
+    options: {
+      createDisplayMode,
+      enablePagination,
+      enableRowPinning,
+      manualPagination,
+      positionCreatingRow,
+      rowPinningDisplayMode,
+    },
+  } = table;
+  const { creatingRow, pagination } = getState();
+
+  const isRankingRows = getIsRankingRows(table);
+
+  let rows: MRT_Row<TData>[] = [];
+  if (!isRankingRows) {
+    rows =
+      !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
+        ? all
+          ? getPrePaginationRowModel().rows
+          : getRowModel().rows
+        : getCenterRows();
+  } else {
+    // fuzzy ranking adjustments
+    rows = getPrePaginationRowModel().rows.sort((a, b) =>
+      rankGlobalFuzzy(a, b),
+    );
+    if (enablePagination && !manualPagination && !all) {
+      const start = pagination.pageIndex * pagination.pageSize;
+      rows = rows.slice(start, start + pagination.pageSize);
+    }
+    if (enableRowPinning && !rowPinningDisplayMode?.includes('sticky')) {
+      // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
+      rows = rows.filter((row) => !row.getIsPinned());
+    }
+  }
+  // row pinning adjustments
+  if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
+    const centerPinnedRowIds = rows
+      .filter((row) => row.getIsPinned())
+      .map((r) => r.id);
+
+    rows = [
+      ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
+      ...rows,
+    ];
+  }
+  // blank inserted creating row adjustments
+  if (
+    positionCreatingRow !== undefined &&
+    creatingRow &&
+    createDisplayMode === 'row'
+  ) {
+    const creatingRowIndex = !isNaN(+positionCreatingRow)
+      ? +positionCreatingRow
+      : positionCreatingRow === 'top'
+        ? 0
+        : rows.length;
+    rows = [
+      ...rows.slice(0, creatingRowIndex),
+      creatingRow,
+      ...rows.slice(creatingRowIndex),
+    ];
+  }
+
+  return rows;
+};
+
+export const getCanRankRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilterRankedResults,
+      manualExpanding,
+      manualFiltering,
+      manualGrouping,
+      manualSorting,
+    },
+  } = table;
+  const { expanded, globalFilterFn } = getState();
+
+  return (
+    !manualExpanding &&
+    !manualFiltering &&
+    !manualGrouping &&
+    !manualSorting &&
+    enableGlobalFilterRankedResults &&
+    globalFilterFn === 'fuzzy' &&
+    expanded !== true &&
+    !Object.values(expanded).some(Boolean)
+  );
+};
+
+export const getIsRankingRows = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const { globalFilter, sorting } = table.getState();
+
+  return (
+    getCanRankRows(table) &&
+    globalFilter &&
+    !Object.values(sorting).some(Boolean)
+  );
+};
+
+export const getIsRowSelected = <TData extends MRT_RowData>({
+  row,
+  table,
+}: {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { enableRowSelection },
+  } = table;
+
+  return (
+    row.getIsSelected() ||
+    (parseFromValuesOrFunc(enableRowSelection, row) &&
+      row.getCanSelectSubRows() &&
+      row.getIsAllSubRowsSelected())
+  );
+};
+
+export const getMRT_RowSelectionHandler =
+  <TData extends MRT_RowData>({
+    renderedRowIndex = 0,
+    row,
+    table,
+  }: {
+    renderedRowIndex?: number;
+    row: MRT_Row<TData>;
+    table: MRT_TableInstance<TData>;
+  }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>,
+    value?: boolean,
+  ) => {
+    const {
+      getState,
+      options: {
+        enableBatchRowSelection,
+        enableMultiRowSelection,
+        enableRowPinning,
+        manualPagination,
+        rowPinningDisplayMode,
+      },
+      refs: { lastSelectedRowId: lastSelectedRowId },
+    } = table;
+    const {
+      pagination: { pageIndex, pageSize },
+    } = getState();
+
+    const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
+
+    const wasCurrentRowChecked = getIsRowSelected({ row, table });
+
+    // toggle selection of this row
+    row.toggleSelected(value ?? !wasCurrentRowChecked);
+
+    const changedRowIds = new Set<string>([row.id]);
+
+    // if shift key is pressed, select all rows between last selected and this one
+    if (
+      enableBatchRowSelection &&
+      enableMultiRowSelection &&
+      (event as any).nativeEvent.shiftKey &&
+      lastSelectedRowId.current !== null
+    ) {
+      const rows = getMRT_Rows(table, true);
+
+      const lastIndex = rows.findIndex(
+        (r) => r.id === lastSelectedRowId.current,
+      );
+
+      if (lastIndex !== -1) {
+        const isLastIndexChecked = getIsRowSelected({
+          row: rows?.[lastIndex],
+          table,
+        });
+
+        const currentIndex = renderedRowIndex + paginationOffset;
+        const [start, end] =
+          lastIndex < currentIndex
+            ? [lastIndex, currentIndex]
+            : [currentIndex, lastIndex];
+
+        // toggle selection of all rows between last selected and this one
+        // but only if the last selected row is not the same as the current one
+        if (wasCurrentRowChecked !== isLastIndexChecked) {
+          for (let i = start; i <= end; i++) {
+            rows[i].toggleSelected(!wasCurrentRowChecked);
+            changedRowIds.add(rows[i].id);
+          }
+        }
+      }
+    }
+
+    // record the last selected row id
+    lastSelectedRowId.current = row.id;
+
+    // if all sub rows were selected, unselect them
+    if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
+      row.subRows?.forEach((r) => r.toggleSelected(false));
+    }
+
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      changedRowIds.forEach((rowId) => {
+        const rowToTogglePin = table.getRow(rowId);
+        rowToTogglePin.pin(
+          !wasCurrentRowChecked //was not previously pinned or selected
+            ? rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top'
+            : false,
+        );
+      });
+    }
+  };
+
+export const getMRT_SelectAllHandler =
+  <TData extends MRT_RowData>({ table }: { table: MRT_TableInstance<TData> }) =>
+  (
+    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
+    value?: boolean,
+    forceAll?: boolean,
+  ) => {
+    const {
+      options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
+      refs: { lastSelectedRowId },
+    } = table;
+
+    if (selectAllMode === 'all' || forceAll) {
+      table.toggleAllRowsSelected(value ?? (event as any).target.checked);
+    } else {
+      table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
+    }
+    if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+      table.setRowPinning({ bottom: [], top: [] });
+    }
+    lastSelectedRowId.current = null;
+  };

package/src/utils/snapshot.utils.ts

@@ -0,0 +1,97 @@
+import {
+  type MRT_Cell,
+  type MRT_Column,
+  type MRT_Header,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
+
+/**
+ * TanStack Table keeps one table, row, cell, column and header instance for as
+ * long as the data and column definitions stay the same. The React Compiler
+ * caches a call such as `row.getIsSelected()` on the identity of `row`, so a
+ * compiled consumer component would keep the first result forever.
+ *
+ * A view is a `Proxy` around the TanStack instance. Reads, writes, method
+ * calls and object spreads all reach the live instance, and only the identity
+ * is new. `useMantineReactTable` returns a new table view whenever table state
+ * or options change, and row, cell, column and header views are cached per
+ * table view, so they change exactly when the table does.
+ */
+const viewsByTable = new WeakMap<object, WeakMap<object, object>>();
+const targetsByView = new WeakMap<object, object>();
+
+/** Returns the TanStack instance behind a view, or the object itself. */
+export const getMRT_ViewTarget = <T extends object>(viewOrTarget: T): T =>
+  (targetsByView.get(viewOrTarget) as T | undefined) ?? viewOrTarget;
+
+/**
+ * Creates a view of a TanStack instance.
+ * @param overrides - properties the view answers itself instead of the instance
+ */
+export const createMRT_View = <T extends object>(
+  viewOrTarget: T,
+  overrides?: Partial<T>,
+): T => {
+  const target = getMRT_ViewTarget(viewOrTarget);
+  const view = new Proxy(
+    target,
+    overrides
+      ? {
+          get: (instance, key) =>
+            key in overrides
+              ? overrides[key as keyof T]
+              : instance[key as keyof T],
+        }
+      : {},
+  );
+  targetsByView.set(view, target);
+  return view;
+};
+
+const getView = <T extends object>(
+  table: object,
+  viewOrTarget: T,
+  getOverrides?: (target: T) => Partial<T>,
+): T => {
+  const target = getMRT_ViewTarget(viewOrTarget);
+  let views = viewsByTable.get(table);
+  if (!views) {
+    views = new WeakMap();
+    viewsByTable.set(table, views);
+  }
+  let view = views.get(target) as T | undefined;
+  if (!view) {
+    view = createMRT_View(target, getOverrides?.(target));
+    views.set(target, view);
+  }
+  return view;
+};
+
+export const getMRT_RowView = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  row: MRT_Row<TData>,
+): MRT_Row<TData> => getView(table, row);
+
+export const getMRT_ColumnView = <TData extends MRT_RowData, TValue = unknown>(
+  table: MRT_TableInstance<TData>,
+  column: MRT_Column<TData, TValue>,
+): MRT_Column<TData, TValue> => getView(table, column);
+
+export const getMRT_CellView = <TData extends MRT_RowData, TValue = unknown>(
+  table: MRT_TableInstance<TData>,
+  cell: MRT_Cell<TData, TValue>,
+): MRT_Cell<TData, TValue> =>
+  getView(table, cell, (target) => ({
+    column: getMRT_ColumnView(table, target.column),
+    row: getMRT_RowView(table, target.row),
+  }));
+
+export const getMRT_HeaderView = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  header: MRT_Header<TData>,
+): MRT_Header<TData> =>
+  getView(table, header, (target) => ({
+    column: getMRT_ColumnView(table, target.column),
+  }));

package/src/utils/style.utils.ts

@@ -0,0 +1,32 @@
+import { type MantineTheme } from '@mantine/core';
+
+import { type MantineShade } from '../types';
+
+export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const getPrimaryShade = (theme: MantineTheme): number =>
+  typeof theme.primaryShade === 'number'
+    ? theme.primaryShade
+    : (theme.primaryShade?.dark ?? 7);
+
+export const getPrimaryColor = (
+  theme: MantineTheme,
+  shade?: MantineShade,
+): string => theme.colors[theme.primaryColor][shade ?? getPrimaryShade(theme)];
+
+export function dataVariable(
+  name: string,
+  value: boolean | number | string | undefined,
+) {
+  const key = `data-${name}`;
+  switch (typeof value) {
+    case 'boolean':
+      return value ? { [key]: '' } : null;
+    case 'number':
+      return { [key]: `${value}` };
+    case 'string':
+      return { [key]: value };
+    default:
+      return null;
+  }
+}