vastgrid 0.1.0 → 0.2.0

package/dist/react/format-form.js

@@ -0,0 +1,863 @@
+import { c as _c } from "react/compiler-runtime";
+import { use, useState, useTransition } from "react";
+import { columnsOf, formulaText, joinParts, partsOf } from "vastgrid-spec";
+import { FilterTextError, filterParts, operatorsFor, readFilter, takesNoValue } from "../core/filters.js";
+import { isNumeric } from "../core/format.js";
+import { LocaleContext } from "./context.js";
+import { useGridSelector, useGridStore } from "./hooks.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const TEMPORAL = new Set(["date", "time", "timestamp", "timestamptz"]);
+
+/** A style rule as the form edits it: a condition on one column, or a `when` it does not take apart. */
+
+let nextRule = 1;
+function ruleId() {
+  return nextRule++;
+}
+function draftOf(rule, fallback) {
+  const names = columnsOf(rule.when);
+  const [name] = names;
+  const read = names.size === 1 ? readFilter(partsOf(rule.when), name) : null;
+  const filter = read !== null && read !== "other" && read.kind === "condition" ? read : {
+    kind: "condition",
+    operator: "eq",
+    first: "",
+    second: ""
+  };
+  return {
+    id: ruleId(),
+    column: read !== null && read !== "other" && read.kind === "condition" ? name : fallback,
+    filter,
+    ...(read !== null && read !== "other" && read.kind === "condition" ? {} : {
+      kept: rule.when
+    }),
+    color: rule.color ?? null,
+    background: rule.background ?? null,
+    description: rule.description ?? ""
+  };
+}
+
+/** The `when` of a rule, or null when its text is not a value of its column; undefined without text. */
+function whenOf(rule, columns) {
+  if (rule.kept) return rule.kept;
+  const column = columns.find(item => item.name === rule.column);
+  if (!column) return undefined;
+  try {
+    return joinParts(filterParts(rule.filter, column));
+  } catch (error) {
+    if (error instanceof FilterTextError) return null;
+    throw error;
+  }
+}
+
+/** Whether Intl formats a currency code. */
+function knownCurrency(code) {
+  try {
+    new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency: code
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+function formulaOf(expr) {
+  try {
+    return formulaText(expr);
+  } catch {
+    return JSON.stringify(expr);
+  }
+}
+
+/**
+ * A column's format (§5.1 of the specification): its label, alignment and wrapping, the number or date format of its
+ * type, and rules of conditional colors, each a condition on a column of the view with a text color, a background
+ * and what they mean. Applying dispatches `column.format`; Clear removes the format.
+ */
+export function FormatForm(t0) {
+  const $ = _c(154);
+  const {
+    column,
+    setting,
+    onDone
+  } = t0;
+  const store = useGridStore();
+  const {
+    messages
+  } = use(LocaleContext);
+  const view = useGridSelector(_temp);
+  let t1;
+  if ($[0] !== setting.format) {
+    t1 = setting.format ?? {};
+    $[0] = setting.format;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const format = t1;
+  const [label, setLabel] = useState(format.label ?? "");
+  const [align, setAlign] = useState(format.align ?? "");
+  const [wrap, setWrap] = useState(format.wrap === true);
+  const [style, setStyle] = useState(format.number ? format.number.style ?? "decimal" : "");
+  const [currency, setCurrency] = useState(format.number?.currency ?? "");
+  const [digits, setDigits] = useState(format.number?.fractionDigits === undefined ? "" : String(format.number.fractionDigits));
+  const [grouping, setGrouping] = useState(format.number?.grouping !== false);
+  const [pattern, setPattern] = useState(format.date?.pattern ?? "");
+  let t2;
+  if ($[2] !== column.name || $[3] !== format.styles) {
+    t2 = () => (format.styles ?? []).map(rule => draftOf(rule, column.name));
+    $[2] = column.name;
+    $[3] = format.styles;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const [rules, setRules] = useState(t2);
+  const [error, setError] = useState(null);
+  const [pending, startApply] = useTransition();
+  let t3;
+  if ($[5] !== column) {
+    t3 = isNumeric(column);
+    $[5] = column;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  const numeric = t3;
+  let t4;
+  if ($[7] !== column.type) {
+    t4 = TEMPORAL.has(column.type);
+    $[7] = column.type;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const temporal = t4;
+  let t5;
+  if ($[9] !== column.name || $[10] !== onDone || $[11] !== store) {
+    t5 = next => startApply(async () => {
+      const outcome = await store.dispatch({
+        command: "column.format",
+        name: column.name,
+        format: next
+      });
+      if (!outcome.ok) {
+        setError(outcome.error.message);
+        return;
+      }
+      onDone();
+    });
+    $[9] = column.name;
+    $[10] = onDone;
+    $[11] = store;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const dispatch = t5;
+  let t6;
+  if ($[13] !== align || $[14] !== currency || $[15] !== digits || $[16] !== dispatch || $[17] !== format || $[18] !== grouping || $[19] !== label || $[20] !== messages.invalidCondition || $[21] !== messages.invalidCurrency || $[22] !== numeric || $[23] !== pattern || $[24] !== rules || $[25] !== style || $[26] !== temporal || $[27] !== view || $[28] !== wrap) {
+    t6 = event => {
+      event.preventDefault();
+      if (style === "currency" && !knownCurrency(currency)) {
+        setError(messages.invalidCurrency);
+        return;
+      }
+      const styles = [];
+      for (const rule_0 of rules) {
+        const when = whenOf(rule_0, view);
+        if (when === null) {
+          setError(messages.invalidCondition);
+          return;
+        }
+        if (when === undefined || !rule_0.color && !rule_0.background) {
+          continue;
+        }
+        styles.push({
+          when,
+          ...(rule_0.color ? {
+            color: rule_0.color
+          } : {}),
+          ...(rule_0.background ? {
+            background: rule_0.background
+          } : {}),
+          ...(rule_0.description.trim() ? {
+            description: rule_0.description.trim()
+          } : {})
+        });
+      }
+      const fraction = digits.trim() === "" ? undefined : Math.min(20, Math.max(0, Math.round(Number(digits))));
+      const number = numeric && style ? {
+        style,
+        ...(style === "currency" ? {
+          currency: currency.toUpperCase()
+        } : {}),
+        ...(fraction === undefined || Number.isNaN(fraction) ? {} : {
+          fractionDigits: fraction
+        }),
+        ...(grouping ? {} : {
+          grouping: false
+        })
+      } : undefined;
+      const next_0 = {
+        ...format,
+        ...(label.trim() ? {
+          label: label.trim()
+        } : {
+          label: undefined
+        }),
+        align: align === "" ? undefined : align,
+        wrap: wrap ? true : undefined,
+        number: numeric ? number : format.number,
+        date: temporal ? pattern.trim() ? {
+          ...format.date,
+          pattern: pattern.trim()
+        } : undefined : format.date,
+        styles: styles.length > 0 ? styles : undefined
+      };
+      const cleaned = Object.fromEntries(Object.entries(next_0).filter(_temp2));
+      dispatch(Object.keys(cleaned).length > 0 ? cleaned : null);
+    };
+    $[13] = align;
+    $[14] = currency;
+    $[15] = digits;
+    $[16] = dispatch;
+    $[17] = format;
+    $[18] = grouping;
+    $[19] = label;
+    $[20] = messages.invalidCondition;
+    $[21] = messages.invalidCurrency;
+    $[22] = numeric;
+    $[23] = pattern;
+    $[24] = rules;
+    $[25] = style;
+    $[26] = temporal;
+    $[27] = view;
+    $[28] = wrap;
+    $[29] = t6;
+  } else {
+    t6 = $[29];
+  }
+  const submit = t6;
+  let t7;
+  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = (id, patch) => setRules(current => current.map(rule_1 => rule_1.id === id ? {
+      ...rule_1,
+      ...patch
+    } : rule_1));
+    $[30] = t7;
+  } else {
+    t7 = $[30];
+  }
+  const change = t7;
+  let t8;
+  if ($[31] !== column.name || $[32] !== messages) {
+    t8 = messages.formatOf(column.name);
+    $[31] = column.name;
+    $[32] = messages;
+    $[33] = t8;
+  } else {
+    t8 = $[33];
+  }
+  let t9;
+  if ($[34] !== column.name || $[35] !== messages) {
+    t9 = messages.formatOf(column.name);
+    $[34] = column.name;
+    $[35] = messages;
+    $[36] = t9;
+  } else {
+    t9 = $[36];
+  }
+  let t10;
+  if ($[37] !== t9) {
+    t10 = /*#__PURE__*/_jsx("p", {
+      className: "vg-filter__title",
+      children: t9
+    });
+    $[37] = t9;
+    $[38] = t10;
+  } else {
+    t10 = $[38];
+  }
+  let t11;
+  if ($[39] !== messages.columnLabel) {
+    t11 = /*#__PURE__*/_jsx("span", {
+      children: messages.columnLabel
+    });
+    $[39] = messages.columnLabel;
+    $[40] = t11;
+  } else {
+    t11 = $[40];
+  }
+  let t12;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = event_0 => setLabel(event_0.target.value);
+    $[41] = t12;
+  } else {
+    t12 = $[41];
+  }
+  let t13;
+  if ($[42] !== column.name || $[43] !== label) {
+    t13 = /*#__PURE__*/_jsx("input", {
+      className: "vg-input",
+      value: label,
+      placeholder: column.name,
+      onChange: t12
+    });
+    $[42] = column.name;
+    $[43] = label;
+    $[44] = t13;
+  } else {
+    t13 = $[44];
+  }
+  let t14;
+  if ($[45] !== t11 || $[46] !== t13) {
+    t14 = /*#__PURE__*/_jsxs("label", {
+      className: "vg-format__field",
+      children: [t11, t13]
+    });
+    $[45] = t11;
+    $[46] = t13;
+    $[47] = t14;
+  } else {
+    t14 = $[47];
+  }
+  let t15;
+  if ($[48] !== messages.alignment) {
+    t15 = /*#__PURE__*/_jsx("span", {
+      children: messages.alignment
+    });
+    $[48] = messages.alignment;
+    $[49] = t15;
+  } else {
+    t15 = $[49];
+  }
+  let t16;
+  if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = event_1 => setAlign(event_1.target.value);
+    $[50] = t16;
+  } else {
+    t16 = $[50];
+  }
+  let t17;
+  if ($[51] !== messages.alignments.auto) {
+    t17 = /*#__PURE__*/_jsx("option", {
+      value: "",
+      children: messages.alignments.auto
+    });
+    $[51] = messages.alignments.auto;
+    $[52] = t17;
+  } else {
+    t17 = $[52];
+  }
+  let t18;
+  if ($[53] !== messages.alignments.left) {
+    t18 = /*#__PURE__*/_jsx("option", {
+      value: "left",
+      children: messages.alignments.left
+    });
+    $[53] = messages.alignments.left;
+    $[54] = t18;
+  } else {
+    t18 = $[54];
+  }
+  let t19;
+  if ($[55] !== messages.alignments.center) {
+    t19 = /*#__PURE__*/_jsx("option", {
+      value: "center",
+      children: messages.alignments.center
+    });
+    $[55] = messages.alignments.center;
+    $[56] = t19;
+  } else {
+    t19 = $[56];
+  }
+  let t20;
+  if ($[57] !== messages.alignments.right) {
+    t20 = /*#__PURE__*/_jsx("option", {
+      value: "right",
+      children: messages.alignments.right
+    });
+    $[57] = messages.alignments.right;
+    $[58] = t20;
+  } else {
+    t20 = $[58];
+  }
+  let t21;
+  if ($[59] !== align || $[60] !== t17 || $[61] !== t18 || $[62] !== t19 || $[63] !== t20) {
+    t21 = /*#__PURE__*/_jsxs("select", {
+      className: "vg-input",
+      value: align,
+      onChange: t16,
+      children: [t17, t18, t19, t20]
+    });
+    $[59] = align;
+    $[60] = t17;
+    $[61] = t18;
+    $[62] = t19;
+    $[63] = t20;
+    $[64] = t21;
+  } else {
+    t21 = $[64];
+  }
+  let t22;
+  if ($[65] !== t15 || $[66] !== t21) {
+    t22 = /*#__PURE__*/_jsxs("label", {
+      className: "vg-format__field",
+      children: [t15, t21]
+    });
+    $[65] = t15;
+    $[66] = t21;
+    $[67] = t22;
+  } else {
+    t22 = $[67];
+  }
+  let t23;
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = event_2 => setWrap(event_2.target.checked);
+    $[68] = t23;
+  } else {
+    t23 = $[68];
+  }
+  let t24;
+  if ($[69] !== wrap) {
+    t24 = /*#__PURE__*/_jsx("input", {
+      type: "checkbox",
+      checked: wrap,
+      onChange: t23
+    });
+    $[69] = wrap;
+    $[70] = t24;
+  } else {
+    t24 = $[70];
+  }
+  let t25;
+  if ($[71] !== messages.wrapText) {
+    t25 = /*#__PURE__*/_jsx("span", {
+      children: messages.wrapText
+    });
+    $[71] = messages.wrapText;
+    $[72] = t25;
+  } else {
+    t25 = $[72];
+  }
+  let t26;
+  if ($[73] !== t24 || $[74] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("label", {
+      className: "vg-filter__value",
+      children: [t24, t25]
+    });
+    $[73] = t24;
+    $[74] = t25;
+    $[75] = t26;
+  } else {
+    t26 = $[75];
+  }
+  let t27;
+  if ($[76] !== currency || $[77] !== digits || $[78] !== grouping || $[79] !== messages.currency || $[80] !== messages.fractionDigits || $[81] !== messages.grouping || $[82] !== messages.numberFormat || $[83] !== messages.numberStyles || $[84] !== numeric || $[85] !== style) {
+    t27 = numeric && /*#__PURE__*/_jsxs("fieldset", {
+      className: "vg-format__group",
+      children: [/*#__PURE__*/_jsx("legend", {
+        children: messages.numberFormat
+      }), /*#__PURE__*/_jsxs("select", {
+        className: "vg-input",
+        "aria-label": messages.numberFormat,
+        value: style,
+        onChange: event_3 => setStyle(event_3.target.value),
+        children: [/*#__PURE__*/_jsx("option", {
+          value: "",
+          children: messages.numberStyles.none
+        }), /*#__PURE__*/_jsx("option", {
+          value: "decimal",
+          children: messages.numberStyles.decimal
+        }), /*#__PURE__*/_jsx("option", {
+          value: "percent",
+          children: messages.numberStyles.percent
+        }), /*#__PURE__*/_jsx("option", {
+          value: "currency",
+          children: messages.numberStyles.currency
+        })]
+      }), style === "currency" && /*#__PURE__*/_jsx("input", {
+        className: "vg-input",
+        "aria-label": messages.currency,
+        placeholder: "JPY",
+        value: currency,
+        onChange: event_4 => setCurrency(event_4.target.value)
+      }), style !== "" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("input", {
+          className: "vg-input",
+          type: "number",
+          min: 0,
+          max: 20,
+          "aria-label": messages.fractionDigits,
+          placeholder: messages.fractionDigits,
+          value: digits,
+          onChange: event_5 => setDigits(event_5.target.value)
+        }), /*#__PURE__*/_jsxs("label", {
+          className: "vg-filter__value",
+          children: [/*#__PURE__*/_jsx("input", {
+            type: "checkbox",
+            checked: grouping,
+            onChange: event_6 => setGrouping(event_6.target.checked)
+          }), /*#__PURE__*/_jsx("span", {
+            children: messages.grouping
+          })]
+        })]
+      })]
+    });
+    $[76] = currency;
+    $[77] = digits;
+    $[78] = grouping;
+    $[79] = messages.currency;
+    $[80] = messages.fractionDigits;
+    $[81] = messages.grouping;
+    $[82] = messages.numberFormat;
+    $[83] = messages.numberStyles;
+    $[84] = numeric;
+    $[85] = style;
+    $[86] = t27;
+  } else {
+    t27 = $[86];
+  }
+  let t28;
+  if ($[87] !== messages.datePattern || $[88] !== pattern || $[89] !== temporal) {
+    t28 = temporal && /*#__PURE__*/_jsxs("label", {
+      className: "vg-format__field",
+      children: [/*#__PURE__*/_jsx("span", {
+        children: messages.datePattern
+      }), /*#__PURE__*/_jsx("input", {
+        className: "vg-input",
+        placeholder: "yyyy/MM/dd HH:mm",
+        value: pattern,
+        onChange: event_7 => setPattern(event_7.target.value)
+      })]
+    });
+    $[87] = messages.datePattern;
+    $[88] = pattern;
+    $[89] = temporal;
+    $[90] = t28;
+  } else {
+    t28 = $[90];
+  }
+  let t29;
+  if ($[91] !== messages.conditionalColors) {
+    t29 = /*#__PURE__*/_jsx("legend", {
+      children: messages.conditionalColors
+    });
+    $[91] = messages.conditionalColors;
+    $[92] = t29;
+  } else {
+    t29 = $[92];
+  }
+  let t30;
+  if ($[93] !== messages.backgroundColor || $[94] !== messages.condition || $[95] !== messages.conditionColumn || $[96] !== messages.maximum || $[97] !== messages.minimum || $[98] !== messages.operators || $[99] !== messages.removeRule || $[100] !== messages.ruleDescription || $[101] !== messages.textColor || $[102] !== messages.value || $[103] !== rules || $[104] !== view) {
+    let t31;
+    if ($[106] !== messages.backgroundColor || $[107] !== messages.condition || $[108] !== messages.conditionColumn || $[109] !== messages.maximum || $[110] !== messages.minimum || $[111] !== messages.operators || $[112] !== messages.removeRule || $[113] !== messages.ruleDescription || $[114] !== messages.textColor || $[115] !== messages.value || $[116] !== view) {
+      t31 = rule_2 => {
+        const target = view.find(item => item.name === rule_2.column);
+        const operators = target ? operatorsFor(target.type) : [];
+        return /*#__PURE__*/_jsxs("div", {
+          className: "vg-format__rule",
+          children: [rule_2.kept ? /*#__PURE__*/_jsx("code", {
+            className: "vg-conditions__expression",
+            children: formulaOf(rule_2.kept)
+          }) : /*#__PURE__*/_jsxs("div", {
+            className: "vg-conditions__row",
+            children: [/*#__PURE__*/_jsx("select", {
+              className: "vg-input",
+              "aria-label": messages.conditionColumn,
+              value: rule_2.column,
+              onChange: event_8 => {
+                const next_1 = view.find(item_0 => item_0.name === event_8.target.value);
+                if (!next_1) {
+                  return;
+                }
+                const kinds = operatorsFor(next_1.type);
+                const operator = kinds.includes(rule_2.filter.operator) ? rule_2.filter.operator : kinds[0];
+                change(rule_2.id, {
+                  column: next_1.name,
+                  filter: {
+                    ...rule_2.filter,
+                    operator
+                  }
+                });
+              },
+              children: view.map(_temp3)
+            }), /*#__PURE__*/_jsx("select", {
+              className: "vg-input",
+              "aria-label": messages.condition,
+              value: rule_2.filter.operator,
+              onChange: event_9 => change(rule_2.id, {
+                filter: {
+                  ...rule_2.filter,
+                  operator: event_9.target.value
+                }
+              }),
+              children: operators.map(item_2 => /*#__PURE__*/_jsx("option", {
+                value: item_2,
+                children: messages.operators[item_2]
+              }, item_2))
+            }), !takesNoValue(rule_2.filter.operator) && /*#__PURE__*/_jsx("input", {
+              className: "vg-input",
+              "aria-label": rule_2.filter.operator === "between" ? messages.minimum : messages.value,
+              placeholder: rule_2.filter.operator === "between" ? messages.minimum : messages.value,
+              value: rule_2.filter.first,
+              onChange: event_10 => change(rule_2.id, {
+                filter: {
+                  ...rule_2.filter,
+                  first: event_10.target.value
+                }
+              })
+            }), rule_2.filter.operator === "between" && /*#__PURE__*/_jsx("input", {
+              className: "vg-input",
+              "aria-label": messages.maximum,
+              placeholder: messages.maximum,
+              value: rule_2.filter.second,
+              onChange: event_11 => change(rule_2.id, {
+                filter: {
+                  ...rule_2.filter,
+                  second: event_11.target.value
+                }
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "vg-conditions__row",
+            children: [/*#__PURE__*/_jsxs("label", {
+              className: "vg-filter__value",
+              children: [/*#__PURE__*/_jsx("input", {
+                type: "checkbox",
+                checked: rule_2.color !== null,
+                onChange: event_12 => change(rule_2.id, {
+                  color: event_12.target.checked ? "#b42318" : null
+                })
+              }), /*#__PURE__*/_jsx("span", {
+                children: messages.textColor
+              })]
+            }), rule_2.color !== null && /*#__PURE__*/_jsx("input", {
+              type: "color",
+              "aria-label": messages.textColor,
+              value: rule_2.color,
+              onChange: event_13 => change(rule_2.id, {
+                color: event_13.target.value
+              })
+            }), /*#__PURE__*/_jsxs("label", {
+              className: "vg-filter__value",
+              children: [/*#__PURE__*/_jsx("input", {
+                type: "checkbox",
+                checked: rule_2.background !== null,
+                onChange: event_14 => change(rule_2.id, {
+                  background: event_14.target.checked ? "#fde68a" : null
+                })
+              }), /*#__PURE__*/_jsx("span", {
+                children: messages.backgroundColor
+              })]
+            }), rule_2.background !== null && /*#__PURE__*/_jsx("input", {
+              type: "color",
+              "aria-label": messages.backgroundColor,
+              value: rule_2.background,
+              onChange: event_15 => change(rule_2.id, {
+                background: event_15.target.value
+              })
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: "vg-conditions__row",
+            children: [/*#__PURE__*/_jsx("input", {
+              className: "vg-input",
+              "aria-label": messages.ruleDescription,
+              placeholder: messages.ruleDescription,
+              value: rule_2.description,
+              onChange: event_16 => change(rule_2.id, {
+                description: event_16.target.value
+              })
+            }), /*#__PURE__*/_jsx("button", {
+              type: "button",
+              className: "vg-button vg-button--small",
+              "aria-label": messages.removeRule,
+              onClick: () => setRules(current_0 => current_0.filter(item_3 => item_3.id !== rule_2.id)),
+              children: "\xD7"
+            })]
+          })]
+        }, rule_2.id);
+      };
+      $[106] = messages.backgroundColor;
+      $[107] = messages.condition;
+      $[108] = messages.conditionColumn;
+      $[109] = messages.maximum;
+      $[110] = messages.minimum;
+      $[111] = messages.operators;
+      $[112] = messages.removeRule;
+      $[113] = messages.ruleDescription;
+      $[114] = messages.textColor;
+      $[115] = messages.value;
+      $[116] = view;
+      $[117] = t31;
+    } else {
+      t31 = $[117];
+    }
+    t30 = rules.map(t31);
+    $[93] = messages.backgroundColor;
+    $[94] = messages.condition;
+    $[95] = messages.conditionColumn;
+    $[96] = messages.maximum;
+    $[97] = messages.minimum;
+    $[98] = messages.operators;
+    $[99] = messages.removeRule;
+    $[100] = messages.ruleDescription;
+    $[101] = messages.textColor;
+    $[102] = messages.value;
+    $[103] = rules;
+    $[104] = view;
+    $[105] = t30;
+  } else {
+    t30 = $[105];
+  }
+  let t31;
+  if ($[118] !== column.name || $[119] !== column.type) {
+    t31 = () => setRules(current_1 => [...current_1, {
+      id: ruleId(),
+      column: column.name,
+      filter: {
+        kind: "condition",
+        operator: operatorsFor(column.type)[0],
+        first: "",
+        second: ""
+      },
+      color: null,
+      background: "#fde68a",
+      description: ""
+    }]);
+    $[118] = column.name;
+    $[119] = column.type;
+    $[120] = t31;
+  } else {
+    t31 = $[120];
+  }
+  let t32;
+  if ($[121] !== messages.addRule || $[122] !== t31) {
+    t32 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button vg-button--small",
+      onClick: t31,
+      children: messages.addRule
+    });
+    $[121] = messages.addRule;
+    $[122] = t31;
+    $[123] = t32;
+  } else {
+    t32 = $[123];
+  }
+  let t33;
+  if ($[124] !== t29 || $[125] !== t30 || $[126] !== t32) {
+    t33 = /*#__PURE__*/_jsxs("fieldset", {
+      className: "vg-format__group",
+      children: [t29, t30, t32]
+    });
+    $[124] = t29;
+    $[125] = t30;
+    $[126] = t32;
+    $[127] = t33;
+  } else {
+    t33 = $[127];
+  }
+  let t34;
+  if ($[128] !== error) {
+    t34 = error !== null && /*#__PURE__*/_jsx("p", {
+      role: "alert",
+      className: "vg-filter__error",
+      children: error
+    });
+    $[128] = error;
+    $[129] = t34;
+  } else {
+    t34 = $[129];
+  }
+  let t35;
+  if ($[130] !== dispatch) {
+    t35 = () => dispatch(null);
+    $[130] = dispatch;
+    $[131] = t35;
+  } else {
+    t35 = $[131];
+  }
+  let t36;
+  if ($[132] !== messages.clearFormat || $[133] !== pending || $[134] !== t35) {
+    t36 = /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: "vg-button",
+      disabled: pending,
+      onClick: t35,
+      children: messages.clearFormat
+    });
+    $[132] = messages.clearFormat;
+    $[133] = pending;
+    $[134] = t35;
+    $[135] = t36;
+  } else {
+    t36 = $[135];
+  }
+  let t37;
+  if ($[136] !== messages.apply || $[137] !== pending) {
+    t37 = /*#__PURE__*/_jsx("button", {
+      type: "submit",
+      className: "vg-button vg-button--primary",
+      disabled: pending,
+      children: messages.apply
+    });
+    $[136] = messages.apply;
+    $[137] = pending;
+    $[138] = t37;
+  } else {
+    t37 = $[138];
+  }
+  let t38;
+  if ($[139] !== t36 || $[140] !== t37) {
+    t38 = /*#__PURE__*/_jsxs("div", {
+      className: "vg-filter__actions",
+      children: [t36, t37]
+    });
+    $[139] = t36;
+    $[140] = t37;
+    $[141] = t38;
+  } else {
+    t38 = $[141];
+  }
+  let t39;
+  if ($[142] !== submit || $[143] !== t10 || $[144] !== t14 || $[145] !== t22 || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t33 || $[150] !== t34 || $[151] !== t38 || $[152] !== t8) {
+    t39 = /*#__PURE__*/_jsxs("form", {
+      className: "vg-filter vg-format",
+      onSubmit: submit,
+      "aria-label": t8,
+      children: [t10, t14, t22, t26, t27, t28, t33, t34, t38]
+    });
+    $[142] = submit;
+    $[143] = t10;
+    $[144] = t14;
+    $[145] = t22;
+    $[146] = t26;
+    $[147] = t27;
+    $[148] = t28;
+    $[149] = t33;
+    $[150] = t34;
+    $[151] = t38;
+    $[152] = t8;
+    $[153] = t39;
+  } else {
+    t39 = $[153];
+  }
+  return t39;
+}
+function _temp3(item_1) {
+  return /*#__PURE__*/_jsx("option", {
+    value: item_1.name,
+    children: item_1.name
+  }, item_1.name);
+}
+function _temp2(t0) {
+  const [, value] = t0;
+  return value !== undefined;
+}
+function _temp(snapshot) {
+  return snapshot.view?.columns ?? [];
+}
+//# sourceMappingURL=format-form.js.map