@vaadin/side-nav 24.5.0-alpha9 → 24.5.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.5.0-alpha9",
+  "version": "24.5.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,15 +35,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.5.0-alpha9",
-    "@vaadin/component-base": "24.5.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha9",
+    "@vaadin/a11y-base": "24.5.0-beta1",
+    "@vaadin/component-base": "24.5.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.5.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.5.0-alpha9",
+    "@vaadin/chai-plugins": "24.5.0-beta1",
     "@vaadin/testing-helpers": "^1.0.0",
     "lit": "^3.0.0",
     "sinon": "^18.0.0"
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0"
+  "gitHead": "da4b57724d7089e3766d59d01068159322adb2b8"
 }

package/src/location.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright (c) 2023 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Facade for `document.location`, can be stubbed for testing.
+ *
+ * For internal use only.
+ */
+export const location = {
+  get pathname() {
+    return document.location.pathname;
+  },
+  get search() {
+    return document.location.search;
+  },
+};

package/src/vaadin-side-nav-item.d.ts

@@ -93,12 +93,28 @@ declare class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixi
    */
   expanded: boolean;
 
+  /**
+   * Whether to also match nested paths / routes. `false` by default.
+   *
+   * When enabled, an item with the path `/path` is considered current when
+   * the browser URL is `/path`, `/path/child`, `/path/child/grandchild`,
+   * etc.
+   *
+   * Note that this only affects matching of the URLs path, not the base
+   * origin or query parameters.
+   *
+   * @attr {boolean} match-nested
+   */
+  matchNested: boolean;
+
   /**
    * Whether the item's path matches the current browser URL.
    *
    * A match occurs when both share the same base origin (like https://example.com),
-   * the same path (like /path/to/page), and the browser URL contains all
-   * the query parameters with the same values from the item's path.
+   * the same path (like /path/to/page), and the browser URL contains at least
+   * all the query parameters with the same values from the item's path.
+   *
+   * See [`matchNested`](#/elements/vaadin-side-nav-item#property-matchNested) for how to change the path matching behavior.
    *
    * The state is updated when the item is added to the DOM or when the browser
    * navigates to a new page.

package/src/vaadin-side-nav-item.js

@@ -12,6 +12,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { matchPaths } from '@vaadin/component-base/src/url-utils.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { location } from './location.js';
 import { sideNavItemBaseStyles } from './vaadin-side-nav-base-styles.js';
 import { SideNavChildrenMixin } from './vaadin-side-nav-children-mixin.js';
 
@@ -114,6 +115,24 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
         reflectToAttribute: true,
       },
 
+      /**
+       * Whether to also match nested paths / routes. `false` by default.
+       *
+       * When enabled, an item with the path `/path` is considered current when
+       * the browser URL is `/path`, `/path/child`, `/path/child/grandchild`,
+       * etc.
+       *
+       * Note that this only affects matching of the URLs path, not the base
+       * origin or query parameters.
+       *
+       * @type {boolean}
+       * @attr {boolean} match-nested
+       */
+      matchNested: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * Whether the item's path matches the current browser URL.
        *
@@ -121,6 +140,8 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
        * the same path (like /path/to/page), and the browser URL contains at least
        * all the query parameters with the same values from the item's path.
        *
+       * See [`matchNested`](#/elements/vaadin-side-nav-item#property-matchNested) for how to change the path matching behavior.
+       *
        * The state is updated when the item is added to the DOM or when the browser
        * navigates to a new page.
        *
@@ -190,7 +211,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
   updated(props) {
     super.updated(props);
 
-    if (props.has('path') || props.has('pathAliases')) {
+    if (props.has('path') || props.has('pathAliases') || props.has('matchNested')) {
       this.__updateCurrent();
     }
 
@@ -304,8 +325,12 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
       return false;
     }
 
-    const browserPath = `${document.location.pathname}${document.location.search}`;
-    return matchPaths(browserPath, this.path) || this.pathAliases.some((alias) => matchPaths(browserPath, alias));
+    const browserPath = `${location.pathname}${location.search}`;
+    const matchOptions = { matchNested: this.matchNested };
+    return (
+      matchPaths(browserPath, this.path, matchOptions) ||
+      this.pathAliases.some((alias) => matchPaths(browserPath, alias, matchOptions))
+    );
   }
 }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.5.0-alpha9",
+  "version": "24.5.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -41,6 +41,15 @@
                 ]
               }
             },
+            {
+              "name": "match-nested",
+              "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "target",
               "description": "The target of the link. Works only when `path` is set.",
@@ -124,6 +133,15 @@
                   ]
                 }
               },
+              {
+                "name": "matchNested",
+                "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "target",
                 "description": "The target of the link. Works only when `path` is set.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.5.0-alpha9",
+  "version": "24.5.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -33,6 +33,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?matchNested",
+              "description": "Whether to also match nested paths / routes. `false` by default.\n\nWhen enabled, an item with the path `/path` is considered current when\nthe browser URL is `/path`, `/path/child`, `/path/child/grandchild`,\netc.\n\nNote that this only affects matching of the URLs path, not the base\norigin or query parameters.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?routerIgnore",
               "description": "Whether to exclude the item from client-side routing. When enabled,\nthis causes the item to behave like a regular anchor, causing a full\npage reload. This only works with supported routers, such as the one\nprovided in Vaadin apps, or when using the side nav `onNavigate` hook.",