@innovaccer/design-system 2.31.1 → 2.32.1

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1713523162818 
+   * Generated on: 1715179205608 
    *      Package: @innovaccer/design-system
-   *      Version: v2.31.1
+   *      Version: v2.32.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -2918,7 +2918,8 @@
           helpText = props.helpText,
           _j = props.id,
           id = _j === void 0 ? name + "-" + label + "-" + uidGenerator() : _j,
-          rest = __rest(props, ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"]);
+          labelRef = props.labelRef,
+          rest = __rest(props, ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id", "labelRef"]);
 
       var ref = React__namespace.useRef(null);
       React__namespace.useImperativeHandle(forwardedRef, function () {
@@ -2989,7 +2990,9 @@
         "data-test": "DesignSystem-Checkbox-Label"
       }, /*#__PURE__*/React__namespace.createElement(Text, {
         size: size === 'tiny' ? 'small' : 'regular',
-        appearance: disabled ? 'disabled' : 'default'
+        appearance: disabled ? 'disabled' : 'default',
+        className: "ellipsis--noWrap mw-100",
+        ref: labelRef
       }, label.trim())), helpText && /*#__PURE__*/React__namespace.createElement(Text, {
         "data-test": "DesignSystem-Checkbox-HelpText",
         size: "small",
@@ -4734,7 +4737,7 @@
         style: dropdownStyle,
         "data-test": "DesignSystem-Dropdown--wrapper"
       }, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "d-flex flex-column justify-content-center align-items-center",
+        className: "d-flex flex-column justify-content-center align-items-center w-100",
         "data-test": "DesignSystem-Dropdown--errorWrapper"
       }, /*#__PURE__*/React__namespace.createElement(Text, {
         className: "text-align-center mb-3",
@@ -5141,7 +5144,7 @@
         if (isDropdownListBlank) {
           if (noResultMessage) {
             return /*#__PURE__*/React__namespace.createElement("div", {
-              className: "Dropdown-wrapper",
+              className: "Dropdown-wrapper w-100",
               style: dropdownStyle,
               "data-test": "DesignSystem-Dropdown--errorWrapper"
             }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -8449,8 +8452,7 @@
         _this.state = {
           animationKeyframe: '',
           isOpen: _this.props.open || false,
-          uniqueKey: '',
-          showClosingAnimation: false
+          uniqueKey: ''
         };
         _this.hoverableDelay = 100;
         _this.offsetMapping = {
@@ -8496,6 +8498,10 @@
               zIndex: zIndex === undefined ? zIndex : zIndex + 1,
               isOpen: true
             });
+          } else if (!this.props.open && this.props.animationClass) {
+            this.setState({
+              isOpen: false
+            });
           }
         }
       };
@@ -8558,8 +8564,6 @@
       };
 
       PopperWrapper.prototype.handleMouseLeave = function () {
-        var _this = this;
-
         var on = this.props.on;
 
         if (on === 'hover') {
@@ -8572,14 +8576,7 @@
           } else {
             onToggle(false, 'mouseLeave');
             this.setState({
-              showClosingAnimation: true
-            }, function () {
-              window.setTimeout(function () {
-                _this.setState({
-                  showClosingAnimation: false,
-                  isOpen: false
-                });
-              }, 120);
+              isOpen: false
             });
           }
         }
@@ -9489,7 +9486,7 @@
       React__namespace.useEffect(function () {
         var element = elementRef ? elementRef : childrenRef;
         setIsTruncated(detectTruncation(element));
-      }, [childrenRef, elementRef]);
+      }, [childrenRef, elementRef, children]);
       var renderChildren = elementRef || ! /*#__PURE__*/React__namespace.isValidElement(children) ? children : /*#__PURE__*/React__namespace.cloneElement(children, {
         ref: childrenRef
       });
@@ -18644,6 +18641,45 @@
       }, description));
     };
 
+    var AvatarSelectionItem = function AvatarSelectionItem(props) {
+      var avatarData = props.avatarData,
+          isSelected = props.isSelected;
+
+      var _a = React__namespace.useState(false),
+          showTooltip = _a[0],
+          setShowTooltip = _a[1];
+
+      var elementRef = React__namespace.useRef(null);
+      var _b = avatarData.firstName,
+          firstName = _b === void 0 ? '' : _b,
+          _c = avatarData.lastName,
+          lastName = _c === void 0 ? '' : _c;
+      var name = firstName + " " + lastName;
+      return /*#__PURE__*/React__namespace.createElement(Tooltip, {
+        showOnTruncation: true,
+        tooltip: name,
+        elementRef: elementRef,
+        open: showTooltip
+      }, /*#__PURE__*/React__namespace.createElement(AvatarSelectionOption, {
+        value: avatarData,
+        onFocus: function onFocus() {
+          setShowTooltip(true);
+        },
+        onBlur: function onBlur() {
+          setShowTooltip(false);
+        }
+      }, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+        defaultChecked: isSelected,
+        checked: isSelected,
+        label: name,
+        size: "regular",
+        tabIndex: -1,
+        className: "ellipsis--noWrap",
+        "data-test": "DesignSystem-AvatarSelection--Checkbox",
+        labelRef: elementRef
+      })));
+    };
+
     var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
       var _a;
 
@@ -18694,7 +18730,7 @@
         setSearchList(hiddenAvatarList);
       };
 
-      var popperClassName = classNames__default["default"]((_a = {}, _a['py-3'] = !withSearch, _a['pb-3'] = withSearch, _a['SelectionAvatarGroup-popper'] = true, _a['overflow-hidden'] = true, _a));
+      var popperClassName = classNames__default["default"]((_a = {}, _a['py-3'] = !withSearch, _a['pb-3'] = withSearch, _a['SelectionAvatarGroup-popper'] = true, _a));
       return /*#__PURE__*/React__namespace.createElement("div", {
         style: {
           width: customStyle.width
@@ -18715,24 +18751,12 @@
         title: "No users found",
         description: "Try modifying your search to find what you are looking for."
       }), /*#__PURE__*/React__namespace.createElement(AvatarSelectionList, null, searchList.map(function (avatarData, index) {
-        var _a = avatarData.firstName,
-            firstName = _a === void 0 ? '' : _a,
-            _b = avatarData.lastName,
-            lastName = _b === void 0 ? '' : _b;
-        var name = firstName + " " + lastName;
         var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData);
-        return /*#__PURE__*/React__namespace.createElement(AvatarSelectionOption, {
+        return /*#__PURE__*/React__namespace.createElement(AvatarSelectionItem, {
           key: index,
-          value: avatarData
-        }, /*#__PURE__*/React__namespace.createElement(Checkbox, {
-          defaultChecked: isSelected,
-          checked: isSelected,
-          label: name,
-          size: "regular",
-          tabIndex: -1,
-          className: "ellipsis--noWrap",
-          "data-test": "DesignSystem-AvatarSelection--Checkbox"
-        }));
+          avatarData: avatarData,
+          isSelected: isSelected
+        });
       }))));
     };
 
@@ -19906,6 +19930,7 @@
           rest = __rest(props, ["triggerSize", "placeholder", "withClearButton", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel"]);
 
       var contextProp = React__namespace.useContext(SelectContext);
+      var elementRef = React__namespace.useRef(null);
       var openPopover = contextProp.openPopover,
           selectValue = contextProp.selectValue,
           setSelectValue = contextProp.setSelectValue,
@@ -19915,7 +19940,8 @@
           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);
@@ -19937,8 +19963,13 @@
       };
 
       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));
-      return /*#__PURE__*/React__namespace.createElement("button", __assign({
+      var textClass = classNames__default["default"]((_b = {}, _b['Select-trigger-text'] = true, _b));
+      return /*#__PURE__*/React__namespace.createElement(Tooltip, {
+        showOnTruncation: true,
+        showTooltip: !openPopover,
+        tooltip: value,
+        elementRef: elementRef
+      }, /*#__PURE__*/React__namespace.createElement("button", __assign({
         ref: triggerRef,
         onKeyDown: function onKeyDown(event) {
           return handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
@@ -19946,13 +19977,16 @@
         type: "button",
         className: buttonClass,
         disabled: disabled,
+        style: {
+          maxWidth: width
+        },
         tabIndex: 0,
         "aria-haspopup": "listbox",
         "aria-expanded": openPopover,
         "aria-label": "trigger",
         "data-test": "DesignSystem-Select-trigger"
       }, rest), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "Select-trigger-wrapper"
+        className: "Select-trigger-wrapper ellipsis--noWrap"
       }, inlineLabel && /*#__PURE__*/React__namespace.createElement(Text, {
         appearance: "subtle",
         className: "mr-4 white-space-nowrap"
@@ -19961,7 +19995,8 @@
         className: "d-flex align-items-center mr-4",
         name: icon,
         type: iconType
-      }), value && /*#__PURE__*/React__namespace.createElement("span", {
+      }), value && /*#__PURE__*/React__namespace.createElement(Text, {
+        ref: elementRef,
         className: textClass
       }, value)), isOptionSelected && withClearButton && /*#__PURE__*/React__namespace.createElement(Icon, {
         appearance: buttonDisabled,
@@ -19976,7 +20011,7 @@
         appearance: buttonDisabled,
         name: iconName,
         type: iconType
-      }));
+      })));
     };
 
     SelectTrigger.defaultProps = {
@@ -20082,6 +20117,8 @@
           maxHeight = props.maxHeight,
           minHeight = props.minHeight,
           value = props.value,
+          boundaryElement = props.boundaryElement,
+          appendToBody = props.appendToBody,
           _a = props.multiSelect,
           multiSelect = _a === void 0 ? false : _a,
           onOutsideClick = props.onOutsideClick,
@@ -20206,6 +20243,7 @@
         maxHeight: maxHeight,
         minHeight: minHeight,
         withSearch: withSearch,
+        width: width,
         setWithSearch: setWithSearch,
         multiSelect: multiSelect,
         listRef: listRef,
@@ -20228,6 +20266,8 @@
         className: "mt-3",
         triggerClass: "d-block",
         customStyle: popoverStyle,
+        boundaryElement: boundaryElement,
+        appendToBody: appendToBody,
         trigger: /*#__PURE__*/React__namespace.createElement(SelectTrigger, __assign({
           "aria-controls": "select-listbox"
         }, triggerOptions))
@@ -20375,7 +20415,8 @@
           className = props.className,
           onClick = props.onClick,
           disabled = props.disabled,
-          rest = __rest(props, ["children", "className", "onClick", "disabled"]);
+          onFocus = props.onFocus,
+          rest = __rest(props, ["children", "className", "onClick", "disabled", "onFocus"]);
 
       var contextProp = React__default["default"].useContext(MenuContext);
       var subMenuContextProp = React__default["default"].useContext(SubMenuContext);
@@ -20417,6 +20458,7 @@
       var onFocusHandler = function onFocusHandler(event) {
         setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(event.target);
         setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
       };
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
@@ -20703,7 +20745,7 @@
       position: 'bottom-start'
     };
 
-    var version = "2.31.1";
+    var version = "2.32.1";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;