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

package/lib/Drilldown/index.js

@@ -131,9 +131,10 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         this.reset();
       }
     };
-    this.handleOptionHighlight = (_event, _ref) => {
-      let id = _ref.id,
-        direction = _ref.direction;
+    this.handleOptionHighlight = (_event, {
+      id,
+      direction
+    }) => {
       const rotateFocus = this.props.rotateFocus;
       const highlightedOptionId = this.state.highlightedOptionId;
 
@@ -215,28 +216,29 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       }
 
       // If there is a previous page, goToPage will succeed and return the data
-      const _ref2 = this.goToPage(this.previousPage.id),
-        newPageId = _ref2.newPageId,
-        prevPageId = _ref2.prevPageId;
+      const _ref = this.goToPage(this.previousPage.id),
+        newPageId = _ref.newPageId,
+        prevPageId = _ref.prevPageId;
       return {
         newPageId,
         prevPageId
       };
     };
     this.handleBackButtonClick = () => {
-      const _ref3 = this.currentPage,
-        onBackButtonClicked = _ref3.onBackButtonClicked;
+      const _ref2 = this.currentPage,
+        onBackButtonClicked = _ref2.onBackButtonClicked;
 
       // we only display the back button when there is a page to go back to
-      const _ref4 = this.goToPreviousPage(),
-        newPageId = _ref4.newPageId,
-        prevPageId = _ref4.prevPageId;
+      const _ref3 = this.goToPreviousPage(),
+        newPageId = _ref3.newPageId,
+        prevPageId = _ref3.prevPageId;
       if (typeof onBackButtonClicked === 'function') {
         onBackButtonClicked(newPageId, prevPageId);
       }
     };
-    this.handleOptionSelect = (event, _ref5) => {
-      let id = _ref5.id;
+    this.handleOptionSelect = (event, {
+      id
+    }) => {
       const selectedOption = this.getPageChildById(id);
 
       // TODO: this line can be removed when React 16 is no longer supported
@@ -656,9 +658,9 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       const _selectedOption$props = selectedOption.props,
         optionId = _selectedOption$props.id,
         value = _selectedOption$props.value;
-      const _ref6 = selectedOption.groupProps,
-        groupId = _ref6.id,
-        selectableType = _ref6.selectableType;
+      const _ref4 = selectedOption.groupProps,
+        groupId = _ref4.id,
+        selectableType = _ref4.selectableType;
       let newState = new Map(oldState.selectedGroupOptionsMap[groupId]);
       if (selectableType === 'multiple' && Boolean((_oldState$selectedGro = oldState.selectedGroupOptionsMap[groupId]) === null || _oldState$selectedGro === void 0 ? void 0 : _oldState$selectedGro.has(optionId))) {
         // toggle off, if already selected
@@ -682,9 +684,9 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       };
     }, () => {
       const value = selectedOption.props.value;
-      const _ref7 = selectedOption.groupProps,
-        groupId = _ref7.id,
-        groupOnSelect = _ref7.onSelect;
+      const _ref5 = selectedOption.groupProps,
+        groupId = _ref5.id,
+        groupOnSelect = _ref5.onSelect;
       const onSelect = this.props.onSelect;
       const groupProps = selectedOption.groupProps,
         option = (0, _objectWithoutProperties2.default)(selectedOption, _excluded2);
@@ -1040,67 +1042,71 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           id: lastOptionId
         });
       }
-    }, _ref8 => {
-      let getTriggerProps = _ref8.getTriggerProps,
-        getListProps = _ref8.getListProps,
-        getOptionProps = _ref8.getOptionProps,
-        getDisabledOptionProps = _ref8.getDisabledOptionProps;
-      return (0, _emotion.jsx)(_View.View, Object.assign({
-        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: () => {
+    }, ({
+      // 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({
+      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
           });
         }
-      })), (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))));
-    });
+      },
+      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)))));
   }
   render() {
     // clear temporary option store
@@ -1128,8 +1134,9 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
-      onHideContent: (event, _ref9) => {
-        let documentClick = _ref9.documentClick;
+      onHideContent: (event, {
+        documentClick
+      }) => {
         if (typeof onDismiss === 'function') {
           onDismiss(event, documentClick);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-drilldown",
-  "version": "8.38.2-snapshot-5",
+  "version": "8.38.2-snapshot-7",
   "description": "A drilldown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.22.5",
-    "@instructure/console": "8.38.2-snapshot-5",
-    "@instructure/emotion": "8.38.2-snapshot-5",
-    "@instructure/shared-types": "8.38.2-snapshot-5",
-    "@instructure/ui-dom-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-icons": "8.38.2-snapshot-5",
-    "@instructure/ui-options": "8.38.2-snapshot-5",
-    "@instructure/ui-popover": "8.38.2-snapshot-5",
-    "@instructure/ui-position": "8.38.2-snapshot-5",
-    "@instructure/ui-prop-types": "8.38.2-snapshot-5",
-    "@instructure/ui-react-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-selectable": "8.38.2-snapshot-5",
-    "@instructure/ui-testable": "8.38.2-snapshot-5",
-    "@instructure/ui-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-view": "8.38.2-snapshot-5",
+    "@babel/runtime": "^7.22.6",
+    "@instructure/console": "8.38.2-snapshot-7",
+    "@instructure/emotion": "8.38.2-snapshot-7",
+    "@instructure/shared-types": "8.38.2-snapshot-7",
+    "@instructure/ui-dom-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-icons": "8.38.2-snapshot-7",
+    "@instructure/ui-options": "8.38.2-snapshot-7",
+    "@instructure/ui-popover": "8.38.2-snapshot-7",
+    "@instructure/ui-position": "8.38.2-snapshot-7",
+    "@instructure/ui-prop-types": "8.38.2-snapshot-7",
+    "@instructure/ui-react-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-selectable": "8.38.2-snapshot-7",
+    "@instructure/ui-testable": "8.38.2-snapshot-7",
+    "@instructure/ui-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-view": "8.38.2-snapshot-7",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.38.2-snapshot-5",
-    "@instructure/ui-color-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-test-locator": "8.38.2-snapshot-5",
-    "@instructure/ui-test-utils": "8.38.2-snapshot-5",
-    "@instructure/ui-themes": "8.38.2-snapshot-5"
+    "@instructure/ui-babel-preset": "8.38.2-snapshot-7",
+    "@instructure/ui-color-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-test-locator": "8.38.2-snapshot-7",
+    "@instructure/ui-test-utils": "8.38.2-snapshot-7",
+    "@instructure/ui-themes": "8.38.2-snapshot-7"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Drilldown/index.tsx

@@ -1191,7 +1191,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       !optionProps.renderBeforeLabel?.prototype?.isReactComponent
     ) {
       optionProps.renderBeforeLabel = (
-        optionProps.renderBeforeLabel as () => ReactNode
+        optionProps.renderBeforeLabel as (args: any) => ReactNode
       ).bind(null, renderLabelProps)
     }
     if (
@@ -1199,7 +1199,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       !optionProps.renderAfterLabel?.prototype?.isReactComponent
     ) {
       optionProps.renderAfterLabel = (
-        optionProps.renderAfterLabel as () => ReactNode
+        optionProps.renderAfterLabel as (args: any) => ReactNode
       ).bind(null, renderLabelProps)
     }