@patternfly/react-core 5.4.0-prerelease.9 → 5.4.1

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.0-prerelease.9",
+  "version": "5.4.1",
   "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.3",
-    "@patternfly/react-styles": "^5.4.0-prerelease.3",
-    "@patternfly/react-tokens": "^5.4.0-prerelease.3",
-    "focus-trap": "7.5.2",
+    "@patternfly/react-icons": "^5.4.0",
+    "@patternfly/react-styles": "^5.4.0",
+    "@patternfly/react-tokens": "^5.4.0",
+    "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
-    "tslib": "^2.5.0"
+    "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.4.0-prerelease.2",
-    "@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",
+    "css": "^3.0.0",
+    "fs-extra": "^11.2.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "0e2f36ea2290eeb5ba2c3514d7b9b40c069817d7"
+  "gitHead": "6796622fd206340b01366ccb89758f9897427e60"
 }

package/scripts/copyStyles.js

@@ -1,8 +1,6 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const { copySync, readFileSync, writeFileSync } = require('fs-extra');
 const { resolve, dirname, join } = require('path');
 const { parse: parseCSS, stringify: stringifyCSS } = require('css');
-/* eslint-enable @typescript-eslint/no-var-requires */
 
 const stylesDir = resolve(__dirname, '../dist/styles');
 const pfDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
@@ -32,10 +30,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 +41,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/BackToTop/__tests__/BackToTop.test.tsx

@@ -115,7 +115,7 @@ test('Clicking backToTop scrolls back to top of the element passed via scrollabl
   const user = userEvent.setup();
   const wrapper = document.getElementById('backToTopWrapper');
   fireEvent.scroll(wrapper as HTMLElement, { target: { scrollY: 401 } });
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   wrapper!.scrollTo = jest.fn();
   await user.click(screen.getByRole(`button`).parentElement as Element);
 

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

@@ -70,7 +70,7 @@ class Chip extends React.Component<ChipProps, ChipState> {
     isOverflowChip: false,
     isReadOnly: false,
     tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onClick: (_e: React.MouseEvent) => undefined as any,
     component: 'div' as React.ReactNode
   };

package/src/components/Chip/ChipGroup.tsx

@@ -77,7 +77,7 @@ class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState> {
     defaultIsOpen: false,
     numChips: 3,
     isClosable: false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     onClick: (_e: React.MouseEvent) => undefined as any,
     onOverflowChipClick: (_e: React.MouseEvent) => undefined as any,
     closeBtnAriaLabel: 'Close chip group',

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -145,7 +145,6 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     }
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
     this.setState((prevState) => ({
       expanded: !prevState.expanded

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/DataList/DataListAction.tsx

@@ -35,7 +35,7 @@ export const DataListAction: React.FunctionComponent<DataListActionProps> = ({
   id,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  /* eslint-disable @typescript-eslint/no-unused-vars */
+
   isPlainButtonAction,
   ...props
 }: DataListActionProps) => (

package/src/components/DatePicker/DatePicker.tsx

@@ -231,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/DrawerActions.tsx

@@ -10,7 +10,6 @@ export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerActions: React.FunctionComponent<DrawerActionsProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   ...props

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -14,7 +14,6 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
 }
 
 export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',

package/src/components/Drawer/DrawerContent.tsx

@@ -16,7 +16,6 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   panelContent,

package/src/components/Drawer/DrawerContentBody.tsx

@@ -12,7 +12,6 @@ export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement>
 }
 
 export const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   hasPadding = false,

package/src/components/Drawer/DrawerHead.tsx

@@ -13,7 +13,6 @@ export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   hasNoPadding = false,

package/src/components/Drawer/DrawerMain.tsx

@@ -10,7 +10,6 @@ export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerMain: React.FunctionComponent<DrawerMainProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   ...props

package/src/components/Drawer/DrawerPanelBody.tsx

@@ -12,7 +12,6 @@ export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   hasNoPadding = false,

package/src/components/Drawer/DrawerSection.tsx

@@ -13,7 +13,6 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,
   colorVariant = DrawerColorVariant.default,

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);
+        }, 10);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

package/src/components/DualListSelector/DualListSelector.tsx

@@ -500,11 +500,10 @@ class DualListSelector extends React.Component<DualListSelectorProps, DualListSe
     e: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent,
     index: number,
     isChosen: boolean,
-    /* eslint-disable @typescript-eslint/no-unused-vars */
+
     id?: string,
     itemData?: any,
     parentData?: any
-    /* eslint-enable @typescript-eslint/no-unused-vars */
   ) => {
     this.setState((prevState) => {
       const originalArray = isChosen ? prevState.chosenOptionsSelected : prevState.availableOptionsSelected;