@ui5/webcomponents-react/wrappers/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 } from '../../enums/FlexBoxAlignItems.js';
import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
import { FlexBoxJustifyContent } from '../../enums/FlexBoxJustifyContent.js';
import { FlexBox } from '../FlexBox/index.js';
import { navigateSections } from '../ObjectPage/ObjectPageUtils.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`.
 *
 * __Note:__ This component should only be used inside an `ObjectPageSection` component.
 *
 * __Note:__ Only use subsections if more than one is available. Otherwise, add the content of the section directly as `child` of the `ObjectPageSection`.
 */
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,
    onKeyDown: e => {
      navigateSections({
        e,
        onKeyDown: props.onKeyDown,
        componentName: 'ObjectPageSubSection'
      });
    },
    onBlur: e => {
      if (typeof props.onBlur === 'function') {
        props.onBlur(e);
      }
      if (e.target === e.currentTarget) {
        e.target.tabIndex = -1;
      }
    },
    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]
    }), /*#__PURE__*/_jsx("div", {
      className: classNames.subSectionContent,
      "data-component-name": "ObjectPageSubSectionContent",
      children: children
    })]
  });
});
ObjectPageSubSection.displayName = 'ObjectPageSubSection';
export { ObjectPageSubSection };