@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTableFilterButton/index.native.js

@@ -0,0 +1,374 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretLeftIcon, CaretRightIcon, FunnelIcon } from "@phosphor-icons/react";
+import { useDirection } from "@multiplatform.one/components";
+import { Button, FloatingPanel, SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { isWeb, Text, View, XStack, YStack } from "tamagui";
+import { t } from "../../shared/t.native.js";
+import { defaultOperatorForFilterType, isFilterValueShape, operatorNeedsNoValue } from "../../utils/filterFields.native.js";
+import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor/index.native.js";
+function FieldRow(param) {
+  var {
+    field,
+    highlighted,
+    onSelect
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */_jsx(View, {
+    role: "option",
+    "aria-selected": highlighted,
+    tabIndex: 0,
+    cursor: "pointer",
+    paddingHorizontal: "$2.5",
+    paddingVertical: "$2",
+    ...knobProps.borderRadius,
+    backgroundColor: highlighted ? "$color4" : "transparent",
+    hoverStyle: {
+      backgroundColor: "$color4"
+    },
+    pressStyle: {
+      backgroundColor: "$color5"
+    },
+    focusVisibleStyle: {
+      outlineColor: "$outlineColor",
+      outlineWidth: 2,
+      outlineStyle: "solid"
+    },
+    onPress: function onPress() {
+      return onSelect(field);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onSelect(field);
+      }
+    },
+    children: /* @__PURE__ */_jsx(Text, {
+      fontSize: "$3",
+      color: "$color12",
+      numberOfLines: 1,
+      children: field.label
+    })
+  });
+}
+function GroupHeader(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */_jsx(Text, {
+    fontSize: "$1",
+    fontWeight: "600",
+    color: "$color10",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    paddingHorizontal: "$2.5",
+    paddingTop: "$2",
+    paddingBottom: "$1",
+    children
+  });
+}
+function DataTableFilterButton() {
+  var _ref, _ref1, _ref2, _ref3;
+  var _ctx_computed, _ctx_filterUi, _ctx_state_filters, _ctx_state_columnFilters;
+  var ctx = useDataTableState();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var viewportGtSm = useViewportGtSm();
+  var BackCaretIcon = useDirection() === "rtl" ? CaretRightIcon : CaretLeftIcon;
+  var [open, setOpen] = useState(false);
+  var [search, setSearch] = useState("");
+  var [highlightedIndex, setHighlightedIndex] = useState(0);
+  var [activeField, setActiveField] = useState(null);
+  var [operator, setOperator] = useState("contains");
+  var [value, setValue] = useState("");
+  var [columnTarget, setColumnTarget] = useState(null);
+  var advancedIdRef = useRef(null);
+  var [editingExisting, setEditingExisting] = useState(false);
+  var fields = (_ref = ctx === null || ctx === void 0 ? void 0 : (_ctx_computed = ctx.computed) === null || _ctx_computed === void 0 ? void 0 : _ctx_computed.filterFields) !== null && _ref !== void 0 ? _ref : [];
+  var table = ctx === null || ctx === void 0 ? void 0 : ctx.table;
+  var visibleColumnIds = useMemo(function () {
+    if (!table) return /* @__PURE__ */new Set();
+    return new Set(table.getVisibleLeafColumns().map(function (c) {
+      return c.id;
+    }));
+  }, [table, open]);
+  var query = search.trim().toLowerCase();
+  var matching = useMemo(function () {
+    return query ? fields.filter(function (f) {
+      return f.label.toLowerCase().includes(query) || f.id.toLowerCase().includes(query);
+    }) : fields;
+  }, [fields, query]);
+  var columnFields = useMemo(function () {
+    return matching.filter(function (f) {
+      return visibleColumnIds.has(f.id);
+    });
+  }, [matching, visibleColumnIds]);
+  var moreFields = useMemo(function () {
+    return matching.filter(function (f) {
+      return !visibleColumnIds.has(f.id);
+    });
+  }, [matching, visibleColumnIds]);
+  var flatList = useMemo(function () {
+    return [...columnFields, ...moreFields];
+  }, [columnFields, moreFields]);
+  var resetEditor = useCallback(function () {
+    setActiveField(null);
+    setColumnTarget(null);
+    setEditingExisting(false);
+    advancedIdRef.current = null;
+    setSearch("");
+    setHighlightedIndex(0);
+  }, []);
+  var commit = useCallback(function (field, op, val) {
+    if (!ctx) return;
+    var noValue = operatorNeedsNoValue(op);
+    var filterValue = {
+      operator: op,
+      value: noValue ? null : val
+    };
+    if (columnTarget) {
+      var _table_getColumn;
+      table === null || table === void 0 ? void 0 : (_table_getColumn = table.getColumn(columnTarget)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.setFilterValue(filterValue);
+      return;
+    }
+    var meaningful = noValue || val !== "";
+    if (advancedIdRef.current) {
+      var _ctx_actions_updateFilter, _ctx_actions;
+      (_ctx_actions_updateFilter = (_ctx_actions = ctx.actions).updateFilter) === null || _ctx_actions_updateFilter === void 0 ? void 0 : _ctx_actions_updateFilter.call(_ctx_actions, advancedIdRef.current, {
+        columnId: field.id,
+        value: filterValue,
+        label: field.label
+      });
+    } else if (meaningful) {
+      var _ctx_actions_addFilter;
+      advancedIdRef.current = (_ctx_actions_addFilter = ctx.actions.addFilter({
+        columnId: field.id,
+        value: filterValue,
+        label: field.label
+      })) !== null && _ctx_actions_addFilter !== void 0 ? _ctx_actions_addFilter : null;
+    }
+  }, [ctx, columnTarget, table]);
+  var handleSelectField = useCallback(function (field) {
+    setActiveField(field);
+    setOperator(defaultOperatorForFilterType(field.type));
+    setValue("");
+    setEditingExisting(false);
+    advancedIdRef.current = null;
+    setColumnTarget(null);
+  }, []);
+  var handleOperatorChange = useCallback(function (op) {
+    setOperator(op);
+    if (activeField) commit(activeField, op, value);
+  }, [activeField, commit, value]);
+  var handleValueChange = useCallback(function (val) {
+    setValue(val);
+    if (activeField) commit(activeField, operator, val);
+  }, [activeField, commit, operator]);
+  var handleOpenChange = useCallback(function (next) {
+    setOpen(next);
+    if (next) return;
+    var id = advancedIdRef.current;
+    if (id && !operatorNeedsNoValue(operator) && value === "") {
+      ctx === null || ctx === void 0 ? void 0 : ctx.actions.removeFilter(id);
+    }
+    resetEditor();
+  }, [ctx, operator, value, resetEditor]);
+  var handleRemoveCurrent = useCallback(function () {
+    if (columnTarget) {
+      var _table_getColumn;
+      table === null || table === void 0 ? void 0 : (_table_getColumn = table.getColumn(columnTarget)) === null || _table_getColumn === void 0 ? void 0 : _table_getColumn.setFilterValue(void 0);
+    } else if (advancedIdRef.current) {
+      ctx === null || ctx === void 0 ? void 0 : ctx.actions.removeFilter(advancedIdRef.current);
+    }
+    advancedIdRef.current = null;
+    resetEditor();
+  }, [ctx, columnTarget, table, resetEditor]);
+  var editTarget = (_ref1 = ctx === null || ctx === void 0 ? void 0 : (_ctx_filterUi = ctx.filterUi) === null || _ctx_filterUi === void 0 ? void 0 : _ctx_filterUi.editTarget) !== null && _ref1 !== void 0 ? _ref1 : null;
+  useEffect(function () {
+    var _ctx_filterUi2;
+    if (!editTarget || !ctx) return;
+    (_ctx_filterUi2 = ctx.filterUi) === null || _ctx_filterUi2 === void 0 ? void 0 : _ctx_filterUi2.requestEdit(null);
+    var openWith = function openWith2(field2, filterValue, target) {
+      var _filterValue_value;
+      setActiveField(field2);
+      setOperator(filterValue.operator);
+      setValue(String((_filterValue_value = filterValue.value) !== null && _filterValue_value !== void 0 ? _filterValue_value : ""));
+      setEditingExisting(true);
+      setColumnTarget(target.kind === "column" ? target.columnId : null);
+      advancedIdRef.current = target.kind === "advanced" ? target.filterId : null;
+      setOpen(true);
+    };
+    if (editTarget.kind === "advanced") {
+      var filter = ctx.state.filters.find(function (f) {
+        return f.id === editTarget.filterId;
+      });
+      var field = filter && fields.find(function (f) {
+        return f.id === filter.columnId;
+      });
+      if (filter && field) openWith(field, filter.value, editTarget);
+    } else if (editTarget.kind === "column") {
+      var columnFilter = ctx.state.columnFilters.find(function (cf) {
+        return cf.id === editTarget.columnId;
+      });
+      var field1 = fields.find(function (f) {
+        return f.id === editTarget.columnId;
+      });
+      if (field1 && columnFilter && isFilterValueShape(columnFilter.value)) {
+        openWith(field1, columnFilter.value, editTarget);
+      }
+    } else {
+      resetEditor();
+      setOpen(true);
+    }
+  }, [editTarget, ctx, fields, resetEditor]);
+  var handleListKeyDown = useCallback(function (e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex(function (i) {
+        return Math.min(i + 1, flatList.length - 1);
+      });
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex(function (i) {
+        return Math.max(i - 1, 0);
+      });
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      var field = flatList[highlightedIndex];
+      if (field) handleSelectField(field);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      handleOpenChange(false);
+    }
+  }, [flatList, highlightedIndex, handleSelectField, handleOpenChange]);
+  if (!ctx || fields.length === 0) return null;
+  var activeChipCount = ((_ref2 = (_ctx_state_filters = ctx.state.filters) === null || _ctx_state_filters === void 0 ? void 0 : _ctx_state_filters.length) !== null && _ref2 !== void 0 ? _ref2 : 0) + ((_ref3 = (_ctx_state_columnFilters = ctx.state.columnFilters) === null || _ctx_state_columnFilters === void 0 ? void 0 : _ctx_state_columnFilters.filter(function (cf) {
+    return isFilterValueShape(cf.value);
+  }).length) !== null && _ref3 !== void 0 ? _ref3 : 0);
+  var sheetMode = !isWeb || !viewportGtSm;
+  var trigger = /* @__PURE__ */_jsx(Button, {
+    size: "$3",
+    variant: "outlined",
+    "aria-label": t("Filter"),
+    icon: /* @__PURE__ */_jsx(FunnelIcon, {
+      size: 14,
+      weight: activeChipCount > 0 ? "fill" : "regular"
+    }),
+    ...(sheetMode ? {
+      onPress: function onPress() {
+        return handleOpenChange(!open);
+      }
+    } : {}),
+    children: activeChipCount > 0 ? `${t("Filter")} (${activeChipCount})` : t("Filter")
+  });
+  return /* @__PURE__ */_jsx(FloatingPanel, {
+    open,
+    onOpenChange: handleOpenChange,
+    trigger,
+    fitContent: true,
+    scrollable: false,
+    children: /* @__PURE__ */_jsx(YStack, {
+      minWidth: 280,
+      maxWidth: 360,
+      ...knobProps.gap,
+      children: activeField ?
+      // Stage 2 — operator/value editor (live commit, no Apply)
+      /* @__PURE__ */
+      _jsxs(YStack, {
+        ...knobProps.gap,
+        children: [/* @__PURE__ */_jsxs(XStack, {
+          alignItems: "center",
+          gap: "$2",
+          children: [/* @__PURE__ */_jsx(Button, {
+            size: "$2",
+            chromeless: true,
+            "aria-label": t("Back to field list"),
+            onPress: function onPress() {
+              resetEditor();
+            },
+            icon: /* @__PURE__ */_jsx(BackCaretIcon, {
+              size: 14
+            })
+          }), /* @__PURE__ */_jsx(Text, {
+            fontSize: knobProps.sizeToken,
+            fontWeight: "600",
+            color: "$color11",
+            flex: 1,
+            children: t("Filter: {{column}}", {
+              column: activeField.label
+            })
+          })]
+        }), /* @__PURE__ */_jsx(FilterOperatorValueEditor, {
+          fieldType: activeField.type,
+          operator,
+          value,
+          onOperatorChange: handleOperatorChange,
+          onValueChange: handleValueChange,
+          options: activeField.options
+        }), editingExisting && /* @__PURE__ */_jsx(XStack, {
+          justifyContent: "flex-end",
+          children: /* @__PURE__ */_jsx(Button, {
+            size: "$2",
+            variant: "outlined",
+            onPress: handleRemoveCurrent,
+            children: t("Remove filter")
+          })
+        })]
+      }) :
+      // Stage 1 — searchable field list, visible columns first
+      /* @__PURE__ */
+      _jsxs(YStack, {
+        ...knobProps.gap,
+        onKeyDown: handleListKeyDown,
+        children: [/* @__PURE__ */_jsx(SearchInput, {
+          value: search,
+          onChange: function onChange(text) {
+            setSearch(text);
+            setHighlightedIndex(0);
+          },
+          debounceMs: 0,
+          placeholder: t("Search fields..."),
+          size: "$3",
+          compact: true,
+          "aria-label": t("Search fields")
+        }), /* @__PURE__ */_jsxs(YStack, {
+          role: "list",
+          "aria-label": t("Filterable fields"),
+          maxHeight: 320,
+          overflow: "scroll",
+          children: [columnFields.length > 0 && /* @__PURE__ */_jsx(GroupHeader, {
+            children: t("Columns")
+          }), columnFields.map(function (field) {
+            var _flatList_highlightedIndex;
+            return /* @__PURE__ */_jsx(FieldRow, {
+              field,
+              highlighted: ((_flatList_highlightedIndex = flatList[highlightedIndex]) === null || _flatList_highlightedIndex === void 0 ? void 0 : _flatList_highlightedIndex.id) === field.id,
+              onSelect: handleSelectField
+            }, field.id);
+          }), moreFields.length > 0 && /* @__PURE__ */_jsx(GroupHeader, {
+            children: t("More fields")
+          }), moreFields.map(function (field) {
+            var _flatList_highlightedIndex;
+            return /* @__PURE__ */_jsx(FieldRow, {
+              field,
+              highlighted: ((_flatList_highlightedIndex = flatList[highlightedIndex]) === null || _flatList_highlightedIndex === void 0 ? void 0 : _flatList_highlightedIndex.id) === field.id,
+              onSelect: handleSelectField
+            }, field.id);
+          }), flatList.length === 0 && /* @__PURE__ */_jsx(Text, {
+            fontSize: "$2",
+            color: "$color10",
+            padding: "$2.5",
+            children: t("No fields match")
+          })]
+        })]
+      })
+    })
+  });
+}
+export { DataTableFilterButton };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/components/DataTableFilterButton/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","CaretLeftIcon","CaretRightIcon","FunnelIcon","useDirection","Button","FloatingPanel","SearchInput","useViewportGtSm","useResolvedKnobs","useCallback","useEffect","useMemo","useRef","useState","isWeb","Text","View","XStack","YStack","t","defaultOperatorForFilterType","isFilterValueShape","operatorNeedsNoValue","useDataTableState","FilterOperatorValueEditor","FieldRow","param","field","highlighted","onSelect","knobProps","role","tabIndex","cursor","paddingHorizontal","paddingVertical","borderRadius","backgroundColor","hoverStyle","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","onPress","onKeyDown","e","key","preventDefault","children","fontSize","color","numberOfLines","label","GroupHeader","fontWeight","textTransform","letterSpacing","paddingTop","paddingBottom","DataTableFilterButton","_ref","_ref1","_ref2","_ref3","_ctx_computed","_ctx_filterUi","_ctx_state_filters","_ctx_state_columnFilters","ctx","viewportGtSm","BackCaretIcon","open","setOpen","search","setSearch","highlightedIndex","setHighlightedIndex","activeField","setActiveField","operator","setOperator","value","setValue","columnTarget","setColumnTarget","advancedIdRef","editingExisting","setEditingExisting","fields","computed","filterFields","table","visibleColumnIds","Set","getVisibleLeafColumns","map","c","id","query","trim","toLowerCase","matching","filter","f","includes","columnFields","has","moreFields","flatList","resetEditor","current","commit","op","val","noValue","filterValue","_table_getColumn","getColumn","setFilterValue","meaningful","_ctx_actions_updateFilter","_ctx_actions","actions","updateFilter","call","columnId","_ctx_actions_addFilter","addFilter","handleSelectField","type","handleOperatorChange","handleValueChange","handleOpenChange","next","removeFilter","handleRemoveCurrent","editTarget","filterUi","_ctx_filterUi2","requestEdit","openWith","openWith2","field2","target","_filterValue_value","String","kind","filterId","state","filters","find","columnFilter","columnFilters","cf","field1","handleListKeyDown","i","Math","min","length","max","activeChipCount","sheetMode","trigger","size","variant","icon","weight","onOpenChange","fitContent","scrollable","minWidth","maxWidth","gap","alignItems","chromeless"],"sources":["../../../../src/components/DataTableFilterButton/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTableFilterChips/index.mjs

@@ -0,0 +1,95 @@
+import { Button } from "@multiplatform.one/forms";
+import { Chip } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useMemo } from "react";
+import { View, XStack } from "tamagui";
+import { t } from "../../shared/t.mjs";
+import { getFilterChipLabel, isFilterValueShape } from "../../utils/filterFields.mjs";
+import { useDataTableState } from "../DataTable/DataTableStateContext.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTableFilterChips() {
+  const ctx = useDataTableState();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const fields = ctx?.computed?.filterFields ?? [];
+  const fieldFor = useCallback(id => fields.find(f => f.id === id), [fields]);
+  const chips = useMemo(() => {
+    if (!ctx) return [];
+    const items = [];
+    for (const filter of ctx.state.filters ?? []) {
+      const field = fieldFor(filter.columnId);
+      const label = getFilterChipLabel(field?.label ?? filter.label ?? filter.columnId, filter.value, field?.options);
+      items.push({
+        key: `advanced-${filter.id}`,
+        label,
+        target: {
+          kind: "advanced",
+          filterId: filter.id
+        },
+        onRemove: () => ctx.actions.removeFilter(filter.id)
+      });
+    }
+    for (const columnFilter of ctx.state.columnFilters ?? []) {
+      if (!isFilterValueShape(columnFilter.value)) continue;
+      const field = fieldFor(columnFilter.id);
+      const label = getFilterChipLabel(field?.label ?? columnFilter.id, columnFilter.value, field?.options);
+      items.push({
+        key: `column-${columnFilter.id}`,
+        label,
+        target: {
+          kind: "column",
+          columnId: columnFilter.id
+        },
+        onRemove: () => ctx.table.getColumn(columnFilter.id)?.setFilterValue(void 0)
+      });
+    }
+    return items;
+  }, [ctx, ctx?.state.filters, ctx?.state.columnFilters, fieldFor]);
+  const handleClearAll = useCallback(() => {
+    if (!ctx) return;
+    ctx.actions.setFilters([]);
+    ctx.table.setColumnFilters(prev => prev.filter(cf => !isFilterValueShape(cf.value)));
+  }, [ctx]);
+  if (!ctx || chips.length === 0) return null;
+  return /* @__PURE__ */jsxs(XStack, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "$2",
+    paddingVertical: "$1.5",
+    "aria-label": t("Active filters"),
+    children: [chips.map(chip => /* @__PURE__ */jsx(View, {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": t("Edit filter {{label}}", {
+        label: chip.label
+      }),
+      cursor: "pointer",
+      ...knobProps.borderRadius,
+      focusVisibleStyle: {
+        outlineColor: "$outlineColor",
+        outlineWidth: 2,
+        outlineStyle: "solid"
+      },
+      onPress: () => ctx.filterUi?.requestEdit(chip.target),
+      onKeyDown: e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          ctx.filterUi?.requestEdit(chip.target);
+        }
+      },
+      children: /* @__PURE__ */jsx(Chip, {
+        color: "blue",
+        onDismiss: chip.onRemove,
+        children: chip.label
+      })
+    }, chip.key)), chips.length >= 2 && /* @__PURE__ */jsx(Button, {
+      size: "$2",
+      chromeless: true,
+      onPress: handleClearAll,
+      children: t("Clear all")
+    })]
+  });
+}
+export { DataTableFilterChips };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/DataTableFilterChips/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Chip","useResolvedKnobs","useCallback","useMemo","View","XStack","t","getFilterChipLabel","isFilterValueShape","useDataTableState","jsx","jsxs","DataTableFilterChips","ctx","knobProps","fields","computed","filterFields","fieldFor","id","find","f","chips","items","filter","state","filters","field","columnId","label","value","options","push","key","target","kind","filterId","onRemove","actions","removeFilter","columnFilter","columnFilters","table","getColumn","setFilterValue","handleClearAll","setFilters","setColumnFilters","prev","cf","length","flexWrap","alignItems","gap","paddingVertical","children","map","chip","role","tabIndex","cursor","borderRadius","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","onPress","filterUi","requestEdit","onKeyDown","e","preventDefault","color","onDismiss","size","chromeless"],"sources":["../../../../src/components/DataTableFilterChips/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/DataTableFilterChips/index.native.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@multiplatform.one/forms";
+import { Chip } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useCallback, useMemo } from "react";
+import { View, XStack } from "tamagui";
+import { t } from "../../shared/t.native.js";
+import { getFilterChipLabel, isFilterValueShape } from "../../utils/filterFields.native.js";
+import { useDataTableState } from "../DataTable/DataTableStateContext.native.js";
+function DataTableFilterChips() {
+  var _ref;
+  var _ctx_computed;
+  var ctx = useDataTableState();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var fields = (_ref = ctx === null || ctx === void 0 ? void 0 : (_ctx_computed = ctx.computed) === null || _ctx_computed === void 0 ? void 0 : _ctx_computed.filterFields) !== null && _ref !== void 0 ? _ref : [];
+  var fieldFor = useCallback(function (id) {
+    return fields.find(function (f) {
+      return f.id === id;
+    });
+  }, [fields]);
+  var chips = useMemo(function () {
+    var _ctx_state_filters, _ctx_state_columnFilters;
+    if (!ctx) return [];
+    var items = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      var _loop = function () {
+        var filter = _step.value;
+        var _ref2, _ref1;
+        var field = fieldFor(filter.columnId);
+        var label = getFilterChipLabel((_ref2 = (_ref1 = field === null || field === void 0 ? void 0 : field.label) !== null && _ref1 !== void 0 ? _ref1 : filter.label) !== null && _ref2 !== void 0 ? _ref2 : filter.columnId, filter.value, field === null || field === void 0 ? void 0 : field.options);
+        items.push({
+          key: `advanced-${filter.id}`,
+          label,
+          target: {
+            kind: "advanced",
+            filterId: filter.id
+          },
+          onRemove: function onRemove() {
+            return ctx.actions.removeFilter(filter.id);
+          }
+        });
+      };
+      for (var _iterator = ((_ctx_state_filters = ctx.state.filters) !== null && _ctx_state_filters !== void 0 ? _ctx_state_filters : [])[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    var _iteratorNormalCompletion1 = true,
+      _didIteratorError1 = false,
+      _iteratorError1 = void 0;
+    try {
+      var _loop1 = function () {
+        var columnFilter = _step1.value;
+        var _ref2;
+        if (!isFilterValueShape(columnFilter.value)) return "continue";
+        var field = fieldFor(columnFilter.id);
+        var label = getFilterChipLabel((_ref2 = field === null || field === void 0 ? void 0 : field.label) !== null && _ref2 !== void 0 ? _ref2 : columnFilter.id, columnFilter.value, field === null || field === void 0 ? void 0 : field.options);
+        items.push({
+          key: `column-${columnFilter.id}`,
+          label,
+          target: {
+            kind: "column",
+            columnId: columnFilter.id
+          },
+          onRemove: function onRemove() {
+            var _ctx_table_getColumn;
+            return (_ctx_table_getColumn = ctx.table.getColumn(columnFilter.id)) === null || _ctx_table_getColumn === void 0 ? void 0 : _ctx_table_getColumn.setFilterValue(void 0);
+          }
+        });
+      };
+      for (var _iterator1 = ((_ctx_state_columnFilters = ctx.state.columnFilters) !== null && _ctx_state_columnFilters !== void 0 ? _ctx_state_columnFilters : [])[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) _loop1();
+    } catch (err) {
+      _didIteratorError1 = true;
+      _iteratorError1 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+          _iterator1.return();
+        }
+      } finally {
+        if (_didIteratorError1) {
+          throw _iteratorError1;
+        }
+      }
+    }
+    return items;
+  }, [ctx, ctx === null || ctx === void 0 ? void 0 : ctx.state.filters, ctx === null || ctx === void 0 ? void 0 : ctx.state.columnFilters, fieldFor]);
+  var handleClearAll = useCallback(function () {
+    if (!ctx) return;
+    ctx.actions.setFilters([]);
+    ctx.table.setColumnFilters(function (prev) {
+      return prev.filter(function (cf) {
+        return !isFilterValueShape(cf.value);
+      });
+    });
+  }, [ctx]);
+  if (!ctx || chips.length === 0) return null;
+  return /* @__PURE__ */_jsxs(XStack, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "$2",
+    paddingVertical: "$1.5",
+    "aria-label": t("Active filters"),
+    children: [chips.map(function (chip) {
+      return /* @__PURE__ */_jsx(View, {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": t("Edit filter {{label}}", {
+          label: chip.label
+        }),
+        cursor: "pointer",
+        ...knobProps.borderRadius,
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid"
+        },
+        onPress: function onPress() {
+          var _ctx_filterUi;
+          return (_ctx_filterUi = ctx.filterUi) === null || _ctx_filterUi === void 0 ? void 0 : _ctx_filterUi.requestEdit(chip.target);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === "Enter" || e.key === " ") {
+            var _ctx_filterUi;
+            e.preventDefault();
+            (_ctx_filterUi = ctx.filterUi) === null || _ctx_filterUi === void 0 ? void 0 : _ctx_filterUi.requestEdit(chip.target);
+          }
+        },
+        children: /* @__PURE__ */_jsx(Chip, {
+          color: "blue",
+          onDismiss: chip.onRemove,
+          children: chip.label
+        })
+      }, chip.key);
+    }), chips.length >= 2 && /* @__PURE__ */_jsx(Button, {
+      size: "$2",
+      chromeless: true,
+      onPress: handleClearAll,
+      children: t("Clear all")
+    })]
+  });
+}
+export { DataTableFilterChips };
+//# sourceMappingURL=index.native.js.map