@umituz/web-design-system 4.6.2 → 4.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "4.6.2",
+  "version": "4.6.4",
   "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

@@ -198,7 +198,7 @@ describe('DataTable', () => {
     expect(cellsBefore.join()).toContain('bravo');
     fireEvent.click(screen.getByRole('columnheader', { name: /name/i }));
     const firstDataRow = screen.getAllByRole('row')[1];
-    expect(firstDataRow.textContent).toContain('alpha');
+    expect(firstDataRow?.textContent).toContain('alpha');
   });
 
   it('controlled sort delegates to onSortChange', () => {
@@ -704,6 +704,28 @@ describe('accessia supersets', () => {
     expect(screen.getAllByRole('row')[1]?.textContent).toContain('alpha');
   });
 
+  it('DataTable cell-only column works without accessor and honors controlled null sort', () => {
+    interface Local {
+      id: string;
+      name: string;
+    }
+    const { container } = render(
+      <DataTable<Local>
+        data={[
+          { id: 'cn-b', name: 'cn-bravo' },
+          { id: 'cn-a', name: 'cn-alpha' },
+        ]}
+        sortable
+        sort={null}
+        onSortChange={() => {}}
+        columns={[{ id: 'name', header: 'Name', cell: (r) => <em>{r.name}</em> }]}
+      />,
+    );
+    const firstCell = container.querySelector('tbody td');
+    expect(firstCell?.textContent).toContain('cn-bravo');
+    expect(firstCell?.innerHTML).toContain('<em>');
+  });
+
   it('Progress info tone paints the fill info', () => {
     render(<Progress value={60} tone="info" aria-label="load" />);
     expect(screen.getByRole('progressbar', { name: 'load' }).querySelector('div')?.className).toContain('bg-info');

package/src/presentation/molecules/Avatar.tsx

@@ -33,8 +33,10 @@ const nameTones = [
 const initialsOf = (name: string): string => {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return '';
-  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  const first = parts[0] ?? '';
+  const last = parts[parts.length - 1] ?? '';
+  if (parts.length === 1) return first.slice(0, 2).toUpperCase();
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
 };
 
 const toneIndexOf = (name: string): number => {

package/src/presentation/organisms/DataTable.tsx

@@ -42,7 +42,8 @@ export interface SortState {
 export interface Column<T> {
   id: string;
   header: ReactNode;
-  accessor: keyof T | ((row: T) => ReactNode);
+  /** Data source; optional when the column renders through `cell` only. */
+  accessor?: keyof T | ((row: T) => ReactNode);
   cell?: (row: T) => ReactNode;
   sortValue?: (row: T) => string | number;
   sortable?: boolean;
@@ -66,8 +67,8 @@ export interface DataTableProps<T> extends BaseProps {
   caption?: string;
   size?: MediumSizes;
   sortable?: boolean;
-  sort?: SortState;
-  initialSort?: SortState;
+  sort?: SortState | null;
+  initialSort?: SortState | null;
   onSortChange?: (id: string) => void;
   rowKey?: (row: T) => string;
   selectedId?: string;
@@ -114,6 +115,7 @@ const hideBelowStyles: Record<ColumnHideBelow, string> = {
 
 function displayValue<T>(column: Column<T>, row: T): ReactNode {
   if (column.cell) return column.cell(row);
+  if (column.accessor === undefined) return null;
   return typeof column.accessor === 'function'
     ? column.accessor(row)
     : (row[column.accessor] as ReactNode);
@@ -121,6 +123,7 @@ function displayValue<T>(column: Column<T>, row: T): ReactNode {
 
 function sortValueOf<T>(column: Column<T>, row: T): string | number | null {
   if (column.sortValue) return column.sortValue(row);
+  if (column.accessor === undefined) return null;
   const value =
     typeof column.accessor === 'function' ? column.accessor(row) : row[column.accessor];
   if (typeof value === 'number') return value;
@@ -252,7 +255,7 @@ export function DataTable<T>({
   const [internalSort, setInternalSort] = useState<SortState | null>(initialSort ?? null);
   const [currentPage, setCurrentPage] = useState(1);
 
-  const activeSort = sort ?? internalSort;
+  const activeSort = sort !== undefined ? sort : internalSort;
   const controlled = sort !== undefined;
 
   const handleSort = (id: string) => {