@ketvietlab/design-system 0.1.24 → 0.1.29

package/dist/interactions/search-filter/index.js

@@ -0,0 +1,824 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@ketvietlab/ketjs-view/jsx-runtime";
+import { ModalSheet } from '../../patterns/modal-sheet/index.js';
+import { each, signal } from '@ketvietlab/ketjs-view';
+export const HOOKS = [
+    'search-filter',
+    'search-filter-bar',
+    'search-filter-section-toggle',
+    'search-filter-sheet',
+    'search-filter-clear',
+    'search-filter-icon',
+    'search-filter-field',
+    'search-filter-input',
+    'search-filter-facets',
+    'search-filter-facet',
+    'search-filter-facet-remove',
+    'search-filter-suggestions',
+    'search-filter-suggestion',
+    'search-filter-toggle',
+    'search-filter-columns',
+    'search-filter-column',
+    'search-filter-column-title',
+    'search-filter-empty',
+    'search-filter-grouping',
+    'search-filter-grouping-head',
+    'search-filter-grouping-list',
+    'search-filter-grouping-item',
+    'search-filter-grouping-order',
+    'search-filter-grouping-label',
+    'search-filter-grouping-actions',
+    'search-filter-grouping-action',
+    'search-filter-grouping-clear',
+    'search-filter-grouping-add-label',
+    'custom-filter',
+    'custom-filter-row',
+    'custom-filter-add',
+    'custom-group-by',
+    'favorite-list',
+    'favorite-item',
+    'favorite-item-default',
+    'favorite-item-remove',
+    'favorite-save',
+    'favorite-save-toggle',
+    'favorite-save-row',
+];
+const defaultOperators = {
+    text: ['contains', 'notContains', 'equals', 'notEquals', 'startsWith', 'isSet', 'isNotSet'],
+    number: ['equals', 'notEquals', 'gt', 'gte', 'lt', 'lte', 'between', 'isSet', 'isNotSet'],
+    boolean: ['isTrue', 'isFalse'],
+    selection: ['equals', 'notEquals', 'anyOf', 'isSet', 'isNotSet'],
+    reference: ['equals', 'notEquals', 'anyOf', 'isSet', 'isNotSet'],
+    date: ['equals', 'notEquals', 'gt', 'gte', 'lt', 'lte', 'between', 'isSet', 'isNotSet'],
+    datetime: ['equals', 'notEquals', 'gt', 'gte', 'lt', 'lte', 'between', 'isSet', 'isNotSet'],
+};
+const operatorLabels = {
+    contains: 'contains',
+    notContains: 'does not contain',
+    equals: 'is',
+    notEquals: 'is not',
+    startsWith: 'starts with',
+    gt: 'is greater than',
+    gte: 'is greater than or equal to',
+    lt: 'is less than',
+    lte: 'is less than or equal to',
+    between: 'is between',
+    anyOf: 'is any of',
+    isTrue: 'is true',
+    isFalse: 'is false',
+    isSet: 'is set',
+    isNotSet: 'is not set',
+};
+/** An operator that stands on its own and takes no value ("is set", "is true", …). */
+const isValuelessOperator = (operator) => operator === 'isTrue' || operator === 'isFalse' || operator === 'isSet' || operator === 'isNotSet';
+/**
+ * The rule a free-text "Search <field> for: …" suggestion stands for, or null
+ * when the text cannot be one. Every suggestion must be a filter the server
+ * accepts, so a field whose values free text cannot name — a choice, a record,
+ * a date — is left to the custom-filter editor instead of being offered here.
+ */
+const suggestedRule = (field, text) => {
+    if (field.type === 'text')
+        return { field: field.value, operator: 'contains', value: text };
+    // Whole numbers only: `1.000` is a thousand to a Vietnamese reader and one to `Number`.
+    if (field.type === 'number' && /^-?\d+$/.test(text))
+        return { field: field.value, operator: 'equals', value: text };
+    return null;
+};
+/** Shared by SSR and interactive chips; values remain data and choices supply display labels. */
+export const searchFilterRuleLabel = (options) => {
+    const operator = options.operatorLabels?.[options.operator] ?? operatorLabels[options.operator];
+    const prefix = `${options.fieldLabel} ${operator}`;
+    if (isValuelessOperator(options.operator) || options.value == null || options.value === '')
+        return prefix;
+    const values = Array.isArray(options.value)
+        ? options.value
+        : options.operator === 'anyOf' || options.operator === 'between'
+            ? String(options.value)
+                .split(',')
+                .map((part) => part.trim())
+            : [options.value];
+    const value = values
+        .map((part) => options.choices?.find((choice) => choice.value === String(part))?.label ?? String(part))
+        .join(', ');
+    return `${prefix}: ${value}`;
+};
+const string = (value) => (value == null ? '' : String(value));
+/**
+ * A function call that failed. `retryable` when it never reached a verdict — the
+ * network dropped or the server faulted — so the same request may yet succeed;
+ * a refusal (4xx) would only be refused again.
+ */
+class ApiError extends Error {
+    retryable;
+    constructor(message, retryable) {
+        super(message);
+        this.retryable = retryable;
+    }
+}
+const callApi = async (name, input) => {
+    let response;
+    try {
+        response = await fetch(`/_ket/fn/${encodeURIComponent(name)}`, {
+            method: 'POST',
+            credentials: 'same-origin',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify(input),
+        });
+    }
+    catch (caught) {
+        throw new ApiError(caught instanceof Error ? caught.message : 'network error', true);
+    }
+    // A proxy in front of a faulting server answers with HTML, not the JSON envelope.
+    const payload = (await response.json().catch(() => ({})));
+    if (!response.ok || payload.ok === false) {
+        const domainError = payload.errors?.[0];
+        throw new ApiError(string(domainError?.message ?? payload.message ?? `HTTP ${response.status}`), response.status >= 500);
+    }
+    return payload.value;
+};
+const flatten = (options) => options.flatMap((option) => (option.options?.length ? flatten(option.options) : [option]));
+export function createSearchFilterView(props) {
+    const { config } = props;
+    const labels = {
+        clearFilters: 'Clear filters',
+        close: 'Close',
+        favoriteCancel: 'Cancel',
+        favoriteError: 'Could not save changes to saved searches',
+        valueFrom: 'From',
+        valueTo: 'To',
+        groupByApplied: config.labels.groupBy,
+        groupByAdd: config.labels.customGroupByPlaceholder,
+        groupByClear: config.labels.clear,
+        groupByMoveEarlier: 'Move earlier',
+        groupByMoveLater: 'Move later',
+        ...config.labels,
+    };
+    const operatorLabel = (operator) => labels.operatorLabels?.[operator] ?? operatorLabels[operator];
+    const capabilities = config.capabilities ?? {};
+    const manager = config.manager;
+    const hasGrouping = capabilities.groupBy !== false && config.groupBy.length > 0;
+    const groupByOptions = flatten(config.groupBy);
+    const fieldSuggestions = (text) => config.customFilterFields.filter((field) => suggestedRule(field, text));
+    const facets = signal(config.facets);
+    const favorites = signal(config.favorites);
+    const hasFavorites = () => capabilities.favorites !== false &&
+        Boolean(favorites().length || manager?.saveFavoriteFunction || config.favoriteHref);
+    const customFilterRules = signal(Object.fromEntries((config.customFilters ?? []).map((rule) => [
+        rule.id,
+        { field: rule.field, operator: rule.operator, value: rule.value },
+    ])));
+    const query = signal(config.query ?? '');
+    const suggestionsOpen = signal(false);
+    const customFilterField = signal('');
+    const customFilterOperator = signal('');
+    const customFilterValue = signal('');
+    const menuOpen = signal(false);
+    const panel = signal('filter');
+    const sheetOpen = signal(false);
+    const savingFavorite = signal(false);
+    const customFilterEnd = signal('');
+    let sheetOpener = null;
+    let menuOpener = null;
+    const focusControl = (selector) => {
+        const control = [...(mountedRoot?.querySelectorAll(selector) ?? [])][0];
+        if (typeof HTMLElement !== 'undefined' && control instanceof HTMLElement)
+            control.focus();
+    };
+    const closeFavoriteForm = () => {
+        savingFavorite.set(false);
+        queueMicrotask(() => {
+            if (menuOpen() || sheetOpen())
+                focusControl('[data-ui="favorite-save-toggle"]');
+            else
+                menuOpener?.focus();
+        });
+    };
+    const closeMenu = () => {
+        savingFavorite.set(false);
+        menuOpen.set(false);
+    };
+    const dismissDisclosure = (event) => {
+        const disclosure = event.target instanceof Element ? event.target.closest('details[data-ui="disclosure"][open]') : null;
+        if (!(disclosure instanceof HTMLDetailsElement))
+            return false;
+        disclosure.open = false;
+        const summary = disclosure.querySelector('summary');
+        if (summary instanceof HTMLElement)
+            summary.focus();
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    };
+    const dialogElement = () => {
+        const candidate = [...(mountedRoot?.querySelectorAll('[data-ui="search-filter-sheet"]') ?? [])][0];
+        return typeof HTMLDialogElement !== 'undefined' && candidate instanceof HTMLDialogElement
+            ? candidate
+            : null;
+    };
+    const closeSheet = () => {
+        closeMenu();
+        dialogElement()?.close();
+        sheetOpen.set(false);
+        sheetOpener?.focus();
+    };
+    const openPanel = (kind) => {
+        if (panel() !== kind)
+            savingFavorite.set(false);
+        panel.set(kind);
+        menuOpen.set(true);
+        suggestionsOpen.set(false);
+    };
+    const togglePanel = (event) => {
+        menuOpener = event.currentTarget;
+        const switching = menuOpen() && panel() !== 'filter';
+        if (switching)
+            savingFavorite.set(false);
+        panel.set('filter');
+        suggestionsOpen.set(false);
+        if (!window.matchMedia('(max-width: 640px)').matches) {
+            if (switching)
+                event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        sheetOpener = event.currentTarget;
+        closeMenu();
+        sheetOpen.set(true);
+        queueMicrotask(() => {
+            const dialog = dialogElement();
+            if (dialog && !dialog.open) {
+                dialog.showModal();
+                focusControl('[data-ui="search-filter-sheet"] [data-ui="modal-close"]');
+            }
+        });
+    };
+    const saveFavoriteName = signal('');
+    const saveFavoriteDefault = signal(false);
+    const pending = signal(false);
+    const error = signal('');
+    // What the rendered list actually shows. Chips change before the request goes
+    // out, so a request that fails must put them back here rather than leave a
+    // filter on screen that never applied.
+    let settled = { facets: facets(), rules: customFilterRules() };
+    const retryDraft = signal(null);
+    let mountedRoot = null;
+    // `value={query()}` only writes the attribute, which a field the reader has
+    // typed into no longer displays — the live property is what they see.
+    const setQuery = (value) => {
+        query.set(value);
+        if (!mountedRoot)
+            return;
+        for (const input of mountedRoot.querySelectorAll('[data-ui="search-filter-input"]'))
+            if (input instanceof HTMLInputElement && input.value !== value)
+                input.value = value;
+    };
+    const isActive = (kind, id) => facets().some((facet) => facet.type === kind && facet.id === id);
+    const countOf = (kind) => facets().filter((facet) => facet.type === kind).length;
+    const activeFavoriteId = () => facets().find((facet) => facet.type === 'favorite')?.id ?? '';
+    const groupByFacets = () => facets().filter((facet) => facet.type === 'groupBy');
+    const operatorsFor = (fieldValue) => {
+        const field = config.customFilterFields.find((entry) => entry.value === fieldValue);
+        return field ? defaultOperators[field.type] : [];
+    };
+    const applyPayload = () => ({
+        ...(manager?.applyInput ?? {}),
+        query: query(),
+        facets: facets(),
+        filters: facets()
+            .filter((facet) => facet.type === 'filter' && !customFilterRules()[facet.id])
+            .map((facet) => facet.id),
+        groupBy: facets()
+            .filter((facet) => facet.type === 'groupBy')
+            .map((facet) => facet.id),
+        favoriteId: activeFavoriteId() || null,
+        customFilters: Object.entries(customFilterRules()).map(([id, rule]) => ({ id, ...rule })),
+    });
+    let applyVersion = 0;
+    let navigationRequest = null;
+    let startingNavigation = false;
+    /**
+     * Sends the current facets. `consumed` is text the triggering action moved
+     * out of the search field into a chip; a failed request hands it back.
+     */
+    const apply = async (consumed = '') => {
+        closeMenu();
+        if (!manager?.applyFunction)
+            return;
+        const version = ++applyVersion;
+        navigationRequest?.abort();
+        const request = new AbortController();
+        navigationRequest = request;
+        const attempted = { facets: facets(), rules: customFilterRules() };
+        pending.set(true);
+        error.set('');
+        retryDraft.set(null);
+        try {
+            const value = (await callApi(manager.applyFunction, applyPayload()));
+            if (version !== applyVersion)
+                return;
+            const body = document.getElementById(manager.bodyId);
+            if (body && typeof value?.html === 'string')
+                body.innerHTML = value.html;
+            if (typeof value?.href === 'string' && typeof value.html !== 'string') {
+                // The shell owns routing, history and island reconciliation. A standalone
+                // consumer without that shell keeps the native navigation fallback.
+                let navigation;
+                const detail = {
+                    id: props.id,
+                    href: value.href,
+                    signal: request.signal,
+                    respondWith: (result) => {
+                        navigation = result;
+                    },
+                };
+                startingNavigation = true;
+                try {
+                    document.dispatchEvent?.(new CustomEvent('ket:search-filter-navigate', { detail }));
+                }
+                finally {
+                    startingNavigation = false;
+                }
+                if (navigation)
+                    await navigation;
+                else
+                    window.location.assign(value.href);
+            }
+            else if (typeof value?.href === 'string') {
+                history.pushState(null, '', value.href);
+            }
+            if (version === applyVersion)
+                settled = attempted;
+        }
+        catch (caught) {
+            if (version !== applyVersion)
+                return;
+            facets.set(settled.facets);
+            customFilterRules.set(settled.rules);
+            if (consumed && !query())
+                setQuery(consumed);
+            if (caught instanceof Error && 'retryable' in caught && caught.retryable === true)
+                retryDraft.set({ ...attempted, consumed });
+            if (caught instanceof Error && caught.name === 'AbortError')
+                return;
+            // The server's message is an English diagnostic, not copy for the reader.
+            error.set(labels.applyError);
+        }
+        finally {
+            if (version === applyVersion)
+                pending.set(false);
+        }
+    };
+    /** Sends the failed request again, chips and all, as the reader last asked for it. */
+    const retry = () => {
+        const draft = retryDraft();
+        if (!draft)
+            return;
+        facets.set(draft.facets);
+        customFilterRules.set(draft.rules);
+        if (draft.consumed && query() === draft.consumed)
+            setQuery('');
+        void apply(draft.consumed);
+    };
+    const clearFavorite = () => {
+        if (activeFavoriteId())
+            facets.set(facets().filter((facet) => facet.type !== 'favorite'));
+    };
+    const removeFacet = (facet) => {
+        if (facet.type !== 'favorite')
+            clearFavorite();
+        facets.set(facets().filter((held) => held.id !== facet.id));
+        if (customFilterRules()[facet.id]) {
+            const next = { ...customFilterRules() };
+            delete next[facet.id];
+            customFilterRules.set(next);
+        }
+        void apply();
+    };
+    const toggleFilter = (option) => {
+        clearFavorite();
+        if (isActive('filter', option.id)) {
+            removeFacet({ id: option.id, type: 'filter', label: option.label });
+            return;
+        }
+        facets.set([...facets(), { id: option.id, type: 'filter', label: option.label }]);
+        void apply();
+    };
+    const toggleGroupBy = (option) => {
+        if (!isActive('groupBy', option.id) && groupByFacets().length >= (config.maxGroupBy ?? Infinity))
+            return;
+        clearFavorite();
+        if (isActive('groupBy', option.id)) {
+            removeFacet({ id: option.id, type: 'groupBy', label: option.label });
+            return;
+        }
+        facets.set([...facets(), { id: option.id, type: 'groupBy', label: option.label }]);
+        void apply();
+    };
+    const clearFilters = () => {
+        facets.set(facets().filter((facet) => facet.type === 'field' || facet.type === 'groupBy'));
+        customFilterRules.set({});
+        void apply();
+    };
+    const selectedField = () => config.customFilterFields.find((entry) => entry.value === customFilterField());
+    const canAddRule = () => {
+        const field = selectedField();
+        const operator = customFilterOperator();
+        if (!field || !operatorsFor(field.value).includes(operator))
+            return false;
+        if (isValuelessOperator(operator))
+            return true;
+        if (!customFilterValue().trim())
+            return false;
+        if (operator === 'between' && !customFilterEnd().trim())
+            return false;
+        const values = operator === 'between'
+            ? [customFilterValue(), customFilterEnd()]
+            : operator === 'anyOf'
+                ? customFilterValue().split(',')
+                : [customFilterValue()];
+        if (field.type === 'number' && values.some((value) => !Number.isFinite(Number(value))))
+            return false;
+        if (field.choices && values.some((value) => !field.choices.some((choice) => choice.value === value)))
+            return false;
+        return true;
+    };
+    const addCustomFilter = () => {
+        const field = config.customFilterFields.find((entry) => entry.value === customFilterField());
+        const operator = customFilterOperator();
+        if (!field || !canAddRule())
+            return;
+        const value = isValuelessOperator(operator)
+            ? ''
+            : operator === 'between'
+                ? `${customFilterValue().trim()},${customFilterEnd().trim()}`
+                : customFilterValue().trim();
+        const label = searchFilterRuleLabel({
+            fieldLabel: field.label,
+            operator,
+            value,
+            choices: field.choices,
+            operatorLabels: labels.operatorLabels,
+        });
+        clearFavorite();
+        const id = `custom-filter:${crypto.randomUUID()}`;
+        customFilterRules.set({ ...customFilterRules(), [id]: { field: field.value, operator, value } });
+        facets.set([...facets(), { id, type: 'filter', label }]);
+        customFilterField.set('');
+        customFilterOperator.set('');
+        customFilterValue.set('');
+        customFilterEnd.set('');
+        void apply();
+    };
+    const handleSearchInput = (event) => {
+        if (!(event.currentTarget instanceof HTMLInputElement))
+            return;
+        query.set(event.currentTarget.value);
+        suggestionsOpen.set(event.currentTarget.value.trim() !== '');
+    };
+    const selectGenericSuggestion = () => {
+        const value = query().trim();
+        if (!value)
+            return;
+        clearFavorite();
+        facets.set([
+            ...facets().filter((facet) => facet.type !== 'field'),
+            { id: `query:${crypto.randomUUID()}`, type: 'field', label: value },
+        ]);
+        setQuery('');
+        suggestionsOpen.set(false);
+        void apply(value);
+    };
+    const selectFieldSuggestion = (field) => {
+        const value = query().trim();
+        const rule = value ? suggestedRule(field, value) : null;
+        if (!rule)
+            return;
+        clearFavorite();
+        const id = `custom-filter:${crypto.randomUUID()}`;
+        customFilterRules.set({ ...customFilterRules(), [id]: rule });
+        facets.set([
+            ...facets(),
+            {
+                id,
+                type: 'filter',
+                label: searchFilterRuleLabel({
+                    fieldLabel: field.label,
+                    operator: rule.operator,
+                    value: rule.value,
+                    choices: field.choices,
+                    operatorLabels: labels.operatorLabels,
+                }),
+            },
+        ]);
+        setQuery('');
+        suggestionsOpen.set(false);
+        void apply(value);
+    };
+    const handleSearchKeydown = (event) => {
+        if (!(event instanceof KeyboardEvent))
+            return;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            selectGenericSuggestion();
+        }
+        else if (event.key === 'Escape') {
+            suggestionsOpen.set(false);
+        }
+    };
+    const applyFavorite = (favorite) => {
+        facets.set([
+            ...facets().filter((held) => held.type !== 'favorite'),
+            { id: favorite.id, type: 'favorite', label: favorite.label },
+        ]);
+        void apply();
+    };
+    const moveGroupBy = (facet, direction) => {
+        const grouped = groupByFacets();
+        const from = grouped.findIndex((entry) => entry.id === facet.id);
+        const to = from + direction;
+        if (from < 0 || to < 0 || to >= grouped.length)
+            return;
+        const next = [...grouped];
+        [next[from], next[to]] = [next[to], next[from]];
+        clearFavorite();
+        facets.set([...facets().filter((entry) => entry.type !== 'groupBy'), ...next]);
+        void apply();
+    };
+    const clearGroupBy = () => {
+        if (!groupByFacets().length)
+            return;
+        clearFavorite();
+        facets.set(facets().filter((facet) => facet.type !== 'groupBy'));
+        void apply();
+    };
+    const saveFavorite = async (event) => {
+        event.preventDefault();
+        const name = saveFavoriteName().trim();
+        if (!name || !manager?.saveFavoriteFunction)
+            return;
+        pending.set(true);
+        error.set('');
+        retryDraft.set(null);
+        try {
+            const value = (await callApi(manager.saveFavoriteFunction, {
+                name,
+                isDefault: saveFavoriteDefault(),
+                state: applyPayload(),
+            }));
+            const isDefault = saveFavoriteDefault();
+            const favorite = {
+                id: string(value?.id) || crypto.randomUUID(),
+                label: name,
+                isDefault,
+                active: true,
+            };
+            favorites.set([
+                ...favorites().map((entry) => (isDefault ? { ...entry, isDefault: false } : entry)),
+                favorite,
+            ]);
+            applyFavorite(favorite);
+            saveFavoriteName.set('');
+            saveFavoriteDefault.set(false);
+            closeFavoriteForm();
+        }
+        catch {
+            error.set(labels.favoriteError);
+        }
+        finally {
+            pending.set(false);
+        }
+    };
+    const removeFavorite = async (favorite) => {
+        if (!manager?.deleteFavoriteFunction)
+            return;
+        pending.set(true);
+        error.set('');
+        retryDraft.set(null);
+        try {
+            await callApi(manager.deleteFavoriteFunction, { ...(manager.applyInput ?? {}), id: favorite.id });
+            favorites.set(favorites().filter((entry) => entry.id !== favorite.id));
+            if (activeFavoriteId() === favorite.id)
+                removeFacet({ id: favorite.id, type: 'favorite', label: favorite.label });
+        }
+        catch {
+            error.set(labels.favoriteError);
+        }
+        finally {
+            pending.set(false);
+        }
+    };
+    const setDefaultFavorite = async (favorite) => {
+        if (!manager?.setDefaultFavoriteFunction)
+            return;
+        pending.set(true);
+        error.set('');
+        retryDraft.set(null);
+        try {
+            await callApi(manager.setDefaultFavoriteFunction, { ...(manager.applyInput ?? {}), id: favorite.id });
+            favorites.set(favorites().map((entry) => ({ ...entry, isDefault: entry.id === favorite.id })));
+        }
+        catch {
+            error.set(labels.favoriteError);
+        }
+        finally {
+            pending.set(false);
+        }
+    };
+    const facetChip = (facet) => (_jsxs("li", { "data-ui": "search-filter-facet", "data-type": facet.type, children: [_jsxs("span", { children: [facet.type === 'field'
+                        ? `${labels.searchGenericLabel}: `
+                        : facet.type === 'groupBy'
+                            ? `${labels.groupBy}: `
+                            : '', facet.label] }), _jsx("button", { "data-ui": "search-filter-facet-remove", type: "button", "aria-label": `${labels.clear}: ${facet.label}`, title: labels.clear, onClick: () => removeFacet(facet), children: "\u00D7" })] }));
+    const filterMenuItem = (option, previous) => {
+        const divider = previous && previous.group !== option.group ? _jsx("hr", { "data-ui": "menu-separator" }) : null;
+        if (option.options?.length)
+            return (_jsxs(_Fragment, { children: [divider, _jsxs("details", { "data-ui": "disclosure", children: [_jsx("summary", { "data-ui": "disclosure-summary", children: option.label }), _jsx("div", { "data-ui": "disclosure-body", children: each(option.options, (entry) => entry.id, (entry, index) => filterMenuItem(entry, index === 0 ? null : option.options[index - 1])) })] })] }));
+        const active = isActive('filter', option.id);
+        return (_jsxs(_Fragment, { children: [divider, _jsxs("button", { "data-ui": "menu-item", type: "button", "aria-pressed": String(active), onClick: () => toggleFilter(option), children: [_jsx("span", { "data-ui": "menu-item-check", "aria-hidden": "true", children: active ? '✓' : '' }), _jsx("span", { "data-ui": "menu-item-copy", children: _jsx("span", { children: option.label }) })] })] }));
+    };
+    const groupByMenuItem = (option, previous) => {
+        const divider = previous && previous.group !== option.group ? _jsx("hr", { "data-ui": "menu-separator" }) : null;
+        if (option.options?.length)
+            return (_jsxs(_Fragment, { children: [divider, _jsxs("details", { "data-ui": "disclosure", children: [_jsx("summary", { "data-ui": "disclosure-summary", children: option.label }), _jsx("div", { "data-ui": "disclosure-body", children: each(option.options, (entry) => entry.id, (entry, index) => groupByMenuItem(entry, index === 0 ? null : option.options[index - 1])) })] })] }));
+        const active = isActive('groupBy', option.id);
+        if (active)
+            return _jsx(_Fragment, {});
+        return (_jsxs(_Fragment, { children: [divider, _jsxs("button", { "data-ui": "menu-item", type: "button", disabled: groupByFacets().length >= (config.maxGroupBy ?? Infinity), onClick: () => toggleGroupBy(option), children: [_jsx("span", { "data-ui": "menu-item-check", "aria-hidden": "true", children: active ? '✓' : '' }), _jsx("span", { "data-ui": "menu-item-copy", children: _jsx("span", { children: option.label }) })] })] }));
+    };
+    const favoriteRow = (favorite) => (_jsxs("li", { "data-ui": "favorite-item", "data-active": String(favorite.id === activeFavoriteId()), children: [_jsx("button", { "data-ui": "menu-item", type: "button", onClick: () => applyFavorite(favorite), children: _jsx("span", { "data-ui": "menu-item-copy", children: _jsx("span", { children: favorite.label }) }) }), _jsxs("div", { "data-ui": "favorite-item-actions", children: [manager?.setDefaultFavoriteFunction && (_jsx("button", { "data-ui": "favorite-item-default", type: "button", "data-default": String(favorite.isDefault), "aria-label": labels.favoriteSetDefault, title: labels.favoriteSetDefault, onClick: () => setDefaultFavorite(favorite), children: favorite.isDefault ? '★' : '☆' })), manager?.deleteFavoriteFunction && (_jsx("button", { "data-ui": "favorite-item-remove", type: "button", "aria-label": `${labels.favoriteRemove}: ${favorite.label}`, title: labels.favoriteRemove, onClick: () => removeFavorite(favorite), children: "\u00D7" }))] })] }));
+    const columnTitle = (label, count) => (_jsxs("h3", { "data-ui": "search-filter-column-title", children: [label, count ? ` (${count})` : ''] }));
+    const groupByPipeline = () => {
+        const grouped = groupByFacets();
+        if (!grouped.length)
+            return _jsx(_Fragment, {});
+        return (_jsxs("section", { "data-ui": "search-filter-grouping", "aria-label": labels.groupByApplied, children: [_jsxs("div", { "data-ui": "search-filter-grouping-head", children: [_jsx("span", { children: labels.groupByApplied }), _jsx("button", { "data-ui": "search-filter-grouping-clear", type: "button", onClick: clearGroupBy, children: labels.groupByClear })] }), _jsx("ol", { "data-ui": "search-filter-grouping-list", children: each(grouped, (facet) => facet.id, (facet, index) => (_jsxs("li", { "data-ui": "search-filter-grouping-item", children: [_jsx("span", { "data-ui": "search-filter-grouping-order", children: String(index + 1) }), _jsx("span", { "data-ui": "search-filter-grouping-label", children: facet.label }), _jsxs("span", { "data-ui": "search-filter-grouping-actions", children: [index > 0 && (_jsx("button", { "data-ui": "search-filter-grouping-action", type: "button", "aria-label": `${labels.groupByMoveEarlier}: ${facet.label}`, title: `${labels.groupByMoveEarlier}: ${facet.label}`, onClick: () => moveGroupBy(facet, -1), children: "\u2191" })), index + 1 < grouped.length && (_jsx("button", { "data-ui": "search-filter-grouping-action", type: "button", "aria-label": `${labels.groupByMoveLater}: ${facet.label}`, title: `${labels.groupByMoveLater}: ${facet.label}`, onClick: () => moveGroupBy(facet, 1), children: "\u2193" })), _jsx("button", { "data-ui": "search-filter-grouping-action", "data-action": "remove", type: "button", "aria-label": `${labels.clear}: ${facet.label}`, title: `${labels.clear}: ${facet.label}`, onClick: () => removeFacet(facet), children: "\u00D7" })] })] }))) })] }));
+    };
+    const valueEditor = () => {
+        const field = selectedField();
+        const operator = customFilterOperator();
+        if (!field || !operator || isValuelessOperator(operator))
+            return null;
+        if (field.choices)
+            return (_jsxs("select", { "aria-label": labels.customFilterValue, multiple: operator === 'anyOf', onChange: (event) => {
+                    if (event.currentTarget instanceof HTMLSelectElement)
+                        customFilterValue.set(Array.from(event.currentTarget.selectedOptions)
+                            .map((option) => option.value)
+                            .filter(Boolean)
+                            .join(','));
+                }, children: [_jsx("option", { value: "", disabled: true, selected: !customFilterValue(), children: labels.customFilterValue }), each(field.choices, (choice) => choice.value, (choice) => (_jsx("option", { value: choice.value, selected: customFilterValue().split(',').includes(choice.value), children: choice.label })))] }));
+        const type = field.type === 'number'
+            ? 'number'
+            : field.type === 'date'
+                ? 'date'
+                : field.type === 'datetime'
+                    ? 'datetime-local'
+                    : 'text';
+        return (_jsxs(_Fragment, { children: [_jsx("input", { type: type, step: field.type === 'number' ? 'any' : undefined, autocomplete: "off", "aria-label": operator === 'between' ? labels.valueFrom : labels.customFilterValue, placeholder: labels.customFilterValue, value: customFilterValue(), onInput: (event) => {
+                        if (event.currentTarget instanceof HTMLInputElement)
+                            customFilterValue.set(event.currentTarget.value);
+                    } }), operator === 'between' ? (_jsx("input", { type: type, step: field.type === 'number' ? 'any' : undefined, "aria-label": labels.valueTo, value: customFilterEnd(), onInput: (event) => {
+                        if (event.currentTarget instanceof HTMLInputElement)
+                            customFilterEnd.set(event.currentTarget.value);
+                    } })) : null] }));
+    };
+    const icon = (kind) => (_jsx("svg", { "data-ui": "search-filter-icon", viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: _jsx("path", { d: kind === 'filter'
+                ? 'M4 5h16M7 12h10M10 19h4'
+                : kind === 'groupBy'
+                    ? 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'
+                    : kind === 'favorite'
+                        ? 'M6 3h12v18l-6-4-6 4z'
+                        : 'M21 21l-5-5M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0' }) }));
+    const sectionTrigger = (kind, label) => (_jsxs("button", { "data-ui": "search-filter-section-toggle", "data-section": kind, type: "button", "aria-expanded": String(menuOpen() && panel() === kind), "aria-controls": `${props.id}-panel`, onClick: (event) => {
+            event.stopPropagation();
+            menuOpener = event.currentTarget;
+            if (menuOpen() && panel() === kind)
+                closeMenu();
+            else
+                openPanel(kind);
+        }, children: [icon(kind), _jsx("span", { children: label }), countOf(kind) ? _jsx("span", { "data-ui": "menu-trigger-count", children: String(countOf(kind)) }) : null] }));
+    const panelContent = () => (_jsxs("div", { "data-ui": "search-filter-columns", "data-columns": 1 + Number(hasGrouping) + Number(hasFavorites()), "data-panel": sheetOpen() ? 'all' : panel(), children: [_jsxs("div", { "data-ui": "search-filter-column", "data-facet-type": "filter", children: [columnTitle(labels.filters, countOf('filter')), each(config.filters, (option) => option.id, (option, index) => filterMenuItem(option, index === 0 ? null : config.filters[index - 1])), capabilities.customFilters !== false && config.customFilterFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx("hr", { "data-ui": "menu-separator" }), _jsxs("div", { "data-ui": "custom-filter", children: [_jsxs("div", { "data-ui": "custom-filter-row", children: [_jsxs("select", { "aria-label": labels.customFilterField, onChange: (event) => {
+                                                    if (event.currentTarget instanceof HTMLSelectElement) {
+                                                        customFilterField.set(event.currentTarget.value);
+                                                        customFilterOperator.set('');
+                                                        customFilterValue.set('');
+                                                        customFilterEnd.set('');
+                                                    }
+                                                }, children: [_jsx("option", { value: "", disabled: true, selected: !customFilterField(), children: labels.customFilterField }), each(config.customFilterFields, (field) => field.value, (field) => (_jsx("option", { value: field.value, selected: field.value === customFilterField(), children: field.label })))] }), _jsxs("select", { "aria-label": labels.customFilterOperator, disabled: !customFilterField(), onChange: (event) => {
+                                                    if (event.currentTarget instanceof HTMLSelectElement) {
+                                                        customFilterOperator.set(event.currentTarget.value);
+                                                        customFilterValue.set('');
+                                                        customFilterEnd.set('');
+                                                    }
+                                                }, children: [_jsx("option", { value: "", disabled: true, selected: !customFilterOperator(), children: labels.customFilterOperator }), each(operatorsFor(customFilterField()), (operator) => operator, (operator) => (_jsx("option", { value: operator, selected: operator === customFilterOperator(), children: operatorLabel(operator) })))] }), valueEditor()] }), _jsx("button", { "data-ui": "custom-filter-add", type: "button", disabled: !canAddRule(), onClick: addCustomFilter, children: labels.customFilterAdd })] })] }))] }), hasGrouping && (_jsxs("div", { "data-ui": "search-filter-column", "data-facet-type": "groupBy", children: [columnTitle(labels.groupBy, countOf('groupBy')), groupByPipeline(), config.groupBy.length ? (_jsx("p", { "data-ui": "search-filter-grouping-add-label", children: labels.groupByAdd })) : null, each(config.groupBy, (option) => option.id, (option, index) => groupByMenuItem(option, index === 0 ? null : config.groupBy[index - 1])), groupByOptions.length ? _jsx("hr", { "data-ui": "menu-separator" }) : null, groupByOptions.length ? (_jsxs("select", { "data-ui": "custom-group-by", disabled: groupByFacets().length >= (config.maxGroupBy ?? Infinity), "aria-label": labels.customGroupByPlaceholder, onChange: (event) => {
+                            if (!(event.currentTarget instanceof HTMLSelectElement))
+                                return;
+                            const select = event.currentTarget;
+                            const option = groupByOptions.find((entry) => entry.id === select.value);
+                            select.value = '';
+                            if (option && !isActive('groupBy', option.id))
+                                toggleGroupBy(option);
+                        }, children: [_jsx("option", { value: "", disabled: true, selected: true, children: labels.customGroupByPlaceholder }), each(groupByOptions, (option) => option.id, (option) => (_jsx("option", { value: option.id, children: option.label })))] })) : null] })), hasFavorites() && (_jsxs("div", { "data-ui": "search-filter-column", "data-facet-type": "favorite", children: [columnTitle(labels.favorites, activeFavoriteId() ? 1 : 0), config.favoriteHref ? (_jsx("a", { "data-ui": "menu-item", href: config.favoriteHref, children: labels.saveSearch })) : manager?.saveFavoriteFunction ? (_jsx("button", { "data-ui": "favorite-save-toggle", type: "button", "aria-expanded": String(savingFavorite()), "aria-controls": `${props.id}-favorite-form`, onClick: () => {
+                            if (savingFavorite())
+                                closeFavoriteForm();
+                            else {
+                                savingFavorite.set(true);
+                                queueMicrotask(() => focusControl('[data-ui="favorite-save"] input[type="text"]'));
+                            }
+                        }, children: labels.saveSearch })) : null, manager?.saveFavoriteFunction && savingFavorite() && !config.favoriteHref ? (_jsxs("form", { id: `${props.id}-favorite-form`, "data-ui": "favorite-save", "aria-label": labels.saveSearch, onSubmit: saveFavorite, children: [_jsxs("div", { "data-ui": "favorite-save-row", children: [_jsx("input", { type: "text", autocomplete: "off", placeholder: labels.favoriteName, "aria-label": labels.favoriteName, value: saveFavoriteName(), onInput: (event) => {
+                                            if (event.currentTarget instanceof HTMLInputElement)
+                                                saveFavoriteName.set(event.currentTarget.value);
+                                        } }), _jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: saveFavoriteDefault(), onChange: (event) => {
+                                                    if (event.currentTarget instanceof HTMLInputElement)
+                                                        saveFavoriteDefault.set(event.currentTarget.checked);
+                                                } }), labels.favoriteDefault] })] }), _jsx("button", { "data-ui": "action", "data-variant": "primary", "data-size": "compact", type: "submit", disabled: !saveFavoriteName().trim(), children: labels.favoriteSaveAction }), _jsx("button", { "data-ui": "action", "data-variant": "secondary", type: "button", onClick: (event) => {
+                                    // Removing the form also detaches this target before the shared
+                                    // outside-click dismissor runs. Keep cancellation inside the panel.
+                                    event.stopPropagation();
+                                    closeFavoriteForm();
+                                }, children: labels.favoriteCancel })] })) : null, favorites().length ? (_jsx("ul", { "data-ui": "favorite-list", children: each(favorites(), (favorite) => favorite.id, favoriteRow) })) : (_jsx("p", { "data-ui": "search-filter-empty", children: labels.noFavorites }))] }))] }));
+    const notice = () => error() ? (_jsxs("aside", { "data-ui": "notice", "data-pattern": "notice", "data-tone": "danger", role: "alert", children: [_jsx("div", { "data-ui": "notice-copy", children: _jsx("p", { "data-ui": "notice-message", children: error() }) }), retryDraft() ? (_jsx("div", { "data-ui": "notice-actions", children: _jsx("button", { "data-ui": "action", "data-variant": "secondary", type: "button", onClick: retry, children: labels.retry }) })) : null] })) : null;
+    return {
+        view: () => (_jsxs("div", { "data-ui": "search-filter", id: props.id, role: "search", "aria-label": labels.searchLabel, "data-name": config.name, "data-size": config.size ?? 'default', "data-busy": pending() ? 'true' : null, onKeydown: (event) => {
+                if (event.key !== 'Escape' || sheetOpen() || !menuOpen())
+                    return;
+                if (dismissDisclosure(event))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                if (savingFavorite()) {
+                    closeFavoriteForm();
+                    return;
+                }
+                closeMenu();
+                queueMicrotask(() => menuOpener?.focus());
+            }, children: [_jsxs("div", { "data-ui": "search-filter-bar", children: [_jsxs("div", { "data-ui": "search-filter-field", children: [icon('search'), _jsx("input", { "data-ui": "search-filter-input", type: "search", value: query(), autocomplete: "off", placeholder: labels.searchPlaceholder, "aria-label": labels.searchLabel, onInput: handleSearchInput, onKeydown: handleSearchKeydown, onFocus: () => {
+                                        if (query().trim())
+                                            suggestionsOpen.set(true);
+                                    } }), suggestionsOpen() && query().trim() ? (_jsxs("div", { "data-ui": "search-filter-suggestions", role: "group", "aria-label": labels.searchGenericLabel, children: [_jsxs("button", { "data-ui": "search-filter-suggestion", type: "button", onClick: selectGenericSuggestion, children: [labels.searchGenericLabel, ": ", _jsxs("b", { children: ["\"", query().trim(), "\""] })] }), each(fieldSuggestions(query().trim()), (field) => field.value, (field) => (_jsxs("button", { "data-ui": "search-filter-suggestion", type: "button", onClick: () => selectFieldSuggestion(field), children: [labels.searchFieldPrefix, " ", _jsx("b", { children: field.label }), " ", labels.searchFieldPreposition, ":", ' ', _jsxs("b", { children: ["\"", query().trim(), "\""] })] })))] })) : null] }), _jsxs("details", { "data-ui": "menu", "data-variant": "search-filter", "data-align": "end", "data-active": countOf('filter') ? 'true' : null, open: menuOpen() === true ? true : undefined, onToggle: (event) => {
+                                if (!(event.currentTarget instanceof HTMLDetailsElement))
+                                    return;
+                                if (event.currentTarget.open)
+                                    menuOpen.set(true);
+                                else
+                                    closeMenu();
+                            }, children: [_jsxs("summary", { "data-ui": "search-filter-toggle", role: "button", "aria-expanded": String(sheetOpen() || (menuOpen() && panel() === 'filter')), "aria-label": labels.filters, title: labels.filters, onClick: togglePanel, "aria-controls": `${props.id}-panel`, children: [icon('filter'), _jsx("span", { children: labels.filters }), countOf('filter') ? (_jsx("span", { "data-ui": "menu-trigger-count", children: String(countOf('filter')) })) : null] }), _jsx("div", { id: `${props.id}-panel`, "data-ui": "menu-panel", role: "group", "aria-label": panel() === 'filter'
+                                        ? labels.filters
+                                        : panel() === 'groupBy'
+                                            ? labels.groupBy
+                                            : labels.favorites, children: !sheetOpen() ? panelContent() : null })] }), hasGrouping ? sectionTrigger('groupBy', labels.groupBy) : null, hasFavorites() ? sectionTrigger('favorite', labels.favorites) : null] }), facets().length ? (_jsxs("ul", { "data-ui": "search-filter-facets", children: [each(facets(), (facet) => facet.id, facetChip), facets().some((facet) => facet.type === 'filter' || facet.type === 'favorite') ? (_jsx("li", { children: _jsx("button", { "data-ui": "search-filter-clear", type: "button", onClick: clearFilters, children: labels.clearFilters }) })) : null] })) : null, _jsx("dialog", { "data-ui": "search-filter-sheet", "aria-label": labels.toggleLabel, onKeydown: (event) => {
+                        if (event.key === 'Escape') {
+                            if (dismissDisclosure(event))
+                                return;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            if (savingFavorite()) {
+                                closeFavoriteForm();
+                                return;
+                            }
+                            closeSheet();
+                        }
+                    }, onCancel: (event) => {
+                        event.preventDefault();
+                        closeSheet();
+                    }, onClick: (event) => {
+                        if (event.target instanceof Element &&
+                            event.target.closest('[data-ui="modal-close"], [data-ui="modal-backdrop"]'))
+                            closeSheet();
+                    }, children: sheetOpen() ? (_jsx(ModalSheet, { id: `${props.id}-sheet`, mode: "client", dialogSemantics: "parent", title: labels.toggleLabel, closeLabel: labels.close, body: _jsxs(_Fragment, { children: [notice(), panelContent()] }) })) : null }), !sheetOpen() ? notice() : null] })),
+        mount: ({ root, lifetime }) => {
+            mountedRoot = root;
+            document.addEventListener('ket:navigation-start', () => {
+                // A link or Back/Forward supersedes an RPC which has not returned yet.
+                // Our own navigation emits this event synchronously from respondWith.
+                if (startingNavigation)
+                    return;
+                applyVersion++;
+                navigationRequest?.abort();
+                facets.set(settled.facets);
+                customFilterRules.set(settled.rules);
+                pending.set(false);
+            }, { signal: lifetime });
+            // Autocomplete is an island-owned popup rather than a native <details>
+            // disclosure, so the shared details-menu dismissor cannot see it. Keep
+            // the boundary local to the component: an outside click abandons the
+            // suggestions without changing the query the reader has entered.
+            document.addEventListener('click', (event) => {
+                if (!suggestionsOpen() && !menuOpen())
+                    return;
+                const target = event.target;
+                if (target instanceof Node && root.contains(target))
+                    return;
+                suggestionsOpen.set(false);
+                closeMenu();
+            }, { signal: lifetime });
+        },
+        dispose: () => {
+            applyVersion++;
+            pending.set(false);
+            dialogElement()?.close();
+            mountedRoot = null;
+        },
+    };
+}
+export const searchFilter = (props) => createSearchFilterView(props);
+//# sourceMappingURL=index.js.map