import { jsx as t, jsxs as x } from "react/jsx-runtime";
import y, { useMemo as g } from "react";
import { naturalSortByProperty as B, sortByProperty as C } from "../../utils/SortUtils.js";
const D = (f) => {
  const {
    items: n,
    groupBy: o = "name",
    groupSortOrder: h = "asc",
    // Default to ascending order if not specified
    groupSortFunction: m,
    itemSortFunction: i,
    itemSortOrder: v = "asc",
    // Default to ascending order if not specified
    renderDivider: a,
    renderItem: d,
    listElement: N = "div",
    // Default to 'div' if not specified
    listElementClassName: S,
    dividerElementClassName: F,
    className: K
  } = f, p = m || ((e) => B(e, "groupKey", h)), E = i || ((e) => C(e, o, v)), c = typeof o == "function" ? o : (e) => e[o]?.[0]?.toUpperCase() ?? "", u = g(() => {
    const e = n.reduce(
      (r, l) => {
        const s = c(l);
        return r[s] || (r[s] = []), r[s].push(l), r;
      },
      {}
    );
    return Object.keys(e).map((r) => ({
      groupKey: r,
      items: e[r]
    }));
  }, [n, c]), I = N, j = g(() => p(u), [u, p]);
  return /* @__PURE__ */ t("div", { className: `grouped-item-list ${K ?? ""}`, children: j.map((e) => /* @__PURE__ */ x(y.Fragment, { children: [
    /* @__PURE__ */ t("div", { className: `group-divider ${F ?? ""}`, children: a ? a(e.groupKey) : e.groupKey }),
    /* @__PURE__ */ t(I, { className: S, children: E(e.items).map(
      (r) => d ? d(r) : /* @__PURE__ */ t(y.Fragment, { children: /* @__PURE__ */ t("div", { className: "item-name", children: r.name }) }, r.id ?? crypto.randomUUID())
    ) })
  ] }, e.groupKey)) });
};
export {
  D as default
};
//# sourceMappingURL=GroupedItemList.js.map
