@serendie/ui/dist/components/DataTable/table/HeaderCell.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsx as l, jsxs as p } from "react/jsx-runtime";
import f from "react";
import { SerendieSymbol as s } from "@serendie/symbols";
import { css as y } from "../../../styled-system/css/css.js";
import { cx as u } from "../../../styled-system/css/cx.js";
import { cva as g } from "../../../styled-system/css/cva.js";
const h = g({
  base: {
    borderBottom: "1px solid",
    borderColor: "sd.system.color.component.outline",
    fontFamily: "Roboto, sans-serif",
    color: "sd.system.color.component.onSurface",
    textAlign: "left",
    fontWeight: 400,
    fontSize: "14px",
    px: "sd.system.dimension.spacing.extraSmall",
    py: "sd.system.dimension.spacing.twoExtraSmall",
    height: "32px",
    background: "sd.system.color.component.inversePrimary",
    verticalAlign: "middle",
    whiteSpace: "nowrap"
  },
  defaultVariants: {}
}), A = f.forwardRef(
  ({
    children: i,
    size: r = "medium",
    state: d = "enabled",
    sortable: e = !1,
    sortDirection: n,
    onSort: o,
    className: t,
    ...m
  }, c) => /* @__PURE__ */ l(
    "th",
    {
      ref: c,
      role: "columnheader",
      "aria-sort": n === "asc" ? "ascending" : n === "desc" ? "descending" : e ? "none" : void 0,
      tabIndex: e ? 0 : void 0,
      onClick: e ? o : void 0,
      onKeyDown: (a) => {
        e && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o == null || o());
      },
      className: u(h({ size: r, state: d }), t),
      style: {
        cursor: e ? "pointer" : "default",
        userSelect: "none"
      },
      ...m,
      children: /* @__PURE__ */ p(
        "span",
        {
          className: y({
            display: "inline-flex",
            alignItems: "center",
            verticalAlign: "middle"
          }),
          children: [
            i,
            e && (n === "asc" ? /* @__PURE__ */ l(
              s,
              {
                name: "chevron-double-up",
                style: { marginLeft: 4 }
              }
            ) : n === "desc" ? /* @__PURE__ */ l(
              s,
              {
                name: "chevron-double-down",
                style: { marginLeft: 4 }
              }
            ) : /* @__PURE__ */ l(
              s,
              {
                name: "chevron-up-down",
                style: { marginLeft: 4 }
              }
            ))
          ]
        }
      )
    }
  )
);
export {
  A as HeaderCell
};