@innovaccer/design-system 2.36.1 → 2.37.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1718190836374 
+   * Generated on: 1719911531711 
    *      Package: @innovaccer/design-system
-   *      Version: v2.36.1
+   *      Version: v2.37.0
    *      License: MIT
    *         Docs: https://mds.innovaccer.com
    */
@@ -548,16 +548,27 @@
           className = props.className,
           appearance = props.appearance,
           shape = props.shape,
+          disabled = props.disabled,
+          tooltipSuffix = props.tooltipSuffix,
+          tabIndex = props.tabIndex,
           _e = props.role,
           role = _e === void 0 ? 'presentation' : _e;
       var baseProps = extractBaseProps(props);
       var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
-      var tooltip = children && typeof children === 'string' ? children : (firstName || '') + " " + (lastName || '') || '';
+
+      var getTooltipName = function getTooltipName() {
+        if (children && typeof children === 'string') {
+          return children + " " + (tooltipSuffix || '');
+        }
+
+        return (firstName || '') + " " + (lastName || '') + " " + (tooltipSuffix || '') || '';
+      };
+
       var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
       var AvatarClassNames = classNames__default["default"]((_a = {
         Avatar: true
-      }, _a['Avatar--square'] = shape === 'square', _a["Avatar--" + size] = shape !== 'square', _a["Avatar--" + AvatarAppearance] = AvatarAppearance, _a['Avatar--disabled'] = !initials || !withTooltip, _a), className);
-      var AvatarWrapperClassNames = classNames__default["default"]((_b = {}, _b['Avatar--wrapper'] = shape === 'square', _b["Avatar--" + size] = shape === 'square', _b));
+      }, _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 sharedProp = {
@@ -578,7 +589,8 @@
           }, /*#__PURE__*/React__namespace.createElement("span", __assign$1({
             "data-test": "DesignSystem-Avatar"
           }, baseProps, {
-            className: AvatarClassNames
+            className: AvatarClassNames,
+            tabIndex: tabIndex || disabled ? -1 : 0
           }), children)));
         }
 
@@ -589,7 +601,8 @@
         }, /*#__PURE__*/React__namespace.createElement("span", __assign$1({
           "data-test": "DesignSystem-Avatar"
         }, baseProps, {
-          className: AvatarClassNames
+          className: AvatarClassNames,
+          tabIndex: tabIndex || disabled ? -1 : 0
         }), initials && /*#__PURE__*/React__namespace.createElement(Text, {
           weight: "medium",
           appearance: 'white',
@@ -606,7 +619,7 @@
       var renderTooltip = function renderTooltip() {
         if (withTooltip && initials) {
           return /*#__PURE__*/React__namespace.createElement(Tooltip, {
-            tooltip: tooltip,
+            tooltip: getTooltipName(),
             position: tooltipPosition,
             triggerClass: 'flex-grow-0'
           }, renderAvatar());
@@ -637,11 +650,13 @@
       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"] = size === 'regular', _b["Avatar--tiny"] = size === 'tiny', _b["Avatar--secondary"] = true, _b['Avatar--disabled'] = true, _b['cursor-pointer'] = on === 'click', _b));
+      }, _b["Avatar--regular"] = size === 'regular', _b["Avatar--tiny"] = size === 'tiny', _b["Avatar--secondary"] = true, _b['cursor-default'] = true, _b['cursor-pointer'] = on === 'click', _b));
       return /*#__PURE__*/React__namespace.createElement("div", {
         "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
         className: "AvatarCount-wrapper",
-        style: avatarStyle
+        style: avatarStyle,
+        tabIndex: 0,
+        role: "button"
       }, /*#__PURE__*/React__namespace.createElement("span", {
         "data-test": "DesignSystem-AvatarGroup--TriggerAvatarVariants",
         className: AvatarVariantsClass
@@ -664,7 +679,9 @@
             firstName = item.firstName,
             lastName = item.lastName,
             icon = item.icon,
-            image = item.image;
+            image = item.image,
+            disabled = item.disabled,
+            tooltipSuffix = item.tooltipSuffix;
         return /*#__PURE__*/React__namespace.createElement("div", {
           "data-test": "DesignSystem-AvatarGroup--Avatar",
           className: GroupClass,
@@ -676,7 +693,9 @@
           firstName: firstName,
           lastName: lastName,
           withTooltip: true,
-          tooltipPosition: tooltipPosition
+          disabled: disabled,
+          tooltipPosition: tooltipPosition,
+          tooltipSuffix: tooltipSuffix
         }, image || icon));
       });
       return avatars;
@@ -705,8 +724,10 @@
         var _b = item.firstName,
             firstName = _b === void 0 ? '' : _b,
             _c = item.lastName,
-            lastName = _c === void 0 ? '' : _c;
-        var name = firstName + " " + lastName;
+            lastName = _c === void 0 ? '' : _c,
+            _d = item.tooltipSuffix,
+            tooltipSuffix = _d === void 0 ? '' : _d;
+        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,
@@ -2694,10 +2715,10 @@
       var iconAppearance = function iconAppearance(align) {
         var _a;
 
-        return classNames__default["default"]((_a = {}, _a['disabled'] = disabled && !selected, _a['primary_dark'] = !disabled && selected, _a['primary_lighter'] = disabled && selected, _a['subtle'] = !disabled && !selected && align === 'right', _a['inverse'] = !disabled && !selected && align === 'left', _a));
+        return classNames__default["default"]((_a = {}, _a['primary_dark'] = selected, _a['subtle'] = !selected && align === 'right', _a['inverse'] = !selected && align === 'left', _a));
       };
 
-      var textColor = classNames__default["default"]((_a = {}, _a['primary-lighter'] = disabled && selected, _a['inverse-lightest'] = disabled && !selected, _a['primary-dark'] = selected, _a['inverse'] = !disabled && !selected, _a));
+      var textColor = classNames__default["default"]((_a = {}, _a['primary-dark'] = selected, _a['inverse'] = !disabled && !selected, _a));
 
       var renderLabel = function renderLabel() {
         if (typeof label === 'string') {
@@ -8660,7 +8681,9 @@
         var options = on === 'hover' ? {
           ref: ref,
           onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave
+          onMouseLeave: this.handleMouseLeave,
+          onFocus: this.handleMouseEnter,
+          onBlur: this.handleMouseLeave
         } : {
           ref: ref,
           onClick: function onClick(ev) {
@@ -8796,7 +8819,8 @@
             appendToBody = _a.appendToBody,
             hide = _a.hide,
             boundaryElement = _a.boundaryElement,
-            triggerCoordinates = _a.triggerCoordinates;
+            triggerCoordinates = _a.triggerCoordinates,
+            computeStyles = _a.computeStyles;
         var _b = this.state,
             animationKeyframe = _b.animationKeyframe,
             isOpen = _b.isOpen;
@@ -8809,7 +8833,8 @@
             },
             hide: {
               enabled: hide
-            }
+            },
+            computeStyles: computeStyles
           }, triggerCoordinates && {
             offset: {
               offset: triggerCoordinates.x + "px, " + triggerCoordinates.y + "px"
@@ -8830,11 +8855,15 @@
             },
             hide: {
               enabled: hide
-            }
+            },
+            computeStyles: computeStyles
           }
         }, this.getPopperChildren), document.body), isOpen && appendToBody && triggerCoordinates && /*#__PURE__*/ReactDOM__namespace.createPortal(coordinatesPopper, document.body), isOpen && !appendToBody && !triggerCoordinates && /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
           placement: placement,
-          innerRef: this.popupRef
+          innerRef: this.popupRef,
+          modifiers: {
+            computeStyles: computeStyles
+          }
         }, this.getPopperChildren));
       };
 
@@ -17262,10 +17291,16 @@
           onClick = props.onClick,
           rest = __rest(props, ["children", "disabled", "className", "zIndex", "onClick"]);
 
-      var classes = classNames__default["default"]((_a = {}, _a['ActionCard'] = true, _a['ActionCard--disabled'] = disabled, _a), className);
+      var classes = classNames__default["default"]((_a = {}, _a['ActionCard'] = true, _a['ActionCard--default'] = !disabled, _a['ActionCard--disabled'] = disabled, _a), className);
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
-        if (event.key === 'Enter' && onClick) {
+        if (event.key === 'Enter' && onClick && !disabled) {
+          onClick(event);
+        }
+      };
+
+      var onClickHandler = function onClickHandler(event) {
+        if (!disabled && onClick) {
           onClick(event);
         }
       };
@@ -17275,7 +17310,7 @@
         role: "link",
         "data-test": "DesignSystem-ActionCard",
         className: classes,
-        onClick: onClick,
+        onClick: onClickHandler,
         onKeyDown: onKeyDownHandler
       }, rest), disabled && /*#__PURE__*/React__namespace.createElement("div", {
         style: {
@@ -17372,14 +17407,16 @@
           className = props.className,
           rest = __rest(props, ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"]);
 
-      var classes = classNames__default["default"]((_a = {}, _a['Selection-card'] = true, _a['Selection-card--selected'] = selected, _a['Selection-card--disabled'] = disabled && !selected, _a['Selection-card--selected-disabled'] = disabled && selected, _a), className);
+      var classes = classNames__default["default"]((_a = {}, _a['Selection-card'] = true, _a['Selection-card--default'] = !disabled, _a['Selection-card--selected'] = selected && !disabled, _a['Selection-card--disabled'] = disabled, _a['Selection-card--default-disabled'] = disabled && !selected, _a['Selection-card--selected-disabled'] = disabled && selected, _a), className);
 
       var onClickHandler = function onClickHandler(event) {
-        onClick && onClick(event, id, cardValue);
+        if (!disabled && onClick) {
+          onClick(event, id, cardValue);
+        }
       };
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
-        if (event.key === 'Enter') {
+        if (event.key === 'Enter' && !disabled) {
           onClickHandler(event);
         }
       };
@@ -17387,7 +17424,7 @@
       return /*#__PURE__*/React__namespace.createElement("div", __assign$1({
         role: "checkbox",
         "aria-checked": selected,
-        tabIndex: 0,
+        tabIndex: disabled ? -1 : 0,
         onKeyDown: onKeyDownHandler,
         onClick: function onClick(event) {
           return onClickHandler(event);
@@ -18493,15 +18530,20 @@
     TextField.displayName = 'TextField';
 
     var SelectionAvatar = function SelectionAvatar(props) {
+      var _a;
+
       var icon = props.icon,
           image = props.image,
-          rest = __rest(props, ["icon", "image"]);
+          disabled = props.disabled,
+          rest = __rest(props, ["icon", "image", "disabled"]);
 
+      var avatarClassName = classNames__default["default"]((_a = {}, _a['cursor-pointer'] = !disabled, _a));
       return /*#__PURE__*/React__namespace.createElement(Avatar, __assign$1({
         role: "checkbox"
       }, rest, {
+        disabled: disabled,
         withTooltip: true,
-        className: "cursor-pointer"
+        className: avatarClassName
       }), image || icon);
     };
 
@@ -18519,6 +18561,10 @@
           onSelect = contextProp.onSelect;
 
       var onClickHandler = function onClickHandler(item) {
+        if (item.disabled) {
+          return;
+        }
+
         var list = selectedItems;
 
         if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(item)) {
@@ -18534,6 +18580,10 @@
       };
 
       var handleKeyDown = function handleKeyDown(event, item) {
+        if (item.disabled) {
+          return;
+        }
+
         switch (event.key) {
           case 'Enter':
             onClickHandler(item);
@@ -18548,8 +18598,10 @@
             firstName = avatarItem.firstName,
             lastName = avatarItem.lastName,
             icon = avatarItem.icon,
-            image = avatarItem.image;
-        var GroupClass = classNames__default["default"]((_a = {}, _a["SelectionAvatarGroup-item"] = true, _a["SelectionAvatarGroup-item--selected"] = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem), _a));
+            image = avatarItem.image,
+            disabled = avatarItem.disabled,
+            tooltipSuffix = avatarItem.tooltipSuffix;
+        var GroupClass = classNames__default["default"]((_a = {}, _a["SelectionAvatarGroup-item"] = true, _a["SelectionAvatarGroup-item--active"] = !disabled, _a["SelectionAvatarGroup-item--selected"] = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem), _a));
 
         if (avatarRenderer) {
           return avatarRenderer(avatarItem);
@@ -18559,7 +18611,7 @@
           key: index,
           className: "SelectionAvatarGroup-wrapper"
         }, /*#__PURE__*/React__namespace.createElement("div", {
-          tabIndex: 0,
+          tabIndex: -1,
           role: "checkbox",
           style: avatarStyle,
           className: GroupClass,
@@ -18579,7 +18631,9 @@
           withTooltip: true,
           tooltipPosition: tooltipPosition,
           icon: icon,
-          image: image
+          image: image,
+          disabled: disabled,
+          tooltipSuffix: tooltipSuffix
         })));
       }));
     };
@@ -18648,7 +18702,7 @@
           selectedItemCount = _b[0],
           setSelectedItemCount = _b[1];
 
-      var wrapperClassName = classNames__default["default"]((_a = {}, _a['SelectionAvatarCount-wrapper'] = true, _a['SelectionAvatarCount--selected'] = selectedItemCount > 0, _a));
+      var wrapperClassName = classNames__default["default"]((_a = {}, _a['SelectionAvatarCount-wrapper'] = true, _a["SelectionAvatarGroup-item"] = true, _a['SelectionAvatarCount--selected'] = selectedItemCount > 0, _a));
       React__namespace.useEffect(function () {
         var selectedList = hiddenAvatarList.filter(function (data1) {
           return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (data2) {
@@ -18671,6 +18725,7 @@
         "aria-controls": popoverId,
         ref: triggerRef
       }, /*#__PURE__*/React__namespace.createElement(Avatar, {
+        tabIndex: -1,
         size: size,
         appearance: "secondary",
         className: "SelectionAvatarCount cursor-pointer"
@@ -18796,7 +18851,8 @@
     var AvatarSelectionOption = function AvatarSelectionOption(props) {
       var children = props.children,
           value = props.value,
-          rest = __rest(props, ["children", "value"]);
+          disabled = props.disabled,
+          rest = __rest(props, ["children", "value", "disabled"]);
 
       var contextProp = React__namespace.useContext(AvatarSelectionContext);
       var setSelectedItems = contextProp.setSelectedItems,
@@ -18813,6 +18869,11 @@
 
       var onSelectHandler = function onSelectHandler(event, avatarData) {
         event.preventDefault();
+
+        if (disabled) {
+          return;
+        }
+
         var list = selectedItems ? __spreadArrays(selectedItems) : [];
 
         if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData)) {
@@ -18841,6 +18902,7 @@
         },
         selected: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(value),
         "data-test": "DesignSystem-AvatarSelection--Option",
+        disabled: disabled,
         tabIndex: -1
       }, rest), children);
     };
@@ -18881,8 +18943,10 @@
       var _b = avatarData.firstName,
           firstName = _b === void 0 ? '' : _b,
           _c = avatarData.lastName,
-          lastName = _c === void 0 ? '' : _c;
-      var name = firstName + " " + lastName;
+          lastName = _c === void 0 ? '' : _c,
+          disabled = avatarData.disabled,
+          tooltipSuffix = avatarData.tooltipSuffix;
+      var name = (firstName || '') + " " + (lastName || '') + " " + (tooltipSuffix || '') || '';
       return /*#__PURE__*/React__namespace.createElement(Tooltip, {
         showOnTruncation: true,
         tooltip: name,
@@ -18890,6 +18954,7 @@
         open: showTooltip
       }, /*#__PURE__*/React__namespace.createElement(AvatarSelectionOption, {
         value: avatarData,
+        disabled: disabled,
         onFocus: function onFocus() {
           setShowTooltip(true);
         },
@@ -19671,6 +19736,7 @@
           multiSelect = props.multiSelect,
           className = props.className,
           maxHeight = props.maxHeight,
+          minHeight = props.minHeight,
           width = props.width,
           value = props.value,
           placeholder = props.placeholder,
@@ -19686,7 +19752,8 @@
           clearButton = props.clearButton,
           onSearch = props.onSearch,
           onKeyDown = props.onKeyDown,
-          onKeyUp = props.onKeyUp;
+          onKeyUp = props.onKeyUp,
+          computeStyles = props.computeStyles;
 
       var _a = React__namespace.useState(),
           popoverStyle = _a[0],
@@ -19736,6 +19803,16 @@
 
       var inputTriggerRef = React__namespace.useRef();
       var popoverId = "DesignSystem-Combobox--Popover-" + uidGenerator();
+      var defaultPopoverStyle = {
+        fn: function fn(data) {
+          return __assign$1(__assign$1({}, data), {
+            styles: __assign$1(__assign$1({}, data.styles), {
+              position: 'fixed'
+            })
+          });
+        }
+      };
+      var popoverComputeStyle = computeStyles !== null && computeStyles !== void 0 ? computeStyles : defaultPopoverStyle;
       React__namespace.useEffect(function () {
         var _a;
 
@@ -19745,6 +19822,7 @@
         };
         var wrapperStyle = {
           maxHeight: maxHeight || 'var(--spacing-9)',
+          minHeight: minHeight,
           overflowY: 'auto',
           boxSizing: 'border-box'
         };
@@ -19856,7 +19934,8 @@
         triggerClass: "d-block",
         customStyle: popoverStyle,
         onToggle: onToggleHandler,
-        trigger: /*#__PURE__*/React__namespace.createElement(ComboboxTrigger, __assign$1({}, triggerProps))
+        trigger: /*#__PURE__*/React__namespace.createElement(ComboboxTrigger, __assign$1({}, triggerProps)),
+        computeStyles: popoverComputeStyle
       }, /*#__PURE__*/React__namespace.createElement("div", {
         style: wrapperStyle,
         ref: listRef,
@@ -19931,8 +20010,10 @@
       return newList;
     };
     var computeValue = function computeValue(multiSelect, selectValue, setLabel) {
+      var _a;
+
       if (!multiSelect) {
-        return (selectValue === null || selectValue === void 0 ? void 0 : selectValue.label.trim()) || '';
+        return ((_a = selectValue === null || selectValue === void 0 ? void 0 : selectValue.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
       }
 
       var label = setLabel === null || setLabel === void 0 ? void 0 : setLabel(selectValue.length);
@@ -20076,12 +20157,14 @@
     };
 
     var SelectOption = function SelectOption(props) {
+      var _a, _b;
+
       var children = props.children,
           option = props.option,
           checkedState = props.checkedState,
           onClick = props.onClick,
-          _a = props.withCheckbox,
-          withCheckbox = _a === void 0 ? true : _a,
+          _c = props.withCheckbox,
+          withCheckbox = _c === void 0 ? true : _c,
           disabled = props.disabled,
           rest = __rest(props, ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"]);
 
@@ -20116,6 +20199,8 @@
 
       var checked = checkedState === 'checked' || elementExist(option, selectValue) !== -1;
       var indeterminate = checkedState === 'indeterminate';
+      var optionItemClass = classNames__default["default"]((_a = {}, _a['Select-option'] = true, _a));
+      var textClass = classNames__default["default"]((_b = {}, _b['Select-option--text'] = true, _b['pt-2'] = multiSelect, _b));
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
         handleKeyDown$2(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
@@ -20134,14 +20219,14 @@
         disabled: disabled,
         "data-test": "DesignSystem-Select-Option"
       }, rest), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "d-flex align-items-center w-100"
+        className: optionItemClass
       }, multiSelect && withCheckbox && /*#__PURE__*/React__namespace.createElement(Checkbox, {
         tabIndex: -1,
         "aria-checked": indeterminate ? 'mixed' : checked,
         checked: checked,
         indeterminate: indeterminate
       }), /*#__PURE__*/React__namespace.createElement("div", {
-        className: multiSelect ? 'Select-trigger-text pt-2' : 'Select-trigger-text'
+        className: textClass
       }, children)));
     };
     SelectOption.defaultProps = {
@@ -20173,12 +20258,16 @@
           setOpenPopover = contextProp.setOpenPopover,
           setHighlightFirstItem = contextProp.setHighlightFirstItem,
           setHighlightLastItem = contextProp.setHighlightLastItem,
-          triggerRef = contextProp.triggerRef;
+          triggerRef = contextProp.triggerRef,
+          width = contextProp.width;
       var buttonDisabled = disabled ? 'disabled' : 'default';
       var trimmedPlaceholder = placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim();
       var displayValue = computeValue(multiSelect, selectValue, setLabel);
       var value = isOptionSelected && displayValue.length > 0 ? displayValue : trimmedPlaceholder;
       var iconName = openPopover ? 'keyboard_arrow_up' : 'keyboard_arrow_down';
+      var triggerStyle = {
+        width: width
+      };
 
       var onClearHandler = function onClearHandler(event) {
         event.stopPropagation();
@@ -20195,7 +20284,7 @@
       };
 
       var buttonClass = classNames__default["default"]((_a = {}, _a['Button'] = true, _a['Select-trigger'] = true, _a["Select-trigger--" + triggerSize] = triggerSize, _a['Select-trigger--placeholder'] = !isOptionSelected, _a['Select-trigger--icon'] = icon, _a['Select-trigger--open'] = openPopover, _a));
-      var textClass = classNames__default["default"]((_b = {}, _b['Text'] = true, _b['Text--regular'] = true, _b['Select-trigger-text'] = true, _b));
+      var textClass = classNames__default["default"]((_b = {}, _b['Text'] = true, _b['Text--regular'] = true, _b['Select-trigger--text'] = true, _b));
       return /*#__PURE__*/React__namespace.createElement(Tooltip, {
         showOnTruncation: true,
         showTooltip: !openPopover,
@@ -20212,6 +20301,7 @@
         className: buttonClass,
         disabled: disabled,
         tabIndex: 0,
+        style: triggerStyle,
         "aria-haspopup": "listbox",
         "aria-expanded": openPopover,
         "aria-label": "trigger",
@@ -20354,7 +20444,9 @@
           multiSelect = _a === void 0 ? false : _a,
           onOutsideClick = props.onOutsideClick,
           triggerOptions = props.triggerOptions,
-          popoverWidth = props.popoverWidth;
+          popoverWidth = props.popoverWidth,
+          trigger = props.trigger,
+          onToggle = props.onToggle;
 
       var _b = React__namespace.useState(false),
           openPopover = _b[0],
@@ -20395,16 +20487,29 @@
           popoverStyle = _j[0],
           setPopoverStyle = _j[1];
 
-      var triggerStyle = {
-        width: width
-      };
       var baseProps = extractBaseProps(props);
+
+      var getTriggerElement = function getTriggerElement() {
+        if (trigger) {
+          return /*#__PURE__*/React__namespace.cloneElement(trigger, {
+            ref: triggerRef
+          });
+        }
+
+        return /*#__PURE__*/React__namespace.createElement(SelectTrigger, __assign$1({
+          "aria-controls": "select-listbox"
+        }, triggerOptions));
+      };
+
       React__namespace.useEffect(function () {
-        var _a, _b;
+        var _a;
 
-        if (!popoverWidth && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+        var MIN_WIDTH = 176;
+        var triggerWidth = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+
+        if (!popoverWidth && triggerWidth) {
           setPopoverStyle(__assign$1(__assign$1({}, popoverStyle), {
-            width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth
+            width: trigger ? Math.max(triggerWidth || 0, MIN_WIDTH) : triggerWidth
           }));
         }
       }, []);
@@ -20459,11 +20564,15 @@
       }, [value]);
 
       var onToggleHandler = function onToggleHandler(open) {
+        if (onToggle) {
+          onToggle(open);
+        }
+
         if (triggerOptions && triggerOptions.disabled) {
           setOpenPopover(false);
         } else {
-          setHighlightFirstItem(open);
           setOpenPopover(open);
+          setHighlightFirstItem(open);
         }
       };
 
@@ -20502,19 +20611,17 @@
       }, /*#__PURE__*/React__namespace.createElement("div", __assign$1({
         "data-test": "DesignSystem-Select",
         "aria-haspopup": "listbox",
-        "aria-expanded": openPopover,
-        style: triggerStyle
+        "aria-expanded": openPopover
       }, baseProps), /*#__PURE__*/React__namespace.createElement(Popover$1, {
         open: openPopover,
         onToggle: onToggleHandler,
         className: "mt-3",
         triggerClass: "d-block",
+        position: "bottom-start",
         customStyle: popoverStyle,
         boundaryElement: boundaryElement,
         appendToBody: appendToBody,
-        trigger: /*#__PURE__*/React__namespace.createElement(SelectTrigger, __assign$1({
-          "aria-controls": "select-listbox"
-        }, triggerOptions))
+        trigger: getTriggerElement()
       }, /*#__PURE__*/React__namespace.createElement(OutsideClick, {
         onOutsideClick: onOutsideClickHandler
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -20989,7 +21096,7 @@
       position: 'bottom-start'
     };
 
-    var img$4 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C10 5.52285 5.52285 10 0 10C5.52285 10 10 14.4772 10 20C10 14.4772 14.4772 10 20 10C14.4772 10 10 5.52285 10 0ZM20 14C20 17.3137 17.3137 20 14 20C17.3137 20 20 22.6863 20 26C20 22.6863 22.6863 20 26 20C22.6863 20 20 17.3137 20 14Z' fill='%232F2F2F'/%3e%3c/svg%3e";
+    var img$4 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C10 5.52285 5.52285 10 0 10C5.52285 10 10 14.4772 10 20C10 14.4772 14.4772 10 20 10C14.4772 10 10 5.52285 10 0ZM20 14C20 17.3137 17.3137 20 14 20C17.3137 20 20 22.6863 20 26C20 22.6863 22.6863 20 26 20C22.6863 20 20 17.3137 20 14Z' fill='%231f1f1f'/%3e%3c/svg%3e";
 
     var img$3 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C10 5.52285 5.52285 10 0 10C5.52285 10 10 14.4772 10 20C10 14.4772 14.4772 10 20 10C14.4772 10 10 5.52285 10 0ZM20 14C20 17.3137 17.3137 20 14 20C17.3137 20 20 22.6863 20 26C20 22.6863 22.6863 20 26 20C22.6863 20 20 17.3137 20 14Z' fill='%23A6A6A6'/%3e%3c/svg%3e";
 
@@ -25391,7 +25498,7 @@
     AIResponse.ActionBar = ChatActionBar;
     AIResponse.Body = ChatBody;
 
-    var version = "2.36.1";
+    var version = "2.37.0";
 
     exports.AIButton = AIButton;
     exports.AIChip = AIChip;