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

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

@@ -0,0 +1,37 @@
+.alert {
+  border-radius: 0;
+  font-size: 1rem;
+  left: 0;
+  position: relative;
+  padding: rem(8px);
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.alert-stacked {
+  margin-bottom: 0;
+}
+
+.alert-bottom {
+  margin-bottom: -16px;
+}
+
+.alert-badge {
+  margin-left: 1ch;
+}
+
+.toolbar-alert {
+  gap: var(--mantine-spacing-sm);
+  padding: 8px 16px;
+  &.head-overlay {
+    padding: 2px;
+    &:global(.xl) {
+      padding: 16px;
+    }
+    &:global(.md) {
+      padding: 8px;
+    }
+  }
+}

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -0,0 +1,169 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ToolbarAlertBanner.module.css';
+
+import { Fragment, useMemo } from 'react';
+
+import {
+  ActionIcon,
+  Alert,
+  type AlertProps,
+  Badge,
+  Button,
+  Collapse,
+  Flex,
+  Stack,
+} from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getMRT_SelectAllHandler } from '../../utils/row.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
+
+interface Props<TData extends MRT_RowData> extends Partial<AlertProps> {
+  stackAlertBanner?: boolean;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
+  stackAlertBanner,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getFilteredSelectedRowModel,
+    getPrePaginationRowModel,
+    getState,
+    options: {
+      enableRowSelection,
+      enableSelectAll,
+      icons: { IconX },
+      localization,
+      mantineToolbarAlertBannerBadgeProps,
+      mantineToolbarAlertBannerProps,
+      manualPagination,
+      positionToolbarAlertBanner,
+      renderToolbarAlertBannerContent,
+      rowCount,
+    },
+  } = table;
+  const { density, grouping, rowSelection, showAlertBanner } = getState();
+
+  const alertProps = {
+    ...parseFromValuesOrFunc(mantineToolbarAlertBannerProps, {
+      table,
+    }),
+    ...rest,
+  };
+  const badgeProps = parseFromValuesOrFunc(
+    mantineToolbarAlertBannerBadgeProps,
+    { table },
+  );
+
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().flatRows.length;
+
+  const selectedRowCount = useMemo(
+    () =>
+      manualPagination
+        ? Object.values(rowSelection).filter(Boolean).length
+        : getFilteredSelectedRowModel().rows.length,
+    [rowSelection, totalRowCount, manualPagination],
+  );
+
+  const selectedAlert = selectedRowCount ? (
+    <Flex align="center" gap="sm">
+      {localization.selectedCountOfRowCountRowsSelected
+        ?.replace('{selectedCount}', selectedRowCount.toString())
+        ?.replace('{rowCount}', totalRowCount.toString())}
+      <Button
+        onClick={(event) =>
+          getMRT_SelectAllHandler({ table })(event, false, true)
+        }
+        size="compact-xs"
+        variant="subtle"
+      >
+        {localization.clearSelection}
+      </Button>
+    </Flex>
+  ) : null;
+
+  const groupedAlert =
+    grouping.length > 0 ? (
+      <Flex>
+        {localization.groupedBy}{' '}
+        {grouping.map((columnId, index) => (
+          <Fragment key={`${index}-${columnId}`}>
+            {index > 0 ? localization.thenBy : ''}
+            <Badge
+              className={classes['alert-badge']}
+              rightSection={
+                <ActionIcon
+                  color="white"
+                  onClick={() => table.getColumn(columnId).toggleGrouping()}
+                  size="xs"
+                  variant="subtle"
+                >
+                  <IconX style={{ transform: 'scale(0.8)' }} />
+                </ActionIcon>
+              }
+              variant="filled"
+              {...badgeProps}
+            >
+              {table.getColumn(columnId).columnDef.header}{' '}
+            </Badge>
+          </Fragment>
+        ))}
+      </Flex>
+    ) : null;
+
+  return (
+    <Collapse
+      expanded={showAlertBanner || !!selectedAlert || !!groupedAlert}
+      transitionDuration={stackAlertBanner ? 200 : 0}
+    >
+      <Alert
+        color="blue"
+        icon={false}
+        {...alertProps}
+        className={clsx(
+          classes.alert,
+          stackAlertBanner &&
+            !positionToolbarAlertBanner &&
+            classes['alert-stacked'],
+          !stackAlertBanner &&
+            positionToolbarAlertBanner === 'bottom' &&
+            classes['alert-bottom'],
+          alertProps?.className,
+        )}
+      >
+        {renderToolbarAlertBannerContent?.({
+          groupedAlert,
+          selectedAlert,
+          table,
+        }) ?? (
+          <Flex
+            className={clsx(
+              classes['toolbar-alert'],
+              positionToolbarAlertBanner === 'head-overlay' &&
+                classes['head-overlay'],
+              density,
+            )}
+          >
+            {enableRowSelection &&
+              enableSelectAll &&
+              positionToolbarAlertBanner === 'head-overlay' && (
+                <MRT_SelectCheckbox table={table} />
+              )}
+            <Stack>
+              {alertProps?.children}
+              {selectedAlert}
+              {groupedAlert}
+            </Stack>
+          </Flex>
+        )}
+      </Alert>
+    </Collapse>
+  );
+};

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

@@ -0,0 +1,23 @@
+.root {
+  align-items: center;
+
+  border: dashed var(--mantine-primary-color-filled) 2px;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 2;
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-primary-color-filled) 10%,
+    transparent
+  );
+}
+
+.hovered {
+  background-color: color-mix(
+    in srgb,
+    var(--mantine-primary-color-filled) 20%,
+    transparent
+  );
+}

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -0,0 +1,68 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ToolbarDropZone.module.css';
+
+import { type DragEvent, useEffect } from 'react';
+
+import { Flex, type FlexProps, Text, Transition } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+interface Props<TData extends MRT_RowData> extends FlexProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableGrouping, localization },
+    setHoveredColumn,
+    setShowToolbarDropZone,
+  } = table;
+
+  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
+    getState();
+
+  const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
+    setHoveredColumn({ id: 'drop-zone' });
+  };
+
+  useEffect(() => {
+    if (table.options.state?.showToolbarDropZone !== undefined) {
+      setShowToolbarDropZone(
+        !!enableGrouping &&
+          !!draggingColumn &&
+          draggingColumn.columnDef.enableGrouping !== false &&
+          !grouping.includes(draggingColumn.id),
+      );
+    }
+  }, [enableGrouping, draggingColumn, grouping]);
+
+  return (
+    <Transition mounted={showToolbarDropZone} transition="fade">
+      {() => (
+        <Flex
+          className={clsx(
+            'mrt-toolbar-dropzone',
+            classes.root,
+            hoveredColumn?.id === 'drop-zone' && classes.hovered,
+          )}
+          onDragEnter={handleDragEnter}
+          {...rest}
+        >
+          <Text>
+            {localization.dropToGroupBy.replace(
+              '{column}',
+              draggingColumn?.columnDef?.header ?? '',
+            )}
+          </Text>
+        </Flex>
+      )}
+    </Transition>
+  );
+};

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

@@ -0,0 +1,6 @@
+.root {
+  align-items: center;
+  gap: 2px;
+  z-index: 3;
+  margin-left: 4px;
+}

package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -0,0 +1,74 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_ToolbarInternalButtons.module.css';
+
+import { Flex, type FlexProps } from '@mantine/core';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { MRT_ShowHideColumnsButton } from '../buttons/MRT_ShowHideColumnsButton';
+import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
+import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
+
+interface Props<TData extends MRT_RowData> extends FlexProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      columnFilterDisplayMode,
+      enableColumnFilters,
+      enableColumnOrdering,
+      enableColumnPinning,
+      enableDensityToggle,
+      enableFilters,
+      enableFullScreenToggle,
+      enableGlobalFilter,
+      enableHiding,
+      initialState,
+      renderToolbarInternalActions,
+    },
+  } = table;
+
+  return (
+    <Flex
+      {...rest}
+      className={clsx(
+        'mrt-toolbar-internal-buttons',
+        classes.root,
+        rest?.className,
+      )}
+    >
+      {renderToolbarInternalActions?.({ table }) ?? (
+        <>
+          {enableFilters &&
+            enableGlobalFilter &&
+            !initialState?.showGlobalFilter && (
+              <MRT_ToggleGlobalFilterButton table={table} />
+            )}
+          {enableFilters &&
+            enableColumnFilters &&
+            columnFilterDisplayMode !== 'popover' && (
+              <MRT_ToggleFiltersButton table={table} />
+            )}
+          {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
+            <MRT_ShowHideColumnsButton table={table} />
+          )}
+          {enableDensityToggle && (
+            <MRT_ToggleDensePaddingButton table={table} />
+          )}
+          {enableFullScreenToggle && (
+            <MRT_ToggleFullScreenButton table={table} />
+          )}
+        </>
+      )}
+    </Flex>
+  );
+};

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

@@ -0,0 +1,24 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  position: relative;
+}
+
+.root-fullscreen {
+  position: sticky !important;
+  top: 0;
+}
+
+.actions-container {
+  align-items: flex-start;
+  box-sizing: border-box;
+  justify-content: space-between;
+  padding: rem(8px);
+  right: 0;
+  top: 0;
+  width: 100%;
+  position: absolute;
+}
+
+.actions-container-stack-alert {
+  position: relative !important;
+}

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -0,0 +1,127 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import commonClasses from './common.styles.module.css';
+import classes from './MRT_TopToolbar.module.css';
+
+import { Box, type BoxProps, Flex } 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 { MRT_ToolbarInternalButtons } from './MRT_ToolbarInternalButtons';
+
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { assignRef, parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GlobalFilterTextInput } from '../inputs/MRT_GlobalFilterTextInput';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TopToolbar = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      enableGlobalFilter,
+      enablePagination,
+      enableToolbarInternalActions,
+      mantineTopToolbarProps,
+      positionGlobalFilter,
+      positionPagination,
+      positionToolbarAlertBanner,
+      positionToolbarDropZone,
+      renderTopToolbarCustomActions,
+    },
+    refs: { topToolbarRef },
+  } = table;
+
+  const { isFullScreen, showGlobalFilter } = getState();
+
+  const isMobile = useMediaQuery('(max-width:720px)');
+  const isTablet = useMediaQuery('(max-width:1024px)');
+
+  const toolbarProps = {
+    ...parseFromValuesOrFunc(mantineTopToolbarProps, { table }),
+    ...rest,
+  };
+
+  const stackAlertBanner =
+    isMobile ||
+    !!renderTopToolbarCustomActions ||
+    (showGlobalFilter && isTablet);
+
+  const globalFilterProps = {
+    style: !isTablet
+      ? {
+          zIndex: 3,
+        }
+      : undefined,
+    table,
+  };
+
+  return (
+    <Box
+      {...toolbarProps}
+      className={clsx(
+        commonClasses['common-toolbar-styles'],
+        classes['root'],
+        isFullScreen && classes['root-fullscreen'],
+        toolbarProps?.className,
+      )}
+      ref={(node: HTMLDivElement) => {
+        if (node) {
+          topToolbarRef.current = node;
+          assignRef(toolbarProps?.ref, node);
+        }
+      }}
+    >
+      {positionToolbarAlertBanner === 'top' && (
+        <MRT_ToolbarAlertBanner
+          stackAlertBanner={stackAlertBanner}
+          table={table}
+        />
+      )}
+      {['both', 'top'].includes(positionToolbarDropZone ?? '') && (
+        <MRT_ToolbarDropZone table={table} />
+      )}
+      <Flex
+        className={clsx(
+          classes['actions-container'],
+          stackAlertBanner && classes['actions-container-stack-alert'],
+        )}
+      >
+        {enableGlobalFilter && positionGlobalFilter === 'left' && (
+          <MRT_GlobalFilterTextInput {...globalFilterProps} />
+        )}
+        {renderTopToolbarCustomActions?.({ table }) ?? <span />}
+        {enableToolbarInternalActions ? (
+          <Flex justify={'end'} wrap={'wrap-reverse'}>
+            {enableGlobalFilter && positionGlobalFilter === 'right' && (
+              <MRT_GlobalFilterTextInput {...globalFilterProps} />
+            )}
+            <MRT_ToolbarInternalButtons table={table} />
+          </Flex>
+        ) : (
+          enableGlobalFilter &&
+          positionGlobalFilter === 'right' && (
+            <MRT_GlobalFilterTextInput {...globalFilterProps} />
+          )
+        )}
+      </Flex>
+      {enablePagination &&
+        ['both', 'top'].includes(positionPagination ?? '') && (
+          <Flex justify="end">
+            <MRT_TablePagination position="top" table={table} />
+          </Flex>
+        )}
+      <MRT_ProgressBar isTopToolbar table={table} />
+    </Box>
+  );
+};

package/src/components/toolbar/common.styles.module.css

@@ -0,0 +1,10 @@
+.common-toolbar-styles {
+  align-items: flex-start;
+  display: grid;
+  flex-wrap: wrap-reverse;
+  min-height: calc(3.5rem * var(--mantine-scale));
+  overflow: visible;
+  padding: 0;
+  transition: all 150ms ease-in-out;
+  z-index: 3;
+}

package/src/fns/aggregationFns.ts

@@ -0,0 +1,3 @@
+import { aggregationFns } from '@tanstack/react-table';
+
+export const MRT_AggregationFns = { ...aggregationFns };