@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/filter-bar/parts.d.ts

@@ -0,0 +1,19 @@
+import { ButtonProps } from "../ui/button.js";
+import { FilterBarKnobStyle } from "../knob-contracts/filter-bar-knobs.js";
+import { FilterBarInlineInput } from "./editor.js";
+import { FilterBarItem } from "./types.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/filter-bar/parts.d.ts
+export type FilterBarChipProps = ComponentProps<"div"> & {
+  item: FilterBarItem;
+  readOnly?: boolean;
+  style?: CSSProperties & FilterBarKnobStyle;
+};
+export declare function FilterBarChip(props: FilterBarChipProps): import("react").JSX.Element;
+export declare function FilterBarChips({ renderChip }: {
+  renderChip?: (item: FilterBarItem) => ReactNode;
+}): import("react").JSX.Element;
+export declare function FilterBarAddButton({ className, children, onClick, onKeyDown, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function FilterBarInput({ className, ...props }: Omit<Parameters<typeof FilterBarInlineInput>[0], "owner" | "inputRef">): import("react").JSX.Element;
+export declare function FilterBarClear({ children, onClick, ...props }: ButtonProps): import("react").JSX.Element | null;
+//#endregion

package/dist/filter-bar/parts.js

@@ -0,0 +1,244 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { useFilterBarContext } from "./context.js";
+import { describeFilter, formatFilterValue } from "./model.js";
+import { FilterBarEditor, FilterBarInlineInput } from "./editor.js";
+import { useEffect, useId, useRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon, XIcon } from "lucide-react";
+//#region src/filter-bar/parts.tsx
+function chipSegments(item, field, operator, draft) {
+	const segments = [{
+		stage: "field",
+		label: field?.label ?? item.fieldId,
+		icon: field?.icon
+	}];
+	if (operator || draft) segments.push({
+		stage: "operator",
+		label: operator?.label ?? "Operator…",
+		spokenLabel: operator?.ariaLabel
+	});
+	if (item.value !== null || draft && operator) segments.push({
+		stage: "value",
+		label: item.value === null ? "Value…" : formatFilterValue(item, field)
+	});
+	return segments;
+}
+function FilterBarChipContent({ item, readOnly = false, className, ref, ...props }) {
+	const context = useFilterBarContext();
+	const field = context.fields.find((candidate) => candidate.id === item.fieldId);
+	const operator = context.operators.find((candidate) => candidate.id === item.operatorId);
+	const draft = Boolean(context.draft?.id === item.id && !context.draft.editing);
+	const locked = readOnly || context.readOnly;
+	const segments = chipSegments(item, field, operator, draft);
+	return useRender({
+		ref: [ref ?? null, locked ? null : (element) => context.register(`chip:${item.id}`, element)],
+		render: /* @__PURE__ */ jsxs("div", {
+			"data-control-ui": "filter-bar",
+			"data-control-family": "filter-bar",
+			"data-slot": "chip",
+			"data-draft": draft || void 0,
+			className: cn("inline-flex max-w-full min-w-0 items-stretch overflow-hidden", className),
+			...props,
+			children: [segments.map((segment) => /* @__PURE__ */ jsx(FilterBarSegment, {
+				item,
+				segment,
+				locked,
+				draft
+			}, segment.stage)), !locked && !draft && /* @__PURE__ */ jsx(Button, {
+				ref: (element) => context.register(`${item.id}:remove`, element),
+				variant: "ghost",
+				size: "sm",
+				iconOnly: true,
+				"data-control-ui": "filter-bar",
+				"data-control-family": "filter-bar",
+				"data-slot": "remove",
+				"aria-label": `Remove filter: ${describeFilter(item, context.fields, context.operators)}`,
+				disabled: context.disabled,
+				onClick: () => context.remove(item),
+				onKeyDown: (event) => context.navigate(event, item.id, "remove"),
+				children: /* @__PURE__ */ jsx(XIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})]
+		})
+	});
+}
+function FilterBarSegment({ item, segment, locked, draft }) {
+	const context = useFilterBarContext();
+	if (locked) return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "filter-bar",
+		"data-control-family": "filter-bar",
+		"data-slot": "segment",
+		className: "inline-flex min-w-0 items-center",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 items-center gap-1.5",
+			children: [
+				segment.icon,
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					title: segment.label,
+					"aria-hidden": segment.spokenLabel ? true : void 0,
+					children: segment.label
+				}),
+				segment.spokenLabel ? /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: segment.spokenLabel
+				}) : null
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		ref: (element) => context.register(`${item.id}:${segment.stage}`, element),
+		variant: "ghost",
+		size: "sm",
+		"data-control-ui": "filter-bar",
+		"data-control-family": "filter-bar",
+		"data-slot": "segment",
+		className: "shrink",
+		"aria-label": `Edit ${segment.stage}: ${segment.spokenLabel ?? segment.label}`,
+		"aria-haspopup": "listbox",
+		"aria-expanded": context.draft?.owner === item.id && context.draft.stage === segment.stage,
+		disabled: context.disabled || draft,
+		onClick: (event) => context.start(item.id, event.currentTarget, segment.stage, item),
+		onKeyDown: (event) => context.navigate(event, item.id, segment.stage),
+		children: [segment.icon, /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			title: segment.label,
+			children: segment.label
+		})]
+	});
+}
+function FilterBarChip(props) {
+	return /* @__PURE__ */ jsx(FilterBarEditor, {
+		owner: props.item.id,
+		mode: "button",
+		children: /* @__PURE__ */ jsx(FilterBarChipContent, { ...props })
+	});
+}
+function ExitingChip({ item, style }) {
+	const context = useFilterBarContext();
+	const ref = useRef(null);
+	const releaseExit = context.releaseExit;
+	useEffect(() => {
+		const animations = ref.current?.getAnimations({ subtree: true }) ?? [];
+		let mounted = true;
+		const release = () => {
+			if (mounted) releaseExit(item.id);
+		};
+		if (animations.length === 0) release();
+		else Promise.all(animations.map((animation) => animation.finished)).then(release, release);
+		return () => {
+			mounted = false;
+		};
+	}, [item.id, releaseExit]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		"data-control-ui": "filter-bar",
+		"data-control-family": "filter-bar",
+		"data-slot": "exit",
+		"aria-hidden": "true",
+		inert: true,
+		children: /* @__PURE__ */ jsx(FilterBarChipContent, {
+			item,
+			readOnly: true
+		})
+	});
+}
+function FilterBarChips({ renderChip }) {
+	const context = useFilterBarContext();
+	const items = [...context.items];
+	const draft = context.draft;
+	if (draft?.fieldId && !draft.editing) items.push({
+		id: draft.id,
+		fieldId: draft.fieldId,
+		operatorId: draft.operatorId ?? "",
+		value: draft.values.length > 0 ? draft.values : null
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [items.map((item) => /* @__PURE__ */ jsx(FilterBarChipContentWithEditor, {
+		item,
+		renderChip
+	}, item.id)), context.exits.map((exit) => /* @__PURE__ */ jsx(ExitingChip, { ...exit }, exit.item.id))] });
+}
+function FilterBarChipContentWithEditor({ item, renderChip }) {
+	const context = useFilterBarContext();
+	return renderChip && item.id !== context.draft?.id ? renderChip(item) : /* @__PURE__ */ jsx(FilterBarChip, { item });
+}
+function FilterBarAddButton({ className, children = "Add filter", onClick, onKeyDown, ref, ...props }) {
+	const context = useFilterBarContext();
+	const owner = useId();
+	const button = useRender({
+		ref: [ref ?? null, (element) => context.register(`entry:${owner}`, element)],
+		render: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			className,
+			"aria-haspopup": "listbox",
+			"aria-expanded": context.draft?.owner === owner,
+			disabled: context.disabled || context.readOnly,
+			...props,
+			onClick: (event) => {
+				onClick?.(event);
+				if (!event.defaultPrevented) context.start(owner, event.currentTarget);
+			},
+			onKeyDown: (event) => {
+				onKeyDown?.(event);
+				context.navigate(event);
+			},
+			children: [/* @__PURE__ */ jsx(PlusIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5"
+			}), children]
+		})
+	});
+	return /* @__PURE__ */ jsx(FilterBarEditor, {
+		owner,
+		mode: "button",
+		children: button
+	});
+}
+function FilterBarInput({ className, ...props }) {
+	const context = useFilterBarContext();
+	const owner = useId();
+	const inputRef = useRef(null);
+	return /* @__PURE__ */ jsx(FilterBarEditor, {
+		owner,
+		mode: "input",
+		anchorRef: inputRef,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: (element) => context.register(`entry:${owner}`, element ? inputRef.current : null),
+			className: cn("min-w-0 max-w-full flex-[1_1_10rem]", className),
+			children: /* @__PURE__ */ jsx(FilterBarInlineInput, {
+				owner,
+				inputRef,
+				"aria-label": "Add filter",
+				placeholder: "Filter…",
+				disabled: context.disabled,
+				readOnly: context.readOnly,
+				...props
+			})
+		})
+	});
+}
+function FilterBarClear({ children = "Clear", onClick, ...props }) {
+	const context = useFilterBarContext();
+	if (context.items.length === 0 && !context.draft) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		"aria-label": "Clear filters",
+		disabled: context.disabled || context.readOnly,
+		...props,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.clear();
+		},
+		children
+	});
+}
+//#endregion
+export { FilterBarAddButton, FilterBarChip, FilterBarChips, FilterBarClear, FilterBarInput };

package/dist/filter-bar/types.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+//#region src/filter-bar/types.d.ts
+export type FilterBarScalar = string | number | boolean;
+export type FilterBarValue = FilterBarScalar | FilterBarScalar[] | null;
+export type FilterBarOperator = {
+  id: string;
+  label: string;
+  ariaLabel?: string;
+  arity?: "none" | "one" | "many";
+};
+export type FilterBarOption = {
+  value: FilterBarScalar;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+};
+export type FilterBarQuery = {
+  fieldId: string;
+  operatorId: string;
+  query: string;
+};
+export type FilterBarField = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  type?: "text" | "number" | "boolean";
+  operators?: readonly string[];
+  options?: readonly FilterBarOption[];
+  allowCustomValue?: boolean;
+  optionsMode?: "local" | "remote";
+  loading?: boolean;
+  error?: ReactNode;
+  onQueryChange?: (query: FilterBarQuery) => void;
+  formatValue?: (value: FilterBarScalar) => string;
+};
+export type FilterBarItem = {
+  id: string;
+  fieldId: string;
+  operatorId: string;
+  value: FilterBarValue;
+};
+export type FilterBarStage = "field" | "operator" | "value";
+export type FilterBarDraft = {
+  id: string;
+  owner: string;
+  anchor: HTMLElement;
+  stage: FilterBarStage;
+  fieldId?: string;
+  operatorId?: string;
+  values: FilterBarScalar[];
+  query: string;
+  editing: boolean;
+};
+//#endregion

package/dist/filter-bar.d.ts

@@ -0,0 +1,27 @@
+import { FilterBarKnobStyle } from "./knob-contracts/filter-bar-knobs.js";
+import { FilterBarField, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarQuery, FilterBarScalar, FilterBarValue } from "./filter-bar/types.js";
+import { FilterBarAddButton, FilterBarChip, FilterBarChipProps, FilterBarChips, FilterBarClear, FilterBarInput } from "./filter-bar/parts.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/filter-bar.d.ts
+export type FilterBarRootProps = Omit<ComponentProps<"fieldset">, "onChange" | "style"> & {
+  fields: readonly FilterBarField[];
+  operators: readonly FilterBarOperator[];
+  value: readonly FilterBarItem[];
+  onValueChange: (value: FilterBarItem[]) => void;
+  createItemId?: () => string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  style?: CSSProperties & FilterBarKnobStyle;
+};
+declare function FilterBarRoot({ fields, operators, value, onValueChange, createItemId, disabled, readOnly, className, children, ref, "aria-label": ariaLabel, ...props }: FilterBarRootProps): import("react").JSX.Element;
+export declare const FilterBar: {
+  Root: typeof FilterBarRoot;
+  Chips: typeof FilterBarChips;
+  Chip: typeof FilterBarChip;
+  AddButton: typeof FilterBarAddButton;
+  Input: typeof FilterBarInput;
+  Clear: typeof FilterBarClear;
+};
+export declare const DEFAULT_FILTER_OPERATORS: readonly FilterBarOperator[];
+//#endregion
+export type { FilterBarChipProps, FilterBarField, FilterBarItem, FilterBarOperator, FilterBarOption, FilterBarQuery, FilterBarScalar, FilterBarValue };

package/dist/filter-bar.js

@@ -0,0 +1,310 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { LiveStatus } from "./ui/live-status.js";
+import { FilterBarContext } from "./filter-bar/context.js";
+import { describeFilter, fieldOperators, filterNavigationKeys } from "./filter-bar/model.js";
+import { filterMotionEnabled, useFilterBarMotion } from "./filter-bar/motion.js";
+import { FilterBarAddButton, FilterBarChip, FilterBarChips, FilterBarClear, FilterBarInput } from "./filter-bar/parts.js";
+import { useState } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-bar.tsx
+function valueStatusMessage(field) {
+	if (field?.error) return typeof field.error === "string" ? field.error : "Couldn’t load values.";
+	if (field?.loading) return "Loading values…";
+}
+function FilterBarRoot({ fields, operators, value, onValueChange, createItemId = () => crypto.randomUUID(), disabled = false, readOnly = false, className, children, ref, "aria-label": ariaLabel = "Filters", ...props }) {
+	const [draft, setDraft] = useState(null);
+	const [exits, setExits] = useState([]);
+	const [announcement, setAnnouncement] = useState("");
+	const [focusNodes] = useState(() => /* @__PURE__ */ new Map());
+	const { rootRef, ...motion } = useFilterBarMotion();
+	function register(key, element) {
+		if (key.startsWith("chip:") || key.startsWith("entry:")) motion.register(key, element);
+		if (element) focusNodes.set(key, element);
+		else focusNodes.delete(key);
+	}
+	function transition(next) {
+		motion.capture();
+		setDraft(next);
+		if (next.stage === "value" && next.fieldId && next.operatorId) fields.find((field) => field.id === next.fieldId)?.onQueryChange?.({
+			fieldId: next.fieldId,
+			operatorId: next.operatorId,
+			query: next.query
+		});
+	}
+	function start(owner, anchor, stage = "field", item, initialQuery) {
+		if (disabled || readOnly) return;
+		if (draft?.owner === owner && draft.stage === stage) return;
+		const values = item?.value === null || item?.value === void 0 ? [] : [item.value].flat();
+		const query = initialQuery ?? "";
+		transition({
+			id: item?.id ?? createItemId(),
+			owner,
+			anchor,
+			stage,
+			fieldId: item?.fieldId,
+			operatorId: item?.operatorId,
+			values,
+			query,
+			editing: Boolean(item)
+		});
+	}
+	function close(restoreFocus = true) {
+		motion.capture();
+		if (restoreFocus && draft?.anchor.isConnected) draft.anchor.focus();
+		setDraft(null);
+	}
+	function back() {
+		if (!draft) return;
+		if (draft.stage === "field") return close();
+		if (draft.stage === "operator") return transition({
+			...draft,
+			stage: "field",
+			operatorId: void 0,
+			values: [],
+			query: ""
+		});
+		const field = fields.find((candidate) => candidate.id === draft.fieldId);
+		const stage = field && fieldOperators(field, operators).length === 1 ? "field" : "operator";
+		transition({
+			...draft,
+			stage,
+			values: [],
+			query: ""
+		});
+	}
+	function setQuery(query) {
+		if (!draft) return;
+		setDraft({
+			...draft,
+			query
+		});
+		if (draft.stage === "value" && draft.fieldId && draft.operatorId) fields.find((field) => field.id === draft.fieldId)?.onQueryChange?.({
+			fieldId: draft.fieldId,
+			operatorId: draft.operatorId,
+			query
+		});
+	}
+	function commitDraft(next, nextValue) {
+		if (disabled || readOnly) return;
+		if (!next.fieldId || !next.operatorId) return;
+		const item = {
+			id: next.id,
+			fieldId: next.fieldId,
+			operatorId: next.operatorId,
+			value: nextValue
+		};
+		motion.capture();
+		onValueChange(next.editing ? value.map((current) => current.id === item.id ? item : current) : [...value, item]);
+		setAnnouncement(`${next.editing ? "Updated" : "Added"} filter: ${describeFilter(item, fields, operators)}`);
+		if (next.anchor.isConnected) next.anchor.focus();
+		setDraft(null);
+	}
+	function selectOperator(operatorId, next = draft) {
+		if (!next) return;
+		const operator = operators.find((candidate) => candidate.id === operatorId);
+		if (!operator) return;
+		const nextDraft = {
+			...next,
+			operatorId,
+			stage: "value",
+			values: [],
+			query: ""
+		};
+		if (operator.arity === "none") commitDraft(nextDraft, null);
+		else transition(nextDraft);
+	}
+	function selectField(fieldId) {
+		if (!draft) return;
+		const field = fields.find((candidate) => candidate.id === fieldId);
+		if (!field) return;
+		const available = fieldOperators(field, operators);
+		const next = {
+			...draft,
+			fieldId,
+			operatorId: void 0,
+			stage: "operator",
+			values: [],
+			query: ""
+		};
+		if (available.length === 1 && available[0]) selectOperator(available[0].id, next);
+		else transition(next);
+	}
+	function addExits(items) {
+		const root = rootRef.current;
+		if (!root || !filterMotionEnabled(root)) return;
+		const rootBounds = root.getBoundingClientRect();
+		const leaving = items.flatMap((item) => {
+			const node = focusNodes.get(`chip:${item.id}`);
+			if (!node) return [];
+			const bounds = node.getBoundingClientRect();
+			return [{
+				item,
+				style: {
+					position: "absolute",
+					left: bounds.left - rootBounds.left,
+					top: bounds.top - rootBounds.top,
+					width: bounds.width,
+					height: bounds.height
+				}
+			}];
+		});
+		setExits((current) => [...current, ...leaving]);
+	}
+	function focusEntry() {
+		[...focusNodes].find(([key]) => key.startsWith("entry:"))?.[1].focus();
+	}
+	function remove(item) {
+		if (disabled || readOnly) return;
+		motion.capture();
+		addExits([item]);
+		const index = value.findIndex((candidate) => candidate.id === item.id);
+		const neighbour = value[index + 1] ?? value[index - 1];
+		if (neighbour) focusNodes.get(`${neighbour.id}:field`)?.focus();
+		else focusEntry();
+		if (draft?.id === item.id) setDraft(null);
+		onValueChange(value.filter((candidate) => candidate.id !== item.id));
+		setAnnouncement(`Removed filter: ${describeFilter(item, fields, operators)}`);
+	}
+	function clear() {
+		if (disabled || readOnly) return;
+		motion.capture();
+		addExits(value);
+		setDraft(null);
+		onValueChange([]);
+		focusEntry();
+		setAnnouncement("Cleared all filters");
+	}
+	function deleteFocusedFilter(event, itemId) {
+		const item = value.find((candidate) => candidate.id === itemId);
+		if (!item) return;
+		event.preventDefault();
+		remove(item);
+	}
+	function focusAdjacentFilter(event, itemId, part) {
+		const keys = filterNavigationKeys(value);
+		const target = keys[(itemId ? keys.indexOf(`${itemId}:${part}`) : keys.length) + (event.key === "ArrowLeft" ? -1 : 1)];
+		event.preventDefault();
+		if (target) focusNodes.get(target)?.focus();
+		else if (itemId) focusEntry();
+	}
+	function navigate(event, itemId, part) {
+		if (event.defaultPrevented) return;
+		const removing = event.key === "Delete" || event.key === "Backspace";
+		if (itemId && removing) return deleteFocusedFilter(event, itemId);
+		if (event.key === "ArrowLeft" || event.key === "ArrowRight") focusAdjacentFilter(event, itemId, part);
+	}
+	const context = {
+		fields,
+		operators,
+		items: value,
+		draft,
+		exits,
+		disabled,
+		readOnly,
+		register,
+		start,
+		close,
+		back,
+		setQuery,
+		selectField,
+		selectOperator,
+		selectValues: (values) => {
+			if (draft) transition({
+				...draft,
+				values,
+				query: ""
+			});
+		},
+		commit: (nextValue) => {
+			if (draft) commitDraft(draft, nextValue);
+		},
+		remove,
+		clear,
+		releaseExit: (id) => setExits((current) => current.filter((exit) => exit.item.id !== id)),
+		navigate
+	};
+	const liveMessage = valueStatusMessage(draft?.stage === "value" ? fields.find((field) => field.id === draft.fieldId) : void 0) ?? announcement;
+	const rootElement = useRender({
+		ref: [rootRef, ref ?? null],
+		render: /* @__PURE__ */ jsxs("fieldset", {
+			"aria-label": ariaLabel,
+			"data-control-ui": "filter-bar",
+			"data-control-family": "filter-bar",
+			"data-slot": "root",
+			"data-disabled": disabled || void 0,
+			"data-readonly": readOnly || void 0,
+			className: cn("relative flex min-w-0 flex-wrap items-center", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: liveMessage })]
+		})
+	});
+	return /* @__PURE__ */ jsx(FilterBarContext.Provider, {
+		value: context,
+		children: rootElement
+	});
+}
+const FilterBar = {
+	Root: FilterBarRoot,
+	Chips: FilterBarChips,
+	Chip: FilterBarChip,
+	AddButton: FilterBarAddButton,
+	Input: FilterBarInput,
+	Clear: FilterBarClear
+};
+const DEFAULT_FILTER_OPERATORS = [
+	{
+		id: "is",
+		label: "is"
+	},
+	{
+		id: "is-not",
+		label: "is not"
+	},
+	{
+		id: "contains",
+		label: "contains"
+	},
+	{
+		id: "starts-with",
+		label: "starts with"
+	},
+	{
+		id: "gt",
+		label: ">",
+		ariaLabel: "greater than"
+	},
+	{
+		id: "gte",
+		label: "≥",
+		ariaLabel: "at least"
+	},
+	{
+		id: "lt",
+		label: "<",
+		ariaLabel: "less than"
+	},
+	{
+		id: "lte",
+		label: "≤",
+		ariaLabel: "at most"
+	},
+	{
+		id: "in",
+		label: "is any of",
+		arity: "many"
+	},
+	{
+		id: "is-empty",
+		label: "is empty",
+		arity: "none"
+	},
+	{
+		id: "is-not-empty",
+		label: "is not empty",
+		arity: "none"
+	}
+];
+//#endregion
+export { DEFAULT_FILTER_OPERATORS, FilterBar };