@innovaccer/design-system 2.36.1 → 2.37.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1718190836127 
+   * Generated on: 1719911531454 
    *      Package: @innovaccer/design-system
-   *      Version: v2.36.1
+   *      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) {
@@ -14122,7 +14145,8 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
           appendToBody = _this$props6.appendToBody,
           hide = _this$props6.hide,
           boundaryElement = _this$props6.boundaryElement,
-          triggerCoordinates = _this$props6.triggerCoordinates;
+          triggerCoordinates = _this$props6.triggerCoordinates,
+          computeStyles = _this$props6.computeStyles;
       var _this$state2 = this.state,
           animationKeyframe = _this$state2.animationKeyframe,
           isOpen = _this$state2.isOpen;
@@ -14135,7 +14159,8 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
           },
           hide: {
             enabled: hide
-          }
+          },
+          computeStyles: computeStyles
         }, triggerCoordinates && {
           offset: {
             offset: "".concat(triggerCoordinates.x, "px, ").concat(triggerCoordinates.y, "px")
@@ -14156,11 +14181,15 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
           },
           hide: {
             enabled: hide
-          }
+          },
+          computeStyles: computeStyles
         }
       }, this.getPopperChildren), document.body), isOpen && appendToBody && triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal(coordinatesPopper, document.body), isOpen && !appendToBody && !triggerCoordinates && /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
-        innerRef: this.popupRef
+        innerRef: this.popupRef,
+        modifiers: {
+          computeStyles: computeStyles
+        }
       }, this.getPopperChildren));
     }
   }]);
@@ -23015,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);
     }
   };
@@ -23028,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: {
@@ -23129,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);
     }
   };
@@ -23144,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);
@@ -24289,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);
 };
 
@@ -24317,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)) {
@@ -24334,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);
@@ -24348,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);
@@ -24359,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,
@@ -24379,7 +24429,9 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
       withTooltip: true,
       tooltipPosition: tooltipPosition,
       icon: icon,
-      image: image
+      image: image,
+      disabled: disabled,
+      tooltipSuffix: tooltipSuffix
     })));
   }));
 };
@@ -24451,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) {
@@ -24474,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"
@@ -24594,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);
@@ -24615,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)) {
@@ -24643,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);
 };
@@ -24684,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,
@@ -24693,6 +24755,7 @@ var AvatarSelectionItem = function AvatarSelectionItem(props) {
     open: showTooltip
   }, /*#__PURE__*/React.createElement(AvatarSelectionOption, {
     value: avatarData,
+    disabled: disabled,
     onFocus: function onFocus() {
       setShowTooltip(true);
     },
@@ -25493,6 +25556,7 @@ var Combobox = function Combobox(props) {
       multiSelect = props.multiSelect,
       className = props.className,
       maxHeight = props.maxHeight,
+      minHeight = props.minHeight,
       width = props.width,
       value = props.value,
       placeholder = props.placeholder,
@@ -25508,7 +25572,8 @@ var Combobox = function Combobox(props) {
       clearButton = props.clearButton,
       onSearch = props.onSearch,
       onKeyDown = props.onKeyDown,
-      onKeyUp = props.onKeyUp;
+      onKeyUp = props.onKeyUp,
+      computeStyles = props.computeStyles;
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -25568,6 +25633,16 @@ var Combobox = function Combobox(props) {
 
   var inputTriggerRef = React.useRef();
   var popoverId = "DesignSystem-Combobox--Popover-".concat(uidGenerator());
+  var defaultPopoverStyle = {
+    fn: function fn(data) {
+      return _objectSpread2(_objectSpread2({}, data), {}, {
+        styles: _objectSpread2(_objectSpread2({}, data.styles), {}, {
+          position: 'fixed'
+        })
+      });
+    }
+  };
+  var popoverComputeStyle = computeStyles !== null && computeStyles !== void 0 ? computeStyles : defaultPopoverStyle;
   React.useEffect(function () {
     var _triggerRef$current;
 
@@ -25577,6 +25652,7 @@ var Combobox = function Combobox(props) {
     };
     var wrapperStyle = {
       maxHeight: maxHeight || 'var(--spacing-9)',
+      minHeight: minHeight,
       overflowY: 'auto',
       boxSizing: 'border-box'
     };
@@ -25688,7 +25764,8 @@ var Combobox = function Combobox(props) {
     triggerClass: "d-block",
     customStyle: popoverStyle,
     onToggle: onToggleHandler,
-    trigger: /*#__PURE__*/React.createElement(ComboboxTrigger, triggerProps)
+    trigger: /*#__PURE__*/React.createElement(ComboboxTrigger, triggerProps),
+    computeStyles: popoverComputeStyle
   }, /*#__PURE__*/React.createElement("div", {
     style: wrapperStyle,
     ref: listRef,
@@ -25765,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);
@@ -25908,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,
@@ -25948,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);
@@ -25966,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 = {
@@ -26007,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();
@@ -26029,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,
@@ -26046,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",
@@ -26193,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),
@@ -26242,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
       }));
     }
   }, []);
@@ -26309,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);
     }
   };
 
@@ -26352,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", {
@@ -26850,7 +26953,7 @@ Menu.defaultProps = {
   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";
 
@@ -31261,6 +31364,6 @@ AIResponse.Button = ChatButton;
 AIResponse.ActionBar = ChatActionBar;
 AIResponse.Body = ChatBody;
 
-var version = "2.36.1";
+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 };