@tcn/ui-table 2.3.15 → 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/components/table_filter_panel/table_filter_panel.d.ts

@@ -7,7 +7,8 @@ export interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {
     children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
     dataSource: DataSource<any>;
     onClose?: () => void;
+    title?: string;
 }
-export declare function TableFilterPanel({ children, dataSource, className, onClose, ...props }: TableFilterPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableFilterPanel({ children, dataSource, className, onClose, title, ...props }: TableFilterPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare const TableFilterPanelContext: import('react').Context<TableFilterPanelPresenter<unknown> | null>;
 //# sourceMappingURL=table_filter_panel.d.ts.map

package/dist/components/table_filter_panel/table_filter_panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_filter_panel.d.ts","sourceRoot":"","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO1D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAgCvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}
+{"version":3,"file":"table_filter_panel.d.ts","sourceRoot":"","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAQ1D,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,EACP,KAAuB,EACvB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA+BvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}

package/dist/components/table_filter_panel/table_filter_panel.js

@@ -1,53 +1,48 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { createContext as s, useState as b } from "react";
-import { TableFilterPanelPresenter as p } from "./table_filter_panel_presenter.js";
-import { Panel as f } from "@tcn/ui/surfaces";
-import { Header as m, VBody as d, Section as y } from "@tcn/ui/layouts";
-import { Spacer as u } from "@tcn/ui/stacks";
-import { Button as P } from "@tcn/ui/actions";
-import { CrossIcon as h } from "@tcn/icons/cross_icon.js";
-import '../../table_filter_panel.css';const F = "_table-filter-panel_124e30e", _ = "_table-filter-panel-body_c016eb0", x = "_table-filter-panel-section_cfd2eb9", t = { "table-filter-panel": F, "table-filter-panel-body": _, "table-filter-panel-section": x };
-function w({
-  children: a,
-  dataSource: n,
-  className: i,
-  onClose: l,
-  ...o
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { createContext as f, useState as b } from "react";
+import { TableFilterPanelPresenter as m } from "./table_filter_panel_presenter.js";
+import { Aside as p } from "@tcn/ui/surfaces";
+import { Header as d, Body as y, Scaffold as h, Section as u } from "@tcn/ui/layouts";
+import { Spacer as P } from "@tcn/ui/stacks";
+import { Button as F } from "@tcn/ui/actions";
+import { CrossIcon as x } from "@tcn/icons/cross_icon.js";
+import { Title as S } from "@tcn/ui/typography";
+import '../../table_filter_panel.css';const T = "_table-filter-panel-body_c016eb0", _ = "_table-filter-panel-section_cfd2eb9", r = { "table-filter-panel-body": T, "table-filter-panel-section": _ };
+function I({
+  children: n,
+  dataSource: i,
+  className: a,
+  onClose: t,
+  title: o = "Table Filters",
+  ...c
 }) {
-  const [c] = b(() => new p(n));
-  return /* @__PURE__ */ e(S.Provider, { value: c, children: /* @__PURE__ */ r(
-    f,
-    {
-      className: `${t["table-filter-panel"]} tcn-table-filter-panel ${i}`,
-      ...o,
-      children: [
-        /* @__PURE__ */ r(m, { children: [
-          "Table Filters",
-          /* @__PURE__ */ e(u, {}),
-          l && /* @__PURE__ */ e(P, { utility: !0, hierarchy: "tertiary", onClick: l, children: /* @__PURE__ */ e(h, {}) })
-        ] }),
-        /* @__PURE__ */ e(
-          d,
+  const [s] = b(() => new m(i));
+  return /* @__PURE__ */ e(B.Provider, { value: s, children: /* @__PURE__ */ l(p, { className: `tcn-table-filter-panel ${a}`, ...c, children: [
+    /* @__PURE__ */ l(d, { children: [
+      /* @__PURE__ */ e(S, { children: o }),
+      /* @__PURE__ */ e(P, {}),
+      t && /* @__PURE__ */ e(F, { utility: !0, hierarchy: "tertiary", onClick: t, children: /* @__PURE__ */ e(x, {}) })
+    ] }),
+    /* @__PURE__ */ e(
+      y,
+      {
+        className: `${r["table-filter-panel-body"]} tcn-table-filter-panel-body`,
+        children: /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
+          u,
           {
-            className: `${t["table-filter-panel-body"]} tcn-table-filter-panel-body`,
-            children: /* @__PURE__ */ e(
-              y,
-              {
-                className: `${t["table-filter-panel-section"]} tcn-table-filter-panel-section`,
-                children: a
-              }
-            )
+            className: `${r["table-filter-panel-section"]} tcn-table-filter-panel-section`,
+            children: n
           }
-        )
-      ]
-    }
-  ) });
+        ) })
+      }
+    )
+  ] }) });
 }
-const S = s(
+const B = f(
   null
 );
 export {
-  w as TableFilterPanel,
-  S as TableFilterPanelContext
+  I as TableFilterPanel,
+  B as TableFilterPanelContext
 };
 //# sourceMappingURL=table_filter_panel.js.map

package/dist/components/table_filter_panel/table_filter_panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_filter_panel.js","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"sourcesContent":["import { DataSource } from '@tcn/resource-store';\nimport { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\nimport { Panel, type PanelProps } from '@tcn/ui/surfaces';\nimport { Header, Section, VBody } from '@tcn/ui/layouts';\nimport styles from './table_filter_panel.module.css';\nimport { Spacer } from '@tcn/ui/stacks';\nimport { Button } from '@tcn/ui/actions';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\n\nexport interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n}\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  className,\n  onClose,\n  ...props\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Panel\n        className={`${styles['table-filter-panel']} tcn-table-filter-panel ${className}`}\n        {...props}\n      >\n        <Header>\n          Table Filters\n          <Spacer />\n          {onClose && (\n            <Button utility hierarchy=\"tertiary\" onClick={onClose}>\n              <CrossIcon />\n            </Button>\n          )}\n        </Header>\n        <VBody\n          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}\n        >\n          <Section\n            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}\n          >\n            {children}\n          </Section>\n        </VBody>\n      </Panel>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","className","onClose","props","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Panel","styles","Header","Spacer","Button","CrossIcon","VBody","Section","createContext"],"mappings":";;;;;;;;;AAiBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BN,CAAU,CAChD;AAED,SACE,gBAAAO,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAW,GAAGC,EAAO,oBAAoB,CAAC,2BAA2BV,CAAS;AAAA,MAC7E,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAACG,GAAA,EAAO,UAAA;AAAA,UAAA;AAAA,4BAELC,GAAA,EAAO;AAAA,UACPX,KACC,gBAAAK,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASZ,GAC5C,UAAA,gBAAAK,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAR;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,WAAW,GAAGL,EAAO,yBAAyB,CAAC;AAAA,YAE/C,UAAA,gBAAAJ;AAAA,cAACU;AAAA,cAAA;AAAA,gBACC,WAAW,GAAGN,EAAO,4BAA4B,CAAC;AAAA,gBAEjD,UAAAZ;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAEO,MAAMS,IAA0BU;AAAA,EACrC;AACF;"}
+{"version":3,"file":"table_filter_panel.js","sources":["../../../src/components/table_filter_panel/table_filter_panel.tsx"],"sourcesContent":["import { DataSource } from '@tcn/resource-store';\nimport { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\nimport { Aside, type PanelProps } from '@tcn/ui/surfaces';\nimport { Body, Header, Scaffold, Section } from '@tcn/ui/layouts';\nimport styles from './table_filter_panel.module.css';\nimport { Spacer } from '@tcn/ui/stacks';\nimport { Button } from '@tcn/ui/actions';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { Title } from '@tcn/ui/typography';\n\nexport interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n  title?: string;\n}\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  className,\n  onClose,\n  title = 'Table Filters',\n  ...props\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Aside className={`tcn-table-filter-panel ${className}`} {...props}>\n        <Header>\n          <Title>{title}</Title>\n          <Spacer />\n          {onClose && (\n            <Button utility hierarchy=\"tertiary\" onClick={onClose}>\n              <CrossIcon />\n            </Button>\n          )}\n        </Header>\n        <Body\n          className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}\n        >\n          <Scaffold>\n            <Section\n              className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}\n            >\n              {children}\n            </Section>\n          </Scaffold>\n        </Body>\n      </Aside>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","className","onClose","title","props","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","jsxs","Aside","Header","Title","Spacer","Button","CrossIcon","Body","styles","Scaffold","Section","createContext"],"mappings":";;;;;;;;;;AAmBO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BP,CAAU,CAChD;AAED,SACE,gBAAAQ,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK,EAACC,GAAA,EAAM,WAAW,0BAA0BV,CAAS,IAAK,GAAGG,GAC3D,UAAA;AAAA,IAAA,gBAAAM,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAJ,EAACK,KAAO,UAAAV,EAAA,CAAM;AAAA,wBACbW,GAAA,EAAO;AAAA,MACPZ,KACC,gBAAAM,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASb,GAC5C,UAAA,gBAAAM,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,WAAW,GAAGC,EAAO,yBAAyB,CAAC;AAAA,QAE/C,4BAACC,GAAA,EACC,UAAA,gBAAAX;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,WAAW,GAAGF,EAAO,4BAA4B,CAAC;AAAA,YAEjD,UAAAnB;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAMU,IAA0BY;AAAA,EACrC;AACF;"}

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/dist/table_filter_panel.css

@@ -1 +1 @@
-._table-filter-panel_124e30e{--material: #fafafa;background:var(--material)}._table-filter-panel-body_c016eb0{padding-block:8px}._table-filter-panel-body_c016eb0 ._table-filter-panel-section_cfd2eb9{gap:8px}
+._table-filter-panel-body_c016eb0{padding-block:8px}._table-filter-panel-body_c016eb0 ._table-filter-panel-section_cfd2eb9{gap:8px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.3.15",
+  "version": "2.4.1",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -39,11 +39,11 @@
   ],
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
-    "@tcn/icons": "2.3.0",
     "@tcn/aip-160": "1.2.5",
-    "@tcn/resource-store": "2.5.4",
-    "@tcn/state": "1.3.1",
-    "@tcn/ui": "0.12.6"
+    "@tcn/state": "1.3.2",
+    "@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,14 +3,16 @@ 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 { Footer, Header, HBody, Rail, Side, VBody } from '@tcn/ui/layouts';
+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';
 import { Title } from '@tcn/ui/typography';
@@ -308,7 +310,7 @@ export function WithTableHeaderAndTableFooter() {
           <Spacer />
           <GlobalSearch dataSource={source} />
         </Header>
-        <VBody height="flex">
+        <Body height="flex">
           <Table
             dataSource={source}
             onRowClick={item => {
@@ -323,7 +325,7 @@ export function WithTableHeaderAndTableFooter() {
             <TableColumn heading="Occupation" fieldName="occupation" />
             <TableColumn heading="Active" fieldName="isActive" />
           </Table>
-        </VBody>
+        </Body>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
@@ -411,21 +413,14 @@ export function WithFilterPanel() {
     <StoryWrapper>
       <Panel height="100%">
         <Header>The Table</Header>
-        <VBody>
+        <Body>
           <Rail>
+            {/* TODO: Refactor to remove duplicate column logic (outer Side and inner Aside - in TableFilterPanel ) */}
             <Side padding="0px">
-              <Box
-                minWidth="300px"
-                enableResizeOnEnd
-                overflowY="auto"
-                height="100%"
-                style={{
-                  scrollbarGutter: 'stable', // Not sure if there is a better way to prevent the scrollbar appearing causing a horizontal scroll - to to resizing, we fix the width of the content, so adding a vertical scrollbar causing a horizontal overflow.
-                }}
-              >
+              <Box minWidth="300px" enableResizeOnEnd height="100%" maxHeight="100%">
                 <TableFilterPanel
                   dataSource={source}
-                  onClose={() => window.alert('Closed')}
+                  onClose={() => window.alert('onClose callback called.')}
                 >
                   <StringFieldFilter fieldName="name" label="Name (string)" />
                   <NumberFieldFilter fieldName="age" label="Age (number)" />
@@ -434,8 +429,8 @@ export function WithFilterPanel() {
                 </TableFilterPanel>
               </Box>
             </Side>
-            <HBody>
-              <Table dataSource={source} height="100%" width="flex">
+            <Body>
+              <Table dataSource={source} height="100%">
                 <TableColumn heading="Name" fieldName="name" sticky="start" />
                 <TableColumn heading="Age" fieldName="age" width={150} canSort />
                 <TableColumn heading="Email" fieldName="email" width={300} />
@@ -449,9 +444,9 @@ export function WithFilterPanel() {
                 <TableColumn heading="Occupation" fieldName="occupation" width={200} />
                 <TableColumn heading="Active" fieldName="isActive" />
               </Table>
-            </HBody>
+            </Body>
           </Rail>
-        </VBody>
+        </Body>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
@@ -460,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"],

package/src/components/table_filter_panel/table_filter_panel.module.css

@@ -1,8 +1,3 @@
-.table-filter-panel {
-  --material: #fafafa;
-  background: var(--material);
-}
-
 .table-filter-panel-body {
   padding-block: 8px;
   .table-filter-panel-section {

package/src/components/table_filter_panel/table_filter_panel.stories.tsx

@@ -3,10 +3,11 @@ import {
   StaticNumberField,
   StaticStringField,
 } from '@tcn/resource-store';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { items } from '../../__stories__/sample_data.js';
 import { NumberFieldFilter } from './field_filters/number_field_filter.js';
 import { TableFilterPanel } from './table_filter_panel.js';
+import { VStack } from '@tcn/ui/stacks';
 
 type DataItem = {
   id: string;
@@ -37,10 +38,10 @@ export const Demo = () => {
   });
 
   return (
-    <div style={{ width: '300px' }}>
+    <VStack width="300px" height="100%">
       <TableFilterPanel dataSource={source}>
         <NumberFieldFilter fieldName="age" label="Age" />
       </TableFilterPanel>
-    </div>
+    </VStack>
   );
 };

package/src/components/table_filter_panel/table_filter_panel.tsx

@@ -2,17 +2,19 @@ import { DataSource } from '@tcn/resource-store';
 import { ReactElement, useState, createContext } from 'react';
 import { FieldFilterProps } from './field_filters/field_filter_props.js';
 import { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';
-import { Panel, type PanelProps } from '@tcn/ui/surfaces';
-import { Header, Section, VBody } from '@tcn/ui/layouts';
+import { Aside, type PanelProps } from '@tcn/ui/surfaces';
+import { Body, Header, Scaffold, Section } from '@tcn/ui/layouts';
 import styles from './table_filter_panel.module.css';
 import { Spacer } from '@tcn/ui/stacks';
 import { Button } from '@tcn/ui/actions';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { Title } from '@tcn/ui/typography';
 
 export interface TableFilterPanelProps extends Omit<PanelProps, 'children'> {
   children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
   dataSource: DataSource<any>;
   onClose?: () => void;
+  title?: string;
 }
 
 export function TableFilterPanel({
@@ -20,6 +22,7 @@ export function TableFilterPanel({
   dataSource,
   className,
   onClose,
+  title = 'Table Filters',
   ...props
 }: TableFilterPanelProps) {
   const [presenter] = useState(() => {
@@ -28,12 +31,9 @@ export function TableFilterPanel({
 
   return (
     <TableFilterPanelContext.Provider value={presenter}>
-      <Panel
-        className={`${styles['table-filter-panel']} tcn-table-filter-panel ${className}`}
-        {...props}
-      >
+      <Aside className={`tcn-table-filter-panel ${className}`} {...props}>
         <Header>
-          Table Filters
+          <Title>{title}</Title>
           <Spacer />
           {onClose && (
             <Button utility hierarchy="tertiary" onClick={onClose}>
@@ -41,16 +41,18 @@ export function TableFilterPanel({
             </Button>
           )}
         </Header>
-        <VBody
+        <Body
           className={`${styles['table-filter-panel-body']} tcn-table-filter-panel-body`}
         >
-          <Section
-            className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}
-          >
-            {children}
-          </Section>
-        </VBody>
-      </Panel>
+          <Scaffold>
+            <Section
+              className={`${styles['table-filter-panel-section']} tcn-table-filter-panel-section`}
+            >
+              {children}
+            </Section>
+          </Scaffold>
+        </Body>
+      </Aside>
     </TableFilterPanelContext.Provider>
   );
 }