@open-mercato/ui 0.6.1-develop.3260.1.dc719cac84 → 0.6.1-develop.3278.1.a4d26475e4

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
 Generated lucide registry with 134 icons -> /home/runner/work/open-mercato/open-mercato/packages/ui/src/backend/icons/lucideRegistry.generated.tsx
-[build:ui] found 329 entry points
+[build:ui] found 338 entry points
 [build:ui] built successfully

package/dist/backend/DataTable.js

@@ -21,6 +21,7 @@ import { EmptyState } from "../primitives/empty-state.js";
 import { TooltipProvider } from "../primitives/tooltip.js";
 import { TruncatedCell } from "./TruncatedCell.js";
 import { FilterBar } from "./FilterBar.js";
+import { FilteredEmptyResults } from "./filters/FilteredEmptyResults.js";
 import { useCustomFieldFilterDefs } from "./utils/customFieldFilters.js";
 import { fetchCustomFieldDefinitionsPayload } from "./utils/customFieldDefs.js";
 import { RowActions } from "./RowActions.js";
@@ -41,7 +42,15 @@ import { useConfirmDialog } from "./confirm-dialog/index.js";
 import { ComponentReplacementHandles } from "@open-mercato/shared/modules/widgets/component-registry";
 import { insertByInjectionPlacement } from "@open-mercato/shared/modules/widgets/injection-position";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { createEmptyCondition, getDefaultOperator } from "@open-mercato/shared/lib/query/advanced-filter";
+import { getDefaultOperator, isAdvancedFilterState, flatToTree } from "@open-mercato/shared/lib/query/advanced-filter";
+import {
+  createEmptyTree,
+  serializeTreeForPersist,
+  deserializeTreeFromPersist,
+  isPersistedFilterTree,
+  treeToFlat
+} from "@open-mercato/shared/lib/query/advanced-filter-tree";
+import { treeReducer } from "./filters/treeReducer.js";
 import { AdvancedFilterBuilder } from "./filters/AdvancedFilterBuilder.js";
 import { useAutoDiscoveredFields } from "./utils/useAutoDiscoveredFields.js";
 import { useCustomFieldDefs } from "./utils/customFieldDefs.js";
@@ -635,8 +644,10 @@ function DataTable({
   virtualized = false,
   virtualizedMaxHeight,
   virtualizedOverscan = 10,
-  advancedFilter,
-  columnChooser
+  advancedFilter: advancedFilterInput,
+  columnChooser,
+  activeFilterChips,
+  filterAwareEmptyState
 }) {
   const t = useT();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
@@ -645,6 +656,28 @@ function DataTable({
   const containerRef = React.useRef(null);
   const lastScopeRef = React.useRef(null);
   const hasInitializedScopeRef = React.useRef(false);
+  const legacyAdvancedFilterWarnedRef = React.useRef(false);
+  const advancedFilter = React.useMemo(() => {
+    if (!advancedFilterInput) return void 0;
+    if (!isAdvancedFilterState(advancedFilterInput.value)) {
+      return advancedFilterInput;
+    }
+    if (!legacyAdvancedFilterWarnedRef.current && process.env.NODE_ENV !== "production") {
+      legacyAdvancedFilterWarnedRef.current = true;
+      console.warn(
+        "[DataTable] `advancedFilter.value` was passed as the legacy `AdvancedFilterState` shape. This bridge will be removed in the next minor version \u2014 migrate to the tree shape (`AdvancedFilterTree`, see `@open-mercato/shared/lib/query/advanced-filter-tree`)."
+      );
+    }
+    const legacy = advancedFilterInput;
+    return {
+      fields: legacy.fields,
+      auto: legacy.auto,
+      value: flatToTree(legacy.value),
+      onChange: (next) => legacy.onChange(treeToFlat(next)),
+      onApply: legacy.onApply,
+      onClear: legacy.onClear
+    };
+  }, [advancedFilterInput]);
   React.useEffect(() => {
     return subscribeOrganizationScopeChanged((detail) => {
       const prev = lastScopeRef.current;
@@ -1091,20 +1124,27 @@ function DataTable({
         visibility[key] = value;
       }
     }
-    const filtersRecord = {};
-    for (const [key, value] of Object.entries(filterValues ?? {})) {
-      if (typeof key === "string") filtersRecord[key] = value;
+    let filtersPayload;
+    if (advancedFilter) {
+      const persisted = serializeTreeForPersist(advancedFilter.value);
+      filtersPayload = persisted.root.children.length > 0 ? persisted : void 0;
+    } else {
+      const filtersRecord = {};
+      for (const [key, value] of Object.entries(filterValues ?? {})) {
+        if (typeof key === "string") filtersRecord[key] = value;
+      }
+      if (Object.keys(filtersRecord).length) filtersPayload = filtersRecord;
     }
     const candidate = {
       columnOrder,
       columnVisibility: visibility,
       sorting,
-      filters: filtersRecord,
+      filters: filtersPayload,
       searchValue
     };
     return sanitizePerspectiveSettings(candidate) ?? {};
-  }, [columnOrder, columnVisibility, sorting, filterValues, searchValue]);
-  const applyPerspectiveSettings = React.useCallback((settings, nextId) => {
+  }, [columnOrder, columnVisibility, sorting, filterValues, searchValue, advancedFilter]);
+  const applyPerspectiveSettings = React.useCallback((settings, nextId, options) => {
     const normalized = sanitizePerspectiveSettings(settings) ?? {};
     if (normalized.columnOrder && normalized.columnOrder.length) {
       setColumnOrder(normalized.columnOrder);
@@ -1125,8 +1165,15 @@ function DataTable({
       setSorting([]);
       onSortingChange?.([]);
     }
-    if (onFiltersApply) {
-      onFiltersApply(normalized.filters ?? {});
+    if (!options?.preserveAdvancedFilter) {
+      const restoredTree = isPersistedFilterTree(normalized.filters) ? deserializeTreeFromPersist(normalized.filters) : null;
+      if (advancedFilter?.onApplyTree) {
+        advancedFilter.onApplyTree(restoredTree ?? createEmptyTree());
+        if (onFiltersApply) onFiltersApply({});
+      } else if (onFiltersApply) {
+        const legacy = restoredTree ? {} : normalized.filters ?? {};
+        onFiltersApply(legacy);
+      }
     }
     if (onSearchChange) {
       onSearchChange(normalized.searchValue ?? "");
@@ -1143,7 +1190,7 @@ function DataTable({
         initialSnapshotRef.current = null;
       }
     }
-  }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table]);
+  }, [onFiltersApply, onSearchChange, onSortingChange, perspectiveTableId, table, advancedFilter]);
   React.useLayoutEffect(() => {
     if (!perspectiveTableId) return;
     if (snapshotHydratedTableRef.current === perspectiveTableId) return;
@@ -1151,9 +1198,14 @@ function DataTable({
     const snapshot = readPerspectiveSnapshot(perspectiveTableId);
     if (!snapshot) return;
     initialSnapshotRef.current = snapshot;
-    applyPerspectiveSettings(snapshot.settings, snapshot.perspectiveId ?? null);
+    const preserveAdvancedFilter = !!advancedFilter?.onApplyTree;
+    applyPerspectiveSettings(
+      snapshot.settings,
+      snapshot.perspectiveId ?? null,
+      { preserveAdvancedFilter }
+    );
     initialPerspectiveAppliedRef.current = true;
-  }, [perspectiveTableId, applyPerspectiveSettings]);
+  }, [perspectiveTableId, applyPerspectiveSettings, advancedFilter]);
   const perspectiveQueryKey = ["table-perspectives", perspectiveTableId];
   const savePerspectiveMutation = useMutation({
     mutationFn: async (input) => {
@@ -1366,7 +1418,7 @@ function DataTable({
     if (!canUsePerspectives) return;
     if (!perspectiveTableId) return;
     if (initialSnapshotRef.current) return;
-    if (initialPerspectiveAppliedRef.current && activePerspectiveId != null) return;
+    if (initialPerspectiveAppliedRef.current) return;
     const source = perspectiveData ?? perspectiveConfig?.initialState?.response;
     if (!source) return;
     const tryResolve = (id) => {
@@ -1603,6 +1655,18 @@ function DataTable({
     customFieldDefs: needsAutoDiscovery ? autoDiscoveryDefs : []
   });
   const resolvedAdvancedFilterFields = isAutoAdvancedFilter ? autoDiscovered.advancedFilterFields : advancedFilter?.fields ?? [];
+  const advancedFilterRuleCount = React.useMemo(() => {
+    if (!advancedFilter) return 0;
+    function countRules(group) {
+      let n = 0;
+      for (const c of group.children) {
+        if (c.type === "rule") n += 1;
+        else n += countRules(c);
+      }
+      return n;
+    }
+    return countRules(advancedFilter.value.root);
+  }, [advancedFilter]);
   const resolvedColumnChooserFields = isAutoColumnChooser ? autoDiscovered.columnChooserFields : columnChooser?.availableColumns ?? [];
   const effectiveColumnChooserFields = React.useMemo(() => {
     if (resolvedColumnChooserFields.length > 0) return resolvedColumnChooserFields;
@@ -1722,14 +1786,56 @@ function DataTable({
   const builtToolbar = React.useMemo(() => {
     if (toolbar) return toolbar;
     const anySearch = onSearchChange != null;
-    const anyFilters = baseFilters && baseFilters.length > 0 || cfFilters && cfFilters.length > 0 || injectedFilters.length > 0;
+    const suppressFilterBarFilters = !!(advancedFilter && advancedFilter.externalPopover);
+    const effectiveBaseFilters = suppressFilterBarFilters ? [] : baseFilters;
+    const effectiveCfFilters = suppressFilterBarFilters ? [] : cfFilters;
+    const effectiveInjectedFilters = suppressFilterBarFilters ? [] : injectedFilters;
+    const anyFilters = effectiveBaseFilters && effectiveBaseFilters.length > 0 || effectiveCfFilters && effectiveCfFilters.length > 0 || effectiveInjectedFilters.length > 0;
     const hasBulkButtons = hasInjectedBulkActions || hasPropBulkActions;
-    if (!anySearch && !anyFilters && !hasBulkButtons) return null;
-    const baseList = baseFilters || [];
+    const hasAdvancedFilterButton = Boolean(advancedFilter);
+    const hasPerspectiveButton = canUsePerspectives;
+    if (!anySearch && !anyFilters && !hasBulkButtons && !hasAdvancedFilterButton && !hasPerspectiveButton) return null;
+    const baseList = effectiveBaseFilters || [];
     const existing = new Set(baseList.map((f) => f.id));
-    const cfOnly = (cfFilters || []).filter((f) => !existing.has(f.id));
-    const injectedOnly = injectedFilters.filter((f) => !existing.has(f.id) && !cfOnly.some((cf) => cf.id === f.id));
+    const cfOnly = (effectiveCfFilters || []).filter((f) => !existing.has(f.id));
+    const injectedOnly = effectiveInjectedFilters.filter((f) => !existing.has(f.id) && !cfOnly.some((cf) => cf.id === f.id));
     const combined = [...baseList, ...cfOnly, ...injectedOnly];
+    const advancedFilterButton = advancedFilter ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: advancedFilter.triggerRef,
+        type: "button",
+        variant: advancedFilterRuleCount > 0 ? "default" : "outline",
+        size: "default",
+        className: advancedFilterRuleCount > 0 ? "bg-foreground text-background hover:bg-foreground/90" : "",
+        onClick: () => {
+          if (advancedFilter.externalPopover) {
+            advancedFilter.onTriggerClick?.();
+            return;
+          }
+          const opening = !isAdvancedFilterOpen;
+          if (opening && advancedFilterRuleCount === 0) {
+            const defaultField = resolvedAdvancedFilterFields[0];
+            const seeded = treeReducer(advancedFilter.value, {
+              type: "addRule",
+              groupId: advancedFilter.value.root.id,
+              defaultField: defaultField?.key,
+              defaultOperator: defaultField ? getDefaultOperator(defaultField.type) : void 0
+            });
+            advancedFilter.onChange(seeded);
+          }
+          setAdvancedFilterOpen(opening);
+        },
+        "aria-label": t("ui.advancedFilter.toggle", "Advanced filters"),
+        title: t("ui.advancedFilter.toggle", "Advanced filters"),
+        "data-testid": "advanced-filter-trigger",
+        children: [
+          /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: t("ui.dataTable.filters", "Filters") }),
+          advancedFilterRuleCount > 0 ? /* @__PURE__ */ jsx("span", { className: "ml-1 inline-flex h-5 min-w-5 px-1.5 items-center justify-center rounded-full bg-muted-foreground/30 text-background text-xs", children: advancedFilterRuleCount }) : null
+        ]
+      }
+    ) : null;
     const perspectiveButton = canUsePerspectives ? /* @__PURE__ */ jsx(
       ViewSwitcherDropdown,
       {
@@ -1756,7 +1862,10 @@ function DataTable({
         }
       )
     ] }) : null;
-    const leadingItems = perspectiveButton ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: perspectiveButton }) : null;
+    const leadingItems = advancedFilterButton || perspectiveButton ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      advancedFilterButton,
+      perspectiveButton
+    ] }) : null;
     const trailingItems = hasBulkButtons ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       selectedRows.length > 0 ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("ui.dataTable.bulkAction.selectedCount", "{count} selected", { count: selectedRows.length }) }) : null,
       injectedBulkActions.map((action) => {
@@ -1845,7 +1954,11 @@ function DataTable({
     runBulkAction,
     runPropBulkAction,
     searchTrailingInjectionSpotId,
-    resolvedInjectionContext
+    resolvedInjectionContext,
+    advancedFilter,
+    advancedFilterRuleCount,
+    isAdvancedFilterOpen,
+    resolvedAdvancedFilterFields
   ]);
   const hasTitle = title != null;
   const hasActions = actions !== void 0 && actions !== null && actions !== false;
@@ -1857,7 +1970,7 @@ function DataTable({
   const hasRefreshButton = Boolean(refreshButtonConfig);
   const hasToolbar = builtToolbar != null;
   const hasToolbarInjection = Boolean(toolbarInjectionSpotId);
-  const shouldRenderActionsWrapper = hasActions || hasRefreshButton || shouldReserveActionsSpace || hasExport || hasToolbarInjection || Boolean(advancedFilter);
+  const shouldRenderActionsWrapper = hasActions || hasRefreshButton || shouldReserveActionsSpace || hasExport || hasToolbarInjection;
   const renderToolbarInline = embedded && hasToolbar;
   const shouldRenderToolbarBelow = hasToolbar && !renderToolbarInline;
   const shouldRenderHeader = hasTitle || renderToolbarInline || shouldRenderActionsWrapper || shouldRenderToolbarBelow;
@@ -1900,32 +2013,6 @@ function DataTable({
               ]
             }
           ) : null,
-          advancedFilter ? /* @__PURE__ */ jsxs(
-            Button,
-            {
-              type: "button",
-              variant: advancedFilter.value.conditions.length > 0 ? "secondary" : "ghost",
-              size: "icon",
-              onClick: () => {
-                const opening = !isAdvancedFilterOpen;
-                if (opening && advancedFilter.value.conditions.length === 0) {
-                  const newCondition = createEmptyCondition();
-                  if (resolvedAdvancedFilterFields.length > 0) {
-                    newCondition.field = resolvedAdvancedFilterFields[0].key;
-                    newCondition.operator = getDefaultOperator(resolvedAdvancedFilterFields[0].type);
-                  }
-                  advancedFilter.onChange({ ...advancedFilter.value, conditions: [newCondition] });
-                }
-                setAdvancedFilterOpen(opening);
-              },
-              "aria-label": t("ui.advancedFilter.toggle", "Advanced filters"),
-              title: t("ui.advancedFilter.toggle", "Advanced filters"),
-              children: [
-                /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
-                advancedFilter.value.conditions.length > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-overline text-primary-foreground", children: advancedFilter.value.conditions.length }) : null
-              ]
-            }
-          ) : null,
           canUsePerspectives ? /* @__PURE__ */ jsxs(
             Button,
             {
@@ -1949,7 +2036,7 @@ function DataTable({
       shouldRenderToolbarBelow ? /* @__PURE__ */ jsx("div", { className: toolbarWrapperClassName, children: builtToolbar }) : null,
       headerInjectionSpotId ? /* @__PURE__ */ jsx("div", { className: embedded ? "mt-2" : "mt-3", children: /* @__PURE__ */ jsx(InjectionSpot, { spotId: headerInjectionSpotId, context: resolvedInjectionContext }) }) : null
     ] }),
-    advancedFilter && isAdvancedFilterOpen ? /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsx(
+    advancedFilter && !advancedFilter.externalPopover && isAdvancedFilterOpen ? /* @__PURE__ */ jsx("div", { className: "border-b", children: /* @__PURE__ */ jsx(
       AdvancedFilterBuilder,
       {
         fields: resolvedAdvancedFilterFields,
@@ -1965,11 +2052,12 @@ function DataTable({
         }
       }
     ) }) : null,
-    advancedFilter && advancedFilter.value.conditions.length > 0 && !isAdvancedFilterOpen ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap px-4 py-2 border-b text-sm", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ui.advancedFilter.activeCount", "{count} active filters", { count: advancedFilter.value.conditions.length }) }),
+    advancedFilter && !advancedFilter.externalPopover && advancedFilterRuleCount > 0 && !isAdvancedFilterOpen ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap px-4 py-2 border-b text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ui.advancedFilter.activeCount", "{count} active filters", { count: advancedFilterRuleCount }) }),
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-auto px-1 py-0.5 text-xs", onClick: () => setAdvancedFilterOpen(true), children: t("ui.advancedFilter.edit", "Edit") }),
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-auto px-1 py-0.5 text-xs text-muted-foreground", onClick: advancedFilter.onClear, children: t("ui.advancedFilter.clearAll", "Clear all") })
     ] }) : null,
+    activeFilterChips,
     /* @__PURE__ */ jsx(
       HeaderDndWrapper,
       {
@@ -2120,7 +2208,15 @@ function DataTable({
               const bottomPadding = lastItem ? rowVirtualizer.getTotalSize() - lastItem.end : 0;
               return bottomPadding > 0 ? /* @__PURE__ */ jsx("tr", { style: { height: `${bottomPadding}px` } }) : null;
             })() : null
-          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0), className: "py-6", children: emptyState && typeof emptyState !== "string" ? emptyState : /* @__PURE__ */ jsx(
+          ] }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: mergedColumns.length + (rowActions || injectedRowActions.length > 0 ? 1 : 0) + (hasInjectedBulkActions ? 1 : 0), className: "py-6", children: filterAwareEmptyState?.active ? /* @__PURE__ */ jsx(
+            FilteredEmptyResults,
+            {
+              entityNamePlural: filterAwareEmptyState.entityNamePlural,
+              canRemoveLast: filterAwareEmptyState.canRemoveLast,
+              onClearAll: filterAwareEmptyState.onClearAll,
+              onRemoveLast: filterAwareEmptyState.onRemoveLast
+            }
+          ) : emptyState && typeof emptyState !== "string" ? emptyState : /* @__PURE__ */ jsx(
             EmptyState,
             {
               size: "sm",