@viniaraujo68/plinth 0.3.0 → 0.5.0

package/dist/table/FilterRuleEditor.svelte

@@ -0,0 +1,290 @@
+<script lang="ts" generics="T">
+  import { untrack } from "svelte";
+  import Listbox from "../components/Listbox.svelte";
+  import SegmentedControl from "../components/SegmentedControl.svelte";
+  import { normalizeForSearch } from "../components/select.js";
+  import type { FilterLabels } from "./filter-labels.js";
+  import { isRuleActive, operatorsOf, type FilterableColumn } from "./filter.js";
+  import type {
+    Column,
+    FilterOperator,
+    FilterRule,
+    NumberOperator,
+    TextOperator,
+  } from "./types.js";
+
+  interface Props {
+    columns: readonly Column<T>[];
+    fields: readonly FilterableColumn<T>[];
+    rule?: FilterRule;
+    labels: FilterLabels;
+    onapply: (rule: FilterRule) => void;
+  }
+
+  let { columns, fields, rule, labels, onapply }: Props = $props();
+
+  const FIELD_SEARCH_THRESHOLD = 8;
+  const CHOICE_SEARCH_THRESHOLD = 8;
+
+  const initial = untrack(() => rule);
+
+  let fieldKey = $state<string | null>(initial?.key ?? null);
+  let fieldQuery = $state("");
+  let operator = $state<FilterOperator>(
+    initial?.operator ?? untrack(() => (fields[0] ? operatorsOf(fields[0].filter)[0] : "contains")),
+  );
+  let text = $state(typeof initial?.value === "string" ? initial.value : "");
+  let amount = $state<number | null | undefined>(
+    typeof initial?.value === "number" ? initial.value : null,
+  );
+  let choices = $state<string[]>(Array.isArray(initial?.value) ? [...initial.value] : []);
+
+  const field = $derived(fields.find((candidate) => candidate.key === fieldKey));
+  const operators = $derived(field ? operatorsOf(field.filter) : []);
+
+  const shownFields = $derived.by(() => {
+    const query = normalizeForSearch(fieldQuery.trim());
+    if (query === "") return fields;
+    return fields.filter((candidate) => normalizeForSearch(candidate.label).includes(query));
+  });
+
+  const draft = $derived.by((): FilterRule | undefined => {
+    if (!field) return undefined;
+    const { key, filter } = field;
+    if (filter.kind === "choice") return { key, operator: "in", value: choices };
+    if (filter.kind === "number")
+      return typeof amount === "number"
+        ? { key, operator: operator as NumberOperator, value: amount }
+        : undefined;
+    return { key, operator: operator as TextOperator, value: text };
+  });
+
+  const valid = $derived(draft !== undefined && isRuleActive(columns, draft));
+
+  const pick = (candidate: FilterableColumn<T>) => {
+    const keepOperator = operatorsOf(candidate.filter).includes(operator);
+    fieldKey = candidate.key;
+    if (!keepOperator) operator = operatorsOf(candidate.filter)[0];
+    choices = [];
+  };
+
+  const toggleChoice = (value: string) => {
+    choices = choices.includes(value)
+      ? choices.filter((picked) => picked !== value)
+      : [...choices, value];
+  };
+
+  const submit = (event: SubmitEvent) => {
+    event.preventDefault();
+    if (draft && valid) onapply(draft);
+  };
+
+  const focusOnMount = (node: HTMLElement) => {
+    node.focus();
+  };
+
+  const kindGlyph = (column: FilterableColumn<T>) => {
+    if (column.filter.kind === "number") return "#";
+    if (column.filter.kind === "choice") return "≡";
+    return "Aa";
+  };
+</script>
+
+{#if !field}
+  <div class="plinth-filter-editor">
+    {#if fields.length > FIELD_SEARCH_THRESHOLD}
+      <input
+        class="input w-full input-sm"
+        type="search"
+        placeholder={labels.searchFields}
+        aria-label={labels.searchFields}
+        bind:value={fieldQuery}
+        {@attach focusOnMount}
+      />
+    {/if}
+    <ul class="plinth-filter-fields" aria-label={labels.fields}>
+      {#each shownFields as candidate (candidate.key)}
+        <li>
+          <button type="button" class="plinth-filter-field" onclick={() => pick(candidate)}>
+            <span class="plinth-filter-glyph" aria-hidden="true">{kindGlyph(candidate)}</span>
+            {candidate.label}
+          </button>
+        </li>
+      {:else}
+        <li class="plinth-filter-none">{labels.noFields}</li>
+      {/each}
+    </ul>
+  </div>
+{:else}
+  <form class="plinth-filter-editor" onsubmit={submit}>
+    <div class="plinth-filter-head">
+      <button
+        type="button"
+        class="plinth-filter-back"
+        aria-label={labels.back}
+        onclick={() => (fieldKey = null)}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m15 18-6-6 6-6" />
+        </svg>
+      </button>
+      <span class="plinth-filter-title">{field.label}</span>
+    </div>
+
+    {#if operators.length > 1}
+      <SegmentedControl
+        class="plinth-filter-operators"
+        label={labels.operatorGroup(field as Column<never>)}
+        options={operators.map((id) => ({
+          id,
+          label: labels.operator(id, field as Column<never>),
+        }))}
+        value={operator}
+        onchange={(id) => (operator = id)}
+      />
+    {/if}
+
+    {#if field.filter.kind === "number"}
+      <input
+        class="input w-full input-sm"
+        type="number"
+        aria-label={labels.value}
+        placeholder={labels.value}
+        min={field.filter.min}
+        max={field.filter.max}
+        step={field.filter.step ?? "any"}
+        bind:value={amount}
+        {@attach focusOnMount}
+      />
+    {:else if field.filter.kind === "text"}
+      <input
+        class="input w-full input-sm"
+        type="text"
+        aria-label={labels.value}
+        placeholder={labels.value}
+        bind:value={text}
+        {@attach focusOnMount}
+      />
+    {:else}
+      <Listbox
+        class="plinth-filter-choices"
+        aria-label={field.label}
+        options={field.filter.options}
+        value={choices}
+        onpick={(option) => toggleChoice(option.value)}
+        searchable={field.filter.options.length > CHOICE_SEARCH_THRESHOLD}
+        searchPlaceholder={labels.search}
+        emptyLabel={labels.noOptions}
+        autofocus
+      />
+    {/if}
+
+    <button type="submit" class="btn btn-primary btn-sm" disabled={!valid}>
+      {labels.apply}
+    </button>
+  </form>
+{/if}
+
+<style>
+  .plinth-filter-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .plinth-filter-fields {
+    display: flex;
+    flex-direction: column;
+    max-height: 16rem;
+    overflow-y: auto;
+  }
+
+  .plinth-filter-field {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--radius-field, 0.5rem);
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .plinth-filter-field:hover,
+  .plinth-filter-field:focus-visible {
+    background: color-mix(in oklch, var(--color-base-content) 6%, transparent);
+    outline: none;
+  }
+
+  .plinth-filter-glyph {
+    display: inline-grid;
+    place-items: center;
+    width: 1.5rem;
+    height: 1.25rem;
+    border-radius: 0.25rem;
+    background: color-mix(in oklch, var(--color-base-content) 7%, transparent);
+    color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+    font-size: 0.6875rem;
+    font-weight: 600;
+  }
+
+  .plinth-filter-none {
+    padding: 0.5rem;
+    font-size: 0.875rem;
+    color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+  }
+
+  .plinth-filter-head {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .plinth-filter-back {
+    display: inline-grid;
+    place-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: var(--radius-field, 0.5rem);
+    color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+    cursor: pointer;
+  }
+
+  .plinth-filter-back:hover {
+    background: color-mix(in oklch, var(--color-base-content) 6%, transparent);
+  }
+
+  .plinth-filter-back svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .plinth-filter-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  :global(.plinth-filter-operators) {
+    width: 100%;
+  }
+
+  :global(.plinth-filter-operators .plinth-segmented-options) {
+    display: grid;
+    flex: 1;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+  }
+
+  :global(.plinth-filter-operators .plinth-segment) {
+    font-size: 0.875rem;
+  }
+</style>

package/dist/table/FilterRuleEditor.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { FilterLabels } from "./filter-labels.js";
+import { type FilterableColumn } from "./filter.js";
+import type { Column, FilterRule } from "./types.js";
+declare function $$render<T>(): {
+    props: {
+        columns: readonly Column<T>[];
+        fields: readonly FilterableColumn<T>[];
+        rule?: FilterRule;
+        labels: FilterLabels;
+        onapply: (rule: FilterRule) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FilterRuleEditor: $$IsomorphicComponent;
+type FilterRuleEditor<T> = InstanceType<typeof FilterRuleEditor<T>>;
+export default FilterRuleEditor;

package/dist/table/filter-labels.d.ts

@@ -0,0 +1,23 @@
+import type { Column, FilterCombinator, FilterOperator } from "./types.js";
+export interface FilterLabels {
+    add: string;
+    addGroup: string;
+    clear: string;
+    apply: string;
+    back: string;
+    fields: string;
+    searchFields: string;
+    search: string;
+    noFields: string;
+    noOptions: string;
+    value: string;
+    group: string;
+    combinator: (combinator: FilterCombinator) => string;
+    toggleCombinator: (next: FilterCombinator) => string;
+    operator: (operator: FilterOperator, column: Column<never>) => string;
+    operatorGroup: (column: Column<never>) => string;
+    remove: (description: string) => string;
+    removeGroup: string;
+    edit: (description: string) => string;
+}
+export declare const DEFAULT_FILTER_LABELS: FilterLabels;

package/dist/table/filter-labels.js

@@ -0,0 +1,30 @@
+const SYMBOLS = {
+    contains: "contains",
+    eq: "=",
+    gte: "≥",
+    gt: ">",
+    lte: "≤",
+    lt: "<",
+    in: "is",
+};
+export const DEFAULT_FILTER_LABELS = {
+    add: "Filter",
+    addGroup: "Group",
+    clear: "Clear",
+    apply: "Apply",
+    back: "Back to fields",
+    fields: "Fields",
+    searchFields: "Find a field…",
+    search: "Search…",
+    noFields: "No field matches",
+    noOptions: "No option matches",
+    value: "Value",
+    group: "Filter group",
+    combinator: (combinator) => combinator,
+    toggleCombinator: (next) => `Match ${next === "and" ? "all" : "any"} of these`,
+    operator: (operator, column) => operator === "eq" && column.filter?.kind === "text" ? "is" : SYMBOLS[operator],
+    operatorGroup: (column) => `${column.label} comparison`,
+    remove: (description) => `Remove filter ${description}`,
+    removeGroup: "Remove group",
+    edit: (description) => `Edit filter ${description}`,
+};

package/dist/table/filter.d.ts

@@ -0,0 +1,27 @@
+import type { Column, ColumnFilter, FilterCombinator, FilterGroup, FilterNode, FilterOperator, FilterRule, NumberOperator, TextOperator } from "./types.js";
+export type FilterableColumn<T> = Column<T> & {
+    filter: ColumnFilter<T>;
+};
+export type NodePath = readonly number[];
+export declare const TEXT_OPERATORS: readonly TextOperator[];
+export declare const NUMBER_OPERATORS: readonly NumberOperator[];
+export declare const isGroup: (node: FilterNode) => node is FilterGroup;
+export declare const emptyFilter: (combinator?: FilterCombinator) => FilterGroup;
+export declare const operatorsOf: <T>(filter: ColumnFilter<T>) => readonly FilterOperator[];
+export declare const filterableColumns: <T>(columns: readonly Column<T>[]) => FilterableColumn<T>[];
+export declare const filterValue: <T>(column: Column<T>, row: T) => unknown;
+export declare const isRuleActive: <T>(columns: readonly Column<T>[], rule: FilterRule) => boolean;
+export declare const normalizeFilter: <T>(columns: readonly Column<T>[], filter: FilterGroup) => FilterGroup;
+export declare const filterRules: (node: FilterNode) => FilterRule[];
+export declare const isFilterEmpty: <T>(columns: readonly Column<T>[], filter: FilterGroup) => boolean;
+export declare const filterRows: <T>(rows: readonly T[], columns: readonly Column<T>[], filter: FilterGroup) => readonly T[];
+export declare const findRule: (filter: FilterGroup, key: string, operator: FilterOperator) => FilterRule | undefined;
+export declare const setRule: (filter: FilterGroup, rule: FilterRule) => FilterGroup;
+export declare const removeRule: (filter: FilterGroup, key: string, operator?: FilterOperator) => FilterGroup;
+export declare const nodeAt: (filter: FilterGroup, path: NodePath) => FilterNode | undefined;
+export declare const addNode: (filter: FilterGroup, groupPath: NodePath, node: FilterNode) => FilterGroup;
+export declare const replaceNode: (filter: FilterGroup, path: NodePath, node: FilterNode) => FilterGroup;
+export declare const removeNode: (filter: FilterGroup, path: NodePath) => FilterGroup;
+export declare const setCombinator: (filter: FilterGroup, groupPath: NodePath, combinator: FilterCombinator) => FilterGroup;
+export declare const filterToParams: (filter: FilterGroup, name?: string) => Record<string, string | null>;
+export declare const filterFromParams: <T>(params: URLSearchParams, columns: readonly Column<T>[], name?: string) => FilterGroup;

package/dist/table/filter.js

@@ -0,0 +1,279 @@
+import { normalizeForSearch } from "../components/select.js";
+import { cellValue } from "./sort.js";
+export const TEXT_OPERATORS = ["contains", "eq"];
+export const NUMBER_OPERATORS = ["gte", "lte", "eq", "gt", "lt"];
+const CHOICE_OPERATORS = ["in"];
+const MAX_DEPTH = 4;
+export const isGroup = (node) => "children" in node;
+export const emptyFilter = (combinator = "and") => ({
+    combinator,
+    children: [],
+});
+export const operatorsOf = (filter) => {
+    if (filter.kind === "text")
+        return filter.operators ?? TEXT_OPERATORS;
+    if (filter.kind === "number")
+        return filter.operators ?? NUMBER_OPERATORS;
+    return CHOICE_OPERATORS;
+};
+export const filterableColumns = (columns) => columns.filter((column) => column.filter !== undefined);
+export const filterValue = (column, row) => column.filter?.value ? column.filter.value(row) : cellValue(column, row);
+const asText = (value) => {
+    if (typeof value === "string")
+        return value === "" ? undefined : value;
+    if (typeof value === "number")
+        return Number.isNaN(value) ? undefined : String(value);
+    if (typeof value === "boolean" || typeof value === "bigint")
+        return String(value);
+    return undefined;
+};
+const asNumber = (value) => {
+    if (typeof value === "number")
+        return Number.isFinite(value) ? value : undefined;
+    if (typeof value === "string" && value.trim() !== "") {
+        const parsed = Number(value);
+        return Number.isFinite(parsed) ? parsed : undefined;
+    }
+    return undefined;
+};
+const lookup = (columns) => new Map(columns.map((column) => [column.key, column]));
+const normalizeRule = (column, rule) => {
+    const filter = column?.filter;
+    if (!filter || !operatorsOf(filter).includes(rule.operator))
+        return undefined;
+    if (filter.kind === "text")
+        return typeof rule.value === "string" && rule.value.trim() !== "" ? rule : undefined;
+    if (filter.kind === "number")
+        return typeof rule.value === "number" && Number.isFinite(rule.value) ? rule : undefined;
+    if (!Array.isArray(rule.value))
+        return undefined;
+    const known = new Set(filter.options.map((option) => option.value));
+    const value = [...new Set(rule.value)].filter((picked) => known.has(picked));
+    return value.length === 0 ? undefined : { key: rule.key, operator: "in", value };
+};
+export const isRuleActive = (columns, rule) => normalizeRule(lookup(columns).get(rule.key), rule) !== undefined;
+const normalizeNode = (byKey, node, depth) => {
+    if (!isGroup(node))
+        return normalizeRule(byKey.get(node.key), node);
+    if (depth > MAX_DEPTH)
+        return undefined;
+    const children = node.children.flatMap((child) => {
+        const normalized = normalizeNode(byKey, child, depth + 1);
+        return normalized ? [normalized] : [];
+    });
+    if (children.length === 0)
+        return undefined;
+    if (children.length === 1)
+        return children[0];
+    return { combinator: node.combinator === "or" ? "or" : "and", children };
+};
+export const normalizeFilter = (columns, filter) => {
+    const normalized = normalizeNode(lookup(columns), filter, 0);
+    if (!normalized)
+        return emptyFilter(filter.combinator);
+    return isGroup(normalized)
+        ? normalized
+        : { combinator: filter.combinator, children: [normalized] };
+};
+export const filterRules = (node) => isGroup(node) ? node.children.flatMap(filterRules) : [node];
+export const isFilterEmpty = (columns, filter) => normalizeFilter(columns, filter).children.length === 0;
+const compareNumber = (operator, left, right) => {
+    if (operator === "gte")
+        return left >= right;
+    if (operator === "gt")
+        return left > right;
+    if (operator === "lte")
+        return left <= right;
+    if (operator === "lt")
+        return left < right;
+    return left === right;
+};
+const rulePredicate = (column, rule) => {
+    const read = (row) => filterValue(column, row);
+    if (rule.operator === "in") {
+        const picked = new Set(rule.value);
+        return (row) => {
+            const text = asText(read(row));
+            return text !== undefined && picked.has(text);
+        };
+    }
+    if (column.filter?.kind === "number" && typeof rule.value === "number") {
+        const operator = rule.operator;
+        const target = rule.value;
+        return (row) => {
+            const value = asNumber(read(row));
+            return value !== undefined && compareNumber(operator, value, target);
+        };
+    }
+    const query = normalizeForSearch(String(rule.value));
+    const exact = rule.operator === "eq";
+    return (row) => {
+        const text = asText(read(row));
+        if (text === undefined)
+            return false;
+        const normalized = normalizeForSearch(text);
+        return exact ? normalized === query : normalized.includes(query);
+    };
+};
+const compile = (byKey, node) => {
+    if (!isGroup(node))
+        return rulePredicate(byKey.get(node.key), node);
+    const tests = node.children.map((child) => compile(byKey, child));
+    return node.combinator === "or"
+        ? (row) => tests.some((test) => test(row))
+        : (row) => tests.every((test) => test(row));
+};
+export const filterRows = (rows, columns, filter) => {
+    const normalized = normalizeFilter(columns, filter);
+    if (normalized.children.length === 0)
+        return rows;
+    const test = compile(lookup(columns), normalized);
+    return rows.filter(test);
+};
+const sameSlot = (node, key, operator) => !isGroup(node) && node.key === key && (operator === undefined || node.operator === operator);
+export const findRule = (filter, key, operator) => filter.children.find((node) => sameSlot(node, key, operator));
+export const setRule = (filter, rule) => {
+    const index = filter.children.findIndex((node) => sameSlot(node, rule.key, rule.operator));
+    const children = index === -1
+        ? [...filter.children, rule]
+        : filter.children.map((node, at) => (at === index ? rule : node));
+    return { ...filter, children };
+};
+export const removeRule = (filter, key, operator) => ({
+    ...filter,
+    children: filter.children.filter((node) => !sameSlot(node, key, operator)),
+});
+export const nodeAt = (filter, path) => {
+    let node = filter;
+    for (const index of path) {
+        if (!isGroup(node) || index < 0 || index >= node.children.length)
+            return undefined;
+        node = node.children[index];
+    }
+    return node;
+};
+const updateGroup = (group, path, update) => {
+    if (path.length === 0)
+        return update(group);
+    const [head, ...rest] = path;
+    return {
+        ...group,
+        children: group.children.map((child, index) => index === head && isGroup(child) ? updateGroup(child, rest, update) : child),
+    };
+};
+export const addNode = (filter, groupPath, node) => updateGroup(filter, groupPath, (group) => ({ ...group, children: [...group.children, node] }));
+export const replaceNode = (filter, path, node) => {
+    if (path.length === 0)
+        return isGroup(node) ? node : filter;
+    const parent = path.slice(0, -1);
+    const index = path[path.length - 1];
+    return updateGroup(filter, parent, (group) => ({
+        ...group,
+        children: group.children.map((child, at) => (at === index ? node : child)),
+    }));
+};
+export const removeNode = (filter, path) => {
+    if (path.length === 0)
+        return emptyFilter(filter.combinator);
+    const parent = path.slice(0, -1);
+    const index = path[path.length - 1];
+    return updateGroup(filter, parent, (group) => ({
+        ...group,
+        children: group.children.filter((_, at) => at !== index),
+    }));
+};
+export const setCombinator = (filter, groupPath, combinator) => updateGroup(filter, groupPath, (group) => ({ ...group, combinator }));
+const FILTER_PARAM = "filter";
+const escapePart = (text) => encodeURIComponent(text).replace(/[()]/g, (char) => (char === "(" ? "%28" : "%29"));
+const encodeRule = (rule) => {
+    const value = Array.isArray(rule.value)
+        ? rule.value.map(escapePart).join(",")
+        : escapePart(String(rule.value));
+    return `${escapePart(rule.key)}:${rule.operator}:${value}`;
+};
+const encodeNode = (node) => {
+    if (!isGroup(node))
+        return encodeRule(node);
+    const children = node.children.flatMap((child) => encodeNode(child) ?? []);
+    if (children.length === 0)
+        return undefined;
+    return `${node.combinator}(${children.join(";")})`;
+};
+export const filterToParams = (filter, name = FILTER_PARAM) => {
+    const children = filter.children.flatMap((child) => encodeNode(child) ?? []);
+    if (children.length === 0)
+        return { [name]: null };
+    const body = children.join(";");
+    return { [name]: filter.combinator === "or" ? `or(${body})` : body };
+};
+const decodeRule = (part, byKey) => {
+    const pieces = part.split(":");
+    if (pieces.length !== 3)
+        return undefined;
+    const [rawKey, operator, rawValue] = pieces;
+    try {
+        const key = decodeURIComponent(rawKey);
+        const kind = byKey.get(key)?.filter?.kind;
+        if (kind === "choice")
+            return {
+                key,
+                operator: operator,
+                value: rawValue === "" ? [] : rawValue.split(",").map(decodeURIComponent),
+            };
+        const text = decodeURIComponent(rawValue);
+        if (kind === "number")
+            return {
+                key,
+                operator: operator,
+                value: text.trim() === "" ? Number.NaN : Number(text),
+            };
+        return { key, operator: operator, value: text };
+    }
+    catch {
+        return undefined;
+    }
+};
+const parseExpression = (source, byKey) => {
+    let position = 0;
+    const parseList = (depth) => {
+        const nodes = [];
+        for (;;) {
+            const node = parseItem(depth);
+            if (node === undefined)
+                return undefined;
+            if (node !== null)
+                nodes.push(node);
+            if (source[position] !== ";")
+                return nodes;
+            position += 1;
+        }
+    };
+    const parseItem = (depth) => {
+        const group = /^(and|or)\(/.exec(source.slice(position));
+        if (group) {
+            if (depth >= MAX_DEPTH)
+                return undefined;
+            position += group[0].length;
+            const children = parseList(depth + 1);
+            if (children === undefined || source[position] !== ")")
+                return undefined;
+            position += 1;
+            return { combinator: group[1], children };
+        }
+        const start = position;
+        while (position < source.length && source[position] !== ";" && source[position] !== ")")
+            position += 1;
+        return decodeRule(source.slice(start, position), byKey) ?? null;
+    };
+    const nodes = parseList(0);
+    return nodes !== undefined && position === source.length ? nodes : undefined;
+};
+export const filterFromParams = (params, columns, name = FILTER_PARAM) => {
+    const raw = params.get(name);
+    if (!raw)
+        return emptyFilter();
+    const nodes = parseExpression(raw, lookup(columns));
+    if (!nodes)
+        return emptyFilter();
+    return normalizeFilter(columns, { combinator: "and", children: nodes });
+};