feat: add highlighted prop

Author: wmui51

packages/menu/src/Menu.js

@@ -11,6 +11,7 @@ const Menu = (props) => {
     children,
     defaultSelected,
     divider,
+    highlighted,
     menuRef,
     multiple,
     onChange = () => {},
@@ -27,6 +28,7 @@ const Menu = (props) => {
           {...otherProps}
           defaultSelected={defaultSelected}
           hasFocus={hasFocus}
+          highlighted={highlighted}
           menuRef={menuRef}
           multiple={multiple}
           onBlur={handleBlur}
@@ -102,6 +104,11 @@ Menu.propTypes = {
    * Shows a divider at the bottom of the menu
    */
   divider: PropTypes.bool,
+  /**
+   * Semi-controlled way of having Options highlighted
+   * Takes the index of the option you want highlighted
+   */
+  highlighted: PropTypes.number,
   /**
    * A callback ref that gets passed to the HTML
    * element with `role="listbox"`

packages/menu/src/MenuGroup.js

@@ -8,6 +8,7 @@ const MenuGroup = (props) => {
   const {
     children,
     defaultSelected,
+    highlighted,
     menuRef,
     multiple,
     onChange,
@@ -21,6 +22,7 @@ const MenuGroup = (props) => {
     <MenuBehavior
       {...otherProps}
       defaultSelected={defaultSelected}
+      highlighted={highlighted}
       menuRef={menuRef}
       multiple={multiple}
       onChange={onChange}
@@ -84,6 +86,13 @@ MenuGroup.propTypes = {
    */
   // eslint-disable-next-line react/forbid-prop-types
   defaultSelected: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Semi-controlled way of having Options highlighted
+   * Takes the index of the option you want highlighted
+   * This will take precedent over the Menu prop of the
+   * same name
+   */
+  highlighted: PropTypes.number,
   /**
    * A callback ref that gets passed to the HTML
    * element with `role="listbox"`

packages/menu/src/behaviors/MenuBehavior.js

@@ -275,6 +275,12 @@ const MenuBehavior = (props) => {
     }
   }, [props.selected]);
 
+  useEffect(() => {
+    if (props.highlighted >= 0) {
+      setHighlightIndexHook(props.highlighted + 1);
+    }
+  }, [props.highlighted]);
+
   return props.children({
     getActiveOption: getActiveOptionMethod,
     getHighlightIndex: getHighlightIndexMethod,
@@ -306,6 +312,7 @@ MenuBehavior.propTypes = {
   handleFocus: PropTypes.func,
   handleKeyDown: PropTypes.func,
   handleMouseMove: PropTypes.func,
+  highlighted: PropTypes.func,
   menuRef: PropTypes.func,
   multiple: PropTypes.bool,
   onBlur: PropTypes.func,

packages/menu/src/presenters/MenuGroupPresenter.js

@@ -18,6 +18,7 @@ const MenuGroupPresenter = (props) => {
       getHighlightIndex,
       getOptionsInfo,
       getPreviousEvent,
+      highlighted,
       multiple,
       onBlur: handleBlur,
       onFocus: handleFocus,
@@ -44,6 +45,7 @@ const MenuGroupPresenter = (props) => {
       handleFocus,
       handleKeyDown,
       handleMouseMove,
+      highlighted,
       multiple,
       selected,
       setActiveOption,
@@ -180,6 +182,7 @@ MenuGroupPresenter.propTypes = {
   getHighlightIndex: PropTypes.func,
   getOptionsInfo: PropTypes.func,
   getPreviousEvent: PropTypes.func,
+  highlighted: PropTypes.number,
   menuRef: PropTypes.func,
   multiple: PropTypes.bool,
   onBlur: PropTypes.func,

packages/menu/src/presenters/MenuPresenter.js

@@ -71,6 +71,7 @@ const MenuPresenter = (props) => {
   delete payload.handleFocus;
   delete payload.handleKeyDown;
   delete payload.handleMouseMove;
+  delete payload.highlighted;
   delete payload.setActiveOption;
   delete payload.setHighlightIndex;
   delete payload.setOptionsInfo;