@innovaccer/design-system 2.36.2 → 2.37.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1718291430139 
+   * Generated on: 1719911531454 
    *      Package: @innovaccer/design-system
-   *      Version: v2.36.2
+   *      Version: v2.37.0
    *      License: MIT
    *         Docs: https://mds.innovaccer.com
    */
@@ -906,16 +906,27 @@ var Avatar = function Avatar(props) {
       className = props.className,
       appearance = props.appearance,
       shape = props.shape,
+      disabled = props.disabled,
+      tooltipSuffix = props.tooltipSuffix,
+      tabIndex = props.tabIndex,
       _props$role = props.role,
       role = _props$role === void 0 ? 'presentation' : _props$role;
   var baseProps = extractBaseProps(props);
   var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
-  var tooltip = children && typeof children === 'string' ? children : "".concat(firstName || '', " ").concat(lastName || '') || '';
+
+  var getTooltipName = function getTooltipName() {
+    if (children && typeof children === 'string') {
+      return "".concat(children, " ").concat(tooltipSuffix || '');
+    }
+
+    return "".concat(firstName || '', " ").concat(lastName || '', " ").concat(tooltipSuffix || '') || '';
+  };
+
   var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
   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--disabled', !initials || !withTooltip), _classNames), className);
-  var AvatarWrapperClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Avatar--wrapper', shape === 'square'), _defineProperty$1(_classNames2, "Avatar--".concat(size), shape === 'square'), _classNames2));
+  }, _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 sharedProp = {
@@ -936,7 +947,8 @@ var Avatar = function Avatar(props) {
       }, /*#__PURE__*/React.createElement("span", _extends$2({
         "data-test": "DesignSystem-Avatar"
       }, baseProps, {
-        className: AvatarClassNames
+        className: AvatarClassNames,
+        tabIndex: tabIndex || disabled ? -1 : 0
       }), children)));
     }
 
@@ -947,7 +959,8 @@ var Avatar = function Avatar(props) {
     }, /*#__PURE__*/React.createElement("span", _extends$2({
       "data-test": "DesignSystem-Avatar"
     }, baseProps, {
-      className: AvatarClassNames
+      className: AvatarClassNames,
+      tabIndex: tabIndex || disabled ? -1 : 0
     }), initials && /*#__PURE__*/React.createElement(Text, {
       weight: "medium",
       appearance: 'white',
@@ -964,7 +977,7 @@ var Avatar = function Avatar(props) {
   var renderTooltip = function renderTooltip() {
     if (withTooltip && initials) {
       return /*#__PURE__*/React.createElement(Tooltip, {
-        tooltip: tooltip,
+        tooltip: getTooltipName(),
         position: tooltipPosition,
         triggerClass: 'flex-grow-0'
       }, renderAvatar());
@@ -995,11 +1008,13 @@ var AvatarCount = function AvatarCount(props) {
   var ContentClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "Avatar-content--secondary", 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, 'Avatar--disabled', true), _defineProperty$1(_classNames2, 'cursor-pointer', on === 'click'), _classNames2));
+  }, _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));
   return /*#__PURE__*/React.createElement("div", {
     "data-test": "DesignSystem-AvatarGroup--TriggerAvatar",
     className: "AvatarCount-wrapper",
-    style: avatarStyle
+    style: avatarStyle,
+    tabIndex: 0,
+    role: "button"
   }, /*#__PURE__*/React.createElement("span", {
     "data-test": "DesignSystem-AvatarGroup--TriggerAvatarVariants",
     className: AvatarVariantsClass
@@ -1022,7 +1037,9 @@ var Avatars = function Avatars(props) {
         firstName = item.firstName,
         lastName = item.lastName,
         icon = item.icon,
-        image = item.image;
+        image = item.image,
+        disabled = item.disabled,
+        tooltipSuffix = item.tooltipSuffix;
     return /*#__PURE__*/React.createElement("div", {
       "data-test": "DesignSystem-AvatarGroup--Avatar",
       className: GroupClass,
@@ -1034,7 +1051,9 @@ var Avatars = function Avatars(props) {
       firstName: firstName,
       lastName: lastName,
       withTooltip: true,
-      tooltipPosition: tooltipPosition
+      disabled: disabled,
+      tooltipPosition: tooltipPosition,
+      tooltipSuffix: tooltipSuffix
     }, image || icon));
   });
   return avatars;
@@ -1061,8 +1080,10 @@ var AvatarPopperBody = function AvatarPopperBody(props) {
     var _item$firstName = item.firstName,
         firstName = _item$firstName === void 0 ? '' : _item$firstName,
         _item$lastName = item.lastName,
-        lastName = _item$lastName === void 0 ? '' : _item$lastName;
-    var name = "".concat(firstName, " ").concat(lastName);
+        lastName = _item$lastName === void 0 ? '' : _item$lastName,
+        _item$tooltipSuffix = item.tooltipSuffix,
+        tooltipSuffix = _item$tooltipSuffix === void 0 ? '' : _item$tooltipSuffix;
+    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,
@@ -3085,10 +3106,10 @@ var GenericChip = function GenericChip(props) {
   var iconAppearance = function iconAppearance(align) {
     var _classNames2;
 
-    return classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'disabled', disabled && !selected), _defineProperty$1(_classNames2, 'primary_dark', !disabled && selected), _defineProperty$1(_classNames2, 'primary_lighter', disabled && selected), _defineProperty$1(_classNames2, 'subtle', !disabled && !selected && align === 'right'), _defineProperty$1(_classNames2, 'inverse', !disabled && !selected && align === 'left'), _classNames2));
+    return classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'primary_dark', selected), _defineProperty$1(_classNames2, 'subtle', !selected && align === 'right'), _defineProperty$1(_classNames2, 'inverse', !selected && align === 'left'), _classNames2));
   };
 
-  var textColor = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'primary-lighter', disabled && selected), _defineProperty$1(_classNames3, 'inverse-lightest', disabled && !selected), _defineProperty$1(_classNames3, 'primary-dark', selected), _defineProperty$1(_classNames3, 'inverse', !disabled && !selected), _classNames3));
+  var textColor = classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'primary-dark', selected), _defineProperty$1(_classNames3, 'inverse', !disabled && !selected), _classNames3));
 
   var renderLabel = function renderLabel() {
     if (typeof label === 'string') {
@@ -13981,7 +14002,9 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       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) {
@@ -23021,10 +23044,16 @@ var ActionCard = function ActionCard(props) {
       onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded$r);
 
-  var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionCard', true), _defineProperty$1(_classNames, 'ActionCard--disabled', disabled), _classNames), className);
+  var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionCard', true), _defineProperty$1(_classNames, 'ActionCard--default', !disabled), _defineProperty$1(_classNames, 'ActionCard--disabled', disabled), _classNames), 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);
     }
   };
@@ -23034,7 +23063,7 @@ var ActionCard = function ActionCard(props) {
     role: "link",
     "data-test": "DesignSystem-ActionCard",
     className: classes,
-    onClick: onClick,
+    onClick: onClickHandler,
     onKeyDown: onKeyDownHandler
   }, rest), disabled && /*#__PURE__*/React.createElement("div", {
     style: {
@@ -23135,14 +23164,16 @@ var SelectionCard = function SelectionCard(props) {
       className = props.className,
       rest = _objectWithoutProperties(props, _excluded$q);
 
-  var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Selection-card', true), _defineProperty$1(_classNames, 'Selection-card--selected', selected), _defineProperty$1(_classNames, 'Selection-card--disabled', disabled && !selected), _defineProperty$1(_classNames, 'Selection-card--selected-disabled', disabled && selected), _classNames), className);
+  var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Selection-card', true), _defineProperty$1(_classNames, 'Selection-card--default', !disabled), _defineProperty$1(_classNames, 'Selection-card--selected', selected && !disabled), _defineProperty$1(_classNames, 'Selection-card--disabled', disabled), _defineProperty$1(_classNames, 'Selection-card--default-disabled', disabled && !selected), _defineProperty$1(_classNames, 'Selection-card--selected-disabled', disabled && selected), _classNames), 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);
     }
   };
@@ -23150,7 +23181,7 @@ var SelectionCard = function SelectionCard(props) {
   return /*#__PURE__*/React.createElement("div", _extends$2({
     role: "checkbox",
     "aria-checked": selected,
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     onKeyDown: onKeyDownHandler,
     onClick: function onClick(event) {
       return onClickHandler(event);
@@ -24295,17 +24326,20 @@ var TextField = function TextField(props) {
 };
 TextField.displayName = 'TextField';
 
-var _excluded$n = ["icon", "image"];
+var _excluded$n = ["icon", "image", "disabled"];
 var SelectionAvatar = function SelectionAvatar(props) {
   var icon = props.icon,
       image = props.image,
+      disabled = props.disabled,
       rest = _objectWithoutProperties(props, _excluded$n);
 
+  var avatarClassName = classnames(_defineProperty$1({}, 'cursor-pointer', !disabled));
   return /*#__PURE__*/React.createElement(Avatar, _extends$2({
     role: "checkbox"
   }, rest, {
+    disabled: disabled,
     withTooltip: true,
-    className: "cursor-pointer"
+    className: avatarClassName
   }), image || icon);
 };
 
@@ -24323,6 +24357,10 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
       onSelect = contextProp.onSelect;
 
   var onClickHandler = function onClickHandler(item) {
+    if (item.disabled) {
+      return;
+    }
+
     var list = selectedItems;
 
     if (selectedItems !== null && selectedItems !== void 0 && selectedItems.includes(item)) {
@@ -24340,6 +24378,10 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
   };
 
   var handleKeyDown = function handleKeyDown(event, item) {
+    if (item.disabled) {
+      return;
+    }
+
     switch (event.key) {
       case 'Enter':
         onClickHandler(item);
@@ -24354,8 +24396,10 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
         firstName = avatarItem.firstName,
         lastName = avatarItem.lastName,
         icon = avatarItem.icon,
-        image = avatarItem.image;
-    var GroupClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "SelectionAvatarGroup-item", true), _defineProperty$1(_classNames, "SelectionAvatarGroup-item--selected", selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem)), _classNames));
+        image = avatarItem.image,
+        disabled = avatarItem.disabled,
+        tooltipSuffix = avatarItem.tooltipSuffix;
+    var GroupClass = classnames((_classNames = {}, _defineProperty$1(_classNames, "SelectionAvatarGroup-item", true), _defineProperty$1(_classNames, "SelectionAvatarGroup-item--active", !disabled), _defineProperty$1(_classNames, "SelectionAvatarGroup-item--selected", selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarItem)), _classNames));
 
     if (avatarRenderer) {
       return avatarRenderer(avatarItem);
@@ -24365,7 +24409,7 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
       key: index,
       className: "SelectionAvatarGroup-wrapper"
     }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: 0,
+      tabIndex: -1,
       role: "checkbox",
       style: avatarStyle,
       className: GroupClass,
@@ -24385,7 +24429,9 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
       withTooltip: true,
       tooltipPosition: tooltipPosition,
       icon: icon,
-      image: image
+      image: image,
+      disabled: disabled,
+      tooltipSuffix: tooltipSuffix
     })));
   }));
 };
@@ -24457,7 +24503,7 @@ var AvatarSelectionCount = function AvatarSelectionCount(props) {
       selectedItemCount = _React$useState2[0],
       setSelectedItemCount = _React$useState2[1];
 
-  var wrapperClassName = classnames((_classNames = {}, _defineProperty$1(_classNames, 'SelectionAvatarCount-wrapper', true), _defineProperty$1(_classNames, 'SelectionAvatarCount--selected', selectedItemCount > 0), _classNames));
+  var wrapperClassName = classnames((_classNames = {}, _defineProperty$1(_classNames, 'SelectionAvatarCount-wrapper', true), _defineProperty$1(_classNames, "SelectionAvatarGroup-item", true), _defineProperty$1(_classNames, 'SelectionAvatarCount--selected', selectedItemCount > 0), _classNames));
   React.useEffect(function () {
     var selectedList = hiddenAvatarList.filter(function (data1) {
       return selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (data2) {
@@ -24480,6 +24526,7 @@ var AvatarSelectionCount = function AvatarSelectionCount(props) {
     "aria-controls": popoverId,
     ref: triggerRef
   }, /*#__PURE__*/React.createElement(Avatar, {
+    tabIndex: -1,
     size: size,
     appearance: "secondary",
     className: "SelectionAvatarCount cursor-pointer"
@@ -24600,10 +24647,11 @@ AvatarSelectionList.defaultProps = {
   tagName: 'ul'
 };
 
-var _excluded$m = ["children", "value"];
+var _excluded$m = ["children", "value", "disabled"];
 var AvatarSelectionOption = function AvatarSelectionOption(props) {
   var children = props.children,
       value = props.value,
+      disabled = props.disabled,
       rest = _objectWithoutProperties(props, _excluded$m);
 
   var contextProp = React.useContext(AvatarSelectionContext);
@@ -24621,6 +24669,11 @@ var AvatarSelectionOption = function AvatarSelectionOption(props) {
 
   var onSelectHandler = function onSelectHandler(event, avatarData) {
     event.preventDefault();
+
+    if (disabled) {
+      return;
+    }
+
     var list = selectedItems ? _toConsumableArray(selectedItems) : [];
 
     if (selectedItems !== null && selectedItems !== void 0 && selectedItems.includes(avatarData)) {
@@ -24649,6 +24702,7 @@ var AvatarSelectionOption = function AvatarSelectionOption(props) {
     },
     selected: selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(value),
     "data-test": "DesignSystem-AvatarSelection--Option",
+    disabled: disabled,
     tabIndex: -1
   }, rest), children);
 };
@@ -24690,8 +24744,10 @@ var AvatarSelectionItem = function AvatarSelectionItem(props) {
   var _avatarData$firstName = avatarData.firstName,
       firstName = _avatarData$firstName === void 0 ? '' : _avatarData$firstName,
       _avatarData$lastName = avatarData.lastName,
-      lastName = _avatarData$lastName === void 0 ? '' : _avatarData$lastName;
-  var name = "".concat(firstName, " ").concat(lastName);
+      lastName = _avatarData$lastName === void 0 ? '' : _avatarData$lastName,
+      disabled = avatarData.disabled,
+      tooltipSuffix = avatarData.tooltipSuffix;
+  var name = "".concat(firstName || '', " ").concat(lastName || '', " ").concat(tooltipSuffix || '') || '';
   return /*#__PURE__*/React.createElement(Tooltip, {
     showOnTruncation: true,
     tooltip: name,
@@ -24699,6 +24755,7 @@ var AvatarSelectionItem = function AvatarSelectionItem(props) {
     open: showTooltip
   }, /*#__PURE__*/React.createElement(AvatarSelectionOption, {
     value: avatarData,
+    disabled: disabled,
     onFocus: function onFocus() {
       setShowTooltip(true);
     },
@@ -25785,7 +25842,9 @@ var removeOrAddToList = function removeOrAddToList(targetObject, prevList) {
 };
 var computeValue = function computeValue(multiSelect, selectValue, setLabel) {
   if (!multiSelect) {
-    return (selectValue === null || selectValue === void 0 ? void 0 : selectValue.label.trim()) || '';
+    var _selectValue$label;
+
+    return (selectValue === null || selectValue === void 0 ? void 0 : (_selectValue$label = selectValue.label) === null || _selectValue$label === void 0 ? void 0 : _selectValue$label.trim()) || '';
   }
 
   var label = setLabel === null || setLabel === void 0 ? void 0 : setLabel(selectValue.length);
@@ -25928,6 +25987,8 @@ var handleInputKeyDown = function handleInputKeyDown(event, listRef, setFocusedO
 
 var _excluded$h = ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"];
 var SelectOption = function SelectOption(props) {
+  var _classNames2;
+
   var children = props.children,
       option = props.option,
       checkedState = props.checkedState,
@@ -25968,6 +26029,8 @@ var SelectOption = function SelectOption(props) {
 
   var checked = checkedState === 'checked' || elementExist(option, selectValue) !== -1;
   var indeterminate = checkedState === 'indeterminate';
+  var optionItemClass = classnames(_defineProperty$1({}, 'Select-option', true));
+  var textClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Select-option--text', true), _defineProperty$1(_classNames2, 'pt-2', multiSelect), _classNames2));
 
   var onKeyDownHandler = function onKeyDownHandler(event) {
     handleKeyDown$2(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
@@ -25986,14 +26049,14 @@ var SelectOption = function SelectOption(props) {
     disabled: disabled,
     "data-test": "DesignSystem-Select-Option"
   }, rest), /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center w-100"
+    className: optionItemClass
   }, multiSelect && withCheckbox && /*#__PURE__*/React.createElement(Checkbox, {
     tabIndex: -1,
     "aria-checked": indeterminate ? 'mixed' : checked,
     checked: checked,
     indeterminate: indeterminate
   }), /*#__PURE__*/React.createElement("div", {
-    className: multiSelect ? 'Select-trigger-text pt-2' : 'Select-trigger-text'
+    className: textClass
   }, children)));
 };
 SelectOption.defaultProps = {
@@ -26027,12 +26090,16 @@ var SelectTrigger = function SelectTrigger(props) {
       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();
@@ -26049,7 +26116,7 @@ var SelectTrigger = function SelectTrigger(props) {
   };
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Button', true), _defineProperty$1(_classNames, 'Select-trigger', true), _defineProperty$1(_classNames, "Select-trigger--".concat(triggerSize), triggerSize), _defineProperty$1(_classNames, 'Select-trigger--placeholder', !isOptionSelected), _defineProperty$1(_classNames, 'Select-trigger--icon', icon), _defineProperty$1(_classNames, 'Select-trigger--open', openPopover), _classNames));
-  var textClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Text', true), _defineProperty$1(_classNames2, 'Text--regular', true), _defineProperty$1(_classNames2, 'Select-trigger-text', true), _classNames2));
+  var textClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Text', true), _defineProperty$1(_classNames2, 'Text--regular', true), _defineProperty$1(_classNames2, 'Select-trigger--text', true), _classNames2));
   return /*#__PURE__*/React.createElement(Tooltip, {
     showOnTruncation: true,
     showTooltip: !openPopover,
@@ -26066,6 +26133,7 @@ var SelectTrigger = function SelectTrigger(props) {
     className: buttonClass,
     disabled: disabled,
     tabIndex: 0,
+    style: triggerStyle,
     "aria-haspopup": "listbox",
     "aria-expanded": openPopover,
     "aria-label": "trigger",
@@ -26213,7 +26281,9 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
       multiSelect = _props$multiSelect === void 0 ? false : _props$multiSelect,
       onOutsideClick = props.onOutsideClick,
       triggerOptions = props.triggerOptions,
-      popoverWidth = props.popoverWidth;
+      popoverWidth = props.popoverWidth,
+      trigger = props.trigger,
+      onToggle = props.onToggle;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -26262,19 +26332,30 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
       popoverStyle = _React$useState16[0],
       setPopoverStyle = _React$useState16[1];
 
-  var triggerStyle = {
-    width: width
-  };
   var baseProps = extractBaseProps(props);
+
+  var getTriggerElement = function getTriggerElement() {
+    if (trigger) {
+      return /*#__PURE__*/React.cloneElement(trigger, {
+        ref: triggerRef
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(SelectTrigger, _extends$2({
+      "aria-controls": "select-listbox"
+    }, triggerOptions));
+  };
+
   React.useEffect(function () {
     var _triggerRef$current;
 
     // if popover width is not provided explicitly, apply the trigger width to popover width
-    if (!popoverWidth && (_triggerRef$current = triggerRef.current) !== null && _triggerRef$current !== void 0 && _triggerRef$current.clientWidth) {
-      var _triggerRef$current2;
+    var MIN_WIDTH = 176;
+    var triggerWidth = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.clientWidth;
 
+    if (!popoverWidth && triggerWidth) {
       setPopoverStyle(_objectSpread2(_objectSpread2({}, popoverStyle), {}, {
-        width: (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.clientWidth
+        width: trigger ? Math.max(triggerWidth || 0, MIN_WIDTH) : triggerWidth
       }));
     }
   }, []);
@@ -26329,11 +26410,15 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [value]);
 
   var onToggleHandler = function onToggleHandler(open) {
+    if (onToggle) {
+      onToggle(open);
+    }
+
     if (triggerOptions && triggerOptions.disabled) {
       setOpenPopover(false);
     } else {
-      setHighlightFirstItem(open);
       setOpenPopover(open);
+      setHighlightFirstItem(open);
     }
   };
 
@@ -26372,19 +26457,17 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement("div", _extends$2({
     "data-test": "DesignSystem-Select",
     "aria-haspopup": "listbox",
-    "aria-expanded": openPopover,
-    style: triggerStyle
+    "aria-expanded": openPopover
   }, baseProps), /*#__PURE__*/React.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.createElement(SelectTrigger, _extends$2({
-      "aria-controls": "select-listbox"
-    }, triggerOptions))
+    trigger: getTriggerElement()
   }, /*#__PURE__*/React.createElement(OutsideClick, {
     onOutsideClick: onOutsideClickHandler
   }, /*#__PURE__*/React.createElement("div", {
@@ -31281,6 +31364,6 @@ AIResponse.Button = ChatButton;
 AIResponse.ActionBar = ChatActionBar;
 AIResponse.Body = ChatBody;
 
-var version = "2.36.2";
+var version = "2.37.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, 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$1 as 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 };