@jakubmazanec/ui 0.4.2 → 0.5.0-next.7fc14073

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

@@ -0,0 +1,354 @@
+import {type Column, flexRender, type Header, 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 {Field} from '../../Field.js';
+import {Form} from '../../Form.js';
+import {Icon} from '../../Icon.js';
+import {Input} from '../../Input.js';
+import {Label} from '../../Label.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 DataTableFilterProps = {
+  // 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 DataTableFilter({
+  table,
+  column,
+  clientFilters,
+  filters: controlledFilters,
+  onFiltering,
+  clientFaceting,
+  faceting,
+}: DataTableFilterProps) {
+  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 === undefined && max === undefined) {
+          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
+          max={String(facetingMax ?? '')}
+          min={String(facetingMin ?? '')}
+          placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}
+          type="number"
+          value={min ?? ''}
+          onChange={handleMinRangeChange}
+        />
+        <Input
+          max={String(facetingMax ?? '')}
+          min={String(facetingMin ?? '')}
+          placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}
+          type="number"
+          value={max ?? ''}
+          onChange={handleMaxRangeChange}
+        />
+        <Button submit aria-label="Filter" variant="outline" onClick={handleFilterClick}>
+          <Icon name="Funnel" size="large" />
+        </Button>
+        <Button aria-label="Cancel" variant="outline" onClick={handleResetClick}>
+          <Icon name="XMark" size="large" />
+        </Button>
+      </Container>
+    );
+  } else if (filterVariant === 'select' && facetingValues.length) {
+    filterElement = (
+      <Container spacing="small">
+        <Listbox
+          items={(facetingValues as string[]).map((value: string) => ({
+            value,
+            label: `${value as unknown}`,
+          }))}
+          value={currentFilter as string}
+          onChange={handleSelectFilterChange}
+        />
+        <Button aria-label="Cancel" variant="outline" onClick={handleResetClick}>
+          <Icon name="XMark" size="large" />
+        </Button>
+      </Container>
+    );
+  } else if (filterVariant === 'text' && facetingValues.length) {
+    filterElement = (
+      <Container spacing="small">
+        <Combobox
+          customValue
+          items={(facetingValues as string[]).map((value: string) => ({
+            value,
+            label: `${value as unknown}`,
+          }))}
+          value={(currentFilter ?? '') as string}
+          onChange={handleTextFilterChange}
+        />
+        <Button aria-label="Cancel" variant="outline" onClick={handleResetClick}>
+          <Icon name="XMark" size="large" />
+        </Button>
+      </Container>
+    );
+  } else if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {
+    filterElement = (
+      <Container spacing="small">
+        <Input value={filter ?? ''} onChange={handleFilterChange} />
+        <Button aria-label="Filter" variant="outline" onClick={handleFilterClick}>
+          <Icon name="Funnel" size="large" />
+        </Button>
+        <Button aria-label="Cancel" variant="outline" onClick={handleResetClick}>
+          <Icon name="XMark" size="large" />
+        </Button>
+      </Container>
+    );
+  }
+
+  return (
+    <Form onSubmit={handleFilterSubmit}>
+      <Field className="gap-2">
+        <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>
+        {filterElement}
+      </Field>
+    </Form>
+  );
+}

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

@@ -0,0 +1,56 @@
+import {type Table} from '@tanstack/react-table';
+
+import {Container} from '../../Container.js';
+import {Heading} from '../../Heading.js';
+import {type DataTableProps} from '../DataTable.js';
+import {DataTableFilter} from './DataTableFilter.js';
+
+export type DataTableFiltersProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<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 DataTableFilters({
+  table,
+  clientFilters,
+  filters: controlledFilters,
+  onFiltering,
+  clientFaceting,
+  faceting,
+}: DataTableFiltersProps) {
+  return (
+    <Container
+      className="hidden w-full justify-items-stretch bg-white sm:order-first sm:row-span-3 sm:border-r-2 sm:border-neutral-100 sm:pr-4 [[data-show-filters]_&]:flex"
+      direction="column"
+    >
+      <Heading size="small">Filters</Heading>
+
+      {table
+        .getAllLeafColumns()
+        .map((column) =>
+          column.getCanFilter() ?
+            <DataTableFilter
+              key={column.id}
+              clientFaceting={clientFaceting}
+              clientFilters={clientFilters}
+              column={column}
+              faceting={faceting}
+              filters={controlledFilters}
+              table={table}
+              onFiltering={onFiltering}
+            />
+          : null,
+        )}
+    </Container>
+  );
+}

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

@@ -1,27 +1,16 @@
-import {useSortable} from '@dnd-kit/sortable';
-import {CSS} from '@dnd-kit/utilities';
-import {flexRender, type Header, type Table} from '@tanstack/react-table';
+import {flexRender, type Header} 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
@@ -33,59 +22,23 @@ export type DataTableHeaderProps = {
   // 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
-  hideFilters: DataTableProps<any, any>['hideFilters'];
-  // 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'];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
-  hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
   hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
-  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
   hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];
 };
 
 export function DataTableHeader({
-  table,
   header,
   clientSorting,
   hideSorting = false,
   sorting: controlledSorting,
   onSorting,
-  clientFilters,
-  hideFilters = false,
-  filters: controlledFilters,
-  onFiltering,
-  clientFaceting,
-  faceting,
-  hideColumnVisibility = false,
   hideColumnOrder = false,
-  hideColumnPinning = false,
   hideColumnResizing = false,
 }: 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) {
@@ -149,25 +102,15 @@ export function DataTableHeader({
     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]);
-
-  let resolvedHideFilters = hideFilters || !header.column.getCanFilter();
   let resolvedHideSorting = hideSorting || !header.column.getCanSort();
-  let resolvedHideColumnPinning = hideColumnPinning || !header.column.getCanPin();
+
+  let style: CSSProperties = {
+    transition: 'width transform 0.2s ease-in-out',
+    ...getCommonPinningStyles(header.column),
+  };
 
   return (
     <TableHeader
-      ref={setNodeRef}
       className={getCommonPinningClasses(header.column)}
       colSpan={header.colSpan}
       style={style}
@@ -183,102 +126,21 @@ export function DataTableHeader({
           {resolvedHideSorting && hideColumnOrder ?
             contentElement
           : <Button
-              className={hideColumnOrder ? 'inline-flex' : 'inline-flex cursor-move'}
+              className="inline-flex"
               size="small"
               title={title}
               variant="text"
               onClick={resolvedHideSorting ? undefined : handleSortClick}
-              {...(hideColumnOrder ? {} : attributes)}
-              {...(hideColumnOrder ? {} : listeners)}
             >
               {resolvedHideSorting ? null : sortElement}
               {contentElement}
             </Button>
           }
-          {resolvedHideColumnPinning && resolvedHideFilters && hideColumnVisibility ? null : (
-            <Popover>
-              <PopoverButton>
-                <Button aria-label="Settings" size="small" variant="text">
-                  <Icon name="Cog6Tooth" size="small" />
-                </Button>
-              </PopoverButton>
-              <PopoverPanel anchor="right start">
-                <Container direction="column" spacing="large">
-                  {resolvedHideColumnPinning ? null : (
-                    <Container direction="row" spacing="small">
-                      <Text>Pin column</Text>
-
-                      <Field>
-                        <Container spacing="small">
-                          {header.column.getIsPinned() === 'left' ? null : (
-                            <Button
-                              aria-label="Pin to left"
-                              variant="outline"
-                              onClick={handlePinLeftClick}
-                            >
-                              <Icon name="ArrowLeftEndOnRectangle" size="large" />
-                            </Button>
-                          )}
-                          {header.column.getIsPinned() ?
-                            <Button aria-label="Unpin" variant="outline" onClick={handleUnpinClick}>
-                              <Icon name="XMark" size="large" />
-                            </Button>
-                          : null}
-                          {header.column.getIsPinned() === 'right' ? null : (
-                            <Button
-                              aria-label="Pin to right"
-                              variant="outline"
-                              onClick={handlePinRightClick}
-                            >
-                              <Icon name="ArrowRightEndOnRectangle" size="large" />
-                            </Button>
-                          )}
-                        </Container>
-                      </Field>
-                    </Container>
-                  )}
-
-                  {resolvedHideFilters ? null : (
-                    <Container direction="column" spacing="small">
-                      <Text>Filter</Text>
-
-                      <Field>
-                        <DataTableHeaderFilter
-                          clientFaceting={clientFaceting}
-                          clientFilters={clientFilters}
-                          column={header.column}
-                          faceting={faceting}
-                          filters={controlledFilters}
-                          table={table}
-                          onFiltering={onFiltering}
-                        />
-                      </Field>
-                    </Container>
-                  )}
-
-                  {hideColumnVisibility ? null : (
-                    <Container direction="column" spacing="small">
-                      <Text>Visible columns</Text>
-
-                      {table.getAllLeafColumns().map((column) => (
-                        <DataTableHeaderColumnCheckbox
-                          key={column.id}
-                          column={column}
-                          table={table}
-                        />
-                      ))}
-                    </Container>
-                  )}
-                </Container>
-              </PopoverPanel>
-            </Popover>
-          )}
         </Container>
       </span>
       {hideColumnResizing ? null : (
         <Button
           aria-label="Resize"
-          // className="absolute right-1 top-2.5 cursor-col-resize"
           className="absolute top-1/2 right-1 -mt-2.5 cursor-col-resize"
           size="small"
           variant="invisible"

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

@@ -0,0 +1,60 @@
+import {type Table} from '@tanstack/react-table';
+
+import {Button} from '../../Button.js';
+import {Container} from '../../Container.js';
+import {Icon} from '../../Icon.js';
+import {Popover} from '../../Popover.js';
+import {PopoverButton} from '../../PopoverButton.js';
+import {PopoverPanel} from '../../PopoverPanel.js';
+import {type DataTableProps} from '../DataTable.js';
+import {DataTableSettings} from './DataTableSettings.js';
+
+export type DataTableMenuProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  hideFilters: DataTableProps<any, any>['hideFilters'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
+
+  // TODO: this probablu should be passed via some context
+  toggleFilters: () => void;
+};
+
+export function DataTableMenu({
+  table,
+  hideFilters = false,
+  hideColumnVisibility = false,
+  hideColumnOrder = false,
+  hideColumnPinning = false,
+  toggleFilters,
+}: DataTableMenuProps) {
+  return (
+    <Container justify="spaced" spacing="small">
+      {hideFilters ? null : (
+        <Button aria-label="Filter" variant="outline" onClick={toggleFilters}>
+          <Icon name="Funnel" size="large" />
+        </Button>
+      )}
+      <Popover className="ml-auto">
+        <PopoverButton>
+          <Button aria-label="Settings" variant="outline">
+            <Icon name="Cog6Tooth" size="large" />
+          </Button>
+        </PopoverButton>
+        <PopoverPanel anchor="bottom end">
+          <DataTableSettings
+            hideColumnOrder={hideColumnOrder}
+            hideColumnPinning={hideColumnPinning}
+            hideColumnVisibility={hideColumnVisibility}
+            table={table}
+          />
+        </PopoverPanel>
+      </Popover>
+    </Container>
+  );
+}