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

import {
  useFocusHandler
} from "./chunk-F5W73ZFA.mjs";
import {
  useTableContext
} from "./chunk-A4IWBDSQ.mjs";
import {
  replaceSpacesWithHyphens
} from "./chunk-4CU75PXA.mjs";

// src/editable-table/editable-table-header.tsx
import { flexRender } from "@tanstack/react-table";
import { ArrowDownIcon, ArrowUpIcon, CaretUpDownIcon } from "@trail-ui/icons";
import { useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function EditableTableHeader({
  table,
  selectAllCheckBoxName,
  tableName
}) {
  return /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-10 after:absolute after:bottom-0 after:w-full after:border-t after:border-t-neutral-200", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx("tr", { children: group.headers.map((header) => /* @__PURE__ */ jsx(
    HeaderCell,
    {
      header,
      tableName,
      selectAllCheckBoxName
    },
    header.id
  )) }, group.id)) });
}
function HeaderCell({
  header,
  selectAllCheckBoxName,
  tableName
}) {
  var _a, _b;
  const cellRef = useRef(null);
  const { table, tableRef } = useTableContext();
  const { isCurrentCellFocused, focusCurrentCell } = useFocusHandler({
    cellType: "headerCell" /* headerCell */,
    columnIndex: header.column.getIndex(),
    groupId: null,
    rowId: null,
    rowIndex: -1
  });
  const canSort = header.column.getCanSort();
  const isCheckbox = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.type) === "checkbox";
  const tabIndex = ((_b = tableRef.current) == null ? void 0 : _b.contains(document.activeElement)) ? isCurrentCellFocused ? 0 : -1 : 0 === header.column.getIndex() ? 0 : -1;
  const classes = "border-b border-r bg-neutral-100 p-2 text-sm font-normal last:border-r-0";
  function onFocusChange() {
    if (!isCurrentCellFocused && 0 === header.column.getIndex()) {
      focusCurrentCell();
    }
  }
  const renderSortIcon = (sorted) => {
    switch (sorted) {
      case "asc":
        return /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-4 w-4 text-purple-600" });
      case "desc":
        return /* @__PURE__ */ jsx(ArrowDownIcon, { className: "h-4 w-4 text-purple-600" });
      default:
        return /* @__PURE__ */ jsx(CaretUpDownIcon, { className: "h-4 w-4 text-neutral-600" });
    }
  };
  const toggleCheckbox = (elem) => {
    const checkbox = elem.querySelector('input[type="checkbox"]');
    checkbox == null ? void 0 : checkbox.click();
  };
  useEffect(() => {
    var _a2;
    if (isCurrentCellFocused) {
      (_a2 = cellRef.current) == null ? void 0 : _a2.focus();
    }
  }, [isCurrentCellFocused]);
  if (isCheckbox) {
    return /* @__PURE__ */ jsx(
      "td",
      {
        id: header.column.id,
        style: {
          minWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
          maxWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
          width: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size
        },
        className: `${classes} text-center`,
        children: /* @__PURE__ */ jsx(
          "div",
          {
            id: `${replaceSpacesWithHyphens(tableName)}-${header.column.getIndex()}`,
            ref: cellRef,
            role: "checkbox",
            "aria-label": selectAllCheckBoxName != null ? selectAllCheckBoxName : `Select all ${tableName}`,
            "aria-checked": table.getIsAllRowsSelected() ? "true" : table.getIsSomeRowsSelected() ? "mixed" : "false",
            className: "th-content flex h-6 w-6 cursor-pointer items-center justify-center outline-purple-600",
            onClick: (e) => toggleCheckbox(e.currentTarget),
            onKeyDown: (e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                toggleCheckbox(e.currentTarget);
              }
            },
            tabIndex,
            onFocus: onFocusChange,
            children: flexRender(header.column.columnDef.header, header.getContext())
          }
        )
      },
      header.id
    );
  }
  return /* @__PURE__ */ jsx(
    "th",
    {
      id: header.column.id,
      scope: "col",
      className: `${classes} text-left`,
      style: {
        minWidth: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size,
        width: header.column.columnDef.size === 100 ? "auto" : header.column.columnDef.size
      },
      ...canSort && {
        "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none"
      },
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          ref: cellRef,
          className: `th-content flex items-center justify-between rounded px-2 text-sm font-semibold outline-purple-600 focus:outline focus:outline-2 ${canSort ? "cursor-pointer select-none" : ""}`,
          onClick: () => {
            if (canSort) {
              header.column.toggleSorting();
            }
            focusCurrentCell();
          },
          onKeyDown: (e) => {
            if (e.key === " " && canSort) {
              e.preventDefault();
              header.column.toggleSorting();
            }
          },
          tabIndex,
          onFocus: onFocusChange,
          children: [
            /* @__PURE__ */ jsx("span", { id: `${replaceSpacesWithHyphens(tableName)}-${header.column.getIndex()}`, children: flexRender(header.column.columnDef.header, header.getContext()) }),
            canSort && /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Sortable" }),
              renderSortIcon(header.column.getIsSorted())
            ] })
          ]
        }
      )
    },
    header.id
  );
}

export {
  EditableTableHeader
};