@umbraco-ui/uui-tabs 1.6.0-rc.4 → 1.6.1

package/lib/index.js

@@ -235,11 +235,13 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _onResize, onResize_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _isElementTabLike, isElementTabLike_fn;
+var _currentGap, _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _tabResizeObservers, _breakPointCalculationInProgress, _initialize, initialize_fn, _onResize, onResize_fn, _cleanupTabs, cleanupTabs_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_fn, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _isElementTabLike, isElementTabLike_fn;
 let UUITabGroupElement = class extends LitElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _initialize);
     __privateAdd(this, _onResize);
+    __privateAdd(this, _cleanupTabs);
     __privateAdd(this, _onSlotChange);
     __privateAdd(this, _calculateBreakPoints);
     __privateAdd(this, _setTabArray);
@@ -253,6 +255,8 @@ let UUITabGroupElement = class extends LitElement {
     __privateAdd(this, _hiddenTabElementsMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _visibilityBreakpoints, []);
     __privateAdd(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _onResize, onResize_fn).bind(this)));
+    __privateAdd(this, _tabResizeObservers, []);
+    __privateAdd(this, _breakPointCalculationInProgress, false);
     __privateAdd(this, _onTabClicked, (e) => {
       const selectedElement = e.currentTarget;
       if (__privateMethod(this, _isElementTabLike, isElementTabLike_fn).call(this, selectedElement)) {
@@ -279,21 +283,19 @@ let UUITabGroupElement = class extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    demandCustomElement(this, "uui-button");
-    demandCustomElement(this, "uui-popover-container");
-    demandCustomElement(this, "uui-symbol-more");
-    __privateGet(this, _resizeObserver).observe(this);
-    if (!this.hasAttribute("role"))
-      this.setAttribute("role", "tablist");
+    __privateMethod(this, _initialize, initialize_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver).unobserve(this);
+    __privateMethod(this, _cleanupTabs, cleanupTabs_fn).call(this);
   }
   render() {
     return html`
       <div id="main">
-        <slot @slotchange=${__privateMethod(this, _onSlotChange, onSlotChange_fn)}></slot>
+        <div id="grid">
+          <slot @slotchange=${__privateMethod(this, _onSlotChange, onSlotChange_fn)}></slot>
+        </div>
         <uui-button
           popovertarget="popover-container"
           style="display: none"
@@ -320,6 +322,18 @@ _hiddenTabElements = new WeakMap();
 _hiddenTabElementsMap = new WeakMap();
 _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
+_tabResizeObservers = new WeakMap();
+_breakPointCalculationInProgress = new WeakMap();
+_initialize = new WeakSet();
+initialize_fn = async function() {
+  demandCustomElement(this, "uui-button");
+  demandCustomElement(this, "uui-popover-container");
+  demandCustomElement(this, "uui-symbol-more");
+  if (!this.hasAttribute("role"))
+    this.setAttribute("role", "tablist");
+  await this.updateComplete;
+  __privateGet(this, _resizeObserver).observe(this._mainElement);
+};
 _onResize = new WeakSet();
 onResize_fn = function(entries) {
   const gapCSSVar = Number.parseFloat(
@@ -332,19 +346,36 @@ onResize_fn = function(entries) {
     __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, entries[0].contentBoxSize[0].inlineSize);
   }
 };
-_onSlotChange = new WeakSet();
-onSlotChange_fn = function() {
+_cleanupTabs = new WeakSet();
+cleanupTabs_fn = function() {
   __privateGet(this, _tabElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onTabClicked));
+    __privateGet(this, _tabResizeObservers).forEach((observer) => observer.disconnect());
   });
+  __privateGet(this, _tabResizeObservers).length = 0;
+};
+_onSlotChange = new WeakSet();
+onSlotChange_fn = function() {
+  __privateMethod(this, _cleanupTabs, cleanupTabs_fn).call(this);
   __privateMethod(this, _setTabArray, setTabArray_fn).call(this);
   __privateGet(this, _tabElements).forEach((el) => {
     el.addEventListener("click", __privateGet(this, _onTabClicked));
+    const observer = new ResizeObserver(
+      __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).bind(this)
+    );
+    observer.observe(el);
+    __privateGet(this, _tabResizeObservers).push(observer);
   });
 };
 _onTabClicked = new WeakMap();
 _calculateBreakPoints = new WeakSet();
 calculateBreakPoints_fn = async function() {
+  if (__privateGet(this, _breakPointCalculationInProgress))
+    return;
+  __privateSet(this, _breakPointCalculationInProgress, true);
+  requestAnimationFrame(() => {
+    __privateSet(this, _breakPointCalculationInProgress, false);
+  });
   await this.updateComplete;
   const gapCSSVar = Number.parseFloat(
     this.style.getPropertyValue("--uui-tab-group-gap")
@@ -359,8 +390,8 @@ calculateBreakPoints_fn = async function() {
     childrenWidth += gap;
   }
   const tolerance = 2;
-  this.style.maxWidth = childrenWidth - gap + tolerance + "px";
-  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
+  this._mainElement.style.width = childrenWidth - gap + tolerance + "px";
+  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this._mainElement.offsetWidth);
 };
 _setTabArray = new WeakSet();
 setTabArray_fn = function() {
@@ -370,7 +401,7 @@ setTabArray_fn = function() {
 _updateCollapsibleTabs = new WeakSet();
 updateCollapsibleTabs_fn = function(containerWidth) {
   const moreButtonWidth = this._moreButtonElement.offsetWidth;
-  const containerWithoutButtonWidth = containerWidth - (moreButtonWidth ? moreButtonWidth + __privateGet(this, _currentGap) : 0);
+  const containerWithoutButtonWidth = containerWidth - (moreButtonWidth ? moreButtonWidth : 0);
   __privateGet(this, _hiddenTabElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onTabClicked));
   });
@@ -414,10 +445,19 @@ isElementTabLike_fn = function(el) {
 UUITabGroupElement.styles = [
   css`
       :host {
-        width: 100%;
+        min-width: 0;
+        display: flex;
+        height: 100%;
       }
 
       #main {
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+      }
+
+      #grid {
+        width: 1fr;
         display: flex;
         height: 100%;
         min-height: 48px;
@@ -495,6 +535,9 @@ __decorateClass([
 __decorateClass([
   query("#popover-container")
 ], UUITabGroupElement.prototype, "_popoverContainerElement", 2);
+__decorateClass([
+  query("#main")
+], UUITabGroupElement.prototype, "_mainElement", 2);
 __decorateClass([
   queryAssignedElements({
     flatten: true,

package/lib/uui-tab-group.element.d.ts

@@ -12,6 +12,7 @@ export declare class UUITabGroupElement extends LitElement {
     #private;
     private _moreButtonElement;
     private _popoverContainerElement;
+    private _mainElement;
     private _slottedNodes?;
     /**
      * Set the flex direction of the content of the dropdown.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.6.0-rc.4",
+  "version": "1.6.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,10 +30,10 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0-rc.4",
-    "@umbraco-ui/uui-button": "1.6.0-rc.4",
-    "@umbraco-ui/uui-popover-container": "1.6.0-rc.4",
-    "@umbraco-ui/uui-symbol-more": "1.6.0-rc.4"
+    "@umbraco-ui/uui-base": "1.6.0",
+    "@umbraco-ui/uui-button": "1.6.0",
+    "@umbraco-ui/uui-popover-container": "1.6.0",
+    "@umbraco-ui/uui-symbol-more": "1.6.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-tabs",
-  "gitHead": "ae00cf3a0d7be2827491b435c1a40f5d7649a504"
+  "gitHead": "a4ae7535264c89cf346311d3d5ec5c888577e256"
 }