@ui5/webcomponents-react/dist/components/ObjectPageSubSection/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { FlexBoxAlignItems, FlexBoxDirection, FlexBoxJustifyContent } from '../../enums/index.js';
import { FlexBox } from '../FlexBox/index.js';
import { classNames, styleData } from './ObjectPageSubSection.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Second-level information container of an `ObjectPage`.<br />
 * __Note:__ This component should only be used inside an `ObjectPageSection` component.
 */
const ObjectPageSubSection = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    id,
    titleText,
    className,
    style,
    actions,
    hideTitleText,
    titleTextLevel = 'H4',
    titleTextUppercase,
    ...rest
  } = props;
  const htmlId = `ObjectPageSubSection-${id}`;
  useStylesheet(styleData, ObjectPageSubSection.displayName);
  const subSectionClassName = clsx(classNames.objectPageSubSection, className);
  return /*#__PURE__*/_jsxs("div", {
    ref: ref,
    role: "region",
    style: style,
    tabIndex: -1,
    ...rest,
    className: subSectionClassName,
    id: htmlId,
    "data-component-name": "ObjectPageSubSection",
    children: [/*#__PURE__*/_jsxs(FlexBox, {
      direction: FlexBoxDirection.Row,
      justifyContent: FlexBoxJustifyContent.SpaceBetween,
      alignItems: FlexBoxAlignItems.Center,
      className: classNames.headerContainer,
      "data-component-name": "ObjectPageSubSectionHeaderContainer",
      children: [!hideTitleText ? /*#__PURE__*/_jsx("div", {
        role: "heading",
        "aria-level": parseInt(titleTextLevel.slice(1)),
        className: clsx(classNames.subSectionTitle, titleTextUppercase && classNames.uppercase),
        "data-component-name": "ObjectPageSubSectionTitleText",
        children: titleText
      }) : /*#__PURE__*/_jsx("span", {
        "aria-hidden": "true",
        className: classNames.spacer
      }), actions && actions]
    }), /*#__PURE__*/_jsx("div", {
      className: classNames.subSectionContent,
      "data-component-name": "ObjectPageSubSectionContent",
      children: children
    })]
  });
});
ObjectPageSubSection.displayName = 'ObjectPageSubSection';
export { ObjectPageSubSection };