@jakubmazanec/ui 0.1.0-next.c928134

package/source/components/data-table/internals/DataTableHeader.tsx

@@ -0,0 +1,254 @@
+import {useSortable} from '@dnd-kit/sortable';
+import {CSS} from '@dnd-kit/utilities';
+import {flexRender, type Header, type Table} from '@tanstack/react-table';
+import {type CSSProperties, useCallback} from 'react';
+
+import {Button} from '../../Button.js';
+import {Container} from '../../Container.js';
+import {Field} from '../../Field.js';
+import {Icon} from '../../Icon.js';
+import {Popover} from '../../Popover.js';
+import {PopoverButton} from '../../PopoverButton.js';
+import {PopoverPanel} from '../../PopoverPanel.js';
+import {TableHeader} from '../../TableHeader.js';
+import {Text} from '../../Text.js';
+import {type DataTableProps} from '../DataTable.js';
+import {DataTableHeaderColumnCheckbox} from './DataTableHeaderColumnCheckbox.js';
+import {DataTableHeaderFilter} from './DataTableHeaderFilter.js';
+import {getCommonPinningClasses} from './getCommonPinningClasses.js';
+import {getCommonPinningStyles} from './getCommonPinningStyles.js';
+import {normalizeSorting} from './normalizeSorting.js';
+
+export type DataTableHeaderProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  header: Header<any, any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientSorting: DataTableProps<any, any>['clientSorting'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  sorting: DataTableProps<any, any>['sorting'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onSorting: DataTableProps<any, any>['onSortingChange'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientFilters: DataTableProps<any, any>['clientFilters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  filters: DataTableProps<any, any>['filters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onFiltering: DataTableProps<any, any>['onFiltersChange'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientFaceting: DataTableProps<any, any>['clientFaceting'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  faceting: DataTableProps<any, any>['faceting'];
+};
+
+export function DataTableHeader({
+  table,
+  header,
+  clientSorting,
+  sorting: controlledSorting,
+  onSorting,
+  clientFilters,
+  filters: controlledFilters,
+  onFiltering,
+  clientFaceting,
+  faceting,
+}: DataTableHeaderProps) {
+  let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({
+    id: header.column.id,
+  });
+
+  let sorting =
+    clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);
+
+  let style: CSSProperties = {
+    transform: CSS.Translate.toString(transform),
+    transition: 'width transform 0.2s ease-in-out',
+    zIndex: isDragging ? 20 : undefined,
+    ...getCommonPinningStyles(header.column),
+  };
+
+  let contentElement = null;
+
+  if (!header.isPlaceholder) {
+    contentElement = flexRender(header.column.columnDef.header, header.getContext());
+  }
+
+  let sortElement = null;
+
+  if (!sorting) {
+    sortElement = <Icon name="ArrowsUpDown" size="small" variant="light" />;
+  } else if (sorting.direction === 'ascending') {
+    sortElement = <Icon name="ArrowUp" size="small" />;
+  } else {
+    sortElement = <Icon name="ArrowDown" size="small" />;
+  }
+
+  let title: string | undefined;
+
+  if (!sorting) {
+    title = 'Sort ascending';
+  } else if (sorting.direction === 'ascending') {
+    title = 'Sort descending';
+  } else {
+    title = 'Clear sort';
+  }
+
+  let handleSortClick = useCallback(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+    let newSorting: DataTableProps<any, any>['sorting'] = null;
+
+    if (!sorting) {
+      newSorting = {
+        column: header.column.id,
+        direction: 'ascending',
+      };
+    } else if (sorting.direction === 'ascending') {
+      newSorting = {
+        column: header.column.id,
+        direction: 'descending',
+      };
+    } else {
+      newSorting = null;
+    }
+
+    if (clientSorting) {
+      if (!sorting) {
+        header.column.toggleSorting(false);
+      } else if (sorting.direction === 'ascending') {
+        header.column.toggleSorting(true);
+      } else {
+        header.column.clearSorting();
+      }
+    }
+
+    if (onSorting) {
+      onSorting(newSorting);
+    }
+  }, [sorting, clientSorting, onSorting, header.column]);
+
+  let handleWidthReset = useCallback(() => {
+    header.column.resetSize();
+  }, [header.column]);
+
+  let handlePinLeftClick = useCallback(() => {
+    header.column.pin('left');
+  }, [header.column]);
+
+  let handlePinRightClick = useCallback(() => {
+    header.column.pin('right');
+  }, [header.column]);
+
+  let handleUnpinClick = useCallback(() => {
+    header.column.pin(false);
+  }, [header.column]);
+
+  return (
+    <TableHeader
+      ref={setNodeRef}
+      colSpan={header.colSpan}
+      className={getCommonPinningClasses(header.column)}
+      style={style}
+    >
+      <span className="relative mr-6 block overflow-hidden">
+        <Container spacing="extra-small" justify="spaced" align="center">
+          {header.column.getCanSort() ?
+            <Button
+              variant="text"
+              size="small"
+              className="mr-auto inline-flex cursor-move"
+              title={title}
+              onClick={handleSortClick}
+              {...attributes}
+              {...listeners}
+            >
+              {sortElement}
+              {contentElement}
+            </Button>
+          : null}
+          <Popover>
+            <PopoverButton>
+              <Button variant="text" size="small" aria-label="Settings">
+                <Icon size="small" name="Cog6Tooth" />
+              </Button>
+            </PopoverButton>
+            <PopoverPanel anchor="right start">
+              <Container spacing="large" direction="column">
+                {header.column.getCanPin() ?
+                  <Container spacing="small" direction="row">
+                    <Text>Pin column</Text>
+
+                    <Field>
+                      <Container spacing="small">
+                        {header.column.getIsPinned() === 'left' ? null : (
+                          <Button
+                            variant="outline"
+                            aria-label="Pin to left"
+                            onClick={handlePinLeftClick}
+                          >
+                            <Icon size="large" name="ArrowLeftEndOnRectangle" />
+                          </Button>
+                        )}
+                        {header.column.getIsPinned() ?
+                          <Button variant="outline" aria-label="Unpin" onClick={handleUnpinClick}>
+                            <Icon size="large" name="XMark" />
+                          </Button>
+                        : null}
+                        {header.column.getIsPinned() === 'right' ? null : (
+                          <Button
+                            variant="outline"
+                            aria-label="Pin to right"
+                            onClick={handlePinRightClick}
+                          >
+                            <Icon size="large" name="ArrowRightEndOnRectangle" />
+                          </Button>
+                        )}
+                      </Container>
+                    </Field>
+                  </Container>
+                : null}
+
+                {header.column.getCanFilter() ?
+                  <Container spacing="small" direction="column">
+                    <Text>Filter</Text>
+
+                    <Field>
+                      <DataTableHeaderFilter
+                        table={table}
+                        column={header.column}
+                        clientFilters={clientFilters}
+                        filters={controlledFilters}
+                        clientFaceting={clientFaceting}
+                        faceting={faceting}
+                        onFiltering={onFiltering}
+                      />
+                    </Field>
+                  </Container>
+                : null}
+
+                <Container spacing="small" direction="column">
+                  <Text>Visible columns</Text>
+
+                  {table.getAllLeafColumns().map((column) => (
+                    <DataTableHeaderColumnCheckbox key={column.id} column={column} table={table} />
+                  ))}
+                </Container>
+              </Container>
+            </PopoverPanel>
+          </Popover>
+        </Container>
+      </span>
+      <Button
+        variant="invisible"
+        size="small"
+        aria-label="Resize"
+        className="absolute right-1 top-2.5 cursor-col-resize"
+        onDoubleClick={handleWidthReset}
+        onMouseDown={header.getResizeHandler()}
+        onTouchStart={header.getResizeHandler()}
+      >
+        <Icon size="small" name="ArrowsRightLeft" />
+      </Button>
+    </TableHeader>
+  );
+}

package/source/components/data-table/internals/DataTableHeaderColumnCheckbox.tsx

@@ -0,0 +1,44 @@
+import {type Column, flexRender, type Header, type Table} from '@tanstack/react-table';
+import {useCallback} from 'react';
+
+import {Checkbox} from '../../Checkbox.js';
+import {CheckboxField} from '../../CheckboxField.js';
+import {Label} from '../../Label.js';
+
+export type DataTableHeaderColumnCheckboxProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  column: Column<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+};
+
+export function DataTableHeaderColumnCheckbox({column, table}: DataTableHeaderColumnCheckboxProps) {
+  let handleChange = useCallback(
+    (checked: boolean) => {
+      if (!checked && table.getFlatHeaders().length >= 2) {
+        column.toggleVisibility(checked);
+      } else if (checked) {
+        column.toggleVisibility(checked);
+      }
+    },
+    [column, table],
+  );
+
+  return (
+    <CheckboxField key={column.id}>
+      <Checkbox
+        checked={column.getIsVisible()}
+        disabled={table.getFlatHeaders().length <= 1 && column.getIsVisible()}
+        onChange={handleChange}
+      />
+      <Label>
+        {flexRender(column.columnDef.header, {
+          table,
+          column,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
+          header: {column} as Header<any, any>,
+        })}
+      </Label>
+    </CheckboxField>
+  );
+}

package/source/components/data-table/internals/DataTableHeaderFilter.tsx

@@ -0,0 +1,340 @@
+// TODO: fix somehow
+/* eslint-disable complexity -- TODO */
+import {type Column, type Table} from '@tanstack/react-table';
+import {type ChangeEvent, type FormEvent, useCallback, useMemo, useState} from 'react';
+
+import {Button} from '../../Button.js';
+import {Combobox} from '../../Combobox.js';
+import {Container} from '../../Container.js';
+import {Form} from '../../Form.js';
+import {Icon} from '../../Icon.js';
+import {Input} from '../../Input.js';
+import {Listbox} from '../../Listbox.js';
+import {type DataTableProps} from '../DataTable.js';
+import {addFilter} from './addFilter.js';
+import {normalizeFilter} from './normalizeFilter.js';
+import {normalizeFilters} from './normalizeFilters.js';
+import {removeFilter} from './removeFilter.js';
+
+export type DataTableHeaderFilterProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  column: Column<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientFilters: DataTableProps<any, any>['clientFilters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  filters: DataTableProps<any, any>['filters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onFiltering: DataTableProps<any, any>['onFiltersChange'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  clientFaceting: DataTableProps<any, any>['clientFaceting'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  faceting: DataTableProps<any, any>['faceting'];
+};
+
+export function DataTableHeaderFilter({
+  table,
+  column,
+  clientFilters,
+  filters: controlledFilters,
+  onFiltering,
+  clientFaceting,
+  faceting,
+}: DataTableHeaderFilterProps) {
+  let {filterVariant} = column.columnDef.meta ?? {};
+
+  let currentFilters =
+    clientFilters ? normalizeFilters(table) : normalizeFilters(table, controlledFilters);
+  let currentFilter =
+    clientFilters ? normalizeFilter(column) : normalizeFilter(column, controlledFilters);
+
+  let currentMin =
+    filterVariant === 'range' ?
+      (currentFilter as [number?, number?] | undefined)?.[0] ?? undefined
+    : undefined;
+  let currentMax =
+    filterVariant === 'range' ?
+      (currentFilter as [number?, number?] | undefined)?.[1] ?? undefined
+    : undefined;
+
+  let [filter, setFilter] = useState<string | undefined>(
+    typeof currentFilter === 'string' ? currentFilter : undefined,
+  );
+  let [min, setMin] = useState(currentMin);
+  let [max, setMax] = useState(currentMax);
+
+  let facetingValues = useMemo(() => {
+    if (!clientFaceting) {
+      return faceting?.[column.id]?.values ?? [];
+    }
+
+    if (filterVariant === 'range') {
+      return [];
+    }
+
+    return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5000) as unknown[];
+  }, [clientFaceting, column, faceting, filterVariant]);
+
+  let facetingMin =
+    clientFaceting ?
+      Number(column.getFacetedMinMaxValues()?.[0] ?? null)
+    : faceting?.[column.id]?.min ?? null;
+  let facetingMax =
+    clientFaceting ?
+      Number(column.getFacetedMinMaxValues()?.[1] ?? null)
+    : faceting?.[column.id]?.max ?? null;
+
+  let handleMinRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setMin(event.target.value ? Number(event.target.value) : undefined);
+  }, []);
+
+  let handleMaxRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    setMax(event.target.value ? Number(event.target.value) : undefined);
+  }, []);
+
+  let handleSelectFilterChange = useCallback(
+    (value: string) => {
+      if (clientFilters) {
+        column.setFilterValue(value);
+      }
+
+      if (onFiltering) {
+        onFiltering(addFilter(currentFilters, column.id, value));
+      }
+    },
+    [clientFilters, column, currentFilters, onFiltering],
+  );
+
+  let handleTextFilterChange = useCallback(
+    (value: string | undefined) => {
+      if (value) {
+        if (clientFilters) {
+          column.setFilterValue(value);
+        }
+
+        if (onFiltering) {
+          onFiltering(addFilter(currentFilters, column.id, value));
+        }
+      } else {
+        if (clientFilters) {
+          column.setFilterValue(undefined);
+        }
+
+        if (onFiltering) {
+          onFiltering(removeFilter(currentFilters, column.id));
+        }
+      }
+    },
+    [clientFilters, column, currentFilters, onFiltering],
+  );
+
+  let handleFilterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value) {
+      setFilter(event.target.value);
+    } else {
+      setFilter(undefined);
+    }
+  }, []);
+
+  let handleFilterClick = useCallback(() => {
+    if (filterVariant === 'range') {
+      if (!min && !max) {
+        if (clientFilters) {
+          column.setFilterValue(undefined);
+        }
+
+        if (onFiltering) {
+          onFiltering(removeFilter(currentFilters, column.id));
+        }
+      } else {
+        if (clientFilters) {
+          column.setFilterValue([min, max]);
+        }
+
+        if (onFiltering) {
+          onFiltering(addFilter(currentFilters, column.id, [min, max]));
+        }
+      }
+    }
+
+    if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {
+      if (filter) {
+        if (clientFilters) {
+          column.setFilterValue(filter);
+        }
+
+        if (onFiltering) {
+          onFiltering(addFilter(currentFilters, column.id, filter));
+        }
+      } else {
+        if (clientFilters) {
+          column.setFilterValue(undefined);
+        }
+
+        if (onFiltering) {
+          onFiltering(removeFilter(currentFilters, column.id));
+        }
+      }
+    }
+  }, [
+    clientFilters,
+    column,
+    currentFilters,
+    facetingValues.length,
+    filter,
+    filterVariant,
+    max,
+    min,
+    onFiltering,
+  ]);
+
+  let handleFilterSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+
+      if (filterVariant === 'range') {
+        if (!min && !max) {
+          if (clientFilters) {
+            column.setFilterValue(undefined);
+          }
+
+          if (onFiltering) {
+            onFiltering(removeFilter(currentFilters, column.id));
+          }
+        } else {
+          if (clientFilters) {
+            column.setFilterValue([min, max]);
+          }
+
+          if (onFiltering) {
+            onFiltering(addFilter(currentFilters, column.id, [min, max]));
+          }
+        }
+      }
+
+      if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {
+        if (filter) {
+          if (clientFilters) {
+            column.setFilterValue(filter);
+          }
+
+          if (onFiltering) {
+            onFiltering(addFilter(currentFilters, column.id, filter));
+          }
+        } else {
+          if (clientFilters) {
+            column.setFilterValue(undefined);
+          }
+
+          if (onFiltering) {
+            onFiltering(removeFilter(currentFilters, column.id));
+          }
+        }
+      }
+    },
+    [
+      clientFilters,
+      column,
+      currentFilters,
+      facetingValues.length,
+      filter,
+      filterVariant,
+      max,
+      min,
+      onFiltering,
+    ],
+  );
+
+  let handleResetClick = useCallback(() => {
+    setFilter(undefined);
+    setMin(undefined);
+    setMax(undefined);
+
+    if (clientFilters) {
+      column.setFilterValue(undefined);
+    }
+
+    if (onFiltering) {
+      onFiltering(removeFilter(currentFilters, column.id));
+    }
+  }, [clientFilters, column, currentFilters, onFiltering]);
+
+  let filterElement = null;
+
+  if (filterVariant === 'range') {
+    filterElement = (
+      <Container spacing="small">
+        <Input
+          type="number"
+          min={String(facetingMin ?? '')}
+          max={String(facetingMax ?? '')}
+          value={min ?? ''}
+          placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}
+          onChange={handleMinRangeChange}
+        />
+        <Input
+          type="number"
+          min={String(facetingMin ?? '')}
+          max={String(facetingMax ?? '')}
+          value={max ?? ''}
+          placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}
+          onChange={handleMaxRangeChange}
+        />
+        <Button submit variant="outline" aria-label="Filter" onClick={handleFilterClick}>
+          <Icon size="large" name="Funnel" />
+        </Button>
+        <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+          <Icon size="large" name="XMark" />
+        </Button>
+      </Container>
+    );
+  } else if (filterVariant === 'select' && facetingValues.length) {
+    filterElement = (
+      <Container spacing="small">
+        <Listbox
+          value={currentFilter as string}
+          items={(facetingValues as string[]).map((value: string) => ({
+            value,
+            label: `${value as unknown}`,
+          }))}
+          onChange={handleSelectFilterChange}
+        />
+        <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+          <Icon size="large" name="XMark" />
+        </Button>
+      </Container>
+    );
+  } else if (filterVariant === 'text' && facetingValues.length) {
+    filterElement = (
+      <Container spacing="small">
+        <Combobox
+          customValue
+          value={(currentFilter ?? '') as string}
+          items={(facetingValues as string[]).map((value: string) => ({
+            value,
+            label: `${value as unknown}`,
+          }))}
+          onChange={handleTextFilterChange}
+        />
+        <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+          <Icon size="large" name="XMark" />
+        </Button>
+      </Container>
+    );
+  } else if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {
+    filterElement = (
+      <Container spacing="small">
+        <Input value={filter ?? ''} onChange={handleFilterChange} />
+        <Button variant="outline" aria-label="Filter" onClick={handleFilterClick}>
+          <Icon size="large" name="Funnel" />
+        </Button>
+        <Button variant="outline" aria-label="Cancel" onClick={handleResetClick}>
+          <Icon size="large" name="XMark" />
+        </Button>
+      </Container>
+    );
+  }
+
+  return <Form onSubmit={handleFilterSubmit}>{filterElement}</Form>;
+}

package/source/components/data-table/internals/DataTablePageButton.tsx

@@ -0,0 +1,21 @@
+import {useCallback} from 'react';
+
+import {Button} from '../../Button.js';
+
+export type DataTablePageButtonProps = {
+  page: number;
+  isSelected: boolean;
+  onClick: (page: number) => void;
+};
+
+export function DataTablePageButton({page, isSelected, onClick}: DataTablePageButtonProps) {
+  let handleClick = useCallback(() => {
+    onClick(page);
+  }, [onClick, page]);
+
+  return (
+    <Button variant={isSelected ? 'solid' : 'outline'} onClick={handleClick}>
+      {page}
+    </Button>
+  );
+}