@tcn/ui-table 2.3.7 → 2.3.9

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

@@ -1,28 +1,27 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import { CrossCircleIcon as d } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as s } from "@tcn/state";
-import { Button as f } from "@tcn/ui/actions";
-import { Select as h, Option as p } from "@tcn/ui/inputs";
-import { VStack as b, Box as v, HStack as S } from "@tcn/ui/stacks";
-import { Title as x } from "@tcn/ui/typography";
-import { SelectFieldFilterPresenter as F } from "./select_field_filter_presenter.js";
-import { useFieldFilterStrategy as g } from "./use_field_filter_strategy.js";
-function I({ fieldName: n, label: o, options: r }) {
-  const t = g(F, n), a = s(t.broadcasts.value), c = r.find((e) => e.value === a)?.label ?? "";
+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(v, { width: "flex", children: /* @__PURE__ */ l(x, { size: "md", children: o }) }),
-    /* @__PURE__ */ i(S, { children: [
+    /* @__PURE__ */ l(h, { width: "flex", children: /* @__PURE__ */ l(v, { size: "md", children: u }) }),
+    /* @__PURE__ */ i(p, { children: [
       /* @__PURE__ */ l(
-        h,
+        s,
         {
-          value: c,
+          value: o,
           onChange: (e) => {
-            const m = r.find((u) => u.label === e)?.value;
-            t.setValue(m ?? null);
+            const c = r.find((m) => m.label === e)?.value;
+            t.setValue(c ?? null);
           },
           width: "flex",
           children: r.map((e) => /* @__PURE__ */ l(
-            p,
+            f,
             {
               value: e.label,
               label: e.label,
@@ -33,18 +32,16 @@ function I({ fieldName: n, label: o, options: r }) {
         }
       ),
       /* @__PURE__ */ l(
-        f,
+        F,
         {
           onClick: () => t.setValue(null),
-          hierarchy: "tertiary",
-          disabled: a == null,
-          children: /* @__PURE__ */ l(d, {})
+          disabled: a == null
         }
       )
     ] })
   ] });
 }
 export {
-  I as SelectFieldFilter
+  z 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 React from 'react';\n\nimport { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\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';\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        <Button\n          onClick={() => presenter.setValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={value == null}\n        >\n          <CrossCircleIcon />\n        </Button>\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","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAgBO,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,WAAU;AAAA,UACV,UAAUG,KAAS;AAAA,UAEnB,4BAACc,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,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 { 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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"string_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAkB3D,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CA6ClF"}
+{"version":3,"file":"string_field_filter.d.ts","sourceRoot":"","sources":["../../../../src/components/table_filter_panel/field_filters/string_field_filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAmB3D,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAsClF"}

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

@@ -1,13 +1,10 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { CrossCircleIcon as m } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as l } from "@tcn/state";
-import { Button as d } from "@tcn/ui/actions";
-import { Select as h, Option as u, Input as f } from "@tcn/ui/inputs";
-import { VStack as x, Box as b, HStack as S } from "@tcn/ui/stacks";
-import { Title as g } from "@tcn/ui/typography";
-import { StringFieldFilterPresenter as v } from "./string_field_filter_presenter.js";
-import { useFieldFilterStrategy as y } from "./use_field_filter_strategy.js";
-const F = ["is", "isNot", "has"], C = {
+import { jsx as r, jsxs as c } 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 { 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 = {
   is: "=",
   isNot: "!=",
   has: ":"
@@ -16,50 +13,45 @@ const F = ["is", "isNot", "has"], C = {
   isNot: "is not",
   has: "has"
 };
-function L({ fieldName: a, label: n, operators: c }) {
-  const r = y(v, a), i = l(r.broadcasts.value), p = l(r.broadcasts.operator);
-  return /* @__PURE__ */ o(x, { gap: "4px", children: [
-    /* @__PURE__ */ e(b, { width: "flex", children: /* @__PURE__ */ e(g, { size: "md", children: n }) }),
-    /* @__PURE__ */ o(S, { width: "flex", children: [
-      /* @__PURE__ */ e(
-        h,
-        {
-          value: p,
-          onChange: (t) => r.setOperator(t),
-          width: "65px",
-          children: (c || F).map((t) => /* @__PURE__ */ e(
-            u,
-            {
-              value: C[t],
-              label: s[t],
-              children: s[t]
-            },
-            t
-          ))
-        }
-      ),
-      /* @__PURE__ */ e(
-        f,
-        {
-          type: "text",
-          value: i ?? "",
-          onChange: (t) => r.setValue(t)
-        }
-      ),
-      /* @__PURE__ */ e(
-        d,
-        {
-          onClick: () => r.setValue(null),
-          hierarchy: "tertiary",
-          utility: !0,
-          disabled: i == null,
-          children: /* @__PURE__ */ e(m, {})
-        }
-      )
-    ] })
-  ] });
+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;
+  return /* @__PURE__ */ r(
+    g,
+    {
+      label: i,
+      onClear: () => t.setValue(null),
+      isClearable: l == null,
+      children: /* @__PURE__ */ c(m, { children: [
+        /* @__PURE__ */ r(
+          d,
+          {
+            value: p,
+            onChange: (e) => t.setOperator(e),
+            width: "65px",
+            children: u.map((e) => /* @__PURE__ */ r(
+              h,
+              {
+                value: S[e],
+                label: s[e],
+                children: s[e]
+              },
+              e
+            ))
+          }
+        ),
+        /* @__PURE__ */ r(
+          b,
+          {
+            type: "text",
+            value: l ?? "",
+            onChange: (e) => t.setValue(e)
+          }
+        )
+      ] })
+    }
+  );
 }
 export {
-  L as StringFieldFilter
+  j as StringFieldFilter
 };
 //# sourceMappingURL=string_field_filter.js.map

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 { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '@tcn/ui/actions';\nimport { Input, Option, Select } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { Title } from '@tcn/ui/typography';\nimport React from 'react';\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';\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    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack width=\"flex\">\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        <Button\n          onClick={() => presenter.setValue(null)}\n          hierarchy=\"tertiary\"\n          utility\n          disabled={value == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["allOperators","operatorSymbols","operatorLabels","StringFieldFilter","fieldName","label","operators","presenter","useFieldFilterStrategy","StringFieldFilterPresenter","value","useSignalValue","operator","jsxs","VStack","jsx","Box","Title","HStack","Select","Option","Input","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAaA,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;AAI7D,SACE,gBAAAM,EAACC,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACE,KAAM,MAAK,MAAM,aAAM,EAAA,CAC1B;AAAA,IACA,gBAAAJ,EAACK,GAAA,EAAO,OAAM,QACZ,UAAA;AAAA,MAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOP;AAAA,UACP,UAAU,CAAAF,MAASH,EAAU,YAAYG,CAA2B;AAAA,UACpE,OAAM;AAAA,UAEL,WAbkBJ,KAAaN,GAaZ,IAAI,CAAAY,MACtB,gBAAAG;AAAA,YAACK;AAAA,YAAA;AAAA,cAEC,OAAOnB,EAAgBW,CAAQ;AAAA,cAC/B,OAAOV,EAAeU,CAAQ;AAAA,cAE7B,YAAeA,CAAQ;AAAA,YAAA;AAAA,YAJnBA;AAAAA,UAAA,CAMR;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH,gBAAAG;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOX,KAAS;AAAA,UAChB,UAAU,CAAAA,MAASH,EAAU,SAASG,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAE7C,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,SAAS,IAAI;AAAA,UACtC,WAAU;AAAA,UACV,SAAO;AAAA,UACP,UAAUG,KAAS;AAAA,UAEnB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"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;"}

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

@@ -1,11 +1,12 @@
 import { DataSource } from '@tcn/resource-store';
-import { default as React, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { FieldFilterProps } from './field_filters/field_filter_props.js';
 import { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';
 export type TableFilterPanelProps = {
     children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;
     dataSource: DataSource<any>;
+    onClose?: () => void;
 };
-export declare function TableFilterPanel({ children, dataSource }: TableFilterPanelProps): import("react/jsx-runtime").JSX.Element;
-export declare const TableFilterPanelContext: React.Context<TableFilterPanelPresenter<unknown> | null>;
+export declare function TableFilterPanel({ children, dataSource, onClose, }: 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;AAEjD,OAAO,KAAK,EAAE,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uCAAuC,CAAC;AACzE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,EAAE,GAAG,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;CAC7B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,qBAAqB,2CAU/E;AAED,eAAO,MAAM,uBAAuB,0DAEnC,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;AAQ9E,MAAM,MAAM,qBAAqB,GAAG;IAClC,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,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,OAAO,GACR,EAAE,qBAAqB,2CA6BvB;AAED,eAAO,MAAM,uBAAuB,oEAEnC,CAAC"}

package/dist/components/table_filter_panel/table_filter_panel.js

@@ -1,16 +1,44 @@
-import { jsx as e } from "react/jsx-runtime";
-import { VStack as o } from "@tcn/ui/stacks";
-import { createContext as l, useState as a } from "react";
-import { TableFilterPanelPresenter as i } from "./table_filter_panel_presenter.js";
-function f({ children: r, dataSource: t }) {
-  const [n] = a(() => new i(t));
-  return /* @__PURE__ */ e(m.Provider, { value: n, children: /* @__PURE__ */ e(o, { gap: "16px", children: r }) });
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { createContext as o, useState as c } from "react";
+import { TableFilterPanelPresenter as s } from "./table_filter_panel_presenter.js";
+import { Panel as b } from "@tcn/ui/surfaces";
+import { Header as p, VBody as f, Section as m } from "@tcn/ui/layouts";
+import { Spacer as d } from "@tcn/ui/stacks";
+import { Button as y } from "@tcn/ui/actions";
+import { CrossIcon as u } from "@tcn/icons/cross_icon.js";
+import '../../table_filter_panel.css';const P = "_table-filter-panel_124e30e", h = "_table-filter-panel-body_c016eb0", F = "_table-filter-panel-section_cfd2eb9", t = { "table-filter-panel": P, "table-filter-panel-body": h, "table-filter-panel-section": F };
+function v({
+  children: a,
+  dataSource: n,
+  onClose: l
+}) {
+  const [i] = c(() => new s(n));
+  return /* @__PURE__ */ e(_.Provider, { value: i, children: /* @__PURE__ */ r(b, { className: `${t["table-filter-panel"]} tcn-table-filter-panel`, children: [
+    /* @__PURE__ */ r(p, { children: [
+      "Table Filters",
+      /* @__PURE__ */ e(d, {}),
+      l && /* @__PURE__ */ e(y, { utility: !0, hierarchy: "tertiary", onClick: l, children: /* @__PURE__ */ e(u, {}) })
+    ] }),
+    /* @__PURE__ */ e(
+      f,
+      {
+        className: `${t["table-filter-panel-body"]} tcn-table-filter-panel-body`,
+        children: /* @__PURE__ */ e(
+          m,
+          {
+            className: `${t["table-filter-panel-section"]} tcn-table-filter-panel-section`,
+            children: a
+          }
+        )
+      }
+    )
+  ] }) });
 }
-const m = l(
+const _ = o(
   null
 );
 export {
-  f as TableFilterPanel,
-  m as TableFilterPanelContext
+  v as TableFilterPanel,
+  _ 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 { VStack } from '@tcn/ui/stacks';\nimport React, { ReactElement, useState, createContext } from 'react';\nimport { FieldFilterProps } from './field_filters/field_filter_props.js';\nimport { TableFilterPanelPresenter } from './table_filter_panel_presenter.js';\n\nexport type TableFilterPanelProps = {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n};\n\nexport function TableFilterPanel({ children, dataSource }: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <VStack gap=\"16px\">{children}</VStack>\n    </TableFilterPanelContext.Provider>\n  );\n}\n\nexport const TableFilterPanelContext = createContext<TableFilterPanelPresenter | null>(\n  null\n);\n"],"names":["TableFilterPanel","children","dataSource","presenter","useState","TableFilterPanelPresenter","jsx","TableFilterPanelContext","VStack","createContext"],"mappings":";;;;AAWO,SAASA,EAAiB,EAAE,UAAAC,GAAU,YAAAC,KAAqC;AAChF,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BH,CAAU,CAChD;AAED,SACE,gBAAAI,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAG,EAACE,GAAA,EAAO,KAAI,QAAQ,UAAAP,EAAA,CAAS,EAAA,CAC/B;AAEJ;AAEO,MAAMM,IAA0BE;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 { Panel } 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 type TableFilterPanelProps = {\n  children: ReactElement<FieldFilterProps>[] | ReactElement<FieldFilterProps>;\n  dataSource: DataSource<any>;\n  onClose?: () => void;\n};\n\nexport function TableFilterPanel({\n  children,\n  dataSource,\n  onClose,\n}: TableFilterPanelProps) {\n  const [presenter] = useState(() => {\n    return new TableFilterPanelPresenter(dataSource);\n  });\n\n  return (\n    <TableFilterPanelContext.Provider value={presenter}>\n      <Panel className={`${styles['table-filter-panel']} tcn-table-filter-panel`}>\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","onClose","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,SAAAC;AACF,GAA0B;AACxB,QAAM,CAACC,CAAS,IAAIC,EAAS,MACpB,IAAIC,EAA0BJ,CAAU,CAChD;AAED,SACE,gBAAAK,EAACC,EAAwB,UAAxB,EAAiC,OAAOJ,GACvC,UAAA,gBAAAK,EAACC,GAAA,EAAM,WAAW,GAAGC,EAAO,oBAAoB,CAAC,2BAC/C,UAAA;AAAA,IAAA,gBAAAF,EAACG,GAAA,EAAO,UAAA;AAAA,MAAA;AAAA,wBAELC,GAAA,EAAO;AAAA,MACPV,KACC,gBAAAI,EAACO,GAAA,EAAO,SAAO,IAAC,WAAU,YAAW,SAASX,GAC5C,UAAA,gBAAAI,EAACQ,GAAA,CAAA,CAAU,EAAA,CACb;AAAA,IAAA,GAEJ;AAAA,IACA,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,WAAW,GAAGL,EAAO,yBAAyB,CAAC;AAAA,QAE/C,UAAA,gBAAAJ;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,WAAW,GAAGN,EAAO,4BAA4B,CAAC;AAAA,YAEjD,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF,EAAA,CACF,EAAA,CACF;AAEJ;AAEO,MAAMO,IAA0BU;AAAA,EACrC;AACF;"}

package/dist/table_filter_panel.css

@@ -0,0 +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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui-table",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -39,11 +39,11 @@
   ],
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
+    "@tcn/icons": "2.3.0",
     "@tcn/aip-160": "1.2.5",
-    "@tcn/icons": "2.2.1",
     "@tcn/state": "1.2.0",
-    "@tcn/ui": "0.10.0",
-    "@tcn/resource-store": "2.5.1"
+    "@tcn/resource-store": "2.5.1",
+    "@tcn/ui": "0.12.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/__stories__/table.stories.tsx

@@ -413,7 +413,7 @@ export function WithFilterPanel() {
         <Header>The Table</Header>
         <VBody>
           <Rail>
-            <Side>
+            <Side padding="0px">
               <Box
                 minWidth="300px"
                 enableResizeOnEnd
@@ -423,7 +423,10 @@ export function WithFilterPanel() {
                   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.
                 }}
               >
-                <TableFilterPanel dataSource={source}>
+                <TableFilterPanel
+                  dataSource={source}
+                  onClose={() => window.alert('Closed')}
+                >
                   <StringFieldFilter fieldName="name" label="Name (string)" />
                   <NumberFieldFilter fieldName="age" label="Age (number)" />
                   <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />

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

@@ -0,0 +1,17 @@
+import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
+import { Button, type ButtonProps } from '@tcn/ui/actions';
+
+export interface ClearFilterButtonProps extends Omit<ButtonProps, 'children'> {}
+
+export function ClearFilterButton({
+  onClick,
+  hierarchy = 'tertiary',
+  utility = true,
+  ...props
+}: ClearFilterButtonProps) {
+  return (
+    <Button utility={utility} onClick={onClick} hierarchy={hierarchy} {...props}>
+      <CrossCircleIcon />
+    </Button>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { HStack, VStack, type VStackProps } from '@tcn/ui/stacks';
+import { ClearFilterButton } from './clear_button.js';
+import { FieldLabel } from '@tcn/ui/form';
+
+export interface ClearableFieldProps extends VStackProps {
+  label?: string;
+  onClear?: () => void;
+  isClearable?: boolean;
+  inline?: boolean;
+}
+
+export function ClearableField({
+  children,
+  label,
+  onClear,
+  isClearable,
+  vAlign = 'start',
+  hAlign = 'start',
+  gap = '4px',
+  inline = false,
+  ...props
+}: ClearableFieldProps) {
+  return (
+    <VStack vAlign={vAlign} hAlign={hAlign} gap={gap} {...props}>
+      {!inline && <FieldLabel>{label}</FieldLabel>}
+      <HStack width="flex" gap="4px">
+        {inline && <FieldLabel>{label}</FieldLabel>}
+        <HStack width="flex">{children}</HStack>
+        <ClearFilterButton onClick={onClear} disabled={isClearable} />
+      </HStack>
+    </VStack>
+  );
+}

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

@@ -1,12 +1,9 @@
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
 import { DatePickerInput } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { BodyText, Title } from '@tcn/ui/typography';
-import React from 'react';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
 import { DateFieldFilterPresenter } from './date_field_filter_presenter.js';
+import { ClearableField } from './clearable_field.js';
+import { FieldSet } from '@tcn/ui/form';
 
 export function DateFieldFilter({
   fieldName,
@@ -21,50 +18,29 @@ export function DateFieldFilter({
   const endDate = useSignalValue(presenter.broadcasts.endDate);
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack gap="4px">
-        <Box width="auto">
-          <BodyText size="lg">Start</BodyText>
-        </Box>
-        <Box width="flex">
-          <DatePickerInput
-            value={startDate}
-            onChange={value => presenter.setStartDate(value)}
-          />
-        </Box>
-        <Box width="auto">
-          <Button
-            onClick={() => presenter.setStartDate(null)}
-            hierarchy="tertiary"
-            disabled={startDate == null}
-          >
-            <CrossCircleIcon />
-          </Button>
-        </Box>
-      </HStack>
-      <HStack gap="4px">
-        <Box width="auto">
-          <BodyText size="lg">End</BodyText>
-        </Box>
-        <Box width="flex">
-          <DatePickerInput
-            value={endDate}
-            onChange={value => presenter.setEndDate(value)}
-          />
-        </Box>
-        <Box width="auto">
-          <Button
-            onClick={() => presenter.setEndDate(null)}
-            hierarchy="tertiary"
-            disabled={endDate == null}
-          >
-            <CrossCircleIcon />
-          </Button>
-        </Box>
-      </HStack>
-    </VStack>
+    <FieldSet legend={label} gap="4px">
+      <ClearableField
+        inline
+        label="Start"
+        onClear={() => presenter.setStartDate(null)}
+        isClearable={startDate == null}
+      >
+        <DatePickerInput
+          value={startDate}
+          onChange={value => presenter.setStartDate(value)}
+        />
+      </ClearableField>
+      <ClearableField
+        inline
+        label="End"
+        onClear={() => presenter.setEndDate(null)}
+        isClearable={endDate == null}
+      >
+        <DatePickerInput
+          value={endDate}
+          onChange={value => presenter.setEndDate(value)}
+        />
+      </ClearableField>
+    </FieldSet>
   );
 }

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

@@ -1,14 +1,11 @@
-import React from 'react';
-
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
 import { Multiselect, Option } from '@tcn/ui/inputs';
 import { Box, HStack, VStack } from '@tcn/ui/stacks';
 import { Title } from '@tcn/ui/typography';
 import { FieldFilterProps } from './field_filter_props.js';
 import { MultiSelectFieldFilterPresenter } from './multi_select_field_filter_presenter.js';
 import { useFieldFilterStrategy } from './use_field_filter_strategy.js';
+import { ClearFilterButton } from './clear_button.js';
 
 export type MulitSelectFieldFilterProps = FieldFilterProps & {
   options: { label: string; value: string | boolean | number }[];
@@ -55,13 +52,10 @@ export function MulitSelectFieldFilter({
             ))}
           </Multiselect>
         </Box>
-        <Button
+        <ClearFilterButton
           onClick={() => presenter.setValue(null)}
-          hierarchy="tertiary"
           disabled={values == null || values.length === 0}
-        >
-          <CrossCircleIcon />
-        </Button>
+        />
       </HStack>
     </VStack>
   );

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

@@ -1,14 +1,10 @@
-import { CrossCircleIcon } from '@tcn/icons/cross_circle_icon.js';
 import { useSignalValue } from '@tcn/state';
-import { Button } from '@tcn/ui/actions';
-import { Input, Option, Select } from '@tcn/ui/inputs';
-import { Box, HStack, VStack } from '@tcn/ui/stacks';
-import { Title } from '@tcn/ui/typography';
-import React from 'react';
+import { Input, Option, Select, InputGroup } 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';
 import { ComparisonOperator } from '../types.js';
+import { ClearableField } from './clearable_field.js';
 
 const operators: ComparisonOperator[] = ['>=', '>', '<=', '<', '=', '!='];
 
@@ -19,11 +15,12 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
   const operator = useSignalValue(presenter.broadcasts.operator);
 
   return (
-    <VStack gap="4px">
-      <Box width="flex">
-        <Title size="md">{label}</Title>
-      </Box>
-      <HStack width="flex">
+    <ClearableField
+      label={label}
+      onClear={() => presenter.setValue(null)}
+      isClearable={value == null}
+    >
+      <InputGroup>
         <Select
           value={operator}
           onChange={value => presenter.setOperator(value as ComparisonOperator)}
@@ -40,14 +37,7 @@ export function NumberFieldFilter({ fieldName, label }: FieldFilterProps) {
           value={String(value ?? '')}
           onChange={value => presenter.setValue(Number(value))}
         />
-        <Button
-          onClick={() => presenter.setValue(null)}
-          hierarchy="tertiary"
-          disabled={value == null}
-        >
-          <CrossCircleIcon />
-        </Button>
-      </HStack>
-    </VStack>
+      </InputGroup>
+    </ClearableField>
   );
 }