@instructure/ui-top-nav-bar 8.56.0 → 9.0.0

package/lib/TopNavBar/TopNavBarBrand/styles.js

@@ -39,8 +39,7 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const nameBackground = props.nameBackground,
-    iconBackground = props.iconBackground;
+  const iconBackground = props.iconBackground;
   const isDesktop = state.layout === 'desktop';
   return {
     topNavBarBrand: {
@@ -60,15 +59,6 @@ const generateStyle = (componentTheme, props, state) => {
       appearance: 'none',
       textDecoration: 'none'
     },
-    nameContainer: {
-      label: 'topNavBarBrand__nameContainer',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      pointerEvents: 'none',
-      padding: componentTheme.logoPadding,
-      background: isDesktop ? nameBackground : void 0
-    },
     name: {
       label: 'topNavBarBrand__name',
       display: 'flex',

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/__new-tests__/TopNavBarDesktopLayout.test.js

@@ -96,7 +96,6 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBreadcrumb] If the inverseColor prop is not set to true, TopNavBarBreadcrumb fails to render.');
     });
     it('should not render breadcrumb if brand exists', () => {
-      const consoleMock = jest.spyOn(console, 'warn').mockImplementation();
       const _render3 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TopNavBarContext.default.Provider, {
           value: {
             layout: 'desktop',
@@ -116,7 +115,6 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(crumb1).not.toBeInTheDocument();
       expect(crumb2).not.toBeInTheDocument();
       expect(crumb3).not.toBeInTheDocument();
-      expect(consoleMock.mock.calls[0][0]).toEqual('Warning: [TopNavBarBrand] `renderName` is deprecated and will be removed in version 9. Please use the updated TopNavBar design.');
     });
     it('should not render breadcrumb if menuitems exist', () => {
       const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TopNavBarContext.default.Provider, {
@@ -161,11 +159,10 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(brandContainer).not.toBeInTheDocument();
       expect(desktopLayout).not.toHaveTextContent('Brand name');
     });
-    it('should not render brand container when "renderName" and "renderIcon" props are both missing', () => {
+    it('should not render brand container when "renderIcon" props is missing', () => {
       const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
           renderBrand: (0, _exampleHelpers.getBrand)({
             brandProps: {
-              renderName: void 0,
               renderIcon: void 0
             }
           })
@@ -316,135 +313,10 @@ describe('<TopNavBarDesktopLayout />', () => {
       expect(elementRef).toHaveBeenCalledWith(container.firstChild);
     });
   });
-  describe('hideActionsUserSeparator prop', () => {
-    describe('in default mode', () => {
-      it('should hide separator between actions and user', () => {
-        const _render20 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: true
-          }))),
-          container = _render20.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-        // const actionsUserSeparator = getComputedStyle(userContainer!, '::before')
-        // const actionsUserSeparatorBackground = actionsUserSeparator.getPropertyValue('background-color')
-
-        // expect(actionsUserSeparatorBackground).toBe('rgba(0, 0, 0, 0)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-      it('should show separator between actions and user, when false', () => {
-        const _render21 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: false
-          }))),
-          container = _render21.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgb(199, 205, 209)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-    });
-    describe('in inverse mode', () => {
-      it('should hide separator between actions and user', () => {
-        const _render22 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_exampleHelpers.SmallViewportModeWrapper, {
-            layout: "desktop",
-            inverseColor: true
-          }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: true
-          })))),
-          container = _render22.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-      it('should show separator between actions and user, when false', () => {
-        const _render23 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_exampleHelpers.SmallViewportModeWrapper, {
-            layout: "desktop",
-            inverseColor: true
-          }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: false
-          })))),
-          container = _render23.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgb(199, 205, 209)')
-
-        expect(userContainer).toBeInTheDocument();
-      });
-    });
-    describe('should not display when:', () => {
-      it('renderActionItems is missing', () => {
-        const _render24 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: void 0,
-            renderActionItems: void 0
-          }))),
-          container = _render24.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-        const actionItemsContainer = container.querySelector("[class$='topNavBarDesktopLayout__actionItemsContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(actionItemsContainer).not.toBeInTheDocument();
-        expect(userContainer).toBeInTheDocument();
-      });
-      it('renderUser is missing', () => {
-        const _render25 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: void 0,
-            renderUser: void 0
-          }))),
-          container = _render25.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-        const actionItemsContainer = container.querySelector("[class$='topNavBarDesktopLayout__actionItemsContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator = await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(actionItemsContainer).toBeInTheDocument();
-        expect(userContainer).not.toBeInTheDocument();
-      });
-      it('renderActionItems and renderUser is missing', () => {
-        const _render26 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, Object.assign({}, defaultBlocks, {
-            hideActionsUserSeparator: void 0,
-            renderActionItems: void 0,
-            renderUser: void 0
-          }))),
-          container = _render26.container;
-        const userContainer = container.querySelector("[class$='topNavBarDesktopLayout__userContainer']");
-        const actionItemsContainer = container.querySelector("[class$='topNavBarDesktopLayout__actionItemsContainer']");
-
-        // TODO convert to e2e
-        // const component = await TopNavBarDesktopLayoutLocator.find()
-        // const actionsUserSeparator =  await component.getActionsUserSeparatorBackground()
-        // expect(actionsUserSeparator).to.equal('rgba(0, 0, 0, 0)')
-
-        expect(actionItemsContainer).not.toBeInTheDocument();
-        expect(userContainer).not.toBeInTheDocument();
-      });
-    });
-  });
   describe('should be accessible', () => {
     it('a11y', async () => {
-      const _render27 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, defaultBlocks)),
-        container = _render27.container;
+      const _render20 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.TopNavBarDesktopLayout, defaultBlocks)),
+        container = _render20.container;
       const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
       expect(axeCheck).toBe(true);
     });

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.TopNavBarDesktopLayout = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _emotion = require("@instructure/emotion");
@@ -15,7 +14,7 @@ var _TopNavBarContext = require("../../TopNavBarContext");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _dec2, _dec3, _class, _class2;
+var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
  *
@@ -45,9 +44,7 @@ var _dec, _dec2, _dec3, _class, _class2;
 private: true
 ---
 **/
-let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec3 = (0, _deprecated.deprecated)('9', {
-  hideActionsUserSeparator: true
-}, 'From v9, actionUserSeparator has to be visible at all times. Please do not use designs which hide it. Note: this prop is probably used inside the desktopConfig prop on [TopNavBar.Layout]'), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TopNavBarDesktopLayout extends _react.Component {
+let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_class2 = class TopNavBarDesktopLayout extends _react.Component {
   constructor(...args) {
     super(...args);
     this.ref = null;
@@ -77,7 +74,7 @@ let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emoti
   }
   get hasBrandBlock() {
     const renderBrand = this.props.renderBrand;
-    return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
+    return !!renderBrand && !!renderBrand.props.renderIcon;
   }
   get hasActionItemsBlock() {
     const renderActionItems = this.props.renderActionItems;
@@ -123,5 +120,5 @@ let TopNavBarDesktopLayout = exports.TopNavBarDesktopLayout = (_dec = (0, _emoti
       css: styles === null || styles === void 0 ? void 0 : styles.userContainer
     }, renderUser));
   }
-}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class) || _class);
+}, _class2.displayName = "TopNavBarDesktopLayout", _class2.componentId = 'TopNavBar.DesktopLayout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {}, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
 var _default = exports.default = TopNavBarDesktopLayout;

package/lib/TopNavBar/TopNavBarLayout/DesktopLayout/styles.js

@@ -34,17 +34,16 @@ exports.default = void 0;
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} _props the props of the component, the style is applied to
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme, props, state) => {
-  const hideActionsUserSeparator = props.hideActionsUserSeparator;
+const generateStyle = (componentTheme, _props, state) => {
   const inverseColor = state.inverseColor,
     hasBrandBlock = state.hasBrandBlock,
     hasActionItemsBlock = state.hasActionItemsBlock,
     hasUserBlock = state.hasUserBlock;
-  const hasUserSeparator = hasActionItemsBlock && hasUserBlock && !hideActionsUserSeparator;
+  const hasUserSeparator = hasActionItemsBlock && hasUserBlock;
   return {
     topNavBarDesktopLayout: {
       label: 'topNavBarDesktopLayout',

package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/__new-tests__/TopNavBarSmallViewportLayout.test.js

@@ -138,11 +138,10 @@ describe('<TopNavBarSmallViewportLayout />', () => {
       expect(brandContainer).not.toBeInTheDocument();
       expect(brandNameText).not.toBeInTheDocument();
     });
-    it('should not render brand container when "renderName" and "renderIcon" props are both missing', () => {
+    it('should not render brand container when "renderIcon" prop is missing', () => {
       const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_exampleHelpers.SmallViewportModeWrapper, null, /*#__PURE__*/_react.default.createElement(_index.TopNavBarSmallViewportLayout, Object.assign({}, defaultProps, {
           renderBrand: (0, _exampleHelpers.getBrand)({
             brandProps: {
-              renderName: void 0,
               renderIcon: void 0
             }
           })

package/lib/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.js

@@ -146,7 +146,7 @@ let TopNavBarSmallViewportLayout = exports.TopNavBarSmallViewportLayout = (_dec
     };
   }
   hasBrandBlock(renderBrand) {
-    return !!renderBrand && (!!renderBrand.props.renderName || !!renderBrand.props.renderIcon);
+    return !!renderBrand && !!renderBrand.props.renderIcon;
   }
   hasMenuItemsBlock(renderMenuItems) {
     return !!renderMenuItems && _react.default.Children.count(renderMenuItems.props.children) > 0;

package/lib/TopNavBar/TopNavBarLayout/__new-tests__/TopNavBarLayout.test.js

@@ -73,24 +73,6 @@ describe('<TopNavBarLayout />', () => {
       expect(desktopLayout).toBeVisible();
       expect(smallViewportLayout).toBeUndefined();
     });
-    it('should pass the "desktopConfig" props to DesktopLayout', () => {
-      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_exampleHelpers.SmallViewportModeWrapper, {
-        layout: "desktop"
-      }, /*#__PURE__*/_react.default.createElement(_index.TopNavBarLayout, Object.assign({}, (0, _exampleHelpers.getLayoutProps)({
-        currentLayout: 'desktop',
-        inverseColor: false
-      }), {
-        desktopConfig: {
-          hideActionsUserSeparator: false
-        }
-      }))));
-      const navElement = _react2.screen.getByRole('navigation');
-      const userContainer = Array.from(navElement.children).find(child => child.className.includes('topNavBarDesktopLayout__userContainer'));
-      const userContainerStyle = userContainer ? window.getComputedStyle(userContainer) : null;
-
-      // userContainer get position relative and a pseudo ::before as a separator
-      expect(userContainerStyle === null || userContainerStyle === void 0 ? void 0 : userContainerStyle.position).toBe('relative');
-    });
     it('should pass the proper "themeOverride"-s to DesktopLayout', () => {
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_exampleHelpers.SmallViewportModeWrapper, {
         layout: "desktop"

package/lib/TopNavBar/TopNavBarLayout/index.js

@@ -15,7 +15,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _SmallViewportLayout = require("./SmallViewportLayout");
 var _DesktopLayout = require("./DesktopLayout");
 var _props = require("./props");
-const _excluded = ["desktopConfig", "smallViewportConfig", "styles", "makeStyles"];
+const _excluded = ["smallViewportConfig", "styles", "makeStyles"];
 var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -60,6 +60,10 @@ let TopNavBarLayout = exports.TopNavBarLayout = (_dec = (0, _emotion.withStyle)(
       }
     };
   }
+  componentDidMount() {
+    // TODO: Remove this in v10!
+    if ('desktopConfig' in this.props) {}
+  }
   get sortedThemeOverride() {
     const themeOverride = this.props.themeOverride;
 
@@ -89,7 +93,6 @@ let TopNavBarLayout = exports.TopNavBarLayout = (_dec = (0, _emotion.withStyle)(
   }
   render() {
     const _this$props = this.props,
-      desktopConfig = _this$props.desktopConfig,
       smallViewportConfig = _this$props.smallViewportConfig,
       styles = _this$props.styles,
       makeStyles = _this$props.makeStyles,
@@ -100,13 +103,12 @@ let TopNavBarLayout = exports.TopNavBarLayout = (_dec = (0, _emotion.withStyle)(
         elementRef: this.handleRef
       }));
     }
-    return (0, _emotion.jsx)(_DesktopLayout.TopNavBarDesktopLayout, Object.assign({}, desktopConfig, restProps, {
+    return (0, _emotion.jsx)(_DesktopLayout.TopNavBarDesktopLayout, Object.assign({}, restProps, {
       themeOverride: this.sortedThemeOverride.desktopThemeOverride,
       elementRef: this.handleRef
     }));
   }
 }, _class2.displayName = "TopNavBarLayout", _class2.componentId = 'TopNavBar.Layout', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
-  desktopConfig: {},
   smallViewportConfig: {}
 }, _class2.contextType = _TopNavBarContext.TopNavBarContext, _class2)) || _class) || _class);
 var _default = exports.default = TopNavBarLayout;

package/lib/TopNavBar/TopNavBarLayout/props.js

@@ -71,10 +71,9 @@ const smallViewportPropTypes = exports.smallViewportPropTypes = {
 };
 const propTypes = exports.propTypes = {
   ...commonPropTypes,
-  desktopConfig: _propTypes.default.shape(desktopPropTypes),
   smallViewportConfig: _propTypes.default.shape(smallViewportPropTypes).isRequired
 };
 const commonAllowedProps = exports.commonAllowedProps = ['renderBrand', 'renderMenuItems', 'renderActionItems', 'renderUser', 'renderBreadcrumb', 'navLabel', 'elementRef'];
 const desktopAllowedProps = exports.desktopAllowedProps = ['hideActionsUserSeparator'];
 const smallViewportAllowedProps = exports.smallViewportAllowedProps = ['dropdownMenuToggleButtonLabel', 'dropdownMenuToggleButtonTooltip', 'dropdownMenuLabel', 'alternativeTitle', 'renderInPlaceDialogConfig', 'trayMountNode', 'onDropdownMenuToggle', 'onDropdownMenuSelect'];
-const allowedProps = exports.allowedProps = [...commonAllowedProps, 'desktopConfig', 'smallViewportConfig'];
+const allowedProps = exports.allowedProps = [...commonAllowedProps, 'smallViewportConfig'];

package/lib/TopNavBar/__new-tests__/TopNavBar.test.js

@@ -65,7 +65,6 @@ const BaseExample = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     breakpoint: 700
   }, () => /*#__PURE__*/_react.default.createElement(_index.default.Layout, {
-    desktopConfig: {},
     smallViewportConfig: {
       dropdownMenuToggleButtonLabel: 'Toggle Menu',
       dropdownMenuLabel: 'Main Menu'

package/lib/TopNavBar/utils/exampleHelpers.js

@@ -100,14 +100,10 @@ SmallViewportModeWrapper.defaultProps = {
   inverseColor: false
 };
 const getBrand = (config = {}) => {
-  const logo = config.inverseColor ? _exampleSvgFiles.elevateLogoInverse : _exampleSvgFiles.elevateLogo;
-  const nameBackground = !config.hasBrandNameBackground ? void 0 : config.inverseColor ? '#F5F5F5' : '#2D3B45';
   return /*#__PURE__*/_react.default.createElement(_index.TopNavBar.Brand, Object.assign({
     screenReaderLabel: "Brand name",
-    renderName: logo,
     renderIcon: _exampleSvgFiles.elevateIcon,
     iconBackground: "#0097D3",
-    nameBackground: nameBackground,
     href: "/#TopNavBar"
   }, config.brandProps));
 };
@@ -189,9 +185,6 @@ const getBreadcrumb = (_config = {}) => {
 exports.getBreadcrumb = getBreadcrumb;
 const getLayoutProps = (props, config = {}) => {
   return {
-    desktopConfig: {
-      hideActionsUserSeparator: config.hideActionsUserSeparator
-    },
     smallViewportConfig: {
       dropdownMenuToggleButtonLabel: 'Toggle Menu',
       dropdownMenuLabel: 'Main Menu',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-top-nav-bar",
-  "version": "8.56.0",
+  "version": "9.0.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,38 +24,38 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.56.0",
-    "@instructure/emotion": "8.56.0",
-    "@instructure/shared-types": "8.56.0",
-    "@instructure/ui-a11y-content": "8.56.0",
-    "@instructure/ui-avatar": "8.56.0",
-    "@instructure/ui-breadcrumb": "8.56.0",
-    "@instructure/ui-buttons": "8.56.0",
-    "@instructure/ui-dialog": "8.56.0",
-    "@instructure/ui-dom-utils": "8.56.0",
-    "@instructure/ui-drilldown": "8.56.0",
-    "@instructure/ui-icons": "8.56.0",
-    "@instructure/ui-link": "8.56.0",
-    "@instructure/ui-popover": "8.56.0",
-    "@instructure/ui-prop-types": "8.56.0",
-    "@instructure/ui-react-utils": "8.56.0",
-    "@instructure/ui-responsive": "8.56.0",
-    "@instructure/ui-testable": "8.56.0",
-    "@instructure/ui-tooltip": "8.56.0",
-    "@instructure/ui-tray": "8.56.0",
-    "@instructure/ui-truncate-list": "8.56.0",
-    "@instructure/ui-utils": "8.56.0",
-    "@instructure/ui-view": "8.56.0",
+    "@instructure/console": "9.0.0",
+    "@instructure/emotion": "9.0.0",
+    "@instructure/shared-types": "9.0.0",
+    "@instructure/ui-a11y-content": "9.0.0",
+    "@instructure/ui-avatar": "9.0.0",
+    "@instructure/ui-breadcrumb": "9.0.0",
+    "@instructure/ui-buttons": "9.0.0",
+    "@instructure/ui-dialog": "9.0.0",
+    "@instructure/ui-dom-utils": "9.0.0",
+    "@instructure/ui-drilldown": "9.0.0",
+    "@instructure/ui-icons": "9.0.0",
+    "@instructure/ui-link": "9.0.0",
+    "@instructure/ui-popover": "9.0.0",
+    "@instructure/ui-prop-types": "9.0.0",
+    "@instructure/ui-react-utils": "9.0.0",
+    "@instructure/ui-responsive": "9.0.0",
+    "@instructure/ui-testable": "9.0.0",
+    "@instructure/ui-tooltip": "9.0.0",
+    "@instructure/ui-tray": "9.0.0",
+    "@instructure/ui-truncate-list": "9.0.0",
+    "@instructure/ui-utils": "9.0.0",
+    "@instructure/ui-view": "9.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "8.56.0",
-    "@instructure/ui-babel-preset": "8.56.0",
-    "@instructure/ui-color-utils": "8.56.0",
-    "@instructure/ui-scripts": "8.56.0",
-    "@instructure/ui-test-locator": "8.56.0",
-    "@instructure/ui-test-utils": "8.56.0",
-    "@instructure/ui-themes": "8.56.0",
+    "@instructure/ui-axe-check": "9.0.0",
+    "@instructure/ui-babel-preset": "9.0.0",
+    "@instructure/ui-color-utils": "9.0.0",
+    "@instructure/ui-scripts": "9.0.0",
+    "@instructure/ui-test-locator": "9.0.0",
+    "@instructure/ui-test-utils": "9.0.0",
+    "@instructure/ui-themes": "9.0.0",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1"