@instructure/ui-navigation 8.21.1-snapshot.10 → 8.22.1-snapshot.21

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.22.0](https://github.com/instructure/instructure-ui/compare/v8.21.0...v8.22.0) (2022-03-31)
+
+**Note:** Version bump only for package @instructure/ui-navigation
+
 # [8.21.0](https://github.com/instructure/instructure-ui/compare/v8.20.0...v8.21.0) (2022-03-30)
 
 **Note:** Version bump only for package @instructure/ui-navigation

package/es/Navigation/NavigationItem/index.js

@@ -45,6 +45,15 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
   constructor() {
     super(...arguments);
     this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
   }
 
   componentDidMount() {
@@ -63,7 +72,7 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
     });
   }
 
-  renderLink() {
+  renderLink(addRef) {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
 
     const ElementType = getElementType(NavigationItem, this.props);
@@ -76,11 +85,9 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
     return jsx(ElementType, Object.assign({}, props, {
       href: href,
       onClick: onClick,
+      ref: addRef ? this.handleRef : void 0,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
-      "aria-label": this.props.minimized ? label : void 0,
-      ref: element => {
-        this.ref = element;
-      }
+      "aria-label": this.props.minimized ? label : void 0
     }), jsx("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
       "aria-hidden": "true"
@@ -93,10 +100,12 @@ let NavigationItem = (_dec = withStyle(generateStyle, generateComponentTheme), _
     const _this$props4 = this.props,
           minimized = _this$props4.minimized,
           label = _this$props4.label;
-    const link = this.renderLink();
-    return minimized && hasVisibleChildren(label) ? jsx(Tooltip, {
+    const hasTooltip = minimized && hasVisibleChildren(label);
+    const link = this.renderLink(!hasTooltip);
+    return hasTooltip ? jsx(Tooltip, {
       renderTip: label,
-      placement: "end"
+      placement: "end",
+      elementRef: this.handleRef
     }, link) : link;
   }
 

package/es/Navigation/NavigationItem/props.js

@@ -23,6 +23,11 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
+  /**
+   * The reference to the underlying HTML element
+   */
+  elementRef: PropTypes.func,
+
   /**
    * The visual to display (ex. an Image, Logo, Avatar, or Icon)
    */
@@ -58,5 +63,5 @@ const propTypes = {
    */
   minimized: PropTypes.bool
 };
-const allowedProps = ['icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
+const allowedProps = ['elementRef', 'icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
 export { propTypes, allowedProps };

package/lib/Navigation/NavigationItem/index.js

@@ -39,6 +39,15 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
   constructor() {
     super(...arguments);
     this.ref = null;
+
+    this.handleRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
   }
 
   componentDidMount() {
@@ -57,7 +66,7 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     });
   }
 
-  renderLink() {
+  renderLink(addRef) {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
 
     const ElementType = (0, _getElementType.getElementType)(NavigationItem, this.props);
@@ -70,11 +79,9 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     return (0, _emotion.jsx)(ElementType, Object.assign({}, props, {
       href: href,
       onClick: onClick,
+      ref: addRef ? this.handleRef : void 0,
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.navigationItem,
-      "aria-label": this.props.minimized ? label : void 0,
-      ref: element => {
-        this.ref = element;
-      }
+      "aria-label": this.props.minimized ? label : void 0
     }), (0, _emotion.jsx)("div", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
       "aria-hidden": "true"
@@ -87,10 +94,12 @@ let NavigationItem = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
     const _this$props4 = this.props,
           minimized = _this$props4.minimized,
           label = _this$props4.label;
-    const link = this.renderLink();
-    return minimized && (0, _hasVisibleChildren.hasVisibleChildren)(label) ? (0, _emotion.jsx)(_Tooltip.Tooltip, {
+    const hasTooltip = minimized && (0, _hasVisibleChildren.hasVisibleChildren)(label);
+    const link = this.renderLink(!hasTooltip);
+    return hasTooltip ? (0, _emotion.jsx)(_Tooltip.Tooltip, {
       renderTip: label,
-      placement: "end"
+      placement: "end",
+      elementRef: this.handleRef
     }, link) : link;
   }
 

package/lib/Navigation/NavigationItem/props.js

@@ -33,6 +33,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
+  /**
+   * The reference to the underlying HTML element
+   */
+  elementRef: _propTypes.default.func,
+
   /**
    * The visual to display (ex. an Image, Logo, Avatar, or Icon)
    */
@@ -69,5 +74,5 @@ const propTypes = {
   minimized: _propTypes.default.bool
 };
 exports.propTypes = propTypes;
-const allowedProps = ['icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
+const allowedProps = ['elementRef', 'icon', 'label', 'as', 'href', 'onClick', 'selected', 'minimized'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.21.1-snapshot.10+44e7e13f1",
+  "version": "8.22.1-snapshot.21+7bdf07c83",
   "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.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-color-utils": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-test-locator": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-test-utils": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-themes": "8.21.1-snapshot.10+44e7e13f1"
+    "@instructure/ui-babel-preset": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-color-utils": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-test-locator": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-test-utils": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-themes": "8.22.1-snapshot.21+7bdf07c83"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/debounce": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/emotion": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/shared-types": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-a11y-content": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-a11y-utils": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-badge": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-dom-utils": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-focusable": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-icons": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-menu": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-prop-types": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-react-utils": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-testable": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-tooltip": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-utils": "8.21.1-snapshot.10+44e7e13f1",
-    "@instructure/ui-view": "8.21.1-snapshot.10+44e7e13f1",
+    "@instructure/console": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/debounce": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/emotion": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/shared-types": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-a11y-content": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-a11y-utils": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-badge": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-dom-utils": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-focusable": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-icons": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-menu": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-prop-types": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-react-utils": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-testable": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-tooltip": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-utils": "8.22.1-snapshot.21+7bdf07c83",
+    "@instructure/ui-view": "8.22.1-snapshot.21+7bdf07c83",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -57,5 +57,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "44e7e13f1720680be9f7e76a3d3ec0cf94e88d5b"
+  "gitHead": "7bdf07c834ffb614098415cbe0e3df6c0f6efdfb"
 }

package/src/Navigation/NavigationItem/index.tsx

@@ -59,6 +59,14 @@ class NavigationItem extends Component<NavigationItemProps> {
 
   ref: Element | null = null
 
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+    this.ref = el
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
   componentDidMount() {
     this.props.makeStyles?.({ minimized: this.props.minimized })
   }
@@ -67,7 +75,7 @@ class NavigationItem extends Component<NavigationItemProps> {
     this.props.makeStyles?.({ minimized: this.props.minimized })
   }
 
-  renderLink() {
+  renderLink(addRef: boolean) {
     const ElementType = getElementType(NavigationItem, this.props)
 
     const { href, onClick, icon, label } = this.props
@@ -77,15 +85,13 @@ class NavigationItem extends Component<NavigationItemProps> {
     return (
       //@ts-expect-error TODO: INSTUI-3245
       <ElementType
+        // @ts-expect-error TODO: fix TS2590: Expression produces a union type that is too complex to represent.
         {...props}
         href={href}
         onClick={onClick}
+        ref={addRef ? this.handleRef : undefined}
         css={this.props.styles?.navigationItem}
         aria-label={this.props.minimized ? label : undefined}
-        // @ts-expect-error TODO: fix TS2590: Expression produces a union type that is too complex to represent.
-        ref={(element) => {
-          this.ref = element
-        }}
       >
         <div css={this.props.styles?.icon} aria-hidden="true">
           {icon}
@@ -99,11 +105,10 @@ class NavigationItem extends Component<NavigationItemProps> {
 
   render() {
     const { minimized, label } = this.props
-
-    const link = this.renderLink()
-
-    return minimized && hasVisibleChildren(label) ? (
-      <Tooltip renderTip={label} placement="end">
+    const hasTooltip: boolean = minimized! && hasVisibleChildren(label)
+    const link = this.renderLink(!hasTooltip)
+    return hasTooltip ? (
+      <Tooltip renderTip={label} placement="end" elementRef={this.handleRef}>
         {link}
       </Tooltip>
     ) : (

package/src/Navigation/NavigationItem/props.ts

@@ -32,6 +32,7 @@ import type {
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type NavigationItemOwnProps = {
+  elementRef?: (el: Element | null) => void
   icon: React.ReactNode
   label: React.ReactNode
   as?: AsElementType
@@ -52,6 +53,10 @@ type NavigationItemProps = NavigationItemOwnProps &
 type NavigationItemStyle = ComponentStyle<'navigationItem' | 'icon' | 'label'>
 
 const propTypes: PropValidators<PropKeys> = {
+  /**
+   * The reference to the underlying HTML element
+   */
+  elementRef: PropTypes.func,
   /**
    * The visual to display (ex. an Image, Logo, Avatar, or Icon)
    */
@@ -83,6 +88,7 @@ const propTypes: PropValidators<PropKeys> = {
 }
 
 const allowedProps: AllowedPropKeys = [
+  'elementRef',
   'icon',
   'label',
   'as',