update(carbon-components-react) Bumped to carbon 10.7 + added missing types (#43392)

* Bumped to carbon 10.7 + added missing types

* onAddFile is optionnal

Co-authored-by: Sebastien GREGOIRE <sebastien.gregoire@ibm.com>

types/carbon-components-react/carbon-components-react-tests.tsx

@@ -18,6 +18,9 @@ import {
     TooltipDefinition,
     TextArea,
     TextInput,
+    FormItem,
+    FileUploaderDropContainer,
+    FileUploaderItem,
 } from 'carbon-components-react';
 import Link from 'carbon-components-react/lib/components/UIShell/Link';
 
@@ -182,12 +185,12 @@ interface T5RowType extends DataTableRow {
     col2: number;
 }
 const t5RowItems: T5RowType[] = [
-    { id: "row0", col1: 0, col2: 0},
-    { id: "row1", col1: 1, col2: 1},
+    { id: "row0", col1: 0, col2: 0 },
+    { id: "row1", col1: 1, col2: 1 },
 ];
 const t5Headers: DataTableHeader[] = [
-    {key: 'col1', header: 'First column'},
-    {key: 'col2', header: 'Second column'}
+    { key: 'col1', header: 'First column' },
+    { key: 'col2', header: 'Second column' }
 ];
 const t5 = (
     <DataTable
@@ -241,17 +244,17 @@ interface TestCompProps {
 
 class TestComp1 extends React.Component<TestCompProps> {
     render() {
-        return (<div/>);
+        return (<div />);
     }
 }
 
-const TestComp2 = (props: TestCompProps) => (<div/>);
+const TestComp2 = (props: TestCompProps) => (<div />);
 
 const uisLinkT1 = (
     <Link href="#test">Test</Link>
 );
 const uisLinkT2 = (
-    <Link<React.ImgHTMLAttributes<HTMLElement>> element="img" src="src"/>
+    <Link<React.ImgHTMLAttributes<HTMLElement>> element="img" src="src" />
 );
 const uisLinkT3 = (
     <Link<TestCompProps> element={TestComp1} someProp={2}>ASDF</Link>
@@ -265,7 +268,7 @@ interface TestCompPropsOverwrite {
     someProp: string,
 }
 
-const TestComp3 = (props: TestCompPropsOverwrite) => (<div/>);
+const TestComp3 = (props: TestCompPropsOverwrite) => (<div />);
 
 const uisLinkT5 = (
     <Link<TestCompPropsOverwrite> element={TestComp3} someProp="asdf">Testing Overwrite</Link>
@@ -287,7 +290,7 @@ const dropdownItemCanBeElement = (
 
 // TileGroup
 // Value nor name can be undefined
-let value: string|number = 5;
+let value: string | number = 5;
 let name = "old name";
 const tileGroupA = (
     <TileGroup
@@ -311,9 +314,9 @@ const tooltipDefHasTriggerClassName = (
 // Tabs
 const tabCanBeDisabled = (
     <Tab
-        handleTabAnchorFocus={() => {}}
-        handleTabClick={() => {}}
-        handleTabKeyDown={() => {}}
+        handleTabAnchorFocus={() => { }}
+        handleTabClick={() => { }}
+        handleTabKeyDown={() => { }}
         href="#"
         tabIndex={0}
         disabled
@@ -332,7 +335,7 @@ const SliderHasOnChange = (
 
 // TextArea
 const textAreaWithDefaultRef = (
-    <TextArea labelText=""/>
+    <TextArea labelText="" />
 );
 
 const HtmlTextAreaRef = React.createRef<HTMLTextAreaElement>();
@@ -401,6 +404,34 @@ const numberInput = (
 // FileUploader
 const fileUploaderHasOnChange = (
     <FileUploader
-        onChange={(e) => {} }
+        onChange={(e) => { }}
     />
 );
+
+const fileUploaderDropContainer = (
+    <FileUploaderDropContainer
+        accept={[
+            'image/jpeg',
+            'image/png'
+        ]}
+        labelText="Drag and drop files here or click to upload"
+        multiple
+        name=""
+        onAddFiles={(event, content) => { }}
+        onChange={(event) => { }}
+        role=""
+        tabIndex={0}
+    />
+)
+
+const fileUploaderItem = (
+    <FileUploaderItem
+        errorBody="500kb max file size. Select a new file and try again."
+        errorSubject="File size exceeds limit"
+        iconDescription="Clear file"
+        name="README.md"
+        onDelete={ (event, content) => {} }
+        status="edit"
+        uuid="id1"
+    />
+)

types/carbon-components-react/index.d.ts

@@ -1,6 +1,7 @@
-// Type definitions for carbon-components-react 7.6
+// Type definitions for carbon-components-react 7.7
 // Project: https://github.com/carbon-design-system/carbon/tree/master/packages/react
 // Definitions by: Kyle Albert <https://github.com/kalbert312>
+//                 Sebastien Gregoire <https://github.com/sgregoire>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.5
 
@@ -29,6 +30,8 @@ import _DatePickerInput from "./lib/components/DatePickerInput";
 import _Dropdown from "./lib/components/Dropdown";
 import _DropdownSkeleton from "./lib/components/Dropdown/Dropdown.Skeleton";
 import _FileUploader from "./lib/components/FileUploader";
+import _FileUploaderItem from "./lib/components/FileUploader/FileUploaderItem";
+import _FileUploaderDropContainer from "./lib/components/FileUploader/FileUploaderDropContainer";
 import _FileUploaderSkeleton from "./lib/components/FileUploader/FileUploader.Skeleton";
 import _Form from "./lib/components/Form";
 import _FormGroup from "./lib/components/FormGroup";
@@ -210,6 +213,8 @@ export { _DatePicker as DatePicker };
 export { _DatePickerInput as DatePickerInput };
 export { _Dropdown as Dropdown };
 export { _FileUploader as FileUploader };
+export { _FileUploaderItem as FileUploaderItem };
+export { _FileUploaderDropContainer as FileUploaderDropContainer };
 export { Filename, FileUploaderButton } from "./lib/components/FileUploader";
 export { _Form as Form };
 export { _FormGroup as FormGroup };

types/carbon-components-react/lib/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { ReactAttr } from "../../../typings/shared";
+
+interface FileUploaderDropContainerInheritedProps extends ReactAttr<HTMLLabelElement> {
+}
+
+export interface FileUploaderDropContainerProps extends FileUploaderDropContainerInheritedProps {
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Provide a unique id for the underlying <input> node
+   */
+  id?: string;
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * this control
+   */
+  // Required but has a default value
+  labelText?: string;
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple?: boolean;
+
+  /**
+   * Provide a name for the underlying <input> node
+   */
+  name?: string;
+
+  /**
+   * Provide an accessibility role for the <FileUploaderButton>
+   */
+  role?: string;
+
+  /**
+   * Provide a custom tabIndex value for the <FileUploaderButton>
+   */
+  tabIndex?: number;
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept?: string[];
+
+  /**
+   * Event handler that is called after files are added to the uploader
+   * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+   */
+  onAddFiles?: (event: React.MouseEvent<HTMLElement>, content: {addedFiles: string[]}) => void;
+}
+
+export default class FileUploaderDropContainer extends React.Component<FileUploaderDropContainerProps> { }

types/carbon-components-react/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import {
+    ValidityProps,
+    ReactAttr,
+    EmbeddedIconProps
+} from "../../../typings/shared";
+import { FileStatus } from "./FileUploader";
+
+interface FileUploaderItemInheritedProps extends
+    ReactAttr<HTMLSpanElement>,
+    EmbeddedIconProps,
+    Omit<ValidityProps, "invalidText"> {
+}
+
+export interface FileUploaderItemProps extends FileUploaderItemInheritedProps {
+    /**
+     * Unique identifier for the file object
+     */
+    // Required but has a default value
+    uuid?: string;
+
+    /**
+     * Name of the uploaded file
+     */
+    name?: string;
+
+    /**
+     * Status of the file upload
+     */
+    status?: FileStatus;
+
+    /**
+     * Event handler that is called after removing a file from the file uploader
+     * The event handler signature looks like `onDelete(evt, { uuid })`
+     */
+    onDelete?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, content: { uuid: string }) => void;
+
+    /**
+     * Error message subject for an invalid file upload
+     */
+    errorSubject?: NonNullable<React.ReactNode>;
+
+    /**
+     * Error message body for an invalid file upload
+     */
+    errorBody?: NonNullable<React.ReactNode>;
+}
+
+export default class FileUploaderItem extends React.Component<FileUploaderItemProps> { }

types/carbon-components-react/lib/components/FileUploader/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./FileUploader";
+export * from "./FileUploaderItem";
+export * from "./FileUploaderDropContainer";
 export * from "./FileUploader.Skeleton";
 export { default } from './FileUploader';