Allow hiding shortcuts for MenuSelectHeading (#262)

* Allow hiding shortcuts for MenuSelectHeading * Add doc comments for `hideShortcuts` and don't pass prop to MenuSelect --------- Co-authored-by: Steven DeMartini <sjdemartini@users.noreply.github.com>
sjdemartini · Aug 22, 2024 · 9640e6d · 9640e6d
1 parent 3f41dd9
commit 9640e6d
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/src/controls/MenuSelectHeading.tsx b/src/controls/MenuSelectHeading.tsx
@@ -42,6 +42,11 @@ export type MenuSelectHeadingProps = Except<
     /** @deprecated Use `labels.empty` instead. */
     emptyValue?: React.ReactNode;
   };
+  /**
+   * Whether to hide the shortcut key tooltips for each heading option. By
+   * default false.
+   */
+  hideShortcuts?: boolean;
 };
 
 const useStyles = makeStyles({ name: { MenuSelectHeading } })((theme) => {
@@ -126,6 +131,7 @@ const LEVEL_TO_HEADING_OPTION_VALUE = {
 
 export default function MenuSelectHeading({
   labels,
+  hideShortcuts = false,
   ...menuSelectProps
 }: MenuSelectHeadingProps) {
   const { classes, cx } = useStyles();
@@ -266,7 +272,7 @@ export default function MenuSelectHeading({
       >
         <MenuButtonTooltip
           label=""
-          shortcutKeys={["mod", "alt", "0"]}
+          shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "0"]}
           placement="right"
           contentWrapperClassName={classes.menuOption}
         >
@@ -281,7 +287,7 @@ export default function MenuSelectHeading({
         >
           <MenuButtonTooltip
             label=""
-            shortcutKeys={["mod", "alt", "1"]}
+            shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "1"]}
             placement="right"
             contentWrapperClassName={cx(
               classes.menuOption,
@@ -301,7 +307,7 @@ export default function MenuSelectHeading({
         >
           <MenuButtonTooltip
             label=""
-            shortcutKeys={["mod", "alt", "2"]}
+            shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "2"]}
             placement="right"
             contentWrapperClassName={cx(
               classes.menuOption,
@@ -321,7 +327,7 @@ export default function MenuSelectHeading({
         >
           <MenuButtonTooltip
             label=""
-            shortcutKeys={["mod", "alt", "3"]}
+            shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "3"]}
             placement="right"
             contentWrapperClassName={cx(
               classes.menuOption,
@@ -341,7 +347,7 @@ export default function MenuSelectHeading({
         >
           <MenuButtonTooltip
             label=""
-            shortcutKeys={["mod", "alt", "4"]}
+            shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "4"]}
             placement="right"
             contentWrapperClassName={cx(
               classes.menuOption,
@@ -361,7 +367,7 @@ export default function MenuSelectHeading({
         >
           <MenuButtonTooltip
             label=""
-            shortcutKeys={["mod", "alt", "5"]}
+            shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "5"]}
             placement="right"
             contentWrapperClassName={cx(
               classes.menuOption,
@@ -381,7 +387,7 @@ export default function MenuSelectHeading({
         >
           <MenuButtonTooltip
             label=""
-            shortcutKeys={["mod", "alt", "6"]}
+            shortcutKeys={hideShortcuts ? undefined : ["mod", "alt", "6"]}
             placement="right"
             contentWrapperClassName={cx(
               classes.menuOption,