@innovaccer/design-system 2.18.0 → 2.20.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1691474887429 
+   * Generated on: 1694185325555 
    *      Package: @innovaccer/design-system
-   *      Version: v2.18.0
+   *      Version: v2.20.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -892,7 +892,8 @@
           disabled = props.disabled,
           className = props.className;
           props.tooltip;
-          var rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"]);
+          var iconVariations = props.iconVariations,
+          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconVariations"]);
 
       var buttonClass = classNames__default["default"]((_a = {}, _a['Button'] = true, _a['Button--expanded'] = expanded, _a["Button--" + size] = size, _a["Button--" + size + "Square"] = !children, _a["Button--" + appearance] = appearance, _a['Button--selected'] = selected && (appearance === 'basic' || appearance === 'transparent'), _a["Button--iconAlign-" + iconAlign] = children && iconAlign, _a["" + className] = className, _a));
       var iconClass = classNames__default["default"]((_b = {}, _b['Button-icon'] = true, _b["Button-icon--" + iconAlign] = children && iconAlign, _b));
@@ -915,6 +916,7 @@
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Button--Icon",
         name: icon,
+        variations: iconVariations,
         size: largeIcon && !children ? sizeMapping$3[size] + 4 : sizeMapping$3[size]
       })), children && /*#__PURE__*/React__namespace.createElement("span", {
         className: "Button-text"
@@ -1154,6 +1156,27 @@
         return undefined;
       }
     };
+    var dateComparison = function dateComparison(date, operator, currDate, currMonth, currYear) {
+      var currentDate = new Date(currYear + "-" + currMonth + "-" + currDate);
+
+      if (date) {
+        switch (operator) {
+          case 'less':
+            return date <= currentDate;
+
+          case 'equal':
+            return date.toDateString() === currentDate.toDateString();
+
+          case 'more':
+            return date >= currentDate;
+
+          default:
+            return false;
+        }
+      }
+
+      return false;
+    };
 
     var Calendar = function (_super) {
       __extends(Calendar, _super);
@@ -1302,9 +1325,8 @@
             neighbouringMonthDate = prevMonthDayRange + date;
             type = 'prev';
           } else if (date > dayRange) {
-            neighbouringMonthIndex = index + 1;
-            neighbouringMonthDate = date - dayRange;
-            type = 'next';
+            neighbouringMonthIndex = index;
+            neighbouringMonthDate = date;
           } else {
             neighbouringMonthIndex = index;
             neighbouringMonthDate = date;
@@ -1563,6 +1585,10 @@
                 'Calendar-value--disabled': disabled,
                 'Calendar-yearValue': true
               }, _a["Calendar-yearValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = isCurrentYear(), _a));
+              var textClass = classNames__default["default"]({
+                'Calendar-value--currDate': isCurrentYear() && !active,
+                'Calendar-text': true
+              });
               var getTextColor = classNames__default["default"]({
                 inverse: !active && !isCurrentYear() && !disabled,
                 white: active,
@@ -1579,7 +1605,7 @@
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
                 color: getTextColor,
-                className: "Calendar-text"
+                className: textClass
               }, year));
             }));
           });
@@ -1631,6 +1657,10 @@
                 primary: isCurrentMonth(),
                 'inverse-lightest': disabled
               });
+              var textClass = classNames__default["default"]({
+                'Calendar-value--currDate': isCurrentMonth() && !active,
+                'Calendar-text': true
+              });
               return /*#__PURE__*/React__namespace.createElement("div", {
                 key: row + "-" + col,
                 "data-test": "DesignSystem-Calendar--monthValue",
@@ -1640,7 +1670,7 @@
               }, /*#__PURE__*/React__namespace.createElement(Text, {
                 size: size === 'small' ? 'small' : 'regular',
                 color: getTextColor,
-                className: "Calendar-text"
+                className: textClass
               }, months[month]));
             }));
           });
@@ -1809,21 +1839,6 @@
               var inRange = false;
               var inRangeLast = false;
 
-              if (rangePicker) {
-                startActive = compareDate(startDate, 'equal', yearNavVal, monthNavVal, date);
-                endActive = compareDate(endDate, 'equal', yearNavVal, monthNavVal, date);
-                inRangeLast = compareDate(hoverDate, 'equal', yearNavVal, monthNavVal, date);
-                active = !disabled && (startActive || endActive);
-
-                if (startDate && endDate) {
-                  inRange = !disabled && (compareDate(startDate, 'less', yearNavVal, monthNavVal, date) || startActive) && (compareDate(endDate, 'more', yearNavVal, monthNavVal, date) || endActive);
-                } else if (startDate) {
-                  inRange = !disabled && (compareDate(hoverDate, 'more', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(startDate, 'less', yearNavVal, monthNavVal, date);
-                } else if (endDate) {
-                  inRange = !disabled && (compareDate(hoverDate, 'less', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(endDate, 'more', yearNavVal, monthNavVal, date);
-                }
-              }
-
               var _b = getDateInfo(startDate),
                   sYear = _b.year,
                   sMonth = _b.month,
@@ -1836,37 +1851,63 @@
 
               var isStart = startActive || endDate && inRangeLast && compareDate(hoverDate, 'less', eYear, eMonth, eDate);
               var isEnd = endActive || startDate && inRangeLast && compareDate(hoverDate, 'more', sYear, sMonth, sDate);
-              var isRangeError = inRange && inRangeError;
               var dateInString = "" + (date <= 0 ? prevMonthDayRange + date : date > dayRange ? date - dayRange : date);
               var monthInString = "" + (date <= 0 ? monthNavVal === 0 ? monthNavVal + monthBlock : (monthNavVal - 1) % monthBlock + 1 : date > dayRange ? (monthNavVal + 1) % monthBlock + 1 : monthNavVal + 1);
               var yearInString = "" + (date <= 0 && monthNavVal + 1 === 1 ? yearNavVal - 1 : date > dayRange && monthNavVal + 1 === 12 ? yearNavVal + 1 : yearNavVal);
               var completeDateString = (monthInString.length === 2 ? monthInString : "0" + monthInString) + "/" + (dateInString.length === 2 ? dateInString : "0" + dateInString) + "/" + yearInString;
               var isEventExist = events && _typeof(events) === 'object' && events.hasOwnProperty(completeDateString);
+
+              if (rangePicker) {
+                startActive = compareDate(startDate, 'equal', yearNavVal, monthNavVal, date);
+                endActive = compareDate(endDate, 'equal', yearNavVal, monthNavVal, date);
+                inRangeLast = compareDate(hoverDate, 'equal', yearNavVal, monthNavVal, date);
+                active = !disabled && (startActive || endActive);
+
+                if (startDate && endDate) {
+                  inRange = !disabled && (dateComparison(startDate, 'less', dateInString, monthInString, yearInString) && dateComparison(endDate, 'more', dateInString, monthInString, yearInString) || startActive || endActive);
+                } else if (startDate) {
+                  inRange = !disabled && (dateComparison(hoverDate, 'more', dateInString, monthInString, yearInString) || inRangeLast) && dateComparison(startDate, 'less', dateInString, monthInString, yearInString);
+                } else if (endDate) {
+                  inRange = !disabled && (compareDate(hoverDate, 'less', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(endDate, 'more', yearNavVal, monthNavVal, date);
+                }
+              }
+
+              var isRangeError = inRange && inRangeError;
+              var isStartActive = startDate && dateComparison(startDate, 'equal', dateInString, monthInString, yearInString);
+              var isEndActive = endDate && dateComparison(endDate, 'equal', dateInString, monthInString, yearInString);
+              var activeDate = startDate && endDate && (isStartActive || isEndActive);
+              var isHoverLast = dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && startDate && hoverDate >= startDate;
+              var isEdgeElement = col === 0 || col === 6;
+              var isValueRange = inRange || rangePicker && (active || activeDate);
               var wrapperClass = classNames__default["default"]({
                 'Calendar-valueWrapper': true,
-                'Calendar-valueWrapper--inRange': inRange || rangePicker && active,
+                'Calendar-valueWrapper--inRange': !isEdgeElement && isValueRange,
+                'Calendar-valueWrapper--inEdgeRange': isValueRange && isEdgeElement,
                 'Calendar-valueWrapper--inRangeError': isRangeError,
-                'Calendar-valueWrapper--start': isStart && !isEnd,
-                'Calendar-valueWrapper--end': isEnd && !isStart,
+                'Calendar-valueWrapper--start': isStart && !isEnd && col !== 6 || rangePicker && isStartActive && col !== 6,
+                'Calendar-valueWrapper--end': isEnd && !isStart && col !== 0 || rangePicker && isEndActive && col !== 0,
                 'Calendar-valueWrapper--startEnd': isStart && isEnd,
-                'Calendar-valueWrapper--startError': isStart && isRangeError,
-                'Calendar-valueWrapper--endError': isEnd && isRangeError,
-                'Calendar-valueWrapper--dummy': dummy
+                'Calendar-valueWrapper--startError': isStart && isRangeError || rangePicker && isRangeError && isStartActive,
+                'Calendar-valueWrapper--endError': isEnd && isRangeError || rangePicker && isRangeError && isEndActive,
+                'Calendar-valueWrapper--dummy': dummy,
+                'Calendar-valueWrapper--hoverDate': rangePicker && isHoverLast,
+                'Calendar-valueWrapper--inStartRange': isValueRange && col === 0 && !active && !activeDate,
+                'Calendar-valueWrapper--inEndRange': isValueRange && col === 6 && !active && !activeDate
               });
               var valueClass = classNames__default["default"]((_a = {
                 'Calendar-value': true,
-                'Calendar-inRangeValue': !isStart && !isEnd,
+                'Calendar-inRangeValue': !isStart && !isEnd && !active && !activeDate,
                 'Calendar-value--start': isStart && !isEnd,
                 'Calendar-value--end': isEnd && !isStart,
                 'Calendar-value--startError': isStart && isRangeError,
                 'Calendar-value--endError': isEnd && isRangeError,
-                'Calendar-value--active': active,
+                'Calendar-value--active': active || activeDate,
                 'Calendar-value--disabled': disabled,
                 'Calendar-dateValue': true
-              }, _a["Calendar-dateValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = today(), _a));
+              }, _a["Calendar-dateValue--" + size] = size, _a['Calendar-value--currDateMonthYear'] = today(), _a['Calendar-value--currDate'] = today() && !active && !activeDate, _a));
               var getTextColor = classNames__default["default"]({
-                inverse: !active && !today() && !disabled,
-                white: active,
+                inverse: !active && !today() && !disabled && !activeDate,
+                white: active || activeDate,
                 'primary-lighter': today() && disabled,
                 primary: today(),
                 'inverse-lightest': disabled
@@ -1884,7 +1925,7 @@
                 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',
+                appearance: active || activeDate ? 'white' : disabled ? 'disabled' : today() ? 'link' : 'default',
                 size: size === 'small' ? 'small' : 'regular',
                 "data-test": "DesignSystem-Calendar--dateValue",
                 className: valueClass,
@@ -2300,6 +2341,116 @@
       });
     };
 
+    var getOpticalSize = function getOpticalSize(size) {
+      if (size && size <= 20) {
+        return 20;
+      } else if (size && size >= 48) {
+        return 48;
+      }
+
+      return size;
+    };
+
+    var iconVariantMapper = {
+      more_horiz: {
+        weight: 600,
+        opticalSize: 24
+      },
+      "delete": {
+        fill: 0
+      },
+      radio_button_checked: {
+        fill: 0
+      },
+      radio_button_unchecked: {
+        fill: 0
+      },
+      schedule: {
+        fill: 0
+      },
+      help_outline: {
+        fill: 0
+      },
+      check_circle_outline: {
+        fill: 0
+      },
+      highlight_of: {
+        fill: 0
+      },
+      credit_card: {
+        fill: 0
+      },
+      delete_outline: {
+        fill: 0
+      },
+      bookmark_border: {
+        fill: 0
+      },
+      work_outline: {
+        fill: 0
+      },
+      alarm: {
+        fill: 0
+      },
+      arrow_circle_up: {
+        fill: 0
+      },
+      copyright: {
+        fill: 0
+      },
+      query_builder: {
+        fill: 0
+      },
+      card_membership: {
+        fill: 0
+      },
+      arrow_circle_down: {
+        fill: 0
+      },
+      change_history: {
+        fill: 0
+      },
+      aspect_ratio: {
+        fill: 0
+      },
+      calendar_view_month: {
+        fill: 0
+      },
+      alarm_on: {
+        fill: 0
+      },
+      thumb_down_off_alt: {
+        fill: 0
+      },
+      important_devices: {
+        fill: 0
+      },
+      turned_in_not: {
+        fill: 0
+      },
+      add_circle_outline: {
+        fill: 0
+      },
+      speed: {
+        fill: 0
+      },
+      content_copy: {
+        fill: 0
+      },
+      timelapse: {
+        fill: 0
+      }
+    };
+    var getFontVariation = function getFontVariation(iconName, variations, type, size) {
+      var defaultVariant = {
+        fill: type === 'outlined' ? 0 : 1,
+        weight: 400,
+        grade: 0,
+        opticalSize: getOpticalSize(size)
+      };
+      return __assign(__assign(__assign({}, defaultVariant), iconVariantMapper[iconName]), variations);
+    };
+
     var Icon = function Icon(props) {
       var _a;
 
@@ -2307,17 +2458,18 @@
           className = props.className,
           name = props.name,
           size = props.size,
-          children = props.children;
+          children = props.children,
+          variations = props.variations;
       var accessibilityProps = useAccessibilityProps(props);
       var baseProps = extractBaseProps(props);
-
-      var mapper = function mapper(val) {
-        if (val === 'outline') return 'outlined';
-        if (val === 'rounded') return 'round';
-        return val;
+      var mapper = {
+        outline: 'outlined',
+        sharp: 'outlined',
+        round: 'rounded',
+        filled: 'rounded',
+        'two-tone': 'rounded'
       };
-
-      var type = mapper(props.type);
+      var type = props.type && mapper[props.type] || props.type;
 
       var getIconAppearance = function getIconAppearance(iconColor) {
         var x = iconColor.indexOf('_');
@@ -2325,10 +2477,18 @@
       };
 
       var color = appearance && appearance.includes('_') ? getIconAppearance(appearance) : appearance;
-      var iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a["material-icons-" + mapper(type)] = type && type !== 'filled', _a['Icon'] = true, _a["Icon--" + color] = appearance, _a["" + className] = className, _a));
+      var iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a['material-icons-rounded'] = type === 'rounded', _a['material-icons-outlined'] = type === 'outlined', _a['Icon'] = true, _a["Icon--" + color] = appearance, _a["" + className] = className, _a));
+
+      var _b = getFontVariation(name, variations, type, size),
+          fill = _b.fill,
+          grade = _b.grade,
+          opticalSize = _b.opticalSize,
+          weight = _b.weight;
+
       var styles = {
         fontSize: size + "px",
-        width: size + "px"
+        width: size + "px",
+        'font-variation-settings': "\"FILL\" " + fill + ", \"wght\" " + weight + ", \"GRAD\" " + grade + ", \"opsz\" " + opticalSize
       };
 
       if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
@@ -2337,15 +2497,17 @@
         }), children);
       }
 
-      return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
+      return /*#__PURE__*/React__namespace.createElement("i", __assign({
+        "data-test": "DesignSystem-Icon"
+      }, baseProps, {
         className: iconClass,
         style: styles
-      }, accessibilityProps), type ? name + "_" + type : name);
+      }, accessibilityProps), name);
     };
     Icon.displayName = 'Icon';
     Icon.defaultProps = {
       size: 16,
-      type: 'round'
+      type: 'rounded'
     };
 
     var GenericText = function GenericText(_a) {
@@ -3636,7 +3798,8 @@
           showDuration = props.showDuration,
           noResultMessage = props.noResultMessage,
           disabledSlotList = props.disabledSlotList,
-          fetchTimeOptions = props.fetchTimeOptions;
+          fetchTimeOptions = props.fetchTimeOptions,
+          error = props.error;
 
       var _a = React__namespace.useState(0),
           tabIndex = _a[0],
@@ -3728,7 +3891,8 @@
         staticLimit: dropdownOptionList.length,
         onPopperToggle: function onPopperToggle() {
           setOpenPopover(!openPopover);
-        }
+        },
+        error: error
       });
     };
     TimePickerWithSearch.defaultProps = {
@@ -3743,7 +3907,8 @@
           inputFormat = props.inputFormat,
           outputFormat = props.outputFormat,
           onTimeChange = props.onTimeChange,
-          timeProp = props.time;
+          timeProp = props.time,
+          error = props.error;
 
       var _a = React__namespace.useState(timeProp),
           time$1 = _a[0],
@@ -3812,6 +3977,7 @@
         onChange: onChangeHandler,
         onClear: onClearHandler,
         onBlur: onBlurHandler,
+        error: error,
         id: "parent-TimePicker"
       }));
     };
@@ -5643,36 +5809,20 @@
       var _a;
 
       var className = props.className,
-          name = props.name,
-          size = props.size,
-          children = props.children,
-          type = props.type;
-      var accessibilityProps = useAccessibilityProps(props);
-      var baseProps = extractBaseProps(props);
-      var iconClass = classNames__default["default"]((_a = {}, _a['material-icons'] = true, _a["material-icons-" + type] = type && type !== 'filled', _a['ActionButton'] = true, _a["" + className] = className, _a));
-      var styles = {
-        fontSize: size + "px",
-        width: size + "px"
-      };
+          iconVariations = props.iconVariations,
+          rest = __rest(props, ["className", "iconVariations"]);
 
-      if (children && /*#__PURE__*/React__namespace.isValidElement(children)) {
-        return /*#__PURE__*/React__namespace.createElement("span", __assign({}, baseProps, {
-          className: iconClass,
-          "data-test": "DesignSystem-Input-ActionButton"
-        }), children);
-      }
-
-      return /*#__PURE__*/React__namespace.createElement("i", __assign({}, baseProps, {
+      var iconClass = classNames__default["default"]((_a = {}, _a['ActionButton'] = true, _a["" + className] = className, _a));
+      return /*#__PURE__*/React__namespace.createElement(Icon, __assign({
         className: iconClass,
-        style: styles
-      }, accessibilityProps, {
+        variations: iconVariations,
         "data-test": "DesignSystem-Input-ActionButton"
-      }), name + "_" + type);
+      }, rest));
     };
     ActionButton$1.displayName = 'ActionButton';
     ActionButton$1.defaultProps = {
       size: 16,
-      type: 'round'
+      type: 'rounded'
     };
 
     var sizeMapping$2 = {
@@ -8476,11 +8626,12 @@
       ENTER: 'Enter'
     };
     var ChipInput = function ChipInput(props) {
-      var _a;
+      var _a, _b;
 
       var chipOptions = props.chipOptions,
           allowDuplicates = props.allowDuplicates,
           disabled = props.disabled,
+          error = props.error,
           placeholder = props.placeholder,
           defaultValue = props.defaultValue,
           value = props.value,
@@ -8491,13 +8642,13 @@
           onFocus = props.onFocus;
       var inputRef = /*#__PURE__*/React__namespace.createRef();
 
-      var _b = React__namespace.useState(value || defaultValue),
-          chips = _b[0],
-          setChips = _b[1];
+      var _c = React__namespace.useState(value || defaultValue),
+          chips = _c[0],
+          setChips = _c[1];
 
-      var _c = React__namespace.useState(''),
-          inputValue = _c[0],
-          setInputValue = _c[1];
+      var _d = React__namespace.useState(''),
+          inputValue = _d[0],
+          setInputValue = _d[1];
 
       var baseProps = extractBaseProps(props);
       React__namespace.useEffect(function () {
@@ -8505,9 +8656,10 @@
           setChips(value);
         }
       }, [value]);
-      var ChipInputClass = classNames__default["default"]((_a = {
+      var ChipInputBorderClass = classNames__default["default"]((_a = {}, _a['ChipInput-border'] = true, _a['ChipInput-border--error'] = error, _a));
+      var ChipInputClass = classNames__default["default"]((_b = {
         ChipInput: true
-      }, _a['ChipInput--disabled'] = disabled, _a['ChipInput--withChips'] = chips && chips.length > 0, _a), className);
+      }, _b['ChipInput--disabled'] = disabled, _b['ChipInput--withChips'] = chips && chips.length > 0, _b['ChipInput--error'] = error, _b), className);
 
       var onUpdateChips = function onUpdateChips(updatedChips) {
         if (onChange) onChange(updatedChips);
@@ -8604,7 +8756,7 @@
       });
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-ChipInput--Border",
-        className: "ChipInput-border"
+        className: ChipInputBorderClass
       }, /*#__PURE__*/React__namespace.createElement("div", __assign({
         "data-test": "DesignSystem-ChipInput"
       }, baseProps, {
@@ -16155,8 +16307,44 @@
       iconAlign: 'left'
     };
 
-    var version = "2.18.0";
+    var ActionCard = function ActionCard(props) {
+      var _a;
+
+      var children = props.children,
+          disabled = props.disabled,
+          className = props.className,
+          zIndex = props.zIndex,
+          onClick = props.onClick,
+          rest = __rest(props, ["children", "disabled", "className", "zIndex", "onClick"]);
+
+      var classes = classNames__default["default"]((_a = {}, _a['ActionCard'] = true, _a['ActionCard--disabled'] = disabled, _a), className);
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        if (event.key === 'Enter' && onClick) {
+          onClick(event);
+        }
+      };
+
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+        tabIndex: disabled ? -1 : 0,
+        role: "link",
+        "data-test": "DesignSystem-ActionCard",
+        className: classes,
+        onClick: onClick,
+        onKeyDown: onKeyDownHandler
+      }, rest), disabled && /*#__PURE__*/React__namespace.createElement("div", {
+        style: {
+          zIndex: zIndex
+        },
+        "data-test": "DesignSystem-ActionCard-Overlay",
+        className: "ActionCard-overlay--disabled"
+      }), children);
+    };
+    ActionCard.displayName = 'ActionCard';
+
+    var version = "2.20.0";
 
+    exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
     exports.Backdrop = Backdrop;