@instructure/ui-drilldown 8.21.1-snapshot.10

package/lib/Drilldown/index.js

@@ -0,0 +1,1253 @@
+"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"];
+
+var _dec, _dec2, _dec3, _class, _class2, _temp, _IconArrowOpenEndSoli, _IconArrowOpenStartSo, _Options$Separator, _Options$Separator2;
+
+/**
+---
+category: components
+experimental: true
+---
+@tsProps
+**/
+let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _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;
+    this._popover = null;
+    this._trigger = null;
+    this._containerElement = null;
+    this._id = void 0;
+    this._triggerId = void 0;
+    this._headerBackId = void 0;
+    this._headerTitleId = void 0;
+    this._headerTitleLabelId = void 0;
+    this._headerActionId = void 0;
+    this._pageHistory = void 0;
+    this._activeOptionsMap = {};
+    this._selectedGroupOptionsMap = {};
+    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)
+
+
+      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;
+      const rotateFocus = this.props.rotateFocus;
+      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
+          highlightId = this.activeOptionIds[0];
+        } else if (direction) {
+          // if it has direction, find next id based on it
+          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({
+          highlightedOptionId: highlightId
+        }, () => {
+          this.focusOption(highlightId);
+        });
+      }
+    };
+
+    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
+
+
+      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"
+
+
+      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);
+      } else {
+        // if it was already in the history, we go back to that page,
+        // and clear the rest from the history
+        this._pageHistory.splice(idxInHistory + 1, this._pageHistory.length - 1);
+      }
+
+      this.setState({
+        activePageId: newPageId,
+        highlightedOptionId: void 0
+      });
+      return {
+        prevPageId,
+        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
+
+
+      const _ref2 = this.goToPage(this.previousPage.id),
+            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
+
+      const _ref4 = this.goToPreviousPage(),
+            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);
+
+      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;
+      const groupProps = selectedOption.groupProps,
+            selectedOptionChild = (0, _objectWithoutProperties2.default)(selectedOption, _excluded);
+      const _selectedOptionChild$ = selectedOptionChild.props,
+            subPageId = _selectedOptionChild$.subPageId,
+            href = _selectedOptionChild$.href,
+            value = _selectedOptionChild$.value,
+            onOptionClick = _selectedOptionChild$.onOptionClick;
+
+      if (typeof onOptionClick === 'function') {
+        onOptionClick(event, {
+          optionId: id,
+          drilldown: this,
+          ...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()
+
+        if (isLink && optionEl !== null && optionEl !== void 0 && optionEl.href) {
+          optionEl.click();
+        }
+      }
+
+      if (groupProps !== null && groupProps !== void 0 && groupProps.selectableType) {
+        this.handleGroupOptionSelected(event, selectedOption);
+      } else {
+        if (typeof onSelect === 'function') {
+          onSelect(event, {
+            value,
+            isSelected: true,
+            selectedOption: selectedOptionChild,
+            drilldown: this
+          });
+        }
+      } // 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...
+
+      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)
+
+        if (option) {
+          this.handleOptionSelect(event, {
+            id
+          });
+        }
+      } // On Right arrow...
+
+
+      if (event.key === 'ArrowRight') {
+        // if the option has subpage, we open it
+        if (option !== null && option !== void 0 && option.props.subPageId) {
+          this.handleOptionSelect(event, {
+            id
+          });
+        }
+      } // 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 (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,
+          drilldown: this,
+          ...this.exposedNavigationProps
+        });
+      }
+    };
+
+    this.state = {
+      isShowingPopover: props.trigger ? !!props.show : false,
+      activePageId: props.rootPageId,
+      highlightedOptionId: void 0,
+      lastSelectedId: void 0
+    };
+    this._pageHistory = [props.rootPageId];
+    this.setDefaultSelected();
+    this._id = props.id || props.deterministicId();
+    this._triggerId = props.deterministicId('Drilldown-Trigger');
+    this._headerBackId = props.deterministicId('DrilldownHeader-Back');
+    this._headerTitleId = props.deterministicId('DrilldownHeader-Title');
+    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
+      // if anything gets focused, otherwise we focus the whole drilldown
+      setTimeout(() => {
+        if (!this.focused()) {
+          this.focus();
+        }
+      }, 0);
+    } // if the current page was removed
+
+
+    if (!this.currentPage) {
+      if (this.previousPage) {
+        this.goToPreviousPage();
+      } else {
+        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,
+        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.
+
+
+  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
+
+    const pageHistory = [...this._pageHistory];
+    return {
+      pageHistory,
+      goToPage,
+      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 ((_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 (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() {
+    this.pages.forEach(page => {
+      const children = page.props.children;
+      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;
+
+          if (!selectableType) {
+            return;
+          }
+
+          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;
+          }
+
+          this._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
+
+              if (optionDefaultSelected === false) {
+                return;
+              }
+
+              const isGroupDefaultSelected = typeof optionValue !== 'undefined' && groupDefaultSelected.filter(value => typeof value !== 'undefined').includes(optionValue);
+
+              if (optionDefaultSelected || isGroupDefaultSelected) {
+                this._selectedGroupOptionsMap[groupId].set(optionId, optionValue);
+              }
+            }
+          });
+        }
+      });
+    });
+  }
+
+  get selectedGroupOptionIdsArray() {
+    return Object.values(this._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;
+    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
+
+    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, {
+        id: this._headerBackId,
+        onOptionClick: this.handleBackButtonClick
+      }, (0, _emotion.jsx)("div", {
+        css: styles === null || styles === void 0 ? void 0 : styles.headerBack,
+        role: "presentation"
+      }, backButtonLabel)));
+    } // Header title
+
+
+    if (renderTitle) {
+      const title = (0, _callRenderProp.callRenderProp)(renderTitle);
+
+      if (title) {
+        headerChildren.push((0, _emotion.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)));
+      }
+    } // Action label
+
+
+    if (renderActionLabel) {
+      const actionLabel = (0, _callRenderProp.callRenderProp)(renderActionLabel);
+
+      if (actionLabel) {
+        headerChildren.push((0, _emotion.jsx)(_DrilldownOption.DrilldownOption, {
+          id: this._headerActionId,
+          themeOverride: {
+            color: styles === null || styles === void 0 ? void 0 : styles.headerActionColor
+          },
+          onOptionClick: event => {
+            if (typeof onHeaderActionClicked === 'function') {
+              onHeaderActionClicked(event);
+            }
+          }
+        }, actionLabel));
+      }
+    } // 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;
+  }
+
+  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);
+    } else {
+      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) {
+    const _selectedOption$props = selectedOption.props,
+          optionId = _selectedOption$props.id,
+          value = _selectedOption$props.value;
+    const _ref6 = selectedOption.groupProps,
+          groupId = _ref6.id,
+          selectableType = _ref6.selectableType,
+          groupOnSelect = _ref6.onSelect;
+    const onSelect = this.props.onSelect;
+
+    if (this._selectedGroupOptionsMap[groupId].has(optionId)) {
+      // toggle off, if already selected
+      this._selectedGroupOptionsMap[groupId].delete(optionId);
+    } else {
+      if (selectableType === 'multiple') {
+        // "checkbox"
+        this._selectedGroupOptionsMap[groupId].set(optionId, value);
+      } else if (selectableType === 'single') {
+        // "radio"
+        this._selectedGroupOptionsMap[groupId] = new Map();
+
+        this._selectedGroupOptionsMap[groupId].set(optionId, value);
+      }
+    } // needed for rerender
+
+
+    this.setState({
+      lastSelectedId: optionId
+    });
+    const groupProps = selectedOption.groupProps,
+          option = (0, _objectWithoutProperties2.default)(selectedOption, _excluded2);
+    const selectedOptionValuesInGroup = Array.from(this._selectedGroupOptionsMap[groupId].values());
+
+    if (typeof groupOnSelect === 'function') {
+      groupOnSelect(event, {
+        value: selectedOptionValuesInGroup,
+        isSelected: this._selectedGroupOptionsMap[groupId].has(optionId),
+        selectedOption: option,
+        drilldown: this
+      });
+    }
+
+    if (typeof onSelect === 'function') {
+      onSelect(event, {
+        value: selectedOptionValuesInGroup,
+        isSelected: this._selectedGroupOptionsMap[groupId].has(optionId),
+        selectedOption: option,
+        drilldown: this
+      });
+    }
+  }
+
+  renderList(getOptionProps, getDisabledOptionProps) {
+    const currentPage = this.currentPage,
+          headerChildren = this.headerChildren;
+
+    if (!currentPage) {
+      return null;
+    }
+
+    const pageChildren = [...headerChildren, ...currentPage.children]; // for tracking if the last item was a Separator or not
+
+    let lastItemWasSeparator = false;
+    return pageChildren.map((child, index) => {
+      /**
+       * --- RENDER GROUP ---
+       */
+      if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownGroup.DrilldownGroup])) {
+        const isFirstChild = index === 0;
+        const isLastChild = index === pageChildren.length - 1;
+        const afterSeparator = lastItemWasSeparator;
+        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
+        needsFirstSeparator, needsLastSeparator);
+        /**
+         * --- RENDER SEPARATOR ---
+         */
+      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownSeparator.DrilldownSeparator])) {
+        // if the last item was separator, we don't want to duplicate it
+        if (lastItemWasSeparator) {
+          return null;
+        }
+
+        lastItemWasSeparator = true;
+        return this.renderSeparator(child);
+        /**
+         * --- RENDER OPTION ---
+         */
+      } else if ((0, _matchComponentTypes.matchComponentTypes)(child, [_DrilldownOption.DrilldownOption])) {
+        lastItemWasSeparator = false;
+        return this.renderOption(child, getOptionProps, getDisabledOptionProps);
+      } else {
+        return null;
+      }
+    });
+  }
+
+  renderSeparator(separator) {
+    const _separator$props = separator.props,
+          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
+      ,
+      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;
+
+    if (!id) {
+      (0, _console.warn)(false, `Drilldown.Option without id won't be rendered. It is needed to internally track the options.`);
+      return null;
+    }
+
+    if (this.getPageChildById(id)) {
+      (0, _console.warn)(false, `Duplicate id: "${id}"! Make sure all options have unique ids, otherwise they won't be rendered.`);
+      return null;
+    } // 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({
+        id,
+        // aria-selected is only valid for these roles, otherwise we need to unset it
+        ...(role && !['gridcell', 'option', 'row', 'tab', 'columnheader', 'rowheader', 'treeitem'].includes(role) && {
+          'aria-selected': void 0
+        })
+      }),
+      // we pass the themeOverride to Options.Item
+      themeOverride,
+      // directly passed props
+      renderBeforeLabel,
+      renderAfterLabel,
+      beforeLabelContentVAlign,
+      afterLabelContentVAlign,
+      description,
+      descriptionRole,
+      as,
+      role,
+      elementRef,
+      variant: 'default',
+      tabIndex: -1
+    }; // 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
+
+    if (isOptionDisabled) {
+      optionProps.variant = 'disabled';
+      optionProps = { ...optionProps,
+        ...getDisabledOptionProps()
+      };
+    } // track as valid active option if not the title
+
+
+    if (id !== this._headerTitleId) {
+      this._activeOptionsMap[id] = { ...option,
+        ...optionData
+      };
+    }
+
+    const customRole = role !== _DrilldownOption.DrilldownOption.defaultProps.role ? role : void 0; // 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));
+    }
+
+    if (groupProps !== null && groupProps !== void 0 && groupProps.selectableType) {
+      isSelected = this._selectedGroupOptionsMap[groupProps.id].has(id);
+      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
+
+      if (groupProps.selectableType === 'single') {
+        optionProps.role = customRole || 'menuitemradio';
+      }
+
+      if (groupProps.selectableType === 'multiple') {
+        optionProps.role = customRole || 'menuitemcheckbox';
+      }
+    } // 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.`);
+      } else if (groupProps !== null && groupProps !== void 0 && groupProps.selectableType) {
+        (0, _console.warn)(false, `Drilldown.Option with id "${id}" is in a selectable group, so it will ignore the "href" property.`);
+      } else {
+        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
+
+    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',
+      center: 'center',
+      end: 'flex-end'
+    };
+    const labelAriaId = `${id}__label`;
+    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, {
+      key: id,
+      "aria-labelledby": labelledby,
+      "aria-describedby": describedby
+    }), (0, _emotion.jsx)("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", {
+      role: "note",
+      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,
+          selectableType = _group$props.selectableType,
+          role = _group$props.role,
+          as = _group$props.as,
+          elementRef = _group$props.elementRef;
+
+    if (!children) {
+      return null;
+    }
+
+    const groupChildren = []; // add a separator above
+
+    if (needsFirstSeparator) {
+      groupChildren.push(_Options$Separator || (_Options$Separator = (0, _emotion.jsx)(_Options.Options.Separator, null)));
+    }
+
+    if (selectableType && !this._selectedGroupOptionsMap[id]) {
+      this._selectedGroupOptionsMap[id] = new Map();
+    } // 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
+      ,
+      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;
+      }
+    }))); // 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,
+          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,
+      selectedOptionId: this.selectedGroupOptionIdsArray,
+      onRequestShowOptions: this.show,
+      onRequestHideOptions: this.hide,
+      onRequestSelectOption: this.handleOptionSelect,
+      onRequestHighlightOption: this.handleOptionHighlight,
+      onRequestHighlightFirstOption: event => {
+        const firstOptionId = this.activeOptionIds[0];
+        this.handleOptionHighlight(event, {
+          id: firstOptionId
+        });
+      },
+      onRequestHighlightLastOption: event => {
+        const lastOptionId = this.activeOptionIds[this.activeOptionIds.length - 1];
+        this.handleOptionHighlight(event, {
+          id: lastOptionId
+        });
+      }
+    }, _ref7 => {
+      let getTriggerProps = _ref7.getTriggerProps,
+          getListProps = _ref7.getListProps,
+          getOptionProps = _ref7.getOptionProps,
+          getDisabledOptionProps = _ref7.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,
+        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,
+        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
+    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,
+          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, _ref8) => {
+        let documentClick = _ref8.documentClick;
+
+        if (typeof onDismiss === 'function') {
+          onDismiss(event, documentClick);
+        }
+
+        this.reset();
+        this.handleToggle(event, false);
+      },
+      onShowContent: event => this.handleToggle(event, true),
+      mountNode: mountNode,
+      placement: placement,
+      withArrow: withArrow,
+      positionTarget: positionTarget,
+      constrain: constrain,
+      shouldContainFocus: shouldContainFocus,
+      shouldReturnFocus: shouldReturnFocus,
+      id: this._id,
+      on: ['click'],
+      onFocus: onFocus,
+      onMouseOver: onMouseOver,
+      offsetX: offsetX,
+      offsetY: offsetY,
+      elementRef: element => {
+        // setting ref for "Popover" version, the popover root
+        // (if there is no trigger, we set it in handleDrilldownRef)
+        this.handleRef(element);
+      },
+      ref: el => {
+        this._popover = el;
+
+        if (typeof popoverRef === 'function') {
+          popoverRef(el);
+        }
+      },
+      renderTrigger: (0, _safeCloneElement.safeCloneElement)(trigger, {
+        ref: el => {
+          this._trigger = el;
+        },
+        'aria-haspopup': this.props.role,
+        id: this._triggerId,
+        disabled: !!(trigger.props.disabled || disabled),
+        'aria-disabled': trigger.props.disabled || disabled ? 'true' : void 0
+      })
+    }, this.renderPage()) : this.renderPage();
+  }
+
+}, _class2.displayName = "Drilldown", _class2.componentId = 'Drilldown', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  disabled: false,
+  rotateFocus: true,
+  as: 'ul',
+  role: 'menu',
+  overflowX: 'auto',
+  overflowY: 'auto',
+  placement: 'bottom center',
+  defaultShow: false,
+  shouldHideOnSelect: true,
+  shouldContainFocus: false,
+  shouldReturnFocus: true,
+  withArrow: true,
+  offsetX: 0,
+  offsetY: 0
+}, _class2.Group = _DrilldownGroup.DrilldownGroup, _class2.Option = _DrilldownOption.DrilldownOption, _class2.Page = _DrilldownPage.DrilldownPage, _class2.Separator = _DrilldownSeparator.DrilldownSeparator, _temp)) || _class) || _class) || _class);
+exports.Drilldown = Drilldown;
+var _default = Drilldown;
+exports.default = _default;