npm - @cryptlex/web-components - Versions diffs - 5.0.0 → 5.1.0 - Mend

@cryptlex/web-components 5.0.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/dist/components/data-table/data-table-filter.es.js CHANGED Viewed

@@ -1,15 +1,17 @@
-import { jsx as e, jsxs as s, Fragment as d } from "react/jsx-runtime";
-import { useDataTable as b } from "./data-table.es.js";
-import { getResourceDisplayName as u } from "./table-commons.es.js";
+import { jsx as e, jsxs as s, Fragment as m } from "react/jsx-runtime";
+import { useDataTable as T } from "./data-table.es.js";
 import { SelectItem as w } from "../inputs/select.es.js";
 import { EasyMenu as S, MenuItem as x } from "../ui/menu.es.js";
-import { Filter as O, Trash as R } from "lucide-react";
-import { useRef as m } from "react";
-import { useAppForm as N } from "../../utils/form-hook.es.js";
-import { cn as q } from "../../utils/primitives.es.js";
-import { PopoverTrigger as D, Popover as E } from "../ui/popover.es.js";
+import { useResourceFormatter as O } from "../../utils/resource-names.es.js";
+import { Filter as R, Trash as P } from "lucide-react";
+import { useRef as d } from "react";
+import { useAppForm as q } from "../../utils/form-hook.es.js";
+import { TfDatePicker as D } from "../inputs/date-picker.es.js";
+import { TfIdSearchInput as E } from "../inputs/id-search.es.js";
+import { cn as N } from "../../utils/primitives.es.js";
+import { PopoverTrigger as $, Popover as I } from "../ui/popover.es.js";
 import { Button as c } from "../ui/button.es.js";
-const G = [
+const X = [
   "eq",
   "ne",
   "cn",
@@ -22,7 +24,7 @@ const G = [
   "gte",
   "lt",
   "lte"
-], P = {
+], _ = {
   eq: "equal to",
   ne: "not equal to",
   cn: "contains",
@@ -43,10 +45,10 @@ const G = [
   string: ["eq", "ne", "cn", "nc", "sw", "ew", "in", "nin"],
   date: ["lt", "gt"]
 };
-function H({ className: f, ...g }) {
-  const { filters: y, query: F, setFilters: v, filterConfig: o } = b();
-  m([]);
-  const A = m(null), l = N({
+function Y({ className: f, ...g }) {
+  const { filters: F, query: y, setFilters: v, filterConfig: o } = T();
+  d([]);
+  const A = d(null), p = O(), a = q({
     defaultValues: {
       // TODO, initialize with filters from tableState
       filters: []
@@ -54,37 +56,37 @@ function H({ className: f, ...g }) {
     onSubmit: ({ value: i }) => {
       v(i.filters.map((t) => ({ [t.property]: { [t.operator]: [t.value] } })));
     }
-  }), p = Object.keys(o).sort();
-  return /* @__PURE__ */ e("section", { ...g, className: q("flex gap-icon items-center", f), children: /* @__PURE__ */ s(D, { onOpenChange: (i) => {
+  }), u = Object.keys(o).sort();
+  return /* @__PURE__ */ e("section", { ...g, className: N("flex gap-icon items-center", f), children: /* @__PURE__ */ s($, { onOpenChange: (i) => {
     var t;
-    i ? (t = A.current) == null || t.focus() : l.handleSubmit();
+    i ? (t = A.current) == null || t.focus() : a.handleSubmit();
   }, children: [
-    /* @__PURE__ */ e(c, { active: y.length > 0, isDisabled: F.isPending || p.length === 0, type: "button", size: "icon", variant: "neutral", children: /* @__PURE__ */ e(O, {}) }),
-    /* @__PURE__ */ e(E, { className: "w-full p-icon", children: /* @__PURE__ */ e("form", { onSubmit: (i) => {
+    /* @__PURE__ */ e(c, { active: F.length > 0, isDisabled: y.isPending || u.length === 0, type: "button", size: "icon", variant: "neutral", children: /* @__PURE__ */ e(R, {}) }),
+    /* @__PURE__ */ e(I, { className: "w-full p-icon", children: /* @__PURE__ */ e("form", { onSubmit: (i) => {
       i.preventDefault();
-    }, className: "flex flex-col gap-icon max-h-table overflow-auto ", children: /* @__PURE__ */ e(l.Field, { mode: "array", name: "filters", children: (i) => /* @__PURE__ */ s(d, { children: [
-      i.state.value.map((t, r) => /* @__PURE__ */ s("div", { className: "flex gap-icon items-center justify-normal", children: [
-        /* @__PURE__ */ e("span", { className: "text-sm", children: u(t.property, "admin-portal") }),
+    }, className: "flex flex-col gap-icon max-h-table overflow-auto ", children: /* @__PURE__ */ e(a.Field, { mode: "array", name: "filters", children: (i) => /* @__PURE__ */ s(m, { children: [
+      i.state.value.map((t, n) => /* @__PURE__ */ s("div", { className: "flex gap-icon items-center justify-normal", children: [
+        /* @__PURE__ */ e("span", { className: "text-sm", children: p(t.property) }),
         /* @__PURE__ */ e(
-          l.AppField,
+          a.AppField,
           {
-            name: `filters[${r}].operator`,
-            children: (n) => /* @__PURE__ */ e(n.TfSingleSelect, { items: h[t.type].map((a) => ({ id: a, label: /* @__PURE__ */ e(d, { children: P[a] }) })), children: (a) => /* @__PURE__ */ e(w, { id: a.id, children: a.label }) })
+            name: `filters[${n}].operator`,
+            children: (r) => /* @__PURE__ */ e(r.TfSingleSelect, { items: h[t.type].map((l) => ({ id: l, label: /* @__PURE__ */ e(m, { children: _[l] }) })), children: (l) => /* @__PURE__ */ e(w, { id: l.id, children: l.label }) })
           },
           t.id
         ),
-        t.type === "bool" && /* @__PURE__ */ e(l.AppField, { name: `filters[${r}].value`, children: (n) => /* @__PURE__ */ e(n.TfCheckbox, {}) }),
-        t.type === "date" && /* @__PURE__ */ e(l.AppField, { name: `filters[${r}].value`, children: (n) => /* @__PURE__ */ e(n.TfTextField, { type: "date" }) }),
-        t.type === "id" && /* @__PURE__ */ e(l.AppField, { name: `filters[${r}].value`, children: (n) => /* @__PURE__ */ e(n.TfTextField, {}) }),
-        t.type === "string" && /* @__PURE__ */ e(l.AppField, { name: `filters[${r}].value`, children: (n) => /* @__PURE__ */ e(n.TfTextField, {}) }),
-        t.type === "enum" && /* @__PURE__ */ e(l.AppField, { name: `filters[${r}].value`, children: (n) => /* @__PURE__ */ e(n.TfMultiSelect, { options: o[t.property].options }) }),
-        t.type === "id-search" && /* @__PURE__ */ e(l.AppField, { name: `filters[${r}].value`, children: (n) => /* @__PURE__ */ e(n.TfMultiSelect, { options: o[t.property].search }) }),
-        /* @__PURE__ */ e(c, { type: "button", variant: "destructive", size: "icon", onPress: () => i.removeValue(r), children: /* @__PURE__ */ e(R, {}) })
+        t.type === "bool" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfCheckbox, {}) }),
+        t.type === "date" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(D, {}) }),
+        t.type === "id" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfTextField, {}) }),
+        t.type === "string" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfTextField, {}) }),
+        t.type === "enum" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(r.TfMultiSelect, { items: o[t.property].options }) }),
+        t.type === "id-search" && /* @__PURE__ */ e(a.AppField, { name: `filters[${n}].value`, children: (r) => /* @__PURE__ */ e(E, { multiple: !0, accessor: "id", searchFn: o[t.property].search }) }),
+        /* @__PURE__ */ e(c, { type: "button", variant: "destructive", size: "icon", onPress: () => i.removeValue(n), children: /* @__PURE__ */ e(P, {}) })
       ] }, t.id)),
       /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-end gap-2 not-first:mt-icon", children: [
-        /* @__PURE__ */ e(S, { label: "Add Filter", children: p.map((t) => /* @__PURE__ */ e(x, { onAction: () => {
-          const r = o[t].type, n = (T) => {
-            switch (T) {
+        /* @__PURE__ */ e(S, { label: "Add Filter", children: u.map((t) => /* @__PURE__ */ e(x, { onAction: () => {
+          const n = o[t].type, r = (b) => {
+            switch (b) {
               case "bool":
                 return !0;
               case "string":
@@ -98,15 +100,15 @@ function H({ className: f, ...g }) {
               case "enum":
                 return [];
             }
-          }, a = {
+          }, l = {
             id: `${t}-${Date.now()}`,
-            operator: h[r][0],
-            value: n(r),
-            type: r,
+            operator: h[n][0],
+            value: r(n),
+            type: n,
             property: t
           };
-          i.pushValue(a);
-        }, className: "dropdown-item", children: u(t, "admin-portal") }, t)) }),
+          i.pushValue(l);
+        }, className: "dropdown-item", children: p(t) }, t)) }),
         i.state.value.length > 0 ? /* @__PURE__ */ e(
           c,
           {
@@ -123,8 +125,8 @@ function H({ className: f, ...g }) {
   ] }) });
 }
 export {
-  P as COMPARISON_OPERATOR_LABELS,
-  H as DataTableFilter,
-  G as FILTER_COMPARISON_OPERATORS
+  _ as COMPARISON_OPERATOR_LABELS,
+  Y as DataTableFilter,
+  X as FILTER_COMPARISON_OPERATORS
 };
 //# sourceMappingURL=data-table-filter.es.js.map

package/dist/components/data-table/data-table-filter.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-filter.es.js","sources":["../../../lib/components/data-table/data-table-filter.tsx"],"sourcesContent":["import { useDataTable, type OperationKeys } from \"@/components/data-table/data-table\";\nimport { getResourceDisplayName, type ApiFilters } from \"@/components/data-table/table-commons\";\nimport { type MultiSelectProps } from \"@/components/inputs\";\nimport { SelectItem } from \"@/components/inputs/select\";\nimport { Button, Popover, PopoverTrigger, } from \"@/components/ui\";\nimport { EasyMenu, MenuItem } from \"@/components/ui/menu\";\nimport { cn, useAppForm } from \"@/utils\";\nimport { Filter, Trash } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator =\n (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<\n FilterComparisonOperator,\n string\n> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V \| undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', string[]>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype DateLocalFilter = BaseLocalFilter<'date', string>; // ISO date string\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', string[]>;\n\ntype LocalFilter = EnumLocalFilter\n \| IdLocalFilter\n \| BoolLocalFilter\n \| StringLocalFilter\n \| DateLocalFilter\n \| IdSearchLocalFilter;\n\nexport type FilterConfig =\n \| { type: 'enum'; options: MultiSelectProps['options'] }\n \| { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n \| { type: 'id' }\n \| { type: 'bool' }\n \| { type: 'string' }\n \| { type: 'date' }\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n 'bool': ['eq'],\n 'enum': ['in', 'nin'],\n 'id': ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n 'string': ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n 'date': ['lt', 'gt'],\n}\n\nexport type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n const localFilterRefs = useRef([]);\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const DEFAULT_VALUES: { filters: LocalFilter[] } = {\n // TODO, initialize with filters from tableState\n filters: []\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n // TODO, instead of generic transformation, use type based tranform()\n setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))\n }\n })\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={cn(\"flex gap-icon items-center\", className)}>\n <PopoverTrigger onOpenChange={(o) => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}>\n <Button active={filters.length > 0} isDisabled={query.isPending \|\| filterKeys.length === 0} type=\"button\" size={'icon'} variant={'neutral'}><Filter /></Button>\n {/* TODO, icon maps with dynamic imports? /}\n {/ TODO open popover with form for property specific filter /}\n {/ TODO, icons here??? /}\n <Popover className=\"w-full p-icon\">\n {/ const h3Styles = \"body mb-icon text-muted-foreground\"; /}\n {/ <h3 className={h3Styles}>{isFiltersActive ? \"Active filters\" : \"Add filters\"}</h3> */}\n <form onSubmit={(e) => { e.preventDefault(); }} className=\"flex flex-col gap-icon max-h-table overflow-auto \">\n <form.Field mode=\"array\" name={\"filters\"}>\n {\n (field) => {\n return <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"text-sm\">{getResourceDisplayName(lf.property, 'admin-portal')}</span>\n <form.AppField\n key={lf.id}\n name={`filters[${i}].operator`}\n >\n {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))}>{(operator) => <SelectItem id={operator.id}>{operator.label}</SelectItem>}</sf.TfSingleSelect>)}\n </form.AppField>\n\n {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}\n {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField type=\"date\" />)}</form.AppField>}\n {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect options={filterConfig[lf.property].options} />)}</form.AppField>}\n {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect options={filterConfig[lf.property].search} />)}</form.AppField>}\n\n <Button type=\"button\" variant=\"destructive\" size=\"icon\" onPress={() => field.removeValue(i)}><Trash /></Button>\n </div>\n )\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add Filter\">\n {filterKeys.map(k => <MenuItem key={k} onAction={() => {\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n }\n\n const newFilter: LocalFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n\n }} className=\"dropdown-item\">{getResourceDisplayName(k, \"admin-portal\")}</MenuItem>)}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => { field.setValue([]) }}\n >\n Reset filters\n </Button>\n ) : null}\n </div>\n </>\n }\n }\n </form.Field >\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n};"],"names":["FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","DataTableFilter","className","props","filters","query","setFilters","filterConfig","useDataTable","useRef","addFilterButtonRef","form","useAppForm","value","lf","filterKeys","jsx","cn","jsxs","PopoverTrigger","o","_a","Button","Filter","Popover","e","field","Fragment","i","sf","op","operator","SelectItem","Trash","EasyMenu","k","MenuItem","type","defaultValue","t","newFilter","getResourceDisplayName"],"mappings":"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"}
1	+ {"version":3,"file":"data-table-filter.es.js","sources":["../../../lib/components/data-table/data-table-filter.tsx"],"sourcesContent":["import { useDataTable, type OperationKeys } from \"@/components/data-table/data-table\";\nimport { type ApiFilters } from \"@/components/data-table/table-commons\";\nimport { TfDatePicker, TfIdSearchInput, type MultiSelectProps } from \"@/components/inputs\";\nimport { SelectItem } from \"@/components/inputs/select\";\nimport { Button, Popover, PopoverTrigger, } from \"@/components/ui\";\nimport { EasyMenu, MenuItem } from \"@/components/ui/menu\";\nimport { cn, useAppForm } from \"@/utils\";\nimport { useResourceFormatter } from \"@/utils/resource-names\";\nimport type { CalendarDateTime } from \"@internationalized/date\";\nimport { Filter, Trash } from \"lucide-react\";\nimport { useRef } from \"react\";\n\nexport const FILTER_COMPARISON_OPERATORS = [\n 'eq',\n 'ne',\n 'cn',\n 'nc',\n 'sw',\n 'ew',\n 'in',\n 'nin',\n 'gt',\n 'gte',\n 'lt',\n 'lte',\n] as const;\nexport type FilterComparisonOperator =\n (typeof FILTER_COMPARISON_OPERATORS)[number];\n\nexport const COMPARISON_OPERATOR_LABELS: Record<\n FilterComparisonOperator,\n string\n> = {\n eq: 'equal to',\n ne: 'not equal to',\n cn: 'contains',\n nc: 'does not contain',\n sw: 'starts with',\n ew: 'ends with',\n in: 'includes',\n nin: 'does not include',\n gt: 'greater than',\n gte: 'greater than or equal to',\n lt: 'less than',\n lte: 'less than or equal to',\n};\n\ntype BaseLocalFilter<T extends FilterType, V> = {\n id: string;\n type: T;\n property: string;\n operator: FilterComparisonOperator;\n value: V \| undefined;\n displayValue?: string;\n};\ntype EnumLocalFilter = BaseLocalFilter<'enum', Set<string \| number>>;\ntype IdLocalFilter = BaseLocalFilter<'id', string>;\ntype BoolLocalFilter = BaseLocalFilter<'bool', boolean>;\ntype StringLocalFilter = BaseLocalFilter<'string', string>;\ntype DateLocalFilter = BaseLocalFilter<'date', CalendarDateTime>;\ntype IdSearchLocalFilter = BaseLocalFilter<'id-search', Set<string \| number>>;\n\ntype LocalFilter = EnumLocalFilter\n \| IdLocalFilter\n \| BoolLocalFilter\n \| StringLocalFilter\n \| DateLocalFilter\n \| IdSearchLocalFilter;\n\nexport type FilterConfig =\n \| { type: 'enum'; options: MultiSelectProps['items'] }\n \| { type: 'id-search'; search: () => Promise<{ id: string; name: string }[]> }\n \| { type: 'id' }\n \| { type: 'bool' }\n \| { type: 'string' }\n \| { type: 'date' }\n\nexport type FilterType = FilterConfig['type'];\n\nconst FilterOperations: Record<FilterType, FilterComparisonOperator[]> = {\n 'bool': ['eq'],\n 'enum': ['in', 'nin'],\n 'id': ['in', 'nin'],\n 'id-search': ['in', 'nin'],\n 'string': ['eq', 'ne', 'cn', 'nc', 'sw', 'ew', 'in', 'nin'],\n 'date': ['lt', 'gt'],\n}\n\nexport type FiltersConfig<TOperation extends OperationKeys> = Required<Record<keyof ApiFilters<TOperation>, FilterConfig>>\n\nexport function DataTableFilter({ className, ...props }: React.ComponentProps<'section'>) {\n const { filters, query, setFilters, filterConfig } = useDataTable();\n const localFilterRefs = useRef([]);\n const addFilterButtonRef = useRef<HTMLButtonElement>(null);\n\n const resourceFormatter = useResourceFormatter();\n\n const DEFAULT_VALUES: { filters: LocalFilter[] } = {\n // TODO, initialize with filters from tableState\n filters: []\n };\n const form = useAppForm({\n defaultValues: DEFAULT_VALUES,\n onSubmit: ({ value }) => {\n // TODO, instead of generic transformation, use type based tranform()\n setFilters(value.filters.map(lf => { return { [lf.property]: { [lf.operator]: [lf.value] } } }))\n }\n })\n\n // More reason to hate TS https://github.com/Microsoft/TypeScript/issues/12870\n const filterKeys = Object.keys(filterConfig).sort();\n\n return (\n <section {...props} className={cn(\"flex gap-icon items-center\", className)}>\n <PopoverTrigger onOpenChange={(o) => {\n // Set filters when the popover closes\n if (!o) {\n form.handleSubmit();\n } else {\n addFilterButtonRef.current?.focus();\n }\n }}>\n <Button active={filters.length > 0} isDisabled={query.isPending \|\| filterKeys.length === 0} type=\"button\" size={'icon'} variant={'neutral'}><Filter /></Button>\n {/* TODO, icon maps with dynamic imports? /}\n {/ TODO open popover with form for property specific filter /}\n {/ TODO, icons here??? /}\n <Popover className=\"w-full p-icon\">\n {/ const h3Styles = \"body mb-icon text-muted-foreground\"; /}\n {/ <h3 className={h3Styles}>{isFiltersActive ? \"Active filters\" : \"Add filters\"}</h3> */}\n <form onSubmit={(e) => { e.preventDefault(); }} className=\"flex flex-col gap-icon max-h-table overflow-auto \">\n <form.Field mode=\"array\" name={\"filters\"}>\n {\n (field) => {\n return <>\n {field.state.value.map((lf, i) => {\n return (\n <div key={lf.id} className=\"flex gap-icon items-center justify-normal\">\n <span className=\"text-sm\">{resourceFormatter(lf.property)}</span>\n <form.AppField\n key={lf.id}\n name={`filters[${i}].operator`}\n >\n {(sf) => (<sf.TfSingleSelect items={FilterOperations[lf.type].map(op => ({ id: op, label: <>{COMPARISON_OPERATOR_LABELS[op]}</> }))}>{(operator) => <SelectItem id={operator.id}>{operator.label}</SelectItem>}</sf.TfSingleSelect>)}\n </form.AppField>\n\n {lf.type === 'bool' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfCheckbox />)}</form.AppField>}\n {lf.type === 'date' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfDatePicker />)}</form.AppField>}\n {lf.type === 'id' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'string' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfTextField />)}</form.AppField>}\n {lf.type === 'enum' && <form.AppField name={`filters[${i}].value`}>{(sf) => (<sf.TfMultiSelect items={filterConfig[lf.property].options} />)}</form.AppField>}\n {lf.type === 'id-search' && <form.AppField name={`filters[${i}].value`}>{(_) => (<TfIdSearchInput multiple accessor=\"id\" searchFn={filterConfig[lf.property].search} />)}</form.AppField>}\n\n <Button type=\"button\" variant=\"destructive\" size=\"icon\" onPress={() => field.removeValue(i)}><Trash /></Button>\n </div>\n )\n })}\n <div className=\"flex w-full items-center justify-end gap-2 not-first:mt-icon\">\n <EasyMenu label=\"Add Filter\">\n {filterKeys.map(k => <MenuItem key={k} onAction={() => {\n const type = filterConfig[k].type as FilterType;\n\n const defaultValue = (t: FilterType) => {\n // TODO, ensure exhaustive???\n switch (t) {\n case 'bool':\n return true;\n case 'string':\n return '';\n case 'date':\n return new Date().toISOString();\n case 'id':\n return '';\n case 'id-search':\n return [] as string[];\n case 'enum':\n return [] as string[];\n }\n }\n\n const newFilter: LocalFilter = {\n id: `${k}-${Date.now()}`,\n operator: FilterOperations[type][0],\n value: defaultValue(type),\n type: type,\n property: k,\n };\n\n field.pushValue(newFilter);\n // TODO Focus to ref\n\n }} className=\"dropdown-item\">{resourceFormatter(k)}</MenuItem>)}\n </EasyMenu>\n {field.state.value.length > 0 ? (\n <Button\n type=\"button\"\n variant=\"neutral\"\n onPress={() => { field.setValue([]) }}\n >\n Reset filters\n </Button>\n ) : null}\n </div>\n </>\n }\n }\n </form.Field >\n </form>\n </Popover>\n </PopoverTrigger>\n </section>\n );\n};"],"names":["FILTER_COMPARISON_OPERATORS","COMPARISON_OPERATOR_LABELS","FilterOperations","DataTableFilter","className","props","filters","query","setFilters","filterConfig","useDataTable","useRef","addFilterButtonRef","resourceFormatter","useResourceFormatter","form","useAppForm","value","lf","filterKeys","jsx","cn","jsxs","PopoverTrigger","o","_a","Button","Filter","Popover","e","field","Fragment","i","sf","op","operator","SelectItem","_","TfDatePicker","TfIdSearchInput","Trash","EasyMenu","k","MenuItem","type","defaultValue","t","newFilter"],"mappings":"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"}