@svgrid/grid 2.2.27 → 2.2.29

package/src/filter-operators.ts

@@ -1,157 +1,157 @@
-// Filter-operator catalogue + the pure helpers that pick which operators
-// apply to a column and how they're labelled. Fully static - no grid state -
-// so it lives outside the controller.
-import type { Column, RowData } from "./index";
-import type { FilterOperator, FilterOption } from "./SvGrid.types";
-
-export const filterOperatorOptions: Array<FilterOption> = [
-  { value: "contains", label: "Contains", iconName: "op-contains" },
-  { value: "notContains", label: "Not contains", iconName: "op-notContains" },
-  { value: "equals", label: "Equals", iconName: "op-equals" },
-  { value: "notEquals", label: "Not equals", iconName: "op-notEquals" },
-  { value: "startsWith", label: "Starts with", iconName: "op-startsWith" },
-  { value: "endsWith", label: "Ends with", iconName: "op-endsWith" },
-  { value: "regex", label: "Regex", iconName: "op-regex" },
-  { value: "in", label: "In", iconName: "op-in" },
-  { value: "notIn", label: "Not in", iconName: "op-notIn" },
-  { value: "greaterThan", label: "Greater than", iconName: "op-greaterThan" },
-  { value: "lessThan", label: "Less than", iconName: "op-lessThan" },
-  { value: "between", label: "Between", iconName: "op-between" },
-  { value: "isBlank", label: "Blank", iconName: "op-isBlank" },
-  { value: "isNotBlank", label: "Not blank", iconName: "op-isNotBlank" },
-];
-/** Operators whose predicate is a set-membership test over a token list.
- *  The filter row renders a multi-value chip input for these instead of a
- *  single text box. */
-export const SET_OPERATORS: ReadonlyArray<FilterOperator> = ["in", "notIn"];
-/** Operators that need no value input - they act on emptiness alone. */
-export const VALUELESS_OPERATORS: ReadonlyArray<FilterOperator> = [
-  "isBlank",
-  "isNotBlank",
-];
-/** Which operators make sense for each column editor type. */
-export const TEXT_OPERATORS: Array<FilterOperator> = [
-  "contains",
-  "notContains",
-  "equals",
-  "notEquals",
-  "startsWith",
-  "endsWith",
-  "regex",
-  "in",
-  "notIn",
-  "isBlank",
-  "isNotBlank",
-];
-export const NUMBER_OPERATORS: Array<FilterOperator> = [
-  "equals",
-  "notEquals",
-  "greaterThan",
-  "lessThan",
-  "between",
-  "in",
-  "notIn",
-  "isBlank",
-  "isNotBlank",
-];
-export const DATE_OPERATORS: Array<FilterOperator> = [
-  "equals",
-  "notEquals",
-  "lessThan",
-  "greaterThan",
-  "between",
-  "isBlank",
-  "isNotBlank",
-];
-export const CHECKBOX_OPERATORS: Array<FilterOperator> = [
-  "equals",
-  "isBlank",
-  "isNotBlank",
-];
-export const fallbackOperatorOption: FilterOption = {
-  value: "contains",
-  label: "Contains",
-  iconName: "op-contains",
-};
-
-export function operatorOption(value: FilterOperator): FilterOption {
-  return (
-    filterOperatorOptions.find((option) => option.value === value) ??
-    fallbackOperatorOption
-  );
-}
-
-/** Returns the operators that make sense for the given column's data type. */
-export function operatorsForColumn<TData extends RowData>(
-  column: Column<TData> | undefined,
-): Array<FilterOption> {
-  const editorType = column?.columnDef.editorType ?? "text";
-  const ids =
-    editorType === "number"
-      ? NUMBER_OPERATORS
-      : editorType === "date" || editorType === "datetime"
-        ? DATE_OPERATORS
-        : editorType === "checkbox"
-          ? CHECKBOX_OPERATORS
-          : TEXT_OPERATORS;
-  return ids
-    .map((id) => filterOperatorOptions.find((option) => option.value === id))
-    .filter((option): option is FilterOption => Boolean(option));
-}
-
-/** Default operator for a column (first one valid for its type). */
-export function defaultOperatorFor<TData extends RowData>(
-  column: Column<TData> | undefined,
-): FilterOperator {
-  return operatorsForColumn(column)[0]?.value ?? "contains";
-}
-
-/** Date columns get friendlier labels for "less / greater than". */
-export function operatorLabelFor<TData extends RowData>(
-  option: FilterOption,
-  column: Column<TData> | undefined,
-): string {
-  const editorType = column?.columnDef.editorType;
-  if (editorType === "date" || editorType === "datetime") {
-    if (option.value === "lessThan") return "Before";
-    if (option.value === "greaterThan") return "After";
-  }
-  return option.label;
-}
-
-/** GridMessages key for each operator's label (see grid-messages.ts). */
-const OPERATOR_MESSAGE_KEY: Record<FilterOperator, string> = {
-  contains: "opContains",
-  notContains: "opNotContains",
-  equals: "opEquals",
-  notEquals: "opNotEquals",
-  startsWith: "opStartsWith",
-  endsWith: "opEndsWith",
-  regex: "opRegex",
-  in: "opIn",
-  notIn: "opNotIn",
-  greaterThan: "opGreaterThan",
-  lessThan: "opLessThan",
-  between: "opBetween",
-  isBlank: "opIsBlank",
-  isNotBlank: "opIsNotBlank",
-};
-
-/**
- * Localized operator label: honors date `Before`/`After` relabels, then the
- * `localeText` override for the operator, falling back to the English
- * `option.label`. `messages` is a loose string map to avoid a type cycle.
- */
-export function localizeOperatorLabel<TData extends RowData>(
-  option: FilterOption,
-  column: Column<TData> | undefined,
-  messages?: Record<string, string> | null,
-): string {
-  const editorType = column?.columnDef.editorType;
-  if (editorType === "date" || editorType === "datetime") {
-    if (option.value === "lessThan") return messages?.opBefore || "Before";
-    if (option.value === "greaterThan") return messages?.opAfter || "After";
-  }
-  const key = OPERATOR_MESSAGE_KEY[option.value];
-  return (key && messages?.[key]) || option.label;
-}
+// Filter-operator catalogue + the pure helpers that pick which operators
+// apply to a column and how they're labelled. Fully static - no grid state -
+// so it lives outside the controller.
+import type { Column, RowData } from "./index";
+import type { FilterOperator, FilterOption } from "./SvGrid.types";
+
+export const filterOperatorOptions: Array<FilterOption> = [
+  { value: "contains", label: "Contains", iconName: "op-contains" },
+  { value: "notContains", label: "Not contains", iconName: "op-notContains" },
+  { value: "equals", label: "Equals", iconName: "op-equals" },
+  { value: "notEquals", label: "Not equals", iconName: "op-notEquals" },
+  { value: "startsWith", label: "Starts with", iconName: "op-startsWith" },
+  { value: "endsWith", label: "Ends with", iconName: "op-endsWith" },
+  { value: "regex", label: "Regex", iconName: "op-regex" },
+  { value: "in", label: "In", iconName: "op-in" },
+  { value: "notIn", label: "Not in", iconName: "op-notIn" },
+  { value: "greaterThan", label: "Greater than", iconName: "op-greaterThan" },
+  { value: "lessThan", label: "Less than", iconName: "op-lessThan" },
+  { value: "between", label: "Between", iconName: "op-between" },
+  { value: "isBlank", label: "Blank", iconName: "op-isBlank" },
+  { value: "isNotBlank", label: "Not blank", iconName: "op-isNotBlank" },
+];
+/** Operators whose predicate is a set-membership test over a token list.
+ *  The filter row renders a multi-value chip input for these instead of a
+ *  single text box. */
+export const SET_OPERATORS: ReadonlyArray<FilterOperator> = ["in", "notIn"];
+/** Operators that need no value input - they act on emptiness alone. */
+export const VALUELESS_OPERATORS: ReadonlyArray<FilterOperator> = [
+  "isBlank",
+  "isNotBlank",
+];
+/** Which operators make sense for each column editor type. */
+export const TEXT_OPERATORS: Array<FilterOperator> = [
+  "contains",
+  "notContains",
+  "equals",
+  "notEquals",
+  "startsWith",
+  "endsWith",
+  "regex",
+  "in",
+  "notIn",
+  "isBlank",
+  "isNotBlank",
+];
+export const NUMBER_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "notEquals",
+  "greaterThan",
+  "lessThan",
+  "between",
+  "in",
+  "notIn",
+  "isBlank",
+  "isNotBlank",
+];
+export const DATE_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "notEquals",
+  "lessThan",
+  "greaterThan",
+  "between",
+  "isBlank",
+  "isNotBlank",
+];
+export const CHECKBOX_OPERATORS: Array<FilterOperator> = [
+  "equals",
+  "isBlank",
+  "isNotBlank",
+];
+export const fallbackOperatorOption: FilterOption = {
+  value: "contains",
+  label: "Contains",
+  iconName: "op-contains",
+};
+
+export function operatorOption(value: FilterOperator): FilterOption {
+  return (
+    filterOperatorOptions.find((option) => option.value === value) ??
+    fallbackOperatorOption
+  );
+}
+
+/** Returns the operators that make sense for the given column's data type. */
+export function operatorsForColumn<TData extends RowData>(
+  column: Column<TData> | undefined,
+): Array<FilterOption> {
+  const editorType = column?.columnDef.editorType ?? "text";
+  const ids =
+    editorType === "number"
+      ? NUMBER_OPERATORS
+      : editorType === "date" || editorType === "datetime"
+        ? DATE_OPERATORS
+        : editorType === "checkbox"
+          ? CHECKBOX_OPERATORS
+          : TEXT_OPERATORS;
+  return ids
+    .map((id) => filterOperatorOptions.find((option) => option.value === id))
+    .filter((option): option is FilterOption => Boolean(option));
+}
+
+/** Default operator for a column (first one valid for its type). */
+export function defaultOperatorFor<TData extends RowData>(
+  column: Column<TData> | undefined,
+): FilterOperator {
+  return operatorsForColumn(column)[0]?.value ?? "contains";
+}
+
+/** Date columns get friendlier labels for "less / greater than". */
+export function operatorLabelFor<TData extends RowData>(
+  option: FilterOption,
+  column: Column<TData> | undefined,
+): string {
+  const editorType = column?.columnDef.editorType;
+  if (editorType === "date" || editorType === "datetime") {
+    if (option.value === "lessThan") return "Before";
+    if (option.value === "greaterThan") return "After";
+  }
+  return option.label;
+}
+
+/** GridMessages key for each operator's label (see grid-messages.ts). */
+const OPERATOR_MESSAGE_KEY: Record<FilterOperator, string> = {
+  contains: "opContains",
+  notContains: "opNotContains",
+  equals: "opEquals",
+  notEquals: "opNotEquals",
+  startsWith: "opStartsWith",
+  endsWith: "opEndsWith",
+  regex: "opRegex",
+  in: "opIn",
+  notIn: "opNotIn",
+  greaterThan: "opGreaterThan",
+  lessThan: "opLessThan",
+  between: "opBetween",
+  isBlank: "opIsBlank",
+  isNotBlank: "opIsNotBlank",
+};
+
+/**
+ * Localized operator label: honors date `Before`/`After` relabels, then the
+ * `localeText` override for the operator, falling back to the English
+ * `option.label`. `messages` is a loose string map to avoid a type cycle.
+ */
+export function localizeOperatorLabel<TData extends RowData>(
+  option: FilterOption,
+  column: Column<TData> | undefined,
+  messages?: Record<string, string> | null,
+): string {
+  const editorType = column?.columnDef.editorType;
+  if (editorType === "date" || editorType === "datetime") {
+    if (option.value === "lessThan") return messages?.opBefore || "Before";
+    if (option.value === "greaterThan") return messages?.opAfter || "After";
+  }
+  const key = OPERATOR_MESSAGE_KEY[option.value];
+  return (key && messages?.[key]) || option.label;
+}

package/src/filtering/excel-filters.test.ts

@@ -6,6 +6,7 @@ import {
   applyExcelFilter,
   splitInTokens,
   joinInTokens,
+  trailingInToken,
   type ExcelFilter,
 } from './excel-filters'
 
@@ -211,6 +212,48 @@ describe('in-token serialization helpers', () => {
   })
   it('joinInTokens round-trips through splitInTokens', () => {
     expect(splitInTokens(joinInTokens(['a', 'b', 'c']))).toEqual(['a', 'b', 'c'])
-    expect(joinInTokens([' a ', '', 'b'])).toBe('a\nb')
+    expect(joinInTokens([' a ', '', 'b'])).toBe('a, b')
+  })
+  it('joinInTokens survives an <input type="text"> value round-trip', () => {
+    // The input value sanitiser strips newlines, so the separator must not be
+    // one - otherwise the list comes back as a single run-together token.
+    const input = document.createElement('input')
+    input.value = joinInTokens(['AAPL', 'MSFT'])
+    expect(splitInTokens(input.value)).toEqual(['AAPL', 'MSFT'])
+  })
+  it('trailingInToken returns the fragment still being typed', () => {
+    expect(trailingInToken('AAPL, MS')).toBe('MS')
+    expect(trailingInToken('AAPL,MS')).toBe('MS')
+    expect(trailingInToken('MS')).toBe('MS')
+    expect(trailingInToken('AAPL\nMS')).toBe('MS')
+  })
+  it('trailingInToken is empty once the fragment is separated off', () => {
+    expect(trailingInToken('AAPL, ')).toBe('')
+    expect(trailingInToken('AAPL,')).toBe('')
+    expect(trailingInToken('AAPL\n')).toBe('')
+    expect(trailingInToken('')).toBe('')
+    expect(trailingInToken(null)).toBe('')
+  })
+  it('quotes tokens containing a separator so they survive the round-trip', () => {
+    // Facet labels really do contain commas: numeric buckets come from
+    // toLocaleString ("1,234 - 5,678") and date buckets use a short month.
+    const labels = ['1,234 - 5,678', 'Aug 17, 2026', 'plain']
+    expect(splitInTokens(joinInTokens(labels))).toEqual(labels)
+    expect(joinInTokens(['Aug 17, 2026'])).toBe('"Aug 17, 2026"')
+  })
+  it('round-trips a token containing a quote', () => {
+    expect(splitInTokens(joinInTokens(['5" pipe']))).toEqual(['5" pipe'])
+    expect(splitInTokens(joinInTokens(['a"b, c']))).toEqual(['a"b, c'])
+  })
+  it('treats a quote mid-token as literal, not as an opening quote', () => {
+    expect(splitInTokens('5" pipe, plain')).toEqual(['5" pipe', 'plain'])
+  })
+  it('keeps inner spacing of a quoted token, trims an unquoted one', () => {
+    expect(splitInTokens('"  padded  ",  bare  ')).toEqual(['  padded  ', 'bare'])
+  })
+  it('trailingInToken understands quoted fragments', () => {
+    expect(trailingInToken('AAPL, "Aug 17, 20')).toBe('Aug 17, 20')
+    expect(trailingInToken('AAPL, "Aug 17, 2026"')).toBe('Aug 17, 2026')
+    expect(trailingInToken('"Aug 17, 2026", ')).toBe('')
   })
 })

package/src/filtering/excel-filters.ts

@@ -57,29 +57,106 @@ export function normalizeForFilter(
 
 /**
  * Delimiter used to serialise the `in` / `notIn` value list into the single
- * `value` string that the filter model carries. A newline is used because it
- * (unlike a comma) practically never appears inside a typed token, so tokens
- * survive the round-trip unescaped. The chip input in the filter row reads and
- * writes with the same separator via {@link splitInTokens} / {@link joinInTokens}.
+ * `value` string that the filter model carries.
+ *
+ * This has to be single-line safe: the tool panel and the filter menu show the
+ * serialised list in a plain `<input type="text">`, and the HTML input value
+ * sanitiser STRIPS newlines - so a newline-joined list came back out of the DOM
+ * as one run-together token. `splitInTokens` accepts newlines too, so values
+ * serialised by older builds still parse.
  */
-export const IN_TOKEN_SEP = '\n'
+export const IN_TOKEN_SEP = ', '
 
 /**
- * Split a serialised `in` / `notIn` value into its individual tokens. Accepts
- * both the newline separator the chip input writes and a plain comma-separated
- * string (what a raw text field, e.g. the tool-panel filter, produces), so the
- * same value round-trips through either UI.
+ * Split a serialised `in` / `notIn` value into its individual tokens.
+ *
+ * The grammar is CSV-shaped: comma OR newline separates, and a token may be
+ * double-quoted to carry a separator literally (`""` escapes a quote inside
+ * one). Quoting is what makes a comma separator safe - facet values commonly
+ * contain commas of their own, because numeric bucket labels are built with
+ * `toLocaleString` ("1,234 - 5,678") and date labels with a short month
+ * ("Aug 17, 2026"). A quote only opens a token when it is the token's first
+ * non-space character, so an unquoted `5" pipe` stays literal.
  */
 export function splitInTokens(value: unknown): string[] {
-  return String(value ?? '')
-    .split(/[\n,]/)
+  const { tokens, trailing } = scanInTokens(value)
+  if (trailing) tokens.push(trailing)
+  return tokens
+}
+
+/**
+ * Serialise a list of tokens back into the single `in` / `notIn` value,
+ * quoting any token that carries a separator or a quote of its own.
+ */
+export function joinInTokens(tokens: ReadonlyArray<string>): string {
+  return tokens
     .map((t) => t.trim())
     .filter((t) => t.length > 0)
+    .map((t) => (/["\n,]/.test(t) ? `"${t.replace(/"/g, '""')}"` : t))
+    .join(IN_TOKEN_SEP)
 }
 
-/** Serialise a list of tokens back into the single `in` / `notIn` value. */
-export function joinInTokens(tokens: ReadonlyArray<string>): string {
-  return tokens.map((t) => t.trim()).filter((t) => t.length > 0).join(IN_TOKEN_SEP)
+/**
+ * The token still being typed at the end of an `in` / `notIn` value - the text
+ * after the last separator. `'AAPL, MS'` -> `'MS'`; a value ending in a
+ * separator (or empty) has no trailing token.
+ *
+ * Inputs that hold the whole token list use this to drive the value-suggestion
+ * dropdown: the trailing fragment is the search query, not a committed token.
+ */
+export function trailingInToken(value: unknown): string {
+  return scanInTokens(value).trailing
+}
+
+/**
+ * One pass over a serialised `in` / `notIn` value, splitting it into the
+ * tokens that are terminated by a separator and the unterminated fragment at
+ * the end. Every token helper above is a view onto this, so they can never
+ * disagree about where a quoted token starts or ends.
+ */
+function scanInTokens(value: unknown): { tokens: string[]; trailing: string } {
+  const raw = String(value ?? '')
+  const tokens: string[] = []
+  let buf = ''
+  let quoted = false
+  let wasQuoted = false
+  let closed = false
+
+  // A quoted token keeps its inner spacing; an unquoted one is trimmed.
+  const take = () => {
+    const t = wasQuoted ? buf : buf.trim()
+    buf = ''
+    wasQuoted = false
+    closed = false
+    return t
+  }
+
+  for (let i = 0; i < raw.length; i += 1) {
+    const ch = raw[i]
+    if (quoted) {
+      if (ch !== '"') { buf += ch; continue }
+      // A doubled quote is an escaped literal quote, not the closing one.
+      if (raw[i + 1] === '"') { buf += '"'; i += 1; continue }
+      quoted = false
+      closed = true
+      continue
+    }
+    if (ch === ',' || ch === '\n') {
+      const t = take()
+      if (t.length) tokens.push(t)
+      continue
+    }
+    // Only opens a quoted token at the token's start - `5" pipe` is literal.
+    if (ch === '"' && !closed && !buf.trim()) {
+      quoted = true
+      wasQuoted = true
+      buf = ''
+      continue
+    }
+    buf += ch
+  }
+
+  return { tokens, trailing: take() }
 }
 
 export function applyExcelFilter(

package/src/flex-render.ts

@@ -1,3 +1,3 @@
-/// <reference types="svelte" />
-
-export { default as FlexRender } from './FlexRender.svelte'
+/// <reference types="svelte" />
+
+export { default as FlexRender } from './FlexRender.svelte'