@vaadin/tabsheet - npm Package Compare versions

Comparing version 24.4.0-dev.b3e1d14600 to 24.4.0-rc1

package.json

 {
   "name": "@vaadin/tabsheet",
-  "version": "24.4.0-dev.b3e1d14600",
+  "version": "24.4.0-rc1",
   "publishConfig": {
@@ -40,8 +40,8 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/scroller": "24.4.0-dev.b3e1d14600",
-    "@vaadin/tabs": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600"
+    "@vaadin/component-base": "24.4.0-rc1",
+    "@vaadin/scroller": "24.4.0-rc1",
+    "@vaadin/tabs": "24.4.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.4.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-rc1"
   },
@@ -57,3 +57,3 @@ "devDependencies": {
   ],
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "a81e3b927d44c56613fa4e1307494a2acc81005f"
 }

README.md

@@ -8,3 +8,2 @@ # @vaadin/tabsheet
 [![npm version](https://badgen.net/npm/v/@vaadin/tabsheet)](https://www.npmjs.com/package/@vaadin/tabsheet)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
@@ -11,0 +10,0 @@ ```html

src/vaadin-tabsheet-mixin.d.ts

 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-tabsheet-mixin.js

 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -21,2 +21,13 @@ */
     this.__tabsSelectedChangedListener = this.__tabsSelectedChangedListener.bind(this);
+    this.__tabIdObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        const tab = mutation.target;
+
+        host.__linkTabAndPanel(tab);
+
+        if (tab.selected) {
+          host.__togglePanels(tab);
+        }
+      });
+    });
   }
@@ -26,3 +37,10 @@
   __tabsItemsChangedListener() {
-    this.host._setItems(this.tabs.items);
+    this.__tabIdObserver.disconnect();
+    const items = this.tabs.items || [];
+    items.forEach((tab) => {
+      this.__tabIdObserver.observe(tab, {
+        attributeFilter: ['id'],
+      });
+    });
+    this.host._setItems(items);
   }
@@ -147,11 +165,3 @@
       items.forEach((tabItem) => {
-        const panel = panels.find((panel) => panel.getAttribute('tab') === tabItem.id);
-        if (panel) {
-          panel.role = 'tabpanel';
-          if (!panel.id) {
-            panel.id = `tabsheet-panel-${generateUniqueId()}`;
-          }
-          panel.setAttribute('aria-labelledby', tabItem.id);
-          tabItem.setAttribute('aria-controls', panel.id);
-        }
+        this.__linkTabAndPanel(tabItem, panels);
       });
@@ -168,6 +178,10 @@ }
       }
-      const content = this.shadowRoot.querySelector('[part="content"]');
-      const selectedTab = items[selected];
+      this.__togglePanels(items[selected], panels);
+    }
+
+    /** @private */
+    __togglePanels(selectedTab, panels = this.__panels) {
       const selectedTabId = selectedTab ? selectedTab.id : '';
       const selectedPanel = panels.find((panel) => panel.getAttribute('tab') === selectedTabId);
+      const content = this.shadowRoot.querySelector('[part="content"]');
 
@@ -190,2 +204,15 @@ // Mark loading state if a selected panel is not found.
     }
+
+    /** @private */
+    __linkTabAndPanel(tab, panels = this.__panels) {
+      const panel = panels.find((panel) => panel.getAttribute('tab') === tab.id);
+      if (panel) {
+        panel.role = 'tabpanel';
+        if (!panel.id) {
+          panel.id = `tabsheet-panel-${generateUniqueId()}`;
+        }
+        panel.setAttribute('aria-labelledby', tab.id);
+        tab.setAttribute('aria-controls', panel.id);
+      }
+    }
   };

src/vaadin-tabsheet-scroller.js

 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-tabsheet.d.ts

 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

src/vaadin-tabsheet.js

 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
@@ -5,0 +5,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38248

increased by20.56%

Number of package files

20

increased by42.86%

Lines of code

647

increased by32.04%

Worsened metrics

Number of lines in readme file

72

decreased by-1.37%

Dependency changes

• + Added@vaadin/a11y-base@24.4.0-rc1(transitive)

• + Added@vaadin/component-base@24.4.0-rc1(transitive)

• + Added@vaadin/icon@24.4.0-rc1(transitive)

• + Added@vaadin/item@24.4.0-rc1(transitive)

• + Added@vaadin/scroller@24.4.0-rc1(transitive)

• + Added@vaadin/tabs@24.4.0-rc1(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.4.0-rc1(transitive)

• + Added@vaadin/vaadin-material-styles@24.4.0-rc1(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.4.0-rc1(transitive)

• - Removed@vaadin/a11y-base@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/component-base@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/icon@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/item@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/scroller@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/tabs@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/vaadin-material-styles@24.4.0-dev.b3e1d14600(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.4.0-dev.b3e1d14600(transitive)

• Updated@vaadin/component-base@24.4.0-rc1

• Updated@vaadin/scroller@24.4.0-rc1

• Updated@vaadin/tabs@24.4.0-rc1

• Updated@vaadin/vaadin-lumo-styles@24.4.0-rc1

• Updated@vaadin/vaadin-material-styles@24.4.0-rc1

• Updated@vaadin/vaadin-themable-mixin@24.4.0-rc1