@instructure/ui-side-nav-bar 11.7.8 → 11.7.9-snapshot-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-side-nav-bar
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-side-nav-bar
|
|
@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.SideNavBarItem = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
12
11
|
var _v11_ = require("@instructure/ui-tooltip/v11_6");
|
|
13
|
-
var
|
|
12
|
+
var _uiA11yUtils = require("@instructure/ui-a11y-utils");
|
|
14
13
|
var _emotion = require("@instructure/emotion");
|
|
15
14
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
15
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -76,7 +75,7 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
|
|
|
76
75
|
});
|
|
77
76
|
}
|
|
78
77
|
renderLink(addRef) {
|
|
79
|
-
const ElementType = (0,
|
|
78
|
+
const ElementType = (0, _uiReactUtils.getElementType)(SideNavBarItem, this.props);
|
|
80
79
|
const {
|
|
81
80
|
href: rawHref,
|
|
82
81
|
onClick,
|
|
@@ -86,14 +85,14 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
|
|
|
86
85
|
const {
|
|
87
86
|
href,
|
|
88
87
|
rel
|
|
89
|
-
} = (0,
|
|
88
|
+
} = (0, _uiUtils.safeLinkProps)({
|
|
90
89
|
attr: 'href',
|
|
91
90
|
tag: typeof ElementType === 'string' ? ElementType : 'a',
|
|
92
91
|
href: rawHref,
|
|
93
92
|
target: this.props.target,
|
|
94
93
|
rel: this.props.rel
|
|
95
94
|
});
|
|
96
|
-
const props = (0,
|
|
95
|
+
const props = (0, _uiReactUtils.omitProps)(this.props, SideNavBarItem.allowedProps);
|
|
97
96
|
return (0, _jsxRuntime.jsxs)(ElementType, {
|
|
98
97
|
...props,
|
|
99
98
|
href: href,
|
|
@@ -117,7 +116,7 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyle)(_s
|
|
|
117
116
|
minimized,
|
|
118
117
|
label
|
|
119
118
|
} = this.props;
|
|
120
|
-
const hasTooltip = minimized && (0,
|
|
119
|
+
const hasTooltip = minimized && (0, _uiA11yUtils.hasVisibleChildren)(label);
|
|
121
120
|
const link = this.renderLink(!hasTooltip);
|
|
122
121
|
return hasTooltip ? (0, _jsxRuntime.jsx)(_v11_.Tooltip, {
|
|
123
122
|
renderTip: label,
|
|
@@ -13,10 +13,9 @@ Object.defineProperty(exports, "SideNavBarItem", {
|
|
|
13
13
|
});
|
|
14
14
|
exports.default = void 0;
|
|
15
15
|
var _react = require("react");
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
|
16
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
17
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
18
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
20
19
|
var _emotion = require("@instructure/emotion");
|
|
21
20
|
var _index = require("./SideNavBarItem/index.js");
|
|
22
21
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -106,7 +105,7 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
106
105
|
renderChildren() {
|
|
107
106
|
return _react.Children.map(this.props.children, child => {
|
|
108
107
|
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return null;
|
|
109
|
-
const navItem = (0,
|
|
108
|
+
const navItem = (0, _uiReactUtils.safeCloneElement)(child, {
|
|
110
109
|
minimized: this.state.minimized
|
|
111
110
|
});
|
|
112
111
|
return (0, _jsxRuntime.jsx)("li", {
|
|
@@ -122,7 +121,7 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
122
121
|
const {
|
|
123
122
|
label
|
|
124
123
|
} = this.props;
|
|
125
|
-
const props = (0,
|
|
124
|
+
const props = (0, _uiReactUtils.omitProps)(this.props, SideNavBar.allowedProps, ['minimized']);
|
|
126
125
|
return (0, _jsxRuntime.jsxs)("nav", {
|
|
127
126
|
...props,
|
|
128
127
|
css: this.props.styles?.navigation,
|
|
@@ -137,11 +136,11 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
137
136
|
}), (0, _jsxRuntime.jsx)(_index.SideNavBarItem, {
|
|
138
137
|
"aria-expanded": !this.minimized,
|
|
139
138
|
onClick: this.handleNavToggle,
|
|
140
|
-
icon: (0, _jsxRuntime.jsx)(
|
|
139
|
+
icon: (0, _jsxRuntime.jsx)(_uiIcons.IconMoveStartLine, {
|
|
141
140
|
css: this.props.styles?.toggleIcon,
|
|
142
141
|
inline: false
|
|
143
142
|
}),
|
|
144
|
-
label: (0, _jsxRuntime.jsx)(
|
|
143
|
+
label: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
|
|
145
144
|
children: this.toggleMessage()
|
|
146
145
|
})
|
|
147
146
|
})]
|
|
@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.SideNavBarItem = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
12
11
|
var _latest = require("@instructure/ui-tooltip/latest");
|
|
13
|
-
var
|
|
12
|
+
var _uiA11yUtils = require("@instructure/ui-a11y-utils");
|
|
14
13
|
var _emotion = require("@instructure/emotion");
|
|
15
14
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
15
|
var _props = require("./props.js");
|
|
@@ -76,7 +75,7 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyleNew)
|
|
|
76
75
|
});
|
|
77
76
|
}
|
|
78
77
|
renderLink(addRef) {
|
|
79
|
-
const ElementType = (0,
|
|
78
|
+
const ElementType = (0, _uiReactUtils.getElementType)(SideNavBarItem, this.props);
|
|
80
79
|
const {
|
|
81
80
|
href: rawHref,
|
|
82
81
|
onClick,
|
|
@@ -86,14 +85,14 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyleNew)
|
|
|
86
85
|
const {
|
|
87
86
|
href,
|
|
88
87
|
rel
|
|
89
|
-
} = (0,
|
|
88
|
+
} = (0, _uiUtils.safeLinkProps)({
|
|
90
89
|
attr: 'href',
|
|
91
90
|
tag: typeof ElementType === 'string' ? ElementType : 'a',
|
|
92
91
|
href: rawHref,
|
|
93
92
|
target: this.props.target,
|
|
94
93
|
rel: this.props.rel
|
|
95
94
|
});
|
|
96
|
-
const props = (0,
|
|
95
|
+
const props = (0, _uiReactUtils.omitProps)(this.props, SideNavBarItem.allowedProps);
|
|
97
96
|
return (0, _jsxRuntime.jsxs)(ElementType, {
|
|
98
97
|
...props,
|
|
99
98
|
href: href,
|
|
@@ -117,7 +116,7 @@ let SideNavBarItem = exports.SideNavBarItem = (_dec = (0, _emotion.withStyleNew)
|
|
|
117
116
|
minimized,
|
|
118
117
|
label
|
|
119
118
|
} = this.props;
|
|
120
|
-
const hasTooltip = minimized && (0,
|
|
119
|
+
const hasTooltip = minimized && (0, _uiA11yUtils.hasVisibleChildren)(label);
|
|
121
120
|
const link = this.renderLink(!hasTooltip);
|
|
122
121
|
return hasTooltip ? (0, _jsxRuntime.jsx)(_latest.Tooltip, {
|
|
123
122
|
renderTip: label,
|
|
@@ -13,10 +13,9 @@ Object.defineProperty(exports, "SideNavBarItem", {
|
|
|
13
13
|
});
|
|
14
14
|
exports.default = void 0;
|
|
15
15
|
var _react = require("react");
|
|
16
|
-
var
|
|
17
|
-
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
16
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
18
17
|
var _uiIcons = require("@instructure/ui-icons");
|
|
19
|
-
var
|
|
18
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
20
19
|
var _emotion = require("@instructure/emotion");
|
|
21
20
|
var _index = require("./SideNavBarItem/index.js");
|
|
22
21
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -105,7 +104,7 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyleNew)(_styles
|
|
|
105
104
|
renderChildren() {
|
|
106
105
|
return _react.Children.map(this.props.children, child => {
|
|
107
106
|
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) return null;
|
|
108
|
-
const navItem = (0,
|
|
107
|
+
const navItem = (0, _uiReactUtils.safeCloneElement)(child, {
|
|
109
108
|
minimized: this.state.minimized
|
|
110
109
|
});
|
|
111
110
|
return (0, _jsxRuntime.jsx)("li", {
|
|
@@ -126,7 +125,7 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyleNew)(_styles
|
|
|
126
125
|
const {
|
|
127
126
|
label
|
|
128
127
|
} = this.props;
|
|
129
|
-
const props = (0,
|
|
128
|
+
const props = (0, _uiReactUtils.omitProps)(this.props, SideNavBar.allowedProps, ['minimized']);
|
|
130
129
|
return (0, _jsxRuntime.jsxs)("nav", {
|
|
131
130
|
...props,
|
|
132
131
|
css: this.props.styles?.navigation,
|
|
@@ -142,7 +141,7 @@ let SideNavBar = exports.SideNavBar = (_dec = (0, _emotion.withStyleNew)(_styles
|
|
|
142
141
|
"aria-expanded": !this.minimized,
|
|
143
142
|
onClick: this.handleNavToggle,
|
|
144
143
|
icon: this.renderIcon(),
|
|
145
|
-
label: (0, _jsxRuntime.jsx)(
|
|
144
|
+
label: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
|
|
146
145
|
children: this.toggleMessage()
|
|
147
146
|
})
|
|
148
147
|
})]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-side-nav-bar",
|
|
3
|
-
"version": "11.7.
|
|
3
|
+
"version": "11.7.9-snapshot-1",
|
|
4
4
|
"description": "Main and application level navigational components",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -15,23 +15,23 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
|
-
"@instructure/debounce": "11.7.
|
|
19
|
-
"@instructure/shared-types": "11.7.
|
|
20
|
-
"@instructure/
|
|
21
|
-
"@instructure/
|
|
22
|
-
"@instructure/ui-a11y-utils": "11.7.
|
|
23
|
-
"@instructure/ui-badge": "11.7.
|
|
24
|
-
"@instructure/ui-
|
|
25
|
-
"@instructure/ui-
|
|
26
|
-
"@instructure/ui-themes": "11.7.
|
|
27
|
-
"@instructure/ui-
|
|
28
|
-
"@instructure/ui-
|
|
18
|
+
"@instructure/debounce": "11.7.9-snapshot-1",
|
|
19
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/ui-a11y-content": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
22
|
+
"@instructure/ui-a11y-utils": "11.7.9-snapshot-1",
|
|
23
|
+
"@instructure/ui-badge": "11.7.9-snapshot-1",
|
|
24
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
25
|
+
"@instructure/ui-icons": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1",
|
|
27
|
+
"@instructure/ui-utils": "11.7.9-snapshot-1",
|
|
28
|
+
"@instructure/ui-tooltip": "11.7.9-snapshot-1"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"vitest": "^5.0.0",
|
|
32
|
-
"@instructure/ui-
|
|
33
|
-
"@instructure/ui-color-utils": "11.7.
|
|
34
|
-
"@instructure/ui-
|
|
32
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1",
|
|
33
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-1",
|
|
34
|
+
"@instructure/ui-axe-check": "11.7.9-snapshot-1"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": ">=18 <=19"
|