@instructure/ui-drilldown 10.19.1-snapshot-1 → 10.19.1-snapshot-2

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.19.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.19.0...v10.19.1-snapshot-1) (2025-06-05)
+## [10.19.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.19.0...v10.19.1-snapshot-2) (2025-06-05)
 
-**Note:** Version bump only for package @instructure/ui-drilldown
+
+### Bug Fixes
+
+* **ui-drilldown:** fix highlighting first drilldown option if it is in a group ([3cc159b](https://github.com/instructure/instructure-ui/commit/3cc159bb0b6591bfb10eeeb6558dd384b09649d6))
 
 
 

package/es/Drilldown/index.js

@@ -335,10 +335,10 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         onToggle = _this$props2.onToggle,
         trigger = _this$props2.trigger;
       if (trigger && shown && this.currentPage) {
-        var _this$currentPage$chi;
+        var _this$getFirstOption;
         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;
+        const targetId = actionLabel ? this._headerActionId : (_this$getFirstOption = this.getFirstOption()) === null || _this$getFirstOption === void 0 ? void 0 : _this$getFirstOption.props.id;
         setTimeout(() => {
           this.setState({
             highlightedOptionId: targetId
@@ -356,6 +356,23 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         });
       }
     };
+    this.getFirstOption = () => {
+      var _this$currentPage;
+      const children = Children.toArray((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.children);
+      const child = children[0];
+      if (!child) return void 0;
+
+      // If it's a regular option, return it
+      if (matchComponentTypes(child, [DrilldownOption])) {
+        return child;
+      }
+      // If it's a group, get its options
+      if (matchComponentTypes(child, [Drilldown.Group])) {
+        const groupOptions = Children.toArray(child.props.children);
+        return groupOptions[0];
+      }
+      return void 0;
+    };
     this.state = {
       isShowingPopover: props.trigger ? !!props.show : false,
       activePageId: props.rootPageId,
@@ -464,14 +481,14 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
   }
   get currentPageAriaLabel() {
-    var _this$currentPage;
+    var _this$currentPage2;
     // return, if explicitly set
     if (this.props['aria-labelledby']) {
       return this.props['aria-labelledby'];
     }
 
     // if it has title, point to the title label content
-    if ((_this$currentPage = this.currentPage) !== null && _this$currentPage !== void 0 && _this$currentPage.renderTitle) {
+    if ((_this$currentPage2 = this.currentPage) !== null && _this$currentPage2 !== void 0 && _this$currentPage2.renderTitle) {
       return this._headerTitleLabelId;
     }
 
@@ -782,7 +799,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     });
   }
   renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
-    var _this$currentPage2, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
+    var _this$currentPage3, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
     const styles = this.props.styles;
     let isSelected = false;
     const _option$props = option.props,
@@ -842,7 +859,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     };
     const isOptionDisabled = id !== this._headerBackId && (
     // Back nav is never disabled
-    this.props.disabled || ((_this$currentPage2 = this.currentPage) === null || _this$currentPage2 === void 0 ? void 0 : _this$currentPage2.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
+    this.props.disabled || ((_this$currentPage3 = this.currentPage) === null || _this$currentPage3 === void 0 ? void 0 : _this$currentPage3.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
 
     // display option as disabled
     if (isOptionDisabled) {
@@ -1184,11 +1201,11 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       offsetX: offsetX,
       offsetY: offsetY,
       defaultFocusElement: () => {
-        var _this$currentPage$chi2, _this$_popover2, _this$_popover2$_cont;
+        var _this$getFirstOption2, _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;
+        const targetId = actionLabel ? this._headerActionId : (_this$getFirstOption2 = this.getFirstOption()) === null || _this$getFirstOption2 === void 0 ? void 0 : _this$getFirstOption2.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(`#${CSS.escape(targetId)}`);
       },

package/lib/Drilldown/index.js

@@ -344,10 +344,10 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         onToggle = _this$props2.onToggle,
         trigger = _this$props2.trigger;
       if (trigger && shown && this.currentPage) {
-        var _this$currentPage$chi;
+        var _this$getFirstOption;
         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;
+        const targetId = actionLabel ? this._headerActionId : (_this$getFirstOption = this.getFirstOption()) === null || _this$getFirstOption === void 0 ? void 0 : _this$getFirstOption.props.id;
         setTimeout(() => {
           this.setState({
             highlightedOptionId: targetId
@@ -365,6 +365,23 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         });
       }
     };
+    this.getFirstOption = () => {
+      var _this$currentPage;
+      const children = _react.Children.toArray((_this$currentPage = this.currentPage) === null || _this$currentPage === void 0 ? void 0 : _this$currentPage.children);
+      const child = children[0];
+      if (!child) return void 0;
+
+      // If it's a regular option, return it
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
+        return child;
+      }
+      // If it's a group, get its options
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [Drilldown.Group])) {
+        const groupOptions = _react.Children.toArray(child.props.children);
+        return groupOptions[0];
+      }
+      return void 0;
+    };
     this.state = {
       isShowingPopover: props.trigger ? !!props.show : false,
       activePageId: props.rootPageId,
@@ -473,14 +490,14 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     };
   }
   get currentPageAriaLabel() {
-    var _this$currentPage;
+    var _this$currentPage2;
     // return, if explicitly set
     if (this.props['aria-labelledby']) {
       return this.props['aria-labelledby'];
     }
 
     // if it has title, point to the title label content
-    if ((_this$currentPage = this.currentPage) !== null && _this$currentPage !== void 0 && _this$currentPage.renderTitle) {
+    if ((_this$currentPage2 = this.currentPage) !== null && _this$currentPage2 !== void 0 && _this$currentPage2.renderTitle) {
       return this._headerTitleLabelId;
     }
 
@@ -791,7 +808,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     });
   }
   renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
-    var _this$currentPage2, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
+    var _this$currentPage3, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
     const styles = this.props.styles;
     let isSelected = false;
     const _option$props = option.props,
@@ -851,7 +868,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     };
     const isOptionDisabled = id !== this._headerBackId && (
     // Back nav is never disabled
-    this.props.disabled || ((_this$currentPage2 = this.currentPage) === null || _this$currentPage2 === void 0 ? void 0 : _this$currentPage2.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
+    this.props.disabled || ((_this$currentPage3 = this.currentPage) === null || _this$currentPage3 === void 0 ? void 0 : _this$currentPage3.disabled) || (groupProps === null || groupProps === void 0 ? void 0 : groupProps.disabled) || disabled);
 
     // display option as disabled
     if (isOptionDisabled) {
@@ -1193,11 +1210,11 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       offsetX: offsetX,
       offsetY: offsetY,
       defaultFocusElement: () => {
-        var _this$currentPage$chi2, _this$_popover2, _this$_popover2$_cont;
+        var _this$getFirstOption2, _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;
+        const targetId = actionLabel ? this._headerActionId : (_this$getFirstOption2 = this.getFirstOption()) === null || _this$getFirstOption2 === void 0 ? void 0 : _this$getFirstOption2.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(`#${CSS.escape(targetId)}`);
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "10.19.1-snapshot-1",
+  "version": "10.19.1-snapshot-2",
   "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.19.1-snapshot-1",
-    "@instructure/emotion": "10.19.1-snapshot-1",
-    "@instructure/shared-types": "10.19.1-snapshot-1",
-    "@instructure/ui-dom-utils": "10.19.1-snapshot-1",
-    "@instructure/ui-icons": "10.19.1-snapshot-1",
-    "@instructure/ui-options": "10.19.1-snapshot-1",
-    "@instructure/ui-popover": "10.19.1-snapshot-1",
-    "@instructure/ui-position": "10.19.1-snapshot-1",
-    "@instructure/ui-prop-types": "10.19.1-snapshot-1",
-    "@instructure/ui-react-utils": "10.19.1-snapshot-1",
-    "@instructure/ui-selectable": "10.19.1-snapshot-1",
-    "@instructure/ui-testable": "10.19.1-snapshot-1",
-    "@instructure/ui-utils": "10.19.1-snapshot-1",
-    "@instructure/ui-view": "10.19.1-snapshot-1",
+    "@instructure/console": "10.19.1-snapshot-2",
+    "@instructure/emotion": "10.19.1-snapshot-2",
+    "@instructure/shared-types": "10.19.1-snapshot-2",
+    "@instructure/ui-dom-utils": "10.19.1-snapshot-2",
+    "@instructure/ui-icons": "10.19.1-snapshot-2",
+    "@instructure/ui-options": "10.19.1-snapshot-2",
+    "@instructure/ui-popover": "10.19.1-snapshot-2",
+    "@instructure/ui-position": "10.19.1-snapshot-2",
+    "@instructure/ui-prop-types": "10.19.1-snapshot-2",
+    "@instructure/ui-react-utils": "10.19.1-snapshot-2",
+    "@instructure/ui-selectable": "10.19.1-snapshot-2",
+    "@instructure/ui-testable": "10.19.1-snapshot-2",
+    "@instructure/ui-utils": "10.19.1-snapshot-2",
+    "@instructure/ui-view": "10.19.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.19.1-snapshot-1",
-    "@instructure/ui-babel-preset": "10.19.1-snapshot-1",
-    "@instructure/ui-color-utils": "10.19.1-snapshot-1",
-    "@instructure/ui-scripts": "10.19.1-snapshot-1",
-    "@instructure/ui-test-utils": "10.19.1-snapshot-1",
-    "@instructure/ui-themes": "10.19.1-snapshot-1",
+    "@instructure/ui-axe-check": "10.19.1-snapshot-2",
+    "@instructure/ui-babel-preset": "10.19.1-snapshot-2",
+    "@instructure/ui-color-utils": "10.19.1-snapshot-2",
+    "@instructure/ui-scripts": "10.19.1-snapshot-2",
+    "@instructure/ui-test-utils": "10.19.1-snapshot-2",
+    "@instructure/ui-themes": "10.19.1-snapshot-2",
     "@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

@@ -893,7 +893,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       // Use action ID if exists, otherwise first non-action option's ID
       const targetId = actionLabel
         ? this._headerActionId
-        : this.currentPage.children[0]?.props.id
+        : this.getFirstOption()?.props.id
       setTimeout(() => {
         this.setState({
           highlightedOptionId: targetId
@@ -911,6 +911,24 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     }
   }
 
+  getFirstOption = () => {
+    const children = Children.toArray(this.currentPage?.children)
+
+    const child = children[0]
+    if (!child) return undefined
+
+    // If it's a regular option, return it
+    if (matchComponentTypes<OptionChild>(child, [DrilldownOption])) {
+      return child
+    }
+    // If it's a group, get its options
+    if (matchComponentTypes<GroupChild>(child, [Drilldown.Group])) {
+      const groupOptions = Children.toArray(child.props.children)
+      return groupOptions[0] as OptionChild
+    }
+    return undefined
+  }
+
   renderList(
     getOptionProps: SelectableRender['getOptionProps'],
     getDisabledOptionProps: SelectableRender['getDisabledOptionProps']
@@ -1512,7 +1530,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           // Use action ID if exists, otherwise first non-action option's ID
           const targetId = actionLabel
             ? this._headerActionId
-            : this.currentPage.children[0]?.props.id
+            : this.getFirstOption()?.props.id
 
           if (!targetId) return null
           return this._popover?._contentElement?.querySelector(