@splunk/react-ui 4.3.0 → 4.5.0

package/File.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 111);
+/******/ 	return __webpack_require__(__webpack_require__.s = 112);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,14 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 11:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Clickable");
-
-/***/ }),
-
-/***/ 111:
+/***/ 112:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -134,13 +127,13 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "react-event-listener"
-var external_react_event_listener_ = __webpack_require__(15);
-var external_react_event_listener_default = /*#__PURE__*/__webpack_require__.n(external_react_event_listener_);
-
 // EXTERNAL MODULE: external "lodash"
 var external_lodash_ = __webpack_require__(4);
 
+// EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
+var EventListener_ = __webpack_require__(14);
+var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
+
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
@@ -151,17 +144,17 @@ var i18n_ = __webpack_require__(5);
 var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/format"
-var format_ = __webpack_require__(41);
+var format_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Progress"
-var Progress_ = __webpack_require__(77);
+var Progress_ = __webpack_require__(80);
 var Progress_default = /*#__PURE__*/__webpack_require__.n(Progress_);
 
 // EXTERNAL MODULE: ./src/icons/CrossMark.tsx
-var CrossMark = __webpack_require__(21);
+var CrossMark = __webpack_require__(22);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(22);
+var SVG_ = __webpack_require__(23);
 var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
 
 // CONCATENATED MODULE: ./src/File/PaperClip.tsx
@@ -222,6 +215,13 @@ function Trash(props) {
     fill: "currentColor"
   }));
 }
+// CONCATENATED MODULE: ./src/File/FileContext.tsx
+
+var FileContext = /*#__PURE__*/Object(external_react_["createContext"])({
+  disabled: false
+});
+FileContext.displayName = 'File';
+/* harmony default export */ var File_FileContext = (FileContext);
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
@@ -231,11 +231,11 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // EXTERNAL MODULE: external "@splunk/themes/mixins"
-var mixins_ = __webpack_require__(78);
+var mixins_ = __webpack_require__(81);
 
 // CONCATENATED MODULE: ./src/File/ItemStyles.ts
 
@@ -406,19 +406,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var propTypes = {
-  /** @private */
   disabled: external_prop_types_default.a.bool,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   error: external_prop_types_default.a.bool,
-  itemId: external_prop_types_default.a.any,
-  name: external_prop_types_default.a.string.isRequired,
 
   /** @private */
-  onRequestRemove: external_prop_types_default.a.func,
-
-  /** @private */
-  onRequestRetry: external_prop_types_default.a.func,
+  index: external_prop_types_default.a.number,
+  itemId: external_prop_types_default.a.any,
+  name: external_prop_types_default.a.string.isRequired,
 
   /** If the uploadPercentage is 0, the item is assumed to be queued. If the upload is complete or
    * not applicable, uploadPercentage must be undefined. */
@@ -426,39 +423,47 @@ var propTypes = {
 };
 
 function Item(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+  var disabled = _ref.disabled,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
       itemId = _ref.itemId,
       name = _ref.name,
-      onRequestRemove = _ref.onRequestRemove,
-      onRequestRetry = _ref.onRequestRetry,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
       uploadPercentage = _ref.uploadPercentage,
-      otherProps = _objectWithoutProperties(_ref, ["disabled", "error", "itemId", "name", "onRequestRemove", "onRequestRetry", "uploadPercentage"]);
+      otherProps = _objectWithoutProperties(_ref, ["disabled", "error", "itemId", "name", "index", "uploadPercentage"]);
 
   // @docs-props-type ItemPropsBase
   var _useSplunkTheme = Object(themes_["useSplunkTheme"])(),
-      family = _useSplunkTheme.family;
+      isPrisma = _useSplunkTheme.isPrisma;
 
-  var isPrisma = family === 'prisma';
+  var _useContext = Object(external_react_["useContext"])(FileContext),
+      handleRequestRemoveContext = _useContext.onRequestRemove;
 
   function handleRequestRemove(e) {
     e.preventDefault();
-    onRequestRemove === null || onRequestRemove === void 0 ? void 0 : onRequestRemove({
+    handleRequestRemoveContext === null || handleRequestRemoveContext === void 0 ? void 0 : handleRequestRemoveContext({
       itemId: itemId,
-      name: name
+      name: name,
+      index: index
     });
   }
 
+  var _useContext2 = Object(external_react_["useContext"])(FileContext),
+      handleRequestRetryContext = _useContext2.onRequestRetry;
+
   function handleRequestRetry(e) {
     e.preventDefault();
-    onRequestRetry === null || onRequestRetry === void 0 ? void 0 : onRequestRetry({
+    handleRequestRetryContext === null || handleRequestRetryContext === void 0 ? void 0 : handleRequestRetryContext({
       itemId: itemId,
-      name: name
+      name: name,
+      index: index
     });
   }
 
+  var _useContext3 = Object(external_react_["useContext"])(FileContext),
+      disabledContext = _useContext3.disabled;
+
   var removeLabel = Object(format_["sprintf"])(Object(i18n_["_"])('Remove "%(filename)s"'), {
     filename: name
   });
@@ -474,28 +479,30 @@ function Item(_ref) {
     }
   }, Object(i18n_["_"])('Uploading ')), /*#__PURE__*/external_react_default.a.createElement(StyledPercentage, null, uploadPercentage, "%"));
   var label = isPrisma && !Object(external_lodash_["isUndefined"])(uploadPercentage) && uploadPercentage > 0 ? progressLabel : name;
+  var disabledValue = disabled !== undefined ? disabled : disabledContext;
   return /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(StyledBox, Item_extends({
-    "data-test": "item"
+    "data-test": "item",
+    "data-test-disabled": disabledValue
   }, otherProps, {
     flex: true,
     $error: error,
-    $disabled: disabled
+    $disabled: disabledValue
   }), isPrisma && Object(external_lodash_["isUndefined"])(uploadPercentage) && /*#__PURE__*/external_react_default.a.createElement(StyledPaperClipIcon, {
     "data-test": "paper-clip",
-    $disabled: disabled
+    $disabled: disabledValue
   }, /*#__PURE__*/external_react_default.a.createElement(PaperClip, {
     "aria-hidden": "true"
   })), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
     "data-test": "label",
     $error: error,
-    $disabled: disabled
-  }, label), isPrisma && onRequestRetry && error && /*#__PURE__*/external_react_default.a.createElement(StyledIconClickable, {
+    $disabled: disabledValue
+  }, label), isPrisma && handleRequestRetryContext && error && /*#__PURE__*/external_react_default.a.createElement(StyledIconClickable, {
     "data-test": "retry",
     onClick: handleRequestRetry,
     "aria-label": retryLabel
   }, /*#__PURE__*/external_react_default.a.createElement(Retry, {
     screenReaderText: Object(i18n_["_"])('Retry')
-  })), !disabled && (isPrisma && Object(external_lodash_["isUndefined"])(uploadPercentage) && !error ? /*#__PURE__*/external_react_default.a.createElement(StyledTrashIcon, {
+  })), !disabledValue && (isPrisma && Object(external_lodash_["isUndefined"])(uploadPercentage) && !error ? /*#__PURE__*/external_react_default.a.createElement(StyledTrashIcon, {
     "data-test": "remove",
     onClick: handleRequestRemove,
     "aria-label": removeLabel
@@ -626,7 +633,7 @@ var StyledHelp = external_styled_components_default.a.div.withConfig({
   displayName: "FileStyles__StyledHelp",
   componentId: "sc-1wyh4cf-7"
 })(["margin-bottom:", ";"], Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["calc(", " * 1.5)"], themes_["variables"].spacing),
+  enterprise: themes_["variables"].spacingXLarge,
   prisma: Object(external_styled_components_["css"])(["calc(", " * 1.5)"], themes_["variables"].spacingLarge)
 }));
 var StyledWindowDrop = external_styled_components_default.a.div.withConfig({
@@ -734,6 +741,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
+/** @public */
+
 var File_propTypes = {
   accept: external_prop_types_default.a.string,
   allowMultiple: external_prop_types_default.a.bool,
@@ -748,6 +758,7 @@ var File_propTypes = {
   onRequestAdd: external_prop_types_default.a.func,
   onRequestRemove: external_prop_types_default.a.func,
   onRequestRetry: external_prop_types_default.a.func,
+  supportsMessage: external_prop_types_default.a.node,
 
   /** @private */
   splunkTheme: external_prop_types_default.a.object
@@ -878,43 +889,12 @@ var File_File = /*#__PURE__*/function (_Component) {
           splunkTheme = _this$props3.splunkTheme,
           otherProps = File_objectWithoutProperties(_this$props3, ["accept", "allowMultiple", "children", "disabled", "dropAnywhere", "error", "fullscreen", "help", "name", "onRequestRemove", "onRequestRetry", "splunkTheme"]);
 
-      var isPrisma = splunkTheme.family === 'prisma';
+      var isPrisma = splunkTheme.isPrisma;
       var fileCount = 0;
       var childrenCloned = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (item, index) {
-        var handleRemove = function handleRemove(event) {
-          onRequestRemove === null || onRequestRemove === void 0 ? void 0 : onRequestRemove({
-            event: event,
-            filename: item.props.name,
-            index: index,
-            itemId: item.props.itemId,
-            name: name
-          });
-        };
-
-        var handleRetry = function handleRetry(event) {
-          onRequestRetry === null || onRequestRetry === void 0 ? void 0 : onRequestRetry({
-            event: event,
-            filename: item.props.name,
-            index: index,
-            itemId: item.props.itemId,
-            name: name
-          });
-        };
-
         fileCount += 1;
-
-        if (onRequestRemove || onRequestRetry) {
-          return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-            disabled: disabled,
-            onRequestRemove: onRequestRemove ? handleRemove : undefined,
-            onRequestRetry: onRequestRetry ? handleRetry : undefined,
-            key: item.key || item.props.itemId || "item-".concat(index)
-          });
-        } // custom children have no onRequestRemove or onRequestRetry
-
-
         return /*#__PURE__*/Object(external_react_["cloneElement"])(item, {
-          disabled: disabled,
+          index: index,
           key: item.key || item.props.itemId || "item-".concat(index)
         });
       });
@@ -926,6 +906,35 @@ var File_File = /*#__PURE__*/function (_Component) {
       var StyledIcon = fullscreen ? StyledWindowIcon : StyledNormalIcon;
       var dragOver = dragOverOrDisabled ? false : this.state.dragOver || false;
       var fileTypes = Object(external_lodash_["isString"])(accept) && Object(external_lodash_["toUpper"])(accept.split(',').join(', '));
+
+      var handleRetry = function handleRetry(event) {
+        onRequestRetry === null || onRequestRetry === void 0 ? void 0 : onRequestRetry({
+          event: event,
+          filename: event.name,
+          index: event.index,
+          itemId: event.itemId,
+          name: name
+        });
+      };
+
+      var handleRemove = function handleRemove(event) {
+        onRequestRemove === null || onRequestRemove === void 0 ? void 0 : onRequestRemove({
+          event: event,
+          index: event.index,
+          filename: event.name,
+          itemId: event.itemId,
+          name: name
+        });
+      };
+
+      var supportsMessage = null;
+
+      if (this.props.supportsMessage) {
+        supportsMessage = /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, this.props.supportsMessage);
+      } else if (isPrisma && !disabled) {
+        supportsMessage = accept ? /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, Object(i18n_["_"])("Supports ".concat(fileTypes))) : /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, Object(i18n_["_"])('Supports all file types'));
+      }
+
       return /*#__PURE__*/external_react_default.a.createElement(StyledDropTargetBox, File_extends({
         onDragOver: dragOverOrDisabled ? undefined : this.handleDragOver,
         onDragLeave: dragOverOrDisabled ? undefined : this.handleDragLeave,
@@ -956,16 +965,26 @@ var File_File = /*#__PURE__*/function (_Component) {
         onChange: this.handleInputChange,
         onFocus: this.handleInputFocus,
         type: "file"
-      }), !disabled && Object(i18n_["_"])('browse...'))), isPrisma && !disabled && (accept ? /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, Object(i18n_["_"])("Supports ".concat(fileTypes))) : /*#__PURE__*/external_react_default.a.createElement(StyledSubtitle, null, Object(i18n_["_"])('Supports all file types')))), fullscreen && !disabled && /*#__PURE__*/external_react_default.a.createElement(StyledHelp, {
+      }), !disabled && Object(i18n_["_"])('browse…'))), supportsMessage), !disabled && help && /*#__PURE__*/external_react_default.a.createElement(StyledHelp, {
         "data-test": "help"
       }, help), dragOverNotDisabled && this.state.dragOver && /*#__PURE__*/external_react_default.a.createElement(StyledWindowDrop, {
         "data-test": "file-window-drop",
         onDragLeave: this.handleDragLeave
-      }), dragOverNotDisabled && /*#__PURE__*/external_react_default.a.createElement(external_react_event_listener_default.a, {
-        onDragOver: this.handleDragOver,
-        onDrop: this.handleDrop,
-        target: window
-      }), childrenCloned);
+      }), dragOverNotDisabled && /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "dragover",
+        listener: this.handleDragOver
+      }), /*#__PURE__*/external_react_default.a.createElement(EventListener_default.a, {
+        target: window,
+        eventType: "drop",
+        listener: this.handleDrop
+      })), /*#__PURE__*/external_react_default.a.createElement(File_FileContext.Provider, {
+        value: {
+          disabled: disabled,
+          onRequestRemove: onRequestRemove ? handleRemove : undefined,
+          onRequestRetry: onRequestRetry ? handleRetry : undefined
+        }
+      }, childrenCloned));
     }
   }]);
 
@@ -990,10 +1009,17 @@ HoistedFileWithTheme.Item = File_Item;
 
 /***/ }),
 
-/***/ 15:
+/***/ 12:
 /***/ (function(module, exports) {
 
-module.exports = require("react-event-listener");
+module.exports = require("@splunk/react-ui/Clickable");
+
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/react-ui/EventListener");
 
 /***/ }),
 
@@ -1004,14 +1030,14 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 21:
+/***/ 22:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CrossMark; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(25);
+/* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(26);
 /* harmony import */ var _splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_splunk_react_icons_Close__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _ThemedIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 /* harmony import */ var _SVG__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
@@ -1054,14 +1080,14 @@ function CrossMark(props) {
 
 /***/ }),
 
-/***/ 22:
+/***/ 23:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/SVG");
 
 /***/ }),
 
-/***/ 25:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Close");
@@ -1082,7 +1108,7 @@ module.exports = require("lodash");
 
 /***/ }),
 
-/***/ 41:
+/***/ 40:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/format");
@@ -1239,24 +1265,24 @@ Icon.defaultProps = defaultProps;
 
 /***/ }),
 
-/***/ 77:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Progress");
+module.exports = require("@splunk/react-ui/Box");
 
 /***/ }),
 
-/***/ 78:
+/***/ 80:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/mixins");
+module.exports = require("@splunk/react-ui/Progress");
 
 /***/ }),
 
-/***/ 8:
+/***/ 81:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/Box");
+module.exports = require("@splunk/themes/mixins");
 
 /***/ })