@veracity/vui/dist/table/th.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { useCallbackRef } from "../utils/react.js";
import { cs } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { useTableContext } from "./context.js";
import { TableSortIcon } from "./tableSortIcon.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/table/th.tsx
const ThBase = styled.thBox`
  font-weight: demi;
  text-align: left;
  transition-duration: fast;
`;
/** Displays Table heading with support for sort. */
const Th = vui((props, ref) => {
	const { children, className, disabled, field, isInteractive: isInteractiveProp, isSortable, onClick: onClickProp, title, ...rest } = props;
	const tableContext = useTableContext();
	const styles = useStyleConfig("Table", tableContext);
	const { onSortChange, sort } = tableContext || {};
	const handleClick = useCallbackRef((e) => {
		onClickProp?.(e);
		if (isSortable && field && onSortChange) onSortChange(field);
	});
	const onClick = onClickProp || isSortable ? handleClick : void 0;
	const isActive = !disabled && sort?.key === field;
	const sortOrder = isActive ? sort.order : void 0;
	const isInteractive = isInteractiveProp ?? onClick !== void 0;
	const activeProps = isActive ? { bg: "skyBlue.active" } : {};
	const disabledProps = disabled ? {
		bg: "disabled.bg",
		color: "disabled.color",
		cursor: "not-allowed"
	} : {};
	const hoverBg = isSortable ? "skyBlue.hover" : void 0;
	const interactiveProps = !disabled && isInteractive ? {
		cursor: "pointer",
		onClick,
		tabIndex: 0,
		userSelect: "none"
	} : {};
	return /* @__PURE__ */ jsx(ThBase, {
		className: cs("vui-th", className),
		"data-active": isActive,
		"data-disabled": disabled,
		hoverBg,
		px: 2,
		ref,
		...styles.th,
		...activeProps,
		...disabledProps,
		...interactiveProps,
		...rest,
		children: children ?? /* @__PURE__ */ jsxs(Box, {
			centerV: true,
			display: "inline-flex",
			children: [title, isSortable && /* @__PURE__ */ jsx(TableSortIcon, {
				ml: 1,
				my: .5,
				order: sortOrder
			})]
		})
	});
});
Th.displayName = "Th";

//#endregion
export { Th, Th as default, ThBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=th.js.map