@patternfly/react-core 6.1.0-prerelease.8 → 6.1.0

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.7","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.16","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.7","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.16","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.7","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.16","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0-prerelease.8",
+  "version": "6.1.0",
   "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.4",
-    "@patternfly/react-styles": "^6.1.0-prerelease.3",
-    "@patternfly/react-tokens": "^6.1.0-prerelease.3",
+    "@patternfly/react-icons": "^6.1.0",
+    "@patternfly/react-styles": "^6.1.0",
+    "@patternfly/react-tokens": "^6.1.0",
     "focus-trap": "7.6.2",
-    "react-dropzone": "^14.2.3",
+    "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.1.0-prerelease.5",
+    "@patternfly/patternfly": "6.1.0-prerelease.11",
     "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": "0f9245023fb9bdf860c9eee91b6fe160b6c261c5"
+  "gitHead": "fc70165f6d07de6a24f6943c826c1432ea6d44cf"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -319,18 +319,15 @@ export const CalendarMonth = ({
                   onSelectToggle(isOpen);
                 }}
                 onSelect={(ev, monthNum) => {
-                  // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                  // to see the SelectOption as a child so it doesn't close the Popover.
-                  setTimeout(() => {
-                    setIsSelectOpen(false);
-                    onSelectToggle(false);
-                    const newDate = changeMonth(Number(monthNum as string));
-                    setFocusedDate(newDate);
-                    setShouldFocus(false);
-                    onMonthChange(ev, newDate);
-                  }, 0);
+                  setIsSelectOpen(false);
+                  onSelectToggle(false);
+                  const newDate = changeMonth(Number(monthNum as string));
+                  setFocusedDate(newDate);
+                  setShouldFocus(false);
+                  onMonthChange(ev, newDate);
                 }}
                 selected={monthFormatted}
+                popperProps={{ appendTo: 'inline' }}
               >
                 <SelectList>
                   {longMonths.map((longMonth, index) => (

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/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/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/FileUpload/FileUpload.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
+import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone, ErrorCode } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { DropEvent } from '../../helpers/typeUtils';
@@ -84,6 +84,8 @@ export interface FileUploadProps
   onTextChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, text: string) => void;
 }
 
+export { ErrorCode as DropzoneErrorCode }; // FileInvalidType, FileTooLarge, FileTooSmall, TooManyFiles
+
 export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   id,
   type,

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/FileUpload/examples/FileUpload.md

@@ -40,7 +40,7 @@ Typing/pasting text in the box will call `onTextChange` with a string, and a str
 
 ### Restricting file size and type
 
-Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the `accept` prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
+Any [props accepted by `react-dropzone`'s `Dropzone` component](https://react-dropzone.js.org/#!/Dropzone) can be passed as a `dropzoneProps` object in order to customize the behavior of the Dropzone, such as restricting the size and type of files allowed. You can also capture and act upon native `react-dropzone` errors using the exposed `DropzoneErrorCode` enum. The following example will only accept CSV files smaller than 1 KB. Note that file type determination is not reliable across platforms (see the note on react-dropzone's docs about the `accept` prop), so be sure to test the behavior of your file upload restriction on all browsers and operating systems targeted by your application.
 
 #### IMPORTANT: A note about security
 

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   FileUpload,
+  DropzoneErrorCode,
   FileUploadHelperText,
   Form,
   FormGroup,
@@ -9,13 +10,13 @@ import {
   DropEvent,
   Icon
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
   const [isRejected, setIsRejected] = React.useState(false);
+  const [message, setMessage] = React.useState('Must be a CSV file no larger than 1 KB');
 
   const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
@@ -29,16 +30,25 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const reset = () => {
     setFilename('');
     setValue('');
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    reset();
     setIsRejected(false);
   };
 
   const handleFileRejected = () => {
+    reset();
     setIsRejected(true);
   };
 
+  const handleFileAccepted = () => {
+    setIsRejected(false);
+  };
+
   const handleFileReadStarted = (_event: DropEvent, _fileHandle: File) => {
     setIsLoading(true);
   };
@@ -66,7 +76,16 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           dropzoneProps={{
             accept: { 'text/csv': ['.csv'] },
             maxSize: 1024,
-            onDropRejected: handleFileRejected
+            onDropRejected: (rejections) => {
+              const error = rejections[0].errors[0];
+              if (error.code === DropzoneErrorCode.FileTooLarge) {
+                setMessage('File is too big');
+              } else if (error.code === DropzoneErrorCode.FileInvalidType) {
+                setMessage('File is not a CSV file');
+              }
+              handleFileRejected();
+            },
+            onDropAccepted: handleFileAccepted
           }}
           validated={isRejected ? 'error' : 'default'}
           browseButtonText="Upload"
@@ -77,10 +96,8 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
               <HelperTextItem id="restricted-file-example-helpText" variant={isRejected ? 'error' : 'default'}>
                 {isRejected ? (
                   <>
-                    <Icon status="danger">
-                      <ExclamationCircleIcon />
-                    </Icon>
-                    Must be a CSV file no larger than 1 KB
+                    <Icon status="danger" />
+                    {message}
                   </>
                 ) : (
                   'Upload a CSV file'

package/src/components/LoginPage/examples/LoginPage.md

@@ -18,7 +18,7 @@ propComponents:
   ]
 ---
 
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -114,7 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -187,7 +187,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -115,7 +115,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

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/Modal/examples/Modal.md

@@ -20,7 +20,7 @@ Basic modals give users the option to either confirm or cancel an action.
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
-A modal must have a `<ModalBody>`, containing the main content of the modal. The `<ModalHeader>` and `<ModalFooter>` components are not required, but are typically used to display the modal title and any button actions, respectively. 
+The `<ModalBody>`, `<ModalHeader>`, and `<ModalFooter>` components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.
 
 ```ts file="./ModalBasic.tsx"
 

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

@@ -9,7 +9,7 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
   >
     <input
       multiple=""
-      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"
     />
@@ -27,7 +27,7 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
   >
     <input
       multiple=""
-      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"
     />
@@ -45,7 +45,7 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
   >
     <input
       multiple=""
-      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/Select/Select.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 { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { getOUIAProps, OUIAProps, getDefaultOUIAId, onToggleArrowKeydownDefault } from '../../helpers';
 
 export interface SelectPopperProps {
   /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
@@ -62,6 +62,10 @@ export interface SelectProps 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;
+  /** Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows. */
+  variant?: 'default' | 'typeahead';
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
   /** @hide Forwarded ref */
@@ -95,6 +99,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   shouldFocusFirstItemOnOpen = false,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
+  onToggleKeydown,
+  variant,
   isPlain,
   innerRef,
   zIndex = 9999,
@@ -144,6 +150,14 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (toggleRef.current?.contains(event.target as Node)) {
+        if (onToggleKeydown) {
+          onToggleKeydown(event);
+        } else if (isOpen && variant !== 'typeahead') {
+          onToggleArrowKeydownDefault(event, menuRef);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -168,6 +182,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
+    onToggleKeydown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -247,7 +247,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -241,7 +241,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-checkbox-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -260,7 +260,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -244,7 +244,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -251,7 +251,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      variant="typeahead"
     >
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (