@comitor/ui 1.10.0 → 1.11.0

package/dist/data-grid/data-grid-filter-menu.js

@@ -0,0 +1,714 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { vi } from "date-fns/locale";
+import { CalendarIcon, Check, ChevronsUpDown, GripVertical, ListFilter, Trash2 } from "lucide-react";
+import * as React from "react";
+import { badgeVariants } from "../components/ui/badge.js";
+import { Button } from "../components/ui/button.js";
+import { Calendar } from "../components/ui/calendar.js";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../components/ui/command.js";
+import { Input } from "../components/ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.js";
+import { cn } from "../lib/cn.js";
+import { getDefaultOperator, getOperatorsForVariant } from "./filters.js";
+import { msg } from "./messages.js";
+import { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay } from "./sortable.js";
+import { useDebouncedCallback } from "./use-debounced-callback.js";
+import { formatDate } from "./utils.js";
+const FILTER_SHORTCUT_KEY = "f";
+const REMOVE_FILTER_SHORTCUTS = /* @__PURE__ */ new Set(["backspace", "delete"]);
+const FILTER_DEBOUNCE_MS = 300;
+const OPERATORS_WITHOUT_VALUE = /* @__PURE__ */ new Set(["isEmpty", "isNotEmpty", "isTrue", "isFalse"]);
+function DataGridFilterMenu({ table, disabled, className, ...props }) {
+  const dir = useDirection();
+  const id = React.useId();
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const addButtonRef = React.useRef(null);
+  const columnFilters = table.getState().columnFilters;
+  const { columnLabels, columns, columnVariants } = React.useMemo(() => {
+    const labels = /* @__PURE__ */ new Map();
+    const variants = /* @__PURE__ */ new Map();
+    const filteringIds = new Set(columnFilters.map((f) => f.id));
+    const availableColumns = [];
+    for (const column of table.getAllColumns()) {
+      if (!column.getCanFilter()) continue;
+      const label = column.columnDef.meta?.label ?? column.id;
+      const variant = column.columnDef.meta?.cell?.variant ?? "short-text";
+      labels.set(column.id, label);
+      variants.set(column.id, variant);
+      if (!filteringIds.has(column.id)) {
+        availableColumns.push({ id: column.id, label });
+      }
+    }
+    return {
+      columnLabels: labels,
+      columns: availableColumns,
+      columnVariants: variants
+    };
+  }, [columnFilters, table]);
+  const onFilterAdd = React.useCallback(() => {
+    const firstColumn = columns[0];
+    if (!firstColumn) return;
+    const variant = columnVariants.get(firstColumn.id) ?? "short-text";
+    const defaultOperator = getDefaultOperator(variant);
+    table.setColumnFilters((prevFilters) => [
+      ...prevFilters,
+      {
+        id: firstColumn.id,
+        value: {
+          operator: defaultOperator,
+          value: ""
+        }
+      }
+    ]);
+  }, [columns, columnVariants, table]);
+  const onFilterUpdate = React.useCallback(
+    (filterId, updates) => {
+      table.setColumnFilters((prevFilters) => {
+        if (!prevFilters) return prevFilters;
+        return prevFilters.map((filter) => filter.id === filterId ? { ...filter, ...updates } : filter);
+      });
+    },
+    [table]
+  );
+  const onFilterRemove = React.useCallback(
+    (filterId) => {
+      table.setColumnFilters((prevFilters) => prevFilters.filter((item) => item.id !== filterId));
+    },
+    [table]
+  );
+  const onFiltersReset = React.useCallback(() => {
+    table.setColumnFilters(table.initialState.columnFilters ?? []);
+  }, [table]);
+  React.useEffect(() => {
+    function onKeyDown(event) {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLElement && event.target.contentEditable === "true") {
+        return;
+      }
+      if (event.key.toLowerCase() === FILTER_SHORTCUT_KEY && (event.ctrlKey || event.metaKey) && event.shiftKey) {
+        event.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const onTriggerKeyDown = React.useCallback(
+    (event) => {
+      if (REMOVE_FILTER_SHORTCUTS.has(event.key.toLowerCase()) && columnFilters.length > 0) {
+        event.preventDefault();
+        onFiltersReset();
+      }
+    },
+    [columnFilters.length, onFiltersReset]
+  );
+  return /* @__PURE__ */ jsxs(Sortable, { value: columnFilters, onValueChange: table.setColumnFilters, getItemValue: (item) => item.id, children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          dir,
+          variant: "outline",
+          className: "h-8 gap-2 font-normal",
+          onKeyDown: onTriggerKeyDown,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(ListFilter, { "aria-hidden": "true", className: "text-muted-foreground" }),
+            msg.filter.trigger,
+            columnFilters.length > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  badgeVariants({ variant: "secondary" }),
+                  "h-5 rounded px-1.5 font-mono text-[11px] font-medium"
+                ),
+                children: columnFilters.length
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          "aria-labelledby": labelId,
+          "aria-describedby": descriptionId,
+          dir,
+          className: cn(
+            "flex w-full max-w-[--radix-popover-content-available-width] flex-col gap-3.5 p-4 sm:min-w-[480px]",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("h4", { id: labelId, className: "font-medium leading-none", children: columnFilters.length > 0 ? msg.filter.title : msg.filter.emptyTitle }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: descriptionId,
+                  className: cn("text-muted-foreground text-sm", columnFilters.length > 0 && "sr-only"),
+                  children: columnFilters.length > 0 ? msg.filter.description : msg.filter.emptyDescription
+                }
+              )
+            ] }),
+            columnFilters.length > 0 && /* @__PURE__ */ jsx(SortableContent, { asChild: true, children: /* @__PURE__ */ jsx("div", { role: "list", className: "flex max-h-[400px] flex-col gap-2 overflow-y-auto p-1", children: columnFilters.map((filter, index) => /* @__PURE__ */ jsx(
+              DataGridFilterItem,
+              {
+                filter,
+                index,
+                filterItemId: `${id}-filter-${filter.id}`,
+                dir,
+                columns,
+                columnLabels,
+                columnVariants,
+                table,
+                onFilterUpdate,
+                onFilterRemove
+              },
+              filter.id
+            )) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  className: "rounded",
+                  ref: addButtonRef,
+                  onClick: onFilterAdd,
+                  disabled: columns.length === 0,
+                  children: msg.filter.add
+                }
+              ),
+              columnFilters.length > 0 && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "rounded", onClick: onFiltersReset, children: msg.filter.reset })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(SortableOverlay, { children: /* @__PURE__ */ jsxs("div", { dir, className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 min-w-[72px] rounded-sm bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-32 rounded-sm bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-32 rounded-sm bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-36 rounded-sm bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 rounded-sm bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 rounded-sm bg-muted" })
+    ] }) })
+  ] });
+}
+function DataGridFilterItem({
+  filter,
+  index,
+  filterItemId,
+  dir,
+  columns,
+  columnLabels,
+  columnVariants,
+  table,
+  onFilterUpdate,
+  onFilterRemove
+}) {
+  const fieldListboxId = `${filterItemId}-field-listbox`;
+  const fieldTriggerId = `${filterItemId}-field-trigger`;
+  const operatorListboxId = `${filterItemId}-operator-listbox`;
+  const inputId = `${filterItemId}-input`;
+  const [showFieldSelector, setShowFieldSelector] = React.useState(false);
+  const [showOperatorSelector, setShowOperatorSelector] = React.useState(false);
+  const variant = columnVariants.get(filter.id) ?? "short-text";
+  const filterValue = filter.value;
+  const operator = filterValue?.operator ?? getDefaultOperator(variant);
+  const operators = getOperatorsForVariant(variant);
+  const needsValue = !OPERATORS_WITHOUT_VALUE.has(operator);
+  const column = table.getColumn(filter.id);
+  const onItemKeyDown = React.useCallback(
+    (event) => {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+      if (showFieldSelector || showOperatorSelector) {
+        return;
+      }
+      if (REMOVE_FILTER_SHORTCUTS.has(event.key.toLowerCase())) {
+        event.preventDefault();
+        onFilterRemove(filter.id);
+      }
+    },
+    [filter.id, showFieldSelector, showOperatorSelector, onFilterRemove]
+  );
+  const onOperatorChange = React.useCallback(
+    (newOperator) => {
+      onFilterUpdate(filter.id, {
+        value: {
+          operator: newOperator,
+          value: filterValue?.value,
+          endValue: filterValue?.endValue
+        }
+      });
+    },
+    [filter.id, filterValue?.value, filterValue?.endValue, onFilterUpdate]
+  );
+  const onValueChange = React.useCallback(
+    (newValue) => {
+      onFilterUpdate(filter.id, {
+        value: {
+          operator,
+          value: newValue,
+          endValue: filterValue?.endValue
+        }
+      });
+    },
+    [filter.id, operator, filterValue?.endValue, onFilterUpdate]
+  );
+  const onEndValueChange = React.useCallback(
+    (newValue) => {
+      onFilterUpdate(filter.id, {
+        value: {
+          operator,
+          value: filterValue?.value,
+          endValue: newValue
+        }
+      });
+    },
+    [filter.id, operator, filterValue?.value, onFilterUpdate]
+  );
+  return /* @__PURE__ */ jsx(SortableItem, { value: filter.id, asChild: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      id: filterItemId,
+      tabIndex: -1,
+      className: "flex items-center gap-2",
+      onKeyDown: onItemKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-[72px] text-center", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: index === 0 ? msg.filter.where : msg.filter.and }) }),
+        /* @__PURE__ */ jsxs(Popover, { open: showFieldSelector, onOpenChange: setShowFieldSelector, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              id: fieldTriggerId,
+              "aria-controls": fieldListboxId,
+              dir,
+              variant: "outline",
+              className: "h-8 w-32 justify-between rounded font-normal",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: columnLabels.get(filter.id) }),
+                /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "opacity-50" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(PopoverContent, { id: fieldListboxId, dir, align: "start", className: "w-40 p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: msg.filter.fieldPlaceholder, "aria-label": msg.filter.fieldPlaceholder }),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: msg.filter.fieldEmpty }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: columns.map((column2) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: column2.id,
+                  onSelect: (value) => {
+                    const newVariant = columnVariants.get(value) ?? "short-text";
+                    const newOperator = getDefaultOperator(newVariant);
+                    table.setColumnFilters(
+                      (prevFilters) => prevFilters.map(
+                        (f) => f.id === filter.id ? {
+                          id: value,
+                          value: {
+                            operator: newOperator,
+                            value: ""
+                          }
+                        } : f
+                      )
+                    );
+                    setShowFieldSelector(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: column2.label }),
+                    /* @__PURE__ */ jsx(Check, { className: cn("ms-auto", column2.id === filter.id ? "opacity-100" : "opacity-0") })
+                  ]
+                },
+                column2.id
+              )) })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            open: showOperatorSelector,
+            onOpenChange: setShowOperatorSelector,
+            value: operator,
+            onValueChange: onOperatorChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { "aria-controls": operatorListboxId, "aria-label": msg.filter.title, className: "h-8 w-36 rounded", children: /* @__PURE__ */ jsx("div", { className: "truncate", children: /* @__PURE__ */ jsx(SelectValue, {}) }) }),
+              /* @__PURE__ */ jsx(SelectContent, { id: operatorListboxId, children: /* @__PURE__ */ jsx(SelectGroup, { children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-w-36 max-w-60 flex-1", children: needsValue && column ? /* @__PURE__ */ jsx(
+          DataGridFilterInput,
+          {
+            variant,
+            operator,
+            column,
+            inputId,
+            dir,
+            value: filterValue?.value,
+            endValue: filterValue?.endValue,
+            onValueChange,
+            onEndValueChange
+          },
+          filter.id
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: inputId,
+            role: "status",
+            "aria-label": msg.filter.emptyValue(columnLabels.get(filter.id) ?? filter.id),
+            "aria-live": "polite",
+            className: "h-8 w-full rounded border bg-transparent"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-controls": filterItemId,
+            "aria-label": msg.filter.remove,
+            variant: "outline",
+            size: "icon",
+            className: "size-8 rounded",
+            onClick: () => onFilterRemove(filter.id),
+            children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(SortableItemHandle, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "aria-label": msg.filter.drag, variant: "outline", size: "icon", className: "size-8 rounded", children: /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": "true" }) }) })
+      ]
+    }
+  ) });
+}
+function DataGridFilterInput({
+  variant,
+  operator,
+  dir,
+  placeholder = msg.filter.valuePlaceholder,
+  value,
+  endValue,
+  column,
+  inputId,
+  onValueChange,
+  onEndValueChange
+}) {
+  const [showValueSelector, setShowValueSelector] = React.useState(false);
+  const [localValue, setLocalValue] = React.useState(value);
+  const [localEndValue, setLocalEndValue] = React.useState(endValue);
+  const debouncedOnChange = useDebouncedCallback((newValue) => {
+    onValueChange(newValue);
+  }, FILTER_DEBOUNCE_MS);
+  const debouncedOnEndValueChange = useDebouncedCallback((newValue) => {
+    onEndValueChange?.(newValue);
+  }, FILTER_DEBOUNCE_MS);
+  const cellVariant = column.columnDef.meta?.cell;
+  const selectOptions = React.useMemo(() => {
+    return cellVariant?.variant === "select" || cellVariant?.variant === "multi-select" ? cellVariant.options : [];
+  }, [cellVariant]);
+  const isBetween = operator === "isBetween";
+  if (variant === "number") {
+    if (isBetween) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            type: "number",
+            inputMode: "numeric",
+            placeholder: msg.filter.rangeStart,
+            "aria-label": msg.filter.rangeStart,
+            value: localValue ?? "",
+            onChange: (event) => {
+              const val = event.target.value;
+              const newValue = val === "" ? void 0 : Number(val);
+              setLocalValue(newValue);
+              debouncedOnChange(newValue);
+            },
+            className: "h-8 w-full flex-1 rounded"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${inputId}-end`,
+            type: "number",
+            inputMode: "numeric",
+            placeholder: msg.filter.rangeEnd,
+            "aria-label": msg.filter.rangeEnd,
+            value: localEndValue ?? "",
+            onChange: (event) => {
+              const val = event.target.value;
+              const newValue = val === "" ? void 0 : Number(val);
+              setLocalEndValue(newValue);
+              debouncedOnEndValueChange(newValue);
+            },
+            className: "h-8 w-full flex-1 rounded"
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: inputId,
+        type: "number",
+        inputMode: "numeric",
+        placeholder,
+        "aria-label": placeholder,
+        value: localValue ?? "",
+        onChange: (event) => {
+          const val = event.target.value;
+          const newValue = val === "" ? void 0 : Number(val);
+          setLocalValue(newValue);
+          debouncedOnChange(newValue);
+        },
+        className: "h-8 w-full rounded"
+      }
+    );
+  }
+  if (variant === "date") {
+    const inputListboxId = `${inputId}-listbox`;
+    if (isBetween) {
+      const startDate = localValue && typeof localValue === "string" ? new Date(localValue) : void 0;
+      const endDate = localEndValue && typeof localEndValue === "string" ? new Date(localEndValue) : void 0;
+      const isSameDate = startDate && endDate && startDate.toDateString() === endDate.toDateString();
+      const displayValue = startDate && endDate && !isSameDate ? `${formatDate(startDate)} - ${formatDate(endDate)}` : startDate ? formatDate(startDate) : msg.filter.pickRange;
+      return /* @__PURE__ */ jsxs(Popover, { open: showValueSelector, onOpenChange: setShowValueSelector, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            id: inputId,
+            "aria-controls": inputListboxId,
+            dir,
+            variant: "outline",
+            className: cn(
+              "h-8 w-full justify-start gap-2 rounded font-normal",
+              !startDate && "text-muted-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: displayValue })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { id: inputListboxId, dir, align: "start", className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            locale: vi,
+            autoFocus: true,
+            selected: startDate ? { from: startDate, to: endDate } : void 0,
+            onSelect: (range) => {
+              const fromValue = range?.from ? range.from.toISOString() : void 0;
+              const toValue = range?.to ? range.to.toISOString() : void 0;
+              setLocalValue(fromValue);
+              setLocalEndValue(toValue);
+              onValueChange(fromValue);
+              onEndValueChange?.(toValue);
+            }
+          }
+        ) })
+      ] });
+    }
+    const dateValue = localValue && typeof localValue === "string" ? new Date(localValue) : void 0;
+    return /* @__PURE__ */ jsxs(Popover, { open: showValueSelector, onOpenChange: setShowValueSelector, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          id: inputId,
+          "aria-controls": inputListboxId,
+          dir,
+          variant: "outline",
+          className: cn("h-8 w-full justify-start gap-2 rounded font-normal", !dateValue && "text-muted-foreground"),
+          children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: dateValue ? formatDate(dateValue) : msg.filter.pickDate })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { id: inputListboxId, dir, align: "start", className: "w-auto p-0", children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          locale: vi,
+          autoFocus: true,
+          selected: dateValue,
+          onSelect: (date) => {
+            if (!date) return;
+            const newValue = date.toISOString();
+            setLocalValue(newValue);
+            onValueChange(newValue);
+            setShowValueSelector(false);
+          }
+        }
+      ) })
+    ] });
+  }
+  const isSelectVariant = variant === "select" || variant === "multi-select";
+  const isMultiValueOperator = operator === "isAnyOf" || operator === "isNoneOf";
+  if (isSelectVariant && selectOptions.length > 0) {
+    const inputListboxId = `${inputId}-listbox`;
+    if (isMultiValueOperator) {
+      const selectedValues = Array.isArray(value) ? value : [];
+      const selectedOptions = selectOptions.filter((option) => selectedValues.includes(option.value));
+      const selectedOptionsWithIcons = selectedOptions.filter((selectedOption2) => selectedOption2.icon);
+      return /* @__PURE__ */ jsxs(Popover, { open: showValueSelector, onOpenChange: setShowValueSelector, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            id: inputId,
+            "aria-controls": inputListboxId,
+            dir,
+            variant: "outline",
+            className: "h-8 w-full justify-start rounded font-normal",
+            children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              selectedOptionsWithIcons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center -space-x-2 rtl:space-x-reverse", children: selectedOptionsWithIcons.map(
+                (selectedOption2) => selectedOption2.icon && /* @__PURE__ */ jsx("div", { className: "rounded-full border bg-background p-0.5", children: /* @__PURE__ */ jsx(selectedOption2.icon, { className: "size-3.5" }) }, selectedOption2.value)
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOptions.length > 1 ? msg.filter.selectedCount(selectedOptions.length) : selectedOptions[0]?.label })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { id: inputListboxId, dir, align: "start", className: "w-48 p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+          /* @__PURE__ */ jsx(CommandInput, { placeholder: msg.filter.optionPlaceholder, "aria-label": msg.filter.optionPlaceholder }),
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: msg.filter.optionEmpty }),
+            /* @__PURE__ */ jsx(CommandGroup, { children: selectOptions.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              return /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: option.value,
+                  onSelect: () => {
+                    const newValues = isSelected ? selectedValues.filter((v) => v !== option.value) : [...selectedValues, option.value];
+                    onValueChange(newValues.length > 0 ? newValues : void 0);
+                  },
+                  children: [
+                    option.icon && /* @__PURE__ */ jsx(option.icon, {}),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                    option.count && /* @__PURE__ */ jsx("span", { className: "ms-auto font-mono text-xs", children: option.count }),
+                    /* @__PURE__ */ jsx(Check, { className: cn("ms-auto", isSelected ? "opacity-100" : "opacity-0") })
+                  ]
+                },
+                option.value
+              );
+            }) })
+          ] })
+        ] }) })
+      ] });
+    }
+    const selectedOption = selectOptions.find((opt) => opt.value === value);
+    return /* @__PURE__ */ jsxs(Popover, { open: showValueSelector, onOpenChange: setShowValueSelector, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: inputId,
+          "aria-controls": inputListboxId,
+          dir,
+          variant: "outline",
+          className: "h-8 w-full justify-start rounded font-normal",
+          children: selectedOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            selectedOption.icon && /* @__PURE__ */ jsx(selectedOption.icon, {}),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption.label })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { id: inputListboxId, dir, align: "start", className: "w-[200px] p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+        /* @__PURE__ */ jsx(CommandInput, { placeholder: msg.filter.optionPlaceholder, "aria-label": msg.filter.optionPlaceholder }),
+        /* @__PURE__ */ jsxs(CommandList, { children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: msg.filter.optionEmpty }),
+          /* @__PURE__ */ jsx(CommandGroup, { children: selectOptions.map((option) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: option.value,
+              onSelect: () => {
+                onValueChange(option.value);
+                setShowValueSelector(false);
+              },
+              children: [
+                option.icon && /* @__PURE__ */ jsx(option.icon, {}),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                option.count && /* @__PURE__ */ jsx("span", { className: "ms-auto font-mono text-xs", children: option.count }),
+                /* @__PURE__ */ jsx(Check, { className: cn("ms-auto", value === option.value ? "opacity-100" : "opacity-0") })
+              ]
+            },
+            option.value
+          )) })
+        ] })
+      ] }) })
+    ] });
+  }
+  if (isBetween) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: inputId,
+          type: "text",
+          placeholder: msg.filter.rangeStart,
+          "aria-label": msg.filter.rangeStart,
+          className: "h-8 w-full flex-1 rounded",
+          value: localValue ?? "",
+          onChange: (event) => {
+            const val = event.target.value;
+            const newValue = val === "" ? void 0 : val;
+            setLocalValue(newValue);
+            debouncedOnChange(newValue);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${inputId}-end`,
+          type: "text",
+          placeholder: msg.filter.rangeEnd,
+          "aria-label": msg.filter.rangeEnd,
+          className: "h-8 w-full flex-1 rounded",
+          value: localEndValue ?? "",
+          onChange: (event) => {
+            const val = event.target.value;
+            const newValue = val === "" ? void 0 : val;
+            setLocalEndValue(newValue);
+            debouncedOnEndValueChange(newValue);
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: inputId,
+      type: "text",
+      placeholder,
+      "aria-label": placeholder,
+      className: "h-8 w-full rounded",
+      value: localValue ?? "",
+      onChange: (event) => {
+        const val = event.target.value;
+        const newValue = val === "" ? void 0 : val;
+        setLocalValue(newValue);
+        debouncedOnChange(newValue);
+      }
+    }
+  );
+}
+export {
+  DataGridFilterMenu
+};
+//# sourceMappingURL=data-grid-filter-menu.js.map