@patternfly/react-core 5.3.3 → 5.4.0-prerelease.10

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.3.3",
+  "version": "5.4.0-prerelease.10",
   "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",
@@ -40,28 +40,27 @@
   "scripts": {
     "build:umd": "rollup -c --environment IS_PRODUCTION",
     "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json",
-    "clean": "rimraf dist components layouts helpers next deprecated node_modules",
+    "clean": "rimraf dist components layouts helpers next deprecated",
     "generate": "node scripts/copyStyles.js",
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json",
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.3.2",
-    "@patternfly/react-styles": "^5.3.1",
-    "@patternfly/react-tokens": "^5.3.1",
+    "@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",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.3.1",
+    "@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",
-    "rimraf": "^3.0.2",
     "rollup": "^3.21.5",
     "rollup-plugin-scss": "^4.0.0",
     "rollup-plugin-svg": "2.0.0",
@@ -72,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "38759596db0c4d69f6e8a6f236c99e07f6bf04eb"
+  "gitHead": "63b697da491be753f6b0e24bf7814ad691828cb4"
 }

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/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);
       }

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

@@ -284,7 +284,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       ...editableProps
     }),
     ...(isClickableDisabled && isButton && { disabled: true }),
-    ...(isClickableDisabled && href && { tabindex: -1, 'aria-disabled': true })
+    ...(isClickableDisabled && href && { tabIndex: -1, 'aria-disabled': true })
   };
 
   let labelComponentChild = (

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

@@ -142,6 +142,93 @@ describe('Label', () => {
 
     await user.click(label);
 
-    expect(mockCallback).toBeCalledTimes(1);
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  test('disabled clickable label does not call passed callback on click', async () => {
+    const mockCallback = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Label isDisabled onClick={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const label = screen.getByText('Click me');
+
+    await user.click(label);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  test('disabled clickable label is a disabled button', async () => {
+    const mockCallback = jest.fn();
+
+    render(
+      <Label isDisabled onClick={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const labelButton = screen.getByRole('button');
+
+    expect(labelButton).toHaveAttribute('disabled');
+  });
+
+  test('link label is an anchor', () => {
+    const href = '#example';
+
+    render(<Label href={href}>Click me</Label>);
+
+    const anchor = screen.getByRole('link', { name: 'Click me' });
+
+    expect(anchor).toBeInTheDocument();
+    expect(anchor).toHaveAttribute('href', href);
+  });
+
+  test('disabled link label is an anchor with aria-disabled attribute', () => {
+    const href = '#example';
+
+    render(
+      <Label isDisabled href={href}>
+        Click me
+      </Label>
+    );
+
+    const anchor = screen.getByRole('link', { name: 'Click me' });
+
+    expect(anchor).toBeInTheDocument();
+    expect(anchor).toHaveAttribute('href', href);
+    expect(anchor).toHaveAttribute('tabIndex', '-1');
+    expect(anchor).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('disabled removable clickable label has a disabled close button', async () => {
+    const mockCallback = jest.fn();
+
+    render(
+      <Label isDisabled onClick={mockCallback} onClose={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const closeButton = screen.getByLabelText('Close Click me');
+
+    expect(closeButton).toBeDisabled();
+  });
+
+  test('disabled removable link label has a disabled close button', async () => {
+    const mockCallback = jest.fn();
+
+    render(
+      <Label isDisabled href="#" onClose={mockCallback}>
+        Click me
+      </Label>
+    );
+
+    const closeButton = screen.getByLabelText('Close Click me');
+
+    expect(closeButton).toBeDisabled();
   });
 });

package/src/components/MenuToggle/MenuToggle.tsx

@@ -129,6 +129,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
             aria-expanded={isExpanded}
             onClick={onClick}
             aria-label={ariaLabel || 'Menu toggle'}
+            tabIndex={-1}
           >
             {toggleControls}
           </button>

package/src/components/NumberInput/NumberInput.tsx

@@ -67,8 +67,10 @@ const defaultKeyDownHandler = (args: DefaultKeyDownHandlerArgs) => (event: React
   }
 };
 
+const DEFAULT_VALUE = 0;
+
 export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
-  value = 0,
+  value = DEFAULT_VALUE,
   className,
   widthChars,
   isDisabled = false,
@@ -121,7 +123,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           <Button
             variant="control"
             aria-label={minusBtnAriaLabel}
-            isDisabled={isDisabled || value <= min}
+            isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) <= min}
             onClick={(evt) => onMinus(evt, inputName)}
             {...minusBtnProps}
           >
@@ -149,7 +151,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           <Button
             variant="control"
             aria-label={plusBtnAriaLabel}
-            isDisabled={isDisabled || value >= max}
+            isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) >= max}
             onClick={(evt) => onPlus(evt, inputName)}
             {...plusBtnProps}
           >

package/src/components/Page/Page.tsx

@@ -27,6 +27,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   notificationDrawer?: React.ReactNode;
   /** Flag indicating Notification drawer in expanded */
   isNotificationDrawerExpanded?: boolean;
+  /** Sets default drawer size */
+  drawerDefaultSize?: string;
+  /** Sets the minimum drawer size*/
+  drawerMinSize?: string;
+  /** Sets the maximum drawer size */
+  drawerMaxSize?: string;
   /** Flag indicating if breadcrumb width should be limited */
   isBreadcrumbWidthLimited?: boolean;
   /** Callback when notification drawer panel is finished expanding. */
@@ -219,6 +225,9 @@ class Page extends React.Component<PageProps, PageState> {
       notificationDrawer,
       isNotificationDrawerExpanded,
       onNotificationDrawerExpand,
+      drawerDefaultSize,
+      drawerMinSize,
+      drawerMaxSize,
       isTertiaryNavWidthLimited,
       skipToContent,
       role,
@@ -310,7 +319,11 @@ class Page extends React.Component<PageProps, PageState> {
       </Component>
     );
 
-    const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
+    const panelContent = (
+      <DrawerPanelContent defaultSize={drawerDefaultSize} minSize={drawerMinSize} maxSize={drawerMaxSize}>
+        {notificationDrawer}
+      </DrawerPanelContent>
+    );
 
     return (
       <PageContextProvider value={context}>

package/src/components/Pagination/Navigation.tsx

@@ -29,7 +29,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Label for the English word "of". */
   ofWord?: string;
   /** The number of the current page. */
-  page: string | number;
+  page: number;
   /** The title of a page displayed beside the page number. */
   pagesTitle?: string;
   /** The title of a page displayed beside the page number (the plural form). */
@@ -55,13 +55,13 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Function called when user clicks to navigate to previous page. */
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
-  onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void;
   /** Function called when page is changed. */
   onSetPage: OnSetPage;
 }
 
 export interface NavigationState {
-  userInputPage?: React.ReactText;
+  userInputPage?: number | string;
 }
 
 class Navigation extends React.Component<NavigationProps, NavigationState> {
@@ -93,7 +93,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
     onPageInput: () => undefined as any
   };
 
-  private static parseInteger(input: React.ReactText, lastPage: number): number {
+  private static parseInteger(input: number | string, lastPage: number): number {
     // eslint-disable-next-line radix
     let inputPage = Number.parseInt(input as string, 10);
     if (!Number.isNaN(inputPage)) {
@@ -105,14 +105,14 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
 
   private onChange(event: React.FormEvent<HTMLInputElement>, lastPage: number): void {
     const inputPage = Navigation.parseInteger(event.currentTarget.value, lastPage);
-    this.setState({ userInputPage: Number.isNaN(inputPage as number) ? event.currentTarget.value : inputPage });
+    this.setState({ userInputPage: Number.isNaN(inputPage) ? event.currentTarget.value : inputPage });
   }
 
   private onKeyDown(
     event: React.KeyboardEvent<HTMLInputElement>,
-    page: number | string,
+    page: number,
     lastPage: number,
-    onPageInput: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void
+    onPageInput: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void
   ): void {
     const allowedKeys = [
       'Tab',
@@ -126,9 +126,9 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
       'ArrowDown'
     ];
     if (event.key === KeyTypes.Enter) {
-      const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage) as number;
-      onPageInput(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
-      this.handleNewPage(event, Number.isNaN(inputPage) ? (page as number) : inputPage);
+      const inputPage = Navigation.parseInteger(this.state.userInputPage, lastPage);
+      onPageInput(event, Number.isNaN(inputPage) ? page : inputPage);
+      this.handleNewPage(event, Number.isNaN(inputPage) ? page : inputPage);
     } else if (!/^\d*$/.test(event.key) && !allowedKeys.includes(event.key)) {
       event.preventDefault();
     }
@@ -206,7 +206,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
             isDisabled={isDisabled || page === firstPage || page === 0}
             data-action="previous"
             onClick={(event) => {
-              const newPage = (page as number) - 1 >= 1 ? (page as number) - 1 : 1;
+              const newPage = page - 1 >= 1 ? page - 1 : 1;
               onPreviousClick(event, newPage);
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
@@ -244,7 +244,7 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
             aria-label={toNextPageAriaLabel}
             data-action="next"
             onClick={(event) => {
-              const newPage = (page as number) + 1 <= lastPage ? (page as number) + 1 : lastPage;
+              const newPage = page + 1 <= lastPage ? page + 1 : lastPage;
               onNextClick(event, newPage);
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });

package/src/components/Pagination/Pagination.tsx

@@ -148,7 +148,7 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   /** Function called when user clicks on navigate to next page. */
   onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user inputs page number. */
-  onPageInput?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void;
   /** Function called when user selects number of items per page. */
   onPerPageSelect?: OnPerPageSelect;
   /** Function called when user clicks on navigate to previous page. */
@@ -232,6 +232,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   ...props
 }: PaginationProps) => {
   const paginationRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const getLastPage = () =>
     // when itemCount is not known let's set lastPage as page+1 as we don't know the total count
@@ -335,6 +336,7 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
           widgetId={`${widgetId}-${variant}`}
           toggleTemplate={toggleTemplate}
           isDisabled={isDisabled}
+          containerRef={containerRef}
         />
       )}
       <Navigation

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -52,6 +52,7 @@ export interface PaginationOptionsMenuProps extends React.HTMLProps<HTMLDivEleme
   onPerPageSelect?: OnPerPageSelect;
   /** Label for the English word "of". */
   ofWord?: string;
+  containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMenuProps> = ({
@@ -74,12 +75,12 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   isLastFullPageShown = false,
   itemsTitle = 'items',
   toggleTemplate,
-  onPerPageSelect = () => null as any
+  onPerPageSelect = () => null as any,
+  containerRef
 }: PaginationOptionsMenuProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
     setIsOpen((prevState) => !prevState);
@@ -208,18 +209,16 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   );
 
   return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        isVisible={isOpen}
-        direction={dropDirection}
-        appendTo={containerRef.current || undefined}
-        minWidth={minWidth !== undefined ? minWidth : 'revert'}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      direction={dropDirection}
+      appendTo={containerRef?.current || undefined}
+      minWidth={minWidth !== undefined ? minWidth : 'revert'}
+    />
   );
 };
 

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -2,48 +2,46 @@
 
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <div>
-    <button
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
-      id="''-toggle"
-      type="button"
+  <button
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
+    id="''-toggle"
+    type="button"
+  >
+    <span
+      class="pf-v5-c-menu-toggle__text"
+    >
+      <b>
+        0 - 0
+      </b>
+      Custom toggle template of
+      <b>
+        0
+      </b>
+       'items'
+    </span>
+    <span
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-v5-c-menu-toggle__text"
-      >
-        <b>
-          0 - 0
-        </b>
-        Custom toggle template of
-        <b>
-          0
-        </b>
-         'items'
-      </span>
-      <span
-        class="pf-v5-c-menu-toggle__controls"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
-        <span
-          class="pf-v5-c-menu-toggle__toggle-icon"
+        <svg
+          aria-hidden="true"
+          class="pf-v5-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 320 512"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 320 512"
-            width="1em"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
-          </svg>
-        </span>
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
       </span>
-    </button>
-  </div>
+    </span>
+  </button>
 </DocumentFragment>
 `;