@instructure/ui-navigation 8.27.1-snapshot-7 → 8.27.1-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.27.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-7) (2022-08-15)
+## [8.27.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.27.0...v8.27.1-snapshot-13) (2022-08-17)
 
 
 ### Features

package/es/AppNav/index.js

@@ -25,12 +25,9 @@ var _dec, _dec2, _class, _class2;
  */
 
 /** @jsx jsx */
-import { Children, Component } from 'react';
+import React, { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
-import { getBoundingClientRect } from '@instructure/ui-dom-utils';
 import { callRenderProp, omitProps } from '@instructure/ui-react-utils';
-import { px } from '@instructure/ui-utils';
-import { debounce } from '@instructure/debounce';
 import { testable } from '@instructure/ui-testable';
 import { View } from '@instructure/ui-view';
 import { Menu } from '@instructure/ui-menu';
@@ -38,13 +35,14 @@ import { Item } from './Item';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
-
+import { TruncateList } from '@instructure/ui-truncate-list';
 /**
 ---
 category: components
 ---
 @tsProps
 **/
+
 let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class AppNav extends Component {
   constructor() {
     super(...arguments);
@@ -52,62 +50,6 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
       isMeasuring: false
     };
     this.ref = null;
-    this._list = null;
-    this._debounced = void 0;
-    this._resizeListener = void 0;
-
-    this.measureItems = () => {
-      var _this$props$styles;
-
-      const menuTriggerWidth = px((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
-      let visibleItemsCount = 0;
-
-      if (this._list) {
-        const _getBoundingClientRec = getBoundingClientRect(this._list),
-              navWidth = _getBoundingClientRec.width;
-
-        const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(item => {
-          const _getBoundingClientRec2 = getBoundingClientRect(item),
-                width = _getBoundingClientRec2.width;
-
-          return width;
-        });
-        let currentWidth = 0;
-
-        for (let i = 0; i < itemWidths.length; i++) {
-          currentWidth += itemWidths[i];
-
-          if (currentWidth <= navWidth - menuTriggerWidth) {
-            visibleItemsCount++;
-          } else {
-            break;
-          }
-        }
-      }
-
-      return {
-        visibleItemsCount
-      };
-    };
-
-    this.handleResize = () => {
-      this.setState({
-        isMeasuring: true
-      }, () => {
-        const _this$measureItems = this.measureItems(),
-              visibleItemsCount = _this$measureItems.visibleItemsCount;
-
-        if (typeof this.props.onUpdate === 'function') {
-          this.props.onUpdate({
-            visibleItemsCount
-          });
-        }
-
-        this.setState({
-          isMeasuring: false
-        });
-      });
-    };
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -123,27 +65,6 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     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);
-
-    const _getBoundingClientRec3 = getBoundingClientRect(this._list),
-          origWidth = _getBoundingClientRec3.width;
-
-    this._debounced = debounce(this.handleResize, this.props.debounce, {
-      leading: true,
-      trailing: true
-    });
-    this._resizeListener = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const width = entry.contentRect.width;
-
-        if (origWidth !== width) {
-          this._debounced();
-        }
-      }
-    });
-
-    this._resizeListener.observe(this._list);
-
-    this.handleResize();
   }
 
   componentDidUpdate() {
@@ -152,27 +73,8 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  componentWillUnmount() {
-    if (this._resizeListener) {
-      this._resizeListener.disconnect();
-    }
-
-    if (this._debounced) {
-      this._debounced.cancel();
-    }
-  }
-
-  renderListItem(item, isMenuTrigger, key) {
-    var _this$props$styles2, _this$props$styles3;
-
-    return jsx("li", {
-      key: key,
-      css: isMenuTrigger ? (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.listItemWithMenuTrigger : (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.listItem
-    }, item);
-  }
-
   renderMenu(items) {
-    const menu = jsx(Menu, {
+    return jsx(Menu, {
       trigger: jsx(AppNav.Item, {
         renderLabel: callRenderProp(this.props.renderTruncateLabel)
       })
@@ -183,38 +85,35 @@ let AppNav = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = t
         key: index
       }, callRenderProp(item.props.renderLabel));
     }));
-    return this.renderListItem(menu, true);
   }
 
   render() {
-    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
-
     const _this$props3 = this.props,
-          children = _this$props3.children,
           visibleItemsCount = _this$props3.visibleItemsCount,
           screenReaderLabel = _this$props3.screenReaderLabel,
-          margin = _this$props3.margin;
+          margin = _this$props3.margin,
+          debounce = _this$props3.debounce,
+          styles = _this$props3.styles;
     const passthroughProps = View.omitViewProps(omitProps(this.props, AppNav.allowedProps), AppNav);
-    const isMeasuring = this.state.isMeasuring;
-    const childrenArray = Children.toArray(children);
-    const visibleChildren = isMeasuring ? childrenArray : childrenArray.splice(0, visibleItemsCount);
-    const hiddenChildren = isMeasuring ? [] : childrenArray;
     const renderBeforeItems = callRenderProp(this.props.renderBeforeItems);
     const renderAfterItems = callRenderProp(this.props.renderAfterItems);
     const hasRenderedContent = renderBeforeItems || renderAfterItems;
     return jsx(View, Object.assign({}, passthroughProps, {
       as: "nav",
-      css: [(_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.appNav, hasRenderedContent ? (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.alignCenter : ''],
+      css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
       margin: margin,
       display: hasRenderedContent ? 'flex' : 'block',
       elementRef: this.handleRef
-    }), renderBeforeItems && jsx("span", null, renderBeforeItems), jsx("ul", {
-      ref: el => this._list = el,
-      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.list,
+    }), renderBeforeItems && jsx("span", null, renderBeforeItems), jsx(TruncateList, {
+      visibleItemsCount: visibleItemsCount,
+      debounce: debounce,
+      onUpdate: this.props.onUpdate,
+      renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
+      itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
+      fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
+      css: styles === null || styles === void 0 ? void 0 : styles.list,
       "aria-label": callRenderProp(screenReaderLabel)
-    }, visibleChildren.map((child, index) => {
-      return this.renderListItem(child, false, index);
-    }), hiddenChildren.length > 0 && this.renderMenu(hiddenChildren)), renderAfterItems && jsx("span", null, renderAfterItems));
+    }, this.props.children), renderAfterItems && jsx("span", null, renderAfterItems));
   }
 
 }, _class2.displayName = "AppNav", _class2.componentId = 'AppNav', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {

package/es/AppNav/styles.js

@@ -42,36 +42,17 @@ const generateStyle = componentTheme => {
     alignCenter: {
       alignItems: 'center'
     },
-    listItemWithMenuTrigger: {
-      label: 'appNav__listItemWithMenuTrigger',
-      minWidth: '0.0625rem',
-      marginInlineStart: componentTheme.horizontalMargin,
-      marginInlineEnd: '0',
-      flexShrink: 0,
-      flexBasis: componentTheme.menuTriggerWidth
-    },
-    listItem: {
-      label: 'appNav__listItem',
-      minWidth: '0.0625rem',
-      marginInlineStart: componentTheme.horizontalMargin,
-      marginInlineEnd: '0',
-      flexShrink: 0
-    },
     list: {
       label: 'appNav__list',
-      boxSizing: 'border-box',
-      listStyleType: 'none',
       height: componentTheme.height,
-      margin: '0',
-      padding: '0',
-      display: 'flex',
-      alignItems: 'center',
       flexGrow: 1,
       flexShrink: 1,
       flexBasis: '0',
-      minWidth: '0.0625rem'
+      minWidth: '0.0625rem',
+      paddingInlineStart: componentTheme.horizontalMargin
     },
-    menuTriggerWidth: componentTheme.menuTriggerWidth
+    horizontalMargin: componentTheme.horizontalMargin.toString(),
+    menuTriggerWidth: componentTheme.menuTriggerWidth.toString()
   };
 };
 

package/lib/AppNav/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,20 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.AppNav = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _emotion = require("@instructure/emotion");
 
-var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
-var _px = require("@instructure/ui-utils/lib/px.js");
-
-var _debounce = require("@instructure/debounce");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _View = require("@instructure/ui-view/lib/View");
@@ -35,6 +31,8 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
+var _TruncateList = require("@instructure/ui-truncate-list/lib/TruncateList");
+
 var _dec, _dec2, _class, _class2;
 
 /**
@@ -50,62 +48,6 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
       isMeasuring: false
     };
     this.ref = null;
-    this._list = null;
-    this._debounced = void 0;
-    this._resizeListener = void 0;
-
-    this.measureItems = () => {
-      var _this$props$styles;
-
-      const menuTriggerWidth = (0, _px.px)((_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuTriggerWidth);
-      let visibleItemsCount = 0;
-
-      if (this._list) {
-        const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
-              navWidth = _getBoundingClientRec.width;
-
-        const itemWidths = Array.from(this._list.getElementsByTagName('li')).map(item => {
-          const _getBoundingClientRec2 = (0, _getBoundingClientRect.getBoundingClientRect)(item),
-                width = _getBoundingClientRec2.width;
-
-          return width;
-        });
-        let currentWidth = 0;
-
-        for (let i = 0; i < itemWidths.length; i++) {
-          currentWidth += itemWidths[i];
-
-          if (currentWidth <= navWidth - menuTriggerWidth) {
-            visibleItemsCount++;
-          } else {
-            break;
-          }
-        }
-      }
-
-      return {
-        visibleItemsCount
-      };
-    };
-
-    this.handleResize = () => {
-      this.setState({
-        isMeasuring: true
-      }, () => {
-        const _this$measureItems = this.measureItems(),
-              visibleItemsCount = _this$measureItems.visibleItemsCount;
-
-        if (typeof this.props.onUpdate === 'function') {
-          this.props.onUpdate({
-            visibleItemsCount
-          });
-        }
-
-        this.setState({
-          isMeasuring: false
-        });
-      });
-    };
 
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
@@ -121,27 +63,6 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     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);
-
-    const _getBoundingClientRec3 = (0, _getBoundingClientRect.getBoundingClientRect)(this._list),
-          origWidth = _getBoundingClientRec3.width;
-
-    this._debounced = (0, _debounce.debounce)(this.handleResize, this.props.debounce, {
-      leading: true,
-      trailing: true
-    });
-    this._resizeListener = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const width = entry.contentRect.width;
-
-        if (origWidth !== width) {
-          this._debounced();
-        }
-      }
-    });
-
-    this._resizeListener.observe(this._list);
-
-    this.handleResize();
   }
 
   componentDidUpdate() {
@@ -150,27 +71,8 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
-  componentWillUnmount() {
-    if (this._resizeListener) {
-      this._resizeListener.disconnect();
-    }
-
-    if (this._debounced) {
-      this._debounced.cancel();
-    }
-  }
-
-  renderListItem(item, isMenuTrigger, key) {
-    var _this$props$styles2, _this$props$styles3;
-
-    return (0, _emotion.jsx)("li", {
-      key: key,
-      css: isMenuTrigger ? (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.listItemWithMenuTrigger : (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.listItem
-    }, item);
-  }
-
   renderMenu(items) {
-    const menu = (0, _emotion.jsx)(_Menu.Menu, {
+    return (0, _emotion.jsx)(_Menu.Menu, {
       trigger: (0, _emotion.jsx)(AppNav.Item, {
         renderLabel: (0, _callRenderProp.callRenderProp)(this.props.renderTruncateLabel)
       })
@@ -181,42 +83,37 @@ let AppNav = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _
         key: index
       }, (0, _callRenderProp.callRenderProp)(item.props.renderLabel));
     }));
-    return this.renderListItem(menu, true);
   }
 
   render() {
-    var _this$props$styles4, _this$props$styles5, _this$props$styles6;
-
     const _this$props3 = this.props,
-          children = _this$props3.children,
           visibleItemsCount = _this$props3.visibleItemsCount,
           screenReaderLabel = _this$props3.screenReaderLabel,
-          margin = _this$props3.margin;
+          margin = _this$props3.margin,
+          debounce = _this$props3.debounce,
+          styles = _this$props3.styles;
 
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, AppNav.allowedProps), AppNav);
 
-    const isMeasuring = this.state.isMeasuring;
-
-    const childrenArray = _react.Children.toArray(children);
-
-    const visibleChildren = isMeasuring ? childrenArray : childrenArray.splice(0, visibleItemsCount);
-    const hiddenChildren = isMeasuring ? [] : childrenArray;
     const renderBeforeItems = (0, _callRenderProp.callRenderProp)(this.props.renderBeforeItems);
     const renderAfterItems = (0, _callRenderProp.callRenderProp)(this.props.renderAfterItems);
     const hasRenderedContent = renderBeforeItems || renderAfterItems;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       as: "nav",
-      css: [(_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.appNav, hasRenderedContent ? (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.alignCenter : ''],
+      css: [styles === null || styles === void 0 ? void 0 : styles.appNav, hasRenderedContent ? styles === null || styles === void 0 ? void 0 : styles.alignCenter : ''],
       margin: margin,
       display: hasRenderedContent ? 'flex' : 'block',
       elementRef: this.handleRef
-    }), renderBeforeItems && (0, _emotion.jsx)("span", null, renderBeforeItems), (0, _emotion.jsx)("ul", {
-      ref: el => this._list = el,
-      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.list,
+    }), renderBeforeItems && (0, _emotion.jsx)("span", null, renderBeforeItems), (0, _emotion.jsx)(_TruncateList.TruncateList, {
+      visibleItemsCount: visibleItemsCount,
+      debounce: debounce,
+      onUpdate: this.props.onUpdate,
+      renderHiddenItemMenu: hiddenChildren => this.renderMenu(hiddenChildren),
+      itemSpacing: styles === null || styles === void 0 ? void 0 : styles.horizontalMargin,
+      fixMenuTriggerWidth: styles === null || styles === void 0 ? void 0 : styles.menuTriggerWidth,
+      css: styles === null || styles === void 0 ? void 0 : styles.list,
       "aria-label": (0, _callRenderProp.callRenderProp)(screenReaderLabel)
-    }, visibleChildren.map((child, index) => {
-      return this.renderListItem(child, false, index);
-    }), hiddenChildren.length > 0 && this.renderMenu(hiddenChildren)), renderAfterItems && (0, _emotion.jsx)("span", null, renderAfterItems));
+    }, this.props.children), renderAfterItems && (0, _emotion.jsx)("span", null, renderAfterItems));
   }
 
 }, _class2.displayName = "AppNav", _class2.componentId = 'AppNav', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {

package/lib/AppNav/styles.js

@@ -49,36 +49,17 @@ const generateStyle = componentTheme => {
     alignCenter: {
       alignItems: 'center'
     },
-    listItemWithMenuTrigger: {
-      label: 'appNav__listItemWithMenuTrigger',
-      minWidth: '0.0625rem',
-      marginInlineStart: componentTheme.horizontalMargin,
-      marginInlineEnd: '0',
-      flexShrink: 0,
-      flexBasis: componentTheme.menuTriggerWidth
-    },
-    listItem: {
-      label: 'appNav__listItem',
-      minWidth: '0.0625rem',
-      marginInlineStart: componentTheme.horizontalMargin,
-      marginInlineEnd: '0',
-      flexShrink: 0
-    },
     list: {
       label: 'appNav__list',
-      boxSizing: 'border-box',
-      listStyleType: 'none',
       height: componentTheme.height,
-      margin: '0',
-      padding: '0',
-      display: 'flex',
-      alignItems: 'center',
       flexGrow: 1,
       flexShrink: 1,
       flexBasis: '0',
-      minWidth: '0.0625rem'
+      minWidth: '0.0625rem',
+      paddingInlineStart: componentTheme.horizontalMargin
     },
-    menuTriggerWidth: componentTheme.menuTriggerWidth
+    horizontalMargin: componentTheme.horizontalMargin.toString(),
+    menuTriggerWidth: componentTheme.menuTriggerWidth.toString()
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-navigation",
-  "version": "8.27.1-snapshot-7",
+  "version": "8.27.1-snapshot-13",
   "description": "Main and application level navigational components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,31 +23,32 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.27.1-snapshot-7",
-    "@instructure/ui-color-utils": "8.27.1-snapshot-7",
-    "@instructure/ui-test-locator": "8.27.1-snapshot-7",
-    "@instructure/ui-test-utils": "8.27.1-snapshot-7",
-    "@instructure/ui-themes": "8.27.1-snapshot-7"
+    "@instructure/ui-babel-preset": "8.27.1-snapshot-13",
+    "@instructure/ui-color-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-test-locator": "8.27.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-themes": "8.27.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.27.1-snapshot-7",
-    "@instructure/debounce": "8.27.1-snapshot-7",
-    "@instructure/emotion": "8.27.1-snapshot-7",
-    "@instructure/shared-types": "8.27.1-snapshot-7",
-    "@instructure/ui-a11y-content": "8.27.1-snapshot-7",
-    "@instructure/ui-a11y-utils": "8.27.1-snapshot-7",
-    "@instructure/ui-badge": "8.27.1-snapshot-7",
-    "@instructure/ui-dom-utils": "8.27.1-snapshot-7",
-    "@instructure/ui-focusable": "8.27.1-snapshot-7",
-    "@instructure/ui-icons": "8.27.1-snapshot-7",
-    "@instructure/ui-menu": "8.27.1-snapshot-7",
-    "@instructure/ui-prop-types": "8.27.1-snapshot-7",
-    "@instructure/ui-react-utils": "8.27.1-snapshot-7",
-    "@instructure/ui-testable": "8.27.1-snapshot-7",
-    "@instructure/ui-tooltip": "8.27.1-snapshot-7",
-    "@instructure/ui-utils": "8.27.1-snapshot-7",
-    "@instructure/ui-view": "8.27.1-snapshot-7",
+    "@instructure/console": "8.27.1-snapshot-13",
+    "@instructure/debounce": "8.27.1-snapshot-13",
+    "@instructure/emotion": "8.27.1-snapshot-13",
+    "@instructure/shared-types": "8.27.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.27.1-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-badge": "8.27.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-focusable": "8.27.1-snapshot-13",
+    "@instructure/ui-icons": "8.27.1-snapshot-13",
+    "@instructure/ui-menu": "8.27.1-snapshot-13",
+    "@instructure/ui-prop-types": "8.27.1-snapshot-13",
+    "@instructure/ui-react-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-testable": "8.27.1-snapshot-13",
+    "@instructure/ui-tooltip": "8.27.1-snapshot-13",
+    "@instructure/ui-truncate-list": "8.27.1-snapshot-13",
+    "@instructure/ui-utils": "8.27.1-snapshot-13",
+    "@instructure/ui-view": "8.27.1-snapshot-13",
     "prop-types": "^15"
   },
   "peerDependencies": {