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

package/source/components/Heading.ts

@@ -0,0 +1,69 @@
+import {
+  type ComponentPropsWithoutRef,
+  createElement,
+  type ElementType,
+  type PropsWithChildren,
+} from 'react';
+
+import {
+  type ComponentProps,
+  type ComponentTheme,
+  createComponentTheme,
+} from '../theme/internals.js';
+import {type ComponentRef} from './ComponentRef.js';
+
+export const useHeadingTheme = createComponentTheme('Heading', {
+  variants: {
+    size: ['small', 'medium', 'large'],
+  },
+});
+
+const HEADING_ELEMENT = 'h1';
+
+export type HeadingProps<T extends ElementType> = ComponentProps<typeof useHeadingTheme> &
+  ComponentPropsWithoutRef<T> &
+  ComponentRef<T> &
+  PropsWithChildren & {
+    as?: T | undefined;
+    className?: string;
+  };
+
+export function Heading<T extends ElementType = typeof HEADING_ELEMENT>({
+  size = 'medium',
+  as: Component,
+  className,
+  ref,
+  children,
+  ...rest
+}: HeadingProps<T>) {
+  let theme = useHeadingTheme({size});
+  let props = {
+    ref,
+    className: theme(null, className),
+    'data-component': 'heading',
+    ...rest,
+  };
+  // TODO: is this ok typings-wise? Are types for <h1> and <h2> different?
+  let DefaultComponent = HEADING_ELEMENT;
+
+  if (size === 'small') {
+    DefaultComponent = 'h3';
+  }
+
+  if (size === 'medium') {
+    DefaultComponent = 'h2';
+  }
+
+  return createElement(Component ?? DefaultComponent, props, children);
+}
+
+export const headingTheme: ComponentTheme<typeof useHeadingTheme> = {
+  className: 'm-0',
+  variants: {
+    size: {
+      small: 'text-lg font-medium',
+      medium: 'text-xl font-medium',
+      large: 'text-2xl font-medium',
+    },
+  },
+};

package/source/components/Icon.tsx

@@ -82,7 +82,7 @@ export function Icon<T extends ElementType = typeof ICON_ELEMENT>({
 }
 
 export const iconTheme: ComponentTheme<typeof useIconTheme> = {
-  className: 'inline-block shrink-0 *:w-full *:h-full data-[icon]:-mx-1 select-none',
+  className: 'inline-block shrink-0 *:w-full *:h-full select-none',
   variants: {
     size: {
       small: 'size-4',

package/source/components/Input.tsx

@@ -117,9 +117,9 @@ export function Input<T extends ElementType = typeof INPUT_ELEMENT>({
         </span>
       : null}
       {showClearButton ?
-        <span {...clearButtonProps} onClick={handleClear}>
+        <button type="button" {...clearButtonProps} onClick={handleClear}>
           <Icon name="XMark" />
-        </span>
+        </button>
       : null}
     </span>
   );
@@ -127,11 +127,11 @@ export function Input<T extends ElementType = typeof INPUT_ELEMENT>({
 
 export const inputTheme: ComponentTheme<typeof useInputTheme> = {
   classNames: {
-    root: 'group flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 px-2.5 h-9 bg-white shadow-inner transition-colors',
+    root: 'group flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 px-2.5 h-9 bg-white shadow-inner transition-colors focus-within:outline-solid focus-within:outline-2 focus-within:outline-blue-400/50 focus-within:outline-offset-[calc(var(--spacing)*0.5)]',
     input:
-      'p-0 focus-visible:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm',
+      'p-0 focus:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm',
     icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300',
-    clearButton: 'text-neutral-500 size-5 right-2 cursor-pointer',
+    clearButton: 'rounded-1 text-neutral-500 size-5 right-2 cursor-pointer',
   },
   variants: {
     disabled: {

package/source/components/Legend.tsx

@@ -42,5 +42,5 @@ export function Legend<T extends ElementType = typeof LEGEND_ELEMENT>({
 }
 
 export const legendTheme: ComponentTheme<typeof useLegendTheme> = {
-  className: 'font-sans font-semibold text-sm',
+  className: 'font-sans font-medium text-sm',
 };

package/source/components/ListboxOption.tsx

@@ -68,7 +68,7 @@ export function ListboxOption<
 
 export const listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme> = {
   classNames: {
-    root: 'group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors',
+    root: 'group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors relative',
     icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500',
   },
   variants: {

package/source/components/Radio.tsx

@@ -70,8 +70,8 @@ export function Radio<
 
 export const radioTheme: ComponentTheme<typeof useRadioTheme> = {
   classNames: {
-    root: 'group/radio inline-block size-5',
-    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white',
+    root: 'group/radio inline-block size-5 rounded-full',
+    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white group-data-[checked]/radio:*:hover:border-neutral-950',
   },
   variants: {
     disabled: {

package/source/components/Spinner.tsx

@@ -44,7 +44,7 @@ export const Spinner = memo(({size = 'medium', className, ...rest}: SpinnerProps
 
 export const spinnerTheme: ComponentTheme<typeof useSpinnerTheme> = {
   classNames: {
-    root: 'inline-flex items-center justify-center fill-neutral-900 text-neutral-200 data-[icon]:-mx-1',
+    root: 'inline-flex items-center justify-center fill-neutral-900 text-neutral-200',
     icon: 'animate-spin',
   },
   variants: {

package/source/components/TableHead.ts

@@ -43,5 +43,5 @@ export function TableHead<T extends ElementType = typeof TABLE_HEAD_ELEMENT>({
 }
 
 export const tableHeadTheme: ComponentTheme<typeof useTableHeadTheme> = {
-  className: 'font-sans border-b-2 border-neutral-100',
+  className: 'font-sans border-t-2 border-b-2 border-neutral-100',
 };

package/source/components/TableHeader.ts

@@ -43,5 +43,6 @@ export function TableHeader<T extends ElementType = typeof TABLE_HEADER_ELEMENT>
 }
 
 export const tableHeaderTheme: ComponentTheme<typeof useTableHeaderTheme> = {
-  className: 'relative p-1 text-sm font-medium z-20 font-sans tabular-nums whitespace-nowrap',
+  className:
+    'relative p-1 text-sm font-medium z-20 font-sans tabular-nums whitespace-nowrap empty:p-0',
 };

package/source/components/Textarea.tsx

@@ -79,9 +79,9 @@ export function Textarea<T extends ElementType = typeof TEXTAREA_ELEMENT>({
 
 export const textareaTheme: ComponentTheme<typeof useTextareaTheme> = {
   classNames: {
-    root: 'group flex w-full items-center rounded border-2 border-neutral-100 hover:border-neutral-200 py-2 px-2.5 min-h-19 bg-white shadow-inner transition-colors',
+    root: 'group flex w-full items-center rounded border-2 border-neutral-100 hover:border-neutral-200 py-2 px-2.5 min-h-19 bg-white shadow-inner transition-colors focus-within:outline-solid focus-within:outline-2 focus-within:outline-blue-400/50 focus-within:outline-offset-[calc(var(--spacing)*0.5)]',
     textarea:
-      'min-h-15 p-0 focus-visible:outline-none w-full group-data-[icon]:pl-6 bg-transparent font-sans text-sm',
+      'min-h-15 p-0 focus:outline-none w-full group-data-[icon]:pl-6 bg-transparent font-sans text-sm',
     icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300',
   },
   variants: {

package/source/components/data-table/DataTable.tsx

@@ -1,15 +1,4 @@
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  KeyboardSensor,
-  MouseSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {restrictToHorizontalAxis} from '@dnd-kit/modifiers';
-import {arrayMove, horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';
+import {horizontalListSortingStrategy, SortableContext} from '@dnd-kit/sortable';
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -23,15 +12,21 @@ import {
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  type Header,
   type PaginationState,
+  type Row,
   type RowData,
   type SortingState,
   type Updater,
   useReactTable,
   type VisibilityState,
 } from '@tanstack/react-table';
-import {useCallback, useId, useState} from 'react';
+import {useCallback, useState} from 'react';
 
+import {Button} from '../Button.js';
+import {Container} from '../Container.js';
+import {Dialog} from '../Dialog.js';
+import {DialogPanel} from '../DialogPanel.js';
 import {Table} from '../Table.js';
 import {TableBody} from '../TableBody.js';
 import {TableCell} from '../TableCell.js';
@@ -48,15 +43,16 @@ import {type DataTablePagination} from './DataTablePagination.js';
 import {type DataTableSearch} from './DataTableSearch.js';
 import {type DataTableSorting} from './DataTableSorting.js';
 import {
+  DataTableFilters as DataTableFiltersComponent,
   DataTableHeader,
+  DataTableMenu,
   DataTablePagination as DataTablePaginationComponent,
   DataTableSearch as DataTableSearchComponent,
   DEFAULT_PAGE_SIZE,
   fromPinningState,
   fuzzyFilter,
-  getCommonPinningClasses,
-  getCommonPinningStyles,
 } from './internals.js';
+import {DataTableRow} from './internals/DataTableRow.js';
 
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- false positive
@@ -100,6 +96,7 @@ export type DataTableProps<D, C> = {
   hideSearch?: boolean | undefined;
   search?: DataTableSearch | undefined;
   onSearchChange?: ((search: DataTableSearch) => void) | undefined;
+  showRowSummaryOnClick?: boolean | undefined;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed so the type parameters are useful
@@ -134,6 +131,7 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
   hideSearch = false,
   search: controlledSearch,
   onSearchChange,
+  showRowSummaryOnClick = false,
 }: DataTableProps<D, C>) {
   let [pagination, setPagination] = useState<PaginationState>(
     controlledPagination ?
@@ -199,7 +197,10 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
   );
   let [sorting, setSorting] = useState<SortingState>([]);
   let [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  let [showFilters, setShowFilters] = useState(false);
   let [search, setSearch] = useState('');
+  let [showRowSummary, setShowRowSummary] = useState(false);
+  let [rowSummaryRow, setRowSummaryRow] = useState<Row<D> | null>(null);
 
   let handleColumnVisibilityChange = useCallback(
     (columnVisibilityState: Updater<VisibilityState>) => {
@@ -268,36 +269,6 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
     globalFilterFn: fuzzyFilter,
   });
 
-  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],
-  );
-
-  let sensors = useSensors(
-    useSensor(MouseSensor, {
-      activationConstraint: {
-        distance: 5,
-      },
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        distance: 5,
-      },
-    }),
-    useSensor(KeyboardSensor, {}),
-  );
-
-  let id = useId();
-
   let page =
     clientPagination ?
       table.getState().pagination.pageIndex + 1
@@ -308,20 +279,52 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
     : (controlledPagination?.pageSize ?? DEFAULT_PAGE_SIZE);
   let pageCount = clientPagination ? table.getPageCount() : (controlledPagination?.pageCount ?? 1);
 
+  let toggleFilters = useCallback(() => {
+    setShowFilters((value) => !value);
+  }, []);
+
+  let handleRowClick = useCallback((row: Row<D>) => {
+    setRowSummaryRow(row);
+    setShowRowSummary(true);
+  }, []);
+
+  let handleCloseRowDialog = useCallback(() => {
+    setShowRowSummary(false);
+  }, []);
+
   return (
-    <DndContext
-      collisionDetection={closestCenter}
-      id={id}
-      modifiers={[restrictToHorizontalAxis]}
-      sensors={sensors}
-      onDragEnd={handleDragEnd}
+    <div
+      className="group/table grid w-full grid-cols-[100%] grid-rows-[min-content_min-content_1fr] gap-6 sm:gap-4 sm:data-[show-filters]:grid-cols-[1fr_2fr] md:data-[show-filters]:grid-cols-[1fr_3fr] lg:data-[show-filters]:grid-cols-[1fr_4fr]"
+      data-show-filters={showFilters || undefined}
     >
-      {hideSearch ? null : (
-        <DataTableSearchComponent
-          clientSearch={clientSearch}
-          search={controlledSearch}
+      <div className="flex flex-col gap-2">
+        {hideSearch ? null : (
+          <DataTableSearchComponent
+            clientSearch={clientSearch}
+            search={controlledSearch}
+            table={table}
+            onSearch={onSearchChange}
+          />
+        )}
+        {hideColumnOrder && hideColumnPinning && hideColumnVisibility && hideFilters ? null : (
+          <DataTableMenu
+            hideColumnOrder={hideColumnOrder}
+            hideColumnPinning={hideColumnPinning}
+            hideColumnVisibility={hideColumnVisibility}
+            hideFilters={hideFilters}
+            table={table}
+            toggleFilters={toggleFilters}
+          />
+        )}
+      </div>
+      {hideFilters ? null : (
+        <DataTableFiltersComponent
+          clientFaceting={clientFaceting}
+          clientFilters={clientFilters}
+          faceting={faceting}
+          filters={controlledFilters}
           table={table}
-          onSearch={onSearchChange}
+          onFiltering={onFiltersChange}
         />
       )}
       <div className="w-full overflow-x-scroll overflow-y-visible [scrollbar-width:thin]">
@@ -338,21 +341,12 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
                   {headerGroup.headers.map((header) => (
                     <DataTableHeader
                       key={header.id}
-                      clientFaceting={clientFaceting}
-                      clientFilters={clientFilters}
                       clientSorting={clientSorting}
-                      faceting={faceting}
-                      filters={controlledFilters}
                       header={header}
                       hideColumnOrder={hideColumnOrder}
-                      hideColumnPinning={hideColumnPinning}
                       hideColumnResizing={hideColumnResizing}
-                      hideColumnVisibility={hideColumnVisibility}
-                      hideFilters={hideFilters}
                       hideSorting={hideSorting}
                       sorting={controlledSorting}
-                      table={table}
-                      onFiltering={onFiltersChange}
                       onSorting={onSortingChange}
                     />
                   ))}
@@ -362,22 +356,11 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
           </TableHead>
           <TableBody>
             {table.getRowModel().rows.map((row) => (
-              <TableRow key={row.id}>
-                {row.getVisibleCells().map((cell) => {
-                  let value = cell.getValue();
-
-                  return (
-                    <TableCell
-                      key={cell.id}
-                      className={getCommonPinningClasses(cell.column)}
-                      style={{...getCommonPinningStyles(cell.column)}}
-                      title={value === null || value === undefined ? undefined : String(value)}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </TableCell>
-                  );
-                })}
-              </TableRow>
+              <DataTableRow
+                key={row.id}
+                row={row}
+                onClick={showRowSummaryOnClick ? handleRowClick : undefined}
+              />
             ))}
           </TableBody>
           <TableFoot>
@@ -405,6 +388,38 @@ export function DataTable<D extends RowData, C extends Array<ColumnDef<D, any>>>
           onPagination={onPaginationChange}
         />
       )}
-    </DndContext>
+      {showRowSummaryOnClick ?
+        <Dialog open={showRowSummary} onClose={handleCloseRowDialog}>
+          <DialogPanel className="flex flex-col gap-4">
+            {rowSummaryRow ?
+              <Table className="w-full">
+                <TableBody>
+                  {rowSummaryRow.getVisibleCells().map((cell) => (
+                    <TableRow key={cell.id}>
+                      <TableHeader className="px-4">
+                        {flexRender(cell.column.columnDef.header, {
+                          table,
+                          column: cell.column,
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
+                          header: {column: cell.column} as Header<any, any>,
+                        })}
+                      </TableHeader>
+                      <TableCell className="overflow-visible whitespace-normal">
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            : null}
+            <Container align="center" direction="column">
+              <Button className="self-center" onClick={handleCloseRowDialog}>
+                Close
+              </Button>
+            </Container>
+          </DialogPanel>
+        </Dialog>
+      : null}
+    </div>
   );
 }