import { o as R } from "./rolldown-runtime.js";
import { i as V, n as q, t as Z } from "./vendor/react.js";
import { t as $ } from "./check.js";
import { t as J } from "./chevron-down.js";
import { t as H } from "./plus.js";
import { t as d } from "./utils.js";
import { t as L } from "./Tag.js";
import { a as j, n as y, o as N, r as w, s as G } from "./command.js";
import { n as k, r as E, t as O } from "./popover2.js";
var c = /* @__PURE__ */ R(V(), 1), r = Z();
function z({ table: e, groupableColumns: o, placeholder: s = "Group by...", maxLevels: a, variant: f, size: g = "md", className: x }) {
  const [m, b] = c.useState(!1), i = e.getState().grouping, p = c.useMemo(() => e.getAllColumns().filter((t) => o ? o.includes(t.id) : t.getCanGroup()).map((t) => ({
    id: t.id,
    label: typeof t.columnDef.header == "string" ? t.columnDef.header : t.id.charAt(0).toUpperCase() + t.id.slice(1)
  })), [e, o]), _ = a !== void 0 && i.length >= a, S = c.useMemo(() => i.length === 0 ? s : i.map((t) => p.find((n) => n.id === t)?.label || t).join(", "), [
    i,
    p,
    s
  ]), P = c.useCallback((t) => {
    if (i.indexOf(t) >= 0) {
      const n = i.filter((l) => l !== t);
      e.setGrouping(n);
    } else {
      if (a !== void 0 && i.length >= a) return;
      const n = [...i, t];
      e.setGrouping(n);
    }
  }, [
    i,
    e,
    a
  ]), v = (t) => {
    const n = i.indexOf(t);
    return n >= 0 ? n + 1 : null;
  }, C = c.useMemo(() => p.filter((t) => !i.includes(t.id)), [p, i]), M = c.useCallback((t) => {
    const n = i.filter((l) => l !== t);
    e.setGrouping(n);
  }, [i, e]), D = c.useCallback((t) => {
    if (a !== void 0 && i.length >= a) return;
    const n = [...i, t];
    e.setGrouping(n), b(!1);
  }, [
    i,
    e,
    a
  ]);
  if (f === "chips") {
    const t = C.length > 0 && !_ ? /* @__PURE__ */ (0, r.jsxs)(O, {
      open: m,
      onOpenChange: b,
      children: [/* @__PURE__ */ (0, r.jsx)(E, {
        className: d("inline-flex items-center justify-center rounded-md", "border border-dashed border-input bg-background", "hover:bg-accent hover:border-solid", "transition-[background-color,border-color] duration-150 ease-out motion-reduce:transition-none", g === "sm" ? "h-6 px-2 text-xs" : "h-7 px-2 text-sm"),
        "aria-label": "Add grouping",
        children: /* @__PURE__ */ (0, r.jsx)(H, { className: d("size-3.5 transition-transform duration-200 motion-reduce:transition-none", m && "rotate-45") })
      }), /* @__PURE__ */ (0, r.jsx)(k, {
        side: "bottom",
        align: "start",
        className: "min-w-[180px] w-max max-w-[280px] p-0",
        children: /* @__PURE__ */ (0, r.jsx)(G, { children: /* @__PURE__ */ (0, r.jsxs)(N, { children: [/* @__PURE__ */ (0, r.jsx)(y, { children: "No columns available" }), /* @__PURE__ */ (0, r.jsx)(w, { children: C.map((n) => /* @__PURE__ */ (0, r.jsx)(j, {
          value: n.id,
          onSelect: () => D(n.id),
          className: "cursor-pointer",
          children: n.label
        }, n.id)) })] }) })
      })]
    }) : null;
    return /* @__PURE__ */ (0, r.jsxs)("div", {
      "data-slot": "grouping-controls",
      role: "toolbar",
      "aria-label": "Grouping controls",
      className: d("flex flex-wrap items-center gap-2", x),
      children: [i.length === 0 ? /* @__PURE__ */ (0, r.jsx)("span", {
        className: "text-sm text-muted-foreground",
        children: s
      }) : i.map((n) => {
        const l = p.find((h) => h.id === n);
        return l ? /* @__PURE__ */ (0, r.jsx)(L, {
          size: g === "sm" ? "sm" : "md",
          removable: !0,
          onRemove: () => M(n),
          children: l.label
        }, n) : null;
      }), t]
    });
  }
  return /* @__PURE__ */ (0, r.jsxs)(O, {
    open: m,
    onOpenChange: b,
    children: [/* @__PURE__ */ (0, r.jsxs)(E, {
      "data-slot": "grouping-controls",
      "aria-label": "Group by column",
      className: d("inline-flex items-center justify-between gap-2 whitespace-nowrap", "border border-input bg-background hover:bg-accent hover:text-accent-foreground", "rounded-md font-medium", "transition-[color,background-color,border-color,transform] duration-150 ease-out motion-reduce:transition-none", "active:translate-y-px", g === "sm" ? "h-8 px-3 text-sm" : "h-9 px-3.5 py-2.5 text-sm", x),
      children: [/* @__PURE__ */ (0, r.jsx)("span", {
        className: d("truncate", i.length === 0 && "text-muted-foreground"),
        children: S
      }), /* @__PURE__ */ (0, r.jsx)(J, { className: d("size-4 shrink-0 opacity-50 transition-transform duration-200 motion-reduce:transition-none", m && "rotate-180") })]
    }), /* @__PURE__ */ (0, r.jsx)(k, {
      side: "bottom",
      align: "start",
      className: "min-w-[200px] w-max max-w-[300px] p-0",
      children: /* @__PURE__ */ (0, r.jsx)(G, { children: /* @__PURE__ */ (0, r.jsxs)(N, { children: [/* @__PURE__ */ (0, r.jsx)(y, { children: "No groupable columns" }), /* @__PURE__ */ (0, r.jsx)(w, { children: p.map((t) => {
        const n = i.includes(t.id), l = v(t.id), h = !n && _;
        return /* @__PURE__ */ (0, r.jsxs)(j, {
          value: t.id,
          onSelect: () => P(t.id),
          disabled: h,
          "data-disabled": h,
          "data-slot": "combobox-item",
          className: d("flex items-center justify-between gap-2 px-2 py-1.5 cursor-pointer", n && "bg-accent"),
          children: [/* @__PURE__ */ (0, r.jsxs)("div", {
            className: "flex items-center gap-2",
            children: [n && /* @__PURE__ */ (0, r.jsx)($, {
              className: "size-4 text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
              "aria-hidden": "true"
            }), /* @__PURE__ */ (0, r.jsx)("span", { children: t.label })]
          }), l !== null && /* @__PURE__ */ (0, r.jsx)("span", {
            className: "inline-flex size-5 items-center justify-center rounded-full bg-primary/10 text-[11px] font-semibold text-primary motion-safe:animate-in motion-safe:zoom-in-75 motion-safe:duration-150",
            children: l
          })]
        }, t.id);
      }) })] }) })
    })]
  });
}
z.displayName = "GroupingControls";
var U = q(), u = {
  table: "string",
  groupableColumns: "json",
  placeholder: "string",
  maxLevels: "number",
  variant: "string",
  size: "string",
  className: "string"
};
function A(e, o) {
  if (e !== null)
    switch (o) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var T = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const o = document.createElement("div");
    for (o.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(o), this._root = (0, U.createRoot)(o), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, o, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(u).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, o) {
    const s = u[e] || "string";
    this._props[e] = this._parseValue(o, s), this._render();
  }
  _parseValue(e, o) {
    if (o === "boolean" && typeof e == "boolean" || o === "number" && typeof e == "number" || o === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (o) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const o = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = u[e] || "string";
    return A(this.getAttribute(o), s);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [s, a] of Object.entries(u)) if (s in this._props) e[s] = this._props[s];
    else {
      const f = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = A(this.getAttribute(f), a);
    }
    const o = c.createElement(z, {
      ...e,
      _hostElement: this
    });
    this._root.render(o);
  }
};
for (const e of Object.keys(u)) Object.defineProperty(T.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(o) {
    this._setProp(e, o);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-grouping-controls") && customElements.define("hf-grouping-controls", T);
export {
  T as GroupingControlsWC,
  T as default
};

//# sourceMappingURL=hf-grouping-controls.js.map