@instructure/ui-drilldown 8.32.1-snapshot-0 → 8.32.2-snapshot-1

package/CHANGELOG.md

@@ -3,7 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.32.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.32.0...v8.32.1-snapshot-0) (2022-11-30)
+## [8.32.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.32.1...v8.32.2-snapshot-1) (2023-01-02)
+
+
+### Bug Fixes
+
+* **ui-drilldown:** selectableType=single works like radio buttons ([3a20ddb](https://github.com/instructure/instructure-ui/commit/3a20ddb132bf5efd15f719df1236cd98933f1219))
+
+
+### Features
+
+* **ui-drilldown:** add `selected` prop to Drilldown.Option which allows controlled behavior ([5776937](https://github.com/instructure/instructure-ui/commit/57769376930e8f6201ce603b9e9e832564db2dd6))
+
+
+
+
+
+## [8.32.1](https://github.com/instructure/instructure-ui/compare/v8.30.0...v8.32.1) (2022-12-01)
 
 **Note:** Version bump only for package @instructure/ui-drilldown
 

package/es/Drilldown/DrilldownOption/props.js

@@ -27,6 +27,7 @@ const propTypes = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   subPageId: PropTypes.string,
   disabled: PropTypes.bool,
+  selected: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   href: PropTypes.string,
   as: PropTypes.elementType,
@@ -42,5 +43,5 @@ const propTypes = {
   defaultSelected: PropTypes.bool,
   elementRef: PropTypes.func
 };
-const allowedProps = ['id', 'children', 'subPageId', 'disabled', 'value', 'href', 'as', 'role', 'renderLabelInfo', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'onOptionClick', 'defaultSelected', 'elementRef'];
+const allowedProps = ['id', 'children', 'subPageId', 'disabled', 'selected', 'value', 'href', 'as', 'role', 'renderLabelInfo', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'onOptionClick', 'defaultSelected', 'elementRef'];
 export { propTypes, allowedProps };

package/es/Drilldown/index.js

@@ -75,7 +75,6 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
     this._headerActionId = void 0;
     this._pageHistory = void 0;
     this._activeOptionsMap = {};
-    this._selectedGroupOptionsMap = {};
     this.ref = null;
 
     this.handleRef = el => {
@@ -370,10 +369,10 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       isShowingPopover: props.trigger ? !!props.show : false,
       activePageId: props.rootPageId,
       highlightedOptionId: void 0,
-      lastSelectedId: void 0
+      lastSelectedId: void 0,
+      selectedGroupOptionsMap: this.setDefaultSelected()
     };
     this._pageHistory = [props.rootPageId];
-    this.setDefaultSelected();
     this._id = props.id || props.deterministicId();
     this._triggerId = props.deterministicId('Drilldown-Trigger');
     this._headerBackId = props.deterministicId('DrilldownHeader-Back');
@@ -523,6 +522,7 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   setDefaultSelected() {
+    const selectedGroupOptionsMap = {};
     this.pages.forEach(page => {
       const children = page.props.children;
       this.getChildrenArray(children).forEach(child => {
@@ -540,12 +540,16 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
             return;
           }
 
+          if (selectableType && !selectedGroupOptionsMap[groupId]) {
+            selectedGroupOptionsMap[groupId] = new Map();
+          }
+
           if (selectableType === 'single' && groupDefaultSelected.length > 1) {
             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();
+          selectedGroupOptionsMap[groupId] = new Map();
           (_this$getChildrenArra = this.getChildrenArray(groupChildren)) === null || _this$getChildrenArra === void 0 ? void 0 : _this$getChildrenArra.forEach(groupChild => {
             if (matchComponentTypes(groupChild, [DrilldownOption])) {
               const _groupChild$props = groupChild.props,
@@ -560,17 +564,18 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
               const isGroupDefaultSelected = typeof optionValue !== 'undefined' && groupDefaultSelected.filter(value => typeof value !== 'undefined').includes(optionValue);
 
               if (optionDefaultSelected || isGroupDefaultSelected) {
-                this._selectedGroupOptionsMap[groupId].set(optionId, optionValue);
+                selectedGroupOptionsMap[groupId].set(optionId, optionValue);
               }
             }
           });
         }
       });
     });
+    return selectedGroupOptionsMap;
   }
 
   get selectedGroupOptionIdsArray() {
-    return Object.values(this._selectedGroupOptionsMap).map(groupIdMap => Array.from(groupIdMap.keys())).flat();
+    return Object.values(this.state.selectedGroupOptionsMap).map(groupIdMap => Array.from(groupIdMap.keys())).flat();
   }
 
   get headerChildren() {
@@ -705,57 +710,66 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
   }
 
   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);
+    this.setState(oldState => {
+      var _oldState$selectedGro;
+
+      const _selectedOption$props = selectedOption.props,
+            optionId = _selectedOption$props.id,
+            value = _selectedOption$props.value;
+      const _ref6 = selectedOption.groupProps,
+            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);
+      } else {
+        if (selectableType === 'multiple') {
+          // "checkbox"
+          newState.set(optionId, value);
+        } else if (selectableType === 'single') {
+          // "radio"
+          newState = new Map();
+          newState.set(optionId, value);
+        }
       }
-    } // needed for rerender
-
 
-    this.setState({
-      lastSelectedId: optionId
-    });
+      return { ...oldState,
+        selectedGroupOptionsMap: { ...oldState.selectedGroupOptionsMap,
+          [groupId]: newState
+        }
+      };
+    }, () => {
+      const value = selectedOption.props.value;
+      const _ref7 = selectedOption.groupProps,
+            groupId = _ref7.id,
+            groupOnSelect = _ref7.onSelect;
+      const onSelect = this.props.onSelect;
 
-    const groupProps = selectedOption.groupProps,
-          option = _objectWithoutProperties(selectedOption, _excluded2);
+      const groupProps = selectedOption.groupProps,
+            option = _objectWithoutProperties(selectedOption, _excluded2);
 
-    const selectedOptionValuesInGroup = Array.from(this._selectedGroupOptionsMap[groupId].values());
+      const selectedOptionValuesInGroup = [...this.state.selectedGroupOptionsMap[groupId].values()];
 
-    if (typeof groupOnSelect === 'function') {
-      groupOnSelect(event, {
-        value: selectedOptionValuesInGroup,
-        isSelected: this._selectedGroupOptionsMap[groupId].has(optionId),
-        selectedOption: option,
-        drilldown: this
-      });
-    }
+      if (typeof groupOnSelect === 'function') {
+        groupOnSelect(event, {
+          value: selectedOptionValuesInGroup,
+          isSelected: selectedOptionValuesInGroup.includes(value),
+          selectedOption: option,
+          drilldown: this
+        });
+      }
 
-    if (typeof onSelect === 'function') {
-      onSelect(event, {
-        value: selectedOptionValuesInGroup,
-        isSelected: this._selectedGroupOptionsMap[groupId].has(optionId),
-        selectedOption: option,
-        drilldown: this
-      });
-    }
+      if (typeof onSelect === 'function') {
+        onSelect(event, {
+          value: selectedOptionValuesInGroup,
+          isSelected: selectedOptionValuesInGroup.includes(value),
+          selectedOption: option,
+          drilldown: this
+        });
+      }
+    });
   }
 
   renderList(getOptionProps, getDisabledOptionProps) {
@@ -911,8 +925,17 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       optionProps.renderBeforeLabel = _IconArrowOpenStartSo || (_IconArrowOpenStartSo = jsx(IconArrowOpenStartSolid, null));
     }
 
-    if (groupProps !== null && groupProps !== void 0 && groupProps.selectableType) {
-      isSelected = this._selectedGroupOptionsMap[groupProps.id].has(id);
+    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 = jsx(IconCheckSolid, {
         style: {
@@ -1014,7 +1037,6 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           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;
@@ -1027,10 +1049,6 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
 
     if (needsFirstSeparator) {
       groupChildren.push(_Options$Separator || (_Options$Separator = jsx(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)
 
@@ -1100,11 +1118,11 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
           id: lastOptionId
         });
       }
-    }, _ref7 => {
-      let getTriggerProps = _ref7.getTriggerProps,
-          getListProps = _ref7.getListProps,
-          getOptionProps = _ref7.getOptionProps,
-          getDisabledOptionProps = _ref7.getDisabledOptionProps;
+    }, _ref8 => {
+      let getTriggerProps = _ref8.getTriggerProps,
+          getListProps = _ref8.getListProps,
+          getOptionProps = _ref8.getOptionProps,
+          getDisabledOptionProps = _ref8.getDisabledOptionProps;
       return jsx(View, Object.assign({
         as: "div",
         elementRef: this.handleDrilldownRef,
@@ -1190,8 +1208,8 @@ let Drilldown = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
-      onHideContent: (event, _ref8) => {
-        let documentClick = _ref8.documentClick;
+      onHideContent: (event, _ref9) => {
+        let documentClick = _ref9.documentClick;
 
         if (typeof onDismiss === 'function') {
           onDismiss(event, documentClick);

package/lib/Drilldown/DrilldownOption/props.js

@@ -37,6 +37,7 @@ const propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   subPageId: _propTypes.default.string,
   disabled: _propTypes.default.bool,
+  selected: _propTypes.default.bool,
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   href: _propTypes.default.string,
   as: _propTypes.default.elementType,
@@ -53,5 +54,5 @@ const propTypes = {
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['id', 'children', 'subPageId', 'disabled', 'value', 'href', 'as', 'role', 'renderLabelInfo', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'onOptionClick', 'defaultSelected', 'elementRef'];
+const allowedProps = ['id', 'children', 'subPageId', 'disabled', 'selected', 'value', 'href', 'as', 'role', 'renderLabelInfo', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'onOptionClick', 'defaultSelected', 'elementRef'];
 exports.allowedProps = allowedProps;

package/lib/Drilldown/index.js

@@ -91,7 +91,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
     this._headerActionId = void 0;
     this._pageHistory = void 0;
     this._activeOptionsMap = {};
-    this._selectedGroupOptionsMap = {};
     this.ref = null;
 
     this.handleRef = el => {
@@ -384,10 +383,10 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       isShowingPopover: props.trigger ? !!props.show : false,
       activePageId: props.rootPageId,
       highlightedOptionId: void 0,
-      lastSelectedId: void 0
+      lastSelectedId: void 0,
+      selectedGroupOptionsMap: this.setDefaultSelected()
     };
     this._pageHistory = [props.rootPageId];
-    this.setDefaultSelected();
     this._id = props.id || props.deterministicId();
     this._triggerId = props.deterministicId('Drilldown-Trigger');
     this._headerBackId = props.deterministicId('DrilldownHeader-Back');
@@ -537,6 +536,7 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   setDefaultSelected() {
+    const selectedGroupOptionsMap = {};
     this.pages.forEach(page => {
       const children = page.props.children;
       this.getChildrenArray(children).forEach(child => {
@@ -554,12 +554,16 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
             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;
           }
 
-          this._selectedGroupOptionsMap[groupId] = new Map();
+          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,
@@ -574,17 +578,18 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
               const isGroupDefaultSelected = typeof optionValue !== 'undefined' && groupDefaultSelected.filter(value => typeof value !== 'undefined').includes(optionValue);
 
               if (optionDefaultSelected || isGroupDefaultSelected) {
-                this._selectedGroupOptionsMap[groupId].set(optionId, optionValue);
+                selectedGroupOptionsMap[groupId].set(optionId, optionValue);
               }
             }
           });
         }
       });
     });
+    return selectedGroupOptionsMap;
   }
 
   get selectedGroupOptionIdsArray() {
-    return Object.values(this._selectedGroupOptionsMap).map(groupIdMap => Array.from(groupIdMap.keys())).flat();
+    return Object.values(this.state.selectedGroupOptionsMap).map(groupIdMap => Array.from(groupIdMap.keys())).flat();
   }
 
   get headerChildren() {
@@ -719,55 +724,64 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
   }
 
   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);
+    this.setState(oldState => {
+      var _oldState$selectedGro;
+
+      const _selectedOption$props = selectedOption.props,
+            optionId = _selectedOption$props.id,
+            value = _selectedOption$props.value;
+      const _ref6 = selectedOption.groupProps,
+            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);
+      } else {
+        if (selectableType === 'multiple') {
+          // "checkbox"
+          newState.set(optionId, value);
+        } else if (selectableType === 'single') {
+          // "radio"
+          newState = new Map();
+          newState.set(optionId, value);
+        }
       }
-    } // needed for rerender
 
+      return { ...oldState,
+        selectedGroupOptionsMap: { ...oldState.selectedGroupOptionsMap,
+          [groupId]: newState
+        }
+      };
+    }, () => {
+      const value = selectedOption.props.value;
+      const _ref7 = selectedOption.groupProps,
+            groupId = _ref7.id,
+            groupOnSelect = _ref7.onSelect;
+      const onSelect = this.props.onSelect;
+      const groupProps = selectedOption.groupProps,
+            option = (0, _objectWithoutProperties2.default)(selectedOption, _excluded2);
+      const selectedOptionValuesInGroup = [...this.state.selectedGroupOptionsMap[groupId].values()];
+
+      if (typeof groupOnSelect === 'function') {
+        groupOnSelect(event, {
+          value: selectedOptionValuesInGroup,
+          isSelected: selectedOptionValuesInGroup.includes(value),
+          selectedOption: option,
+          drilldown: this
+        });
+      }
 
-    this.setState({
-      lastSelectedId: optionId
+      if (typeof onSelect === 'function') {
+        onSelect(event, {
+          value: selectedOptionValuesInGroup,
+          isSelected: selectedOptionValuesInGroup.includes(value),
+          selectedOption: option,
+          drilldown: this
+        });
+      }
     });
-    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) {
@@ -922,8 +936,17 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       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);
+    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: {
@@ -1025,7 +1048,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           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;
@@ -1038,10 +1060,6 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
 
     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)
 
@@ -1111,11 +1129,11 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
           id: lastOptionId
         });
       }
-    }, _ref7 => {
-      let getTriggerProps = _ref7.getTriggerProps,
-          getListProps = _ref7.getListProps,
-          getOptionProps = _ref7.getOptionProps,
-          getDisabledOptionProps = _ref7.getDisabledOptionProps;
+    }, _ref8 => {
+      let getTriggerProps = _ref8.getTriggerProps,
+          getListProps = _ref8.getListProps,
+          getOptionProps = _ref8.getOptionProps,
+          getDisabledOptionProps = _ref8.getDisabledOptionProps;
       return (0, _emotion.jsx)(_View.View, Object.assign({
         as: "div",
         elementRef: this.handleDrilldownRef,
@@ -1201,8 +1219,8 @@ let Drilldown = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
       isShowingContent: show,
       defaultIsShowingContent: defaultShow,
       shouldCloseOnDocumentClick: true,
-      onHideContent: (event, _ref8) => {
-        let documentClick = _ref8.documentClick;
+      onHideContent: (event, _ref9) => {
+        let documentClick = _ref9.documentClick;
 
         if (typeof onDismiss === 'function') {
           onDismiss(event, documentClick);

package/package.json

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

package/src/Drilldown/DrilldownOption/props.ts

@@ -78,6 +78,11 @@ type DrilldownOptionOwnProps = {
    */
   disabled?: boolean
 
+  /**
+   * Whether the option is selected or not. (Setting this property assumes controlled behaviour)
+   */
+  selected?: boolean
+
   /**
    * The value of the option. Should be set for options in selectable groups.
    */
@@ -181,6 +186,7 @@ const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   subPageId: PropTypes.string,
   disabled: PropTypes.bool,
+  selected: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   href: PropTypes.string,
   as: PropTypes.elementType,
@@ -202,6 +208,7 @@ const allowedProps: AllowedPropKeys = [
   'children',
   'subPageId',
   'disabled',
+  'selected',
   'value',
   'href',
   'as',