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

package/custom-elements.json

@@ -48,6 +48,10 @@
         {
           "name": "--uui-tab-group-dropdown-background",
           "description": "Define the background color of the dropdown"
+        },
+        {
+          "name": "--uui-tab-group-gap",
+          "description": "Define the gap between elements dropdown. Only pixel values are valid"
         }
       ]
     },

package/lib/index.js

@@ -3,10 +3,8 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, html, css } from 'lit';
 import { property, query, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { repeat } from 'lit/directives/repeat.js';
-import '@umbraco-ui/uui-button/lib';
-import '@umbraco-ui/uui-popover-container/lib';
-import '@umbraco-ui/uui-symbol-more/lib';
 import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
 
 var __defProp$1 = Object.defineProperty;
@@ -79,7 +77,7 @@ UUITabElement.styles = [
         height: 100%;
         min-height: var(--uui-size-12,36px);
         min-width: 70px;
-        padding: var(--uui-size-2,6px)
+        padding: var(--uui-size-3,9px)
           var(--uui-tab-padding-horizontal, var(--uui-size-5,15px));
         border: none;
         font-size: inherit;
@@ -237,24 +235,27 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _tabElements, _hiddenTabElements, _hiddenTabElementsMap, _visibilityBreakpoints, _resizeObserver, _onResize, onResize_fn, _onSlotChange, onSlotChange_fn, _onTabClicked, _updateCollapsibleTabs, updateCollapsibleTabs_fn, _calculateBreakPoints, calculateBreakPoints_fn, _setTabArray, setTabArray_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, _updateCollapsibleTabs);
     __privateAdd(this, _calculateBreakPoints);
     __privateAdd(this, _setTabArray);
+    __privateAdd(this, _updateCollapsibleTabs);
     __privateAdd(this, _isElementTabLike);
+    /** Stores the current gap used in the breakpoints */
+    __privateAdd(this, _currentGap, 0);
     this.dropdownContentDirection = "vertical";
     __privateAdd(this, _tabElements, []);
     __privateAdd(this, _hiddenTabElements, []);
     __privateAdd(this, _hiddenTabElementsMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _visibilityBreakpoints, []);
-    __privateAdd(this, _resizeObserver, new ResizeObserver(
-      __privateMethod(this, _onResize, onResize_fn).bind(this)
-    ));
+    __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)) {
@@ -281,6 +282,9 @@ 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");
@@ -288,18 +292,23 @@ let UUITabGroupElement = class extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver).unobserve(this);
+    __privateMethod(this, _cleanupTabs, cleanupTabs_fn).call(this);
   }
   render() {
     return html`
-      <slot @slotchange=${__privateMethod(this, _onSlotChange, onSlotChange_fn)}></slot>
-      <uui-button
-        popovertarget="popover-container"
-        style="display: none"
-        id="more-button"
-        label="More"
-        compact>
-        <uui-symbol-more></uui-symbol-more>
-      </uui-button>
+      <div id="main">
+        <div id="grid">
+          <slot @slotchange=${__privateMethod(this, _onSlotChange, onSlotChange_fn)}></slot>
+        </div>
+        <uui-button
+          popovertarget="popover-container"
+          style="display: none"
+          id="more-button"
+          label="More"
+          compact>
+          <uui-symbol-more></uui-symbol-more>
+        </uui-button>
+      </div>
       <uui-popover-container
         id="popover-container"
         popover
@@ -311,45 +320,94 @@ let UUITabGroupElement = class extends LitElement {
     `;
   }
 };
+_currentGap = new WeakMap();
 _tabElements = new WeakMap();
 _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) {
-  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, entries[0].contentBoxSize[0].inlineSize);
+  const gapCSSVar = Number.parseFloat(
+    this.style.getPropertyValue("--uui-tab-group-gap")
+  );
+  const newGap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;
+  if (newGap !== __privateGet(this, _currentGap)) {
+    __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).call(this);
+  } else {
+    __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")
+  );
+  const gap = Number.isNaN(gapCSSVar) ? 0 : gapCSSVar;
+  __privateSet(this, _currentGap, gap);
+  let childrenWidth = 0;
+  for (let i = 0; i < __privateGet(this, _tabElements).length; i++) {
+    __privateGet(this, _tabElements)[i].style.display = "";
+    childrenWidth += __privateGet(this, _tabElements)[i].offsetWidth;
+    __privateGet(this, _visibilityBreakpoints)[i] = childrenWidth;
+    childrenWidth += gap;
+  }
+  const tolerance = 2;
+  this.style.maxWidth = childrenWidth - gap + tolerance + "px";
+  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
+};
+_setTabArray = new WeakSet();
+setTabArray_fn = function() {
+  __privateSet(this, _tabElements, this._slottedNodes ? this._slottedNodes : []);
+  __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).call(this);
+};
 _updateCollapsibleTabs = new WeakSet();
 updateCollapsibleTabs_fn = function(containerWidth) {
-  const buttonWidth = this._moreButtonElement.offsetWidth;
-  const lastBreakpoint = __privateGet(this, _visibilityBreakpoints).slice(-1)[0];
-  if (lastBreakpoint < containerWidth && __privateGet(this, _hiddenTabElements).length === 0)
-    return;
+  const moreButtonWidth = this._moreButtonElement.offsetWidth;
+  const containerWithoutButtonWidth = containerWidth - (moreButtonWidth ? moreButtonWidth : 0);
   __privateGet(this, _hiddenTabElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onTabClicked));
   });
   __privateSet(this, _hiddenTabElements, []);
   __privateGet(this, _hiddenTabElementsMap).clear();
   let hasActiveTabInDropdown = false;
-  for (let i = 0; i < __privateGet(this, _visibilityBreakpoints).length; i++) {
+  const len = __privateGet(this, _visibilityBreakpoints).length;
+  for (let i = 0; i < len; i++) {
     const breakpoint = __privateGet(this, _visibilityBreakpoints)[i];
     const tab = __privateGet(this, _tabElements)[i];
-    const containerWidthButtonWidth = containerWidth - (i !== __privateGet(this, _visibilityBreakpoints).length - 1 ? buttonWidth : 0);
-    if (breakpoint < containerWidthButtonWidth) {
+    if (breakpoint <= (i === len - 1 ? containerWidth : containerWithoutButtonWidth)) {
       tab.style.display = "";
-      this._moreButtonElement.style.display = "none";
     } else {
       const proxyTab = tab.cloneNode(true);
       proxyTab.addEventListener("click", __privateGet(this, _onTabClicked));
@@ -360,50 +418,44 @@ updateCollapsibleTabs_fn = function(containerWidth) {
       __privateGet(this, _hiddenTabElementsMap).set(tab, proxyTab);
       __privateGet(this, _hiddenTabElements).push(proxyTab);
       tab.style.display = "none";
-      this._moreButtonElement.style.display = "";
       if (tab.active) {
         hasActiveTabInDropdown = true;
       }
     }
   }
   if (__privateGet(this, _hiddenTabElements).length === 0) {
+    this._moreButtonElement.style.display = "none";
     this._popoverContainerElement.hidePopover();
+  } else {
+    this._moreButtonElement.style.display = "";
   }
   hasActiveTabInDropdown ? this._moreButtonElement.classList.add("active-inside") : this._moreButtonElement.classList.remove("active-inside");
   this.requestUpdate();
 };
-_calculateBreakPoints = new WeakSet();
-calculateBreakPoints_fn = async function() {
-  await this.updateComplete;
-  let childrenWidth = 0;
-  for (let i = 0; i < __privateGet(this, _tabElements).length; i++) {
-    __privateGet(this, _tabElements)[i].style.display = "";
-    childrenWidth += __privateGet(this, _tabElements)[i].offsetWidth;
-    __privateGet(this, _visibilityBreakpoints)[i] = childrenWidth;
-  }
-  const tolerance = 2;
-  this.style.width = childrenWidth + tolerance + "px";
-  __privateMethod(this, _updateCollapsibleTabs, updateCollapsibleTabs_fn).call(this, this.offsetWidth);
-};
-_setTabArray = new WeakSet();
-setTabArray_fn = function() {
-  __privateSet(this, _tabElements, this._slottedNodes ? this._slottedNodes : []);
-  __privateMethod(this, _calculateBreakPoints, calculateBreakPoints_fn).call(this);
-};
 _isElementTabLike = new WeakSet();
 isElementTabLike_fn = function(el) {
-  return el instanceof UUITabElement || "active" in el;
+  return typeof el === "object" && "active" in el && typeof el.active === "boolean";
 };
 UUITabGroupElement.styles = [
   css`
       :host {
+        width: 100%;
+      }
+
+      #main {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      #grid {
+        width: 1fr;
         display: flex;
-        flex-wrap: nowrap;
-        color: var(--uui-tab-text);
         height: 100%;
         min-height: 48px;
         overflow: hidden;
         text-wrap: nowrap;
+        color: var(--uui-tab-text);
+        gap: var(--uui-tab-group-gap, 0);
       }
 
       #popover-container {

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

@@ -1,14 +1,12 @@
 import { LitElement } from 'lit';
-import '@umbraco-ui/uui-button/lib';
-import '@umbraco-ui/uui-popover-container/lib';
-import '@umbraco-ui/uui-symbol-more/lib';
 /**
- *  @element uui-tab-group
- *  @slot - Default slot for the tab group
+ * @element uui-tab-group
+ * @slot - Default slot for the tab group
  * @cssprop --uui-tab-group-dropdown-tab-text - Define the tab text color in the dropdown
  * @cssprop --uui-tab-group-dropdown-tab-text-hover - Define the tab text hover color in the dropdown
  * @cssprop --uui-tab-group-dropdown-tab-text-active - Define the tab text active color in the dropdown
  * @cssprop --uui-tab-group-dropdown-background - Define the background color of the dropdown
+ * @cssprop --uui-tab-group-gap - Define the gap between elements dropdown. Only pixel values are valid
  */
 export declare class UUITabGroupElement extends LitElement {
     #private;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-tabs",
-  "version": "1.6.0-rc.3",
+  "version": "1.6.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,10 +30,10 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0-rc.3",
-    "@umbraco-ui/uui-button": "1.6.0-rc.3",
-    "@umbraco-ui/uui-popover-container": "1.6.0-rc.3",
-    "@umbraco-ui/uui-symbol-more": "1.6.0-rc.3"
+    "@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": "27c5350ac041811e4d24b656030e7dca544caff1"
+  "gitHead": "b06aebbb67ff67c9611a19927ec3ef484edcb1cc"
 }