@commonsku/styles 1.16.13 → 1.16.15

package/dist/index.js

@@ -16,9 +16,28 @@ var BaseDatePicker = require('react-datepicker');
 var reactTable = require('react-table');
 var reactTableSticky = require('react-table-sticky');
 var reactWindow = require('react-window');
+var reactIs = require('react-is');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -27,6 +46,7 @@ var BaseCreatableSelect__default = /*#__PURE__*/_interopDefaultLegacy(BaseCreata
 var BaseAsyncSelect__default = /*#__PURE__*/_interopDefaultLegacy(BaseAsyncSelect);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var BaseDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(BaseDatePicker);
+var reactIs__namespace = /*#__PURE__*/_interopNamespace(reactIs);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -1203,7 +1223,7 @@ function GearIcon(_a) {
         React__default["default"].createElement("path", { d: renderPath, fill: color }));
 }
 
-var datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n}\n";
+var datepickerStyles = "\n.commonsku-styles-datepicker {\n  &.react-datepicker-wrapper {\n    width: 100%;\n  }\n\n  .react-datepicker__input-container {\n    display: block;\n    width: 100%;\n  }\n\n  .react-datepicker {\n    border: 1px solid var(--color-primary1-60);\n    outline: none;\n    box-shadow: 1px  1px 0px var(--color-primary1-60),\n              -1px -1px 0px var(--color-primary1-60),\n              1px -1px 0px var(--color-primary1-60),\n              -1px  1px 0px var(--color-primary1-60);\n  }\n\n  .react-datepicker__current-month,\n  .react-datepicker-time__header,\n  .react-datepicker-year-header,\n  .react-datepicker__header {\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header,\n  .react-datepicker__today-button {\n    background: var(--color-neutrals-20);\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n\n  .react-datepicker__header {\n    border-bottom: none;\n  }\n\n  .react-datepicker__today-button {\n    border-top: none;\n  }\n\n  .react-datepicker__day {\n    outline: none;\n  }\n\n  .react-datepicker__day :not(\n    .react-datepicker__day--outside-month,\n    .react-datepicker__day--selected\n  ) {\n    color: var(--color-neutrals-90);\n  }\n\n  .react-datepicker__day:hover :not(.react-datepicker__day--selected),\n  .react-datepicker__month-text:hover,\n  .react-datepicker__quarter-text:hover,\n  .react-datepicker__year-text:hover {\n    background-color: var(--color-neutrals-20);\n  }\n\n  .react-datepicker__day--outside-month {\n    color: var(--color-neutrals-70);\n  }\n\n  .react-datepicker__day--weekend {\n    color: var(--color-errors-main);\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected\n   {\n    background-color: var(--color-primary1-60);\n    color: #fff;\n  }\n\n  .react-datepicker__triangle {\n    border-bottom-color: var(--color-neutrals-20) !important;\n  }\n\n  .react-datepicker__triangle::before {\n    border-bottom-color: var(--color-primary1-60) !important;\n    border-top-color: var(--color-primary1-60) !important;\n  }\n\n  .react-datepicker__month-select,\n  .react-datepicker__year-select {\n    height: 30px;\n    border: 2px solid var(--color-primary1-60);\n    padding: 3px;\n    border-radius: 5px;\n    outline: none;\n  }\n\n  .react-datepicker__navigation {\n    border: 0.45rem solid transparent;\n\n    &.react-datepicker__navigation--next {\n      border-left: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  \n    &.react-datepicker__navigation--previous {\n      border-right: 7px solid var(--color-primary1-60);\n      margin-top: 8px;\n    }\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n\n  @media only screen and (min-height: 600px) and (max-height: 800px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 15vh !important;\n    }\n  }\n  @media only screen and (max-height: 599px ) {\n    .react-datepicker__month {\n      overflow-y: scroll !important;\n      height: 5vh !important;\n    }\n  }\n}\n";
 
 var parseColorVars = function (colors, prefix) {
     if (prefix === void 0) { prefix = ''; }
@@ -1583,7 +1603,7 @@ function XIcon(_a) {
 }
 
 function OpportunityCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Opportunity order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Opportunity" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -1654,7 +1674,7 @@ function OpportunityCircleIcon(_a) {
 }
 
 function PresentationCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Presentation order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Presentation" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -1728,7 +1748,7 @@ function PresentationCircleIcon(_a) {
 }
 
 function EstimateCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Estimate order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Estimate" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -1801,7 +1821,7 @@ function EstimateCircleIcon(_a) {
 }
 
 function SalesOrderCircleIcon(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Sales Order stage" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
+    var _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.selected, selected = _c === void 0 ? false : _c, size = _a.size, _d = _a.altText, altText = _d === void 0 ? "Sales Order" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, props = __rest(_a, ["variant", "selected", "size", "altText", "style"]);
     var iconSizes = {
         tiny: {
             width: 24,
@@ -2948,20 +2968,6 @@ function DropzonedPreviews(_a) {
                 ? React__default["default"].createElement(ThumbsContainer, null, thumbs)
                 : React__default["default"].createElement(PlaceHolder, null, placeholder))));
 }
-function DropzonedSimple(_a) {
-    var accept = _a.accept, children = _a.children, props = __rest(_a, ["accept", "children"]);
-    var _b = reactDropzone.useDropzone(__assign({ accept: accept }, props)), acceptedFiles = _b.acceptedFiles, getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
-    var Child = React__default["default"].Children.only(children);
-    if (!Child) {
-        return null;
-    }
-    var ChildElem = React__default["default"].cloneElement(Child, {
-        acceptedFiles: acceptedFiles,
-        inputProps: getInputProps(),
-        rootProps: getRootProps({ isDragActive: isDragActive, isDragAccept: isDragAccept, isDragReject: isDragReject }),
-    });
-    return ChildElem;
-}
 var templateObject_1$L, templateObject_2$r, templateObject_3$j, templateObject_4$e, templateObject_5$8, templateObject_6$8;
 
 /*
@@ -3706,10 +3712,13 @@ var popupStyles = {
 };
 function skuSelectStyles(props) {
     return {
+        container: function (provided, state) {
+            return __assign(__assign({}, provided), props.containerStyles);
+        },
         clearIndicator: function (provided, state) {
-            return __assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
+            return __assign(__assign(__assign({}, provided), { color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color), ':hover': {
                     color: getThemeColor(props, 'select.clearIcon.color', colors.select.clearIcon.color),
-                } });
+                } }), props.clearIndicatorStyles);
         },
         dropdownIndicator: function (provided, state) {
             var styles = {
@@ -3725,16 +3734,16 @@ function skuSelectStyles(props) {
             if (state.isDisabled) {
                 styles['color'] = getThemeColor(props, 'select.dropdownIcon.disabled', colors.select.dropdownIcon.disabled);
             }
-            return __assign(__assign({}, provided), styles);
+            return __assign(__assign(__assign({}, provided), styles), props.dropdownIndicatorStyles);
         },
-        indicatorSeparator: function (provided, state) { return (__assign(__assign({}, provided), { display: 'none' })); },
+        indicatorSeparator: function (provided, state) { return (__assign(__assign(__assign({}, provided), { display: 'none' }), props.indicatorSeparatorStyles)); },
         option: function (provided, state) {
-            return (__assign(__assign(__assign({}, provided), (_.get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }));
+            return __assign(__assign(__assign(__assign({}, provided), (_.get(state.data, 'styles') || {})), { borderBottom: 'none', padding: 10 }), props.optionStyles);
         },
         input: function (provided, state) {
-            return __assign(__assign({}, provided), { height: 'auto', borderColor: props.error
+            return __assign(__assign(__assign({}, provided), { height: 'auto', borderColor: props.error
                     ? getThemeColor(props, 'select.error.border', colors.select.error.border)
-                    : getThemeColor(props, 'select.border', colors.select.border) });
+                    : getThemeColor(props, 'select.border', colors.select.border) }), props.inputStyles);
         },
         control: function (provided, state) {
             var styles = {
@@ -3774,11 +3783,11 @@ function skuSelectStyles(props) {
                     ? getThemeColor(props, 'select.error.border', colors.select.error.border)
                     : provided.borderColor;
             }
-            return (__assign(__assign(__assign({}, provided), styles), { ':hover': {
+            return (__assign(__assign(__assign(__assign({}, provided), styles), { ':hover': {
                     borderColor: props.error
                         ? getThemeColor(props, 'select.error.border', colors.select.error.border)
                         : getThemeColor(props, 'select.active.border', colors.select.active.border),
-                } }));
+                } }), props.controlStyles));
         },
         menu: function (provided, state) {
             var borderColor = props.error
@@ -3807,21 +3816,21 @@ function skuSelectStyles(props) {
                 styles['marginTop'] = '0px';
                 styles['marginBottom'] = '0px';
             }
-            return (__assign(__assign({}, provided), styles));
+            return __assign(__assign(__assign({}, provided), styles), props.menuStyles);
         },
         menuList: function (provided, state) {
-            return __assign(__assign({}, provided), { paddingBottom: 0 });
+            return __assign(__assign(__assign({}, provided), { paddingBottom: 0 }), props.menuListStyles);
         },
         menuPortal: function (provided, state) {
-            return __assign(__assign({}, provided), { zIndex: 9999 });
+            return __assign(__assign(__assign({}, provided), { zIndex: 9999 }), props.menuPortalStyles);
         },
         singleValue: function (provided, state) {
             var opacity = state.isDisabled ? 0.5 : 1;
             var transition = 'opacity 300ms';
-            return __assign(__assign({}, provided), { opacity: opacity, transition: transition });
+            return __assign(__assign(__assign({}, provided), { opacity: opacity, transition: transition }), props.singleValueStyles);
         },
         valueContainer: function (provided, state) {
-            return __assign(__assign({}, provided), { padding: '2px 8px' });
+            return __assign(__assign(__assign({}, provided), { padding: '2px 8px' }), props.valueContainerStyles);
         },
     };
 }
@@ -3837,9 +3846,9 @@ var SKUSelect = React__default["default"].forwardRef(function (_a, ref) {
     return React__default["default"].createElement(BaseSelect__default["default"], __assign({ ref: ref, classNamePrefix: classNamePrefix }, (inPopup ? popupStyles : {}), { styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props));
 });
 var LabeledSelect = React__default["default"].forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React__default["default"].createElement("div", { style: parentStyle },
-        React__default["default"].createElement(Label, { htmlFor: props.name },
+        React__default["default"].createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -3853,9 +3862,9 @@ var SKUCreatableSelect = React__default["default"].forwardRef(function (_a, ref)
     return (React__default["default"].createElement(BaseCreatableSelect__default["default"], __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledCreatableSelect = React__default["default"].forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React__default["default"].createElement("div", { style: parentStyle },
-        React__default["default"].createElement(Label, { htmlFor: props.name },
+        React__default["default"].createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -3869,9 +3878,9 @@ var SKUAsyncSelect = React__default["default"].forwardRef(function (_a, ref) {
     return (React__default["default"].createElement(BaseAsyncSelect__default["default"], __assign({ ref: ref, classNamePrefix: classNamePrefix, styles: skuSelectStyles(selectStyleProps), theme: skuSelectTheme }, props, (inPopup ? popupStyles : {}))));
 });
 var LabeledAsyncSelect = React__default["default"].forwardRef(function (_a, ref) {
-    var parentStyle = _a.parentStyle, props = __rest(_a, ["parentStyle"]);
+    var parentStyle = _a.parentStyle, labelStyle = _a.labelStyle, props = __rest(_a, ["parentStyle", "labelStyle"]);
     return (React__default["default"].createElement("div", { style: parentStyle },
-        React__default["default"].createElement(Label, { htmlFor: props.name },
+        React__default["default"].createElement(Label, { htmlFor: props.name, style: labelStyle },
             props.label,
             " ",
             props.required && '*'),
@@ -5319,11 +5328,12 @@ function HeadlessTable(_a) {
                               }, 1000, { 'trailing': true })
                             } */
                         }, onDrop: column.noDrag ? undefined : onDrop, className: "th", width: column.width, onClick: function () {
+                            var _a, _b, _c;
                             column.isSorted
                                 ? column.isSortedDesc
-                                    ? column.clearSortBy()
-                                    : column.toggleSortBy(true)
-                                : column.toggleSortBy(false);
+                                    ? (_a = column.clearSortBy) === null || _a === void 0 ? void 0 : _a.call(column)
+                                    : (_b = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _b === void 0 ? void 0 : _b.call(column, true)
+                                : (_c = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _c === void 0 ? void 0 : _c.call(column, false);
                             var direction;
                             if (column.isSorted) {
                                 if (column.isSortedDesc) {
@@ -5375,18 +5385,19 @@ function HeadlessTable(_a) {
                                         scrollOffsetDivRef.current.innerText = scrollOffset;
                                     }
                                 }, onDragStart: onDragStart, onDrop: onDrop, onHeaderColumnClick: function (column) {
+                                    var _a, _b;
                                     var sortDirectionState = {};
                                     if (column.isSorted) {
                                         if (column.isSortedDesc) {
                                             column.clearSortBy();
                                         }
                                         else {
-                                            column.toggleSortBy(true);
+                                            (_a = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column, true);
                                             sortDirectionState = { accessor: column.id, direction: 'DESC' };
                                         }
                                     }
                                     else {
-                                        column.toggleSortBy(false);
+                                        (_b = column === null || column === void 0 ? void 0 : column.toggleSortBy) === null || _b === void 0 ? void 0 : _b.call(column, false);
                                         sortDirectionState = { accessor: column.id, direction: 'ASC' };
                                     }
                                     setSortDirection(sortDirectionState);
@@ -6372,6 +6383,32 @@ var AlertNotification = function (_a) {
 };
 var templateObject_1$c;
 
+var RenderChild = function (_a) {
+    var children = _a.children, parseProps = _a.parseProps, props = __rest(_a, ["children", "parseProps"]);
+    var ChildElement = React__default["default"].Children.only(children);
+    var elementProps = React.useMemo(function () {
+        if (typeof ChildElement === 'string'
+            || typeof ChildElement === 'number'
+            || typeof ChildElement === 'boolean'
+            || typeof ChildElement === 'undefined'
+            || ChildElement === null) {
+            return props;
+        }
+        return parseProps ? parseProps(props, ChildElement) : props;
+    }, [parseProps, props, ChildElement]);
+    if (typeof ChildElement === 'string'
+        || typeof ChildElement === 'number'
+        || typeof ChildElement === 'boolean'
+        || typeof ChildElement === 'undefined'
+        || ChildElement === null) {
+        return (React__default["default"].createElement(React__default["default"].Fragment, null, ChildElement));
+    }
+    if (reactIs__namespace.isElement(ChildElement)) {
+        return React__default["default"].cloneElement(ChildElement, elementProps);
+    }
+    return (React__default["default"].createElement(ChildElement, __assign({}, elementProps)));
+};
+
 function useNumberInput(props) {
     var _a = props.defaultValue, defaultValue = _a === void 0 ? "" : _a, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, inputMode = props.inputMode, _b = props.localeOptions, localeOptions = _b === void 0 ? {} : _b;
     var inputRef = React.useRef(null);
@@ -6459,7 +6496,8 @@ function NumberInput(props) {
             ? React__default["default"].createElement(LabeledInput, __assign({}, inputProps, { label: label, ref: ref }))
             : React__default["default"].createElement(Input, __assign({}, inputProps, { ref: ref })),
         icon && type !== 'number'
-            ? React__default["default"].createElement("span", { style: iconWrapperStyles, onClick: handleClickIcon }, icon)
+            ? React__default["default"].createElement("span", { style: iconWrapperStyles, onClick: handleClickIcon },
+                React__default["default"].createElement(RenderChild, null, icon))
             : null));
 }
 
@@ -6576,8 +6614,9 @@ var VirtualTable = function (props) {
         return '100%';
     }, [windowSize, rowsRef]);
     var handleSort = React.useCallback(function (column) {
+        var _a;
         listRef.current && listRef.current.resetAfterIndex(0);
-        column.toggleSortBy();
+        (_a = column.toggleSortBy) === null || _a === void 0 ? void 0 : _a.call(column);
         onSort && onSort({ column: column });
     }, [onSort]);
     function onListScroll(e) {
@@ -7659,6 +7698,50 @@ var ToggleSwitch = function (_a) {
 };
 var templateObject_1, templateObject_2;
 
+/**
+ * DropZone
+ *
+ * if `useDropzoneProps={true}` is passed then dropzone options props will passed to child element
+ *
+ * Example with `useDropzoneProps={true}` (dropzone props will be passed in children):
+ * ```
+ * const DropzoneChild = ({ open, ...dropzoneOptions }) => {
+ *   // do something with dropzoneOptions...
+ *   return (
+ *     <>
+ *       <button onClick={open}>Upload</button>
+ *       <div>{draggedFiles.map(f => <div>{f.name (f.type)}</div>)}</div>
+ *     </>
+ *   );
+ * };
+ *
+ * <DropZone useDropzoneProps={true} noClick={true} onDrop={...}>
+ *   <DropzoneChild />
+ * </DropZone>
+ * ```
+ *
+ * ---------------------------------------------------------
+ *
+ * Example without `useDropzoneProps` (dropzone props will NOT be passed in children):
+ * ```
+ * <DropZone onDrop={...}>
+ *   <button onClick={() => {}}>Upload</button>
+ * </DropZone>
+ * ```
+ *
+ */
+var DropZone = React__default["default"].forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rootProps = _a.rootProps, inputProps = _a.inputProps, _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.useDropzoneProps, useDropzoneProps = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "rootProps", "inputProps", "style", "useDropzoneProps"]);
+    var _d = reactDropzone.useDropzone(props), getRootProps = _d.getRootProps, rootRef = _d.rootRef, getInputProps = _d.getInputProps, inputRef = _d.inputRef, rest = __rest(_d, ["getRootProps", "rootRef", "getInputProps", "inputRef"]);
+    React.useImperativeHandle(ref, function () { return ({ open: rest.open }); }, [rest.open]);
+    var allRootProps = getRootProps(rootProps);
+    var parseChildProps = React.useCallback(function (p, Child) { return (useDropzoneProps ? rest : {}); }, [rest, useDropzoneProps]);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", __assign({}, allRootProps, { ref: rootRef, className: className, style: __assign(__assign({}, allRootProps.style), style) }),
+            React__default["default"].createElement("input", __assign({}, getInputProps(inputProps), { ref: inputRef })),
+            React__default["default"].createElement(RenderChild, { parseProps: parseChildProps }, children))));
+});
+
 Object.defineProperty(exports, 'components', {
     enumerable: true,
     get: function () { return BaseSelect.components; }
@@ -7751,11 +7834,11 @@ exports.DragIcon = DragIcon;
 exports.DraggableTasksCalendar = DraggableTasksCalendar;
 exports.DropArea = DropArea;
 exports.DropDownContent = DropDownContent$2;
+exports.DropZone = DropZone;
 exports.Dropdown = Dropdown;
 exports.DropdownItem = DropdownItem$2;
 exports.Dropzoned = Dropzoned;
 exports.DropzonedPreviews = DropzonedPreviews;
-exports.DropzonedSimple = DropzonedSimple;
 exports.EPOIcon = EPOIcon;
 exports.EditIcon = EditIcon;
 exports.EllipsisIcon = EllipsisIcon;
@@ -7856,6 +7939,7 @@ exports.Radio = Radio;
 exports.RadioIcon = RadioIcon;
 exports.RadioLabel = RadioLabel;
 exports.ReceiptLongIcon = ReceiptLongIcon;
+exports.RenderChild = RenderChild;
 exports.ResponsiveTable = ResponsiveTable;
 exports.Row = Row;
 exports.SHARED_STYLE_MAPS = SHARED_STYLE_MAPS;