@patternfly/react-core 5.0.0-alpha.95 → 5.0.0-alpha.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.95",
+  "version": "5.0.0-alpha.97",
   "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",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "90ba49c9bb04467b5482738c8102546ad70c662f"
+  "gitHead": "2f2eb377c744647e34d557e1550ae7a01f87f5a6"
 }

package/src/components/Badge/Badge.tsx

@@ -25,7 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
-    {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
+    {screenReaderText && <span className="pf-v5-screen-reader">{screenReaderText}</span>}
   </span>
 );
 Badge.displayName = 'Badge';

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -31,9 +31,9 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
-test('Does not render pf-screen-reader class by default', () => {
+test('Does not render pf-v5-screen-reader class by default', () => {
   render(<Badge>Test</Badge>);
-  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-v5-screen-reader"></span>');
 });
 
 test('Renders screenReaderText passed via prop', () => {

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -336,7 +336,7 @@ export const CalendarMonth = ({
           <tr>
             {calendar[0].map(({ date }, index) => (
               <th key={index} className={styles.calendarMonthDay} scope="col">
-                <span className="pf-screen-reader">{longWeekdayFormat(date)}</span>
+                <span className="pf-v5-screen-reader">{longWeekdayFormat(date)}</span>
                 <span aria-hidden>{weekdayFormat(date)}</span>
               </th>
             ))}

package/src/components/Card/Card.tsx

@@ -141,7 +141,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
     >
       {hasSelectableInput && (
         <input
-          className="pf-screen-reader"
+          className="pf-v5-screen-reader"
           id={`${id}-input`}
           {...ariaProps}
           type="checkbox"

package/src/components/DataList/DataListItem.tsx

@@ -93,7 +93,7 @@ export class DataListItem extends React.Component<DataListItemProps> {
             >
               {onSelectableRowChange && (
                 <input
-                  className="pf-screen-reader"
+                  className="pf-v5-screen-reader"
                   type="radio"
                   checked={isSelected}
                   onChange={(event) => onSelectableRowChange(event, id)}

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

@@ -68,9 +68,9 @@ import { css } from '@patternfly/react-styles';
 
 ```
 
-### Selectable rows
+### Clickable rows
 
-```ts file="./DataListSelectableRows.tsx"
+```ts file="./DataListClickableRows.tsx"
 
 ```
 

package/src/components/DataList/examples/{DataListSelectableRows.tsx → DataListClickableRows.tsx}

@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export const DataListSelectableRows: React.FunctionComponent = () => {
+export const DataListClickableRows: React.FunctionComponent = () => {
   const [isOpen1, setIsOpen1] = React.useState(false);
   const [isOpen2, setIsOpen2] = React.useState(false);
   const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
@@ -46,24 +46,24 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DataList
-        aria-label="selectable data list example"
+        aria-label="clickable data list example"
         selectedDataListItemId={selectedDataListItemId}
         onSelectDataListItem={onSelectDataListItem}
         onSelectableRowChange={handleInputChange}
       >
-        <DataListItem aria-labelledby="selectable-action-item1" id="item1">
+        <DataListItem aria-labelledby="clickable-action-item1" id="item1">
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
                 <DataListCell key="primary content">
-                  <span id="selectable-action-item1">Single actionable Primary content</span>
+                  <span id="clickable-action-item1">Single actionable Primary content</span>
                 </DataListCell>,
                 <DataListCell key="secondary content">Single actionable Secondary content</DataListCell>
               ]}
             />
             <DataListAction
-              aria-labelledby="selectable-action-item1 selectable-action-action1"
-              id="selectable-action-action1"
+              aria-labelledby="clickable-action-item1 clickable-action-action1"
+              id="clickable-action-action1"
               aria-label="Actions"
               isPlainButtonAction
             >
@@ -76,7 +76,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
                     isExpanded={isOpen1}
                     onClick={onToggle1}
                     variant="plain"
-                    aria-label="Data list selectable rows example kebab toggle 1"
+                    aria-label="Data list clickable rows example kebab toggle 1"
                   >
                     <EllipsisVIcon aria-hidden="true" />
                   </MenuToggle>
@@ -102,19 +102,19 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
             </DataListAction>
           </DataListItemRow>
         </DataListItem>
-        <DataListItem aria-labelledby="selectable-actions-item2" id="item2">
+        <DataListItem aria-labelledby="clickable-actions-item2" id="item2">
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
                 <DataListCell key="primary content">
-                  <span id="selectable-actions-item2">Selectable actions Primary content</span>
+                  <span id="clickable-actions-item2">clickable actions Primary content</span>
                 </DataListCell>,
-                <DataListCell key="secondary content">Selectable actions Secondary content</DataListCell>
+                <DataListCell key="secondary content">clickable actions Secondary content</DataListCell>
               ]}
             />
             <DataListAction
-              aria-labelledby="selectable-actions-item2 selectable-actions-action2"
-              id="selectable-actions-action2"
+              aria-labelledby="clickable-actions-item2 clickable-actions-action2"
+              id="clickable-actions-action2"
               aria-label="Actions"
               isPlainButtonAction
             >
@@ -127,7 +127,7 @@ export const DataListSelectableRows: React.FunctionComponent = () => {
                     isExpanded={isOpen2}
                     onClick={onToggle2}
                     variant="plain"
-                    aria-label="Data list selectable rows example kebab toggle 2"
+                    aria-label="Data list clickable rows example kebab toggle 2"
                   >
                     <EllipsisVIcon aria-hidden="true" />
                   </MenuToggle>

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

@@ -93,10 +93,10 @@ export const DataListDraggable: React.FunctionComponent = () => {
           ))}
         </DataList>
       </Droppable>
-      <div className="pf-screen-reader" aria-live="assertive">
+      <div className="pf-v5-screen-reader" aria-live="assertive">
         {liveText}
       </div>
-      <div className="pf-screen-reader" id={`description-${uniqueId}`}>
+      <div className="pf-v5-screen-reader" id={`description-${uniqueId}`}>
         Press space or enter to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm
         the drag, or any other key to cancel the drag operation.
       </div>

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

@@ -45,10 +45,9 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     display: 'block',
     width: '100%',
     padding: '.25rem .5rem',
-    color: '#004e8a',
-    backgroundColor: '#def3ff',
-    border: '1px solid rgba(0,0,0,.1)',
-    borderRadius: '4px'
+    color: 'var(--pf-v5-global--Color--100)',
+    backgroundColor: 'var(--pf-v5-global--BackgroundColor--200)',
+    border: 'var(--pf-v5-global--BorderWidth--sm) var(--pf-v5-global--BorderColor--100) solid'
   };
 
   return (

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

@@ -190,7 +190,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Sunday
                     </span>
@@ -205,7 +205,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Monday
                     </span>
@@ -220,7 +220,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Tuesday
                     </span>
@@ -235,7 +235,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Wednesday
                     </span>
@@ -250,7 +250,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Thursday
                     </span>
@@ -265,7 +265,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Friday
                     </span>
@@ -280,7 +280,7 @@ exports[`With popover opened 1`] = `
                     scope="col"
                   >
                     <span
-                      class="pf-screen-reader"
+                      class="pf-v5-screen-reader"
                     >
                       Saturday
                     </span>

package/src/components/Divider/examples/DividerUsingLi.tsx

@@ -4,7 +4,7 @@ import { Divider } from '@patternfly/react-core';
 export const DividerUsingLi: React.FunctionComponent = () => (
   <ul role="list">
     <li>List item one</li>
-    <Divider component="li" />
+    <Divider component="li" role="none" />
     <li>List item two</li>
   </ul>
 );

package/src/components/Dropdown/Dropdown.tsx

@@ -1,9 +1,27 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper, PopperProps } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 import { useOUIAProps, OUIAProps } 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. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+}
+
+/**
+ * See the Menu documentation for additional props that may be passed.
+ */
 export interface DropdownProps extends MenuProps, OUIAProps {
   /** Anything which can be rendered in a dropdown. */
   children?: React.ReactNode;
@@ -14,7 +32,11 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
   /** Function callback called when user selects item. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  onSelect?: (
+    event?: React.MouseEvent<Element, MouseEvent>,
+    itemId?: string | number,
+    toggleRef?: React.RefObject<any>
+  ) => void;
   /** Callback to allow the dropdown component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -31,7 +53,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: Partial<PopperProps>;
+  popperProps?: DropdownPopperProps;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -59,10 +81,12 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
       if (
-        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
-        toggleRef.current?.contains(event.target as Node)
+        isOpen &&
+        onOpenChange &&
+        (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node))
       ) {
         if (event.key === 'Escape' || event.key === 'Tab') {
+          event.preventDefault();
           onOpenChange(false);
           toggleRef.current?.focus();
         }
@@ -101,7 +125,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId, toggleRef)}
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...props}

package/src/components/Dropdown/DropdownGroup.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuGroupProps, MenuGroup } from '../Menu';
 
+/**
+ * See the MenuGroup section of the Menu documentation for additional props that may be passed.
+ */
 export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Anything which can be rendered in a dropdown group. */
   children: React.ReactNode;

package/src/components/Dropdown/DropdownItem.tsx

@@ -3,11 +3,16 @@ import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../Menu';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
+/**
+ * See the MenuItem section of the Menu documentation for additional props that may be passed.
+ */
 export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
   /** Anything which can be rendered in a dropdown item */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown item */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
   /** Description of the dropdown item */
   description?: React.ReactNode;
   /** Render item as disabled option */
@@ -22,7 +27,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   ouiaSafe?: boolean;
 }
 
-export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
+const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   description,
@@ -31,11 +36,13 @@ export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
   onClick,
   ouiaId,
   ouiaSafe,
+  innerRef,
   ...props
 }: DropdownItemProps) => {
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
     <MenuItem
+      ref={innerRef}
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
@@ -48,4 +55,8 @@ export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
     </MenuItem>
   );
 };
+export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<any>) => (
+  <DropdownItemBase {...props} innerRef={ref} />
+));
+
 DropdownItem.displayName = 'DropdownItem';

package/src/components/Dropdown/examples/Dropdown.md

@@ -3,13 +3,15 @@ id: Dropdown
 section: components
 subsection: menus
 cssPrefix: pf-c-menu
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
+propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle', 'DropdownPopperProps']
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
+`Dropdown` builds off of the Menu component suite to wrap commonly used properties and functions for a dropdown menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Dropdown` to further customize the dropdown menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+
 ### Basic dropdowns
 
 Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.

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

@@ -8,10 +8,15 @@ export const DropdownBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

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

@@ -8,10 +8,15 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

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

@@ -16,10 +16,15 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

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

@@ -9,10 +9,15 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    itemId: string | number | undefined,
+    toggleRef: React.RefObject<any>
+  ) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
+    toggleRef?.current.focus();
   };
 
   return (

package/src/components/{LabelGroup → Label}/LabelGroup.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/LabelGroup/label-gro
 import labelStyles from '@patternfly/react-styles/css/components/Label/label';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
-import { Label } from '../Label';
+import { Label } from './Label';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
 import { fillTemplate } from '../../helpers';

package/src/components/Label/examples/Label.md

@@ -2,7 +2,7 @@
 id: Label
 section: components
 cssPrefix: pf-c-label
-propComponents: ['Label']
+propComponents: ['Label', 'LabelGroup']
 ---
 
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
@@ -10,27 +10,27 @@ import { Link } from '@reach/router';
 
 ## Examples
 
-### Filled
+### Filled labels
 
 ```ts file="LabelFilled.tsx"
 ```
 
-### Outline
+### Outlined labels
 
 ```ts file="LabelOutline.tsx"
 ```
 
-### Compact
+### Compact labels
 
 ```ts file="LabelCompact.tsx"
 ```
 
-### Router link
+### Label with router link
 
 ```ts file="LabelRouterLink.tsx"
 ```
 
-### Editable
+### Editable labels
 
 Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape. 
 
@@ -38,3 +38,45 @@ You can also customize any Label's close button aria-label as this example shows
 
 ```ts file="LabelEditable.tsx" isBeta
 ```
+
+
+### Basic label group
+Use a label group when you have multiple labels to display at once. 
+
+```ts file="LabelGroupBasic.tsx"
+```
+
+### Label group with overflow
+An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.
+
+```ts file="LabelGroupOverflow.tsx"
+```
+
+### Label group with categories
+Use a category name to organize a set of labels
+
+```ts file="LabelGroupCategory.tsx"
+```
+
+### Label group with removable categories
+
+```ts file="LabelGroupCategoryRemovable.tsx"
+```
+
+### Vertical label group
+Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.
+
+```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
+```
+
+### Editable label group
+
+```ts isBeta file="LabelGroupEditableLabels.tsx"
+```
+
+### Editable label group with add button
+
+The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).
+
+```ts isBeta file="LabelGroupEditableAdd.tsx"
+```

package/src/components/Label/index.ts

@@ -1 +1,2 @@
 export * from './Label';
+export * from './LabelGroup';

package/src/components/LoginPage/LoginForm.tsx

@@ -25,7 +25,7 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   /** Value for the username */
   usernameValue?: string;
   /** Function that handles the onChange event for the username */
-  onChangeUsername?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChangeUsername?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
   /** Label for the password input field */
@@ -33,7 +33,7 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   /** Value for the password */
   passwordValue?: string;
   /** Function that handles the onChange event for the password */
-  onChangePassword?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  onChangePassword?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the password is valid */
   isValidPassword?: boolean;
   /** Flag indicating if the user can toggle hiding the password */
@@ -53,7 +53,7 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   /** Flag indicating if the remember me checkbox is checked. */
   isRememberMeChecked?: boolean;
   /** Function that handles the onChange event for the remember me checkbox */
-  onChangeRememberMe?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChangeRememberMe?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
 }
 
 export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
@@ -91,7 +91,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
       name="pf-login-password-id"
       validated={isValidPassword ? ValidatedOptions.default : ValidatedOptions.error}
       value={passwordValue}
-      onChange={(event, value) => onChangePassword(value, event)}
+      onChange={onChangePassword}
     />
   );
 
@@ -115,7 +115,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           type="text"
           name="pf-login-username-id"
           value={usernameValue}
-          onChange={(event, value) => onChangeUsername(value, event)}
+          onChange={onChangeUsername}
         />
       </FormGroup>
       <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
@@ -139,7 +139,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
             id="pf-login-remember-me-id"
             label={rememberMeLabel}
             isChecked={isRememberMeChecked}
-            onChange={(event, checked) => onChangeRememberMe(checked, event)}
+            onChange={onChangeRememberMe}
           />
         </FormGroup>
       )}

package/src/components/LoginPage/LoginMainFooterLinksItem.tsx

@@ -20,7 +20,7 @@ export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIEle
 export const LoginMainFooterLinksItem: React.FunctionComponent<LoginMainFooterLinksItemProps> = ({
   children = null,
   href = '',
-  target = '',
+  target,
   className = '',
   linkComponent = 'a',
   linkComponentProps,