@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 f } from "react/jsx-runtime";
import y from "react";
import { SerendieSymbol as a } from "@serendie/symbols";
import { css as u } from "../../../styled-system/css/css.js";
import { cx as g } from "../../../styled-system/css/cx.js";
import { cva as h } from "../../../styled-system/css/cva.js";
const x = h({
  base: {
    borderBottomWidth: "1px",
    borderBottomStyle: "solid",
    borderBottomColor: "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: {}
}), B = y.forwardRef(
  ({
    children: s,
    size: r = "medium",
    state: d = "enabled",
    sortable: e = !1,
    sortDirection: n,
    onSort: o,
    className: i,
    style: m,
    ...c
  }, p) => /* @__PURE__ */ l(
    "th",
    {
      ref: p,
      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: (t) => {
        e && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o == null || o());
      },
      className: g(x({ size: r, state: d }), i),
      style: {
        cursor: e ? "pointer" : "default",
        userSelect: "none",
        ...m
      },
      ...c,
      children: /* @__PURE__ */ f(
        "span",
        {
          className: u({
            display: "inline-flex",
            alignItems: "center",
            verticalAlign: "middle"
          }),
          children: [
            s,
            e && (n === "asc" ? /* @__PURE__ */ l(
              a,
              {
                name: "chevron-double-up",
                style: { marginLeft: 4 }
              }
            ) : n === "desc" ? /* @__PURE__ */ l(
              a,
              {
                name: "chevron-double-down",
                style: { marginLeft: 4 }
              }
            ) : /* @__PURE__ */ l(
              a,
              {
                name: "chevron-up-down",
                style: { marginLeft: 4 }
              }
            ))
          ]
        }
      )
    }
  )
);
export {
  B as HeaderCell
};