@innovaccer/design-system 2.5.0 → 2.7.0-0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1635145038303 
+   * Generated on: 1639051084834 
    *      Package: @innovaccer/design-system
-   *      Version: v2.5.0
+   *      Version: v2.7.0-0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -202,46 +202,58 @@
 
       switch (format) {
         case 'dd/mm/yyyy':
-          var p = val.split('/');
-          var date = +p[0] || 1;
-          var month = +p[1] || 1;
-          var year = +p[2] || 1900;
-          return validate(date, month, year);
+          {
+            var p = val.split('/');
+            var date_1 = +p[0] || 1;
+            var month = +p[1] || 1;
+            var year = +p[2] || 1900;
+            return validate(date_1, month, year);
+          }
 
         case 'mm/dd/yyyy':
-          var p = val.split('/');
-          var date = +p[1] || 1;
-          var month = +p[0] || 1;
-          var year = +p[2] || 1900;
-          return validate(date, month, year);
+          {
+            var p = val.split('/');
+            var date_2 = +p[1] || 1;
+            var month = +p[0] || 1;
+            var year = +p[2] || 1900;
+            return validate(date_2, month, year);
+          }
 
         case 'yyyy/mm/dd':
-          var p = val.split('/');
-          var date = +p[2] || 1;
-          var month = +p[1] || 1;
-          var year = +p[0] || 1900;
-          return validate(date, month, year);
+          {
+            var p = val.split('/');
+            var date_3 = +p[2] || 1;
+            var month = +p[1] || 1;
+            var year = +p[0] || 1900;
+            return validate(date_3, month, year);
+          }
 
         case 'dd-mm-yyyy':
-          var p = val.split('-');
-          var date = +p[0] || 1;
-          var month = +p[1] || 1;
-          var year = +p[2] || 1900;
-          return validate(date, month, year);
+          {
+            var p = val.split('-');
+            var date_4 = +p[0] || 1;
+            var month = +p[1] || 1;
+            var year = +p[2] || 1900;
+            return validate(date_4, month, year);
+          }
 
         case 'mm-dd-yyyy':
-          var p = val.split('-');
-          var date = +p[1] || 1;
-          var month = +p[0] || 1;
-          var year = +p[2] || 1900;
-          return validate(date, month, year);
+          {
+            var p = val.split('-');
+            var date_5 = +p[1] || 1;
+            var month = +p[0] || 1;
+            var year = +p[2] || 1900;
+            return validate(date_5, month, year);
+          }
 
         case 'yyyy-mm-dd':
-          var p = val.split('-');
-          var date = +p[2] || 1;
-          var month = +p[1] || 1;
-          var year = +p[0] || 1900;
-          return validate(date, month, year);
+          {
+            var p = val.split('-');
+            var date_6 = +p[2] || 1;
+            var month = +p[1] || 1;
+            var year = +p[0] || 1900;
+            return validate(date_6, month, year);
+          }
 
         default:
           return false;
@@ -968,6 +980,42 @@
       size: 'regular'
     };
 
+    var isEnterKey = function isEnterKey(e) {
+      return e.key === 'Enter';
+    };
+
+    var isSpaceKey = function isSpaceKey(e) {
+      return e.key === 'Space';
+    };
+
+    var useAccessibilityProps = function useAccessibilityProps(_a) {
+      var onClick = _a.onClick,
+          _onKeyDown = _a.onKeyDown,
+          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);
+
+            return;
+          }
+
+          if (isEnterKey(e) && onClick) {
+            onClick(e);
+          }
+        }
+      } : {
+        role: role,
+        'aria-label': rest['aria-label']
+      });
+    };
+
     var Icon = function Icon(props) {
       var _a;
 
@@ -975,8 +1023,8 @@
           className = props.className,
           name = props.name,
           size = props.size,
-          onClick = props.onClick,
           children = props.children;
+      var accessibilityProps = useAccessibilityProps(props);
       var baseProps = extractBaseProps(props);
 
       var mapper = function mapper(val) {
@@ -1007,9 +1055,8 @@
 
       return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
         className: iconClass,
-        style: styles,
-        onClick: onClick
-      }), type ? name + "_" + type : name);
+        style: styles
+      }, accessibilityProps), type ? name + "_" + type : name);
     };
     Icon.displayName = 'Icon';
     Icon.defaultProps = {
@@ -1042,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);
@@ -1052,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];
 
@@ -1060,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));
@@ -1075,7 +1122,7 @@
       };
 
       var onChangeHandler = function onChangeHandler(e) {
-        if (props.checked === undefined) {
+        if (checkedProp === undefined) {
           setChecked(e.target.checked);
           setIndeterminate(e.target.indeterminate);
         }
@@ -1454,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"
@@ -1519,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,
@@ -1551,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();
@@ -1739,7 +1788,7 @@
           name: "Dropdown-search",
           icon: 'search',
           value: searchTerm,
-          placeholder: 'Search..',
+          placeholder: searchPlaceholder,
           autoFocus: true,
           onChange: searchHandler,
           onClear: searchClearHandler,
@@ -1770,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, {
@@ -1900,46 +1949,50 @@
             break;
 
           case 'Enter':
-            var activeElement = document.activeElement;
-
-            if (dropdownOpen && (inputRef.current === activeElement || dropdownTriggerRef.current === activeElement)) {
-              event.preventDefault();
-              var classes = withCheckbox ? optionClass + " .Checkbox-input" : optionClass;
-              var elements = document.querySelectorAll(classes);
-              var element = elements[cursor];
-              if (element) element.click();
-            }
+            {
+              var activeElement = document.activeElement;
+
+              if (dropdownOpen && (inputRef.current === activeElement || dropdownTriggerRef.current === activeElement)) {
+                event.preventDefault();
+                var classes = withCheckbox ? optionClass + " .Checkbox-input" : optionClass;
+                var elements = document.querySelectorAll(classes);
+                var element = elements[cursor];
+                if (element) element.click();
+              }
 
-            if (!dropdownOpen) onToggleDropdown(!dropdownOpen);
-            break;
+              if (!dropdownOpen) onToggleDropdown(!dropdownOpen);
+              break;
+            }
 
           case 'Tab':
-            if (!showApplyButton && dropdownOpen) {
-              event.preventDefault();
-              onToggleDropdown(false, 'onClick');
-              return;
-            }
+            {
+              if (!showApplyButton && dropdownOpen) {
+                event.preventDefault();
+                onToggleDropdown(false, 'onClick');
+                return;
+              }
 
-            var currentElement = document.activeElement;
-            var disabledApplyButton = (_a = dropdownApplyButtonRef.current) === null || _a === void 0 ? void 0 : _a.disabled;
+              var currentElement = document.activeElement;
+              var disabledApplyButton = (_a = dropdownApplyButtonRef.current) === null || _a === void 0 ? void 0 : _a.disabled;
 
-            if ((currentElement === dropdownCancelButtonRef.current && disabledApplyButton || currentElement === dropdownApplyButtonRef.current) && dropdownOpen) {
-              event.preventDefault();
-              onToggleDropdown(false, 'onClick');
-              return;
-            }
+              if ((currentElement === dropdownCancelButtonRef.current && disabledApplyButton || currentElement === dropdownApplyButtonRef.current) && dropdownOpen) {
+                event.preventDefault();
+                onToggleDropdown(false, 'onClick');
+                return;
+              }
 
-            if (showApplyButton && dropdownOpen) {
-              event.preventDefault();
+              if (showApplyButton && dropdownOpen) {
+                event.preventDefault();
 
-              if (currentElement === dropdownCancelButtonRef.current) {
-                (_b = dropdownApplyButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-              } else {
-                (_c = dropdownCancelButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                if (currentElement === dropdownCancelButtonRef.current) {
+                  (_b = dropdownApplyButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                } else {
+                  (_c = dropdownCancelButtonRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+                }
               }
-            }
 
-            break;
+              break;
+            }
         }
       };
 
@@ -3045,6 +3098,17 @@
           };
         };
 
+        _this.yearMouseOverHandler = function (year, isCurrentYear, isDisabled, ev) {
+          var onYearHover = _this.props.onYearHover;
+          var yearData = {
+            value: year,
+            year: year,
+            isCurrentYear: isCurrentYear,
+            isDisabled: isDisabled
+          };
+          if (onYearHover) onYearHover(yearData, ev);
+        };
+
         _this.selectMonth = function (month) {
           return function () {
             _this.updateState(_this.state.yearNav, month);
@@ -3055,7 +3119,28 @@
           };
         };
 
+        _this.monthMouseOverHandler = function (month, isCurrentMonth, isDisabled, ev) {
+          var months = config.months;
+          var onMonthHover = _this.props.onMonthHover;
+          var monthData = {
+            value: months[month],
+            month: months[month],
+            year: _this.state.year,
+            isCurrentMonth: isCurrentMonth,
+            isDisabled: isDisabled
+          };
+          if (onMonthHover) onMonthHover(monthData, ev);
+        };
+
         _this.selectDate = function (index, date, prevMonthDayRange, dayRange) {
+          var d = _this.calculateDate(index, date, prevMonthDayRange, dayRange, false);
+
+          _this.setState({
+            currDate: d
+          });
+        };
+
+        _this.calculateDate = function (index, date, prevMonthDayRange, dayRange, isDateHovered) {
           var neighbouringMonthIndex;
           var neighbouringMonthDate;
           var type = '';
@@ -3077,15 +3162,15 @@
               year = _a.year,
               month = _a.month;
 
-          _this.updateState(year, month, neighbouringMonthDate);
+          if (isDateHovered === false) {
+            _this.updateState(year, month, neighbouringMonthDate);
 
-          _this.onNavIconClickHandler(type)();
+            _this.onNavIconClickHandler(type)();
+          }
 
           var d = _this.getDateValue(year, month, neighbouringMonthDate);
 
-          _this.setState({
-            currDate: d
-          });
+          return d;
         };
 
         _this.onNavIconClickHandler = function (type) {
@@ -3329,7 +3414,8 @@
                 key: row + "-" + col,
                 "data-test": "DesignSystem-Calendar--yearValue",
                 className: valueClass,
-                onClick: _this.selectYear(year)
+                onClick: _this.selectYear(year),
+                onMouseOver: _this.yearMouseOverHandler.bind(_this, year, isCurrentYear(), disabled)
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
                 appearance: active ? 'white' : disabled ? 'disabled' : isCurrentYear() ? 'link' : 'default'
@@ -3381,7 +3467,8 @@
                 key: row + "-" + col,
                 "data-test": "DesignSystem-Calendar--monthValue",
                 className: valueClass,
-                onClick: _this.selectMonth(month)
+                onClick: _this.selectMonth(month),
+                onMouseOver: _this.monthMouseOverHandler.bind(_this, month, isCurrentMonth(), disabled)
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
                 appearance: active ? 'white' : disabled ? 'disabled' : isCurrentMonth() ? 'link' : 'default'
@@ -3438,7 +3525,8 @@
               firstDayOfWeek = _a.firstDayOfWeek,
               disabledBefore = _a.disabledBefore,
               disabledAfter = _a.disabledAfter,
-              monthsInView = _a.monthsInView;
+              monthsInView = _a.monthsInView,
+              onDateHover = _a.onDateHover;
           var _b = _this.state,
               startDate = _b.startDate,
               endDate = _b.endDate,
@@ -3462,11 +3550,7 @@
           var dummyDays = Math.abs(dayDiff);
           var noOfRows = Math.ceil((dayRange + dummyDays) / daysInRow);
 
-          if (noOfRows === 6) {
-            noOfRows = noOfRows;
-          } else if (monthsInView > 1) {
-            noOfRows = noOfRows;
-          } else {
+          if (noOfRows === 6) ; else if (monthsInView > 1) ; else {
             noOfRows = noOfRows + 1;
           }
 
@@ -3502,6 +3586,25 @@
             };
           };
 
+          var onMouseEnterHandler = function onMouseEnterHandler(date, isToday, isDisabled, ev) {
+            var d = _this.calculateDate(index, date, prevMonthDayRange, dayRange, true) || new Date();
+            var months = config.months,
+                days = config.days;
+            var dayName = days.large[d.getDay()];
+            var dateData = {
+              value: d.getDate(),
+              isToday: isToday,
+              isDisabled: isDisabled,
+              todayDate: _this.state.currDate,
+              fullDate: d,
+              date: d.getDate(),
+              month: months[d.getMonth()],
+              year: d.getFullYear(),
+              dayName: dayName
+            };
+            if (onDateHover) onDateHover(dateData, ev);
+          };
+
           return Array.from({
             length: noOfRows
           }, function (_y, row) {
@@ -3601,14 +3704,16 @@
                 "data-test": "DesignSystem-Calendar--dateValue",
                 className: valueClass,
                 onClick: onClickHandler(date),
-                onMouseOver: onMouseOverHandler(date)
+                onMouseOver: onMouseOverHandler(date),
+                onMouseEnter: onMouseEnterHandler.bind(_this, date, today(), disabled)
               }, date), isEventExist && _this.renderEventsIndicator(size, active)), (dummy && date > 0 && index === monthsInView - 1 || dummy && date <= 0 && index === 0) && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Text, {
                 appearance: active ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
                 size: size === 'small' ? 'small' : 'regular',
                 "data-test": "DesignSystem-Calendar--dateValue",
                 className: valueClass,
                 onClick: onClickHandler(date),
-                onMouseOver: onMouseOverHandler(date)
+                onMouseOver: onMouseOverHandler(date),
+                onMouseEnter: onMouseEnterHandler.bind(_this, date, today(), disabled)
               }, date <= 0 ? prevMonthDayRange + date : date - dayRange), isEventExist && _this.renderEventsIndicator(size, active)));
             }));
           });
@@ -3957,6 +4062,8 @@
     };
 
     var GenericChip = function GenericChip(props) {
+      var _a, _b;
+
       var label = props.label,
           icon = props.icon,
           clearButton = props.clearButton,
@@ -3982,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, {
@@ -3990,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
       }));
@@ -4030,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({
@@ -4181,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,
@@ -4324,7 +4433,11 @@
             _a.onDateChange;
             _a.closeOnSelect;
             var size = _a.size,
-            rest = __rest(_a, ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size"]);
+            _b = _a.showTodayDate,
+            showTodayDate = _b === void 0 ? true : _b,
+            _c = _a.children,
+            children = _c === void 0 ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null) : _c,
+            rest = __rest(_a, ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children"]);
 
         var date = this.state.date;
         var months = config.months;
@@ -4348,13 +4461,15 @@
           return !isTodayDateDisabled;
         };
 
-        return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Calendar, __assign({}, rest, {
+        return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
+          className: "d-flex"
+        }, children, /*#__PURE__*/React__namespace.createElement(Calendar, __assign({}, rest, {
           size: size,
           date: currDate,
           disabledBefore: dateDisabledBefore,
           disabledAfter: dateDisabledAfter,
           onDateChange: this.onDateChangeHandler
-        })), /*#__PURE__*/React__namespace.createElement("div", {
+        }))), showTodayDate && /*#__PURE__*/React__namespace.createElement("div", {
           className: "d-flex justify-content-center pb-6",
           "data-test": "DesignSystem-Select--TodaysDate-wrapper"
         }, /*#__PURE__*/React__namespace.createElement(Chip, {
@@ -4473,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,
@@ -4592,7 +4707,8 @@
           var _a;
 
           return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        },
+        role: "presentation"
       }, inlineLabel && /*#__PURE__*/React__namespace.createElement("div", {
         className: "Input-inlineLabel"
       }, /*#__PURE__*/React__namespace.createElement(Text, {
@@ -4623,12 +4739,17 @@
         position: "top",
         tooltip: info
       }, trigger) : actionIcon && (value || defaultValue) ? actionIcon : onClear && (value || defaultValue) && /*#__PURE__*/React__namespace.createElement("div", {
-        className: rightIconClass,
+        className: rightIconClass
+      }, /*#__PURE__*/React__namespace.createElement(Icon, {
+        "data-test": "DesignSystem-Input--closeIcon",
         onClick: function onClick(e) {
-          return onClear(e);
+          var _a;
+
+          (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus({
+            preventScroll: true
+          });
+          onClear(e);
         },
-        "data-test": "DesignSystem-Input--closeIcon"
-      }, /*#__PURE__*/React__namespace.createElement(Icon, {
         name: 'close',
         size: sizeMapping$1[size]
       })));
@@ -4769,7 +4890,14 @@
           var _a;
 
           return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        },
+        onFocus: function onFocus() {
+          var _a;
+
+          return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        },
+        onKeyDown: function onKeyDown() {},
+        role: "presentation"
       }, icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-MetricInput--icon",
         name: icon,
@@ -4804,9 +4932,9 @@
         size: size,
         appearance: "subtle"
       }, suffix), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "MetricInput-arrowIcons",
-        tabIndex: 0
+        className: "MetricInput-arrowIcons"
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
+        tabIndex: -1,
         className: getArrowClass('up'),
         size: iconSize,
         name: "keyboard_arrow_up",
@@ -4815,6 +4943,7 @@
         },
         "data-test": "DesignSystem-MetricInput--upIcon"
       }), /*#__PURE__*/React__namespace.createElement(Icon, {
+        tabIndex: -1,
         className: getArrowClass('down'),
         size: iconSize,
         name: "keyboard_arrow_down",
@@ -4860,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;
@@ -4878,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;
         }
@@ -4898,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;
         }
@@ -4971,7 +5092,10 @@
         }
 
         if (iterator >= currValue.length) {
-          selectionRef.current = index;
+          selectionPos.current = {
+            start: index,
+            end: index
+          };
           return newValue;
         }
 
@@ -4991,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 = '';
@@ -5007,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;
         }
@@ -5036,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"
@@ -5107,6 +5230,7 @@
     InputMask.utils = {
       getDefaultValue: getDefaultValue
     };
+    var X = InputMask;
 
     var Label = function Label(props) {
       var _a;
@@ -5302,14 +5426,14 @@
         switch (eventType) {
           case 'edit':
             setEditing(true);
+            break;
 
           case 'hover':
             setShowComponent(true);
-            return;
+            break;
 
           case 'default':
             setShowComponent(false);
-            return;
         }
       };
 
@@ -5389,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));
@@ -5421,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,
@@ -5437,7 +5562,7 @@
     };
     Message.displayName = 'Message';
     Message.defaultProps = {
-      appearance: 'default',
+      appearance: 'info',
       description: ''
     };
 
@@ -5573,7 +5698,7 @@
         values[index] = fillValue;
       }
     }
-    function isElementOfType(element, _ComponentType) {
+    function isElementOfType(element) {
       return element != null && element.type != null;
     }
 
@@ -6227,7 +6352,7 @@
           return;
         }
 
-        if (!ReactDOM__namespace.findDOMNode(element.current).contains(event.target)) {
+        if (!element.current.contains(event.target)) {
           onOutsideClick(event);
         }
       }, []);
@@ -6598,8 +6723,10 @@
       var SwitchWrapper = classNames__default["default"]((_b = {}, _b['Switch-wrapper'] = true, _b['Switch-wrapper--disabled'] = disabled, _b["Switch-wrapper--" + size] = size, _b['Switch-wrapper--checked'] = checked, _b['Switch-wrapper--checkedDisabled'] = checked && disabled, _b));
 
       var onChangeHandler = function onChangeHandler(event) {
-        if (checkedProp === undefined) setChecked(!checked);
-        if (onChange) onChange(event, !checked);
+        if (event.type == 'change' || isSpaceKey(event)) {
+          if (checkedProp === undefined) setChecked(!checked);
+          if (onChange) onChange(event, !checked);
+        }
       };
 
       return /*#__PURE__*/React__namespace.createElement("div", {
@@ -6613,7 +6740,8 @@
         ref: ref,
         name: name,
         value: value,
-        className: "Switch-input"
+        className: "Switch-input",
+        onKeyUp: onChangeHandler
       })), /*#__PURE__*/React__namespace.createElement("span", {
         className: SwitchWrapper
       }));
@@ -6691,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 = {
@@ -6755,7 +6884,7 @@
     };
     Toast.displayName = 'Toast';
     Toast.defaultProps = {
-      appearance: 'default'
+      appearance: 'info'
     };
 
     var PopperWrapper = function (_super) {
@@ -6771,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);
         };
 
@@ -6840,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
@@ -7031,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;
 
@@ -7042,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);
@@ -7085,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 = {
@@ -7546,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,
@@ -7564,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
     });
 
@@ -8908,15 +9032,23 @@
 
         switch (eventType) {
           case 'edit':
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setEditing(true);
+            {
+              (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+              setEditing(true);
+              setShowComponent(true);
+              break;
+            }
 
           case 'hover':
-            setShowComponent(true);
-            return;
+            {
+              setShowComponent(true);
+              break;
+            }
 
           case 'default':
-            setShowComponent(false);
+            {
+              setShowComponent(false);
+            }
         }
       };
 
@@ -9066,14 +9198,21 @@
       var onChangeHandler = function onChangeHandler(eventType) {
         switch (eventType) {
           case 'edit':
-            setShowComponent(true);
+            {
+              setShowComponent(true);
+              break;
+            }
 
           case 'hover':
-            return;
+            {
+              break;
+            }
 
           case 'default':
-            setShowComponent(false);
-            return;
+            {
+              setShowComponent(false);
+              break;
+            }
         }
       };
 
@@ -9448,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');
         },
@@ -9477,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');
         },
@@ -9521,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];
 
@@ -9611,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, {
@@ -10008,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',
@@ -10028,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;
@@ -10724,7 +10863,7 @@
           dispatch({
             type: 'openDialog'
           });
-          inputRef.current.value = null;
+          inputRef.current.value = '';
           inputRef.current.click();
         }
       }, [dispatch]);
@@ -10735,7 +10874,7 @@
             if (inputRef.current) {
               var files = inputRef.current.files;
 
-              if (!files.length) {
+              if (!files || !files.length) {
                 dispatch({
                   type: 'closeDialog'
                 });
@@ -10778,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;
         }
 
@@ -10899,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
                 });
               }
             });
@@ -10932,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 () {
@@ -10953,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,
@@ -10965,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)),
@@ -10999,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);
@@ -11033,7 +11162,7 @@
         draggedFiles: draggedFiles,
         fileError: fileError,
         isFocused: isFocused && !disabled,
-        open: composeHandler(openFileDialog)
+        open: composeDragHandler(openFileDialog)
       });
     };
     DropzoneBase.displayName = 'DropzoneBase';
@@ -11110,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());
@@ -11634,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;
@@ -11866,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,
@@ -11886,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,
@@ -11927,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: {
@@ -12380,10 +12510,10 @@
               length = _this$props2.length,
               buffer = _this$props2.buffer;
               _this$props2.offset;
-              _this$props2.renderItem;
+              _this$props2.renderItems;
               _this$props2.minItemHeight;
               var forwardRef = _this$props2.forwardRef,
-              rest = _objectWithoutProperties(_this$props2, ["totalLength", "length", "buffer", "offset", "renderItem", "minItemHeight", "forwardRef"]);
+              rest = _objectWithoutProperties(_this$props2, ["totalLength", "length", "buffer", "offset", "renderItems", "minItemHeight", "forwardRef"]);
 
           var _this$state = this.state,
               init = _this$state.init,
@@ -12427,6 +12557,7 @@
 
     var index = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       return /*#__PURE__*/React__namespace.createElement(VirtualScroll, _extends({
+        key: props.totalLength,
         forwardRef: ref
       }, props));
     });
@@ -13778,6 +13909,7 @@
         }, headerAttr), headerChildren)), /*#__PURE__*/React__namespace.createElement("div", {
           className: "Table-grid"
         }, /*#__PURE__*/React__namespace.createElement(Grid, __assign({}, this.state, {
+          key: this.state.searchTerm,
           updateData: this.updateData,
           updateSchema: this.updateSchema,
           updateSortingList: this.updateSortingList,
@@ -14332,54 +14464,62 @@
 
         switch (e.key) {
           case KEY_CODE.backspace:
-            e.preventDefault();
+            {
+              e.preventDefault();
 
-            var vals = __spreadArrays(values);
+              var vals = __spreadArrays(values);
 
-            if (values[index]) {
-              vals[index] = '';
-              setValues(vals);
-            } else if (prev && prev.current) {
-              vals[prevIndex] = '';
-              prev.current.focus({
-                preventScroll: true
-              });
-              setValues(vals);
-            }
+              if (values[index]) {
+                vals[index] = '';
+                setValues(vals);
+              } else if (prev && prev.current) {
+                vals[prevIndex] = '';
+                prev.current.focus({
+                  preventScroll: true
+                });
+                setValues(vals);
+              }
 
-            break;
+              break;
+            }
 
           case KEY_CODE.left:
-            e.preventDefault();
+            {
+              e.preventDefault();
 
-            if (prev && prev.current) {
-              prev.current.focus({
-                preventScroll: true
-              });
-            }
+              if (prev && prev.current) {
+                prev.current.focus({
+                  preventScroll: true
+                });
+              }
 
-            break;
+              break;
+            }
 
           case KEY_CODE.right:
-            e.preventDefault();
+            {
+              e.preventDefault();
 
-            if (nextRef && nextRef.current) {
-              nextRef.current.focus({
-                preventScroll: true
-              });
-            }
+              if (nextRef && nextRef.current) {
+                nextRef.current.focus({
+                  preventScroll: true
+                });
+              }
 
-            break;
+              break;
+            }
 
           case KEY_CODE.up:
           case KEY_CODE.down:
           case KEY_CODE.e:
           case KEY_CODE.E:
-            if (type === 'number') {
-              e.preventDefault();
-            }
+            {
+              if (type === 'number') {
+                e.preventDefault();
+              }
 
-            break;
+              break;
+            }
         }
       };
 
@@ -14438,10 +14578,10 @@
         name: IconMapping[appearance],
         appearance: appearance,
         className: IconClass
-      }), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Text, {
+      }), /*#__PURE__*/React__namespace.createElement(Text, {
         "data-test": "DesignSystem-InlineMessage--Description",
         className: DescriptionClass
-      }, description)));
+      }, description));
     };
     InlineMessage.displayName = 'InlineMessage';
     InlineMessage.defaultProps = {
@@ -14552,7 +14692,7 @@
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("fieldset", {
         className: ChoiceListClass,
         "data-test": "DesignSystem-ChoiceList-Wrapper"
-      }, title && title.trim() && /*#__PURE__*/React__namespace.createElement(Label, null, title.trim()), !!allowMultiple ? /*#__PURE__*/React__namespace.createElement("div", {
+      }, title && title.trim() && /*#__PURE__*/React__namespace.createElement(Label, null, title.trim()), allowMultiple ? /*#__PURE__*/React__namespace.createElement("div", {
         className: "" + (alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
       }, renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected)) : /*#__PURE__*/React__namespace.createElement("div", {
         className: "" + (alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
@@ -14566,7 +14706,27 @@
       disabled: false
     };
 
-    var version = "2.5.0";
+    var Divider = function Divider(props) {
+      var _a;
+
+      var vertical = props.vertical,
+          appearance = props.appearance,
+          className = props.className;
+      var baseProps = extractBaseProps(props);
+      var DividerClass = classNames__default["default"]((_a = {}, _a['Divider'] = true, _a['Divider--horizontal'] = !vertical, _a['Divider--vertical'] = vertical, _a['Divider--basic'] = appearance !== 'header', _a['Divider--header'] = !vertical && appearance === 'header', _a), className);
+      return /*#__PURE__*/React__namespace.createElement("hr", __assign({
+        "data-test": "DesignSystem-Divider"
+      }, baseProps, {
+        className: DividerClass
+      }));
+    };
+    Divider.displayName = 'Divider';
+    Divider.defaultProps = {
+      appearance: 'basic',
+      vertical: false
+    };
+
+    var version = "2.7.0-0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
@@ -14592,6 +14752,7 @@
     exports.DatePicker = DatePicker;
     exports.DateRangePicker = DateRangePicker;
     exports.Dialog = Dialog;
+    exports.Divider = Divider;
     exports.Dropdown = Dropdown;
     exports.Dropzone = Dropzone;
     exports.EditableChipInput = EditableChipInput;
@@ -14609,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;