@instructure/ui-side-nav-bar 11.7.4-snapshot-135 → 11.7.4-snapshot-142

package/CHANGELOG.md

@@ -3,11 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-135](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-135) (2026-07-24)
+## [11.7.4-snapshot-142](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-142) (2026-07-24)
 
 
 ### Bug Fixes
 
+* **many:** do not allow javascript: and data: hrefs ([4a0ac03](https://github.com/instructure/instructure-ui/commit/4a0ac038c6a4102646e04d27c1c3251f97367822))
 * **ui-side-nav-bar:** show focus ring on selected item ([0dad569](https://github.com/instructure/instructure-ui/commit/0dad569e2d8e60481465893938ed93121c6d4d08))
 
 

package/es/SideNavBar/v1/SideNavBarItem/index.js

@@ -25,6 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { omitProps, getElementType } from '@instructure/ui-react-utils';
+import { safeLinkProps } from '@instructure/ui-utils';
 import { Tooltip } from '@instructure/ui-tooltip/v11_6';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { withStyle } from '@instructure/emotion';
@@ -71,15 +72,26 @@ let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
   renderLink(addRef) {
     const ElementType = getElementType(SideNavBarItem, this.props);
     const {
-      href,
+      href: rawHref,
       onClick,
       icon,
       label
     } = this.props;
+    const {
+      href,
+      rel
+    } = safeLinkProps({
+      attr: 'href',
+      tag: typeof ElementType === 'string' ? ElementType : 'a',
+      href: rawHref,
+      target: this.props.target,
+      rel: this.props.rel
+    });
     const props = omitProps(this.props, SideNavBarItem.allowedProps);
     return _jsxs(ElementType, {
       ...props,
       href: href,
+      rel: rel,
       onClick: onClick,
       ref: addRef ? this.handleRef : undefined,
       css: this.props.styles?.navigationItem,

package/es/SideNavBar/v2/SideNavBarItem/index.js

@@ -25,6 +25,7 @@ var _dec, _class;
 
 import { Component } from 'react';
 import { omitProps, getElementType } from '@instructure/ui-react-utils';
+import { safeLinkProps } from '@instructure/ui-utils';
 import { Tooltip } from '@instructure/ui-tooltip/latest';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { withStyleNew } from '@instructure/emotion';
@@ -71,15 +72,26 @@ let SideNavBarItem = (_dec = withStyleNew(generateStyle, 'SideNavBarItem'), _dec
   renderLink(addRef) {
     const ElementType = getElementType(SideNavBarItem, this.props);
     const {
-      href,
+      href: rawHref,
       onClick,
       icon,
       label
     } = this.props;
+    const {
+      href,
+      rel
+    } = safeLinkProps({
+      attr: 'href',
+      tag: typeof ElementType === 'string' ? ElementType : 'a',
+      href: rawHref,
+      target: this.props.target,
+      rel: this.props.rel
+    });
     const props = omitProps(this.props, SideNavBarItem.allowedProps);
     return _jsxs(ElementType, {
       ...props,
       href: href,
+      rel: rel,
       onClick: onClick,
       ref: addRef ? this.handleRef : undefined,
       css: this.props.styles?.navigationItem,

package/lib/SideNavBar/v1/SideNavBarItem/index.js

@@ -8,6 +8,7 @@ exports.default = exports.SideNavBarItem = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
 var _v11_ = require("@instructure/ui-tooltip/v11_6");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _emotion = require("@instructure/emotion");
@@ -77,15 +78,26 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
   renderLink(addRef) {
     const ElementType = (0, _getElementType.getElementType)(SideNavBarItem, this.props);
     const {
-      href,
+      href: rawHref,
       onClick,
       icon,
       label
     } = this.props;
+    const {
+      href,
+      rel
+    } = (0, _safeLinkProps.safeLinkProps)({
+      attr: 'href',
+      tag: typeof ElementType === 'string' ? ElementType : 'a',
+      href: rawHref,
+      target: this.props.target,
+      rel: this.props.rel
+    });
     const props = (0, _omitProps.omitProps)(this.props, SideNavBarItem.allowedProps);
     return (0, _jsxRuntime.jsxs)(ElementType, {
       ...props,
       href: href,
+      rel: rel,
       onClick: onClick,
       ref: addRef ? this.handleRef : undefined,
       css: this.props.styles?.navigationItem,

package/lib/SideNavBar/v2/SideNavBarItem/index.js

@@ -8,6 +8,7 @@ exports.default = exports.SideNavBarItem = void 0;
 var _react = require("react");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _getElementType = require("@instructure/ui-react-utils/lib/getElementType.js");
+var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
 var _latest = require("@instructure/ui-tooltip/latest");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _emotion = require("@instructure/emotion");
@@ -77,15 +78,26 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyleNew)
   renderLink(addRef) {
     const ElementType = (0, _getElementType.getElementType)(SideNavBarItem, this.props);
     const {
-      href,
+      href: rawHref,
       onClick,
       icon,
       label
     } = this.props;
+    const {
+      href,
+      rel
+    } = (0, _safeLinkProps.safeLinkProps)({
+      attr: 'href',
+      tag: typeof ElementType === 'string' ? ElementType : 'a',
+      href: rawHref,
+      target: this.props.target,
+      rel: this.props.rel
+    });
     const props = (0, _omitProps.omitProps)(this.props, SideNavBarItem.allowedProps);
     return (0, _jsxRuntime.jsxs)(ElementType, {
       ...props,
       href: href,
+      rel: rel,
       onClick: onClick,
       ref: addRef ? this.handleRef : undefined,
       css: this.props.styles?.navigationItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-side-nav-bar",
-  "version": "11.7.4-snapshot-135",
+  "version": "11.7.4-snapshot-142",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,25 +15,26 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.4-snapshot-135",
-    "@instructure/debounce": "11.7.4-snapshot-135",
-    "@instructure/shared-types": "11.7.4-snapshot-135",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-135",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-badge": "11.7.4-snapshot-135",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-themes": "11.7.4-snapshot-135",
-    "@instructure/ui-tooltip": "11.7.4-snapshot-135",
-    "@instructure/ui-icons": "11.7.4-snapshot-135"
+    "@instructure/debounce": "11.7.4-snapshot-142",
+    "@instructure/shared-types": "11.7.4-snapshot-142",
+    "@instructure/emotion": "11.7.4-snapshot-142",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-badge": "11.7.4-snapshot-142",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-142",
+    "@instructure/ui-icons": "11.7.4-snapshot-142",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-themes": "11.7.4-snapshot-142",
+    "@instructure/ui-tooltip": "11.7.4-snapshot-142",
+    "@instructure/ui-utils": "11.7.4-snapshot-142"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-135",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-135",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-135"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-142",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-142",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-142"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/SideNavBar/v1/SideNavBarItem/index.tsx

@@ -25,6 +25,7 @@
 import { Component } from 'react'
 
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
+import { safeLinkProps } from '@instructure/ui-utils'
 import { Tooltip } from '@instructure/ui-tooltip/v11_6'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { withStyle } from '@instructure/emotion'
@@ -74,7 +75,14 @@ class SideNavBarItem extends Component<SideNavBarItemProps> {
   renderLink(addRef: boolean) {
     const ElementType = getElementType(SideNavBarItem, this.props)
 
-    const { href, onClick, icon, label } = this.props
+    const { href: rawHref, onClick, icon, label } = this.props
+    const { href, rel } = safeLinkProps({
+      attr: 'href',
+      tag: typeof ElementType === 'string' ? ElementType : 'a',
+      href: rawHref,
+      target: (this.props as { target?: string }).target,
+      rel: (this.props as { rel?: string }).rel
+    })
 
     const props = omitProps(this.props, SideNavBarItem.allowedProps)
 
@@ -82,6 +90,7 @@ class SideNavBarItem extends Component<SideNavBarItemProps> {
       <ElementType
         {...props}
         href={href}
+        rel={rel}
         onClick={onClick}
         ref={addRef ? this.handleRef : undefined}
         css={this.props.styles?.navigationItem}

package/src/SideNavBar/v2/SideNavBarItem/index.tsx

@@ -25,6 +25,7 @@
 import { Component } from 'react'
 
 import { omitProps, getElementType } from '@instructure/ui-react-utils'
+import { safeLinkProps } from '@instructure/ui-utils'
 import { Tooltip } from '@instructure/ui-tooltip/latest'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { withStyleNew } from '@instructure/emotion'
@@ -74,7 +75,14 @@ class SideNavBarItem extends Component<SideNavBarItemProps> {
   renderLink(addRef: boolean) {
     const ElementType = getElementType(SideNavBarItem, this.props)
 
-    const { href, onClick, icon, label } = this.props
+    const { href: rawHref, onClick, icon, label } = this.props
+    const { href, rel } = safeLinkProps({
+      attr: 'href',
+      tag: typeof ElementType === 'string' ? ElementType : 'a',
+      href: rawHref,
+      target: (this.props as { target?: string }).target,
+      rel: (this.props as { rel?: string }).rel
+    })
 
     const props = omitProps(this.props, SideNavBarItem.allowedProps)
 
@@ -82,6 +90,7 @@ class SideNavBarItem extends Component<SideNavBarItemProps> {
       <ElementType
         {...props}
         href={href}
+        rel={rel}
         onClick={onClick}
         ref={addRef ? this.handleRef : undefined}
         css={this.props.styles?.navigationItem}

package/tsconfig.build.json

@@ -19,6 +19,7 @@
     { "path": "../ui-badge/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-tooltip/tsconfig.build.json" }
+    { "path": "../ui-tooltip/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" }
   ]
 }