@instructure/ui-side-nav-bar 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (23) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/SideNavBar/v1/SideNavBarItem/index.js +38 -36
  3. package/es/SideNavBar/v1/SideNavBarItem/styles.js +3 -1
  4. package/es/SideNavBar/v1/SideNavBarItem/theme.js +21 -20
  5. package/es/SideNavBar/v1/index.js +31 -28
  6. package/es/SideNavBar/v1/styles.js +3 -1
  7. package/es/SideNavBar/v1/theme.js +16 -15
  8. package/es/SideNavBar/v2/SideNavBarItem/index.js +38 -36
  9. package/es/SideNavBar/v2/SideNavBarItem/styles.js +3 -1
  10. package/es/SideNavBar/v2/index.js +30 -27
  11. package/es/SideNavBar/v2/styles.js +3 -1
  12. package/lib/SideNavBar/v1/SideNavBarItem/index.js +38 -36
  13. package/lib/SideNavBar/v1/SideNavBarItem/styles.js +3 -1
  14. package/lib/SideNavBar/v1/SideNavBarItem/theme.js +21 -20
  15. package/lib/SideNavBar/v1/index.js +31 -28
  16. package/lib/SideNavBar/v1/styles.js +3 -1
  17. package/lib/SideNavBar/v1/theme.js +16 -15
  18. package/lib/SideNavBar/v2/SideNavBarItem/index.js +38 -36
  19. package/lib/SideNavBar/v2/SideNavBarItem/styles.js +3 -1
  20. package/lib/SideNavBar/v2/index.js +30 -27
  21. package/lib/SideNavBar/v2/styles.js +3 -1
  22. package/package.json +15 -15
  23. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-side-nav-bar
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/SideNavBar/v1/SideNavBarItem/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _SideNavBarItem;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,60 +38,66 @@ id: SideNavBar.Item
38
38
  ---
39
39
  **/
40
40
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
- let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SideNavBarItem = class SideNavBarItem extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this.ref = null;
45
- this.handleRef = el => {
46
- const elementRef = this.props.elementRef;
47
- this.ref = el;
48
- if (typeof elementRef === 'function') {
49
- elementRef(el);
50
- }
51
- };
52
- }
41
+ let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class SideNavBarItem extends Component {
42
+ static displayName = "SideNavBarItem";
43
+ static componentId = 'SideNavBar.Item';
44
+ static allowedProps = allowedProps;
45
+ static defaultProps = {
46
+ as: 'a',
47
+ selected: false,
48
+ minimized: false
49
+ };
50
+ ref = null;
51
+ handleRef = el => {
52
+ const {
53
+ elementRef
54
+ } = this.props;
55
+ this.ref = el;
56
+ if (typeof elementRef === 'function') {
57
+ elementRef(el);
58
+ }
59
+ };
53
60
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
61
+ this.props.makeStyles?.({
56
62
  minimized: this.props.minimized
57
63
  });
58
64
  }
59
65
  componentDidUpdate() {
60
- var _this$props$makeStyle2, _this$props2;
61
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
66
+ this.props.makeStyles?.({
62
67
  minimized: this.props.minimized
63
68
  });
64
69
  }
65
70
  renderLink(addRef) {
66
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
67
71
  const ElementType = getElementType(SideNavBarItem, this.props);
68
- const _this$props3 = this.props,
69
- href = _this$props3.href,
70
- onClick = _this$props3.onClick,
71
- icon = _this$props3.icon,
72
- label = _this$props3.label;
72
+ const {
73
+ href,
74
+ onClick,
75
+ icon,
76
+ label
77
+ } = this.props;
73
78
  const props = omitProps(this.props, SideNavBarItem.allowedProps);
74
79
  return _jsxs(ElementType, {
75
80
  ...props,
76
81
  href: href,
77
82
  onClick: onClick,
78
- ref: addRef ? this.handleRef : void 0,
79
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
80
- "aria-label": this.props.minimized ? label : void 0,
83
+ ref: addRef ? this.handleRef : undefined,
84
+ css: this.props.styles?.navigationItem,
85
+ "aria-label": this.props.minimized ? label : undefined,
81
86
  "data-cid": "SideNavBarItem",
82
87
  children: [_jsx("div", {
83
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
88
+ css: this.props.styles?.icon,
84
89
  children: icon
85
90
  }), !this.props.minimized ? _jsx("div", {
86
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label,
91
+ css: this.props.styles?.label,
87
92
  children: label
88
93
  }) : null]
89
94
  });
90
95
  }
91
96
  render() {
92
- const _this$props4 = this.props,
93
- minimized = _this$props4.minimized,
94
- label = _this$props4.label;
97
+ const {
98
+ minimized,
99
+ label
100
+ } = this.props;
95
101
  const hasTooltip = minimized && hasVisibleChildren(label);
96
102
  const link = this.renderLink(!hasTooltip);
97
103
  return hasTooltip ? _jsx(Tooltip, {
@@ -101,10 +107,6 @@ let SideNavBarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
101
107
  children: link
102
108
  }) : link;
103
109
  }
104
- }, _SideNavBarItem.displayName = "SideNavBarItem", _SideNavBarItem.componentId = 'SideNavBar.Item', _SideNavBarItem.allowedProps = allowedProps, _SideNavBarItem.defaultProps = {
105
- as: 'a',
106
- selected: false,
107
- minimized: false
108
- }, _SideNavBarItem)) || _class);
110
+ }) || _class);
109
111
  export default SideNavBarItem;
110
112
  export { SideNavBarItem };
package/es/SideNavBar/v1/SideNavBarItem/styles.js CHANGED
@@ -33,7 +33,9 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const selected = props.selected;
36
+ const {
37
+ selected
38
+ } = props;
37
39
  return {
38
40
  navigationItem: {
39
41
  label: 'navigationItem',
package/es/SideNavBar/v1/SideNavBarItem/theme.js CHANGED
@@ -28,11 +28,12 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- typography = theme.typography,
35
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ typography,
35
+ key: themeName
36
+ } = theme;
36
37
  const themeSpecificStyle = {
37
38
  canvas: {
38
39
  fontColor: theme['ic-brand-global-nav-menu-item__text-color'],
@@ -46,24 +47,24 @@ const generateComponentTheme = theme => {
46
47
  }
47
48
  };
48
49
  const componentVariables = {
49
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
50
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
- fontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
50
+ fontSize: typography?.fontSizeSmall,
51
+ fontFamily: typography?.fontFamily,
52
+ fontWeight: typography?.fontWeightNormal,
53
+ fontColor: colors?.contrasts?.white1010,
53
54
  iconSize: '1.625rem',
54
- iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
55
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
55
+ iconColor: colors?.contrasts?.white1010,
56
+ lineHeight: typography?.lineHeight,
56
57
  backgroundColor: 'transparent',
57
58
  linkTextDecoration: 'none',
58
- hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey125125,
59
- outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey4570}`,
60
- innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010}`,
61
- selectedFontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
62
- selectedIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue4570,
63
- selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.white1010,
64
- selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010}`,
65
- selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.blue4570}`,
66
- contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
59
+ hoverBackgroundColor: colors?.contrasts?.grey125125,
60
+ outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.contrasts?.grey4570}`,
61
+ innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.contrasts?.white1010}`,
62
+ selectedFontColor: colors?.contrasts?.blue4570,
63
+ selectedIconColor: colors?.contrasts?.blue4570,
64
+ selectedBackgroundColor: colors?.contrasts?.white1010,
65
+ selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.contrasts?.white1010}`,
66
+ selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.contrasts?.blue4570}`,
67
+ contentPadding: spacing?.xxSmall
67
68
  };
68
69
  return {
69
70
  ...componentVariables,
package/es/SideNavBar/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _SideNavBar;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -43,31 +43,31 @@ const navMinimized = ({
43
43
  category: components
44
44
  ---
45
45
  **/
46
- let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SideNavBar = class SideNavBar extends Component {
46
+ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class SideNavBar extends Component {
47
+ static displayName = "SideNavBar";
48
+ static componentId = 'SideNavBar';
49
+ static allowedProps = allowedProps;
50
+ static defaultProps = {
51
+ children: null,
52
+ defaultMinimized: false,
53
+ // TODO we should investigate later if it used or not
54
+ onClick: function (_e) {}
55
+ };
56
+ static Item = SideNavBarItem;
57
+ ref = null;
47
58
  constructor(props) {
48
59
  super(props);
49
- this.ref = null;
50
- this.handleNavToggle = event => {
51
- if (!this.isControlled()) {
52
- this.setState(navMinimized);
53
- }
54
- if (typeof this.props.onMinimized === 'function') {
55
- this.props.onMinimized(event, !this.minimized);
56
- }
57
- };
58
60
  this.state = {
59
61
  minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
60
62
  };
61
63
  }
62
64
  componentDidMount() {
63
- var _this$props$makeStyle, _this$props;
64
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
65
+ this.props.makeStyles?.({
65
66
  minimized: this.minimized
66
67
  });
67
68
  }
68
69
  componentDidUpdate() {
69
- var _this$props$makeStyle2, _this$props2;
70
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
70
+ this.props.makeStyles?.({
71
71
  minimized: this.minimized
72
72
  });
73
73
  }
@@ -80,15 +80,22 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
80
80
  isControlled(props = this.props) {
81
81
  return typeof props.minimized === 'boolean';
82
82
  }
83
+ handleNavToggle = event => {
84
+ if (!this.isControlled()) {
85
+ this.setState(navMinimized);
86
+ }
87
+ if (typeof this.props.onMinimized === 'function') {
88
+ this.props.onMinimized(event, !this.minimized);
89
+ }
90
+ };
83
91
  renderChildren() {
84
92
  return Children.map(this.props.children, child => {
85
- var _this$props$styles;
86
93
  if (! /*#__PURE__*/isValidElement(child)) return null;
87
94
  const navItem = safeCloneElement(child, {
88
95
  minimized: this.state.minimized
89
96
  });
90
97
  return _jsx("li", {
91
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list,
98
+ css: this.props.styles?.list,
92
99
  children: navItem
93
100
  });
94
101
  });
@@ -97,25 +104,26 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
97
104
  return this.state.minimized ? this.props.toggleLabel.minimizedLabel : this.props.toggleLabel.expandedLabel;
98
105
  }
99
106
  render() {
100
- var _this$props$styles2, _this$props$styles3, _this$props$styles4;
101
- const label = this.props.label;
107
+ const {
108
+ label
109
+ } = this.props;
102
110
  const props = omitProps(this.props, SideNavBar.allowedProps, ['minimized']);
103
111
  return _jsxs("nav", {
104
112
  ...props,
105
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
113
+ css: this.props.styles?.navigation,
106
114
  "data-cid": "SideNavBar",
107
115
  "aria-label": label,
108
116
  ref: element => {
109
117
  this.ref = element;
110
118
  },
111
119
  children: [_jsx("ul", {
112
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content,
120
+ css: this.props.styles?.content,
113
121
  children: this.renderChildren()
114
122
  }), _jsx(SideNavBarItem, {
115
123
  "aria-expanded": !this.minimized,
116
124
  onClick: this.handleNavToggle,
117
125
  icon: _jsx(IconMoveStartLine, {
118
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggleIcon,
126
+ css: this.props.styles?.toggleIcon,
119
127
  inline: false
120
128
  }),
121
129
  label: _jsx(ScreenReaderContent, {
@@ -124,11 +132,6 @@ let SideNavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
124
132
  })]
125
133
  });
126
134
  }
127
- }, _SideNavBar.displayName = "SideNavBar", _SideNavBar.componentId = 'SideNavBar', _SideNavBar.allowedProps = allowedProps, _SideNavBar.defaultProps = {
128
- children: null,
129
- defaultMinimized: false,
130
- // TODO we should investigate later if it used or not
131
- onClick: function (_e) {}
132
- }, _SideNavBar.Item = SideNavBarItem, _SideNavBar)) || _class);
135
+ }) || _class);
133
136
  export default SideNavBar;
134
137
  export { SideNavBar, SideNavBarItem };
package/es/SideNavBar/v1/styles.js CHANGED
@@ -33,7 +33,9 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, state) => {
36
- const minimized = state.minimized;
36
+ const {
37
+ minimized
38
+ } = state;
37
39
  return {
38
40
  navigation: {
39
41
  label: 'navigation',
package/es/SideNavBar/v1/theme.js CHANGED
@@ -28,12 +28,13 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
32
- const colors = theme.colors,
33
- spacing = theme.spacing,
34
- borders = theme.borders,
35
- transitions = theme.transitions,
36
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ spacing,
34
+ borders,
35
+ transitions,
36
+ key: themeName
37
+ } = theme;
37
38
  const themeSpecificStyle = {
38
39
  canvas: {
39
40
  backgroundColor: theme['ic-brand-global-nav-bgd'],
@@ -42,17 +43,17 @@ const generateComponentTheme = theme => {
42
43
  }
43
44
  };
44
45
  const componentVariables = {
45
- fontColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
46
- backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey100100,
46
+ fontColor: colors?.contrasts?.white1010,
47
+ backgroundColor: colors?.contrasts?.grey100100,
47
48
  width: '5.25rem',
48
49
  minimizedWidth: '3.375rem',
49
- fill: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
50
- focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
51
- focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
52
- focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
53
- focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
54
- marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
55
- toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
50
+ fill: colors?.contrasts?.white1010,
51
+ focusOutlineInnerWidth: borders?.widthMedium,
52
+ focusOutlineOuterWidth: borders?.widthSmall,
53
+ focusOutlineInnerColor: colors?.contrasts?.blue4570,
54
+ focusOutlineOuterColor: colors?.contrasts?.white1010,
55
+ marginBottom: spacing?.small,
56
+ toggleTransition: transitions?.duration
56
57
  };
57
58
  return {
58
59
  ...componentVariables,
package/es/SideNavBar/v2/SideNavBarItem/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _SideNavBarItem;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -37,60 +37,66 @@ id: SideNavBar.Item
37
37
  ---
38
38
  **/
39
39
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
40
- let SideNavBarItem = (_dec = withStyle(generateStyle, 'SideNavBarItem'), _dec(_class = (_SideNavBarItem = class SideNavBarItem extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- const elementRef = this.props.elementRef;
46
- this.ref = el;
47
- if (typeof elementRef === 'function') {
48
- elementRef(el);
49
- }
50
- };
51
- }
40
+ let SideNavBarItem = (_dec = withStyle(generateStyle, 'SideNavBarItem'), _dec(_class = class SideNavBarItem extends Component {
41
+ static displayName = "SideNavBarItem";
42
+ static componentId = 'SideNavBar.Item';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ as: 'a',
46
+ selected: false,
47
+ minimized: false
48
+ };
49
+ ref = null;
50
+ handleRef = el => {
51
+ const {
52
+ elementRef
53
+ } = this.props;
54
+ this.ref = el;
55
+ if (typeof elementRef === 'function') {
56
+ elementRef(el);
57
+ }
58
+ };
52
59
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
60
+ this.props.makeStyles?.({
55
61
  minimized: this.props.minimized
56
62
  });
57
63
  }
58
64
  componentDidUpdate() {
59
- var _this$props$makeStyle2, _this$props2;
60
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
65
+ this.props.makeStyles?.({
61
66
  minimized: this.props.minimized
62
67
  });
63
68
  }
64
69
  renderLink(addRef) {
65
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
66
70
  const ElementType = getElementType(SideNavBarItem, this.props);
67
- const _this$props3 = this.props,
68
- href = _this$props3.href,
69
- onClick = _this$props3.onClick,
70
- icon = _this$props3.icon,
71
- label = _this$props3.label;
71
+ const {
72
+ href,
73
+ onClick,
74
+ icon,
75
+ label
76
+ } = this.props;
72
77
  const props = omitProps(this.props, SideNavBarItem.allowedProps);
73
78
  return _jsxs(ElementType, {
74
79
  ...props,
75
80
  href: href,
76
81
  onClick: onClick,
77
- ref: addRef ? this.handleRef : void 0,
78
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
79
- "aria-label": this.props.minimized ? label : void 0,
82
+ ref: addRef ? this.handleRef : undefined,
83
+ css: this.props.styles?.navigationItem,
84
+ "aria-label": this.props.minimized ? label : undefined,
80
85
  "data-cid": "SideNavBarItem",
81
86
  children: [_jsx("div", {
82
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
87
+ css: this.props.styles?.icon,
83
88
  children: icon
84
89
  }), !this.props.minimized ? _jsx("div", {
85
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.label,
90
+ css: this.props.styles?.label,
86
91
  children: label
87
92
  }) : null]
88
93
  });
89
94
  }
90
95
  render() {
91
- const _this$props4 = this.props,
92
- minimized = _this$props4.minimized,
93
- label = _this$props4.label;
96
+ const {
97
+ minimized,
98
+ label
99
+ } = this.props;
94
100
  const hasTooltip = minimized && hasVisibleChildren(label);
95
101
  const link = this.renderLink(!hasTooltip);
96
102
  return hasTooltip ? _jsx(Tooltip, {
@@ -100,10 +106,6 @@ let SideNavBarItem = (_dec = withStyle(generateStyle, 'SideNavBarItem'), _dec(_c
100
106
  children: link
101
107
  }) : link;
102
108
  }
103
- }, _SideNavBarItem.displayName = "SideNavBarItem", _SideNavBarItem.componentId = 'SideNavBar.Item', _SideNavBarItem.allowedProps = allowedProps, _SideNavBarItem.defaultProps = {
104
- as: 'a',
105
- selected: false,
106
- minimized: false
107
- }, _SideNavBarItem)) || _class);
109
+ }) || _class);
108
110
  export default SideNavBarItem;
109
111
  export { SideNavBarItem };
package/es/SideNavBar/v2/SideNavBarItem/styles.js CHANGED
@@ -34,7 +34,9 @@
34
34
  * @return {Object} The final style object, which will be used in the component
35
35
  */
36
36
  const generateStyle = (componentTheme, props) => {
37
- const selected = props.selected;
37
+ const {
38
+ selected
39
+ } = props;
38
40
  return {
39
41
  navigationItem: {
40
42
  borderRadius: componentTheme.borderRadius,
package/es/SideNavBar/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _SideNavBar;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -42,31 +42,31 @@ const navMinimized = ({
42
42
  category: components
43
43
  ---
44
44
  **/
45
- let SideNavBar = (_dec = withStyle(generateStyle), _dec(_class = (_SideNavBar = class SideNavBar extends Component {
45
+ let SideNavBar = (_dec = withStyle(generateStyle), _dec(_class = class SideNavBar extends Component {
46
+ static displayName = "SideNavBar";
47
+ static componentId = 'SideNavBar';
48
+ static allowedProps = allowedProps;
49
+ static defaultProps = {
50
+ children: null,
51
+ defaultMinimized: false,
52
+ // TODO we should investigate later if it used or not
53
+ onClick: function (_e) {}
54
+ };
55
+ static Item = SideNavBarItem;
56
+ ref = null;
46
57
  constructor(props) {
47
58
  super(props);
48
- this.ref = null;
49
- this.handleNavToggle = event => {
50
- if (!this.isControlled()) {
51
- this.setState(navMinimized);
52
- }
53
- if (typeof this.props.onMinimized === 'function') {
54
- this.props.onMinimized(event, !this.minimized);
55
- }
56
- };
57
59
  this.state = {
58
60
  minimized: this.isControlled(props) ? !!props.minimized : !!props.defaultMinimized
59
61
  };
60
62
  }
61
63
  componentDidMount() {
62
- var _this$props$makeStyle, _this$props;
63
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
64
+ this.props.makeStyles?.({
64
65
  minimized: this.minimized
65
66
  });
66
67
  }
67
68
  componentDidUpdate() {
68
- var _this$props$makeStyle2, _this$props2;
69
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
69
+ this.props.makeStyles?.({
70
70
  minimized: this.minimized
71
71
  });
72
72
  }
@@ -79,15 +79,22 @@ let SideNavBar = (_dec = withStyle(generateStyle), _dec(_class = (_SideNavBar =
79
79
  isControlled(props = this.props) {
80
80
  return typeof props.minimized === 'boolean';
81
81
  }
82
+ handleNavToggle = event => {
83
+ if (!this.isControlled()) {
84
+ this.setState(navMinimized);
85
+ }
86
+ if (typeof this.props.onMinimized === 'function') {
87
+ this.props.onMinimized(event, !this.minimized);
88
+ }
89
+ };
82
90
  renderChildren() {
83
91
  return Children.map(this.props.children, child => {
84
- var _this$props$styles;
85
92
  if (! /*#__PURE__*/isValidElement(child)) return null;
86
93
  const navItem = safeCloneElement(child, {
87
94
  minimized: this.state.minimized
88
95
  });
89
96
  return _jsx("li", {
90
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list,
97
+ css: this.props.styles?.list,
91
98
  children: navItem
92
99
  });
93
100
  });
@@ -101,19 +108,20 @@ let SideNavBar = (_dec = withStyle(generateStyle), _dec(_class = (_SideNavBar =
101
108
  return this.state.minimized ? this.props.toggleLabel.minimizedLabel : this.props.toggleLabel.expandedLabel;
102
109
  }
103
110
  render() {
104
- var _this$props$styles2, _this$props$styles3;
105
- const label = this.props.label;
111
+ const {
112
+ label
113
+ } = this.props;
106
114
  const props = omitProps(this.props, SideNavBar.allowedProps, ['minimized']);
107
115
  return _jsxs("nav", {
108
116
  ...props,
109
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
117
+ css: this.props.styles?.navigation,
110
118
  "data-cid": "SideNavBar",
111
119
  "aria-label": label,
112
120
  ref: element => {
113
121
  this.ref = element;
114
122
  },
115
123
  children: [_jsx("ul", {
116
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content,
124
+ css: this.props.styles?.content,
117
125
  children: this.renderChildren()
118
126
  }), _jsx(SideNavBarItem, {
119
127
  "aria-expanded": !this.minimized,
@@ -125,11 +133,6 @@ let SideNavBar = (_dec = withStyle(generateStyle), _dec(_class = (_SideNavBar =
125
133
  })]
126
134
  });
127
135
  }
128
- }, _SideNavBar.displayName = "SideNavBar", _SideNavBar.componentId = 'SideNavBar', _SideNavBar.allowedProps = allowedProps, _SideNavBar.defaultProps = {
129
- children: null,
130
- defaultMinimized: false,
131
- // TODO we should investigate later if it used or not
132
- onClick: function (_e) {}
133
- }, _SideNavBar.Item = SideNavBarItem, _SideNavBar)) || _class);
136
+ }) || _class);
134
137
  export default SideNavBar;
135
138
  export { SideNavBar, SideNavBarItem };
package/es/SideNavBar/v2/styles.js CHANGED
@@ -36,7 +36,9 @@ import { boxShadowObjectsToCSSString } from '@instructure/ui-themes';
36
36
  * @return {Object} The final style object, which will be used in the component
37
37
  */
38
38
  const generateStyle = (componentTheme, _props, _sharedTokens, state) => {
39
- const minimized = state.minimized;
39
+ const {
40
+ minimized
41
+ } = state;
40
42
  const layoutVariants = {
41
43
  minimized: {
42
44
  width: componentTheme.minimizedWidth,