@open-mercato/ui 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3278.1.a4d26475e4

package/dist/backend/filters/ActiveFilterChips.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { Tag } from "../../primitives/tag.js";
+import { IconButton } from "../../primitives/icon-button.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { isValuelessOperator } from "@open-mercato/shared/lib/query/advanced-filter";
+import { validateTreeForApply } from "./filterValidation.js";
+const MAX_LABEL = 24;
+function truncate(s) {
+  if (s.length <= MAX_LABEL) return s;
+  return s.slice(0, MAX_LABEL) + "\u2026";
+}
+function getOption(field, value) {
+  if (!field?.options) return void 0;
+  return field.options.find((o) => o.value === value);
+}
+function valueText(field, value) {
+  if (Array.isArray(value)) {
+    if (value.length === 0) return { text: "" };
+    const first = String(value[0]);
+    const opt2 = getOption(field, first);
+    const display = opt2?.label ?? first;
+    const more = value.length - 1;
+    return {
+      text: more > 0 ? `${truncate(display)} +${more}` : truncate(display),
+      tone: opt2?.tone
+    };
+  }
+  if (value == null || value === "") return { text: "" };
+  const str = String(value);
+  const opt = getOption(field, str);
+  return { text: truncate(opt?.label ?? str), tone: opt?.tone };
+}
+const VALUELESS_OPERATOR_LABEL = {
+  is_empty: "is empty",
+  is_not_empty: "is not empty",
+  is_true: "is true",
+  is_false: "is false"
+};
+function ruleChip(rule, fields, t) {
+  const field = fields.find((f) => f.key === rule.field);
+  const fieldLabel = field?.label ?? rule.field;
+  if (isValuelessOperator(rule.operator)) {
+    const fallback = VALUELESS_OPERATOR_LABEL[rule.operator] ?? rule.operator;
+    const opLabel = t(`ui.advancedFilter.operator.${rule.operator}`, fallback);
+    return { label: `${fieldLabel} ${opLabel}` };
+  }
+  if (rule.operator === "between" && Array.isArray(rule.value)) {
+    const [start, end] = rule.value;
+    const startStr = start == null ? "" : String(start);
+    const endStr = end == null ? "" : String(end);
+    return { label: `${fieldLabel}: ${truncate(startStr)} \u2013 ${truncate(endStr)}` };
+  }
+  const v = valueText(field, rule.value);
+  return { label: `${fieldLabel}: ${v.text}`, tone: v.tone };
+}
+function groupChip(group, fields, invalidRuleIds, t) {
+  const ruleChildren = [];
+  for (const c of group.children) if (c.type === "rule" && !invalidRuleIds.has(c.id)) ruleChildren.push(c);
+  if (!ruleChildren.length) return { label: "", remaining: 0 };
+  const firstChip = ruleChip(ruleChildren[0], fields, t);
+  const remaining = ruleChildren.length - 1;
+  return {
+    label: remaining > 0 ? `${firstChip.label} +${remaining}` : firstChip.label,
+    tone: firstChip.tone,
+    remaining
+  };
+}
+function isNodeFullyInvalid(node, invalidRuleIds) {
+  if (node.type === "rule") return invalidRuleIds.has(node.id);
+  if (!node.children.length) return true;
+  return node.children.every((c) => isNodeFullyInvalid(c, invalidRuleIds));
+}
+function ActiveFilterChips({ tree, fields, popoverOpen, onRemoveNode, onOpen }) {
+  const t = useT();
+  const invalidRuleIds = React.useMemo(() => {
+    const result = validateTreeForApply(tree, fields);
+    if (result.ok) return /* @__PURE__ */ new Set();
+    return new Set(result.errors.map((e) => e.ruleId));
+  }, [tree, fields]);
+  const visibleChildren = React.useMemo(
+    () => tree.root.children.filter((child) => !isNodeFullyInvalid(child, invalidRuleIds)),
+    [tree.root.children, invalidRuleIds]
+  );
+  if (popoverOpen) return null;
+  if (!visibleChildren.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex items-center gap-2 px-4 py-2 overflow-x-auto bg-background border-b border-border",
+      "data-testid": "active-filter-chips",
+      children: visibleChildren.map((child) => {
+        if (child.type === "rule") {
+          const c2 = ruleChip(child, fields, t);
+          return /* @__PURE__ */ jsx(
+            ChipWithRemove,
+            {
+              label: c2.label,
+              tone: c2.tone,
+              onClick: () => onOpen(child.id),
+              onRemove: () => onRemoveNode(child.id),
+              removeLabel: t("ui.advancedFilter.chips.remove", "Remove filter")
+            },
+            child.id
+          );
+        }
+        const c = groupChip(child, fields, invalidRuleIds, t);
+        return /* @__PURE__ */ jsx(
+          ChipWithRemove,
+          {
+            label: c.label,
+            tone: c.tone,
+            onClick: () => onOpen(child.id),
+            onRemove: () => onRemoveNode(child.id),
+            removeLabel: t("ui.advancedFilter.chips.removeGroup", "Remove filter group")
+          },
+          child.id
+        );
+      })
+    }
+  );
+}
+function ChipWithRemove({ label, tone, onClick, onRemove, removeLabel }) {
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1", "data-testid": "active-filter-chip", "aria-label": label, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: "inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        children: /* @__PURE__ */ jsx(Tag, { variant: tone ?? "default", dot: tone != null, children: label })
+      }
+    ),
+    /* @__PURE__ */ jsx(IconButton, { type: "button", variant: "ghost", size: "xs", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ jsx(X, { className: "size-3" }) })
+  ] });
+}
+export {
+  ActiveFilterChips
+};
+//# sourceMappingURL=ActiveFilterChips.js.map

package/dist/backend/filters/ActiveFilterChips.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/backend/filters/ActiveFilterChips.tsx"],
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport { X } from 'lucide-react'\nimport { Tag, type TagVariant } from '../../primitives/tag'\nimport { IconButton } from '../../primitives/icon-button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { AdvancedFilterTree, FilterRule, FilterGroup } from '@open-mercato/shared/lib/query/advanced-filter-tree'\nimport type { FilterFieldDef, FilterOption } from '@open-mercato/shared/lib/query/advanced-filter'\nimport { isValuelessOperator } from '@open-mercato/shared/lib/query/advanced-filter'\nimport { validateTreeForApply } from './filterValidation'\n\nexport type ActiveFilterChipsProps = {\n  tree: AdvancedFilterTree\n  fields: FilterFieldDef[]\n  popoverOpen: boolean\n  onRemoveNode: (id: string) => void\n  onOpen: (focusNodeId?: string) => void\n}\n\nconst MAX_LABEL = 24\n\nfunction truncate(s: string): string {\n  if (s.length <= MAX_LABEL) return s\n  return s.slice(0, MAX_LABEL) + '\u2026'\n}\n\nfunction getOption(field: FilterFieldDef | undefined, value: string): FilterOption | undefined {\n  if (!field?.options) return undefined\n  return field.options.find((o) => o.value === value)\n}\n\nfunction valueText(field: FilterFieldDef | undefined, value: unknown): { text: string; tone?: TagVariant } {\n  if (Array.isArray(value)) {\n    if (value.length === 0) return { text: '' }\n    const first = String(value[0])\n    const opt = getOption(field, first)\n    const display = opt?.label ?? first\n    const more = value.length - 1\n    return {\n      text: more > 0 ? `${truncate(display)} +${more}` : truncate(display),\n      tone: opt?.tone,\n    }\n  }\n  if (value == null || value === '') return { text: '' }\n  const str = String(value)\n  const opt = getOption(field, str)\n  return { text: truncate(opt?.label ?? str), tone: opt?.tone }\n}\n\n// Operator labels in chips read as natural English: \"Email is empty\" beats\n// \"Email: \" (trailing colon, blank value). Keep the map narrow \u2014 only valueless\n// operators need a phrase form here; value-bearing operators show the value.\nconst VALUELESS_OPERATOR_LABEL: Record<string, string> = {\n  is_empty: 'is empty',\n  is_not_empty: 'is not empty',\n  is_true: 'is true',\n  is_false: 'is false',\n}\n\ntype Translator = ReturnType<typeof useT>\n\nfunction ruleChip(rule: FilterRule, fields: FilterFieldDef[], t: Translator): { label: string; tone?: TagVariant } {\n  const field = fields.find((f) => f.key === rule.field)\n  const fieldLabel = field?.label ?? rule.field\n  if (isValuelessOperator(rule.operator)) {\n    const fallback = VALUELESS_OPERATOR_LABEL[rule.operator] ?? rule.operator\n    const opLabel = t(`ui.advancedFilter.operator.${rule.operator}`, fallback)\n    return { label: `${fieldLabel} ${opLabel}` }\n  }\n  // `between` stores `[start, end]` \u2014 render it as a range, not as the\n  // multi-select \"first +N\" summary that `valueText` would produce.\n  if (rule.operator === 'between' && Array.isArray(rule.value)) {\n    const [start, end] = rule.value\n    const startStr = start == null ? '' : String(start)\n    const endStr = end == null ? '' : String(end)\n    return { label: `${fieldLabel}: ${truncate(startStr)} \u2013 ${truncate(endStr)}` }\n  }\n  const v = valueText(field, rule.value)\n  return { label: `${fieldLabel}: ${v.text}`, tone: v.tone }\n}\n\nfunction groupChip(group: FilterGroup, fields: FilterFieldDef[], invalidRuleIds: Set<string>, t: Translator): { label: string; tone?: TagVariant; remaining: number } {\n  const ruleChildren: FilterRule[] = []\n  for (const c of group.children) if (c.type === 'rule' && !invalidRuleIds.has(c.id)) ruleChildren.push(c)\n  if (!ruleChildren.length) return { label: '', remaining: 0 }\n  const firstChip = ruleChip(ruleChildren[0], fields, t)\n  const remaining = ruleChildren.length - 1\n  return {\n    label: remaining > 0 ? `${firstChip.label} +${remaining}` : firstChip.label,\n    tone: firstChip.tone,\n    remaining,\n  }\n}\n\nfunction isNodeFullyInvalid(node: FilterRule | FilterGroup, invalidRuleIds: Set<string>): boolean {\n  if (node.type === 'rule') return invalidRuleIds.has(node.id)\n  if (!node.children.length) return true\n  return node.children.every((c) => isNodeFullyInvalid(c, invalidRuleIds))\n}\n\nexport function ActiveFilterChips({ tree, fields, popoverOpen, onRemoveNode, onOpen }: ActiveFilterChipsProps) {\n  const t = useT()\n  // Suppress chips for rules/groups whose values won't actually filter (matches\n  // the same gate the auto-apply hook uses). Stops the \"chip is shown but data\n  // appears unfiltered\" mismatch when a substring text rule has < 2 characters\n  // or a multi-value rule has no picks yet.\n  const invalidRuleIds = React.useMemo(() => {\n    const result = validateTreeForApply(tree, fields)\n    if (result.ok) return new Set<string>()\n    return new Set(result.errors.map((e) => e.ruleId))\n  }, [tree, fields])\n  const visibleChildren = React.useMemo(\n    () => tree.root.children.filter((child) => !isNodeFullyInvalid(child, invalidRuleIds)),\n    [tree.root.children, invalidRuleIds],\n  )\n  if (popoverOpen) return null\n  if (!visibleChildren.length) return null\n  return (\n    <div\n      className=\"flex items-center gap-2 px-4 py-2 overflow-x-auto bg-background border-b border-border\"\n      data-testid=\"active-filter-chips\"\n    >\n      {visibleChildren.map((child) => {\n        if (child.type === 'rule') {\n          const c = ruleChip(child, fields, t)\n          return (\n            <ChipWithRemove\n              key={child.id}\n              label={c.label}\n              tone={c.tone}\n              onClick={() => onOpen(child.id)}\n              onRemove={() => onRemoveNode(child.id)}\n              removeLabel={t('ui.advancedFilter.chips.remove', 'Remove filter')}\n            />\n          )\n        }\n        const c = groupChip(child, fields, invalidRuleIds, t)\n        return (\n          <ChipWithRemove\n            key={child.id}\n            label={c.label}\n            tone={c.tone}\n            onClick={() => onOpen(child.id)}\n            onRemove={() => onRemoveNode(child.id)}\n            removeLabel={t('ui.advancedFilter.chips.removeGroup', 'Remove filter group')}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\ntype ChipWithRemoveProps = {\n  label: string\n  tone?: TagVariant\n  onClick: () => void\n  onRemove: () => void\n  removeLabel: string\n}\n\nfunction ChipWithRemove({ label, tone, onClick, onRemove, removeLabel }: ChipWithRemoveProps) {\n  return (\n    <div className=\"inline-flex items-center gap-1\" data-testid=\"active-filter-chip\" aria-label={label}>\n      {/* Raw <button> required: <Tag> is a presentational pill primitive (not a Button), so wrapping\n          it in <Button> would inject Button's own styling around it. The native button keeps Tag's\n          visual contract intact while adding click + keyboard semantics; DS focus-visible ring is applied. */}\n      <button\n        type=\"button\"\n        onClick={onClick}\n        className=\"inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      >\n        <Tag variant={tone ?? 'default'} dot={tone != null}>{label}</Tag>\n      </button>\n      <IconButton type=\"button\" variant=\"ghost\" size=\"xs\" aria-label={removeLabel} onClick={onRemove}>\n        <X className=\"size-3\" />\n      </IconButton>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["opt", "c"]
+}