@instructure/ui-drilldown 8.38.2-snapshot-4 → 8.38.2-snapshot-6

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.38.2-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-4) (2023-07-11)
+## [8.38.2-snapshot-6](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-6) (2023-07-17)
 
 **Note:** Version bump only for package @instructure/ui-drilldown
 

package/es/Drilldown/DrilldownLocator.js

@@ -35,89 +35,53 @@ import { PopoverLocator } from '@instructure/ui-popover/es/Popover/PopoverLocato
 import { Drilldown } from './index';
 const customMethods = {
   // return the wrapper Option.Items
-  findAllOptions: async function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  findAllOptions: async (...args) => {
     return await findAll('[class$=-optionItem__container]:not([role="presentation"])', ...args);
   },
-  findAllOptionWrappers: async function () {
-    return await OptionsItemLocator.findAll(...arguments);
+  findAllOptionWrappers: async (...args) => {
+    return await OptionsItemLocator.findAll(...args);
   },
-  findOptionWrapperByOptionId: async function (_element, optionId) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-      args[_key2 - 2] = arguments[_key2];
-    }
+  findOptionWrapperByOptionId: async (_element, optionId, ...args) => {
     return OptionsItemLocator.find(`:has(#${optionId})`, ...args);
   },
-  findSizableContainer: async function () {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  findSizableContainer: async (...args) => {
     return await find('[class$=-drilldown__container]', ...args);
   },
-  findSelectableContainer: async function () {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  findSelectableContainer: async (...args) => {
     return await find('[id^=Selectable_][id$=-list]', ...args);
   },
-  findHeaderTitle: async function () {
-    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-      args[_key5] = arguments[_key5];
-    }
+  findHeaderTitle: async (...args) => {
     return await find('[id^=DrilldownHeader-Title]', ...args);
   },
-  findHeaderActionOption: async function () {
-    for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-      args[_key6] = arguments[_key6];
-    }
+  findHeaderActionOption: async (...args) => {
     return await find('[id^=DrilldownHeader-Action]', ...args);
   },
-  findHeaderBackOption: async function () {
-    for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-      args[_key7] = arguments[_key7];
-    }
+  findHeaderBackOption: async (...args) => {
     return await find('[id^=DrilldownHeader-Back]', ...args);
   },
-  findHeaderSeparator: async function () {
-    for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-      args[_key8] = arguments[_key8];
-    }
+  findHeaderSeparator: async (...args) => {
     return await find('[id^=DrilldownHeader-Separator]', ...args);
   },
-  findAllSeparators: async function () {
-    for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-      args[_key9] = arguments[_key9];
-    }
+  findAllSeparators: async (...args) => {
     return await findAll('[class$=-separator]', ...args);
   },
-  findAllGroupLabels: async function () {
-    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-      args[_key10] = arguments[_key10];
-    }
+  findAllGroupLabels: async (...args) => {
     return await findAll('[class$=-options__label]', ...args);
   },
-  findLabelInfo: async function () {
-    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-      args[_key11] = arguments[_key11];
-    }
+  findLabelInfo: async (...args) => {
     return await find('[class$=-drilldown__optionLabelInfo]', ...args);
   },
-  findDescription: async function () {
-    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
-      args[_key12] = arguments[_key12];
-    }
+  findDescription: async (...args) => {
     return await find('[class$=__description]', ...args);
   },
-  findPopoverRoot: function () {
-    return PopoverLocator.find(...arguments);
+  findPopoverRoot: (...args) => {
+    return PopoverLocator.find(...args);
   },
-  findPopoverTrigger: function () {
-    return PopoverLocator.findTrigger(...arguments);
+  findPopoverTrigger: (...args) => {
+    return PopoverLocator.findTrigger(...args);
   },
-  findPopoverContent: function () {
-    const _parseQueryArguments = parseQueryArguments(...arguments),
+  findPopoverContent: (...args) => {
+    const _parseQueryArguments = parseQueryArguments(...args),
       element = _parseQueryArguments.element,
       selector = _parseQueryArguments.selector,
       options = _parseQueryArguments.options;

package/es/Drilldown/index.js

@@ -118,9 +118,10 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
         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;
 
@@ -202,28 +203,29 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       }
 
       // 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
@@ -643,9 +645,9 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       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
@@ -669,9 +671,9 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       };
     }, () => {
       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 = _objectWithoutProperties(selectedOption, _excluded2);
@@ -1027,67 +1029,71 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           id: lastOptionId
         });
       }
-    }, _ref8 => {
-      let getTriggerProps = _ref8.getTriggerProps,
-        getListProps = _ref8.getListProps,
-        getOptionProps = _ref8.getOptionProps,
-        getDisabledOptionProps = _ref8.getDisabledOptionProps;
-      return jsx(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 = 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
+    }) => jsx(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 = contains(target, related);
+        if (!related || related === this._drilldownRef || related !== target && !containsRelated) {
           this.setState({
             highlightedOptionId: void 0
           });
         }
-      })), jsx(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;
-        }
-      }, jsx(Options, Object.assign({}, getListProps(), {
-        role: "presentation",
-        as: as
-      }), this.renderList(getOptionProps, getDisabledOptionProps))));
-    });
+      },
+      onMouseLeave: () => {
+        this.setState({
+          highlightedOptionId: void 0
+        });
+      }
+    })), jsx(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;
+      }
+    }, jsx(Options, Object.assign({}, getListProps(), {
+      role: "presentation",
+      as: as
+    }), this.renderList(getOptionProps, getDisabledOptionProps)))));
   }
   render() {
     // clear temporary option store
@@ -1115,8 +1121,9 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
-      onHideContent: (event, _ref9) => {
-        let documentClick = _ref9.documentClick;
+      onHideContent: (event, {
+        documentClick
+      }) => {
         if (typeof onDismiss === 'function') {
           onDismiss(event, documentClick);
         }

package/lib/Drilldown/DrilldownLocator.js

@@ -38,89 +38,53 @@ var _index = require("./index");
 /* eslint-enable no-restricted-imports */
 const customMethods = {
   // return the wrapper Option.Items
-  findAllOptions: async function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  findAllOptions: async (...args) => {
     return await (0, _uiTestUtils.findAll)('[class$=-optionItem__container]:not([role="presentation"])', ...args);
   },
-  findAllOptionWrappers: async function () {
-    return await _OptionsItemLocator.OptionsItemLocator.findAll(...arguments);
+  findAllOptionWrappers: async (...args) => {
+    return await _OptionsItemLocator.OptionsItemLocator.findAll(...args);
   },
-  findOptionWrapperByOptionId: async function (_element, optionId) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-      args[_key2 - 2] = arguments[_key2];
-    }
+  findOptionWrapperByOptionId: async (_element, optionId, ...args) => {
     return _OptionsItemLocator.OptionsItemLocator.find(`:has(#${optionId})`, ...args);
   },
-  findSizableContainer: async function () {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
+  findSizableContainer: async (...args) => {
     return await (0, _uiTestUtils.find)('[class$=-drilldown__container]', ...args);
   },
-  findSelectableContainer: async function () {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
+  findSelectableContainer: async (...args) => {
     return await (0, _uiTestUtils.find)('[id^=Selectable_][id$=-list]', ...args);
   },
-  findHeaderTitle: async function () {
-    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-      args[_key5] = arguments[_key5];
-    }
+  findHeaderTitle: async (...args) => {
     return await (0, _uiTestUtils.find)('[id^=DrilldownHeader-Title]', ...args);
   },
-  findHeaderActionOption: async function () {
-    for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
-      args[_key6] = arguments[_key6];
-    }
+  findHeaderActionOption: async (...args) => {
     return await (0, _uiTestUtils.find)('[id^=DrilldownHeader-Action]', ...args);
   },
-  findHeaderBackOption: async function () {
-    for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
-      args[_key7] = arguments[_key7];
-    }
+  findHeaderBackOption: async (...args) => {
     return await (0, _uiTestUtils.find)('[id^=DrilldownHeader-Back]', ...args);
   },
-  findHeaderSeparator: async function () {
-    for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
-      args[_key8] = arguments[_key8];
-    }
+  findHeaderSeparator: async (...args) => {
     return await (0, _uiTestUtils.find)('[id^=DrilldownHeader-Separator]', ...args);
   },
-  findAllSeparators: async function () {
-    for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
-      args[_key9] = arguments[_key9];
-    }
+  findAllSeparators: async (...args) => {
     return await (0, _uiTestUtils.findAll)('[class$=-separator]', ...args);
   },
-  findAllGroupLabels: async function () {
-    for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
-      args[_key10] = arguments[_key10];
-    }
+  findAllGroupLabels: async (...args) => {
     return await (0, _uiTestUtils.findAll)('[class$=-options__label]', ...args);
   },
-  findLabelInfo: async function () {
-    for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
-      args[_key11] = arguments[_key11];
-    }
+  findLabelInfo: async (...args) => {
     return await (0, _uiTestUtils.find)('[class$=-drilldown__optionLabelInfo]', ...args);
   },
-  findDescription: async function () {
-    for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
-      args[_key12] = arguments[_key12];
-    }
+  findDescription: async (...args) => {
     return await (0, _uiTestUtils.find)('[class$=__description]', ...args);
   },
-  findPopoverRoot: function () {
-    return _PopoverLocator.PopoverLocator.find(...arguments);
+  findPopoverRoot: (...args) => {
+    return _PopoverLocator.PopoverLocator.find(...args);
   },
-  findPopoverTrigger: function () {
-    return _PopoverLocator.PopoverLocator.findTrigger(...arguments);
+  findPopoverTrigger: (...args) => {
+    return _PopoverLocator.PopoverLocator.findTrigger(...args);
   },
-  findPopoverContent: function () {
-    const _parseQueryArguments = (0, _uiTestUtils.parseQueryArguments)(...arguments),
+  findPopoverContent: (...args) => {
+    const _parseQueryArguments = (0, _uiTestUtils.parseQueryArguments)(...args),
       element = _parseQueryArguments.element,
       selector = _parseQueryArguments.selector,
       options = _parseQueryArguments.options;