@payfit/unity-components
Version:
63 lines (62 loc) • 1.8 kB
JavaScript
import { Actionable as e } from "../../actionable/Actionable.js";
import { useTableContext as t } from "../Table.context.js";
import { forwardRef as n, memo as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a } from "react/jsx-runtime";
//#region src/components/table/parts/TableColumnHeader.tsx
var o = i({
base: [
"uy:align-middle uy:leading-[1.00]",
"uy:px-200 uy:py-100 uy:typography-action uy:text-content-neutral",
"uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
"uy:hover:bg-surface-neutral-hover"
],
variants: { align: {
left: "uy:text-left",
center: "uy:text-center",
right: "uy:text-right"
} }
}), s = r(n(({ children: n, colIndex: r = 0, rowIndex: i = 0, align: s, onKeyDown: c, onFocus: l, className: u, isFocusable: d = !0, ...f }, p) => {
let { keyboardNavigation: m } = t(), { isCellFocused: h, handleCellKeyDown: g, handleCellFocus: _ } = m, v = d && h(i, r), y = (e) => {
e.key !== "Tab" && (g(e), c?.(e));
};
return "onPress" in f ? /* @__PURE__ */ a("th", {
ref: p,
role: "columnheader",
"aria-colindex": r + 1,
"data-focusable": d,
className: o({
align: s,
className: u
}),
"data-dd-privacy": "allow",
onKeyDown: y,
onFocus: (e) => {
_(e), l?.(e);
},
children: /* @__PURE__ */ a(e, {
...f,
children: n
})
}) : /* @__PURE__ */ a("th", {
ref: p,
role: "columnheader",
"aria-colindex": r + 1,
tabIndex: v ? 0 : -1,
"data-focusable": d,
className: o({
align: s,
className: u
}),
onKeyDown: y,
onFocus: (e) => {
_(e), l?.(e);
},
"data-dd-privacy": "allow",
...f,
children: n
});
}));
s.displayName = "TableColumnHeader";
//#endregion
export { s as TableColumnHeader, o as tableColumnHeader };