chore(content-uploader): Migrate UploadInput (#3594)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

src/elements/content-uploader/UploadInput.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+// https://stackoverflow.com/questions/72787050/typescript-upload-directory-property-directory-does-not-exist-on-type
+// Extend the InputHTMLAttributes interface to include the directory attribute
+declare module 'react' {
+    interface InputHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        directory?: string;
+        webkitdirectory?: string;
+    }
+}
+
+export interface UploadInputProps {
+    handleChange: React.ChangeEventHandler<HTMLInputElement>;
+    inputLabel?: React.ReactNode;
+    inputLabelClass?: string;
+    isFolderUpload?: boolean;
+    isMultiple?: boolean;
+}
+
+const UploadInput = ({
+    handleChange,
+    inputLabel,
+    inputLabelClass = '',
+    isFolderUpload = false,
+    isMultiple = true,
+}: UploadInputProps) => {
+    const inputRef = React.useRef(null);
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLLabelElement>) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            if (inputRef.current) {
+                inputRef.current.click();
+            }
+        }
+    };
+
+    return inputLabel ? (
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/no-noninteractive-tabindex
+        <label className={inputLabelClass} onKeyDown={onKeyDown} tabIndex={0}>
+            {inputLabel}
+            <input
+                data-testid="upload-input"
+                directory={isFolderUpload ? '' : undefined}
+                multiple={isMultiple}
+                onChange={handleChange}
+                ref={inputRef}
+                type="file"
+                webkitdirectory={isFolderUpload ? '' : undefined}
+            />
+        </label>
+    ) : null;
+};
+
+export default UploadInput;

src/elements/content-uploader/__tests__/UploadInput.test.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import UploadInput from '../UploadInput';
+
+describe('elements/content-uploader/UploadInput', () => {
+    const getWrapper = props => render(<UploadInput handleChange={jest.fn()} {...props} />);
+
+    test('should render correctly when inputLabel is available', () => {
+        getWrapper({
+            inputLabelClass: 'inputLabelClass',
+            inputLabel: 'yo',
+        });
+
+        expect(screen.getByText('yo')).toBeInTheDocument();
+        expect(screen.getByText('yo')).toHaveClass('inputLabelClass');
+    });
+
+    test('should render correctly when inputLabel is not available', () => {
+        const { container } = getWrapper({});
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    test('should render correctly when isFolderUpload is true', () => {
+        getWrapper({
+            inputLabel: 'yo',
+            isFolderUpload: true,
+        });
+
+        expect(screen.getByText('yo')).toBeInTheDocument();
+        expect(screen.getByLabelText('yo')).toHaveAttribute('webkitdirectory', '');
+    });
+
+    test('should render correctly when isFolderUpload is false', () => {
+        getWrapper({
+            inputLabel: 'yo',
+            isFolderUpload: false,
+        });
+
+        expect(screen.getByText('yo')).toBeInTheDocument();
+        expect(screen.getByLabelText('yo')).not.toHaveAttribute('webkitdirectory');
+    });
+
+    test('should render correctly when isMultiple is true', () => {
+        getWrapper({
+            inputLabel: 'yo',
+            isMultiple: true,
+        });
+
+        expect(screen.getByText('yo')).toBeInTheDocument();
+        expect(screen.getByLabelText('yo')).toHaveAttribute('multiple');
+    });
+
+    test('should render correctly when isMultiple is false', () => {
+        getWrapper({
+            inputLabel: 'yo',
+            isMultiple: false,
+        });
+
+        expect(screen.getByText('yo')).toBeInTheDocument();
+        expect(screen.getByLabelText('yo')).not.toHaveAttribute('multiple');
+    });
+});