@freighttech/ui 0.13.18

package/dist/backend/dynamic-table/components/ConfigureViewGrouping.js

@@ -0,0 +1,224 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback } from "react";
+import { Plus, X } from "lucide-react";
+import SelectMenu from "./SelectMenu.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import {
+  generateGroupRuleId,
+  generateAggregationRuleId,
+  aggregationFnsForColumnType,
+  defaultAggregationFnForColumnType
+} from "../types/grouping.js";
+import { getSortDirectionLabels } from "../types/perspective.js";
+const ConfigureViewGrouping = ({
+  columns,
+  groupRules,
+  onGroupRulesChange,
+  aggregations = [],
+  onAggregationsChange
+}) => {
+  const t = useT();
+  const aggregatableColumns = columns;
+  const columnByField = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const c of columns) map.set(c.data, c);
+    return map;
+  }, [columns]);
+  const aggFnLabel = useCallback(
+    (fn) => t(`dynamicTable.aggregation.fn.${fn}`, fn),
+    [t]
+  );
+  const addAggregation = useCallback(() => {
+    const used = aggregations.map((a) => a.field);
+    const available = aggregatableColumns.find((c) => !used.includes(c.data));
+    if (!available) return;
+    onAggregationsChange?.([
+      ...aggregations,
+      {
+        id: generateAggregationRuleId(available.data),
+        field: available.data,
+        fn: defaultAggregationFnForColumnType(available.type)
+      }
+    ]);
+  }, [aggregations, aggregatableColumns, onAggregationsChange]);
+  const removeAggregation = useCallback(
+    (id) => onAggregationsChange?.(aggregations.filter((a) => a.id !== id)),
+    [aggregations, onAggregationsChange]
+  );
+  const updateAggregation = useCallback(
+    (id, updates) => onAggregationsChange?.(
+      aggregations.map((a) => {
+        if (a.id !== id) return a;
+        const next = { ...a, ...updates };
+        if (updates.field) {
+          next.id = generateAggregationRuleId(updates.field);
+          const nextType = columnByField.get(updates.field)?.type;
+          if (!aggregationFnsForColumnType(nextType).includes(next.fn)) {
+            next.fn = defaultAggregationFnForColumnType(nextType);
+          }
+        }
+        return next;
+      })
+    ),
+    [aggregations, columnByField, onAggregationsChange]
+  );
+  const availableAggColumns = useCallback(
+    (currentField) => {
+      const used = aggregations.filter((a) => a.field !== currentField).map((a) => a.field);
+      return aggregatableColumns.filter((c) => !used.includes(c.data));
+    },
+    [aggregations, aggregatableColumns]
+  );
+  const addGroupRule = useCallback(() => {
+    const usedFields = groupRules.map((r) => r.field);
+    const availableColumn = columns.find((c) => !usedFields.includes(c.data));
+    const newRule = {
+      id: generateGroupRuleId(),
+      field: availableColumn?.data || columns[0]?.data || "",
+      direction: "asc"
+    };
+    onGroupRulesChange([...groupRules, newRule]);
+  }, [columns, groupRules, onGroupRulesChange]);
+  const removeGroupRule = useCallback((id) => {
+    onGroupRulesChange(groupRules.filter((rule) => rule.id !== id));
+  }, [groupRules, onGroupRulesChange]);
+  const updateGroupRule = useCallback((id, updates) => {
+    onGroupRulesChange(groupRules.map(
+      (rule) => rule.id === id ? { ...rule, ...updates } : rule
+    ));
+  }, [groupRules, onGroupRulesChange]);
+  const clearAll = useCallback(() => {
+    onGroupRulesChange([]);
+  }, [onGroupRulesChange]);
+  const getAvailableColumns = (currentRuleId) => {
+    const usedFields = groupRules.filter((r) => r.id !== currentRuleId).map((r) => r.field);
+    return columns.filter((c) => !usedFields.includes(c.data));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "hot-config-sorting", children: [
+    groupRules.length === 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "hot-config-sorting-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "hot-config-sorting-header-label", children: t("dynamicTable.configureView.groupBy", "Group by") }),
+        /* @__PURE__ */ jsx("button", { onClick: clearAll, className: "hot-config-clear-btn", children: t("dynamicTable.configureView.clearAll", "Clear all") })
+      ] }),
+      groupRules.map((rule, index) => {
+        const availableColumns = getAvailableColumns(rule.id);
+        const currentColumn = columns.find((c) => c.data === rule.field);
+        return /* @__PURE__ */ jsxs("div", { className: "hot-config-sort-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "hot-config-sort-index", children: index + 1 }),
+          /* @__PURE__ */ jsx(
+            SelectMenu,
+            {
+              value: rule.field,
+              onChange: (next) => updateGroupRule(rule.id, { field: next }),
+              options: [
+                ...currentColumn ? [{ value: currentColumn.data, label: currentColumn.title || currentColumn.data }] : [],
+                ...availableColumns.filter((c) => c.data !== rule.field).map((col) => ({ value: col.data, label: col.title || col.data }))
+              ],
+              className: "hot-config-sort-select",
+              ariaLabel: t("dynamicTable.filter.field", "Field")
+            }
+          ),
+          (() => {
+            const labels = getSortDirectionLabels(currentColumn?.type);
+            return /* @__PURE__ */ jsx(
+              SelectMenu,
+              {
+                value: rule.direction,
+                onChange: (next) => updateGroupRule(rule.id, { direction: next }),
+                options: [
+                  { value: "asc", label: labels.asc },
+                  { value: "desc", label: labels.desc }
+                ],
+                className: "hot-config-sort-direction-select",
+                ariaLabel: t("dynamicTable.configureView.direction", "Direction")
+              }
+            );
+          })(),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => removeGroupRule(rule.id),
+              className: "hot-config-sort-remove",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }, rule.id);
+      })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: addGroupRule,
+        disabled: groupRules.length >= columns.length,
+        className: "hot-config-add-btn",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": true }),
+          t("dynamicTable.configureView.addGroup", "Add group")
+        ]
+      }
+    ),
+    onAggregationsChange && groupRules.length > 0 && aggregatableColumns.length > 0 && /* @__PURE__ */ jsxs("div", { className: "hot-config-aggregations", children: [
+      aggregations.length > 0 && /* @__PURE__ */ jsxs("div", { className: "hot-config-sorting-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "hot-config-sorting-header-label", children: t("dynamicTable.configureView.sumBy", "Sum by") }),
+        /* @__PURE__ */ jsx("button", { onClick: () => onAggregationsChange([]), className: "hot-config-clear-btn", children: t("dynamicTable.configureView.clearAll", "Clear all") })
+      ] }),
+      aggregations.map((rule, index) => {
+        const cols = availableAggColumns(rule.field);
+        const currentColumn = columnByField.get(rule.field);
+        const fnOptions = aggregationFnsForColumnType(currentColumn?.type);
+        return /* @__PURE__ */ jsxs("div", { className: "hot-config-sort-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "hot-config-sort-index", children: index + 1 }),
+          /* @__PURE__ */ jsx(
+            SelectMenu,
+            {
+              value: rule.field,
+              onChange: (next) => updateAggregation(rule.id, { field: next }),
+              options: [
+                ...currentColumn ? [{ value: currentColumn.data, label: currentColumn.title || currentColumn.data }] : [],
+                ...cols.filter((c) => c.data !== rule.field).map((col) => ({ value: col.data, label: col.title || col.data }))
+              ],
+              className: "hot-config-sort-select",
+              ariaLabel: t("dynamicTable.filter.field", "Field")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectMenu,
+            {
+              value: rule.fn,
+              onChange: (next) => updateAggregation(rule.id, { fn: next }),
+              options: fnOptions.map((fn) => ({ value: fn, label: aggFnLabel(fn) })),
+              className: "hot-config-sort-direction-select",
+              ariaLabel: t("dynamicTable.configureView.aggregationFn", "Function"),
+              dataAttributes: { "data-agg-fn-select": rule.field }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => removeAggregation(rule.id),
+              className: "hot-config-sort-remove",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }, rule.id);
+      }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: addAggregation,
+          disabled: aggregations.length >= aggregatableColumns.length,
+          className: "hot-config-add-btn",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5", "aria-hidden": true }),
+            t("dynamicTable.configureView.addSum", "Add sum")
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var ConfigureViewGrouping_default = ConfigureViewGrouping;
+export {
+  ConfigureViewGrouping_default as default
+};
+//# sourceMappingURL=ConfigureViewGrouping.js.map

package/dist/backend/dynamic-table/components/ConfigureViewGrouping.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ConfigureViewGrouping.tsx"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { Plus, X } from 'lucide-react';\nimport SelectMenu from './SelectMenu';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { ColumnDef } from '../types/index';\nimport {\n  GroupRule,\n  generateGroupRuleId,\n  AggregationRule,\n  AggregationFn,\n  generateAggregationRuleId,\n  aggregationFnsForColumnType,\n  defaultAggregationFnForColumnType,\n} from '../types/grouping';\nimport { getSortDirectionLabels } from '../types/perspective';\n\ninterface ConfigureViewGroupingProps {\n  columns: ColumnDef[];\n  groupRules: GroupRule[];\n  onGroupRulesChange: (rules: GroupRule[]) => void;\n  aggregations?: AggregationRule[];\n  onAggregationsChange?: (rules: AggregationRule[]) => void;\n}\n\nconst ConfigureViewGrouping: React.FC<ConfigureViewGroupingProps> = ({\n  columns,\n  groupRules,\n  onGroupRulesChange,\n  aggregations = [],\n  onAggregationsChange,\n}) => {\n  const t = useT();\n\n  // --- Aggregations ---\n  // Every column can be aggregated now: `count` / `countDistinct` work on text\n  // (Excel's COUNTA), `min` / `max` on dates read as earliest / latest, and\n  // `sum` / `avg` stay numeric-only. The function dropdown is filtered by the\n  // selected column's type, so an impossible pair can't be produced.\n  const aggregatableColumns = columns;\n  const columnByField = React.useMemo(() => {\n    const map = new Map<string, ColumnDef>();\n    for (const c of columns) map.set(c.data, c);\n    return map;\n  }, [columns]);\n  const aggFnLabel = useCallback(\n    (fn: AggregationFn) => t(`dynamicTable.aggregation.fn.${fn}`, fn),\n    [t],\n  );\n  const addAggregation = useCallback(() => {\n    const used = aggregations.map((a) => a.field);\n    const available = aggregatableColumns.find((c) => !used.includes(c.data));\n    if (!available) return;\n    onAggregationsChange?.([\n      ...aggregations,\n      {\n        id: generateAggregationRuleId(available.data),\n        field: available.data,\n        fn: defaultAggregationFnForColumnType(available.type),\n      },\n    ]);\n  }, [aggregations, aggregatableColumns, onAggregationsChange]);\n\n  const removeAggregation = useCallback(\n    (id: string) => onAggregationsChange?.(aggregations.filter((a) => a.id !== id)),\n    [aggregations, onAggregationsChange],\n  );\n\n  const updateAggregation = useCallback(\n    (id: string, updates: Partial<AggregationRule>) =>\n      onAggregationsChange?.(\n        aggregations.map((a) => {\n          if (a.id !== id) return a;\n          const next = { ...a, ...updates };\n          // Keep the id derived from the field so rules stay unique per column.\n          if (updates.field) {\n            next.id = generateAggregationRuleId(updates.field);\n            // A SUM carried onto a text column would be meaningless (and would\n            // be dropped server-side), so snap the function to one the new\n            // column actually supports.\n            const nextType = columnByField.get(updates.field)?.type;\n            if (!aggregationFnsForColumnType(nextType).includes(next.fn)) {\n              next.fn = defaultAggregationFnForColumnType(nextType);\n            }\n          }\n          return next;\n        }),\n      ),\n    [aggregations, columnByField, onAggregationsChange],\n  );\n\n  const availableAggColumns = useCallback(\n    (currentField: string) => {\n      const used = aggregations.filter((a) => a.field !== currentField).map((a) => a.field);\n      return aggregatableColumns.filter((c) => !used.includes(c.data));\n    },\n    [aggregations, aggregatableColumns],\n  );\n  const addGroupRule = useCallback(() => {\n    const usedFields = groupRules.map(r => r.field);\n    const availableColumn = columns.find(c => !usedFields.includes(c.data));\n    const newRule: GroupRule = {\n      id: generateGroupRuleId(),\n      field: availableColumn?.data || columns[0]?.data || '',\n      direction: 'asc',\n    };\n    onGroupRulesChange([...groupRules, newRule]);\n  }, [columns, groupRules, onGroupRulesChange]);\n\n  const removeGroupRule = useCallback((id: string) => {\n    onGroupRulesChange(groupRules.filter(rule => rule.id !== id));\n  }, [groupRules, onGroupRulesChange]);\n\n  const updateGroupRule = useCallback((id: string, updates: Partial<GroupRule>) => {\n    onGroupRulesChange(groupRules.map(rule =>\n      rule.id === id ? { ...rule, ...updates } : rule\n    ));\n  }, [groupRules, onGroupRulesChange]);\n\n  const clearAll = useCallback(() => {\n    onGroupRulesChange([]);\n  }, [onGroupRulesChange]);\n\n  const getAvailableColumns = (currentRuleId: string) => {\n    const usedFields = groupRules\n      .filter(r => r.id !== currentRuleId)\n      .map(r => r.field);\n    return columns.filter(c => !usedFields.includes(c.data));\n  };\n\n  return (\n    <div className=\"hot-config-sorting\">\n      {groupRules.length === 0 ? null : (\n        <>\n          <div className=\"hot-config-sorting-header\">\n            <span className=\"hot-config-sorting-header-label\">{t('dynamicTable.configureView.groupBy', 'Group by')}</span>\n            <button onClick={clearAll} className=\"hot-config-clear-btn\">\n              {t('dynamicTable.configureView.clearAll', 'Clear all')}\n            </button>\n          </div>\n          {groupRules.map((rule, index) => {\n            const availableColumns = getAvailableColumns(rule.id);\n            const currentColumn = columns.find(c => c.data === rule.field);\n\n            return (\n              <div key={rule.id} className=\"hot-config-sort-row\">\n                <span className=\"hot-config-sort-index\">{index + 1}</span>\n                <SelectMenu\n                  value={rule.field}\n                  onChange={(next) => updateGroupRule(rule.id, { field: next })}\n                  options={[\n                    ...(currentColumn\n                      ? [{ value: currentColumn.data, label: currentColumn.title || currentColumn.data }]\n                      : []),\n                    ...availableColumns\n                      .filter((c) => c.data !== rule.field)\n                      .map((col) => ({ value: col.data, label: col.title || col.data })),\n                  ]}\n                  className=\"hot-config-sort-select\"\n                  ariaLabel={t('dynamicTable.filter.field', 'Field')}\n                />\n                {(() => {\n                  const labels = getSortDirectionLabels(currentColumn?.type);\n                  return (\n                    <SelectMenu\n                      value={rule.direction}\n                      onChange={(next) => updateGroupRule(rule.id, { direction: next as 'asc' | 'desc' })}\n                      options={[\n                        { value: 'asc', label: labels.asc },\n                        { value: 'desc', label: labels.desc },\n                      ]}\n                      className=\"hot-config-sort-direction-select\"\n                      ariaLabel={t('dynamicTable.configureView.direction', 'Direction')}\n                    />\n                  );\n                })()}\n                <button\n                  onClick={() => removeGroupRule(rule.id)}\n                  className=\"hot-config-sort-remove\"\n                >\n                  <X className=\"w-3.5 h-3.5\" />\n                </button>\n              </div>\n            );\n          })}\n        </>\n      )}\n      <button\n        onClick={addGroupRule}\n        disabled={groupRules.length >= columns.length}\n        className=\"hot-config-add-btn\"\n      >\n        <Plus className=\"w-3.5 h-3.5\" aria-hidden />\n        {t('dynamicTable.configureView.addGroup', 'Add group')}\n      </button>\n\n      {/* Per-group aggregations. Only meaningful with a group rule (summary rows\n          render under each group), so gate on that. Ungating this for an\n          ungrouped footer total (TC-APP-420) is a deferred product decision \u2014\n          do not remove the `groupRules.length > 0` condition without it. */}\n      {onAggregationsChange && groupRules.length > 0 && aggregatableColumns.length > 0 && (\n        <div className=\"hot-config-aggregations\">\n          {aggregations.length > 0 && (\n            <div className=\"hot-config-sorting-header\">\n              <span className=\"hot-config-sorting-header-label\">\n                {t('dynamicTable.configureView.sumBy', 'Sum by')}\n              </span>\n              <button onClick={() => onAggregationsChange([])} className=\"hot-config-clear-btn\">\n                {t('dynamicTable.configureView.clearAll', 'Clear all')}\n              </button>\n            </div>\n          )}\n          {aggregations.map((rule, index) => {\n            const cols = availableAggColumns(rule.field);\n            const currentColumn = columnByField.get(rule.field);\n            const fnOptions = aggregationFnsForColumnType(currentColumn?.type);\n            return (\n              <div key={rule.id} className=\"hot-config-sort-row\">\n                <span className=\"hot-config-sort-index\">{index + 1}</span>\n                <SelectMenu\n                  value={rule.field}\n                  onChange={(next) => updateAggregation(rule.id, { field: next })}\n                  options={[\n                    ...(currentColumn\n                      ? [{ value: currentColumn.data, label: currentColumn.title || currentColumn.data }]\n                      : []),\n                    ...cols\n                      .filter((c) => c.data !== rule.field)\n                      .map((col) => ({ value: col.data, label: col.title || col.data })),\n                  ]}\n                  className=\"hot-config-sort-select\"\n                  ariaLabel={t('dynamicTable.filter.field', 'Field')}\n                />\n                <SelectMenu\n                  value={rule.fn}\n                  onChange={(next) => updateAggregation(rule.id, { fn: next as AggregationFn })}\n                  options={fnOptions.map((fn) => ({ value: fn, label: aggFnLabel(fn) }))}\n                  className=\"hot-config-sort-direction-select\"\n                  ariaLabel={t('dynamicTable.configureView.aggregationFn', 'Function')}\n                  dataAttributes={{ 'data-agg-fn-select': rule.field }}\n                />\n                <button\n                  onClick={() => removeAggregation(rule.id)}\n                  className=\"hot-config-sort-remove\"\n                >\n                  <X className=\"w-3.5 h-3.5\" />\n                </button>\n              </div>\n            );\n          })}\n          <button\n            onClick={addAggregation}\n            disabled={aggregations.length >= aggregatableColumns.length}\n            className=\"hot-config-add-btn\"\n          >\n            <Plus className=\"w-3.5 h-3.5\" aria-hidden />\n            {t('dynamicTable.configureView.addSum', 'Add sum')}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ConfigureViewGrouping;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/backend/dynamic-table/components/ConfigureViewLinkedColumns.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { lookupColumnDataKey } from "../utils/lookupColumns.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../../primitives/popover.js";
+function prefixedLabel(sourceLabel, fieldLabel) {
+  return `${sourceLabel} \xB7 ${fieldLabel}`;
+}
+const ConfigureViewLinkedColumns = ({
+  lookupColumns,
+  onLookupColumnsChange,
+  loadLookupSources,
+  visibleColumns,
+  hiddenColumns,
+  onColumnVisibilityChange
+}) => {
+  const t = useT();
+  const [sources, setSources] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    loadLookupSources().then((result) => {
+      if (!cancelled) setSources(result);
+    }).catch(() => {
+      if (!cancelled) setSources([]);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [loadLookupSources]);
+  const linkedKeys = useMemo(
+    () => Array.from(new Set(lookupColumns.map((r) => r.source))),
+    [lookupColumns]
+  );
+  const selectedSources = useMemo(
+    () => sources.filter((s) => linkedKeys.includes(s.key)),
+    [sources, linkedKeys]
+  );
+  const setLinkedSources = useCallback(
+    (nextKeys) => {
+      const nextSet = new Set(nextKeys);
+      const currentSet = new Set(lookupColumns.map((r) => r.source));
+      const added = nextKeys.filter((k) => !currentSet.has(k));
+      const removed = [...currentSet].filter((k) => !nextSet.has(k));
+      let refs = lookupColumns.filter((r) => nextSet.has(r.source));
+      for (const key of added) {
+        const src = sources.find((s) => s.key === key);
+        if (!src) continue;
+        refs = [
+          ...refs,
+          ...src.fields.map((f) => ({
+            source: src.key,
+            field: f.key,
+            label: prefixedLabel(src.label, f.label)
+          }))
+        ];
+      }
+      onLookupColumnsChange(refs);
+      const addedKeys = added.flatMap((key) => {
+        const src = sources.find((s) => s.key === key);
+        return src ? src.fields.map((f) => lookupColumnDataKey({ source: src.key, field: f.key })) : [];
+      });
+      const removedKeys = removed.flatMap(
+        (key) => lookupColumns.filter((r) => r.source === key).map(lookupColumnDataKey)
+      );
+      onColumnVisibilityChange(
+        visibleColumns.filter((k) => !removedKeys.includes(k)),
+        [
+          ...hiddenColumns.filter((k) => !removedKeys.includes(k)),
+          ...addedKeys.filter((k) => !hiddenColumns.includes(k) && !visibleColumns.includes(k))
+        ]
+      );
+    },
+    [lookupColumns, sources, onLookupColumnsChange, visibleColumns, hiddenColumns, onColumnVisibilityChange]
+  );
+  const toggleSource = useCallback(
+    (key) => {
+      setLinkedSources(
+        linkedKeys.includes(key) ? linkedKeys.filter((k) => k !== key) : [...linkedKeys, key]
+      );
+    },
+    [linkedKeys, setLinkedSources]
+  );
+  const countLabel = useCallback(
+    (n) => t("dynamicTable.configureView.linkedColumnsCount", "{n} columns").replace("{n}", String(n)),
+    [t]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "hot-config-linked", children: /* @__PURE__ */ jsx("p", { className: "hot-config-empty-hint", children: t("dynamicTable.configureView.loading", "Loading\u2026") }) });
+  }
+  if (sources.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "hot-config-linked", children: /* @__PURE__ */ jsx("p", { className: "hot-config-empty-hint", children: t("dynamicTable.configureView.linkedSourcesNone", "No related tables to link to.") }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "hot-config-linked", children: [
+    /* @__PURE__ */ jsx("p", { className: "hot-config-linked-hint", children: t(
+      "dynamicTable.configureView.linkedSourcesHint",
+      "Link related tables. Their columns become available in the field list above (prefixed) \u2014 switch on the ones you want."
+    ) }),
+    selectedSources.length > 0 && /* @__PURE__ */ jsx("div", { className: "hot-config-linked-ms-chips", children: selectedSources.map((s) => /* @__PURE__ */ jsxs("span", { className: "hot-config-linked-ms-chip", children: [
+      s.label,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t("dynamicTable.configureView.remove", "Remove"),
+          className: "hot-config-linked-ms-chip-x",
+          onClick: () => toggleSource(s.key),
+          children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+        }
+      )
+    ] }, s.key)) }),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "hot-config-linked-ms-trigger",
+          "aria-haspopup": "listbox",
+          "aria-expanded": open,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "hot-config-linked-ms-placeholder", children: t("dynamicTable.configureView.linkedSourcesPlaceholder", "Add a related table\u2026") }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 hot-config-linked-ms-chevron" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "hot-select-menu max-h-64 overflow-y-auto p-1",
+          style: { width: "var(--radix-popover-trigger-width)" },
+          children: sources.map((s) => {
+            const on = linkedKeys.includes(s.key);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": on,
+                onClick: () => toggleSource(s.key),
+                className: "flex w-full shrink-0 items-center gap-2.5 rounded-m3-sm px-2 py-2 text-left hover:bg-[var(--m3-state-layer-hover)]",
+                style: { transition: "var(--m3-transition-state)" },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex w-4 shrink-0 items-center justify-center text-[var(--m3-accent)]", children: on && /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) }),
+                  /* @__PURE__ */ jsx("span", { className: `min-w-0 flex-1 truncate text-body-medium-sm ${on ? "text-[var(--m3-accent)]" : "text-m3-on-surface"}`, children: s.label }),
+                  /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-body-regular-xs text-m3-on-surface-variant", children: countLabel(s.fields.length) })
+                ]
+              },
+              s.key
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+};
+var ConfigureViewLinkedColumns_default = ConfigureViewLinkedColumns;
+export {
+  ConfigureViewLinkedColumns_default as default
+};
+//# sourceMappingURL=ConfigureViewLinkedColumns.js.map

package/dist/backend/dynamic-table/components/ConfigureViewLinkedColumns.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/backend/dynamic-table/components/ConfigureViewLinkedColumns.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { Check, ChevronDown, X } from 'lucide-react';\nimport { useT } from '@open-mercato/shared/lib/i18n/context';\nimport { LoadLookupSources, LookupSourceOption } from '../types/index';\nimport { LookupColumnRef } from '../types/perspective';\nimport { lookupColumnDataKey } from '../utils/lookupColumns';\nimport { Popover, PopoverTrigger, PopoverContent } from '../../../primitives/popover';\n\ninterface ConfigureViewLinkedColumnsProps {\n  lookupColumns: LookupColumnRef[];\n  onLookupColumnsChange: (refs: LookupColumnRef[]) => void;\n  loadLookupSources: LoadLookupSources;\n  /** Current column visibility. Linking a source appends its columns to the\n   *  HIDDEN group (available, off by default); unlinking prunes them. */\n  visibleColumns: string[];\n  hiddenColumns: string[];\n  onColumnVisibilityChange: (visible: string[], hidden: string[]) => void;\n}\n\n/**\n * A linked column's display name is the related table prefixed onto the field\n * label, e.g. `Contractor \u00B7 Official name`. Fixed \u2014 the user never renames it.\n */\nfunction prefixedLabel(sourceLabel: string, fieldLabel: string): string {\n  return `${sourceLabel} \u00B7 ${fieldLabel}`;\n}\n\n/**\n * \"Linked sources\": a custom multiselect of related tables. Linking a source\n * makes ALL of its columns *available* in the field list above (prefixed), but\n * switched OFF by default \u2014 the user turns on only the ones they want, like any\n * native column. Unlinking removes them. No per-field picker, no renaming.\n */\nconst ConfigureViewLinkedColumns: React.FC<ConfigureViewLinkedColumnsProps> = ({\n  lookupColumns,\n  onLookupColumnsChange,\n  loadLookupSources,\n  visibleColumns,\n  hiddenColumns,\n  onColumnVisibilityChange,\n}) => {\n  const t = useT();\n\n  const [sources, setSources] = useState<LookupSourceOption[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    loadLookupSources()\n      .then((result) => {\n        if (!cancelled) setSources(result);\n      })\n      .catch(() => {\n        if (!cancelled) setSources([]);\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [loadLookupSources]);\n\n  const linkedKeys = useMemo(\n    () => Array.from(new Set(lookupColumns.map((r) => r.source))),\n    [lookupColumns],\n  );\n\n  const selectedSources = useMemo(\n    () => sources.filter((s) => linkedKeys.includes(s.key)),\n    [sources, linkedKeys],\n  );\n\n  // Reconcile the whole linked-source selection at once. Added sources contribute\n  // all their columns to the hidden group; removed sources have their columns\n  // pruned from both groups.\n  const setLinkedSources = useCallback(\n    (nextKeys: string[]) => {\n      const nextSet = new Set(nextKeys);\n      const currentSet = new Set(lookupColumns.map((r) => r.source));\n      const added = nextKeys.filter((k) => !currentSet.has(k));\n      const removed = [...currentSet].filter((k) => !nextSet.has(k));\n\n      let refs = lookupColumns.filter((r) => nextSet.has(r.source));\n      for (const key of added) {\n        const src = sources.find((s) => s.key === key);\n        if (!src) continue;\n        refs = [\n          ...refs,\n          ...src.fields.map((f) => ({\n            source: src.key,\n            field: f.key,\n            label: prefixedLabel(src.label, f.label),\n          })),\n        ];\n      }\n      onLookupColumnsChange(refs);\n\n      const addedKeys = added.flatMap((key) => {\n        const src = sources.find((s) => s.key === key);\n        return src\n          ? src.fields.map((f) => lookupColumnDataKey({ source: src.key, field: f.key }))\n          : [];\n      });\n      const removedKeys = removed.flatMap((key) =>\n        lookupColumns.filter((r) => r.source === key).map(lookupColumnDataKey),\n      );\n\n      onColumnVisibilityChange(\n        visibleColumns.filter((k) => !removedKeys.includes(k)),\n        [\n          ...hiddenColumns.filter((k) => !removedKeys.includes(k)),\n          ...addedKeys.filter((k) => !hiddenColumns.includes(k) && !visibleColumns.includes(k)),\n        ],\n      );\n    },\n    [lookupColumns, sources, onLookupColumnsChange, visibleColumns, hiddenColumns, onColumnVisibilityChange],\n  );\n\n  const toggleSource = useCallback(\n    (key: string) => {\n      setLinkedSources(\n        linkedKeys.includes(key) ? linkedKeys.filter((k) => k !== key) : [...linkedKeys, key],\n      );\n    },\n    [linkedKeys, setLinkedSources],\n  );\n\n  const countLabel = useCallback(\n    (n: number) => t('dynamicTable.configureView.linkedColumnsCount', '{n} columns').replace('{n}', String(n)),\n    [t],\n  );\n\n  if (loading) {\n    return (\n      <div className=\"hot-config-linked\">\n        <p className=\"hot-config-empty-hint\">{t('dynamicTable.configureView.loading', 'Loading\u2026')}</p>\n      </div>\n    );\n  }\n\n  if (sources.length === 0) {\n    return (\n      <div className=\"hot-config-linked\">\n        <p className=\"hot-config-empty-hint\">\n          {t('dynamicTable.configureView.linkedSourcesNone', 'No related tables to link to.')}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"hot-config-linked\">\n      <p className=\"hot-config-linked-hint\">\n        {t(\n          'dynamicTable.configureView.linkedSourcesHint',\n          'Link related tables. Their columns become available in the field list above (prefixed) \u2014 switch on the ones you want.',\n        )}\n      </p>\n\n      {/* Selected sources as removable chips (outside the trigger to avoid\n          nested interactive elements). */}\n      {selectedSources.length > 0 && (\n        <div className=\"hot-config-linked-ms-chips\">\n          {selectedSources.map((s) => (\n            <span key={s.key} className=\"hot-config-linked-ms-chip\">\n              {s.label}\n              <button\n                type=\"button\"\n                aria-label={t('dynamicTable.configureView.remove', 'Remove')}\n                className=\"hot-config-linked-ms-chip-x\"\n                onClick={() => toggleSource(s.key)}\n              >\n                <X className=\"w-3 h-3\" />\n              </button>\n            </span>\n          ))}\n        </div>\n      )}\n\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            className=\"hot-config-linked-ms-trigger\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={open}\n          >\n            <span className=\"hot-config-linked-ms-placeholder\">\n              {t('dynamicTable.configureView.linkedSourcesPlaceholder', 'Add a related table\u2026')}\n            </span>\n            <ChevronDown className=\"w-4 h-4 hot-config-linked-ms-chevron\" />\n          </button>\n        </PopoverTrigger>\n        {/* `hot-select-menu` is what makes this popover one of the grid's menus\n            rather than a shadcn card: it joins the shell block in\n            ContextMenu.css, so the surface, the soft outline, the 12px corner\n            and the M3 elevation are the SAME declarations every other\n            DynamicTable dropdown reads \u2014 a Popover default of `bg-popover` +\n            `shadow-md` + an 8px corner sat pixels away from those menus inside\n            the same Configure View drawer. Those sheets are imported unlayered,\n            so they win over the primitive's utilities without `!important`. */}\n        <PopoverContent\n          align=\"start\"\n          sideOffset={4}\n          className=\"hot-select-menu max-h-64 overflow-y-auto p-1\"\n          style={{ width: 'var(--radix-popover-trigger-width)' }}\n        >\n          {sources.map((s) => {\n            const on = linkedKeys.includes(s.key);\n            return (\n              <button\n                key={s.key}\n                type=\"button\"\n                role=\"option\"\n                aria-selected={on}\n                onClick={() => toggleSource(s.key)}\n                /* `shrink-0` is load-bearing now that the shell is a flex\n                   column with a max-height: without it a long source list is\n                   SQUASHED to fit instead of scrolling, exactly as\n                   `.hot-select-menu-option` guards against. 8px corner is the\n                   concentric radius inside the menu's 12px. */\n                className=\"flex w-full shrink-0 items-center gap-2.5 rounded-m3-sm px-2 py-2 text-left hover:bg-[var(--m3-state-layer-hover)]\"\n                style={{ transition: 'var(--m3-transition-state)' }}\n              >\n                <span className=\"flex w-4 shrink-0 items-center justify-center text-[var(--m3-accent)]\">\n                  {on && <Check className=\"h-3.5 w-3.5\" />}\n                </span>\n                {/* `text-body-medium-sm` is 14/20 at weight 500 \u2014 the exact\n                    metrics of the `text-sm font-medium` it replaces, so the row\n                    box does not move. */}\n                <span className={`min-w-0 flex-1 truncate text-body-medium-sm ${on ? 'text-[var(--m3-accent)]' : 'text-m3-on-surface'}`}>\n                  {s.label}\n                </span>\n                <span className=\"whitespace-nowrap text-body-regular-xs text-m3-on-surface-variant\">\n                  {countLabel(s.fields.length)}\n                </span>\n              </button>\n            );\n          })}\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n};\n\nexport default ConfigureViewLinkedColumns;\n"],
+  "mappings": "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",
+  "names": []
+}