@tcn/ui-table 2.4.0 → 2.4.1

package/dist/components/cells/header_cell.js

@@ -1,55 +1,55 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useCallback as x } from "react";
-import { Box as r, HStack as h } from "@tcn/ui/stacks";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { useCallback as h } from "react";
+import { Box as i, HStack as x } from "@tcn/ui/stacks";
 import { TH as f } from "@tcn/ui/layouts";
 import { c as u } from "../../cell.module-WpHnQBVu.js";
-import { SortControl as C } from "./sort_control.js";
-function H({
-  heading: n,
+import { SortControl as b } from "./sort_control.js";
+function N({
+  heading: r,
   sticky: l,
-  onResize: i,
+  onResize: n,
   width: o,
   sortMode: a,
   onSortModeChange: s,
-  canSort: d
+  canSort: c
 }) {
-  const m = l != null ? 2 : 1, p = x(
+  const m = l != null ? 2 : 1, d = h(
     ({ width: t }) => {
-      i?.(Math.max(t, 20));
+      n?.(Math.max(t, 20));
     },
-    [i]
+    [n]
   );
   return /* @__PURE__ */ e(
     f,
     {
-      className: u["table-cell"],
+      className: `tcn-header-cell ${u["table-cell"]}`,
       "data-stick-to": l,
       style: { width: `${o}px`, zIndex: m },
       children: /* @__PURE__ */ e(
-        r,
+        i,
         {
-          padding: "0px 8px",
+          className: "tcn-table-cell-content",
           overflow: "hidden",
           minWidth: "24px",
           maxWidth: "unset",
           width: o,
           enableResizeOnEnd: !0,
-          onWidthResize: p,
+          onWidthResize: d,
           onClick: (t) => t.stopPropagation(),
-          children: /* @__PURE__ */ c(h, { children: [
+          children: /* @__PURE__ */ p(x, { children: [
             /* @__PURE__ */ e(
-              r,
+              i,
               {
                 minWidth: "24px",
                 className: "ellipsis",
                 style: { alignItems: "center", display: "flex" },
-                children: n
+                children: r
               }
             ),
             /* @__PURE__ */ e(
-              C,
+              b,
               {
-                canSort: d,
+                canSort: c,
                 onSortModeChange: s,
                 sortMode: a
               }
@@ -61,6 +61,6 @@ function H({
   );
 }
 export {
-  H as HeaderCell
+  N as HeaderCell
 };
 //# sourceMappingURL=header_cell.js.map

package/dist/components/cells/header_cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"header_cell.js","sources":["../../../src/components/cells/header_cell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Box, HStack, type OnWidthResizePayload } from '@tcn/ui/stacks';\n\nimport { TH } from '@tcn/ui/layouts';\nimport cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\n\nexport interface HeaderCellProps extends SortControlProps {\n  heading: React.ReactNode;\n  index: number;\n  sticky?: 'start' | 'end';\n  onResize?: (width: number) => void;\n  width?: number;\n}\n\nexport function HeaderCell({\n  heading,\n  sticky,\n  onResize,\n  width,\n  sortMode,\n  onSortModeChange,\n  canSort,\n}: HeaderCellProps) {\n  const zIndex = sticky != null ? 2 : 1;\n\n  const handleResize = useCallback(\n    ({ width }: OnWidthResizePayload) => {\n      onResize?.(Math.max(width, 20));\n    },\n    [onResize]\n  );\n\n  return (\n    <TH\n      className={cellStyles['table-cell']}\n      data-stick-to={sticky}\n      style={{ width: `${width}px`, zIndex }}\n    >\n      <Box\n        padding=\"0px 8px\" // FIXME: should be on theme ideally.\n        overflow=\"hidden\"\n        minWidth=\"24px\"\n        maxWidth=\"unset\"\n        width={width}\n        enableResizeOnEnd\n        onWidthResize={handleResize}\n        onClick={e => e.stopPropagation()}\n      >\n        <HStack>\n          <Box\n            minWidth=\"24px\"\n            className=\"ellipsis\"\n            style={{ alignItems: 'center', display: 'flex' }}\n          >\n            {heading}\n          </Box>\n\n          <SortControl\n            canSort={canSort}\n            onSortModeChange={onSortModeChange}\n            sortMode={sortMode}\n          />\n        </HStack>\n      </Box>\n    </TH>\n  );\n}\n"],"names":["HeaderCell","heading","sticky","onResize","width","sortMode","onSortModeChange","canSort","zIndex","handleResize","useCallback","jsx","TH","cellStyles","Box","e","HStack","SortControl"],"mappings":";;;;;;AAgBO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAASN,KAAU,OAAO,IAAI,GAE9BO,IAAeC;AAAA,IACnB,CAAC,EAAE,OAAAN,QAAkC;AACnC,MAAAD,IAAW,KAAK,IAAIC,GAAO,EAAE,CAAC;AAAA,IAChC;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,YAAY;AAAA,MAClC,iBAAeX;AAAA,MACf,OAAO,EAAE,OAAO,GAAGE,CAAK,MAAM,QAAAI,EAAA;AAAA,MAE9B,UAAA,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,UAAS;AAAA,UACT,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAAV;AAAA,UACA,mBAAiB;AAAA,UACjB,eAAeK;AAAA,UACf,SAAS,CAAAM,MAAKA,EAAE,gBAAA;AAAA,UAEhB,4BAACC,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,UAAU,SAAS,OAAA;AAAA,gBAEvC,UAAAb;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAU;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,SAAAV;AAAA,gBACA,kBAAAD;AAAA,gBACA,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"header_cell.js","sources":["../../../src/components/cells/header_cell.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { Box, HStack, type OnWidthResizePayload } from '@tcn/ui/stacks';\n\nimport { TH } from '@tcn/ui/layouts';\nimport cellStyles from './cell.module.css';\nimport { SortControl, type SortControlProps } from './sort_control.js';\n\nexport interface HeaderCellProps extends SortControlProps {\n  heading: React.ReactNode;\n  index: number;\n  sticky?: 'start' | 'end';\n  onResize?: (width: number) => void;\n  width?: number;\n}\n\nexport function HeaderCell({\n  heading,\n  sticky,\n  onResize,\n  width,\n  sortMode,\n  onSortModeChange,\n  canSort,\n}: HeaderCellProps) {\n  const zIndex = sticky != null ? 2 : 1;\n\n  const handleResize = useCallback(\n    ({ width }: OnWidthResizePayload) => {\n      onResize?.(Math.max(width, 20));\n    },\n    [onResize]\n  );\n\n  return (\n    <TH\n      className={`tcn-header-cell ${cellStyles['table-cell']}`}\n      data-stick-to={sticky}\n      style={{ width: `${width}px`, zIndex }}\n    >\n      <Box\n        className=\"tcn-table-cell-content\"\n        overflow=\"hidden\"\n        minWidth=\"24px\"\n        maxWidth=\"unset\"\n        width={width}\n        enableResizeOnEnd\n        onWidthResize={handleResize}\n        onClick={e => e.stopPropagation()}\n      >\n        <HStack>\n          <Box\n            minWidth=\"24px\"\n            className=\"ellipsis\"\n            style={{ alignItems: 'center', display: 'flex' }}\n          >\n            {heading}\n          </Box>\n\n          <SortControl\n            canSort={canSort}\n            onSortModeChange={onSortModeChange}\n            sortMode={sortMode}\n          />\n        </HStack>\n      </Box>\n    </TH>\n  );\n}\n"],"names":["HeaderCell","heading","sticky","onResize","width","sortMode","onSortModeChange","canSort","zIndex","handleResize","useCallback","jsx","TH","cellStyles","Box","e","HStack","SortControl"],"mappings":";;;;;;AAgBO,SAASA,EAAW;AAAA,EACzB,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACF,GAAoB;AAClB,QAAMC,IAASN,KAAU,OAAO,IAAI,GAE9BO,IAAeC;AAAA,IACnB,CAAC,EAAE,OAAAN,QAAkC;AACnC,MAAAD,IAAW,KAAK,IAAIC,GAAO,EAAE,CAAC;AAAA,IAChC;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,mBAAmBC,EAAW,YAAY,CAAC;AAAA,MACtD,iBAAeX;AAAA,MACf,OAAO,EAAE,OAAO,GAAGE,CAAK,MAAM,QAAAI,EAAA;AAAA,MAE9B,UAAA,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAS;AAAA,UACT,UAAS;AAAA,UACT,UAAS;AAAA,UACT,OAAAV;AAAA,UACA,mBAAiB;AAAA,UACjB,eAAeK;AAAA,UACf,SAAS,CAAAM,MAAKA,EAAE,gBAAA;AAAA,UAEhB,4BAACC,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAL;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,UAAU,SAAS,OAAA;AAAA,gBAEvC,UAAAb;AAAA,cAAA;AAAA,YAAA;AAAA,YAGH,gBAAAU;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,SAAAV;AAAA,gBACA,kBAAAD;AAAA,gBACA,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACF,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/table.css

@@ -1 +1 @@
-._table-body_b8c928c{border-spacing:0;width:auto;min-width:100%;height:auto;min-height:100%;table-layout:fixed;display:table}._table-body_b8c928c thead th,._table-body_b8c928c thead td{padding:0}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=start],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=start]{border-inline-end:1px solid #ccc}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=end],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=end]{border-inline-start:1px solid #ccc}._table-body_b8c928c tr[data-clickable=true]{cursor:pointer}._table-body_b8c928c thead tr th{position:sticky;top:0;z-index:1;box-sizing:border-box}._table-body_b8c928c thead{position:sticky;top:0;z-index:3}._table-body_b8c928c tbody{position:relative;z-index:1}._table-body_b8c928c tfoot{position:relative;z-index:2}._table-body_b8c928c th>div{display:flex;align-items:center}._table-body_b8c928c td>div{height:100%;display:flex;align-items:center}._table-body_b8c928c tfoot{position:sticky;bottom:0}._table-body_b8c928c td,._table-body_b8c928c th{vertical-align:middle}._table-body_b8c928c[data-is-clickable=true] td{cursor:pointer}
+._table-body_b8c928c{border-spacing:0;width:auto;min-width:100%;height:auto;min-height:100%;table-layout:fixed;display:table}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=start],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=start]{border-inline-end:1px solid #ccc}:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) th[data-stick-to=end],:is(._table-body_b8c928c thead tr,._table-body_b8c928c tbody tr) td[data-stick-to=end]{border-inline-start:1px solid #ccc}._table-body_b8c928c tr[data-clickable=true]{cursor:pointer}._table-body_b8c928c thead tr th{position:sticky;top:0;z-index:1;box-sizing:border-box}._table-body_b8c928c thead{position:sticky;top:0;z-index:3}._table-body_b8c928c tbody{position:relative;z-index:1}._table-body_b8c928c tfoot{position:relative;z-index:2}._table-body_b8c928c th>div{display:flex;align-items:center}._table-body_b8c928c td>div{height:100%;display:flex;align-items:center}._table-body_b8c928c tfoot{position:sticky;bottom:0}._table-body_b8c928c td,._table-body_b8c928c th{vertical-align:middle}._table-body_b8c928c[data-is-clickable=true] td{cursor:pointer}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -40,10 +40,10 @@
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
     "@tcn/aip-160": "1.2.5",
-    "@tcn/icons": "2.3.0",
-    "@tcn/resource-store": "2.5.6",
     "@tcn/state": "1.3.2",
-    "@tcn/ui": "0.13.0"
+    "@tcn/resource-store": "2.5.6",
+    "@tcn/icons": "2.3.0",
+    "@tcn/ui": "0.13.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/__stories__/table.stories.tsx

@@ -3,13 +3,15 @@ import React, { useCallback, useState } from 'react';
 
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import {
+  type DataSource,
   StaticDataSource,
   StaticDateField,
   StaticNumberField,
   StaticStringField,
 } from '@tcn/resource-store';
-import { useSignalValue } from '@tcn/state';
+import { Signal, useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
+import { Checkbox } from '@tcn/ui/inputs';
 import { Footer, Header, Rail, Side, Body } from '@tcn/ui/layouts';
 import { Box, HStack, Spacer, VStack, ZStack } from '@tcn/ui/stacks';
 import { Panel } from '@tcn/ui/surfaces';
@@ -453,4 +455,139 @@ export function WithFilterPanel() {
   );
 }
 
+// Selection Table
+
+type SelectionStatus = 'none' | 'some' | 'all';
+
+class SelectionPresenter<T extends { id: string }> {
+  private _selected = new Signal<Set<string>>(new Set());
+  private _status = new Signal<SelectionStatus>('none');
+  private _dataSource: DataSource<T>;
+
+  constructor(dataSource: DataSource<T>) {
+    this._dataSource = dataSource;
+  }
+
+  get broadcasts() {
+    return {
+      selected: this._selected.broadcast,
+      status: this._status.broadcast,
+    };
+  }
+
+  private getTotalRowCount(): number {
+    return this._dataSource.broadcasts.currentResults.get().length;
+  }
+
+  private getSelectedCount(): number {
+    return this._selected.get().size;
+  }
+
+  private getNextStatus() {
+    const selectedCount = this.getSelectedCount();
+    const totalCount = this.getTotalRowCount();
+    if (selectedCount === totalCount) return 'all';
+    if (selectedCount === 0) return 'none';
+    if (selectedCount < totalCount) return 'some';
+    return 'none';
+  }
+
+  private setStatus() {
+    const status = this.getNextStatus();
+    this._status.set(status);
+  }
+
+  toggleRow(row: T) {
+    this._selected.transform(selected => {
+      if (selected.has(row.id)) selected.delete(row.id);
+      else selected.add(row.id);
+      return selected;
+    });
+    this.setStatus();
+  }
+
+  private getAllIds(): string[] {
+    return this._dataSource.broadcasts.currentResults.get().map((r: T) => r.id);
+  }
+
+  toggleAllRows() {
+    const status = this._status.get();
+    if (status === 'all') {
+      this._selected.set(new Set());
+    } else {
+      this._selected.set(new Set(this.getAllIds()));
+    }
+    this.setStatus();
+  }
+}
+
+const RowCheck = ({
+  item,
+  presenter,
+}: {
+  item: DataItem;
+  presenter: SelectionPresenter<DataItem>;
+}) => {
+  const selected = useSignalValue(presenter.broadcasts.selected);
+  const status = useSignalValue(presenter.broadcasts.status);
+  const isChecked = selected.has(item.id) || status === 'all';
+  return <Checkbox checked={isChecked} onChange={() => presenter.toggleRow(item)} />;
+};
+
+const ColumnCheck = ({ presenter }: { presenter: SelectionPresenter<DataItem> }) => {
+  const status = useSignalValue(presenter.broadcasts.status);
+  const isChecked = status === 'all';
+
+  return (
+    <Checkbox
+      checked={isChecked}
+      data-indeterminate={status === 'some'}
+      onChange={() => presenter.toggleAllRows()}
+      onClick={e => e.stopPropagation()}
+    />
+  );
+};
+
+export function SelectionTable() {
+  const [source] = useState(() => {
+    return new StaticDataSource<DataItem>(items, [
+      new StaticStringField('id', i => i.id),
+      new StaticStringField('name', i => i.name),
+      new StaticNumberField('age', i => i.age),
+      new StaticStringField('email', i => i.email),
+      new StaticStringField('city', i => i.city),
+      new StaticStringField('country', i => i.country),
+      new StaticStringField('occupation', i => i.occupation),
+      new StaticStringField('isActive', i => (i.isActive ? 'Yes' : 'No')),
+    ]);
+  });
+
+  const [presenter] = useState(() => new SelectionPresenter<DataItem>(source));
+
+  return (
+    <StoryWrapper>
+      <Panel>
+        <Header>Selection Table</Header>
+        <Body>
+          <Table dataSource={source}>
+            <TableColumn
+              heading={<ColumnCheck presenter={presenter} />}
+              sticky="start"
+              width={48}
+              render={(item: DataItem) => <RowCheck item={item} presenter={presenter} />}
+            />
+            <TableColumn heading="Name" fieldName="name" />
+            <TableColumn heading="Age" fieldName="age" />
+            <TableColumn heading="Email" fieldName="email" />
+            <TableColumn heading="City" fieldName="city" />
+            <TableColumn heading="Country" fieldName="country" />
+            <TableColumn heading="Occupation" fieldName="occupation" />
+            <TableColumn heading="Active" fieldName="isActive" />
+          </Table>
+        </Body>
+      </Panel>
+    </StoryWrapper>
+  );
+}
+
 export default meta;

package/src/components/cells/header_cell.tsx

@@ -34,12 +34,12 @@ export function HeaderCell({
 
   return (
     <TH
-      className={cellStyles['table-cell']}
+      className={`tcn-header-cell ${cellStyles['table-cell']}`}
       data-stick-to={sticky}
       style={{ width: `${width}px`, zIndex }}
     >
       <Box
-        padding="0px 8px" // FIXME: should be on theme ideally.
+        className="tcn-table-cell-content"
         overflow="hidden"
         minWidth="24px"
         maxWidth="unset"

package/src/components/table/table.module.css

@@ -8,16 +8,6 @@
   display: table;
 }
 
-/* FIXME: These styles should be handled at the theme level
-   but tcn ui does not handle resizing or sticky logic. */
-/* Reset padding for header - due to resize logic  */
-.table-body thead {
-  th,
-  td {
-    padding: 0;
-  }
-}
-
 .table-body thead tr,
 .table-body tbody tr {
   th[data-stick-to="start"],