chore: use UI5 Web Component extension for ObjectPageAnchorTabs

packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx

@@ -1,6 +1,11 @@
 import '@ui5/webcomponents-icons/dist/slim-arrow-down';
-import { Tab } from '@ui5/webcomponents-react/dist/Tab';
 import React, { FC, useEffect, useRef } from 'react';
+import { ObjectPageAnchorTab } from './ObjectPageAnchorTab';
+import { safeGetChildrenArray } from './ObjectPageUtils';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+ObjectPageAnchorTab.define();
 
 interface ObjectPageAnchorPropTypes {
   section: any;
@@ -13,45 +18,29 @@ export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props: Obj
   const ref = useRef<HTMLElement>();
   const { section, index, selected, onShowSubSectionPopover } = props;
 
-  let subSectionsAvailable = false;
-  if (section.props.children && section.props.children.filter) {
-    const subSections = section.props.children.filter((item) => item.props && item.props.isSubSection);
-    subSectionsAvailable = subSections.length > 0;
-  }
+  const hasSubSections = safeGetChildrenArray<any>(section.props.children).some(
+    (subSection) => subSection.props?.isSubSection
+  );
 
   useEffect(() => {
-    if (subSectionsAvailable) {
-      try {
-        const element = ref.current?.parentElement?.shadowRoot?.querySelector(
-          `.ui5-tc__headerList li[aria-posinset="${index + 1}"] .ui5-tab-strip-itemContent`
-        );
-
-        if (element && !element.querySelector('ui5-icon')) {
-          const icon = document.createElement('ui5-icon');
-          (icon as any).name = 'slim-arrow-down';
-          icon.style.verticalAlign = 'text-bottom';
-          icon.style.pointerEvents = 'all';
-          icon.addEventListener('click', (e) => {
-            e.stopImmediatePropagation();
-            e.preventDefault();
-            e.stopPropagation();
-            onShowSubSectionPopover(e, section);
-          });
-          element.appendChild(icon);
-        }
-      } catch (e) {
-        // empty catch block, mainly required for tests
-      }
-    }
-  }, [subSectionsAvailable, ref, onShowSubSectionPopover, section]);
+    const listener = (e) => {
+      onShowSubSectionPopover(e, section);
+    };
+    const el = ref.current;
+    el.addEventListener('show-sub-sections', listener);
+    return () => {
+      el?.removeEventListener('show-sub-sections', listener);
+    };
+  }, [onShowSubSectionPopover]);
 
   return (
-    <Tab
+    <ui5-object-page-anchor-tab
       ref={ref}
       data-index={index}
       data-section-id={section.props.id}
       text={section.props.title}
-      selected={selected}
+      selected={selected || undefined}
+      with-sub-sections={hasSubSections || undefined}
     />
   );
 };

packages/main/src/components/ObjectPage/ObjectPageAnchorTab.ts

@@ -0,0 +1,141 @@
+/* eslint-disable no-underscore-dangle */
+import ifDefined from '@ui5/webcomponents-base/dist/renderer/ifDefined.js';
+import { html, setSuffix, setTags } from '@ui5/webcomponents-base/dist/renderer/LitRenderer.js';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/dist/ThemingParameters';
+import Icon from '@ui5/webcomponents/dist/Icon.js';
+import Tab from '@ui5/webcomponents/dist/Tab.js';
+import TabContainer from '@ui5/webcomponents/dist/TabContainer.js';
+import { DetailedHTMLProps, HTMLAttributes, MouseEventHandler } from 'react';
+
+interface ObjectPageAnchorTabPropTypes extends HTMLAttributes<HTMLElement> {
+  text: string;
+  'with-sub-sections'?: boolean;
+  selected?: boolean;
+}
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      'ui5-object-page-anchor-tab': DetailedHTMLProps<ObjectPageAnchorTabPropTypes, HTMLElement>;
+    }
+  }
+}
+
+const metadata = {
+  tag: 'ui5-object-page-anchor-tab',
+  properties: {
+    withSubSections: {
+      type: Boolean
+    }
+  },
+  events: {
+    'show-sub-sections': {}
+  }
+};
+
+class ObjectPageAnchorTab extends Tab {
+  static get metadata() {
+    return metadata;
+  }
+
+  static get dependencies() {
+    return [Icon];
+  }
+
+  static get stripTemplate() {
+    return (context, tags, suffix) => {
+      setTags(tags);
+      setSuffix(suffix);
+      return html` <li
+        id="${ifDefined(context._id)}"
+        class="${ifDefined(context.headerClasses)}"
+        tabindex="${ifDefined(context._tabIndex)}"
+        role="tab"
+        aria-posinset="${ifDefined(context._posinset)}"
+        aria-setsize="${ifDefined(context._setsize)}"
+        aria-controls="ui5-tc-contentItem-${ifDefined(context._posinset)}"
+        aria-selected="${ifDefined(context.effectiveSelected)}"
+        aria-disabled="${ifDefined(context.effectiveDisabled)}"
+        ?disabled="${context.effectiveDisabled}"
+        aria-labelledby="${ifDefined(context.ariaLabelledBy)}"
+        data-ui5-stable="${ifDefined(context.stableDomRef)}"
+        style="list-style-type: none;"
+      >
+        <div class="ui5-tab-strip-itemContent">
+          ${context.text
+            ? html`<span
+                class="ui5-tab-strip-itemText"
+                id="${ifDefined(context._id)}-text"
+                ?data-active="${ifDefined(context.withSubSections)}"
+              >
+                ${ifDefined(context.text)}
+              </span>`
+            : undefined}
+          ${context.withSubSections
+            ? html`<ui5-icon
+                name="slim-arrow-down"
+                class="objectPageSubSectionsIcon"
+                interactive
+                @click="${context._handleOnSubSectionsClick}"
+              />`
+            : undefined}
+        </div>
+      </li>`;
+    };
+  }
+
+  _handleOnSubSectionsClick: MouseEventHandler<HTMLElement> = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    this.fireEvent('show-sub-sections', {
+      targetRef: (e.target as any).parentElement.parentElement
+    });
+  };
+
+  // maybe we can look into a custom overflow template as well
+  // static get overflowTemplate() {
+  //   return (context, tags, suffix) => {
+  //     setTags(tags);
+  //     setSuffix(suffix);
+  //     return html`<ui5-li-custom
+  //       id="${ifDefined(context._id)}"
+  //       class="${ifDefined(context.overflowClasses)}"
+  //       type="${ifDefined(context.overflowState)}"
+  //       ?selected="${context.effectiveSelected}"
+  //       ?disabled="${context.effectiveDisabled}"
+  //       aria-disabled="${ifDefined(context.effectiveDisabled)}"
+  //       aria-selected="${ifDefined(context.effectiveSelected)}"
+  //       aria-labelledby="${ifDefined(context.ariaLabelledBy)}"
+  //     >
+  //       <div class="ui5-tab-overflow-itemContent">${ifDefined(context.text)}</div>
+  //     </ui5-li-custom>`;
+  //   };
+  // }
+}
+
+TabContainer.registerTabStyles(`
+
+.ui5-tab-strip-itemContent {
+  display: flex;
+  align-items: center;
+  pointer-events: all;
+}
+
+.objectPageSubSectionsIcon {
+  padding-left: 0.625rem;
+}
+
+.objectPageSubSectionsIcon[interactive]:hover {
+  color: ${ThemingParameters.sapContent_IconColor};
+}
+
+.ui5-tab-strip-itemText[data-active]:hover {
+  color: ${ThemingParameters.sapButton_Lite_Hover_TextColor};
+}
+`);
+// TabContainer.registerStaticAreaTabStyles(overflowCss);
+
+export { ObjectPageAnchorTab };