@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

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

@@ -9,15 +9,10 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -36,13 +31,14 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           <EllipsisVIcon />
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="action">
+        <DropdownItem value={0} key="action">
           Action
         </DropdownItem>
         <DropdownItem
-          itemId={1}
+          value={1}
           key="link"
           to="#default-link2"
           // Prevent the default onClick functionality for example purposes
@@ -50,17 +46,17 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
         >
           Link
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled action">
+        <DropdownItem value={2} isDisabled key="disabled action">
           Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem itemId={4} key="separated action">
+        <DropdownItem value={4} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </DropdownList>

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -40,7 +40,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
   const privateRef = React.useRef(null);
   const ref = innerRef || privateRef;
   return (
-    <div className={css('pf-c-dual-list-selector__controls-item', className)} {...props}>
+    <div className={css('pf-v5-c-dual-list-selector__controls-item', className)} {...props}>
       <Button
         isDisabled={isDisabled}
         aria-disabled={isDisabled}

package/src/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -30,9 +30,9 @@ export const DualListSelectorControlsWrapperBase: React.FunctionComponent<DualLi
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !wrapperRef.current ||
-      (wrapperRef.current !== (event.target as HTMLElement).closest('.pf-c-dual-list-selector__controls') &&
-        !Array.from(wrapperRef.current.getElementsByClassName('pf-v5-c-dual-list-selector__controls')).includes(
-          (event.target as HTMLElement).closest('.pf-c-dual-list-selector__controls')
+      (wrapperRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`) &&
+        !Array.from(wrapperRef.current.getElementsByClassName(styles.dualListSelectorControls)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorControls}`)
         ))
     ) {
       return;

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -51,9 +51,9 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   const handleKeys = (event: KeyboardEvent) => {
     if (
       !menuRef.current ||
-      (menuRef.current !== (event.target as HTMLElement).closest('.pf-c-dual-list-selector__menu') &&
-        !Array.from(menuRef.current.getElementsByClassName('pf-v5-c-dual-list-selector__menu')).includes(
-          (event.target as HTMLElement).closest('.pf-c-dual-list-selector__menu')
+      (menuRef.current !== (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`) &&
+        !Array.from(menuRef.current.getElementsByClassName(styles.dualListSelectorMenu)).includes(
+          (event.target as HTMLElement).closest(`.${styles.dualListSelectorMenu}`)
         ))
     ) {
       return;
@@ -62,7 +62,7 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
     const validOptions = isTree
       ? (Array.from(
           menuRef.current.querySelectorAll(
-            '.pf-c-dual-list-selector__item-toggle, .pf-c-dual-list-selector__item-check > input'
+            `.${styles.dualListSelectorItemToggle}, .${styles.dualListSelectorItemCheck} > input`
           )
         ) as Element[])
       : (Array.from(menuRef.current.getElementsByTagName('LI')) as Element[]).filter(
@@ -74,14 +74,14 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
       validOptions,
       (element: Element) => activeElement.contains(element),
       (element: Element) => {
-        if (element.classList.contains('.pf-c-dual-list-selector__list-item')) {
+        if (element.classList.contains(`.${styles.dualListSelectorListItem}`)) {
           setFocusedOption(element.id);
         } else {
-          setFocusedOption(element.closest('.pf-c-dual-list-selector__list-item').id);
+          setFocusedOption(element.closest(`.${styles.dualListSelectorListItem}`).id);
         }
         return element;
       },
-      ['.pf-c-dual-list-selector__item-toggle', '.pf-c-dual-list-selector__item-check > input'],
+      [`.${styles.dualListSelectorItemToggle}`, `.${styles.dualListSelectorItemCheck} > input`],
       undefined,
       false,
       false,

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -151,7 +151,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
     >
       {title && (
         <div className={css(styles.dualListSelectorHeader)}>
-          <div className="pf-c-dual-list-selector__title">
+          <div className="pf-v5-c-dual-list-selector__title">
             <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
           </div>
         </div>

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

@@ -13,7 +13,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -103,7 +103,7 @@ exports[`DualListSelector basic 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -130,7 +130,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -156,7 +156,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -183,7 +183,7 @@ exports[`DualListSelector basic 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -217,7 +217,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -262,7 +262,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -353,7 +353,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -380,7 +380,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -407,7 +407,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -434,7 +434,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -468,7 +468,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -514,7 +514,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -615,7 +615,7 @@ exports[`DualListSelector with actions 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -642,7 +642,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -668,7 +668,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -694,7 +694,7 @@ exports[`DualListSelector with actions 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -728,7 +728,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -839,7 +839,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -929,7 +929,7 @@ exports[`DualListSelector with custom status 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -956,7 +956,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -982,7 +982,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1009,7 +1009,7 @@ exports[`DualListSelector with custom status 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1043,7 +1043,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1088,7 +1088,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1219,7 +1219,7 @@ exports[`DualListSelector with search inputs 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1246,7 +1246,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -1272,7 +1272,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1299,7 +1299,7 @@ exports[`DualListSelector with search inputs 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1333,7 +1333,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1419,7 +1419,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"
@@ -1584,7 +1584,7 @@ exports[`DualListSelector with tree 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1611,7 +1611,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="false"
@@ -1637,7 +1637,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1664,7 +1664,7 @@ exports[`DualListSelector with tree 1`] = `
         </button>
       </div>
       <div
-        class="pf-c-dual-list-selector__controls-item"
+        class="pf-v5-c-dual-list-selector__controls-item"
       >
         <button
           aria-disabled="true"
@@ -1698,7 +1698,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v5-c-dual-list-selector__header"
       >
         <div
-          class="pf-c-dual-list-selector__title"
+          class="pf-v5-c-dual-list-selector__title"
         >
           <div
             class="pf-v5-c-dual-list-selector__title-text"

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -1,7 +1,7 @@
 ---
 id: Dual list selector
 section: components
-cssPrefix: 'pf-c-dual-list-selector'
+cssPrefix: 'pf-v5-c-dual-list-selector'
 propComponents:
   [
     'DualListSelector',

package/src/components/EmptyState/EmptyStateHeader.tsx

@@ -27,10 +27,10 @@ export const EmptyStateHeader: React.FunctionComponent<EmptyStateHeaderProps> =
   icon,
   ...props
 }: EmptyStateHeaderProps) => (
-  <div className={css('pf-c-empty-state__header', className)} {...props}>
+  <div className={css('pf-v5-c-empty-state__header', className)} {...props}>
     {icon}
     {(titleText || children) && (
-      <div className={css('pf-c-empty-state__title')}>
+      <div className={css('pf-v5-c-empty-state__title')}>
         {titleText && (
           <HeadingLevel className={css(styles.emptyStateTitleText, titleClassName)}>{titleText}</HeadingLevel>
         )}

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

@@ -9,10 +9,10 @@ exports[`EmptyState Full height 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -29,7 +29,7 @@ exports[`EmptyState Full height 1`] = `
 exports[`EmptyState Header with icon 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__header"
+    class="pf-v5-c-empty-state__header"
   >
     <div
       class="pf-v5-c-empty-state__icon"
@@ -59,10 +59,10 @@ exports[`EmptyState Main 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -123,10 +123,10 @@ exports[`EmptyState Main variant large 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -149,10 +149,10 @@ exports[`EmptyState Main variant small 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"
@@ -175,10 +175,10 @@ exports[`EmptyState Main variant xs 1`] = `
       class="pf-v5-c-empty-state__content"
     >
       <div
-        class="pf-c-empty-state__header"
+        class="pf-v5-c-empty-state__header"
       >
         <div
-          class="pf-c-empty-state__title"
+          class="pf-v5-c-empty-state__title"
         >
           <h1
             class="pf-v5-c-empty-state__title-text"

package/src/components/EmptyState/examples/EmptyState.md

@@ -1,7 +1,7 @@
 ---
 id: Empty state
 section: components
-cssPrefix: pf-c-empty-state
+cssPrefix: pf-v5-c-empty-state
 propComponents: ['EmptyState', 'EmptyStateHeader', 'EmptyStateIcon', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions']
 ---
 import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -1,7 +1,7 @@
 ---
 id: Expandable section
 section: components
-cssPrefix: pf-c-expandable-section
+cssPrefix: pf-v5-c-expandable-section
 propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 

package/src/components/FileUpload/FileUpload.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
+import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
+import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
 export interface FileUploadProps

package/src/components/FileUpload/FileUploadField.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 import { css } from '@patternfly/react-styles';
-import { InputGroup } from '../InputGroup';
+import { InputGroup, InputGroupItem } from '../InputGroup';
 import { TextInput } from '../TextInput';
 import { Button, ButtonVariant } from '../Button';
 import { TextArea, TextAreResizeOrientation } from '../TextArea';
@@ -130,31 +130,37 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
     >
       <div className={styles.fileUploadFileSelect}>
         <InputGroup>
-          <TextInput
-            isReadOnly // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
-            isDisabled={isDisabled}
-            id={`${id}-filename`}
-            name={`${id}-filename`}
-            aria-label={filenameAriaLabel}
-            placeholder={filenamePlaceholder}
-            aria-describedby={`${id}-browse-button`}
-            value={filename}
-          />
-          <Button
-            id={`${id}-browse-button`}
-            variant={ButtonVariant.control}
-            onClick={onBrowseButtonClick}
-            isDisabled={isDisabled}
-          >
-            {browseButtonText}
-          </Button>
-          <Button
-            variant={ButtonVariant.control}
-            isDisabled={isDisabled || isClearButtonDisabled}
-            onClick={onClearButtonClick}
-          >
-            {clearButtonText}
-          </Button>
+          <InputGroupItem isFill>
+            <TextInput
+              readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              isDisabled={isDisabled}
+              id={`${id}-filename`}
+              name={`${id}-filename`}
+              aria-label={filenameAriaLabel}
+              placeholder={filenamePlaceholder}
+              aria-describedby={`${id}-browse-button`}
+              value={filename}
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              id={`${id}-browse-button`}
+              variant={ButtonVariant.control}
+              onClick={onBrowseButtonClick}
+              isDisabled={isDisabled}
+            >
+              {browseButtonText}
+            </Button>
+          </InputGroupItem>
+          <InputGroupItem>
+            <Button
+              variant={ButtonVariant.control}
+              isDisabled={isDisabled || isClearButtonDisabled}
+              onClick={onClearButtonClick}
+            >
+              {clearButtonText}
+            </Button>
+          </InputGroupItem>
         </InputGroup>
       </div>
       <div className={styles.fileUploadFileDetails}>