@ui5/webcomponents-react/wrappers/components/ObjectPageHeader/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, useMemo } from 'react';
import { classNames, styleData } from './ObjectPageHeader.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The `ObjectPageHeader` component is used to serve as header section of the `ObjectPage`. It can hold any layout control and has two states - expanded and collapsed.
 *
 * __Note:__
 * - When used inside a custom component, it's essential to pass through all props, as otherwise the component won't function as intended!
 * - The `ObjectPageHeader` is essentially the `DynamicPageHeader` recommended by SAP Design. It was renamed in v2 to avoid conflicts with the `DynamicPageHeader` from `@ui5/webcomponents`.
 */
const ObjectPageHeader = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    children,
    headerPinned,
    topHeaderHeight,
    className,
    style,
    ...rest
  } = props;
  const headerStyles = useMemo(() => {
    if (headerPinned) {
      return {
        ...style,
        top: `${topHeaderHeight}px`,
        zIndex: 1
      };
    }
    return style;
  }, [headerPinned, topHeaderHeight, style]);
  useStylesheet(styleData, ObjectPageHeader.displayName);
  return /*#__PURE__*/_jsx("div", {
    ref: ref,
    ...rest,
    className: clsx(classNames.header, className),
    "data-component-name": "ObjectPageHeader",
    style: headerStyles,
    children: children
  });
});
ObjectPageHeader.displayName = 'ObjectPageHeader';
export { ObjectPageHeader };