@instructure/ui-drilldown 8.33.1 → 8.33.2-snapshot-5

package/lib/Drilldown/index.js

@@ -1,72 +1,41 @@
 "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 _console = require("@instructure/console");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _contains = require("@instructure/ui-dom-utils/lib/contains.js");
-
 var _containsActiveElement = require("@instructure/ui-dom-utils/lib/containsActiveElement.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _Options = require("@instructure/ui-options/lib/Options");
-
 var _Popover = require("@instructure/ui-popover/lib/Popover");
-
 var _Selectable = require("@instructure/ui-selectable/lib/Selectable");
-
 var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
-
 var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
-
 var _IconCheckSolid = require("@instructure/ui-icons/lib/IconCheckSolid.js");
-
 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 _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["groupProps"],
-      _excluded2 = ["groupProps"],
-      _excluded3 = ["id", "themeOverride"];
-
+  _excluded2 = ["groupProps"],
+  _excluded3 = ["id", "themeOverride"];
 var _dec, _dec2, _dec3, _class, _class2, _IconArrowOpenEndSoli, _IconArrowOpenStartSo, _Options$Separator, _Options$Separator2;
-
 /**
 ---
 category: components
@@ -75,8 +44,11 @@ category: components
 **/
 let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class Drilldown extends _react.Component {
   // Array of visited page ids in "breadcrumbs" fashion
+
   // Map of the active options on the page (includes header options too)
+
   // Map of the selected options in groups (grouped by group id)
+
   constructor(props) {
     super(props);
     this._drilldownRef = null;
@@ -92,61 +64,52 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._pageHistory = void 0;
     this._activeOptionsMap = {};
     this.ref = null;
-
     this.handleRef = el => {
       // ref and elementRef have to be set together for the same element
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleDrilldownRef = el => {
       const drilldownRef = this.props.drilldownRef;
       this._drilldownRef = el;
-
       if (typeof drilldownRef === 'function') {
         drilldownRef(el);
-      } // setting ref for "non-popover" version, the drilldown itself
-      // (if a trigger is provided, the Popover sets the ref)
-
+      }
 
+      // setting ref for "non-popover" version, the drilldown itself
+      // (if a trigger is provided, the Popover sets the ref)
       if (!this.props.trigger) {
         this.handleRef(el);
       }
     };
-
     this.show = event => {
       if (this._popover) {
         this._popover.show(event);
-
         this.setState({
           isShowingPopover: true
         });
       }
     };
-
     this.hide = event => {
       if (this._popover) {
         this._popover.hide(event);
-
         this.setState({
           isShowingPopover: false
         });
         this.reset();
       }
     };
-
     this.handleOptionHighlight = (_event, _ref) => {
       let id = _ref.id,
-          direction = _ref.direction;
+        direction = _ref.direction;
       const rotateFocus = this.props.rotateFocus;
-      const highlightedOptionId = this.state.highlightedOptionId; // if id exists, use that, or calculate from direction
+      const highlightedOptionId = this.state.highlightedOptionId;
 
+      // if id exists, use that, or calculate from direction
       let highlightId = this.getPageChildById(id) ? id : void 0;
-
       if (!highlightId) {
         if (!highlightedOptionId) {
           // nothing highlighted yet, highlight first option
@@ -156,21 +119,17 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           const index = this.activeOptionIds.indexOf(highlightedOptionId);
           const newIndex = index + direction;
           highlightId = index > -1 ? this.activeOptionIds[newIndex] : void 0;
-
           if (rotateFocus) {
             const lastOptionsIndex = this.activeOptionIds.length - 1;
-
             if (newIndex < 0) {
               highlightId = this.activeOptionIds[lastOptionsIndex];
             }
-
             if (newIndex > lastOptionsIndex) {
               highlightId = this.activeOptionIds[0];
             }
           }
         }
       }
-
       if (highlightId) {
         // only highlight if id exists as a valid option
         this.setState({
@@ -180,33 +139,28 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         });
       }
     };
-
     this.goToPage = newPageId => {
       var _this$pageMap;
-
       if (!newPageId) {
         (0, _console.warn)(false, `Cannot go to page because there was no page id provided.`);
         return void 0;
-      } // TS complains that it cannot be true, but since it is an exposed method,
-      // it is better if we provide a warning for this case too
-
+      }
 
+      // TS complains that it cannot be true, but since it is an exposed method,
+      // it is better if we provide a warning for this case too
       if (typeof newPageId !== 'string') {
         (0, _console.warn)(false, `Cannot go to page because parameter newPageId has to be string (valid page id). Current newPageId is "${typeof newPageId}".`);
         return void 0;
       }
-
       if (!((_this$pageMap = this.pageMap) !== null && _this$pageMap !== void 0 && _this$pageMap[newPageId])) {
         (0, _console.warn)(false, `Cannot go to page because page with id: "${newPageId}" doesn't exist.`);
         return void 0;
-      } // the last page id in the history is the current one,
-      // it will become the "prevPage"
-
+      }
 
+      // the last page id in the history is the current one,
+      // it will become the "prevPage"
       const prevPageId = this._pageHistory[this._pageHistory.length - 1];
-
       const idxInHistory = this._pageHistory.indexOf(newPageId);
-
       if (idxInHistory < 0) {
         // if it is not in the page history, we have to add it
         this._pageHistory.push(newPageId);
@@ -215,7 +169,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         // and clear the rest from the history
         this._pageHistory.splice(idxInHistory + 1, this._pageHistory.length - 1);
       }
-
       this.setState({
         activePageId: newPageId,
         highlightedOptionId: void 0
@@ -225,60 +178,54 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         newPageId
       };
     };
-
     this.goToPreviousPage = () => {
       if (!this.previousPage) {
         (0, _console.warn)(false, `There is no previous page to go to. The current page history is: [${this._pageHistory.join(', ')}].`);
         return void 0;
-      } // If there is a previous page, goToPage will succeed and return the data
-
+      }
 
+      // 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;
-
+        newPageId = _ref2.newPageId,
+        prevPageId = _ref2.prevPageId;
       return {
         newPageId,
         prevPageId
       };
     };
-
     this.handleBackButtonClick = () => {
       const _ref3 = this.currentPage,
-            onBackButtonClicked = _ref3.onBackButtonClicked; // we only display the back button when there is a page to go back to
+        onBackButtonClicked = _ref3.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;
-
+        newPageId = _ref4.newPageId,
+        prevPageId = _ref4.prevPageId;
       if (typeof onBackButtonClicked === 'function') {
         onBackButtonClicked(newPageId, prevPageId);
       }
     };
-
     this.handleOptionSelect = (event, _ref5) => {
       let id = _ref5.id;
-      const selectedOption = this.getPageChildById(id); // TODO: this line can be removed when React 16 is no longer supported
+      const selectedOption = this.getPageChildById(id);
 
+      // TODO: this line can be removed when React 16 is no longer supported
       event.persist();
-
       if (!id || !selectedOption || selectedOption.props.disabled || event.target.getAttribute('disabled') || event.target.getAttribute('aria-disabled')) {
         event.preventDefault();
         event.stopPropagation();
         return;
       }
-
       const _this$props = this.props,
-            shouldHideOnSelect = _this$props.shouldHideOnSelect,
-            onSelect = _this$props.onSelect;
+        shouldHideOnSelect = _this$props.shouldHideOnSelect,
+        onSelect = _this$props.onSelect;
       const groupProps = selectedOption.groupProps,
-            selectedOptionChild = (0, _objectWithoutProperties2.default)(selectedOption, _excluded);
+        selectedOptionChild = (0, _objectWithoutProperties2.default)(selectedOption, _excluded);
       const _selectedOptionChild$ = selectedOptionChild.props,
-            subPageId = _selectedOptionChild$.subPageId,
-            href = _selectedOptionChild$.href,
-            value = _selectedOptionChild$.value,
-            onOptionClick = _selectedOptionChild$.onOptionClick;
-
+        subPageId = _selectedOptionChild$.subPageId,
+        href = _selectedOptionChild$.href,
+        value = _selectedOptionChild$.value,
+        onOptionClick = _selectedOptionChild$.onOptionClick;
       if (typeof onOptionClick === 'function') {
         onOptionClick(event, {
           optionId: id,
@@ -286,23 +233,20 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           ...this.exposedNavigationProps
         });
       }
-
       if (subPageId) {
         this.goToPage(subPageId);
       }
-
       if (href) {
         var _this$_drilldownRef;
-
         const optionEl = (_this$_drilldownRef = this._drilldownRef) === null || _this$_drilldownRef === void 0 ? void 0 : _this$_drilldownRef.querySelector(`#${id}`);
-        const isLink = optionEl.tagName.toLowerCase() === 'a'; // we need this check because in some cases
-        // we ignore href prop in renderOption()
+        const isLink = optionEl.tagName.toLowerCase() === 'a';
 
+        // we need this check because in some cases
+        // we ignore href prop in renderOption()
         if (isLink && optionEl !== null && optionEl !== void 0 && optionEl.href) {
           optionEl.click();
         }
       }
-
       if (groupProps !== null && groupProps !== void 0 && groupProps.selectableType) {
         this.handleGroupOptionSelected(event, selectedOption);
       } else {
@@ -314,31 +258,32 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
             drilldown: this
           });
         }
-      } // should prevent closing on page navigation
-
+      }
 
+      // should prevent closing on page navigation
       if (shouldHideOnSelect && !subPageId && id !== this._headerBackId) {
         this.hide(event);
       }
     };
-
     this.handleKeyDown = event => {
       const id = event.target.id;
-      const option = this.getPageChildById(id); // On Space...
+      const option = this.getPageChildById(id);
 
+      // On Space...
       if ([' ', 'space', 'Space'].includes(event.key)) {
         // we need to preventDefault so the page doesn't scroll on Space
         event.preventDefault();
-        event.stopPropagation(); // for options, Space it has to work as Enter (get selected)
+        event.stopPropagation();
 
+        // for options, Space it has to work as Enter (get selected)
         if (option) {
           this.handleOptionSelect(event, {
             id
           });
         }
-      } // On Right arrow...
-
+      }
 
+      // On Right arrow...
       if (event.key === 'ArrowRight') {
         // if the option has subpage, we open it
         if (option !== null && option !== void 0 && option.props.subPageId) {
@@ -346,30 +291,27 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
             id
           });
         }
-      } // On Left arrow...
-
+      }
 
+      // On Left arrow...
       if (event.key === 'ArrowLeft') {
         var _this$_popover;
-
         // if it is possible, we go a level up in the history
         if (this._pageHistory.length > 1) {
           this.goToPreviousPage();
-        } // if on root page and popover is open, we close it
-
+        }
 
+        // if on root page and popover is open, we close it
         if (this.isOnRootPage && (_this$_popover = this._popover) !== null && _this$_popover !== void 0 && _this$_popover.shown) {
           this._popover.hide(event);
         }
       }
     };
-
     this.handleToggle = (event, shown) => {
       const onToggle = this.props.onToggle;
       this.setState({
         isShowingPopover: shown
       });
-
       if (typeof onToggle === 'function') {
         onToggle(event, {
           shown,
@@ -378,7 +320,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         });
       }
     };
-
     this.state = {
       isShowingPopover: props.trigger ? !!props.show : false,
       activePageId: props.rootPageId,
@@ -394,18 +335,13 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._headerTitleLabelId = props.deterministicId('DrilldownHeader-Title-Label');
     this._headerActionId = props.deterministicId('DrilldownHeader-Action');
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
-
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStylesVariables);
   }
-
   componentDidUpdate(_prevProps, prevState) {
     var _this$props$makeStyle2, _this$props3;
-
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStylesVariables);
-
     if (prevState.activePageId !== this.state.activePageId) {
       // on page change with mouse navigation, some option can get rendered
       // under the cursor and get focused, so we need to wait a tick to see
@@ -415,9 +351,9 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           this.focus();
         }
       }, 0);
-    } // if the current page was removed
-
+    }
 
+    // if the current page was removed
     if (!this.currentPage) {
       if (this.previousPage) {
         this.goToPreviousPage();
@@ -425,71 +361,62 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         this.goToPage(this.props.rootPageId);
       }
     }
-
     if (this.state.highlightedOptionId && !this.getPageChildById(this.state.highlightedOptionId)) {
       this.setState({
         highlightedOptionId: void 0
       });
     }
   }
-
   get makeStylesVariables() {
     return {
       hasHighlightedOption: !!this.state.highlightedOptionId
     };
   }
-
   get activeOptionIds() {
     return Object.keys(this._activeOptionsMap);
   }
-
   get activeOptions() {
     return Object.values(this._activeOptionsMap);
   }
-
   get pages() {
     const children = this.props.children;
     return _react.default.Children.toArray(children || []);
   }
-
   get pageMap() {
     const children = this.props.children;
-
     if (!children) {
       return void 0;
     }
-
     const map = {};
     this.pages.forEach(page => {
       const props = page.props;
       const children = props.children;
-      map[props.id] = { ...props,
+      map[props.id] = {
+        ...props,
         children: _react.default.Children.toArray(children || [])
       };
     });
     return map;
   }
-
   get isOnRootPage() {
     return this.state.activePageId === this.props.rootPageId;
   }
-
   get currentPage() {
     return this.getPageById(this.state.activePageId);
   }
-
   get previousPage() {
     const previousPageId = this._pageHistory[this._pageHistory.length - 2];
     return this.getPageById(previousPageId);
-  } // Returns the navigation methods and the page history.
-  // These are used in some callbacks to expose the navigation logic.
-
+  }
 
+  // Returns the navigation methods and the page history.
+  // These are used in some callbacks to expose the navigation logic.
   get exposedNavigationProps() {
     const goToPage = this.goToPage,
-          goToPreviousPage = this.goToPreviousPage; // we make a copy of the array so the original history
-    // cannot be modified from the outside
+      goToPreviousPage = this.goToPreviousPage;
 
+    // we make a copy of the array so the original history
+    // cannot be modified from the outside
     const pageHistory = [...this._pageHistory];
     return {
       pageHistory,
@@ -497,44 +424,36 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       goToPreviousPage
     };
   }
-
   get currentPageAriaLabel() {
     var _this$currentPage;
-
     // 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 it has title, point to the title label content
     if ((_this$currentPage = this.currentPage) !== null && _this$currentPage !== void 0 && _this$currentPage.renderTitle) {
       return this._headerTitleLabelId;
-    } // if root page has no title, try the trigger, if exists
-
+    }
 
+    // if root page has no title, try the trigger, if exists
     if (this.isOnRootPage && this.props.trigger) {
       return this._triggerId;
     }
-
     return void 0;
   }
-
   getChildrenArray(children) {
     if (!children) {
       return [];
     }
-
     return Array.isArray(children) ? children : [children];
   }
-
   getPageById(id) {
     return this.pageMap && id ? this.pageMap[id] : void 0;
   }
-
   getPageChildById(id) {
     return id ? this._activeOptionsMap[id] : void 0;
   }
-
   setDefaultSelected() {
     const selectedGroupOptionsMap = {};
     this.pages.forEach(page => {
@@ -542,41 +461,35 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       this.getChildrenArray(children).forEach(child => {
         if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
           var _this$getChildrenArra;
-
           const _child$props = child.props,
-                groupId = _child$props.id,
-                selectableType = _child$props.selectableType,
-                _child$props$defaultS = _child$props.defaultSelected,
-                groupDefaultSelected = _child$props$defaultS === void 0 ? [] : _child$props$defaultS,
-                groupChildren = _child$props.children;
-
+            groupId = _child$props.id,
+            selectableType = _child$props.selectableType,
+            _child$props$defaultS = _child$props.defaultSelected,
+            groupDefaultSelected = _child$props$defaultS === void 0 ? [] : _child$props$defaultS,
+            groupChildren = _child$props.children;
           if (!selectableType) {
             return;
           }
-
           if (selectableType && !selectedGroupOptionsMap[groupId]) {
             selectedGroupOptionsMap[groupId] = new Map();
           }
-
           if (selectableType === 'single' && groupDefaultSelected.length > 1) {
             (0, _console.error)(false, `Radio type selectable groups can have only one item selected! Group with id "${groupId}" cannot select multiple items: [${groupDefaultSelected.join(', ')}]!`);
             return;
           }
-
           selectedGroupOptionsMap[groupId] = new Map();
           (_this$getChildrenArra = this.getChildrenArray(groupChildren)) === null || _this$getChildrenArra === void 0 ? void 0 : _this$getChildrenArra.forEach(groupChild => {
             if ((0, _matchComponentTypes.matchComponentTypes)(groupChild, [_DrilldownOption.DrilldownOption])) {
               const _groupChild$props = groupChild.props,
-                    optionId = _groupChild$props.id,
-                    optionValue = _groupChild$props.value,
-                    optionDefaultSelected = _groupChild$props.defaultSelected; // if explicitly set to false, it should override the group's
+                optionId = _groupChild$props.id,
+                optionValue = _groupChild$props.value,
+                optionDefaultSelected = _groupChild$props.defaultSelected;
 
+              // if explicitly set to false, it should override the group's
               if (optionDefaultSelected === false) {
                 return;
               }
-
               const isGroupDefaultSelected = typeof optionValue !== 'undefined' && groupDefaultSelected.filter(value => typeof value !== 'undefined').includes(optionValue);
-
               if (optionDefaultSelected || isGroupDefaultSelected) {
                 selectedGroupOptionsMap[groupId].set(optionId, optionValue);
               }
@@ -587,29 +500,26 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     });
     return selectedGroupOptionsMap;
   }
-
   get selectedGroupOptionIdsArray() {
     return Object.values(this.state.selectedGroupOptionsMap).map(groupIdMap => Array.from(groupIdMap.keys())).flat();
   }
-
   get headerChildren() {
     const currentPage = this.currentPage;
     const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          deterministicId = _this$props4.deterministicId;
+      styles = _this$props4.styles,
+      deterministicId = _this$props4.deterministicId;
     const headerChildren = [];
-
     if (!currentPage) {
       return headerChildren;
     }
-
     const children = currentPage.children,
-          renderBackButtonLabel = currentPage.renderBackButtonLabel,
-          renderTitle = currentPage.renderTitle,
-          renderActionLabel = currentPage.renderActionLabel,
-          onHeaderActionClicked = currentPage.onHeaderActionClicked,
-          withoutHeaderSeparator = currentPage.withoutHeaderSeparator; // Back navigation option
+      renderBackButtonLabel = currentPage.renderBackButtonLabel,
+      renderTitle = currentPage.renderTitle,
+      renderActionLabel = currentPage.renderActionLabel,
+      onHeaderActionClicked = currentPage.onHeaderActionClicked,
+      withoutHeaderSeparator = currentPage.withoutHeaderSeparator;
 
+    // Back navigation option
     if (this.previousPage) {
       const prevPageTitle = (0, _callRenderProp.callRenderProp)(this.previousPage.renderTitle);
       const backButtonLabel = (0, _callRenderProp.callRenderProp)(renderBackButtonLabel, prevPageTitle);
@@ -620,12 +530,11 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         css: styles === null || styles === void 0 ? void 0 : styles.headerBack,
         role: "presentation"
       }, backButtonLabel)));
-    } // Header title
-
+    }
 
+    // Header title
     if (renderTitle) {
       const title = (0, _callRenderProp.callRenderProp)(renderTitle);
-
       if (title) {
         headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
           id: this._headerTitleId,
@@ -636,12 +545,11 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           id: this._headerTitleLabelId
         }, title)));
       }
-    } // Action label
-
+    }
 
+    // Action label
     if (renderActionLabel) {
       const actionLabel = (0, _callRenderProp.callRenderProp)(renderActionLabel);
-
       if (actionLabel) {
         headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
           id: this._headerActionId,
@@ -655,26 +563,22 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           }
         }, actionLabel));
       }
-    } // header separator
-
+    }
 
+    // header separator
     if (headerChildren.length > 0 && children.length > 0 && !withoutHeaderSeparator) {
       headerChildren.push((0, _emotion.jsx)(_DrilldownSeparator.DrilldownSeparator, {
         id: deterministicId('DrilldownHeader-Separator')
       }));
     }
-
     return headerChildren;
   }
-
   get shown() {
     return this.props.trigger ? this.state.isShowingPopover : true;
   }
-
   containsDuplicateChild(children) {
     let containsDuplicate = false;
     const childMap = new Map();
-
     for (const child of children) {
       if (!childMap.has(child.props.id)) {
         childMap.set(child.props.id, true);
@@ -683,32 +587,25 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         return containsDuplicate = true;
       }
     }
-
     return containsDuplicate;
   }
-
   reset() {
     this._activeOptionsMap = {};
     this.setState({
       highlightedOptionId: void 0
     });
   }
-
   focus() {
     if (this.shown) {
       var _this$_drilldownRef2, _this$_drilldownRef3;
-
       (0, _console.error)(!!((_this$_drilldownRef2 = this._drilldownRef) !== null && _this$_drilldownRef2 !== void 0 && _this$_drilldownRef2.focus), '[Drilldown] Could not focus the drilldown.');
       (_this$_drilldownRef3 = this._drilldownRef) === null || _this$_drilldownRef3 === void 0 ? void 0 : _this$_drilldownRef3.focus();
     } else {
       var _this$_trigger;
-
       (0, _console.error)(!!((_this$_trigger = this._trigger) !== null && _this$_trigger !== void 0 && _this$_trigger.focus), '[Drilldown] Could not focus the trigger.');
-
       this._trigger.focus();
     }
   }
-
   focused() {
     if (this.shown) {
       return (0, _containsActiveElement.containsActiveElement)(this._drilldownRef);
@@ -716,25 +613,21 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       return (0, _containsActiveElement.containsActiveElement)(this._trigger);
     }
   }
-
   focusOption(id) {
     const container = this._containerElement;
     const optionElement = container === null || container === void 0 ? void 0 : container.querySelector(`[id="${id}"]`);
     optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
   }
-
   handleGroupOptionSelected(event, selectedOption) {
     this.setState(oldState => {
       var _oldState$selectedGro;
-
       const _selectedOption$props = selectedOption.props,
-            optionId = _selectedOption$props.id,
-            value = _selectedOption$props.value;
+        optionId = _selectedOption$props.id,
+        value = _selectedOption$props.value;
       const _ref6 = selectedOption.groupProps,
-            groupId = _ref6.id,
-            selectableType = _ref6.selectableType;
+        groupId = _ref6.id,
+        selectableType = _ref6.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
         newState.delete(optionId);
@@ -748,22 +641,22 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           newState.set(optionId, value);
         }
       }
-
-      return { ...oldState,
-        selectedGroupOptionsMap: { ...oldState.selectedGroupOptionsMap,
+      return {
+        ...oldState,
+        selectedGroupOptionsMap: {
+          ...oldState.selectedGroupOptionsMap,
           [groupId]: newState
         }
       };
     }, () => {
       const value = selectedOption.props.value;
       const _ref7 = selectedOption.groupProps,
-            groupId = _ref7.id,
-            groupOnSelect = _ref7.onSelect;
+        groupId = _ref7.id,
+        groupOnSelect = _ref7.onSelect;
       const onSelect = this.props.onSelect;
       const groupProps = selectedOption.groupProps,
-            option = (0, _objectWithoutProperties2.default)(selectedOption, _excluded2);
+        option = (0, _objectWithoutProperties2.default)(selectedOption, _excluded2);
       const selectedOptionValuesInGroup = [...this.state.selectedGroupOptionsMap[groupId].values()];
-
       if (typeof groupOnSelect === 'function') {
         groupOnSelect(event, {
           value: selectedOptionValuesInGroup,
@@ -772,7 +665,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           drilldown: this
         });
       }
-
       if (typeof onSelect === 'function') {
         onSelect(event, {
           value: selectedOptionValuesInGroup,
@@ -783,17 +675,15 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       }
     });
   }
-
   renderList(getOptionProps, getDisabledOptionProps) {
     const currentPage = this.currentPage,
-          headerChildren = this.headerChildren;
-
+      headerChildren = this.headerChildren;
     if (!currentPage || this.containsDuplicateChild(currentPage.children)) {
       return null;
     }
+    const pageChildren = [...headerChildren, ...currentPage.children];
 
-    const pageChildren = [...headerChildren, ...currentPage.children]; // for tracking if the last item was a Separator or not
-
+    // for tracking if the last item was a Separator or not
     let lastItemWasSeparator = false;
     return pageChildren.map((child, index) => {
       /**
@@ -806,8 +696,10 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         const needsFirstSeparator = !child.props.withoutSeparators && !isFirstChild && !afterSeparator;
         const needsLastSeparator = !child.props.withoutSeparators && !isLastChild;
         lastItemWasSeparator = needsLastSeparator;
-        return this.renderGroup(child, getOptionProps, getDisabledOptionProps, // for rendering separators appropriately
+        return this.renderGroup(child, getOptionProps, getDisabledOptionProps,
+        // for rendering separators appropriately
         needsFirstSeparator, needsLastSeparator);
+
         /**
          * --- RENDER SEPARATOR ---
          */
@@ -816,9 +708,9 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         if (lastItemWasSeparator) {
           return null;
         }
-
         lastItemWasSeparator = true;
         return this.renderSeparator(child);
+
         /**
          * --- RENDER OPTION ---
          */
@@ -830,51 +722,49 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       }
     });
   }
-
   renderSeparator(separator) {
     const _separator$props = separator.props,
-          id = _separator$props.id,
-          themeOverride = _separator$props.themeOverride,
-          props = (0, _objectWithoutProperties2.default)(_separator$props, _excluded3);
+      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, {
       id: id,
       key: id,
-      role: "separator" // we pass the themeOverride to Options.Separator
+      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;
-
     const styles = this.props.styles;
     let isSelected = false;
     const _option$props = option.props,
-          id = _option$props.id,
-          children = _option$props.children,
-          href = _option$props.href,
-          as = _option$props.as,
-          role = _option$props.role,
-          subPageId = _option$props.subPageId,
-          disabled = _option$props.disabled,
-          renderLabelInfo = _option$props.renderLabelInfo,
-          renderBeforeLabel = _option$props.renderBeforeLabel,
-          renderAfterLabel = _option$props.renderAfterLabel,
-          beforeLabelContentVAlign = _option$props.beforeLabelContentVAlign,
-          afterLabelContentVAlign = _option$props.afterLabelContentVAlign,
-          description = _option$props.description,
-          descriptionRole = _option$props.descriptionRole,
-          elementRef = _option$props.elementRef,
-          themeOverride = _option$props.themeOverride;
-
+      id = _option$props.id,
+      children = _option$props.children,
+      href = _option$props.href,
+      as = _option$props.as,
+      role = _option$props.role,
+      subPageId = _option$props.subPageId,
+      disabled = _option$props.disabled,
+      renderLabelInfo = _option$props.renderLabelInfo,
+      renderBeforeLabel = _option$props.renderBeforeLabel,
+      renderAfterLabel = _option$props.renderAfterLabel,
+      beforeLabelContentVAlign = _option$props.beforeLabelContentVAlign,
+      afterLabelContentVAlign = _option$props.afterLabelContentVAlign,
+      description = _option$props.description,
+      descriptionRole = _option$props.descriptionRole,
+      elementRef = _option$props.elementRef,
+      themeOverride = _option$props.themeOverride;
     if (!id) {
       (0, _console.warn)(false, `Drilldown.Option without id won't be rendered. It is needed to internally track the options.`);
       return null;
-    } // Props passed to the Option.Item
-
+    }
 
-    let optionProps = { // passthrough props
+    // Props passed to the Option.Item
+    let optionProps = {
+      // passthrough props
       ...(0, _omitProps.omitProps)(option.props, [..._DrilldownOption.DrilldownOption.allowedProps, ..._Options.Options.Item.allowedProps]),
       // props from selectable
       ...getOptionProps({
@@ -898,81 +788,78 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       elementRef,
       variant: 'default',
       tabIndex: -1
-    }; // extra data we need track on the option,
-    // but don't want to expose as props
+    };
 
+    // extra data we need track on the option,
+    // but don't want to expose as props
     const optionData = {
       groupProps: groupProps
     };
-    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); // display option as disabled
+    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);
 
+    // display option as disabled
     if (isOptionDisabled) {
       optionProps.variant = 'disabled';
-      optionProps = { ...optionProps,
+      optionProps = {
+        ...optionProps,
         ...getDisabledOptionProps()
       };
-    } // track as valid active option if not the title
-
+    }
 
+    // track as valid active option if not the title
     if (id !== this._headerTitleId) {
-      this._activeOptionsMap[id] = { ...option,
+      this._activeOptionsMap[id] = {
+        ...option,
         ...optionData
       };
     }
+    const customRole = role !== _DrilldownOption.DrilldownOption.defaultProps.role ? role : void 0;
 
-    const customRole = role !== _DrilldownOption.DrilldownOption.defaultProps.role ? role : void 0; // BEFORE/AFTER elements:
+    // BEFORE/AFTER elements:
     // 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['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));
     }
-
     const isOptionControlled = typeof option.props.selected === 'boolean';
-
     if ((groupProps !== null && groupProps !== void 0 && groupProps.selectableType || isOptionControlled) && groupProps) {
       if (!isOptionControlled) {
         var _this$state$selectedG;
-
         isSelected = Boolean((_this$state$selectedG = this.state.selectedGroupOptionsMap[groupProps.id]) === null || _this$state$selectedG === void 0 ? void 0 : _this$state$selectedG.has(id));
       } else {
         isSelected = Boolean(option.props.selected);
       }
-
       optionProps['aria-checked'] = isSelected;
       optionProps.renderBeforeLabel = (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
         style: {
           opacity: isSelected ? 1 : 0
         }
       });
-      (0, _console.warn)(!renderBeforeLabel, `The prop "renderBeforeLabel" is reserved on item with id: "${id}". When this option is a selectable member of a Drilldown.Group, selection indicator will render before the label.`); // setting aria roles and attributes for selectable group items
+      (0, _console.warn)(!renderBeforeLabel, `The prop "renderBeforeLabel" is reserved on item with id: "${id}". When this option is a selectable member of a Drilldown.Group, selection indicator will render before the label.`);
 
+      // setting aria roles and attributes for selectable group items
       if (groupProps.selectableType === 'single') {
         optionProps.role = customRole || 'menuitemradio';
       }
-
       if (groupProps.selectableType === 'multiple') {
         optionProps.role = customRole || 'menuitemcheckbox';
       }
-    } // display option as highlighted
-
-
+    }
+    // display option as highlighted
     if (id === this.state.highlightedOptionId) {
       optionProps.variant = 'highlighted';
-
       if (isOptionDisabled) {
         optionProps.variant = 'highlighted-disabled';
       }
     }
-
     if (href) {
       if (subPageId) {
         (0, _console.warn)(false, `Drilldown.Option with id "${id}" has subPageId, so it will ignore the "href" property.`);
@@ -982,34 +869,30 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
         optionProps.href = href;
       }
     }
-
     const optionLabel = (0, _callRenderProp.callRenderProp)(children, {
       id,
       variant: optionProps.variant,
       isSelected
     });
-
     if (!optionLabel) {
       (0, _console.warn)(false, `There are no "children" prop provided for option with id: "${id}", so it won't be rendered.`);
       return null;
     }
-
     const renderLabelProps = {
       variant: optionProps.variant,
       vAlign: afterLabelContentVAlign,
       as,
       role: optionProps.role,
       isSelected
-    }; // we need to bind our own option props the render functions
+    };
 
+    // we need to bind our own option props the render functions
     if (typeof optionProps.renderBeforeLabel === 'function' && !((_optionProps$renderBe = optionProps.renderBeforeLabel) !== null && _optionProps$renderBe !== void 0 && (_optionProps$renderBe2 = _optionProps$renderBe.prototype) !== null && _optionProps$renderBe2 !== void 0 && _optionProps$renderBe2.isReactComponent)) {
       optionProps.renderBeforeLabel = optionProps.renderBeforeLabel.bind(null, renderLabelProps);
     }
-
     if (typeof optionProps.renderAfterLabel === 'function' && !((_optionProps$renderAf = optionProps.renderAfterLabel) !== null && _optionProps$renderAf !== void 0 && (_optionProps$renderAf2 = _optionProps$renderAf.prototype) !== null && _optionProps$renderAf2 !== void 0 && _optionProps$renderAf2.isReactComponent)) {
       optionProps.renderAfterLabel = optionProps.renderAfterLabel.bind(null, renderLabelProps);
     }
-
     const labelInfo = renderLabelInfo && (0, _callRenderProp.callRenderProp)(renderLabelInfo, renderLabelProps);
     const vAlignMap = {
       start: 'flex-start',
@@ -1041,36 +924,35 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       id: infoAriaId
     }, labelInfo)) : null));
   }
-
   renderGroup(group, getOptionProps, getDisabledOptionProps, needsFirstSeparator, needsLastSeparator) {
     const _group$props = group.props,
-          id = _group$props.id,
-          children = _group$props.children,
-          renderGroupTitle = _group$props.renderGroupTitle,
-          themeOverride = _group$props.themeOverride,
-          role = _group$props.role,
-          as = _group$props.as,
-          elementRef = _group$props.elementRef;
-
+      id = _group$props.id,
+      children = _group$props.children,
+      renderGroupTitle = _group$props.renderGroupTitle,
+      themeOverride = _group$props.themeOverride,
+      role = _group$props.role,
+      as = _group$props.as,
+      elementRef = _group$props.elementRef;
     if (!children) {
       return null;
     }
+    const groupChildren = [];
 
-    const groupChildren = []; // add a separator above
-
+    // add a separator above
     if (needsFirstSeparator) {
       groupChildren.push(_Options$Separator || (_Options$Separator = (0, _emotion.jsx)(_Options.Options.Separator, null)));
-    } // create a sublist as a group
-    // (a wrapping list item will be created by Options)
-
+    }
 
+    // create a sublist as a group
+    // (a wrapping list item will be created by Options)
     groupChildren.push((0, _emotion.jsx)(_Options.Options, {
       id: id,
       key: id,
       role: role,
       as: as || this.props.as,
       renderLabel: renderGroupTitle,
-      elementRef: elementRef // we pass the themeOverride to Options
+      elementRef: elementRef
+      // we pass the themeOverride to Options
       ,
       themeOverride: themeOverride
     }, this.getChildrenArray(children).map(child => {
@@ -1081,34 +963,31 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       } else {
         return null;
       }
-    }))); // add a separator below
+    })));
 
+    // add a separator below
     if (needsLastSeparator) {
       groupChildren.push(_Options$Separator2 || (_Options$Separator2 = (0, _emotion.jsx)(_Options.Options.Separator, null)));
     }
-
     return groupChildren;
   }
-
   renderPage() {
     const _this$props5 = this.props,
-          styles = _this$props5.styles,
-          overflowY = _this$props5.overflowY,
-          overflowX = _this$props5.overflowX,
-          height = _this$props5.height,
-          width = _this$props5.width,
-          minHeight = _this$props5.minHeight,
-          minWidth = _this$props5.minWidth,
-          maxHeight = _this$props5.maxHeight,
-          maxWidth = _this$props5.maxWidth,
-          role = _this$props5.role,
-          as = _this$props5.as,
-          label = _this$props5.label;
-
+      styles = _this$props5.styles,
+      overflowY = _this$props5.overflowY,
+      overflowX = _this$props5.overflowX,
+      height = _this$props5.height,
+      width = _this$props5.width,
+      minHeight = _this$props5.minHeight,
+      minWidth = _this$props5.minWidth,
+      maxHeight = _this$props5.maxHeight,
+      maxWidth = _this$props5.maxWidth,
+      role = _this$props5.role,
+      as = _this$props5.as,
+      label = _this$props5.label;
     if (!this.currentPage) {
       return null;
     }
-
     return (0, _emotion.jsx)(_Selectable.Selectable, {
       isShowingOptions: this.shown,
       highlightedOptionId: this.state.highlightedOptionId,
@@ -1131,9 +1010,9 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       }
     }, _ref8 => {
       let getTriggerProps = _ref8.getTriggerProps,
-          getListProps = _ref8.getListProps,
-          getOptionProps = _ref8.getOptionProps,
-          getDisabledOptionProps = _ref8.getDisabledOptionProps;
+        getListProps = _ref8.getListProps,
+        getOptionProps = _ref8.getOptionProps,
+        getDisabledOptionProps = _ref8.getDisabledOptionProps;
       return (0, _emotion.jsx)(_View.View, Object.assign({
         as: "div",
         elementRef: this.handleDrilldownRef,
@@ -1158,7 +1037,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           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
@@ -1192,40 +1070,37 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       }), this.renderList(getOptionProps, getDisabledOptionProps))));
     });
   }
-
   render() {
     // clear temporary option store
     this._activeOptionsMap = {};
     const _this$props6 = this.props,
-          show = _this$props6.show,
-          defaultShow = _this$props6.defaultShow,
-          placement = _this$props6.placement,
-          withArrow = _this$props6.withArrow,
-          shouldContainFocus = _this$props6.shouldContainFocus,
-          shouldReturnFocus = _this$props6.shouldReturnFocus,
-          trigger = _this$props6.trigger,
-          mountNode = _this$props6.mountNode,
-          constrain = _this$props6.constrain,
-          positionTarget = _this$props6.positionTarget,
-          positionContainerDisplay = _this$props6.positionContainerDisplay,
-          popoverRef = _this$props6.popoverRef,
-          disabled = _this$props6.disabled,
-          onDismiss = _this$props6.onDismiss,
-          onFocus = _this$props6.onFocus,
-          onMouseOver = _this$props6.onMouseOver,
-          offsetX = _this$props6.offsetX,
-          offsetY = _this$props6.offsetY;
+      show = _this$props6.show,
+      defaultShow = _this$props6.defaultShow,
+      placement = _this$props6.placement,
+      withArrow = _this$props6.withArrow,
+      shouldContainFocus = _this$props6.shouldContainFocus,
+      shouldReturnFocus = _this$props6.shouldReturnFocus,
+      trigger = _this$props6.trigger,
+      mountNode = _this$props6.mountNode,
+      constrain = _this$props6.constrain,
+      positionTarget = _this$props6.positionTarget,
+      positionContainerDisplay = _this$props6.positionContainerDisplay,
+      popoverRef = _this$props6.popoverRef,
+      disabled = _this$props6.disabled,
+      onDismiss = _this$props6.onDismiss,
+      onFocus = _this$props6.onFocus,
+      onMouseOver = _this$props6.onMouseOver,
+      offsetX = _this$props6.offsetX,
+      offsetY = _this$props6.offsetY;
     return trigger ? (0, _emotion.jsx)(_Popover.Popover, {
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
       onHideContent: (event, _ref9) => {
         let documentClick = _ref9.documentClick;
-
         if (typeof onDismiss === 'function') {
           onDismiss(event, documentClick);
         }
-
         this.reset();
         this.handleToggle(event, false);
       },
@@ -1251,7 +1126,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       },
       ref: el => {
         this._popover = el;
-
         if (typeof popoverRef === 'function') {
           popoverRef(el);
         }
@@ -1267,7 +1141,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       })
     }, this.renderPage()) : this.renderPage();
   }
-
 }, _class2.displayName = "Drilldown", _class2.componentId = 'Drilldown', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   disabled: false,
   rotateFocus: true,