@instructure/ui-drilldown 11.7.4-snapshot-14 → 11.7.4-snapshot-49

package/lib/Drilldown/v2/index.js

@@ -21,12 +21,12 @@ var _latest3 = require("@instructure/ui-popover/latest");
 var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
 var _uiIcons = require("@instructure/ui-icons");
 var _emotion = require("@instructure/emotion");
-var _DrilldownSeparator = require("./DrilldownSeparator");
-var _DrilldownOption = require("./DrilldownOption");
-var _DrilldownGroup = require("./DrilldownGroup");
-var _DrilldownPage = require("./DrilldownPage");
-var _styles = _interopRequireDefault(require("./styles"));
-var _props2 = require("./props");
+var _index = require("./DrilldownSeparator/index.js");
+var _index2 = require("./DrilldownOption/index.js");
+var _index3 = require("./DrilldownGroup/index.js");
+var _index4 = require("./DrilldownPage/index.js");
+var _styles = _interopRequireDefault(require("./styles.js"));
+var _props2 = require("./props.js");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _react2 = require("@emotion/react");
 var _dec, _dec2, _class;
@@ -66,7 +66,7 @@ category: components
 ---
 **/
 let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class Drilldown extends _react.Component {
-  static displayName = "Drilldown";
+  static displayName = 'Drilldown';
   static componentId = 'Drilldown';
   static allowedProps = _props2.allowedProps;
   static defaultProps = {
@@ -86,10 +86,10 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     offsetY: 0,
     shouldSetAriaExpanded: true
   };
-  static Group = _DrilldownGroup.DrilldownGroup;
-  static Option = _DrilldownOption.DrilldownOption;
-  static Page = _DrilldownPage.DrilldownPage;
-  static Separator = _DrilldownSeparator.DrilldownSeparator;
+  static Group = _index3.DrilldownGroup;
+  static Option = _index2.DrilldownOption;
+  static Page = _index4.DrilldownPage;
+  static Separator = _index.DrilldownSeparator;
   _drilldownRef = null;
   _popover = null;
   _trigger = null;
@@ -187,7 +187,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     };
     this.pages.forEach(page => {
       this.getChildrenArray(page.props.children).forEach(child => {
-        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
+        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index3.DrilldownGroup])) {
           const {
             id: groupId,
             selectableType,
@@ -197,7 +197,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
           if (!selectableType || !Array.isArray(selectedOptions)) return;
           const newGroupMap = new Map();
           this.getChildrenArray(groupChildren)?.forEach(groupChild => {
-            if ((0, _matchComponentTypes.matchComponentTypes)(groupChild, [_DrilldownOption.DrilldownOption])) {
+            if ((0, _matchComponentTypes.matchComponentTypes)(groupChild, [_index2.DrilldownOption])) {
               const {
                 id: optionId,
                 value: optionValue
@@ -349,7 +349,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         children
       } = page.props;
       this.getChildrenArray(children).forEach(child => {
-        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
+        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index3.DrilldownGroup])) {
           const {
             id: groupId,
             selectableType,
@@ -370,7 +370,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
             }
           }
           this.getChildrenArray(groupChildren)?.forEach(groupChild => {
-            if ((0, _matchComponentTypes.matchComponentTypes)(groupChild, [_DrilldownOption.DrilldownOption])) {
+            if ((0, _matchComponentTypes.matchComponentTypes)(groupChild, [_index2.DrilldownOption])) {
               const {
                 id: optionId,
                 value: optionValue,
@@ -428,7 +428,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     if (this.previousPage) {
       const prevPageTitle = (0, _callRenderProp.callRenderProp)(this.previousPage.renderTitle);
       const backButtonLabel = (0, _callRenderProp.callRenderProp)(renderBackButtonLabel, prevPageTitle);
-      headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownOption.DrilldownOption, {
+      headerChildren.push((0, _jsxRuntime.jsx)(_index2.DrilldownOption, {
         id: this._headerBackId,
         onOptionClick: this.handleBackButtonClick,
         children: (0, _jsxRuntime.jsx)("div", {
@@ -443,7 +443,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     if (renderTitle) {
       const title = (0, _callRenderProp.callRenderProp)(renderTitle);
       if (title) {
-        headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownOption.DrilldownOption, {
+        headerChildren.push((0, _jsxRuntime.jsx)(_index2.DrilldownOption, {
           id: this._headerTitleId,
           role: "presentation",
           "aria-hidden": "true",
@@ -460,7 +460,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     if (renderActionLabel) {
       const actionLabel = (0, _callRenderProp.callRenderProp)(renderActionLabel);
       if (actionLabel) {
-        headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownOption.DrilldownOption, {
+        headerChildren.push((0, _jsxRuntime.jsx)(_index2.DrilldownOption, {
           id: this._headerActionId,
           themeOverride: {
             color: styles?.headerActionColor
@@ -477,7 +477,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
 
     // header separator
     if (headerChildren.length > 0 && children.length > 0 && !withoutHeaderSeparator) {
-      headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownSeparator.DrilldownSeparator, {
+      headerChildren.push((0, _jsxRuntime.jsx)(_index.DrilldownSeparator, {
         id: deterministicId('DrilldownHeader-Separator')
       }));
     }
@@ -873,7 +873,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     if (!child) return undefined;
 
     // If it's a regular option, return it
-    if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
+    if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.DrilldownOption])) {
       return child;
     }
     // If it's a group, get its options
@@ -899,7 +899,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       /**
        * --- RENDER GROUP ---
        */
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index3.DrilldownGroup])) {
         const isFirstChild = index === 0;
         const isLastChild = index === pageChildren.length - 1;
         const afterSeparator = lastItemWasSeparator;
@@ -913,7 +913,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         /**
          * --- RENDER SEPARATOR ---
          */
-      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
+      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.DrilldownSeparator])) {
         // if the last item was separator, we don't want to duplicate it
         if (lastItemWasSeparator) {
           return null;
@@ -924,7 +924,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         /**
          * --- RENDER OPTION ---
          */
-      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
+      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.DrilldownOption])) {
         lastItemWasSeparator = false;
         return this.renderOption(child, getOptionProps, getDisabledOptionProps);
       } else {
@@ -984,7 +984,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     // Props passed to the Option.Item
     let optionProps = {
       // passthrough props
-      ...(0, _omitProps.omitProps)(option.props, [..._DrilldownOption.DrilldownOption.allowedProps, ..._latest2.Options.Item.allowedProps]),
+      ...(0, _omitProps.omitProps)(option.props, [..._index2.DrilldownOption.allowedProps, ..._latest2.Options.Item.allowedProps]),
       // props from selectable
       ...getOptionProps({
         id,
@@ -1036,7 +1036,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         index: Object.keys(this._activeOptionsMap).length + 1
       };
     }
-    const customRole = role !== _DrilldownOption.DrilldownOption.defaultProps.role ? role : undefined;
+    const customRole = role !== _index2.DrilldownOption.defaultProps.role ? role : undefined;
 
     // BEFORE/AFTER elements:
     // we set a few manually on Options.Item,
@@ -1191,9 +1191,9 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       ,
       themeOverride: themeOverride,
       children: this.getChildrenArray(children).map(child => {
-        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
+        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index.DrilldownSeparator])) {
           return this.renderSeparator(child);
-        } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
+        } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_index2.DrilldownOption])) {
           return this.renderOption(child, getOptionProps, getDisabledOptionProps, group.props);
         } else {
           return null;

package/lib/exports/a.js

@@ -6,35 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Drilldown", {
   enumerable: true,
   get: function () {
-    return _v.Drilldown;
+    return _index.Drilldown;
   }
 });
 Object.defineProperty(exports, "DrilldownGroup", {
   enumerable: true,
   get: function () {
-    return _DrilldownGroup.DrilldownGroup;
+    return _index2.DrilldownGroup;
   }
 });
 Object.defineProperty(exports, "DrilldownOption", {
   enumerable: true,
   get: function () {
-    return _DrilldownOption.DrilldownOption;
+    return _index3.DrilldownOption;
   }
 });
 Object.defineProperty(exports, "DrilldownPage", {
   enumerable: true,
   get: function () {
-    return _DrilldownPage.DrilldownPage;
+    return _index4.DrilldownPage;
   }
 });
 Object.defineProperty(exports, "DrilldownSeparator", {
   enumerable: true,
   get: function () {
-    return _DrilldownSeparator.DrilldownSeparator;
+    return _index5.DrilldownSeparator;
   }
 });
-var _v = require("../Drilldown/v1");
-var _DrilldownGroup = require("../Drilldown/v1/DrilldownGroup");
-var _DrilldownOption = require("../Drilldown/v1/DrilldownOption");
-var _DrilldownPage = require("../Drilldown/v1/DrilldownPage");
-var _DrilldownSeparator = require("../Drilldown/v1/DrilldownSeparator");
+var _index = require("../Drilldown/v1/index.js");
+var _index2 = require("../Drilldown/v1/DrilldownGroup/index.js");
+var _index3 = require("../Drilldown/v1/DrilldownOption/index.js");
+var _index4 = require("../Drilldown/v1/DrilldownPage/index.js");
+var _index5 = require("../Drilldown/v1/DrilldownSeparator/index.js");

package/lib/exports/b.js

@@ -6,35 +6,35 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Drilldown", {
   enumerable: true,
   get: function () {
-    return _v.Drilldown;
+    return _index.Drilldown;
   }
 });
 Object.defineProperty(exports, "DrilldownGroup", {
   enumerable: true,
   get: function () {
-    return _DrilldownGroup.DrilldownGroup;
+    return _index2.DrilldownGroup;
   }
 });
 Object.defineProperty(exports, "DrilldownOption", {
   enumerable: true,
   get: function () {
-    return _DrilldownOption.DrilldownOption;
+    return _index3.DrilldownOption;
   }
 });
 Object.defineProperty(exports, "DrilldownPage", {
   enumerable: true,
   get: function () {
-    return _DrilldownPage.DrilldownPage;
+    return _index4.DrilldownPage;
   }
 });
 Object.defineProperty(exports, "DrilldownSeparator", {
   enumerable: true,
   get: function () {
-    return _DrilldownSeparator.DrilldownSeparator;
+    return _index5.DrilldownSeparator;
   }
 });
-var _v = require("../Drilldown/v2");
-var _DrilldownGroup = require("../Drilldown/v2/DrilldownGroup");
-var _DrilldownOption = require("../Drilldown/v2/DrilldownOption");
-var _DrilldownPage = require("../Drilldown/v2/DrilldownPage");
-var _DrilldownSeparator = require("../Drilldown/v2/DrilldownSeparator");
+var _index = require("../Drilldown/v2/index.js");
+var _index2 = require("../Drilldown/v2/DrilldownGroup/index.js");
+var _index3 = require("../Drilldown/v2/DrilldownOption/index.js");
+var _index4 = require("../Drilldown/v2/DrilldownPage/index.js");
+var _index5 = require("../Drilldown/v2/DrilldownSeparator/index.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "11.7.4-snapshot-14",
+  "version": "11.7.4-snapshot-49",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,29 +15,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.2",
-    "@instructure/console": "11.7.4-snapshot-14",
-    "@instructure/emotion": "11.7.4-snapshot-14",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-14",
-    "@instructure/shared-types": "11.7.4-snapshot-14",
-    "@instructure/ui-icons": "11.7.4-snapshot-14",
-    "@instructure/ui-options": "11.7.4-snapshot-14",
-    "@instructure/ui-position": "11.7.4-snapshot-14",
-    "@instructure/ui-popover": "11.7.4-snapshot-14",
-    "@instructure/ui-themes": "11.7.4-snapshot-14",
-    "@instructure/ui-selectable": "11.7.4-snapshot-14",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-view": "11.7.4-snapshot-14",
-    "@instructure/ui-utils": "11.7.4-snapshot-14"
+    "@instructure/console": "11.7.4-snapshot-49",
+    "@instructure/emotion": "11.7.4-snapshot-49",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-49",
+    "@instructure/shared-types": "11.7.4-snapshot-49",
+    "@instructure/ui-icons": "11.7.4-snapshot-49",
+    "@instructure/ui-options": "11.7.4-snapshot-49",
+    "@instructure/ui-popover": "11.7.4-snapshot-49",
+    "@instructure/ui-position": "11.7.4-snapshot-49",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-selectable": "11.7.4-snapshot-49",
+    "@instructure/ui-themes": "11.7.4-snapshot-49",
+    "@instructure/ui-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-view": "11.7.4-snapshot-49"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-axe-check": "11.7.4-snapshot-14",
-    "@instructure/ui-scripts": "11.7.4-snapshot-14",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-14",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-14"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-49",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-49",
+    "@instructure/ui-scripts": "11.7.4-snapshot-49",
+    "@instructure/ui-axe-check": "11.7.4-snapshot-49"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Drilldown/v1/DrilldownGroup/index.tsx

@@ -27,7 +27,7 @@ import { Component } from 'react'
 import { withStyle } from '@instructure/emotion'
 import { optionsThemeGenerator } from '@instructure/ui-options'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownGroupProps } from './props'
 import { isMac, isFirefox } from '@instructure/ui-utils'
 
@@ -42,6 +42,7 @@ id: Drilldown.Group
 // we pass the themeOverrides to Options
 @withStyle(null, optionsThemeGenerator)
 class DrilldownGroup extends Component<DrilldownGroupProps> {
+  static displayName = 'DrilldownGroup'
   static readonly componentId = 'Drilldown.Group'
 
   static allowedProps = allowedProps

package/src/Drilldown/v1/DrilldownGroup/props.ts

@@ -31,7 +31,7 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
 
-import Drilldown from '../index'
+import Drilldown from '../index.js'
 import type { DrilldownOptionValue } from '../DrilldownOption/props'
 import type { OptionChild, SeparatorChild } from '../props'
 

package/src/Drilldown/v1/DrilldownOption/index.tsx

@@ -27,7 +27,7 @@ import { Component } from 'react'
 import { withStyle } from '@instructure/emotion'
 import { optionsItemThemeGenerator } from '@instructure/ui-options'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownOptionProps } from './props'
 
 /**
@@ -41,6 +41,7 @@ id: Drilldown.Option
 // we pass the themeOverrides to Options.Item
 @withStyle(null, optionsItemThemeGenerator)
 class DrilldownOption extends Component<DrilldownOptionProps> {
+  static displayName = 'DrilldownOption'
   static readonly componentId = 'Drilldown.Option'
 
   static allowedProps = allowedProps

package/src/Drilldown/v1/DrilldownOption/props.ts

@@ -34,7 +34,7 @@ import type {
   OptionsItemProps
 } from '@instructure/ui-options/v11_6'
 
-import Drilldown from '../index'
+import Drilldown from '../index.js'
 import { Renderable } from '@instructure/shared-types'
 
 type DrilldownOptionValue = string | number | undefined

package/src/Drilldown/v1/DrilldownPage/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownPageProps } from './props'
 
 /**
@@ -35,6 +35,7 @@ id: Drilldown.Page
 @module DrilldownPage
 **/
 class DrilldownPage extends Component<DrilldownPageProps> {
+  static displayName = 'DrilldownPage'
   static readonly componentId = 'Drilldown.Page'
 
   static allowedProps = allowedProps

package/src/Drilldown/v1/DrilldownSeparator/index.tsx

@@ -27,7 +27,7 @@ import { Component } from 'react'
 import { withStyle } from '@instructure/emotion'
 import { optionsSeparatorThemeGenerator } from '@instructure/ui-options'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownSeparatorProps } from './props'
 
 /**
@@ -41,6 +41,7 @@ id: Drilldown.Separator
 // we pass the themeOverrides to Options.Separator
 @withStyle(null, optionsSeparatorThemeGenerator)
 class DrilldownSeparator extends Component<DrilldownSeparatorProps> {
+  static displayName = 'DrilldownSeparator'
   static readonly componentId = 'Drilldown.Separator'
 
   static allowedProps = allowedProps

package/src/Drilldown/v1/index.tsx

@@ -53,18 +53,18 @@ import {
 
 import { withStyle } from '@instructure/emotion'
 
-import { DrilldownSeparator } from './DrilldownSeparator'
-import { DrilldownOption } from './DrilldownOption'
+import { DrilldownSeparator } from './DrilldownSeparator/index.js'
+import { DrilldownOption } from './DrilldownOption/index.js'
 import type { DrilldownOptionValue } from './DrilldownOption/props'
-import { DrilldownGroup } from './DrilldownGroup'
+import { DrilldownGroup } from './DrilldownGroup/index.js'
 import type { DrilldownGroupProps, GroupChildren } from './DrilldownGroup/props'
-import { DrilldownPage } from './DrilldownPage'
+import { DrilldownPage } from './DrilldownPage/index.js'
 import type { DrilldownPageProps, PageChildren } from './DrilldownPage/props'
 
-import generateStyle from './styles'
-import generateComponentTheme from './theme'
+import generateStyle from './styles.js'
+import generateComponentTheme from './theme.js'
 
-import { allowedProps, SelectedGroupOptionsMap } from './props'
+import { allowedProps, SelectedGroupOptionsMap } from './props.js'
 
 import type {
   DrilldownProps,
@@ -103,6 +103,7 @@ category: components
 @withDeterministicId()
 @withStyle(generateStyle, generateComponentTheme)
 class Drilldown extends Component<DrilldownProps, DrilldownState> {
+  static displayName = 'Drilldown'
   static readonly componentId = 'Drilldown'
 
   static allowedProps = allowedProps

package/src/Drilldown/v1/props.ts

@@ -38,19 +38,19 @@ import type {
   AsElementType
 } from '@instructure/shared-types'
 
-import { DrilldownPage } from './DrilldownPage'
+import { DrilldownPage } from './DrilldownPage/index.js'
 import type { DrilldownPageProps } from './DrilldownPage/props'
-import { DrilldownGroup } from './DrilldownGroup'
+import { DrilldownGroup } from './DrilldownGroup/index.js'
 import type { DrilldownGroupProps } from './DrilldownGroup/props'
-import { DrilldownOption } from './DrilldownOption'
+import { DrilldownOption } from './DrilldownOption/index.js'
 import type {
   DrilldownOptionProps,
   DrilldownOptionValue
 } from './DrilldownOption/props'
-import { DrilldownSeparator } from './DrilldownSeparator'
+import { DrilldownSeparator } from './DrilldownSeparator/index.js'
 import type { DrilldownSeparatorProps } from './DrilldownSeparator/props'
 
-import { Drilldown } from './index'
+import { Drilldown } from './index.js'
 
 type PageChild = React.ComponentElement<DrilldownPageProps, DrilldownPage>
 type GroupChild = React.ComponentElement<DrilldownGroupProps, DrilldownGroup>

package/src/Drilldown/v2/DrilldownGroup/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { withStyleNew } from '@instructure/emotion'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownGroupProps } from './props'
 import { isMac, isFirefox } from '@instructure/ui-utils'
 
@@ -42,6 +42,7 @@ themeId: Options
 // we pass the themeOverrides to Options
 @withStyleNew(null)
 class DrilldownGroup extends Component<DrilldownGroupProps> {
+  static displayName = 'DrilldownGroup'
   static readonly componentId = 'Drilldown.Group'
 
   static allowedProps = allowedProps

package/src/Drilldown/v2/DrilldownGroup/props.ts

@@ -30,7 +30,7 @@ import type {
 } from '@instructure/shared-types'
 import type { WithStyleProps } from '@instructure/emotion'
 
-import Drilldown from '../index'
+import Drilldown from '../index.js'
 import type { DrilldownOptionValue } from '../DrilldownOption/props'
 import type { OptionChild, SeparatorChild } from '../props'
 import type { NewComponentTypes } from '@instructure/ui-themes'

package/src/Drilldown/v2/DrilldownOption/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { withStyleNew } from '@instructure/emotion'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownOptionProps } from './props'
 
 /**
@@ -41,6 +41,7 @@ themeId: OptionsItem
 // we pass the themeOverrides to Options.Item
 @withStyleNew(null)
 class DrilldownOption extends Component<DrilldownOptionProps> {
+  static displayName = 'DrilldownOption'
   static readonly componentId = 'Drilldown.Option'
 
   static allowedProps = allowedProps

package/src/Drilldown/v2/DrilldownOption/props.ts

@@ -33,7 +33,7 @@ import type {
   OptionsItemProps
 } from '@instructure/ui-options'
 
-import Drilldown from '../index'
+import Drilldown from '../index.js'
 import { Renderable } from '@instructure/shared-types'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 

package/src/Drilldown/v2/DrilldownPage/index.tsx

@@ -24,7 +24,7 @@
 
 import { Component } from 'react'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownPageProps } from './props'
 
 /**
@@ -35,6 +35,7 @@ id: Drilldown.Page
 @module DrilldownPage
 **/
 class DrilldownPage extends Component<DrilldownPageProps> {
+  static displayName = 'DrilldownPage'
   static readonly componentId = 'Drilldown.Page'
 
   static allowedProps = allowedProps

package/src/Drilldown/v2/DrilldownSeparator/index.tsx

@@ -26,7 +26,7 @@ import { Component } from 'react'
 
 import { withStyleNew } from '@instructure/emotion'
 
-import { allowedProps } from './props'
+import { allowedProps } from './props.js'
 import type { DrilldownSeparatorProps } from './props'
 
 /**
@@ -41,6 +41,7 @@ themeId: OptionsSeparator
 // we pass the themeOverrides to Options.Separator
 @withStyleNew(null)
 class DrilldownSeparator extends Component<DrilldownSeparatorProps> {
+  static displayName = 'DrilldownSeparator'
   static readonly componentId = 'Drilldown.Separator'
 
   static allowedProps = allowedProps

package/src/Drilldown/v2/index.tsx

@@ -53,17 +53,17 @@ import {
 
 import { withStyleNew } from '@instructure/emotion'
 
-import { DrilldownSeparator } from './DrilldownSeparator'
-import { DrilldownOption } from './DrilldownOption'
+import { DrilldownSeparator } from './DrilldownSeparator/index.js'
+import { DrilldownOption } from './DrilldownOption/index.js'
 import type { DrilldownOptionValue } from './DrilldownOption/props'
-import { DrilldownGroup } from './DrilldownGroup'
+import { DrilldownGroup } from './DrilldownGroup/index.js'
 import type { DrilldownGroupProps, GroupChildren } from './DrilldownGroup/props'
-import { DrilldownPage } from './DrilldownPage'
+import { DrilldownPage } from './DrilldownPage/index.js'
 import type { DrilldownPageProps, PageChildren } from './DrilldownPage/props'
 
-import generateStyle from './styles'
+import generateStyle from './styles.js'
 
-import { allowedProps, SelectedGroupOptionsMap } from './props'
+import { allowedProps, SelectedGroupOptionsMap } from './props.js'
 
 import type {
   DrilldownProps,
@@ -102,6 +102,7 @@ category: components
 @withDeterministicId()
 @withStyleNew(generateStyle)
 class Drilldown extends Component<DrilldownProps, DrilldownState> {
+  static displayName = 'Drilldown'
   static readonly componentId = 'Drilldown'
 
   static allowedProps = allowedProps

package/src/Drilldown/v2/props.ts

@@ -37,19 +37,19 @@ import type {
   AsElementType
 } from '@instructure/shared-types'
 
-import { DrilldownPage } from './DrilldownPage'
+import { DrilldownPage } from './DrilldownPage/index.js'
 import type { DrilldownPageProps } from './DrilldownPage/props'
-import { DrilldownGroup } from './DrilldownGroup'
+import { DrilldownGroup } from './DrilldownGroup/index.js'
 import type { DrilldownGroupProps } from './DrilldownGroup/props'
-import { DrilldownOption } from './DrilldownOption'
+import { DrilldownOption } from './DrilldownOption/index.js'
 import type {
   DrilldownOptionProps,
   DrilldownOptionValue
 } from './DrilldownOption/props'
-import { DrilldownSeparator } from './DrilldownSeparator'
+import { DrilldownSeparator } from './DrilldownSeparator/index.js'
 import type { DrilldownSeparatorProps } from './DrilldownSeparator/props'
 
-import { Drilldown } from './index'
+import { Drilldown } from './index.js'
 import type { NewComponentTypes } from '@instructure/ui-themes'
 
 type PageChild = React.ComponentElement<DrilldownPageProps, DrilldownPage>

package/src/exports/a.ts

@@ -22,11 +22,11 @@
  * SOFTWARE.
  */
 
-export { Drilldown } from '../Drilldown/v1'
-export { DrilldownGroup } from '../Drilldown/v1/DrilldownGroup'
-export { DrilldownOption } from '../Drilldown/v1/DrilldownOption'
-export { DrilldownPage } from '../Drilldown/v1/DrilldownPage'
-export { DrilldownSeparator } from '../Drilldown/v1/DrilldownSeparator'
+export { Drilldown } from '../Drilldown/v1/index.js'
+export { DrilldownGroup } from '../Drilldown/v1/DrilldownGroup/index.js'
+export { DrilldownOption } from '../Drilldown/v1/DrilldownOption/index.js'
+export { DrilldownPage } from '../Drilldown/v1/DrilldownPage/index.js'
+export { DrilldownSeparator } from '../Drilldown/v1/DrilldownSeparator/index.js'
 
 export type {
   DrilldownProps,