@patternfly/react-core 6.5.0-prerelease.30 → 6.5.0-prerelease.32

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.30",
+  "version": "6.5.0-prerelease.32",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "d589d3a24a46cc04abb58f43b8193aaaad029fda"
+  "gitHead": "a5d68cd0e560439039ab540712fb691d999b0590"
 }

package/src/components/Accordion/AccordionToggle.tsx

@@ -4,8 +4,10 @@ import styles from '@patternfly/react-styles/css/components/Accordion/accordion'
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
-export interface AccordionToggleProps
-  extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+export interface AccordionToggleProps extends React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> {
   /** Content rendered inside the Accordion toggle  */
   children?: React.ReactNode;
   /** Additional classes added to the Accordion Toggle  */

package/src/components/Alert/examples/AlertAsyncLiveRegion.tsx

@@ -42,13 +42,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
           text="Async alerts on"
           buttonId="async-alerts-on"
           isSelected={isActive}
-          onChange={() => setIsActive(true)}
-        />
-        <ToggleGroupItem
-          text="Async alerts off"
-          buttonId="async-alerts-off"
-          isSelected={!isActive}
-          onChange={() => setIsActive(false)}
+          onChange={() => setIsActive(!isActive)}
         />
       </ToggleGroup>
       <AlertGroup hasAnimations isLiveRegion>

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import { css } from '@patternfly/react-styles';
 
-export interface AvatarProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface AvatarProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Additional classes added to the avatar. */
   className?: string;
   /** Attribute that specifies the URL of the image for the avatar. */

package/src/components/Brand/Brand.tsx

@@ -4,8 +4,10 @@ import { setBreakpointCssVars } from '../../helpers';
 import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height';
 import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width';
 
-export interface BrandProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface BrandProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
   children?: React.ReactNode;
   /** Additional classes added to the either type of Brand. */

package/src/components/Checkbox/Checkbox.tsx

@@ -7,8 +7,7 @@ import { getUniqueId } from '../../helpers/util';
 import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
   /** Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if
    * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -3,8 +3,10 @@ import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import { Button } from '../Button';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 
-export interface ClipboardCopyButtonProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+export interface ClipboardCopyButtonProps extends Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'ref'
+> {
   /** Callback for the copy when the button is clicked */
   onClick: (event: React.MouseEvent) => void;
   /** Content of the copy button */

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -3,8 +3,10 @@ import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { Button } from '../Button';
 
-export interface ClipboardCopyToggleProps
-  extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'ref'> {
+export interface ClipboardCopyToggleProps extends Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'ref'
+> {
   onClick: (event: React.MouseEvent) => void;
   id: string;
   contentId: string;

package/src/components/Compass/__tests__/CompassNavHome.test.tsx

@@ -22,7 +22,7 @@ test('Renders with default tooltip content', async () => {
 
   const button = screen.getByRole('button');
 
-  user.hover(button);
+  await user.hover(button);
 
   await screen.findByRole('tooltip');
 
@@ -36,7 +36,7 @@ test('Renders with custom tooltip content when provided', async () => {
 
   const button = screen.getByRole('button');
 
-  user.hover(button);
+  await user.hover(button);
 
   await screen.findByRole('tooltip');
   expect(screen.getByRole('tooltip')).toHaveTextContent('Custom tooltip');

package/src/components/Compass/__tests__/CompassNavSearch.test.tsx

@@ -20,7 +20,7 @@ test('Renders with default tooltip content', async () => {
 
   const button = screen.getByRole('button');
 
-  user.hover(button);
+  await user.hover(button);
 
   await screen.findByRole('tooltip');
 
@@ -34,7 +34,7 @@ test('Renders with custom tooltip content when provided', async () => {
 
   const button = screen.getByRole('button');
 
-  user.hover(button);
+  await user.hover(button);
 
   await screen.findByRole('tooltip');
 

package/src/components/DatePicker/DatePicker.tsx

@@ -24,7 +24,8 @@ export interface DatePickerRequiredObject {
 /** The main date picker component. */
 
 export interface DatePickerProps
-  extends CalendarFormat,
+  extends
+    CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** The container to append the menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.

package/src/components/FileUpload/FileUpload.tsx

@@ -4,11 +4,10 @@ import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
-export interface FileUploadProps
-  extends Omit<
-    FileUploadFieldProps,
-    'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
-  > {
+export interface FileUploadProps extends Omit<
+  FileUploadFieldProps,
+  'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
+> {
   /** Flag to allow editing of a text file's contents after it is selected from disk. */
   allowEditingUploadedText?: boolean;
   /** Aria-label for the text area. */

package/src/components/FormSelect/FormSelect.tsx

@@ -8,8 +8,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 export interface FormSelectProps
-  extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>, OUIAProps {
   /** content rendered inside the FormSelect */
   children: React.ReactNode;
   /** additional classes added to the FormSelect control */

package/src/components/LoginPage/LoginPage.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 
 import { BackgroundImage } from '../BackgroundImage';
-import { Brand } from '../Brand';
+import { Brand, BrandProps } from '../Brand';
 import { List, ListVariant } from '../List';
 
 import { Login } from './Login';
@@ -21,6 +21,8 @@ export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
   brandImgSrc?: string;
   /** Attribute that specifies the alt text of the brand image for the login page */
   brandImgAlt?: string;
+  /** Additional props for the brand image for the login page */
+  brandImgProps?: BrandProps;
   /** Attribute that specifies the URL of the background image for the login page */
   backgroundImgSrc?: string;
   /** Content rendered inside of the text component of the login page */
@@ -50,6 +52,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
   className = '',
   brandImgSrc = '',
   brandImgAlt = '',
+  brandImgProps,
   backgroundImgSrc = '',
   footerListItems = null,
   textContent = '',
@@ -65,7 +68,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
 }: LoginPageProps) => {
   const HeaderBrand = (
     <Fragment>
-      <Brand src={brandImgSrc} alt={brandImgAlt} />
+      {(brandImgSrc || brandImgProps?.src) && <Brand src={brandImgSrc} alt={brandImgAlt} {...brandImgProps} />}
     </Fragment>
   );
   const Header = <LoginHeader headerBrand={HeaderBrand} />;

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

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { LoginPage } from '../LoginPage';
 import { ListVariant } from '../../List';
@@ -26,3 +26,40 @@ test('check loginpage example against snapshot', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('brand is absent without brandImgSrc and brandImgProps.src', () => {
+  const { asFragment } = render(<LoginPage loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brand is present with brandImgSrc prop', () => {
+  const { asFragment } = render(<LoginPage brandImgSrc="Brand src" loginTitle="Log into your account" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('brandImgProps successfully renders brand with props', () => {
+  render(
+    <LoginPage
+      brandImgProps={{ src: 'Brand src', alt: 'Pf-logo', 'aria-label': 'PatternFly logo', className: 'custom-class' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'PatternFly logo' });
+  expect(brandImg).toHaveAttribute('src', 'Brand src');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo');
+  expect(brandImg).toHaveAttribute('aria-label', 'PatternFly logo');
+  expect(brandImg).toHaveClass('custom-class');
+});
+
+test('Brand is rendered correctly with both brandImgSrc and brandImgProps, prioritizing brandImgProps.src', () => {
+  render(
+    <LoginPage
+      brandImgSrc="Brand-src-that-should-be-ignored"
+      brandImgProps={{ src: 'Brand-src-from-props', alt: 'Pf-logo from props' }}
+      loginTitle="Log into your account"
+    />
+  );
+  const brandImg = screen.getByRole('img', { name: 'Pf-logo from props' });
+  expect(brandImg).toHaveAttribute('src', 'Brand-src-from-props');
+  expect(brandImg).toHaveAttribute('alt', 'Pf-logo from props');
+});

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

@@ -1,5 +1,97 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`brand is absent without brandImgSrc and brandImgProps.src 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      />
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-2"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`brand is present with brandImgSrc prop 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-login"
+  >
+    <div
+      class="pf-v6-c-login__container"
+    >
+      <header
+        class="pf-v6-c-login__header"
+      >
+        <img
+          alt=""
+          class="pf-v6-c-brand"
+          src="Brand src"
+        />
+      </header>
+      <main
+        class="pf-v6-c-login__main"
+      >
+        <div
+          class="pf-v6-c-login__main-header"
+        >
+          <h2
+            class="pf-v6-c-title pf-m-3xl"
+            data-ouia-component-id="OUIA-Generated-Title-3"
+            data-ouia-component-type="PF6/Title"
+            data-ouia-safe="true"
+          >
+            Log into your account
+          </h2>
+        </div>
+        <div
+          class="pf-v6-c-login__main-body"
+        />
+      </main>
+      <footer
+        class="pf-v6-c-login__footer"
+      >
+        <p />
+        <ul
+          class="pf-v6-c-list"
+        />
+      </footer>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`check loginpage example against snapshot 1`] = `
 <DocumentFragment>
   <div

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

@@ -32,6 +32,8 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 ### Basic
 
 By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
+
+This example uses `brandImgProps` to pass the brand image source, alt text, and an extra class, which will be preferred over `brandImgSrc` when both are provided.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

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

@@ -114,8 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg}
-      brandImgAlt="PatternFly logo"
+      brandImgProps={{ src: brandImg, alt: 'PatternFly logo' }}
       backgroundImgSrc="/assets/images/pf-background.svg"
       footerListItems={listItem}
       textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."

package/src/components/Masthead/MastheadLogo.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 
-export interface MastheadLogoProps
-  extends React.DetailedHTMLProps<React.HTMLProps<HTMLAnchorElement>, HTMLAnchorElement> {
+export interface MastheadLogoProps extends React.DetailedHTMLProps<
+  React.HTMLProps<HTMLAnchorElement>,
+  HTMLAnchorElement
+> {
   /** Content rendered inside of the masthead logo. */
   children?: React.ReactNode;
   /** Additional classes added to the masthead logo. */

package/src/components/MenuToggle/MenuToggle.tsx

@@ -23,7 +23,8 @@ export enum MenuToggleSize {
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
 export interface MenuToggleProps
-  extends Omit<
+  extends
+    Omit<
       React.DetailedHTMLProps<
         React.ButtonHTMLAttributes<HTMLButtonElement> & React.HTMLAttributes<HTMLDivElement>,
         MenuToggleElement

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -5,8 +5,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface MenuToggleCheckboxProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
   /** Additional classes added to the MenuToggleCheckbox */
   className?: string;
   /** Flag to show if the checkbox selection is valid or invalid */

package/src/components/Nav/Nav.tsx

@@ -10,7 +10,8 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
+  extends
+    Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;

package/src/components/Nav/NavExpandable.tsx

@@ -9,8 +9,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface NavExpandableProps
-  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>,
-    OUIAProps {
+  extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
   /** Title content shown for the expandable list */
   title: React.ReactNode;
   /** If defined, screen readers will read this text instead of the list title */

package/src/components/Nav/NavList.tsx

@@ -9,8 +9,10 @@ import { NavContext } from './Nav';
 import { PageSidebarContext } from '../Page/PageSidebar';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 
-export interface NavListProps
-  extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> {
+export interface NavListProps extends React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLUListElement>,
+  HTMLUListElement
+> {
   /** Children nodes */
   children?: React.ReactNode;
   /** Additional classes added to the list */

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -15,8 +15,10 @@ export enum ProgressStepVariant {
   warning = 'warning'
 }
 
-export interface ProgressStepProps
-  extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
+export interface ProgressStepProps extends React.DetailedHTMLProps<
+  React.LiHTMLAttributes<HTMLLIElement>,
+  HTMLLIElement
+> {
   /** Content rendered inside the progress step. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress step container. */

package/src/components/ProgressStepper/ProgressStepper.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 import { css } from '@patternfly/react-styles';
 
-export interface ProgressStepperProps
-  extends React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> {
+export interface ProgressStepperProps extends React.DetailedHTMLProps<
+  React.OlHTMLAttributes<HTMLOListElement>,
+  HTMLOListElement
+> {
   /** Content rendered inside the progress stepper. */
   children?: React.ReactNode;
   /** Additional classes applied to the progress stepper container. */

package/src/components/Radio/Radio.tsx

@@ -6,8 +6,7 @@ import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { getUniqueId } from '../../helpers/util';
 
 export interface RadioProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'disabled' | 'label' | 'onChange' | 'type'>, OUIAProps {
   /** Additional classes added to the radio wrapper. This wrapper will be div element by default. It will be a label element if
    * isLabelWrapped is true, or it can be overridden by any element specified in the component prop.
    */

package/src/components/Switch/Switch.tsx

@@ -6,8 +6,7 @@ import { getUniqueId } from '../../helpers/util';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface SwitchProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>, OUIAProps {
   /** id for the label. */
   id?: string;
   /** Additional classes added to the switch */

package/src/components/Tabs/Tab.tsx

@@ -9,8 +9,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { TabAction } from './TabAction';
 
 export interface TabProps
-  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title' | 'action'>, OUIAProps {
   /** content rendered inside the Tab content area. */
   children?: React.ReactNode;
   /** additional classes added to the Tab */

package/src/components/Tabs/Tabs.tsx

@@ -41,8 +41,7 @@ type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabPr
 type TabsChild = TabElement | boolean | null | undefined;
 
 export interface TabsProps
-  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>, OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */

package/src/components/TextInput/TextInput.tsx

@@ -34,8 +34,7 @@ export interface TextInputExpandedObj {
 }
 
 export interface TextInputProps
-  extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>, OUIAProps {
   /** Additional classes added to the text input. */
   className?: string;
   /** Flag to show if the text input is disabled. */

package/src/components/TimePicker/TimePicker.tsx

@@ -23,8 +23,10 @@ import { HelperText, HelperTextItem } from '../HelperText';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
 
-export interface TimePickerProps
-  extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
+export interface TimePickerProps extends Omit<
+  React.HTMLProps<HTMLDivElement>,
+  'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'
+> {
   /** Additional classes added to the time picker. */
   className?: string;
   /** Accessible label for the time picker */

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -5,7 +5,8 @@ export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
   const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(id);
+    // Allow toggling off if clicking the already selected item
+    setIsSelected(isSelected === id ? '' : id);
   };
   return (
     <ToggleGroup aria-label="Default with single selectable">

package/src/components/Wizard/WizardNavItem.tsx

@@ -10,8 +10,7 @@ import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
 
 export interface WizardNavItemProps
-  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>, OUIAProps {
   /** Additional classes spread to the wizard nav item */
   className?: string;
   /** Can nest a WizardNav component for substeps */