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

package/src/components/table/MRT_TableContainer.tsx

@@ -0,0 +1,124 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableContainer.module.css';
+
+import { useEffect, useLayoutEffect, useState } from 'react';
+
+import { Box, type BoxProps, LoadingOverlay } from '@mantine/core';
+
+import { MRT_Table } from './MRT_Table';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableContainer = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      createDisplayMode,
+      editDisplayMode,
+      enableStickyHeader,
+      mantineLoadingOverlayProps,
+      mantineTableContainerProps,
+      withScrollArea,
+    },
+    refs: { bottomToolbarRef, tableContainerRef, tableHeadRef, topToolbarRef },
+  } = table;
+  const {
+    creatingRow,
+    density,
+    editingRow,
+    isFullScreen,
+    isLoading,
+    showLoadingOverlay,
+  } = getState();
+
+  const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+
+  const tableContainerProps = {
+    ...parseFromValuesOrFunc(mantineTableContainerProps, { table }),
+    ...rest,
+  };
+  const loadingOverlayProps = parseFromValuesOrFunc(
+    mantineLoadingOverlayProps,
+    { table },
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    const topToolbarHeight =
+      typeof document !== 'undefined'
+        ? (topToolbarRef.current?.offsetHeight ?? 0)
+        : 0;
+
+    const bottomToolbarHeight =
+      typeof document !== 'undefined'
+        ? (bottomToolbarRef?.current?.offsetHeight ?? 0)
+        : 0;
+
+    setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+  }); //no dependency list: the bottom toolbar ref attaches after this effect first runs
+
+  useIsomorphicLayoutEffect(() => {
+    const setOffset = () => {
+      const offset =
+        typeof document !== 'undefined'
+          ? (tableHeadRef?.current?.offsetHeight ?? 0)
+          : 0;
+      setScrollOffset(offset);
+    };
+
+    setOffset();
+    const timeout = setTimeout(setOffset, 150);
+    return () => clearTimeout(timeout);
+  }, [tableHeadRef?.current?.offsetHeight, density]);
+
+  const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+  const editModalOpen = editDisplayMode === 'modal' && editingRow;
+
+  return (
+    <Box
+      {...tableContainerProps}
+      __vars={{
+        '--mrt-scroll-offset': `${scrollOffset}px`,
+        '--mrt-top-toolbar-height': `${totalToolbarHeight}`,
+        ...tableContainerProps?.__vars,
+      }}
+      className={clsx(
+        'mrt-table-container',
+        classes.root,
+        enableStickyHeader && classes['root-sticky'],
+        isFullScreen && classes['root-fullscreen'],
+        withScrollArea && classes['root-scroll-area'],
+        tableContainerProps?.className,
+      )}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          tableContainerRef.current = node;
+          assignRef(tableContainerProps?.ref, node);
+        }
+      }}
+    >
+      <LoadingOverlay
+        visible={isLoading || showLoadingOverlay}
+        zIndex={2}
+        {...loadingOverlayProps}
+      />
+      <MRT_Table table={table} />
+      {(createModalOpen || editModalOpen) && (
+        <MRT_EditRowModal open table={table} />
+      )}
+    </Box>
+  );
+};

package/src/components/table/MRT_TablePaper.module.css

@@ -0,0 +1,88 @@
+:root {
+  /* default background color for everything */
+  --mrt-base-background-color: var(--mantine-color-body);
+
+  @mixin light-root {
+    --mrt-striped-row-background-color: darken(
+      var(--mrt-base-background-color),
+      0.05
+    );
+  }
+  @mixin dark-root {
+    --mrt-striped-row-background-color: lighten(
+      var(--mrt-base-background-color),
+      0.04
+    );
+  }
+
+  /* row hover */
+  @mixin light-root {
+    --mrt-row-hover-background-color: darken(
+      var(--mrt-base-background-color),
+      0.08
+    );
+    --mrt-striped-row-hover-background-color: darken(
+      var(--mrt-striped-row-background-color),
+      0.12
+    );
+  }
+  @mixin dark-root {
+    --mrt-row-hover-background-color: lighten(
+      var(--mrt-base-background-color),
+      0.08
+    );
+    --mrt-striped-row-hover-background-color: lighten(
+      var(--mrt-striped-row-background-color),
+      0.08
+    );
+  }
+
+  /* row selection */
+  --mrt-selected-row-background-color: alpha(
+    var(--mantine-primary-color-light),
+    0.8
+  );
+  @mixin light-root {
+    --mrt-selected-row-hover-background-color: darken(
+      var(--mantine-primary-color-light-hover),
+      0.05
+    );
+  }
+  @mixin dark-root {
+    --mrt-selected-row-hover-background-color: lighten(
+      var(--mantine-primary-color-light-hover),
+      0.05
+    );
+  }
+
+  /* row pinning */
+  --mrt-pinned-row-background-color: var(--mrt-selected-row-background-color);
+  --mrt-pinned-row-hover-background-color: var(
+    --mrt-selected-row-hover-background-color
+  );
+
+  /* column pinning */
+  @mixin light-root {
+    --mrt-pinned-column-background-color: darken(
+      var(--mrt-base-background-color),
+      0.01
+    );
+  }
+  @mixin dark-root {
+    --mrt-pinned-column-background-color: darken(
+      var(--mrt-base-background-color),
+      0.05
+    );
+  }
+
+  /* cell borders */
+  --mrt-dragging-hovered-border-color: var(--mantine-primary-color-filled);
+  --mrt-dragging-drag-border-color: var(--mantine-color-gray-7);
+  --mrt-resize-column-border-color: var(--mantine-primary-color-filled);
+}
+
+.root {
+  background-color: var(--mrt-base-background-color);
+  overflow: hidden;
+  transition: all 150ms ease-in-out;
+}

package/src/components/table/MRT_TablePaper.tsx

@@ -0,0 +1,91 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TablePaper.module.css';
+
+import { Paper, type PaperProps } from '@mantine/core';
+
+import { MRT_TableContainer } from './MRT_TableContainer';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
+import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
+
+interface Props<TData extends MRT_RowData> extends PaperProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePaper = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      enableBottomToolbar,
+      enableTopToolbar,
+      mantinePaperProps,
+      renderBottomToolbar,
+      renderTopToolbar,
+    },
+    refs: { tablePaperRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const tablePaperProps = {
+    ...parseFromValuesOrFunc(mantinePaperProps, { table }),
+    ...rest,
+  };
+
+  return (
+    <Paper
+      shadow="xs"
+      withBorder
+      {...tablePaperProps}
+      className={clsx(
+        'mrt-table-paper',
+        classes.root,
+        isFullScreen && 'mrt-table-paper-fullscreen',
+        tablePaperProps?.className,
+      )}
+      ref={(ref: HTMLDivElement) => {
+        tablePaperRef.current = ref;
+        assignRef(tablePaperProps?.ref, ref);
+      }}
+      // rare case where we should use inline styles to guarantee highest specificity
+      style={(theme) => ({
+        zIndex: isFullScreen ? 200 : undefined,
+        ...parseFromValuesOrFunc(tablePaperProps?.style, theme),
+        ...(isFullScreen
+          ? {
+              border: 0,
+              borderRadius: 0,
+              bottom: 0,
+              height: '100vh',
+              left: 0,
+              margin: 0,
+              maxHeight: '100vh',
+              maxWidth: '100vw',
+              padding: 0,
+              position: 'fixed',
+              right: 0,
+              top: 0,
+              width: '100vw',
+            }
+          : null),
+      })}
+    >
+      {enableTopToolbar &&
+        (parseFromValuesOrFunc(renderTopToolbar, { table }) ?? (
+          <MRT_TopToolbar table={table} />
+        ))}
+      <MRT_TableContainer table={table} />
+      {enableBottomToolbar &&
+        (parseFromValuesOrFunc(renderBottomToolbar, { table }) ?? (
+          <MRT_BottomToolbar table={table} />
+        ))}
+    </Paper>
+  );
+};

package/src/components/toolbar/MRT_BottomToolbar.module.css

@@ -0,0 +1,40 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  border-top: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  bottom: var(--mrt-bottom-toolbar-bottom);
+  box-shadow: 0 1px 2px -1px color-mix(
+      in srgb,
+      var(--mantine-color-black) 10%,
+      transparent
+    ) inset;
+  left: 0;
+  right: 0;
+  position: relative;
+}
+
+.root-fullscreen {
+  position: fixed !important;
+  bottom: 0;
+}
+
+.custom-toolbar-container {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: rem(8px);
+  width: 100%;
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: flex-end;
+  right: 0;
+  top: 0;
+  position: absolute;
+}
+
+.paginator-container-alert-banner {
+  position: relative !important;
+}

package/src/components/toolbar/MRT_BottomToolbar.tsx

@@ -0,0 +1,99 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import commonClasses from './common.styles.module.css';
+import classes from './MRT_BottomToolbar.module.css';
+
+import { Box, type BoxProps } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+
+import { MRT_ProgressBar } from './MRT_ProgressBar';
+import { MRT_TablePagination } from './MRT_TablePagination';
+import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
+import { MRT_ToolbarDropZone } from './MRT_ToolbarDropZone';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_BottomToolbar = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      enablePagination,
+      mantineBottomToolbarProps,
+      positionPagination,
+      positionToolbarAlertBanner,
+      positionToolbarDropZone,
+      renderBottomToolbarCustomActions,
+    },
+    refs: { bottomToolbarRef },
+  } = table;
+  const { isFullScreen } = getState();
+
+  const isMobile = useMediaQuery('(max-width: 720px)');
+
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(mantineBottomToolbarProps, {
+      table,
+    }),
+    ...rest,
+  };
+
+  const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+
+  return (
+    <Box
+      {...toolbarProps}
+      className={clsx(
+        'mrt-bottom-toolbar',
+        classes.root,
+        commonClasses['common-toolbar-styles'],
+        isFullScreen && classes['root-fullscreen'],
+        toolbarProps?.className,
+      )}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          bottomToolbarRef.current = node;
+          assignRef(toolbarProps?.ref, node);
+        }
+      }}
+    >
+      <MRT_ProgressBar isTopToolbar={false} table={table} />
+      {positionToolbarAlertBanner === 'bottom' && (
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
+      )}
+      {['both', 'bottom'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
+      <Box className={classes['custom-toolbar-container']}>
+        {renderBottomToolbarCustomActions ? (
+          renderBottomToolbarCustomActions({ table })
+        ) : (
+          <span />
+        )}
+        <Box
+          className={clsx(
+            classes['paginator-container'],
+            stackAlertBanner && classes['paginator-container-alert-banner'],
+          )}
+        >
+          {enablePagination &&
+            ['both', 'bottom'].includes(positionPagination ?? '') && (
+              <MRT_TablePagination position="bottom" table={table} />
+            )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/toolbar/MRT_ProgressBar.module.css

@@ -0,0 +1,10 @@
+.collapse {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+
+.collapse-top {
+  bottom: 0;
+  top: unset;
+}

package/src/components/toolbar/MRT_ProgressBar.tsx

@@ -0,0 +1,54 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ProgressBar.module.css';
+
+import { Collapse, Progress, type ProgressProps } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends Partial<ProgressProps> {
+  isTopToolbar: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ProgressBar = <TData extends MRT_RowData>({
+  isTopToolbar,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { mantineProgressProps },
+  } = table;
+  const { isSaving, showProgressBars } = getState();
+
+  const linearProgressProps = {
+    ...parseFromValuesOrFunc(mantineProgressProps, {
+      isTopToolbar,
+      table,
+    }),
+    ...rest,
+  };
+
+  return (
+    <Collapse
+      className={clsx(
+        classes.collapse,
+        isTopToolbar && classes['collapse-top'],
+      )}
+      expanded={isSaving || showProgressBars}
+    >
+      <Progress
+        animated
+        aria-busy="true"
+        aria-label="Loading"
+        radius={0}
+        value={100}
+        {...linearProgressProps}
+      />
+    </Collapse>
+  );
+};

package/src/components/toolbar/MRT_TablePagination.module.css

@@ -0,0 +1,20 @@
+.root {
+  display: flex;
+  z-index: 2;
+  gap: var(--mantine-spacing-lg);
+  align-items: center;
+  justify-content: space-between;
+  padding-right: var(--mantine-spacing-sm);
+  padding-left: var(--mantine-spacing-sm);
+  padding-top: var(--mantine-spacing-xs);
+  padding-bottom: var(--mantine-spacing-xs);
+  .pagesize {
+    input {
+      width: calc(5rem * var(--mantine-scale));
+    }
+  }
+}
+
+.with-top-margin {
+  margin-top: 3rem;
+}

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -0,0 +1,175 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TablePagination.module.css';
+
+import {
+  ActionIcon,
+  Box,
+  extractStyleProps,
+  Group,
+  Pagination,
+  type PaginationProps,
+  Select,
+  Text,
+} from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100].map((x) =>
+  x.toString(),
+);
+
+interface Props<TData extends MRT_RowData> extends Partial<PaginationProps> {
+  position?: 'bottom' | 'top';
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TablePagination = <TData extends MRT_RowData>({
+  position = 'bottom',
+  table,
+  ...props
+}: Props<TData>) => {
+  const {
+    getPrePaginationRowModel,
+    getState,
+    options: {
+      enableToolbarInternalActions,
+      icons: {
+        IconChevronLeft,
+        IconChevronLeftPipe,
+        IconChevronRight,
+        IconChevronRightPipe,
+      },
+      localization,
+      mantinePaginationProps,
+      paginationDisplayMode,
+      rowCount,
+    },
+    setPageIndex,
+    setPageSize,
+  } = table;
+  const {
+    pagination: { pageIndex = 0, pageSize = 10 },
+    showGlobalFilter,
+  } = getState();
+
+  const paginationProps = {
+    ...parseFromValuesOrFunc(mantinePaginationProps, {
+      table,
+    }),
+    ...props,
+  };
+
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+  const numberOfPages = Math.ceil(totalRowCount / pageSize);
+  const showFirstLastPageButtons = numberOfPages > 2;
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  const {
+    rowsPerPageOptions = defaultRowsPerPage,
+    showRowsPerPage = true,
+    withEdges = showFirstLastPageButtons,
+    ...rest
+  } = paginationProps ?? {};
+
+  const needsTopMargin =
+    position === 'top' && enableToolbarInternalActions && !showGlobalFilter;
+
+  //the 'pages' mode passes these to the Mantine Pagination component instead
+  const isDefaultDisplayMode = paginationDisplayMode === 'default';
+  const { styleProps } = extractStyleProps(rest);
+
+  return (
+    <Box
+      {...(isDefaultDisplayMode ? styleProps : undefined)}
+      className={clsx(
+        'mrt-table-pagination',
+        classes.root,
+        needsTopMargin && classes['with-top-margin'],
+        isDefaultDisplayMode && rest.className,
+      )}
+      style={isDefaultDisplayMode ? rest.style : undefined}
+    >
+      {paginationProps?.showRowsPerPage !== false && (
+        <Group gap="xs">
+          <Text id="rpp-label">{localization.rowsPerPage}</Text>
+          <Select
+            allowDeselect={false}
+            aria-labelledby="rpp-label"
+            className={classes.pagesize}
+            data={paginationProps?.rowsPerPageOptions ?? defaultRowsPerPage}
+            onChange={(value: null | string) => setPageSize(+(value as string))}
+            value={pageSize.toString()}
+          />
+        </Group>
+      )}
+      {paginationDisplayMode === 'pages' ? (
+        <Pagination
+          firstIcon={IconChevronLeftPipe}
+          lastIcon={IconChevronRightPipe}
+          nextIcon={IconChevronRight}
+          onChange={(newPageIndex) => setPageIndex(newPageIndex - 1)}
+          previousIcon={IconChevronLeft}
+          total={numberOfPages}
+          value={pageIndex + 1}
+          withEdges={withEdges}
+          {...rest}
+        />
+      ) : paginationDisplayMode === 'default' ? (
+        <>
+          <Text>{`${
+            lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+          }-${lastRowIndex.toLocaleString()} ${
+            localization.of
+          } ${totalRowCount.toLocaleString()}`}</Text>
+          <Group gap={6}>
+            {withEdges && (
+              <ActionIcon
+                aria-label={localization.goToFirstPage}
+                color="gray"
+                disabled={pageIndex <= 0}
+                onClick={() => setPageIndex(0)}
+                variant="subtle"
+              >
+                <IconChevronLeftPipe />
+              </ActionIcon>
+            )}
+            <ActionIcon
+              aria-label={localization.goToPreviousPage}
+              color="gray"
+              disabled={pageIndex <= 0}
+              onClick={() => setPageIndex(pageIndex - 1)}
+              variant="subtle"
+            >
+              <IconChevronLeft />
+            </ActionIcon>
+            <ActionIcon
+              aria-label={localization.goToNextPage}
+              color="gray"
+              disabled={lastRowIndex >= totalRowCount}
+              onClick={() => setPageIndex(pageIndex + 1)}
+              variant="subtle"
+            >
+              <IconChevronRight />
+            </ActionIcon>
+            {withEdges && (
+              <ActionIcon
+                aria-label={localization.goToLastPage}
+                color="gray"
+                disabled={lastRowIndex >= totalRowCount}
+                onClick={() => setPageIndex(numberOfPages - 1)}
+                variant="subtle"
+              >
+                <IconChevronRightPipe />
+              </ActionIcon>
+            )}
+          </Group>
+        </>
+      ) : null}
+    </Box>
+  );
+};