@tcn/ui-table 2.3.6 → 2.3.8

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

@@ -1,62 +1,53 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { CrossCircleIcon as o } from "@tcn/icons/cross_circle_icon.js";
-import { useSignalValue as d } from "@tcn/state";
-import { Button as m } from "@tcn/ui/actions";
-import { Input as u } from "@tcn/ui/inputs";
-import { VStack as x, Box as i, HStack as c } from "@tcn/ui/stacks";
-import { Title as f, BodyText as s } from "@tcn/ui/typography";
-import { useFieldFilterStrategy as g } from "./use_field_filter_strategy.js";
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { useSignalValue as t } from "@tcn/state";
+import { Input as i } from "@tcn/ui/inputs";
+import { useFieldFilterStrategy as p } from "./use_field_filter_strategy.js";
 import { NumberRangeFieldFilterPresenter as b } from "./number_range_field_filter_presenter.js";
-function z({
-  fieldName: h,
-  label: p
+import { FieldSet as d } from "@tcn/ui/form";
+import { ClearableField as u } from "./clearable_field.js";
+function M({
+  fieldName: o,
+  label: m
 }) {
-  const r = g(b, h), n = d(r.broadcasts.minValue), a = d(r.broadcasts.maxValue);
-  return /* @__PURE__ */ t(x, { gap: "4px", children: [
-    /* @__PURE__ */ e(i, { width: "flex", children: /* @__PURE__ */ e(f, { size: "md", children: p }) }),
-    /* @__PURE__ */ t(c, { gap: "4px", children: [
-      /* @__PURE__ */ e(i, { width: "auto", children: /* @__PURE__ */ e(s, { size: "lg", children: "Min" }) }),
-      /* @__PURE__ */ e(i, { width: "flex", children: /* @__PURE__ */ e(
-        u,
-        {
-          type: "number",
-          value: String(n ?? ""),
-          onChange: (l) => r.setMinValue(Number(l))
-        }
-      ) }),
-      /* @__PURE__ */ e(
-        m,
-        {
-          onClick: () => r.setMinValue(null),
-          hierarchy: "tertiary",
-          disabled: n == null,
-          children: /* @__PURE__ */ e(o, {})
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t(c, { gap: "4px", children: [
-      /* @__PURE__ */ e(i, { width: "auto", children: /* @__PURE__ */ e(s, { size: "lg", children: "Max" }) }),
-      /* @__PURE__ */ e(i, { width: "flex", children: /* @__PURE__ */ e(
-        u,
-        {
-          type: "number",
-          value: String(a ?? ""),
-          onChange: (l) => r.setMaxValue(Number(l))
-        }
-      ) }),
-      /* @__PURE__ */ e(
-        m,
-        {
-          onClick: () => r.setMaxValue(null),
-          hierarchy: "tertiary",
-          disabled: a == null,
-          children: /* @__PURE__ */ e(o, {})
-        }
-      )
-    ] })
+  const e = p(b, o), n = t(e.broadcasts.minValue), a = t(e.broadcasts.maxValue);
+  return /* @__PURE__ */ s(d, { legend: m, gap: "4px", children: [
+    /* @__PURE__ */ l(
+      u,
+      {
+        label: "Min",
+        onClear: () => e.setMinValue(null),
+        isClearable: n == null,
+        inline: !0,
+        children: /* @__PURE__ */ l(
+          i,
+          {
+            type: "number",
+            value: String(n ?? ""),
+            onChange: (r) => e.setMinValue(Number(r))
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ l(
+      u,
+      {
+        label: "Max",
+        onClear: () => e.setMaxValue(null),
+        isClearable: a == null,
+        inline: !0,
+        children: /* @__PURE__ */ l(
+          i,
+          {
+            type: "number",
+            value: String(a ?? ""),
+            onChange: (r) => e.setMaxValue(Number(r))
+          }
+        )
+      }
+    )
   ] });
 }
 export {
-  z as NumberRangeFieldFilter
+  M as NumberRangeFieldFilter
 };
 //# sourceMappingURL=number_range_field_filter.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"number_range_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_range_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 } from '@tcn/ui/inputs';\nimport { Box, HStack, VStack } from '@tcn/ui/stacks';\nimport { BodyText, Title } from '@tcn/ui/typography';\nimport React from 'react';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { NumberRangeFieldFilterPresenter } from './number_range_field_filter_presenter.js';\n\nexport function NumberRangeFieldFilter({\n  fieldName,\n  label,\n}: {\n  fieldName: string;\n  label: string;\n}) {\n  const presenter = useFieldFilterStrategy(NumberRangeFieldFilterPresenter, fieldName);\n\n  const minValue = useSignalValue(presenter.broadcasts.minValue);\n  const maxValue = useSignalValue(presenter.broadcasts.maxValue);\n\n  return (\n    <VStack gap=\"4px\">\n      <Box width=\"flex\">\n        <Title size=\"md\">{label}</Title>\n      </Box>\n      <HStack gap=\"4px\">\n        <Box width=\"auto\">\n          <BodyText size=\"lg\">Min</BodyText>\n        </Box>\n        <Box width=\"flex\">\n          <Input\n            type=\"number\"\n            value={String(minValue ?? '')}\n            onChange={value => presenter.setMinValue(Number(value))}\n          />\n        </Box>\n        <Button\n          onClick={() => presenter.setMinValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={minValue == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n      <HStack gap=\"4px\">\n        <Box width=\"auto\">\n          <BodyText size=\"lg\">Max</BodyText>\n        </Box>\n        <Box width=\"flex\">\n          <Input\n            type=\"number\"\n            value={String(maxValue ?? '')}\n            onChange={value => presenter.setMaxValue(Number(value))}\n          />\n        </Box>\n        <Button\n          onClick={() => presenter.setMaxValue(null)}\n          hierarchy=\"tertiary\"\n          disabled={maxValue == null}\n        >\n          <CrossCircleIcon />\n        </Button>\n      </HStack>\n    </VStack>\n  );\n}\n"],"names":["NumberRangeFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberRangeFieldFilterPresenter","minValue","useSignalValue","maxValue","jsxs","VStack","jsx","Box","Title","HStack","BodyText","Input","value","Button","CrossCircleIcon"],"mappings":";;;;;;;;;AAUO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,QAAMC,IAAYC,EAAuBC,GAAiCJ,CAAS,GAE7EK,IAAWC,EAAeJ,EAAU,WAAW,QAAQ,GACvDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,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,KAAI,OACV,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACI,KAAS,MAAK,MAAK,iBAAG,EAAA,CACzB;AAAA,MACA,gBAAAJ,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,OAAOV,KAAY,EAAE;AAAA,UAC5B,UAAU,CAAAW,MAASd,EAAU,YAAY,OAAOc,CAAK,CAAC;AAAA,QAAA;AAAA,MAAA,GAE1D;AAAA,MACA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,YAAY,IAAI;AAAA,UACzC,WAAU;AAAA,UACV,UAAUG,KAAY;AAAA,UAEtB,4BAACa,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,GACF;AAAA,IACA,gBAAAV,EAACK,GAAA,EAAO,KAAI,OACV,UAAA;AAAA,MAAA,gBAAAH,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD,EAACI,KAAS,MAAK,MAAK,iBAAG,EAAA,CACzB;AAAA,MACA,gBAAAJ,EAACC,GAAA,EAAI,OAAM,QACT,UAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,OAAOR,KAAY,EAAE;AAAA,UAC5B,UAAU,CAAAS,MAASd,EAAU,YAAY,OAAOc,CAAK,CAAC;AAAA,QAAA;AAAA,MAAA,GAE1D;AAAA,MACA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAS,MAAMf,EAAU,YAAY,IAAI;AAAA,UACzC,WAAU;AAAA,UACV,UAAUK,KAAY;AAAA,UAEtB,4BAACW,GAAA,CAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IACnB,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"number_range_field_filter.js","sources":["../../../../src/components/table_filter_panel/field_filters/number_range_field_filter.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { Input } from '@tcn/ui/inputs';\nimport { useFieldFilterStrategy } from './use_field_filter_strategy.js';\nimport { NumberRangeFieldFilterPresenter } from './number_range_field_filter_presenter.js';\nimport { FieldSet } from '@tcn/ui/form';\nimport { ClearableField } from './clearable_field.js';\n\nexport function NumberRangeFieldFilter({\n  fieldName,\n  label,\n}: {\n  fieldName: string;\n  label: string;\n}) {\n  const presenter = useFieldFilterStrategy(NumberRangeFieldFilterPresenter, fieldName);\n\n  const minValue = useSignalValue(presenter.broadcasts.minValue);\n  const maxValue = useSignalValue(presenter.broadcasts.maxValue);\n\n  return (\n    <FieldSet legend={label} gap=\"4px\">\n      <ClearableField\n        label=\"Min\"\n        onClear={() => presenter.setMinValue(null)}\n        isClearable={minValue == null}\n        inline\n      >\n        <Input\n          type=\"number\"\n          value={String(minValue ?? '')}\n          onChange={value => presenter.setMinValue(Number(value))}\n        />\n      </ClearableField>\n\n      <ClearableField\n        label=\"Max\"\n        onClear={() => presenter.setMaxValue(null)}\n        isClearable={maxValue == null}\n        inline\n      >\n        <Input\n          type=\"number\"\n          value={String(maxValue ?? '')}\n          onChange={value => presenter.setMaxValue(Number(value))}\n        />\n      </ClearableField>\n    </FieldSet>\n  );\n}\n"],"names":["NumberRangeFieldFilter","fieldName","label","presenter","useFieldFilterStrategy","NumberRangeFieldFilterPresenter","minValue","useSignalValue","maxValue","jsxs","FieldSet","jsx","ClearableField","Input","value"],"mappings":";;;;;;;AAOO,SAASA,EAAuB;AAAA,EACrC,WAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,QAAMC,IAAYC,EAAuBC,GAAiCJ,CAAS,GAE7EK,IAAWC,EAAeJ,EAAU,WAAW,QAAQ,GACvDK,IAAWD,EAAeJ,EAAU,WAAW,QAAQ;AAE7D,SACE,gBAAAM,EAACC,GAAA,EAAS,QAAQR,GAAO,KAAI,OAC3B,UAAA;AAAA,IAAA,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS,MAAMT,EAAU,YAAY,IAAI;AAAA,QACzC,aAAaG,KAAY;AAAA,QACzB,QAAM;AAAA,QAEN,UAAA,gBAAAK;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOP,KAAY,EAAE;AAAA,YAC5B,UAAU,CAAAQ,MAASX,EAAU,YAAY,OAAOW,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACxD;AAAA,IAAA;AAAA,IAGF,gBAAAH;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS,MAAMT,EAAU,YAAY,IAAI;AAAA,QACzC,aAAaK,KAAY;AAAA,QACzB,QAAM;AAAA,QAEN,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO,OAAOL,KAAY,EAAE;AAAA,YAC5B,UAAU,CAAAM,MAASX,EAAU,YAAY,OAAOW,CAAK,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACxD;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

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":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAI3D,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,2CAwCtF"}
+{"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"}

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.6",
+  "version": "2.3.8",
   "type": "module",
   "description": "React table component library",
   "author": "TCN",
@@ -40,10 +40,10 @@
   "dependencies": {
     "clarity-pattern-parser": "^11.5.4",
     "@tcn/aip-160": "1.2.5",
+    "@tcn/icons": "2.3.0",
+    "@tcn/state": "1.2.0",
     "@tcn/resource-store": "2.5.1",
-    "@tcn/icons": "2.2.1",
-    "@tcn/ui": "0.9.0",
-    "@tcn/state": "1.2.0"
+    "@tcn/ui": "0.11.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/__stories__/aip_table.stories.tsx

@@ -15,7 +15,7 @@ import { Title } from '@tcn/ui/typography';
 
 import styles from './table.module.css';
 
-import { VPanel } from '@tcn/ui/surfaces';
+import { Panel } from '@tcn/ui/surfaces';
 import { AuthContext, useToken } from './auth_provider.js';
 
 const meta: Meta = {
@@ -94,7 +94,7 @@ function BasicContent() {
   return (
     <VStack>
       <HStack height="auto">{tokenValue === '' ? 'Sign in to load data' : ''}</HStack>
-      <VPanel>
+      <Panel>
         <HStack className={styles.header} padding="8px" vAlign="center">
           <Title>Organizations</Title>
           <Spacer />
@@ -172,7 +172,7 @@ function BasicContent() {
         <HStack padding="8px">
           <TablePager dataSource={source} />
         </HStack>
-      </VPanel>
+      </Panel>
     </VStack>
   );
 }

package/src/__stories__/demo.stories.tsx

@@ -8,9 +8,9 @@ import {
 import { useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
 import { Box, HStack, Spacer } from '@tcn/ui/stacks';
-import { VPanel } from '@tcn/ui/surfaces';
+import { Panel } from '@tcn/ui/surfaces';
 import { Title } from '@tcn/ui/typography';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { GlobalSearch } from '../components/global_search.js';
 import { Table } from '../components/table/table.js';
 import { TableColumn } from '../components/table/table_column.js';
@@ -59,7 +59,7 @@ export function Demo() {
   const isFiltered = filterString !== '';
 
   return (
-    <VPanel height="100%">
+    <Panel height="100%">
       <HStack padding="8px" vAlign="center">
         <Title>Cosmerinas</Title>
         <Spacer />
@@ -132,6 +132,6 @@ export function Demo() {
         </Box>
         <TablePager dataSource={source} />
       </HStack>
-    </VPanel>
+    </Panel>
   );
 }