@czi-sds/mcp 0.3.0 → 0.4.0

package/data/zeroheight-exports/Dropdown-Menu.md

@@ -4,21 +4,21 @@ Dropdown Menus are coupled with Dropdown Inputs and in some cases Icon Buttons w
 
 ## Overview
 
->**Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
+> **Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
 >
->While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
+> While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
 
 ## Dropdown Menu Variants
 
-| In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category.  Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, or a combination of these features. |   | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
-| --- | --- | --- |
+| In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, or a combination of these features. |     | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------ |
 
 ---
 
 ## Dropdown Menu
 
-|  | In Figma |   |  | Meets Accessibility |   |  |  In napari hub + .org Codebases |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
 
 Dropdown Menus can be configured to have their Menu Items all in one large list or separated out into different sections or groupings; these Menu Item formats are established by the `[array]` passed into the `options` prop. Additionally, Dropdown Menus can be configured to include a Search Input. See the Data Format section below for details about configuring the `[array]`.
 
@@ -26,11 +26,11 @@ Dropdown Menus are used in combination with Dropdown Inputs on napari hub as par
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
- 
+
 
 ---
 
@@ -41,55 +41,55 @@ Use the following configuration for the `[array]` passed into the `options` prop
 ```js
 data = [
   {
-    // section with a Header and Menu Item Details 
-    dataRows: [ 
-      { 
+    // section with a Header and Menu Item Details
+    dataRows: [
+      {
+        name: "Menu Item",
+        details: "Details",
+      },
+      {
         name: "Menu Item",
-        details: "Details", 
-      }, 
-      { 
-        name: "Menu Item", 
-        details: "Details", 
-      }, 
-      { 
-        name: "Menu Item", 
-        details: "Details", 
-      }, 
+        details: "Details",
+      },
+      {
+        name: "Menu Item",
+        details: "Details",
+      },
     ],
     label: "Section One",
   },
   {
     // section with Menu Item Counts
-    dataRows: [ 
-      { 
-        name: "Menu Item", 
+    dataRows: [
+      {
+        name: "Menu Item",
         count: 20,
-      }, 
-      { 
-        name: "Menu Item", 
+      },
+      {
+        name: "Menu Item",
         count: 40,
-      }, 
-      { 
-        name: "Menu Item", 
-        count: 60, 
-      }, 
+      },
+      {
+        name: "Menu Item",
+        count: 60,
+      },
     ],
   },
   {
     // section with disabled Menu Items
-    dataRows: [ 
-      { 
-        name: "Menu Item", 
+    dataRows: [
+      {
+        name: "Menu Item",
+        disabled: true,
+      },
+      {
+        name: "Menu Item",
         disabled: true,
-      }, 
-      { 
-        name: "Menu Item", 
+      },
+      {
+        name: "Menu Item",
         disabled: true,
-      }, 
-      { 
-        name: "Menu Item", 
-        disabled: true, 
-      }, 
+      },
     ],
   },
 ];
@@ -110,51 +110,51 @@ Dropdown Menus can be thought of as being comprised of different combinations of
 Below are a number of common Dropdown Menu configurations, but by no means is this an exhaustive list:
 
 | **Search + Count** | **Search + Sections** | **Search + Details** |
-| --- | --- | --- |
+| ------------------ | --------------------- | -------------------- |
 
 | **Sections + Details** | **Search + Sections + Details** | **Search + Sections + Count** |
-| --- | --- | --- |
+| ---------------------- | ------------------------------- | ----------------------------- |
 
 ---
 
 ## Menu Item
 
-|  | In Figma |   |  | Meets Accessibility |   |  |  In napari hub + .org Codebases |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In napari hub + .org Codebases |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
 
 Menu Items can be optionally paired with additional clarifying details, with counters that indicate the number of items within that Menu Item's category, or be disabled entirely. These details are established within the `[array]` passed into the `options` prop on the Dropdown Menu component.
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled** |
-| --- | --- | --- | --- | --- | --- |
+| ----------- | --------- | ------------ | -------------------- | ------------ | ----------------------- |
 
 | **Default + Count** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled** |
-| --- | --- | --- | --- | --- | --- |
+| ------------------- | --------- | ------------ | -------------------- | ------------ | ----------------------- |
 
-| **Default + Details** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** |  **Selected + Disabled**  |
-| --- | --- | --- | --- | --- | --- |
+| **Default + Details** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled**  |
+| --------------------- | --------- | ------------ | -------------------- | ------------ | ------------------------ |
 
 ## Code
 
 ## Dropdown Menu Component
 
-| Below you will find interactive Storybook iframes for the Dropdown Menu.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** DropdownMenu |
-| --- | --- | --- |
+| Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** DropdownMenu |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------- |
 
 ---
 
->**Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
+> **Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
 >
->While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
+> While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
 
->This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
+> This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
 
 ### DropdownMenu
 
 Storybook
 
- 
+
 
 ---
 
@@ -162,21 +162,21 @@ Dropdown Menus are coupled with Dropdown Inputs, Dropdown Buttons, and in some c
 
 ## Overview
 
->**NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
+> **NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
 >
->While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
+> While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
 
 ## Dropdown Menu Variants
 
-| In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items.  Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. |   | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
-| --- | --- | --- |
+| In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. |     | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------ |
 
 ---
 
 ## Dropdown Menu
 
-|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ GEN EPI Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
 
 ### Single-select Dropdown Menu
 
@@ -184,7 +184,7 @@ Use the Single-select Dropdown Menu when users are only able to select one item
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -198,7 +198,7 @@ Use the Multi-select Dropdown Menu when users are able to select one or more ite
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -213,38 +213,38 @@ Use the following configuration for the `[array]` passed into the `options` prop
 ```js
 data = [
   {
-    // section with a Header and Menu Item Details 
-    dataRows: [ 
-      { 
+    // section with a Header and Menu Item Details
+    dataRows: [
+      {
+        name: "Menu Item",
+        details: "Details",
+      },
+      {
         name: "Menu Item",
-        details: "Details", 
-      }, 
-      { 
-        name: "Menu Item", 
-        details: "Details", 
-      }, 
-      { 
-        name: "Menu Item", 
-        details: "Details", 
-      }, 
+        details: "Details",
+      },
+      {
+        name: "Menu Item",
+        details: "Details",
+      },
     ],
     label: "Section One",
   },
   {
     // section with Menu Item Counts
-    dataRows: [ 
-      { 
-        name: "Menu Item", 
+    dataRows: [
+      {
+        name: "Menu Item",
         count: 20,
-      }, 
-      { 
-        name: "Menu Item", 
+      },
+      {
+        name: "Menu Item",
         count: 40,
-      }, 
-      { 
-        name: "Menu Item", 
-        count: 60, 
-      }, 
+      },
+      {
+        name: "Menu Item",
+        count: 60,
+      },
     ],
   },
 ];
@@ -265,17 +265,17 @@ Dropdown Menus can be thought of as being comprised of different combinations of
 Below are a number of common Dropdown Menu configurations, but by no means is this an exhaustive list:
 
 | **Title + Count** | **Search + Sections + Details** | **Title + Details** |
-| --- | --- | --- |
+| ----------------- | ------------------------------- | ------------------- |
 
 | **Search + Details** | **Title + Search + Count** | **Title + Sections + Details** |
-| --- | --- | --- |
+| -------------------- | -------------------------- | ------------------------------ |
 
 ---
 
 ## Menu Item
 
-|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ GEN EPI Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ GEN EPI Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
 
 ### Single-select Menu Item
 
@@ -284,15 +284,15 @@ Menu Items can be optionally paired with additional clarifying details, with cou
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ----------- | --------- | ------------ | ------------ |
 
 | **Default + Count** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ------------------- | --------- | ------------ | ------------ |
 
 | **Default + Details** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| --------------------- | --------- | ------------ | ------------ |
+
 
- 
 
 ### Multi-select Menu Item
 
@@ -301,28 +301,28 @@ Menu Items can be optionally paired with additional clarifying details, with cou
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ----------- | --------- | ------------ | ------------ |
 
 | **Default + Count** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ------------------- | --------- | ------------ | ------------ |
 
 | **Default + Details** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| --------------------- | --------- | ------------ | ------------ |
 
 ## Code
 
 ## Dropdown Menu Component
 
-| Below you will find interactive Storybook iframes for the Dropdown Menu.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** DropdownMenu |
-| --- | --- | --- |
+| Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** DropdownMenu |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------- |
 
 ---
 
->**NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
+> **NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
 >
->While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
+> While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
 
->This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
+> This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
 
 ### DropdownMenu
 
@@ -334,21 +334,21 @@ Dropdown Menus are coupled with Dropdown Inputs, Dropdown Buttons, and in some c
 
 ## Overview
 
->**Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
+> **Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
 >
->While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
+> While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
 
 ## Dropdown Menu Variants
 
-| In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items.  Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. |   | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
-| --- | --- | --- |
+| In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. |     | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------ |
 
 ---
 
 ## Dropdown Menu
 
-|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 ### Single-select Dropdown Menu
 
@@ -356,7 +356,7 @@ Use the Single-select Dropdown Menu when users are only able to select one item
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -364,7 +364,7 @@ Click on each state below to enter inspect view and get details on its code attr
 
 ---
 
- 
+
 
 ### Multi-select Dropdown Menu
 
@@ -372,7 +372,7 @@ Use the Multi-select Dropdown Menu when users are able to select one or more ite
 
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
- 
+
 
 ---
 
@@ -391,38 +391,38 @@ Use the following configuration for the `[array]` passed into the `options` prop
 ```js
 data = [
   {
-    // section with a Header and Menu Item Details 
-    dataRows: [ 
-      { 
+    // section with a Header and Menu Item Details
+    dataRows: [
+      {
+        name: "Menu Item",
+        details: "Details",
+      },
+      {
         name: "Menu Item",
-        details: "Details", 
-      }, 
-      { 
-        name: "Menu Item", 
-        details: "Details", 
-      }, 
-      { 
-        name: "Menu Item", 
-        details: "Details", 
-      }, 
+        details: "Details",
+      },
+      {
+        name: "Menu Item",
+        details: "Details",
+      },
     ],
     label: "Section One",
   },
   {
     // section with Menu Item Counts
-    dataRows: [ 
-      { 
-        name: "Menu Item", 
+    dataRows: [
+      {
+        name: "Menu Item",
         count: 20,
-      }, 
-      { 
-        name: "Menu Item", 
+      },
+      {
+        name: "Menu Item",
         count: 40,
-      }, 
-      { 
-        name: "Menu Item", 
-        count: 60, 
-      }, 
+      },
+      {
+        name: "Menu Item",
+        count: 60,
+      },
     ],
   },
 ];
@@ -443,17 +443,17 @@ Dropdown Menus can be thought of as being comprised of different combinations of
 Below are a number of common Dropdown Menu configurations, but by no means is this an exhaustive list:
 
 | **Title + Count** | **Search + Sections + Details** | **Title + Details** |
-| --- | --- | --- |
+| ----------------- | ------------------------------- | ------------------- |
 
 | **Search + Details** | **Title + Search + Count** | **Title + Sections + Details** |
-| --- | --- | --- |
+| -------------------- | -------------------------- | ------------------------------ |
 
 ---
 
 ## Menu Item
 
-|  | In Figma |   |  | Meets Accessibility |   |  |  In CZ ID Codebase |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In CZ ID Codebase |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
 
 ### Single-select Menu Item
 
@@ -462,15 +462,15 @@ Menu Items can be optionally paired with additional clarifying details, with cou
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ----------- | --------- | ------------ | ------------ |
 
 | **Default + Count** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ------------------- | --------- | ------------ | ------------ |
 
 | **Default + Details** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| --------------------- | --------- | ------------ | ------------ |
+
 
- 
 
 ### Multi-select Menu Item
 
@@ -479,32 +479,32 @@ Menu Items can be optionally paired with additional clarifying details, with cou
 Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
 
 | **Default** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ----------- | --------- | ------------ | ------------ |
 
 | **Default + Count** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| ------------------- | --------- | ------------ | ------------ |
 
 | **Default + Details** | **Hover** | **Selected** | **Disabled** |
-| --- | --- | --- | --- |
+| --------------------- | --------- | ------------ | ------------ |
 
 ## Code
 
 ## Dropdown Menu Component
 
-| Below you will find interactive Storybook iframes for the Dropdown Menu.  Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |   | **Jump to component:** DropdownMenu |
-| --- | --- | --- |
+| Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. |     | **Jump to component:** DropdownMenu |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------- |
 
 ---
 
->**NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
+> **NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
 >
->While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
+> While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
 
 ### DropdownMenu
 
 Storybook
 
- 
+
 
 ---
 
@@ -514,8 +514,8 @@ Dropdown Menus are coupled with Dropdown Inputs, Dropdown Buttons, and in some c
 
 ## Dropdown Menu Components
 
-| Dropdown Menus offer the user options to adjust or select. The Menu Items found within the Dropdown Menu have multiple format options.  Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features.  Dropdown Menus require a trigger element, such as a Dropdown Input, Dropdown Button, or Icon Button, to open the menu.  Dropdown is a component created as a combination of Dropdown Menu and a trigger element to help make Dropdown Menu easier for developers to implement. |   | **Jump to component:** Dropdown Dropdown Menu Menu Item  |
-| --- | --- | --- |
+| Dropdown Menus offer the user options to adjust or select. The Menu Items found within the Dropdown Menu have multiple format options. Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. Dropdown Menus require a trigger element, such as a Dropdown Input, Dropdown Button, or Icon Button, to open the menu. Dropdown is a component created as a combination of Dropdown Menu and a trigger element to help make Dropdown Menu easier for developers to implement. |     | **Jump to component:** Dropdown Dropdown Menu Menu Item |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------- |
 
 ### Visual Preview
 
@@ -523,8 +523,8 @@ Dropdown Menus are coupled with Dropdown Inputs, Dropdown Buttons, and in some c
 
 ## Dropdown
 
-|  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- |
+|     | Meets Accessibility |     |     | In Code |
+| --- | ------------------- | --- | --- | ------- |
 
 ### Overview
 
@@ -544,8 +544,8 @@ Default
 
 ## Dropdown Menu
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Dropdown Menu Types
 
@@ -564,29 +564,29 @@ Default
 Use Single-select when users are only able to select one item from the menu. They can be configured to have their Menu Items separated out into different sections or groupings, have a built-in title at the top of the menu, include a Search Input allowing users to easily find specific Menu Items, or a combination of all three.
 
 | Default | Default + Title | Default + Search | Default + Sections |
-| --- | --- | --- | --- |
+| ------- | --------------- | ---------------- | ------------------ |
 
 ---
 
-### Dropdown Menu – Multi-select 
+### Dropdown Menu – Multi-select
 
 Use Multi-select when users are able to select one or more items from the menu. They can be configured to have their Menu Items separated out into different sections or groupings, have a built-in title at the top of the menu, include a Search Input allowing users to easily find specific Menu Items, include confirmation and cancel Buttons at the bottom of the menu, or a combination of all four.
 
 | Default | Default + Title | Default + Search | Default + Sections | Default + Buttons |
-| --- | --- | --- | --- | --- |
+| ------- | --------------- | ---------------- | ------------------ | ----------------- |
 
 ---
 
 ### Dropdown Menu – Multi-column
 
-Use Multi-column when there is a need to separate Menu Items across multiple columns. Columns can be dependent or independent of each other. With dependent columns, Menu Item selections made in one column will affect the Menu Items in the others, such as reducing the number of Menu Items visible in neighboring columns; use Indeterminate Menu Items when some, but not all sub-options have been made in a subsequent column. With independent columns, Menu Item selections made in one column will have no effect on the Menu Items in other columns. 
+Use Multi-column when there is a need to separate Menu Items across multiple columns. Columns can be dependent or independent of each other. With dependent columns, Menu Item selections made in one column will affect the Menu Items in the others, such as reducing the number of Menu Items visible in neighboring columns; use Indeterminate Menu Items when some, but not all sub-options have been made in a subsequent column. With independent columns, Menu Item selections made in one column will have no effect on the Menu Items in other columns.
 
 The same configurations are available in the Multi-column variant as the Single-column including a built-in title at the top of the menu, a Search Input, section names at the top of each column, confirmation and cancel Buttons at the bottom of the menu, or a combination of all four. There can only be one section per column. Additionally, a Chevron icon can be placed between columns to help communicate the relationship between them.
 
 Multi-column Dropdown Menus can be Single- or Multi-select.
 
 | Default | Default + Title | Default + Search | Default + Buttons |
-| --- | --- | --- | --- |
+| ------- | --------------- | ---------------- | ----------------- |
 
 ---
 
@@ -598,8 +598,8 @@ These rules establish how much margin should exist between and around elements.
 
 ## Menu Item
 
-|  | In Figma |   |  | Meets Accessibility |   |  | In Code |
-| --- | --- | --- | --- | --- | --- | --- | --- |
+|     | In Figma |     |     | Meets Accessibility |     |     | In Code |
+| --- | -------- | --- | --- | ------------------- | --- | --- | ------- |
 
 ### Menu Item Types
 
@@ -618,7 +618,7 @@ Default
 Single-select Menu Items are used in Dropdown Menus where only one item can be selected at a time. They can optionally be paired with additional clarifying details or counters that indicate the number of items within that Menu Item's category.
 
 | Default | Hover | Selected | Disabled |
-| --- | --- | --- | --- |
+| ------- | ----- | -------- | -------- |
 
 ---
 
@@ -629,14 +629,14 @@ Single-select Menu Items are used in Dropdown Menus where only one item can be s
 Multi-select Menu Items are used in Dropdown Menus where multiple items can be selected at a time. The determinate variant should be used in Single-column Dropdown Menus or in Multi-column Dropdown Menus to communicate that all possible sub-options have been selected. Optionally They can optionally be paired with additional clarifying details or with counters that indicate the number of items within that Menu Item's category.
 
 | Default | Hover | Selected | Disabled |
-| --- | --- | --- | --- |
+| ------- | ----- | -------- | -------- |
 
 #### Indeterminate
 
 Indeterminate Multi-select Menu Items are used **only** in Multi-column Dropdown Menus when there is a need to show when some, but not all sub-options have been selected. They can optionally be paired with additional clarifying details or with counters that indicate the number of items within that Menu Item's category.
 
 | Default | Hover | Selected | Disabled |
-| --- | --- | --- | --- |
+| ------- | ----- | -------- | -------- |
 
 ---
 
@@ -645,18 +645,18 @@ Indeterminate Multi-select Menu Items are used **only** in Multi-column Dropdown
 All Menu Item variants can be optionally displayed with an icon.
 
 | Default + Icon | Default + Count + Icon | Default + Details + Icon |
-| --- | --- | --- |
+| -------------- | ---------------------- | ------------------------ |
 
 ## Code
 
 ## Dropdown Menu Components
 
-| `DropdownMenu` offers the user options to adjust or select. The `MenuItems` found within `DropdownMenu` have multiple format options.  `DropdownMenu` can be configured to include `InputSearch`, have their `MenuItems` separated out into different sections or groupings, have a built-in title, or any combination of these features.  `DropdownMenu` requires a trigger element, such as `InputDropdown`, `ButtonDropdown`, or `ButtonIcon`, to open the menu.  `Dropdown` is a component created as a combination of `DropdownMenu` and a trigger element to help make `DropdownMenu` easier for developers to implement. |   | **Jump to component:** DropdownMenu MenuItem Dropdown |
-| --- | --- | --- |
+| `DropdownMenu` offers the user options to adjust or select. The `MenuItems` found within `DropdownMenu` have multiple format options. `DropdownMenu` can be configured to include `InputSearch`, have their `MenuItems` separated out into different sections or groupings, have a built-in title, or any combination of these features. `DropdownMenu` requires a trigger element, such as `InputDropdown`, `ButtonDropdown`, or `ButtonIcon`, to open the menu. `Dropdown` is a component created as a combination of `DropdownMenu` and a trigger element to help make `DropdownMenu` easier for developers to implement. |     | **Jump to component:** DropdownMenu MenuItem Dropdown |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------- |
 
 ### Visual Preview
 
->**Note:** The code examples below must install dependencies before displaying and may take extra time to load
+> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
 
 ---
 
@@ -668,36 +668,36 @@ The component's source code in the SDS codebase can be found here.
 
 ### SDS vs MUI
 
-SDS's `Dropdown` component is a combination of two other SDS components: `DropdownMenu` and `InputDropdown`,  since these would often be used together to create a complete dropdown element in the UI. `DropdownMenu` is built off of MUI's `Autocomplete` component, but `InputDropdown` is built from scratch.
+SDS's `Dropdown` component is a combination of two other SDS components: `DropdownMenu` and `InputDropdown`, since these would often be used together to create a complete dropdown element in the UI. `DropdownMenu` is built off of MUI's `Autocomplete` component, but `InputDropdown` is built from scratch.
 
 These are a few of the most relevant ways in which SDS's `DropdownMenu` (which is used within `Dropdown`) integrates with`Autocomplete` and other MUI components:
 
-* SDS `Dropdown` uses MUI `Autocomplete` under the hood, so all props passed to `DropdownMenu` are ultimately passed to the Autocomplete component as well. This means MUI's `Autocomplete` props can be used on SDS's `DropdownMenu` if needed.
-* SDS `Dropdown` uses MUI `Popper`. A custom `Popper` component can be passed via `props.PopperComponent` and/or `props.PopperBaseProps` to control the popper component.
-* Similarly, SDS `Dropdown` uses MUI `Paper`. A custom `Paper` component can be passed via `props.PaperComponent` to enable custom styling.
+- SDS `Dropdown` uses MUI `Autocomplete` under the hood, so all props passed to `DropdownMenu` are ultimately passed to the Autocomplete component as well. This means MUI's `Autocomplete` props can be used on SDS's `DropdownMenu` if needed.
+- SDS `Dropdown` uses MUI `Popper`. A custom `Popper` component can be passed via `props.PopperComponent` and/or `props.PopperBaseProps` to control the popper component.
+- Similarly, SDS `Dropdown` uses MUI `Paper`. A custom `Paper` component can be passed via `props.PaperComponent` to enable custom styling.
 
 ### Props
 
 Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `buttonPosition` | `"left"` `|"right"` | `left` | Specifies the position of the `Apply`/`Cancel` buttons at the Dropdown footer. |
-| `buttons` | `bool` | `false` | When set to `true`, a set of `Apply`/`Cancel` buttons will be displayed at the Dropdown footer. |
-| `closeOnBlur` | `bool` | `true` | When set to `true`, the Dropdown will automatically close when a click occurs outside of it. |
-| `disabled` | `bool` | `false` | When `true`, the Dropdown is disabled and user interaction is not allowed. |
-| `isTriggerChangeOnOptionClick` | `bool` | `false` | When set to `true`, changes in Dropdown selections are applied in real-time to the react state. |
-| `label` | `string` | `-` | The label of the Dropdown. |
-| `multiple` | `bool` | `true` | Determines whether the Dropdown allows for multiple item selection. |
-| `onChange` | `(options: Value<DefaultDropdownMenuOption, Multiple>) => void;` | `-` | Callback fired when the value changes. |
-| `onClose` | `func` | `-` | Callback fired when the Dropdown requests to be closed. |
-| `search` | `bool` | `true` | When set to `true`, a search input is displayed at the top of the Dropdown for filtering options. |
-| `dropdownMenuProps` | `Partial<DropdownMenuProps>` | `-` | These props are directly passed to the underlying DropdownMenu component, customizing its behavior. |
-| `options` | `Array<DefaultDropdownMenuOption>` | `-` | An array of options to be displayed as MenuItems within the Dropdown. |
-| `InputDropdownProps` | `Partial<InputDropdownPropsType>` | `-` | These props are directly passed to the underlying InputDropdown component, customizing its behavior. |
-| `value` | `string | Array<string>` | `-` | The current value of the Dropdown, representing the selected item(s) based on the multi-select status. |
-| `PopperComponent` | `element` | `Paper` | The component used to render the wrapper of the inner DropdownMenu. |
-| `InputDropdownComponent` | `element` | `InputDropdown` | The component used to render the Dropdown trigger button. |
+| Name                           | Type                                                             | Default         | Description                                                                                          |
+| ------------------------------ | ---------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `buttonPosition`               | `"left"` `                                                       | "right"`        | `left`                                                                                               | Specifies the position of the `Apply`/`Cancel` buttons at the Dropdown footer.                         |
+| `buttons`                      | `bool`                                                           | `false`         | When set to `true`, a set of `Apply`/`Cancel` buttons will be displayed at the Dropdown footer.      |
+| `closeOnBlur`                  | `bool`                                                           | `true`          | When set to `true`, the Dropdown will automatically close when a click occurs outside of it.         |
+| `disabled`                     | `bool`                                                           | `false`         | When `true`, the Dropdown is disabled and user interaction is not allowed.                           |
+| `isTriggerChangeOnOptionClick` | `bool`                                                           | `false`         | When set to `true`, changes in Dropdown selections are applied in real-time to the react state.      |
+| `label`                        | `string`                                                         | `-`             | The label of the Dropdown.                                                                           |
+| `multiple`                     | `bool`                                                           | `true`          | Determines whether the Dropdown allows for multiple item selection.                                  |
+| `onChange`                     | `(options: Value<DefaultDropdownMenuOption, Multiple>) => void;` | `-`             | Callback fired when the value changes.                                                               |
+| `onClose`                      | `func`                                                           | `-`             | Callback fired when the Dropdown requests to be closed.                                              |
+| `search`                       | `bool`                                                           | `true`          | When set to `true`, a search input is displayed at the top of the Dropdown for filtering options.    |
+| `dropdownMenuProps`            | `Partial<DropdownMenuProps>`                                     | `-`             | These props are directly passed to the underlying DropdownMenu component, customizing its behavior.  |
+| `options`                      | `Array<DefaultDropdownMenuOption>`                               | `-`             | An array of options to be displayed as MenuItems within the Dropdown.                                |
+| `InputDropdownProps`           | `Partial<InputDropdownPropsType>`                                | `-`             | These props are directly passed to the underlying InputDropdown component, customizing its behavior. |
+| `value`                        | `string                                                          | Array<string>`  | `-`                                                                                                  | The current value of the Dropdown, representing the selected item(s) based on the multi-select status. |
+| `PopperComponent`              | `element`                                                        | `Paper`         | The component used to render the wrapper of the inner DropdownMenu.                                  |
+| `InputDropdownComponent`       | `element`                                                        | `InputDropdown` | The component used to render the Dropdown trigger button.                                            |
 
 ### Code Examples
 
@@ -730,13 +730,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -767,11 +765,7 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
 function App() {
   return (
     <div className="app">
-      <Dropdown
-        label="Click Target"
-        onChange={() => {}}
-        options={MENU_ITEMS}
-      />
+      <Dropdown label="Click Target" onChange={() => {}} options={MENU_ITEMS} />
     </div>
   );
 }
@@ -816,13 +810,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -843,13 +836,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -858,7 +862,7 @@ root.render(
 
 A search feature can be easily incorporated into the `Dropdown` component by including the `search` prop.
 
-The search functionality operates by dynamically filtering out non-matching options as the user types, displaying only the menu items whose text corresponds to that input. If no matching items are found, the `Dropdown` will automatically present "No options" below the search bar. 
+The search functionality operates by dynamically filtering out non-matching options as the user types, displaying only the menu items whose text corresponds to that input. If no matching items are found, the `Dropdown` will automatically present "No options" below the search bar.
 
 To ensure that the search input retains its text even after a user selects a menu item (when multiple selections are allowed), set the `keepSearchOnSelect` prop to `true` within the `DropdownMenuProps` prop. This allows users to conveniently choose multiple menu items that match the searched term without the need to re-enter it for each selection.
 
@@ -887,13 +891,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -910,36 +912,36 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   {
     name: "Fruit: Apple",
     section: "Fruit",
-    count: 10
+    count: 10,
   },
   {
     name: "Fruit: Cherry",
     section: "Fruit",
-    count: 150
+    count: 150,
   },
   {
     name: "Fruit: Orange",
     section: "Fruit",
-    count: 15
+    count: 15,
   },
   {
     name: "Vegetable: Carrot",
     section: "Vegetable",
-    count: 34
+    count: 34,
   },
   {
     name: "Vegetable: Kale",
-    section: "Vegetable"
+    section: "Vegetable",
   },
   {
     name: "Vegetable: Lettuce",
-    section: "Vegetable"
+    section: "Vegetable",
   },
 ];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway(){} 
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -947,8 +949,8 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
     <div className="app">
       <Dropdown
@@ -1007,13 +1009,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1034,13 +1035,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -1057,9 +1069,9 @@ The component's source code in the SDS codebase can be found here.
 
 Both SDS's `DropdownMenu` and MUI's `Autocomplete` have huge API surfaces, so it is not practical to list every way in which they differ (in part because the list would likely become obsolete quickly!). In summary, these are a few of the most relevant ways in which `DropdownMenu` integrates with `Autocomplete` and other MUI components:
 
-* SDS `DropdownMenu` uses MUI `Autocomplete` under the hood, so all props passed to `DropdownMenu` are ultimately passed to the `Autocomplete` component as well. This means MUI's `Autocomplete` props can be used on SDS's `DropdownMenu` if needed.
-* SDS `DropdownMenu` uses MUI `Popper`. A custom `Popper` component can be passed via `props.PopperComponent` and/or `props.PopperBaseProps` to control the popper component.
-* Similarly, SDS `DropdownMenu` uses MUI `Paper`. A custom `Paper` component can be passed via `props.PaperComponent` to enable custom styling.
+- SDS `DropdownMenu` uses MUI `Autocomplete` under the hood, so all props passed to `DropdownMenu` are ultimately passed to the `Autocomplete` component as well. This means MUI's `Autocomplete` props can be used on SDS's `DropdownMenu` if needed.
+- SDS `DropdownMenu` uses MUI `Popper`. A custom `Popper` component can be passed via `props.PopperComponent` and/or `props.PopperBaseProps` to control the popper component.
+- Similarly, SDS `DropdownMenu` uses MUI `Paper`. A custom `Paper` component can be passed via `props.PaperComponent` to enable custom styling.
 
 ### MUI Documentation
 
@@ -1069,37 +1081,37 @@ Documentation for the underlying MUI `Autocomplete` component can be found here.
 
 Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
 
-| **Name** | **Type** | **Default** | **Description** |
-| --- | --- | --- | --- |
-| `anchorEl` | `HTML element` `| object` `| func` | `null` | Tells the DropdownMenu which element to use as an anchor; see more in the MUI `Popper` component's API |
-| `clickAwayListenerProps` | `func` | `-`  | Passes props to the MUI `ClickAwayListener` |
-| `groupBy` | `func` | `-` | Groups menu items according to their assigned `section` |
-| `isOptionEqualToValue` | `func` | `(option, val): boolean {`     `return option.name === val.name;`   `}` | Changes how a selected value is compared against the available options; see more in the MUI Autocomplete API or in the DropdownMenu Component Recipes section  |
-| `keepSearchOnSelect` | `bool` | `true` | Maintains a search input when a user selects a menu item (only if multiple selections are allowed via the `multiple` prop; otherwise the dropdown closes upon selection) |
-| `multiple` | `bool` | `false` | Allows user to select multiple menu items; see more in the MUI Autocomplete API |
-| `noOptionsText` | `string` | `"No options"` | Sets the text that displays if there are no matching search results; see more in the MUI Autocomplete API |
-| `onClickAway` | `func` | `-` | Sets what happens when a user clicks outside of the DropdownMenu |
-| `onInputChange` | `func` | `noop` | Specifies what happens when a new selection is made; see more in the MUI Autocomplete API or in the DropdownMenu Component Recipes section |
-| `PopperBaseProps` |   | `-` | Passes custom props to the MUI`Popper` component, which is included as part of the SDS`DropdownMenu` component. Learn more in the Popper documentation, and see all the props available to pass to it on the Popper API page. See an example of `PopperBaseProps`  in use in the DropdownMenu Component Recipes section |
-| `PopperComponent` | `func` | SDS's `StyledPopper`; see sci-components/packages/components/src/core/DropdownMenu/style.ts, ~ line 202 | The MUI  `Popper` component is included as part of the SDS `DropdownMenu` component, and its styles can be changed or added to |
-| `search` | `bool` | `f``alse` | Provides a search bar at the top of the menu from which users can narrow the list of menu items |
-| `title` | `string` | `-` | Sets a heading for the menu |
-
-There are many more props that can be used with the `DropdownMenu`  component, via those available to MUI's `Autocomplete`  component. 
-
->**Note for use with SDS** **`Table`** **and other components:**
+| **Name**                 | **Type**         | **Default**                                                                                             | **Description**                                                                                                                                                                                                                                                                                                        |
+| ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------ |
+| `anchorEl`               | `HTML element` ` | object` `                                                                                               | func`                                                                                                                                                                                                                                                                                                                  | `null` | Tells the DropdownMenu which element to use as an anchor; see more in the MUI `Popper` component's API |
+| `clickAwayListenerProps` | `func`           | `-`                                                                                                     | Passes props to the MUI `ClickAwayListener`                                                                                                                                                                                                                                                                            |
+| `groupBy`                | `func`           | `-`                                                                                                     | Groups menu items according to their assigned `section`                                                                                                                                                                                                                                                                |
+| `isOptionEqualToValue`   | `func`           | `(option, val): boolean {` `return option.name === val.name;` `}`                                       | Changes how a selected value is compared against the available options; see more in the MUI Autocomplete API or in the DropdownMenu Component Recipes section                                                                                                                                                          |
+| `keepSearchOnSelect`     | `bool`           | `true`                                                                                                  | Maintains a search input when a user selects a menu item (only if multiple selections are allowed via the `multiple` prop; otherwise the dropdown closes upon selection)                                                                                                                                               |
+| `multiple`               | `bool`           | `false`                                                                                                 | Allows user to select multiple menu items; see more in the MUI Autocomplete API                                                                                                                                                                                                                                        |
+| `noOptionsText`          | `string`         | `"No options"`                                                                                          | Sets the text that displays if there are no matching search results; see more in the MUI Autocomplete API                                                                                                                                                                                                              |
+| `onClickAway`            | `func`           | `-`                                                                                                     | Sets what happens when a user clicks outside of the DropdownMenu                                                                                                                                                                                                                                                       |
+| `onInputChange`          | `func`           | `noop`                                                                                                  | Specifies what happens when a new selection is made; see more in the MUI Autocomplete API or in the DropdownMenu Component Recipes section                                                                                                                                                                             |
+| `PopperBaseProps`        |                  | `-`                                                                                                     | Passes custom props to the MUI`Popper` component, which is included as part of the SDS`DropdownMenu` component. Learn more in the Popper documentation, and see all the props available to pass to it on the Popper API page. See an example of `PopperBaseProps` in use in the DropdownMenu Component Recipes section |
+| `PopperComponent`        | `func`           | SDS's `StyledPopper`; see sci-components/packages/components/src/core/DropdownMenu/style.ts, ~ line 202 | The MUI `Popper` component is included as part of the SDS `DropdownMenu` component, and its styles can be changed or added to                                                                                                                                                                                          |
+| `search`                 | `bool`           | `f``alse`                                                                                               | Provides a search bar at the top of the menu from which users can narrow the list of menu items                                                                                                                                                                                                                        |
+| `title`                  | `string`         | `-`                                                                                                     | Sets a heading for the menu                                                                                                                                                                                                                                                                                            |
+
+There are many more props that can be used with the `DropdownMenu` component, via those available to MUI's `Autocomplete` component.
+
+> **Note for use with SDS** **`Table`** **and other components:**
 >
->Each time a table column is shown/hidden a new table object is created. This causes components within the table to remount. *This can be a problem with* *`DropdownMenu`* *if the menu is supposed to stay open while the columns are hidden/shown because the anchor element also gets recreated.* To resolve this, move the `DropdownMenu` anchor element outside of the table or use the `pendingState` and only show/hide the columns when closing the dropdown.
+> Each time a table column is shown/hidden a new table object is created. This causes components within the table to remount. _This can be a problem with_ _`DropdownMenu`_ _if the menu is supposed to stay open while the columns are hidden/shown because the anchor element also gets recreated._ To resolve this, move the `DropdownMenu` anchor element outside of the table or use the `pendingState` and only show/hide the columns when closing the dropdown.
 
 ### Code Examples
 
 #### Default DropdownMenu
 
-This example has the minimum props and menu item metadata needed for the `DropdownMenu`.  
+This example has the minimum props and menu item metadata needed for the `DropdownMenu`.
 
-Menu item metadata is stored as an array of objects (one per menu item) passed to the `DropdownMenu` component’s `options` prop.  At minimum each `MenuItem` needs a `name` property, which is the text it displays. `MenuItems` can display more metadata, though; see the “DropdownMenu with grouped sections” and “DropdownMenu with menu items that have count, icon, and / or details” examples below. Alternatively, a custom component can be displayed instead of a `MenuItem` component; see the “DropdownMenu with components in place of menu items” example below.
+Menu item metadata is stored as an array of objects (one per menu item) passed to the `DropdownMenu` component’s `options` prop. At minimum each `MenuItem` needs a `name` property, which is the text it displays. `MenuItems` can display more metadata, though; see the “DropdownMenu with grouped sections” and “DropdownMenu with menu items that have count, icon, and / or details” examples below. Alternatively, a custom component can be displayed instead of a `MenuItem` component; see the “DropdownMenu with components in place of menu items” example below.
 
-The minimum width for the `DropdownMenu` is 225px, but longer text will automatically widen the `DropdownMenu` up to the length of the text provided. 
+The minimum width for the `DropdownMenu` is 225px, but longer text will automatically widen the `DropdownMenu` up to the length of the text provided.
 
 Although examples shows the minimum requirements for the `DropdownMenu`, there are many more options available to include; see subsequent code examples further below.
 
@@ -1128,13 +1140,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -1144,7 +1154,7 @@ h1 {
 
 ```tsx
 // Most minimal DropdownMenu (just has the basic requirements)
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -1163,10 +1173,10 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
     name: "Longer menu item than the others",
   },
 ];
-  
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
 
-function handleClickAway(){} 
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
+
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -1174,23 +1184,21 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            onClickAway={handleClickAway}
-            open={open}
-            options={MENU_ITEMS}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          onClickAway={handleClickAway}
+          open={open}
+          options={MENU_ITEMS}
+        />
+      )}
     </div>
   );
 }
@@ -1235,13 +1243,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1262,13 +1269,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -1302,13 +1320,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -1318,9 +1334,13 @@ h1 {
 
 ```tsx
 // DropdownMenu with custom click target
-      
+
 import React, { SyntheticEvent, useState, useRef } from "react";
-import { DropdownMenu, DefaultDropdownMenuOption, InputDropdown } from "@czi-sds/components";
+import {
+  DropdownMenu,
+  DefaultDropdownMenuOption,
+  InputDropdown,
+} from "@czi-sds/components";
 import "./styles.css";
 
 function App() {
@@ -1369,7 +1389,7 @@ function App() {
         label="Click Target"
         sdsType="label"
         sdsStyle="minimal"
-      />    
+      />
       <DropdownMenu
         options={MENU_ITEMS}
         anchorEl={anchorEl}
@@ -1422,13 +1442,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1449,13 +1468,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -1466,7 +1496,7 @@ An `InputSearch` component can be incorporated into the `DropdownMenu` component
 
 The search functions by filtering out non-matches as the user types, leaving only menu items with text that match the input. If no matches are found, the `DropdownMenu` displays “No options” below the `InputSearch` by default. This text can be changed via the `noOptionsText` prop as shown below.
 
-By default, the search’s input text is maintained even when a user selects a `MenuItem` (if multiple selections are allowed; otherwise the dropdown closes upon selection). This way users can select multiple `MenuItems` that match the searched term without needing to re-enter it each time. However, this can be changed so that the search input clears upon making a selection; see the “Dropdown with search and multi-select; does *not* maintain searched query upon selection of a menu item” example below.
+By default, the search’s input text is maintained even when a user selects a `MenuItem` (if multiple selections are allowed; otherwise the dropdown closes upon selection). This way users can select multiple `MenuItems` that match the searched term without needing to re-enter it each time. However, this can be changed so that the search input clears upon making a selection; see the “Dropdown with search and multi-select; does _not_ maintain searched query upon selection of a menu item” example below.
 
 1. In the search box, type in "fruit"
 2. `DropdownMenu` will display "Fruit: Apple" and "Fruit: Orange"
@@ -1498,13 +1528,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -1514,7 +1542,7 @@ h1 {
 
 ```tsx
 // DropdownMenu with search
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -1534,9 +1562,9 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   },
 ];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway(){} 
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -1544,25 +1572,23 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            noOptionsText="No matches found, try again!"
-            onClickAway={handleClickAway}
-            open
-            options={MENU_ITEMS}
-            search
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          noOptionsText="No matches found, try again!"
+          onClickAway={handleClickAway}
+          open
+          options={MENU_ITEMS}
+          search
+        />
+      )}
     </div>
   );
 }
@@ -1607,13 +1633,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1634,20 +1659,31 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
 
 #### DropdownMenu with multi-select
 
-You can allow users to select multiple menu items by passing the `DropdownMenu` component the `multiple` prop.  `MenuItems` will be shifted further to the right to make room for checkmarks displayed upon selection.
+You can allow users to select multiple menu items by passing the `DropdownMenu` component the `multiple` prop. `MenuItems` will be shifted further to the right to make room for checkmarks displayed upon selection.
 
 If the `multiple` prop is not `true`, the `DropdownMenu` allows just one selection. It closes and applies the selection once  a menu item is selected.
 
@@ -1676,13 +1712,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -1692,7 +1726,7 @@ h1 {
 
 ```tsx
 // DropdownMenu with multi-select
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -1709,9 +1743,9 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   },
 ];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway(){} 
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -1719,24 +1753,22 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            multiple
-            onClickAway={handleClickAway}
-            open
-            options={MENU_ITEMS}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          multiple
+          onClickAway={handleClickAway}
+          open
+          options={MENU_ITEMS}
+        />
+      )}
     </div>
   );
 }
@@ -1781,13 +1813,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1808,18 +1839,29 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
 
-#### Dropdown with search and multi-select; does *not* maintain searched query upon selection of a menu item
+#### Dropdown with search and multi-select; does _not_ maintain searched query upon selection of a menu item
 
 If search is included in the `DropdownMenu`, by default the search input will be maintained when a user selects a `MenuItem` (if multiple selections are allowed; otherwise the dropdown menu closes upon selection). However, the search input can be set to close upon selection by setting the optional `keepSearchOnSelect` prop to `false`.
 
@@ -1832,7 +1874,7 @@ To see how this works:
 3. Select "Fruit: Apple"
 4. Note that the search text is now cleared and all dropdown items reappear
 
-Compare this to the default behavior in the "DropdownMenu with search" example above, or change the `keepSearchOnSelect`  prop in the example below to `true`.
+Compare this to the default behavior in the "DropdownMenu with search" example above, or change the `keepSearchOnSelect` prop in the example below to `true`.
 
 **/styles.css**
 
@@ -1859,13 +1901,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -1875,7 +1915,7 @@ h1 {
 
 ```tsx
 // Dropdown with multi-select that does not maintain searched query upon selection of a menu item
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -1894,10 +1934,10 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
     name: "Vegetable: Kale",
   },
 ];
-  
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
 
-function handleClickAway(){} 
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
+
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -1905,26 +1945,24 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            keepSearchOnSelect={false}
-            multiple
-            onClickAway={function handleClickAway(){}}
-            open
-            options={MENU_ITEMS}
-            search
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          keepSearchOnSelect={false}
+          multiple
+          onClickAway={function handleClickAway() {}}
+          open
+          options={MENU_ITEMS}
+          search
+        />
+      )}
     </div>
   );
 }
@@ -1969,13 +2007,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -1996,13 +2033,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -2015,19 +2063,19 @@ This requires passing `DropdownMenu` the `groupBy` prop to group options under t
 
 `groupBy={(option) => {`
 
-			`return option.section; // this will group items by section`    
+    		`return option.section; // this will group items by section`
 
-			`// Another example`
+    		`// Another example`
 
-			`// this will group items by the last character of their names` 
+    		`// this will group items by the last character of their names`
 
-			`return option.name.at(-1);` 
+    		`return option.name.at(-1);`
 
 `}}`
 
 This `groupBy` prop must be provided or the groups will not render, even if all menu items have `section` properties (see below).
 
->**Warning:** To avoid duplicate headers, please make sure that the options are also sorted with the same dimension that they are grouped by. (See: Issue and example below)
+> **Warning:** To avoid duplicate headers, please make sure that the options are also sorted with the same dimension that they are grouped by. (See: Issue and example below)
 
 **/styles.css**
 
@@ -2054,13 +2102,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -2070,7 +2116,7 @@ h1 {
 
 ```tsx
 // Dropdown with grouped sections
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -2078,34 +2124,34 @@ import "./styles.css";
 const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   {
     name: "Menu item A.1",
-    section: "Section A"
+    section: "Section A",
   },
   {
     name: "Menu item A.2",
-    section: "Section A"
+    section: "Section A",
   },
   {
     name: "Menu item without a specified section",
   },
   {
     name: "Menu item B.1",
-    section: "Section B"
+    section: "Section B",
   },
   {
     name: "Menu item C.1",
-    section: "Section C"
+    section: "Section C",
   },
   {
     name: "Menu item C.2",
-    section: "Section C"
+    section: "Section C",
   },
   {
     name: "Menu item C.3",
-    section: "Section C"
+    section: "Section C",
   },
   {
     name: "Menu item B.2",
-    section: "Section B"
+    section: "Section B",
   },
 ];
 
@@ -2127,12 +2173,12 @@ const SORTED_ITEMS = [...MENU_ITEMS].sort((a, b) => {
 });
 
 function groupBy(option) {
-  return option.name.at(-1)
+  return option.name.at(-1);
 }
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway(){} 
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -2140,24 +2186,22 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            groupBy={groupBy}
-            onClickAway={handleClickAway}
-            open
-            options={SORTED_ITEMS}
-         />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          groupBy={groupBy}
+          onClickAway={handleClickAway}
+          open
+          options={SORTED_ITEMS}
+        />
+      )}
     </div>
   );
 }
@@ -2202,13 +2246,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -2229,26 +2272,37 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
 
 #### DropdownMenu with menu items that have count, icon, and / or details
 
-Each `MenuItem` provided to `DropdownMenu` can optionally include `count`, `details` and `sdsIcon` properties. 
+Each `MenuItem` provided to `DropdownMenu` can optionally include `count`, `details` and `sdsIcon` properties.
 
 The `count` property takes a number which is displayed to the right of the menu item text, with built-in spacing to its left (to prevent the menu item's text from running into it).
 
 Add a text string to the `details` property to display text below the menu item’s main text.
 
-`sdsIcon` can be passed the name of any icon in the SDS codebase and it will automatically render the icon to the left of the menu item’s text; if an invalid name is passed, the menu item will render the same as if no icon were passed to it.  The `sdsIconProps` prop can be added to a menu item with an icon to provide more specifics like a `className`or `color`.
+`sdsIcon` can be passed the name of any icon in the SDS codebase and it will automatically render the icon to the left of the menu item’s text; if an invalid name is passed, the menu item will render the same as if no icon were passed to it. The `sdsIconProps` prop can be added to a menu item with an icon to provide more specifics like a `className`or `color`.
 
 **/styles.css**
 
@@ -2275,13 +2329,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -2291,7 +2343,7 @@ h1 {
 
 ```tsx
 // Dropdown with grouped sections
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -2299,11 +2351,11 @@ import "./styles.css";
 const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   {
     name: "Menu item with count",
-    count: 3
+    count: 3,
   },
   {
     name: "Menu item with details",
-    details: "Details"
+    details: "Details",
   },
   {
     name: "Menu item with icon",
@@ -2325,9 +2377,9 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   },
 ];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway(){} 
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -2335,26 +2387,24 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            groupBy={(option: DefaultDropdownMenuOption) => {
-              return option.section as string;
-            }}
-            onClickAway={handleClickAway}
-            open
-            options={MENU_ITEMS}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          groupBy={(option: DefaultDropdownMenuOption) => {
+            return option.section as string;
+          }}
+          onClickAway={handleClickAway}
+          open
+          options={MENU_ITEMS}
+        />
+      )}
     </div>
   );
 }
@@ -2399,13 +2449,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -2426,13 +2475,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -2445,7 +2505,7 @@ Any existing SDS component (must be imported) can be provided to the menu item's
 
 These custom menu items can optionally be assigned metadata just like regular menu items, including `section`, `count`, and `sdsIcon` and `sdsIconProps`.
 
->**Warning:** Currently, there is a bug preventing the `details` property from rendering when used in combination with a custom component in place of a menu item; see issue #522 for *details* (pun intended!).
+> **Warning:** Currently, there is a bug preventing the `details` property from rendering when used in combination with a custom component in place of a menu item; see issue #522 for _details_ (pun intended!).
 
 **/styles.css**
 
@@ -2472,13 +2532,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -2488,32 +2546,29 @@ h1 {
 
 ```tsx
 // DropdownMenu with components in place of menu items
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
-import { DropdownMenu, DefaultDropdownMenuOption, Tag, Button, ButtonIcon } from "@czi-sds/components";
+import {
+  DropdownMenu,
+  DefaultDropdownMenuOption,
+  Tag,
+  Button,
+  ButtonIcon,
+} from "@czi-sds/components";
 import "./styles.css";
 
 const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   {
     component: (
-      <Button
-        sdsStyle="square"
-        sdsType="primary"
-      >
+      <Button sdsStyle="square" sdsType="primary">
         Button
       </Button>
     ),
     name: "Button component",
-    section: "Button component"
+    section: "Button component",
   },
   {
-    component: (
-      <ButtonIcon
-        sdsIcon="Copy"
-        sdsSize="large"
-        sdsType="primary"
-      />
-    ),
+    component: <ButtonIcon sdsIcon="Copy" sdsSize="large" sdsType="primary" />,
     name: "ButtonIcon component",
     section: "ButtonIcon component",
   },
@@ -2545,12 +2600,7 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   },
   {
     component: (
-      <Tag
-        label="Tag"
-        sdsStyle="rounded"
-        sdsType="secondary"
-        color="neutral"
-      />
+      <Tag label="Tag" sdsStyle="rounded" sdsType="secondary" color="neutral" />
     ),
     name: "Button component",
     section: "Component with count and icon",
@@ -2559,9 +2609,9 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   },
 ];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway(){} 
+function handleClickAway() {}
 
 function App() {
   const ref = useRef(null);
@@ -2569,26 +2619,24 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            groupBy={(option: DefaultDropdownMenuOption) => {
-              return option.section;
-            }}
-            onClickAway={handleClickAway}
-            open
-            options={MENU_ITEMS}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          groupBy={(option: DefaultDropdownMenuOption) => {
+            return option.section;
+          }}
+          onClickAway={handleClickAway}
+          open
+          options={MENU_ITEMS}
+        />
+      )}
     </div>
   );
 }
@@ -2633,13 +2681,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -2660,13 +2707,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -2683,16 +2741,16 @@ The component's source code in the SDS codebase can be found here.
 
 Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `column` | `string` | `-` | The `column` prop determines the content displayed in the right column of the menu item. This content can be customized to provide additional information or context for the menu item. |
-| `children` | `node` | `-` | Main content of the MenuItem. |
-| `disabled` | `bool` | `false` | When set to `true`, the disabled prop indicates that the menu item is disabled and not interactable. |
-| `isMultiSelect` | `bool` | `false` | When `true`, designates that the menu item supports multi-select functionality. |
-| `sdsIcon` | `func` | `-` | Allows you to provide a custom SDS icon component to be displayed within the menu item. |
-| `sdsIconProps` | `func` | `-` | Enables you to pass additional props to customize the SDS icon within the menu item. |
-| `sdsStyle` | `"determinate"`  `| "indeterminate"` | `"determinate"` | Determines the style of the menu item, whether it is `determinate` or `indeterminate`. |
-| `selected` | `bool` | `false` | When set to `true`, the `selected` prop signifies that the menu item is currently selected. |
+| Name            | Type              | Default          | Description                                                                                                                                                                             |
+| --------------- | ----------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `column`        | `string`          | `-`              | The `column` prop determines the content displayed in the right column of the menu item. This content can be customized to provide additional information or context for the menu item. |
+| `children`      | `node`            | `-`              | Main content of the MenuItem.                                                                                                                                                           |
+| `disabled`      | `bool`            | `false`          | When set to `true`, the disabled prop indicates that the menu item is disabled and not interactable.                                                                                    |
+| `isMultiSelect` | `bool`            | `false`          | When `true`, designates that the menu item supports multi-select functionality.                                                                                                         |
+| `sdsIcon`       | `func`            | `-`              | Allows you to provide a custom SDS icon component to be displayed within the menu item.                                                                                                 |
+| `sdsIconProps`  | `func`            | `-`              | Enables you to pass additional props to customize the SDS icon within the menu item.                                                                                                    |
+| `sdsStyle`      | `"determinate"` ` | "indeterminate"` | `"determinate"`                                                                                                                                                                         | Determines the style of the menu item, whether it is `determinate` or `indeterminate`. |
+| `selected`      | `bool`            | `false`          | When set to `true`, the `selected` prop signifies that the menu item is currently selected.                                                                                             |
 
 ### Code Examples
 
@@ -2725,13 +2783,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -2746,9 +2802,7 @@ import "./styles.css";
 function App() {
   return (
     <div className="app">
-      <MenuItem>
-        MenuItem 1
-      </MenuItem>
+      <MenuItem>MenuItem 1</MenuItem>
     </div>
   );
 }
@@ -2793,13 +2847,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -2820,13 +2873,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -2835,7 +2899,7 @@ root.render(
 
 This example showcases a multi-select `MenuItem` component featuring an SDS `Icon` and a distinct column value.
 
->**SDS Tip:** MenuItem exclusively accepts SDS Icons in `xs` and `s` sizes. To explore a comprehensive list of SDS icons and their available sizes, refer to the IconBank page within Storybook.
+> **SDS Tip:** MenuItem exclusively accepts SDS Icons in `xs` and `s` sizes. To explore a comprehensive list of SDS icons and their available sizes, refer to the IconBank page within Storybook.
 
 **/styles.css**
 
@@ -2862,13 +2926,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -2885,18 +2947,18 @@ function App() {
   const [selected, setSelected] = useState(false);
 
   const handleClick = () => {
-    setSelected(prev => !prev);
+    setSelected((prev) => !prev);
   };
-  
+
   return (
     <div className="app">
-      <MenuItem 
+      <MenuItem
         isMultiSelect
         column="Column Value"
         sdsIcon="gear"
         count={3}
         sdsIconProps={{
-          color: "beta"
+          color: "beta",
         }}
         selected={selected}
         onClick={handleClick}
@@ -2947,13 +3009,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -2974,13 +3035,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
@@ -2989,8 +3061,8 @@ root.render(
 
 ## DropdownMenu Recipes
 
-| These component recipes show a few of the more complex approaches available for customizing Dropdown Menus.  |   | **Jump to recipe:** DropdownMenu with customized `isOptionEqualToValue` DropdownMenu with customized `onChange` DropdownMenu with custom `PopperBaseProps` DropdownMenu with custom `Popper` component |
-| --- | --- | --- |
+| These component recipes show a few of the more complex approaches available for customizing Dropdown Menus. |     | **Jump to recipe:** DropdownMenu with customized `isOptionEqualToValue` DropdownMenu with customized `onChange` DropdownMenu with custom `PopperBaseProps` DropdownMenu with custom `Popper` component |
+| ----------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 
 #### **DropdownMenu with customized** **`isOptionEqualToValue`**
 
@@ -3023,13 +3095,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -3039,7 +3109,7 @@ h1 {
 
 ```tsx
 // DropdownMenu with customized `isOptionEqualToValue`
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -3049,25 +3119,25 @@ function optionIdEqualToValueId(option, value) {
 }
 
 const MENU_ITEMS: DefaultDropdownMenuOption[] = [
-    {
-      name: "Menu item 1",
-      id: "one",
-    },
-    {
-      name: "Menu item 2",
-      id: "two",
-    },
-    {
-      name: "Menu item 3",
-      id: "three",
-    },
-    {
-      name: "Longer menu item than the others",
-      id: "four",
-    },
-  ];
+  {
+    name: "Menu item 1",
+    id: "one",
+  },
+  {
+    name: "Menu item 2",
+    id: "two",
+  },
+  {
+    name: "Menu item 3",
+    id: "three",
+  },
+  {
+    name: "Longer menu item than the others",
+    id: "four",
+  },
+];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
 function handleClickAway() {}
 
@@ -3077,24 +3147,22 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            isOptionEqualToValue={optionIdEqualToValueId}
-            onClickAway={handleClickAway}
-            open
-            options={MENU_ITEMS}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          isOptionEqualToValue={optionIdEqualToValueId}
+          onClickAway={handleClickAway}
+          open
+          options={MENU_ITEMS}
+        />
+      )}
     </div>
   );
 }
@@ -3139,13 +3207,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -3166,22 +3233,33 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
 
 #### **DropdownMenu with customized** **`onChange`** **prop**
 
-The optional `onChange` prop specifies what happens when a new selection is made. 
+The optional `onChange` prop specifies what happens when a new selection is made.
 
-In the example below, `onChange` has been modified such that making a new selection logs the `value`  and `reason` to the console.
+In the example below, `onChange` has been modified such that making a new selection logs the `value` and `reason` to the console.
 
 This is a MUI prop; learn more in the Autocomplete API.
 
@@ -3210,13 +3288,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -3226,7 +3302,7 @@ h1 {
 
 ```tsx
 // DropdownMenu with customized `onInputChange`
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
@@ -3246,49 +3322,48 @@ const MENU_ITEMS: DefaultDropdownMenuOption[] = [
   },
 ];
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
-function handleClickAway() {};
+function handleClickAway() {}
 
-function Message({message}) {
+function Message({ message }) {
   return (
-    <div style={{ position: "absolute", top: "170px", fontFamily: "sans-serif" }}>
+    <div
+      style={{ position: "absolute", top: "170px", fontFamily: "sans-serif" }}
+    >
       <p>{JSON.stringify(message)}</p>
     </div>
   );
 }
 
 function App() {
-
   const [message, setMessage] = useState();
-  
-const ref = useRef(null);
+
+  const ref = useRef(null);
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <>
-            <DropdownMenu
-              PopperBaseProps={POPPER_BASE_PROPS}
-              anchorEl={ref.current}
-              keepSearchOnSelect
-              onClickAway={handleClickAway}
-              onChange={(_, value, reason) => setMessage({value, reason})}
-              open
-              options={MENU_ITEMS}
-            />
-            <Message message={message} />
-          </>
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <>
+          <DropdownMenu
+            PopperBaseProps={POPPER_BASE_PROPS}
+            anchorEl={ref.current}
+            keepSearchOnSelect
+            onClickAway={handleClickAway}
+            onChange={(_, value, reason) => setMessage({ value, reason })}
+            open
+            options={MENU_ITEMS}
+          />
+          <Message message={message} />
+        </>
+      )}
     </div>
   );
 }
@@ -3333,13 +3408,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -3360,24 +3434,35 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
 
 #### **DropdownMenu with custom** **`PopperBaseProps`**
 
-`PopperBaseProps` is an SDS-specific prop made for passing custom props to the `Popper` component, which is included as part of the `DropdownMenu` component. 
+`PopperBaseProps` is an SDS-specific prop made for passing custom props to the `Popper` component, which is included as part of the `DropdownMenu` component.
 
 The `Popper` component is part of MUI; learn more in the Popper documentation, and see all the props available to pass to it on the Popper API page.
 
-The example below passes the Popper a `className` prop to make some style changes (see the styles.css tab in the code window below) and additionally uses the `sx` prop to make more style changes (learn more on the MUI `sx`  documentation page).
+The example below passes the Popper a `className` prop to make some style changes (see the styles.css tab in the code window below) and additionally uses the `sx` prop to make more style changes (learn more on the MUI `sx` documentation page).
 
 **/styles.css**
 
@@ -3404,13 +3489,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -3420,35 +3503,35 @@ h1 {
 
 ```tsx
 // DropdownMenu with custom `PopperBaseProps`
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
 
 const MENU_ITEMS: DefaultDropdownMenuOption[] = [
-    {
-      name: "Menu item 1",
-    },
-    {
-      name: "Menu item 2",
-    },
-    {
-      name: "Menu item 3",
-    },
-    {
-      name: "Longer menu item than the others",
-    },
-  ];
+  {
+    name: "Menu item 1",
+  },
+  {
+    name: "Menu item 2",
+  },
+  {
+    name: "Menu item 3",
+  },
+  {
+    name: "Longer menu item than the others",
+  },
+];
 
 const POPPER_BASE_PROPS = {
   className: "popper",
-    sx: { 
-      width: 500,
-      borderColor: "salmon",
-      borderWidth: 10,
-    },
-  popperOptions: { strategy: "absolute"},
-}
+  sx: {
+    width: 500,
+    borderColor: "salmon",
+    borderWidth: 10,
+  },
+  popperOptions: { strategy: "absolute" },
+};
 
 function App() {
   const ref = useRef(null);
@@ -3456,24 +3539,22 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            onClickAway={function handleClickAway(){}}
-            open
-            options={MENU_ITEMS}
-            PopperBaseProps={POPPER_BASE_PROPS}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          onClickAway={function handleClickAway() {}}
+          open
+          options={MENU_ITEMS}
+          PopperBaseProps={POPPER_BASE_PROPS}
+        />
+      )}
     </div>
   );
 }
@@ -3518,13 +3599,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -3545,22 +3625,33 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
 
 #### **DropdownMenu with custom Popper component**
 
-In addition to modifying the `Popper`'s  styles via `PopperBaseProps`,  the styles for the `Popper`  component can be overwritten more directly with `styled()`.  
+In addition to modifying the `Popper`'s styles via `PopperBaseProps`, the styles for the `Popper` component can be overwritten more directly with `styled()`.
 
-To get all the default SDS styles used for `Popper`,  first copy them into a custom-styled `Popper`  (from within sci-components/packages/components/src/core/DropdownMenu/style.ts file). Then replace and / or follow up those styles with custom styles. The example below includes comments for each of these steps within `CustomPopper`.
+To get all the default SDS styles used for `Popper`, first copy them into a custom-styled `Popper` (from within sci-components/packages/components/src/core/DropdownMenu/style.ts file). Then replace and / or follow up those styles with custom styles. The example below includes comments for each of these steps within `CustomPopper`.
 
 **/styles.css**
 
@@ -3587,13 +3678,11 @@ h1 {
 
 ```json
 {
-  "include": [
-    "./**/*"
-  ],
+  "include": ["./**/*"],
   "compilerOptions": {
     "strict": true,
     "esModuleInterop": true,
-    "lib": [ "dom", "es2015" ],
+    "lib": ["dom", "es2015"],
     "jsx": "react-jsx"
   }
 }
@@ -3603,60 +3692,60 @@ h1 {
 
 ```tsx
 // DropdownMenu with custom Popper component
-      
+
 import React, { SyntheticEvent, useState, useRef, useEffect } from "react";
 import { Popper, styled } from "@mui/material";
 import { DropdownMenu, DefaultDropdownMenuOption } from "@czi-sds/components";
 import "./styles.css";
 
 const MENU_ITEMS: DefaultDropdownMenuOption[] = [
-    {
-      name: "Menu item 1",
-    },
-    {
-      name: "Menu item 2",
-    },
-    {
-      name: "Menu item 3",
-    },
-    {
-      name: "Longer menu item than the others",
-    },
-  ];
+  {
+    name: "Menu item 1",
+  },
+  {
+    name: "Menu item 2",
+  },
+  {
+    name: "Menu item 3",
+  },
+  {
+    name: "Longer menu item than the others",
+  },
+];
 
-// Step 1/3: Copy existing base styles for the Popper component from 
+// Step 1/3: Copy existing base styles for the Popper component from
 // sci-components/packages/components/src/core/DropdownMenu/style.ts, ~lines 206-229:
 const getBorders = ({ theme }: CommonThemeProps): Borders | null => {
-    return theme?.app?.borders || null;
+  return theme?.app?.borders || null;
 };
 
 const getCorners = ({ theme }: CommonThemeProps): Corners | null => {
-    return theme?.app?.corners || null;
+  return theme?.app?.corners || null;
 };
 
 const getShadows = ({ theme }: CommonThemeProps): Shadows | null => {
-    return theme?.app?.shadows || null;
+  return theme?.app?.shadows || null;
 };
 
 const getSpaces = ({ theme }: CommonThemeProps): Spaces | null => {
-    return theme?.app?.spacing || null;
+  return theme?.app?.spacing || null;
 };
 
 const CustomPopper = styled(Popper)`
- .MuiAutocomplete-popperDisablePortal {
+  .MuiAutocomplete-popperDisablePortal {
     position: relative;
     width: 100% !important;
     box-shadow: none;
     padding: 0;
     border: none;
   }
-  
+
   ${(props) => {
     const borders = getBorders(props);
     const corners = getCorners(props);
     const shadows = getShadows(props);
     const spacings = getSpaces(props);
-    
+
     return `
       background-color: white;
       border: ${borders?.base?.divider};
@@ -3676,7 +3765,7 @@ const CustomPopper = styled(Popper)`
   border-width: 15px !important;
 `;
 
-const POPPER_BASE_PROPS = {popperOptions: { strategy: "absolute"}};
+const POPPER_BASE_PROPS = { popperOptions: { strategy: "absolute" } };
 
 function App() {
   const ref = useRef(null);
@@ -3684,25 +3773,23 @@ function App() {
 
   useEffect(() => {
     if (ref.current) setOpen(true);
-  }, [ref.current])
-  
+  }, [ref.current]);
+
   return (
-    <div className="app" style={{paddingLeft: "10px"}}>
+    <div className="app" style={{ paddingLeft: "10px" }}>
       <div ref={ref} />
-      {open && 
-        (
-          // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
-          <DropdownMenu
-            PopperBaseProps={POPPER_BASE_PROPS}
-            anchorEl={ref.current}
-            onClickAway={function handleClickAway(){}}
-            open
-            options={MENU_ITEMS}
-            // Step 3/3: Pass the new CustomPopper to PopperComponent prop
-            PopperComponent={CustomPopper}
-          />
-        )
-      }
+      {open && (
+        // 👇 Only pay attention to the props here, everything else is just Zeroheight glue code
+        <DropdownMenu
+          PopperBaseProps={POPPER_BASE_PROPS}
+          anchorEl={ref.current}
+          onClickAway={function handleClickAway() {}}
+          open
+          options={MENU_ITEMS}
+          // Step 3/3: Pass the new CustomPopper to PopperComponent prop
+          PopperComponent={CustomPopper}
+        />
+      )}
     </div>
   );
 }
@@ -3747,13 +3834,12 @@ root.render(
     <RootApp />
   </React.StrictMode>
 );
-
 ```
 
 **/public/index.html**
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -3774,14 +3860,24 @@ root.render(
     <div id="root"></div>
   </body>
 </html>
-
 ```
 
 **/package.json**
 
 ```json
-{"dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-scripts":"^4.0.0"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^4.0.0"},"main":"/index.tsx"}
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-scripts": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^4.0.0"
+  },
+  "main": "/index.tsx"
+}
 ```
 
 ---
-