@bspk/ui 1.1.34 → 1.2.0

package/dist/components/Table/Table.d.ts

@@ -1,46 +1,62 @@
-import { ReactNode } from 'react';
-import { ElementProps } from '../../index.js';
 import './table.scss';
-export type TableRow = Record<string, ReactNode>;
-export type TableColumn<R extends TableRow = Record<string, ReactNode>> = {
+import { TableColumn, TableRow, TableSize } from './utils';
+import { ElementProps } from '-/types/common';
+export type TableProps<R extends TableRow> = {
     /**
-     * The key of the column. This is used to access the data in the row.
+     * The data of the table.
      *
-     * @type string
+     * Array<TableRow>
      */
-    key: keyof R;
+    data: R[];
     /**
-     * The label of the column. This is used to display the column header.
+     * The column definitions of the table.
      *
-     * @type string
+     * @type Array<TableColumn>
      */
-    label: string;
+    columns: (TableColumn<R> | boolean)[];
+    /** The title of the table. */
+    title?: string;
     /**
-     * The width of the column. This is used to set the width of the column.
+     * The size of the table.
      *
-     * Used to set the value of
-     * [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
+     * @default medium
+     */
+    size?: TableSize;
+    /**
+     * The number of rows per page.
      *
-     * @default 1fr
-     * @type string
+     * If the number of rows exceeds the page size, pagination controls will be displayed.
+     *
+     * @default 10
      */
-    width?: string;
-};
-export type TableProps<R extends TableRow> = {
-    /** The data of the table. */
-    rows: R[];
-    /** The columns of the table. */
-    columns: TableColumn<R>[];
+    pageSize?: number;
 };
 /**
- * Component description coming soon.
+ * A container for displaying tabular data.
+ *
+ * The table supports sorting and custom column definitions.
+ *
+ * @example
+ *     import { Table } from '@bspk/ui/Table';
+ *
+ *     function Example() {
+ *         return (
+ *             <Table
+ *                 columns={[
+ *                     { key: 'state', label: 'State', width: '100px' },
+ *                     { key: 'capital', label: 'Capital', width: '1fr' },
+ *                 ]}
+ *                 data={[
+ *                     { state: 'New Jersey', capital: 'Trenton' },
+ *                     { state: 'New York', capital: 'Albany' },
+ *                     { state: 'California', capital: 'Sacramento' },
+ *                 ]}
+ *                 title="State Capitals"
+ *             />
+ *         );
+ *     }
  *
  * @name Table
- * @phase Backlog
+ * @phase UXReview
  */
-declare function Table<R extends TableRow>({ rows, columns, ...props }: ElementProps<TableProps<R>, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Table {
-    var bspkName: string;
-}
-export { Table };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+export declare function Table<R extends TableRow>({ data, columns: columnsProp, title, size, pageSize, ...props }: ElementProps<TableProps<R>, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.js

@@ -1,20 +1,81 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './table.css.js';
+import { SvgAZAscend } from '@bspk/icons/AZAscend';
+import { SvgAZDescend } from '@bspk/icons/AZDescend';
+import { useEffect, useState } from 'react';
+import { TableFooter } from './Footer';
+import { formatCell, useTable } from './utils';
+import { useId } from '../../hooks/useId';
+import { cssWithVars } from '../../utils/cwv';
+const SORT_META = {
+    asc: {
+        icon: _jsx(SvgAZAscend, {}),
+        label: 'sorted ascending',
+        aria: 'ascending',
+    },
+    desc: {
+        icon: _jsx(SvgAZDescend, {}),
+        label: 'sorted descending',
+        aria: 'descending',
+    },
+    none: {
+        icon: null,
+        label: 'not sorted',
+        aria: 'none',
+    },
+};
 /**
- * Component description coming soon.
+ * A container for displaying tabular data.
+ *
+ * The table supports sorting and custom column definitions.
+ *
+ * @example
+ *     import { Table } from '@bspk/ui/Table';
+ *
+ *     function Example() {
+ *         return (
+ *             <Table
+ *                 columns={[
+ *                     { key: 'state', label: 'State', width: '100px' },
+ *                     { key: 'capital', label: 'Capital', width: '1fr' },
+ *                 ]}
+ *                 data={[
+ *                     { state: 'New Jersey', capital: 'Trenton' },
+ *                     { state: 'New York', capital: 'Albany' },
+ *                     { state: 'California', capital: 'Sacramento' },
+ *                 ]}
+ *                 title="State Capitals"
+ *             />
+ *         );
+ *     }
  *
  * @name Table
- * @phase Backlog
+ * @phase UXReview
  */
-function Table({ rows, columns, ...props }) {
-    return (_jsxs("div", { ...props, "data-bspk": "table", style: {
-            ...props.style,
-            gridTemplateColumns: columns.map((c) => `minmax(0, ${c.width || '1fr'})`).join(' '),
-        }, children: [columns.map((column, index, arr) => (_jsx("div", { "data-head": [index === 0 && 'first', index === arr.length - 1 && 'last'].filter(Boolean).join(' '), children: column.label }, column.key))), rows.map((row, index, arr) => {
-                const lastRow = index === arr.length - 1 || undefined;
-                return columns.map((column) => (_jsx("div", { "data-cell": column.key, "data-row-last": lastRow, children: row[column.key] }, index + column.key)));
-            })] }));
+export function Table({ data = [], columns: columnsProp, title, size = 'medium', pageSize = 10, ...props }) {
+    const tableId = useId();
+    const [pageIndex, setPageIndex] = useState(0);
+    // when the length of data changes we should reset the
+    useEffect(() => setPageIndex(0), [data.length]);
+    const columns = columnsProp.filter((column) => {
+        return typeof column === 'object' && column !== null;
+    });
+    const hasPagination = data?.length > pageSize;
+    const { rows, sorting, toggleSorting, totalColumns, totalPages } = useTable({
+        data,
+        pageIndex,
+        pageSize,
+        columns,
+    });
+    return (_jsx("div", { ...props, "data-bspk": "table", "data-has-pagination": hasPagination || undefined, "data-size": size || 'medium', id: tableId, style: props.style, children: _jsxs("div", { "data-scroll-container": true, children: [_jsxs("table", { ...props, "aria-colcount": totalColumns, "aria-rowcount": data.length, style: cssWithVars({
+                        '--template-columns': columns
+                            // Create a template column for each column definition
+                            ?.map((column) => `minmax(min-content, ${column.width || '1fr'})`)
+                            .join(' '),
+                    }), children: [title && _jsx("caption", { children: title }), _jsx("thead", { children: _jsx("tr", { children: columns?.map((column) => {
+                                    const sortMeta = column.sort &&
+                                        SORT_META[sorting.find((s) => s.key === column.key)?.order || 'none'];
+                                    return (_jsx("th", { "aria-sort": sortMeta?.aria, "data-align": column.align, "data-sortable": !!sortMeta || undefined, scope: "col", children: sortMeta ? (_jsxs("button", { onClick: () => toggleSorting(column.key), type: "button", children: [column.label, sortMeta?.icon && (_jsx("span", { "aria-hidden": true, "data-sort-icon": true, children: sortMeta?.icon })), _jsx("span", { "data-sr-only": true, children: _jsx("span", { "aria-live": "polite", role: "status", children: sortMeta.label }) })] })) : (column.label) }, column.key));
+                                }) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { children: columns?.map((column) => (_jsx("td", { "data-align": column.align || 'left', "data-cell": column.key, "data-valign": column.valign || 'center', children: formatCell(column.formatter?.(row, size) || row[column.key]) }, `${row.id}-${column.key}`))) }, row.id))) })] }), hasPagination && (_jsx(TableFooter, { id: tableId, pageIndex: pageIndex, pageSize: pageSize, setPageIndex: setPageIndex, totalPages: totalPages, totalRows: data.length }))] }) }));
 }
-Table.bspkName = 'Table';
-export { Table };
 //# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAoCtB;;;;;GAKG;AACH,SAAS,KAAK,CAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAsC;IAC9F,OAAO,CACH,kBACQ,KAAK,eACC,OAAO,EACjB,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,mBAAmB,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;SACtF,aAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACjC,2BACe,CAAC,KAAK,KAAK,CAAC,IAAI,OAAO,EAAE,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAGhG,MAAM,CAAC,KAAK,IAFR,MAAM,CAAC,GAAa,CAGvB,CACT,CAAC,EACD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;gBAC1B,MAAM,OAAO,GAAG,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC;gBACtD,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,2BAAgB,MAAM,CAAC,GAAG,mBAAiB,OAAO,YAC7C,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IADqC,KAAK,GAAI,MAAM,CAAC,GAAc,CAEjF,CACT,CAAC,CAAC;YACP,CAAC,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/TableExample.d.ts

@@ -0,0 +1,4 @@
+import { TableProps } from './Table';
+import { TableRow } from './utils';
+import { ComponentExampleFn } from '-/utils/demo';
+export declare const TableExample: ComponentExampleFn<TableProps<TableRow>>;

package/dist/components/Table/TableExample.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from '../Tag';
+import { Truncated } from '../Truncated';
+import { COMPONENT_PHASE_COLORS } from '../../constants/phases';
+const tableSizeToTagSize = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+    'x-large': 'small',
+};
+export const TableExample = ({ componentsMeta, }) => {
+    return {
+        containerStyle: { width: '100%' },
+        defaultState: {
+            data: [
+                {
+                    id: '1',
+                    firstName: 'James',
+                    lastName: 'Kirk',
+                    email: 'james.kirk@starfleet.gov',
+                    serviceYears: 5,
+                },
+                {
+                    id: '2',
+                    firstName: 'Jean-Luc',
+                    lastName: 'Picard',
+                    email: 'jean-luc.picard@starfleet.gov',
+                    serviceYears: 9,
+                },
+                {
+                    id: '3',
+                    firstName: 'Benjamin',
+                    lastName: 'Sisko',
+                    email: 'benjamin.sisko@starfleet.gov',
+                    serviceYears: 6,
+                },
+                {
+                    id: '4',
+                    firstName: 'Kathryn',
+                    lastName: 'Janeway',
+                    email: 'kathryn.janeway@starfleet.gov',
+                    serviceYears: 7,
+                },
+            ],
+            columns: [
+                {
+                    key: 'firstName',
+                    label: 'First Name',
+                    width: '1fr',
+                    sort: 'string',
+                },
+                {
+                    key: 'lastName',
+                    label: 'Last Name',
+                    width: '1fr',
+                    sort: 'string',
+                },
+                {
+                    key: 'email',
+                    label: 'Email',
+                    width: '1fr',
+                },
+                {
+                    key: 'serviceYears',
+                    label: 'Service Years',
+                    align: 'right',
+                    width: '1fr',
+                    sort: 'number',
+                },
+            ],
+        },
+        presets: [
+            {
+                label: 'Large data set',
+                propState: {
+                    title: 'Components',
+                    columns: [
+                        {
+                            key: 'name',
+                            label: 'Name',
+                            width: '1fr',
+                            sort: 'string',
+                        },
+                        {
+                            key: 'phase',
+                            label: 'Phase',
+                            width: '1fr',
+                            align: 'center',
+                            sort: 'string',
+                            formatter: ({ phase }, size) => (_jsx(Tag, { color: COMPONENT_PHASE_COLORS[phase], label: phase, size: tableSizeToTagSize[size] })),
+                        },
+                        {
+                            key: 'cssLines',
+                            label: 'CSS Lines',
+                            width: '1fr',
+                            sort: 'number',
+                            align: 'right',
+                        },
+                        {
+                            key: 'dependencies',
+                            label: 'Dependencies',
+                            width: '1fr',
+                        },
+                        {
+                            key: 'description',
+                            label: 'Description',
+                            width: 'auto',
+                            formatter: (row) => _jsx(Truncated, { style: { maxWidth: '200px' }, children: row.description }),
+                        },
+                    ],
+                    data: componentsMeta
+                        .filter((c) => c.phase !== 'Utility')
+                        .map((c) => ({
+                        id: c.slug,
+                        name: c.name,
+                        phase: c.phase,
+                        dependencies: c.dependencies,
+                        description: c.description || '',
+                        cssLines: c.css.split('\n').length - 1,
+                    })),
+                },
+            },
+        ],
+    };
+};
+//# sourceMappingURL=TableExample.js.map

package/dist/components/Table/TableExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExample.js","sourceRoot":"","sources":["../../../src/components/Table/TableExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/table.css

@@ -1,43 +1,190 @@
 [data-bspk=table] {
-  width: 100%;
+  /*! --template-columns: is set via inline style */
+  --white-background: var(--surface-neutral-t1-base);
+  --grey-background: var(--surface-neutral-t2-lowest);
+  --icon-size: var(--spacing-sizing-05);
+  min-width: 100%;
+  overflow: auto hidden;
   border-collapse: separate;
   text-align: left;
   border-spacing: 2rem 0.125rem;
-  display: grid;
   color: var(--foreground-neutral-on-surface);
   font: var(--labels-base);
   border-radius: var(--radius-md);
   border: 1px solid var(--stroke-neutral-low);
+  background: var(--white-background);
+  /* [data-size='medium'] */
+  --min-height: var(--spacing-sizing-10);
+  --padding-y: var(--spacing-sizing-02);
+}
+[data-bspk=table][data-size=x-large] {
+  --min-height: var(--spacing-sizing-14);
+  --padding-y: var(--spacing-sizing-04);
+}
+[data-bspk=table][data-size=large] {
+  --min-height: var(--spacing-sizing-12);
+  --padding-y: var(--spacing-sizing-03);
+}
+[data-bspk=table][data-size=small] {
+  --min-height: var(--spacing-sizing-08);
+  --padding-y: var(--spacing-sizing-01);
+}
+[data-bspk=table] [data-scroll-container] {
+  width: fit-content;
+  min-width: 100%;
+  border-radius: var(--radius-md);
+}
+[data-bspk=table] table {
+  display: grid;
+  grid-template-columns: var(--template-columns);
+  border-collapse: collapse;
+  min-width: 100%;
+  user-select: none;
+}
+[data-bspk=table] table tr,
+[data-bspk=table] table tbody,
+[data-bspk=table] table thead {
+  display: contents;
 }
-[data-bspk=table] [data-cell] {
+[data-bspk=table] table caption {
+  grid-column: 1/-1;
+  background: var(--grey-background);
+  border-bottom: 1px solid var(--stroke-neutral-low);
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sizing-02);
-  padding: var(--spacing-sizing-04);
-  background-color: var(--surface-neutral-t1-base);
-  border-bottom: var(--stroke-neutral-low) solid 1px;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
   font: var(--labels-small);
+  min-height: var(--min-height);
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  overflow: hidden;
 }
-[data-bspk=table] [data-cell] p {
+[data-bspk=table] table th {
+  display: flex;
+  min-height: var(--min-height);
+  overflow: hidden;
+  flex-direction: row;
+  background: var(--grey-background);
+  font: var(--labels-small);
+  border-bottom: 1px solid var(--stroke-neutral-base);
+  white-space: nowrap;
+  z-index: 1;
+  position: relative;
+}
+[data-bspk=table] table th:not([data-sortable]) {
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  pointer-events: none;
+}
+[data-bspk=table] table th[data-sortable] button {
+  display: flex;
+  min-height: var(--min-height);
+  border: none;
+  overflow: hidden;
+  flex-direction: row;
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  background: var(--grey-background);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sizing-02);
+  width: 100%;
+  cursor: pointer;
+  font: inherit;
+  outline: none;
+  position: relative;
+}
+[data-bspk=table] table th[data-sortable] button:hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--grey-background), var(--grey-background));
+}
+[data-bspk=table] table th[data-sortable] button:active {
+  background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--grey-background), var(--grey-background));
+}
+[data-bspk=table] table th[data-sortable] button [data-sort-icon] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+[data-bspk=table] table th[data-sortable] button [data-sort-icon] svg {
+  width: var(--icon-size);
+}
+[data-bspk=table] table th[data-sortable] button:focus-visible {
+  position: absolute;
+  z-index: var(--z-index-focus);
+  inset: 0;
+  outline: solid 2px var(--stroke-neutral-focus);
+  outline-offset: -2px;
+}
+[data-bspk=table] table th[data-align=right] {
+  align-items: flex-end;
+}
+[data-bspk=table] table th[data-align=right] button {
+  justify-content: flex-end;
+}
+[data-bspk=table] table th[data-align=center] {
+  align-items: center;
+}
+[data-bspk=table] table th[data-align=center] button {
+  justify-content: center;
+}
+[data-bspk=table] table th[data-align=left] {
+  align-items: flex-start;
+}
+[data-bspk=table] table th[data-align=left] button {
+  justify-content: space-between;
+}
+[data-bspk=table] table td {
+  display: flex;
+  min-height: var(--min-height);
+  overflow: hidden;
+  padding: calc(var(--padding-y) + 2px) var(--spacing-sizing-04);
+  flex-direction: column;
+  font: var(--body-small);
+}
+[data-bspk=table] table td[data-align=right] {
+  align-items: flex-end;
+}
+[data-bspk=table] table td[data-align=center] {
+  align-items: center;
+}
+[data-bspk=table] table td[data-align=left] {
+  align-items: flex-start;
+}
+[data-bspk=table] table td[data-valign=top] {
+  justify-content: flex-start;
+}
+[data-bspk=table] table td[data-valign=bottom] {
+  justify-content: flex-end;
+}
+[data-bspk=table] table td[data-valign=center] {
+  justify-content: center;
+}
+[data-bspk=table] table td p {
   margin: 0;
   padding: 0;
   font: var(--body-small);
 }
-[data-bspk=table] [data-head] {
+[data-bspk=table] table td[data-action]:hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--white-background), var(--white-background));
+}
+[data-bspk=table] table tr:nth-child(even) td {
+  background: var(--grey-background);
+}
+[data-bspk=table] table tr:nth-child(even) td[data-action]:hover {
+  background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--grey-background), var(--grey-background));
+}
+[data-bspk=table] [data-pagination] {
   display: flex;
-  align-items: center;
   flex-direction: row;
-  border-bottom: 1px solid var(--stroke-neutral-base);
-  background: var(--surface-neutral-t2-lowest);
-  height: var(--spacing-sizing-10);
-  padding: 0 var(--spacing-sizing-03);
-  font: var(--labels-base);
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
+  width: 100%;
 }
-[data-bspk=table] [data-head][data-head=first] {
-  border-top-left-radius: var(--radius-md);
+[data-bspk=table] [data-pagination] [data-pagination-label] {
+  font: var(--body-small);
+  min-width: fit-content;
 }
-[data-bspk=table] [data-head][data-head=last] {
-  border-top-right-radius: var(--radius-md);
+[data-bspk=table] [data-pagination] [data-bspk=pagination] {
+  flex-grow: 0;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */