Refactor Tab component

src/components/common/controllers/resize-observer.ts

@@ -0,0 +1,91 @@
+import {
+  type ReactiveController,
+  type ReactiveControllerHost,
+  isServer,
+} from 'lit';
+
+type ResizeControllerCallback = (
+  ...args: Parameters<ResizeObserverCallback>
+) => unknown;
+
+/** Configuration for initializing a resize controller. */
+export interface ResizeControllerConfig {
+  /** The callback function to run when a resize mutation is triggered. */
+  callback: ResizeControllerCallback;
+  /** Configuration options passed to the underlying ResizeObserver. */
+  options?: ResizeObserverOptions;
+  /**
+   * The initial target element to observe for resize mutations.
+   *
+   * If not provided, the host element will be set as initial target.
+   * Pass in `null` to skip setting an initial target.
+   */
+  target?: Element | null;
+}
+
+class ResizeController implements ReactiveController {
+  private _host: ReactiveControllerHost & Element;
+  private _targets = new Set<Element>();
+  private _config: ResizeControllerConfig;
+  private _observer!: ResizeObserver;
+
+  constructor(
+    host: ReactiveControllerHost & Element,
+    config: ResizeControllerConfig
+  ) {
+    this._host = host;
+    this._config = config;
+
+    if (this._config.target !== null) {
+      this._targets.add(this._config.target ?? host);
+    }
+
+    if (isServer) {
+      return;
+    }
+
+    this._observer = new ResizeObserver((entries) =>
+      this._config.callback.call(this._host, entries, this._observer)
+    );
+
+    host.addController(this);
+  }
+
+  /** Starts observing the `targe` element. */
+  public observe(target: Element): void {
+    this._targets.add(target);
+    this._observer.observe(target, this._config.options);
+    this._host.requestUpdate();
+  }
+
+  /** Stops observing the `target` element. */
+  public unobserve(target: Element): void {
+    this._targets.delete(target);
+    this._observer.unobserve(target);
+  }
+
+  public hostConnected(): void {
+    for (const target of this._targets) {
+      this.observe(target);
+    }
+  }
+
+  public hostDisconnected(): void {
+    this.disconnect();
+  }
+
+  protected disconnect(): void {
+    this._observer.disconnect();
+  }
+}
+
+/**
+ * Creates a new resize controller bound to the given `host`
+ * with {@link ResizeControllerConfig | `config`}.
+ */
+export function createResizeController(
+  host: ReactiveControllerHost & Element,
+  config: ResizeControllerConfig
+) {
+  return new ResizeController(host, config);
+}

src/components/common/definitions/defineAllComponents.ts

@@ -56,7 +56,6 @@ import IgcSliderComponent from '../../slider/slider.js';
 import IgcSnackbarComponent from '../../snackbar/snackbar.js';
 import IgcStepComponent from '../../stepper/step.js';
 import IgcStepperComponent from '../../stepper/stepper.js';
-import IgcTabPanelComponent from '../../tabs/tab-panel.js';
 import IgcTabComponent from '../../tabs/tab.js';
 import IgcTabsComponent from '../../tabs/tabs.js';
 import IgcTextareaComponent from '../../textarea/textarea.js';
@@ -123,7 +122,6 @@ const allComponents: IgniteComponent[] = [
   IgcRangeSliderComponent,
   IgcTabsComponent,
   IgcTabComponent,
-  IgcTabPanelComponent,
   IgcCircularProgressComponent,
   IgcLinearProgressComponent,
   IgcCircularGradientComponent,

src/components/common/util.ts

@@ -27,34 +27,6 @@ export function sameObject(a: object, b: object) {
   return JSON.stringify(a) === JSON.stringify(b);
 }
 
-/**
- *
- * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
- * parent doesn't have to be positioned relative or absolute.
- *
- * Work around for the following issues in Chromium based browsers:
- *
- * https://bugs.chromium.org/p/chromium/issues/detail?id=1330819
- * https://bugs.chromium.org/p/chromium/issues/detail?id=1334556
- *
- */
-export function getOffset(element: HTMLElement, parent: HTMLElement) {
-  const { top, left, bottom, right } = element.getBoundingClientRect();
-  const {
-    top: pTop,
-    left: pLeft,
-    bottom: pBottom,
-    right: pRight,
-  } = parent.getBoundingClientRect();
-
-  return {
-    top: Math.round(top - pTop),
-    left: Math.round(left - pLeft),
-    right: Math.round(right - pRight),
-    bottom: Math.round(bottom - pBottom),
-  };
-}
-
 export function createCounter() {
   let i = 0;
   return () => {
@@ -283,3 +255,23 @@ export function isEmpty<T, U extends string>(
 ): boolean {
   return 'length' in x ? x.length < 1 : x.size < 1;
 }
+
+export function scrollIntoView(
+  element?: HTMLElement,
+  config?: ScrollIntoViewOptions
+): void {
+  if (!element) {
+    return;
+  }
+
+  element.scrollIntoView(
+    Object.assign(
+      {
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest',
+      },
+      config
+    )
+  );
+}

src/components/tabs/tab.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -13,13 +13,16 @@ import { styles } from './themes/tab.base.css.js';
  *
  * @element igc-tab
  *
- * @slot prefix - Renders before the tab header content.
- * @slot - Renders the tab header content.
- * @slot suffix - Renders after the tab header content.
+ * @slot - Renders the tab's content.
+ * @slot label - Renders the tab header's label.
+ * @slot prefix - Renders the tab header's prefix.
+ * @slot suffix - Renders the tab header's suffix.
  *
- * @csspart content - The content wrapper.
- * @csspart prefix - The prefix wrapper.
- * @csspart suffix - The suffix wrapper.
+ * @csspart tab-header - The header of a single tab.
+ * @csspart prefix - Tab header's label prefix.
+ * @csspart content - Tab header's label slot container.
+ * @csspart suffix - Tab header's label suffix.
+ * @csspart tab-body - Holds the body content of a single tab, only the body of the selected tab is visible.
  */
 
 @themes(all)
@@ -32,17 +35,14 @@ export default class IgcTabComponent extends LitElement {
     registerComponent(IgcTabComponent);
   }
 
-  private static readonly increment = createCounter();
-
-  @query('[part="base"]', true)
-  private tab!: HTMLElement;
+  private static increment = createCounter();
 
   /**
-   * The id of the tab panel which will be controlled by the tab.
+   * The tab item label.
    * @attr
    */
   @property()
-  public panel = '';
+  public label = '';
 
   /**
    * Determines whether the tab is selected.
@@ -60,34 +60,39 @@ export default class IgcTabComponent extends LitElement {
 
   public override connectedCallback(): void {
     super.connectedCallback();
-    this.id =
-      this.getAttribute('id') || `igc-tab-${IgcTabComponent.increment()}`;
-  }
-
-  /** Sets focus to the tab. */
-  public override focus(options?: FocusOptions) {
-    this.tab.focus(options);
-  }
-
-  /** Removes focus from the tab. */
-  public override blur() {
-    this.tab.blur();
+    this.id = this.id || `igc-tab-${IgcTabComponent.increment()}`;
   }
 
   protected override render() {
+    const headerId = `${this.id}-header`;
+    const contentId = `${this.id}-content`;
+
     return html`
       <div
-        part="base"
+        part="tab-header"
         role="tab"
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        aria-selected=${this.selected ? 'true' : 'false'}
-        tabindex=${this.disabled || !this.selected ? -1 : 0}
+        id=${headerId}
+        aria-disabled=${this.disabled}
+        aria-selected=${this.selected}
+        aria-controls=${contentId}
+        tabindex=${this.selected ? 0 : -1}
       >
-        <slot name="prefix" part="prefix"></slot>
-        <div part="content">
-          <slot></slot>
+        <div part="base">
+          <slot name="prefix" part="prefix"></slot>
+          <div part="content">
+            <slot name="label">${this.label}</slot>
+          </div>
+          <slot name="suffix" part="suffix"></slot>
         </div>
-        <slot name="suffix" part="suffix"></slot>
+      </div>
+      <div
+        part="tab-body"
+        role="tabpanel"
+        id=${contentId}
+        aria-labelledby=${headerId}
+        .inert=${!this.selected}
+      >
+        <slot></slot>
       </div>
     `;
   }