, {
+ className: clsx(titleArea?.props?.className),
+ onToggleHeaderContentVisibility: onTitleClick,
+ 'data-not-clickable': !!preserveHeaderStateOnClick,
+ 'data-header-content-visible': headerArea && headerCollapsed !== true,
+ _snappedAvatar:
+ (!headerArea && image) || (image && headerCollapsed === true) ? (
+
+ ) : null,
+ })}
+
+ {renderHeaderContentSection()}
+ {headerArea && titleArea && (
+
+
+
+ )}
+ {!placeholder && (
+
- {childrenArray.map((section, index) => {
- if (!isValidElement(section) || !section.props) return null;
- const subTabs = safeGetChildrenArray>(
- section.props.children,
- ).filter(
- (subSection) =>
- // @ts-expect-error: if the `ObjectPageSubSection` component is passed as children, the `displayName` is available. Otherwise, the default children should be rendered w/o additional logic.
- isValidElement(subSection) && subSection?.type?.displayName === 'ObjectPageSubSection',
- );
- return (
- {
- if (!isValidElement(item)) {
- return null;
+
+ {childrenArray.map((section, index) => {
+ if (!isValidElement(section) || !section.props) return null;
+ const subTabs = safeGetChildrenArray>(
+ section.props.children,
+ ).filter(
+ (subSection) =>
+ // @ts-expect-error: if the `ObjectPageSubSection` component is passed as children, the `displayName` is available. Otherwise, the default children should be rendered w/o additional logic.
+ isValidElement(subSection) && subSection?.type?.displayName === 'ObjectPageSubSection',
+ );
+ return (
+
- {/*ToDo: workaround for nested tab selection*/}
-
-
- );
- })}
- >
- {/*ToDo: workaround for nested tab selection*/}
-
-
- );
- })}
-
-
- )}
- {
- const opNode = objectPageRef.current;
- if (opNode) {
- // 12px or 0.75rem margin for ui5wc border and input margins
- opNode.style.scrollPaddingBlock = `${Math.ceil(12 + topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT + (!headerCollapsed && headerPinned ? headerContentHeight : 0))}px ${footerArea ? 'calc(var(--_ui5wcr-BarHeight) + 1.25rem)' : 0}`;
- }
- }}
- onBlur={(e) => {
- const opNode = objectPageRef.current;
- if (opNode && !e.currentTarget.contains(e.relatedTarget as Node)) {
- opNode.style.scrollPaddingBlock = '0px';
- }
- }}
- >
+ items={subTabs.map((item) => {
+ if (!isValidElement(item)) {
+ return null;
+ }
+ return (
+
+ {/*ToDo: workaround for nested tab selection*/}
+
+
+ );
+ })}
+ >
+ {/*ToDo: workaround for nested tab selection*/}
+
+
+ );
+ })}
+
+
+ )}
{
+ if (node) {
+ if (mode === ObjectPageMode.IconTabBar && wasUserSectionChange) {
+ node.querySelector
('[data-component-name="ObjectPageSection"]')?.focus({
+ preventScroll: true,
+ });
+ }
+ objectPageContentRef.current = node;
+ }
+ setWasUserSectionChange(false);
+ }}
+ // prevent content scroll when elements outside the content are focused
+ onFocus={() => {
+ const opNode = objectPageRef.current;
+ if (opNode) {
+ // 12px or 0.75rem margin for ui5wc border and input margins
+ opNode.style.scrollPaddingBlock = `${Math.ceil(12 + topHeaderHeight + TAB_CONTAINER_HEADER_HEIGHT + (!headerCollapsed && headerPinned ? headerContentHeight : 0))}px ${footerArea ? 'calc(var(--_ui5wcr-BarHeight) + 1.25rem)' : 0}`;
+ }
+ }}
+ onBlur={(e) => {
+ const opNode = objectPageRef.current;
+ if (opNode && !e.currentTarget.contains(e.relatedTarget as Node)) {
+ opNode.style.scrollPaddingBlock = '0px';
+ }
}}
- aria-hidden="true"
- />
- {placeholder ? placeholder : sections}
-
-