@airplane/views/dist/components/table/Filter.js

A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.

import { jsx } from "react/jsx-runtime";
import { createStyles } from "@mantine/core";
import { useState } from "react";
import { MagnifyingGlassIconMini } from "@airplane/views/icons/index.js";
import { TextInputComponent } from "../textinput/TextInput.js";
import { useAsyncDebounce } from "./useAsyncDebounce.js";
const useStyles = createStyles((theme) => {
  return {
    filterWrapper: {
      width: "200px",
      height: "2rem"
    }
  };
});
const Filter = ({
  initialValue,
  setValue
}) => {
  const {
    classes
  } = useStyles();
  const [filter, setFilter] = useState(initialValue);
  const onChange = useAsyncDebounce((value) => {
    setValue(value || void 0);
  }, 200);
  return /* @__PURE__ */ jsx(TextInputComponent, { value: filter || "", size: "xs", onChange: (e) => {
    setFilter(e.target.value);
    onChange(e.target.value);
  }, styles: (theme) => ({
    icon: {
      color: theme.colors.gray[6]
    },
    input: {
      color: theme.colors.gray[6],
      height: "2rem",
      minHeight: "2rem"
    }
  }), icon: /* @__PURE__ */ jsx(MagnifyingGlassIconMini, {}), className: classes.filterWrapper, "aria-label": "filter" });
};
const Filter$1 = Filter;
export {
  Filter$1 as default
};
//# sourceMappingURL=Filter.js.map