@innovaccer/design-system 2.42.0 → 2.44.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1725355864940 
+   * Generated on: 1727787113440 
    *      Package: @innovaccer/design-system
-   *      Version: v2.42.0
+   *      Version: v2.44.0
    *      License: MIT
    *         Docs: https://mds.innovaccer.com
    */
@@ -444,7 +444,8 @@
       size: 'regular',
       appearance: 'secondary',
       firstName: '',
-      lastName: ''
+      lastName: '',
+      darkAppearance: []
     });
     var AvatarProvider = AvatarContext.Provider;
 
@@ -460,14 +461,20 @@
       accent4: 'accent4_darker'
     };
     var AvatarIcon = function AvatarIcon(props) {
+      var _a;
+
       var contextProp = React__namespace.useContext(AvatarContext);
       var size = contextProp.size,
-          appearance = contextProp.appearance;
+          appearance = contextProp.appearance,
+          _b = contextProp.darkAppearance,
+          darkAppearance = _b === void 0 ? [] : _b;
       var iconSize = size === 'regular' ? 20 : 16;
       var iconAppearance = appearance && appearanceMapper[appearance] || 'inverse';
+      var IconClassNames = classNames__default["default"]((_a = {}, _a['Avatar-content'] = appearance && darkAppearance.includes(appearance), _a));
       return /*#__PURE__*/React__namespace.createElement(Icon, __assign$1({}, props, {
         size: iconSize,
-        appearance: iconAppearance
+        appearance: iconAppearance,
+        className: IconClassNames
       }));
     };
 
@@ -489,12 +496,13 @@
       var size = contextProp.size,
           appearance = contextProp.appearance,
           firstName = contextProp.firstName,
-          lastName = contextProp.lastName;
+          lastName = contextProp.lastName,
+          darkAppearance = contextProp.darkAppearance;
       var baseProps = extractBaseProps(props);
       var initials = "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
       var imgSize = size && sizeMapper[size];
-      var TextClassNames = classNames__default["default"]((_a = {}, _a["Avatar-content--" + size] = size, _a["Avatar-content--" + appearance] = appearance, _a));
-      var IconClassNames = classNames__default["default"]((_b = {}, _b["Avatar-content--" + appearance] = appearance, _b));
+      var TextClassNames = classNames__default["default"]((_a = {}, _a["Avatar-content--" + size] = size, _a['Avatar-content'] = appearance && darkAppearance.includes(appearance), _a));
+      var IconClassNames = classNames__default["default"]((_b = {}, _b['Avatar-content'] = appearance && darkAppearance.includes(appearance), _b));
 
       var onError = function onError() {
         setError(true);
@@ -565,17 +573,19 @@
       };
 
       var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
+      var darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
       var AvatarClassNames = classNames__default["default"]((_a = {
         Avatar: true
       }, _a['Avatar--square'] = shape === 'square', _a["Avatar--" + size] = shape !== 'square', _a["Avatar--" + AvatarAppearance] = AvatarAppearance, _a['Avatar--noInitials'] = !initials || !withTooltip, _a['Avatar--disabled'] = disabled, _a['Avatar--default'] = !disabled, _a), className);
       var AvatarWrapperClassNames = classNames__default["default"]((_b = {}, _b['Avatar-wrapper--square'] = shape === 'square', _b["Avatar--" + size] = shape === 'square', _b));
-      var TextClassNames = classNames__default["default"]((_c = {}, _c["Avatar-content--" + size] = size, _c["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _c));
-      var IconClassNames = classNames__default["default"]((_d = {}, _d["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _d));
+      var TextClassNames = classNames__default["default"]((_c = {}, _c["Avatar-content--" + size] = size, _c['Avatar-content'] = darkAppearance.includes(AvatarAppearance), _c));
+      var IconClassNames = classNames__default["default"]((_d = {}, _d['Avatar-content'] = darkAppearance.includes(AvatarAppearance), _d));
       var sharedProp = {
         size: size,
         firstName: firstName,
         lastName: lastName,
-        appearance: AvatarAppearance
+        appearance: AvatarAppearance,
+        darkAppearance: darkAppearance
       };
 
       var renderAvatar = function renderAvatar() {
@@ -647,7 +657,7 @@
           avatarStyle = props.avatarStyle,
           size = props.size,
           on = props.on;
-      var ContentClass = classNames__default["default"]((_a = {}, _a["Avatar-content--secondary"] = true, _a["Avatar-content--tiny"] = size === 'tiny', _a));
+      var ContentClass = classNames__default["default"]((_a = {}, _a['Avatar-content'] = true, _a['Avatar-content--tiny'] = size === 'tiny', _a));
       var AvatarVariantsClass = classNames__default["default"]((_b = {
         Avatar: true
       }, _b["Avatar--regular"] = size === 'regular', _b["Avatar--tiny"] = size === 'tiny', _b["Avatar--secondary"] = true, _b['cursor-default'] = true, _b['cursor-pointer'] = on === 'click', _b));
@@ -661,7 +671,6 @@
         "data-test": "DesignSystem-AvatarGroup--TriggerAvatarVariants",
         className: AvatarVariantsClass
       }, /*#__PURE__*/React__namespace.createElement(Text, {
-        appearance: 'white',
         className: ContentClass
       }, "+" + hiddenAvatarCount)));
     };
@@ -702,44 +711,64 @@
     };
 
     var AvatarPopperBody = function AvatarPopperBody(props) {
+      var _a;
+
       var hiddenAvatarList = props.hiddenAvatarList,
           popperRenderer = props.popperRenderer,
           maxHeight = props.maxHeight,
-          dark = props.dark;
+          minHeight = props.minHeight,
+          width = props.width,
+          popperClassName = props.popperClassName;
 
       if (popperRenderer) {
         return popperRenderer(hiddenAvatarList);
       }
 
+      var popperClass = classNames__default["default"]((_a = {}, _a['AvatarGroup-Popper py-3'] = true, _a), popperClassName);
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "px-4 py-3"
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "AvatarGroup-TextWrapper",
         style: {
+          width: width,
+          minHeight: minHeight,
           maxHeight: maxHeight
-        }
-      }, hiddenAvatarList.map(function (item, ind) {
-        var _a;
-
-        var _b = item.firstName,
-            firstName = _b === void 0 ? '' : _b,
-            _c = item.lastName,
-            lastName = _c === void 0 ? '' : _c,
-            _d = item.tooltipSuffix,
-            tooltipSuffix = _d === void 0 ? '' : _d;
+        },
+        className: popperClass,
+        "data-test": "DesignSystem-AvatarGroup--Popover"
+      }, /*#__PURE__*/React__namespace.createElement(Listbox, {
+        showDivider: false,
+        type: "description",
+        size: "compressed",
+        tagName: "ul",
+        "data-test": "DesignSystem-AvatarGroup--List"
+      }, hiddenAvatarList.map(function (item, index) {
+        var _a = item.firstName,
+            firstName = _a === void 0 ? '' : _a,
+            _b = item.lastName,
+            lastName = _b === void 0 ? '' : _b,
+            _c = item.tooltipSuffix,
+            tooltipSuffix = _c === void 0 ? '' : _c,
+            disabled = item.disabled;
         var name = firstName + " " + lastName + " " + tooltipSuffix;
-        var AvatarTextClass = classNames__default["default"]((_a = {}, _a["mb-4"] = ind < hiddenAvatarList.length - 1, _a));
-        return /*#__PURE__*/React__namespace.createElement(Text, {
-          key: ind,
-          appearance: dark ? 'white' : 'default',
-          className: AvatarTextClass,
-          "data-test": "DesignSystem-AvatarGroup--Text"
-        }, name);
+        var elementRef = React__namespace.useRef(null);
+        return /*#__PURE__*/React__namespace.createElement(Tooltip, {
+          key: index,
+          showOnTruncation: true,
+          tooltip: name,
+          elementRef: elementRef
+        }, /*#__PURE__*/React__namespace.createElement(Listbox.Item, {
+          disabled: disabled,
+          className: "cursor-default",
+          tagName: "li",
+          "data-test": "DesignSystem-AvatarGroup--Item"
+        }, /*#__PURE__*/React__namespace.createElement(Text, {
+          ref: elementRef,
+          "data-test": "DesignSystem-AvatarGroup--Text",
+          className: "ellipsis--noWrap"
+        }, name)));
       })));
     };
 
     var AvatarGroup = function AvatarGroup(props) {
-      var _a, _b;
+      var _a;
 
       var max = props.max,
           borderColor = props.borderColor,
@@ -749,18 +778,19 @@
           className = props.className,
           size = props.size;
       var popperRenderer = popoverOptions.popperRenderer,
-          _c = popoverOptions.maxHeight,
-          maxHeight = _c === void 0 ? 150 : _c,
+          _b = popoverOptions.maxHeight,
+          maxHeight = _b === void 0 ? 256 : _b,
+          _c = popoverOptions.width,
+          width = _c === void 0 ? 176 : _c,
+          minHeight = popoverOptions.minHeight,
           _d = popoverOptions.position,
           position = _d === void 0 ? 'bottom' : _d,
           _e = popoverOptions.on,
           on = _e === void 0 ? 'hover' : _e,
-          _f = popoverOptions.dark,
-          dark = _f === void 0 ? true : _f,
-          _g = popoverOptions.appendToBody,
-          appendToBody = _g === void 0 ? true : _g,
-          _h = popoverOptions.popperClassName,
-          popperClassName = _h === void 0 ? '' : _h;
+          _f = popoverOptions.appendToBody,
+          appendToBody = _f === void 0 ? true : _f,
+          _g = popoverOptions.popperClassName,
+          popperClassName = _g === void 0 ? '' : _g;
       var baseProps = extractBaseProps(props);
       var hiddenAvatarCount = list.length > max ? Math.min(list.length - max, 99) : 0;
       var style = {
@@ -773,7 +803,6 @@
       var avatarStyle = size === 'tiny' ? __assign$1(__assign$1({}, style), tinyAvatarStyle) : style;
       var avatarList = list.length === 3 ? list : list.slice(0, max);
       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$1({
         "data-test": "DesignSystem-AvatarGroup"
       }, baseProps, {
@@ -785,7 +814,6 @@
         tooltipPosition: tooltipPosition
       }), list.length - max > 0 && list.length !== 3 && /*#__PURE__*/React__namespace.createElement(Popover$1, {
         on: on,
-        dark: dark,
         trigger: /*#__PURE__*/React__namespace.createElement(AvatarCount, {
           on: on,
           size: size,
@@ -794,13 +822,14 @@
         }),
         position: position,
         appendToBody: appendToBody,
-        className: popperClass,
         offset: "medium"
       }, /*#__PURE__*/React__namespace.createElement(AvatarPopperBody, {
         hiddenAvatarList: list.slice(max, list.length),
         popperRenderer: popperRenderer,
         maxHeight: maxHeight,
-        dark: dark
+        minHeight: minHeight,
+        width: width,
+        popperClassName: popperClassName
       })));
     };
     AvatarGroup.displayName = 'AvatarGroup';
@@ -1047,7 +1076,7 @@
           rest = __rest(props, ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"]);
 
       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 iconClass = classNames__default["default"]((_b = {}, _b['Button-icon'] = true, _b["Button-icon--" + iconAlign] = children && iconAlign, _b["Button-regularIcon--" + iconAlign] = children && iconAlign && size === 'regular' && !expanded, _b));
       return /*#__PURE__*/React__namespace.createElement("button", __assign$1({
         "data-test": "DesignSystem-Button",
         ref: ref,
@@ -1063,7 +1092,8 @@
       }), /*#__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
+        className: iconClass,
+        "data-test": "DesignSystem-Button--Icon-Wrapper"
       }, /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-Button--Icon",
         name: icon,
@@ -3347,18 +3377,17 @@
         var dateDisabledBefore = convertToDate(disabledBefore, inputFormat, validators);
         var dateDisabledAfter = convertToDate(disabledAfter, inputFormat, validators);
 
+        var isSameDay = function isSameDay(date1, date2) {
+          return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+        };
+
         var isTodayDisabled = function isTodayDisabled() {
-          var isTodayDateDisabled = true;
-
-          if (currDate && dateDisabledBefore && dateDisabledAfter) {
-            isTodayDateDisabled = currDate > dateDisabledBefore && currDate < dateDisabledAfter;
-          } else if (currDate && dateDisabledBefore) {
-            isTodayDateDisabled = currDate > dateDisabledBefore;
-          } else if (currDate && dateDisabledAfter) {
-            isTodayDateDisabled = currDate < dateDisabledAfter;
+          if (dateDisabledBefore && isSameDay(todayDate, dateDisabledBefore) || dateDisabledAfter && isSameDay(todayDate, dateDisabledAfter)) {
+            return false;
           }
 
-          return !isTodayDateDisabled;
+          var isTodayDateDisabled = dateDisabledBefore && todayDate < dateDisabledBefore || dateDisabledAfter && todayDate > dateDisabledAfter;
+          return isTodayDateDisabled;
         };
 
         var todayChipClass = classNames__default["default"]({
@@ -8532,6 +8561,18 @@
           return newStyle;
         };
 
+        _this.onClickHandler = function () {
+          var openDelay = _this.props.openDelay;
+
+          if (openDelay && !_this.state.isOpen) {
+            window.setTimeout(function () {
+              _this.togglePopper('onClick');
+            }, openDelay);
+          } else {
+            _this.togglePopper('onClick');
+          }
+        };
+
         _this.state = {
           animationKeyframe: '',
           isOpen: _this.props.open && !_this.props.disabled || false,
@@ -8632,17 +8673,34 @@
       };
 
       PopperWrapper.prototype.handleMouseEnter = function () {
-        var on = this.props.on;
+        var _this = this;
+
+        var _a = this.props,
+            on = _a.on,
+            openDelay = _a.openDelay,
+            onToggle = _a.onToggle;
 
         if (on === 'hover') {
           if (this._timer) clearTimeout(this._timer);
-          var onToggle = this.props.onToggle;
-          onToggle(true, 'mouseEnter');
-          this.setState(function () {
-            return {
-              isOpen: true
-            };
-          });
+
+          if (openDelay) {
+            this._timer = window.setTimeout(function () {
+              _this.setState(function () {
+                return {
+                  isOpen: true
+                };
+              });
+
+              _this.togglePopper('mouseEnter', true);
+            }, openDelay);
+          } else {
+            onToggle(true, 'mouseEnter');
+            this.setState(function () {
+              return {
+                isOpen: true
+              };
+            });
+          }
         }
       };
 
@@ -8693,7 +8751,7 @@
           ref: ref,
           onClick: function onClick(ev) {
             ev.stopPropagation();
-            !disabled && _this.togglePopper('onClick');
+            !disabled && _this.onClickHandler();
           }
         };
         var classes = classNames__default["default"]('PopperWrapper-trigger', triggerClass);
@@ -8701,12 +8759,12 @@
         var shouldPopoverClose = function shouldPopoverClose(clicked) {
           var popover = _this.popupRef.current;
           var container = document.body;
-          var popoverIndex = parseInt(window.getComputedStyle(popover).zIndex);
+          var popoverIndex = popover && parseInt(window.getComputedStyle(popover).zIndex);
           var clickInsideLayer = false;
           var shouldClose = false;
           var openedLayers = container.querySelectorAll('[data-opened="true"]');
           openedLayers.forEach(function (layer) {
-            if (layer.contains(clicked)) {
+            if (layer && layer.contains(clicked)) {
               clickInsideLayer = true;
               var clickedIndex = parseInt(window.getComputedStyle(layer).zIndex);
 
@@ -18788,7 +18846,7 @@
         appearance: "secondary",
         className: "SelectionAvatarCount cursor-pointer"
       }, /*#__PURE__*/React__namespace.createElement(Text, {
-        className: "overflow-hidden"
+        className: "overflow-hidden Avatar-content"
       }, "+" + hiddenAvatarCount)));
     };
 
@@ -19507,7 +19565,7 @@
       DELETE: 'Delete',
       ENTER: 'Enter'
     };
-    var MultiSelectTrigger = function MultiSelectTrigger(props) {
+    var MultiSelectTrigger = /*#__PURE__*/React__namespace.forwardRef(function (props, forwardedInputRef) {
       var _a, _b;
 
       var chipOptions = props.chipOptions,
@@ -19528,7 +19586,9 @@
           role = props.role,
           rest = __rest(props, ["chipOptions", "allowDuplicates", "disabled", "error", "placeholder", "defaultValue", "value", "className", "autoFocus", "onChange", "onBlur", "onFocus", "onKeyDown", "onInputChange", "tabIndex", "role"]);
 
-      var inputRef = /*#__PURE__*/React__namespace.createRef();
+      var localInputRef = React__namespace.useRef();
+      var customRef = React__namespace.useRef();
+      var inputElementRef = forwardedInputRef || localInputRef;
 
       var _c = React__namespace.useState(value || defaultValue),
           chips = _c[0],
@@ -19545,6 +19605,12 @@
           setInputValue('');
         }
       }, [value]);
+      React__namespace.useEffect(function () {
+        if (inputValue === '' && inputElementRef.current) {
+          inputElementRef.current.style.flexBasis = '0';
+          customRef.current.charCount = null;
+        }
+      }, [inputValue]);
       var ChipInputBorderClass = classNames__default["default"]((_a = {}, _a['ChipInput-border'] = true, _a['ChipInput-border--error'] = error, _a));
       var ChipInputClass = classNames__default["default"]((_b = {
         ChipInput: true
@@ -19624,6 +19690,26 @@
       };
 
       var onInputChangeHandler = function onInputChangeHandler(event) {
+        var _a;
+
+        var inputElement = inputElementRef.current;
+
+        if (inputElement) {
+          var charLen = event.target.value.length;
+          var elementScrollWidth = inputElement.scrollWidth;
+          var elementClientWidth = inputElement.clientWidth;
+
+          if (elementScrollWidth > elementClientWidth && inputValue.length <= charLen) {
+            inputElement.style.flexBasis = 'auto';
+
+            if (customRef.current) {
+              customRef.current.charCount = charLen;
+            }
+          } else if (elementScrollWidth <= elementClientWidth && inputValue.length > charLen && charLen <= (((_a = customRef.current) === null || _a === void 0 ? void 0 : _a.charCount) || 0) - 1) {
+            inputElement.style.flexBasis = '0';
+          }
+        }
+
         setInputValue(event.target.value);
         onInputChange && onInputChange(event);
       };
@@ -19631,7 +19717,7 @@
       var onClickHandler = function onClickHandler() {
         var _a;
 
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       };
 
       var chipComponents = chips.map(function (chip, index) {
@@ -19667,10 +19753,11 @@
         onClick: onClickHandler,
         tabIndex: disabled ? -1 : tabIndex || 0
       }), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "ChipInput-wrapper"
+        className: "ChipInput-wrapper",
+        ref: customRef
       }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React__namespace.createElement("input", __assign$1({}, rest, {
         "data-test": "DesignSystem-MultiSelectTrigger--Input",
-        ref: props.forwardedRef || inputRef,
+        ref: inputElementRef,
         className: "ChipInput-input",
         autoFocus: autoFocus,
         placeholder: chips && chips.length > 0 ? '' : placeholder,
@@ -19689,7 +19776,7 @@
         onClick: onDeleteAllHandler,
         tabIndex: disabled ? -1 : 0
       })));
-    };
+    });
     MultiSelectTrigger.displayName = 'MultiSelectTrigger';
     MultiSelectTrigger.defaultProps = {
       chipOptions: {},
@@ -19745,12 +19832,12 @@
       };
 
       return /*#__PURE__*/React__default["default"].createElement(MultiSelectTrigger, __assign$1({}, props, {
+        ref: inputTriggerRef,
         value: chipInputValue,
         onChange: onChangeHandler,
         onInputChange: onUpdateHandler,
         onKeyDown: onKeyDownHandler,
         tabIndex: -1,
-        forwardedRef: inputTriggerRef,
         role: "combobox",
         "aria-haspopup": "listbox",
         "aria-controls": popoverId,
@@ -25641,7 +25728,7 @@
     AIResponse.ActionBar = ChatActionBar;
     AIResponse.Body = ChatBody;
 
-    var version = "2.42.0";
+    var version = "2.44.0";
 
     exports.AIButton = AIButton;
     exports.AIChip = AIChip;