@trail-ui/react/dist/chunk-AYRTRP4R.mjs

import {
  TanstackTableToolBar
} from "./chunk-BRZ3Y2DE.mjs";
import {
  _TextField
} from "./chunk-3K4WSJOZ.mjs";
import {
  _Input
} from "./chunk-2ARW3G6Z.mjs";
import {
  _Button
} from "./chunk-VGPOEUEE.mjs";

// src/tanstackTable/table-header.tsx
import { EditIcon, FilterIcon, PlusIcon, SearchIcon, TrashIcon } from "@trail-ui/icons";
import { useEffect, useState } from "react";
import { commonColors } from "@trail-ui/theme";
import { Dialog, DialogTrigger, Popover } from "react-aria-components";
import { jsx, jsxs } from "react/jsx-runtime";
var TableSubHeader = ({
  setOpenFilter,
  openFilter,
  table,
  globalFilter,
  setGlobalFilter,
  data,
  columns,
  tableName
}) => {
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const [selectedFilterValues, setSelectedFilterValues] = useState(/* @__PURE__ */ new Map());
  useEffect(() => {
    const handleClickOutside = (event) => {
      const refElement = referenceElement;
      const popper = popperElement;
      if (refElement && popper && !refElement.contains(event.target) && !popper.contains(event.target)) {
        setOpenFilter(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [referenceElement, popperElement, setOpenFilter]);
  return /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center justify-between border-b border-neutral-200  px-6 py-3", children: [
    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx("p", { className: "text-base font-semibold text-neutral-950", children: tableName }) }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-end gap-4", children: [
      /* @__PURE__ */ jsx("div", { className: "search-container w-52", children: /* @__PURE__ */ jsx(_TextField, { className: "w-full", children: /* @__PURE__ */ jsx(
        _Input,
        {
          variant: "compact",
          type: "text",
          placeholder: "Search",
          value: globalFilter,
          onChange: (e) => setGlobalFilter(e.target.value),
          startContent: /* @__PURE__ */ jsx(SearchIcon, { color: commonColors.neutral[600], width: 16, height: 16 })
        }
      ) }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
        /* @__PURE__ */ jsxs(DialogTrigger, { children: [
          /* @__PURE__ */ jsx(
            _Button,
            {
              ref: setReferenceElement,
              onPress: () => setOpenFilter(!openFilter),
              endContent: /* @__PURE__ */ jsx(FilterIcon, { color: commonColors.neutral[800], width: 16, height: 16 }),
              className: "font-normal",
              children: "Filter"
            }
          ),
          /* @__PURE__ */ jsx(
            Popover,
            {
              placement: "bottom end",
              className: "focus:!border focus:!border-purple-600 data-[focused=true]:!border-purple-600",
              children: /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsx(
                TanstackTableToolBar,
                {
                  openFilter,
                  table,
                  data,
                  columns,
                  selectedFilterValues,
                  setSelectedFilterValues
                }
              ) })
            }
          )
        ] }),
        /* @__PURE__ */ jsx(
          _Button,
          {
            endContent: /* @__PURE__ */ jsx(TrashIcon, { color: commonColors.neutral[800], width: 16, height: 16 }),
            className: "font-normal",
            children: "Delete"
          }
        ),
        /* @__PURE__ */ jsx(
          _Button,
          {
            endContent: /* @__PURE__ */ jsx(EditIcon, { color: commonColors.neutral[800], width: 16, height: 16 }),
            className: "font-normal",
            children: "Edit"
          }
        ),
        /* @__PURE__ */ jsx(
          _Button,
          {
            className: "font-normal",
            appearance: "primary",
            endContent: /* @__PURE__ */ jsx(PlusIcon, { width: 16, height: 16 }),
            children: "Create"
          }
        )
      ] })
    ] }),
    openFilter && /* @__PURE__ */ jsx(
      "div",
      {
        ref: setPopperElement,
        style: {
          // ...styles.popper,
          zIndex: 9999,
          top: "12px"
          // display: showAvatarDropdown ? 'block' : 'none',
        }
      }
    )
  ] });
};
var table_header_default = TableSubHeader;

export {
  table_header_default
};