mantine-composite-filters 0.3.0 → 0.4.0

package/dist/cjs/components/CompositeFiltersInput/CompositeFiltersInput.cjs

@@ -0,0 +1,896 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@mantine/core');
+var hooks = require('@mantine/hooks');
+var iconsReact = require('@tabler/icons-react');
+var clsx = require('../../node_modules/clsx/dist/clsx.cjs');
+var CompositeFiltersInput_module = require('./CompositeFiltersInput.module.css.cjs');
+var CompositeFiltersInput_classes = require('./CompositeFiltersInput.classes.cjs');
+var useFilterHistory = require('../../hooks/useFilterHistory.cjs');
+var useFilterPresets = require('../../hooks/useFilterPresets.cjs');
+var operators = require('../../utils/operators.cjs');
+var formatters = require('../../utils/formatters.cjs');
+var CurrentFieldIndicator = require('./CurrentFieldIndicator.cjs');
+var FieldDropdown = require('./dropdowns/FieldDropdown.cjs');
+var OperatorDropdown = require('./dropdowns/OperatorDropdown.cjs');
+var ValueDropdown = require('./dropdowns/ValueDropdown.cjs');
+var FilterActionsMenu = require('./FilterActionsMenu.cjs');
+var FilterMaxReached = require('./FilterMaxReached.cjs');
+var FilterPill = require('./FilterPill.cjs');
+var DateValueInput = require('./value-inputs/DateValueInput.cjs');
+var DateRangeValueInput = require('./value-inputs/DateRangeValueInput.cjs');
+
+const CompositeFiltersInputBase = ({
+  filters,
+  value: activeFilters,
+  onChange,
+  placeholder = "Filter by...",
+  maxFilters,
+  className,
+  renderPill,
+  disablePresets = false,
+  disableHistory = false,
+  storageKeyPrefix = "filters",
+  customActions = [],
+  overflowMode = "scroll",
+  styles,
+  classNames,
+  operatorPlaceholder = "Select operator...",
+  valuePlaceholder = "Enter value...",
+  searchPlaceholder = "Search options...",
+  ...boxProps
+}) => {
+  const theme = core.useMantineTheme();
+  const resolvedStyles = React.useMemo(() => {
+    return typeof styles === "function" ? styles(theme) : styles || {};
+  }, [styles, theme]);
+  const getClassName = React.useCallback((selector) => {
+    return clsx.clsx(
+      CompositeFiltersInput_classes.staticClasses[selector],
+      CompositeFiltersInput_classes.cssModuleClasses[selector],
+      classNames?.[selector]
+    );
+  }, [classNames]);
+  const [inputStep, setInputStep] = React.useState("field");
+  const [selectedField, setSelectedField] = React.useState(null);
+  const [selectedOperator, setSelectedOperator] = React.useState(null);
+  const [inputValue, setInputValue] = React.useState("");
+  const [dateValue, setDateValue] = React.useState(null);
+  const [dateRangeValue, setDateRangeValue] = React.useState([null, null]);
+  const [multiSelectValues, setMultiSelectValues] = React.useState([]);
+  const [_isFocused, setIsFocused] = React.useState(false);
+  const [highlightedFilterId, setHighlightedFilterId] = React.useState(null);
+  const [editingFilterId, setEditingFilterId] = React.useState(null);
+  const [editingPart, setEditingPart] = React.useState(null);
+  const inputRef = React.useRef(null);
+  const pillsContainerRef = React.useRef(null);
+  const [isCompactMode, setIsCompactMode] = hooks.useLocalStorage({
+    key: `${storageKeyPrefix}-compact-mode`,
+    defaultValue: false
+  });
+  const [showFilterCount, setShowFilterCount] = hooks.useLocalStorage({
+    key: `${storageKeyPrefix}-show-count`,
+    defaultValue: true
+  });
+  const {
+    presets: savedPresets,
+    savePreset,
+    loadPreset,
+    toggleFavorite: togglePresetFavorite,
+    deletePreset
+  } = useFilterPresets.useFilterPresets({
+    storageKey: `${storageKeyPrefix}-saved-presets`,
+    onLoad: onChange
+  });
+  const { history: filterHistory } = useFilterHistory.useFilterHistory(activeFilters, {
+    storageKey: `${storageKeyPrefix}-history`,
+    enabled: !disableHistory
+  });
+  const combobox = core.useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: () => combobox.selectFirstOption()
+  });
+  const availableFilters = React.useMemo(() => {
+    const usedKeys = new Set(activeFilters.map((f) => f.key));
+    return filters.filter((f) => !usedKeys.has(f.key));
+  }, [filters, activeFilters]);
+  const filteredFields = React.useMemo(() => {
+    if (!inputValue.trim()) {
+      return availableFilters;
+    }
+    return availableFilters.filter(
+      (f) => f.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  }, [availableFilters, inputValue]);
+  const filteredOptions = React.useMemo(() => {
+    if (!selectedField?.options) {
+      return [];
+    }
+    if (!inputValue.trim()) {
+      return selectedField.options;
+    }
+    return selectedField.options.filter(
+      (opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  }, [selectedField, inputValue]);
+  const isInputDisabled = maxFilters !== void 0 && activeFilters.length >= maxFilters;
+  hooks.useHotkeys([
+    ["mod+/", () => {
+      inputRef.current?.focus();
+      combobox.openDropdown();
+      combobox.selectFirstOption();
+    }],
+    ["mod+Backspace", () => handleClearAll()]
+  ]);
+  const resetInput = React.useCallback(() => {
+    setInputStep("field");
+    setSelectedField(null);
+    setSelectedOperator(null);
+    setInputValue("");
+    setDateValue(null);
+    setDateRangeValue([null, null]);
+    setMultiSelectValues([]);
+    setEditingFilterId(null);
+    setEditingPart(null);
+  }, []);
+  const handleRemoveFilter = React.useCallback(
+    (id) => {
+      onChange(activeFilters.filter((f) => f.id !== id));
+    },
+    [activeFilters, onChange]
+  );
+  const handleClearAll = React.useCallback(() => {
+    onChange([]);
+    resetInput();
+    setEditingFilterId(null);
+    setEditingPart(null);
+  }, [onChange, resetInput]);
+  const handleFilterOperatorClick = React.useCallback((filter) => {
+    const field = filters.find((f) => f.key === filter.key);
+    if (!field) {
+      return;
+    }
+    setEditingFilterId(filter.id);
+    setEditingPart("operator");
+    setSelectedField(field);
+    setSelectedOperator(filter.operator);
+    setInputValue("");
+    setDateValue(null);
+    setDateRangeValue([null, null]);
+    setMultiSelectValues([]);
+    setInputStep("operator");
+    setTimeout(() => {
+      combobox.openDropdown();
+      combobox.selectFirstOption();
+    }, 0);
+  }, [filters, combobox]);
+  const handleFilterValueClick = React.useCallback((filter) => {
+    const field = filters.find((f) => f.key === filter.key);
+    if (!field) {
+      return;
+    }
+    setEditingFilterId(filter.id);
+    setEditingPart("value");
+    setSelectedField(field);
+    setSelectedOperator(filter.operator);
+    if (field.type === "date") {
+      const dateVal = typeof filter.value === "string" ? new Date(filter.value) : null;
+      setDateValue(dateVal);
+      setInputValue("");
+    } else if (field.type === "date_range") {
+      if (Array.isArray(filter.value) && filter.value.length === 2) {
+        const range = [
+          filter.value[0] instanceof Date ? filter.value[0] : filter.value[0] ? new Date(filter.value[0]) : null,
+          filter.value[1] instanceof Date ? filter.value[1] : filter.value[1] ? new Date(filter.value[1]) : null
+        ];
+        setDateRangeValue(range);
+      } else {
+        setDateRangeValue([null, null]);
+      }
+      setInputValue("");
+    } else if (field.type === "multi_select") {
+      const values = Array.isArray(filter.value) ? filter.value : [];
+      setMultiSelectValues(values);
+      setInputValue("");
+    } else {
+      const textValue = typeof filter.value === "string" ? filter.value : String(filter.value || "");
+      setInputValue(textValue);
+    }
+    setInputStep("value");
+    if (field.type === "select" || field.type === "multi_select") {
+      setTimeout(() => {
+        combobox.openDropdown();
+        combobox.selectFirstOption();
+      }, 0);
+    } else {
+      setTimeout(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }, 0);
+    }
+  }, [filters, combobox]);
+  const handleFieldSelect = React.useCallback(
+    (field) => {
+      setSelectedField(field);
+      setInputValue("");
+      const operators$1 = operators.getOperatorsForField(field);
+      if (editingFilterId && editingPart === "field") {
+        if (operators$1.length === 1) {
+          setSelectedOperator(operators$1[0]);
+          setDateValue(null);
+          setDateRangeValue([null, null]);
+          setMultiSelectValues([]);
+          setInputStep("value");
+          if (field.type === "select" || field.type === "multi_select") {
+            setTimeout(() => {
+              combobox.openDropdown();
+              combobox.selectFirstOption();
+            }, 0);
+          }
+        } else {
+          setDateValue(null);
+          setDateRangeValue([null, null]);
+          setMultiSelectValues([]);
+          setInputStep("operator");
+          setTimeout(() => {
+            combobox.openDropdown();
+            combobox.selectFirstOption();
+          }, 0);
+        }
+      } else if (operators$1.length === 1) {
+        setSelectedOperator(operators$1[0]);
+        setInputStep("value");
+      } else {
+        setInputStep("operator");
+      }
+    },
+    [editingFilterId, editingPart, combobox]
+  );
+  const handleOperatorSelect = React.useCallback((operator) => {
+    setSelectedOperator(operator);
+    if (editingFilterId && editingPart === "operator" && selectedField) {
+      const existingFilter = activeFilters.find((f) => f.id === editingFilterId);
+      if (existingFilter) {
+        if (selectedField.type === "date") {
+          const dateVal = typeof existingFilter.value === "string" ? new Date(existingFilter.value) : null;
+          setDateValue(dateVal);
+          if (dateVal) {
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                operator,
+                value: dateVal.toISOString(),
+                displayValue: formatters.formatDate(dateVal)
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+            return;
+          }
+        } else if (selectedField.type === "date_range") {
+          if (Array.isArray(existingFilter.value) && existingFilter.value.length === 2) {
+            const range = [
+              existingFilter.value[0] instanceof Date ? existingFilter.value[0] : existingFilter.value[0] ? new Date(existingFilter.value[0]) : null,
+              existingFilter.value[1] instanceof Date ? existingFilter.value[1] : existingFilter.value[1] ? new Date(existingFilter.value[1]) : null
+            ];
+            setDateRangeValue(range);
+            if (range[0] && range[1]) {
+              const updatedFilters = activeFilters.map(
+                (f) => f.id === editingFilterId ? {
+                  ...f,
+                  operator,
+                  value: range,
+                  displayValue: formatters.formatDateRange(range[0], range[1])
+                } : f
+              );
+              onChange(updatedFilters);
+              setEditingFilterId(null);
+              setEditingPart(null);
+              resetInput();
+              return;
+            }
+          }
+        } else if (selectedField.type === "multi_select") {
+          const values = Array.isArray(existingFilter.value) ? existingFilter.value : [];
+          setMultiSelectValues(values);
+          if (values.length > 0) {
+            const labels = values.map((v) => selectedField.options?.find((o) => o.value === v)?.label || v).join(", ");
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                operator,
+                value: values,
+                displayValue: labels
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+            return;
+          }
+        } else if (selectedField.type === "select") {
+          const textValue = typeof existingFilter.value === "string" ? existingFilter.value : String(existingFilter.value || "");
+          setInputValue(textValue);
+          if (textValue) {
+            const option = selectedField.options?.find((o) => o.value === textValue);
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                operator,
+                value: textValue,
+                displayValue: option?.label || textValue
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+            return;
+          }
+        } else {
+          const textValue = typeof existingFilter.value === "string" ? existingFilter.value : String(existingFilter.value || "");
+          if (textValue) {
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                operator
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+            return;
+          }
+        }
+      }
+    }
+    setInputValue("");
+    setInputStep("value");
+    if (selectedField && (selectedField.type === "select" || selectedField.type === "multi_select")) {
+      combobox.openDropdown();
+      combobox.selectFirstOption();
+    }
+  }, [editingFilterId, editingPart, activeFilters, selectedField, combobox, onChange, resetInput]);
+  const addFilter = React.useCallback(
+    (displayValue, rawValue) => {
+      if (!selectedField || !selectedOperator) {
+        return;
+      }
+      if (editingFilterId) {
+        const updatedFilters = activeFilters.map(
+          (f) => f.id === editingFilterId ? {
+            ...f,
+            key: selectedField.key,
+            label: selectedField.label,
+            type: selectedField.type,
+            operator: selectedOperator,
+            value: rawValue,
+            displayValue,
+            icon: selectedField.icon
+          } : f
+        );
+        onChange(updatedFilters);
+        setEditingFilterId(null);
+        setEditingPart(null);
+      } else {
+        const newFilter = {
+          id: formatters.generateId(),
+          key: selectedField.key,
+          label: selectedField.label,
+          type: selectedField.type,
+          operator: selectedOperator,
+          value: rawValue,
+          displayValue,
+          icon: selectedField.icon
+        };
+        onChange([...activeFilters, newFilter]);
+        setHighlightedFilterId(newFilter.id);
+        setTimeout(() => setHighlightedFilterId(null), 1e3);
+      }
+      resetInput();
+      if (overflowMode === "scroll" && pillsContainerRef.current) {
+        setTimeout(() => {
+          if (pillsContainerRef.current) {
+            pillsContainerRef.current.scrollLeft = pillsContainerRef.current.scrollWidth;
+          }
+        }, 50);
+      }
+    },
+    [selectedField, selectedOperator, activeFilters, onChange, resetInput, overflowMode, editingFilterId]
+  );
+  const handleValueSubmit = React.useCallback(() => {
+    if (!selectedField || !selectedOperator) {
+      return;
+    }
+    if (editingFilterId && editingPart === "value") {
+      switch (selectedField.type) {
+        case "text":
+        case "email":
+        case "number":
+          if (inputValue.trim()) {
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                value: inputValue.trim(),
+                displayValue: inputValue.trim(),
+                operator: selectedOperator
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+          }
+          return;
+        case "date":
+          if (dateValue) {
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                value: dateValue.toISOString(),
+                displayValue: formatters.formatDate(dateValue),
+                operator: selectedOperator
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+          }
+          return;
+        case "date_range":
+          if (dateRangeValue[0] && dateRangeValue[1]) {
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                value: dateRangeValue,
+                displayValue: formatters.formatDateRange(dateRangeValue[0], dateRangeValue[1]),
+                operator: selectedOperator
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+          }
+          return;
+        case "select":
+          if (inputValue) {
+            const option = selectedField.options?.find((o) => o.value === inputValue);
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                value: inputValue,
+                displayValue: option?.label || inputValue,
+                operator: selectedOperator
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+          }
+          return;
+        case "multi_select":
+          if (multiSelectValues.length > 0) {
+            const labels = multiSelectValues.map((v) => selectedField.options?.find((o) => o.value === v)?.label || v).join(", ");
+            const updatedFilters = activeFilters.map(
+              (f) => f.id === editingFilterId ? {
+                ...f,
+                value: multiSelectValues,
+                displayValue: labels,
+                operator: selectedOperator
+              } : f
+            );
+            onChange(updatedFilters);
+            setEditingFilterId(null);
+            setEditingPart(null);
+            resetInput();
+          }
+          return;
+      }
+    }
+    switch (selectedField.type) {
+      case "text":
+      case "email":
+      case "number":
+        if (inputValue.trim()) {
+          addFilter(inputValue.trim(), inputValue.trim());
+        }
+        break;
+      case "date":
+        if (dateValue) {
+          addFilter(formatters.formatDate(dateValue), dateValue.toISOString());
+        }
+        break;
+      case "date_range":
+        if (dateRangeValue[0] && dateRangeValue[1]) {
+          addFilter(formatters.formatDateRange(dateRangeValue[0], dateRangeValue[1]), dateRangeValue);
+        }
+        break;
+      case "select":
+        if (inputValue) {
+          const option = selectedField.options?.find((o) => o.value === inputValue);
+          addFilter(option?.label || inputValue, inputValue);
+        }
+        break;
+      case "multi_select":
+        if (multiSelectValues.length > 0) {
+          const labels = multiSelectValues.map((v) => selectedField.options?.find((o) => o.value === v)?.label || v).join(", ");
+          addFilter(labels, multiSelectValues);
+        }
+        break;
+    }
+  }, [selectedField, selectedOperator, inputValue, dateValue, dateRangeValue, multiSelectValues, addFilter, editingFilterId, editingPart, activeFilters, onChange, resetInput]);
+  const handleOptionSelect = React.useCallback(
+    (value) => {
+      if (!selectedField) {
+        return;
+      }
+      if (selectedField.type === "multi_select") {
+        setMultiSelectValues(
+          (prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+        );
+      } else {
+        const option = selectedField.options?.find((o) => o.value === value);
+        if (editingFilterId && editingPart === "value" && selectedOperator) {
+          const updatedFilters = activeFilters.map(
+            (f) => f.id === editingFilterId ? {
+              ...f,
+              value,
+              displayValue: option?.label || value,
+              operator: selectedOperator
+            } : f
+          );
+          onChange(updatedFilters);
+          setEditingFilterId(null);
+          setEditingPart(null);
+          resetInput();
+        } else {
+          addFilter(option?.label || value, value);
+        }
+      }
+    },
+    [selectedField, addFilter, editingFilterId, editingPart, selectedOperator, activeFilters, onChange, resetInput]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter" && inputStep === "value") {
+        e.preventDefault();
+        if (selectedField?.type === "multi_select" && multiSelectValues.length > 0) {
+          handleValueSubmit();
+        } else if (["text", "email", "number"].includes(selectedField?.type || "")) {
+          handleValueSubmit();
+        }
+      }
+      if (e.key === "Escape") {
+        resetInput();
+        combobox.closeDropdown();
+      }
+      if (e.key === "Backspace" && !inputValue) {
+        if (inputStep === "value") {
+          e.preventDefault();
+          setSelectedOperator(null);
+          setInputStep("operator");
+          setDateValue(null);
+          setDateRangeValue([null, null]);
+          setMultiSelectValues([]);
+        } else if (inputStep === "operator") {
+          e.preventDefault();
+          setSelectedField(null);
+          setInputStep("field");
+        } else if (inputStep === "field" && activeFilters.length > 0) {
+          handleRemoveFilter(activeFilters[activeFilters.length - 1].id);
+        }
+      }
+    },
+    [inputStep, selectedField, multiSelectValues, handleValueSubmit, inputValue, activeFilters, resetInput, combobox, handleRemoveFilter]
+  );
+  const handleSavePreset = React.useCallback(() => {
+    savePreset(activeFilters);
+  }, [activeFilters, savePreset]);
+  const showDropdown = inputStep === "field" || inputStep === "operator" || inputStep === "value" && (selectedField?.type === "select" || selectedField?.type === "multi_select");
+  const shouldShowDateInput = inputStep === "value" && (selectedField?.type === "date" || selectedField?.type === "date_range");
+  const getInputPlaceholder = () => {
+    if (inputStep === "field") {
+      return placeholder;
+    }
+    if (inputStep === "operator") {
+      return operatorPlaceholder;
+    }
+    if (inputStep === "value") {
+      if (selectedField?.type === "select" || selectedField?.type === "multi_select") {
+        return searchPlaceholder;
+      }
+      return selectedField?.placeholder || valuePlaceholder;
+    }
+    return placeholder;
+  };
+  const renderValueInput = () => {
+    if (!selectedField || inputStep !== "value") {
+      return null;
+    }
+    switch (selectedField.type) {
+      case "date":
+        return /* @__PURE__ */ React.createElement(
+          DateValueInput.DateValueInput,
+          {
+            value: dateValue,
+            onChange: setDateValue,
+            onComplete: addFilter,
+            onCancel: resetInput
+          }
+        );
+      case "date_range":
+        return /* @__PURE__ */ React.createElement(
+          DateRangeValueInput.DateRangeValueInput,
+          {
+            value: dateRangeValue,
+            onChange: setDateRangeValue,
+            onComplete: addFilter,
+            onCancel: resetInput
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  const renderDropdownContent = () => {
+    if (inputStep === "field") {
+      return /* @__PURE__ */ React.createElement(
+        FieldDropdown.FieldDropdown,
+        {
+          fields: filteredFields
+        }
+      );
+    }
+    if (inputStep === "operator" && selectedField) {
+      return /* @__PURE__ */ React.createElement(
+        OperatorDropdown.OperatorDropdown,
+        {
+          field: selectedField
+        }
+      );
+    }
+    if (inputStep === "value" && selectedField) {
+      return /* @__PURE__ */ React.createElement(
+        ValueDropdown.ValueDropdown,
+        {
+          field: selectedField,
+          options: filteredOptions,
+          selectedValues: multiSelectValues,
+          onSubmit: handleValueSubmit
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ React.createElement(
+    core.Box,
+    {
+      className: clsx.clsx(getClassName("root"), className),
+      style: { ...resolvedStyles.root, ...boxProps.style },
+      ...boxProps
+    },
+    /* @__PURE__ */ React.createElement(
+      core.Combobox,
+      {
+        store: combobox,
+        onOptionSubmit: (val) => {
+          if (inputStep === "field") {
+            const field = filters.find((f) => f.key === val);
+            if (field) {
+              handleFieldSelect(field);
+            }
+          } else if (inputStep === "operator") {
+            handleOperatorSelect(val);
+          } else if (inputStep === "value") {
+            handleOptionSelect(val);
+          }
+        },
+        position: "bottom-start",
+        offset: 4,
+        middlewares: { flip: true, shift: true },
+        withinPortal: true
+      },
+      /* @__PURE__ */ React.createElement(core.Combobox.DropdownTarget, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => {
+            if (!isInputDisabled) {
+              inputRef.current?.focus();
+              combobox.openDropdown();
+              combobox.selectFirstOption();
+            }
+          },
+          onFocus: (e) => {
+            if (e.target === e.currentTarget && !isInputDisabled) {
+              inputRef.current?.focus();
+              combobox.openDropdown();
+              combobox.selectFirstOption();
+            }
+          },
+          onKeyDown: (e) => {
+            const isInput = e.target.tagName === "INPUT";
+            if ((e.key === "Enter" || e.key === " ") && !isInput) {
+              e.preventDefault();
+              if (!isInputDisabled) {
+                combobox.openDropdown();
+                combobox.selectFirstOption();
+              }
+            }
+          },
+          className: getClassName("container"),
+          style: resolvedStyles.container
+        },
+        /* @__PURE__ */ React.createElement(
+          core.ActionIcon,
+          {
+            color: "gray",
+            variant: "subtle",
+            size: "md",
+            pl: "xs",
+            className: getClassName("leftIcon"),
+            style: resolvedStyles.leftIcon
+          },
+          /* @__PURE__ */ React.createElement(iconsReact.IconSearch, { size: 16 })
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            ref: pillsContainerRef,
+            className: clsx.clsx(
+              getClassName("pillsContainer"),
+              overflowMode === "scroll" ? CompositeFiltersInput_module.pillsContainerScroll : CompositeFiltersInput_module.pillsContainerWrap
+            ),
+            style: resolvedStyles.pillsContainer
+          },
+          activeFilters.map((filter) => renderPill ? renderPill(filter, () => handleRemoveFilter(filter.id)) : /* @__PURE__ */ React.createElement(
+            FilterPill.FilterPill,
+            {
+              key: filter.id,
+              filter,
+              onRemove: handleRemoveFilter,
+              onOperatorClick: handleFilterOperatorClick,
+              onValueClick: handleFilterValueClick,
+              isHighlighted: highlightedFilterId === filter.id,
+              isCompact: isCompactMode
+            }
+          )),
+          inputStep !== "field" && selectedField && /* @__PURE__ */ React.createElement(
+            CurrentFieldIndicator.CurrentFieldIndicator,
+            {
+              field: selectedField,
+              operator: selectedOperator,
+              showValueIndicator: inputStep === "value" && !shouldShowDateInput,
+              isCompact: isCompactMode
+            }
+          ),
+          shouldShowDateInput ? renderValueInput() : /* @__PURE__ */ React.createElement(core.Combobox.EventsTarget, null, /* @__PURE__ */ React.createElement(
+            "input",
+            {
+              ref: inputRef,
+              value: inputValue,
+              onChange: (e) => {
+                setInputValue(e.currentTarget.value);
+                combobox.openDropdown();
+                combobox.selectFirstOption();
+              },
+              onFocus: () => {
+                setIsFocused(true);
+                combobox.openDropdown();
+                combobox.selectFirstOption();
+                if (overflowMode === "scroll" && pillsContainerRef.current && inputRef.current) {
+                  const container = pillsContainerRef.current;
+                  const input = inputRef.current;
+                  const containerRect = container.getBoundingClientRect();
+                  const inputRect = input.getBoundingClientRect();
+                  const inputLeft = inputRect.left - containerRect.left + container.scrollLeft;
+                  const inputWidth = inputRect.width;
+                  const containerWidth = containerRect.width;
+                  const scrollPosition = inputLeft - containerWidth / 2 + inputWidth / 2;
+                  container.scrollTo({
+                    left: Math.max(0, scrollPosition),
+                    behavior: "smooth"
+                  });
+                }
+              },
+              onBlur: () => {
+                setIsFocused(false);
+                combobox.closeDropdown();
+                if (overflowMode === "scroll" && pillsContainerRef.current) {
+                  pillsContainerRef.current.scrollTo({
+                    left: 0,
+                    behavior: "smooth"
+                  });
+                }
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: getInputPlaceholder(),
+              disabled: isInputDisabled,
+              className: getClassName("input"),
+              style: resolvedStyles.input
+            }
+          ))
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: getClassName("rightSection"),
+            style: resolvedStyles.rightSection
+          },
+          activeFilters.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, showFilterCount && /* @__PURE__ */ React.createElement(
+            core.Badge,
+            {
+              variant: "filled",
+              size: "xs",
+              className: getClassName("badge"),
+              style: resolvedStyles.badge
+            },
+            activeFilters.length
+          ), /* @__PURE__ */ React.createElement(core.Tooltip, { label: "Clear all (\u2318+\u232B)", withArrow: true }, /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              color: "red",
+              variant: "light",
+              size: "sm",
+              className: getClassName("clearButton"),
+              style: resolvedStyles.clearButton,
+              onClick: (e) => {
+                e.stopPropagation();
+                handleClearAll();
+              }
+            },
+            /* @__PURE__ */ React.createElement(iconsReact.IconX, { size: 14 })
+          ))),
+          /* @__PURE__ */ React.createElement(
+            FilterActionsMenu.FilterActionsMenu,
+            {
+              activeFilters,
+              onChange,
+              isCompactMode,
+              setIsCompactMode,
+              showFilterCount,
+              setShowFilterCount,
+              savedPresets,
+              onSavePreset: handleSavePreset,
+              onLoadPreset: loadPreset,
+              onTogglePresetFavorite: togglePresetFavorite,
+              onDeletePreset: deletePreset,
+              filterHistory,
+              customActions,
+              disablePresets,
+              disableHistory
+            }
+          )
+        )
+      )),
+      showDropdown && /* @__PURE__ */ React.createElement(
+        core.Combobox.Dropdown,
+        {
+          className: getClassName("dropdown"),
+          style: resolvedStyles.dropdown
+        },
+        renderDropdownContent()
+      )
+    ),
+    maxFilters !== void 0 && activeFilters.length >= maxFilters && /* @__PURE__ */ React.createElement(FilterMaxReached.FilterMaxReached, { maxFilters })
+  );
+};
+const CompositeFiltersInput = Object.assign(CompositeFiltersInputBase, {
+  classes: CompositeFiltersInput_classes.CompositeFiltersInputClasses
+});
+
+exports.CompositeFiltersInput = CompositeFiltersInput;
+exports.default = CompositeFiltersInput;
+//# sourceMappingURL=CompositeFiltersInput.cjs.map