@cashub/ui 0.4.2 → 0.6.0

package/descriptionList/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DescriptionDetail", {
+  enumerable: true,
+  get: function get() {
+    return _DescriptionDetail.default;
+  }
+});
+Object.defineProperty(exports, "DescriptionList", {
+  enumerable: true,
+  get: function get() {
+    return _DescriptionList.default;
+  }
+});
+Object.defineProperty(exports, "DescriptionTerm", {
+  enumerable: true,
+  get: function get() {
+    return _DescriptionTerm.default;
+  }
+});
+
+var _DescriptionDetail = _interopRequireDefault(require("./DescriptionDetail"));
+
+var _DescriptionList = _interopRequireDefault(require("./DescriptionList"));
+
+var _DescriptionTerm = _interopRequireDefault(require("./DescriptionTerm"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/divider/Divider.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Divider = _styledComponents.default.hr(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  border-top: 1px solid var(--border-color);\n  margin: var(--spacing-s);\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var noMarginX = _ref.noMarginX;
+  return noMarginX && "\n        margin-left: 0;\n        margin-right: 0;\n      ";
+}, function (_ref2) {
+  var dashed = _ref2.dashed;
+  return dashed && 'border-top-style: dashed;';
+});
+
+var _default = Divider;
+exports.default = _default;

package/divider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _Divider.default;
+  }
+});
+
+var _Divider = _interopRequireDefault(require("./Divider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dropdown/Dropdown.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+
+var _useCustomPopper2 = _interopRequireDefault(require("../utils/hooks/useCustomPopper"));
+
+var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Dropdown = function Dropdown(_ref) {
+  var children = _ref.children,
+      fixed = _ref.fixed;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialized = _useState2[0],
+      setInitialized = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      display = _useState4[0],
+      setDisplay = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      toggleElement = _useState6[0],
+      setToggleElement = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      contentElement = _useState8[0],
+      setContentElement = _useState8[1];
+
+  var _useCustomPopper = (0, _useCustomPopper2.default)(toggleElement, contentElement, {
+    strategy: fixed ? 'fixed' : 'absolute'
+  }),
+      styles = _useCustomPopper.styles,
+      attributes = _useCustomPopper.attributes,
+      state = _useCustomPopper.state,
+      update = _useCustomPopper.update;
+
+  var handleSelect = function handleSelect() {
+    setDisplay(false);
+  };
+
+  var context = {
+    display: display,
+    setDisplay: setDisplay,
+    handleSelect: handleSelect,
+    setInitialized: setInitialized,
+    setToggleElement: initialized ? setToggleElement : null,
+    setContentElement: initialized ? setContentElement : null,
+    styles: styles,
+    attributes: attributes,
+    state: state,
+    update: update
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContext.default.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactOutsideClickHandler.default, {
+      onOutsideClick: function onOutsideClick() {
+        setDisplay(false);
+      },
+      children: children
+    })
+  });
+};
+
+var _default = Dropdown;
+exports.default = _default;

package/dropdown/DropdownButtonOption.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DropdownButtonOption = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 12px var(--spacing-s);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  width: 100%;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  > svg {\n    margin-right: var(--spacing-s);\n  }\n"])));
+
+var _default = DropdownButtonOption;
+exports.default = _default;

package/dropdown/DropdownContent.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DropdownContent = function DropdownContent(_ref) {
+  var children = _ref.children,
+      onShow = _ref.onShow,
+      onClose = _ref.onClose;
+
+  var _useContext = (0, _react.useContext)(_DropdownContext.default),
+      display = _useContext.display,
+      setContentElement = _useContext.setContentElement,
+      styles = _useContext.styles,
+      attributes = _useContext.attributes,
+      update = _useContext.update;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isToggle = _useState2[0],
+      setIsToggle = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (isToggle) {
+      if (display && onShow) {
+        onShow();
+      }
+
+      if (!display && onClose) {
+        onClose();
+      }
+
+      setIsToggle(false);
+    }
+  }, [isToggle, display, onShow, onClose]);
+  (0, _react.useEffect)(function () {
+    setIsToggle(true);
+  }, [display]); // rerender時不會更新位置，所以補上children讓rerender時可以更新位置
+
+  (0, _react.useEffect)(function () {
+    if (update) {
+      update();
+    }
+  }, [update, children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({
+    ref: setContentElement,
+    $display: display,
+    style: styles.popper
+  }, attributes.popper), {}, {
+    children: children
+  }));
+};
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  min-width: 160px;\n  max-width: 320px;\n  border: 1px solid var(--border-color);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  padding: var(--spacing-s) 0;\n  z-index: 20;\n  margin: 0 !important;\n"])), function (_ref2) {
+  var $display = _ref2.$display;
+  return $display === true ? 'visible' : 'hidden';
+});
+
+var _default = DropdownContent;
+exports.default = _default;

package/dropdown/DropdownContext.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var DropdownContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = DropdownContext;
+exports.default = _default;

package/dropdown/DropdownDivOption.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DropdownDivOption = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 12px var(--spacing-s);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n  width: 100%;\n  border: none;\n  cursor: pointer;\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  > svg {\n    margin-right: var(--spacing-s);\n  }\n"])));
+
+var _default = DropdownDivOption;
+exports.default = _default;

package/dropdown/DropdownItem.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DropdownItem = function DropdownItem(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick;
+
+  var _useContext = (0, _react.useContext)(_DropdownContext.default),
+      handleSelect = _useContext.handleSelect;
+
+  var handleClick = function handleClick(event) {
+    if (onClick) onClick(event);
+    handleSelect();
+  };
+
+  return /*#__PURE__*/(0, _react.cloneElement)(children, {
+    onClick: handleClick
+  });
+};
+
+var _default = DropdownItem;
+exports.default = _default;

package/dropdown/DropdownLinkOption.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DropdownLinkOption = (0, _styledComponents.default)(_reactRouterDom.Link)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 12px var(--spacing-s);\n  color: var(--font-on-background);\n  background: var(--color-background2);\n\n  &:hover {\n    background: var(--color-hover);\n  }\n\n  > svg {\n    margin-right: var(--spacing-s);\n  }\n"])));
+var _default = DropdownLinkOption;
+exports.default = _default;

package/dropdown/DropdownToggle.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _excluded = ["children"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var DropdownToggle = function DropdownToggle(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_DropdownContext.default),
+      display = _useContext.display,
+      setDisplay = _useContext.setDisplay,
+      setInitialized = _useContext.setInitialized,
+      setToggleElement = _useContext.setToggleElement,
+      update = _useContext.update;
+
+  var handleToggle = function handleToggle() {
+    setInitialized(true);
+    setDisplay(!display);
+
+    if (update) {
+      update();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    onClick: handleToggle
+  }, props), {}, {
+    children: /*#__PURE__*/(0, _react.cloneElement)(children, {
+      ref: setToggleElement
+    })
+  }));
+};
+
+var _default = DropdownToggle;
+exports.default = _default;

package/dropdown/index.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DropdownButtonOption", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownButtonOption.default;
+  }
+});
+Object.defineProperty(exports, "DropdownDivOption", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownDivOption.default;
+  }
+});
+Object.defineProperty(exports, "DropdownItem", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownItem.default;
+  }
+});
+Object.defineProperty(exports, "DropdownLinkOption", {
+  enumerable: true,
+  get: function get() {
+    return _DropdownLinkOption.default;
+  }
+});
+exports.default = void 0;
+
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+
+var _DropdownToggle = _interopRequireDefault(require("./DropdownToggle"));
+
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
+
+var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
+
+var _DropdownButtonOption = _interopRequireDefault(require("./DropdownButtonOption"));
+
+var _DropdownDivOption = _interopRequireDefault(require("./DropdownDivOption"));
+
+var _DropdownLinkOption = _interopRequireDefault(require("./DropdownLinkOption"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = Object.assign(_Dropdown.default, {
+  Toggle: _DropdownToggle.default,
+  Content: _DropdownContent.default
+});
+
+exports.default = _default;

package/dropzone/FileDropzone.js

@@ -184,8 +184,8 @@ var FileDropzone = function FileDropzone(_ref) {
         break;
     }
   }, []);
-  var handleFileChange = (0, _react.useCallback)(function (e) {
-    var newFiles = e.target.files;
+  var handleFileChange = (0, _react.useCallback)(function (event) {
+    var newFiles = event.target.files;
 
     if (newFiles.length > 0 && files.length === 0) {
       if (onAddedFile) {
@@ -198,28 +198,28 @@ var FileDropzone = function FileDropzone(_ref) {
 
     inputRef.current.value = '';
   }, [files, onAddedFile, chunking, chunkSize]);
-  var handleDragEnter = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleDragEnter = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
     if (files.length === 0) setDragging(true);
   }, [files]);
-  var handleDragOver = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleDragOver = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
     if (files.length === 0) setDragging(true);
   }, [files]);
-  var handleDragLeave = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleDragLeave = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
     if (files.length === 0) setDragging(false);
   }, [files]);
-  var handleDrop = (0, _react.useCallback)(function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  var handleDrop = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
 
     if (files.length === 0) {
       setDragging(false);
-      var dataTransfer = e.dataTransfer;
+      var dataTransfer = event.dataTransfer;
       var newFiles = dataTransfer.files;
 
       if (newFiles.length > 0) {
@@ -273,7 +273,7 @@ var FileDropzone = function FileDropzone(_ref) {
 
             case 9:
               setSuccessCount(function (previous) {
-                return ++previous;
+                return previous + 1;
               });
               _context.next = 16;
               break;
@@ -306,12 +306,12 @@ var FileDropzone = function FileDropzone(_ref) {
 
             case 25:
               setSuccessCount(function (previous) {
-                return ++previous;
+                return previous + 1;
               });
 
               if (setNext) {
                 setIndex(function (previous) {
-                  return ++previous;
+                  return previous + 1;
                 });
               }
 
@@ -330,7 +330,7 @@ var FileDropzone = function FileDropzone(_ref) {
 
                 if (setNext) {
                   setIndex(function (previous) {
-                    return ++previous;
+                    return previous + 1;
                   });
                 }
               }
@@ -363,13 +363,13 @@ var FileDropzone = function FileDropzone(_ref) {
       handleUpload(index, false);
     });
   }, [failUploadIndexes, handleUpload]);
-  var handleCancelUpload = (0, _react.useCallback)(function (e) {
-    if (e) e.stopPropagation();
+  var handleCancelUpload = (0, _react.useCallback)(function (event) {
+    if (event) event.stopPropagation();
     if (onCanceledFile) onCanceledFile(files[0]);
     handleReset();
   }, [files, onCanceledFile, handleReset]);
-  var handleRemoveFile = (0, _react.useCallback)(function (e) {
-    if (e) e.stopPropagation();
+  var handleRemoveFile = (0, _react.useCallback)(function (event) {
+    if (event) event.stopPropagation();
     if (onRemovedFile) onRemovedFile(files[0]);
     handleReset();
   }, [files, onRemovedFile, handleReset]);
@@ -510,7 +510,7 @@ var PreviewDetails = _styledComponents.default.div(_templateObject6 || (_templat
 
 PreviewDetails.displayName = 'PreviewDetails';
 
-var Progress = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))); //fix:color
+var Progress = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"]))); // fix:color
 
 
 var ProgressBar = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  flex: 1;\n  height: 1.25rem;\n  border-radius: var(--border-radius);\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--color-primary);\n\n  &::before {\n    position: absolute;\n    content: '';\n    width: ", "%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: linear-gradient(to bottom, #00bdff, #597ef7);\n    transition: width 300ms ease-in-out;\n  }\n\n  > span {\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n"])), function (_ref4) {