baseui 12.1.3 → 13.0.0

package/esm/toast/toaster.js

@@ -81,6 +81,7 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       isMounted: false,
+      // @ts-ignore
       toasts: []
     });
 
@@ -106,10 +107,13 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "show", function () {
       var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
+      // @ts-ignore
       if (_this.state.toasts.map(function (t) {
         return t.key;
       }).includes(props.key)) {
-        _this.update(props.key, props);
+        // @ts-ignore
+        _this.update(props.key, props); // @ts-ignore
+
 
         return props.key;
       }
@@ -135,7 +139,8 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
               autoHideDuration: toast.autoHideDuration
             }, props))), {}, {
               key: key
-            }, _this.props.resetAutoHideTimerOnUpdate ? {
+            }, _this.props.resetAutoHideTimerOnUpdate ? // @ts-ignore
+            {
               __updated: (+toast.__updated || 0) + 1
             } : {});
 
@@ -151,13 +156,16 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "dismiss", function (key) {
+      // @ts-ignore
       if (_this.dismissHandlers[key]) {
+        // @ts-ignore
         _this.dismissHandlers[key]();
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "clearAll", function () {
       Object.keys(_this.dismissHandlers).forEach(function (key) {
+        // @ts-ignore
         _this.dismissHandlers[key]();
       });
     });
@@ -167,6 +175,7 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "internalOnClose", function (key) {
+      // @ts-ignore
       delete _this.dismissHandlers[key];
 
       _this.setState(function (_ref3) {
@@ -213,6 +222,7 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
         onClose: _this.getOnCloseHandler(key, onClose)
       }), function (_ref4) {
         var dismiss = _ref4.dismiss;
+        // @ts-ignore
         _this.dismissHandlers[key] = dismiss;
         return children;
       });
@@ -239,7 +249,8 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var sharedProps = this.getSharedProps();
+      var sharedProps = this.getSharedProps(); // @ts-ignore
+
       var RootOverride = this.props.overrides.Root;
 
       var _getOverrides = getOverrides(RootOverride, StyledRoot),
@@ -253,6 +264,7 @@ export var ToasterContainer = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line for-direction
 
       for (var i = toastsLength - 1; i >= 0; i--) {
+        // @ts-ignore
         toastsToRender.push(this.renderToast(this.state.toasts[i]));
       }
 
@@ -302,24 +314,28 @@ var toaster = {
   },
   info: function info(children) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    // @ts-ignore
     return this.show(children, _objectSpread(_objectSpread({}, props), {}, {
       kind: KIND.info
     }));
   },
   positive: function positive(children) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    // @ts-ignore
     return this.show(children, _objectSpread(_objectSpread({}, props), {}, {
       kind: KIND.positive
     }));
   },
   warning: function warning(children) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    // @ts-ignore
     return this.show(children, _objectSpread(_objectSpread({}, props), {}, {
       kind: KIND.warning
     }));
   },
   negative: function negative(children) {
     var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    // @ts-ignore
     return this.show(children, _objectSpread(_objectSpread({}, props), {}, {
       kind: KIND.negative
     }));
@@ -328,6 +344,7 @@ var toaster = {
     var toasterInstance = this.getRef();
 
     if (toasterInstance) {
+      // @ts-ignore
       toasterInstance.update(key, props);
     } else if (process.env.NODE_ENV !== "production") {
       // eslint-disable-next-line no-console
@@ -338,6 +355,7 @@ var toaster = {
     var toasterInstance = this.getRef();
 
     if (toasterInstance) {
+      // @ts-ignore
       toasterInstance.clear(key);
     } else if (process.env.NODE_ENV !== "production") {
       // eslint-disable-next-line no-console

package/esm/tree-view/tree-label-interactable.js

@@ -25,10 +25,12 @@ var TreeLabelInteractable = function TreeLabelInteractable(_ref) {
   return (
     /*#__PURE__*/
     // $FlowExpectedError[cannot-spread-inexact]
-    React.createElement(LabelInteractable, _extends({
+    React.createElement(LabelInteractable // @ts-ignore
+    , _extends({
       onClick: function onClick(e) {
         return e.stopPropagation();
-      },
+      } // @ts-ignore
+      ,
       onKeyDown: function onKeyDown(e) {
         return e.stopPropagation();
       }

package/esm/tree-view/tree-view.js

@@ -68,6 +68,7 @@ export default function TreeView(props) {
   var onKeyDown = function onKeyDown(e, node) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var elementId = e.target.getAttribute('data-nodeid'); // this check prevents bubbling
+    // @ts-ignore
 
     if (elementId !== getId(node) && parseInt(elementId) !== getId(node)) {
       return;
@@ -128,7 +129,8 @@ export default function TreeView(props) {
 
       case '*':
         e.preventDefault();
-        getExpandableSiblings(data, selectedNodeId, getId).forEach(function (node) {
+        getExpandableSiblings(data, selectedNodeId, getId).forEach( // @ts-ignore
+        function (node) {
           return _onToggle && _onToggle(node);
         });
         break;
@@ -138,7 +140,8 @@ export default function TreeView(props) {
           clearTimeout(timeOutRef.current);
         }
 
-        setTypeAheadChars(typeAheadChars + e.key);
+        setTypeAheadChars(typeAheadChars + e.key); // @ts-ignore
+
         timeOutRef.current = setTimeout(function () {
           setTypeAheadChars('');
         }, 500);

package/esm/tree-view/utils.js

@@ -10,21 +10,25 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
+// @ts-ignore
 var getLastLeafId = function getLastLeafId(node, getId) {
   if (node.isExpanded && node.children && node.children.length) {
     return getLastLeafId(node.children[node.children.length - 1], getId);
   }
 
   return getId(node);
-};
+}; // @ts-ignore
+
 
 export var getParentId = function getParentId(nodes, nodeId, parentId, getId) {
   for (var i = 0; i < nodes.length; i++) {
     if (getId(nodes[i]) === nodeId) {
       return parentId;
-    }
+    } // @ts-ignore
+
 
     if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
+      // @ts-ignore
       var foundId = getParentId(nodes[i].children, nodeId, getId(nodes[i]), getId);
 
       if (foundId) {
@@ -34,7 +38,8 @@ export var getParentId = function getParentId(nodes, nodeId, parentId, getId) {
   }
 
   return null;
-};
+}; // @ts-ignore
+
 export var getPrevId = function getPrevId(nodes, nodeId, parentId, getId) {
   for (var i = 0; i < nodes.length; i++) {
     if (getId(nodes[i]) === nodeId) {
@@ -43,9 +48,11 @@ export var getPrevId = function getPrevId(nodes, nodeId, parentId, getId) {
       } else {
         return getLastLeafId(nodes[i - 1], getId);
       }
-    }
+    } // @ts-ignore
+
 
     if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
+      // @ts-ignore
       var foundId = getPrevId(nodes[i].children, nodeId, getId(nodes[i]), getId);
 
       if (foundId) {
@@ -55,16 +62,21 @@ export var getPrevId = function getPrevId(nodes, nodeId, parentId, getId) {
   }
 
   return null;
-};
+}; // @ts-ignore
+
 export var getFirstChildId = function getFirstChildId(nodes, nodeId, getId) {
   for (var i = 0; i < nodes.length; i++) {
     if (getId(nodes[i]) === nodeId) {
+      // @ts-ignore
       if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
+        // @ts-ignore
         return getId(nodes[i].children[0]);
       }
-    }
+    } // @ts-ignore
+
 
     if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
+      // @ts-ignore
       var foundId = getFirstChildId(nodes[i].children, nodeId, getId);
 
       if (foundId) {
@@ -74,21 +86,27 @@ export var getFirstChildId = function getFirstChildId(nodes, nodeId, getId) {
   }
 
   return null;
-};
+}; // @ts-ignore
+
 export var getNextId = function getNextId(nodes, nodeId, closestOmmer, getId) {
   for (var i = 0; i < nodes.length; i++) {
     if (getId(nodes[i]) === nodeId) {
+      // @ts-ignore
       if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
+        // @ts-ignore
         return getId(nodes[i].children[0]);
       } else if (nodes[i + 1]) {
         return getId(nodes[i + 1]);
       } else {
         return closestOmmer;
       }
-    }
+    } // @ts-ignore
+
 
     if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
-      var foundId = getNextId(nodes[i].children, nodeId, nodes[i + 1] ? getId(nodes[i + 1]) : closestOmmer, getId);
+      // @ts-ignore
+      var foundId = getNextId( // @ts-ignore
+      nodes[i].children, nodeId, nodes[i + 1] ? getId(nodes[i + 1]) : closestOmmer, getId);
 
       if (foundId) {
         return foundId;
@@ -97,7 +115,8 @@ export var getNextId = function getNextId(nodes, nodeId, closestOmmer, getId) {
   }
 
   return null;
-};
+}; // @ts-ignore
+
 export var getEndId = function getEndId(nodes, getId) {
   var endNode = nodes[nodes.length - 1];
 
@@ -106,22 +125,27 @@ export var getEndId = function getEndId(nodes, getId) {
   }
 
   return getId(endNode);
-};
+}; // @ts-ignore
+
 export var getExpandableSiblings = function getExpandableSiblings(nodes, nodeId, getId) {
   for (var i = 0; i < nodes.length; i++) {
     if (getId(nodes[i]) === nodeId) {
       var expandableSiblings = [];
 
       for (var j = 0; j < nodes.length; j++) {
+        // @ts-ignore
         if (!nodes[j].isExpanded && nodes[j].children && nodes[j].children.length) {
+          // @ts-ignore
           expandableSiblings.push(nodes[j]);
         }
       }
 
       return expandableSiblings;
-    }
+    } // @ts-ignore
+
 
     if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
+      // @ts-ignore
       var result = getExpandableSiblings(nodes[i].children, nodeId, getId);
 
       if (result.length) {
@@ -155,7 +179,8 @@ export var getCharMatchId = function getCharMatchId(nodes, nodeId, chars, closes
   if (foundid) return foundid;
   foundid = matchString(nodes, nodeId, chars, closestOmmer, getId, false);
   return foundid;
-};
+}; // @ts-ignore
+
 export var matchString = function matchString(nodes, nodeId, chars, closestOmmer, getId, matchPrefix) {
   for (var i = 0; i < nodes.length; i++) {
     var label = nodes[i].label;
@@ -164,10 +189,13 @@ export var matchString = function matchString(nodes, nodeId, chars, closestOmmer
       if (matchPrefix && label.toUpperCase().indexOf(chars.toUpperCase()) === 0 || !matchPrefix && label.toUpperCase().indexOf(chars.toUpperCase()) > 0) {
         return getId(nodes[i]);
       }
-    }
+    } // @ts-ignore
+
 
     if (nodes[i].isExpanded && nodes[i].children && nodes[i].children.length) {
-      var foundId = matchString(nodes[i].children, nodeId, chars, nodes[i + 1] ? getId(nodes[i + 1]) : closestOmmer, getId, matchPrefix);
+      // @ts-ignore
+      var foundId = matchString( // @ts-ignore
+      nodes[i].children, nodeId, chars, nodes[i + 1] ? getId(nodes[i + 1]) : closestOmmer, getId, matchPrefix);
 
       if (foundId) {
         return foundId;

package/esm/utils/deep-merge.js

@@ -16,14 +16,19 @@ export default function deepMerge(target) {
     obj = (i + 1 < 1 || arguments.length <= i + 1 ? undefined : arguments[i + 1]) || {};
 
     for (var key in obj) {
+      // @ts-ignore
       if (_typeof(obj[key]) !== undefined) {
+        // @ts-ignore
         value = obj[key];
 
         if (isCloneable(value)) {
+          // @ts-ignore
           target[key] = deepMerge(
           /* eslint-disable-next-line no-mixed-operators */
+          // @ts-ignore
           target[key] || Array.isArray(value) && [] || {}, value);
         } else {
+          // @ts-ignore
           target[key] = value;
         }
       }

package/esm/utils/focusVisible.js

@@ -9,7 +9,8 @@ LICENSE file in the root directory of this source tree.
 // - https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js
 var initialized = false;
 var hadKeyboardEvent = true;
-var hadFocusVisibleRecently = false;
+var hadFocusVisibleRecently = false; // @ts-ignore
+
 var hadFocusVisibleRecentlyTimeout = null;
 var inputTypesWhitelist = {
   text: true,
@@ -33,10 +34,11 @@ var inputTypesWhitelist = {
  * @param {Element} node
  * @return {boolean}
  */
+// @ts-ignore
 
 function focusTriggersKeyboardModality(node) {
   var type = node.type,
-      tagName = node.tagName;
+      tagName = node.tagName; // @ts-ignore
 
   if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {
     return true;
@@ -59,6 +61,7 @@ function focusTriggersKeyboardModality(node) {
  * then the modality is keyboard. Otherwise, the modality is not keyboard.
  * @param {KeyboardEvent} event
  */
+// @ts-ignore
 
 
 function handleKeyDown(event) {
@@ -82,6 +85,7 @@ function handlePointerDown() {
 }
 
 function handleVisibilityChange() {
+  // @ts-ignore
   if (this.visibilityState === 'hidden') {
     // If the tab becomes active again, the browser will handle calling focus
     // on the element (Safari actually calls it twice).
@@ -91,7 +95,8 @@ function handleVisibilityChange() {
       hadKeyboardEvent = true;
     }
   }
-}
+} // @ts-ignore
+
 
 function prepare(doc) {
   doc.addEventListener('keydown', handleKeyDown, true);
@@ -99,7 +104,8 @@ function prepare(doc) {
   doc.addEventListener('pointerdown', handlePointerDown, true);
   doc.addEventListener('touchstart', handlePointerDown, true);
   doc.addEventListener('visibilitychange', handleVisibilityChange, true);
-}
+} // @ts-ignore
+
 
 export function teardown(doc) {
   doc.removeEventListener('keydown', handleKeyDown, true);
@@ -107,7 +113,8 @@ export function teardown(doc) {
   doc.removeEventListener('pointerdown', handlePointerDown, true);
   doc.removeEventListener('touchstart', handlePointerDown, true);
   doc.removeEventListener('visibilitychange', handleVisibilityChange, true);
-}
+} // @ts-ignore
+
 export function isFocusVisible(event) {
   try {
     return event.target.matches(':focus-visible');
@@ -133,12 +140,15 @@ export function handleBlurVisible() {
   hadFocusVisibleRecently = true;
 
   if (typeof document !== 'undefined') {
-    window.clearTimeout(hadFocusVisibleRecentlyTimeout);
+    // @ts-ignore
+    window.clearTimeout(hadFocusVisibleRecentlyTimeout); // @ts-ignore
+
     hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {
       hadFocusVisibleRecently = false;
     }, 100);
   }
-}
+} // @ts-ignore
+
 export function initFocusVisible(node) {
   if (!initialized && node != null) {
     initialized = true;

package/file-uploader/file-uploader.js

@@ -57,8 +57,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function prependStyleProps(styleProps) {
   return Object.keys(styleProps).reduce(function (nextStyleProps, currentKey) {
+    // @ts-ignore
     nextStyleProps["$".concat(currentKey)] = styleProps[currentKey];
     return nextStyleProps;
   }, {});
@@ -128,99 +130,107 @@ function FileUploader(props) {
       progressBarProps = _getOverrides22[1];
 
   var afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error todo(flow->ts): dropzone api
-    React.createElement(_reactDropzone.default, _extends({}, props, {
-      disabled: props.disabled || afterFileDrop
-    }), function (renderProps) {
-      var getRootProps = renderProps.getRootProps,
-          getInputProps = renderProps.getInputProps,
-          open = renderProps.open,
-          styleProps = _objectWithoutProperties(renderProps, _excluded);
-
-      var prefixedStyledProps = prependStyleProps(_objectSpread(_objectSpread({}, styleProps), {}, {
-        isDisabled: props.disabled,
-        afterFileDrop: afterFileDrop
-      }));
-
-      var getRootPropsArgs = _objectSpread(_objectSpread({}, props.disableClick ? {
-        onClick: function onClick(evt) {
-          return evt.preventDefault();
-        }
-      } : {}), {}, {
-        tabIndex: -1
-      });
-
-      return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
-        return /*#__PURE__*/React.createElement(Root, _extends({
-          "data-baseweb": "file-uploader"
-        }, prefixedStyledProps, rootProps), /*#__PURE__*/React.createElement(FileDragAndDrop, _extends({}, getRootProps(getRootPropsArgs), prefixedStyledProps, fileDragAndDropProps), !afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), locale.fileuploader.dropFilesToUpload), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploader.or), /*#__PURE__*/React.createElement(ButtonComponent, _extends({
-          disabled: props.disabled,
-          kind: _button.KIND.secondary,
-          shape: _button.SHAPE.pill,
-          size: _button.SIZE.compact,
-          onClick: open,
-          role: "button",
-          overrides: {
-            BaseButton: {
-              style: function style(_ref) {
-                var $theme = _ref.$theme;
-                return {
-                  marginTop: $theme.sizing.scale500
-                };
-              }
+  var accept;
+
+  if (Array.isArray(props.accept)) {
+    accept = props.accept.join(',');
+  } else if (typeof props.accept === 'string') {
+    accept = props.accept;
+  }
+
+  return /*#__PURE__*/React.createElement(_reactDropzone.default, _extends({}, props, {
+    accept: accept,
+    disabled: props.disabled || afterFileDrop
+  }), function (renderProps) {
+    var getRootProps = renderProps.getRootProps,
+        getInputProps = renderProps.getInputProps,
+        open = renderProps.open,
+        styleProps = _objectWithoutProperties(renderProps, _excluded);
+
+    var prefixedStyledProps = prependStyleProps(_objectSpread(_objectSpread({}, styleProps), {}, {
+      isDisabled: props.disabled,
+      afterFileDrop: afterFileDrop
+    }));
+
+    var getRootPropsArgs = _objectSpread(_objectSpread({}, props.disableClick ? {
+      onClick: function onClick(evt) {
+        return evt.preventDefault();
+      }
+    } : {}), {}, {
+      tabIndex: -1
+    });
+
+    return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
+      return /*#__PURE__*/React.createElement(Root, _extends({
+        "data-baseweb": "file-uploader"
+      }, prefixedStyledProps, rootProps), /*#__PURE__*/React.createElement(FileDragAndDrop, _extends({}, getRootProps(getRootPropsArgs), prefixedStyledProps, fileDragAndDropProps), !afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), locale.fileuploader.dropFilesToUpload), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploader.or), /*#__PURE__*/React.createElement(ButtonComponent, _extends({
+        disabled: props.disabled,
+        kind: _button.KIND.secondary,
+        shape: _button.SHAPE.pill,
+        size: _button.SIZE.compact,
+        onClick: open,
+        role: "button",
+        overrides: {
+          BaseButton: {
+            // @ts-ignore
+            style: function style(_ref) {
+              var $theme = _ref.$theme;
+              return {
+                marginTop: $theme.sizing.scale500
+              };
             }
           }
-        }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
-          value: props.progressAmount,
-          overrides: {
-            BarProgress: {
-              style: function style(_ref2) {
-                var $theme = _ref2.$theme;
-                return {
-                  backgroundColor: props.errorMessage ? $theme.colors.negative : $theme.colors.accent
-                };
-              }
+        }
+      }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
+        value: props.progressAmount,
+        overrides: {
+          BarProgress: {
+            // @ts-ignore
+            style: function style(_ref2) {
+              var $theme = _ref2.$theme;
+              return {
+                backgroundColor: props.errorMessage ? $theme.colors.negative : $theme.colors.accent
+              };
             }
           }
-        }, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
-          $size: _spinner.SIZE.medium,
-          $style: {
-            marginBottom: theme.sizing.scale300
-          }
-        }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(RetryButtonComponent, _extends({
-          kind: _button.KIND.tertiary,
-          onClick: function onClick() {
-            props.onRetry && props.onRetry();
-          },
-          "aria-invalid": Boolean(props.errorMessage),
-          "aria-describedby": props['aria-describedby'],
-          "aria-errormessage": props.errorMessage
-        }, retryButtonProps), locale.fileuploader.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
-          kind: _button.KIND.tertiary,
-          onClick: function onClick() {
-            props.onCancel && props.onCancel();
-          },
-          "aria-describedby": props['aria-describedby'],
-          overrides: {
-            BaseButton: {
-              style: function style(_ref3) {
-                var $theme = _ref3.$theme;
-                return {
-                  color: $theme.colors.contentNegative
-                };
-              }
+        }
+      }, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
+        $size: _spinner.SIZE.medium,
+        $style: {
+          marginBottom: theme.sizing.scale300
+        }
+      }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(RetryButtonComponent, _extends({
+        kind: _button.KIND.tertiary,
+        onClick: function onClick() {
+          props.onRetry && props.onRetry();
+        },
+        "aria-invalid": Boolean(props.errorMessage),
+        "aria-describedby": props['aria-describedby'],
+        "aria-errormessage": props.errorMessage
+      }, retryButtonProps), locale.fileuploader.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
+        kind: _button.KIND.tertiary,
+        onClick: function onClick() {
+          props.onCancel && props.onCancel();
+        },
+        "aria-describedby": props['aria-describedby'],
+        overrides: {
+          BaseButton: {
+            // @ts-ignore
+            style: function style(_ref3) {
+              var $theme = _ref3.$theme;
+              return {
+                color: $theme.colors.contentNegative
+              };
             }
           }
-        }, cancelButtonProps), locale.fileuploader.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
-          "aria-invalid": Boolean(props.errorMessage) || null,
-          "aria-describedby": props['aria-describedby'],
-          "aria-errormessage": props.errorMessage || null
-        }, getInputProps(), prefixedStyledProps, hiddenInputProps)));
-      });
-    })
-  );
+        }
+      }, cancelButtonProps), locale.fileuploader.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
+        "aria-invalid": Boolean(props.errorMessage) || null,
+        "aria-describedby": props['aria-describedby'],
+        "aria-errormessage": props.errorMessage || null
+      }, getInputProps(), prefixedStyledProps, hiddenInputProps)));
+    });
+  });
 }
 
 FileUploader.defaultProps = {

package/file-uploader/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type FileUploaderLocale = {
+export type FileUploaderLocale = {
     dropFilesToUpload: string;
     or: string;
     browseFiles: string;