@patternfly/react-core 5.4.0-prerelease.3 → 5.4.0-prerelease.30

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":"5.4.0-prerelease.2","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":"5.4.0-prerelease.29","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":"5.4.0-prerelease.2","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":"5.4.0-prerelease.29","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":"5.4.0-prerelease.2","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":"5.4.0-prerelease.29","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.3",
+  "version": "5.4.0-prerelease.30",
   "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,30 +46,21 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.4.0-prerelease.1",
-    "@patternfly/react-styles": "^5.4.0-prerelease.1",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.1",
-    "focus-trap": "7.5.2",
+    "@patternfly/react-icons": "^5.4.0-prerelease.10",
+    "@patternfly/react-styles": "^5.4.0-prerelease.11",
+    "@patternfly/react-tokens": "^5.4.0-prerelease.10",
+    "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.5.0"
+    "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.3.0-prerelease.5",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "^5.0.2",
-    "css": "^2.2.3",
-    "fs-extra": "^11.1.1",
-    "glob": "^7.1.2",
-    "rollup": "^3.21.5",
-    "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-svg": "2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.7.4"
+    "@patternfly/patternfly": "5.4.0-prerelease.8",
+    "css": "^3.0.0",
+    "fs-extra": "^11.2.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "75849b05bb14b3d8f50535a92a65136b4a2cb13b"
+  "gitHead": "184c55f8d10e1d94ffd72e09212db56c15387c5e"
 }

package/scripts/copyStyles.js

@@ -32,10 +32,10 @@ for (const [targetCss, baseCss] of Object.entries(baseCssFiles)) {
   const ast = parseCSS(css);
 
   // Core provides font awesome fonts and utlities. React does not use these
-  ast.stylesheet.rules = ast.stylesheet.rules.filter(rule => {
+  ast.stylesheet.rules = ast.stylesheet.rules.filter((rule) => {
     switch (rule.type) {
       case 'rule':
-        return !rule.selectors.some(sel => unusedSelectorRegEx.test(sel));
+        return !rule.selectors.some((sel) => unusedSelectorRegEx.test(sel));
       case 'keyframes':
         return !unusedKeyFramesRegEx.test(rule.name);
       case 'charset':
@@ -43,7 +43,7 @@ for (const [targetCss, baseCss] of Object.entries(baseCssFiles)) {
         return false;
       case 'font-face':
         // eslint-disable-next-line no-case-declarations
-        const fontFamilyDecl = rule.declarations.find(decl => decl.property === 'font-family');
+        const fontFamilyDecl = rule.declarations.find((decl) => decl.property === 'font-family');
         return !unusedFontFamilyRegEx.test(fontFamilyDecl.value);
       default:
         return true;

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -168,7 +168,7 @@ export const CalendarMonth = ({
   const yearFormatted = yearFormat(focusedDate);
   const [yearInput, setYearInput] = React.useState(yearFormatted.toString());
 
-  const [hoveredDate, setHoveredDate] = React.useState(new Date(focusedDate));
+  const [hoveredDate, setHoveredDate] = React.useState<Date>(undefined);
   const focusRef = React.useRef<HTMLButtonElement>();
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
@@ -192,7 +192,6 @@ export const CalendarMonth = ({
 
   const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
     setFocusedDate(newDate);
-    setHoveredDate(newDate);
     setShouldFocus(false);
     onMonthChange(ev, newDate);
     setYearInput(yearFormat(newDate).toString());
@@ -212,7 +211,6 @@ export const CalendarMonth = ({
     if (newDate.getTime() !== focusedDate.getTime() && isValidated(newDate)) {
       ev.preventDefault();
       setFocusedDate(newDate);
-      setHoveredDate(newDate);
       setShouldFocus(true);
     }
   };
@@ -238,7 +236,6 @@ export const CalendarMonth = ({
       if (yearNum >= MIN_YEAR && yearNum <= MAX_YEAR) {
         const newDate = changeYear(yearNum);
         setFocusedDate(newDate);
-        setHoveredDate(newDate);
         setShouldFocus(false);
 
         // We need to manually focus the year input in FireFox when the scroll buttons are clicked, as FireFox doesn't place focus automatically
@@ -282,10 +279,9 @@ export const CalendarMonth = ({
       .map(({ date }) => date)[0];
     if (toFocus) {
       setFocusedDate(toFocus);
-      setHoveredDate(toFocus);
     }
   }
-  const isHoveredDateValid = isValidated(hoveredDate);
+  const isHoveredDateValid = hoveredDate && isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
 
   const calendarToRender = (
@@ -331,7 +327,6 @@ export const CalendarMonth = ({
                     onSelectToggle(false);
                     const newDate = changeMonth(Number(monthNum as string));
                     setFocusedDate(newDate);
-                    setHoveredDate(newDate);
                     setShouldFocus(false);
                     onMonthChange(ev, newDate);
                   }, 0);
@@ -369,7 +364,7 @@ export const CalendarMonth = ({
           </Button>
         </div>
       </div>
-      <table className={styles.calendarMonthCalendar}>
+      <table className={styles.calendarMonthCalendar} onMouseLeave={() => setHoveredDate(undefined)}>
         <thead className={styles.calendarMonthDays}>
           <tr>
             {calendar[0].map(({ date }, index) => (
@@ -392,16 +387,21 @@ export const CalendarMonth = ({
                 const isRangeStart = isValidDate(rangeStart) && isSameDate(date, rangeStart);
                 let isInRange = false;
                 let isRangeEnd = false;
-                if (isValidDate(rangeStart) && isValidDate(dateProp)) {
-                  isInRange = date > rangeStart && date < dateProp;
-                  isRangeEnd = isSameDate(date, dateProp);
-                } else if (isValidDate(rangeStart) && isHoveredDateValid) {
-                  if (hoveredDate > rangeStart || isSameDate(hoveredDate, rangeStart)) {
-                    isInRange = date > rangeStart && date < hoveredDate;
-                    isRangeEnd = isSameDate(date, hoveredDate);
+                if (isValidDate(rangeStart)) {
+                  let rangeEndDate: Date;
+
+                  if (isValidDate(dateProp)) {
+                    rangeEndDate = dateProp;
+                  }
+                  if (isHoveredDateValid && (!isValidDate(dateProp) || hoveredDate > dateProp)) {
+                    rangeEndDate = hoveredDate;
+                  }
+
+                  if (rangeEndDate) {
+                    isInRange = date >= rangeStart && date <= rangeEndDate;
+                    isRangeEnd = isSameDate(date, rangeEndDate);
                   }
-                  // Don't handle focused dates before start dates for now.
-                  // Core would likely need new styles
+                  // Core would likely need new styles for "is selected but disabled"
                 }
 
                 return (
@@ -412,8 +412,8 @@ export const CalendarMonth = ({
                       isAdjacentMonth && styles.modifiers.adjacentMonth,
                       isToday && styles.modifiers.current,
                       (isSelected || isRangeStart) && styles.modifiers.selected,
-                      !isValid && styles.modifiers.disabled,
-                      (isInRange || isRangeStart || isRangeEnd) && styles.modifiers.inRange,
+                      !isValid && !(isInRange || isRangeStart || isRangeEnd || isSelected) && styles.modifiers.disabled,
+                      isInRange && styles.modifiers.inRange,
                       isRangeStart && styles.modifiers.startRange,
                       isRangeEnd && styles.modifiers.endRange
                     )}

package/src/components/Checkbox/examples/Checkbox.md

@@ -20,6 +20,20 @@ propComponents: ['Checkbox']
 
 ```
 
+### Reversed
+
+```ts file="./CheckboxReversed.tsx"
+
+```
+
+### Label wraps
+
+You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the `isLabelWrapped` property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
+
+```ts file="./CheckboxLabelWraps.tsx"
+
+```
+
 ### Disabled
 
 ```ts file='./CheckboxDisabled.tsx'

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxLabelWraps: React.FunctionComponent = () => (
+  <Checkbox
+    isLabelWrapped
+    label="Label wraps input example"
+    id="checkbox-label-wraps-input"
+    name="checkbox-label-wraps-input"
+  />
+);

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

@@ -0,0 +1,6 @@
+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" />
+);

package/src/components/CodeBlock/examples/CodeBlock.md

@@ -8,14 +8,20 @@ propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
+**Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.
+
+Using **String.raw\`\`** will keep all the special characters like `\n` or `\t`.
+
 ## Examples
 
 ### Basic
 
 ```ts file="./CodeBlockBasic.tsx"
+
 ```
 
 ### Expandable
 
 ```ts file="./CodeBlockExpandable.tsx"
+
 ```

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -14,7 +14,7 @@ export const BasicCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo0oooo00ooo

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -27,7 +27,7 @@ export const ExpandableCodeBlock: React.FunctionComponent = () => {
     setCopied(true);
   };
 
-  const copyBlock = `apiVersion: helm.openshift.io/v1beta1/
+  const copyBlock = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo
@@ -35,11 +35,11 @@ spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 
-  const code = `apiVersion: helm.openshift.io/v1beta1/
+  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo`;
-  const expandedCode = `spec:
+  const expandedCode = String.raw`spec:
 connectionConfig:
 url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
 

package/src/components/DataList/DataList.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
-import { PickOptional } from '../../helpers/typeUtils';
 
 const gridBreakpointClasses = {
   none: styles.modifiers.gridNone,
@@ -19,7 +18,7 @@ export enum DataListWrapModifier {
   breakWord = 'breakWord'
 }
 
-export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, 'ref'> {
+export interface DataListProps extends React.HTMLProps<HTMLUListElement> {
   /** Content rendered inside the DataList list */
   children?: React.ReactNode;
   /** Additional classes added to the DataList list */
@@ -38,6 +37,8 @@ export interface DataListProps extends Omit<React.HTMLProps<HTMLUListElement>, '
   wrapModifier?: DataListWrapModifier | 'nowrap' | 'truncate' | 'breakWord';
   /** Object that causes the data list to render hidden inputs which improve selectable item a11y */
   onSelectableRowChange?: (event: React.FormEvent<HTMLInputElement>, id: string) => void;
+  /** @hide custom ref of the DataList */
+  innerRef?: React.RefObject<HTMLUListElement>;
 }
 
 interface DataListContextProps {
@@ -51,71 +52,58 @@ export const DataListContext = React.createContext<Partial<DataListContextProps>
   isSelectable: false
 });
 
-class DataList extends React.Component<DataListProps> {
-  static displayName = 'DataList';
-  static defaultProps: PickOptional<DataListProps> = {
-    children: null,
-    className: '',
-    selectedDataListItemId: '',
-    isCompact: false,
-    gridBreakpoint: 'md',
-    wrapModifier: null
-  };
-  ref = React.createRef<HTMLUListElement>();
-
-  constructor(props: DataListProps) {
-    super(props);
-  }
+export const DataListBase: React.FunctionComponent<DataListProps> = ({
+  children = null,
+  className = '',
+  'aria-label': ariaLabel,
+  onSelectDataListItem,
+  selectedDataListItemId = '',
+  isCompact = false,
+  gridBreakpoint = 'md',
+  wrapModifier = null,
+  onSelectableRowChange,
+  innerRef,
+  ...props
+}: DataListProps) => {
+  const isSelectable = onSelectDataListItem !== undefined;
 
-  getIndex = (id: string) => Array.from(this.ref.current.children).findIndex((item) => item.id === id);
+  const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
+    onSelectDataListItem(event, id);
+  };
 
-  render() {
-    const {
-      className,
-      children,
-      'aria-label': ariaLabel,
-      onSelectDataListItem,
-      selectedDataListItemId,
-      isCompact,
-      wrapModifier,
-      gridBreakpoint,
-      onSelectableRowChange,
-      ...props
-    } = this.props;
-    const isSelectable = onSelectDataListItem !== undefined;
+  return (
+    <DataListContext.Provider
+      value={{
+        isSelectable,
+        selectedDataListItemId,
+        updateSelectedDataListItem,
+        onSelectableRowChange
+      }}
+    >
+      <ul
+        className={css(
+          styles.dataList,
+          isCompact && styles.modifiers.compact,
+          gridBreakpointClasses[gridBreakpoint],
+          wrapModifier && styles.modifiers[wrapModifier],
+          className
+        )}
+        style={props.style}
+        role="list"
+        aria-label={ariaLabel}
+        ref={innerRef}
+        {...props}
+      >
+        {children}
+      </ul>
+    </DataListContext.Provider>
+  );
+};
 
-    const updateSelectedDataListItem = (event: React.MouseEvent | React.KeyboardEvent, id: string) => {
-      onSelectDataListItem(event, id);
-    };
+DataListBase.displayName = 'DataListBase';
 
-    return (
-      <DataListContext.Provider
-        value={{
-          isSelectable,
-          selectedDataListItemId,
-          updateSelectedDataListItem,
-          onSelectableRowChange
-        }}
-      >
-        <ul
-          className={css(
-            styles.dataList,
-            isCompact && styles.modifiers.compact,
-            gridBreakpointClasses[gridBreakpoint],
-            wrapModifier && styles.modifiers[wrapModifier],
-            className
-          )}
-          style={props.style}
-          role="list"
-          aria-label={ariaLabel}
-          {...props}
-          ref={this.ref}
-        >
-          {children}
-        </ul>
-      </DataListContext.Provider>
-    );
-  }
-}
+export const DataList = React.forwardRef((props: DataListProps, ref: React.Ref<HTMLUListElement>) => (
+  <DataListBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+));
 
-export { DataList };
+DataList.displayName = 'DataList';

package/src/components/DatePicker/DatePicker.tsx

@@ -144,18 +144,24 @@ const DatePickerBase = (
     setValueDate(dateParse(valueProp));
   }, [valueProp]);
 
+  React.useEffect(() => {
+    if (isValidDate(valueDate)) {
+      applyValidators(valueDate);
+    }
+  }, [validators]);
+
   React.useEffect(() => {
     setPristine(!value);
     const newValueDate = dateParse(value);
     if (errorText && isValidDate(newValueDate)) {
-      setError(newValueDate);
+      applyValidators(newValueDate);
     }
     if (value === '' && !pristine && !textInputFocused) {
       dateIsRequired ? setErrorText(emptyDateText) : setErrorText('');
     }
   }, [value]);
 
-  const setError = (date: Date) => {
+  const applyValidators = (date: Date) => {
     setErrorText(validators.map((validator) => validator(date)).join('\n') || '');
   };
 
@@ -179,7 +185,7 @@ const DatePickerBase = (
     onBlur(event, value, onBlurDateArg);
 
     if (dateIsValid) {
-      setError(newValueDate);
+      applyValidators(newValueDate);
     }
 
     if (!dateIsValid && !pristine) {
@@ -195,7 +201,7 @@ const DatePickerBase = (
     const newValue = dateFormat(newValueDate);
     setValue(newValue);
     setValueDate(newValueDate);
-    setError(newValueDate);
+    applyValidators(newValueDate);
     setPopoverOpen(false);
     onChange(null, newValue, new Date(newValueDate));
   };
@@ -203,7 +209,7 @@ const DatePickerBase = (
   const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {
     if (ev.key === 'Enter' && value) {
       if (isValidDate(valueDate)) {
-        setError(valueDate);
+        applyValidators(valueDate);
       } else {
         setErrorText(invalidFormatText);
       }
@@ -225,12 +231,30 @@ const DatePickerBase = (
   const createFocusSelectorString = (modifierClass: string) =>
     `.${calendarMonthStyles.calendarMonthDatesCell}.${modifierClass} .${calendarMonthStyles.calendarMonthDate}`;
   const focusSelectorForSelectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.selected);
+  const focusSelectorForSelectedEndRangeDate = createFocusSelectorString(
+    `${calendarMonthStyles.modifiers.selected}.${calendarMonthStyles.modifiers.endRange}`
+  );
   const focusSelectorForUnselectedDate = createFocusSelectorString(calendarMonthStyles.modifiers.current);
 
+  /**
+   * Returns a CSS selector for a date button element which will receive initial focus after opening calendar popover.
+   * In case of a range picker it returns the end date, if it is selected, start date otherwise.
+   * In case of a normal datepicker it returns the selected date, if present, today otherwise.
+   */
+  const getElementSelectorToFocus = () => {
+    if (isValidDate(valueDate) && isValidDate(rangeStart)) {
+      return focusSelectorForSelectedEndRangeDate;
+    }
+    if (isValidDate(valueDate) || isValidDate(rangeStart)) {
+      return focusSelectorForSelectedDate;
+    }
+    return focusSelectorForUnselectedDate;
+  };
+
   return (
     <div className={css(styles.datePicker, className)} ref={datePickerWrapperRef} style={style} {...props}>
       <Popover
-        elementToFocus={isValidDate(valueDate) ? focusSelectorForSelectedDate : focusSelectorForUnselectedDate}
+        elementToFocus={getElementSelectorToFocus()}
         position="bottom"
         bodyContent={
           <CalendarMonth

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

@@ -127,6 +127,9 @@ exports[`With popover opened 1`] = `
                     <button
                       aria-expanded="false"
                       class="pf-v5-c-menu-toggle"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                      data-ouia-component-type="PF5/MenuToggle"
+                      data-ouia-safe="true"
                       style="width: 140px;"
                       type="button"
                     >

package/src/components/DragDrop/Draggable.tsx

@@ -117,7 +117,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
       index
     };
     const dest =
-      hoveringDroppableId !== null && hoveringIndex !== null
+      hoveringDroppableId !== null
         ? {
             droppableId: hoveringDroppableId,
             index: hoveringIndex

package/src/components/DragDrop/examples/DragDropMultipleLists.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DragDrop, Draggable, Droppable, Split, SplitItem } from '@patternfly/react-core';
+import { DragDrop, Draggable, Droppable, Flex } from '@patternfly/react-core';
 
 interface ItemType {
   id: string;
@@ -85,19 +85,19 @@ export const DragDropMultipleLists: React.FunctionComponent = () => {
 
   return (
     <DragDrop onDrop={onDrop}>
-      <Split hasGutter>
+      <Flex alignItems={{ default: 'alignItemsStretch' }} flexWrap={{ default: 'nowrap' }}>
         {Object.entries(items).map(([key, subitems]) => (
-          <SplitItem key={key} style={{ flex: 1 }}>
-            <Droppable zone="multizone" droppableId={key}>
+          <Flex key={key} fullWidth={{ default: 'fullWidth' }} alignItems={{ default: 'alignItemsStretch' }}>
+            <Droppable zone="multizone" droppableId={key} style={{ flexGrow: 1 }}>
               {(subitems as ItemType[]).map(({ id, content }) => (
                 <Draggable key={id} style={{ padding: '8px' }}>
                   {content}
                 </Draggable>
               ))}
             </Droppable>
-          </SplitItem>
+          </Flex>
         ))}
-      </Split>
+      </Flex>
     </DragDrop>
   );
 };

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -37,13 +37,13 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   isResizable?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
-  /** The minimum size of a drawer, in either pixels or percentage. */
+  /** The minimum size of a drawer. */
   minSize?: string;
-  /** The starting size of a resizable drawer, in either pixels or percentage. */
+  /** The starting size of a drawer. */
   defaultSize?: string;
-  /** The maximum size of a drawer, in either pixels or percentage. */
+  /** The maximum size of a drawer. */
   maxSize?: string;
-  /** The increment amount for keyboard drawer resizing, in pixels. */
+  /** The increment amount for keyboard drawer resizing. */
   increment?: number;
   /** Aria label for the resizable drawer splitter. */
   resizeAriaLabel?: string;

package/src/components/Dropdown/Dropdown.tsx

@@ -69,6 +69,8 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   menuHeight?: string;
   /** Maximum height of dropdown menu */
   maxMenuHeight?: string;
+  /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
+  shouldFocusFirstItemOnOpen?: boolean;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -89,6 +91,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChangeKeys = ['Escape', 'Tab'],
   menuHeight,
   maxMenuHeight,
+  shouldFocusFirstItemOnOpen = true,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -118,13 +121,13 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
 
     const handleClick = (event: MouseEvent) => {
       // toggle was opened, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
+      if (isOpen && shouldFocusFirstItemOnOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
           );
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 5);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu