@instructure/ui-drilldown 10.16.1-snapshot-0 → 10.16.1

package/lib/Drilldown/index.js

@@ -1,13 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Drilldown = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _console = require("@instructure/console");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _contains = require("@instructure/ui-dom-utils/lib/contains.js");
@@ -32,6 +31,8 @@ var _DrilldownPage = require("./DrilldownPage");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _react2 = require("@emotion/react");
 const _excluded = ["groupProps"],
   _excluded2 = ["groupProps"],
   _excluded3 = ["id", "themeOverride"];
@@ -59,8 +60,6 @@ var _dec, _dec2, _dec3, _class, _Drilldown, _IconArrowOpenEndSoli, _IconArrowOpe
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
 // Additional data we need to track on the Options,
 // but shouldn't be settable via props
 // Contains the Option ComponentElement and the extra data we need track on it,
@@ -416,7 +415,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
   }
   get pages() {
     const children = this.props.children;
-    return _react.default.Children.toArray(children || []);
+    return _react.Children.toArray(children || []);
   }
   get pageMap() {
     const children = this.props.children;
@@ -429,7 +428,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       const children = props.children;
       map[props.id] = {
         ...props,
-        children: _react.default.Children.toArray(children || [])
+        children: _react.Children.toArray(children || [])
       };
     });
     return map;
@@ -559,27 +558,31 @@ 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, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
+      headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownOption.DrilldownOption, {
         id: this._headerBackId,
-        onOptionClick: this.handleBackButtonClick
-      }, (0, _emotion.jsx)("div", {
-        css: styles === null || styles === void 0 ? void 0 : styles.headerBack,
-        role: "presentation"
-      }, backButtonLabel)));
+        onOptionClick: this.handleBackButtonClick,
+        children: (0, _jsxRuntime.jsx)("div", {
+          css: styles === null || styles === void 0 ? void 0 : styles.headerBack,
+          role: "presentation",
+          children: backButtonLabel
+        })
+      }));
     }
 
     // Header title
     if (renderTitle) {
       const title = (0, _callRenderProp.callRenderProp)(renderTitle);
       if (title) {
-        headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
+        headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownOption.DrilldownOption, {
           id: this._headerTitleId,
           role: "presentation",
-          "aria-hidden": "true"
-        }, (0, _emotion.jsx)("div", {
-          css: styles === null || styles === void 0 ? void 0 : styles.headerTitle,
-          id: this._headerTitleLabelId
-        }, title)));
+          "aria-hidden": "true",
+          children: (0, _jsxRuntime.jsx)("div", {
+            css: styles === null || styles === void 0 ? void 0 : styles.headerTitle,
+            id: this._headerTitleLabelId,
+            children: title
+          })
+        }));
       }
     }
 
@@ -587,7 +590,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     if (renderActionLabel) {
       const actionLabel = (0, _callRenderProp.callRenderProp)(renderActionLabel);
       if (actionLabel) {
-        headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
+        headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownOption.DrilldownOption, {
           id: this._headerActionId,
           themeOverride: {
             color: styles === null || styles === void 0 ? void 0 : styles.headerActionColor
@@ -596,14 +599,15 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
             if (typeof onHeaderActionClicked === 'function') {
               onHeaderActionClicked(event);
             }
-          }
-        }, actionLabel));
+          },
+          children: actionLabel
+        }));
       }
     }
 
     // header separator
     if (headerChildren.length > 0 && children.length > 0 && !withoutHeaderSeparator) {
-      headerChildren.push((0, _emotion.jsx)(_DrilldownSeparator.DrilldownSeparator, {
+      headerChildren.push((0, _jsxRuntime.jsx)(_DrilldownSeparator.DrilldownSeparator, {
         id: deterministicId('DrilldownHeader-Separator')
       }));
     }
@@ -763,14 +767,15 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       id = _separator$props.id,
       themeOverride = _separator$props.themeOverride,
       props = (0, _objectWithoutProperties2.default)(_separator$props, _excluded3);
-    return (0, _emotion.jsx)(_Options.Options.Separator, Object.assign({}, props, {
+    return (0, _react2.createElement)(_Options.Options.Separator, {
+      ...props,
       id: id,
       key: id,
       role: "separator"
       // we pass the themeOverride to Options.Separator
       ,
       themeOverride: themeOverride
-    }));
+    });
   }
   renderOption(option, getOptionProps, getDisabledOptionProps, groupProps) {
     var _this$currentPage2, _optionProps$renderBe, _optionProps$renderBe2, _optionProps$renderAf, _optionProps$renderAf2;
@@ -859,13 +864,13 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     // we set a few manually on Options.Item,
     // the rest are passed directly
     if (subPageId) {
-      optionProps.renderAfterLabel = _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, null));
+      optionProps.renderAfterLabel = _IconArrowOpenEndSoli || (_IconArrowOpenEndSoli = (0, _jsxRuntime.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {}));
       optionProps['aria-haspopup'] = true;
       optionProps.role = customRole || 'button';
       (0, _console.warn)(!renderAfterLabel, `The prop "renderAfterLabel" is reserved on item with id: "${id}". When it has "subPageId" provided, a navigation arrow will render after the label.`);
     }
     if (id === this._headerBackId) {
-      optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _emotion.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, null));
+      optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = (0, _jsxRuntime.jsx)(_IconArrowOpenStartSolid.IconArrowOpenStartSolid, {}));
     }
     const isOptionControlled = typeof option.props.selected === 'boolean';
     if ((groupProps !== null && groupProps !== void 0 && groupProps.selectableType || isOptionControlled) && groupProps) {
@@ -876,7 +881,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         isSelected = Boolean(option.props.selected);
       }
       optionProps['aria-checked'] = isSelected;
-      optionProps.renderBeforeLabel = (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
+      optionProps.renderBeforeLabel = (0, _jsxRuntime.jsx)(_IconCheckSolid.IconCheckSolid, {
         style: {
           opacity: isSelected ? 1 : 0
         }
@@ -941,26 +946,31 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     const infoAriaId = `${id}__info`;
     const labelledby = option.props['aria-labelledby'] || labelAriaId;
     const describedby = option.props['aria-describedby'] || (labelInfo ? infoAriaId : void 0);
-    return (0, _emotion.jsx)(_Options.Options.Item, Object.assign({}, optionProps, {
+    return (0, _react2.createElement)(_Options.Options.Item, {
+      ...optionProps,
       key: id,
       "aria-labelledby": labelledby,
       "aria-describedby": describedby
-    }), (0, _emotion.jsx)("div", {
+    }, (0, _jsxRuntime.jsxs)("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.optionContainer,
-      role: "none"
-    }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.optionContent,
       role: "none",
-      id: labelAriaId
-    }, optionLabel), labelInfo ? (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.optionLabelInfo,
-      role: "presentation",
-      style: {
-        alignSelf: vAlignMap[afterLabelContentVAlign]
-      }
-    }, (0, _emotion.jsx)("span", {
-      id: infoAriaId
-    }, labelInfo)) : null));
+      children: [(0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.optionContent,
+        role: "none",
+        id: labelAriaId,
+        children: optionLabel
+      }), labelInfo ? (0, _jsxRuntime.jsx)("span", {
+        css: styles === null || styles === void 0 ? void 0 : styles.optionLabelInfo,
+        role: "presentation",
+        style: {
+          alignSelf: vAlignMap[afterLabelContentVAlign]
+        },
+        children: (0, _jsxRuntime.jsx)("span", {
+          id: infoAriaId,
+          children: labelInfo
+        })
+      }) : null]
+    }));
   }
   renderGroup(group, getOptionProps, getDisabledOptionProps, needsFirstSeparator, needsLastSeparator) {
     const _group$props = group.props,
@@ -978,34 +988,34 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
 
     // add a separator above
     if (needsFirstSeparator) {
-      groupChildren.push(_Options$Separator || (_Options$Separator = (0, _emotion.jsx)(_Options.Options.Separator, null)));
+      groupChildren.push(_Options$Separator || (_Options$Separator = (0, _jsxRuntime.jsx)(_Options.Options.Separator, {})));
     }
 
     // create a sublist as a group
     // (a wrapping list item will be created by Options)
-    groupChildren.push((0, _emotion.jsx)(_Options.Options, {
+    groupChildren.push((0, _jsxRuntime.jsx)(_Options.Options, {
       id: id,
-      key: id,
       role: role,
       as: as || this.props.as,
       renderLabel: renderGroupTitle,
       elementRef: elementRef
       // we pass the themeOverride to Options
       ,
-      themeOverride: themeOverride
-    }, this.getChildrenArray(children).map(child => {
-      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
-        return this.renderSeparator(child);
-      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
-        return this.renderOption(child, getOptionProps, getDisabledOptionProps, group.props);
-      } else {
-        return null;
-      }
-    })));
+      themeOverride: themeOverride,
+      children: this.getChildrenArray(children).map(child => {
+        if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
+          return this.renderSeparator(child);
+        } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
+          return this.renderOption(child, getOptionProps, getDisabledOptionProps, group.props);
+        } else {
+          return null;
+        }
+      })
+    }, id));
 
     // add a separator below
     if (needsLastSeparator) {
-      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _emotion.jsx)(_Options.Options.Separator, null)));
+      groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _jsxRuntime.jsx)(_Options.Options.Separator, {})));
     }
     return groupChildren;
   }
@@ -1026,7 +1036,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
     if (!this.currentPage) {
       return null;
     }
-    return (0, _emotion.jsx)(_Selectable.Selectable, {
+    return (0, _jsxRuntime.jsx)(_Selectable.Selectable, {
       isShowingOptions: this.shown,
       highlightedOptionId: this.state.highlightedOptionId,
       selectedOptionId: this.selectedGroupOptionIdsArray,
@@ -1045,73 +1055,79 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         this.handleOptionHighlight(event, {
           id: lastOptionId
         });
-      }
-    }, ({
-      // TODO: figure out what other Selectable props we need, if we want to add a Select version for drilldown:
-      // getRootProps, - we probably don't need this
-      // getLabelProps, - do we need label?
-      // getDescriptionProps, - might be nice for assistiveText like in Select
-      // getInputProps, - hidden input for a11y? role="combobox" might be needed
-      getTriggerProps,
-      getListProps,
-      getOptionProps,
-      getDisabledOptionProps
-    }) => (0, _emotion.jsx)(_View.View, Object.assign({
-      borderWidth: "small",
-      as: "div",
-      elementRef: this.handleDrilldownRef,
-      tabIndex: 0,
-      css: styles === null || styles === void 0 ? void 0 : styles.drilldown,
-      position: "relative",
-      borderRadius: "small",
-      width: width,
-      minWidth: maxWidth,
-      maxWidth: maxWidth,
-      role: role,
-      "aria-label": label,
-      "aria-labelledby": this.currentPageAriaLabel
-    }, getTriggerProps({
-      id: this._id,
-      // We need to override these aria attributes added by Selectable,
-      // since Drilldown is not a combobox and has no popup
-      'aria-haspopup': false,
-      'aria-expanded': void 0,
-      onKeyDown: this.handleKeyDown,
-      onBlur: event => {
-        const target = event.currentTarget;
-        const related = event.relatedTarget;
-        const containsRelated = (0, _contains.contains)(target, related);
-        if (!related || related === this._drilldownRef || related !== target && !containsRelated) {
-          this.setState({
-            highlightedOptionId: void 0
-          });
-        }
       },
-      onMouseLeave: () => {
-        this.setState({
-          highlightedOptionId: void 0
-        });
-      }
-    })), (0, _emotion.jsx)(_View.View, {
-      as: "div",
-      overflowY: overflowY,
-      overflowX: overflowX,
-      height: height,
-      width: width,
-      minHeight: minHeight,
-      minWidth: minWidth,
-      maxHeight: maxHeight,
-      maxWidth: maxWidth,
-      css: styles === null || styles === void 0 ? void 0 : styles.container,
-      borderRadius: "small",
-      role: "presentation",
-      elementRef: element => {
-        this._containerElement = element;
-      }
-    }, (0, _emotion.jsx)(_Options.Options, Object.assign({}, getListProps(), {
-      role: "presentation",
-      as: as
-    }), this.renderList(getOptionProps, getDisabledOptionProps)))));
+      children: ({
+        // TODO: figure out what other Selectable props we need, if we want to add a Select version for drilldown:
+        // getRootProps, - we probably don't need this
+        // getLabelProps, - do we need label?
+        // getDescriptionProps, - might be nice for assistiveText like in Select
+        // getInputProps, - hidden input for a11y? role="combobox" might be needed
+        getTriggerProps,
+        getListProps,
+        getOptionProps,
+        getDisabledOptionProps
+      }) => (0, _jsxRuntime.jsx)(_View.View, {
+        borderWidth: "small",
+        as: "div",
+        elementRef: this.handleDrilldownRef,
+        tabIndex: 0,
+        css: styles === null || styles === void 0 ? void 0 : styles.drilldown,
+        position: "relative",
+        borderRadius: "small",
+        width: width,
+        minWidth: maxWidth,
+        maxWidth: maxWidth,
+        role: role,
+        "aria-label": label,
+        "aria-labelledby": this.currentPageAriaLabel,
+        ...getTriggerProps({
+          id: this._id,
+          // We need to override these aria attributes added by Selectable,
+          // since Drilldown is not a combobox and has no popup
+          'aria-haspopup': false,
+          'aria-expanded': void 0,
+          onKeyDown: this.handleKeyDown,
+          onBlur: event => {
+            const target = event.currentTarget;
+            const related = event.relatedTarget;
+            const containsRelated = (0, _contains.contains)(target, related);
+            if (!related || related === this._drilldownRef || related !== target && !containsRelated) {
+              this.setState({
+                highlightedOptionId: void 0
+              });
+            }
+          },
+          onMouseLeave: () => {
+            this.setState({
+              highlightedOptionId: void 0
+            });
+          }
+        }),
+        children: (0, _jsxRuntime.jsx)(_View.View, {
+          as: "div",
+          overflowY: overflowY,
+          overflowX: overflowX,
+          height: height,
+          width: width,
+          minHeight: minHeight,
+          minWidth: minWidth,
+          maxHeight: maxHeight,
+          maxWidth: maxWidth,
+          css: styles === null || styles === void 0 ? void 0 : styles.container,
+          borderRadius: "small",
+          role: "presentation",
+          elementRef: element => {
+            this._containerElement = element;
+          },
+          children: (0, _jsxRuntime.jsx)(_Options.Options, {
+            ...getListProps(),
+            role: "presentation",
+            as: as,
+            children: this.renderList(getOptionProps, getDisabledOptionProps)
+          })
+        })
+      })
+    });
   }
   render() {
     // clear temporary option store
@@ -1135,7 +1151,7 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
       onMouseOver = _this$props6.onMouseOver,
       offsetX = _this$props6.offsetX,
       offsetY = _this$props6.offsetY;
-    return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
+    return trigger ? (0, _jsxRuntime.jsx)(_Popover.Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
@@ -1182,8 +1198,9 @@ let Drilldown = exports.Drilldown = (_dec = (0, _withDeterministicId.withDetermi
         id: this._triggerId,
         disabled: !!(trigger.props.disabled || disabled),
         'aria-disabled': trigger.props.disabled || disabled ? 'true' : void 0
-      })
-    }, this.renderPage()) : this.renderPage();
+      }),
+      children: this.renderPage()
+    }) : this.renderPage();
   }
 }, _Drilldown.displayName = "Drilldown", _Drilldown.componentId = 'Drilldown', _Drilldown.propTypes = _props.propTypes, _Drilldown.allowedProps = _props.allowedProps, _Drilldown.defaultProps = {
   disabled: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "10.16.1-snapshot-0",
+  "version": "10.16.1",
   "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.16.1-snapshot-0",
-    "@instructure/emotion": "10.16.1-snapshot-0",
-    "@instructure/shared-types": "10.16.1-snapshot-0",
-    "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-icons": "10.16.1-snapshot-0",
-    "@instructure/ui-options": "10.16.1-snapshot-0",
-    "@instructure/ui-popover": "10.16.1-snapshot-0",
-    "@instructure/ui-position": "10.16.1-snapshot-0",
-    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
-    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-selectable": "10.16.1-snapshot-0",
-    "@instructure/ui-testable": "10.16.1-snapshot-0",
-    "@instructure/ui-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-view": "10.16.1-snapshot-0",
+    "@instructure/console": "10.16.1",
+    "@instructure/emotion": "10.16.1",
+    "@instructure/shared-types": "10.16.1",
+    "@instructure/ui-dom-utils": "10.16.1",
+    "@instructure/ui-icons": "10.16.1",
+    "@instructure/ui-options": "10.16.1",
+    "@instructure/ui-popover": "10.16.1",
+    "@instructure/ui-position": "10.16.1",
+    "@instructure/ui-prop-types": "10.16.1",
+    "@instructure/ui-react-utils": "10.16.1",
+    "@instructure/ui-selectable": "10.16.1",
+    "@instructure/ui-testable": "10.16.1",
+    "@instructure/ui-utils": "10.16.1",
+    "@instructure/ui-view": "10.16.1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
-    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
-    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-scripts": "10.16.1-snapshot-0",
-    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
-    "@instructure/ui-themes": "10.16.1-snapshot-0",
+    "@instructure/ui-axe-check": "10.16.1",
+    "@instructure/ui-babel-preset": "10.16.1",
+    "@instructure/ui-color-utils": "10.16.1",
+    "@instructure/ui-scripts": "10.16.1",
+    "@instructure/ui-test-utils": "10.16.1",
+    "@instructure/ui-themes": "10.16.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/Drilldown/DrilldownGroup/__new-tests__/DrilldownGroup.test.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 

package/src/Drilldown/DrilldownGroup/index.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react'
 
 import { withStyle } from '@instructure/emotion'

package/src/Drilldown/DrilldownOption/__new-tests__/DrilldownOption.test.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from 'react'
+
 import { render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/Drilldown/DrilldownOption/index.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react'
 
 import { withStyle } from '@instructure/emotion'

package/src/Drilldown/DrilldownPage/__new-tests__/DrilldownPage.test.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/Drilldown/DrilldownPage/index.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react'
 
 import { propTypes, allowedProps } from './props'

package/src/Drilldown/DrilldownSeparator/__new-tests__/DrilldownSeparator.test.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 

package/src/Drilldown/DrilldownSeparator/index.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
 import { Component } from 'react'
 
 import { withStyle } from '@instructure/emotion'

package/src/Drilldown/__examples__/Drilldown.examples.tsx

@@ -22,8 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
-
 import type { StoryConfig } from '@instructure/ui-test-utils'
 
 import { Drilldown } from '../index'

package/src/Drilldown/__new-tests__/Drilldown.test.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import userEvent from '@testing-library/user-event'

package/src/Drilldown/index.tsx

@@ -22,9 +22,7 @@
  * SOFTWARE.
  */
 
-/** @jsx jsx */
-/** @jsxFrag React.Fragment */
-import React, { Component, ReactElement, ReactNode } from 'react'
+import { Children, Component, ReactElement, ReactNode } from 'react'
 
 import { warn, error } from '@instructure/console'
 import { testable } from '@instructure/ui-testable'
@@ -53,7 +51,7 @@ import {
   IconCheckSolid
 } from '@instructure/ui-icons'
 
-import { withStyle, jsx } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import { DrilldownSeparator } from './DrilldownSeparator'
 import { DrilldownOption } from './DrilldownOption'
@@ -260,7 +258,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
 
   get pages(): PageChild[] {
     const { children } = this.props
-    return React.Children.toArray(children || []) as PageChild[]
+    return Children.toArray(children || []) as PageChild[]
   }
 
   get pageMap(): PageMap | undefined {
@@ -278,7 +276,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
 
       map[props.id] = {
         ...props,
-        children: React.Children.toArray(children || []) as PageChildren[]
+        children: Children.toArray(children || []) as PageChildren[]
       }
     })