@tcn/ui-table 2.3.14 → 2.4.0

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,2CA2CjB"}
+{"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"}

package/dist/components/cells/header_cell.js

@@ -3,14 +3,14 @@ import { useCallback as x } from "react";
 import { Box as r, HStack as h } from "@tcn/ui/stacks";
 import { TH as f } from "@tcn/ui/layouts";
 import { c as u } from "../../cell.module-WpHnQBVu.js";
-import { SortControl as y } from "./sort_control.js";
-function z({
+import { SortControl as C } from "./sort_control.js";
+function H({
   heading: n,
   sticky: l,
   onResize: i,
   width: o,
-  sortMode: s,
-  onSortModeChange: a,
+  sortMode: a,
+  onSortModeChange: s,
   canSort: d
 }) {
   const m = l != null ? 2 : 1, p = x(
@@ -31,9 +31,10 @@ function z({
           padding: "0px 8px",
           overflow: "hidden",
           minWidth: "24px",
+          maxWidth: "unset",
+          width: o,
           enableResizeOnEnd: !0,
           onWidthResize: p,
-          style: { width: `${o}px`, minWidth: "20px" },
           onClick: (t) => t.stopPropagation(),
           children: /* @__PURE__ */ c(h, { children: [
             /* @__PURE__ */ e(
@@ -46,11 +47,11 @@ function z({
               }
             ),
             /* @__PURE__ */ e(
-              y,
+              C,
               {
                 canSort: d,
-                onSortModeChange: a,
-                sortMode: s
+                onSortModeChange: s,
+                sortMode: a
               }
             )
           ] })
@@ -60,6 +61,6 @@ function z({
   );
 }
 export {
-  z as HeaderCell
+  H 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        enableResizeOnEnd\n        onWidthResize={handleResize}\n        style={{ width: `${width}px`, minWidth: '20px' }}\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,mBAAiB;AAAA,UACjB,eAAeL;AAAA,UACf,OAAO,EAAE,OAAO,GAAGL,CAAK,MAAM,UAAU,OAAA;AAAA,UACxC,SAAS,CAAAW,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={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;"}

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

@@ -1,19 +1,19 @@
-import { jsx as t, jsxs as u } from "react/jsx-runtime";
-import { useSignalValue as n } from "@tcn/state";
-import { InputGroup as s, Select as m, Option as p, Input as c } from "@tcn/ui/inputs";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { useSignalValue as o } from "@tcn/state";
+import { ControlSet as u, Select as m, Option as p, Input as c } from "@tcn/ui/inputs";
 import { NumberFieldFilterPresenter as d } from "./number_field_filter_presenter.js";
 import { useFieldFilterStrategy as b } from "./use_field_filter_strategy.js";
 import { ClearableField as f } from "./clearable_field.js";
 const h = [">=", ">", "<=", "<", "=", "!="];
-function N({ fieldName: o, label: a }) {
-  const r = b(d, o), l = n(r.broadcasts.value), i = n(r.broadcasts.operator);
+function N({ fieldName: n, label: a }) {
+  const r = b(d, n), l = o(r.broadcasts.value), i = o(r.broadcasts.operator);
   return /* @__PURE__ */ t(
     f,
     {
       label: a,
       onClear: () => r.setValue(null),
       isClearable: l == null,
-      children: /* @__PURE__ */ u(s, { children: [
+      children: /* @__PURE__ */ s(u, { children: [
         /* @__PURE__ */ t(
           m,
           {

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

@@ -1 +1 @@
-{"version":3,"file":"number_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ComparisonOperator } from '../types.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];\n\nexport function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(NumberFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <InputGroup>\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"55px\"\n        >\n          {operators.map(operator => (\n            <Option key={operator} value={operator} label={operator}>\n              {operator}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"number\"\n          value={String(value ?? '')}\n          onChange={value => presenter.setValue(Number(value))}\n        />\n      </InputGroup>\n    </ClearableField>\n  );\n}\n"],"names":["operators","NumberFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberFieldFilterPresenter","value","useSignalValue","operator","jsx","ClearableField","InputGroup","Select","Option","Input"],"mappings":";;;;;;AAQA,MAAMA,IAAkC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjE,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,KAA2B;AACxE,QAAMC,IAAYC,EAAuBC,GAA4BJ,CAAS,GAExEK,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,SAAS,MAAMC,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACK,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOJ;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAP,EAAU,IAAI,CAAAS,MACb,gBAAAC,EAACI,GAAA,EAAsB,OAAOL,GAAU,OAAOA,GAC5C,UAAAA,EAAAA,GADUA,CAEb,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOR,KAAS,EAAE;AAAA,YACzB,UAAU,CAAAA,MAASH,EAAU,SAAS,OAAOG,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACrD,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"number_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ComparisonOperator } from '../types.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];\n\nexport function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(NumberFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <ControlSet>\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"55px\"\n        >\n          {operators.map(operator => (\n            <Option key={operator} value={operator} label={operator}>\n              {operator}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"number\"\n          value={String(value ?? '')}\n          onChange={value => presenter.setValue(Number(value))}\n        />\n      </ControlSet>\n    </ClearableField>\n  );\n}\n"],"names":["operators","NumberFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberFieldFilterPresenter","value","useSignalValue","operator","jsx","ClearableField","ControlSet","Select","Option","Input"],"mappings":";;;;;;AAQA,MAAMA,IAAkC,CAAC,MAAM,KAAK,MAAM,KAAK,KAAK,IAAI;AAEjE,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,KAA2B;AACxE,QAAMC,IAAYC,EAAuBC,GAA4BJ,CAAS,GAExEK,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,SAAS,MAAMC,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACK,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOJ;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAP,EAAU,IAAI,CAAAS,MACb,gBAAAC,EAACI,GAAA,EAAsB,OAAOL,GAAU,OAAOA,GAC5C,UAAAA,EAAAA,GADUA,CAEb,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAC;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOR,KAAS,EAAE;AAAA,YACzB,UAAU,CAAAA,MAASH,EAAU,SAAS,OAAOG,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACrD,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,10 +1,10 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
 import { useSignalValue as o } from "@tcn/state";
-import { InputGroup as m, Select as d, Option as h, Input as b } from "@tcn/ui/inputs";
+import { ControlSet as m, Select as d, Option as h, Input as b } from "@tcn/ui/inputs";
 import { StringFieldFilterPresenter as f } from "./string_field_filter_presenter.js";
 import { useFieldFilterStrategy as F } from "./use_field_filter_strategy.js";
-import { ClearableField as g } from "./clearable_field.js";
-const v = ["is", "isNot", "has"], S = {
+import { ClearableField as S } from "./clearable_field.js";
+const g = ["is", "isNot", "has"], v = {
   is: "=",
   isNot: "!=",
   has: ":"
@@ -14,24 +14,24 @@ const v = ["is", "isNot", "has"], S = {
   has: "has"
 };
 function j({ fieldName: a, label: i, operators: n }) {
-  const t = F(f, a), l = o(t.broadcasts.value), p = o(t.broadcasts.operator), u = n || v;
+  const t = F(f, a), l = o(t.broadcasts.value), p = o(t.broadcasts.operator), c = n || g;
   return /* @__PURE__ */ r(
-    g,
+    S,
     {
       label: i,
       onClear: () => t.setValue(null),
       isClearable: l == null,
-      children: /* @__PURE__ */ c(m, { children: [
+      children: /* @__PURE__ */ u(m, { children: [
         /* @__PURE__ */ r(
           d,
           {
             value: p,
             onChange: (e) => t.setOperator(e),
             width: "65px",
-            children: u.map((e) => /* @__PURE__ */ r(
+            children: c.map((e) => /* @__PURE__ */ r(
               h,
               {
-                value: S[e],
+                value: v[e],
                 label: s[e],
                 children: s[e]
               },

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

@@ -1 +1 @@
-{"version":3,"file":"string_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { StringFieldFilterPresenter } from './string_field_filter_presenter.js';\nimport { ComparisonOperator } from '../types.js';\n\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];\nconst operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {\n  is: '=',\n  isNot: '!=',\n  has: ':',\n};\nconst operatorLabels: Record<'is' | 'isNot' | 'has', string> = {\n  is: 'is',\n  isNot: 'is not',\n  has: 'has',\n};\n\nexport function StringFieldFilter({ fieldName, label, operators }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(StringFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  const availableOperators = operators || allOperators;\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <InputGroup>\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"65px\"\n        >\n          {availableOperators.map(operator => (\n            <Option\n              key={operator}\n              value={operatorSymbols[operator]}\n              label={operatorLabels[operator]}\n            >\n              {operatorLabels[operator]}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"text\"\n          value={value ?? ''}\n          onChange={value => presenter.setValue(value)}\n        />\n      </InputGroup>\n    </ClearableField>\n  );\n}\n"],"names":["allOperators","operatorSymbols","operatorLabels","StringFieldFilter","fieldName","label","operators","presenter","useFieldFilterStrategy","StringFieldFilterPresenter","value","useSignalValue","operator","availableOperators","jsx","ClearableField","InputGroup","Select","Option","Input"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC,MAAM,SAAS,KAAK,GAChEC,IAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP,GACMC,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP;AAEO,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,KAA+B;AACnF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ,GAEvDM,IAAqBP,KAAaN;AAExC,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAS,MAAME,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACM,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOL;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAG,EAAmB,IAAI,CAAAD,MACtB,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBAEC,OAAOjB,EAAgBW,CAAQ;AAAA,gBAC/B,OAAOV,EAAeU,CAAQ;AAAA,gBAE7B,YAAeA,CAAQ;AAAA,cAAA;AAAA,cAJnBA;AAAAA,YAAA,CAMR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAE;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAOT,KAAS;AAAA,YAChB,UAAU,CAAAA,MAASH,EAAU,SAASG,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7C,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"string_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';\nimport { FieldFilterProps } from './field_filter_props.js';\nimport { StringFieldFilterPresenter } from './string_field_filter_presenter.js';\nimport { ComparisonOperator } from '../types.js';\n\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { ClearableField } from './clearable_field.js';\n\nconst allOperators: ('is' | 'isNot' | 'has')[] = ['is', 'isNot', 'has'];\nconst operatorSymbols: Record<'is' | 'isNot' | 'has', string> = {\n  is: '=',\n  isNot: '!=',\n  has: ':',\n};\nconst operatorLabels: Record<'is' | 'isNot' | 'has', string> = {\n  is: 'is',\n  isNot: 'is not',\n  has: 'has',\n};\n\nexport function StringFieldFilter({ fieldName, label, operators }: FieldFilterProps) {\n  const presenter = useFieldFilterStrategy(StringFieldFilterPresenter, fieldName);\n\n  const value = useSignalValue(presenter.broadcasts.value);\n  const operator = useSignalValue(presenter.broadcasts.operator);\n\n  const availableOperators = operators || allOperators;\n\n  return (\n    <ClearableField\n      label={label}\n      onClear={() => presenter.setValue(null)}\n      isClearable={value == null}\n    >\n      <ControlSet>\n        <Select\n          value={operator}\n          onChange={value => presenter.setOperator(value as ComparisonOperator)}\n          width=\"65px\"\n        >\n          {availableOperators.map(operator => (\n            <Option\n              key={operator}\n              value={operatorSymbols[operator]}\n              label={operatorLabels[operator]}\n            >\n              {operatorLabels[operator]}\n            </Option>\n          ))}\n        </Select>\n        <Input\n          type=\"text\"\n          value={value ?? ''}\n          onChange={value => presenter.setValue(value)}\n        />\n      </ControlSet>\n    </ClearableField>\n  );\n}\n"],"names":["allOperators","operatorSymbols","operatorLabels","StringFieldFilter","fieldName","label","operators","presenter","useFieldFilterStrategy","StringFieldFilterPresenter","value","useSignalValue","operator","availableOperators","jsx","ClearableField","ControlSet","Select","Option","Input"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC,MAAM,SAAS,KAAK,GAChEC,IAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP,GACMC,IAAyD;AAAA,EAC7D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACP;AAEO,SAASC,EAAkB,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,KAA+B;AACnF,QAAMC,IAAYC,EAAuBC,GAA4BL,CAAS,GAExEM,IAAQC,EAAeJ,EAAU,WAAW,KAAK,GACjDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ,GAEvDM,IAAqBP,KAAaN;AAExC,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAV;AAAA,MACA,SAAS,MAAME,EAAU,SAAS,IAAI;AAAA,MACtC,aAAaG,KAAS;AAAA,MAEtB,4BAACM,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAOL;AAAA,YACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,YACpE,OAAM;AAAA,YAEL,UAAAG,EAAmB,IAAI,CAAAD,MACtB,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBAEC,OAAOjB,EAAgBW,CAAQ;AAAA,gBAC/B,OAAOV,EAAeU,CAAQ;AAAA,gBAE7B,YAAeA,CAAQ;AAAA,cAAA;AAAA,cAJnBA;AAAAA,YAAA,CAMR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAE;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAOT,KAAS;AAAA,YAChB,UAAU,CAAAA,MAASH,EAAU,SAASG,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MAC7C,EAAA,CACF;AAAA,IAAA;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_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.14",
+  "version": "2.4.0",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -41,9 +41,9 @@
     "clarity-pattern-parser": "^11.5.4",
     "@tcn/aip-160": "1.2.5",
     "@tcn/icons": "2.3.0",
-    "@tcn/resource-store": "2.5.3",
-    "@tcn/ui": "0.12.5",
-    "@tcn/state": "1.3.0"
+    "@tcn/resource-store": "2.5.6",
+    "@tcn/state": "1.3.2",
+    "@tcn/ui": "0.13.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/__stories__/table.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@tcn/resource-store';
 import { useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
-import { Footer, Header, HBody, Rail, Side, VBody } from '@tcn/ui/layouts';
+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 +308,7 @@ export function WithTableHeaderAndTableFooter() {
           <Spacer />
           <GlobalSearch dataSource={source} />
         </Header>
-        <VBody height="flex">
+        <Body height="flex">
           <Table
             dataSource={source}
             onRowClick={item => {
@@ -323,7 +323,7 @@ export function WithTableHeaderAndTableFooter() {
             <TableColumn heading="Occupation" fieldName="occupation" />
             <TableColumn heading="Active" fieldName="isActive" />
           </Table>
-        </VBody>
+        </Body>
         <Footer>
           <TablePager dataSource={source} />
         </Footer>
@@ -411,21 +411,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 +427,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 +442,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>

package/src/components/cells/header_cell.tsx

@@ -42,9 +42,10 @@ export function HeaderCell({
         padding="0px 8px" // FIXME: should be on theme ideally.
         overflow="hidden"
         minWidth="24px"
+        maxWidth="unset"
+        width={width}
         enableResizeOnEnd
         onWidthResize={handleResize}
-        style={{ width: `${width}px`, minWidth: '20px' }}
         onClick={e => e.stopPropagation()}
       >
         <HStack>

package/src/components/table_filter_panel/field_filters/number_field_filter.tsx

@@ -1,5 +1,5 @@
 import { useSignalValue } from '@tcn/state';
-import { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';
+import { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';
 import { FieldFilterProps } from './field_filter_props.js';
 import { NumberFieldFilterPresenter } from './number_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
@@ -20,7 +20,7 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
       onClear={() => presenter.setValue(null)}
       isClearable={value == null}
     >
-      <InputGroup>
+      <ControlSet>
         <Select
           value={operator}
           onChange={value => presenter.setOperator(value as ComparisonOperator)}
@@ -37,7 +37,7 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
           value={String(value ?? '')}
           onChange={value => presenter.setValue(Number(value))}
         />
-      </InputGroup>
+      </ControlSet>
     </ClearableField>
   );
 }

package/src/components/table_filter_panel/field_filters/string_field_filter.tsx

@@ -1,5 +1,5 @@
 import { useSignalValue } from '@tcn/state';
-import { Input, Option, Select, InputGroup } from '@tcn/ui/inputs';
+import { Input, Option, Select, ControlSet } from '@tcn/ui/inputs';
 import { FieldFilterProps } from './field_filter_props.js';
 import { StringFieldFilterPresenter } from './string_field_filter_presenter.js';
 import { ComparisonOperator } from '../types.js';
@@ -33,7 +33,7 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
       onClear={() => presenter.setValue(null)}
       isClearable={value == null}
     >
-      <InputGroup>
+      <ControlSet>
         <Select
           value={operator}
           onChange={value => presenter.setOperator(value as ComparisonOperator)}
@@ -54,7 +54,7 @@ export function StringFieldFilter({ fieldName, label, operators }: FieldFilterPr
           value={value ?? ''}
           onChange={value => presenter.setValue(value)}
         />
-      </InputGroup>
+      </ControlSet>
     </ClearableField>
   );
 }

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>
   );
 }