@patternfly/react-core 5.3.0-prerelease.2 → 5.3.0-prerelease.21

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

@@ -19,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-5"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -187,11 +187,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v5-c-drawer__panel pf-m-resizable pf-m-light-200"
-        id="pf-drawer-panel-6"
+        id="generated-id"
         style="--pf-v5-c-drawer__panel--md--FlexBasis: 300px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="pf-drawer-panel-6"
+          aria-controls="generated-id"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -283,7 +283,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v5-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-1"
+        id="generated-id"
       />
     </div>
   </div>
@@ -310,7 +310,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v5-c-drawer__panel"
         hidden=""
-        id="pf-drawer-panel-3"
+        id="generated-id"
       />
     </div>
   </div>
@@ -336,7 +336,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-0"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -410,7 +410,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-4"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"
@@ -484,7 +484,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v5-c-drawer__panel"
-        id="pf-drawer-panel-2"
+        id="generated-id"
       >
         <div
           class="pf-v5-c-drawer__body"

package/src/components/Dropdown/Dropdown.tsx

@@ -65,6 +65,10 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   zIndex?: number;
   /** Additional properties to pass to the Popper */
   popperProps?: DropdownPopperProps;
+  /** Height of the dropdown menu */
+  menuHeight?: string;
+  /** Maximum height of dropdown menu */
+  maxMenuHeight?: string;
 }
 
 const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -83,6 +87,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   zIndex = 9999,
   popperProps,
   onOpenChangeKeys = ['Escape', 'Tab'],
+  menuHeight,
+  maxMenuHeight,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -111,8 +117,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
@@ -138,6 +144,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     };
   }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
 
+  const scrollable = maxMenuHeight !== undefined || menuHeight !== undefined || isScrollable;
+
   const menu = (
     <Menu
       className={css(className)}
@@ -147,11 +155,13 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         shouldFocusToggleOnSelect && toggleRef.current.focus();
       }}
       isPlain={isPlain}
-      isScrollable={isScrollable}
+      isScrollable={scrollable}
       {...props}
       {...ouiaProps}
     >
-      <MenuContent>{children}</MenuContent>
+      <MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
+        {children}
+      </MenuContent>
     </Menu>
   );
   return (

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -7,6 +7,8 @@ import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
 import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup

package/src/components/Form/__tests__/FormSection.test.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { FormSection } from '../FormSection';
 import { render, screen } from '@testing-library/react';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('Check form section example against snapshot', () => {
   const Section = <FormSection />;
   const { asFragment } = render(Section);

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -17,12 +17,12 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           aria-disabled="false"
           aria-expanded="true"
           aria-label="toggle"
-          aria-labelledby="title-text-id2 form-field-group-toggle0"
+          aria-labelledby="title-text-id2 generated-id"
           class="pf-v5-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
-          id="form-field-group-toggle0"
+          id="generated-id"
           type="button"
         >
           <span

package/src/components/Form/__tests__/__snapshots__/FormSection.test.tsx.snap

@@ -12,13 +12,13 @@ exports[`Check form section example against snapshot 1`] = `
 exports[`Check form section example with title 1`] = `
 <DocumentFragment>
   <section
-    aria-labelledby="pf-form-section-title1"
+    aria-labelledby="generated-id"
     class="pf-v5-c-form__section"
     role="group"
   >
     <h4
       class="pf-v5-c-form__section-title"
-      id="pf-form-section-title1"
+      id="generated-id"
     >
       Title
     </h4>

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

@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { Label } from '../../Label';
 import { LabelGroup } from '../index';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('LabelGroup', () => {
   test('label group default', () => {
     const { asFragment } = render(

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -134,12 +134,12 @@ exports[`LabelGroup label group with category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-1"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-1"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -177,12 +177,12 @@ exports[`LabelGroup label group with category and tooltip 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-4"
+        id="generated-id"
       >
         A very long category name
       </span>
       <ul
-        aria-labelledby="pf-random-id-4"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -220,12 +220,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <span
         aria-hidden="true"
         class="pf-v5-c-label-group__label"
-        id="pf-random-id-2"
+        id="generated-id"
       >
         category
       </span>
       <ul
-        aria-labelledby="pf-random-id-2"
+        aria-labelledby="generated-id"
         class="pf-v5-c-label-group__list"
         role="list"
       >
@@ -254,12 +254,12 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         aria-disabled="false"
         aria-label="Close label group"
-        aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
+        aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v5-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF5/Button"
         data-ouia-safe="true"
-        id="remove_group_pf-random-id-2"
+        id="remove_group_generated-id"
         type="button"
       >
         <svg

package/src/components/Menu/Menu.tsx

@@ -156,8 +156,11 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       this.setState({ transitionMoveTarget: null });
     } else {
       const nextMenu = current.querySelector('#' + this.props.activeMenu) || current || null;
-      const nextMenuChildren = Array.from(nextMenu.getElementsByTagName('UL')[0].children);
-
+      const nextMenuLists = nextMenu.getElementsByTagName('UL');
+      if (nextMenuLists.length === 0) {
+        return;
+      }
+      const nextMenuChildren = Array.from(nextMenuLists[0].children);
       if (!this.state.currentDrilldownMenuId || nextMenu.id !== this.state.currentDrilldownMenuId) {
         this.setState({ currentDrilldownMenuId: nextMenu.id });
       } else {
@@ -167,7 +170,6 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       const nextTarget = nextMenuChildren.filter(
         (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
       )[0].firstChild;
-
       (nextTarget as HTMLElement).focus();
       (nextTarget as HTMLElement).tabIndex = 0;
     }

package/src/components/Menu/MenuContainer.tsx

@@ -69,8 +69,8 @@ export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector(
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,6 +3,15 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+export enum MenuToggleStatus {
+  success = 'success',
+  danger = 'danger',
+  warning = 'warning'
+}
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -37,6 +46,10 @@ export interface MenuToggleProps
   splitButtonOptions?: SplitButtonOptions;
   /** Variant styles of the menu toggle */
   variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
+  /** @beta Status styles of the menu toggle */
+  status?: 'success' | 'warning' | 'danger';
+  /** Overrides the status icon */
+  statusIcon?: React.ReactNode;
   /** Optional icon or image rendered inside the toggle, before the children content. It is
    * recommended to wrap most basic icons in our icon component.
    */
@@ -69,6 +82,8 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isFullWidth,
       splitButtonOptions,
       variant,
+      status,
+      statusIcon,
       innerRef,
       onClick,
       'aria-label': ariaLabel,
@@ -77,8 +92,25 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
     const isPlain = variant === 'plain';
     const isPlainText = variant === 'plainText';
     const isTypeahead = variant === 'typeahead';
+
+    let _statusIcon = statusIcon;
+    if (!statusIcon) {
+      switch (status) {
+        case MenuToggleStatus.success:
+          _statusIcon = <CheckCircleIcon aria-hidden="true" />;
+          break;
+        case MenuToggleStatus.warning:
+          _statusIcon = <ExclamationTriangleIcon aria-hidden="true" />;
+          break;
+        case MenuToggleStatus.danger:
+          _statusIcon = <ExclamationCircleIcon aria-hidden="true" />;
+          break;
+      }
+    }
+
     const toggleControls = (
       <span className={css(styles.menuToggleControls)}>
+        {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
         <span className={css(styles.menuToggleToggleIcon)}>
           <CaretDownIcon aria-hidden />
         </span>
@@ -111,6 +143,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps> {
       isExpanded && styles.modifiers.expanded,
       variant === 'primary' && styles.modifiers.primary,
       variant === 'secondary' && styles.modifiers.secondary,
+      status && styles.modifiers[status],
       (isPlain || isPlainText) && styles.modifiers.plain,
       isPlainText && styles.modifiers.text,
       isFullHeight && styles.modifiers.fullHeight,

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -84,7 +84,7 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
       </span>
     );
     return (
-      <label className={css(styles.check, !children && styles.modifiers.standalone, className)} htmlFor={id}>
+      <label className={css(styles.check, !children && styles.modifiers.standalone, className)}>
         <input
           className={css(styles.checkInput)}
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
@@ -93,7 +93,7 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
           ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
           aria-invalid={!isValid}
           disabled={isDisabled}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
+          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}
           {...getOUIAProps(
             MenuToggleCheckbox.displayName,
             ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,

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

@@ -57,6 +57,21 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('shows success status', () => {
+    render(<MenuToggle status="success">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+  });
+
+  test('shows warning status', () => {
+    render(<MenuToggle status="warning">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+  });
+
+  test('shows danger status', () => {
+    render(<MenuToggle status="danger">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+  });
+
   test('split toggle passes onClick', async () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();

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

@@ -17,7 +17,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ### Collapsed toggle
 
-A toggle is collapsed until it is selected by a user. 
+A toggle is collapsed until it is selected by a user.
 
 ```ts
 import React from 'react';
@@ -29,7 +29,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Expanded toggle
 
-When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . 
+When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts
 import React from 'react';
@@ -41,7 +41,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Disabled toggle
 
-To disable the selection and expansion of a toggle, use the `isDisabled` property. 
+To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts
 import React from 'react';
@@ -65,7 +65,7 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 ### With icons
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the  toggle.
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
@@ -111,7 +111,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### With avatar and text
 
-You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`. 
+You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`.
 
 This can be used alongside a text label that provides more context for the image.
 
@@ -150,9 +150,9 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### Plain toggle with icon
 
-To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`. 
+To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`.
 
-If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. 
+If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts
 import React from 'react';
@@ -171,6 +171,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
   </MenuToggle>
 </React.Fragment>
 ```
+
 ### Plain toggle with text label
 
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
@@ -201,27 +202,30 @@ The following example shows a split button with a `<MenuToggleCheckbox>`.
 Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.
 
 ```ts file='MenuToggleSplitButtonCheckbox.tsx'
+
 ```
 
 ### Split button toggle with text label
 
-To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.  
+To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
+
 ```
 
 ### Split button 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, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
 
 Actions may be used with primary and secondary toggle variants.
-    
+
 ```ts file='MenuToggleSplitButtonAction.tsx'
+
 ```
 
 ### Full height toggle
 
-A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. 
+A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property.
 
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
@@ -238,7 +242,7 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ### Full width toggle
 
-A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. 
+A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property.
 
 In the following example, the toggle fills the width of its parent as the window size changes.
 
@@ -249,7 +253,7 @@ import { MenuToggle } from '@patternfly/react-core';
 const fullWidth: React.FunctionComponent = () => {
   return (
     <MenuToggle isFullWidth aria-label="Full width menu toggle" >
-      Full width 
+      Full width
     </MenuToggle>
   );
 }
@@ -262,4 +266,15 @@ To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>
 To create a multiple typeahead toggle, pass a `<TextInputGroup>` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of `<MenuToggle>`.
 
 ```ts file='MenuToggleTypeahead.tsx'
+
+```
+
+### Status toggle
+
+To create a toggle with a status, pass in the `status` property to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
+
+When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
+
+```ts isBeta file='MenuToggleStatus.tsx'
+
 ```

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const MenuToggleStatus: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle status="success">Success</MenuToggle>
+    <br />
+    <br />
+    <MenuToggle status="warning">Warning</MenuToggle>
+    <HelperText>
+      <HelperTextItem variant="warning">Warning text that explains the issue.</HelperTextItem>
+    </HelperText>
+    <br />
+    <br />
+    <MenuToggle status="danger">Danger</MenuToggle>
+    <HelperText>
+      <HelperTextItem variant="error">Danger text that explains the issue.</HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { MultipleFileUpload } from '../MultipleFileUpload';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUpload', () => {
   test('renders with expected class names when not horizontal', () => {
     const { asFragment } = render(<MultipleFileUpload>Foo</MultipleFileUpload>);

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUploadStatus', () => {
   test('renders with expected class names', () => {
     const { asFragment } = render(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);