@instructure/ui-top-nav-bar 8.33.0 → 8.33.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +6 -3
  2. package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +4 -0
  3. package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js +4 -0
  4. package/package.json +27 -27
  5. package/src/TopNavBar/README.md +9 -2
  6. package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx +4 -0
  7. package/tsconfig.build.tsbuildinfo +1 -1
  8. package/types/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,13 +3,16 @@
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
- # [8.33.0](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.33.0) (2023-01-04)
7
-
8
- **Note:** Version bump only for package @instructure/ui-top-nav-bar
6
+ ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
9
7
 
8
+ ### Bug Fixes
10
9
 
10
+ - **ui-top-nav-bar:** fix TopNavBar `smallViewport mode` example ([7ddaf8a](https://github.com/instructure/instructure-ui/commit/7ddaf8a06211d20d0d942c935edc67aa4e5f5232))
11
+ - **ui-top-nav-bar:** smallViewport menu should close on layout switch ([10cd5a6](https://github.com/instructure/instructure-ui/commit/10cd5a6829c3e57fa107e6b710549620e9c4d275))
11
12
 
13
+ # [8.33.0](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.33.0) (2023-01-04)
12
14
 
15
+ **Note:** Version bump only for package @instructure/ui-top-nav-bar
13
16
 
14
17
  ## [8.32.1](https://github.com/instructure/instructure-ui/compare/v8.30.0...v8.32.1) (2022-12-01)
15
18
 
package/es/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js CHANGED
@@ -134,6 +134,10 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
134
134
 
135
135
  componentWillUnmount() {
136
136
  this._raf.forEach(request => request.cancel());
137
+
138
+ if (this.state.isDropdownMenuOpen) {
139
+ this.toggleDropdownMenu();
140
+ }
137
141
  }
138
142
 
139
143
  get makeStylesVariables() {
package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js CHANGED
@@ -149,6 +149,10 @@ let TopNavBarSmallViewportLayout = (_dec = (0, _withDeterministicId.withDetermin
149
149
 
150
150
  componentWillUnmount() {
151
151
  this._raf.forEach(request => request.cancel());
152
+
153
+ if (this.state.isDropdownMenuOpen) {
154
+ this.toggleDropdownMenu();
155
+ }
152
156
  }
153
157
 
154
158
  get makeStylesVariables() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-top-nav-bar",
3
- "version": "8.33.0",
3
+ "version": "8.33.1",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,35 +24,35 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.33.0",
28
- "@instructure/emotion": "8.33.0",
29
- "@instructure/shared-types": "8.33.0",
30
- "@instructure/ui-a11y-content": "8.33.0",
31
- "@instructure/ui-avatar": "8.33.0",
32
- "@instructure/ui-buttons": "8.33.0",
33
- "@instructure/ui-dialog": "8.33.0",
34
- "@instructure/ui-dom-utils": "8.33.0",
35
- "@instructure/ui-drilldown": "8.33.0",
36
- "@instructure/ui-icons": "8.33.0",
37
- "@instructure/ui-link": "8.33.0",
38
- "@instructure/ui-popover": "8.33.0",
39
- "@instructure/ui-prop-types": "8.33.0",
40
- "@instructure/ui-react-utils": "8.33.0",
41
- "@instructure/ui-responsive": "8.33.0",
42
- "@instructure/ui-testable": "8.33.0",
43
- "@instructure/ui-tooltip": "8.33.0",
44
- "@instructure/ui-tray": "8.33.0",
45
- "@instructure/ui-truncate-list": "8.33.0",
46
- "@instructure/ui-utils": "8.33.0",
47
- "@instructure/ui-view": "8.33.0",
27
+ "@instructure/console": "8.33.1",
28
+ "@instructure/emotion": "8.33.1",
29
+ "@instructure/shared-types": "8.33.1",
30
+ "@instructure/ui-a11y-content": "8.33.1",
31
+ "@instructure/ui-avatar": "8.33.1",
32
+ "@instructure/ui-buttons": "8.33.1",
33
+ "@instructure/ui-dialog": "8.33.1",
34
+ "@instructure/ui-dom-utils": "8.33.1",
35
+ "@instructure/ui-drilldown": "8.33.1",
36
+ "@instructure/ui-icons": "8.33.1",
37
+ "@instructure/ui-link": "8.33.1",
38
+ "@instructure/ui-popover": "8.33.1",
39
+ "@instructure/ui-prop-types": "8.33.1",
40
+ "@instructure/ui-react-utils": "8.33.1",
41
+ "@instructure/ui-responsive": "8.33.1",
42
+ "@instructure/ui-testable": "8.33.1",
43
+ "@instructure/ui-tooltip": "8.33.1",
44
+ "@instructure/ui-tray": "8.33.1",
45
+ "@instructure/ui-truncate-list": "8.33.1",
46
+ "@instructure/ui-utils": "8.33.1",
47
+ "@instructure/ui-view": "8.33.1",
48
48
  "prop-types": "^15"
49
49
  },
50
50
  "devDependencies": {
51
- "@instructure/ui-babel-preset": "8.33.0",
52
- "@instructure/ui-color-utils": "8.33.0",
53
- "@instructure/ui-test-locator": "8.33.0",
54
- "@instructure/ui-test-utils": "8.33.0",
55
- "@instructure/ui-themes": "8.33.0"
51
+ "@instructure/ui-babel-preset": "8.33.1",
52
+ "@instructure/ui-color-utils": "8.33.1",
53
+ "@instructure/ui-test-locator": "8.33.1",
54
+ "@instructure/ui-test-utils": "8.33.1",
55
+ "@instructure/ui-themes": "8.33.1"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "react": ">=16.8 <=18"
package/src/TopNavBar/README.md CHANGED
@@ -1714,7 +1714,8 @@ render: false
1714
1714
  class LayoutExample extends React.Component {
1715
1715
  state = {
1716
1716
  exampleWidth: '100%',
1717
- isSecondaryNavigation: false
1717
+ isSecondaryNavigation: false,
1718
+ isSmallViewportMenuOpen: false
1718
1719
  }
1719
1720
 
1720
1721
  render() {
@@ -1776,6 +1777,9 @@ class LayoutExample extends React.Component {
1776
1777
  trayMountNode: () => document.getElementById('menuMountNode'),
1777
1778
  dropdownMenuToggleButtonLabel: 'Toggle Menu',
1778
1779
  dropdownMenuLabel: 'Main Menu',
1780
+ onDropdownMenuToggle: (isMenuOpen) => {
1781
+ this.setState({ isSmallViewportMenuOpen: isMenuOpen })
1782
+ },
1779
1783
  alternativeTitle: inverseColor ? 'Overview' : undefined
1780
1784
  }}
1781
1785
  renderBrand={
@@ -1931,9 +1935,12 @@ class LayoutExample extends React.Component {
1931
1935
  : '3.5rem',
1932
1936
  insetInlineStart: '0px',
1933
1937
  width: '100%',
1934
- height: this.state.isSecondaryNavigation
1938
+ height: !this.state.isSmallViewportMenuOpen
1939
+ ? '0'
1940
+ : this.state.isSecondaryNavigation
1935
1941
  ? 'calc(100% - 3.5rem - 1px)'
1936
1942
  : 'calc(100% - 3.5rem)',
1943
+
1937
1944
  }}
1938
1945
  />
1939
1946
 
package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx CHANGED
@@ -161,6 +161,10 @@ class TopNavBarSmallViewportLayout extends Component<
161
161
 
162
162
  componentWillUnmount() {
163
163
  this._raf.forEach((request) => request.cancel())
164
+
165
+ if (this.state.isDropdownMenuOpen) {
166
+ this.toggleDropdownMenu()
167
+ }
164
168
  }
165
169
 
166
170
  get makeStylesVariables(): TopNavBarSmallViewportLayoutStyleProps {