4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T4362,"use client"; import { useDataTable } from "@/components/data-table/data-table-provider"; import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator, } from "@/components/ui/command"; import { Kbd } from "@/components/ui/kbd"; import { Separator } from "@/components/ui/separator"; import { useHotKey } from "@/hooks/use-hot-key"; import { useLocalStorage } from "@/hooks/use-local-storage"; import { getCommandHistoryKey } from "@/lib/constants/local-storage"; import { formatCompactNumber } from "@/lib/format"; import type { SchemaDefinition } from "@/lib/store/schema/types"; import { cn } from "@/lib/utils"; import { Command as CommandPrimitive } from "cmdk"; import { formatDistanceToNow } from "date-fns"; import { LoaderCircle, Search, X } from "lucide-react"; import React, { useEffect, useMemo, useRef, useState } from "react"; import type { DataTableFilterField } from "../types"; import { columnFiltersParserFromSchema, getFieldOptions, getFilterValue, getWordByCaretPosition, replaceInputByFieldType, } from "./utils"; interface DataTableFilterCommandProps { // Schema definition for parsing/serializing filter values (BYOS) schema: SchemaDefinition; // Unique ID for this table (used to namespace localStorage) tableId?: string; } export function DataTableFilterCommand({ schema, tableId = "default", }: DataTableFilterCommandProps) { const { table, isLoading, filterFields: _filterFields, getFacetedUniqueValues, } = useDataTable(); const columnFilters = table.state.columnFilters; const inputRef = useRef(null); const [open, setOpen] = useState(false); const [currentWord, setCurrentWord] = useState(""); // Guard to prevent effect cycle when serializing const isSerializingRef = useRef(false); const filterFields = useMemo( () => _filterFields?.filter((i) => !i.commandDisabled), [_filterFields], ); const columnParser = useMemo( () => columnFiltersParserFromSchema({ schema, filterFields }), [schema, filterFields], ); const [inputValue, setInputValue] = useState( columnParser.serialize(columnFilters), ); const [lastSearches, setLastSearches] = useLocalStorage< { search: string; timestamp: number; }[] >(getCommandHistoryKey(tableId), []); useEffect(() => { // Skip if this update came from serialization (prevents infinite loop) if (isSerializingRef.current) { isSerializingRef.current = false; return; } // TODO: we could check for ARRAY_DELIMITER or SLIDER_DELIMITER to auto-set filter when typing if (currentWord !== "" && open) return; // reset if (currentWord !== "" && !open) setCurrentWord(""); // avoid recursion if (inputValue.trim() === "" && !open) return; const searchParams = columnParser.parse(inputValue); const currentFilters = table.state.columnFilters; const currentEnabledFilters = currentFilters.filter((filter) => { const field = _filterFields?.find((field) => field.value === filter.id); return !field?.commandDisabled; }); const currentDisabledFilters = currentFilters.filter((filter) => { const field = _filterFields?.find((field) => field.value === filter.id); return field?.commandDisabled; }); const commandDisabledFilterKeys = currentDisabledFilters.reduce( (prev, curr) => { prev[curr.id] = curr.value; return prev; }, {} as Record, ); for (const key of Object.keys(searchParams)) { const value = searchParams[key as keyof typeof searchParams]; table.getColumn(key)?.setFilterValue(value); } const currentFiltersToReset = currentEnabledFilters.filter((filter) => { return !(filter.id in searchParams); }); for (const filter of currentFiltersToReset) { table.getColumn(filter.id)?.setFilterValue(undefined); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [inputValue, open, currentWord]); useEffect(() => { // REMINDER: only update the input value if the command is closed (avoids jumps while open) if (!open) { // Set flag to prevent the parse effect from running after serialization isSerializingRef.current = true; setInputValue(columnParser.serialize(columnFilters)); } }, [columnFilters, filterFields, open]); useHotKey(() => setOpen((open) => !open), "k"); useEffect(() => { if (open) { inputRef?.current?.focus(); } }, [open]); return (

div]:border-none", open ? "visible" : "hidden", )} filter={(value, search, keywords) => getFilterValue({ value, search, keywords, currentWord }) } // loop >

) => { if (e.key === "Escape") inputRef?.current?.blur(); }} onBlur={() => { setOpen(false); // FIXME: doesnt reflect the jumps // FIXME: will save non-existing searches // TODO: extract into function const search = inputValue.trim(); if (!search) return; const timestamp = Date.now(); const searchIndex = lastSearches.findIndex( (item) => item.search === search, ); if (searchIndex !== -1) { lastSearches[searchIndex].timestamp = timestamp; setLastSearches(lastSearches); return; } setLastSearches([...lastSearches, { search, timestamp }]); return; }} onInput={(e: React.FormEvent) => { const caretPosition = e.currentTarget?.selectionStart || -1; const value = e.currentTarget?.value || ""; const word = getWordByCaretPosition({ value, caretPosition }); setCurrentWord(word); }} placeholder="Search data table..." className="text-foreground placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50" />

{/* default height is 300px but in case of more, we'd like to tease the user */} {filterFields.map((field) => { if (typeof field.value !== "string") return null; if (inputValue.includes(`${field.value}:`)) return null; // TBD: should we handle this in the component? return ( { e.preventDefault(); e.stopPropagation(); }} onSelect={(value) => { setInputValue((prev) => { if (currentWord.trim() === "") { const input = `${prev}${value}`; return `${input}:`; } // lots of cheat const isStarting = currentWord === prev; const prefix = isStarting ? "" : " "; const input = prev.replace( `${prefix}${currentWord}`, `${prefix}${value}`, ); return `${input}:`; }); setCurrentWord(`${value}:`); }} className="group" > {field.value} ); })} {filterFields?.map((field) => { if (typeof field.value !== "string") return null; if (!currentWord.includes(`${field.value}:`)) return null; const column = table.getColumn(field.value); const facetedValue = getFacetedUniqueValues?.(table, field.value) || column?.getFacetedUniqueValues(); const options = getFieldOptions({ field, facetedValue }); return options.map((optionValue) => { return ( { e.preventDefault(); e.stopPropagation(); }} onSelect={(value) => { setInputValue((prev) => replaceInputByFieldType({ prev, currentWord, optionValue, value, field, }), ); setCurrentWord(""); }} > {`${optionValue}`} {facetedValue?.has(optionValue) ? ( {formatCompactNumber( facetedValue.get(optionValue) || 0, )} ) : null} ); }); })} {lastSearches ?.sort((a, b) => b.timestamp - a.timestamp) .slice(0, 5) .map((item) => { return ( { e.preventDefault(); e.stopPropagation(); }} onSelect={(value) => { const search = value.replace("suggestion:", ""); setInputValue(`${search} `); setCurrentWord(""); }} className="group" > {item.search} {formatDistanceToNow(item.timestamp, { addSuffix: true, })} ); })} No results found.

Use ↑ ↓ to navigate Enter to query Esc to close Union: regions:a,b Range: p95:59-340 Spaces: name:"a b"

{lastSearches.length ? ( ) : null}

); } // function CommandItemType function CommandItemSuggestions({ field, }: { field: DataTableFilterField; }) { const { table, getFacetedMinMaxValues, getFacetedUniqueValues } = useDataTable(); const value = field.value as string; switch (field.type) { case "checkbox": { return ( {getFacetedUniqueValues ? Array.from(getFacetedUniqueValues(table, value)?.keys() || []) .map((value) => `[${value}]`) .join(" ") : field.options?.map(({ value }) => `[${value}]`).join(" ")} ); } case "slider": { const [min, max] = getFacetedMinMaxValues?.(table, value) || [ field.min, field.max, ]; return ( [{min} - {max}] ); } case "input": { return ( [{`${String(field.value)}`} input] ); } default: { return null; } } } 50:T292c,import { ARRAY_DELIMITER, RANGE_DELIMITER, SLIDER_DELIMITER, } from "@/lib/delimiters"; import { isArrayOfDates } from "@/lib/is-array"; import type { FieldBuilder, SchemaDefinition, } from "@/lib/store/schema/types"; import type { ColumnFiltersState } from "@tanstack/react-table"; import type { DataTableFilterField } from "../types"; /** * Extracts the word from the given string at the specified caret position. */ export function getWordByCaretPosition({ value, caretPosition, }: { value: string; caretPosition: number; }) { let start = caretPosition; let end = caretPosition; while (start > 0 && value[start - 1] !== " ") start--; while (end < value.length && value[end] !== " ") end++; const word = value.substring(start, end); return word; } /** * Quote a value if it contains spaces */ function quoteIfNeeded(val: string | number | boolean | undefined): string { const str = `${val}`; if (str.includes(" ")) { return `"${str}"`; } return str; } export function replaceInputByFieldType({ prev, currentWord, optionValue, value, field, }: { prev: string; currentWord: string; optionValue?: string | number | boolean | undefined; // FIXME: use DataTableFilterField["options"][number]; value: string; field: DataTableFilterField; }) { switch (field.type) { case "checkbox": { if (currentWord.includes(ARRAY_DELIMITER)) { const words = currentWord.split(ARRAY_DELIMITER); words[words.length - 1] = quoteIfNeeded(optionValue); const input = prev.replace(currentWord, words.join(ARRAY_DELIMITER)); return `${input.trim()} `; } break; } case "slider": { if (currentWord.includes(SLIDER_DELIMITER)) { const words = currentWord.split(SLIDER_DELIMITER); words[words.length - 1] = `${optionValue}`; const input = prev.replace(currentWord, words.join(SLIDER_DELIMITER)); return `${input.trim()} `; } break; } case "timerange": { if (currentWord.includes(RANGE_DELIMITER)) { const words = currentWord.split(RANGE_DELIMITER); words[words.length - 1] = `${optionValue}`; const input = prev.replace(currentWord, words.join(RANGE_DELIMITER)); return `${input.trim()} `; } break; } } // Default: set a fresh filter value, quoting if it contains spaces const quotedValue = quoteIfNeeded(optionValue) || value; const input = prev.replace( currentWord, `${String(field.value)}:${quotedValue}`, ); return `${input.trim()} `; } export function getFieldOptions({ field, facetedValue, }: { field: DataTableFilterField; facetedValue?: Map; }) { switch (field.type) { case "slider": { if (field.options?.length) { return field.options .map(({ value }) => value) .sort((a, b) => Number(a) - Number(b)) .filter(notEmpty); } // Use only the values that actually exist in the data to avoid // generating thousands of intermediate integers (e.g. salary 58k-155k). if (facetedValue?.size) { return Array.from(facetedValue.keys()) .map(Number) .filter((n) => !isNaN(n)) .sort((a, b) => a - b); } return []; } default: { return field.options?.map(({ value }) => value).filter(notEmpty) || []; } } } export function getFilterValue({ value, search, currentWord, }: { value: string; search: string; keywords?: string[] | undefined; currentWord: string; }): number { /** * @example value "suggestion:public:true regions,ams,gru,fra" */ if (value.startsWith("suggestion:")) { const rawValue = value.toLowerCase().replace("suggestion:", ""); if (rawValue.includes(search)) return 1; return 0; } /** */ if (value.toLowerCase().includes(currentWord.toLowerCase())) return 1; /** * @example checkbox [filter, query] = ["regions", "ams,gru,fra"] * @example slider [filter, query] = ["p95", "0-3000"] * @example input [filter, query] = ["name", "api"] */ // Split on the FIRST colon only — values legitimately contain colons (urls, // timestamps), and `split(":")` would truncate the query at the second one. const lowerCurrentWord = currentWord.toLowerCase(); const separatorIndex = lowerCurrentWord.indexOf(":"); const filter = separatorIndex === -1 ? lowerCurrentWord : lowerCurrentWord.slice(0, separatorIndex); const query = separatorIndex === -1 ? undefined : lowerCurrentWord.slice(separatorIndex + 1); if (query && value.startsWith(`${filter}:`)) { if (query.includes(ARRAY_DELIMITER)) { /** * array of n elements * @example queries = ["ams", "gru", "fra"] */ const queries = query.split(ARRAY_DELIMITER); const rawValue = value.toLowerCase().replace(`${filter}:`, ""); if ( queries.some((item, i) => item === rawValue && i !== queries.length - 1) ) return 0; if (queries.some((item) => rawValue.includes(item))) return 1; } if (query.includes(SLIDER_DELIMITER)) { /** * range between 2 elements * @example queries = ["0", "3000"] */ const queries = query.split(SLIDER_DELIMITER); const rawValue = value.toLowerCase().replace(`${filter}:`, ""); const rawValueAsNumber = Number.parseInt(rawValue); const queryAsNumber = Number.parseInt(queries[0]); if (queryAsNumber < rawValueAsNumber) { if (rawValue.includes(queries[1])) return 1; return 0; } return 0; } const rawValue = value.toLowerCase().replace(`${filter}:`, ""); if (rawValue.includes(query)) return 1; } return 0; } export function getFieldValueByType({ field, value, }: { field?: DataTableFilterField; value: unknown; }) { if (!field) return null; switch (field.type) { case "slider": { if (Array.isArray(value)) { return value.join(SLIDER_DELIMITER); } return value; } case "checkbox": { if (Array.isArray(value)) { return value.join(ARRAY_DELIMITER); } // REMINER: inversed logic if (typeof value === "string") { return value.split(ARRAY_DELIMITER); } return value; } case "timerange": { if (Array.isArray(value)) { if (isArrayOfDates(value)) { return value.map((date) => date.getTime()).join(RANGE_DELIMITER); } return value.join(RANGE_DELIMITER); } if (value instanceof Date) { return value.getTime(); } return value; } default: { return value; } } } export function notEmpty( value: TValue | null | undefined, ): value is TValue { return value !== null && value !== undefined; } /** * Tokenize input string, respecting quoted values * * Examples: * - `name:john regions:ams` → [["name", "john"], ["regions", "ams"]] * - `name:"john doe" regions:ams` → [["name", "john doe"], ["regions", "ams"]] * - `url:"https://example.com/path with spaces"` → [["url", "https://example.com/path with spaces"]] */ export function tokenizeFilterInput(input: string): Array<[string, string]> { const results: Array<[string, string]> = []; const trimmed = input.trim(); // Regex to match: key:"quoted value" or key:unquoted_value // This handles: // - key:"value with spaces" // - key:'value with spaces' (single quotes) // - key:valueWithoutSpaces const regex = /(\w+):(?:"([^"]*)"|'([^']*)'|(\S+))/g; let match; while ((match = regex.exec(trimmed)) !== null) { const key = match[1]; // Value is in group 2 (double quotes), group 3 (single quotes), or group 4 (unquoted) const value = match[2] ?? match[3] ?? match[4]; if (key && value !== undefined) { results.push([key, value]); } } return results; } /** * Serialize a value, adding quotes if it contains spaces */ export function serializeFilterValue(value: string): string { if (value.includes(" ")) { return `"${value}"`; } return value; } /** * Schema-based column filters parser for BYOS * * This parser works with the new schema system instead of nuqs ParserBuilder. */ export function columnFiltersParserFromSchema({ schema, filterFields, }: { schema: SchemaDefinition; filterFields: DataTableFilterField[]; }) { return { parse: (inputValue: string) => { // Use tokenizer that respects quoted values const tokens = tokenizeFilterInput(inputValue); const values = tokens.reduce( (prev, [name, value]) => { prev[name] = value; return prev; }, {} as Record, ); const searchParams = Object.entries(values).reduce( (prev, [key, value]) => { const fieldBuilder = schema[key] as FieldBuilder | undefined; if (!fieldBuilder) return prev; let parsed = fieldBuilder._config.parse(value); if (parsed !== null) { // Slider fields expect [min, max] for inNumberRange — if a single // value is provided (e.g. "amount:1800"), duplicate it so the range // becomes [1800, 1800] (exact match). const field = filterFields?.find((f) => f.value === key); if ( field?.type === "slider" && Array.isArray(parsed) && parsed.length === 1 ) { parsed = [parsed[0], parsed[0]]; } prev[key] = parsed; } return prev; }, {} as Record, ); return searchParams; }, serialize: (columnFilters: ColumnFiltersState) => { const values = columnFilters.reduce((prev, curr) => { const { commandDisabled } = filterFields?.find( (field) => curr.id === field.value, ) || { commandDisabled: true }; const fieldBuilder = schema[curr.id] as | FieldBuilder | undefined; if (commandDisabled || !fieldBuilder) return prev; const serialized = fieldBuilder._config.serialize(curr.value); if (!serialized) return prev; // Wrap in quotes if value contains spaces const quotedValue = serializeFilterValue(serialized); return `${prev}${curr.id}:${quotedValue} `; }, ""); return values; }, }; } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","date-fns@^4.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns@^4.1.0"}]]}]}],["$","li","lucide-react@^0.469.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^0.469.0"}]]}]}]]}],["$","$L4d",null,{"namespace":"@data-table-filters","registryDependencies":["https://data-table.openstatus.dev/r/data-table.json","command","kbd","separator"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"src/components/data-table/data-table-filter-command/index.tsx","content":"$4f","type":"registry:component"},{"path":"src/components/data-table/data-table-filter-command/utils.ts","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]