@instructure/ui-navigation 8.18.0 → 8.18.1-snapshot.12

package/lib/Navigation/NavigationItem/theme.js

@@ -53,24 +53,24 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeSmall,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightLight,
-    fontColor: colors?.textLightest,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightLight,
+    fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
     iconSize: '1.625rem',
-    iconColor: colors?.textLightest,
-    lineHeight: typography?.lineHeight,
+    iconColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
     backgroundColor: 'transparent',
     linkTextDecoration: 'none',
-    hoverBackgroundColor: colors?.backgroundDarkest,
-    outerFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderDarkest}`,
-    innerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderLightest}`,
-    selectedFontColor: colors?.textBrand,
-    selectedIconColor: colors?.textBrand,
-    selectedBackgroundColor: colors?.backgroundLightest,
-    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors?.borderLightest}`,
-    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors?.borderBrand}`,
-    contentPadding: spacing?.xxSmall
+    hoverBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
+    outerFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderDarkest}`,
+    innerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
+    selectedFontColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
+    selectedIconColor: colors === null || colors === void 0 ? void 0 : colors.textBrand,
+    selectedBackgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    selectedOuterFocusOutline: `inset 0 0 0 0.125rem ${colors === null || colors === void 0 ? void 0 : colors.borderLightest}`,
+    selectedInnerFocusOutline: `inset 0 0 0 0.25rem ${colors === null || colors === void 0 ? void 0 : colors.borderBrand}`,
+    contentPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Navigation/index.js

@@ -72,13 +72,17 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   componentDidMount() {
-    this.props.makeStyles?.({
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, {
       minimized: this.minimized
     });
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.({
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, {
       minimized: this.minimized
     });
   }
@@ -98,11 +102,13 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
 
   renderChildren() {
     return _react.Children.map(this.props.children, child => {
+      var _this$props$styles;
+
       const navItem = (0, _safeCloneElement.safeCloneElement)(child, {
         minimized: this.state.minimized
       });
       return (0, _emotion.jsx)("li", {
-        css: this.props.styles?.list
+        css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.list
       }, navItem);
     });
   }
@@ -112,23 +118,25 @@ let Navigation = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
   }
 
   render() {
+    var _this$props$styles2, _this$props$styles3, _this$props$styles4, _this$props$styles5;
+
     const label = this.props.label;
     const props = (0, _omitProps.omitProps)(this.props, Navigation.allowedProps, ['minimized']);
     return (0, _emotion.jsx)("nav", Object.assign({}, props, {
-      css: this.props.styles?.navigation,
+      css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.navigation,
       "aria-label": label,
       ref: element => {
         this.ref = element;
       }
     }), (0, _emotion.jsx)("ul", {
-      css: this.props.styles?.content
+      css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.content
     }, this.renderChildren()), (0, _emotion.jsx)("div", {
-      css: this.props.styles?.toggle
+      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.toggle
     }, (0, _emotion.jsx)(_NavigationItem.NavigationItem, {
       "aria-expanded": !this.minimized,
       onClick: this.handleNavToggle,
       icon: (0, _emotion.jsx)(_IconMoveStartLine.IconMoveStartLine, {
-        css: this.props.styles?.toggleIcon,
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.toggleIcon,
         inline: false
       }),
       label: (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, this.toggleMessage())

package/lib/Navigation/theme.js

@@ -48,17 +48,17 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontColor: colors?.textLightest,
-    backgroundColor: colors?.backgroundBrandSecondary,
+    fontColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundBrandSecondary,
     width: '5.25rem',
     minimizedWidth: '3.375rem',
-    fill: colors?.textLightest,
-    focusOutlineInnerWidth: borders?.widthMedium,
-    focusOutlineOuterWidth: borders?.widthSmall,
-    focusOutlineInnerColor: colors?.borderBrand,
-    focusOutlineOuterColor: colors?.borderLightest,
-    marginBottom: spacing?.small,
-    toggleTransition: transitions?.duration
+    fill: colors === null || colors === void 0 ? void 0 : colors.textLightest,
+    focusOutlineInnerWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineOuterWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    focusOutlineInnerColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    focusOutlineOuterColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
+    marginBottom: spacing === null || spacing === void 0 ? void 0 : spacing.small,
+    toggleTransition: transitions === null || transitions === void 0 ? void 0 : transitions.duration
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.18.0",
+  "version": "8.18.1-snapshot.12+ca14b3dc8",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-test-locator": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.18.0",
-    "@instructure/debounce": "8.18.0",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-a11y-content": "8.18.0",
-    "@instructure/ui-a11y-utils": "8.18.0",
-    "@instructure/ui-badge": "8.18.0",
-    "@instructure/ui-dom-utils": "8.18.0",
-    "@instructure/ui-focusable": "8.18.0",
-    "@instructure/ui-icons": "8.18.0",
-    "@instructure/ui-menu": "8.18.0",
-    "@instructure/ui-prop-types": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-tooltip": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
-    "@instructure/ui-view": "8.18.0",
+    "@instructure/console": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/debounce": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-a11y-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-badge": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-focusable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-icons": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-menu": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-tooltip": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -56,5 +56,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
 }