@instructure/ui-drilldown 10.18.1-snapshot-5 → 10.18.1-snapshot-7

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.18.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.18.0...v10.18.1-snapshot-5) (2025-05-29)
+## [10.18.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v10.18.0...v10.18.1-snapshot-7) (2025-05-29)
 
-**Note:** Version bump only for package @instructure/ui-drilldown
+
+### Bug Fixes
+
+* **ui-top-nav-bar,ui-popover,ui-drilldown:** fix Drilldown's and TopNavBar's keyboard navigation issues ([6d7d3fa](https://github.com/instructure/instructure-ui/commit/6d7d3faa6c9fe8e7f2b987cb11ec2d9b00732d5b))
 
 
 

package/es/Drilldown/index.js

@@ -331,7 +331,20 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       }
     };
     this.handleToggle = (event, shown) => {
-      const onToggle = this.props.onToggle;
+      const _this$props2 = this.props,
+        onToggle = _this$props2.onToggle,
+        trigger = _this$props2.trigger;
+      if (trigger && shown && this.currentPage) {
+        var _this$currentPage$chi;
+        const actionLabel = callRenderProp(this.currentPage.renderActionLabel);
+        // Use action ID if exists, otherwise first non-action option's ID
+        const targetId = actionLabel ? this._headerActionId : (_this$currentPage$chi = this.currentPage.children[0]) === null || _this$currentPage$chi === void 0 ? void 0 : _this$currentPage$chi.props.id;
+        setTimeout(() => {
+          this.setState({
+            highlightedOptionId: targetId
+          });
+        }, 10);
+      }
       this.setState({
         isShowingPopover: shown
       });
@@ -359,12 +372,12 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this._headerActionId = props.deterministicId('DrilldownHeader-Action');
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
   }
   componentDidUpdate(_prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
     if (prevState.activePageId !== this.state.activePageId) {
       // on page change with mouse navigation, some option can get rendered
       // under the cursor and get focused, so we need to wait a tick to see
@@ -531,9 +544,9 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
   get headerChildren() {
     const currentPage = this.currentPage;
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      deterministicId = _this$props4.deterministicId;
+    const _this$props5 = this.props,
+      styles = _this$props5.styles,
+      deterministicId = _this$props5.deterministicId;
     const headerChildren = [];
     if (!currentPage) {
       return headerChildren;
@@ -1011,19 +1024,19 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     return groupChildren;
   }
   renderPage() {
-    const _this$props5 = this.props,
-      styles = _this$props5.styles,
-      overflowY = _this$props5.overflowY,
-      overflowX = _this$props5.overflowX,
-      height = _this$props5.height,
-      width = _this$props5.width,
-      minHeight = _this$props5.minHeight,
-      minWidth = _this$props5.minWidth,
-      maxHeight = _this$props5.maxHeight,
-      maxWidth = _this$props5.maxWidth,
-      role = _this$props5.role,
-      as = _this$props5.as,
-      label = _this$props5.label;
+    const _this$props6 = this.props,
+      styles = _this$props6.styles,
+      overflowY = _this$props6.overflowY,
+      overflowX = _this$props6.overflowX,
+      height = _this$props6.height,
+      width = _this$props6.width,
+      minHeight = _this$props6.minHeight,
+      minWidth = _this$props6.minWidth,
+      maxHeight = _this$props6.maxHeight,
+      maxWidth = _this$props6.maxWidth,
+      role = _this$props6.role,
+      as = _this$props6.as,
+      label = _this$props6.label;
     if (!this.currentPage) {
       return null;
     }
@@ -1123,25 +1136,25 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   render() {
     // clear temporary option store
     this._activeOptionsMap = {};
-    const _this$props6 = this.props,
-      show = _this$props6.show,
-      defaultShow = _this$props6.defaultShow,
-      placement = _this$props6.placement,
-      withArrow = _this$props6.withArrow,
-      shouldContainFocus = _this$props6.shouldContainFocus,
-      shouldReturnFocus = _this$props6.shouldReturnFocus,
-      trigger = _this$props6.trigger,
-      mountNode = _this$props6.mountNode,
-      constrain = _this$props6.constrain,
-      positionTarget = _this$props6.positionTarget,
-      positionContainerDisplay = _this$props6.positionContainerDisplay,
-      popoverRef = _this$props6.popoverRef,
-      disabled = _this$props6.disabled,
-      onDismiss = _this$props6.onDismiss,
-      onFocus = _this$props6.onFocus,
-      onMouseOver = _this$props6.onMouseOver,
-      offsetX = _this$props6.offsetX,
-      offsetY = _this$props6.offsetY;
+    const _this$props7 = this.props,
+      show = _this$props7.show,
+      defaultShow = _this$props7.defaultShow,
+      placement = _this$props7.placement,
+      withArrow = _this$props7.withArrow,
+      shouldContainFocus = _this$props7.shouldContainFocus,
+      shouldReturnFocus = _this$props7.shouldReturnFocus,
+      trigger = _this$props7.trigger,
+      mountNode = _this$props7.mountNode,
+      constrain = _this$props7.constrain,
+      positionTarget = _this$props7.positionTarget,
+      positionContainerDisplay = _this$props7.positionContainerDisplay,
+      popoverRef = _this$props7.popoverRef,
+      disabled = _this$props7.disabled,
+      onDismiss = _this$props7.onDismiss,
+      onFocus = _this$props7.onFocus,
+      onMouseOver = _this$props7.onMouseOver,
+      offsetX = _this$props7.offsetX,
+      offsetY = _this$props7.offsetY;
     return trigger ? _jsx(Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
@@ -1156,7 +1169,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         this.handleToggle(event, false);
       },
       onShowContent: event => this.handleToggle(event, true),
-      mountNode: mountNode,
+      mountNode: mountNode || this.ref,
       placement: placement,
       withArrow: withArrow,
       positionTarget: positionTarget,
@@ -1170,6 +1183,15 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       onMouseOver: onMouseOver,
       offsetX: offsetX,
       offsetY: offsetY,
+      defaultFocusElement: () => {
+        var _this$currentPage$chi2, _this$_popover2, _this$_popover2$_cont;
+        if (!this.currentPage) return null;
+        const actionLabel = callRenderProp(this.currentPage.renderActionLabel);
+        // Use action ID if exists, otherwise first non-action option's ID
+        const targetId = actionLabel ? this._headerActionId : (_this$currentPage$chi2 = this.currentPage.children[0]) === null || _this$currentPage$chi2 === void 0 ? void 0 : _this$currentPage$chi2.props.id;
+        if (!targetId) return null;
+        return (_this$_popover2 = this._popover) === null || _this$_popover2 === void 0 ? void 0 : (_this$_popover2$_cont = _this$_popover2._contentElement) === null || _this$_popover2$_cont === void 0 ? void 0 : _this$_popover2$_cont.querySelector(`#${targetId}`);
+      },
       elementRef: element => {
         // setting ref for "Popover" version, the popover root
         // (if there is no trigger, we set it in handleDrilldownRef)

package/lib/Drilldown/index.js

@@ -340,7 +340,20 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       }
     };
     this.handleToggle = (event, shown) => {
-      const onToggle = this.props.onToggle;
+      const _this$props2 = this.props,
+        onToggle = _this$props2.onToggle,
+        trigger = _this$props2.trigger;
+      if (trigger && shown && this.currentPage) {
+        var _this$currentPage$chi;
+        const actionLabel = (0, _callRenderProp.callRenderProp)(this.currentPage.renderActionLabel);
+        // Use action ID if exists, otherwise first non-action option's ID
+        const targetId = actionLabel ? this._headerActionId : (_this$currentPage$chi = this.currentPage.children[0]) === null || _this$currentPage$chi === void 0 ? void 0 : _this$currentPage$chi.props.id;
+        setTimeout(() => {
+          this.setState({
+            highlightedOptionId: targetId
+          });
+        }, 10);
+      }
       this.setState({
         isShowingPopover: shown
       });
@@ -368,12 +381,12 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     this._headerActionId = props.deterministicId('DrilldownHeader-Action');
   }
   componentDidMount() {
-    var _this$props$makeStyle, _this$props2;
-    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
+    var _this$props$makeStyle, _this$props3;
+    (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3, this.makeStylesVariables);
   }
   componentDidUpdate(_prevProps, prevState) {
-    var _this$props$makeStyle2, _this$props3;
-    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
+    var _this$props$makeStyle2, _this$props4;
+    (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4, this.makeStylesVariables);
     if (prevState.activePageId !== this.state.activePageId) {
       // on page change with mouse navigation, some option can get rendered
       // under the cursor and get focused, so we need to wait a tick to see
@@ -540,9 +553,9 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
   }
   get headerChildren() {
     const currentPage = this.currentPage;
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      deterministicId = _this$props4.deterministicId;
+    const _this$props5 = this.props,
+      styles = _this$props5.styles,
+      deterministicId = _this$props5.deterministicId;
     const headerChildren = [];
     if (!currentPage) {
       return headerChildren;
@@ -1020,19 +1033,19 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     return groupChildren;
   }
   renderPage() {
-    const _this$props5 = this.props,
-      styles = _this$props5.styles,
-      overflowY = _this$props5.overflowY,
-      overflowX = _this$props5.overflowX,
-      height = _this$props5.height,
-      width = _this$props5.width,
-      minHeight = _this$props5.minHeight,
-      minWidth = _this$props5.minWidth,
-      maxHeight = _this$props5.maxHeight,
-      maxWidth = _this$props5.maxWidth,
-      role = _this$props5.role,
-      as = _this$props5.as,
-      label = _this$props5.label;
+    const _this$props6 = this.props,
+      styles = _this$props6.styles,
+      overflowY = _this$props6.overflowY,
+      overflowX = _this$props6.overflowX,
+      height = _this$props6.height,
+      width = _this$props6.width,
+      minHeight = _this$props6.minHeight,
+      minWidth = _this$props6.minWidth,
+      maxHeight = _this$props6.maxHeight,
+      maxWidth = _this$props6.maxWidth,
+      role = _this$props6.role,
+      as = _this$props6.as,
+      label = _this$props6.label;
     if (!this.currentPage) {
       return null;
     }
@@ -1132,25 +1145,25 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
   render() {
     // clear temporary option store
     this._activeOptionsMap = {};
-    const _this$props6 = this.props,
-      show = _this$props6.show,
-      defaultShow = _this$props6.defaultShow,
-      placement = _this$props6.placement,
-      withArrow = _this$props6.withArrow,
-      shouldContainFocus = _this$props6.shouldContainFocus,
-      shouldReturnFocus = _this$props6.shouldReturnFocus,
-      trigger = _this$props6.trigger,
-      mountNode = _this$props6.mountNode,
-      constrain = _this$props6.constrain,
-      positionTarget = _this$props6.positionTarget,
-      positionContainerDisplay = _this$props6.positionContainerDisplay,
-      popoverRef = _this$props6.popoverRef,
-      disabled = _this$props6.disabled,
-      onDismiss = _this$props6.onDismiss,
-      onFocus = _this$props6.onFocus,
-      onMouseOver = _this$props6.onMouseOver,
-      offsetX = _this$props6.offsetX,
-      offsetY = _this$props6.offsetY;
+    const _this$props7 = this.props,
+      show = _this$props7.show,
+      defaultShow = _this$props7.defaultShow,
+      placement = _this$props7.placement,
+      withArrow = _this$props7.withArrow,
+      shouldContainFocus = _this$props7.shouldContainFocus,
+      shouldReturnFocus = _this$props7.shouldReturnFocus,
+      trigger = _this$props7.trigger,
+      mountNode = _this$props7.mountNode,
+      constrain = _this$props7.constrain,
+      positionTarget = _this$props7.positionTarget,
+      positionContainerDisplay = _this$props7.positionContainerDisplay,
+      popoverRef = _this$props7.popoverRef,
+      disabled = _this$props7.disabled,
+      onDismiss = _this$props7.onDismiss,
+      onFocus = _this$props7.onFocus,
+      onMouseOver = _this$props7.onMouseOver,
+      offsetX = _this$props7.offsetX,
+      offsetY = _this$props7.offsetY;
     return trigger ? (0, _jsxRuntime.jsx)(_Popover.Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
@@ -1165,7 +1178,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         this.handleToggle(event, false);
       },
       onShowContent: event => this.handleToggle(event, true),
-      mountNode: mountNode,
+      mountNode: mountNode || this.ref,
       placement: placement,
       withArrow: withArrow,
       positionTarget: positionTarget,
@@ -1179,6 +1192,15 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       onMouseOver: onMouseOver,
       offsetX: offsetX,
       offsetY: offsetY,
+      defaultFocusElement: () => {
+        var _this$currentPage$chi2, _this$_popover2, _this$_popover2$_cont;
+        if (!this.currentPage) return null;
+        const actionLabel = (0, _callRenderProp.callRenderProp)(this.currentPage.renderActionLabel);
+        // Use action ID if exists, otherwise first non-action option's ID
+        const targetId = actionLabel ? this._headerActionId : (_this$currentPage$chi2 = this.currentPage.children[0]) === null || _this$currentPage$chi2 === void 0 ? void 0 : _this$currentPage$chi2.props.id;
+        if (!targetId) return null;
+        return (_this$_popover2 = this._popover) === null || _this$_popover2 === void 0 ? void 0 : (_this$_popover2$_cont = _this$_popover2._contentElement) === null || _this$_popover2$_cont === void 0 ? void 0 : _this$_popover2$_cont.querySelector(`#${targetId}`);
+      },
       elementRef: element => {
         // setting ref for "Popover" version, the popover root
         // (if there is no trigger, we set it in handleDrilldownRef)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "10.18.1-snapshot-5",
+  "version": "10.18.1-snapshot-7",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,29 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.18.1-snapshot-5",
-    "@instructure/emotion": "10.18.1-snapshot-5",
-    "@instructure/shared-types": "10.18.1-snapshot-5",
-    "@instructure/ui-dom-utils": "10.18.1-snapshot-5",
-    "@instructure/ui-icons": "10.18.1-snapshot-5",
-    "@instructure/ui-options": "10.18.1-snapshot-5",
-    "@instructure/ui-popover": "10.18.1-snapshot-5",
-    "@instructure/ui-position": "10.18.1-snapshot-5",
-    "@instructure/ui-prop-types": "10.18.1-snapshot-5",
-    "@instructure/ui-react-utils": "10.18.1-snapshot-5",
-    "@instructure/ui-selectable": "10.18.1-snapshot-5",
-    "@instructure/ui-testable": "10.18.1-snapshot-5",
-    "@instructure/ui-utils": "10.18.1-snapshot-5",
-    "@instructure/ui-view": "10.18.1-snapshot-5",
+    "@instructure/console": "10.18.1-snapshot-7",
+    "@instructure/emotion": "10.18.1-snapshot-7",
+    "@instructure/shared-types": "10.18.1-snapshot-7",
+    "@instructure/ui-dom-utils": "10.18.1-snapshot-7",
+    "@instructure/ui-icons": "10.18.1-snapshot-7",
+    "@instructure/ui-options": "10.18.1-snapshot-7",
+    "@instructure/ui-popover": "10.18.1-snapshot-7",
+    "@instructure/ui-position": "10.18.1-snapshot-7",
+    "@instructure/ui-prop-types": "10.18.1-snapshot-7",
+    "@instructure/ui-react-utils": "10.18.1-snapshot-7",
+    "@instructure/ui-selectable": "10.18.1-snapshot-7",
+    "@instructure/ui-testable": "10.18.1-snapshot-7",
+    "@instructure/ui-utils": "10.18.1-snapshot-7",
+    "@instructure/ui-view": "10.18.1-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.18.1-snapshot-5",
-    "@instructure/ui-babel-preset": "10.18.1-snapshot-5",
-    "@instructure/ui-color-utils": "10.18.1-snapshot-5",
-    "@instructure/ui-scripts": "10.18.1-snapshot-5",
-    "@instructure/ui-test-utils": "10.18.1-snapshot-5",
-    "@instructure/ui-themes": "10.18.1-snapshot-5",
+    "@instructure/ui-axe-check": "10.18.1-snapshot-7",
+    "@instructure/ui-babel-preset": "10.18.1-snapshot-7",
+    "@instructure/ui-color-utils": "10.18.1-snapshot-7",
+    "@instructure/ui-scripts": "10.18.1-snapshot-7",
+    "@instructure/ui-test-utils": "10.18.1-snapshot-7",
+    "@instructure/ui-themes": "10.18.1-snapshot-7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Drilldown/index.tsx

@@ -887,8 +887,20 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
   }
 
   handleToggle = (event: React.UIEvent | React.FocusEvent, shown: boolean) => {
-    const { onToggle } = this.props
-
+    const { onToggle, trigger } = this.props
+
+    if (trigger && shown && this.currentPage) {
+      const actionLabel = callRenderProp(this.currentPage.renderActionLabel)
+      // Use action ID if exists, otherwise first non-action option's ID
+      const targetId = actionLabel
+        ? this._headerActionId
+        : this.currentPage.children[0]?.props.id
+      setTimeout(() => {
+        this.setState({
+          highlightedOptionId: targetId
+        })
+      }, 10)
+    }
     this.setState({ isShowingPopover: shown })
 
     if (typeof onToggle === 'function') {
@@ -1481,7 +1493,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           this.handleToggle(event, false)
         }}
         onShowContent={(event) => this.handleToggle(event, true)}
-        mountNode={mountNode}
+        mountNode={mountNode || this.ref}
         placement={placement}
         withArrow={withArrow}
         positionTarget={positionTarget}
@@ -1495,6 +1507,17 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
         onMouseOver={onMouseOver}
         offsetX={offsetX}
         offsetY={offsetY}
+        defaultFocusElement={() => {
+          if (!this.currentPage) return null
+          const actionLabel = callRenderProp(this.currentPage.renderActionLabel)
+          // Use action ID if exists, otherwise first non-action option's ID
+          const targetId = actionLabel
+            ? this._headerActionId
+            : this.currentPage.children[0]?.props.id
+
+          if (!targetId) return null
+          return this._popover?._contentElement?.querySelector(`#${targetId}`)
+        }}
         elementRef={(element) => {
           // setting ref for "Popover" version, the popover root
           // (if there is no trigger, we set it in handleDrilldownRef)

package/src/Drilldown/props.ts

@@ -207,7 +207,7 @@ type DrilldownOwnProps = {
 
   /**
    * If a trigger is supplied, an element or a function returning an element
-   * to use as the mount node for the `<Drilldown />` (defaults to `document.body`)
+   * to use as the mount node for the `<Drilldown />` (defaults to the component itself)
    */
   mountNode?: PositionMountNode