@hitachivantara/uikit-react-core/dist/Table/renderers/renderers.js

UI Kit Core React components.

import { setId } from "../../utils/setId.js";
import { HvIcon } from "../../icons.js";
import { HvButton } from "../../Button/Button.js";
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
import { HvTag } from "../../Tag/Tag.js";
import { HvDateColumnCell } from "./DateColumnCell.js";
import { HvDropdownColumnCell } from "./DropdownColumnCell.js";
import { HvProgressColumnCell } from "./ProgressColumnCell.js";
import { HvSwitchColumnCell } from "./SwitchColumnCell.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { ClassNames } from "@emotion/react";
//#region src/Table/renderers/renderers.tsx
var EM_DASH = "—";
var hvStringFallback = (value) => {
	return typeof value === "string" && value !== "" ? value : EM_DASH;
};
var hvNumberFallback = (value) => {
	return typeof value === "number" ? value : EM_DASH;
};
var hvNodeFallback = (value) => {
	if (!value) return EM_DASH;
	return hvStringFallback(value?.toString()) === EM_DASH ? EM_DASH : value;
};
function hvTextColumn(col, overflowTooltipProps = {}) {
	return {
		Cell: ({ value }) => /* @__PURE__ */ jsx(HvOverflowTooltip, {
			data: hvStringFallback(value),
			...overflowTooltipProps
		}),
		sortType: "alphanumeric",
		...col
	};
}
function hvNumberColumn(col) {
	return {
		Cell: ({ value }) => /* @__PURE__ */ jsx(Fragment, { children: hvNumberFallback(value) }),
		align: "right",
		sortType: "number",
		...col
	};
}
function hvDateColumn(col) {
	return {
		Cell: ({ value }) => /* @__PURE__ */ jsx(HvDateColumnCell, { date: value }),
		sortType: "alphanumeric",
		sortDescFirst: true,
		...col
	};
}
function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsx(HvIcon, {
	name: "CaretDown",
	size: "xs",
	rotate: true
}), CollapsedIcon = /* @__PURE__ */ jsx(HvIcon, {
	name: "CaretDown",
	size: "xs"
})) {
	return {
		Cell: (cellProps) => {
			const { value, row } = cellProps;
			const expandedProps = row.getToggleRowExpandedProps?.();
			const hasContent = getCanRowExpand?.(row) ?? true;
			return /* @__PURE__ */ jsx(ClassNames, { children: ({ css }) => /* @__PURE__ */ jsxs("div", {
				className: css({
					display: "flex",
					alignItems: "center",
					position: "relative",
					left: -16
				}),
				children: [hasContent && /* @__PURE__ */ jsx(HvButton, {
					icon: true,
					"aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
					"aria-expanded": row.isExpanded,
					onClick: expandedProps?.onClick,
					children: row.isExpanded ? ExpandedIcon : CollapsedIcon
				}), /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value) })]
			}) });
		},
		sortType: "alphanumeric",
		cellStyle: { position: "relative" },
		...col
	};
}
function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey, fromRowData = false, tagProps) {
	return {
		Cell: (cellProps) => {
			const { value, row } = cellProps;
			if (!value) return /* @__PURE__ */ jsx(Fragment, { children: "—" });
			const { [valueDataKey]: name, [colorDataKey]: color, [textColorDataKey]: textColor } = fromRowData ? row.original : value;
			return /* @__PURE__ */ jsx(HvTag, {
				label: name,
				type: "semantic",
				color,
				style: textColor != null ? { color: textColor } : {},
				tabIndex: -1,
				...tagProps
			});
		},
		cellStyle: {
			paddingTop: 0,
			paddingBottom: 0
		},
		...col
	};
}
function hvSwitchColumn(col, switchLabel, falseLabel, trueLabel, switchProps) {
	return {
		Cell: (cellProps) => {
			const { value, row } = cellProps;
			return /* @__PURE__ */ jsx(HvSwitchColumnCell, {
				checked: value,
				value: row.id,
				switchLabel,
				falseLabel,
				trueLabel,
				switchProps
			});
		},
		cellStyle: {
			paddingTop: 0,
			paddingBottom: 0
		},
		...col
	};
}
function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, onChange, dropdownProps) {
	return {
		Cell: (cellProps) => {
			const { value, row, column } = cellProps;
			const disabled = !Array.isArray(value) || Array.isArray(value) && value.length < 1;
			return /* @__PURE__ */ jsx(HvDropdownColumnCell, {
				values: value,
				placeholder: disabled ? disabledPlaceholder : placeholder,
				onChange: (val) => onChange?.(row.id, val),
				disabled,
				"aria-labelledby": setId(id, column.id) || column.id || id,
				...dropdownProps
			});
		},
		cellStyle: {
			paddingTop: 0,
			paddingBottom: 0
		},
		...col
	};
}
function hvProgressColumn(col, getPartial, getTotal, color) {
	return {
		Cell: (cellProps) => {
			const { row, column } = cellProps;
			const partial = getPartial?.(row) || 0;
			const total = getTotal?.(row);
			if (total) return /* @__PURE__ */ jsx(HvProgressColumnCell, {
				partial,
				total,
				color,
				"aria-labelledby": column.id
			});
			return /* @__PURE__ */ jsx(Fragment, { children: "—" });
		},
		cellStyle: {
			paddingTop: 0,
			paddingBottom: 0
		},
		...col
	};
}
//#endregion
export { hvDateColumn, hvDropdownColumn, hvExpandColumn, hvNodeFallback, hvNumberColumn, hvNumberFallback, hvProgressColumn, hvStringFallback, hvSwitchColumn, hvTagColumn, hvTextColumn };