@carbon/react 1.37.0-rc.0 → 1.37.0-rc.1

package/es/components/Button/Button.js

@@ -113,17 +113,18 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
     component = 'a';
     otherProps = anchorProps;
   }
-  const Button = /*#__PURE__*/React__default.createElement(component, {
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    onClick,
-    ...rest,
-    ...commonProps,
-    ...otherProps
-  }, assistiveText, children, buttonImage);
-  if (hasIconOnly) {
+  if (!hasIconOnly) {
+    return /*#__PURE__*/React__default.createElement(component, {
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      onClick,
+      ...rest,
+      ...commonProps,
+      ...otherProps
+    }, assistiveText, children, buttonImage);
+  } else {
     let align = undefined;
     if (tooltipPosition === 'top' || tooltipPosition === 'bottom') {
       if (tooltipAlignment === 'center') {
@@ -152,7 +153,6 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref)
       onClick: composeEventHandlers([onClick, handleClick])
     }, rest, commonProps, otherProps), iconOnlyImage ? iconOnlyImage : children);
   }
-  return Button;
 });
 Button.displayName = 'Button';
 Button.propTypes = {

package/es/components/DataTable/DataTable.d.ts

@@ -150,7 +150,9 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         onCancel: () => void;
+        onSelectAll?: () => void | undefined;
         shouldShowBatchActions: boolean;
+        totalCount: number;
         totalSelected: number;
         [key: string]: unknown;
     };
@@ -478,6 +480,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         shouldShowBatchActions: boolean;
         totalSelected: number;
         onCancel: () => void;
+        onSelectAll: undefined;
+        totalCount: number;
     };
     /**
      * Helper utility to get the Table Props.

package/es/components/DataTable/DataTable.js

@@ -303,6 +303,8 @@ class DataTable extends React__default.Component {
       } = _this.state;
       const totalSelected = _this.getSelectedRows().length;
       return {
+        onSelectAll: undefined,
+        totalCount: _this.state.rowIds.length || 0,
         ...props,
         shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
         totalSelected,

package/es/components/DataTable/TableBatchActions.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 React, { type MouseEventHandler } from 'react';
+import type { InternationalProps } from '../../types/common';
+declare const TableBatchActionsTranslationKeys: readonly ["carbon.table.batch.cancel", "carbon.table.batch.items.selected", "carbon.table.batch.item.selected", "carbon.table.batch.selectAll"];
+export type TableBatchActionsTranslationKey = (typeof TableBatchActionsTranslationKeys)[number];
+export interface TableBatchActionsTranslationArgs {
+    totalSelected?: number;
+    totalCount?: number;
+}
+export interface TableBatchActionsProps extends React.HTMLAttributes<HTMLDivElement>, InternationalProps<TableBatchActionsTranslationKey, TableBatchActionsTranslationArgs> {
+    /**
+     * Provide elements to be rendered inside of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Hook required to listen for when the user initiates a cancel request
+     * through this component.
+     */
+    onCancel: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Hook to listen for when the user initiates a select all
+     * request through this component. This _only_ controls the rendering
+     * of the `Select All` button and does not include built in functionality
+     */
+    onSelectAll?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Boolean specifier for whether or not the batch action bar should be
+     * displayed.
+     */
+    shouldShowBatchActions?: boolean;
+    /**
+     * Numeric representation of the total number of items selected in a table.
+     * This number is used to derive the selection message.
+     */
+    totalSelected: number;
+    /**
+     * Numeric representation of the total number of items in a table.
+     * This number is used in the select all button text
+     */
+    totalCount?: number;
+}
+export interface TableBatchActionsComponent extends React.FC<TableBatchActionsProps> {
+    translationKeys: ReadonlyArray<TableBatchActionsTranslationKey>;
+}
+declare const TableBatchActions: TableBatchActionsComponent;
+export default TableBatchActions;

package/es/components/DataTable/TableBatchActions.js

@@ -16,16 +16,28 @@ import '../Text/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Text } from '../Text/Text.js';
 
+const TableBatchActionsTranslationKeys = ['carbon.table.batch.cancel', 'carbon.table.batch.items.selected', 'carbon.table.batch.item.selected', 'carbon.table.batch.selectAll'];
 const translationKeys = {
   'carbon.table.batch.cancel': 'Cancel',
   'carbon.table.batch.items.selected': 'items selected',
-  'carbon.table.batch.item.selected': 'item selected'
+  'carbon.table.batch.item.selected': 'item selected',
+  'carbon.table.batch.selectAll': 'Select all'
 };
-const translateWithId = (id, state) => {
+const translateWithId = function (id) {
+  let {
+    totalSelected,
+    totalCount
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    totalSelected: 0,
+    totalCount: 0
+  };
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
-  return `${state.totalSelected} ${translationKeys[id]}`;
+  if (id === 'carbon.table.batch.selectAll') {
+    return `${translationKeys[id]} (${totalCount})`;
+  }
+  return `${totalSelected} ${translationKeys[id]}`;
 };
 const TableBatchActions = _ref => {
   let {
@@ -33,11 +45,13 @@ const TableBatchActions = _ref => {
     children,
     shouldShowBatchActions,
     totalSelected,
+    totalCount,
     onCancel,
-    translateWithId: t,
+    onSelectAll,
+    translateWithId: t = translateWithId,
     ...rest
   } = _ref;
-  const [isScrolling, setIsScrolling] = React__default.useState();
+  const [isScrolling, setIsScrolling] = React__default.useState(false);
   const prefix = usePrefix();
   const batchActionsClasses = cx({
     [`${prefix}--batch-actions`]: true,
@@ -62,13 +76,20 @@ const TableBatchActions = _ref => {
     totalSelected
   }) : t('carbon.table.batch.item.selected', {
     totalSelected
+  }))), onSelectAll && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+    className: `${prefix}--batch-summary__divider`
+  }, "|"), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: onSelectAll,
+    tabIndex: shouldShowBatchActions ? 0 : -1
+  }, t('carbon.table.batch.selectAll', {
+    totalCount
   })))), /*#__PURE__*/React__default.createElement(TableActionList, null, children, /*#__PURE__*/React__default.createElement(Button, {
     className: `${prefix}--batch-summary__cancel`,
     tabIndex: shouldShowBatchActions ? 0 : -1,
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
 };
-TableBatchActions.translationKeys = Object.keys(translationKeys);
+TableBatchActions.translationKeys = TableBatchActionsTranslationKeys;
 TableBatchActions.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
@@ -77,11 +98,22 @@ TableBatchActions.propTypes = {
    * through this component
    */
   onCancel: PropTypes.func.isRequired,
+  /**
+   * Hook to listen for when the user initiates a select all
+   * request through this component. This _only_ controls the rendering
+   * of the `Select All` button and does not include built in functionality
+   */
+  onSelectAll: PropTypes.func,
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes.bool,
+  /**
+   * Numeric representation of the total number of items in a table.
+   * This number is used in the select all button text
+   */
+  totalCount: PropTypes.number,
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message
@@ -97,6 +129,5 @@ TableBatchActions.propTypes = {
 TableBatchActions.defaultProps = {
   translateWithId
 };
-var TableBatchActions$1 = TableBatchActions;
 
-export { TableBatchActions$1 as default };
+export { TableBatchActions as default };

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -0,0 +1,176 @@
+/**
+ * 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, { FocusEvent, ReactNode } from 'react';
+export interface TableToolbarSearchProps {
+    children?: ReactNode;
+    /**
+     * Provide an optional class name for the search container
+     */
+    className?: string;
+    /**
+     * Specifies if the search should initially render in an expanded state
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Provide an optional default value for the Search component
+     */
+    defaultValue?: string;
+    /**
+     * Specifies if the search should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the search should expand
+     */
+    expanded?: boolean;
+    /**
+     * Provide an optional id for the search container
+     */
+    id?: string;
+    /**
+     * Provide an optional label text for the Search component icon
+     */
+    labelText?: string;
+    /**
+     * Provide an optional function to be called when the search input loses focus, this will be
+     * passed the event as the first parameter and a function to handle the expanding of the search
+     * input as the second
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (event: '' | Partial<React.ChangeEventHandler<HTMLInputElement>>, value?: string) => void;
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Provide an optional hook that is called each time the input is expanded
+     */
+    onExpand?: (event: FocusEvent<HTMLInputElement>, value: boolean) => void;
+    /**
+     * Provide an optional function to be called when the search input gains focus, this will be
+     * passed the event as the first parameter and a function to handle the expanding of the search
+     * input as the second.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    /**
+     * Whether the search should be allowed to expand
+     */
+    persistent?: boolean;
+    /**
+     * Provide an optional placeholder text for the Search component
+     */
+    placeholder?: string;
+    /**
+     * Provide an optional className for the overall container of the Search
+     */
+    searchContainerClass?: string;
+    /**
+     * Specify the size of the Search
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+     */
+    tabIndex?: number | string;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId: (id: string) => string;
+}
+declare const TableToolbarSearch: {
+    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class name for the search container
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specifies if the search should initially render in an expanded state
+         */
+        defaultExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional default value for the Search component
+         */
+        defaultValue: PropTypes.Requireable<string>;
+        /**
+         * Specifies if the search should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specifies if the search should expand
+         */
+        expanded: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional id for the search container
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional label text for the Search component icon
+         */
+        labelText: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the search input loses focus, this will be
+         * passed the event as the first parameter and a function to handle the expanding of the search
+         * input as the second
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional callback called when the search value is cleared.
+         */
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is expanded
+         */
+        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the search input gains focus, this will be
+         * passed the event as the first parameter and a function to handle the expanding of the search
+         * input as the second.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Whether the search should be allowed to expand
+         */
+        persistent: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional placeholder text for the Search component
+         */
+        placeholder: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional className for the overall container of the Search
+         */
+        searchContainerClass: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Search
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+         */
+        tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        /**
+         * Provide custom text for the component for each translation id
+         */
+        translateWithId: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        tabIndex: string;
+        translateWithId: (id: string) => string;
+        persistent: boolean;
+        onClear: () => void;
+    };
+};
+export default TableToolbarSearch;

package/es/components/DataTable/TableToolbarSearch.js

@@ -41,6 +41,7 @@ const TableToolbarSearch = _ref => {
     onBlur,
     onFocus,
     size = 'lg',
+    tabIndex,
     ...rest
   } = _ref;
   const {
@@ -54,18 +55,19 @@ const TableToolbarSearch = _ref => {
   const prefix = usePrefix();
   useEffect(() => {
     if (focusTarget) {
-      focusTarget.current.querySelector('input').focus();
+      focusTarget.current?.querySelector?.('input')?.focus();
       setFocusTarget(null);
     }
   }, [focusTarget]);
   useEffect(() => {
     if (defaultValue) {
-      onChangeProp('', defaultValue);
+      onChangeProp?.('', defaultValue);
     }
   },
   //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   const searchClasses = cx(className, {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     [searchContainerClass]: searchContainerClass,
     [`${prefix}--toolbar-search-container-active`]: expanded,
     [`${prefix}--toolbar-search-container-disabled`]: disabled,
@@ -103,6 +105,10 @@ const TableToolbarSearch = _ref => {
     onFocus: onFocus ? event => onFocus(event, handleExpand) : handleOnFocus,
     onBlur: onBlur ? event => onBlur(event, handleExpand) : handleOnBlur,
     size: size
+    // HTMLAttributes defines tabIndex as number | undefined but in reality it
+    // also accepts a string, so we cast here to convince Typescript this is okay.
+    ,
+    tabIndex: tabIndex
   }, rest));
 };
 TableToolbarSearch.propTypes = {
@@ -190,6 +196,5 @@ TableToolbarSearch.defaultProps = {
   persistent: false,
   onClear: () => {}
 };
-var TableToolbarSearch$1 = TableToolbarSearch;
 
-export { TableToolbarSearch$1 as default };
+export { TableToolbarSearch as default };

package/es/components/FileUploader/FileUploader.Skeleton.d.ts

@@ -13,10 +13,7 @@ export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
      */
     className?: string;
 }
-declare function FileUploaderSkeleton({ className, ...rest }: {
-    [x: string]: any;
-    className: any;
-}): JSX.Element;
+declare function FileUploaderSkeleton({ className, ...rest }: FileUploaderSkeletonProps): JSX.Element;
 declare namespace FileUploaderSkeleton {
     var propTypes: {
         /**

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

@@ -4,7 +4,7 @@
  * 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 React from 'react';
 import PropTypes from 'prop-types';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
@@ -39,9 +39,10 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
     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;
+    onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
+        addedFiles: File[];
+    }) => void;
     /**
      * Provide an optional function to be called when the button element
      * is clicked
@@ -51,6 +52,10 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      * Provide a custom regex pattern for the acceptedTypes
      */
     pattern?: string;
+    /**
+     * Ref to pass to the inner button element
+     */
+    innerRef?: React.LegacyRef<HTMLButtonElement>;
     /**
      * @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.
      */
@@ -60,20 +65,7 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      */
     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 function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): JSX.Element;
 declare namespace FileUploaderDropContainer {
     var propTypes: {
         /**

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -18,16 +18,16 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderDropContainer(_ref) {
   let {
-    accept,
+    accept = [],
     className,
     id,
     disabled,
-    labelText,
-    multiple,
+    labelText = 'Add file',
+    multiple = false,
     name,
-    onAddFiles,
+    onAddFiles = () => {},
     onClick,
-    pattern,
+    pattern = '.[0-9a-z]+$',
     // eslint-disable-next-line react/prop-types
     innerRef,
     ...rest
@@ -40,16 +40,13 @@ function FileUploaderDropContainer(_ref) {
   const [isActive, setActive] = useState(false);
   const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,
-    [`${prefix}--file-browse-btn--disabled`]: disabled,
-    [className]: className
-  });
+    [`${prefix}--file-browse-btn--disabled`]: disabled
+  }, className);
 
   /**
    * Filters the array of added files based on file type restrictions
-   * @param {Event} event - Event object, used to get the list of files added
    */
-  function validateFiles(event) {
-    const transferredFiles = event.type === 'drop' ? [...event.dataTransfer.files] : [...event.target.files];
+  function validateFiles(transferredFiles) {
     if (!accept.length) {
       return transferredFiles;
     }
@@ -60,11 +57,10 @@ function FileUploaderDropContainer(_ref) {
         type: mimeType = ''
       } = curr;
       const fileExtensionRegExp = new RegExp(pattern, 'i');
-      const hasFileExtension = fileExtensionRegExp.test(name);
-      if (!hasFileExtension) {
+      const [fileExtension] = name.match(fileExtensionRegExp) ?? [];
+      if (fileExtension === undefined) {
         return acc;
       }
-      const [fileExtension] = name.match(fileExtensionRegExp);
       if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension.toLowerCase())) {
         return acc.concat([curr]);
       }
@@ -73,7 +69,15 @@ function FileUploaderDropContainer(_ref) {
     }, []);
   }
   function handleChange(event) {
-    const addedFiles = validateFiles(event);
+    const files = [...(event.target.files ?? [])];
+    const addedFiles = validateFiles(files);
+    return onAddFiles(event, {
+      addedFiles
+    });
+  }
+  function handleDrop(event) {
+    const files = [...event.dataTransfer.files];
+    const addedFiles = validateFiles(files);
     return onAddFiles(event, {
       addedFiles
     });
@@ -110,7 +114,7 @@ function FileUploaderDropContainer(_ref) {
         return;
       }
       setActive(false);
-      handleChange(evt);
+      handleDrop(evt);
     }
   }, /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
@@ -133,7 +137,7 @@ function FileUploaderDropContainer(_ref) {
     ref: inputRef,
     tabIndex: -1,
     disabled: disabled,
-    accept: accept,
+    accept: accept.join(','),
     name: name,
     multiple: multiple,
     onChange: handleChange,

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

@@ -4,8 +4,8 @@
  * 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 React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -32,7 +32,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      * 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: {
+    onDelete?: (event: React.SyntheticEvent<HTMLElement>, opts: {
         uuid: string;
     }) => void;
     /**
@@ -49,18 +49,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      */
     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 function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: FileUploaderItemProps): JSX.Element;
 declare namespace FileUploaderItem {
     var propTypes: {
         /**

package/es/components/FileUploader/FileUploaderItem.js

@@ -19,9 +19,9 @@ function FileUploaderItem(_ref) {
   let {
     uuid,
     name,
-    status,
+    status = 'uploading',
     iconDescription,
-    onDelete,
+    onDelete = () => {},
     invalid,
     errorSubject,
     errorBody,
@@ -34,8 +34,8 @@ function FileUploaderItem(_ref) {
   } = useRef(uuid || uniqueId());
   const classes = cx(`${prefix}--file__selected-file`, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
-    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+    [`${prefix}--file__selected-file--md`]: size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes