@umituz/web-design-system 4.12.0 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "private": false,
   "type": "module",
   "description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",

package/src/__tests__/components.smoke.test.tsx

@@ -346,6 +346,75 @@ describe('DataTable', () => {
     expect(container.querySelector('nav')).toBeNull();
     expect(container.textContent).toContain('3 results');
   });
+
+  it('selectable rows fire onSelectionChange and expose the bulkBar selection', () => {
+    const calls: string[][] = [];
+    render(
+      <DataTable<Row>
+        data={rows}
+        rowKey={(r) => r.id}
+        selectable
+        onSelectionChange={(ids) => calls.push([...ids])}
+        bulkBar={({ ids, clear }) => (
+          <div>
+            <span>{ids.length} selected</span>
+            <button type="button" onClick={clear}>
+              clear
+            </button>
+          </div>
+        )}
+        columns={[{ id: 'name', header: 'Name', accessor: 'name' }]}
+      />,
+    );
+    const boxes = screen.getAllByRole('checkbox');
+    expect(boxes.length).toBe(3);
+    expect(screen.queryByText('1 selected')).toBeNull();
+    fireEvent.click(boxes[1]!);
+    expect(calls[calls.length - 1]).toEqual(['r2']);
+    expect(screen.getByText('1 selected')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'clear' }));
+    expect(calls[calls.length - 1]).toEqual([]);
+    expect(screen.queryByText('1 selected')).toBeNull();
+  });
+
+  it('header checkbox toggles the page and reflects partial selection', () => {
+    render(
+      <DataTable<Row>
+        data={rows}
+        rowKey={(r) => r.id}
+        selectable
+        columns={[{ id: 'name', header: 'Name', accessor: 'name' }]}
+      />,
+    );
+    const header = screen.getAllByRole('checkbox')[0] as HTMLInputElement;
+    const first = screen.getAllByRole('checkbox')[1] as HTMLInputElement;
+    fireEvent.click(first);
+    expect(header.indeterminate).toBe(true);
+    fireEvent.click(header);
+    const boxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
+    expect(boxes.map((box) => box.checked)).toEqual([true, true, true]);
+    fireEvent.click(header);
+    expect(boxes.slice(1).every((box) => !box.checked)).toBe(true);
+    expect(header.indeterminate).toBe(false);
+  });
+
+  it('hides optional columns until enabled and offers the columns menu with the toolbar', () => {
+    render(
+      <DataTable<Row>
+        data={rows}
+        toolbar={<input aria-label="filter rows" />}
+        columns={[
+          { id: 'name', header: 'Name', accessor: 'name' },
+          { id: 'qty', header: 'Qty', accessor: 'qty', optional: true },
+        ]}
+      />,
+    );
+    expect(screen.getByRole('columnheader', { name: /name/i })).toBeTruthy();
+    expect(screen.queryByRole('columnheader', { name: /qty/i })).toBeNull();
+    expect(screen.queryByText('10')).toBeNull();
+    expect(screen.getByRole('button', { name: /columns/i })).toBeTruthy();
+    expect(screen.getByLabelText('filter rows')).toBeTruthy();
+  });
 });
 
 describe('controlled surfaces', () => {

package/src/presentation/atoms/Checkbox.tsx

@@ -3,7 +3,15 @@
  * @description Checkbox input element with optional label
  */
 
-import { forwardRef, useId, type InputHTMLAttributes, type ReactNode, useCallback } from 'react';
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  type InputHTMLAttributes,
+  type ReactNode,
+} from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -13,6 +21,7 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
   size?: 'sm' | 'md' | 'lg';
   label?: ReactNode;
   hint?: ReactNode;
+  indeterminate?: boolean;
 }
 
 const sizeStyles = {
@@ -22,10 +31,22 @@ const sizeStyles = {
 };
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ className, checked, onCheckedChange, size = 'md', disabled, onChange, label, hint, id, ...props }, ref) => {
+  ({ className, checked, onCheckedChange, size = 'md', disabled, onChange, label, hint, id, indeterminate, ...props }, ref) => {
     const generatedId = useId();
     const checkboxId = id ?? generatedId;
     const hintId = `${checkboxId}-hint`;
+    const innerRef = useRef<HTMLInputElement | null>(null);
+    useEffect(() => {
+      if (innerRef.current) innerRef.current.indeterminate = indeterminate === true;
+    }, [indeterminate]);
+    const setRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        innerRef.current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref],
+    );
     const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
       onCheckedChange?.(e.target.checked);
       onChange?.(e);
@@ -33,7 +54,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
     const control = (
       <input
-        ref={ref}
+        ref={setRef}
         id={checkboxId}
         type="checkbox"
         checked={checked}

package/src/presentation/organisms/DataTable.tsx

@@ -8,6 +8,7 @@ import {
   ChevronsLeft,
   ChevronsRight,
   ChevronsUpDown,
+  Columns3,
 } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
 import {
@@ -22,6 +23,13 @@ import {
 } from './Table';
 import { Button } from '../atoms/Button';
 import { Skeleton } from '../atoms/Skeleton';
+import { Checkbox } from '../atoms/Checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+} from './DropdownMenu';
 import {
   computeTotalPages,
   clampPageNumber,
@@ -51,6 +59,8 @@ export interface Column<T> {
   hideBelow?: ColumnHideBelow;
   width?: string;
   className?: string;
+  /** Hidden until the reader enables it from the built-in columns menu. */
+  optional?: boolean;
 }
 
 export interface TablePaginationProps extends BaseProps {
@@ -72,6 +82,11 @@ export interface DataTableProps<T> extends BaseProps {
   onSortChange?: (id: string) => void;
   rowKey?: (row: T) => string;
   selectedId?: string;
+  selectable?: boolean;
+  selectedIds?: string[];
+  onSelectionChange?: (ids: string[]) => void;
+  bulkBar?: (selection: { ids: string[]; clear: () => void }) => ReactNode;
+  toolbar?: ReactNode;
   dense?: boolean;
   loading?: boolean;
   empty?: ReactNode;
@@ -239,6 +254,11 @@ export function DataTable<T>({
   onSortChange,
   rowKey,
   selectedId,
+  selectable = false,
+  selectedIds,
+  onSelectionChange,
+  bulkBar,
+  toolbar,
   dense = false,
   loading = false,
   empty,
@@ -254,10 +274,28 @@ export function DataTable<T>({
 }: DataTableProps<T>) {
   const [internalSort, setInternalSort] = useState<SortState | null>(initialSort ?? null);
   const [currentPage, setCurrentPage] = useState(1);
+  const [internalSelection, setInternalSelection] = useState<string[]>([]);
+  const [hiddenColumnIds, setHiddenColumnIds] = useState<string[]>(() =>
+    columns.filter((column) => column.optional).map((column) => column.id),
+  );
 
   const activeSort = sort !== undefined ? sort : internalSort;
   const controlled = sort !== undefined;
 
+  const selectionEnabled = selectable && rowKey !== undefined;
+  const selectionControlled = selectedIds !== undefined;
+  const selection = selectionControlled ? selectedIds : internalSelection;
+  const selectionSet = useMemo(() => new Set(selection), [selection]);
+
+  const commitSelection = (next: string[]) => {
+    if (!selectionControlled) setInternalSelection(next);
+    onSelectionChange?.(next);
+  };
+
+  const toggleRowSelection = (key: string) => {
+    commitSelection(selectionSet.has(key) ? selection.filter((id) => id !== key) : [...selection, key]);
+  };
+
   const handleSort = (id: string) => {
     if (!sortable) return;
     if (controlled) {
@@ -292,6 +330,29 @@ export function DataTable<T>({
   const safePage = clampPageNumber(currentPage, totalPages);
   const pageBounds = computePageBounds(currentPage, pageSize, data.length);
 
+  const knownColumnIds = useMemo(() => new Set(columns.map((column) => column.id)), [columns]);
+  const effectiveHiddenColumnIds = useMemo(
+    () => hiddenColumnIds.filter((id) => knownColumnIds.has(id)),
+    [hiddenColumnIds, knownColumnIds],
+  );
+  const hasOptionalColumns = useMemo(() => columns.some((column) => column.optional), [columns]);
+  const visibleColumns = useMemo(
+    () => columns.filter((column) => !effectiveHiddenColumnIds.includes(column.id)),
+    [columns, effectiveHiddenColumnIds],
+  );
+
+  const pageKeys = selectionEnabled ? paginatedData.map((row) => rowKey!(row)) : [];
+  const allPageSelected = pageKeys.length > 0 && pageKeys.every((key) => selectionSet.has(key));
+  const somePageSelected = pageKeys.some((key) => selectionSet.has(key));
+  const togglePageSelection = () => {
+    if (!selectionEnabled || pageKeys.length === 0) return;
+    commitSelection(
+      allPageSelected
+        ? selection.filter((id) => !pageKeys.includes(id))
+        : [...new Set([...selection, ...pageKeys])],
+    );
+  };
+
   const sizeStyles: Record<MediumSizes, string> = {
     sm: 'text-xs',
     md: 'text-sm',
@@ -341,11 +402,71 @@ export function DataTable<T>({
 
   return (
     <div className={cn('space-y-4', stackable && 'ds-datatable-stack', className)} {...props}>
+      {(toolbar !== undefined || hasOptionalColumns) && (
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          {toolbar !== undefined && <div className="flex flex-wrap items-center gap-2">{toolbar}</div>}
+          {hasOptionalColumns && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Columns3 className="h-4 w-4" aria-hidden="true" />
+                  Columns
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {columns.map((column) => (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    checked={!effectiveHiddenColumnIds.includes(column.id)}
+                    disabled={!column.optional}
+                    onCheckedChange={(checked) =>
+                      setHiddenColumnIds((prev) =>
+                        checked
+                          ? prev.filter((id) => id !== column.id)
+                          : prev.includes(column.id)
+                            ? prev
+                            : [...prev, column.id],
+                      )
+                    }
+                    onSelect={(event) => event.preventDefault()}
+                  >
+                    {typeof column.header === 'string' ? column.header : column.id}
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      )}
+      {selectionEnabled && bulkBar && selection.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm">
+          {bulkBar({ ids: selection, clear: () => commitSelection([]) })}
+        </div>
+      )}
       <Table>
         {caption && <TableCaption>{caption}</TableCaption>}
         <TableHeader>
           <TableRow>
-            {columns.map((column) => {
+            {selectionEnabled && (
+              <TableHead
+                className={cn(
+                  'w-10',
+                  pxStyles[size],
+                  pyStyles[size],
+                  sticky && 'sticky top-0 z-[1] bg-background/95 backdrop-blur',
+                )}
+              >
+                <Checkbox
+                  size="sm"
+                  checked={allPageSelected}
+                  indeterminate={!allPageSelected && somePageSelected}
+                  onCheckedChange={togglePageSelection}
+                  disabled={pageKeys.length === 0}
+                  aria-label="Select all rows on this page"
+                />
+              </TableHead>
+            )}
+            {visibleColumns.map((column) => {
               const isActiveSort = activeSort?.id === column.id;
               return (
                 <TableHead
@@ -404,6 +525,7 @@ export function DataTable<T>({
           {paginatedData.map((row, index) => {
             const key = rowKey ? rowKey(row) : index;
             const selected = rowKey !== undefined && selectedId !== undefined && rowKey(row) === selectedId;
+            const rowSelected = selectionEnabled && typeof key === 'string' && selectionSet.has(key);
             const handleRowKeyDown = (event: ReactKeyboardEvent<HTMLTableRowElement>) => {
               if (event.target !== event.currentTarget) return;
               if (event.key === 'Enter' || event.key === ' ') {
@@ -418,7 +540,7 @@ export function DataTable<T>({
                 aria-label={onRowClick && rowLabel ? rowLabel(row) : undefined}
                 className={cn(
                   onRowClick && 'cursor-pointer hover:bg-muted/50',
-                  selected && 'bg-muted/60',
+                  (selected || rowSelected) && 'bg-muted/60',
                   rowClass?.(row)
                 )}
                 onClick={
@@ -430,7 +552,17 @@ export function DataTable<T>({
                 }
                 onKeyDown={onRowClick ? handleRowKeyDown : undefined}
               >
-                {columns.map((column) => (
+                {selectionEnabled && typeof key === 'string' && (
+                  <TableCell className={cn('w-10', pxStyles[size], pyStyles[size])}>
+                    <Checkbox
+                      size="sm"
+                      checked={rowSelected}
+                      onCheckedChange={() => toggleRowSelection(key)}
+                      aria-label={rowLabel ? `Select ${rowLabel(row)}` : 'Select row'}
+                    />
+                  </TableCell>
+                )}
+                {visibleColumns.map((column) => (
                   <TableCell
                     key={column.id}
                     data-label={stackable ? stackLabel(column) : undefined}
@@ -452,7 +584,7 @@ export function DataTable<T>({
         {paginated && (
           <TableFooter>
             <TableRow>
-              <TableCell colSpan={columns.length}>
+              <TableCell colSpan={visibleColumns.length + (selectionEnabled ? 1 : 0)}>
                 <div className="flex items-center justify-between gap-2">
                   <p className={cn('text-muted-foreground', sizeStyles[size])}>
                     Showing {pageBounds.startIndex} to {pageBounds.endIndex} of {data.length} results