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

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -0,0 +1,123 @@
+'use no memo';
+
+import classes from './MRT_TableHeadCellFilterContainer.module.css';
+
+import {
+  ActionIcon,
+  Collapse,
+  Flex,
+  type FlexProps,
+  Menu,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+
+import { localizedFilterOption } from '../../fns/filterFns';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
+import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { MRT_FilterTextInput } from '../inputs/MRT_FilterTextInput';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
+
+interface Props<TData extends MRT_RowData> extends FlexProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      columnFilterDisplayMode,
+      columnFilterModeOptions,
+      enableColumnFilterModes,
+      icons: { IconFilterCog },
+      localization,
+    },
+    refs: { filterInputRefs },
+  } = table;
+  const { showColumnFilters } = getState();
+  const { column } = header;
+  const { columnDef } = column;
+
+  const currentFilterOption = columnDef._filterFn;
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+  const showChangeModeButton =
+    enableColumnFilterModes &&
+    columnDef.enableColumnFilterModes !== false &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
+
+  return (
+    <Collapse expanded={showColumnFilters || columnFilterDisplayMode === 'popover'}>
+      <Flex direction="column" {...rest}>
+        <Flex align="flex-end">
+          {columnDef.filterVariant === 'checkbox' ? (
+            <MRT_FilterCheckbox column={column} table={table} />
+          ) : columnDef.filterVariant === 'range-slider' ? (
+            <MRT_FilterRangeSlider header={header} table={table} />
+          ) : ['date-range', 'range'].includes(columnDef.filterVariant ?? '') ||
+            ['between', 'betweenInclusive', 'inNumberRange'].includes(
+              columnDef._filterFn,
+            ) ? (
+            <MRT_FilterRangeFields header={header} table={table} />
+          ) : (
+            <MRT_FilterTextInput header={header} table={table} />
+          )}
+          {showChangeModeButton && (
+            <Menu withinPortal={columnFilterDisplayMode !== 'popover'}>
+              <Tooltip
+                label={localization.changeFilterMode}
+                position="bottom-start"
+                withinPortal
+              >
+                <Menu.Target>
+                  <ActionIcon
+                    aria-label={localization.changeFilterMode}
+                    color="gray"
+                    size="md"
+                    variant="subtle"
+                  >
+                    <IconFilterCog />
+                  </ActionIcon>
+                </Menu.Target>
+              </Tooltip>
+              <MRT_FilterOptionMenu
+                header={header}
+                onSelect={() =>
+                  setTimeout(
+                    () => filterInputRefs.current[`${column.id}-0`]?.focus(),
+                    100,
+                  )
+                }
+                table={table}
+              />
+            </Menu>
+          )}
+        </Flex>
+        {showChangeModeButton ? (
+          <Text
+            c="dimmed"
+            className={classes['filter-mode-label']}
+            component="label"
+          >
+            {localization.filterMode.replace(
+              '{filterType}',
+              localizedFilterOption(localization, currentFilterOption),
+            )}
+          </Text>
+        ) : null}
+      </Flex>
+    </Collapse>
+  );
+};

package/src/components/head/MRT_TableHeadCellFilterLabel.module.css

@@ -0,0 +1,14 @@
+.root {
+  transition: all 150ms ease;
+  --ai-size: var(--ai-size-sm);
+  --ai-bg: transparent;
+  --ai-hover: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-6)
+  );
+  --ai-hover-color: var(--mantine-color-bright);
+  color: var(--mantine-color-bright);
+  &[data-active] {
+    color: var(--mantine-primary-color-filled);
+  }
+}

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -0,0 +1,176 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCellFilterLabel.module.css';
+
+import { type MouseEvent, useState } from 'react';
+
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Popover,
+  Tooltip,
+  Transition,
+} from '@mantine/core';
+
+import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
+
+import { localizedFilterOption } from '../../fns/filterFns';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { dataVariable } from '../../utils/style.utils';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      columnFilterDisplayMode,
+      icons: { IconFilter },
+      localization,
+    },
+    refs: { filterInputRefs },
+    setShowColumnFilters,
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const filterValue = column.getFilterValue();
+
+  const [popoverOpened, setPopoverOpened] = useState(false);
+
+  const isFilterActive =
+    (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
+    (!!filterValue && !Array.isArray(filterValue));
+
+  const isRangeFilter =
+    columnDef.filterVariant === 'range' ||
+    columnDef.filterVariant === 'date-range' ||
+    ['between', 'betweenInclusive', 'inNumberRange'].includes(
+      columnDef._filterFn,
+    );
+  const currentFilterOption = columnDef._filterFn;
+  const filterValueFn =
+    columnDef.filterTooltipValueFn || ((value) => value as string);
+  type FilterValueType = Parameters<typeof filterValueFn>[0];
+  const filterTooltip =
+    columnFilterDisplayMode === 'popover' && !isFilterActive
+      ? localization.filterByColumn?.replace(
+          '{column}',
+          String(columnDef.header),
+        )
+      : localization.filteringByColumn
+          .replace('{column}', String(columnDef.header))
+          .replace(
+            '{filterType}',
+            localizedFilterOption(localization, currentFilterOption),
+          )
+          .replace(
+            '{filterValue}',
+            `"${
+              Array.isArray(column.getFilterValue())
+                ? (
+                    column.getFilterValue() as [
+                      FilterValueType,
+                      FilterValueType,
+                    ]
+                  )
+                    .map((v) => filterValueFn(v))
+                    .join(
+                      `" ${isRangeFilter ? localization.and : localization.or} "`,
+                    )
+                : filterValueFn(column.getFilterValue())
+            }"`,
+          )
+          .replace('" "', '');
+
+  return (
+    <>
+      <Popover
+        keepMounted={columnDef.filterVariant === 'range-slider'}
+        onChange={setPopoverOpened}
+        onClose={() => setPopoverOpened(false)}
+        opened={popoverOpened}
+        position="top"
+        shadow="xl"
+        width={360}
+        withinPortal
+      >
+        <Transition
+          mounted={
+            columnFilterDisplayMode === 'popover' ||
+            (!!column.getFilterValue() && !isRangeFilter) ||
+            (isRangeFilter &&
+              (!!(column.getFilterValue() as [any, any])?.[0] ||
+                !!(column.getFilterValue() as [any, any])?.[1]))
+          }
+          transition="scale"
+        >
+          {() => (
+            <Popover.Target>
+              <Tooltip
+                disabled={popoverOpened}
+                label={filterTooltip}
+                multiline
+                w={filterTooltip.length > 40 ? 300 : undefined}
+                withinPortal
+              >
+                <ActionIcon
+                  aria-label={filterTooltip}
+                  className={clsx(
+                    'mrt-table-head-cell-filter-label-icon',
+                    classes.root,
+                  )}
+                  size={18}
+                  {...dataVariable('active', isFilterActive)}
+                  onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                    event.stopPropagation();
+                    if (columnFilterDisplayMode === 'popover') {
+                      setPopoverOpened((opened) => !opened);
+                    } else {
+                      setShowColumnFilters(true);
+                    }
+                    setTimeout(() => {
+                      const input = filterInputRefs.current[`${column.id}-0`];
+                      input?.focus();
+                      if (typeof input?.select === 'function') {
+                        input.select();
+                      }
+                    }, 100);
+                  }}
+                  {...rest}
+                >
+                  <IconFilter size="100%" />
+                </ActionIcon>
+              </Tooltip>
+            </Popover.Target>
+          )}
+        </Transition>
+        {columnFilterDisplayMode === 'popover' && (
+          <Popover.Dropdown
+            onClick={(event) => event.stopPropagation()}
+            onKeyDown={(event) =>
+              event.key === 'Enter' &&
+              !event.nativeEvent.isComposing &&
+              setPopoverOpened(false)
+            }
+            onMouseDown={(event) => event.stopPropagation()}
+          >
+            <MRT_TableHeadCellFilterContainer header={header} table={table} />
+          </Popover.Dropdown>
+        )}
+      </Popover>
+    </>
+  );
+};

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,82 @@
+'use no memo';
+
+import { type DragEvent, type RefObject } from 'react';
+
+import { type ActionIconProps } from '@mantine/core';
+
+import {
+  type MRT_CellValue,
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+import { reorderColumn } from '../../utils/column.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends ActionIconProps {
+  column: MRT_Column<TData, TValue>;
+  table: MRT_TableInstance<TData>;
+  tableHeadCellRef: RefObject<HTMLTableCellElement | null>;
+}
+
+export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
+  column,
+  table,
+  tableHeadCellRef,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { enableColumnOrdering, mantineColumnDragHandleProps },
+    setColumnOrder,
+    setDraggingColumn,
+    setHoveredColumn,
+  } = table;
+  const { columnDef } = column;
+  const { columnOrder, draggingColumn, hoveredColumn } = getState();
+
+  const arg = { column, table };
+  const actionIconProps = {
+    ...parseFromValuesOrFunc(mantineColumnDragHandleProps, arg),
+    ...parseFromValuesOrFunc(columnDef.mantineColumnDragHandleProps, arg),
+    ...rest,
+  };
+
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragStart?.(event);
+    setDraggingColumn(column);
+    event.dataTransfer.setDragImage(
+      tableHeadCellRef.current as HTMLElement,
+      0,
+      0,
+    );
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    actionIconProps?.onDragEnd?.(event);
+    if (hoveredColumn?.id === 'drop-zone') {
+      column.toggleGrouping();
+    } else if (
+      enableColumnOrdering &&
+      hoveredColumn &&
+      hoveredColumn?.id !== draggingColumn?.id
+    ) {
+      setColumnOrder(
+        reorderColumn(column, hoveredColumn as MRT_Column<TData>, columnOrder),
+      );
+    }
+    setDraggingColumn(null);
+    setHoveredColumn(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      actionIconProps={actionIconProps}
+      onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
+      table={table}
+    />
+  );
+};

package/src/components/head/MRT_TableHeadCellResizeHandle.module.css

@@ -0,0 +1,44 @@
+.root {
+  --resize-handle-thickness: 4px;
+  background: var(--mantine-color-placeholder);
+  border-radius: 2px;
+  cursor: col-resize;
+  height: 24px;
+  position: absolute;
+  width: var(--resize-handle-thickness);
+  &:hover {
+    background: var(--mantine-primary-color-filled-hover);
+  }
+  &:active {
+    background: var(--mantine-primary-color-filled);
+  }
+  transform: var(--mrt-transform);
+}
+
+.root-ltr {
+  right: 0px;
+  margin-right: -10px;
+  &:global(.md) {
+    margin-right: -16px;
+  }
+  &:global(.xl) {
+    margin-right: -22px;
+  }
+}
+
+.root-rtl {
+  left: 0px;
+  margin-left: -10px;
+  &:global(.md) {
+    margin-left: -16px;
+  }
+  &:global(.xl) {
+    margin-left: -22px;
+  }
+}
+
+.root-hide {
+  &:active {
+    opacity: 0;
+  }
+}

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -0,0 +1,68 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCellResizeHandle.module.css';
+
+import { Box, type BoxProps } from '@mantine/core';
+
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../../types';
+
+interface Props<TData extends MRT_RowData> extends BoxProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: { columnResizeDirection, columnResizeMode },
+    setColumnSizingInfo,
+  } = table;
+  const { density } = getState();
+  const { column } = header;
+  const handler = header.getResizeHandler();
+
+  const offset =
+    column.getIsResizing() && columnResizeMode === 'onEnd'
+      ? `translateX(${
+          (columnResizeDirection === 'rtl' ? -1 : 1) *
+          (getState().columnSizingInfo.deltaOffset ?? 0)
+        }px)`
+      : undefined;
+
+  return (
+    <Box
+      onDoubleClick={() => {
+        setColumnSizingInfo((old) => ({
+          ...old,
+          isResizingColumn: false,
+        }));
+        column.resetSize();
+      }}
+      onMouseDown={handler}
+      onTouchStart={handler}
+      role="separator"
+      {...rest}
+      __vars={{ '--mrt-transform': offset, ...rest.__vars }}
+      className={clsx(
+        'mrt-table-head-cell-resize-handle',
+        classes.root,
+        classes[`root-${columnResizeDirection}`],
+        !header.subHeaders.length &&
+          columnResizeMode === 'onChange' &&
+          classes['root-hide'],
+        density,
+        rest.className,
+      )}
+    />
+  );
+};

package/src/components/head/MRT_TableHeadCellSortLabel.module.css

@@ -0,0 +1,22 @@
+.sort-icon {
+  transition: all 150ms ease;
+  --ai-size: var(--ai-size-xs);
+  --ai-bg: transparent;
+  --ai-hover: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-6)
+  );
+  --ai-hover-color: var(--mantine-color-bright);
+  color: var(--mantine-color-bright);
+  &[data-sorted] {
+    color: var(--mantine-primary-color-filled);
+  }
+  margin-left: 1px;
+}
+
+.multi-sort-indicator {
+  --indicator-size: rem(16px);
+  --indicator-color: transparent;
+  --indicator-text-color: var(--mantine-color-bright);
+  height: var(--indicator-size);
+}

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -0,0 +1,90 @@
+'use no memo';
+
+import clsx from 'clsx';
+
+import classes from './MRT_TableHeadCellSortLabel.module.css';
+
+import {
+  ActionIcon,
+  type ActionIconProps,
+  Indicator,
+  Tooltip,
+} from '@mantine/core';
+
+import type { MRT_Header, MRT_RowData, MRT_TableInstance } from '../../types';
+import { dataVariable } from '../../utils/style.utils';
+
+interface Props<TData extends MRT_RowData> extends ActionIconProps {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
+  header,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { IconArrowsSort, IconSortAscending, IconSortDescending },
+      localization,
+    },
+  } = table;
+  const column = header.column;
+  const { columnDef } = column;
+  const { sorting } = getState();
+  const sorted = column.getIsSorted();
+  const sortIndex = column.getSortIndex();
+
+  const sortTooltip = sorted
+    ? sorted === 'desc'
+      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+    : column.getNextSortingOrder() === 'desc'
+      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+
+  const SortActionButton = (
+    <ActionIcon
+      aria-label={sortTooltip}
+      {...dataVariable('sorted', sorted)}
+      {...rest}
+      className={clsx(
+        'mrt-table-head-sort-button',
+        classes['sort-icon'],
+        rest.className,
+      )}
+    >
+      {sorted === 'desc' ? (
+        <IconSortDescending size="100%" />
+      ) : sorted === 'asc' ? (
+        <IconSortAscending size="100%" />
+      ) : (
+        <IconArrowsSort size="100%" />
+      )}
+    </ActionIcon>
+  );
+
+  return (
+    <Tooltip label={sortTooltip} openDelay={1000} withinPortal>
+      {sorting.length < 2 || sortIndex === -1 ? (
+        SortActionButton
+      ) : (
+        <Indicator
+          classNames={{
+            root: clsx(
+              'mrt-table-head-multi-sort-indicator',
+              classes['multi-sort-indicator'],
+            ),
+          }}
+          inline
+          label={sortIndex + 1}
+          offset={4}
+        >
+          {SortActionButton}
+        </Indicator>
+      )}
+    </Tooltip>
+  );
+};

package/src/components/head/MRT_TableHeadRow.module.css

@@ -0,0 +1,12 @@
+.root {
+  background-color: var(--mrt-base-background-color);
+  display: table-row;
+  &.layout-mode-grid {
+    display: flex;
+  }
+}
+
+.sticky {
+  position: sticky;
+  top: 0;
+}