import { jsx as s, jsxs as w } from "react/jsx-runtime";
import { useState as y, useEffect as E } from "react";
import L from "../../../../utils/classNames.js";
import S from "../../../dropdown/ButtonDropdown.js";
import { TABLE_HORIZONTAL_SCROLL_EVENT as p } from "../../layout/useHorizontalSectionSync.js";
const j = (d) => {
  const {
    activeCount: a = 0,
    active: c = !1,
    children: m,
    className: f,
    dropdownClassName: u,
    id: g,
    onClose: o,
    onOpen: h,
    open: i,
    popperConfig: v,
    pullRight: C = !0,
    toggleClassName: N,
    usePortal: O = !0,
    ...b
  } = d, [x, n] = y(!1), e = i !== void 0, r = e ? i : x, l = a > 0;
  return E(() => {
    const t = () => {
      r && (e || n(!1), o?.());
    };
    return window.addEventListener(p, t), () => window.removeEventListener(p, t);
  }, [e, r, o]), /* @__PURE__ */ s(
    S,
    {
      ...b,
      id: g,
      title: /* @__PURE__ */ w("span", { className: "display-flex gap-0 align-items-center text-color-dark", children: [
        /* @__PURE__ */ s(
          "span",
          {
            className: `text-size-16 rioglyph ${c ? "rioglyph-filter-active" : "rioglyph-filter"}`,
            "aria-hidden": "true"
          }
        ),
        l && /* @__PURE__ */ s("span", { className: "text-medium", children: a })
      ] }),
      bsStyle: "default",
      variant: "outline",
      bsSize: "xs",
      noCaret: !0,
      iconOnly: !l,
      open: r,
      onOpen: (t) => {
        e || n(!0), h?.(t);
      },
      onClose: () => {
        e || n(!1), o?.();
      },
      pullRight: C,
      usePortal: O,
      className: f,
      popperConfig: v,
      toggleClassName: L(
        "table-head-filter-button no-hover-scale border-color-light bg-decent hover-bg-lighter rounded-small",
        l && "padding-left-2",
        N
      ),
      dropdownClassName: u,
      customDropdown: m
    }
  );
};
export {
  j as default
};
//# sourceMappingURL=TableColumnFilter.js.map
