@innovaccer/design-system 2.5.0-2 → 2.5.1

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1632859342998 
+   * Generated on: 1640017583851 
    *      Package: @innovaccer/design-system
-   *      Version: v2.5.0-2
+   *      Version: v2.5.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -1832,7 +1832,8 @@
           var _c = props.noResultMessage,
               noResultMessage = _c === void 0 ? 'No result found' : _c;
           return /*#__PURE__*/React__namespace.createElement("div", {
-            className: 'Dropdown-errorWrapper'
+            className: 'Dropdown-errorWrapper',
+            "data-test": "DesignSystem-Dropdown--errorWrapper"
           }, /*#__PURE__*/React__namespace.createElement("div", {
             className: 'Option'
           }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -2671,7 +2672,7 @@
       regular: 16,
       large: 20
     };
-    var Button = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+    var ButtonBase = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var _a, _b;
 
       var _c = props.size,
@@ -2690,41 +2691,48 @@
           selected = props.selected,
           loading = props.loading,
           disabled = props.disabled,
-          className = props.className,
-          tooltip = props.tooltip,
-          rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"]);
+          className = props.className;
+          props.tooltip;
+          var rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip"]);
 
       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));
-
-      var ButtonElement = function ButtonElement() {
-        return /*#__PURE__*/React__namespace.createElement("button", __assign({
-          "data-test": "DesignSystem-Button",
-          ref: ref,
-          type: type,
-          className: buttonClass,
-          disabled: disabled || loading,
-          tabIndex: tabIndex
-        }, rest), loading ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Spinner, {
-          size: "small",
-          appearance: appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white',
-          "data-test": "DesignSystem-Button--Spinner",
-          className: "Button-spinner"
-        }), /*#__PURE__*/React__namespace.createElement(Text, {
-          className: "Button-text Button-text--hidden"
-        }, children || '')) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, icon && /*#__PURE__*/React__namespace.createElement("div", {
-          className: iconClass
-        }, /*#__PURE__*/React__namespace.createElement(Icon, {
-          "data-test": "DesignSystem-Button--Icon",
-          name: icon,
-          appearance: disabled ? 'disabled' : appearance === 'basic' || appearance === 'transparent' ? selected ? 'info' : 'default' : 'white',
-          size: largeIcon && !children ? sizeMapping$2[size] + 4 : sizeMapping$2[size]
-        })), children));
-      };
+      return /*#__PURE__*/React__namespace.createElement("button", __assign({
+        "data-test": "DesignSystem-Button",
+        ref: ref,
+        type: type,
+        className: buttonClass,
+        disabled: disabled || loading,
+        tabIndex: tabIndex
+      }, rest), loading ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Spinner, {
+        size: "small",
+        appearance: appearance === 'basic' || appearance === 'transparent' ? 'secondary' : 'white',
+        "data-test": "DesignSystem-Button--Spinner",
+        className: "Button-spinner"
+      }), /*#__PURE__*/React__namespace.createElement(Text, {
+        className: "Button-text Button-text--hidden"
+      }, children || '')) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, icon && /*#__PURE__*/React__namespace.createElement("div", {
+        className: iconClass
+      }, /*#__PURE__*/React__namespace.createElement(Icon, {
+        "data-test": "DesignSystem-Button--Icon",
+        name: icon,
+        appearance: disabled ? 'disabled' : appearance === 'basic' || appearance === 'transparent' ? selected ? 'info' : 'default' : 'white',
+        size: largeIcon && !children ? sizeMapping$2[size] + 4 : sizeMapping$2[size]
+      })), children));
+    });
+    var Button = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+      var _a = __assign({}, props),
+          icon = _a.icon,
+          tooltip = _a.tooltip,
+          children = _a.children;
 
       return icon && tooltip && !children ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
         tooltip: tooltip
-      }, /*#__PURE__*/React__namespace.createElement(ButtonElement, null)) : /*#__PURE__*/React__namespace.createElement(ButtonElement, null);
+      }, /*#__PURE__*/React__namespace.createElement(ButtonBase, __assign({}, props, {
+        ref: ref
+      }))) : /*#__PURE__*/React__namespace.createElement(ButtonBase, __assign({}, props, {
+        ref: ref
+      }));
     });
     Button.displayName = 'Button';
 
@@ -9681,11 +9689,9 @@
       };
     };
     var getCustomDates = function getCustomDates() {
-      var current = new Date();
-      var currentDate = current.getDate();
       return {
-        startDate: setDate(currentDate),
-        endDate: setDate(currentDate)
+        startDate: '',
+        endDate: ''
       };
     };
 
@@ -9915,6 +9921,12 @@
               if (!startError) onRangeChange(startDate, undefined, sValue, eValue);else if (!endError) onRangeChange(undefined, endDate, sValue, eValue);else onRangeChange(undefined, undefined, sValue, eValue);
             }
           }
+
+          if (this.state.startDate && this.state.endDate) {
+            this.setState({
+              open: !this.state.open
+            });
+          }
         }
       };
 
@@ -11678,11 +11690,11 @@
       var sortOptions = [{
         label: 'Sort Ascending',
         value: 'sortAsc',
-        icon: 'arrow_downward'
+        icon: 'arrow_upward'
       }, {
         label: 'Sort Descending',
         value: 'sortDesc',
-        icon: 'arrow_upward'
+        icon: 'arrow_downward'
       }];
       var pinOptions = [{
         label: 'Pin Left',
@@ -11735,9 +11747,9 @@
         }, schema.displayName), sorting && /*#__PURE__*/React__namespace.createElement("div", {
           className: "Grid-sortingIcons"
         }, sorted ? sorted === 'asc' ? /*#__PURE__*/React__namespace.createElement(Icon, {
-          name: "arrow_downward"
-        }) : /*#__PURE__*/React__namespace.createElement(Icon, {
           name: "arrow_upward"
+        }) : /*#__PURE__*/React__namespace.createElement(Icon, {
+          name: "arrow_downward"
         }) : /*#__PURE__*/React__namespace.createElement(Icon, {
           name: "unfold_more"
         })));
@@ -11749,6 +11761,7 @@
         ref: el
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "Grid-cellContent",
+        "data-test": "DesignSystem-Grid-cellContent",
         onClick: function onClick() {
           if (!loading && sorting) {
             if (sorted === 'asc') onMenuChange(name, 'sortDesc');
@@ -12020,7 +12033,8 @@
       };
 
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "Grid-head"
+        className: "Grid-head",
+        "data-test": "DesignSystem-GridHead-wrapper"
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "Grid-row Grid-row--head"
       }, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')));
@@ -12373,10 +12387,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,
@@ -12420,6 +12434,7 @@
 
     var index = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       return /*#__PURE__*/React__namespace.createElement(VirtualScroll, _extends({
+        key: props.totalLength,
         forwardRef: ref
       }, props));
     });
@@ -12489,7 +12504,8 @@
             'Grid-cellGroup--pinned': pinned
           }, _a["Grid-cellGroup--pinned-" + pinned] = pinned, _a['Grid-cellGroup--main'] = !pinned, _a));
           return /*#__PURE__*/React__namespace.createElement("div", {
-            className: classes
+            className: classes,
+            "data-test": "DesignSystem-Grid-cellGroup"
           }, renderCheckbox(shouldRenderCheckbox), currSchema.map(function (s, index) {
             var cI = pinned === 'left' ? index : leftPinnedSchema.length + index;
             if (pinned === 'right') cI += unpinnedSchema.length;
@@ -12809,7 +12825,7 @@
           this.addScrollListeners();
         }
 
-        if (prevProps.page !== this.props.page) {
+        if (prevProps.page !== this.props.page || prevProps.error !== this.props.error) {
           this.removeScrollListeners();
           this.addScrollListeners();
         }
@@ -12918,7 +12934,8 @@
 
       if (metaList) {
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "GridCell-metaList"
+          className: "GridCell-metaList",
+          "data-test": "DesignSystem-GridCell-metaList"
         }, metaList.map(function (list, index) {
           return /*#__PURE__*/React__namespace.createElement(Text, {
             key: index,
@@ -13005,7 +13022,8 @@
           return /*#__PURE__*/React__namespace.createElement("div", {
             className: cellClass + " GridCell--align-" + align + " GridCell--default"
           }, loading ? /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
-            length: "medium"
+            length: "medium",
+            "data-test": "DesignSystem-GridCell-placeHolder"
           }) : renderTitle({
             tooltip: tooltip,
             cellData: cellData
@@ -13015,7 +13033,8 @@
           return /*#__PURE__*/React__namespace.createElement("div", {
             className: cellClass + " GridCell--metaList"
           }, loading ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
-            length: "medium"
+            length: "medium",
+            "data-test": "DesignSystem-GridCell-withMetaList"
           }), /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
             length: "large",
             size: "xxs"
@@ -13036,7 +13055,8 @@
           }
 
           return /*#__PURE__*/React__namespace.createElement("div", {
-            className: cellClass + " GridCell--align-" + align + " GridCell--avatar"
+            className: cellClass + " GridCell--align-" + align + " GridCell--avatar",
+            "data-test": "DesignSystem-GridCell-avatar"
           }, size !== 'tight' && renderAvatar({
             cellData: cellData
           }));
@@ -13053,7 +13073,8 @@
           }
 
           return /*#__PURE__*/React__namespace.createElement("div", {
-            className: cellClass + " GridCell--avatarWithText"
+            className: cellClass + "   ",
+            "data-test": "DesignSystem-GridCell-avatarWithText"
           }, size !== 'tight' && renderAvatar({
             cellData: cellData
           }), renderTitle({
@@ -13076,7 +13097,8 @@
           }
 
           return /*#__PURE__*/React__namespace.createElement("div", {
-            className: cellClass + " GridCell--avatarWithText"
+            className: cellClass + " GridCell--avatarWithText",
+            "data-test": "DesignSystem-GridCell-avatarWithMetaList"
           }, size !== 'tight' && renderAvatar({
             cellData: cellData
           }), /*#__PURE__*/React__namespace.createElement("div", {
@@ -13098,7 +13120,8 @@
           }
 
           return /*#__PURE__*/React__namespace.createElement("div", {
-            className: cellClass + " GridCell--align-" + align + " GridCell--icon"
+            className: cellClass + " GridCell--align-" + align + " GridCell--icon",
+            "data-test": "DesignSystem-GridCell-icon"
           }, renderIcon({
             cellData: cellData
           }));
@@ -13211,6 +13234,7 @@
         onChange: handleParentChange
       })), tempOptions.map(function (option, index) {
         return /*#__PURE__*/React__namespace.createElement("div", {
+          "data-test": "DesignSystem-Table-Header--draggableDropdownOption",
           key: option.value,
           className: "OptionWrapper d-flex flex-space-between align-items-center cursor-pointer",
           draggable: true,
@@ -13352,6 +13376,7 @@
       }, withSearch && /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-search"
       }, /*#__PURE__*/React__namespace.createElement(Input, {
+        "data-test": "DesignSystem-Table-Header--withSearch",
         name: "GridHeader-search",
         icon: "search",
         placeholder: searchPlaceholder,
@@ -13405,11 +13430,13 @@
       })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label), withPagination && (selectAll === null || selectAll === void 0 ? void 0 : selectAll.checked) && allowSelectAll && /*#__PURE__*/React__namespace.createElement("div", {
         className: "ml-4"
       }, !selectAllRecords ? /*#__PURE__*/React__namespace.createElement(Button, {
+        "data-test": "DesignSystem-Table-Header--selectAllItemsButton",
         size: "tiny",
         onClick: function onClick() {
           return setSelectAllRecords(true);
         }
       }, "Select all " + totalRecords + " items") : /*#__PURE__*/React__namespace.createElement(Button, {
+        "data-test": "DesignSystem-Table-Header--clearSelectionItemsButton",
         size: "tiny",
         onClick: function onClick() {
           return setSelectAllRecords(false);
@@ -13741,9 +13768,11 @@
         var totalRecords = this.state.totalRecords;
         var totalPages = getTotalPages(totalRecords, pageSize);
         return /*#__PURE__*/React__namespace.createElement("div", __assign({}, baseProps, {
-          className: "Table" + classes
+          className: "Table" + classes,
+          "data-test": "DesignSystem-Table-wrapper"
         }), withHeader && /*#__PURE__*/React__namespace.createElement("div", {
-          className: "Table-header"
+          className: "Table-header",
+          "data-test": "DesignSystem-Table-header"
         }, /*#__PURE__*/React__namespace.createElement(Header, __assign({}, this.state, {
           updateSchema: this.updateSchema,
           updateFilterList: this.updateFilterList,
@@ -13881,13 +13910,16 @@
           'Navigation-menuIcon--active': activeMenuIcon
         });
         return /*#__PURE__*/React__namespace.createElement("div", {
-          key: index
+          key: index,
+          "data-test": "DesignSystem-Navigation-VerticalNavigation--menuWrapper"
         }, /*#__PURE__*/React__namespace.createElement("div", {
+          "data-test": "DesignSystem-Navigation-VerticalNavigation--menuItem",
           className: menuClasses,
           onClick: function onClick() {
             return onClickHandler(menu);
           }
         }, menu.icon && /*#__PURE__*/React__namespace.createElement(Icon, {
+          "data-test": "DesignSystem-Navigation-VerticalNavigation--menuIcon",
           className: menuIconClasses,
           name: menu.icon,
           appearance: getIconAppearance(activeMenuIcon, menu.disabled)
@@ -13896,6 +13928,7 @@
         }, /*#__PURE__*/React__namespace.createElement(Text, {
           appearance: getTextAppearance(activeMenu, menu.disabled)
         }, menu.label)), menu.subMenu && menu.subMenu.length > 0 && /*#__PURE__*/React__namespace.createElement(Icon, {
+          "data-test": "DesignSystem-Navigation-VerticalNavigation--expandedSubMenuIcon",
           className: "mx-4",
           name: menuState[menu.name] ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
           appearance: "subtle"
@@ -13907,6 +13940,7 @@
           var isActive = isMenuActive(menus, subMenu, active);
           var subMenuClasses = classNames__default["default"](menuClasses, (_a = {}, _a['Navigation-menu--subMenu'] = true, _a['Navigation-menu--active'] = isActive, _a));
           return /*#__PURE__*/React__namespace.createElement("div", {
+            "data-test": "DesignSystem-Navigation-VerticalNavigation--subMenu",
             key: ind,
             className: subMenuClasses,
             onClick: function onClick() {
@@ -14423,7 +14457,124 @@
       description: ''
     };
 
-    var version = "2.5.0-2";
+    var renderCheckbox = function renderCheckbox(list, handleOnChange, ChoiceListDisabled, size, alignment, selected) {
+      return list.map(function (item, checkboxIndex) {
+        var name = item.name,
+            value = item.value,
+            helpText = item.helpText,
+            disabled = item.disabled,
+            label = item.label;
+        return /*#__PURE__*/React__namespace.createElement(Checkbox, {
+          key: checkboxIndex,
+          label: label,
+          onChange: handleOnChange,
+          disabled: disabled || ChoiceListDisabled,
+          helpText: helpText,
+          size: size,
+          name: name,
+          value: value,
+          defaultChecked: selected.length !== 0 && selected.includes(value),
+          className: getCheckboxClassName(alignment, checkboxIndex)
+        });
+      });
+    };
+
+    var renderRadio = function renderRadio(list, handleOnChange, ChoiceListDisabled, size, alignment, selected) {
+      return list.map(function (item, radioIndex) {
+        var name = item.name,
+            value = item.value,
+            helpText = item.helpText,
+            disabled = item.disabled,
+            label = item.label;
+        return /*#__PURE__*/React__namespace.createElement(Radio, {
+          key: radioIndex,
+          label: label,
+          onChange: handleOnChange,
+          disabled: disabled || ChoiceListDisabled,
+          helpText: helpText,
+          size: size,
+          name: name,
+          value: value,
+          defaultChecked: selected.length !== 0 && selected.includes(value),
+          className: getRadioClassName(alignment, radioIndex)
+        });
+      });
+    };
+
+    var getCheckboxClassName = function getCheckboxClassName(alignment, index) {
+      var _a;
+
+      var ChoiceListCheckboxClass = classNames__default["default"]((_a = {}, _a["ChoiceList-checkbox--" + alignment] = true, _a['ml-0'] = index === 0 && alignment === 'horizontal', _a['mt-0'] = index === 0 && alignment === 'vertical', _a));
+      return ChoiceListCheckboxClass;
+    };
+
+    var getRadioClassName = function getRadioClassName(alignment, index) {
+      var _a;
+
+      var ChoiceListRadioClass = classNames__default["default"]((_a = {}, _a["ChoiceList-radio--" + alignment] = true, _a['ml-0'] = index === 0 && alignment === 'horizontal', _a['mt-0'] = index === 0 && alignment === 'vertical', _a));
+      return ChoiceListRadioClass;
+    };
+
+    var ChoiceList = function ChoiceList(props) {
+      var _a, _b, _c;
+
+      var title = props.title,
+          choices = props.choices,
+          _d = props.alignment,
+          alignment = _d === void 0 ? 'vertical' : _d,
+          _e = props.allowMultiple,
+          allowMultiple = _e === void 0 ? false : _e,
+          onChange = props.onChange,
+          _f = props.disabled,
+          disabled = _f === void 0 ? false : _f,
+          _g = props.size,
+          size = _g === void 0 ? 'regular' : _g;
+      var _h = props.selected,
+          selected = _h === void 0 ? [] : _h;
+      var selectedChoiceValue = selected && selected || [];
+      var ChoiceListClass = classNames__default["default"]((_a = {}, _a['ChoiceList'] = true, _a));
+      var ChoiceListVerticalClass = classNames__default["default"]((_b = {}, _b['ChoiceList--alignVertical'] = true, _b));
+      var ChoiceHorizontalClass = classNames__default["default"]((_c = {}, _c['ChoiceList--alignHorizontal'] = true, _c));
+
+      var handleOnChange = function handleOnChange(e) {
+        if (e.target.checked && allowMultiple) {
+          if (!selectedChoiceValue.includes(e.target.value)) {
+            selectedChoiceValue = __spreadArrays(selectedChoiceValue, [e.target.value]);
+          }
+        } else if (!e.target.checked && allowMultiple) {
+          selectedChoiceValue = selectedChoiceValue.filter(function (el) {
+            return el !== e.target.value;
+          });
+        }
+
+        if (!allowMultiple) {
+          if (!selectedChoiceValue.includes(e.target.value)) {
+            selectedChoiceValue = [];
+            selectedChoiceValue = __spreadArrays(selectedChoiceValue, [e.target.value]);
+          }
+        }
+
+        if (onChange) onChange(e, selectedChoiceValue);
+      };
+
+      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", {
+        className: "" + (alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
+      }, renderCheckbox(choices, handleOnChange, disabled, size, alignment, selected)) : /*#__PURE__*/React__namespace.createElement("div", {
+        className: "" + (alignment === 'horizontal' ? ChoiceHorizontalClass : ChoiceListVerticalClass)
+      }, renderRadio(choices, handleOnChange, disabled, size, alignment, selected))));
+    };
+    ChoiceList.displayName = 'ChoiceList';
+    ChoiceList.defaultProps = {
+      alignment: 'vertical',
+      size: 'regular',
+      allowMultiple: false,
+      disabled: false
+    };
+
+    var version = "2.5.1";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
@@ -14443,6 +14594,7 @@
     exports.Chip = Chip;
     exports.ChipGroup = ChipGroup;
     exports.ChipInput = ChipInput;
+    exports.ChoiceList = ChoiceList;
     exports.Collapsible = Collapsible;
     exports.Column = Column;
     exports.DatePicker = DatePicker;