@innovaccer/design-system 2.6.0 → 2.7.0-0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1639036106070 
+   * Generated on: 1639051084834 
    *      Package: @innovaccer/design-system
-   *      Version: v2.6.0
+   *      Version: v2.7.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -991,11 +991,14 @@
     var useAccessibilityProps = function useAccessibilityProps(_a) {
       var onClick = _a.onClick,
           _onKeyDown = _a.onKeyDown,
-          role = _a.role;
+          role = _a.role,
+          rest = __rest(_a, ["onClick", "onKeyDown", "role"]);
+
       return __assign({}, onClick ? {
         onClick: onClick,
         role: role || 'button',
         tabIndex: 0,
+        'aria-label': rest['aria-label'],
         onKeyDown: function onKeyDown(e) {
           if (_onKeyDown) {
             _onKeyDown(e);
@@ -1008,7 +1011,8 @@
           }
         }
       } : {
-        role: role
+        role: role,
+        'aria-label': rest['aria-label']
       });
     };
 
@@ -1050,7 +1054,6 @@
       }
 
       return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
-        role: "alert",
         className: iconClass,
         style: styles
       }, accessibilityProps), type ? name + "_" + type : name);
@@ -1086,9 +1089,9 @@
           onChange = props.onChange,
           name = props.name,
           value = props.value,
-          className = props.className;
-          props.checked;
-          var helpText = props.helpText,
+          className = props.className,
+          checkedProp = props.checked,
+          helpText = props.helpText,
           rest = __rest(props, ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "disabled", "onChange", "name", "value", "className", "checked", "helpText"]);
 
       var ref = React__namespace.useRef(null);
@@ -1096,7 +1099,7 @@
         return ref.current;
       });
 
-      var _h = React__namespace.useState(props.checked === undefined ? defaultChecked : props.checked),
+      var _h = React__namespace.useState(checkedProp === undefined ? defaultChecked : checkedProp),
           checked = _h[0],
           setChecked = _h[1];
 
@@ -1104,10 +1107,10 @@
         setIndeterminate(indeterminate);
       }, [indeterminate]);
       React__namespace.useEffect(function () {
-        if (props.checked !== undefined) {
-          setChecked(props.checked);
+        if (checkedProp !== undefined) {
+          setChecked(checkedProp);
         }
-      }, [props.checked]);
+      }, [checkedProp]);
       var CheckboxClass = classNames__default["default"]((_a = {}, _a['Checkbox'] = true, _a['Checkbox--disabled'] = disabled, _a), className);
       var CheckboxOuterWrapper = classNames__default["default"]((_b = {}, _b['Checkbox-outerWrapper'] = true, _b["Checkbox-outerWrapper--" + size] = size, _b));
       var CheckboxInputWrapper = classNames__default["default"]((_c = {}, _c['Checkbox-input'] = true, _c['Checkbox-input--checked'] = checked, _c['Checkbox-input--indeterminate'] = props.indeterminate, _c));
@@ -1119,7 +1122,7 @@
       };
 
       var onChangeHandler = function onChangeHandler(e) {
-        if (props.checked === undefined) {
+        if (checkedProp === undefined) {
           setChecked(e.target.checked);
           setIndeterminate(e.target.indeterminate);
         }
@@ -1498,51 +1501,51 @@
 
       switch (loadingType) {
         case 'DEFAULT':
-          return /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          return /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: 'large',
             "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           });
 
         case 'WITH_ICON':
-          return /*#__PURE__*/React__default["default"].createElement(Placeholder, {
+          return /*#__PURE__*/React__namespace.createElement(Placeholder, {
             withImage: true,
             round: true,
             "data-test": "DesignSystem-Dropdown--Placeholder"
-          }, /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          }, /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "large"
           }));
 
         case 'WITH_META':
-          return /*#__PURE__*/React__default["default"].createElement(Placeholder, {
+          return /*#__PURE__*/React__namespace.createElement(Placeholder, {
             withImage: false,
             "data-test": "DesignSystem-Dropdown--Placeholder"
-          }, /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          }, /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "large",
             "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
-          }), /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          }), /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "medium",
             size: "xxs",
             "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
           }));
 
         case 'WITH_CHECKBOX':
-          return /*#__PURE__*/React__default["default"].createElement(Placeholder, {
+          return /*#__PURE__*/React__namespace.createElement(Placeholder, {
             withImage: true,
             "data-test": "DesignSystem-Dropdown--Placeholder"
-          }, /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          }, /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "large"
           }));
 
         case 'ICON_WITH_META':
-          return /*#__PURE__*/React__default["default"].createElement(Placeholder, {
+          return /*#__PURE__*/React__namespace.createElement(Placeholder, {
             withImage: true,
             round: true,
             imageSize: 'medium',
             "data-test": "DesignSystem-Dropdown--Placeholder"
-          }, /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          }, /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "large",
             "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
-          }), /*#__PURE__*/React__default["default"].createElement(PlaceholderParagraph, {
+          }), /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "medium",
             size: "xxs",
             "data-test": "DesignSystem-Dropdown--PlaceholderParagraph"
@@ -1563,20 +1566,20 @@
       var _d = props.listOptions,
           listOptions = _d === void 0 ? [] : _d,
           inputRef = props.inputRef,
-          _f = props.align,
-          align = _f === void 0 ? 'right' : _f,
-          _g = props.optionType,
-          optionType = _g === void 0 ? 'DEFAULT' : _g,
-          _h = props.applyButtonLabel,
-          applyButtonLabel = _h === void 0 ? 'Apply' : _h,
-          _j = props.cancelButtonLabel,
-          cancelButtonLabel = _j === void 0 ? 'Cancel' : _j,
-          _k = props.truncateOption,
-          truncateOption = _k === void 0 ? true : _k,
-          _l = props.withSelectAll,
-          withSelectAll = _l === void 0 ? true : _l,
-          _m = props.maxHeight,
-          maxHeight = _m === void 0 ? 200 : _m,
+          _e = props.align,
+          align = _e === void 0 ? 'right' : _e,
+          _f = props.optionType,
+          optionType = _f === void 0 ? 'DEFAULT' : _f,
+          _g = props.applyButtonLabel,
+          applyButtonLabel = _g === void 0 ? 'Apply' : _g,
+          _h = props.cancelButtonLabel,
+          cancelButtonLabel = _h === void 0 ? 'Cancel' : _h,
+          _j = props.truncateOption,
+          truncateOption = _j === void 0 ? true : _j,
+          _k = props.withSelectAll,
+          withSelectAll = _k === void 0 ? true : _k,
+          _l = props.maxHeight,
+          maxHeight = _l === void 0 ? 200 : _l,
           customTrigger = props.customTrigger,
           selected = props.selected,
           tempSelected = props.tempSelected,
@@ -1595,7 +1598,9 @@
           applyOptions = props.applyOptions,
           cancelOptions = props.cancelOptions,
           toggleDropdown = props.toggleDropdown,
-          className = props.className;
+          className = props.className,
+          _m = props.searchPlaceholder,
+          searchPlaceholder = _m === void 0 ? 'Search..' : _m;
       var baseProps = extractBaseProps(props);
       var dropdownRef = /*#__PURE__*/React__namespace.createRef();
       var triggerRef = /*#__PURE__*/React__namespace.createRef();
@@ -1783,7 +1788,7 @@
           name: "Dropdown-search",
           icon: 'search',
           value: searchTerm,
-          placeholder: 'Search..',
+          placeholder: searchPlaceholder,
           autoFocus: true,
           onChange: searchHandler,
           onClear: searchClearHandler,
@@ -1814,7 +1819,7 @@
         var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
         return /*#__PURE__*/React__namespace.createElement("div", {
           className: SelectAllClass,
-          onMouseEnter: function onMouseEnter(_e) {
+          onMouseEnter: function onMouseEnter() {
             return updateActiveOption(0, true);
           }
         }, /*#__PURE__*/React__namespace.createElement(Checkbox, {
@@ -4057,6 +4062,8 @@
     };
 
     var GenericChip = function GenericChip(props) {
+      var _a, _b;
+
       var label = props.label,
           icon = props.icon,
           clearButton = props.clearButton,
@@ -4082,6 +4089,8 @@
         if (onClick) onClick();
       };
 
+      var iconAppearance = classNames__default["default"]((_a = {}, _a['disabled'] = disabled && !selected, _a['info'] = selected, _a['subtle'] = !disabled && !selected && !clearButton && !icon, _a['default'] = !disabled && !selected && !clearButton && icon, _a));
+      var textAppearance = classNames__default["default"]((_b = {}, _b['disabled'] = disabled && !selected, _b['link'] = selected, _b['default'] = !disabled && !selected, _b));
       return /*#__PURE__*/React__namespace.createElement("div", __assign({
         "data-test": "DesignSystem-GenericChip--GenericChipWrapper"
       }, baseProps, {
@@ -4090,15 +4099,15 @@
       }), icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-GenericChip--Icon",
         name: icon,
-        appearance: disabled ? 'disabled' : selected ? 'info' : 'default',
+        appearance: iconAppearance,
         className: iconClass('left')
       }), /*#__PURE__*/React__namespace.createElement(Text, {
         "data-test": "DesignSystem-GenericChip--Text",
-        appearance: disabled ? 'disabled' : 'default'
+        appearance: textAppearance
       }, label), clearButton && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-GenericChip--clearButton",
         name: "clear",
-        appearance: disabled ? 'disabled' : selected ? 'info' : 'subtle',
+        appearance: iconAppearance,
         className: iconClass('right'),
         onClick: onCloseHandler
       }));
@@ -4130,7 +4139,7 @@
 
       var chipClass = classNames__default["default"]((_a = {
         Chip: true
-      }, _a["Chip-" + type + "--disabled"] = disabled, _a["Chip--" + type] = type && !disabled, _a["Chip-" + type + "--selected"] = selected && !disabled, _a), className);
+      }, _a["Chip-" + type + "--disabled"] = disabled, _a["Chip--" + type] = type && !disabled, _a["Chip-" + type + "--selected"] = selected && !disabled, _a["Chip-selection--selectedDisabled"] = type === 'selection' && selected && disabled, _a), className);
       var clearbutton = type === 'action' ? false : clearButton;
       var select = type === 'selection' && selected ? true : false;
       return /*#__PURE__*/React__namespace.createElement(GenericChip, __assign({
@@ -4281,13 +4290,13 @@
       };
 
       var mask = date[inputFormat];
-      return /*#__PURE__*/React__namespace.createElement(InputMask, __assign({
+      return /*#__PURE__*/React__namespace.createElement(X, __assign({
         icon: "events",
         placeholder: inputFormat
       }, inputOptions, {
         error: showError,
         mask: mask,
-        value: date$1 ? translateToString(inputFormat, date$1) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : '',
+        value: date$1 ? translateToString(inputFormat, date$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
         onChange: onChangeHandler,
         onBlur: onBlurHandler,
         onClear: onClearHandler,
@@ -4579,12 +4588,12 @@
       };
 
       var mask = time[inputFormat];
-      return /*#__PURE__*/React__namespace.createElement(InputMask, __assign({
+      return /*#__PURE__*/React__namespace.createElement(X, __assign({
         placeholder: placeholders[inputFormat],
         placeholderChar: placeholderChar
       }, inputOptions, {
         mask: mask,
-        value: time$1 ? translateToTime(inputFormat, time$1) : init ? InputMask.utils.getDefaultValue(mask, placeholderChar) : '',
+        value: time$1 ? translateToTime(inputFormat, time$1) : init ? X.utils.getDefaultValue(mask, placeholderChar) : '',
         validators: inputValidator,
         onChange: onChangeHandler,
         onClear: onClearHandler,
@@ -4980,7 +4989,10 @@
           className = props.className,
           rest = __rest(props, ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className"]);
 
-      var getNewCursorPosition = function getNewCursorPosition(type, position) {
+      var isEditable = React__namespace.useCallback(function (pos) {
+        return _typeof(mask[pos]) === 'object';
+      }, [mask]);
+      var getNewCursorPosition = React__namespace.useCallback(function (type, position) {
         if (type === 'right') {
           for (var i = position; i < mask.length; i++) {
             if (isEditable(i)) return i;
@@ -4998,17 +5010,15 @@
         }
 
         return position;
-      };
-
-      var getDefaultSelection = function getDefaultSelection() {
+      }, [mask, isEditable]);
+      var getDefaultSelection = React__namespace.useCallback(function () {
         var pos = getNewCursorPosition('right', 0);
         return {
           start: pos,
           end: pos
         };
-      };
-
-      var getPlaceholderValue = function getPlaceholderValue(start, end) {
+      }, [getNewCursorPosition]);
+      var getPlaceholderValue = React__namespace.useCallback(function (start, end) {
         if (start === void 0) {
           start = 0;
         }
@@ -5018,66 +5028,57 @@
         }
 
         return getDefaultValue(mask, placeholderChar).slice(start, end + 1);
-      };
-
-      var getSelectionLength = function getSelectionLength(val) {
-        return Math.abs(val.end - val.start);
-      };
-
-      var isEditable = function isEditable(pos) {
-        return _typeof(mask[pos]) === 'object';
-      };
-
+      }, [mask, placeholderChar]);
+      var defaultPlaceholderValue = React__namespace.useMemo(function () {
+        return getPlaceholderValue();
+      }, [getPlaceholderValue]);
+      var defaultSelection = React__namespace.useMemo(function () {
+        return getDefaultSelection();
+      }, [getDefaultSelection]);
+      var ref = React__namespace.useRef(null);
       var deferId = React__namespace.useRef();
-      var selectionRef = React__namespace.useRef(0);
+      var selectionPos = React__namespace.useRef(defaultSelection);
+      var newSelectionPos = React__namespace.useRef(0);
 
       var _d = React__namespace.useState(defaultValue || valueProp || ''),
           value = _d[0],
           setValue = _d[1];
 
-      var _e = React__namespace.useState(getDefaultSelection()),
-          selection = _e[0],
-          setSelection = _e[1];
-
-      var ref = React__namespace.useRef(null);
       React__namespace.useImperativeHandle(forwardRef, function () {
         return ref.current;
       });
       React__namespace.useEffect(function () {
         setValue(valueProp || '');
       }, [valueProp]);
-
-      var setCursorPosition = function setCursorPosition(val) {
-        return setSelectionPos({
-          start: val,
-          end: val
-        });
-      };
-
-      var getCurrSelection = function getCurrSelection() {
+      React__namespace.useEffect(function () {
+        setCursorPosition(newSelectionPos.current);
+      }, [value]);
+      var getSelectionLength = React__namespace.useCallback(function (val) {
+        return Math.abs(val.end - val.start);
+      }, []);
+      var getCurrSelection = React__namespace.useCallback(function () {
         var _a, _b;
 
         return {
           start: ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.selectionStart) || 0,
           end: ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.selectionEnd) || 0
         };
-      };
-
-      var setSelectionPos = function setSelectionPos(pos) {
+      }, [ref.current]);
+      var setSelectionPos = React__namespace.useCallback(function (pos) {
         if (ref.current) {
           var el = ref.current;
           var start = Math.min(pos.start, pos.end);
           var end = Math.max(pos.start, pos.end);
           el.setSelectionRange(start, end);
         }
-      };
-
-      var updateSelection = function updateSelection() {
-        setSelection(getCurrSelection());
-        deferId.current = window.requestAnimationFrame(updateSelection);
-      };
-
-      var insertAtIndex = function insertAtIndex(currValue, index, iterator) {
+      }, [ref.current]);
+      var setCursorPosition = React__namespace.useCallback(function (val) {
+        return setSelectionPos({
+          start: val,
+          end: val
+        });
+      }, [setSelectionPos]);
+      var insertAtIndex = React__namespace.useCallback(function (currValue, index, iterator) {
         if (iterator === void 0) {
           iterator = 0;
         }
@@ -5091,7 +5092,10 @@
         }
 
         if (iterator >= currValue.length) {
-          selectionRef.current = index;
+          selectionPos.current = {
+            start: index,
+            end: index
+          };
           return newValue;
         }
 
@@ -5111,12 +5115,15 @@
 
         newValue += insertAtIndex(currValue, newIndex, newIterator);
         return newValue;
-      };
-
-      var onChangeHandler = function onChangeHandler(e) {
+      }, [mask, placeholderChar, isEditable]);
+      var updateSelection = React__namespace.useCallback(function () {
+        selectionPos.current = getCurrSelection();
+        deferId.current = window.requestAnimationFrame(updateSelection);
+      }, [selectionPos.current, getCurrSelection]);
+      var onChangeHandler = React__namespace.useCallback(function (e) {
         var inputVal = e.currentTarget.value;
         var currSelection = getCurrSelection();
-        var start = Math.min(selection.start, currSelection.start);
+        var start = Math.min(selectionPos.current.start, currSelection.start);
         var end = currSelection.end;
         var cursorPosition = start;
         var enteredVal = '';
@@ -5127,8 +5134,8 @@
         updatedVal = insertAtIndex(enteredVal, start);
         insertedStringLength = updatedVal.length;
 
-        if (currSelection.end > selection.end) {
-          removedLength = insertedStringLength ? getSelectionLength(selection) : 0;
+        if (currSelection.end > selectionPos.current.end) {
+          removedLength = insertedStringLength ? getSelectionLength(selectionPos.current) : 0;
         } else if (inputVal.length < value.length) {
           removedLength = value.length - inputVal.length;
         }
@@ -5156,54 +5163,50 @@
         }
 
         var newValue = maskedVal.slice(0, mask.length).join('');
-        window.requestAnimationFrame(function () {
-          return setCursorPosition(cursorPosition);
-        });
+        newSelectionPos.current = cursorPosition;
 
-        if (isValid(validators, newValue) && newValue !== value) {
+        if (newValue !== value && isValid(validators, newValue)) {
           setValue(newValue);
-          if (onChange) onChange(e, newValue);
+          onChange === null || onChange === void 0 ? void 0 : onChange(e, newValue);
+        } else {
+          window.requestAnimationFrame(function () {
+            return setCursorPosition(newSelectionPos.current);
+          });
         }
-      };
-
-      var onBlurHandler = function onBlurHandler(e) {
+      }, [selectionPos.current, validators, getCurrSelection, insertAtIndex, getSelectionLength, getPlaceholderValue, getNewCursorPosition, isEditable, setCursorPosition, setValue, onChange]);
+      var onBlurHandler = React__namespace.useCallback(function (e) {
         var inputVal = e.currentTarget.value;
 
         if (clearOnEmptyBlur) {
-          if (inputVal === getPlaceholderValue()) {
+          if (inputVal === defaultPlaceholderValue) {
             setValue('');
             inputVal = '';
           }
         }
 
-        if (onBlur) onBlur(e, inputVal);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e, inputVal);
         if (deferId.current) window.cancelAnimationFrame(deferId.current);
-      };
-
-      var onClearHandler = function onClearHandler(e) {
-        setValue(getPlaceholderValue());
-        window.requestAnimationFrame(function () {
-          return setCursorPosition(getDefaultSelection().start);
-        });
-        if (onClear) onClear(e);
-      };
-
-      var onFocusHandler = function onFocusHandler(e) {
+      }, [clearOnEmptyBlur, deferId.current, getPlaceholderValue, setValue, onBlur]);
+      var onClearHandler = React__namespace.useCallback(function (e) {
+        newSelectionPos.current = defaultSelection.start;
+        setValue(defaultPlaceholderValue);
+        onClear === null || onClear === void 0 ? void 0 : onClear(e);
+      }, [setValue, getPlaceholderValue, setCursorPosition, getDefaultSelection, onClear]);
+      var onFocusHandler = React__namespace.useCallback(function (e) {
         deferId.current = window.requestAnimationFrame(updateSelection);
 
         if (!value) {
+          newSelectionPos.current = defaultSelection.start;
           setValue(getPlaceholderValue());
-          window.requestAnimationFrame(function () {
-            return setSelectionPos(getDefaultSelection());
-          });
         }
 
-        if (onFocus) onFocus(e);
-      };
-
-      var classes = classNames__default["default"]({
-        'd-flex flex-column flex-grow-1': true
-      }, className);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+      }, [deferId.current, value, updateSelection, setValue, setSelectionPos, onFocus]);
+      var classes = React__namespace.useMemo(function () {
+        return classNames__default["default"]({
+          'd-flex flex-column flex-grow-1': true
+        }, className);
+      }, [className]);
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: classes,
         "data-test": "DesignSystem-InputMask--Wrapper"
@@ -5227,6 +5230,7 @@
     InputMask.utils = {
       getDefaultValue: getDefaultValue
     };
+    var X = InputMask;
 
     var Label = function Label(props) {
       var _a;
@@ -5509,10 +5513,11 @@
     var Message = function Message(props) {
       var _a, _b, _c, _d;
 
-      var appearance = props.appearance,
-          actions = props.actions,
+      var actions = props.actions,
           title = props.title,
           className = props.className;
+      var appearance = props.appearance;
+      appearance = appearance === 'default' ? 'info' : appearance;
       var baseProps = extractBaseProps(props);
       var MessageClass = classNames__default["default"]((_a = {}, _a['Message'] = true, _a["Message--" + appearance] = appearance, _a), className);
       var IconClass = classNames__default["default"]((_b = {}, _b['Message-icon'] = true, _b["Message-icon--" + appearance] = appearance, _b['Message-icon--withTitle'] = title, _b));
@@ -5541,7 +5546,7 @@
         "data-test": "DesignSystem-Message"
       }, baseProps, {
         className: MessageClass
-      }), appearance !== 'default' && /*#__PURE__*/React__namespace.createElement(Icon, {
+      }), /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Message--Icon",
         name: IconMapping$2[appearance],
         appearance: appearance,
@@ -5557,7 +5562,7 @@
     };
     Message.displayName = 'Message';
     Message.defaultProps = {
-      appearance: 'default',
+      appearance: 'info',
       description: ''
     };
 
@@ -5693,7 +5698,7 @@
         values[index] = fillValue;
       }
     }
-    function isElementOfType(element, _ComponentType) {
+    function isElementOfType(element) {
       return element != null && element.type != null;
     }
 
@@ -6347,7 +6352,7 @@
           return;
         }
 
-        if (!ReactDOM__namespace.findDOMNode(element.current).contains(event.target)) {
+        if (!element.current.contains(event.target)) {
           onOutsideClick(event);
         }
       }, []);
@@ -6814,12 +6819,13 @@
     var Toast = function Toast(props) {
       var _a, _b, _c, _d;
 
-      var appearance = props.appearance,
-          title = props.title,
+      var title = props.title,
           message = props.message,
           actions = props.actions,
           onClose = props.onClose,
           className = props.className;
+      var appearance = props.appearance;
+      appearance = appearance === 'default' ? 'info' : appearance;
       var baseProps = extractBaseProps(props);
       var wrapperClass = classNames__default["default"]((_a = {}, _a['Toast'] = true, _a['Toast--withMessage'] = message, _a["Toast--" + appearance] = appearance, _a), className);
       var IconMapping = {
@@ -6878,7 +6884,7 @@
     };
     Toast.displayName = 'Toast';
     Toast.defaultProps = {
-      appearance: 'default'
+      appearance: 'info'
     };
 
     var PopperWrapper = function (_super) {
@@ -6894,13 +6900,8 @@
           onToggle(newValue === undefined ? !open : newValue, type);
         };
 
-        _this.findDOMNode = function (ref) {
-          return ReactDOM__namespace.findDOMNode(ref.current);
-        };
-
         _this.doesEventContainsElement = function (event, ref) {
-          var el = _this.findDOMNode(ref);
-
+          var el = ref.current;
           return el && el.contains(event.target);
         };
 
@@ -6963,7 +6964,7 @@
           this._throttleWait = false;
 
           if (this.props.open) {
-            var triggerElement = this.findDOMNode(this.triggerRef);
+            var triggerElement = this.triggerRef.current;
             var zIndex = this.getZIndexForLayer(triggerElement);
             this.setState({
               zIndex: zIndex === undefined ? zIndex : zIndex + 1
@@ -7154,7 +7155,7 @@
       return PopperWrapper;
     }(React__namespace.Component);
 
-    var propsList$1 = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
+    var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
     var Popover = function Popover(props) {
       var _a;
 
@@ -7165,16 +7166,17 @@
           onToggle = props.onToggle,
           className = props.className,
           hideOnReferenceEscape = props.hideOnReferenceEscape,
-          boundaryElement = props.boundaryElement,
+          _b = props.boundaryElement,
+          boundaryElement = _b === void 0 ? document.body : _b,
           rest = __rest(props, ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"]);
 
-      var _b = React__namespace.useState(!!props.open),
-          open = _b[0],
-          setOpen = _b[1];
+      var _c = React__namespace.useState(!!props.open),
+          open = _c[0],
+          setOpen = _c[1];
 
-      var _c = React__namespace.useState(false),
-          init = _c[0],
-          setInit = _c[1];
+      var _d = React__namespace.useState(false),
+          init = _d[0],
+          setInit = _d[1];
 
       React__namespace.useEffect(function () {
         if (props.open !== undefined) setOpen(props.open);
@@ -7208,12 +7210,11 @@
       }), PopoverWrapper);
     };
     Popover.displayName = 'Popover';
-    Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps, propsList$1, true), {
+    Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps, propsList, true), {
       offset: 'large',
       position: 'bottom',
       hideOnReferenceEscape: true,
-      customStyle: {},
-      boundaryElement: document.body
+      customStyle: {}
     });
 
     var keyCodes = {
@@ -7669,7 +7670,7 @@
       }), list);
     };
 
-    var propsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
+    var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
     var Tooltip = function Tooltip(props) {
       var children = props.children,
           tooltip = props.tooltip,
@@ -7687,7 +7688,7 @@
         offset: 'medium'
       }, rest), tooltipWrapper);
     };
-    Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, propsList), {
+    Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
       hoverable: false
     });
 
@@ -9586,12 +9587,12 @@
       }, startLabel && /*#__PURE__*/React__namespace.createElement(Label, {
         required: startInputOptions.required,
         withInput: true
-      }, startLabel), /*#__PURE__*/React__namespace.createElement(InputMask, __assign({
+      }, startLabel), /*#__PURE__*/React__namespace.createElement(X, __assign({
         icon: "events",
         placeholder: inputFormat
       }, startInputOptions, {
         mask: mask,
-        value: startDate ? translateToString(inputFormat, startDate) : init ? InputMask.utils.getDefaultValue(mask, startPlaceholderChar) : '',
+        value: startDate ? translateToString(inputFormat, startDate) : init ? X.utils.getDefaultValue(mask, startPlaceholderChar) : '',
         onChange: function onChange(e, val) {
           onChangeHandler(e, val || '', 'start');
         },
@@ -9615,12 +9616,12 @@
       }, endLabel && /*#__PURE__*/React__namespace.createElement(Label, {
         required: endInputOptions.required,
         withInput: true
-      }, endLabel), /*#__PURE__*/React__namespace.createElement(InputMask, __assign({
+      }, endLabel), /*#__PURE__*/React__namespace.createElement(X, __assign({
         icon: "events",
         placeholder: inputFormat
       }, endInputOptions, {
         mask: mask,
-        value: endDate ? translateToString(inputFormat, endDate) : init ? InputMask.utils.getDefaultValue(mask, endPlaceholderChar) : '',
+        value: endDate ? translateToString(inputFormat, endDate) : init ? X.utils.getDefaultValue(mask, endPlaceholderChar) : '',
         onChange: function onChange(e, val) {
           onChangeHandler(e, val || '', 'end');
         },
@@ -9659,7 +9660,7 @@
       var label = inputOptions.label;
       var _a = inputOptions.placeholderChar,
           placeholderChar = _a === void 0 ? '_' : _a;
-      var defaultValue = InputMask.utils.getDefaultValue(mask, placeholderChar).split(' - ');
+      var defaultValue = X.utils.getDefaultValue(mask, placeholderChar).split(' - ');
       var sValue = startValue || defaultValue[0];
       var eValue = endValue || defaultValue[1];
 
@@ -9749,7 +9750,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Column, null, label && /*#__PURE__*/React__namespace.createElement(Label, {
         required: inputOptions.required,
         withInput: true
-      }, label), /*#__PURE__*/React__namespace.createElement(InputMask, __assign({
+      }, label), /*#__PURE__*/React__namespace.createElement(X, __assign({
         icon: "events",
         placeholder: inputFormat + " - " + inputFormat
       }, inputOptions, {
@@ -10146,6 +10147,15 @@
         return this.renderCalendar();
       };
 
+      DateRangePicker.utils = {
+        getCurrentWeek: getCurrentWeek,
+        getPreviousWeek: getPreviousWeek,
+        getPreviousMonth: getPreviousMonth,
+        getPrevious90Days: getPrevious90Days,
+        getCustomDates: getCustomDates,
+        getCurrentYear: getCurrentYear,
+        getCurrentMonth: getCurrentMonth
+      };
       DateRangePicker.defaultProps = __assign(__assign({}, Calendar.defaultProps), {
         children: /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null),
         contentAlign: 'left',
@@ -10166,15 +10176,6 @@
       });
       return DateRangePicker;
     }(React__namespace.Component);
-    DateRangePicker.utils = {
-      getCurrentWeek: getCurrentWeek,
-      getPreviousWeek: getPreviousWeek,
-      getPreviousMonth: getPreviousMonth,
-      getPrevious90Days: getPrevious90Days,
-      getCustomDates: getCustomDates,
-      getCurrentYear: getCurrentYear,
-      getCurrentMonth: getCurrentMonth
-    };
 
     var TabsWrapper = function TabsWrapper(props) {
       var _a;
@@ -10862,7 +10863,7 @@
           dispatch({
             type: 'openDialog'
           });
-          inputRef.current.value = null;
+          inputRef.current.value = '';
           inputRef.current.click();
         }
       }, [dispatch]);
@@ -10873,7 +10874,7 @@
             if (inputRef.current) {
               var files = inputRef.current.files;
 
-              if (!files.length) {
+              if (!files || !files.length) {
                 dispatch({
                   type: 'closeDialog'
                 });
@@ -10916,7 +10917,7 @@
       var dragTargetsRef = React.useRef([]);
 
       var onDocumentDrop = function onDocumentDrop(event) {
-        if (rootRef.current && rootRef.current.contains(event.target)) {
+        if (event.target instanceof HTMLDivElement && rootRef.current && rootRef.current.contains(event.target)) {
           return;
         }
 
@@ -11037,11 +11038,12 @@
                   errors = errors.concat(customErrors);
                 }
 
+                var filteredErrors = errors.filter(function (e) {
+                  return e;
+                });
                 fileRejections.push({
                   file: file,
-                  errors: errors.filter(function (e) {
-                    return e;
-                  })
+                  errors: filteredErrors
                 });
               }
             });
@@ -11070,16 +11072,8 @@
         });
       }, [multiple, accept, minSize, maxSize, getFilesFromEvent, onDrop, onDropAccepted, onDropRejected]);
 
-      var composeHandler = function composeHandler(fn) {
-        return disabled ? null : fn;
-      };
-
-      var composeKeyboardHandler = function composeKeyboardHandler(_fn) {
-        return null;
-      };
-
       var composeDragHandler = function composeDragHandler(fn) {
-        return composeHandler(fn);
+        return disabled ? null : fn;
       };
 
       var getRootProps = React.useMemo(function () {
@@ -11091,10 +11085,10 @@
           }
 
           var _c = _a.refKey,
-              refKey = _c === void 0 ? 'ref' : _c,
-              onKeyDown = _a.onKeyDown,
-              onFocus = _a.onFocus,
-              onBlur = _a.onBlur;
+              refKey = _c === void 0 ? 'ref' : _c;
+              _a.onKeyDown;
+              _a.onFocus;
+              _a.onBlur;
               _a.onClick;
               var onDragEnterCallback = _a.onDragEnterCallback,
               onDragOverCallback = _a.onDragOverCallback,
@@ -11103,9 +11097,6 @@
               rest = __rest(_a, ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"]);
 
           return __assign((_b = {
-            onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
-            onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
-            onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
             onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
             onDragOver: composeDragHandler(composeEventHandlers(onDragOverCallback, onDragOverCb)),
             onDragLeave: composeDragHandler(composeEventHandlers(onDragLeaveCallback, onDragLeaveCb)),
@@ -11137,8 +11128,8 @@
             style: {
               display: 'none'
             },
-            onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
-            onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
+            onChange: composeDragHandler(composeEventHandlers(onChange, onDropCb)),
+            onClick: composeDragHandler(composeEventHandlers(onClick, onInputElementClick)),
             autoComplete: 'off',
             tabIndex: -1
           }, _b[refKey] = inputRef, _b);
@@ -11171,7 +11162,7 @@
         draggedFiles: draggedFiles,
         fileError: fileError,
         isFocused: isFocused && !disabled,
-        open: composeHandler(openFileDialog)
+        open: composeDragHandler(openFileDialog)
       });
     };
     DropzoneBase.displayName = 'DropzoneBase';
@@ -11248,42 +11239,42 @@
       var WrapperClass = classNames__default["default"]((_c = {}, _c['DropzoneWrapper'] = true, _c["DropzoneWrapper--" + type] = true, _c));
 
       var renderDropzone = function renderDropzone() {
-        if (isDragReject) return /*#__PURE__*/React__default["default"].createElement(DropzoneError, {
+        if (isDragReject) return /*#__PURE__*/React__namespace.createElement(DropzoneError, {
           type: type,
           error: fileErrorMessages[fileError]
         });
-        if (isDragActive) return /*#__PURE__*/React__default["default"].createElement(DropzoneActive, {
+        if (isDragActive) return /*#__PURE__*/React__namespace.createElement(DropzoneActive, {
           type: type
         });
-        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type !== 'tight' && /*#__PURE__*/React__default["default"].createElement(Icon, {
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, type !== 'tight' && /*#__PURE__*/React__namespace.createElement(Icon, {
           name: "backup",
           size: 64,
           className: IconClass
-        }), /*#__PURE__*/React__default["default"].createElement("div", {
+        }), /*#__PURE__*/React__namespace.createElement("div", {
           className: WrapperClass,
           "data-test": "DesignSystem-Dropzone-Wrapper"
-        }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(Text, {
+        }, /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(Text, {
           size: "large",
           weight: "strong",
           className: "mr-2",
           appearance: disabled ? 'disabled' : 'default'
-        }, "Drag your files here or"), /*#__PURE__*/React__default["default"].createElement("span", {
+        }, "Drag your files here or"), /*#__PURE__*/React__namespace.createElement("span", {
           className: "cursor-pointer",
           onClick: open
-        }, /*#__PURE__*/React__default["default"].createElement(Text, {
+        }, /*#__PURE__*/React__namespace.createElement(Text, {
           size: "large",
           weight: "strong",
           appearance: disabled ? 'disabled' : 'link'
-        }, "browse files")), /*#__PURE__*/React__default["default"].createElement("input", __assign({}, getInputProps()))), formatLabel && /*#__PURE__*/React__default["default"].createElement(Text, {
+        }, "browse files")), /*#__PURE__*/React__namespace.createElement("input", __assign({}, getInputProps()))), formatLabel && /*#__PURE__*/React__namespace.createElement(Text, {
           appearance: disabled ? 'disabled' : 'subtle'
-        }, formatLabel), sizeLabel && /*#__PURE__*/React__default["default"].createElement(Text, {
+        }, formatLabel), sizeLabel && /*#__PURE__*/React__namespace.createElement(Text, {
           appearance: disabled ? 'disabled' : 'subtle'
-        }, sizeLabel), sampleFileLink && /*#__PURE__*/React__default["default"].createElement("div", {
+        }, sizeLabel), sampleFileLink && /*#__PURE__*/React__namespace.createElement("div", {
           className: "mt-5"
         }, sampleFileLink)));
       };
 
-      return /*#__PURE__*/React__default["default"].createElement("div", __assign({}, getRootProps(), baseProps, {
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({}, getRootProps(), baseProps, {
         className: DropzoneClass,
         "data-test": "DesignSystem-Dropzone"
       }), renderDropzone());
@@ -11772,7 +11763,7 @@
       showFilters: true
     };
 
-    var context = /*#__PURE__*/React__default["default"].createContext(__assign(__assign({}, defaultProps$1), {
+    var context = /*#__PURE__*/React__namespace.createContext(__assign(__assign({}, defaultProps$1), {
       ref: null
     }));
     var GridProvider = context.Provider;
@@ -12004,18 +11995,19 @@
 
     var Cell = function Cell(props) {
       var context$1 = React__namespace.useContext(context);
-      var isHead = props.isHead,
-          firstCell = props.firstCell,
-          schema = props.schema,
-          data = props.data,
-          rowIndex = props.rowIndex,
-          colIndex = props.colIndex,
-          expandedState = props.expandedState,
-          onSelectAll = props.onSelectAll,
-          onMenuChange = props.onMenuChange,
-          onFilterChange = props.onFilterChange,
-          updateColumnSchema = props.updateColumnSchema,
-          reorderColumn = props.reorderColumn;
+      var _a = props,
+          isHead = _a.isHead,
+          firstCell = _a.firstCell,
+          schema = _a.schema,
+          data = _a.data,
+          rowIndex = _a.rowIndex,
+          colIndex = _a.colIndex,
+          expandedState = _a.expandedState,
+          onSelectAll = _a.onSelectAll,
+          onMenuChange = _a.onMenuChange,
+          onFilterChange = _a.onFilterChange,
+          updateColumnSchema = _a.updateColumnSchema,
+          reorderColumn = _a.reorderColumn;
       var draggable = context$1.draggable,
           separator = context$1.separator,
           nestedRows = context$1.nestedRows,
@@ -12024,15 +12016,15 @@
       var name = schema.name,
           hidden = schema.hidden,
           pinned = schema.pinned,
-          _a = schema.cellType,
-          cellType = _a === void 0 ? 'DEFAULT' : _a;
+          _b = schema.cellType,
+          cellType = _b === void 0 ? 'DEFAULT' : _b;
 
-      var _b = getCellSize(cellType),
-          width = _b.width,
-          _c = _b.minWidth,
-          minWidth = _c === void 0 ? 96 : _c,
-          _d = _b.maxWidth,
-          maxWidth = _d === void 0 ? 800 : _d;
+      var _c = getCellSize(cellType),
+          width = _c.width,
+          _d = _c.minWidth,
+          minWidth = _d === void 0 ? 96 : _d,
+          _e = _c.maxWidth,
+          maxWidth = _e === void 0 ? 800 : _e;
 
       var cellClass = classNames__default["default"]({
         'Grid-cell': true,
@@ -12065,7 +12057,7 @@
               name: name,
               type: pinned || ''
             };
-            if (from.type === to.type) reorderColumn(from.name, to.name);
+            if (from.type === to.type && reorderColumn) reorderColumn(from.name, to.name);
           }
         },
         style: {
@@ -14734,7 +14726,7 @@
       vertical: false
     };
 
-    var version = "2.6.0";
+    var version = "2.7.0-0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
@@ -14778,7 +14770,7 @@
     exports.Icon = Icon;
     exports.InlineMessage = InlineMessage;
     exports.Input = Input;
-    exports.InputMask = InputMask;
+    exports.InputMask = X;
     exports.Label = Label;
     exports.Legend = Legend;
     exports.Link = Link;