@mastra/playground-ui 36.1.0-alpha.2 → 37.0.0-alpha.4

package/dist/property-filter-creator-CnX6dWzN.js

@@ -1,669 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { XIcon, EllipsisVerticalIcon, SaveIcon, Trash2Icon, LockIcon, ListFilterPlusIcon, ArrowLeftIcon, FilterIcon, PlusIcon, ChevronRightIcon } from 'lucide-react';
-import { B as Button } from './Button-CIPDOgxX.js';
-import { D as DropdownMenu } from './dropdown-menu-Zy39I8E6.js';
-import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
-import { B as ButtonsGroup, b as ButtonsGroupText } from './buttons-group-BAU7uXE9.js';
-import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger, a as TooltipContent } from './tooltip-wX2UZKox.js';
-import { I as Input } from './input-DsX-P_dO.js';
-import { P as Popover, b as PopoverTrigger, a as PopoverContent } from './popover-Udpn9Z2N.js';
-import { C as Checkbox } from './checkbox-DmKlRClz.js';
-import { R as RadioGroup, a as RadioGroupItem } from './radio-group-DIbajvIk.js';
-import { S as Spinner } from './spinner-DuizqJj9.js';
-import { C as Combobox } from './combobox-MFS1zEfJ.js';
-import { c as cn } from './utils-CzYGxqbG.js';
-
-function PropertyFilterActions({
-  disabled,
-  onClear,
-  onRemoveAll,
-  onSave,
-  onRemoveSaved
-}) {
-  const hasMenuItems = !!(onRemoveAll || onSave || onRemoveSaved);
-  const showClear = !!onClear;
-  if (!showClear && !hasMenuItems) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    showClear && /* @__PURE__ */ jsxs(Button, { disabled, size: "md", onClick: () => onClear(), children: [
-      /* @__PURE__ */ jsx(XIcon, {}),
-      "Clear"
-    ] }),
-    hasMenuItems && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { disabled, size: "md", "aria-label": "More filter actions", children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, {}) }) }),
-      /* @__PURE__ */ jsxs(DropdownMenu.Content, { align: "end", children: [
-        onRemoveAll && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => onRemoveAll(), children: [
-          /* @__PURE__ */ jsx(XIcon, {}),
-          "Remove all filters"
-        ] }),
-        onRemoveAll && (onSave || onRemoveSaved) && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-        onSave && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => onSave(), children: [
-          /* @__PURE__ */ jsx(SaveIcon, {}),
-          "Save filters for next time"
-        ] }),
-        onRemoveSaved && /* @__PURE__ */ jsxs(DropdownMenu.Item, { onSelect: () => onRemoveSaved(), children: [
-          /* @__PURE__ */ jsx(Trash2Icon, {}),
-          "Remove saved filters"
-        ] })
-      ] })
-    ] })
-  ] });
-}
-
-function PickMultiPanel({ field, tokens, onChange }) {
-  const [query, setQuery] = useState("");
-  const filteredOptions = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return field.options;
-    return field.options.filter((o) => o.label.toLowerCase().includes(q));
-  }, [field.options, query]);
-  const token = useMemo(() => tokens.find((t) => t.fieldId === field.id), [tokens, field.id]);
-  const selectedValue = typeof token?.value === "string" ? token.value : !field.multi ? field.defaultValue : void 0;
-  const selectedValues = useMemo(() => {
-    if (Array.isArray(token?.value)) return token.value;
-    if (typeof token?.value === "string") return [token.value];
-    return [];
-  }, [token]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    field.searchable !== false && /* @__PURE__ */ jsx(
-      Input,
-      {
-        size: "sm",
-        value: query,
-        onChange: (e) => setQuery(e.target.value),
-        placeholder: `Search ${field.label.toLowerCase()}...`,
-        className: "mb-2",
-        onKeyDown: (e) => {
-          if (e.key !== "ArrowDown") return;
-          const panel = e.currentTarget.closest("[data-pick-multi-panel]");
-          const first = panel?.querySelector("[data-pick-multi-item]:not([disabled])");
-          if (!first) return;
-          e.preventDefault();
-          e.stopPropagation();
-          first.focus();
-        }
-      }
-    ),
-    field.isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5 text-ui-sm text-neutral3", children: [
-      /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "size-3 text-neutral3" }),
-      "Loading options…"
-    ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-ui-sm text-neutral3", children: field.emptyText ?? "No option found." }) : field.multi ? /* @__PURE__ */ jsx("div", { className: "max-h-[80dvh] overflow-auto", children: filteredOptions.map((option) => {
-      const checked = selectedValues.includes(option.value);
-      return /* @__PURE__ */ jsxs(
-        "label",
-        {
-          title: option.label,
-          className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 cursor-pointer focus-within:bg-surface4 focus-within:text-neutral6 min-w-0",
-          children: [
-            /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                "data-pick-multi-item": "",
-                checked,
-                onCheckedChange: (next) => {
-                  const isChecked = next === true;
-                  const nextValues = isChecked ? selectedValues.includes(option.value) ? selectedValues : [...selectedValues, option.value] : selectedValues.filter((v) => v !== option.value);
-                  onChange(field.id, nextValues);
-                },
-                className: "shrink-0"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "truncate min-w-0 flex-1", children: option.label })
-          ]
-        },
-        option.value
-      );
-    }) }) : /* @__PURE__ */ jsxs(
-      RadioGroup,
-      {
-        value: selectedValue ?? "",
-        onValueChange: (value) => onChange(field.id, value),
-        className: "max-h-[80dvh] gap-0 overflow-auto",
-        children: [
-          filteredOptions.map((option) => /* @__PURE__ */ jsxs(
-            "label",
-            {
-              title: option.label,
-              className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 cursor-pointer focus-within:bg-surface4 focus-within:text-neutral6 min-w-0",
-              children: [
-                /* @__PURE__ */ jsx(RadioGroupItem, { "data-pick-multi-item": "", value: option.value, className: "shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate min-w-0 flex-1", children: option.label })
-              ]
-            },
-            option.value
-          )),
-          !field.omitAnyOption && /* @__PURE__ */ jsxs(
-            "label",
-            {
-              title: "Any",
-              className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 cursor-pointer focus-within:bg-surface4 focus-within:text-neutral6 min-w-0",
-              children: [
-                /* @__PURE__ */ jsx(RadioGroupItem, { "data-pick-multi-item": "", value: "Any", className: "shrink-0" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate min-w-0 flex-1", children: "Any" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-function stringifyTokenValue(value) {
-  if (Array.isArray(value)) return value.length === 0 ? "Any" : value.join(", ");
-  return value;
-}
-const DEFAULT_LOCKED_TOOLTIP = "This filter is set by the current context and cannot be removed here.";
-function lookupOptionLabel(field, value) {
-  if (field.kind === "pick-multi" && field.options) {
-    if (Array.isArray(value)) {
-      if (value.length === 0) return "Any";
-      return value.map((v) => field.options.find((o) => o.value === v)?.label ?? v).join(", ");
-    }
-    return field.options.find((o) => o.value === value)?.label ?? value;
-  }
-  return stringifyTokenValue(value);
-}
-function LockedTokenPill({ field, value, tooltipContent }) {
-  const display = lookupOptionLabel(field, value);
-  const lockA11yLabel = `${field.label} filter is locked by context`;
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      ButtonsGroup,
-      {
-        spacing: "close",
-        "data-locked-field-id": field.id,
-        "data-property-filter-pill": "locked",
-        tabIndex: 0,
-        "aria-label": lockA11yLabel,
-        children: [
-          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
-          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
-          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: display }),
-          /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: /* @__PURE__ */ jsx(LockIcon, {}) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: tooltipContent })
-  ] }) });
-}
-function TextTokenPill({ field, value, onChange, onRemove, disabled, autoFocus }) {
-  const [draft, setDraft] = useState(value);
-  const inputRef = useRef(null);
-  useEffect(() => {
-    if (draft.trim() !== value) setDraft(value);
-  }, [value]);
-  useEffect(() => {
-    if (autoFocus) inputRef.current?.focus();
-  }, [autoFocus]);
-  return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
-    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
-    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref: inputRef,
-        size: "md",
-        disabled,
-        value: draft,
-        placeholder: field.placeholder ?? `Enter ${field.label}`,
-        onChange: (e) => {
-          const next = e.target.value;
-          setDraft(next);
-          if (next.trim() !== value) onChange(next);
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            const trimmed = draft.trim();
-            if (trimmed !== value) onChange(trimmed);
-          } else if (e.key === "Escape") {
-            e.preventDefault();
-            setDraft(value);
-            e.target.blur();
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        disabled,
-        "aria-label": `Remove ${field.label} filter`,
-        size: "md",
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: onRemove,
-        children: /* @__PURE__ */ jsx(XIcon, {})
-      }
-    )
-  ] });
-}
-function PickMultiTokenPill({ field, token, tokens, onChange, onRemove, disabled }) {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
-    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
-    /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
-    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", disabled, size: "md", children: stringifyTokenValue(token.value) }) }),
-      /* @__PURE__ */ jsx(PopoverContent, { align: "start", sideOffset: 8, className: "w-64 p-2", "data-pick-multi-panel": true, children: /* @__PURE__ */ jsx(PickMultiPanel, { field, tokens, onChange }) })
-    ] }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        disabled,
-        "aria-label": `Remove ${field.label} filter`,
-        size: "md",
-        onClick: onRemove,
-        children: /* @__PURE__ */ jsx(XIcon, {})
-      }
-    )
-  ] });
-}
-function PropertyFilterApplied({
-  fields,
-  tokens,
-  onTokensChange,
-  disabled,
-  autoFocusFieldId,
-  lockedFieldIds,
-  lockedTooltipContent = DEFAULT_LOCKED_TOOLTIP
-}) {
-  if (tokens.length === 0) return null;
-  const lockedSet = new Set(lockedFieldIds ?? []);
-  const replaceTokenAt = (index, next) => {
-    const copy = [...tokens];
-    copy[index] = next;
-    onTokensChange(copy);
-  };
-  const removeTokenAt = (index) => {
-    onTokensChange(tokens.filter((_, i) => i !== index));
-  };
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: tokens.map((token, index) => {
-    const field = fields.find((f) => f.id === token.fieldId);
-    if (!field) return null;
-    if (lockedSet.has(token.fieldId)) {
-      return /* @__PURE__ */ jsx(
-        LockedTokenPill,
-        {
-          field,
-          value: token.value,
-          tooltipContent: lockedTooltipContent
-        },
-        `${token.fieldId}-${index}`
-      );
-    }
-    if (field.kind === "text" && typeof token.value === "string") {
-      return /* @__PURE__ */ jsx(
-        TextTokenPill,
-        {
-          field,
-          value: token.value,
-          disabled,
-          autoFocus: autoFocusFieldId === token.fieldId,
-          onChange: (nextValue) => replaceTokenAt(index, { fieldId: token.fieldId, value: nextValue }),
-          onRemove: () => removeTokenAt(index)
-        },
-        `${token.fieldId}-${index}`
-      );
-    }
-    if (field.kind === "pick-multi") {
-      return /* @__PURE__ */ jsx(
-        PickMultiTokenPill,
-        {
-          field,
-          token,
-          tokens,
-          disabled,
-          onChange: (fieldId, value) => {
-            if (value === void 0) {
-              removeTokenAt(index);
-              return;
-            }
-            replaceTokenAt(index, { fieldId, value });
-          },
-          onRemove: () => removeTokenAt(index)
-        },
-        `${token.fieldId}-${index}`
-      );
-    }
-    return /* @__PURE__ */ jsxs(ButtonsGroup, { spacing: "close", children: [
-      /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: field.label }),
-      /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: "is" }),
-      /* @__PURE__ */ jsx(ButtonsGroupText, { size: "md", children: stringifyTokenValue(token.value) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          disabled,
-          size: "md",
-          "aria-label": `Remove ${field.label} filter`,
-          onClick: () => removeTokenAt(index),
-          children: /* @__PURE__ */ jsx(XIcon, {})
-        }
-      )
-    ] }, `${token.fieldId}-${index}`);
-  }) });
-}
-
-function PropertyFilterCreator({
-  fields,
-  tokens,
-  onTokensChange,
-  label = "Add Filter",
-  disabled,
-  size,
-  onStartTextFilter,
-  hiddenFieldIds
-}) {
-  const visibleFields = useMemo(() => {
-    if (!hiddenFieldIds || hiddenFieldIds.length === 0) return fields;
-    const hidden = new Set(hiddenFieldIds);
-    return fields.filter((f) => !hidden.has(f.id));
-  }, [fields, hiddenFieldIds]);
-  const [open, setOpen] = useState(false);
-  const [fieldId, setFieldId] = useState();
-  const [textValue, setTextValue] = useState("");
-  const [multiValue, setMultiValue] = useState([]);
-  const [error, setError] = useState();
-  const [openPickMultiFieldId, setOpenPickMultiFieldId] = useState();
-  const textInputRef = useRef(null);
-  const skipCloseFocusRef = useRef(false);
-  const togglePickMulti = useCallback((id) => {
-    setOpenPickMultiFieldId((current) => current === id ? void 0 : id);
-  }, []);
-  const closePickMulti = useCallback(() => setOpenPickMultiFieldId(void 0), []);
-  useEffect(() => {
-    if (!open) setOpenPickMultiFieldId(void 0);
-  }, [open]);
-  const selectedField = useMemo(() => visibleFields.find((f) => f.id === fieldId), [visibleFields, fieldId]);
-  const singleUseFieldIds = useMemo(() => {
-    const ids = /* @__PURE__ */ new Set();
-    for (const token of tokens) {
-      const field = fields.find((f) => f.id === token.fieldId);
-      if (field && field.kind !== "pick-multi") ids.add(token.fieldId);
-    }
-    return ids;
-  }, [tokens, fields]);
-  const reset = useCallback(() => {
-    setFieldId(void 0);
-    setTextValue("");
-    setMultiValue([]);
-    setError(void 0);
-  }, []);
-  useEffect(() => {
-    if (!open) reset();
-  }, [open, reset]);
-  useEffect(() => {
-    if (!open) return;
-    if (selectedField?.kind === "text") textInputRef.current?.focus();
-  }, [open, selectedField]);
-  const replacePickMultiToken = useCallback(
-    (fieldId2, value) => {
-      const existingIndex = tokens.findIndex((t) => t.fieldId === fieldId2);
-      const shouldRemove = value === void 0 || Array.isArray(value) && value.length === 0;
-      if (shouldRemove) {
-        if (existingIndex === -1) return;
-        onTokensChange(tokens.filter((_, i) => i !== existingIndex));
-        return;
-      }
-      if (existingIndex === -1) {
-        onTokensChange([...tokens, { fieldId: fieldId2, value }]);
-        return;
-      }
-      const nextTokens = [...tokens];
-      nextTokens[existingIndex] = { fieldId: fieldId2, value };
-      onTokensChange(nextTokens);
-    },
-    [onTokensChange, tokens]
-  );
-  const commit = useCallback(() => {
-    if (!selectedField) {
-      setError("Choose a property first.");
-      return;
-    }
-    if (singleUseFieldIds.has(selectedField.id)) {
-      setError(`Remove the existing ${selectedField.label} filter before adding another.`);
-      return;
-    }
-    if (selectedField.kind === "text" && !textValue.trim()) {
-      setError(`Enter a value for ${selectedField.label}.`);
-      return;
-    }
-    if (selectedField.kind === "multi-select" && multiValue.length === 0) {
-      setError(`Choose at least one ${selectedField.label.toLowerCase()} value.`);
-      return;
-    }
-    const token = selectedField.kind === "multi-select" ? { fieldId: selectedField.id, value: multiValue } : { fieldId: selectedField.id, value: textValue.trim() };
-    onTokensChange([...tokens, token]);
-    setOpen(false);
-  }, [multiValue, onTokensChange, selectedField, singleUseFieldIds, textValue, tokens]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size, disabled, children: [
-      /* @__PURE__ */ jsx(ListFilterPlusIcon, {}),
-      label
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        align: "end",
-        className: "p-3 w-64",
-        initialFocus: false,
-        finalFocus: () => {
-          if (skipCloseFocusRef.current) {
-            skipCloseFocusRef.current = false;
-            return false;
-          }
-          return true;
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-          selectedField && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-label": "Back to properties",
-                className: "text-neutral3 hover:text-neutral6 transition-colors",
-                onClick: () => {
-                  setFieldId(void 0);
-                  setTextValue("");
-                  setMultiValue([]);
-                  setError(void 0);
-                },
-                children: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(FilterIcon, { className: "h-4 w-4 shrink-0 text-neutral3" }),
-            /* @__PURE__ */ jsx("span", { className: "text-ui-sm text-neutral3", children: `${selectedField.label} · is` })
-          ] }),
-          !selectedField && /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "menu",
-              className: "max-h-[80dvh] overflow-auto",
-              onKeyDown: (e) => {
-                if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
-                const buttons = Array.from(
-                  e.currentTarget.querySelectorAll("[data-filter-item]:not([disabled])")
-                );
-                if (buttons.length === 0) return;
-                e.preventDefault();
-                const active = document.activeElement;
-                const current = buttons.findIndex((b) => b === active);
-                let next;
-                if (e.key === "Home") next = 0;
-                else if (e.key === "End") next = buttons.length - 1;
-                else if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % buttons.length;
-                else next = current <= 0 ? buttons.length - 1 : current - 1;
-                buttons[next]?.focus();
-              },
-              children: visibleFields.length > 0 ? visibleFields.map((f) => {
-                const used = singleUseFieldIds.has(f.id);
-                if (f.kind === "pick-multi") {
-                  return /* @__PURE__ */ jsx(
-                    PickMultiMenuItem,
-                    {
-                      field: f,
-                      tokens,
-                      onChange: replacePickMultiToken,
-                      open: openPickMultiFieldId === f.id,
-                      onToggle: togglePickMulti,
-                      onClose: closePickMulti
-                    },
-                    f.id
-                  );
-                }
-                return /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    role: "menuitem",
-                    "data-filter-item": "",
-                    className: cn(
-                      "group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-ui-md transition-colors",
-                      "focus:bg-surface4 focus:text-neutral6 focus:outline-none",
-                      used ? "cursor-not-allowed text-neutral2 opacity-70" : "text-neutral4 hover:bg-surface4 hover:text-neutral6"
-                    ),
-                    disabled: used,
-                    onClick: () => {
-                      setError(void 0);
-                      if (f.kind === "text") {
-                        onTokensChange([...tokens, { fieldId: f.id, value: "" }]);
-                        onStartTextFilter?.(f.id);
-                        skipCloseFocusRef.current = true;
-                        setOpen(false);
-                        return;
-                      }
-                      setFieldId(f.id);
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: f.label }),
-                      used ? /* @__PURE__ */ jsx("span", { className: "ml-auto text-neutral3", children: "In use" }) : /* @__PURE__ */ jsx(PlusIcon, { className: "ml-auto h-4 w-4 text-neutral3 opacity-0 transition-opacity group-hover:opacity-100 group-focus:opacity-100" })
-                    ]
-                  },
-                  f.id
-                );
-              }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-ui-sm text-neutral3", children: "No matching property." })
-            }
-          ),
-          selectedField && selectedField.kind === "text" && /* @__PURE__ */ jsx(
-            Input,
-            {
-              ref: textInputRef,
-              size: "md",
-              value: textValue,
-              onChange: (e) => {
-                setTextValue(e.target.value);
-                setError(void 0);
-              },
-              placeholder: selectedField.placeholder ?? `Enter ${selectedField.label}`,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault();
-                  commit();
-                }
-              }
-            }
-          ),
-          selectedField && selectedField.kind === "multi-select" && /* @__PURE__ */ jsx(
-            Combobox,
-            {
-              multiple: true,
-              options: selectedField.options ?? [],
-              value: multiValue,
-              onValueChange: (v) => {
-                setMultiValue(v);
-                setError(void 0);
-              },
-              placeholder: selectedField.placeholder ?? `Choose ${selectedField.label}`,
-              searchPlaceholder: `Search ${selectedField.label.toLowerCase()}...`,
-              emptyText: selectedField.emptyText ?? "No option found.",
-              size: "md"
-            }
-          ),
-          error && /* @__PURE__ */ jsx("div", { className: "text-ui-sm text-red-500", children: error }),
-          selectedField && selectedField.kind !== "pick-multi" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", onClick: () => setOpen(false), children: "Cancel" }),
-            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "md", onClick: commit, children: "Add filter" })
-          ] })
-        ] })
-      }
-    )
-  ] });
-}
-function PickMultiMenuItem({ field, tokens, onChange, open, onToggle, onClose }) {
-  const contentRef = useRef(null);
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      open,
-      onOpenChange: (next) => {
-        if (next) onToggle(field.id);
-        else onClose();
-      },
-      children: [
-        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            role: "menuitem",
-            "data-filter-item": "",
-            className: cn(
-              "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-ui-md text-neutral4 hover:bg-surface4 hover:text-neutral6 transition-colors",
-              "focus:bg-surface4 focus:text-neutral6 focus:outline-none"
-            ),
-            onKeyDown: (e) => {
-              if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
-              if (!open) onToggle(field.id);
-              e.preventDefault();
-              requestAnimationFrame(() => {
-                const first = contentRef.current?.querySelector(
-                  'input, button, [tabindex]:not([tabindex="-1"])'
-                );
-                first?.focus();
-              });
-            },
-            children: [
-              open && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-neutral3 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: field.label }),
-              !open && /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 ml-auto text-neutral3 shrink-0" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          PopoverContent,
-          {
-            ref: contentRef,
-            side: "right",
-            align: "start",
-            sideOffset: 8,
-            className: "w-64 p-2",
-            initialFocus: false,
-            onKeyDown: (e) => {
-              if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
-              const items = Array.from(
-                e.currentTarget.querySelectorAll("[data-pick-multi-item]:not([disabled])")
-              );
-              if (items.length === 0) return;
-              e.preventDefault();
-              e.stopPropagation();
-              const active = document.activeElement;
-              const current = items.findIndex((el) => el === active);
-              let next;
-              if (e.key === "Home") next = 0;
-              else if (e.key === "End") next = items.length - 1;
-              else if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % items.length;
-              else next = current <= 0 ? items.length - 1 : current - 1;
-              items[next]?.focus();
-            },
-            "data-pick-multi-panel": true,
-            children: /* @__PURE__ */ jsx(PickMultiPanel, { field, tokens, onChange })
-          }
-        )
-      ]
-    }
-  );
-}
-
-export { PickMultiPanel as P, PropertyFilterActions as a, PropertyFilterApplied as b, PropertyFilterCreator as c };
-//# sourceMappingURL=property-filter-creator-CnX6dWzN.js.map