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

package/lib/index.js

@@ -235,11 +235,12 @@ 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, _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, _onResize);
+    __privateAdd(this, _cleanupTabs);
     __privateAdd(this, _onSlotChange);
     __privateAdd(this, _calculateBreakPoints);
     __privateAdd(this, _setTabArray);
@@ -253,6 +254,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)) {
@@ -289,11 +292,14 @@ let UUITabGroupElement = class extends LitElement {
   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 +326,8 @@ _hiddenTabElements = new WeakMap();
 _hiddenTabElementsMap = new WeakMap();
 _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
+_tabResizeObservers = new WeakMap();
+_breakPointCalculationInProgress = new WeakMap();
 _onResize = new WeakSet();
 onResize_fn = function(entries) {
   const gapCSSVar = Number.parseFloat(
@@ -332,19 +340,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")
@@ -370,7 +395,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));
   });
@@ -418,6 +443,12 @@ UUITabGroupElement.styles = [
       }
 
       #main {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      #grid {
+        width: 1fr;
         display: flex;
         height: 100%;
         min-height: 48px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.6.0-rc.4",
+  "version": "1.6.0",
   "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": "b06aebbb67ff67c9611a19927ec3ef484edcb1cc"
 }