@kissesses/mantine-react-table-open 9.0.3

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -0,0 +1,131 @@
+import clsx from 'clsx';
+
+import classes from './MRT_TableDetailPanel.module.css';
+
+import { type RefObject } from 'react';
+
+import { Collapse, TableTd, type TableTdProps, TableTr } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_RowVirtualizer,
+  type MRT_TableInstance,
+  type MRT_VirtualItem,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditCellTextInput } from '../inputs/MRT_EditCellTextInput';
+
+interface Props<TData extends MRT_RowData> extends TableTdProps {
+  parentRowRef: RefObject<HTMLTableRowElement | null>;
+  renderedRowIndex?: number;
+  row: MRT_Row<TData>;
+  rowVirtualizer?: MRT_RowVirtualizer;
+  striped?: false | string;
+  table: MRT_TableInstance<TData>;
+  virtualRow?: MRT_VirtualItem;
+}
+
+export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
+  parentRowRef,
+  renderedRowIndex = 0,
+  row,
+  rowVirtualizer,
+  striped,
+  table,
+  virtualRow,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    getVisibleLeafColumns,
+    options: {
+      layoutMode,
+      mantineDetailPanelProps,
+      mantineTableBodyRowProps,
+      renderDetailPanel,
+    },
+  } = table;
+  const { isLoading } = getState();
+
+  const tableRowProps = parseFromValuesOrFunc(mantineTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    table,
+  });
+
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(mantineDetailPanelProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
+
+  const internalEditComponents = row
+    .getAllCells()
+    .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+    .map((cell) => (
+      <MRT_EditCellTextInput cell={cell} key={cell.id} table={table} />
+    ));
+
+  const DetailPanel =
+    !isLoading &&
+    row.getIsExpanded() &&
+    renderDetailPanel?.({ internalEditComponents, row, table });
+
+  return (
+    <TableTr
+      data-index={
+        renderDetailPanel ? renderedRowIndex * 2 + 1 : renderedRowIndex
+      }
+      data-striped={striped}
+      ref={(node: HTMLTableRowElement) => {
+        if (node) {
+          rowVirtualizer?.measureElement?.(node);
+        }
+      }}
+      {...tableRowProps}
+      __vars={{
+        '--mrt-parent-row-height': virtualRow
+          ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
+          : undefined,
+        '--mrt-virtual-row-start': virtualRow
+          ? `${virtualRow.start}px`
+          : undefined,
+        ...tableRowProps?.__vars,
+      }}
+      className={clsx(
+        'mantine-Table-tr-detail-panel',
+        classes.root,
+        layoutMode?.startsWith('grid') && classes['root-grid'],
+        virtualRow && classes['root-virtual-row'],
+        tableRowProps?.className,
+      )}
+    >
+      <TableTd
+        colSpan={getVisibleLeafColumns().length}
+        component="td"
+        {...tableCellProps}
+        __vars={{
+          '--mrt-inner-width': `${table.getTotalSize()}px`,
+        }}
+        className={clsx(
+          'mantine-Table-td-detail-panel',
+          classes.inner,
+          layoutMode?.startsWith('grid') && classes['inner-grid'],
+          row.getIsExpanded() && classes['inner-expanded'],
+          virtualRow && classes['inner-virtual'],
+        )}
+        p={row.getIsExpanded() && DetailPanel ? 'md' : 0}
+      >
+        {rowVirtualizer ? (
+          row.getIsExpanded() && DetailPanel
+        ) : (
+          <Collapse expanded={row.getIsExpanded()}>{DetailPanel}</Collapse>
+        )}
+      </TableTd>
+    </TableTr>
+  );
+};

package/src/components/buttons/MRT_ColumnPinningButtons.module.css

@@ -0,0 +1,11 @@
+.root {
+  min-width: 70px;
+  align-content: center;
+  justify-content: center;
+  .left {
+    transform: rotate(90deg);
+  }
+  .right {
+    transform: rotate(-90deg);
+  }
+}

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ColumnPinningButtons.module.css';
+
+import { ActionIcon, Flex, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
+  column,
+  table,
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: {
+      icons: { IconPinned, IconPinnedOff },
+      localization,
+    },
+  } = table;
+  return (
+    <Flex className={clsx('mrt-column-pinning-buttons', classes.root)}>
+      {column.getIsPinned() ? (
+        <Tooltip label={localization.unpin} withinPortal>
+          <ActionIcon
+            color="gray"
+            onClick={() => column.pin(false)}
+            size="md"
+            variant="subtle"
+          >
+            <IconPinnedOff />
+          </ActionIcon>
+        </Tooltip>
+      ) : (
+        <>
+          <Tooltip label={localization.pinToLeft} withinPortal>
+            <ActionIcon
+              color="gray"
+              onClick={() => column.pin('left')}
+              size="md"
+              variant="subtle"
+            >
+              <IconPinned className={classes.left} />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label={localization.pinToRight} withinPortal>
+            <ActionIcon
+              color="gray"
+              onClick={() => column.pin('right')}
+              size="md"
+              variant="subtle"
+            >
+              <IconPinned className={classes.right} />
+            </ActionIcon>
+          </Tooltip>
+        </>
+      )}
+    </Flex>
+  );
+};

package/src/components/buttons/MRT_CopyButton.module.css

@@ -0,0 +1,27 @@
+.root {
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  color: inherit;
+  cursor: copy;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  justify-content: inherit;
+  letter-spacing: inherit;
+  margin: -4px;
+  min-width: unset;
+  padding: 4px;
+  text-align: inherit;
+  text-transform: inherit;
+  &:active {
+    transform: translateY(1px);
+  }
+  &:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--mantine-primary-color-filled-hover) 10%,
+      transparent
+    );
+  }
+}

package/src/components/buttons/MRT_CopyButton.tsx

@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+
+import classes from './MRT_CopyButton.module.css';
+
+import { type ReactNode } from 'react';
+
+import {
+  CopyButton,
+  Tooltip,
+  UnstyledButton,
+  type UnstyledButtonProps,
+} from '@mantine/core';
+
+import {
+  type MRT_Cell,
+  type MRT_CellValue,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends UnstyledButtonProps {
+  cell: MRT_Cell<TData, TValue>;
+  children: ReactNode;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_CopyButton = <TData extends MRT_RowData>({
+  cell,
+  children,
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    options: {
+      localization: { clickToCopy, copiedToClipboard },
+      mantineCopyButtonProps,
+    },
+  } = table;
+  const { column, row } = cell;
+  const { columnDef } = column;
+
+  const arg = { cell, column, row, table };
+  const buttonProps = {
+    ...parseFromValuesOrFunc(mantineCopyButtonProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineCopyButtonProps, arg),
+    ...rest,
+  };
+
+  return (
+    <CopyButton value={cell.getValue<string>()}>
+      {({ copied, copy }) => (
+        <Tooltip
+          color={copied ? 'green' : undefined}
+          label={
+            buttonProps?.title ?? (copied ? copiedToClipboard : clickToCopy)
+          }
+          openDelay={1000}
+          withinPortal
+        >
+          <UnstyledButton
+            {...buttonProps}
+            className={clsx(
+              'mrt-copy-button',
+              classes.root,
+              buttonProps?.className,
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              copy();
+            }}
+            role="presentation"
+            title={undefined}
+          >
+            {children}
+          </UnstyledButton>
+        </Tooltip>
+      )}
+    </CopyButton>
+  );
+};

package/src/components/buttons/MRT_EditActionButtons.module.css

@@ -0,0 +1,4 @@
+.root {
+  display: flex;
+  gap: var(--mantine-spacing-xs);
+}

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -0,0 +1,128 @@
+import clsx from 'clsx';
+
+import classes from './MRT_EditActionButtons.module.css';
+
+import { ActionIcon, Box, type BoxProps, Button, Tooltip } from '@mantine/core';
+
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  variant?: 'icon' | 'text';
+}
+
+export const MRT_EditActionButtons = <TData extends MRT_RowData>({
+  row,
+  table,
+  variant = 'icon',
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getState,
+    options: {
+      icons: { IconCircleX, IconDeviceFloppy },
+      localization,
+      onCreatingRowCancel,
+      onCreatingRowSave,
+      onEditingRowCancel,
+      onEditingRowSave,
+    },
+    refs: { editInputRefs },
+    setCreatingRow,
+    setEditingRow,
+  } = table;
+  const { creatingRow, editingRow, isSaving } = getState();
+
+  const isCreating = creatingRow?.id === row.id;
+  const isEditing = editingRow?.id === row.id;
+
+  const handleCancel = () => {
+    if (isCreating) {
+      onCreatingRowCancel?.({ row, table });
+      setCreatingRow(null);
+    } else if (isEditing) {
+      onEditingRowCancel?.({ row, table });
+      setEditingRow(null);
+    }
+    row._valuesCache = {} as any; //reset values cache
+  };
+
+  const handleSubmitRow = () => {
+    //look for auto-filled input values
+    Object.values(editInputRefs?.current)
+      .filter((inputRef) => row.id === inputRef?.name?.split('_')?.[0])
+      ?.forEach((input) => {
+        if (
+          input.value !== undefined &&
+          Object.hasOwn(row?._valuesCache as object, input.name)
+        ) {
+          // @ts-ignore
+          row._valuesCache[input.name] = input.value;
+        }
+      });
+    if (isCreating)
+      onCreatingRowSave?.({
+        exitCreatingMode: () => setCreatingRow(null),
+        row,
+        table,
+        values: row._valuesCache,
+      });
+    else if (isEditing) {
+      onEditingRowSave?.({
+        exitEditingMode: () => setEditingRow(null),
+        row,
+        table,
+        values: row?._valuesCache,
+      });
+    }
+  };
+
+  return (
+    <Box
+      className={clsx('mrt-edit-action-buttons', classes.root)}
+      onClick={(e) => e.stopPropagation()}
+      {...rest}
+    >
+      {variant === 'icon' ? (
+        <>
+          <Tooltip label={localization.cancel} withinPortal>
+            <ActionIcon
+              aria-label={localization.cancel}
+              color="red"
+              onClick={handleCancel}
+              variant="subtle"
+            >
+              <IconCircleX />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label={localization.save} withinPortal>
+            <ActionIcon
+              aria-label={localization.save}
+              color="blue"
+              loading={isSaving}
+              onClick={handleSubmitRow}
+              variant="subtle"
+            >
+              <IconDeviceFloppy />
+            </ActionIcon>
+          </Tooltip>
+        </>
+      ) : (
+        <>
+          <Button onClick={handleCancel} variant="subtle">
+            {localization.cancel}
+          </Button>
+          <Button loading={isSaving} onClick={handleSubmitRow} variant="filled">
+            {localization.save}
+          </Button>
+        </>
+      )}
+    </Box>
+  );
+};

package/src/components/buttons/MRT_ExpandAllButton.module.css

@@ -0,0 +1,26 @@
+.root {
+  margin-left: 6px;
+  opacity: 0.8;
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
+  &:hover {
+    opacity: 1;
+  }
+  &:global(.xl) {
+    margin-left: -6px;
+  }
+  &:global(.md) {
+    margin-left: 0;
+  }
+  .chevron {
+    transition: transform 150ms;
+    &.up {
+      transform: rotate(-180deg);
+    }
+    &.right {
+      transform: rotate(-90deg);
+    }
+  }
+}

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -0,0 +1,83 @@
+import clsx from 'clsx';
+
+import classes from './MRT_ExpandAllButton.module.css';
+
+import { ActionIcon, type ActionIconProps, Tooltip } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  'use no memo';
+  const {
+    getCanSomeRowsExpand,
+    getIsAllRowsExpanded,
+    getIsSomeRowsExpanded,
+    getState,
+    options: {
+      icons: { IconChevronsDown },
+      localization,
+      mantineExpandAllButtonProps,
+      renderDetailPanel,
+    },
+    toggleAllRowsExpanded,
+  } = table;
+  const { density, isLoading } = getState();
+
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineExpandAllButtonProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const isAllRowsExpanded = getIsAllRowsExpanded();
+
+  return (
+    <Tooltip
+      label={
+        (actionIconProps?.title ?? isAllRowsExpanded)
+          ? localization.collapseAll
+          : localization.expandAll
+      }
+      openDelay={1000}
+      withinPortal
+    >
+      <ActionIcon
+        aria-label={localization.expandAll}
+        color="gray"
+        variant="subtle"
+        {...actionIconProps}
+        className={clsx(
+          'mrt-expand-all-button',
+          classes.root,
+          actionIconProps?.className,
+          density,
+        )}
+        disabled={isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())}
+        onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
+        title={undefined}
+      >
+        {actionIconProps?.children ?? (
+          <IconChevronsDown
+            className={clsx(
+              classes.chevron,
+              isAllRowsExpanded
+                ? classes.up
+                : getIsSomeRowsExpanded()
+                  ? classes.right
+                  : undefined,
+            )}
+          />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+};

package/src/components/buttons/MRT_ExpandButton.module.css

@@ -0,0 +1,37 @@
+.root {
+  opacity: 0.8;
+  &:disabled {
+    background-color: transparent;
+    border: none;
+    opacity: 0.3;
+  }
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.root-ltr {
+  margin-left: calc(calc(var(--mrt-row-depth, 0)) * 16px);
+  .chevron {
+    transition: transform 200ms;
+    &.right {
+      transform: rotate(270deg);
+    }
+    &.up {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.root-rtl {
+  margin-right: calc(calc(var(--mrt-row-depth, 0)) * 16px);
+  .chevron {
+    transition: transform 200ms;
+    &.right {
+      transform: rotate(-270deg);
+    }
+    &.up {
+      transform: rotate(180deg);
+    }
+  }
+}