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

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

@@ -134,87 +134,89 @@ export const DataTablePagination = memo(
     );
 
     return (
-      <Container align="center" justify="center">
-        <Container spacing="small">
-          <Button
-            aria-label="First page"
-            disabled={isFirstPage}
-            variant="outline"
-            onClick={handleFirstPageClick}
-          >
-            <Icon name="ChevronDoubleLeft" />
-          </Button>
-          <Button
-            aria-label="Previous page"
-            disabled={isFirstPage}
-            variant="outline"
-            onClick={handlePreviousPageClick}
-          >
-            <Icon name="ChevronLeft" />
-          </Button>
-
-          {pageCount <= MAX_PAGE_BUTTONS_COUNT ?
-            Array.from({length: pageCount}).map((_, index) => (
-              <DataTablePageButton
-                // eslint-disable-next-line react/no-array-index-key -- needed, there is no other value
-                key={index}
-                isSelected={page === index + 1}
-                page={index + 1}
-                onClick={handlePageClick}
+      <div>
+        <Container align="center" className="flex-wrap" justify="center" spacing="small">
+          <Container spacing="small">
+            <Button
+              aria-label="First page"
+              disabled={isFirstPage}
+              variant="outline"
+              onClick={handleFirstPageClick}
+            >
+              <Icon name="ChevronDoubleLeft" />
+            </Button>
+            <Button
+              aria-label="Previous page"
+              disabled={isFirstPage}
+              variant="outline"
+              onClick={handlePreviousPageClick}
+            >
+              <Icon name="ChevronLeft" />
+            </Button>
+
+            {pageCount <= MAX_PAGE_BUTTONS_COUNT ?
+              Array.from({length: pageCount}).map((_, index) => (
+                <DataTablePageButton
+                  // eslint-disable-next-line react/no-array-index-key -- needed, there is no other value
+                  key={index}
+                  isSelected={page === index + 1}
+                  page={index + 1}
+                  onClick={handlePageClick}
+                />
+              ))
+            : null}
+
+            <Button
+              aria-label="Next page"
+              disabled={isLastPage}
+              variant="outline"
+              onClick={handleNextPageClick}
+            >
+              <Icon name="ChevronRight" />
+            </Button>
+            <Button
+              aria-label="Last page"
+              disabled={isLastPage}
+              variant="outline"
+              onClick={handleLastPageClick}
+            >
+              <Icon name="ChevronDoubleRight" />
+            </Button>
+          </Container>
+          {pageCount > MAX_PAGE_BUTTONS_COUNT ?
+            <Container spacing="extra-small">
+              <Text>
+                Page {page} of {pageCount}
+              </Text>
+            </Container>
+          : null}
+          {pageCount > MAX_PAGE_BUTTONS_COUNT ?
+            <Container align="center" spacing="extra-small">
+              <Text>Go to page:</Text>
+              <Input
+                className="w-12"
+                defaultValue={page}
+                pattern="[0-9]*"
+                type="text"
+                onChange={handlePageChange}
               />
-            ))
+            </Container>
           : null}
-
-          <Button
-            aria-label="Next page"
-            disabled={isLastPage}
-            variant="outline"
-            onClick={handleNextPageClick}
-          >
-            <Icon name="ChevronRight" />
-          </Button>
-          <Button
-            aria-label="Last page"
-            disabled={isLastPage}
-            variant="outline"
-            onClick={handleLastPageClick}
-          >
-            <Icon name="ChevronDoubleRight" />
-          </Button>
-        </Container>
-        {pageCount > MAX_PAGE_BUTTONS_COUNT ?
-          <Container spacing="extra-small">
-            <Text>
-              Page {page} of {pageCount}
-            </Text>
-          </Container>
-        : null}
-        {pageCount > MAX_PAGE_BUTTONS_COUNT ?
-          <Container align="center" spacing="extra-small">
-            <Text>Go to page:</Text>
-            <Input
-              className="w-12"
-              defaultValue={page}
-              pattern="[0-9]*"
-              type="text"
-              onChange={handlePageChange}
-            />
+          <Container>
+            <Listbox
+              className="w-auto min-w-min"
+              value={String(pageSize)}
+              onChange={handlePageSizeChange}
+            >
+              {PAGE_SIZES.map((pageSize) => (
+                <ListboxOption key={pageSize} value={String(pageSize)}>
+                  Show {pageSize}
+                </ListboxOption>
+              ))}
+            </Listbox>
           </Container>
-        : null}
-        <Container>
-          <Listbox
-            className="w-auto min-w-min"
-            value={String(pageSize)}
-            onChange={handlePageSizeChange}
-          >
-            {PAGE_SIZES.map((pageSize) => (
-              <ListboxOption key={pageSize} value={String(pageSize)}>
-                Show {pageSize}
-              </ListboxOption>
-            ))}
-          </Listbox>
         </Container>
-      </Container>
+      </div>
     );
   },
 );

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

@@ -0,0 +1,40 @@
+import {flexRender, type Row} from '@tanstack/react-table';
+import {useCallback} from 'react';
+
+import {TableCell} from '../../TableCell.js';
+import {TableRow} from '../../TableRow.js';
+import {getCommonPinningClasses, getCommonPinningStyles} from '../internals.js';
+
+export type DataTableRowProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  row: Row<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  onClick?: ((row: Row<any>) => void) | undefined;
+};
+
+export function DataTableRow({row, onClick}: DataTableRowProps) {
+  let handleClick = useCallback(() => {
+    onClick?.(row);
+  }, [onClick, row]);
+
+  return (
+    <TableRow className={onClick ? 'cursor-pointer' : undefined} onClick={handleClick}>
+      {row.getVisibleCells().map((cell) => {
+        let value = cell.getValue();
+
+        return (
+          <TableCell
+            key={cell.id}
+            className={
+              getCommonPinningClasses(cell.column) + (onClick ? ' **:pointer-events-none' : '')
+            }
+            style={{...getCommonPinningStyles(cell.column)}}
+            title={value === null || value === undefined ? undefined : String(value)}
+          >
+            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+}

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

@@ -0,0 +1,142 @@
+import {useSortable} from '@dnd-kit/sortable';
+import {CSS} from '@dnd-kit/utilities';
+import {type Column, flexRender, type Header, type Table} from '@tanstack/react-table';
+import {useCallback} from 'react';
+
+import {Button} from '../../Button.js';
+import {Checkbox} from '../../Checkbox.js';
+import {CheckboxField} from '../../CheckboxField.js';
+import {Container} from '../../Container.js';
+import {Icon} from '../../Icon.js';
+import {Label} from '../../Label.js';
+import {type DataTableProps} from '../DataTable.js';
+
+export type DataTableSettingProps = {
+  // 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
+  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'];
+};
+
+export function DataTableSetting({
+  table,
+  // header,
+  column,
+  hideColumnVisibility = false,
+  hideColumnOrder = false,
+  hideColumnPinning = false,
+}: DataTableSettingProps) {
+  let {attributes, isDragging, listeners, setNodeRef, transform, setActivatorNodeRef} = useSortable(
+    {
+      id: column.id,
+    },
+  );
+
+  let handleChange = useCallback(
+    (checked: boolean) => {
+      if (!checked && table.getFlatHeaders().length >= 2) {
+        column.toggleVisibility(checked);
+      } else if (checked) {
+        column.toggleVisibility(checked);
+      }
+    },
+    [column, table],
+  );
+
+  let handlePinLeftClick = useCallback(() => {
+    column.pin('left');
+  }, [column]);
+
+  let handlePinRightClick = useCallback(() => {
+    column.pin('right');
+  }, [column]);
+
+  let handleUnpinClick = useCallback(() => {
+    column.pin(false);
+  }, [column]);
+
+  let resolvedHideColumnPinning = hideColumnPinning || !column.getCanPin();
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        transform: CSS.Translate.toString(transform),
+        transition: 'width transform 0.2s ease-in-out',
+        zIndex: isDragging ? 20 : undefined,
+      }}
+      className="flex items-center gap-4"
+    >
+      {hideColumnOrder ? null : (
+        <Button
+          ref={setActivatorNodeRef}
+          aria-label="Resize"
+          className="cursor-move"
+          size="small"
+          variant="invisible"
+          {...attributes}
+          {...listeners}
+        >
+          <Icon name="Bars4" size="small" />
+        </Button>
+      )}
+      {hideColumnVisibility ?
+        <span className="mr-auto font-sans text-sm font-medium">
+          {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>,
+          })}
+        </span>
+      : <CheckboxField className="mr-auto">
+          <Checkbox checked={column.getIsVisible()} onChange={handleChange} />
+          <Label className="flex">
+            {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>
+      }
+
+      {resolvedHideColumnPinning ? null : (
+        <Container spacing="extra-small">
+          {column.getIsPinned() === 'left' ? null : (
+            <Button
+              aria-label="Pin to left"
+              size="small"
+              variant="outline"
+              onClick={handlePinLeftClick}
+            >
+              <Icon name="ArrowLeftEndOnRectangle" size="small" />
+            </Button>
+          )}
+          {column.getIsPinned() ?
+            <Button aria-label="Unpin" size="small" variant="outline" onClick={handleUnpinClick}>
+              <Icon name="XMark" size="small" />
+            </Button>
+          : null}
+          {column.getIsPinned() === 'right' ? null : (
+            <Button
+              aria-label="Pin to right"
+              size="small"
+              variant="outline"
+              onClick={handlePinRightClick}
+            >
+              <Icon name="ArrowRightEndOnRectangle" size="small" />
+            </Button>
+          )}
+        </Container>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {restrictToVerticalAxis} from '@dnd-kit/modifiers';
+import {arrayMove, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
+import {type Table} from '@tanstack/react-table';
+import {useCallback, useId} from 'react';
+
+import {Container} from '../../Container.js';
+import {type DataTableProps} from '../DataTable.js';
+import {DataTableSetting} from './DataTableSetting.js';
+
+export type DataTableSettingsProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed
+  table: Table<any>;
+  // 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'];
+};
+
+export function DataTableSettings({
+  table,
+  hideColumnVisibility = false,
+  hideColumnOrder = false,
+  hideColumnPinning = false,
+}: DataTableSettingsProps) {
+  let sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor),
+  );
+
+  let id = useId();
+
+  let handleDragEnd = useCallback(
+    ({active, over}: DragEndEvent) => {
+      if (over && active.id !== over.id) {
+        table.setColumnOrder((previousColumnOrder) => {
+          let oldIndex = previousColumnOrder.indexOf(active.id as string);
+          let newIndex = previousColumnOrder.indexOf(over.id as string);
+
+          return arrayMove(previousColumnOrder, oldIndex, newIndex);
+        });
+      }
+    },
+    [table],
+  );
+
+  return (
+    <DndContext
+      collisionDetection={closestCenter}
+      id={id}
+      modifiers={[restrictToVerticalAxis]}
+      sensors={sensors}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext items={table.getState().columnOrder} strategy={verticalListSortingStrategy}>
+        <Container direction="column" spacing="small">
+          {table.getAllLeafColumns().map((column) => (
+            <DataTableSetting
+              key={column.id}
+              column={column}
+              hideColumnOrder={hideColumnOrder}
+              hideColumnPinning={hideColumnPinning}
+              hideColumnVisibility={hideColumnVisibility}
+              table={table}
+            />
+          ))}
+        </Container>
+      </SortableContext>
+    </DndContext>
+  );
+}

package/source/components/data-table/internals/constants.ts

@@ -1,3 +1,3 @@
 export const MAX_PAGE_BUTTONS_COUNT = 10;
 export const PAGE_SIZES = [10, 25, 50, 75, 100] as const;
-export const DEFAULT_PAGE_SIZE = 50;
+export const DEFAULT_PAGE_SIZE = PAGE_SIZES[2];

package/source/components/data-table/internals.ts

@@ -1,11 +1,16 @@
 export * from './internals/addFilter.js';
 export * from './internals/constants.js';
+export * from './internals/DataTableFilter.js';
+export * from './internals/DataTableFilters.js';
 export * from './internals/DataTableHeader.js';
 export * from './internals/DataTableHeaderColumnCheckbox.js';
 export * from './internals/DataTableHeaderFilter.js';
+export * from './internals/DataTableMenu.js';
 export * from './internals/DataTablePageButton.js';
 export * from './internals/DataTablePagination.js';
 export * from './internals/DataTableSearch.js';
+export * from './internals/DataTableSetting.js';
+export * from './internals/DataTableSettings.js';
 export * from './internals/fromPinningState.js';
 export * from './internals/fuzzyFilter.js';
 export * from './internals/getCommonPinningClasses.js';

package/source/components.ts

@@ -14,6 +14,7 @@ export * from './components/Error.js';
 export * from './components/Field.js';
 export * from './components/Fieldset.js';
 export * from './components/Form.js';
+export * from './components/Heading.js';
 export * from './components/Icon.js';
 export * from './components/Input.js';
 export * from './components/Label.js';

package/source/development/createTailwindConfig.ts

@@ -1,10 +1,10 @@
 import {type Config as BaseTailwindConfig} from 'tailwindcss';
 import plugin from 'tailwindcss/plugin';
 
-import {DEFAULT_STOP, type DEFAULT_STOPS} from './internals/constants.js';
-import {createPalette} from './internals/createPalette.js';
+import {createTailwindThemeColors} from './internals.js';
+import {type DEFAULT_STOPS} from './internals/constants.js';
 
-let defaultCreateTailwindConfigOptions = {
+export const defaultCreateTailwindConfigOptions = {
   colors: {
     gray: '#6c6e79',
     neutral: '#6c6e79', // copy of "gray"
@@ -55,7 +55,6 @@ let defaultCreateTailwindConfigOptions = {
 } satisfies CreateTailwindConfigOptions;
 
 export type CreateTailwindConfigOptions = {
-  content?: string[] | undefined;
   colors?: Record<
     string,
     | {hex: string; hueShift?: number; saturationShift?: number}
@@ -75,65 +74,20 @@ export type TailwindConfig = {
 };
 
 export function createTailwindConfig({
-  content,
   colors,
 }: CreateTailwindConfigOptions = defaultCreateTailwindConfigOptions): TailwindConfig {
-  let themeColors: Record<string, Record<string, string> | string> = {
-    transparent: 'transparent',
-    current: 'currentColor',
-    white: '#fff',
-    black: '#000',
-  };
-
-  for (let [name, color] of Object.entries(colors ?? {})) {
-    if (typeof color === 'string') {
-      themeColors = {
-        ...themeColors,
-        ...createPalette({
-          name,
-          swatches: [
-            {
-              hex: color,
-              stop: DEFAULT_STOP,
-            },
-          ],
-          hueShift: 0,
-          saturationShift: 0,
-        }),
-      };
-    } else if ('swatches' in color) {
-      themeColors = {
-        ...themeColors,
-        ...createPalette({
-          name,
-          swatches: color.swatches,
-          hueShift: color.hueShift ?? 0,
-          saturationShift: color.saturationShift ?? 0,
-        }),
-      };
-    } else if ('hex' in color) {
-      themeColors = {
-        ...themeColors,
-        ...createPalette({
-          name,
-          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],
-          hueShift: color.hueShift ?? 0,
-          saturationShift: color.saturationShift ?? 0,
-        }),
-      };
-    }
-  }
+  let themeColors = createTailwindThemeColors(colors);
 
   // TODO: find another solution; following is needed because of this: https://github.com/tailwindlabs/tailwindcss/issues/18237
   let root: Record<string, Record<string, string> | string> = {
     '--radius-none': '0',
-    '--radius-0_5': '0.125rem',
-    '--radius-1': '0.25rem',
-    '--radius-1_5': '0.375rem',
-    '--radius-2': '0.5rem',
-    '--radius-2_5': '0.625rem',
-    '--radius-3': '0.75rem',
-    '--radius-4': '1rem',
+    '--radius-0_5': '2px',
+    '--radius-1': '4px',
+    '--radius-1_5': '6px',
+    '--radius-2': '8px',
+    '--radius-2_5': '10px',
+    '--radius-3': '12px',
+    '--radius-4': '16px',
     '--radius-full': '9999px',
     '--font-sans':
       'InterVariable, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',

package/source/development/internals/createTailwindThemeColors.ts

@@ -0,0 +1,53 @@
+import {type CreateTailwindConfigOptions} from '../createTailwindConfig.js';
+import {DEFAULT_STOP} from './constants.js';
+import {createPalette} from './createPalette.js';
+
+export function createTailwindThemeColors(colors: CreateTailwindConfigOptions['colors']) {
+  let themeColors: Record<string, Record<string, string> | string> = {
+    transparent: 'transparent',
+    current: 'currentColor',
+    white: '#fff',
+    black: '#000',
+  };
+
+  for (let [name, color] of Object.entries(colors ?? {})) {
+    if (typeof color === 'string') {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [
+            {
+              hex: color,
+              stop: DEFAULT_STOP,
+            },
+          ],
+          hueShift: 0,
+          saturationShift: 0,
+        }),
+      };
+    } else if ('swatches' in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: color.swatches,
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0,
+        }),
+      };
+    } else if ('hex' in color) {
+      themeColors = {
+        ...themeColors,
+        ...createPalette({
+          name,
+          swatches: [{hex: color.hex, stop: DEFAULT_STOP}],
+          hueShift: color.hueShift ?? 0,
+          saturationShift: color.saturationShift ?? 0,
+        }),
+      };
+    }
+  }
+
+  return themeColors;
+}

package/source/development/internals.ts

@@ -6,6 +6,7 @@ export * from './internals/createHueScale.js';
 export * from './internals/createPalette.js';
 export * from './internals/createSaturationScale.js';
 export * from './internals/createSwatches.js';
+export * from './internals/createTailwindThemeColors.js';
 export * from './internals/hexToHsl.js';
 export * from './internals/hexToRgb.js';
 export * from './internals/hslToHex.js';

package/source/styles.css

@@ -14,6 +14,10 @@
   src: url('./inter-variable-italic.woff2') format('woff2');
 }
 
+@theme {
+  --spacing: 4px;
+}
+
 @layer base {
   html {
     font-family: var(--font-sans);
@@ -22,11 +26,23 @@
 
   * {
     scrollbar-color: var(--color-neutral-200) var(--color-transparent);
+    outline-color: transparent;
   }
-}
 
-@theme {
-  --spacing: 4px;
+  *:focus {
+    outline-style: none;
+    outline-width: 0;
+  }
+
+  *:focus-visible {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: calc(var(--spacing) * 0.5);
+    outline-color: color-mix(in oklab, var(--color-blue-400) 50%, transparent);
+    transition-property: outline-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
 }
 
 @source "./";

package/source/theme/Theme.ts

@@ -15,6 +15,7 @@ import {type useErrorTheme} from '../components/Error.js';
 import {type useFieldTheme} from '../components/Field.js';
 import {type useFieldsetTheme} from '../components/Fieldset.js';
 import {type useFormTheme} from '../components/Form.js';
+import {type useHeadingTheme} from '../components/Heading.js';
 import {type useIconTheme} from '../components/Icon.js';
 import {type useInputTheme} from '../components/Input.js';
 import {type useLabelTheme} from '../components/Label.js';
@@ -65,6 +66,7 @@ export type Theme = Simplify<
     ComponentTheme<typeof useFieldsetTheme, {outputComponentName: true}> &
     ComponentTheme<typeof useFieldTheme, {outputComponentName: true}> &
     ComponentTheme<typeof useFormTheme, {outputComponentName: true}> &
+    ComponentTheme<typeof useHeadingTheme, {outputComponentName: true}> &
     ComponentTheme<typeof useIconTheme, {outputComponentName: true}> &
     ComponentTheme<typeof useInputTheme, {outputComponentName: true}> &
     ComponentTheme<typeof useLabelTheme, {outputComponentName: true}> &