import { jsx } from 'react/jsx-runtime';
import { forwardRef, useRef } from 'react';
import { unEscapeStringFromRegex, escapeStringForRegex } from '@grafana/data';
import { useCombinedRefs } from '../../utils/useCombinedRefs.js';
import { Button } from '../Button/Button.js';
import '../Button/ButtonGroup.js';
import { Icon } from '../Icon/Icon.js';
import { Input } from '../Input/Input.js';

const FilterInput = forwardRef(
  ({ value, width, onChange, escapeRegex = true, ...restProps }, ref) => {
    const innerRef = useRef(null);
    const combinedRef = useCombinedRefs(ref, innerRef);
    const suffix = value !== "" ? /* @__PURE__ */ jsx(
      Button,
      {
        icon: "times",
        fill: "text",
        size: "sm",
        onClick: (e) => {
          var _a;
          (_a = innerRef.current) == null ? void 0 : _a.focus();
          onChange("");
          e.stopPropagation();
        },
        children: "Clear"
      }
    ) : null;
    return /* @__PURE__ */ jsx(
      Input,
      {
        prefix: /* @__PURE__ */ jsx(Icon, { name: "search" }),
        suffix,
        width,
        type: "text",
        value: escapeRegex ? unEscapeStringFromRegex(value != null ? value : "") : value,
        onChange: (event) => onChange(escapeRegex ? escapeStringForRegex(event.currentTarget.value) : event.currentTarget.value),
        ...restProps,
        ref: combinedRef
      }
    );
  }
);
FilterInput.displayName = "FilterInput";

export { FilterInput };
//# sourceMappingURL=FilterInput.js.map
