@patternfly/react-core 6.1.0-prerelease.1 → 6.1.0-prerelease.10

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.9","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.9","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0-prerelease.1",
+  "version": "6.1.0-prerelease.10",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.1.0-prerelease.0",
-    "@patternfly/react-styles": "^6.1.0-prerelease.0",
-    "@patternfly/react-tokens": "^6.1.0-prerelease.0",
-    "focus-trap": "7.6.0",
-    "react-dropzone": "^14.2.3",
-    "tslib": "^2.7.0"
+    "@patternfly/react-icons": "^6.1.0-prerelease.4",
+    "@patternfly/react-styles": "^6.1.0-prerelease.3",
+    "@patternfly/react-tokens": "^6.1.0-prerelease.3",
+    "focus-trap": "7.6.2",
+    "react-dropzone": "^14.3.5",
+    "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.5",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "07cc495ab53d6d3a0c10ccdd36d20b92ce800cb7"
+  "gitHead": "f42db0887bdc1df06fe1677314bb51a4c35f8c7b"
 }

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -84,9 +84,8 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardExpandable.tsx

@@ -71,9 +71,8 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -67,9 +67,8 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -58,9 +58,8 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -56,9 +56,8 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -64,9 +64,8 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Checkbox/examples/CheckboxReversed.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CheckboxReversed: React.FunctionComponent = () => (
-  <Checkbox isLabelBeforeButton label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
+  <Checkbox labelPosition="start" label="Reversed checkbox example" id="checkbox-reversed" name="checkbox-reversed" />
 );

package/src/components/DataList/examples/DataList.md

@@ -23,7 +23,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
+import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples
 
@@ -83,11 +83,23 @@ import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecate
 
 ### Draggable
 
-Note: There is a new recommended drag and drop implementation with full keyboard functionality, which replaces this implementation. To adhere to our new recommendations, refer to the [drag and drop demos](/components/drag-and-drop/react-demos).
+To enable drag and drop, wrap the `<DataList>` component with `<DragDropSort>`, define the `variant` property as "DataList", and pass both the sortable items and `onDrop` callback to `<DragDropSort>`. `<DragDropSort>` will create the component's usual children internally based on the items property, so children should not be passed to the wrapped component.
 
-Previously, draggable data lists had their own API for the [drag and drop component](/components/drag-and-drop), which wasn't flexible enough to allow custom styling for items as they are dragged. To address this disparity, `<DragDrop>`, `<Draggable>`, and `<Droppable>` components were added to replace our now deprecated HTML5-based API. Keyboard and screen reader accessibility for the `<DragDrop>` component is still in development.
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
 
-```ts isDeprecated file="./DataListDraggable.tsx"
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DataListDraggable.tsx"
+
+```
+
+### Draggable with multiple drop zones
+
+To enable multiple drop zones, and create the desired amount of `<Droppable>` components within a `<DragDropContainer>`.
+
+Each `<Droppable>` should define the `wrapper` property as the component that acts as the drop zone, `<DataList>`, and the `items` property of their respective draggable items as an array of `<DraggableObject>` data. `<DragDropContainer>` should be passed the `onDrop`, `onContainerMove`, and `onCancel` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `<DragDropContainer>` should also be given a `Record` representing all sortable drop zones' items. Both components should define the `variant` property as "DataList".
+
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
+
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DragDropContainerDataList.tsx"
 
 ```
 

package/src/components/DataList/examples/DataListActions.tsx

@@ -86,9 +86,8 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen}
                 onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -84,9 +84,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen1}
               onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -139,9 +138,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen2}
               onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -203,9 +201,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen3}
               onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -76,9 +76,8 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -126,9 +125,8 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -92,9 +92,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -163,9 +162,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -234,9 +232,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -94,9 +94,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -167,9 +166,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -228,9 +226,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -103,9 +103,8 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                   isOpen={isOpen1}
                   onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -177,9 +176,8 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                   isOpen={isOpen2}
                   onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}

package/src/components/Dropdown/Dropdown.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
 import { Popper } from '../../helpers/Popper/Popper';
-import { useOUIAProps, OUIAProps } from '../../helpers';
+import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers';
 
 export interface DropdownPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
@@ -51,6 +51,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
@@ -85,6 +87,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   toggle,
   shouldFocusToggleOnSelect = false,
   onOpenChange,
+  onToggleKeydown,
   isPlain,
   isScrollable,
   innerRef,
@@ -139,6 +142,14 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen) {
+          onToggleArrowKeydownDefault(event, menuRef);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -163,6 +174,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -27,9 +27,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
       shouldFocusToggleOnSelect
     >

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -22,7 +22,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
+import { DragDropSort, DragDropContainer, Droppable as NewDroppable } from '@patternfly/react-drag-drop';
 
 ## Examples
 
@@ -78,22 +78,24 @@ The dual list selector is built in a composable manner to make customization eas
 
 ```
 
-### Drag and drop
+### Draggable
 
-This example only allows reordering the contents of the "chosen" pane with drag and drop. To make a pane able to be reordered:
+To enable drag and drop, wrap the `<DualListSelectorList>` component with `<DragDropSort>`, define the `variant` property as "DualListSelectorList", and pass both the sortable items and `onDrop` callback to `<DragDropSort>`. `<DragDropSort>` will create the component's usual children internally based on the items property, so children inside the `<DualListSelectorList>` should not be passed to the wrapped component.
 
-- wrap the `DualListSelectorPane` in a `DragDrop` component
-- wrap the `DualListSelectorList` in a `Droppable` component
-- wrap the `DualListSelectorListItem` components in a `Draggable` component
-- define an `onDrop` callback which reorders the sortable options.
-  - The `onDrop` function provides the starting location and destination location for a dragged item. It should return
-    true to enable the 'drop' animation in the new location and false to enable the 'drop' animation back to the item's
-    old position.
-  - define an `onDrag` callback which ensures that the drag event will not cross hairs with the `onOptionSelect` click
-    event set on the option. Note: the `ignoreNextOptionSelect` state value is used to prevent selection while dragging.
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
 
-Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx"
 
-```ts file="DualListSelectorDragDrop.tsx"
+```
+
+### Draggable with multiple drop zones
+
+To enable multiple drop zones, wrap the `<DualListSelector>` component with `<DragDropContainer>`, and create the desired amount of `<Droppable>` components within `<DragDropContainer>`. `<Droppable>` components should be located where `<DualListSelectorList>` usually would go for each pane to be made draggable.
+
+Each `<Droppable>` should define the `wrapper` property as the component that acts as the drop zone, `<DualListSelectorList>`, and the `items` property of their respective draggable items as an array of `<DraggableObject>` data. `<DragDropContainer>` should be passed the `onDrop`, `onContainerMove`, and `onCancel` callbacks to handle items being dropped, items moving between droppable containers, and what happens if the drag is cancelled respectively. `<DragDropContainer>` should also be given a `Record` representing all sortable drop zones' items. Both components should define the `variant` property as "DualListSelectorList".
+
+Full drag and drop details can be found on the [drag and drop](/components/drag-and-drop) component page.
+
+```ts file="../../../../../react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx"
 
 ```

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -166,9 +166,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={<EllipsisVIcon aria-hidden="true" />}
+              />
             )}
             isOpen={isAvailableKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
@@ -202,9 +201,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={<EllipsisVIcon aria-hidden="true" />}
+              />
             )}
             isOpen={isChosenKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -87,7 +87,7 @@ exports[`simple fileupload 1`] = `
       </span>
     </div>
     <input
-      style="display: none;"
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"
     />

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -37,9 +37,8 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
     >
       <DropdownList>

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -36,9 +36,8 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
     >
       <DropdownList>

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -200,8 +200,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const iconToggle = (
-    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen}>
-      {icon || 'Select'}
+    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen} icon={icon}>
+      {icon ? '' : 'Select'}
     </MenuToggle>
   );
 

package/src/components/Menu/MenuContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popper } from '../../helpers/Popper/Popper';
+import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
 
 export interface MenuPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
@@ -17,6 +17,7 @@ export interface MenuPopperProps {
   /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
   preventOverflow?: boolean;
 }
+
 export interface MenuContainerProps {
   /** Menu to be rendered */
   menu: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -33,6 +34,8 @@ export interface MenuContainerProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
+  /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
+  onToggleKeydown?: (event: KeyboardEvent) => void;
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
@@ -55,10 +58,11 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
   toggle,
   toggleRef,
   onOpenChange,
+  onToggleKeydown,
   zIndex = 9999,
   popperProps,
   onOpenChangeKeys = ['Escape', 'Tab'],
-  shouldFocusFirstItemOnOpen = true,
+  shouldFocusFirstItemOnOpen = false,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0
 }: MenuContainerProps) => {
@@ -90,6 +94,14 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen) {
+          onToggleArrowKeydownDefault(event, menuRef);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -108,7 +120,16 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [focusTimeoutDelay, isOpen, menuRef, onOpenChange, onOpenChangeKeys, shouldPreventScrollOnItemFocus, toggleRef]);
+  }, [
+    focusTimeoutDelay,
+    isOpen,
+    menuRef,
+    onOpenChange,
+    onOpenChangeKeys,
+    onToggleKeydown,
+    shouldPreventScrollOnItemFocus,
+    toggleRef
+  ]);
 
   return (
     <Popper

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -20,7 +20,7 @@ export interface MenuToggleCheckboxProps
   /** Flag to set the default checked value of the checkbox when it is uncontrolled by React state.
    * To make the checkbox controlled instead use the isChecked prop, but do not use both.
    */
-  defaultChecked?: boolean | null;
+  defaultChecked?: boolean;
   /** A callback for when the checkbox selection changes */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   /** Element to be rendered inside the <span> */