@tcn/ui-table 2.4.1 → 2.4.2

package/dist/components/cells/header_cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACR,EAAE,eAAe,2CA4CjB"}
+{"version":3,"file":"header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/cells/header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACR,EAAE,eAAe,2CA6CjB"}

package/dist/components/cells/header_cell.js

@@ -1,44 +1,45 @@
-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 { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { useCallback as p } from "react";
+import { Box as o, 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 b } from "./sort_control.js";
 function N({
   heading: r,
-  sticky: l,
-  onResize: n,
-  width: o,
+  sticky: n,
+  onResize: l,
+  width: i,
   sortMode: a,
   onSortModeChange: s,
   canSort: c
 }) {
-  const m = l != null ? 2 : 1, d = h(
+  const m = n != null ? 2 : 1, d = p(
     ({ width: t }) => {
-      n?.(Math.max(t, 20));
+      l?.(Math.max(t, 20));
     },
-    [n]
+    [l]
   );
   return /* @__PURE__ */ e(
     f,
     {
       className: `tcn-header-cell ${u["table-cell"]}`,
-      "data-stick-to": l,
-      style: { width: `${o}px`, zIndex: m },
+      "data-stick-to": n,
+      style: { width: `${i}px`, zIndex: m },
       children: /* @__PURE__ */ e(
-        i,
+        o,
         {
           className: "tcn-table-cell-content",
           overflow: "hidden",
           minWidth: "24px",
           maxWidth: "unset",
-          width: o,
-          enableResizeOnEnd: !0,
+          height: "100%",
+          width: i,
+          enableResizeOnEnd: l != null,
           onWidthResize: d,
           onClick: (t) => t.stopPropagation(),
-          children: /* @__PURE__ */ p(x, { children: [
+          children: /* @__PURE__ */ h(x, { children: [
             /* @__PURE__ */ e(
-              i,
+              o,
               {
                 minWidth: "24px",
                 className: "ellipsis",

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={`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;"}
+{"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        height=\"100%\"\n        width={width}\n        enableResizeOnEnd={onResize != null}\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,QAAO;AAAA,UACP,OAAAV;AAAA,UACA,mBAAmBD,KAAY;AAAA,UAC/B,eAAeM;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/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkB,YAAY,EAAoB,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAWlE,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,QAAQ,GAAG;IACrC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC1B,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC;CACnB,CAAC;AAeF,wBAAgB,KAAK,CAAC,CAAC,EAAE,EACvB,UAAU,EACV,WAAW,EACX,QAAQ,EACR,KAAc,EACd,MAAe,EACf,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,GAAG,KAAK,EACT,EAAE,UAAU,CAAC,CAAC,CAAC,2CA2If"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkB,YAAY,EAAoB,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAO,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAWlE,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,QAAQ,GAAG;IACrC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC1B,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IACzD,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC;CACnB,CAAC;AAeF,wBAAgB,KAAK,CAAC,CAAC,EAAE,EACvB,UAAU,EACV,WAAW,EACX,QAAQ,EACR,KAAc,EACd,MAAe,EACf,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,GAAG,KAAK,EACT,EAAE,UAAU,CAAC,CAAC,CAAC,2CAgJf"}

package/dist/components/table/table.js

@@ -1,19 +1,19 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import G, { useRef as P, isValidElement as W, useState as j } from "react";
-import { useSignalValue as f, useRunnerStatus as A, Status as u } from "@tcn/state";
-import { Box as I } from "@tcn/ui/stacks";
-import { BodyText as V } from "@tcn/ui/typography";
-import { DataCell as v } from "../cells/data_cell.js";
-import { FooterCell as z } from "../cells/footer_cell.js";
+import O, { useRef as G, isValidElement as P, useState as W } from "react";
+import { useSignalValue as f, useRunnerStatus as j, Status as b } from "@tcn/state";
+import { Box as v } from "@tcn/ui/stacks";
+import { BodyText as A } from "@tcn/ui/typography";
+import { DataCell as I } from "../cells/data_cell.js";
+import { FooterCell as V } from "../cells/footer_cell.js";
 import { HeaderCell as L } from "../cells/header_cell.js";
 import { StickyRowDataCell as U } from "../cells/sticky_row_data_cell.js";
 import { StickyRowFillCell as Y } from "../cells/sticky_row_fill_cell.js";
 import { TableColumn as q } from "./table_column.js";
 import { TablePresenter as J } from "./table_presenter.js";
-import { TTable as K, THead as Q, TR as n, TH as X, TBody as Z, TD as N, TFoot as x } from "@tcn/ui/layouts";
-import '../../table.css';const tt = "_table-body_b8c928c", w = { "table-body": tt }, C = 32, R = 24;
+import { TTable as K, THead as Q, TR as n, TH as X, TBody as Z, TD as S, TFoot as x } from "@tcn/ui/layouts";
+import '../../table.css';const tt = "_table-body_b8c928c", N = { "table-body": tt }, w = 32, C = 24;
 function T(s) {
-  return typeof s == "string" ? /* @__PURE__ */ r(V, { children: s }) : s;
+  return typeof s == "string" ? /* @__PURE__ */ r(A, { children: s }) : s;
 }
 function yt({
   dataSource: s,
@@ -22,13 +22,13 @@ function yt({
   width: E = "100%",
   height: H = "100%",
   zIndex: D,
-  isRowHighlighted: b,
-  onRowClick: k,
+  isRowHighlighted: u,
+  onRowClick: R,
   ..._
 }) {
-  const B = f(s.broadcasts.currentResults), p = f(s.broadcasts.currentPageIndex), S = P(null), F = G.Children.toArray($).filter(
-    (t) => W(t) && t.type === q
-  ), [c] = j(
+  const B = f(s.broadcasts.currentResults), p = f(s.broadcasts.currentPageIndex), k = G(null), F = O.Children.toArray($).filter(
+    (t) => P(t) && t.type === q
+  ), [c] = W(
     () => new J({
       dataSource: s,
       columns: F.map((t) => ({
@@ -36,27 +36,28 @@ function yt({
         width: t.props.width ?? 100,
         sortMode: "none",
         canSort: t.props.canSort ?? !1,
+        canResize: t.props.canResize ?? !0,
         heading: t.props.heading,
         footer: t.props.footer,
         sticky: t.props.sticky,
         render: t.props.render
       })),
-      scrollerRef: S
+      scrollerRef: k
     })
-  ), d = f(c.broadcasts.columnInfo), m = A(s.broadcasts.currentResults), M = f(c.broadcasts.showFooter), O = typeof k == "function";
+  ), d = f(c.broadcasts.columnInfo), m = j(s.broadcasts.currentResults), M = f(c.broadcasts.showFooter), z = typeof R == "function";
   return /* @__PURE__ */ r(
-    I,
+    v,
     {
-      ref: S,
+      ref: k,
       zIndex: D,
-      className: w["table-body-wrapper"],
+      className: N["table-body-wrapper"],
       style: { overflow: "auto" },
       ..._,
       children: /* @__PURE__ */ a(
         K,
         {
-          className: w["table-body"],
-          "data-is-clickable": O,
+          className: N["table-body"],
+          "data-is-clickable": z,
           style: { width: E, height: H },
           children: [
             /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ a(n, { children: [
@@ -66,7 +67,7 @@ function yt({
                   index: e,
                   heading: T(t.heading),
                   sticky: t.sticky,
-                  onResize: (o) => c.setColumnWidth(e, o),
+                  onResize: t.canResize !== !1 ? (o) => c.setColumnWidth(e, o) : void 0,
                   width: t.width,
                   sortMode: t.sortMode,
                   onSortModeChange: () => c.setNextColumnSortMode(e),
@@ -86,24 +87,24 @@ function yt({
                       content: h,
                       sticky: o.sticky,
                       width: o.width,
-                      top: C + R * e
+                      top: w + C * e
                     },
                     `${p}-${e}-${y}`
                   );
                 }),
-                /* @__PURE__ */ r(Y, { top: C + R * e })
+                /* @__PURE__ */ r(Y, { top: w + C * e })
               ] }, `sticky-${e}`)),
-              m === u.SUCCESS && B.map((t, e) => /* @__PURE__ */ a(
+              m === b.SUCCESS && B.map((t, e) => /* @__PURE__ */ a(
                 n,
                 {
-                  "data-selected": b?.(t, e),
-                  isSelected: b?.(t, e),
-                  onClick: () => k?.(t, e),
+                  "data-selected": u?.(t, e),
+                  isSelected: u?.(t, e),
+                  onClick: () => R?.(t, e),
                   children: [
                     d.map((o, y) => {
                       const i = o.fieldName, l = o.render, h = l ? l(t) : i ? String(t[i] ?? "") : "";
                       return /* @__PURE__ */ r(
-                        v,
+                        I,
                         {
                           content: h,
                           sticky: o.sticky,
@@ -112,18 +113,18 @@ function yt({
                         `${p}-${e}-${y}`
                       );
                     }),
-                    /* @__PURE__ */ r(N, { fill: !0, className: "fill" }, "fill")
+                    /* @__PURE__ */ r(S, { fill: !0, className: "fill" }, "fill")
                   ]
                 },
                 `${p}-${e}`
               )),
-              m === u.PENDING && "Loading...",
-              m === u.ERROR && "Error loading data",
+              m === b.PENDING && "Loading...",
+              m === b.ERROR && "Error loading data",
               /* @__PURE__ */ r(n, { className: "fill" }, "fill")
             ] }),
             M && /* @__PURE__ */ r(x, { children: /* @__PURE__ */ a(n, { children: [
               d.map((t, e) => /* @__PURE__ */ r(
-                z,
+                V,
                 {
                   content: T(t.footer),
                   sticky: t.sticky,
@@ -131,7 +132,7 @@ function yt({
                 },
                 `footer-${e}`
               )),
-              /* @__PURE__ */ r(N, { fill: !0, className: "fill" }, "footer-fill")
+              /* @__PURE__ */ r(S, { fill: !0, className: "fill" }, "footer-fill")
             ] }) })
           ]
         }

package/dist/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import React, { isValidElement, ReactElement, useState, useRef } from 'react';\n\nimport { DataSource } from '@tcn/resource-store';\nimport { Status, useRunnerStatus, useSignalValue } from '@tcn/state';\nimport { Box, BoxProps } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { DataCell } from '../cells/data_cell.js';\nimport { FooterCell } from '../cells/footer_cell.js';\nimport { HeaderCell } from '../cells/header_cell.js';\nimport { StickyRowDataCell } from '../cells/sticky_row_data_cell.js';\nimport { StickyRowFillCell } from '../cells/sticky_row_fill_cell.js';\nimport styles from './table.module.css';\nimport { TableColumn, TableColumnProps } from './table_column.js';\nimport { TablePresenter } from './table_presenter.js';\nimport {\n  TTable as PrimitiveTable,\n  TBody,\n  TD,\n  TFoot,\n  TH,\n  THead,\n  TR,\n} from '@tcn/ui/layouts';\nexport type TableProps<T> = BoxProps & {\n  dataSource: DataSource<T>;\n  children: ReactElement<TableColumnProps<T>>[];\n  onRowClick?: (row: T, rowIndex: number) => void;\n  isRowHighlighted?: (row: T, rowIndex: number) => boolean;\n  stickyItems?: T[];\n};\n\n// FIXME: Ideally should be on theme - even if its a required theme variable.\nconst HEADER_ROW_HEIGHT = 32;\nconst BODY_ROW_HEIGHT = 24;\n\n// @TODO: Props for loading and error states\n\nfunction wrapContent(content: React.ReactNode): React.ReactNode {\n  if (typeof content === 'string') {\n    return <BodyText>{content}</BodyText>;\n  }\n  return content;\n}\n\nexport function Table<T>({\n  dataSource,\n  stickyItems,\n  children,\n  width = '100%',\n  height = '100%',\n  zIndex,\n  isRowHighlighted,\n  onRowClick,\n  ...props\n}: TableProps<T>) {\n  const rows = useSignalValue(dataSource.broadcasts.currentResults);\n  const page = useSignalValue(dataSource.broadcasts.currentPageIndex);\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const columns = React.Children.toArray(children).filter(\n    (child): child is ReactElement<TableColumnProps<T>> =>\n      isValidElement(child) && child.type === TableColumn\n  );\n\n  const [presenter] = useState(\n    () =>\n      new TablePresenter({\n        dataSource,\n        columns: columns.map(column => ({\n          fieldName: column.props.fieldName,\n          width: column.props.width ?? 100,\n          sortMode: 'none',\n          canSort: column.props.canSort ?? false,\n          heading: column.props.heading,\n          footer: column.props.footer,\n          sticky: column.props.sticky,\n          render: column.props.render,\n        })),\n        scrollerRef,\n      })\n  );\n\n  const columnInfo = useSignalValue(presenter.broadcasts.columnInfo);\n  const itemsStatus = useRunnerStatus(dataSource.broadcasts.currentResults);\n  const showFooter = useSignalValue(presenter.broadcasts.showFooter);\n\n  const isClickable = typeof onRowClick === 'function';\n  return (\n    <Box\n      ref={scrollerRef}\n      zIndex={zIndex}\n      className={styles['table-body-wrapper']}\n      style={{ overflow: 'auto' }}\n      {...props}\n    >\n      <PrimitiveTable\n        className={styles['table-body']}\n        data-is-clickable={isClickable}\n        style={{ width, height }}\n      >\n        <THead>\n          <TR>\n            {columnInfo.map((column, index) => (\n              <HeaderCell\n                key={`h-${index}`}\n                index={index}\n                heading={wrapContent(column.heading)}\n                sticky={column.sticky}\n                onResize={newSize => presenter.setColumnWidth(index, newSize)}\n                width={column.width}\n                sortMode={column.sortMode}\n                onSortModeChange={() => presenter.setNextColumnSortMode(index)}\n                canSort={column.canSort}\n              />\n            ))}\n            <TH key=\"fill\" fill className=\"fill\"></TH>\n          </TR>\n        </THead>\n        <TBody>\n          {stickyItems?.map((item, index) => (\n            <TR key={`sticky-${index}`} data-sticky-row>\n              {columnInfo.map((col, colIndex) => {\n                const fieldName = col.fieldName;\n                const render = col.render;\n                const content = render\n                  ? render(item)\n                  : fieldName\n                    ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                    : '';\n                return (\n                  <StickyRowDataCell\n                    key={`${page}-${index}-${colIndex}`}\n                    content={content}\n                    sticky={col.sticky}\n                    width={col.width}\n                    top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index}\n                  />\n                );\n              })}\n              <StickyRowFillCell top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index} />\n            </TR>\n          ))}\n          {itemsStatus === Status.SUCCESS &&\n            rows.map((item, rowIndex) => (\n              <TR\n                key={`${page}-${rowIndex}`}\n                data-selected={isRowHighlighted?.(item, rowIndex)}\n                isSelected={isRowHighlighted?.(item, rowIndex)}\n                onClick={() => onRowClick?.(item, rowIndex)}\n              >\n                {columnInfo.map((col, colIndex) => {\n                  const fieldName = col.fieldName;\n                  const render = col.render;\n                  const content = render\n                    ? render(item)\n                    : fieldName\n                      ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                      : '';\n                  return (\n                    <DataCell\n                      key={`${page}-${rowIndex}-${colIndex}`}\n                      content={content}\n                      sticky={col.sticky}\n                      width={col.width}\n                    />\n                  );\n                })}\n                <TD key=\"fill\" fill className=\"fill\"></TD>\n              </TR>\n            ))}\n          {itemsStatus === Status.PENDING && 'Loading...'}\n          {itemsStatus === Status.ERROR && 'Error loading data'}\n          <TR key=\"fill\" className=\"fill\"></TR>\n        </TBody>\n        {showFooter && (\n          <TFoot>\n            <TR>\n              {columnInfo.map((col, colIndex) => (\n                <FooterCell\n                  key={`footer-${colIndex}`}\n                  content={wrapContent(col.footer)}\n                  sticky={col.sticky}\n                  width={col.width}\n                />\n              ))}\n              <TD key=\"footer-fill\" fill className=\"fill\"></TD>\n            </TR>\n          </TFoot>\n        )}\n      </PrimitiveTable>\n    </Box>\n  );\n}\n"],"names":["HEADER_ROW_HEIGHT","BODY_ROW_HEIGHT","wrapContent","content","jsx","BodyText","Table","dataSource","stickyItems","children","width","height","zIndex","isRowHighlighted","onRowClick","props","rows","useSignalValue","page","scrollerRef","useRef","columns","React","child","isValidElement","TableColumn","presenter","useState","TablePresenter","column","columnInfo","itemsStatus","useRunnerStatus","showFooter","isClickable","Box","styles","jsxs","PrimitiveTable","THead","TR","index","HeaderCell","newSize","TH","TBody","item","col","colIndex","fieldName","render","StickyRowDataCell","StickyRowFillCell","Status","rowIndex","DataCell","TD","TFoot","FooterCell"],"mappings":"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"}
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.tsx"],"sourcesContent":["import React, { isValidElement, ReactElement, useState, useRef } from 'react';\n\nimport { DataSource } from '@tcn/resource-store';\nimport { Status, useRunnerStatus, useSignalValue } from '@tcn/state';\nimport { Box, BoxProps } from '@tcn/ui/stacks';\nimport { BodyText } from '@tcn/ui/typography';\nimport { DataCell } from '../cells/data_cell.js';\nimport { FooterCell } from '../cells/footer_cell.js';\nimport { HeaderCell } from '../cells/header_cell.js';\nimport { StickyRowDataCell } from '../cells/sticky_row_data_cell.js';\nimport { StickyRowFillCell } from '../cells/sticky_row_fill_cell.js';\nimport styles from './table.module.css';\nimport { TableColumn, TableColumnProps } from './table_column.js';\nimport { TablePresenter } from './table_presenter.js';\nimport {\n  TTable as PrimitiveTable,\n  TBody,\n  TD,\n  TFoot,\n  TH,\n  THead,\n  TR,\n} from '@tcn/ui/layouts';\nexport type TableProps<T> = BoxProps & {\n  dataSource: DataSource<T>;\n  children: ReactElement<TableColumnProps<T>>[];\n  onRowClick?: (row: T, rowIndex: number) => void;\n  isRowHighlighted?: (row: T, rowIndex: number) => boolean;\n  stickyItems?: T[];\n};\n\n// FIXME: Ideally should be on theme - even if its a required theme variable.\nconst HEADER_ROW_HEIGHT = 32;\nconst BODY_ROW_HEIGHT = 24;\n\n// @TODO: Props for loading and error states\n\nfunction wrapContent(content: React.ReactNode): React.ReactNode {\n  if (typeof content === 'string') {\n    return <BodyText>{content}</BodyText>;\n  }\n  return content;\n}\n\nexport function Table<T>({\n  dataSource,\n  stickyItems,\n  children,\n  width = '100%',\n  height = '100%',\n  zIndex,\n  isRowHighlighted,\n  onRowClick,\n  ...props\n}: TableProps<T>) {\n  const rows = useSignalValue(dataSource.broadcasts.currentResults);\n  const page = useSignalValue(dataSource.broadcasts.currentPageIndex);\n\n  const scrollerRef = useRef<HTMLDivElement>(null);\n\n  const columns = React.Children.toArray(children).filter(\n    (child): child is ReactElement<TableColumnProps<T>> =>\n      isValidElement(child) && child.type === TableColumn\n  );\n\n  const [presenter] = useState(\n    () =>\n      new TablePresenter({\n        dataSource,\n        columns: columns.map(column => ({\n          fieldName: column.props.fieldName,\n          width: column.props.width ?? 100,\n          sortMode: 'none',\n          canSort: column.props.canSort ?? false,\n          canResize: column.props.canResize ?? true,\n          heading: column.props.heading,\n          footer: column.props.footer,\n          sticky: column.props.sticky,\n          render: column.props.render,\n        })),\n        scrollerRef,\n      })\n  );\n\n  const columnInfo = useSignalValue(presenter.broadcasts.columnInfo);\n  const itemsStatus = useRunnerStatus(dataSource.broadcasts.currentResults);\n  const showFooter = useSignalValue(presenter.broadcasts.showFooter);\n\n  const isClickable = typeof onRowClick === 'function';\n  return (\n    <Box\n      ref={scrollerRef}\n      zIndex={zIndex}\n      className={styles['table-body-wrapper']}\n      style={{ overflow: 'auto' }}\n      {...props}\n    >\n      <PrimitiveTable\n        className={styles['table-body']}\n        data-is-clickable={isClickable}\n        style={{ width, height }}\n      >\n        <THead>\n          <TR>\n            {columnInfo.map((column, index) => (\n              <HeaderCell\n                key={`h-${index}`}\n                index={index}\n                heading={wrapContent(column.heading)}\n                sticky={column.sticky}\n                onResize={\n                  column.canResize !== false\n                    ? newSize => presenter.setColumnWidth(index, newSize)\n                    : undefined\n                }\n                width={column.width}\n                sortMode={column.sortMode}\n                onSortModeChange={() => presenter.setNextColumnSortMode(index)}\n                canSort={column.canSort}\n              />\n            ))}\n            <TH key=\"fill\" fill className=\"fill\"></TH>\n          </TR>\n        </THead>\n        <TBody>\n          {stickyItems?.map((item, index) => (\n            <TR key={`sticky-${index}`} data-sticky-row>\n              {columnInfo.map((col, colIndex) => {\n                const fieldName = col.fieldName;\n                const render = col.render;\n                const content = render\n                  ? render(item)\n                  : fieldName\n                    ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                    : '';\n                return (\n                  <StickyRowDataCell\n                    key={`${page}-${index}-${colIndex}`}\n                    content={content}\n                    sticky={col.sticky}\n                    width={col.width}\n                    top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index}\n                  />\n                );\n              })}\n              <StickyRowFillCell top={HEADER_ROW_HEIGHT + BODY_ROW_HEIGHT * index} />\n            </TR>\n          ))}\n          {itemsStatus === Status.SUCCESS &&\n            rows.map((item, rowIndex) => (\n              <TR\n                key={`${page}-${rowIndex}`}\n                data-selected={isRowHighlighted?.(item, rowIndex)}\n                isSelected={isRowHighlighted?.(item, rowIndex)}\n                onClick={() => onRowClick?.(item, rowIndex)}\n              >\n                {columnInfo.map((col, colIndex) => {\n                  const fieldName = col.fieldName;\n                  const render = col.render;\n                  const content = render\n                    ? render(item)\n                    : fieldName\n                      ? String((item as Record<string, unknown>)[fieldName] ?? '')\n                      : '';\n                  return (\n                    <DataCell\n                      key={`${page}-${rowIndex}-${colIndex}`}\n                      content={content}\n                      sticky={col.sticky}\n                      width={col.width}\n                    />\n                  );\n                })}\n                <TD key=\"fill\" fill className=\"fill\"></TD>\n              </TR>\n            ))}\n          {itemsStatus === Status.PENDING && 'Loading...'}\n          {itemsStatus === Status.ERROR && 'Error loading data'}\n          <TR key=\"fill\" className=\"fill\"></TR>\n        </TBody>\n        {showFooter && (\n          <TFoot>\n            <TR>\n              {columnInfo.map((col, colIndex) => (\n                <FooterCell\n                  key={`footer-${colIndex}`}\n                  content={wrapContent(col.footer)}\n                  sticky={col.sticky}\n                  width={col.width}\n                />\n              ))}\n              <TD key=\"footer-fill\" fill className=\"fill\"></TD>\n            </TR>\n          </TFoot>\n        )}\n      </PrimitiveTable>\n    </Box>\n  );\n}\n"],"names":["HEADER_ROW_HEIGHT","BODY_ROW_HEIGHT","wrapContent","content","jsx","BodyText","Table","dataSource","stickyItems","children","width","height","zIndex","isRowHighlighted","onRowClick","props","rows","useSignalValue","page","scrollerRef","useRef","columns","React","child","isValidElement","TableColumn","presenter","useState","TablePresenter","column","columnInfo","itemsStatus","useRunnerStatus","showFooter","isClickable","Box","styles","jsxs","PrimitiveTable","THead","TR","index","HeaderCell","newSize","TH","TBody","item","col","colIndex","fieldName","render","StickyRowDataCell","StickyRowFillCell","Status","rowIndex","DataCell","TD","TFoot","FooterCell"],"mappings":"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"}

package/dist/components/table/table_column.d.ts

@@ -4,6 +4,7 @@ type BaseTableColumnProps<T> = {
     render?: (item: T) => React.ReactNode;
     sticky?: 'start' | 'end';
     width?: number;
+    canResize?: boolean;
 };
 type SortableTableColumnProps<T> = BaseTableColumnProps<T> & {
     fieldName: string;

package/dist/components/table/table_column.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_column.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_column.tsx"],"names":[],"mappings":"AAAA,KAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,wBAAwB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,KAAK,2BAA2B,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAC1B,wBAAwB,CAAC,CAAC,CAAC,GAC3B,2BAA2B,CAAC,CAAC,CAAC,CAAC;AAInC,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,QAEzD"}
+{"version":3,"file":"table_column.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_column.tsx"],"names":[],"mappings":"AAAA,KAAK,oBAAoB,CAAC,CAAC,IAAI;IAC7B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,wBAAwB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,IAAI,CAAC;CACf,CAAC;AAEF,KAAK,2BAA2B,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAC1B,wBAAwB,CAAC,CAAC,CAAC,GAC3B,2BAA2B,CAAC,CAAC,CAAC,CAAC;AAInC,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,QAEzD"}

package/dist/components/table/table_column.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_column.js","sources":["../../../src/components/table/table_column.tsx"],"sourcesContent":["type BaseTableColumnProps<T> = {\n  heading: React.ReactNode;\n  footer?: React.ReactNode;\n  render?: (item: T) => React.ReactNode;\n  sticky?: 'start' | 'end';\n  width?: number;\n};\n\ntype SortableTableColumnProps<T> = BaseTableColumnProps<T> & {\n  fieldName: string;\n  canSort: true;\n};\n\ntype NonSortableTableColumnProps<T> = BaseTableColumnProps<T> & {\n  fieldName?: string;\n  canSort?: false;\n};\n\nexport type TableColumnProps<T> =\n  | SortableTableColumnProps<T>\n  | NonSortableTableColumnProps<T>;\n\n// This component never gets rendered. It is given as children to the\n// table body as configuration\nexport function TableColumn<T>(_props: TableColumnProps<T>) {\n  return null;\n}\n"],"names":["TableColumn","_props"],"mappings":"AAwBO,SAASA,EAAeC,GAA6B;AAC1D,SAAO;AACT;"}
+{"version":3,"file":"table_column.js","sources":["../../../src/components/table/table_column.tsx"],"sourcesContent":["type BaseTableColumnProps<T> = {\n  heading: React.ReactNode;\n  footer?: React.ReactNode;\n  render?: (item: T) => React.ReactNode;\n  sticky?: 'start' | 'end';\n  width?: number;\n  canResize?: boolean;\n};\n\ntype SortableTableColumnProps<T> = BaseTableColumnProps<T> & {\n  fieldName: string;\n  canSort: true;\n};\n\ntype NonSortableTableColumnProps<T> = BaseTableColumnProps<T> & {\n  fieldName?: string;\n  canSort?: false;\n};\n\nexport type TableColumnProps<T> =\n  | SortableTableColumnProps<T>\n  | NonSortableTableColumnProps<T>;\n\n// This component never gets rendered. It is given as children to the\n// table body as configuration\nexport function TableColumn<T>(_props: TableColumnProps<T>) {\n  return null;\n}\n"],"names":["TableColumn","_props"],"mappings":"AAyBO,SAASA,EAAeC,GAA6B;AAC1D,SAAO;AACT;"}

package/dist/components/table/table_presenter.d.ts

@@ -10,6 +10,7 @@ export type ColumnInfo = {
     footer?: ReactNode;
     sticky?: 'start' | 'end';
     fieldName?: string;
+    canResize?: boolean;
 };
 export declare class TablePresenter {
     private _columnInfo;

package/dist/components/table/table_presenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD,KAAK,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAIxC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,SAAS,CAAC;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,qBAAa,cAAc;IACzB,OAAO,CAAC,WAAW,CAAgC;IACnD,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,WAAW,CAA8B;IACjD,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,YAAY,CAAC,CAA4B;IAGjD,OAAO,CAAC,iBAAiB,CAAC,CAAwB;gBAEtC,EACV,UAAU,EACV,OAAO,EACP,WAAW,GACZ,EAAE;QACD,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QAC5B,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,WAAW,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;KACzC;IAeD,IAAI,UAAU;;;MAEb;IAED,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAO3C,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ;IAoBnD,qBAAqB,CAAC,KAAK,EAAE,MAAM;IAWnC,OAAO;CAGR"}
+{"version":3,"file":"table_presenter.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_presenter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD,KAAK,QAAQ,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAIxC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,SAAS,CAAC;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,qBAAa,cAAc;IACzB,OAAO,CAAC,WAAW,CAAgC;IACnD,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,WAAW,CAA8B;IACjD,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,YAAY,CAAC,CAA4B;IAGjD,OAAO,CAAC,iBAAiB,CAAC,CAAwB;gBAEtC,EACV,UAAU,EACV,OAAO,EACP,WAAW,GACZ,EAAE;QACD,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QAC5B,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,WAAW,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;KACzC;IAeD,IAAI,UAAU;;;MAEb;IAED,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAO3C,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ;IAoBnD,qBAAqB,CAAC,KAAK,EAAE,MAAM;IAWnC,OAAO;CAGR"}

package/dist/components/table/table_presenter.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_presenter.js","sources":["../../../src/components/table/table_presenter.ts"],"sourcesContent":["import { ReactNode, RefObject } from 'react';\n\nimport { DataSource } from '@tcn/resource-store';\nimport { ISubscription, Signal } from '@tcn/state';\n\ntype SortMode = 'none' | 'asc' | 'desc';\n\nconst sortModes: SortMode[] = ['none', 'asc', 'desc'];\n\nexport type ColumnInfo = {\n  width: number;\n  render?: (item: any) => ReactNode;\n  sortMode: SortMode;\n  canSort: boolean;\n  heading: ReactNode;\n  footer?: ReactNode;\n  sticky?: 'start' | 'end';\n  fieldName?: string;\n};\n\nexport class TablePresenter {\n  private _columnInfo = new Signal<ColumnInfo[]>([]);\n  private _dataSource: DataSource<any>;\n  private _showFooter = new Signal<boolean>(false);\n  private _broadcasts = {\n    columnInfo: this._columnInfo.broadcast,\n    showFooter: this._showFooter.broadcast,\n  };\n\n  private _scrollerRef?: RefObject<HTMLDivElement>;\n\n  // holding a reference to this subscription prevents it from being garbage collected\n  private _pageSubscription?: ISubscription<number>;\n\n  constructor({\n    dataSource,\n    columns,\n    scrollerRef,\n  }: {\n    dataSource: DataSource<any>;\n    columns: ColumnInfo[];\n    scrollerRef?: RefObject<HTMLDivElement>;\n  }) {\n    this._dataSource = dataSource;\n    this._columnInfo.set(columns);\n    this._scrollerRef = scrollerRef;\n\n    const showFooter = columns.some(column => column.footer);\n    this._showFooter.set(showFooter);\n\n    this._pageSubscription = this._dataSource.broadcasts.currentPageIndex.subscribe(_ => {\n      if (this._scrollerRef?.current) {\n        this._scrollerRef.current.scrollTo({ top: 0 });\n      }\n    });\n  }\n\n  get broadcasts() {\n    return this._broadcasts;\n  }\n\n  setColumnWidth(index: number, width: number) {\n    this._columnInfo.transform(columnInfo => {\n      columnInfo[index].width = width;\n      return columnInfo;\n    });\n  }\n\n  setColumnSortMode(index: number, sortMode: SortMode) {\n    const column = this._columnInfo.get()[index];\n    const fieldName = column.fieldName;\n    if (!column.canSort) {\n      return;\n    }\n\n    if (!fieldName) {\n      // can't sort a field without a name\n      return;\n    }\n\n    this._dataSource.setFieldSort(fieldName, sortMode);\n\n    this._columnInfo.transform(columnInfo => {\n      columnInfo[index].sortMode = sortMode;\n      return columnInfo;\n    });\n  }\n\n  setNextColumnSortMode(index: number) {\n    const column = this._columnInfo.get()[index];\n\n    const currentMode = column.sortMode;\n    const currentIndex = sortModes.indexOf(currentMode);\n    const nextIndex = (currentIndex + 1) % sortModes.length;\n    const nextMode = sortModes[nextIndex];\n\n    this.setColumnSortMode(index, nextMode);\n  }\n\n  dispose() {\n    this._pageSubscription?.unsubscribe();\n  }\n}\n"],"names":["sortModes","TablePresenter","Signal","dataSource","columns","scrollerRef","showFooter","column","_","index","width","columnInfo","sortMode","fieldName","currentMode","nextIndex","nextMode"],"mappings":";AAOA,MAAMA,IAAwB,CAAC,QAAQ,OAAO,MAAM;AAa7C,MAAMC,EAAe;AAAA,EAClB,cAAc,IAAIC,EAAqB,EAAE;AAAA,EACzC;AAAA,EACA,cAAc,IAAIA,EAAgB,EAAK;AAAA,EACvC,cAAc;AAAA,IACpB,YAAY,KAAK,YAAY;AAAA,IAC7B,YAAY,KAAK,YAAY;AAAA,EAAA;AAAA,EAGvB;AAAA;AAAA,EAGA;AAAA,EAER,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,GAKC;AACD,SAAK,cAAcF,GACnB,KAAK,YAAY,IAAIC,CAAO,GAC5B,KAAK,eAAeC;AAEpB,UAAMC,IAAaF,EAAQ,KAAK,CAAAG,MAAUA,EAAO,MAAM;AACvD,SAAK,YAAY,IAAID,CAAU,GAE/B,KAAK,oBAAoB,KAAK,YAAY,WAAW,iBAAiB,UAAU,CAAAE,MAAK;AACnF,MAAI,KAAK,cAAc,WACrB,KAAK,aAAa,QAAQ,SAAS,EAAE,KAAK,GAAG;AAAA,IAEjD,CAAC;AAAA,EACH;AAAA,EAEA,IAAI,aAAa;AACf,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,eAAeC,GAAeC,GAAe;AAC3C,SAAK,YAAY,UAAU,CAAAC,OACzBA,EAAWF,CAAK,EAAE,QAAQC,GACnBC,EACR;AAAA,EACH;AAAA,EAEA,kBAAkBF,GAAeG,GAAoB;AACnD,UAAML,IAAS,KAAK,YAAY,IAAA,EAAME,CAAK,GACrCI,IAAYN,EAAO;AACzB,IAAKA,EAAO,WAIPM,MAKL,KAAK,YAAY,aAAaA,GAAWD,CAAQ,GAEjD,KAAK,YAAY,UAAU,CAAAD,OACzBA,EAAWF,CAAK,EAAE,WAAWG,GACtBD,EACR;AAAA,EACH;AAAA,EAEA,sBAAsBF,GAAe;AAGnC,UAAMK,IAFS,KAAK,YAAY,IAAA,EAAML,CAAK,EAEhB,UAErBM,KADef,EAAU,QAAQc,CAAW,IAChB,KAAKd,EAAU,QAC3CgB,IAAWhB,EAAUe,CAAS;AAEpC,SAAK,kBAAkBN,GAAOO,CAAQ;AAAA,EACxC;AAAA,EAEA,UAAU;AACR,SAAK,mBAAmB,YAAA;AAAA,EAC1B;AACF;"}
+{"version":3,"file":"table_presenter.js","sources":["../../../src/components/table/table_presenter.ts"],"sourcesContent":["import { ReactNode, RefObject } from 'react';\n\nimport { DataSource } from '@tcn/resource-store';\nimport { ISubscription, Signal } from '@tcn/state';\n\ntype SortMode = 'none' | 'asc' | 'desc';\n\nconst sortModes: SortMode[] = ['none', 'asc', 'desc'];\n\nexport type ColumnInfo = {\n  width: number;\n  render?: (item: any) => ReactNode;\n  sortMode: SortMode;\n  canSort: boolean;\n  heading: ReactNode;\n  footer?: ReactNode;\n  sticky?: 'start' | 'end';\n  fieldName?: string;\n  canResize?: boolean;\n};\n\nexport class TablePresenter {\n  private _columnInfo = new Signal<ColumnInfo[]>([]);\n  private _dataSource: DataSource<any>;\n  private _showFooter = new Signal<boolean>(false);\n  private _broadcasts = {\n    columnInfo: this._columnInfo.broadcast,\n    showFooter: this._showFooter.broadcast,\n  };\n\n  private _scrollerRef?: RefObject<HTMLDivElement>;\n\n  // holding a reference to this subscription prevents it from being garbage collected\n  private _pageSubscription?: ISubscription<number>;\n\n  constructor({\n    dataSource,\n    columns,\n    scrollerRef,\n  }: {\n    dataSource: DataSource<any>;\n    columns: ColumnInfo[];\n    scrollerRef?: RefObject<HTMLDivElement>;\n  }) {\n    this._dataSource = dataSource;\n    this._columnInfo.set(columns);\n    this._scrollerRef = scrollerRef;\n\n    const showFooter = columns.some(column => column.footer);\n    this._showFooter.set(showFooter);\n\n    this._pageSubscription = this._dataSource.broadcasts.currentPageIndex.subscribe(_ => {\n      if (this._scrollerRef?.current) {\n        this._scrollerRef.current.scrollTo({ top: 0 });\n      }\n    });\n  }\n\n  get broadcasts() {\n    return this._broadcasts;\n  }\n\n  setColumnWidth(index: number, width: number) {\n    this._columnInfo.transform(columnInfo => {\n      columnInfo[index].width = width;\n      return columnInfo;\n    });\n  }\n\n  setColumnSortMode(index: number, sortMode: SortMode) {\n    const column = this._columnInfo.get()[index];\n    const fieldName = column.fieldName;\n    if (!column.canSort) {\n      return;\n    }\n\n    if (!fieldName) {\n      // can't sort a field without a name\n      return;\n    }\n\n    this._dataSource.setFieldSort(fieldName, sortMode);\n\n    this._columnInfo.transform(columnInfo => {\n      columnInfo[index].sortMode = sortMode;\n      return columnInfo;\n    });\n  }\n\n  setNextColumnSortMode(index: number) {\n    const column = this._columnInfo.get()[index];\n\n    const currentMode = column.sortMode;\n    const currentIndex = sortModes.indexOf(currentMode);\n    const nextIndex = (currentIndex + 1) % sortModes.length;\n    const nextMode = sortModes[nextIndex];\n\n    this.setColumnSortMode(index, nextMode);\n  }\n\n  dispose() {\n    this._pageSubscription?.unsubscribe();\n  }\n}\n"],"names":["sortModes","TablePresenter","Signal","dataSource","columns","scrollerRef","showFooter","column","_","index","width","columnInfo","sortMode","fieldName","currentMode","nextIndex","nextMode"],"mappings":";AAOA,MAAMA,IAAwB,CAAC,QAAQ,OAAO,MAAM;AAc7C,MAAMC,EAAe;AAAA,EAClB,cAAc,IAAIC,EAAqB,EAAE;AAAA,EACzC;AAAA,EACA,cAAc,IAAIA,EAAgB,EAAK;AAAA,EACvC,cAAc;AAAA,IACpB,YAAY,KAAK,YAAY;AAAA,IAC7B,YAAY,KAAK,YAAY;AAAA,EAAA;AAAA,EAGvB;AAAA;AAAA,EAGA;AAAA,EAER,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,GAKC;AACD,SAAK,cAAcF,GACnB,KAAK,YAAY,IAAIC,CAAO,GAC5B,KAAK,eAAeC;AAEpB,UAAMC,IAAaF,EAAQ,KAAK,CAAAG,MAAUA,EAAO,MAAM;AACvD,SAAK,YAAY,IAAID,CAAU,GAE/B,KAAK,oBAAoB,KAAK,YAAY,WAAW,iBAAiB,UAAU,CAAAE,MAAK;AACnF,MAAI,KAAK,cAAc,WACrB,KAAK,aAAa,QAAQ,SAAS,EAAE,KAAK,GAAG;AAAA,IAEjD,CAAC;AAAA,EACH;AAAA,EAEA,IAAI,aAAa;AACf,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,eAAeC,GAAeC,GAAe;AAC3C,SAAK,YAAY,UAAU,CAAAC,OACzBA,EAAWF,CAAK,EAAE,QAAQC,GACnBC,EACR;AAAA,EACH;AAAA,EAEA,kBAAkBF,GAAeG,GAAoB;AACnD,UAAML,IAAS,KAAK,YAAY,IAAA,EAAME,CAAK,GACrCI,IAAYN,EAAO;AACzB,IAAKA,EAAO,WAIPM,MAKL,KAAK,YAAY,aAAaA,GAAWD,CAAQ,GAEjD,KAAK,YAAY,UAAU,CAAAD,OACzBA,EAAWF,CAAK,EAAE,WAAWG,GACtBD,EACR;AAAA,EACH;AAAA,EAEA,sBAAsBF,GAAe;AAGnC,UAAMK,IAFS,KAAK,YAAY,IAAA,EAAML,CAAK,EAEhB,UAErBM,KADef,EAAU,QAAQc,CAAW,IAChB,KAAKd,EAAU,QAC3CgB,IAAWhB,EAAUe,CAAS;AAEpC,SAAK,kBAAkBN,GAAOO,CAAQ;AAAA,EACxC;AAAA,EAEA,UAAU;AACR,SAAK,mBAAmB,YAAA;AAAA,EAC1B;AACF;"}

package/dist/components/table_filter_panel/field_filters/field_filter_props.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=field_filter_props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field_filter_props.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/table_filter_panel/field_filters/field_filter_strategy.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=field_filter_strategy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field_filter_strategy.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"mulit_select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK3D,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,GAAG;IAC3D,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,2BAA2B,2CA4C7B"}
+{"version":3,"file":"mulit_select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAM3D,MAAM,MAAM,2BAA2B,GAAG,gBAAgB,GAAG;IAC3D,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,OAAO,GACR,EAAE,2BAA2B,2CAkC7B"}

package/dist/components/table_filter_panel/field_filters/mulit_select_field_filter.js

@@ -1,50 +1,38 @@
-import { jsxs as o, jsx as l } from "react/jsx-runtime";
-import { useSignalValue as f } from "@tcn/state";
-import { Multiselect as h, Option as p } from "@tcn/ui/inputs";
-import { VStack as b, Box as u, HStack as v } from "@tcn/ui/stacks";
-import { Title as g } from "@tcn/ui/typography";
-import { MultiSelectFieldFilterPresenter as x } from "./multi_select_field_filter_presenter.js";
-import { useFieldFilterStrategy as F } from "./use_field_filter_strategy.js";
-import { ClearFilterButton as S } from "./clear_button.js";
-function z({
-  fieldName: c,
-  label: d,
-  options: r
+import { jsx as s } from "react/jsx-runtime";
+import { useSignalValue as o } from "@tcn/state";
+import { Multiselect as f, Option as b } from "@tcn/ui/inputs";
+import { MultiSelectFieldFilterPresenter as d } from "./multi_select_field_filter_presenter.js";
+import { useFieldFilterStrategy as v } from "./use_field_filter_strategy.js";
+import { ClearableField as F } from "./clearable_field.js";
+import '../../../mulit_select_field_filter.css';const p = "_multiselect-filter_193bbb6", g = { "multiselect-filter": p };
+function y({
+  fieldName: u,
+  label: n,
+  options: t
 }) {
-  const i = F(x, c), a = f(i.broadcasts.value), m = a?.map((e) => r.find((t) => t.value === e)?.label ?? "").filter(Boolean) ?? [];
-  return /* @__PURE__ */ o(b, { gap: "4px", children: [
-    /* @__PURE__ */ l(u, { width: "flex", children: /* @__PURE__ */ l(g, { size: "md", children: d }) }),
-    /* @__PURE__ */ o(v, { children: [
-      /* @__PURE__ */ l(u, { width: "flex", children: /* @__PURE__ */ l(
-        h,
+  const r = v(d, u), a = o(r.broadcasts.value), c = a?.map((e) => t.find((l) => l.value === e)?.label ?? "").filter(Boolean) ?? [];
+  return /* @__PURE__ */ s(
+    F,
+    {
+      label: n,
+      onClear: () => r.setValue(null),
+      isClearable: a == null || a.length === 0,
+      className: g["multiselect-filter"],
+      children: /* @__PURE__ */ s(
+        f,
         {
-          value: m,
+          value: c,
           onChange: (e) => {
-            const t = e.map((n) => r.find((s) => s.label === n)?.value).filter((n) => n !== void 0);
-            i.setValue(t.length > 0 ? t : null);
+            const l = e.map((i) => t.find((m) => m.label === i)?.value).filter((i) => i !== void 0);
+            r.setValue(l.length > 0 ? l : null);
           },
-          children: r.map((e) => /* @__PURE__ */ l(
-            p,
-            {
-              value: e.label,
-              label: e.label,
-              children: e.label
-            },
-            e.value.toString()
-          ))
-        }
-      ) }),
-      /* @__PURE__ */ l(
-        S,
-        {
-          onClick: () => i.setValue(null),
-          disabled: a == null || a.length === 0
+          children: t.map((e) => /* @__PURE__ */ s(b, { value: e.label, label: e.label, children: e.label }, e.value.toString()))
         }
       )
-    ] })
-  ] });
+    }
+  );
 }
 export {
-  z as MulitSelectFieldFilter
+  y as MulitSelectFieldFilter
 };
 //# sourceMappingURL=mulit_select_field_filter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mulit_select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Multiselect, Option } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearFilterButton } from './clear_button.js';\n\nexport type MulitSelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function MulitSelectFieldFilter({\n  fieldName,\n  label,\n  options,\n}: MulitSelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(MultiSelectFieldFilterPresenter, fieldName);\n\n  const values = useSignalValue(presenter.broadcasts.value);\n  const selectedLabels =\n    values\n      ?.map(value => options.find(option => option.value === value)?.label ?? '')\n      .filter(Boolean) ?? [];\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack>\n        <Box width=\"flex\">\n          <Multiselect\n            value={selectedLabels}\n            onChange={selectedLabels => {\n              const realValues = selectedLabels\n                .map(label => options.find(option => option.label === label)?.value)\n                .filter(value => value !== undefined) as (string | boolean | number)[];\n\n              presenter.setValue(realValues.length > 0 ? realValues : null);\n            }}\n          >\n            {options.map(option => (\n              <Option\n                key={option.value.toString()}\n                value={option.label}\n                label={option.label}\n              >\n                {option.label}\n              </Option>\n            ))}\n          </Multiselect>\n        </Box>\n        <ClearFilterButton\n          onClick={() => presenter.setValue(null)}\n          disabled={values == null || values.length === 0}\n        />\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["MulitSelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","MultiSelectFieldFilterPresenter","values","useSignalValue","selectedLabels","value","option","jsxs","VStack","jsx","Box","Title","HStack","Multiselect","realValues","Option","ClearFilterButton"],"mappings":";;;;;;;;AAaO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAYC,EAAuBC,GAAiCL,CAAS,GAE7EM,IAASC,EAAeJ,EAAU,WAAW,KAAK,GAClDK,IACJF,GACI,IAAI,CAAAG,MAASP,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUD,CAAK,GAAG,SAAS,EAAE,EACzE,OAAO,OAAO,KAAK,CAAA;AAExB,SACE,gBAAAE,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,sBACCC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOT;AAAA,UACP,UAAU,CAAAA,MAAkB;AAC1B,kBAAMU,IAAaV,EAChB,IAAI,CAAAP,MAASC,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUT,CAAK,GAAG,KAAK,EAClE,OAAO,CAAAQ,MAASA,MAAU,MAAS;AAEtC,YAAAN,EAAU,SAASe,EAAW,SAAS,IAAIA,IAAa,IAAI;AAAA,UAC9D;AAAA,UAEC,UAAAhB,EAAQ,IAAI,CAAAQ,MACX,gBAAAG;AAAA,YAACM;AAAA,YAAA;AAAA,cAEC,OAAOT,EAAO;AAAA,cACd,OAAOA,EAAO;AAAA,cAEb,UAAAA,EAAO;AAAA,YAAA;AAAA,YAJHA,EAAO,MAAM,SAAA;AAAA,UAAS,CAM9B;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACA,gBAAAG;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMjB,EAAU,SAAS,IAAI;AAAA,UACtC,UAAUG,KAAU,QAAQA,EAAO,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAChD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"mulit_select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/mulit_select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Multiselect, Option } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearableField } from './clearable_field.js';\nimport styles from './mulit_select_field_filter.module.css';\n\nexport type MulitSelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function MulitSelectFieldFilter({\n  fieldName,\n  label,\n  options,\n}: MulitSelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(MultiSelectFieldFilterPresenter, fieldName);\n\n  const values = useSignalValue(presenter.broadcasts.value);\n  const selectedLabels =\n    values\n      ?.map(value => options.find(option => option.value === value)?.label ?? '')\n      .filter(Boolean) ?? [];\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={values == null || values.length === 0}\n      className={styles['multiselect-filter']}\n    >\n      <Multiselect\n        value={selectedLabels}\n        onChange={selectedLabels => {\n          const realValues = selectedLabels\n            .map(label => options.find(option => option.label === label)?.value)\n            .filter(value => value !== undefined) as (string | boolean | number)[];\n\n          presenter.setValue(realValues.length > 0 ? realValues : null);\n        }}\n      >\n        {options.map(option => (\n          <Option key={option.value.toString()} value={option.label} label={option.label}>\n            {option.label}\n          </Option>\n        ))}\n      </Multiselect>\n    </ClearableField>\n  );\n}\n"],"names":["MulitSelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","MultiSelectFieldFilterPresenter","values","useSignalValue","selectedLabels","value","option","jsx","ClearableField","styles","Multiselect","realValues","Option"],"mappings":";;;;;;;AAYO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAYC,EAAuBC,GAAiCL,CAAS,GAE7EM,IAASC,EAAeJ,EAAU,WAAW,KAAK,GAClDK,IACJF,GACI,IAAI,CAAAG,MAASP,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUD,CAAK,GAAG,SAAS,EAAE,EACzE,OAAO,OAAO,KAAK,CAAA;AAExB,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAX;AAAA,MACA,SAAS,MAAME,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAU,QAAQA,EAAO,WAAW;AAAA,MACjD,WAAWO,EAAO,oBAAoB;AAAA,MAEtC,UAAA,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,OAAON;AAAA,UACP,UAAU,CAAAA,MAAkB;AAC1B,kBAAMO,IAAaP,EAChB,IAAI,CAAAP,MAASC,EAAQ,KAAK,CAAAQ,MAAUA,EAAO,UAAUT,CAAK,GAAG,KAAK,EAClE,OAAO,CAAAQ,MAASA,MAAU,MAAS;AAEtC,YAAAN,EAAU,SAASY,EAAW,SAAS,IAAIA,IAAa,IAAI;AAAA,UAC9D;AAAA,UAEC,YAAQ,IAAI,CAAAL,MACX,gBAAAC,EAACK,GAAA,EAAqC,OAAON,EAAO,OAAO,OAAOA,EAAO,OACtE,UAAAA,EAAO,MAAA,GADGA,EAAO,MAAM,UAE1B,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

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

@@ -1 +1 @@
-{"version":3,"file":"select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK3D,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG;IACtD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAqCtF"}
+{"version":3,"file":"select_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK3D,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,GAAG;IACtD,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;KAAE,EAAE,CAAC;CAChE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CA4BtF"}

package/dist/components/table_filter_panel/field_filters/select_field_filter.js

@@ -1,47 +1,33 @@
-import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import { useSignalValue as d } from "@tcn/state";
-import { Select as s, Option as f } from "@tcn/ui/inputs";
-import { VStack as b, Box as h, HStack as p } from "@tcn/ui/stacks";
-import { Title as v } from "@tcn/ui/typography";
-import { SelectFieldFilterPresenter as S } from "./select_field_filter_presenter.js";
-import { useFieldFilterStrategy as x } from "./use_field_filter_strategy.js";
-import { ClearFilterButton as F } from "./clear_button.js";
-function z({ fieldName: n, label: u, options: r }) {
-  const t = x(S, n), a = d(t.broadcasts.value), o = r.find((e) => e.value === a)?.label ?? "";
-  return /* @__PURE__ */ i(b, { gap: "4px", children: [
-    /* @__PURE__ */ l(h, { width: "flex", children: /* @__PURE__ */ l(v, { size: "md", children: u }) }),
-    /* @__PURE__ */ i(p, { children: [
-      /* @__PURE__ */ l(
+import { jsx as a } from "react/jsx-runtime";
+import { useSignalValue as c } from "@tcn/state";
+import { Select as s, Option as d } from "@tcn/ui/inputs";
+import { SelectFieldFilterPresenter as b } from "./select_field_filter_presenter.js";
+import { useFieldFilterStrategy as f } from "./use_field_filter_strategy.js";
+import { ClearableField as v } from "./clearable_field.js";
+function V({ fieldName: i, label: u, options: l }) {
+  const r = f(b, i), t = c(r.broadcasts.value), n = l.find((e) => e.value === t)?.label ?? "";
+  return /* @__PURE__ */ a(
+    v,
+    {
+      label: u,
+      onClear: () => r.setValue(null),
+      isClearable: t == null,
+      children: /* @__PURE__ */ a(
         s,
         {
-          value: o,
+          value: n,
           onChange: (e) => {
-            const c = r.find((m) => m.label === e)?.value;
-            t.setValue(c ?? null);
+            const m = l.find((o) => o.label === e)?.value;
+            r.setValue(m ?? null);
           },
           width: "flex",
-          children: r.map((e) => /* @__PURE__ */ l(
-            f,
-            {
-              value: e.label,
-              label: e.label,
-              children: e.label
-            },
-            e.value.toString()
-          ))
-        }
-      ),
-      /* @__PURE__ */ l(
-        F,
-        {
-          onClick: () => t.setValue(null),
-          disabled: a == null
+          children: l.map((e) => /* @__PURE__ */ a(d, { value: e.label, label: e.label, children: e.label }, e.value.toString()))
         }
       )
-    ] })
-  ] });
+    }
+  );
 }
 export {
-  z as SelectFieldFilter
+  V as SelectFieldFilter
 };
 //# sourceMappingURL=select_field_filter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Option, Select } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearFilterButton } from './clear_button.js';\n\nexport type SelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(SelectFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const valueLabel = options.find(option => option.value === value)?.label ?? '';\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack>\n        <Select\n          value={valueLabel}\n          onChange={value => {\n            const realValue = options.find(option => option.label === value)?.value;\n            presenter.setValue(realValue ?? null);\n          }}\n          width=\"flex\"\n        >\n          {options.map(option => (\n            <Option\n              key={option.value.toString()}\n              value={option.label}\n              label={option.label}\n            >\n              {option.label}\n            </Option>\n          ))}\n        </Select>\n        <ClearFilterButton\n          onClick={() => presenter.setValue(null)}\n          disabled={value == null}\n        />\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["SelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","SelectFieldFilterPresenter","value","useSignalValue","valueLabel","option","jsxs","VStack","jsx","Box","Title","HStack","Select","realValue","Option","ClearFilterButton"],"mappings":";;;;;;;;AAaO,SAASA,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,KAAmC;AACvF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAaN,EAAQ,KAAK,CAAAO,MAAUA,EAAO,UAAUH,CAAK,GAAG,SAAS;AAE5E,SACE,gBAAAI,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,sBACCC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOR;AAAA,UACP,UAAU,CAAAF,MAAS;AACjB,kBAAMW,IAAYf,EAAQ,KAAK,OAAUO,EAAO,UAAUH,CAAK,GAAG;AAClE,YAAAH,EAAU,SAASc,KAAa,IAAI;AAAA,UACtC;AAAA,UACA,OAAM;AAAA,UAEL,UAAAf,EAAQ,IAAI,CAAAO,MACX,gBAAAG;AAAA,YAACM;AAAA,YAAA;AAAA,cAEC,OAAOT,EAAO;AAAA,cACd,OAAOA,EAAO;AAAA,cAEb,UAAAA,EAAO;AAAA,YAAA;AAAA,YAJHA,EAAO,MAAM,SAAA;AAAA,UAAS,CAM9B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAG;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMhB,EAAU,SAAS,IAAI;AAAA,UACtC,UAAUG,KAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACrB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"select_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/select_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Option, Select } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { SelectFieldFilterPresenter } from './select_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearableField } from './clearable_field.js';\n\nexport type SelectFieldFilterProps = FieldFilterProps & {\n  options: { label: string; value: string | boolean | number }[];\n};\n\nexport function SelectFieldFilter({ fieldName, label, options }: SelectFieldFilterProps) {\n  const presenter = useFieldFilterStrategy(SelectFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const valueLabel = options.find(option => option.value === value)?.label ?? '';\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <Select\n        value={valueLabel}\n        onChange={value => {\n          const realValue = options.find(option => option.label === value)?.value;\n          presenter.setValue(realValue ?? null);\n        }}\n        width=\"flex\"\n      >\n        {options.map(option => (\n          <Option key={option.value.toString()} value={option.label} label={option.label}>\n            {option.label}\n          </Option>\n        ))}\n      </Select>\n    </ClearableField>\n  );\n}\n"],"names":["SelectFieldFilter","fieldName","label","options","presenter","useFieldFilterStrategy","SelectFieldFilterPresenter","value","useSignalValue","valueLabel","option","jsx","ClearableField","Select","realValue","Option"],"mappings":";;;;;;AAWO,SAASA,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,KAAmC;AACvF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAaN,EAAQ,KAAK,CAAAO,MAAUA,EAAO,UAAUH,CAAK,GAAG,SAAS;AAE5E,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAS,MAAME,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,UAAA,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOJ;AAAA,UACP,UAAU,CAAAF,MAAS;AACjB,kBAAMO,IAAYX,EAAQ,KAAK,OAAUO,EAAO,UAAUH,CAAK,GAAG;AAClE,YAAAH,EAAU,SAASU,KAAa,IAAI;AAAA,UACtC;AAAA,UACA,OAAM;AAAA,UAEL,YAAQ,IAAI,CAAAJ,MACX,gBAAAC,EAACI,GAAA,EAAqC,OAAOL,EAAO,OAAO,OAAOA,EAAO,OACtE,UAAAA,EAAO,MAAA,GADGA,EAAO,MAAM,UAE1B,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}