@instructure/ui-top-nav-bar 10.18.1 → 10.18.2-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.18.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.18.1...v10.18.2-snapshot-0) (2025-06-02)
+
+
+### Bug Fixes
+
+* **ui-top-nav-bar,ui-buttons:** display a focus ring in TopNavBar if a button has a Popover open ([1a03763](https://github.com/instructure/instructure-ui/commit/1a03763f99db390ec6cea58a71ef118930be64d8))
+
+
+
+
+
 ## [10.18.1](https://github.com/instructure/instructure-ui/compare/v10.18.0...v10.18.1) (2025-05-29)
 
 

package/es/TopNavBar/TopNavBarItem/index.js

@@ -72,6 +72,16 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
         itemRef(el);
       }
     };
+    this.onFocus = () => {
+      this.setState({
+        isFocused: true
+      });
+    };
+    this.onBlur = () => {
+      this.setState({
+        isFocused: false
+      });
+    };
     this.handleKeyDown = e => {
       if (e.key === 'ArrowDown') {
         if (this.shouldRenderSubmenu && !this.state.isSubmenuOpen || this.shouldRenderPopover && !this.state.isPopoverOpen) {
@@ -99,7 +109,8 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     this._tooltipContentId = props.deterministicId('TopNavBarItem-tooltip');
     this.state = {
       isSubmenuOpen: false,
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      isFocused: false
     };
   }
   componentDidMount() {
@@ -265,7 +276,8 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       renderSubmenu = _this$props5.renderSubmenu,
       statusOriginal = _this$props5.status,
       renderAvatar = _this$props5.renderAvatar,
-      renderIcon = _this$props5.renderIcon;
+      renderIcon = _this$props5.renderIcon,
+      withFocusOutline = _this$props5.withFocusOutline;
     let href = hrefOriginal;
     let onClick = onClickOriginal;
     let status = statusOriginal;
@@ -314,15 +326,16 @@ let TopNavBarItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       onClick,
       onMouseOver,
       onMouseOut,
-      onFocus,
-      onBlur,
+      onFocus: createChainedFunction(onFocus, this.onFocus),
+      onBlur: createChainedFunction(onBlur, this.onBlur),
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       onKeyUp,
       renderIcon,
       themeOverride: this.buttonThemeOverride,
       elementRef: e => {
         this.handleItemRef(e);
-      }
+      },
+      withFocusOutline: withFocusOutline || this.hasOpenPopover || this.state.isFocused
     };
   }
   renderContent() {

package/es/TopNavBar/TopNavBarItem/props.js

@@ -62,7 +62,8 @@ const propTypes = {
   onKeyUp: PropTypes.func,
   elementRef: PropTypes.func,
   itemRef: PropTypes.func,
-  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never'])
+  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never']),
+  withFocusOutline: PropTypes.bool
 };
-const allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick'];
+const allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick', 'withFocusOutline'];
 export { propTypes, allowedProps, topNavBarItemTooltipPropType };

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

@@ -255,7 +255,8 @@ let TopNavBarSmallViewportLayout = (_dec = withDeterministicId(), _dec2 = withSt
           itemSpacing: '0.375rem'
         },
         'aria-haspopup': 'menu',
-        'aria-expanded': isDropdownMenuOpen
+        'aria-expanded': isDropdownMenuOpen,
+        withFocusOutline: isDropdownMenuOpen ? true : void 0
       };
       const alternativeTitleIconProps = {
         size: 'x-small',

package/lib/TopNavBar/TopNavBarItem/index.js

@@ -84,6 +84,16 @@ let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.wit
         itemRef(el);
       }
     };
+    this.onFocus = () => {
+      this.setState({
+        isFocused: true
+      });
+    };
+    this.onBlur = () => {
+      this.setState({
+        isFocused: false
+      });
+    };
     this.handleKeyDown = e => {
       if (e.key === 'ArrowDown') {
         if (this.shouldRenderSubmenu && !this.state.isSubmenuOpen || this.shouldRenderPopover && !this.state.isPopoverOpen) {
@@ -111,7 +121,8 @@ let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.wit
     this._tooltipContentId = props.deterministicId('TopNavBarItem-tooltip');
     this.state = {
       isSubmenuOpen: false,
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      isFocused: false
     };
   }
   componentDidMount() {
@@ -277,7 +288,8 @@ let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.wit
       renderSubmenu = _this$props5.renderSubmenu,
       statusOriginal = _this$props5.status,
       renderAvatar = _this$props5.renderAvatar,
-      renderIcon = _this$props5.renderIcon;
+      renderIcon = _this$props5.renderIcon,
+      withFocusOutline = _this$props5.withFocusOutline;
     let href = hrefOriginal;
     let onClick = onClickOriginal;
     let status = statusOriginal;
@@ -326,15 +338,16 @@ let TopNavBarItem = exports.TopNavBarItem = (_dec = (0, _withDeterministicId.wit
       onClick,
       onMouseOver,
       onMouseOut,
-      onFocus,
-      onBlur,
+      onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.onFocus),
+      onBlur: (0, _createChainedFunction.createChainedFunction)(onBlur, this.onBlur),
       onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
       onKeyUp,
       renderIcon,
       themeOverride: this.buttonThemeOverride,
       elementRef: e => {
         this.handleItemRef(e);
-      }
+      },
+      withFocusOutline: withFocusOutline || this.hasOpenPopover || this.state.isFocused
     };
   }
   renderContent() {

package/lib/TopNavBar/TopNavBarItem/props.js

@@ -69,6 +69,7 @@ const propTypes = exports.propTypes = {
   onKeyUp: _propTypes.default.func,
   elementRef: _propTypes.default.func,
   itemRef: _propTypes.default.func,
-  shouldCloseOnClick: _propTypes.default.oneOf(['auto', 'always', 'never'])
+  shouldCloseOnClick: _propTypes.default.oneOf(['auto', 'always', 'never']),
+  withFocusOutline: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick'];
+const allowedProps = exports.allowedProps = ['id', 'as', 'children', 'variant', 'status', 'renderSubmenu', 'showSubmenuChevron', 'customPopoverConfig', 'tooltip', 'renderAvatar', 'renderIcon', 'href', 'onClick', 'onHiddenClick', 'onSubmenuToggle', 'onMouseOver', 'onMouseOut', 'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'elementRef', 'itemRef', 'shouldCloseOnClick', 'withFocusOutline'];

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

@@ -267,7 +267,8 @@ let TopNavBarSmallViewportLayout = exports.TopNavBarSmallViewportLayout = (_dec
           itemSpacing: '0.375rem'
         },
         'aria-haspopup': 'menu',
-        'aria-expanded': isDropdownMenuOpen
+        'aria-expanded': isDropdownMenuOpen,
+        withFocusOutline: isDropdownMenuOpen ? true : void 0
       };
       const alternativeTitleIconProps = {
         size: 'x-small',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-top-nav-bar",
-  "version": "10.18.1",
+  "version": "10.18.2-snapshot-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.26.0",
-    "@instructure/console": "10.18.1",
-    "@instructure/emotion": "10.18.1",
-    "@instructure/shared-types": "10.18.1",
-    "@instructure/ui-a11y-content": "10.18.1",
-    "@instructure/ui-avatar": "10.18.1",
-    "@instructure/ui-breadcrumb": "10.18.1",
-    "@instructure/ui-buttons": "10.18.1",
-    "@instructure/ui-dialog": "10.18.1",
-    "@instructure/ui-dom-utils": "10.18.1",
-    "@instructure/ui-drilldown": "10.18.1",
-    "@instructure/ui-icons": "10.18.1",
-    "@instructure/ui-link": "10.18.1",
-    "@instructure/ui-popover": "10.18.1",
-    "@instructure/ui-prop-types": "10.18.1",
-    "@instructure/ui-react-utils": "10.18.1",
-    "@instructure/ui-responsive": "10.18.1",
-    "@instructure/ui-testable": "10.18.1",
-    "@instructure/ui-tooltip": "10.18.1",
-    "@instructure/ui-tray": "10.18.1",
-    "@instructure/ui-truncate-list": "10.18.1",
-    "@instructure/ui-utils": "10.18.1",
-    "@instructure/ui-view": "10.18.1",
+    "@instructure/console": "10.18.2-snapshot-0",
+    "@instructure/emotion": "10.18.2-snapshot-0",
+    "@instructure/shared-types": "10.18.2-snapshot-0",
+    "@instructure/ui-a11y-content": "10.18.2-snapshot-0",
+    "@instructure/ui-avatar": "10.18.2-snapshot-0",
+    "@instructure/ui-breadcrumb": "10.18.2-snapshot-0",
+    "@instructure/ui-buttons": "10.18.2-snapshot-0",
+    "@instructure/ui-dialog": "10.18.2-snapshot-0",
+    "@instructure/ui-dom-utils": "10.18.2-snapshot-0",
+    "@instructure/ui-drilldown": "10.18.2-snapshot-0",
+    "@instructure/ui-icons": "10.18.2-snapshot-0",
+    "@instructure/ui-link": "10.18.2-snapshot-0",
+    "@instructure/ui-popover": "10.18.2-snapshot-0",
+    "@instructure/ui-prop-types": "10.18.2-snapshot-0",
+    "@instructure/ui-react-utils": "10.18.2-snapshot-0",
+    "@instructure/ui-responsive": "10.18.2-snapshot-0",
+    "@instructure/ui-testable": "10.18.2-snapshot-0",
+    "@instructure/ui-tooltip": "10.18.2-snapshot-0",
+    "@instructure/ui-tray": "10.18.2-snapshot-0",
+    "@instructure/ui-truncate-list": "10.18.2-snapshot-0",
+    "@instructure/ui-utils": "10.18.2-snapshot-0",
+    "@instructure/ui-view": "10.18.2-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.18.1",
-    "@instructure/ui-babel-preset": "10.18.1",
-    "@instructure/ui-color-utils": "10.18.1",
-    "@instructure/ui-scripts": "10.18.1",
-    "@instructure/ui-test-locator": "10.18.1",
-    "@instructure/ui-test-utils": "10.18.1",
-    "@instructure/ui-themes": "10.18.1",
+    "@instructure/ui-axe-check": "10.18.2-snapshot-0",
+    "@instructure/ui-babel-preset": "10.18.2-snapshot-0",
+    "@instructure/ui-color-utils": "10.18.2-snapshot-0",
+    "@instructure/ui-scripts": "10.18.2-snapshot-0",
+    "@instructure/ui-test-locator": "10.18.2-snapshot-0",
+    "@instructure/ui-test-utils": "10.18.2-snapshot-0",
+    "@instructure/ui-themes": "10.18.2-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/TopNavBar/TopNavBarItem/index.tsx

@@ -128,7 +128,8 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
 
     this.state = {
       isSubmenuOpen: false,
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      isFocused: false
     }
   }
 
@@ -347,7 +348,8 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
       renderSubmenu,
       status: statusOriginal,
       renderAvatar,
-      renderIcon
+      renderIcon,
+      withFocusOutline
     } = this.props
 
     let href = hrefOriginal
@@ -423,18 +425,28 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
       onClick,
       onMouseOver,
       onMouseOut,
-      onFocus,
-      onBlur,
+      onFocus: createChainedFunction(onFocus, this.onFocus),
+      onBlur: createChainedFunction(onBlur, this.onBlur),
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       onKeyUp,
       renderIcon,
       themeOverride: this.buttonThemeOverride,
       elementRef: (e) => {
         this.handleItemRef(e as HTMLButtonElement | HTMLLinkElement)
-      }
+      },
+      withFocusOutline:
+        withFocusOutline || this.hasOpenPopover || this.state.isFocused
     }
   }
 
+  onFocus = () => {
+    this.setState({ isFocused: true })
+  }
+
+  onBlur = () => {
+    this.setState({ isFocused: false })
+  }
+
   handleKeyDown: TopNavBarItemProps['onKeyDown'] = (e) => {
     if (e.key === 'ArrowDown') {
       if (

package/src/TopNavBar/TopNavBarItem/props.ts

@@ -254,6 +254,14 @@ type TopNavBarItemOwnProps = {
    * Should close the container menu component, if clicked on the option marked with this prop
    */
   shouldCloseOnClick?: ShouldCloseOnClick
+
+  /**
+   * Manually control if this component should display a focus outline.
+   *
+   * When left `undefined` (which is the default) the focus outline will display
+   * if this component is focusable and receives focus or has an open popover.
+   */
+  withFocusOutline?: boolean
 }
 
 type PropKeys = keyof TopNavBarItemOwnProps
@@ -281,6 +289,7 @@ type TopNavBarItemStyle = ComponentStyle<
 type TopNavBarItemState = {
   isSubmenuOpen: boolean
   isPopoverOpen: boolean
+  isFocused: boolean
 }
 
 type TopNavBarItemStyleProps = {
@@ -316,7 +325,8 @@ const propTypes: PropValidators<PropKeys> = {
   onKeyUp: PropTypes.func,
   elementRef: PropTypes.func,
   itemRef: PropTypes.func,
-  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never'])
+  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never']),
+  withFocusOutline: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -343,7 +353,8 @@ const allowedProps: AllowedPropKeys = [
   'onKeyUp',
   'elementRef',
   'itemRef',
-  'shouldCloseOnClick'
+  'shouldCloseOnClick',
+  'withFocusOutline'
 ]
 
 export type {

package/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx

@@ -400,7 +400,8 @@ class TopNavBarSmallViewportLayout extends Component<
         tooltip: dropdownMenuToggleButtonTooltip,
         themeOverride: { itemSpacing: '0.375rem' },
         'aria-haspopup': 'menu',
-        'aria-expanded': isDropdownMenuOpen
+        'aria-expanded': isDropdownMenuOpen,
+        withFocusOutline: isDropdownMenuOpen ? true : undefined
       }
 
       const alternativeTitleIconProps = {