@carbon/react 1.32.0 → 1.33.0-rc.0

package/lib/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,175 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
+    /**
+     * Specify the types of files that this input should be able to receive
+     */
+    accept?: string[];
+    /**
+     * Specify the type of the `<FileUploaderButton>`
+     */
+    buttonKind?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'danger--primary' | 'danger--ghost' | 'danger--tertiary' | 'tertiary';
+    /**
+     * Provide the label text to be read by screen readers when interacting with
+     * the `<FileUploaderButton>`
+     */
+    buttonLabel?: string;
+    /**
+     * Provide a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the status of the File Upload
+     */
+    filenameStatus: 'edit' | 'complete' | 'uploading';
+    /**
+     * Provide a description for the complete/close icon that can be read by screen readers
+     */
+    iconDescription: string;
+    /**
+     * Specify the description text of this `<FileUploader>`
+     */
+    labelDescription?: string;
+    /**
+     * Specify the title text of this `<FileUploader>`
+     */
+    labelTitle?: 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 optional `onChange` hook that is called each time the input is
+     * changed
+     */
+    onChange?: (event: any) => void;
+    /**
+     * Provide an optional `onClick` hook that is called each time the
+     * FileUploader is clicked
+     */
+    onClick?: (event: any) => void;
+    /**
+     * Provide an optional `onDelete` hook that is called when an uploaded item
+     * is removed
+     */
+    onDelete?: (event: any) => void;
+    /**
+     * Specify the size of the FileUploaderButton, from a list of available
+     * sizes.
+     */
+    size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
+}
+export default class FileUploader extends React.Component<FileUploaderProps, {
+    filenames: string[];
+}> {
+    static propTypes: {
+        /**
+         * Specify the types of files that this input should be able to receive
+         */
+        accept: PropTypes.Requireable<(string | null | undefined)[]>;
+        /**
+         * Specify the type of the `<FileUploaderButton>`
+         */
+        buttonKind: PropTypes.Requireable<string>;
+        /**
+         * Provide the label text to be read by screen readers when interacting with
+         * the `<FileUploaderButton>`
+         */
+        buttonLabel: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether file input is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specify the status of the File Upload
+         */
+        filenameStatus: PropTypes.Validator<string>;
+        /**
+         * Provide a description for the complete/close icon that can be read by screen readers
+         */
+        iconDescription: PropTypes.Validator<string>;
+        /**
+         * Specify the description text of this `<FileUploader>`
+         */
+        labelDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify the title text of this `<FileUploader>`
+         */
+        labelTitle: PropTypes.Requireable<string>;
+        /**
+         * Specify if the component should accept multiple files to upload
+         */
+        multiple: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a name for the underlying `<input>` node
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional `onChange` hook that is called each time the input is
+         * changed
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional `onClick` hook that is called each time the
+         * FileUploader is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional `onDelete` hook that is called when an uploaded item
+         * is removed
+         */
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the size of the FileUploaderButton, from a list of available
+         * sizes.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static contextType: React.Context<string>;
+    static defaultProps: {
+        disabled: boolean;
+        filenameStatus: string;
+        buttonLabel: string;
+        buttonKind: string;
+        multiple: boolean;
+        onClick: () => void;
+        accept: never[];
+    };
+    state: {
+        filenames: string[];
+    };
+    nodes: HTMLElement[];
+    uploaderButton: React.RefObject<HTMLLabelElement>;
+    static getDerivedStateFromProps({ filenameStatus }: {
+        filenameStatus: any;
+    }, state: any): {
+        filenameStatus: any;
+        prevFilenameStatus: any;
+    } | null;
+    handleChange: (evt: any) => void;
+    handleClick: (evt: any, { index, filenameStatus }: {
+        index: any;
+        filenameStatus: any;
+    }) => void;
+    clearFiles: () => void;
+    render(): JSX.Element;
+}

package/lib/components/FileUploader/FileUploader.js

@@ -57,9 +57,9 @@ class FileUploader extends React__default["default"].Component {
         });
         if (this.props.onDelete) {
           this.props.onDelete(evt);
-          this.uploaderButton.current.focus();
+          this.uploaderButton.current?.focus?.();
         }
-        this.props.onClick(evt);
+        this.props.onClick?.(evt);
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "clearFiles", () => {
@@ -96,7 +96,7 @@ class FileUploader extends React__default["default"].Component {
       name,
       size = 'md',
       onDelete,
-      // eslint-disable-line no-unused-vars
+      // eslint-disable-line
       ...other
     } = this.props;
     const prefix = this.context;

package/lib/components/FileUploader/FileUploaderButton.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderButtonProps extends Omit<ReactAttr<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
+    /**
+     * Specify the types of files that this input should be able to receive
+     */
+    accept?: string[];
+    /**
+     * Specify the type of underlying button
+     */
+    buttonKind?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'danger--primary' | 'danger--ghost' | 'danger--tertiary' | 'tertiary';
+    /**
+     * Provide a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether you want to disable any updates to the FileUploaderButton
+     * label
+     */
+    disableLabelChanges?: boolean;
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 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
+     */
+    labelText?: React.ReactNode;
+    /**
+     * Specify if the component should accept multiple files to upload
+     */
+    multiple?: boolean;
+    /**
+     * Provide a name for the underlying `<input>` node
+     */
+    name?: string;
+    /**
+     * Provide an optional `onChange` hook that is called each time the `<input>`
+     * value changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Provide an optional `onClick` hook that is called each time the button is
+     * clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Provide an accessibility role for the `<FileUploaderButton>`
+     */
+    role?: string;
+    /**
+     * Specify the size of the FileUploaderButton, from a list of available
+     * sizes.
+     */
+    size?: 'sm' | 'small' | 'field' | 'md' | 'lg';
+    /**
+     * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
+     */
+    tabIndex?: number | string;
+    innerRef?: React.RefObject<HTMLLabelElement>;
+}
+declare function FileUploaderButton({ accept, buttonKind, className, disabled, disableLabelChanges, id, labelText: ownerLabelText, multiple, onChange, name, size, innerRef, ...other }: FileUploaderButtonProps): JSX.Element;
+declare namespace FileUploaderButton {
+    var propTypes: {
+        /**
+         * Specify the types of files that this input should be able to receive
+         */
+        accept: PropTypes.Requireable<(string | null | undefined)[]>;
+        /**
+         * Specify the type of underlying button
+         */
+        buttonKind: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether you want to disable any updates to the FileUploaderButton
+         * label
+         */
+        disableLabelChanges: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether file input is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a unique id for the underlying `<input>` node
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the label text to be read by screen readers when interacting with
+         * this control
+         */
+        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify if the component should accept multiple files to upload
+         */
+        multiple: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a name for the underlying `<input>` node
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional `onChange` hook that is called each time the `<input>`
+         * value changes
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional `onClick` hook that is called each time the button is
+         * clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an accessibility role for the `<FileUploaderButton>`
+         */
+        role: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the FileUploaderButton, from a list of available
+         * sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom tabIndex value for the `<FileUploaderButton>`
+         */
+        tabIndex: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    };
+}
+export default FileUploaderButton;

package/lib/components/FileUploader/FileUploaderButton.js

@@ -67,18 +67,20 @@ function FileUploaderButton(_ref) {
   }
   function onClick(event) {
     event.target.value = null;
-    inputNode.current.value = '';
-    inputNode.current.click();
+    if (inputNode.current) {
+      inputNode.current.value = '';
+      inputNode.current.click();
+    }
   }
   function onKeyDown(event) {
-    if (match.matches(event, [keys.Enter, keys.Space])) {
+    if (match.matches(event, [keys.Enter, keys.Space]) && inputNode.current) {
       inputNode.current.value = '';
       inputNode.current.click();
     }
   }
   function handleOnChange(event) {
     const files = event.target.files;
-    const length = event.target.files.length;
+    const length = event.target.files?.length || 0;
     if (files && !disableLabelChanges) {
       if (length > 1) {
         setLabelText(`${length} files`);
@@ -94,7 +96,9 @@ function FileUploaderButton(_ref) {
     className: classes,
     onClick: onClick,
     onKeyDown: onKeyDown
-  }, other), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
+  }, other, {
+    tabIndex: other.tabIndex !== undefined ? parseInt(other.tabIndex) : undefined
+  }), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
     className: `${prefix}--visually-hidden`,
     ref: innerRef,
     htmlFor: inputId
@@ -104,9 +108,9 @@ function FileUploaderButton(_ref) {
     id: inputId,
     disabled: disabled,
     type: "file",
-    tabIndex: "-1",
+    tabIndex: -1,
     multiple: multiple,
-    accept: accept,
+    accept: accept?.toString(),
     name: name,
     onChange: handleOnChange
   }));

package/lib/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -0,0 +1,139 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
+    /**
+     * Specify the types of files that this input should be able to receive
+     */
+    accept?: string[];
+    /**
+     * Provide a custom className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify whether file input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 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
+     */
+    labelText: string;
+    /**
+     * Specify if the component should accept multiple files to upload
+     */
+    multiple?: boolean;
+    /**
+     * Provide a name for the underlying `<input>` node
+     */
+    name?: string;
+    /**
+     * Event handler that is called after files are added to the uploader
+     * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+     */
+    onAddFiles?: () => void;
+    /**
+     * Provide an optional function to be called when the button element
+     * is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Provide a custom regex pattern for the acceptedTypes
+     */
+    pattern?: string;
+    /**
+     * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
+     */
+    role?: string;
+    /**
+     * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
+     */
+    tabIndex?: number | string;
+}
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: {
+    [x: string]: any;
+    accept: any;
+    className: any;
+    id: any;
+    disabled: any;
+    labelText: any;
+    multiple: any;
+    name: any;
+    onAddFiles: any;
+    onClick: any;
+    pattern: any;
+    innerRef: any;
+}): JSX.Element;
+declare namespace FileUploaderDropContainer {
+    var propTypes: {
+        /**
+         * Specify the types of files that this input should be able to receive
+         */
+        accept: PropTypes.Requireable<(string | null | undefined)[]>;
+        /**
+         * Provide a custom className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether file input is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a unique id for the underlying `<input>` node
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide the label text to be read by screen readers when interacting with
+         * this control
+         */
+        labelText: PropTypes.Validator<string>;
+        /**
+         * Specify if the component should accept multiple files to upload
+         */
+        multiple: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a name for the underlying `<input>` node
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Event handler that is called after files are added to the uploader
+         * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+         */
+        onAddFiles: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the button element
+         * is clicked
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a custom regex pattern for the acceptedTypes
+         */
+        pattern: PropTypes.Requireable<string>;
+        /**
+         * Provide an accessibility role for the `<FileUploaderButton>`
+         */
+        role: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * Provide a custom tabIndex value for the `<FileUploaderButton>`
+         */
+        tabIndex: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+    };
+    var defaultProps: {
+        labelText: string;
+        multiple: boolean;
+        onAddFiles: () => void;
+        accept: never[];
+        pattern: string;
+    };
+}
+export default FileUploaderDropContainer;

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -90,7 +90,7 @@ function FileUploaderDropContainer(_ref) {
   }
   const handleClick = () => {
     if (!disabled) {
-      inputRef.current.click();
+      inputRef.current?.click();
     }
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -129,7 +129,7 @@ function FileUploaderDropContainer(_ref) {
     onKeyDown: evt => {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         evt.preventDefault();
-        inputRef.current.click();
+        inputRef.current?.click();
       }
     },
     onClick: events.composeEventHandlers([onClick, handleClick])
@@ -141,7 +141,7 @@ function FileUploaderDropContainer(_ref) {
     id: uid,
     className: `${prefix}--file-input`,
     ref: inputRef,
-    tabIndex: "-1",
+    tabIndex: -1,
     disabled: disabled,
     accept: accept,
     name: name,

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -0,0 +1,110 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
+    /**
+     * Error message body for an invalid file upload
+     */
+    errorBody?: string;
+    /**
+     * Error message subject for an invalid file upload
+     */
+    errorSubject?: string;
+    /**
+     * Description of status icon (displayed in native tooltip)
+     */
+    iconDescription?: string;
+    /**
+     * Specify if the currently uploaded file is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Name of the uploaded file
+     */
+    name?: string;
+    /**
+     * Event handler that is called after removing a file from the file uploader
+     * The event handler signature looks like `onDelete(evt, { uuid })`
+     */
+    onDelete?: (event: any, opts: {
+        uuid: string;
+    }) => void;
+    /**
+     * Specify the size of the FileUploaderButton, from a list of available
+     * sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Status of the file upload
+     */
+    status?: 'uploading' | 'edit' | 'complete';
+    /**
+     * Unique identifier for the file object
+     */
+    uuid?: string;
+}
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: {
+    [x: string]: any;
+    uuid: any;
+    name: any;
+    status: any;
+    iconDescription: any;
+    onDelete: any;
+    invalid: any;
+    errorSubject: any;
+    errorBody: any;
+    size: any;
+}): JSX.Element;
+declare namespace FileUploaderItem {
+    var propTypes: {
+        /**
+         * Error message body for an invalid file upload
+         */
+        errorBody: PropTypes.Requireable<string>;
+        /**
+         * Error message subject for an invalid file upload
+         */
+        errorSubject: PropTypes.Requireable<string>;
+        /**
+         * Description of status icon (displayed in native tooltip)
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify if the currently uploaded file is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Name of the uploaded file
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Event handler that is called after removing a file from the file uploader
+         * The event handler signature looks like `onDelete(evt, { uuid })`
+         */
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the size of the FileUploaderButton, from a list of available
+         * sizes.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Status of the file upload
+         */
+        status: PropTypes.Requireable<string>;
+        /**
+         * Unique identifier for the file object
+         */
+        uuid: PropTypes.Requireable<string>;
+    };
+    var defaultProps: {
+        status: string;
+        onDelete: () => void;
+    };
+}
+export default FileUploaderItem;