@patternfly/react-core 6.0.0-prerelease.20 → 6.0.0-prerelease.21

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.0.0-prerelease.19","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.0.0-prerelease.20","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.0.0-prerelease.19","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.0.0-prerelease.20","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.0.0-prerelease.19","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.0.0-prerelease.20","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-prerelease.20",
+  "version": "6.0.0-prerelease.21",
   "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,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-prerelease.6",
-    "@patternfly/react-styles": "^6.0.0-prerelease.5",
-    "@patternfly/react-tokens": "^6.0.0-prerelease.6",
+    "@patternfly/react-icons": "^6.0.0-prerelease.7",
+    "@patternfly/react-styles": "^6.0.0-prerelease.6",
+    "@patternfly/react-tokens": "^6.0.0-prerelease.7",
     "focus-trap": "7.6.0",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-prerelease.13",
+    "@patternfly/patternfly": "6.0.0-prerelease.15",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5decd6a8bf9632288abdbc98d3cac1902303c04e"
+  "gitHead": "d36646de28fe6e9e231103b909e37051bd58ec5b"
 }

package/src/components/MenuToggle/MenuToggle.tsx

@@ -21,13 +21,6 @@ export enum MenuToggleSize {
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
-export interface SplitButtonOptions {
-  /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
-  items: React.ReactNode[];
-  /** Variant of split button toggle */
-  variant?: 'action' | 'checkbox';
-}
-
 export interface MenuToggleProps
   extends Omit<
       React.DetailedHTMLProps<
@@ -51,8 +44,8 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
-  /** Object used to configure a split button menu toggle */
-  splitButtonOptions?: SplitButtonOptions;
+  /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
+  splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
   /** Status styles of the menu toggle */
@@ -107,7 +100,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       isFullHeight,
       isFullWidth,
       isPlaceholder,
-      splitButtonOptions,
+      splitButtonItems,
       variant,
       status,
       statusIcon,
@@ -204,17 +197,10 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       );
     }
 
-    if (splitButtonOptions) {
+    if (splitButtonItems) {
       return (
-        <div
-          ref={innerRef as React.Ref<HTMLDivElement>}
-          className={css(
-            commonStyles,
-            styles.modifiers.splitButton,
-            splitButtonOptions?.variant === 'action' && styles.modifiers.action
-          )}
-        >
-          {splitButtonOptions?.items}
+        <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>
+          {splitButtonItems}
           <button
             className={css(styles.menuToggleButton, children && styles.modifiers.text)}
             type="button"

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

@@ -7,6 +7,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
+import '@testing-library/jest-dom';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -82,17 +83,15 @@ describe('menu toggle', () => {
     render(
       <MenuToggle
         onClick={mockClick}
-        splitButtonOptions={{
-          items: [
-            <MenuToggleCheckbox
-              id="split-button-checkbox-with-text-disabled-example"
-              key="split-checkbox-with-text-disabled"
-              aria-label="Select all"
-            >
-              10 selected
-            </MenuToggleCheckbox>
-          ]
-        }}
+        splitButtonItems={[
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-disabled-example"
+            key="split-checkbox-with-text-disabled"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]}
         aria-label="Menu toggle with checkbox split button and text"
       />
     );

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -3,7 +3,7 @@ id: Menu toggle
 section: components
 subsection: menus
 cssPrefix: pf-v6-c-menu-toggle
-propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox', 'SplitButtonOptions']
+propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 ---
 
 import './MenuToggle.css'
@@ -203,7 +203,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 To add a checkbox (or other action/control) to a menu toggle, use a split button.
 
-A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
+A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonItems` property. Elements to be displayed before the toggle button must be included in the `splitButtonItems`.
 
 The following example shows a split button with a `<MenuToggleCheckbox>`.
 
@@ -217,7 +217,7 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonOptions`. 
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
@@ -225,7 +225,7 @@ To link a split toggle label to the toggle's checkbox, pass both the label and t
 
 ### Split toggle with checkbox and toggle text 
 
-To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonOptions`.
+To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
 
@@ -233,7 +233,7 @@ To link a split toggle label to the toggle button itself, pass the label to the
 
 ### Split toggle with action
 
-To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
+To add an action to a split button, add a `<MenuToggleAction>` to the `splitButtonItems` property.
 
 Actions may be used with primary and secondary toggle variants.
 

package/src/components/MenuToggle/examples/MenuToggleSplitButtonAction.tsx

@@ -4,46 +4,37 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        variant: 'action',
-        items: [
-          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
-            Action
-          </MenuToggleAction>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
+          Action
+        </MenuToggleAction>
+      ]}
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        variant: 'action',
-        items: [
-          <MenuToggleAction
-            id="split-button-action-primary-example-with-toggle-button"
-            key="split-action-primary"
-            aria-label="Action"
-          >
-            Action
-          </MenuToggleAction>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleAction
+          id="split-button-action-primary-example-with-toggle-button"
+          key="split-action-primary"
+          aria-label="Action"
+        >
+          Action
+        </MenuToggleAction>
+      ]}
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        variant: 'action',
-        items: [
-          <MenuToggleAction
-            id="split-button-action-secondary-example-with-toggle-button"
-            key="split-action-secondary"
-            aria-label="Action"
-          >
-            Action
-          </MenuToggleAction>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleAction
+          id="split-button-action-secondary-example-with-toggle-button"
+          key="split-action-secondary"
+          aria-label="Action"
+        >
+          Action
+        </MenuToggleAction>
+      ]}
       aria-label="Menu toggle with action split button"
     />
   </React.Fragment>

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckbox.tsx

@@ -4,23 +4,23 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+      ]}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+      ]}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+      ]}
       aria-label="Menu toggle with checkbox split button"
     />
   </React.Fragment>

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx

@@ -4,47 +4,41 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-example"
-            key="split-checkbox-with-text"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-with-text-example"
+          key="split-checkbox-with-text"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
       aria-label="Menu toggle with checkbox split button and text"
     />{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-primary-example"
-            key="split-checkbox-primary"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-primary-example"
+          key="split-checkbox-primary"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
       aria-label="Primary menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-secondary-example"
-            key="split-checkbox-secondary"
-            aria-label="Select all"
-          >
-            10 selected
-          </MenuToggleCheckbox>
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-secondary-example"
+          key="split-checkbox-secondary"
+          aria-label="Select all"
+        >
+          10 selected
+        </MenuToggleCheckbox>
+      ]}
       aria-label="Secondary menu toggle with checkbox split button"
     />
   </React.Fragment>

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx

@@ -4,45 +4,39 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-with-text-example"
-            key="split-checkbox-with-text"
-            aria-label="Select all"
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-with-text-example"
+          key="split-checkbox-with-text"
+          aria-label="Select all"
+        />
+      ]}
       aria-label="Menu toggle with checkbox split button and text"
     >
       10 selected
     </MenuToggle>{' '}
     <MenuToggle
       variant="primary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-primary-example"
-            key="split-checkbox-primary"
-            aria-label="Select all"
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-primary-example"
+          key="split-checkbox-primary"
+          aria-label="Select all"
+        />
+      ]}
       aria-label="Primary menu toggle with checkbox split button"
     >
       10 selected
     </MenuToggle>{' '}
     <MenuToggle
       variant="secondary"
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-secondary-example"
-            key="split-checkbox-secondary"
-            aria-label="Select all"
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="split-button-checkbox-secondary-example"
+          key="split-checkbox-secondary"
+          aria-label="Select all"
+        />
+      ]}
       aria-label="Secondary menu toggle with checkbox split button"
     >
       10 selected

package/src/components/Page/Page.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
-import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
+import { Drawer, DrawerContent, DrawerPanelContent } from '../Drawer';
 import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb';
 import { PageGroup, PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
@@ -345,9 +345,7 @@ class Page extends React.Component<PageProps, PageState> {
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>
               <Drawer isExpanded={isNotificationDrawerExpanded} onExpand={(event) => onNotificationDrawerExpand(event)}>
-                <DrawerContent panelContent={panelContent}>
-                  <DrawerContentBody>{main}</DrawerContentBody>
-                </DrawerContent>
+                <DrawerContent panelContent={panelContent}>{main}</DrawerContent>
               </Drawer>
             </div>
           )}

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -260,15 +260,13 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                   isExpanded={isSplitButtonDropdownOpen}
                   onClick={onSplitButtonToggle}
                   aria-label="Toolbar stacked example split toggle"
-                  splitButtonOptions={{
-                    items: [
-                      <MenuToggleCheckbox
-                        key="toolbar-stacked-split-button-checkbox-1"
-                        id="toolbar-stacked-split-button-checkbox-1"
-                        aria-label="Select all"
-                      />
-                    ]
-                  }}
+                  splitButtonItems={[
+                    <MenuToggleCheckbox
+                      key="toolbar-stacked-split-button-checkbox-1"
+                      id="toolbar-stacked-split-button-checkbox-1"
+                      aria-label="Select all"
+                    />
+                  ]}
                 />
               )}
             >

package/src/demos/CardView/examples/CardView.tsx

@@ -283,19 +283,17 @@ export const CardViewBasic: React.FunctionComponent = () => {
             isExpanded={splitButtonDropdownIsOpen}
             onClick={onSplitButtonToggle}
             aria-label="Select cards"
-            splitButtonOptions={{
-              items: [
-                <MenuToggleCheckbox
-                  id="split-dropdown-checkbox"
-                  key="split-dropdown-checkbox"
-                  aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
-                  isChecked={areAllSelected}
-                  onClick={(e) => splitCheckboxSelectAll(e)}
-                >
-                  {numSelected !== 0 && `${numSelected} selected`}
-                </MenuToggleCheckbox>
-              ]
-            }}
+            splitButtonItems={[
+              <MenuToggleCheckbox
+                id="split-dropdown-checkbox"
+                key="split-dropdown-checkbox"
+                aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}
+                isChecked={areAllSelected}
+                onClick={(e) => splitCheckboxSelectAll(e)}
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </MenuToggleCheckbox>
+            ]}
           ></MenuToggle>
         )}
       >

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -38,15 +38,13 @@ export const DataListBasic: React.FunctionComponent = () => {
       <ToolbarItem variant="bulk-select">
         <MenuToggle
           aria-label="Select cards"
-          splitButtonOptions={{
-            items: [
-              <MenuToggleCheckbox
-                id="split-dropdown-checkbox"
-                key="split-dropdown-checkbox"
-                aria-label={'Select all cards'}
-              />
-            ]
-          }}
+          splitButtonItems={[
+            <MenuToggleCheckbox
+              id="split-dropdown-checkbox"
+              key="split-dropdown-checkbox"
+              aria-label={'Select all cards'}
+            />
+          ]}
         ></MenuToggle>
       </ToolbarItem>
       <ToolbarItem>

package/src/demos/Filters/examples/FilterAttributeSearch.tsx

@@ -209,17 +209,15 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="attribute-search-input-bulk-select"
-            key="attribute-search-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="attribute-search-input-bulk-select"
+          key="attribute-search-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterCheckboxSelect.tsx

@@ -187,17 +187,15 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="checkbox-bulk-select"
-            key="checkbox-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="checkbox-bulk-select"
+          key="checkbox-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );

package/src/demos/Filters/examples/FilterFaceted.tsx

@@ -192,17 +192,15 @@ export const FilterFaceted: React.FunctionComponent = () => {
       ref={bulkSelectToggleRef}
       onClick={onBulkSelectToggleClick}
       isExpanded={isBulkSelectOpen}
-      splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="filter-faceted-input-bulk-select"
-            key="filter-faceted-input-bulk-select"
-            aria-label="Select all"
-            isChecked={menuToggleCheckmark}
-            onChange={(checked, _event) => selectAllRepos(checked)}
-          />
-        ]
-      }}
+      splitButtonItems={[
+        <MenuToggleCheckbox
+          id="filter-faceted-input-bulk-select"
+          key="filter-faceted-input-bulk-select"
+          aria-label="Select all"
+          isChecked={menuToggleCheckmark}
+          onChange={(checked, _event) => selectAllRepos(checked)}
+        />
+      ]}
       aria-label="Full table selection checkbox"
     />
   );