@innovaccer/design-system 2.16.2 → 2.18.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1689747098950 
+   * Generated on: 1691474887429 
    *      Package: @innovaccer/design-system
-   *      Version: v2.16.2
+   *      Version: v2.18.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -507,13 +507,15 @@
       var _a, _b;
 
       var hiddenAvatarCount = props.hiddenAvatarCount,
-          avatarStyle = props.avatarStyle;
-      var ContentClass = classNames__default["default"]((_a = {}, _a["Avatar-content--secondary"] = true, _a));
+          avatarStyle = props.avatarStyle,
+          size = props.size;
+      var ContentClass = classNames__default["default"]((_a = {}, _a["Avatar-content--secondary"] = true, _a["Avatar-content--tiny"] = size === 'tiny', _a));
       var AvatarVariantsClass = classNames__default["default"]((_b = {
         Avatar: true
-      }, _b["Avatar--regular"] = true, _b["Avatar--secondary"] = true, _b['Avatar--disabled'] = true, _b));
+      }, _b["Avatar--regular"] = size === 'regular', _b["Avatar--tiny"] = size === 'tiny', _b["Avatar--secondary"] = true, _b['Avatar--disabled'] = true, _b));
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
+        className: "AvatarCount-wrapper",
         style: avatarStyle
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: AvatarVariantsClass
@@ -524,19 +526,24 @@
     };
 
     var Avatars = function Avatars(props) {
+      var _a;
+
       var avatarList = props.avatarList,
           avatarStyle = props.avatarStyle,
-          tooltipPosition = props.tooltipPosition;
+          tooltipPosition = props.tooltipPosition,
+          size = props.size;
+      var GroupClass = classNames__default["default"]((_a = {}, _a["AvatarGroup-item"] = true, _a["AvatarGroup-item--tiny"] = size === 'tiny', _a["AvatarGroup-item--regular"] = size === 'regular', _a));
       var avatars = avatarList.map(function (item, index) {
         var appearance = item.appearance,
             firstName = item.firstName,
             lastName = item.lastName;
         return /*#__PURE__*/React__namespace.createElement("div", {
           "data-test": "DesignSystem-AvatarGroup--Avatar",
-          className: "AvatarGroup-item",
+          className: GroupClass,
           style: avatarStyle,
           key: index
         }, /*#__PURE__*/React__namespace.createElement(Avatar, {
+          size: size,
           appearance: appearance,
           firstName: firstName,
           lastName: lastName,
@@ -590,7 +597,8 @@
           popoverOptions = props.popoverOptions,
           tooltipPosition = props.tooltipPosition,
           list = props.list,
-          className = props.className;
+          className = props.className,
+          size = props.size;
       var popperRenderer = popoverOptions.popperRenderer,
           _c = popoverOptions.maxHeight,
           maxHeight = _c === void 0 ? 150 : _c,
@@ -607,11 +615,13 @@
       var baseProps = extractBaseProps(props);
       var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
       var style = {
-        borderRadius: '50%',
         backgroundColor: "" + borderColor,
-        border: "var(--spacing-xs) solid " + borderColor,
-        boxShadow: "0 0 0 var(--spacing-xs) " + borderColor
+        boxShadow: "0 0 0  calc(var(--spacing-xs) + var(--spacing-s)) " + borderColor
+      };
+      var tinyAvatarStyle = {
+        boxShadow: "0 0 0  var(--spacing-s) " + borderColor
       };
+      var avatarStyle = size === 'tiny' ? __assign(__assign({}, style), tinyAvatarStyle) : style;
       var AvatarGroupClass = classNames__default["default"]((_a = {}, _a['AvatarGroup'] = true, _a), className);
       var popperClass = classNames__default["default"]((_b = {}, _b['AvatarGroup-Popper'] = true, _b), popperClassName);
       return /*#__PURE__*/React__namespace.createElement("div", __assign({
@@ -619,15 +629,17 @@
       }, baseProps, {
         className: AvatarGroupClass + " d-inline-flex"
       }), /*#__PURE__*/React__namespace.createElement(Avatars, {
+        size: size,
         avatarList: list.slice(0, max),
-        avatarStyle: style,
+        avatarStyle: avatarStyle,
         tooltipPosition: tooltipPosition
       }), list.length - max > 0 && /*#__PURE__*/React__namespace.createElement(Popover, {
         on: on,
         dark: dark,
         trigger: /*#__PURE__*/React__namespace.createElement(AvatarCount, {
+          size: size,
           hiddenAvatarCount: hiddenAvatarCount,
-          avatarStyle: style
+          avatarStyle: avatarStyle
         }),
         position: position,
         appendToBody: appendToBody,
@@ -643,9 +655,10 @@
     AvatarGroup.displayName = 'AvatarGroup';
     AvatarGroup.defaultProps = {
       max: 2,
-      borderColor: 'var(--white)',
       tooltipPosition: 'bottom',
-      popoverOptions: {}
+      borderColor: 'white',
+      popoverOptions: {},
+      size: 'regular'
     };
 
     var useEffect$1 = React__namespace.useEffect,
@@ -2256,12 +2269,13 @@
           _onKeyDown = _a.onKeyDown,
           _b = _a.role,
           role = _b === void 0 ? 'button' : _b,
-          rest = __rest(_a, ["onClick", "onKeyDown", "role"]);
+          tabIndex = _a.tabIndex,
+          rest = __rest(_a, ["onClick", "onKeyDown", "role", "tabIndex"]);
 
       return __assign({}, onClick ? {
         onClick: onClick,
         role: role,
-        tabIndex: 0,
+        tabIndex: tabIndex || 0,
         'aria-label': rest['aria-label'],
         onKeyDown: function onKeyDown(e) {
           if (_onKeyDown) {
@@ -2281,6 +2295,7 @@
         }
       } : {
         role: role,
+        tabIndex: tabIndex,
         'aria-label': rest['aria-label']
       });
     };
@@ -2383,7 +2398,8 @@
           className = props.className,
           selected = props.selected,
           onClose = props.onClose,
-          onClick = props.onClick;
+          onClick = props.onClick,
+          labelPrefix = props.labelPrefix;
       var baseProps = extractBaseProps(props);
 
       var iconClass = function iconClass(align) {
@@ -2417,11 +2433,16 @@
 
       var renderLabel = function renderLabel() {
         if (typeof label === 'string') {
-          return /*#__PURE__*/React__namespace.createElement(Text, {
+          return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, labelPrefix && /*#__PURE__*/React__namespace.createElement(Text, {
+            "data-test": "DesignSystem-GenericChip--LabelPrefix",
+            weight: "medium",
+            color: textColor,
+            className: "Chip-text mr-3"
+          }, labelPrefix), /*#__PURE__*/React__namespace.createElement(Text, {
             "data-test": "DesignSystem-GenericChip--Text",
             color: textColor,
             className: "Chip-text"
-          }, label);
+          }, label));
         }
 
         return label;
@@ -2465,7 +2486,8 @@
           onClose = props.onClose,
           onClick = props.onClick,
           name = props.name,
-          className = props.className;
+          className = props.className,
+          labelPrefix = props.labelPrefix;
       var baseProps = extractBaseProps(props);
 
       var onCloseHandler = function onCloseHandler() {
@@ -2492,7 +2514,8 @@
         className: chipClass,
         onClose: onCloseHandler,
         onClick: onClickHandler,
-        name: name
+        name: name,
+        labelPrefix: labelPrefix
       }));
     };
     Chip.displayName = 'Chip';
@@ -2977,7 +3000,8 @@
             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"]);
+            view = _a.view,
+            rest = __rest(_a, ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"]);
 
         var date = this.state.date;
         var months = config.months;
@@ -3001,16 +3025,23 @@
           return !isTodayDateDisabled;
         };
 
+        var todayChipClass = classNames__default["default"]({
+          'd-flex justify-content-center': true,
+          'pb-5': size === 'small',
+          'pb-6': size === 'large',
+          'pt-3': size === 'large' && view === 'year'
+        });
         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,
+          view: view,
           disabledBefore: dateDisabledBefore,
           disabledAfter: dateDisabledAfter,
           onDateChange: this.onDateChangeHandler
         }))), showTodayDate && /*#__PURE__*/React__namespace.createElement("div", {
-          className: "d-flex justify-content-center pb-6",
+          className: todayChipClass,
           "data-test": "DesignSystem-Select--TodaysDate-wrapper"
         }, /*#__PURE__*/React__namespace.createElement(Chip, {
           label: "Today, " + todayMonthAndDate,
@@ -6286,6 +6317,7 @@
           'd-flex flex-column flex-grow-1': true
         }, className);
       }, [className]);
+      var isValueEqualPlaceholder = value === defaultPlaceholderValue;
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: classes,
         "data-test": "DesignSystem-InputMask--Wrapper"
@@ -6295,7 +6327,7 @@
         required: required,
         onFocus: onFocusHandler,
         onChange: onChangeHandler,
-        onClear: onClearHandler,
+        onClear: !isValueEqualPlaceholder ? onClearHandler : undefined,
         onBlur: onBlurHandler,
         onPaste: onPasteHandler,
         autoComplete: 'off',
@@ -6375,7 +6407,7 @@
         "data-test": "DesignSystem-Label--Text",
         className: classes,
         componentType: "label"
-      }, rest), children), renderInfo(required, optional), info && renderIndicator(info));
+      }, rest), children, renderInfo(required, optional), info && renderIndicator(info)));
     };
     Label.displayName = 'Label';
 
@@ -7549,7 +7581,7 @@
         className: RadioOuterWrapper,
         "data-test": "DesignSystem-Radio-OuterWrapper"
       }, /*#__PURE__*/React__namespace.createElement("input", __assign({
-        tabIndex: -1
+        tabIndex: 0
       }, rest, {
         type: "radio",
         disabled: disabled,
@@ -7563,7 +7595,6 @@
         id: id,
         "data-test": "DesignSystem-Radio-Input"
       })), /*#__PURE__*/React__namespace.createElement("span", {
-        tabIndex: 0,
         "data-test": "DesignSystem-Radio-wrapper",
         className: RadioWrapper
       })), /*#__PURE__*/React__namespace.createElement("div", {
@@ -8476,7 +8507,7 @@
       }, [value]);
       var ChipInputClass = classNames__default["default"]((_a = {
         ChipInput: true
-      }, _a['ChipInput--disabled'] = disabled, _a['ChipInput--withChips'] = chips.length > 0, _a), className);
+      }, _a['ChipInput--disabled'] = disabled, _a['ChipInput--withChips'] = chips && chips.length > 0, _a), className);
 
       var onUpdateChips = function onUpdateChips(updatedChips) {
         if (onChange) onChange(updatedChips);
@@ -8562,7 +8593,7 @@
           type: type,
           disabled: disabled,
           key: index,
-          className: "my-2 mx-2",
+          className: "my-3 mx-2",
           onClick: function onClick() {
             return _onClick && _onClick(chip, index);
           },
@@ -8571,11 +8602,15 @@
           }
         }, rest));
       });
-      return /*#__PURE__*/React__namespace.createElement("div", __assign({
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-ChipInput--Border",
+        className: "ChipInput-border"
+      }, /*#__PURE__*/React__namespace.createElement("div", __assign({
         "data-test": "DesignSystem-ChipInput"
       }, baseProps, {
         className: ChipInputClass,
-        onClick: onClickHandler
+        onClick: onClickHandler,
+        tabIndex: disabled ? -1 : 0
       }), /*#__PURE__*/React__namespace.createElement("div", {
         className: "ChipInput-wrapper"
       }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React__namespace.createElement("input", {
@@ -8583,7 +8618,7 @@
         ref: inputRef,
         className: "ChipInput-input",
         autoFocus: autoFocus,
-        placeholder: placeholder,
+        placeholder: chips && chips.length > 0 ? '' : placeholder,
         disabled: disabled,
         value: inputValue,
         onBlur: onBlur,
@@ -8593,10 +8628,11 @@
       })), chips.length > 0 && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-ChipInput--Icon",
         name: "close",
-        appearance: "subtle",
+        appearance: disabled ? 'disabled' : 'subtle',
         className: "ChipInput-icon",
-        onClick: onDeleteAllHandler
-      }));
+        onClick: onDeleteAllHandler,
+        tabIndex: disabled ? -1 : 0
+      })));
     };
     ChipInput.displayName = 'ChipInput';
     ChipInput.defaultProps = {
@@ -10508,15 +10544,10 @@
             position: "right",
             className: "px-6 py-6 d-flex align-items-center",
             on: "hover"
-          }, /*#__PURE__*/React__namespace.createElement(Icon, {
-            name: "error",
-            appearance: 'alert',
-            className: "mr-4"
-          }), /*#__PURE__*/React__namespace.createElement(Text, {
-            "data-test": "DesignSystem-EditableInput--ErrorPopper",
-            appearance: "destructive",
-            weight: "medium"
-          }, errorMessage)) : inputComponent;
+          }, /*#__PURE__*/React__namespace.createElement(InlineMessage, {
+            appearance: "alert",
+            description: errorMessage
+          })) : inputComponent;
         }
 
         return /*#__PURE__*/React__namespace.createElement("div", {
@@ -13414,22 +13445,6 @@
     }));
     var GridProvider = context.Provider;
 
-    var GridNestedRow = function GridNestedRow(props) {
-      var context$1 = React__namespace.useContext(context);
-      var schema = context$1.schema,
-          loading = context$1.loading,
-          nestedRowRenderer = context$1.nestedRowRenderer;
-      var data = props.data,
-          rowIndex = props.rowIndex;
-      if (nestedRowRenderer) return nestedRowRenderer({
-        data: data,
-        schema: schema,
-        loading: loading,
-        rowIndex: rowIndex
-      });
-      return null;
-    };
-
     var HeaderCell = function HeaderCell(props) {
       var context$1 = React__namespace.useContext(context);
       var schema = props.schema,
@@ -13614,7 +13629,8 @@
           schema = props.schema,
           expandedState = props.expandedState,
           rowIndex = props.rowIndex,
-          colIndex = props.colIndex;
+          colIndex = props.colIndex,
+          nestedRowData = props.nestedRowData;
       var size = context$1.size,
           loading = context$1.loading,
           nestedRows = context$1.nestedRows;
@@ -13629,20 +13645,15 @@
         loading: loading,
         expanded: expanded
       };
-      var nestedProps = {
-        data: data,
-        rowIndex: rowIndex
-      };
-      var isNestedRowDisabled = !GridNestedRow(nestedProps);
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "Grid-cellContent"
-      }, colIndex === 0 && nestedRows && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, !isNestedRowDisabled ? /*#__PURE__*/React__namespace.createElement(Icon, {
+      }, colIndex === 0 && nestedRows && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, nestedRowData ? /*#__PURE__*/React__namespace.createElement(Icon, {
         className: 'Grid-nestedRowTrigger',
         name: expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
         size: 20,
         appearance: 'default',
         onClick: function onClick(e) {
-          if (!isNestedRowDisabled) {
+          if (nestedRowData) {
             e.stopPropagation();
             setExpanded(!expanded);
           }
@@ -13668,7 +13679,8 @@
           onMenuChange = _a.onMenuChange,
           onFilterChange = _a.onFilterChange,
           updateColumnSchema = _a.updateColumnSchema,
-          reorderColumn = _a.reorderColumn;
+          reorderColumn = _a.reorderColumn,
+          nestedRowData = _a.nestedRowData;
       var draggable = context$1.draggable,
           separator = context$1.separator,
           nestedRows = context$1.nestedRows,
@@ -13766,7 +13778,8 @@
         colIndex: colIndex,
         data: data,
         schema: schema,
-        expandedState: expandedState
+        expandedState: expandedState,
+        nestedRowData: nestedRowData
       }));
     };
 
@@ -13842,6 +13855,24 @@
       }, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')));
     };
 
+    var GridNestedRow = function GridNestedRow(props) {
+      var context$1 = React__namespace.useContext(context);
+      var schema = context$1.schema,
+          loading = context$1.loading,
+          nestedRowRenderer = context$1.nestedRowRenderer;
+      var data = props.data,
+          rowIndex = props.rowIndex,
+          expanded = props.expanded;
+      if (nestedRowRenderer) return nestedRowRenderer({
+        data: data,
+        schema: schema,
+        loading: loading,
+        rowIndex: rowIndex,
+        expanded: expanded
+      });
+      return null;
+    };
+
     var GridRow = function GridRow(props) {
       var context$1 = React__namespace.useContext(context);
       var type = context$1.type,
@@ -13883,6 +13914,12 @@
       var unpinnedSchema = schema.filter(function (s) {
         return !s.hidden && !s.pinned;
       });
+      var nestedProps = {
+        data: data,
+        rowIndex: rI,
+        expanded: expanded
+      };
+      var nestedRowData = GridNestedRow(nestedProps);
 
       var renderCheckbox = function renderCheckbox(show) {
         if (!show || !withCheckbox) return null;
@@ -13920,7 +13957,8 @@
               firstCell: !index,
               schema: s,
               data: data,
-              expandedState: [expanded, setExpanded]
+              expandedState: [expanded, setExpanded],
+              nestedRowData: nestedRowData
             });
           }));
         }
@@ -13940,10 +13978,7 @@
         ref: rowRef
       }, renderSchema(leftPinnedSchema, !!leftPinnedSchema.length, 'left'), renderSchema(unpinnedSchema, !leftPinnedSchema.length && !!unpinnedSchema.length), renderSchema(rightPinnedSchema, false, 'right')), nestedRows && expanded && /*#__PURE__*/React__namespace.createElement("div", {
         className: "Grid-nestedRow"
-      }, /*#__PURE__*/React__namespace.createElement(GridNestedRow, {
-        data: data,
-        rowIndex: rI
-      })));
+      }, nestedRowData));
     };
     GridRow.defaultProps = {
       data: {}
@@ -16120,7 +16155,7 @@
       iconAlign: 'left'
     };
 
-    var version = "2.16.2";
+    var version = "2.18.0";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;