vastgrid 0.1.1 → 0.2.0

package/dist/react/column-menu.js

@@ -0,0 +1,1311 @@
+import { c as _c } from "react/compiler-runtime";
+import { use, useEffect, useId, useLayoutEffect, useRef, useState, useTransition } from "react";
+import { isBlank, joinParts, measureTakes, textOf } from "vastgrid-spec";
+import { conditionsOf, FilterTextError, filterParts, operatorsFor, readFilter, takesNoValue } from "../core/filters.js";
+import { measureName, offers, statisticsOf, TOTALS } from "../core/measures.js";
+import { LocaleContext } from "./context.js";
+import { FormatForm } from "./format-form.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+
+/** Where the column menu opens: a column of the view, at a point of the page. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The key of a value in the list; blank values (§3.2) share one. */
+const BLANK = "\u0000blank";
+function keyOf(value, column) {
+  return isBlank(value, column) ? BLANK : JSON.stringify(value);
+}
+
+/** `filter.column` with the parts of a filter, or null when its text is not a value of the column. */
+function filterCommand(filter, column) {
+  let parts = [];
+  try {
+    if (filter) parts = filterParts(filter, column);
+  } catch (cause) {
+    if (cause instanceof FilterTextError) return null;
+    throw cause;
+  }
+  return {
+    command: "filter.column",
+    column: column.name,
+    where: joinParts(parts) ?? null
+  };
+}
+
+/** How long typing in the values' search box must pause before the list is read again. */
+const SEARCH_DELAY = 250;
+
+/**
+ * The filter of one column (§6.2.1): a list of its values with how many rows have each, read under the other
+ * filters (`GridStore.values`) when the engine groups rows, and a condition on typed text. Applying dispatches
+ * `filter.column` with the parts it makes, replacing the column's conditions.
+ */
+function FilterForm(t0) {
+  const $ = _c(118);
+  const {
+    column,
+    onDone
+  } = t0;
+  const store = useGridStore();
+  const {
+    messages,
+    number
+  } = use(LocaleContext);
+  const id = useId();
+  const parts = useGridSelector(_temp);
+  const lists = useGridSelector(_temp2);
+  let t1;
+  if ($[0] !== column.name || $[1] !== parts) {
+    t1 = () => readFilter(conditionsOf(parts, column.name), column.name);
+    $[0] = column.name;
+    $[1] = parts;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const [initial] = useState(t1);
+  const read = initial === "other" ? null : initial;
+  const operators = operatorsFor(column.type);
+  const [search, setSearch] = useState("");
+  const [list, setList] = useState(null);
+  const [failure, setFailure] = useState(null);
+  let t2;
+  if ($[3] !== read) {
+    t2 = () => !(read?.kind === "values" && !read.exclude);
+    $[3] = read;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const [base, setBase] = useState(t2);
+  let t3;
+  if ($[5] !== column || $[6] !== read) {
+    t3 = () => {
+      const map = new Map();
+      if (read?.kind !== "values") {
+        return map;
+      }
+      for (const value of read.values) {
+        map.set(keyOf(value, column), value);
+      }
+      if (read.blank) {
+        map.set(BLANK, null);
+      }
+      return map;
+    };
+    $[5] = column;
+    $[6] = read;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const [toggled, setToggled] = useState(t3);
+  const [operator, setOperator] = useState(read?.kind === "condition" && operators.includes(read.operator) ? read.operator : "none");
+  const [first, setFirst] = useState(read?.kind === "condition" ? read.first : "");
+  const [second, setSecond] = useState(read?.kind === "condition" ? read.second : "");
+  const [error, setError] = useState(null);
+  const [pending, startApply] = useTransition();
+  let t4;
+  let t5;
+  if ($[8] !== column.name || $[9] !== lists || $[10] !== search || $[11] !== store) {
+    t4 = () => {
+      if (!lists) {
+        return;
+      }
+      const abort = new AbortController();
+      const timer = setTimeout(() => {
+        store.values(column.name, {
+          search
+        }, abort.signal).then(result => {
+          setList(result);
+          setFailure(null);
+        }).catch(cause => {
+          if (!abort.signal.aborted) {
+            setFailure(cause instanceof Error ? cause.message : String(cause));
+          }
+        });
+      }, search ? SEARCH_DELAY : 0);
+      return () => {
+        clearTimeout(timer);
+        abort.abort();
+      };
+    };
+    t5 = [store, lists, column.name, search];
+    $[8] = column.name;
+    $[9] = lists;
+    $[10] = search;
+    $[11] = store;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t4 = $[12];
+    t5 = $[13];
+  }
+  useEffect(t4, t5);
+  let apply;
+  let conditionOn;
+  let t10;
+  let t11;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[14] !== base || $[15] !== column || $[16] !== failure || $[17] !== first || $[18] !== id || $[19] !== initial || $[20] !== list || $[21] !== lists || $[22] !== messages || $[23] !== number || $[24] !== onDone || $[25] !== operator || $[26] !== search || $[27] !== second || $[28] !== store || $[29] !== toggled) {
+    const items = [];
+    for (const item of list?.values ?? []) {
+      const key = keyOf(item.value, column);
+      const same = items.find(other => other.key === key);
+      if (same) {
+        same.count = same.count + item.count;
+      } else {
+        items.push({
+          key,
+          value: item.value,
+          count: item.count
+        });
+      }
+    }
+    const checked = key_0 => toggled.has(key_0) ? !base : base;
+    conditionOn = operator !== "none";
+    const allChecked = toggled.size === 0 ? base : base && items.every(item_0 => checked(item_0.key));
+    const toggle = (key_1, value_0) => setToggled(current => {
+      const next = new Map(current);
+      if (next.has(key_1)) {
+        next.delete(key_1);
+      } else {
+        next.set(key_1, value_0);
+      }
+      return next;
+    });
+    let t12;
+    if ($[38] !== base || $[39] !== conditionOn || $[40] !== first || $[41] !== operator || $[42] !== second || $[43] !== toggled) {
+      t12 = () => {
+        if (conditionOn) {
+          return {
+            kind: "condition",
+            operator,
+            first,
+            second
+          };
+        }
+        if (base && toggled.size === 0) {
+          return null;
+        }
+        const values = [...toggled].flatMap(_temp3);
+        return {
+          kind: "values",
+          values,
+          blank: toggled.has(BLANK),
+          exclude: base
+        };
+      };
+      $[38] = base;
+      $[39] = conditionOn;
+      $[40] = first;
+      $[41] = operator;
+      $[42] = second;
+      $[43] = toggled;
+      $[44] = t12;
+    } else {
+      t12 = $[44];
+    }
+    const filterOf = t12;
+    let t13;
+    if ($[45] !== column || $[46] !== messages || $[47] !== onDone || $[48] !== store) {
+      t13 = filter => {
+        const command = filterCommand(filter, column);
+        if (!command) {
+          setError(messages.invalidValue(column.name));
+          return;
+        }
+        startApply(async () => {
+          const outcome = await store.dispatch(command);
+          if (!outcome.ok) {
+            setError(outcome.error.message);
+            return;
+          }
+          onDone();
+        });
+      };
+      $[45] = column;
+      $[46] = messages;
+      $[47] = onDone;
+      $[48] = store;
+      $[49] = t13;
+    } else {
+      t13 = $[49];
+    }
+    apply = t13;
+    let t14;
+    if ($[50] !== apply || $[51] !== filterOf) {
+      t14 = event => {
+        event.preventDefault();
+        apply(filterOf());
+      };
+      $[50] = apply;
+      $[51] = filterOf;
+      $[52] = t14;
+    } else {
+      t14 = $[52];
+    }
+    const submit = t14;
+    const label = value_2 => isBlank(value_2, column) ? messages.blank : textOf(value_2, column) ?? "";
+    t6 = "vg-filter";
+    t7 = submit;
+    t8 = `${id}-title`;
+    const t15 = `${id}-title`;
+    let t16;
+    if ($[53] !== column.name || $[54] !== messages) {
+      t16 = messages.filterBy(column.name);
+      $[53] = column.name;
+      $[54] = messages;
+      $[55] = t16;
+    } else {
+      t16 = $[55];
+    }
+    if ($[56] !== t15 || $[57] !== t16) {
+      t9 = /*#__PURE__*/_jsx("p", {
+        className: "vg-filter__title",
+        id: t15,
+        children: t16
+      });
+      $[56] = t15;
+      $[57] = t16;
+      $[58] = t9;
+    } else {
+      t9 = $[58];
+    }
+    if ($[59] !== initial || $[60] !== messages.otherConditions) {
+      t10 = initial === "other" && /*#__PURE__*/_jsx("p", {
+        className: "vg-filter__note",
+        children: messages.otherConditions
+      });
+      $[59] = initial;
+      $[60] = messages.otherConditions;
+      $[61] = t10;
+    } else {
+      t10 = $[61];
+    }
+    t11 = lists && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "search",
+        className: "vg-input",
+        "aria-label": messages.valuesSearch,
+        placeholder: messages.valuesSearch,
+        value: search,
+        disabled: conditionOn,
+        onChange: event_0 => setSearch(event_0.target.value)
+      }), /*#__PURE__*/_jsxs("fieldset", {
+        className: "vg-filter__values",
+        "aria-labelledby": `${id}-title`,
+        "aria-busy": list === null,
+        disabled: conditionOn,
+        children: [!search && /*#__PURE__*/_jsxs("label", {
+          className: "vg-filter__value",
+          children: [/*#__PURE__*/_jsx("input", {
+            type: "checkbox",
+            checked: allChecked,
+            onChange: event_1 => {
+              setBase(event_1.target.checked);
+              setToggled(new Map());
+            }
+          }), /*#__PURE__*/_jsx("span", {
+            children: messages.selectAll
+          })]
+        }), items.map(item_1 => /*#__PURE__*/_jsxs("label", {
+          className: "vg-filter__value",
+          children: [/*#__PURE__*/_jsx("input", {
+            type: "checkbox",
+            checked: checked(item_1.key),
+            onChange: () => toggle(item_1.key, item_1.value)
+          }), /*#__PURE__*/_jsx("span", {
+            className: "vg-filter__label",
+            children: label(item_1.value)
+          }), /*#__PURE__*/_jsx("span", {
+            className: "vg-filter__count",
+            children: number.format(item_1.count)
+          })]
+        }, item_1.key)), list === null && failure === null && /*#__PURE__*/_jsx("p", {
+          className: "vg-filter__note",
+          children: messages.loading
+        }), failure !== null && /*#__PURE__*/_jsx("p", {
+          className: "vg-filter__error",
+          children: messages.failed(failure)
+        })]
+      }), list?.truncated && /*#__PURE__*/_jsx("p", {
+        className: "vg-filter__note",
+        children: messages.valuesTruncated(number.format(list.values.length))
+      })]
+    });
+    $[14] = base;
+    $[15] = column;
+    $[16] = failure;
+    $[17] = first;
+    $[18] = id;
+    $[19] = initial;
+    $[20] = list;
+    $[21] = lists;
+    $[22] = messages;
+    $[23] = number;
+    $[24] = onDone;
+    $[25] = operator;
+    $[26] = search;
+    $[27] = second;
+    $[28] = store;
+    $[29] = toggled;
+    $[30] = apply;
+    $[31] = conditionOn;
+    $[32] = t10;
+    $[33] = t11;
+    $[34] = t6;
+    $[35] = t7;
+    $[36] = t8;
+    $[37] = t9;
+  } else {
+    apply = $[30];
+    conditionOn = $[31];
+    t10 = $[32];
+    t11 = $[33];
+    t6 = $[34];
+    t7 = $[35];
+    t8 = $[36];
+    t9 = $[37];
+  }
+  const t12 = "vg-filter__condition";
+  let t13;
+  if ($[62] !== messages.condition) {
+    t13 = /*#__PURE__*/_jsx("legend", {
+      children: messages.condition
+    });
+    $[62] = messages.condition;
+    $[63] = t13;
+  } else {
+    t13 = $[63];
+  }
+  const t14 = "vg-input";
+  const t15 = messages.condition;
+  let t16;
+  if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = event_2 => setOperator(event_2.target.value);
+    $[64] = t16;
+  } else {
+    t16 = $[64];
+  }
+  let t17;
+  if ($[65] !== messages.conditionNone) {
+    t17 = /*#__PURE__*/_jsx("option", {
+      value: "none",
+      children: messages.conditionNone
+    });
+    $[65] = messages.conditionNone;
+    $[66] = t17;
+  } else {
+    t17 = $[66];
+  }
+  let t18;
+  if ($[67] !== messages.operators) {
+    t18 = item_2 => /*#__PURE__*/_jsx("option", {
+      value: item_2,
+      children: messages.operators[item_2]
+    }, item_2);
+    $[67] = messages.operators;
+    $[68] = t18;
+  } else {
+    t18 = $[68];
+  }
+  const t19 = operators.map(t18);
+  let t20;
+  if ($[69] !== messages.condition || $[70] !== operator || $[71] !== t16 || $[72] !== t17 || $[73] !== t19) {
+    t20 = /*#__PURE__*/_jsxs("select", {
+      className: t14,
+      "aria-label": t15,
+      value: operator,
+      onChange: t16,
+      children: [t17, t19]
+    });
+    $[69] = messages.condition;
+    $[70] = operator;
+    $[71] = t16;
+    $[72] = t17;
+    $[73] = t19;
+    $[74] = t20;
+  } else {
+    t20 = $[74];
+  }
+  let t21;
+  if ($[75] !== conditionOn || $[76] !== error || $[77] !== first || $[78] !== messages.minimum || $[79] !== messages.value || $[80] !== operator || $[81] !== setFirst) {
+    t21 = conditionOn && !takesNoValue(operator) && /*#__PURE__*/_jsx("input", {
+      className: "vg-input",
+      "aria-label": operator === "between" ? messages.minimum : messages.value,
+      placeholder: operator === "between" ? messages.minimum : messages.value,
+      "aria-invalid": error !== null,
+      value: first,
+      onChange: event_3 => setFirst(event_3.target.value)
+    });
+    $[75] = conditionOn;
+    $[76] = error;
+    $[77] = first;
+    $[78] = messages.minimum;
+    $[79] = messages.value;
+    $[80] = operator;
+    $[81] = setFirst;
+    $[82] = t21;
+  } else {
+    t21 = $[82];
+  }
+  let t22;
+  if ($[83] !== error || $[84] !== messages.maximum || $[85] !== operator || $[86] !== second || $[87] !== setSecond) {
+    t22 = operator === "between" && /*#__PURE__*/_jsx("input", {
+      className: "vg-input",
+      "aria-label": messages.maximum,
+      placeholder: messages.maximum,
+      "aria-invalid": error !== null,
+      value: second,
+      onChange: event_4 => setSecond(event_4.target.value)
+    });
+    $[83] = error;
+    $[84] = messages.maximum;
+    $[85] = operator;
+    $[86] = second;
+    $[87] = setSecond;
+    $[88] = t22;
+  } else {
+    t22 = $[88];
+  }
+  let t23;
+  if ($[89] !== t13 || $[90] !== t20 || $[91] !== t21 || $[92] !== t22) {
+    t23 = /*#__PURE__*/_jsxs("fieldset", {
+      className: t12,
+      children: [t13, t20, t21, t22]
+    });
+    $[89] = t13;
+    $[90] = t20;
+    $[91] = t21;
+    $[92] = t22;
+    $[93] = t23;
+  } else {
+    t23 = $[93];
+  }
+  let t24;
+  if ($[94] !== error) {
+    t24 = error !== null && /*#__PURE__*/_jsx("p", {
+      role: "alert",
+      className: "vg-filter__error",
+      children: error
+    });
+    $[94] = error;
+    $[95] = t24;
+  } else {
+    t24 = $[95];
+  }
+  let t25;
+  if ($[96] !== apply) {
+    t25 = () => apply(null);
+    $[96] = apply;
+    $[97] = t25;
+  } else {
+    t25 = $[97];
+  }
+  let t26;
+  if ($[98] !== messages.clearFilter || $[99] !== pending || $[100] !== t25) {
+    t26 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button",
+      disabled: pending,
+      onClick: t25,
+      children: messages.clearFilter
+    });
+    $[98] = messages.clearFilter;
+    $[99] = pending;
+    $[100] = t25;
+    $[101] = t26;
+  } else {
+    t26 = $[101];
+  }
+  let t27;
+  if ($[102] !== messages.apply || $[103] !== pending) {
+    t27 = /*#__PURE__*/_jsx("button", {
+      type: "submit",
+      className: "vg-button vg-button--primary",
+      disabled: pending,
+      children: messages.apply
+    });
+    $[102] = messages.apply;
+    $[103] = pending;
+    $[104] = t27;
+  } else {
+    t27 = $[104];
+  }
+  let t28;
+  if ($[105] !== t26 || $[106] !== t27) {
+    t28 = /*#__PURE__*/_jsxs("div", {
+      className: "vg-filter__actions",
+      children: [t26, t27]
+    });
+    $[105] = t26;
+    $[106] = t27;
+    $[107] = t28;
+  } else {
+    t28 = $[107];
+  }
+  let t29;
+  if ($[108] !== t10 || $[109] !== t11 || $[110] !== t23 || $[111] !== t24 || $[112] !== t28 || $[113] !== t6 || $[114] !== t7 || $[115] !== t8 || $[116] !== t9) {
+    t29 = /*#__PURE__*/_jsxs("form", {
+      className: t6,
+      onSubmit: t7,
+      "aria-labelledby": t8,
+      children: [t9, t10, t11, t23, t24, t28]
+    });
+    $[108] = t10;
+    $[109] = t11;
+    $[110] = t23;
+    $[111] = t24;
+    $[112] = t28;
+    $[113] = t6;
+    $[114] = t7;
+    $[115] = t8;
+    $[116] = t9;
+    $[117] = t29;
+  } else {
+    t29 = $[117];
+  }
+  return t29;
+}
+
+/**
+ * The statistics of a column over the rows of the view (`GridStore.aggregate`): the rows, the values and the empty
+ * ones, the distinct values, and the measures that take its type, read by the engine when the panel opens.
+ */
+function _temp3(t0) {
+  const [key_2, value_1] = t0;
+  return key_2 === BLANK ? [] : [value_1];
+}
+function _temp2(snapshot_0) {
+  const capabilities = snapshot_0.table?.capabilities;
+  return capabilities?.plan?.aggregate !== false && (capabilities?.measures?.includes("count") ?? true);
+}
+function _temp(snapshot) {
+  return snapshot.document.plan?.where;
+}
+function Statistics(t0) {
+  const $ = _c(32);
+  const {
+    column
+  } = t0;
+  const store = useGridStore();
+  const {
+    messages,
+    number
+  } = use(LocaleContext);
+  const capabilities = useGridSelector(_temp4);
+  const [result, setResult] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const statistics = statisticsOf(column, capabilities);
+  let t1;
+  let t2;
+  if ($[0] !== capabilities || $[1] !== column || $[2] !== store) {
+    t1 = () => {
+      const abort = new AbortController();
+      store.aggregate(statisticsOf(column, capabilities).map(_temp5), abort.signal).then(read => {
+        setResult(read);
+        setFailure(null);
+      }).catch(cause => {
+        if (!abort.signal.aborted) {
+          setFailure(cause instanceof Error ? cause.message : String(cause));
+        }
+      });
+      return () => abort.abort();
+    };
+    t2 = [store, column, capabilities];
+    $[0] = capabilities;
+    $[1] = column;
+    $[2] = store;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t1 = $[3];
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== column || $[6] !== number || $[7] !== result?.columns || $[8] !== result?.values) {
+    t3 = name => {
+      const value = result?.values[name];
+      if (value === undefined || value === null) {
+        return "";
+      }
+      if (typeof value === "number") {
+        return number.format(value);
+      }
+      return textOf(value, result?.columns[name] ?? column) ?? "";
+    };
+    $[5] = column;
+    $[6] = number;
+    $[7] = result?.columns;
+    $[8] = result?.values;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const text = t3;
+  const rows = Number(result?.values.rows ?? 0);
+  const values = Number(result?.values.values ?? 0);
+  const t4 = "vg-statistics";
+  let t5;
+  if ($[10] !== column.name || $[11] !== messages) {
+    t5 = messages.statisticsOf(column.name);
+    $[10] = column.name;
+    $[11] = messages;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const t6 = result === null;
+  let t7;
+  if ($[13] !== column.name || $[14] !== messages) {
+    t7 = messages.statisticsOf(column.name);
+    $[13] = column.name;
+    $[14] = messages;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== t7) {
+    t8 = /*#__PURE__*/_jsx("p", {
+      className: "vg-filter__title",
+      children: t7
+    });
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== failure || $[19] !== messages) {
+    t9 = failure !== null && /*#__PURE__*/_jsx("p", {
+      className: "vg-filter__error",
+      children: messages.failed(failure)
+    });
+    $[18] = failure;
+    $[19] = messages;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  let t10;
+  if ($[21] !== failure || $[22] !== messages.loading || $[23] !== result) {
+    t10 = failure === null && result === null && /*#__PURE__*/_jsx("p", {
+      className: "vg-filter__note",
+      children: messages.loading
+    });
+    $[21] = failure;
+    $[22] = messages.loading;
+    $[23] = result;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  const t11 = result && /*#__PURE__*/_jsx("dl", {
+    className: "vg-statistics__list",
+    children: statistics.flatMap(statistic_0 => [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("dt", {
+        children: messages.statisticNames[statistic_0.kind]
+      }), /*#__PURE__*/_jsx("dd", {
+        children: text(statistic_0.kind)
+      })]
+    }, statistic_0.kind), ...(statistic_0.kind === "values" ? [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("dt", {
+        children: messages.statisticNames.nulls
+      }), /*#__PURE__*/_jsx("dd", {
+        children: number.format(rows - values)
+      })]
+    }, "nulls")] : [])])
+  });
+  let t12;
+  if ($[25] !== t10 || $[26] !== t11 || $[27] !== t5 || $[28] !== t6 || $[29] !== t8 || $[30] !== t9) {
+    t12 = /*#__PURE__*/_jsxs("section", {
+      className: t4,
+      "aria-label": t5,
+      "aria-busy": t6,
+      children: [t8, t9, t10, t11]
+    });
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t5;
+    $[28] = t6;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  return t12;
+}
+
+/**
+ * The menu of a column of the view, opened from its header (the arrow at its right, a right click, or Alt+↓ on the
+ * active cell): sorting by it (§6.2), its filter, and its pin, width and visibility (§6.3), all as commands. It is
+ * a popover: Esc and a click outside close it, and the focus goes back to the grid.
+ */
+function _temp5(statistic) {
+  return statistic.measure;
+}
+function _temp4(snapshot) {
+  return snapshot.table?.capabilities;
+}
+export function ColumnMenu(t0) {
+  const $ = _c(71);
+  const {
+    target,
+    onClose
+  } = t0;
+  const store = useGridStore();
+  const {
+    messages
+  } = use(LocaleContext);
+  const ref = useRef(null);
+  const [panel, setPanel] = useState(null);
+  const [shown, setShown] = useState(target);
+  if (shown !== target) {
+    setShown(target);
+    setPanel(null);
+  }
+  const name = target?.column;
+  let t1;
+  if ($[0] !== name) {
+    t1 = snapshot => snapshot.displayed.find(entry => entry.column.name === name);
+    $[0] = name;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const item = useGridSelector(t1);
+  const displayed = useGridSelector(_temp6);
+  const hidden = useGridSelector(_temp7);
+  const sort = useGridSelector(_temp8);
+  const aggregate = useGridSelector(_temp9);
+  const grouped = aggregate !== undefined;
+  const capabilities = useGridSelector(_temp0);
+  const ready = useGridSelector(_temp1);
+  let t2;
+  let t3;
+  if ($[2] !== target) {
+    t2 = () => {
+      const menu = ref.current;
+      if (!menu || !target) {
+        return;
+      }
+      if (!menu.matches(":popover-open")) {
+        menu.showPopover();
+      }
+      menu.querySelector("button:not(:disabled), input, select")?.focus();
+    };
+    t3 = [target];
+    $[2] = target;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  useLayoutEffect(t2, t3);
+  let t4;
+  if ($[5] !== target) {
+    t4 = () => {
+      const menu_0 = ref.current;
+      if (!menu_0 || !target) {
+        return;
+      }
+      const rect = menu_0.getBoundingClientRect();
+      menu_0.style.left = `${Math.max(8, Math.min(target.x, window.innerWidth - rect.width - 8))}px`;
+      menu_0.style.top = `${Math.max(8, Math.min(target.y, window.innerHeight - rect.height - 8))}px`;
+    };
+    $[5] = target;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  useLayoutEffect(t4);
+  let t5;
+  if ($[7] !== onClose) {
+    t5 = event => {
+      if (event.newState === "closed") {
+        onClose();
+      }
+    };
+    $[7] = onClose;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const onToggle = t5;
+  if (!target || !item) {
+    let t6;
+    if ($[9] !== onToggle) {
+      t6 = /*#__PURE__*/_jsx("div", {
+        ref: ref,
+        popover: "auto",
+        className: "vg-menu vg-column-menu",
+        onToggle: onToggle
+      });
+      $[9] = onToggle;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    return t6;
+  }
+  const column = item.column;
+  let t6;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => ref.current?.hidePopover();
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  const close = t6;
+  let t7;
+  if ($[12] !== store) {
+    t7 = command => {
+      close();
+      store.dispatch(command);
+    };
+    $[12] = store;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  const run = t7;
+  const sorts = capabilities?.plan?.sort !== false;
+  let t8;
+  if ($[14] !== column.name || $[15] !== sort) {
+    t8 = sort?.find(key => key.column === column.name);
+    $[14] = column.name;
+    $[15] = sort;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const own = t8;
+  let t9;
+  if ($[17] !== sort) {
+    t9 = sort ?? [];
+    $[17] = sort;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== column.name || $[20] !== t9) {
+    let t11;
+    if ($[22] !== column.name) {
+      t11 = key_0 => key_0.column !== column.name;
+      $[22] = column.name;
+      $[23] = t11;
+    } else {
+      t11 = $[23];
+    }
+    t10 = t9.filter(t11);
+    $[19] = column.name;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  const others = t10;
+  let t11;
+  if ($[24] !== column.name || $[25] !== others || $[26] !== run) {
+    t11 = (direction, add) => run({
+      command: "sort.set",
+      keys: [...(add ? others : []), {
+        column: column.name,
+        direction
+      }]
+    });
+    $[24] = column.name;
+    $[25] = others;
+    $[26] = run;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  const sortBy = t11;
+  const filters = ready && !grouped && capabilities?.plan?.where !== false;
+  const pin = item.setting.pin;
+  let t12;
+  if ($[28] !== capabilities || $[29] !== grouped || $[30] !== ready) {
+    t12 = ready && !grouped && offers(capabilities, "count");
+    $[28] = capabilities;
+    $[29] = grouped;
+    $[30] = ready;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  const measures = t12;
+  let t13;
+  if ($[32] !== aggregate || $[33] !== capabilities || $[34] !== column || $[35] !== displayed || $[36] !== filters || $[37] !== grouped || $[38] !== hidden || $[39] !== item.setting || $[40] !== measures || $[41] !== messages || $[42] !== onToggle || $[43] !== others || $[44] !== own?.direction || $[45] !== panel || $[46] !== pin || $[47] !== run || $[48] !== sort || $[49] !== sortBy || $[50] !== sorts) {
+    let t14;
+    if ($[52] !== capabilities || $[53] !== column) {
+      t14 = fn => offers(capabilities, fn) && measureTakes(fn, column);
+      $[52] = capabilities;
+      $[53] = column;
+      $[54] = t14;
+    } else {
+      t14 = $[54];
+    }
+    const totals = TOTALS.filter(t14);
+    let t15;
+    if ($[55] !== aggregate?.keys) {
+      t15 = aggregate?.keys ?? [];
+      $[55] = aggregate?.keys;
+      $[56] = t15;
+    } else {
+      t15 = $[56];
+    }
+    const keys = t15;
+    let t16;
+    if ($[57] !== column.name || $[58] !== run) {
+      t16 = () => run({
+        command: "group.set",
+        aggregate: {
+          keys: [column.name],
+          measures: [{
+            name: measureName("count", undefined, new Set([column.name])),
+            fn: "count"
+          }]
+        }
+      });
+      $[57] = column.name;
+      $[58] = run;
+      $[59] = t16;
+    } else {
+      t16 = $[59];
+    }
+    const groupBy = t16;
+    let t17;
+    if ($[60] !== aggregate || $[61] !== column.name || $[62] !== keys || $[63] !== run) {
+      t17 = () => {
+        const rest = keys.filter(key_1 => key_1 !== column.name);
+        run(rest.length === 0 || !aggregate ? {
+          command: "group.clear"
+        } : {
+          command: "group.set",
+          aggregate: {
+            ...aggregate,
+            keys: rest
+          }
+        });
+      };
+      $[60] = aggregate;
+      $[61] = column.name;
+      $[62] = keys;
+      $[63] = run;
+      $[64] = t17;
+    } else {
+      t17 = $[64];
+    }
+    const ungroupBy = t17;
+    let t18;
+    if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+      t18 = () => setPanel(null);
+      $[65] = t18;
+    } else {
+      t18 = $[65];
+    }
+    let t19;
+    if ($[66] !== messages.back) {
+      t19 = /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: "vg-menu__item",
+        onClick: t18,
+        children: ["\u2190 ", messages.back]
+      });
+      $[66] = messages.back;
+      $[67] = t19;
+    } else {
+      t19 = $[67];
+    }
+    const back = t19;
+    let t20;
+    if ($[68] !== column.name || $[69] !== messages) {
+      t20 = messages.columnMenu(column.name);
+      $[68] = column.name;
+      $[69] = messages;
+      $[70] = t20;
+    } else {
+      t20 = $[70];
+    }
+    t13 = /*#__PURE__*/_jsx("div", {
+      ref: ref,
+      popover: "auto",
+      role: "dialog",
+      className: "vg-menu vg-column-menu",
+      "aria-label": t20,
+      onToggle: onToggle,
+      children: panel === "filter" ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [back, /*#__PURE__*/_jsx(FilterForm, {
+          column: column,
+          onDone: close
+        }, column.name)]
+      }) : panel === "format" ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [back, /*#__PURE__*/_jsx(FormatForm, {
+          column: column,
+          setting: item.setting,
+          onDone: close
+        }, column.name)]
+      }) : panel === "statistics" ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [back, /*#__PURE__*/_jsx(Statistics, {
+          column: column
+        }, column.name)]
+      }) : panel === "total" ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [back, /*#__PURE__*/_jsxs("div", {
+          role: "menu",
+          "aria-label": messages.total,
+          onKeyDown: moveFocus,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            radio: true,
+            checked: item.setting.total === undefined,
+            onClick: () => run({
+              command: "column.total",
+              name: column.name,
+              total: null
+            }),
+            children: messages.noTotal
+          }), totals.map(fn_0 => /*#__PURE__*/_jsx(MenuItem, {
+            radio: true,
+            checked: item.setting.total?.fn === fn_0,
+            onClick: () => run({
+              command: "column.total",
+              name: column.name,
+              total: {
+                fn: fn_0
+              }
+            }),
+            children: messages.measureNames[fn_0]
+          }, fn_0))]
+        })]
+      }) : /*#__PURE__*/_jsxs("div", {
+        role: "menu",
+        "aria-label": messages.columnMenu(column.name),
+        onKeyDown: moveFocus,
+        children: [sorts && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            checked: own?.direction === "asc" && others.length === 0,
+            onClick: () => sortBy("asc", false),
+            children: messages.sortAscending
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            checked: own?.direction === "desc" && others.length === 0,
+            onClick: () => sortBy("desc", false),
+            children: messages.sortDescending
+          }), others.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(MenuItem, {
+              onClick: () => sortBy("asc", true),
+              children: messages.thenSortAscending
+            }), /*#__PURE__*/_jsx(MenuItem, {
+              onClick: () => sortBy("desc", true),
+              children: messages.thenSortDescending
+            })]
+          }), sort && sort.length > 0 && /*#__PURE__*/_jsx(MenuItem, {
+            onClick: () => run({
+              command: "sort.clear"
+            }),
+            children: messages.clearSort
+          }), /*#__PURE__*/_jsx("hr", {
+            className: "vg-menu__line"
+          })]
+        }), filters && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => setPanel("filter"),
+          children: messages.filter
+        }), measures && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => setPanel("statistics"),
+          children: messages.statistics
+        }), !grouped && totals.length > 0 && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => setPanel("total"),
+          children: item.setting.total ? `${messages.total}: ${messages.measureNames[item.setting.total.fn]}` : `${messages.total}…`
+        }), measures && capabilities?.plan?.aggregate !== false && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: groupBy,
+          children: messages.groupByColumn
+        }), keys.includes(column.name) && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: ungroupBy,
+          children: messages.removeFromGroups
+        }), grouped && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => run({
+            command: "group.clear"
+          }),
+          children: messages.ungroup
+        }), (filters || measures || grouped || totals.length > 0) && /*#__PURE__*/_jsx("hr", {
+          className: "vg-menu__line"
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => setPanel("format"),
+          children: messages.format
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => run({
+            command: "column.resize",
+            name: column.name,
+            width: null
+          }),
+          children: messages.autoFit
+        }), pin !== "left" && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => run({
+            command: "column.pin",
+            name: column.name,
+            side: "left"
+          }),
+          children: messages.pinLeft
+        }), pin !== "right" && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => run({
+            command: "column.pin",
+            name: column.name,
+            side: "right"
+          }),
+          children: messages.pinRight
+        }), pin !== undefined && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => run({
+            command: "column.pin",
+            name: column.name,
+            side: null
+          }),
+          children: messages.unpin
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          disabled: displayed <= 1,
+          onClick: () => run({
+            command: "column.hide",
+            names: [column.name]
+          }),
+          children: messages.hideColumn
+        }), hidden && /*#__PURE__*/_jsx(MenuItem, {
+          onClick: () => run({
+            command: "column.show",
+            all: true
+          }),
+          children: messages.showAllColumns
+        })]
+      })
+    });
+    $[32] = aggregate;
+    $[33] = capabilities;
+    $[34] = column;
+    $[35] = displayed;
+    $[36] = filters;
+    $[37] = grouped;
+    $[38] = hidden;
+    $[39] = item.setting;
+    $[40] = measures;
+    $[41] = messages;
+    $[42] = onToggle;
+    $[43] = others;
+    $[44] = own?.direction;
+    $[45] = panel;
+    $[46] = pin;
+    $[47] = run;
+    $[48] = sort;
+    $[49] = sortBy;
+    $[50] = sorts;
+    $[51] = t13;
+  } else {
+    t13 = $[51];
+  }
+  return t13;
+}
+
+/** Arrows, Home and End move the focus among the items of a menu (the menu pattern of the ARIA Authoring Practices). */
+function _temp1(snapshot_5) {
+  return snapshot_5.table?.status === "ready";
+}
+function _temp0(snapshot_4) {
+  return snapshot_4.table?.capabilities;
+}
+function _temp9(snapshot_3) {
+  return snapshot_3.document.plan?.aggregate;
+}
+function _temp8(snapshot_2) {
+  return snapshot_2.document.plan?.sort;
+}
+function _temp7(snapshot_1) {
+  return (snapshot_1.view?.columns.length ?? 0) > snapshot_1.displayed.length;
+}
+function _temp6(snapshot_0) {
+  return snapshot_0.displayed.length;
+}
+function moveFocus(event) {
+  const items = [...event.currentTarget.querySelectorAll("button:not(:disabled)")];
+  const at = items.indexOf(document.activeElement);
+  const next = event.key === "ArrowDown" ? (at + 1) % items.length : event.key === "ArrowUp" ? (at - 1 + items.length) % items.length : event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : -1;
+  if (next < 0 || items.length === 0) return;
+  event.preventDefault();
+  items[next].focus();
+}
+function MenuItem(t0) {
+  const $ = _c(14);
+  const {
+    checked,
+    radio,
+    disabled,
+    onClick,
+    children
+  } = t0;
+  if (checked === undefined) {
+    let t1;
+    if ($[0] !== children || $[1] !== disabled || $[2] !== onClick) {
+      t1 = /*#__PURE__*/_jsx("button", {
+        type: "button",
+        role: "menuitem",
+        className: "vg-menu__item",
+        disabled: disabled,
+        onClick: onClick,
+        children: children
+      });
+      $[0] = children;
+      $[1] = disabled;
+      $[2] = onClick;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
+    }
+    return t1;
+  }
+  if (radio) {
+    let t1;
+    if ($[4] !== checked || $[5] !== children || $[6] !== disabled || $[7] !== onClick) {
+      t1 = /*#__PURE__*/_jsx("button", {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": checked,
+        className: "vg-menu__item",
+        disabled: disabled,
+        onClick: onClick,
+        children: children
+      });
+      $[4] = checked;
+      $[5] = children;
+      $[6] = disabled;
+      $[7] = onClick;
+      $[8] = t1;
+    } else {
+      t1 = $[8];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[9] !== checked || $[10] !== children || $[11] !== disabled || $[12] !== onClick) {
+    t1 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      className: "vg-menu__item",
+      disabled: disabled,
+      onClick: onClick,
+      children: children
+    });
+    $[9] = checked;
+    $[10] = children;
+    $[11] = disabled;
+    $[12] = onClick;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  return t1;
+}
+//# sourceMappingURL=column-menu.js.map