@ui5/webcomponents-react/wrappers/components/ObjectPage/ObjectPageUtils.js

React Wrapper for UI5 Web Components and additional components

import { isValidElement } from 'react';
import { safeGetChildrenArray } from '../../internal/safeGetChildrenArray.js';
export const getSectionById = (sections, id) => {
  return safeGetChildrenArray(sections).find(objectPageSection => {
    return /*#__PURE__*/isValidElement(objectPageSection) && objectPageSection.props?.id === id;
  });
};
export const getSectionElementById = (objectPage, isSubSection, id) => {
  return objectPage?.querySelector(`#${isSubSection ? 'ObjectPageSubSection' : 'ObjectPageSection'}-${CSS.escape(id)}`);
};
export function navigateSections({
  e,
  onKeyDown,
  componentName
}) {
  if (typeof onKeyDown === 'function') {
    onKeyDown(e);
  }
  if (e.currentTarget !== e.target) {
    return;
  }
  const nextSibling = e.currentTarget.nextElementSibling;
  const prevSibling = e.currentTarget.previousElementSibling;
  if (nextSibling && (e.key === 'ArrowDown' || e.key === 'ArrowRight') && nextSibling.dataset.componentName === componentName) {
    e.preventDefault();
    e.currentTarget.tabIndex = -1;
    nextSibling.tabIndex = 0;
    nextSibling.focus({
      preventScroll: true
    });
    nextSibling.scrollIntoView({
      behavior: 'instant',
      block: 'start'
    });
  }
  if (prevSibling && (e.key === 'ArrowUp' || e.key === 'ArrowLeft') && prevSibling.dataset.componentName === componentName) {
    e.preventDefault();
    e.currentTarget.tabIndex = -1;
    prevSibling.tabIndex = 0;
    prevSibling.focus({
      preventScroll: true
    });
    prevSibling.scrollIntoView({
      behavior: 'instant',
      block: 'start'
    });
  }
}