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

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

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 { Button } from "../button/button.js";
import { useTableContext } from "./context.js";
import { Td } from "./td.js";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/table/tr.tsx
const trClassName = "vui-tr";
const buttonClassName = (isExpanded) => `falAngle${isExpanded ? "Down" : "Right"}`;
const TrBase = styled.trBox`
  position: relative;
  transition-duration: fast;
`;
/** Displays Table row that can contain heading or data cells. */
const Tr = vui((props, ref) => {
	const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props;
	const { variant } = useTableContext() ?? {};
	const styles = useStyleConfig("Table", useTableContext());
	const [isExpanded, setIsExpanded] = useState(isExpandedProp);
	useEffect(() => {
		setIsExpanded(isExpandedProp);
	}, [isExpandedProp]);
	const onToggle = () => {
		if (isExpanded) {
			setIsExpanded(false);
			onCollapsed?.();
		} else {
			setIsExpanded(true);
			onExpanded?.();
		}
	};
	const selectedProps = isSelected ? { bg: "skyBlue.selected" } : {};
	rest.children = /* @__PURE__ */ jsxs(Fragment$1, { children: [nested !== void 0 && /* @__PURE__ */ jsx(Td, {
		maxW: 16,
		px: 1,
		textAlign: "center",
		children: nested ? /* @__PURE__ */ jsx(Button, {
			size: "sm",
			icon: buttonClassName(isExpanded),
			onClick: onToggle,
			variant: "tertiary",
			style: {
				"--vui-button-color": "var(--vui-action-blue-subtle-inverse)",
				"--vui-button-hover-bg": "var(--vui-action-blue-subtle-hover)",
				"--vui-button-active-bg": "var(--vui-action-blue-subtle-pressed)"
			}
		}) : null
	}), rest.children] });
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TrBase, {
		className: cs(trClassName, `${trClassName}-${isExpanded ? "expanded" : "collapsed"}`, className),
		"data-selected": Boolean(isSelected),
		"data-variant": variant,
		ref,
		...styles.tr,
		...selectedProps,
		...rest
	}), isExpanded && nested] });
});
Tr.displayName = "Tr";

//#endregion
export { Tr, Tr as default, TrBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=tr.js.map