@innovaccer/design-system 2.42.0 → 2.44.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1725355864677 
+   * Generated on: 1727787113166 
    *      Package: @innovaccer/design-system
-   *      Version: v2.42.0
+   *      Version: v2.44.0
    *      License: MIT
    *         Docs: https://mds.innovaccer.com
    */
@@ -803,7 +803,8 @@ var AvatarContext = /*#__PURE__*/React.createContext({
   size: 'regular',
   appearance: 'secondary',
   firstName: '',
-  lastName: ''
+  lastName: '',
+  darkAppearance: []
 });
 var AvatarProvider = AvatarContext.Provider;
 
@@ -821,12 +822,16 @@ var appearanceMapper = {
 var AvatarIcon = function AvatarIcon(props) {
   var contextProp = React.useContext(AvatarContext);
   var size = contextProp.size,
-      appearance = contextProp.appearance;
+      appearance = contextProp.appearance,
+      _contextProp$darkAppe = contextProp.darkAppearance,
+      darkAppearance = _contextProp$darkAppe === void 0 ? [] : _contextProp$darkAppe;
   var iconSize = size === 'regular' ? 20 : 16;
   var iconAppearance = appearance && appearanceMapper[appearance] || 'inverse';
+  var IconClassNames = classnames(_defineProperty$1({}, 'Avatar-content', appearance && darkAppearance.includes(appearance)));
   return /*#__PURE__*/React.createElement(Icon, _extends$2({}, props, {
     size: iconSize,
-    appearance: iconAppearance
+    appearance: iconAppearance,
+    className: IconClassNames
   }));
 };
 
@@ -849,12 +854,13 @@ var AvatarImage = function AvatarImage(props) {
   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 = "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
   var imgSize = size && sizeMapper[size];
-  var TextClassNames = classnames((_classNames = {}, _defineProperty$1(_classNames, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames, "Avatar-content--".concat(appearance), appearance), _classNames));
-  var IconClassNames = classnames(_defineProperty$1({}, "Avatar-content--".concat(appearance), appearance));
+  var TextClassNames = classnames((_classNames = {}, _defineProperty$1(_classNames, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames, 'Avatar-content', appearance && darkAppearance.includes(appearance)), _classNames));
+  var IconClassNames = classnames(_defineProperty$1({}, 'Avatar-content', appearance && darkAppearance.includes(appearance)));
 
   var onError = function onError() {
     setError(true);
@@ -925,17 +931,19 @@ var Avatar = function Avatar(props) {
   };
 
   var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
+  var darkAppearance = ['secondary', 'success', 'warning', 'accent1', 'accent4'];
   var AvatarClassNames = classnames((_classNames = {
     Avatar: true
   }, _defineProperty$1(_classNames, 'Avatar--square', shape === 'square'), _defineProperty$1(_classNames, "Avatar--".concat(size), shape !== 'square'), _defineProperty$1(_classNames, "Avatar--".concat(AvatarAppearance), AvatarAppearance), _defineProperty$1(_classNames, 'Avatar--noInitials', !initials || !withTooltip), _defineProperty$1(_classNames, 'Avatar--disabled', disabled), _defineProperty$1(_classNames, 'Avatar--default', !disabled), _classNames), className);
   var AvatarWrapperClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Avatar-wrapper--square', shape === 'square'), _defineProperty$1(_classNames2, "Avatar--".concat(size), shape === 'square'), _classNames2));
-  var TextClassNames = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames3, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames3));
-  var IconClassNames = classnames(_defineProperty$1({}, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance));
+  var TextClassNames = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames3, 'Avatar-content', darkAppearance.includes(AvatarAppearance)), _classNames3));
+  var IconClassNames = classnames(_defineProperty$1({}, 'Avatar-content', darkAppearance.includes(AvatarAppearance)));
   var sharedProp = {
     size: size,
     firstName: firstName,
     lastName: lastName,
-    appearance: AvatarAppearance
+    appearance: AvatarAppearance,
+    darkAppearance: darkAppearance
   };
 
   var renderAvatar = function renderAvatar() {
@@ -1007,7 +1015,7 @@ var AvatarCount = function AvatarCount(props) {
       avatarStyle = props.avatarStyle,
       size = props.size,
       on = props.on;
-  var ContentClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "Avatar-content--secondary", true), _defineProperty$1(_classNames, "Avatar-content--tiny", size === 'tiny'), _classNames));
+  var ContentClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Avatar-content', true), _defineProperty$1(_classNames, 'Avatar-content--tiny', size === 'tiny'), _classNames));
   var AvatarVariantsClass = classnames((_classNames2 = {
     Avatar: true
   }, _defineProperty$1(_classNames2, "Avatar--regular", size === 'regular'), _defineProperty$1(_classNames2, "Avatar--tiny", size === 'tiny'), _defineProperty$1(_classNames2, "Avatar--secondary", true), _defineProperty$1(_classNames2, 'cursor-default', true), _defineProperty$1(_classNames2, 'cursor-pointer', on === 'click'), _classNames2));
@@ -1021,7 +1029,6 @@ var AvatarCount = function AvatarCount(props) {
     "data-test": "DesignSystem-AvatarGroup--TriggerAvatarVariants",
     className: AvatarVariantsClass
   }, /*#__PURE__*/React.createElement(Text, {
-    appearance: 'white',
     className: ContentClass
   }, "+".concat(hiddenAvatarCount))));
 };
@@ -1065,34 +1072,54 @@ var AvatarPopperBody = function AvatarPopperBody(props) {
   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(_defineProperty$1({}, 'AvatarGroup-Popper py-3', true), popperClassName);
   return /*#__PURE__*/React.createElement("div", {
-    className: "px-4 py-3"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "AvatarGroup-TextWrapper",
     style: {
+      width: width,
+      minHeight: minHeight,
       maxHeight: maxHeight
-    }
-  }, hiddenAvatarList.map(function (item, ind) {
+    },
+    className: popperClass,
+    "data-test": "DesignSystem-AvatarGroup--Popover"
+  }, /*#__PURE__*/React.createElement(Listbox, {
+    showDivider: false,
+    type: "description",
+    size: "compressed",
+    tagName: "ul",
+    "data-test": "DesignSystem-AvatarGroup--List"
+  }, hiddenAvatarList.map(function (item, index) {
     var _item$firstName = item.firstName,
         firstName = _item$firstName === void 0 ? '' : _item$firstName,
         _item$lastName = item.lastName,
         lastName = _item$lastName === void 0 ? '' : _item$lastName,
         _item$tooltipSuffix = item.tooltipSuffix,
-        tooltipSuffix = _item$tooltipSuffix === void 0 ? '' : _item$tooltipSuffix;
+        tooltipSuffix = _item$tooltipSuffix === void 0 ? '' : _item$tooltipSuffix,
+        disabled = item.disabled;
     var name = "".concat(firstName, " ").concat(lastName, " ").concat(tooltipSuffix);
-    var AvatarTextClass = classnames(_defineProperty$1({}, "mb-4", ind < hiddenAvatarList.length - 1));
-    return /*#__PURE__*/React.createElement(Text, {
-      key: ind,
-      appearance: dark ? 'white' : 'default',
-      className: AvatarTextClass,
-      "data-test": "DesignSystem-AvatarGroup--Text"
-    }, name);
+    var elementRef = React.useRef(null);
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      key: index,
+      showOnTruncation: true,
+      tooltip: name,
+      elementRef: elementRef
+    }, /*#__PURE__*/React.createElement(Listbox.Item, {
+      disabled: disabled,
+      className: "cursor-default",
+      tagName: "li",
+      "data-test": "DesignSystem-AvatarGroup--Item"
+    }, /*#__PURE__*/React.createElement(Text, {
+      ref: elementRef,
+      "data-test": "DesignSystem-AvatarGroup--Text",
+      className: "ellipsis--noWrap"
+    }, name)));
   })));
 };
 
@@ -1106,13 +1133,14 @@ var AvatarGroup = function AvatarGroup(props) {
       size = props.size;
   var popperRenderer = popoverOptions.popperRenderer,
       _popoverOptions$maxHe = popoverOptions.maxHeight,
-      maxHeight = _popoverOptions$maxHe === void 0 ? 150 : _popoverOptions$maxHe,
+      maxHeight = _popoverOptions$maxHe === void 0 ? 256 : _popoverOptions$maxHe,
+      _popoverOptions$width = popoverOptions.width,
+      width = _popoverOptions$width === void 0 ? 176 : _popoverOptions$width,
+      minHeight = popoverOptions.minHeight,
       _popoverOptions$posit = popoverOptions.position,
       position = _popoverOptions$posit === void 0 ? 'bottom' : _popoverOptions$posit,
       _popoverOptions$on = popoverOptions.on,
       on = _popoverOptions$on === void 0 ? 'hover' : _popoverOptions$on,
-      _popoverOptions$dark = popoverOptions.dark,
-      dark = _popoverOptions$dark === void 0 ? true : _popoverOptions$dark,
       _popoverOptions$appen = popoverOptions.appendToBody,
       appendToBody = _popoverOptions$appen === void 0 ? true : _popoverOptions$appen,
       _popoverOptions$poppe = popoverOptions.popperClassName,
@@ -1129,7 +1157,6 @@ var AvatarGroup = function AvatarGroup(props) {
   var avatarStyle = size === 'tiny' ? _objectSpread2(_objectSpread2({}, style), tinyAvatarStyle) : style;
   var avatarList = list.length === 3 ? list : list.slice(0, max);
   var AvatarGroupClass = classnames(_defineProperty$1({}, 'AvatarGroup', true), className);
-  var popperClass = classnames(_defineProperty$1({}, 'AvatarGroup-Popper', true), popperClassName);
   return /*#__PURE__*/React.createElement("div", _extends$2({
     "data-test": "DesignSystem-AvatarGroup"
   }, baseProps, {
@@ -1141,7 +1168,6 @@ var AvatarGroup = function AvatarGroup(props) {
     tooltipPosition: tooltipPosition
   }), list.length - max > 0 && list.length !== 3 && /*#__PURE__*/React.createElement(Popover, {
     on: on,
-    dark: dark,
     trigger: /*#__PURE__*/React.createElement(AvatarCount, {
       on: on,
       size: size,
@@ -1150,13 +1176,14 @@ var AvatarGroup = function AvatarGroup(props) {
     }),
     position: position,
     appendToBody: appendToBody,
-    className: popperClass,
     offset: "medium"
   }, /*#__PURE__*/React.createElement(AvatarPopperBody, {
     hiddenAvatarList: list.slice(max, list.length),
     popperRenderer: popperRenderer,
     maxHeight: maxHeight,
-    dark: dark
+    minHeight: minHeight,
+    width: width,
+    popperClassName: popperClassName
   })));
 };
 AvatarGroup.displayName = 'AvatarGroup';
@@ -1413,7 +1440,7 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       rest = _objectWithoutProperties(props, _excluded$16);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Button', true), _defineProperty$1(_classNames, 'Button--expanded', expanded), _defineProperty$1(_classNames, "Button--".concat(size), size), _defineProperty$1(_classNames, "Button--".concat(size, "Square"), !children), _defineProperty$1(_classNames, "Button--".concat(appearance), appearance), _defineProperty$1(_classNames, 'Button--selected', selected && (appearance === 'basic' || appearance === 'transparent')), _defineProperty$1(_classNames, "Button--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
-  var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Button-icon', true), _defineProperty$1(_classNames2, "Button-icon--".concat(iconAlign), children && iconAlign), _classNames2));
+  var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Button-icon', true), _defineProperty$1(_classNames2, "Button-icon--".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames2, "Button-regularIcon--".concat(iconAlign), children && iconAlign && size === 'regular' && !expanded), _classNames2));
   return /*#__PURE__*/React.createElement("button", _extends$2({
     "data-test": "DesignSystem-Button",
     ref: ref,
@@ -1429,7 +1456,8 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement(Text, {
     className: "Button-text Button-text--hidden"
   }, children || '')) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("div", {
-    className: iconClass
+    className: iconClass,
+    "data-test": "DesignSystem-Button--Icon-Wrapper"
   }, /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-Button--Icon",
     name: icon,
@@ -3752,18 +3780,17 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       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({
@@ -13850,6 +13877,18 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       return newStyle;
     });
 
+    _defineProperty$1(_assertThisInitialized$1(_this), "onClickHandler", function () {
+      var openDelay = _this.props.openDelay; // to add delay only while opening
+
+      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,
@@ -13959,17 +13998,34 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleMouseEnter",
     value: function handleMouseEnter() {
-      var on = this.props.on;
+      var _this3 = this;
+
+      var _this$props3 = this.props,
+          on = _this$props3.on,
+          openDelay = _this$props3.openDelay,
+          onToggle = _this$props3.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 () {
+            _this3.setState(function () {
+              return {
+                isOpen: true
+              };
+            });
+
+            _this3.togglePopper('mouseEnter', true);
+          }, openDelay);
+        } else {
+          onToggle(true, 'mouseEnter');
+          this.setState(function () {
+            return {
+              isOpen: true
+            };
+          });
+        }
       }
     }
   }, {
@@ -13978,9 +14034,9 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       var on = this.props.on;
 
       if (on === 'hover') {
-        var _this$props3 = this.props,
-            hoverable = _this$props3.hoverable,
-            onToggle = _this$props3.onToggle;
+        var _this$props4 = this.props,
+            hoverable = _this$props4.hoverable,
+            onToggle = _this$props4.onToggle;
 
         if (hoverable) {
           this.mouseMoveHandler();
@@ -14006,13 +14062,13 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getTriggerElement",
     value: function getTriggerElement(ref) {
-      var _this3 = this;
+      var _this4 = this;
 
-      var _this$props4 = this.props,
-          trigger = _this$props4.trigger,
-          on = _this$props4.on,
-          triggerClass = _this$props4.triggerClass,
-          disabled = _this$props4.disabled;
+      var _this$props5 = this.props,
+          trigger = _this$props5.trigger,
+          on = _this$props5.on,
+          triggerClass = _this$props5.triggerClass,
+          disabled = _this$props5.disabled;
       var options = on === 'hover' && !disabled ? {
         ref: ref,
         onMouseEnter: this.handleMouseEnter,
@@ -14023,20 +14079,20 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         ref: ref,
         onClick: function onClick(ev) {
           ev.stopPropagation();
-          !disabled && _this3.togglePopper('onClick');
+          !disabled && _this4.onClickHandler();
         }
       };
       var classes = classnames('PopperWrapper-trigger', triggerClass);
 
       var shouldPopoverClose = function shouldPopoverClose(clicked) {
-        var popover = _this3.popupRef.current;
+        var popover = _this4.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);
 
@@ -14055,13 +14111,13 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       };
 
       var onOutsideClickHandler = function onOutsideClickHandler(event) {
-        var _this3$props = _this3.props,
-            open = _this3$props.open,
-            closeOnBackdropClick = _this3$props.closeOnBackdropClick;
+        var _this4$props = _this4.props,
+            open = _this4$props.open,
+            closeOnBackdropClick = _this4$props.closeOnBackdropClick;
 
         if (open && shouldPopoverClose(event.target) && closeOnBackdropClick) {
-          if (!_this3.doesEventContainsElement(event, _this3.popupRef)) {
-            _this3.togglePopper('outsideClick');
+          if (!_this4.doesEventContainsElement(event, _this4.popupRef)) {
+            _this4.togglePopper('outsideClick');
           }
         }
       };
@@ -14074,17 +14130,17 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getPopperChildren",
     value: function getPopperChildren(_ref) {
-      var _this4 = this;
+      var _this5 = this;
 
       var ref = _ref.ref,
           style = _ref.style,
           placement = _ref.placement,
           outOfBoundaries = _ref.outOfBoundaries;
-      var _this$props5 = this.props,
-          offset = _this$props5.offset,
-          children = _this$props5.children,
-          open = _this$props5.open,
-          animationClass = _this$props5.animationClass;
+      var _this$props6 = this.props,
+          offset = _this$props6.offset,
+          children = _this$props6.children,
+          open = _this$props6.open,
+          animationClass = _this$props6.animationClass;
       var _this$state = this.state,
           zIndex = _this$state.zIndex,
           animationKeyframe = _this$state.animationKeyframe,
@@ -14138,7 +14194,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         onAnimationEnd: function onAnimationEnd() {
           if (!open) {
             flushSync(function () {
-              _this4.setState({
+              _this5.setState({
                 isOpen: false
               });
             });
@@ -14153,15 +14209,15 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
 
-      var _this$props6 = this.props,
-          placement = _this$props6.placement,
-          appendToBody = _this$props6.appendToBody,
-          hide = _this$props6.hide,
-          boundaryElement = _this$props6.boundaryElement,
-          triggerCoordinates = _this$props6.triggerCoordinates,
-          computeStyles = _this$props6.computeStyles;
+      var _this$props7 = this.props,
+          placement = _this$props7.placement,
+          appendToBody = _this$props7.appendToBody,
+          hide = _this$props7.hide,
+          boundaryElement = _this$props7.boundaryElement,
+          triggerCoordinates = _this$props7.triggerCoordinates,
+          computeStyles = _this$props7.computeStyles;
       var _this$state2 = this.state,
           animationKeyframe = _this$state2.animationKeyframe,
           isOpen = _this$state2.isOpen;
@@ -14186,7 +14242,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         innerRef: this.triggerRef
       }, function (_ref2) {
         var ref = _ref2.ref;
-        return _this5.getTriggerElement(ref);
+        return _this6.getTriggerElement(ref);
       }), isOpen && appendToBody && !triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
         innerRef: this.popupRef,
@@ -24602,7 +24658,7 @@ var AvatarSelectionCount = function AvatarSelectionCount(props) {
     appearance: "secondary",
     className: "SelectionAvatarCount cursor-pointer"
   }, /*#__PURE__*/React.createElement(Text, {
-    className: "overflow-hidden"
+    className: "overflow-hidden Avatar-content"
   }, "+".concat(hiddenAvatarCount))));
 };
 
@@ -25330,7 +25386,7 @@ var keyCodes = {
   DELETE: 'Delete',
   ENTER: 'Enter'
 };
-var MultiSelectTrigger = function MultiSelectTrigger(props) {
+var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (props, forwardedInputRef) {
   var _classNames, _classNames2;
 
   var chipOptions = props.chipOptions,
@@ -25351,7 +25407,9 @@ var MultiSelectTrigger = function MultiSelectTrigger(props) {
       role = props.role,
       rest = _objectWithoutProperties(props, _excluded$k);
 
-  var inputRef = /*#__PURE__*/React.createRef();
+  var localInputRef = React.useRef();
+  var customRef = React.useRef();
+  var inputElementRef = forwardedInputRef || localInputRef;
 
   var _React$useState = React.useState(value || defaultValue),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -25370,6 +25428,12 @@ var MultiSelectTrigger = function MultiSelectTrigger(props) {
       setInputValue('');
     }
   }, [value]);
+  React.useEffect(function () {
+    if (inputValue === '' && inputElementRef.current) {
+      inputElementRef.current.style.flexBasis = '0';
+      customRef.current.charCount = null;
+    }
+  }, [inputValue]);
   var ChipInputBorderClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ChipInput-border', true), _defineProperty$1(_classNames, 'ChipInput-border--error', error), _classNames));
   var ChipInputClass = classnames((_classNames2 = {
     ChipInput: true
@@ -25449,14 +25513,34 @@ var MultiSelectTrigger = function MultiSelectTrigger(props) {
   };
 
   var onInputChangeHandler = function onInputChangeHandler(event) {
+    var inputElement = inputElementRef.current;
+
+    if (inputElement) {
+      var _customRef$current;
+
+      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 <= (((_customRef$current = customRef.current) === null || _customRef$current === void 0 ? void 0 : _customRef$current.charCount) || 0) - 1) {
+        inputElement.style.flexBasis = '0';
+      }
+    }
+
     setInputValue(event.target.value);
     onInputChange && onInputChange(event);
   };
 
   var onClickHandler = function onClickHandler() {
-    var _inputRef$current;
+    var _inputElementRef$curr;
 
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    (_inputElementRef$curr = inputElementRef.current) === null || _inputElementRef$curr === void 0 ? void 0 : _inputElementRef$curr.focus();
   };
 
   var chipComponents = chips.map(function (chip, index) {
@@ -25498,10 +25582,11 @@ var MultiSelectTrigger = function MultiSelectTrigger(props) {
       onClick: onClickHandler,
       tabIndex: disabled ? -1 : tabIndex || 0
     }), /*#__PURE__*/React.createElement("div", {
-      className: "ChipInput-wrapper"
+      className: "ChipInput-wrapper",
+      ref: customRef
     }, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", _extends$2({}, rest, {
       "data-test": "DesignSystem-MultiSelectTrigger--Input",
-      ref: props.forwardedRef || inputRef,
+      ref: inputElementRef,
       className: "ChipInput-input",
       autoFocus: autoFocus,
       placeholder: chips && chips.length > 0 ? '' : placeholder,
@@ -25521,7 +25606,7 @@ var MultiSelectTrigger = function MultiSelectTrigger(props) {
       tabIndex: disabled ? -1 : 0
     })))
   );
-};
+});
 MultiSelectTrigger.displayName = 'MultiSelectTrigger';
 MultiSelectTrigger.defaultProps = {
   chipOptions: {},
@@ -25577,12 +25662,12 @@ var ChipInputBox = function ChipInputBox(props) {
   };
 
   return /*#__PURE__*/React__default.createElement(MultiSelectTrigger, _extends$2({}, props, {
+    ref: inputTriggerRef,
     value: chipInputValue,
     onChange: onChangeHandler,
     onInputChange: onUpdateHandler,
     onKeyDown: onKeyDownHandler,
     tabIndex: -1,
-    forwardedRef: inputTriggerRef,
     role: "combobox",
     "aria-haspopup": "listbox",
     "aria-controls": popoverId,
@@ -31505,6 +31590,6 @@ AIResponse.Button = ChatButton;
 AIResponse.ActionBar = ChatActionBar;
 AIResponse.Body = ChatBody;
 
-var version = "2.42.0";
+var version = "2.44.0";
 
 export { AIButton, AIChip, AIIconButton, AIResponse, ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, KeyValuePair, Label, Legend, Link, LinkButton, List, Listbox, Menu, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sara, SaraSparkle, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };