@carbon/react
Version:
React components for the Carbon Design System
156 lines (154 loc) • 6.48 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_useId = require("../../internal/useId.js");
const require_utils = require("../../internal/utils.js");
const require_index = require("../AILabel/index.js");
const require_sortStates = require("./state/sortStates.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/DataTable/TableHeader.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const defaultScope = "col";
const translationIds = { "carbon.table.header.icon.description": "carbon.table.header.icon.description" };
const defaultTranslations = { [translationIds["carbon.table.header.icon.description"]]: "Click to sort rows by header in ascending order" };
const defaultTranslateWithId = (messageId, args) => {
if (args && messageId === translationIds["carbon.table.header.icon.description"]) {
if (args.isSortHeader && require_sortStates.sortStates) {
if (args.sortDirection === require_sortStates.sortStates.NONE) return `Click to sort rows by ${args.header} header in ascending order`;
if (args.sortDirection === require_sortStates.sortStates.ASC) return `Click to sort rows by ${args.header} header in descending order`;
return `Click to unsort rows by ${args.header} header`;
}
return `Click to sort rows by ${args.header} header in ascending order`;
}
return defaultTranslations[messageId];
};
const sortDirections = {
[require_sortStates.sortStates.NONE]: "none",
[require_sortStates.sortStates.ASC]: "ascending",
[require_sortStates.sortStates.DESC]: "descending"
};
const TableHeader = (0, react.forwardRef)((props, ref) => {
const { className: headerClassName, children, colSpan, decorator, isSortable = false, isSortHeader, onClick, scope = defaultScope, sortDirection, translateWithId: t = defaultTranslateWithId, slug, id, ...rest } = props;
const prefix = require_usePrefix.usePrefix();
const uniqueId = require_useId.useId("table-sort");
const AILableRef = (0, react.useRef)(null);
const candidate = slug ?? decorator;
const candidateIsAILabel = require_utils.isComponentElement(candidate, require_index.AILabel);
const colHasAILabel = candidateIsAILabel;
const normalizedDecorator = candidateIsAILabel ? (0, react.cloneElement)(candidate, {
size: "mini",
ref: AILableRef
}) : candidate;
const headerLabelClassNames = (0, classnames.default)({
[`${prefix}--table-header-label`]: true,
[`${prefix}--table-header-label--slug ${prefix}--table-header-label--ai-label`]: colHasAILabel,
[`${prefix}--table-header-label--decorator`]: decorator
});
if (!isSortable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
...rest,
id,
className: headerClassName,
scope,
colSpan,
ref,
children: children ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: headerLabelClassNames,
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--table-header-label--decorator-inner`,
children: normalizedDecorator
})]
}) : null
});
const className = (0, classnames.default)(headerClassName, {
[`${prefix}--table-sort`]: true,
[`${prefix}--table-sort--active`]: isSortHeader && sortDirection !== require_sortStates.sortStates.NONE,
[`${prefix}--table-sort--descending`]: isSortHeader && sortDirection === require_sortStates.sortStates.DESC
});
const ariaSort = !isSortHeader || !sortDirection ? "none" : sortDirections[sortDirection];
const sortDescription = t && t("carbon.table.header.icon.description", {
header: children,
sortDirection,
isSortHeader,
sortStates: require_sortStates.sortStates
});
const headerClasses = (0, classnames.default)(headerClassName, `${prefix}--table-sort__header`, {
[`${prefix}--table-sort__header--ai-label`]: colHasAILabel,
[`${prefix}--table-sort__header--decorator`]: decorator
});
const handleClick = (evt) => {
if (colHasAILabel && AILableRef.current && AILableRef.current.contains(evt.target)) return;
else if (onClick) return onClick(evt);
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("th", {
id,
"aria-sort": ariaSort,
className: headerClasses,
colSpan,
ref,
scope,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--table-sort__description`,
id: uniqueId,
children: sortDescription
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
type: "button",
"aria-describedby": uniqueId,
className,
onClick: handleClick,
...rest,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
className: `${prefix}--table-sort__flex`,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--table-header-label`,
children
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ArrowUp, {
size: 20,
className: `${prefix}--table-sort__icon`
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ArrowsVertical, {
size: 20,
className: `${prefix}--table-sort__icon-unsorted`
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--table-header-label--decorator-inner`,
children: normalizedDecorator
})
]
})
})]
});
});
TableHeader.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
colSpan: prop_types.default.number,
id: prop_types.default.string,
isSortHeader: prop_types.default.bool,
isSortable: prop_types.default.bool,
onClick: prop_types.default.func,
scope: prop_types.default.string,
sortDirection: prop_types.default.oneOf(Object.values(require_sortStates.sortStates)),
translateWithId: prop_types.default.func
};
TableHeader.displayName = "TableHeader";
//#endregion
exports.default = TableHeader;