From 128475eac594b5fd8477f912333d806593856d1c Mon Sep 17 00:00:00 2001
From: Boaz Shuster <boaz.shuster.github@gmail.com>
Date: Thu, 23 Jan 2020 10:52:32 +0200
Subject: [PATCH] fix(dropdown): do not pass id to dropdown list item if is not
 set

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
---
 .../ApplicationLauncher.test.js.snap          | 112 ---
 .../Dropdown/InternalDropdownItem.tsx         |   4 +-
 .../__snapshots__/Dropdown.test.tsx.snap      | 688 ------------------
 .../__snapshots__/OptionsMenu.test.js.snap    |  30 -
 4 files changed, 2 insertions(+), 832 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
index 44ca3dbad71..2f0765b8b75 100644
--- a/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ApplicationLauncher/__snapshots__/ApplicationLauncher.test.js.snap
@@ -294,25 +294,21 @@ exports[`ApplicationLauncher custom icon 1`] = `
                     role="menu"
                   >
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <button
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                         type="button"
                       >
@@ -320,26 +316,22 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       </button>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <a
                         aria-disabled="true"
                         class="pf-m-disabled pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Disabled Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <button
                         class="pf-m-disabled pf-c-app-launcher__menu-item"
                         disabled=""
-                        id=""
                         tabindex="-1"
                         type="button"
                       >
@@ -347,34 +339,28 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       </button>
                     </li>
                     <li
-                      id=""
                       role="separator"
                     >
                       <div
                         class="pf-c-app-launcher__separator"
-                        id=""
                       />
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Separated Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <button
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                         type="button"
                       >
@@ -439,25 +425,21 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       role="menu"
                     >
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <button
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                           type="button"
                         >
@@ -465,26 +447,22 @@ exports[`ApplicationLauncher custom icon 1`] = `
                         </button>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <a
                           aria-disabled="true"
                           class="pf-m-disabled pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Disabled Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <button
                           class="pf-m-disabled pf-c-app-launcher__menu-item"
                           disabled=""
-                          id=""
                           tabindex="-1"
                           type="button"
                         >
@@ -492,34 +470,28 @@ exports[`ApplicationLauncher custom icon 1`] = `
                         </button>
                       </li>
                       <li
-                        id=""
                         role="separator"
                       >
                         <div
                           class="pf-c-app-launcher__separator"
-                          id=""
                         />
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Separated Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <button
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                           type="button"
                         >
@@ -601,7 +573,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="a"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -610,7 +581,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={0}
                   isDisabled={false}
                   isHovered={false}
@@ -623,7 +593,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -632,7 +601,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       aria-disabled={false}
                       className="pf-c-app-launcher__menu-item"
                       href={null}
-                      id=""
                       tabIndex={-1}
                     >
                       Link
@@ -648,7 +616,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="button"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -657,7 +624,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={1}
                   isDisabled={false}
                   isHovered={false}
@@ -670,7 +636,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -679,7 +644,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       className="pf-c-app-launcher__menu-item"
                       disabled={false}
                       href={null}
-                      id=""
                       tabIndex={-1}
                       type="button"
                     >
@@ -696,7 +660,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="a"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -705,7 +668,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={2}
                   isDisabled={true}
                   isHovered={false}
@@ -718,7 +680,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -727,7 +688,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       aria-disabled={true}
                       className="pf-m-disabled pf-c-app-launcher__menu-item"
                       href={null}
-                      id=""
                       tabIndex={-1}
                     >
                       Disabled Link
@@ -744,7 +704,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="button"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -753,7 +712,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={3}
                   isDisabled={true}
                   isHovered={false}
@@ -766,7 +724,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -775,7 +732,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       className="pf-m-disabled pf-c-app-launcher__menu-item"
                       disabled={true}
                       href={null}
-                      id=""
                       tabIndex={-1}
                       type="button"
                     >
@@ -791,7 +747,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className="pf-c-app-launcher__separator"
                   component="div"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -800,7 +755,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={4}
                   isDisabled={false}
                   isHovered={false}
@@ -811,7 +765,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="separator"
@@ -819,7 +772,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                     <div
                       className="pf-c-app-launcher__separator"
                       href={null}
-                      id=""
                     />
                   </li>
                 </InternalDropdownItem>
@@ -831,7 +783,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="a"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -840,7 +791,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={5}
                   isDisabled={false}
                   isHovered={false}
@@ -853,7 +803,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -862,7 +811,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       aria-disabled={false}
                       className="pf-c-app-launcher__menu-item"
                       href={null}
-                      id=""
                       tabIndex={-1}
                     >
                       Separated Link
@@ -878,7 +826,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="button"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -887,7 +834,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={6}
                   isDisabled={false}
                   isHovered={false}
@@ -900,7 +846,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -909,7 +854,6 @@ exports[`ApplicationLauncher custom icon 1`] = `
                       className="pf-c-app-launcher__menu-item"
                       disabled={false}
                       href={null}
-                      id=""
                       tabIndex={-1}
                       type="button"
                     >
@@ -1992,25 +1936,21 @@ exports[`ApplicationLauncher expanded 1`] = `
                     role="menu"
                   >
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <button
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                         type="button"
                       >
@@ -2018,26 +1958,22 @@ exports[`ApplicationLauncher expanded 1`] = `
                       </button>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <a
                         aria-disabled="true"
                         class="pf-m-disabled pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Disabled Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <button
                         class="pf-m-disabled pf-c-app-launcher__menu-item"
                         disabled=""
-                        id=""
                         tabindex="-1"
                         type="button"
                       >
@@ -2045,34 +1981,28 @@ exports[`ApplicationLauncher expanded 1`] = `
                       </button>
                     </li>
                     <li
-                      id=""
                       role="separator"
                     >
                       <div
                         class="pf-c-app-launcher__separator"
-                        id=""
                       />
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Separated Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="menuitem"
                     >
                       <button
                         class="pf-c-app-launcher__menu-item"
-                        id=""
                         tabindex="-1"
                         type="button"
                       >
@@ -2136,25 +2066,21 @@ exports[`ApplicationLauncher expanded 1`] = `
                       role="menu"
                     >
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <button
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                           type="button"
                         >
@@ -2162,26 +2088,22 @@ exports[`ApplicationLauncher expanded 1`] = `
                         </button>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <a
                           aria-disabled="true"
                           class="pf-m-disabled pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Disabled Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <button
                           class="pf-m-disabled pf-c-app-launcher__menu-item"
                           disabled=""
-                          id=""
                           tabindex="-1"
                           type="button"
                         >
@@ -2189,34 +2111,28 @@ exports[`ApplicationLauncher expanded 1`] = `
                         </button>
                       </li>
                       <li
-                        id=""
                         role="separator"
                       >
                         <div
                           class="pf-c-app-launcher__separator"
-                          id=""
                         />
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Separated Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="menuitem"
                       >
                         <button
                           class="pf-c-app-launcher__menu-item"
-                          id=""
                           tabindex="-1"
                           type="button"
                         >
@@ -2296,7 +2212,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="a"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2305,7 +2220,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={0}
                   isDisabled={false}
                   isHovered={false}
@@ -2318,7 +2232,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -2327,7 +2240,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                       aria-disabled={false}
                       className="pf-c-app-launcher__menu-item"
                       href={null}
-                      id=""
                       tabIndex={-1}
                     >
                       Link
@@ -2343,7 +2255,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="button"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2352,7 +2263,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={1}
                   isDisabled={false}
                   isHovered={false}
@@ -2365,7 +2275,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -2374,7 +2283,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                       className="pf-c-app-launcher__menu-item"
                       disabled={false}
                       href={null}
-                      id=""
                       tabIndex={-1}
                       type="button"
                     >
@@ -2391,7 +2299,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="a"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2400,7 +2307,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={2}
                   isDisabled={true}
                   isHovered={false}
@@ -2413,7 +2319,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -2422,7 +2327,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                       aria-disabled={true}
                       className="pf-m-disabled pf-c-app-launcher__menu-item"
                       href={null}
-                      id=""
                       tabIndex={-1}
                     >
                       Disabled Link
@@ -2439,7 +2343,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="button"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2448,7 +2351,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={3}
                   isDisabled={true}
                   isHovered={false}
@@ -2461,7 +2363,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -2470,7 +2371,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                       className="pf-m-disabled pf-c-app-launcher__menu-item"
                       disabled={true}
                       href={null}
-                      id=""
                       tabIndex={-1}
                       type="button"
                     >
@@ -2486,7 +2386,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className="pf-c-app-launcher__separator"
                   component="div"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2495,7 +2394,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={4}
                   isDisabled={false}
                   isHovered={false}
@@ -2506,7 +2404,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="separator"
@@ -2514,7 +2411,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                     <div
                       className="pf-c-app-launcher__separator"
                       href={null}
-                      id=""
                     />
                   </li>
                 </InternalDropdownItem>
@@ -2526,7 +2422,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="a"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2535,7 +2430,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={5}
                   isDisabled={false}
                   isHovered={false}
@@ -2548,7 +2442,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -2557,7 +2450,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                       aria-disabled={false}
                       className="pf-c-app-launcher__menu-item"
                       href={null}
-                      id=""
                       tabIndex={-1}
                     >
                       Separated Link
@@ -2573,7 +2465,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 <InternalDropdownItem
                   className=""
                   component="button"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2582,7 +2473,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={6}
                   isDisabled={false}
                   isHovered={false}
@@ -2595,7 +2485,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="menuitem"
@@ -2604,7 +2493,6 @@ exports[`ApplicationLauncher expanded 1`] = `
                       className="pf-c-app-launcher__menu-item"
                       disabled={false}
                       href={null}
-                      id=""
                       tabIndex={-1}
                       type="button"
                     >
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/InternalDropdownItem.tsx b/packages/patternfly-4/react-core/src/components/Dropdown/InternalDropdownItem.tsx
index cf00def84b3..f494901e404 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/InternalDropdownItem.tsx
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/InternalDropdownItem.tsx
@@ -66,8 +66,8 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
       keyHandler: () => {},
       sendRef: () => {}
     },
-    id: '',
-    componentID: '',
+    id: undefined,
+    componentID: undefined,
     enterTriggersArrowDown: false
   };
 
diff --git a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 421f8c9ac8e..5c3d5f1aaf9 100644
--- a/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -235,7 +235,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -244,7 +243,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -258,7 +256,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -267,7 +264,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -281,7 +277,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -290,7 +285,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -304,7 +298,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -313,7 +306,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -328,7 +320,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -337,7 +328,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -351,7 +341,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -360,7 +349,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -387,7 +375,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -396,7 +383,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -410,7 +396,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -419,7 +404,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -433,7 +417,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -442,7 +425,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -456,7 +438,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -465,7 +446,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -480,7 +460,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -489,7 +468,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -503,7 +481,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -512,7 +489,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -541,7 +517,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -550,7 +525,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -564,7 +538,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -573,7 +546,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -587,7 +559,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -596,7 +567,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -610,7 +580,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -619,7 +588,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -634,7 +602,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -643,7 +610,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -657,7 +623,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -666,7 +631,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -695,7 +659,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -704,7 +667,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -718,7 +680,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -727,7 +688,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -741,7 +701,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -750,7 +709,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -764,7 +722,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -773,7 +730,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -788,7 +744,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -797,7 +752,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -811,7 +765,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -820,7 +773,6 @@ exports[`KebabToggle dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -995,7 +947,6 @@ exports[`KebabToggle dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1004,7 +955,6 @@ exports[`KebabToggle dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1018,7 +968,6 @@ exports[`KebabToggle dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1027,7 +976,6 @@ exports[`KebabToggle dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1041,7 +989,6 @@ exports[`KebabToggle dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1050,7 +997,6 @@ exports[`KebabToggle dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -1064,7 +1010,6 @@ exports[`KebabToggle dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1073,7 +1018,6 @@ exports[`KebabToggle dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -1088,7 +1032,6 @@ exports[`KebabToggle dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1097,7 +1040,6 @@ exports[`KebabToggle dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1111,7 +1053,6 @@ exports[`KebabToggle dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1120,7 +1061,6 @@ exports[`KebabToggle dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1146,7 +1086,6 @@ exports[`KebabToggle dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1155,7 +1094,6 @@ exports[`KebabToggle dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -1169,7 +1107,6 @@ exports[`KebabToggle dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1178,7 +1115,6 @@ exports[`KebabToggle dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -1192,7 +1128,6 @@ exports[`KebabToggle dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1201,7 +1136,6 @@ exports[`KebabToggle dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -1215,7 +1149,6 @@ exports[`KebabToggle dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1224,7 +1157,6 @@ exports[`KebabToggle dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -1239,7 +1171,6 @@ exports[`KebabToggle dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1248,7 +1179,6 @@ exports[`KebabToggle dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -1262,7 +1192,6 @@ exports[`KebabToggle dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1271,7 +1200,6 @@ exports[`KebabToggle dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -1299,7 +1227,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1308,7 +1235,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1322,7 +1248,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1331,7 +1256,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1345,7 +1269,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1354,7 +1277,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -1368,7 +1290,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1377,7 +1298,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -1392,7 +1312,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1401,7 +1320,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1415,7 +1333,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1424,7 +1341,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1452,7 +1368,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1461,7 +1376,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1475,7 +1389,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1484,7 +1397,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1498,7 +1410,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1507,7 +1418,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -1521,7 +1431,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1530,7 +1439,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -1545,7 +1453,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1554,7 +1461,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1568,7 +1474,6 @@ exports[`KebabToggle dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -1577,7 +1482,6 @@ exports[`KebabToggle dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -1751,7 +1655,6 @@ exports[`KebabToggle expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1760,7 +1663,6 @@ exports[`KebabToggle expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1774,7 +1676,6 @@ exports[`KebabToggle expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1783,7 +1684,6 @@ exports[`KebabToggle expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1797,7 +1697,6 @@ exports[`KebabToggle expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1806,7 +1705,6 @@ exports[`KebabToggle expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -1820,7 +1718,6 @@ exports[`KebabToggle expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1829,7 +1726,6 @@ exports[`KebabToggle expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -1844,7 +1740,6 @@ exports[`KebabToggle expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1853,7 +1748,6 @@ exports[`KebabToggle expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1867,7 +1761,6 @@ exports[`KebabToggle expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -1876,7 +1769,6 @@ exports[`KebabToggle expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -1902,7 +1794,6 @@ exports[`KebabToggle expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1911,7 +1802,6 @@ exports[`KebabToggle expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -1925,7 +1815,6 @@ exports[`KebabToggle expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1934,7 +1823,6 @@ exports[`KebabToggle expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -1948,7 +1836,6 @@ exports[`KebabToggle expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1957,7 +1844,6 @@ exports[`KebabToggle expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -1971,7 +1857,6 @@ exports[`KebabToggle expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -1980,7 +1865,6 @@ exports[`KebabToggle expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -1995,7 +1879,6 @@ exports[`KebabToggle expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -2004,7 +1887,6 @@ exports[`KebabToggle expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -2018,7 +1900,6 @@ exports[`KebabToggle expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -2027,7 +1908,6 @@ exports[`KebabToggle expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -2055,7 +1935,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2064,7 +1943,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2078,7 +1956,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2087,7 +1964,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2101,7 +1977,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2110,7 +1985,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -2124,7 +1998,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2133,7 +2006,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -2148,7 +2020,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2157,7 +2028,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2171,7 +2041,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2180,7 +2049,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2209,7 +2077,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2218,7 +2085,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2232,7 +2098,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2241,7 +2106,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2255,7 +2119,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2264,7 +2127,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -2278,7 +2140,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2287,7 +2148,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -2302,7 +2162,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2311,7 +2170,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2325,7 +2183,6 @@ exports[`KebabToggle expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -2334,7 +2191,6 @@ exports[`KebabToggle expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -2409,83 +2265,69 @@ exports[`KebabToggle expanded 1`] = `
                     role="menu"
                   >
                     <li
-                      id=""
                       role="none"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-dropdown__menu-item"
-                        id=""
                       >
                         Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <button
                         class="pf-c-dropdown__menu-item"
-                        id=""
                         type="button"
                       >
                         Action
                       </button>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <a
                         aria-disabled="true"
                         class="pf-m-disabled pf-c-dropdown__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Disabled Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <button
                         class="pf-m-disabled pf-c-dropdown__menu-item"
                         disabled=""
-                        id=""
                         type="button"
                       >
                         Disabled Action
                       </button>
                     </li>
                     <li
-                      id=""
                       role="separator"
                     >
                       <div
                         class="pf-c-dropdown__separator"
-                        id=""
                       />
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-dropdown__menu-item"
-                        id=""
                       >
                         Separated Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <button
                         class="pf-c-dropdown__menu-item"
-                        id=""
                         type="button"
                       >
                         Separated Action
@@ -2545,83 +2387,69 @@ exports[`KebabToggle expanded 1`] = `
                       role="menu"
                     >
                       <li
-                        id=""
                         role="none"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-dropdown__menu-item"
-                          id=""
                         >
                           Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <button
                           class="pf-c-dropdown__menu-item"
-                          id=""
                           type="button"
                         >
                           Action
                         </button>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <a
                           aria-disabled="true"
                           class="pf-m-disabled pf-c-dropdown__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Disabled Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <button
                           class="pf-m-disabled pf-c-dropdown__menu-item"
                           disabled=""
-                          id=""
                           type="button"
                         >
                           Disabled Action
                         </button>
                       </li>
                       <li
-                        id=""
                         role="separator"
                       >
                         <div
                           class="pf-c-dropdown__separator"
-                          id=""
                         />
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-dropdown__menu-item"
-                          id=""
                         >
                           Separated Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <button
                           class="pf-c-dropdown__menu-item"
-                          id=""
                           type="button"
                         >
                           Separated Action
@@ -2692,7 +2520,6 @@ exports[`KebabToggle expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="a"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2701,7 +2528,6 @@ exports[`KebabToggle expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={0}
                 isDisabled={false}
                 isHovered={false}
@@ -2713,7 +2539,6 @@ exports[`KebabToggle expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -2722,7 +2547,6 @@ exports[`KebabToggle expanded 1`] = `
                     aria-disabled={false}
                     className="pf-c-dropdown__menu-item"
                     href={null}
-                    id=""
                   >
                     Link
                   </a>
@@ -2731,7 +2555,6 @@ exports[`KebabToggle expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="button"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2740,7 +2563,6 @@ exports[`KebabToggle expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={1}
                 isDisabled={false}
                 isHovered={false}
@@ -2752,7 +2574,6 @@ exports[`KebabToggle expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -2761,7 +2582,6 @@ exports[`KebabToggle expanded 1`] = `
                     className="pf-c-dropdown__menu-item"
                     disabled={false}
                     href={null}
-                    id=""
                     type="button"
                   >
                     Action
@@ -2771,7 +2591,6 @@ exports[`KebabToggle expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="a"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2780,7 +2599,6 @@ exports[`KebabToggle expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={2}
                 isDisabled={true}
                 isHovered={false}
@@ -2792,7 +2610,6 @@ exports[`KebabToggle expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -2801,7 +2618,6 @@ exports[`KebabToggle expanded 1`] = `
                     aria-disabled={true}
                     className="pf-m-disabled pf-c-dropdown__menu-item"
                     href={null}
-                    id=""
                     tabIndex={-1}
                   >
                     Disabled Link
@@ -2811,7 +2627,6 @@ exports[`KebabToggle expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="button"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2820,7 +2635,6 @@ exports[`KebabToggle expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={3}
                 isDisabled={true}
                 isHovered={false}
@@ -2832,7 +2646,6 @@ exports[`KebabToggle expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -2841,7 +2654,6 @@ exports[`KebabToggle expanded 1`] = `
                     className="pf-m-disabled pf-c-dropdown__menu-item"
                     disabled={true}
                     href={null}
-                    id=""
                     type="button"
                   >
                     Disabled Action
@@ -2855,7 +2667,6 @@ exports[`KebabToggle expanded 1`] = `
                 <InternalDropdownItem
                   className="pf-c-dropdown__separator"
                   component="div"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -2864,7 +2675,6 @@ exports[`KebabToggle expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={4}
                   isDisabled={false}
                   isHovered={false}
@@ -2875,7 +2685,6 @@ exports[`KebabToggle expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="separator"
@@ -2883,7 +2692,6 @@ exports[`KebabToggle expanded 1`] = `
                     <div
                       className="pf-c-dropdown__separator"
                       href={null}
-                      id=""
                     />
                   </li>
                 </InternalDropdownItem>
@@ -2891,7 +2699,6 @@ exports[`KebabToggle expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="a"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2900,7 +2707,6 @@ exports[`KebabToggle expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={5}
                 isDisabled={false}
                 isHovered={false}
@@ -2912,7 +2718,6 @@ exports[`KebabToggle expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -2921,7 +2726,6 @@ exports[`KebabToggle expanded 1`] = `
                     aria-disabled={false}
                     className="pf-c-dropdown__menu-item"
                     href={null}
-                    id=""
                   >
                     Separated Link
                   </a>
@@ -2930,7 +2734,6 @@ exports[`KebabToggle expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="button"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -2939,7 +2742,6 @@ exports[`KebabToggle expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={6}
                 isDisabled={false}
                 isHovered={false}
@@ -2951,7 +2753,6 @@ exports[`KebabToggle expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -2960,7 +2761,6 @@ exports[`KebabToggle expanded 1`] = `
                     className="pf-c-dropdown__menu-item"
                     disabled={false}
                     href={null}
-                    id=""
                     type="button"
                   >
                     Separated Action
@@ -2983,7 +2783,6 @@ exports[`KebabToggle plain 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -2992,7 +2791,6 @@ exports[`KebabToggle plain 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3006,7 +2804,6 @@ exports[`KebabToggle plain 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3015,7 +2812,6 @@ exports[`KebabToggle plain 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3029,7 +2825,6 @@ exports[`KebabToggle plain 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3038,7 +2833,6 @@ exports[`KebabToggle plain 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -3052,7 +2846,6 @@ exports[`KebabToggle plain 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3061,7 +2854,6 @@ exports[`KebabToggle plain 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -3076,7 +2868,6 @@ exports[`KebabToggle plain 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3085,7 +2876,6 @@ exports[`KebabToggle plain 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3099,7 +2889,6 @@ exports[`KebabToggle plain 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3108,7 +2897,6 @@ exports[`KebabToggle plain 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3134,7 +2922,6 @@ exports[`KebabToggle plain 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3143,7 +2930,6 @@ exports[`KebabToggle plain 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -3157,7 +2943,6 @@ exports[`KebabToggle plain 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3166,7 +2951,6 @@ exports[`KebabToggle plain 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -3180,7 +2964,6 @@ exports[`KebabToggle plain 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3189,7 +2972,6 @@ exports[`KebabToggle plain 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -3203,7 +2985,6 @@ exports[`KebabToggle plain 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3212,7 +2993,6 @@ exports[`KebabToggle plain 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -3227,7 +3007,6 @@ exports[`KebabToggle plain 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3236,7 +3015,6 @@ exports[`KebabToggle plain 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -3250,7 +3028,6 @@ exports[`KebabToggle plain 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3259,7 +3036,6 @@ exports[`KebabToggle plain 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -3287,7 +3063,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3296,7 +3071,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3310,7 +3084,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3319,7 +3092,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3333,7 +3105,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3342,7 +3113,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -3356,7 +3126,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3365,7 +3134,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -3380,7 +3148,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3389,7 +3156,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3403,7 +3169,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3412,7 +3177,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3441,7 +3205,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3450,7 +3213,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3464,7 +3226,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3473,7 +3234,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3487,7 +3247,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3496,7 +3255,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -3510,7 +3268,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3519,7 +3276,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -3534,7 +3290,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3543,7 +3298,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3557,7 +3311,6 @@ exports[`KebabToggle plain 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -3566,7 +3319,6 @@ exports[`KebabToggle plain 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -3740,7 +3492,6 @@ exports[`KebabToggle regular 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3749,7 +3500,6 @@ exports[`KebabToggle regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3763,7 +3513,6 @@ exports[`KebabToggle regular 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3772,7 +3521,6 @@ exports[`KebabToggle regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3786,7 +3534,6 @@ exports[`KebabToggle regular 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3795,7 +3542,6 @@ exports[`KebabToggle regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -3809,7 +3555,6 @@ exports[`KebabToggle regular 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3818,7 +3563,6 @@ exports[`KebabToggle regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -3833,7 +3577,6 @@ exports[`KebabToggle regular 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3842,7 +3585,6 @@ exports[`KebabToggle regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3856,7 +3598,6 @@ exports[`KebabToggle regular 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -3865,7 +3606,6 @@ exports[`KebabToggle regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -3890,7 +3630,6 @@ exports[`KebabToggle regular 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3899,7 +3638,6 @@ exports[`KebabToggle regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -3913,7 +3651,6 @@ exports[`KebabToggle regular 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3922,7 +3659,6 @@ exports[`KebabToggle regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -3936,7 +3672,6 @@ exports[`KebabToggle regular 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3945,7 +3680,6 @@ exports[`KebabToggle regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -3959,7 +3693,6 @@ exports[`KebabToggle regular 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3968,7 +3701,6 @@ exports[`KebabToggle regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -3983,7 +3715,6 @@ exports[`KebabToggle regular 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -3992,7 +3723,6 @@ exports[`KebabToggle regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -4006,7 +3736,6 @@ exports[`KebabToggle regular 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4015,7 +3744,6 @@ exports[`KebabToggle regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -4042,7 +3770,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4051,7 +3778,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4065,7 +3791,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4074,7 +3799,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4088,7 +3812,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4097,7 +3820,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -4111,7 +3833,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4120,7 +3841,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -4135,7 +3855,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4144,7 +3863,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4158,7 +3876,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4167,7 +3884,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4195,7 +3911,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4204,7 +3919,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4218,7 +3932,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4227,7 +3940,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4241,7 +3953,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4250,7 +3961,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -4264,7 +3974,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4273,7 +3982,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -4288,7 +3996,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4297,7 +4004,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4311,7 +4017,6 @@ exports[`KebabToggle regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4320,7 +4025,6 @@ exports[`KebabToggle regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4494,7 +4198,6 @@ exports[`KebabToggle right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -4503,7 +4206,6 @@ exports[`KebabToggle right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -4517,7 +4219,6 @@ exports[`KebabToggle right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -4526,7 +4227,6 @@ exports[`KebabToggle right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -4540,7 +4240,6 @@ exports[`KebabToggle right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -4549,7 +4248,6 @@ exports[`KebabToggle right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -4563,7 +4261,6 @@ exports[`KebabToggle right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -4572,7 +4269,6 @@ exports[`KebabToggle right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -4587,7 +4283,6 @@ exports[`KebabToggle right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -4596,7 +4291,6 @@ exports[`KebabToggle right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -4610,7 +4304,6 @@ exports[`KebabToggle right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -4619,7 +4312,6 @@ exports[`KebabToggle right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -4645,7 +4337,6 @@ exports[`KebabToggle right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4654,7 +4345,6 @@ exports[`KebabToggle right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -4668,7 +4358,6 @@ exports[`KebabToggle right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4677,7 +4366,6 @@ exports[`KebabToggle right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -4691,7 +4379,6 @@ exports[`KebabToggle right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4700,7 +4387,6 @@ exports[`KebabToggle right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -4714,7 +4400,6 @@ exports[`KebabToggle right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4723,7 +4408,6 @@ exports[`KebabToggle right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -4738,7 +4422,6 @@ exports[`KebabToggle right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4747,7 +4430,6 @@ exports[`KebabToggle right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -4761,7 +4443,6 @@ exports[`KebabToggle right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -4770,7 +4451,6 @@ exports[`KebabToggle right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -4798,7 +4478,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4807,7 +4486,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4821,7 +4499,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4830,7 +4507,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4844,7 +4520,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4853,7 +4528,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -4867,7 +4541,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4876,7 +4549,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -4891,7 +4563,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4900,7 +4571,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4914,7 +4584,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4923,7 +4592,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4952,7 +4620,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4961,7 +4628,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4975,7 +4641,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -4984,7 +4649,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -4998,7 +4662,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5007,7 +4670,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -5021,7 +4683,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5030,7 +4691,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -5045,7 +4705,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5054,7 +4713,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5068,7 +4726,6 @@ exports[`KebabToggle right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5077,7 +4734,6 @@ exports[`KebabToggle right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5502,7 +5158,6 @@ exports[`dropdown dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -5511,7 +5166,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -5525,7 +5179,6 @@ exports[`dropdown dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -5534,7 +5187,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -5548,7 +5200,6 @@ exports[`dropdown dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -5557,7 +5208,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -5571,7 +5221,6 @@ exports[`dropdown dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -5580,7 +5229,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -5595,7 +5243,6 @@ exports[`dropdown dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -5604,7 +5251,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -5618,7 +5264,6 @@ exports[`dropdown dropup + right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -5627,7 +5272,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -5656,7 +5300,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -5665,7 +5308,6 @@ exports[`dropdown dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -5679,7 +5321,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -5688,7 +5329,6 @@ exports[`dropdown dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -5702,7 +5342,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -5711,7 +5350,6 @@ exports[`dropdown dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -5725,7 +5363,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -5734,7 +5371,6 @@ exports[`dropdown dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -5749,7 +5385,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -5758,7 +5393,6 @@ exports[`dropdown dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -5772,7 +5406,6 @@ exports[`dropdown dropup + right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -5781,7 +5414,6 @@ exports[`dropdown dropup + right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -5812,7 +5444,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5821,7 +5452,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5835,7 +5465,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5844,7 +5473,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5858,7 +5486,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5867,7 +5494,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -5881,7 +5507,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5890,7 +5515,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -5905,7 +5529,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5914,7 +5537,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5928,7 +5550,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5937,7 +5558,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5968,7 +5588,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -5977,7 +5596,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -5991,7 +5609,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6000,7 +5617,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6014,7 +5630,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6023,7 +5638,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -6037,7 +5651,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6046,7 +5659,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -6061,7 +5673,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6070,7 +5681,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6084,7 +5694,6 @@ exports[`dropdown dropup + right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6093,7 +5702,6 @@ exports[`dropdown dropup + right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6285,7 +5893,6 @@ exports[`dropdown dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -6294,7 +5901,6 @@ exports[`dropdown dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -6308,7 +5914,6 @@ exports[`dropdown dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -6317,7 +5922,6 @@ exports[`dropdown dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -6331,7 +5935,6 @@ exports[`dropdown dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -6340,7 +5943,6 @@ exports[`dropdown dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -6354,7 +5956,6 @@ exports[`dropdown dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -6363,7 +5964,6 @@ exports[`dropdown dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -6378,7 +5978,6 @@ exports[`dropdown dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -6387,7 +5986,6 @@ exports[`dropdown dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -6401,7 +5999,6 @@ exports[`dropdown dropup 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -6410,7 +6007,6 @@ exports[`dropdown dropup 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -6438,7 +6034,6 @@ exports[`dropdown dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -6447,7 +6042,6 @@ exports[`dropdown dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -6461,7 +6055,6 @@ exports[`dropdown dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -6470,7 +6063,6 @@ exports[`dropdown dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -6484,7 +6076,6 @@ exports[`dropdown dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -6493,7 +6084,6 @@ exports[`dropdown dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -6507,7 +6097,6 @@ exports[`dropdown dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -6516,7 +6105,6 @@ exports[`dropdown dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -6531,7 +6119,6 @@ exports[`dropdown dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -6540,7 +6127,6 @@ exports[`dropdown dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -6554,7 +6140,6 @@ exports[`dropdown dropup 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -6563,7 +6148,6 @@ exports[`dropdown dropup 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -6593,7 +6177,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6602,7 +6185,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6616,7 +6198,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6625,7 +6206,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6639,7 +6219,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6648,7 +6227,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -6662,7 +6240,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6671,7 +6248,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -6686,7 +6262,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6695,7 +6270,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6709,7 +6283,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6718,7 +6291,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6748,7 +6320,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6757,7 +6328,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6771,7 +6341,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6780,7 +6349,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6794,7 +6362,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6803,7 +6370,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -6817,7 +6383,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6826,7 +6391,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -6841,7 +6405,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6850,7 +6413,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -6864,7 +6426,6 @@ exports[`dropdown dropup 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -6873,7 +6434,6 @@ exports[`dropdown dropup 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7064,7 +6624,6 @@ exports[`dropdown expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -7073,7 +6632,6 @@ exports[`dropdown expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -7087,7 +6645,6 @@ exports[`dropdown expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -7096,7 +6653,6 @@ exports[`dropdown expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -7110,7 +6666,6 @@ exports[`dropdown expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -7119,7 +6674,6 @@ exports[`dropdown expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -7133,7 +6687,6 @@ exports[`dropdown expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -7142,7 +6695,6 @@ exports[`dropdown expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -7157,7 +6709,6 @@ exports[`dropdown expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -7166,7 +6717,6 @@ exports[`dropdown expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -7180,7 +6730,6 @@ exports[`dropdown expanded 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -7189,7 +6738,6 @@ exports[`dropdown expanded 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -7217,7 +6765,6 @@ exports[`dropdown expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -7226,7 +6773,6 @@ exports[`dropdown expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -7240,7 +6786,6 @@ exports[`dropdown expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -7249,7 +6794,6 @@ exports[`dropdown expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -7263,7 +6807,6 @@ exports[`dropdown expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -7272,7 +6815,6 @@ exports[`dropdown expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -7286,7 +6828,6 @@ exports[`dropdown expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -7295,7 +6836,6 @@ exports[`dropdown expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -7310,7 +6850,6 @@ exports[`dropdown expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -7319,7 +6858,6 @@ exports[`dropdown expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -7333,7 +6871,6 @@ exports[`dropdown expanded 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -7342,7 +6879,6 @@ exports[`dropdown expanded 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -7372,7 +6908,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7381,7 +6916,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7395,7 +6929,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7404,7 +6937,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7418,7 +6950,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7427,7 +6958,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -7441,7 +6971,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7450,7 +6979,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -7465,7 +6993,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7474,7 +7001,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7488,7 +7014,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7497,7 +7022,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7528,7 +7052,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7537,7 +7060,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7551,7 +7073,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7560,7 +7081,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7574,7 +7094,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7583,7 +7102,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -7597,7 +7115,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7606,7 +7123,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -7621,7 +7137,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7630,7 +7145,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7644,7 +7158,6 @@ exports[`dropdown expanded 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -7653,7 +7166,6 @@ exports[`dropdown expanded 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -7735,83 +7247,69 @@ exports[`dropdown expanded 1`] = `
                     role="menu"
                   >
                     <li
-                      id=""
                       role="none"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-dropdown__menu-item"
-                        id=""
                       >
                         Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <button
                         class="pf-c-dropdown__menu-item"
-                        id=""
                         type="button"
                       >
                         Action
                       </button>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <a
                         aria-disabled="true"
                         class="pf-m-disabled pf-c-dropdown__menu-item"
-                        id=""
                         tabindex="-1"
                       >
                         Disabled Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <button
                         class="pf-m-disabled pf-c-dropdown__menu-item"
                         disabled=""
-                        id=""
                         type="button"
                       >
                         Disabled Action
                       </button>
                     </li>
                     <li
-                      id=""
                       role="separator"
                     >
                       <div
                         class="pf-c-dropdown__separator"
-                        id=""
                       />
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <a
                         aria-disabled="false"
                         class="pf-c-dropdown__menu-item"
-                        id=""
                       >
                         Separated Link
                       </a>
                     </li>
                     <li
-                      id=""
                       role="none"
                     >
                       <button
                         class="pf-c-dropdown__menu-item"
-                        id=""
                         type="button"
                       >
                         Separated Action
@@ -7875,83 +7373,69 @@ exports[`dropdown expanded 1`] = `
                       role="menu"
                     >
                       <li
-                        id=""
                         role="none"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-dropdown__menu-item"
-                          id=""
                         >
                           Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <button
                           class="pf-c-dropdown__menu-item"
-                          id=""
                           type="button"
                         >
                           Action
                         </button>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <a
                           aria-disabled="true"
                           class="pf-m-disabled pf-c-dropdown__menu-item"
-                          id=""
                           tabindex="-1"
                         >
                           Disabled Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <button
                           class="pf-m-disabled pf-c-dropdown__menu-item"
                           disabled=""
-                          id=""
                           type="button"
                         >
                           Disabled Action
                         </button>
                       </li>
                       <li
-                        id=""
                         role="separator"
                       >
                         <div
                           class="pf-c-dropdown__separator"
-                          id=""
                         />
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <a
                           aria-disabled="false"
                           class="pf-c-dropdown__menu-item"
-                          id=""
                         >
                           Separated Link
                         </a>
                       </li>
                       <li
-                        id=""
                         role="none"
                       >
                         <button
                           class="pf-c-dropdown__menu-item"
-                          id=""
                           type="button"
                         >
                           Separated Action
@@ -8028,7 +7512,6 @@ exports[`dropdown expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="a"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -8037,7 +7520,6 @@ exports[`dropdown expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={0}
                 isDisabled={false}
                 isHovered={false}
@@ -8049,7 +7531,6 @@ exports[`dropdown expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -8058,7 +7539,6 @@ exports[`dropdown expanded 1`] = `
                     aria-disabled={false}
                     className="pf-c-dropdown__menu-item"
                     href={null}
-                    id=""
                   >
                     Link
                   </a>
@@ -8067,7 +7547,6 @@ exports[`dropdown expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="button"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -8076,7 +7555,6 @@ exports[`dropdown expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={1}
                 isDisabled={false}
                 isHovered={false}
@@ -8088,7 +7566,6 @@ exports[`dropdown expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -8097,7 +7574,6 @@ exports[`dropdown expanded 1`] = `
                     className="pf-c-dropdown__menu-item"
                     disabled={false}
                     href={null}
-                    id=""
                     type="button"
                   >
                     Action
@@ -8107,7 +7583,6 @@ exports[`dropdown expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="a"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -8116,7 +7591,6 @@ exports[`dropdown expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={2}
                 isDisabled={true}
                 isHovered={false}
@@ -8128,7 +7602,6 @@ exports[`dropdown expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -8137,7 +7610,6 @@ exports[`dropdown expanded 1`] = `
                     aria-disabled={true}
                     className="pf-m-disabled pf-c-dropdown__menu-item"
                     href={null}
-                    id=""
                     tabIndex={-1}
                   >
                     Disabled Link
@@ -8147,7 +7619,6 @@ exports[`dropdown expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="button"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -8156,7 +7627,6 @@ exports[`dropdown expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={3}
                 isDisabled={true}
                 isHovered={false}
@@ -8168,7 +7638,6 @@ exports[`dropdown expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -8177,7 +7646,6 @@ exports[`dropdown expanded 1`] = `
                     className="pf-m-disabled pf-c-dropdown__menu-item"
                     disabled={true}
                     href={null}
-                    id=""
                     type="button"
                   >
                     Disabled Action
@@ -8191,7 +7659,6 @@ exports[`dropdown expanded 1`] = `
                 <InternalDropdownItem
                   className="pf-c-dropdown__separator"
                   component="div"
-                  componentID=""
                   context={
                     Object {
                       "keyHandler": [Function],
@@ -8200,7 +7667,6 @@ exports[`dropdown expanded 1`] = `
                   }
                   enterTriggersArrowDown={false}
                   href=""
-                  id=""
                   index={4}
                   isDisabled={false}
                   isHovered={false}
@@ -8211,7 +7677,6 @@ exports[`dropdown expanded 1`] = `
                 >
                   <li
                     className={null}
-                    id=""
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="separator"
@@ -8219,7 +7684,6 @@ exports[`dropdown expanded 1`] = `
                     <div
                       className="pf-c-dropdown__separator"
                       href={null}
-                      id=""
                     />
                   </li>
                 </InternalDropdownItem>
@@ -8227,7 +7691,6 @@ exports[`dropdown expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="a"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -8236,7 +7699,6 @@ exports[`dropdown expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={5}
                 isDisabled={false}
                 isHovered={false}
@@ -8248,7 +7710,6 @@ exports[`dropdown expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -8257,7 +7718,6 @@ exports[`dropdown expanded 1`] = `
                     aria-disabled={false}
                     className="pf-c-dropdown__menu-item"
                     href={null}
-                    id=""
                   >
                     Separated Link
                   </a>
@@ -8266,7 +7726,6 @@ exports[`dropdown expanded 1`] = `
               <InternalDropdownItem
                 className=""
                 component="button"
-                componentID=""
                 context={
                   Object {
                     "keyHandler": [Function],
@@ -8275,7 +7734,6 @@ exports[`dropdown expanded 1`] = `
                 }
                 enterTriggersArrowDown={false}
                 href=""
-                id=""
                 index={6}
                 isDisabled={false}
                 isHovered={false}
@@ -8287,7 +7745,6 @@ exports[`dropdown expanded 1`] = `
               >
                 <li
                   className={null}
-                  id=""
                   onClick={[Function]}
                   onKeyDown={[Function]}
                   role="none"
@@ -8296,7 +7753,6 @@ exports[`dropdown expanded 1`] = `
                     className="pf-c-dropdown__menu-item"
                     disabled={false}
                     href={null}
-                    id=""
                     type="button"
                   >
                     Separated Action
@@ -8319,7 +7775,6 @@ exports[`dropdown primary 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -8328,7 +7783,6 @@ exports[`dropdown primary 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -8342,7 +7796,6 @@ exports[`dropdown primary 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -8351,7 +7804,6 @@ exports[`dropdown primary 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -8365,7 +7817,6 @@ exports[`dropdown primary 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -8374,7 +7825,6 @@ exports[`dropdown primary 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -8388,7 +7838,6 @@ exports[`dropdown primary 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -8397,7 +7846,6 @@ exports[`dropdown primary 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -8412,7 +7860,6 @@ exports[`dropdown primary 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -8421,7 +7868,6 @@ exports[`dropdown primary 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -8435,7 +7881,6 @@ exports[`dropdown primary 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -8444,7 +7889,6 @@ exports[`dropdown primary 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -8472,7 +7916,6 @@ exports[`dropdown primary 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -8481,7 +7924,6 @@ exports[`dropdown primary 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -8495,7 +7937,6 @@ exports[`dropdown primary 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -8504,7 +7945,6 @@ exports[`dropdown primary 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -8518,7 +7958,6 @@ exports[`dropdown primary 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -8527,7 +7966,6 @@ exports[`dropdown primary 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -8541,7 +7979,6 @@ exports[`dropdown primary 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -8550,7 +7987,6 @@ exports[`dropdown primary 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -8565,7 +8001,6 @@ exports[`dropdown primary 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -8574,7 +8009,6 @@ exports[`dropdown primary 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -8588,7 +8022,6 @@ exports[`dropdown primary 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -8597,7 +8030,6 @@ exports[`dropdown primary 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -8627,7 +8059,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8636,7 +8067,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8650,7 +8080,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8659,7 +8088,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8673,7 +8101,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8682,7 +8109,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -8696,7 +8122,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8705,7 +8130,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -8720,7 +8144,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8729,7 +8152,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8743,7 +8165,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8752,7 +8173,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8783,7 +8203,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8792,7 +8211,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8806,7 +8224,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8815,7 +8232,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8829,7 +8245,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8838,7 +8253,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -8852,7 +8266,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8861,7 +8274,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -8876,7 +8288,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8885,7 +8296,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -8899,7 +8309,6 @@ exports[`dropdown primary 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -8908,7 +8317,6 @@ exports[`dropdown primary 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9101,7 +8509,6 @@ exports[`dropdown regular 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9110,7 +8517,6 @@ exports[`dropdown regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9124,7 +8530,6 @@ exports[`dropdown regular 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9133,7 +8538,6 @@ exports[`dropdown regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9147,7 +8551,6 @@ exports[`dropdown regular 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9156,7 +8559,6 @@ exports[`dropdown regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -9170,7 +8572,6 @@ exports[`dropdown regular 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9179,7 +8580,6 @@ exports[`dropdown regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -9194,7 +8594,6 @@ exports[`dropdown regular 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9203,7 +8602,6 @@ exports[`dropdown regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9217,7 +8615,6 @@ exports[`dropdown regular 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9226,7 +8623,6 @@ exports[`dropdown regular 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9253,7 +8649,6 @@ exports[`dropdown regular 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -9262,7 +8657,6 @@ exports[`dropdown regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -9276,7 +8670,6 @@ exports[`dropdown regular 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -9285,7 +8678,6 @@ exports[`dropdown regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -9299,7 +8691,6 @@ exports[`dropdown regular 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -9308,7 +8699,6 @@ exports[`dropdown regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -9322,7 +8712,6 @@ exports[`dropdown regular 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -9331,7 +8720,6 @@ exports[`dropdown regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -9346,7 +8734,6 @@ exports[`dropdown regular 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -9355,7 +8742,6 @@ exports[`dropdown regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -9369,7 +8755,6 @@ exports[`dropdown regular 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -9378,7 +8763,6 @@ exports[`dropdown regular 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -9407,7 +8791,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9416,7 +8799,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9430,7 +8812,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9439,7 +8820,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9453,7 +8833,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9462,7 +8841,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -9476,7 +8854,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9485,7 +8862,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -9500,7 +8876,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9509,7 +8884,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9523,7 +8897,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9532,7 +8905,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9562,7 +8934,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9571,7 +8942,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9585,7 +8955,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9594,7 +8963,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9608,7 +8976,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9617,7 +8984,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -9631,7 +8997,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9640,7 +9005,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -9655,7 +9019,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9664,7 +9027,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9678,7 +9040,6 @@ exports[`dropdown regular 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -9687,7 +9048,6 @@ exports[`dropdown regular 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -9878,7 +9238,6 @@ exports[`dropdown right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9887,7 +9246,6 @@ exports[`dropdown right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9901,7 +9259,6 @@ exports[`dropdown right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9910,7 +9267,6 @@ exports[`dropdown right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9924,7 +9280,6 @@ exports[`dropdown right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9933,7 +9288,6 @@ exports[`dropdown right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -9947,7 +9301,6 @@ exports[`dropdown right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9956,7 +9309,6 @@ exports[`dropdown right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={true}
         isHovered={false}
@@ -9971,7 +9323,6 @@ exports[`dropdown right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="a"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -9980,7 +9331,6 @@ exports[`dropdown right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -9994,7 +9344,6 @@ exports[`dropdown right aligned 1`] = `
       <InternalDropdownItem
         className=""
         component="button"
-        componentID=""
         context={
           Object {
             "keyHandler": [Function],
@@ -10003,7 +9352,6 @@ exports[`dropdown right aligned 1`] = `
         }
         enterTriggersArrowDown={false}
         href=""
-        id=""
         index={-1}
         isDisabled={false}
         isHovered={false}
@@ -10031,7 +9379,6 @@ exports[`dropdown right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -10040,7 +9387,6 @@ exports[`dropdown right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -10054,7 +9400,6 @@ exports[`dropdown right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -10063,7 +9408,6 @@ exports[`dropdown right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -10077,7 +9421,6 @@ exports[`dropdown right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -10086,7 +9429,6 @@ exports[`dropdown right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -10100,7 +9442,6 @@ exports[`dropdown right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -10109,7 +9450,6 @@ exports[`dropdown right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={true}
           isHovered={false}
@@ -10124,7 +9464,6 @@ exports[`dropdown right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="a"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -10133,7 +9472,6 @@ exports[`dropdown right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -10147,7 +9485,6 @@ exports[`dropdown right aligned 1`] = `
         <InternalDropdownItem
           className=""
           component="button"
-          componentID=""
           context={
             Object {
               "keyHandler": [Function],
@@ -10156,7 +9493,6 @@ exports[`dropdown right aligned 1`] = `
           }
           enterTriggersArrowDown={false}
           href=""
-          id=""
           index={-1}
           isDisabled={false}
           isHovered={false}
@@ -10186,7 +9522,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10195,7 +9530,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10209,7 +9543,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10218,7 +9551,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10232,7 +9564,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10241,7 +9572,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -10255,7 +9585,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10264,7 +9593,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -10279,7 +9607,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10288,7 +9615,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10302,7 +9628,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10311,7 +9636,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10342,7 +9666,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10351,7 +9674,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10365,7 +9687,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10374,7 +9695,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10388,7 +9708,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10397,7 +9716,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -10411,7 +9729,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10420,7 +9737,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={true}
               isHovered={false}
@@ -10435,7 +9751,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="a"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10444,7 +9759,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
@@ -10458,7 +9772,6 @@ exports[`dropdown right aligned 1`] = `
             <InternalDropdownItem
               className=""
               component="button"
-              componentID=""
               context={
                 Object {
                   "keyHandler": [Function],
@@ -10467,7 +9780,6 @@ exports[`dropdown right aligned 1`] = `
               }
               enterTriggersArrowDown={false}
               href=""
-              id=""
               index={-1}
               isDisabled={false}
               isHovered={false}
diff --git a/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap b/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
index 22feb6817c8..cf72a5d7de9 100644
--- a/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/OptionsMenu/__snapshots__/OptionsMenu.test.js.snap
@@ -261,7 +261,6 @@ exports[`optionsMenu expanded 1`] = `
                         >
                           <button
                             class="pf-c-options-menu__menu-item"
-                            id=""
                             tabindex="-1"
                             type="button"
                           >
@@ -274,7 +273,6 @@ exports[`optionsMenu expanded 1`] = `
                         >
                           <button
                             class="pf-c-options-menu__menu-item"
-                            id=""
                             tabindex="-1"
                             type="button"
                           >
@@ -289,7 +287,6 @@ exports[`optionsMenu expanded 1`] = `
                             aria-disabled="true"
                             class="pf-m-disabled pf-c-options-menu__menu-item"
                             disabled=""
-                            id=""
                             tabindex="-1"
                             type="button"
                           >
@@ -302,7 +299,6 @@ exports[`optionsMenu expanded 1`] = `
                         >
                           <button
                             class="pf-c-options-menu__menu-item"
-                            id=""
                             tabindex="-1"
                             type="button"
                           >
@@ -335,7 +331,6 @@ exports[`optionsMenu expanded 1`] = `
                         >
                           <button
                             class="pf-c-options-menu__menu-item"
-                            id=""
                             tabindex="-1"
                             type="button"
                           >
@@ -348,7 +343,6 @@ exports[`optionsMenu expanded 1`] = `
                         >
                           <button
                             class="pf-c-options-menu__menu-item"
-                            id=""
                             tabindex="-1"
                             type="button"
                           >
@@ -435,7 +429,6 @@ exports[`optionsMenu expanded 1`] = `
                           >
                             <button
                               class="pf-c-options-menu__menu-item"
-                              id=""
                               tabindex="-1"
                               type="button"
                             >
@@ -448,7 +441,6 @@ exports[`optionsMenu expanded 1`] = `
                           >
                             <button
                               class="pf-c-options-menu__menu-item"
-                              id=""
                               tabindex="-1"
                               type="button"
                             >
@@ -463,7 +455,6 @@ exports[`optionsMenu expanded 1`] = `
                               aria-disabled="true"
                               class="pf-m-disabled pf-c-options-menu__menu-item"
                               disabled=""
-                              id=""
                               tabindex="-1"
                               type="button"
                             >
@@ -476,7 +467,6 @@ exports[`optionsMenu expanded 1`] = `
                           >
                             <button
                               class="pf-c-options-menu__menu-item"
-                              id=""
                               tabindex="-1"
                               type="button"
                             >
@@ -509,7 +499,6 @@ exports[`optionsMenu expanded 1`] = `
                           >
                             <button
                               class="pf-c-options-menu__menu-item"
-                              id=""
                               tabindex="-1"
                               type="button"
                             >
@@ -522,7 +511,6 @@ exports[`optionsMenu expanded 1`] = `
                           >
                             <button
                               class="pf-c-options-menu__menu-item"
-                              id=""
                               tabindex="-1"
                               type="button"
                             >
@@ -613,7 +601,6 @@ exports[`optionsMenu expanded 1`] = `
                             >
                               <button
                                 class="pf-c-options-menu__menu-item"
-                                id=""
                                 tabindex="-1"
                                 type="button"
                               >
@@ -626,7 +613,6 @@ exports[`optionsMenu expanded 1`] = `
                             >
                               <button
                                 class="pf-c-options-menu__menu-item"
-                                id=""
                                 tabindex="-1"
                                 type="button"
                               >
@@ -641,7 +627,6 @@ exports[`optionsMenu expanded 1`] = `
                                 aria-disabled="true"
                                 class="pf-m-disabled pf-c-options-menu__menu-item"
                                 disabled=""
-                                id=""
                                 tabindex="-1"
                                 type="button"
                               >
@@ -654,7 +639,6 @@ exports[`optionsMenu expanded 1`] = `
                             >
                               <button
                                 class="pf-c-options-menu__menu-item"
-                                id=""
                                 tabindex="-1"
                                 type="button"
                               >
@@ -687,7 +671,6 @@ exports[`optionsMenu expanded 1`] = `
                             >
                               <button
                                 class="pf-c-options-menu__menu-item"
-                                id=""
                                 tabindex="-1"
                                 type="button"
                               >
@@ -700,7 +683,6 @@ exports[`optionsMenu expanded 1`] = `
                             >
                               <button
                                 class="pf-c-options-menu__menu-item"
-                                id=""
                                 tabindex="-1"
                                 type="button"
                               >
@@ -810,7 +792,6 @@ exports[`optionsMenu expanded 1`] = `
                         <InternalDropdownItem
                           className=""
                           component="button"
-                          componentID=""
                           context={
                             Object {
                               "keyHandler": [Function],
@@ -841,7 +822,6 @@ exports[`optionsMenu expanded 1`] = `
                               className="pf-c-options-menu__menu-item"
                               disabled={false}
                               href={null}
-                              id=""
                               tabIndex={-1}
                               type="button"
                             >
@@ -862,7 +842,6 @@ exports[`optionsMenu expanded 1`] = `
                         <InternalDropdownItem
                           className=""
                           component="button"
-                          componentID=""
                           context={
                             Object {
                               "keyHandler": [Function],
@@ -893,7 +872,6 @@ exports[`optionsMenu expanded 1`] = `
                               className="pf-c-options-menu__menu-item"
                               disabled={false}
                               href={null}
-                              id=""
                               tabIndex={-1}
                               type="button"
                             >
@@ -918,7 +896,6 @@ exports[`optionsMenu expanded 1`] = `
                           aria-disabled={true}
                           className=""
                           component="button"
-                          componentID=""
                           context={
                             Object {
                               "keyHandler": [Function],
@@ -950,7 +927,6 @@ exports[`optionsMenu expanded 1`] = `
                               className="pf-m-disabled pf-c-options-menu__menu-item"
                               disabled={true}
                               href={null}
-                              id=""
                               tabIndex={-1}
                               type="button"
                             >
@@ -971,7 +947,6 @@ exports[`optionsMenu expanded 1`] = `
                         <InternalDropdownItem
                           className=""
                           component="button"
-                          componentID=""
                           context={
                             Object {
                               "keyHandler": [Function],
@@ -1002,7 +977,6 @@ exports[`optionsMenu expanded 1`] = `
                               className="pf-c-options-menu__menu-item"
                               disabled={false}
                               href={null}
-                              id=""
                               tabIndex={-1}
                               type="button"
                             >
@@ -1055,7 +1029,6 @@ exports[`optionsMenu expanded 1`] = `
                         <InternalDropdownItem
                           className=""
                           component="button"
-                          componentID=""
                           context={
                             Object {
                               "keyHandler": [Function],
@@ -1086,7 +1059,6 @@ exports[`optionsMenu expanded 1`] = `
                               className="pf-c-options-menu__menu-item"
                               disabled={false}
                               href={null}
-                              id=""
                               tabIndex={-1}
                               type="button"
                             >
@@ -1107,7 +1079,6 @@ exports[`optionsMenu expanded 1`] = `
                         <InternalDropdownItem
                           className=""
                           component="button"
-                          componentID=""
                           context={
                             Object {
                               "keyHandler": [Function],
@@ -1138,7 +1109,6 @@ exports[`optionsMenu expanded 1`] = `
                               className="pf-c-options-menu__menu-item"
                               disabled={false}
                               href={null}
-                              id=""
                               tabIndex={-1}
                               type="button"
                             >