@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
59 lines (58 loc) • 1.9 kB
JavaScript
'use client';
import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { classNames, styleData } from './ObjectPageSection.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Top-level information container of an `ObjectPage`.
*/
const ObjectPageSection = /*#__PURE__*/forwardRef((props, ref) => {
const {
titleText,
id,
children,
titleTextUppercase,
className,
style,
hideTitleText,
titleTextLevel = 'H3',
wrapTitleText,
header,
...rest
} = props;
useStylesheet(styleData, ObjectPageSection.displayName);
const htmlId = `ObjectPageSection-${id}`;
const titleClasses = clsx(classNames.title, titleTextUppercase && classNames.uppercase);
return /*#__PURE__*/_jsxs("section", {
ref: ref,
role: "region",
className: clsx(classNames.section, wrapTitleText && classNames.wrap, className),
style: style,
...rest,
id: htmlId,
"data-component-name": "ObjectPageSection",
children: [!!header && /*#__PURE__*/_jsx("div", {
className: classNames.headerContainer,
children: header
}), !hideTitleText && /*#__PURE__*/_jsx("div", {
role: "heading",
"aria-level": parseInt(titleTextLevel.slice(1)),
className: classNames.titleContainer,
"data-component-name": "ObjectPageSectionTitleText",
children: /*#__PURE__*/_jsx("div", {
className: titleClasses,
children: titleText
})
}), /*#__PURE__*/_jsx("div", {
className: classNames.sectionContent,
children: /*#__PURE__*/_jsx("div", {
className: classNames.sectionContentInner,
"data-component-name": "ObjectPageSectionContent",
children: children
})
})]
});
});
ObjectPageSection.displayName = 'ObjectPageSection';
export { ObjectPageSection };