@instructure/ui-navigation 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 +8 -0
- package/lib/AppNav/v1/Item/index.js +10 -13
- package/lib/AppNav/v1/index.js +9 -10
- package/lib/AppNav/v2/Item/index.js +10 -13
- package/lib/AppNav/v2/index.js +9 -10
- package/package.json +22 -22
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-navigation
|
|
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-navigation
|
|
@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.Item = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _console = require("@instructure/console");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
|
13
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
14
|
-
var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
|
|
10
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
15
12
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
16
|
-
var
|
|
13
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
17
14
|
var _emotion = require("@instructure/emotion");
|
|
18
15
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
19
16
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -89,7 +86,7 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
89
86
|
}
|
|
90
87
|
};
|
|
91
88
|
render() {
|
|
92
|
-
const ElementType = (0,
|
|
89
|
+
const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props);
|
|
93
90
|
const {
|
|
94
91
|
renderIcon,
|
|
95
92
|
renderLabel,
|
|
@@ -101,21 +98,21 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
101
98
|
const {
|
|
102
99
|
href,
|
|
103
100
|
rel
|
|
104
|
-
} = (0,
|
|
101
|
+
} = (0, _uiUtils.safeLinkProps)({
|
|
105
102
|
attr: 'href',
|
|
106
103
|
tag: typeof ElementType === 'string' ? ElementType : 'a',
|
|
107
104
|
href: rawHref,
|
|
108
105
|
target: this.props.target,
|
|
109
106
|
rel: this.props.rel
|
|
110
107
|
});
|
|
111
|
-
const icon = (0,
|
|
112
|
-
const label = (0,
|
|
113
|
-
const labelIsForScreenReaders = (0,
|
|
108
|
+
const icon = (0, _uiReactUtils.callRenderProp)(renderIcon);
|
|
109
|
+
const label = (0, _uiReactUtils.callRenderProp)(renderLabel);
|
|
110
|
+
const labelIsForScreenReaders = (0, _uiReactUtils.matchComponentTypes)(label, [_uiA11yContent.ScreenReaderContent]);
|
|
114
111
|
if (icon) {
|
|
115
112
|
(0, _console.logError)(labelIsForScreenReaders, '[AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.');
|
|
116
113
|
}
|
|
117
114
|
return (0, _jsxRuntime.jsxs)(_v11_.View, {
|
|
118
|
-
...(0,
|
|
115
|
+
...(0, _uiReactUtils.passthroughProps)(this.props),
|
|
119
116
|
as: ElementType,
|
|
120
117
|
href: href,
|
|
121
118
|
rel: rel,
|
|
@@ -131,7 +128,7 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
131
128
|
children: [icon, labelIsForScreenReaders ? label : (0, _jsxRuntime.jsx)("span", {
|
|
132
129
|
css: this.props.styles?.label,
|
|
133
130
|
children: label
|
|
134
|
-
}), renderAfter && (0,
|
|
131
|
+
}), renderAfter && (0, _uiReactUtils.callRenderProp)(renderAfter)]
|
|
135
132
|
});
|
|
136
133
|
}
|
|
137
134
|
}) || _class);
|
package/lib/AppNav/v1/index.js
CHANGED
|
@@ -7,15 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.AppNav = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _emotion = require("@instructure/emotion");
|
|
10
|
-
var
|
|
11
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
10
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
12
11
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
13
12
|
var _v11_2 = require("@instructure/ui-menu/v11_6");
|
|
14
13
|
var _index = require("./Item/index.js");
|
|
15
14
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
15
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
17
16
|
var _props = require("./props.js");
|
|
18
|
-
var
|
|
17
|
+
var _uiTruncateList = require("@instructure/ui-truncate-list");
|
|
19
18
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
20
19
|
var _dec, _class;
|
|
21
20
|
/*
|
|
@@ -80,13 +79,13 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _
|
|
|
80
79
|
renderMenu(items) {
|
|
81
80
|
return (0, _jsxRuntime.jsx)(_v11_2.Menu, {
|
|
82
81
|
trigger: (0, _jsxRuntime.jsx)(AppNav.Item, {
|
|
83
|
-
renderLabel: (0,
|
|
82
|
+
renderLabel: (0, _uiReactUtils.callRenderProp)(this.props.renderTruncateLabel)
|
|
84
83
|
}),
|
|
85
84
|
children: items.map((item, index) => {
|
|
86
85
|
return (0, _jsxRuntime.jsx)(_v11_2.Menu.Item, {
|
|
87
86
|
href: item.props.href ? item.props.href : undefined,
|
|
88
87
|
onClick: item.props.onClick && !item.props.href ? item.props.onClick : undefined,
|
|
89
|
-
children: (0,
|
|
88
|
+
children: (0, _uiReactUtils.callRenderProp)(item.props.renderLabel)
|
|
90
89
|
}, index);
|
|
91
90
|
})
|
|
92
91
|
});
|
|
@@ -99,9 +98,9 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _
|
|
|
99
98
|
debounce,
|
|
100
99
|
styles
|
|
101
100
|
} = this.props;
|
|
102
|
-
const passthroughProps = _v11_.View.omitViewProps((0,
|
|
103
|
-
const renderBeforeItems = (0,
|
|
104
|
-
const renderAfterItems = (0,
|
|
101
|
+
const passthroughProps = _v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, AppNav.allowedProps), AppNav);
|
|
102
|
+
const renderBeforeItems = (0, _uiReactUtils.callRenderProp)(this.props.renderBeforeItems);
|
|
103
|
+
const renderAfterItems = (0, _uiReactUtils.callRenderProp)(this.props.renderAfterItems);
|
|
105
104
|
const hasRenderedContent = renderBeforeItems || renderAfterItems;
|
|
106
105
|
return (0, _jsxRuntime.jsxs)(_v11_.View, {
|
|
107
106
|
...passthroughProps,
|
|
@@ -113,7 +112,7 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _
|
|
|
113
112
|
"data-cid": "AppNav",
|
|
114
113
|
children: [renderBeforeItems && (0, _jsxRuntime.jsx)("span", {
|
|
115
114
|
children: renderBeforeItems
|
|
116
|
-
}), (0, _jsxRuntime.jsx)(
|
|
115
|
+
}), (0, _jsxRuntime.jsx)(_uiTruncateList.TruncateList, {
|
|
117
116
|
visibleItemsCount: visibleItemsCount,
|
|
118
117
|
debounce: debounce,
|
|
119
118
|
onUpdate: this.props.onUpdate,
|
|
@@ -121,7 +120,7 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _
|
|
|
121
120
|
itemSpacing: styles?.horizontalMargin,
|
|
122
121
|
fixMenuTriggerWidth: styles?.menuTriggerWidth,
|
|
123
122
|
css: styles?.list,
|
|
124
|
-
"aria-label": (0,
|
|
123
|
+
"aria-label": (0, _uiReactUtils.callRenderProp)(screenReaderLabel),
|
|
125
124
|
children: this.props.children
|
|
126
125
|
}), renderAfterItems && (0, _jsxRuntime.jsx)("span", {
|
|
127
126
|
children: renderAfterItems
|
|
@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.Item = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _console = require("@instructure/console");
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
|
13
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
14
|
-
var _safeLinkProps = require("@instructure/ui-utils/lib/safeLinkProps.js");
|
|
10
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
|
+
var _uiUtils = require("@instructure/ui-utils");
|
|
15
12
|
var _latest = require("@instructure/ui-view/latest");
|
|
16
|
-
var
|
|
13
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
17
14
|
var _emotion = require("@instructure/emotion");
|
|
18
15
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
19
16
|
var _props = require("./props.js");
|
|
@@ -88,7 +85,7 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
88
85
|
}
|
|
89
86
|
};
|
|
90
87
|
render() {
|
|
91
|
-
const ElementType = (0,
|
|
88
|
+
const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props);
|
|
92
89
|
const {
|
|
93
90
|
renderIcon,
|
|
94
91
|
renderLabel,
|
|
@@ -100,21 +97,21 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
100
97
|
const {
|
|
101
98
|
href,
|
|
102
99
|
rel
|
|
103
|
-
} = (0,
|
|
100
|
+
} = (0, _uiUtils.safeLinkProps)({
|
|
104
101
|
attr: 'href',
|
|
105
102
|
tag: typeof ElementType === 'string' ? ElementType : 'a',
|
|
106
103
|
href: rawHref,
|
|
107
104
|
target: this.props.target,
|
|
108
105
|
rel: this.props.rel
|
|
109
106
|
});
|
|
110
|
-
const icon = (0,
|
|
111
|
-
const label = (0,
|
|
112
|
-
const labelIsForScreenReaders = (0,
|
|
107
|
+
const icon = (0, _uiReactUtils.callRenderProp)(renderIcon);
|
|
108
|
+
const label = (0, _uiReactUtils.callRenderProp)(renderLabel);
|
|
109
|
+
const labelIsForScreenReaders = (0, _uiReactUtils.matchComponentTypes)(label, [_uiA11yContent.ScreenReaderContent]);
|
|
113
110
|
if (icon) {
|
|
114
111
|
(0, _console.logError)(labelIsForScreenReaders, '[AppNav] If an icon is used, the label text should be wrapped in <ScreenReaderContent />.');
|
|
115
112
|
}
|
|
116
113
|
return (0, _jsxRuntime.jsxs)(_latest.View, {
|
|
117
|
-
...(0,
|
|
114
|
+
...(0, _uiReactUtils.passthroughProps)(this.props),
|
|
118
115
|
as: ElementType,
|
|
119
116
|
href: href,
|
|
120
117
|
rel: rel,
|
|
@@ -130,7 +127,7 @@ let Item = exports.Item = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
130
127
|
children: [icon, labelIsForScreenReaders ? label : (0, _jsxRuntime.jsx)("span", {
|
|
131
128
|
css: this.props.styles?.label,
|
|
132
129
|
children: label
|
|
133
|
-
}), renderAfter && (0,
|
|
130
|
+
}), renderAfter && (0, _uiReactUtils.callRenderProp)(renderAfter)]
|
|
134
131
|
});
|
|
135
132
|
}
|
|
136
133
|
}) || _class);
|
package/lib/AppNav/v2/index.js
CHANGED
|
@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.AppNav = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _emotion = require("@instructure/emotion");
|
|
10
|
-
var
|
|
11
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
10
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
12
11
|
var _latest = require("@instructure/ui-view/latest");
|
|
13
12
|
var _latest2 = require("@instructure/ui-menu/latest");
|
|
14
13
|
var _index = require("./Item/index.js");
|
|
15
14
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
15
|
var _props = require("./props.js");
|
|
17
|
-
var
|
|
16
|
+
var _uiTruncateList = require("@instructure/ui-truncate-list");
|
|
18
17
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
19
18
|
var _dec, _class;
|
|
20
19
|
/*
|
|
@@ -79,13 +78,13 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleNew)(_styles.default
|
|
|
79
78
|
renderMenu(items) {
|
|
80
79
|
return (0, _jsxRuntime.jsx)(_latest2.Menu, {
|
|
81
80
|
trigger: (0, _jsxRuntime.jsx)(AppNav.Item, {
|
|
82
|
-
renderLabel: (0,
|
|
81
|
+
renderLabel: (0, _uiReactUtils.callRenderProp)(this.props.renderTruncateLabel)
|
|
83
82
|
}),
|
|
84
83
|
children: items.map((item, index) => {
|
|
85
84
|
return (0, _jsxRuntime.jsx)(_latest2.Menu.Item, {
|
|
86
85
|
href: item.props.href ? item.props.href : undefined,
|
|
87
86
|
onClick: item.props.onClick && !item.props.href ? item.props.onClick : undefined,
|
|
88
|
-
children: (0,
|
|
87
|
+
children: (0, _uiReactUtils.callRenderProp)(item.props.renderLabel)
|
|
89
88
|
}, index);
|
|
90
89
|
})
|
|
91
90
|
});
|
|
@@ -98,9 +97,9 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleNew)(_styles.default
|
|
|
98
97
|
debounce,
|
|
99
98
|
styles
|
|
100
99
|
} = this.props;
|
|
101
|
-
const passthroughProps = _latest.View.omitViewProps((0,
|
|
102
|
-
const renderBeforeItems = (0,
|
|
103
|
-
const renderAfterItems = (0,
|
|
100
|
+
const passthroughProps = _latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, AppNav.allowedProps), AppNav);
|
|
101
|
+
const renderBeforeItems = (0, _uiReactUtils.callRenderProp)(this.props.renderBeforeItems);
|
|
102
|
+
const renderAfterItems = (0, _uiReactUtils.callRenderProp)(this.props.renderAfterItems);
|
|
104
103
|
const hasRenderedContent = renderBeforeItems || renderAfterItems;
|
|
105
104
|
return (0, _jsxRuntime.jsxs)(_latest.View, {
|
|
106
105
|
...passthroughProps,
|
|
@@ -112,7 +111,7 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleNew)(_styles.default
|
|
|
112
111
|
"data-cid": "AppNav",
|
|
113
112
|
children: [renderBeforeItems && (0, _jsxRuntime.jsx)("span", {
|
|
114
113
|
children: renderBeforeItems
|
|
115
|
-
}), (0, _jsxRuntime.jsx)(
|
|
114
|
+
}), (0, _jsxRuntime.jsx)(_uiTruncateList.TruncateList, {
|
|
116
115
|
visibleItemsCount: visibleItemsCount,
|
|
117
116
|
debounce: debounce,
|
|
118
117
|
onUpdate: this.props.onUpdate,
|
|
@@ -120,7 +119,7 @@ let AppNav = exports.AppNav = (_dec = (0, _emotion.withStyleNew)(_styles.default
|
|
|
120
119
|
itemSpacing: styles?.horizontalMargin,
|
|
121
120
|
fixMenuTriggerWidth: styles?.menuTriggerWidth,
|
|
122
121
|
css: styles?.list,
|
|
123
|
-
"aria-label": (0,
|
|
122
|
+
"aria-label": (0, _uiReactUtils.callRenderProp)(screenReaderLabel),
|
|
124
123
|
children: this.props.children
|
|
125
124
|
}), renderAfterItems && (0, _jsxRuntime.jsx)("span", {
|
|
126
125
|
children: renderAfterItems
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-navigation",
|
|
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,30 +15,30 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
|
-
"@instructure/console": "11.7.
|
|
19
|
-
"@instructure/
|
|
20
|
-
"@instructure/
|
|
21
|
-
"@instructure/
|
|
22
|
-
"@instructure/
|
|
23
|
-
"@instructure/ui-a11y-utils": "11.7.
|
|
24
|
-
"@instructure/ui-
|
|
25
|
-
"@instructure/ui-
|
|
26
|
-
"@instructure/ui-
|
|
27
|
-
"@instructure/ui-
|
|
28
|
-
"@instructure/ui-
|
|
29
|
-
"@instructure/ui-
|
|
30
|
-
"@instructure/ui-themes": "11.7.
|
|
31
|
-
"@instructure/ui-
|
|
32
|
-
"@instructure/ui-
|
|
33
|
-
"@instructure/ui-
|
|
34
|
-
"@instructure/ui-
|
|
18
|
+
"@instructure/console": "11.7.9-snapshot-1",
|
|
19
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/debounce": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
22
|
+
"@instructure/ui-a11y-content": "11.7.9-snapshot-1",
|
|
23
|
+
"@instructure/ui-a11y-utils": "11.7.9-snapshot-1",
|
|
24
|
+
"@instructure/ui-badge": "11.7.9-snapshot-1",
|
|
25
|
+
"@instructure/ui-focusable": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/ui-dom-utils": "11.7.9-snapshot-1",
|
|
27
|
+
"@instructure/ui-icons": "11.7.9-snapshot-1",
|
|
28
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
29
|
+
"@instructure/ui-menu": "11.7.9-snapshot-1",
|
|
30
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1",
|
|
31
|
+
"@instructure/ui-tooltip": "11.7.9-snapshot-1",
|
|
32
|
+
"@instructure/ui-truncate-list": "11.7.9-snapshot-1",
|
|
33
|
+
"@instructure/ui-utils": "11.7.9-snapshot-1",
|
|
34
|
+
"@instructure/ui-view": "11.7.9-snapshot-1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"vitest": "^5.0.0",
|
|
38
|
-
"@instructure/ui-
|
|
39
|
-
"@instructure/ui-
|
|
40
|
-
"@instructure/ui-
|
|
41
|
-
"@instructure/ui-
|
|
38
|
+
"@instructure/ui-axe-check": "11.7.9-snapshot-1",
|
|
39
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1",
|
|
40
|
+
"@instructure/ui-scripts": "11.7.9-snapshot-1",
|
|
41
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=18 <=19"
|