@innovaccer/design-system 2.31.1 → 2.32.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1713523162579 
+   * Generated on: 1714551645716 
    *      Package: @innovaccer/design-system
-   *      Version: v2.31.1
+   *      Version: v2.32.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -3290,7 +3290,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
   }
 };
 
-var _excluded$P = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
+var _excluded$P = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id", "labelRef"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6;
 
@@ -3311,6 +3311,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       helpText = props.helpText,
       _props$id = props.id,
       id = _props$id === void 0 ? "".concat(name, "-").concat(label, "-").concat(uidGenerator()) : _props$id,
+      labelRef = props.labelRef,
       rest = _objectWithoutProperties(props, _excluded$P);
 
   var ref = React.useRef(null);
@@ -3383,7 +3384,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     "data-test": "DesignSystem-Checkbox-Label"
   }, /*#__PURE__*/React.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.createElement(Text, {
     "data-test": "DesignSystem-Checkbox-HelpText",
     size: "small",
@@ -5260,7 +5263,7 @@ var ErrorTemplate = function ErrorTemplate(_ref) {
     style: dropdownStyle,
     "data-test": "DesignSystem-Dropdown--wrapper"
   }, /*#__PURE__*/React.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.createElement(Text, {
     className: "text-align-center mb-3",
@@ -5676,7 +5679,7 @@ var DropdownList = function DropdownList(props) {
     if (isDropdownListBlank) {
       if (noResultMessage) {
         return /*#__PURE__*/React.createElement("div", {
-          className: "Dropdown-wrapper",
+          className: "Dropdown-wrapper w-100",
           style: dropdownStyle,
           "data-test": "DesignSystem-Dropdown--errorWrapper"
         }, /*#__PURE__*/React.createElement("div", {
@@ -5830,6 +5833,13 @@ var _excluded$L = ["triggerOptions", "selected", "tabIndex"];
 var inputRef = /*#__PURE__*/React.createRef();
 
 /**
+ *
+ * Dropdown component has been deprecated, please use following components instead:
+ *
+ * - [Select](https://mds.innovaccer.com/?path=/docs/components-select-all--all)
+ * - [Menu](https://mds.innovaccer.com/?path=/docs/components-menu-all--all)
+ * - [Combobox](https://mds.innovaccer.com/?path=/docs/components-combobox-all--all)
+ *
  * ###Note:
  * 1. Dropdown props types:
  *  - async: fetchOptions
@@ -13754,8 +13764,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       animationKeyframe: '',
       isOpen: _this.props.open || false,
-      uniqueKey: '',
-      showClosingAnimation: false
+      uniqueKey: ''
     };
     _this.hoverableDelay = 100;
     _this.offsetMapping = {
@@ -13804,6 +13813,10 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
             zIndex: zIndex === undefined ? zIndex : zIndex + 1,
             isOpen: true
           });
+        } else if (!this.props.open && this.props.animationClass) {
+          this.setState({
+            isOpen: false
+          });
         }
       }
     }
@@ -13873,8 +13886,6 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleMouseLeave",
     value: function handleMouseLeave() {
-      var _this3 = this;
-
       var on = this.props.on;
 
       if (on === 'hover') {
@@ -13887,14 +13898,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         } else {
           onToggle(false, 'mouseLeave');
           this.setState({
-            showClosingAnimation: true
-          }, function () {
-            window.setTimeout(function () {
-              _this3.setState({
-                showClosingAnimation: false,
-                isOpen: false
-              });
-            }, 120);
+            isOpen: false
           });
         }
       }
@@ -13913,7 +13917,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getTriggerElement",
     value: function getTriggerElement(ref) {
-      var _this4 = this;
+      var _this3 = this;
 
       var _this$props4 = this.props,
           trigger = _this$props4.trigger,
@@ -13928,13 +13932,13 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         onClick: function onClick(ev) {
           ev.stopPropagation();
 
-          _this4.togglePopper('onClick');
+          _this3.togglePopper('onClick');
         }
       };
       var classes = classnames('PopperWrapper-trigger', triggerClass);
 
       var shouldPopoverClose = function shouldPopoverClose(clicked) {
-        var popover = _this4.popupRef.current;
+        var popover = _this3.popupRef.current;
         var container = document.body;
         var popoverIndex = parseInt(window.getComputedStyle(popover).zIndex);
         var clickInsideLayer = false;
@@ -13960,13 +13964,13 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
       };
 
       var onOutsideClickHandler = function onOutsideClickHandler(event) {
-        var _this4$props = _this4.props,
-            open = _this4$props.open,
-            closeOnBackdropClick = _this4$props.closeOnBackdropClick;
+        var _this3$props = _this3.props,
+            open = _this3$props.open,
+            closeOnBackdropClick = _this3$props.closeOnBackdropClick;
 
         if (open && shouldPopoverClose(event.target) && closeOnBackdropClick) {
-          if (!_this4.doesEventContainsElement(event, _this4.popupRef)) {
-            _this4.togglePopper('outsideClick');
+          if (!_this3.doesEventContainsElement(event, _this3.popupRef)) {
+            _this3.togglePopper('outsideClick');
           }
         }
       };
@@ -13979,7 +13983,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getPopperChildren",
     value: function getPopperChildren(_ref) {
-      var _this5 = this;
+      var _this4 = this;
 
       var ref = _ref.ref,
           style = _ref.style,
@@ -14042,7 +14046,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         onMouseLeave: this.handleMouseLeave,
         onAnimationEnd: function onAnimationEnd() {
           if (!open) {
-            _this5.setState({
+            _this4.setState({
               isOpen: false
             });
           }
@@ -14056,7 +14060,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this5 = this;
 
       var _this$props6 = this.props,
           placement = _this$props6.placement,
@@ -14087,7 +14091,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
         innerRef: this.triggerRef
       }, function (_ref2) {
         var ref = _ref2.ref;
-        return _this6.getTriggerElement(ref);
+        return _this5.getTriggerElement(ref);
       }), isOpen && appendToBody && !triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
         innerRef: this.popupRef,
@@ -14851,7 +14855,7 @@ var Tooltip = function Tooltip(props) {
   React.useEffect(function () {
     var element = elementRef ? elementRef : childrenRef;
     setIsTruncated(detectTruncation(element));
-  }, [childrenRef, elementRef]);
+  }, [childrenRef, elementRef, children]);
   var renderChildren = elementRef || ! /*#__PURE__*/React.isValidElement(children) ? children : /*#__PURE__*/React.cloneElement(children, {
     ref: childrenRef
   });
@@ -14907,6 +14911,11 @@ Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, toolt
   showOnTruncation: false
 });
 
+/**
+ *
+ * Dialog component has been deprecated, please use [Modal](https://mds.innovaccer.com/?path=/docs/components-modal-modal-all--all) component instead.
+ *
+ */
 var Dialog = function Dialog(props) {
   var dimension = props.dimension,
       primaryButtonAppearance = props.primaryButtonAppearance,
@@ -21782,6 +21791,8 @@ var Table = /*#__PURE__*/function (_React$Component) {
 _defineProperty$1(Table, "defaultProps", defaultProps);
 
 /**
+ * List component has been deprecated, please use [Listbox](https://mds.innovaccer.com/?path=/docs/components-listbox-all--all) component instead.
+ *
  * **`List` is a pattern of `Table` with no Head Cells.**
  *
  * Please refer to stories of Table for examples. Simply replace `Table` with `List` to use it.
@@ -24425,6 +24436,46 @@ var AvatarSelectionEmptyState = function AvatarSelectionEmptyState(props) {
   }, description));
 };
 
+var AvatarSelectionItem = function AvatarSelectionItem(props) {
+  var avatarData = props.avatarData,
+      isSelected = props.isSelected;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showTooltip = _React$useState2[0],
+      setShowTooltip = _React$useState2[1];
+
+  var elementRef = React.useRef(null);
+  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);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    showOnTruncation: true,
+    tooltip: name,
+    elementRef: elementRef,
+    open: showTooltip
+  }, /*#__PURE__*/React.createElement(AvatarSelectionOption, {
+    value: avatarData,
+    onFocus: function onFocus() {
+      setShowTooltip(true);
+    },
+    onBlur: function onBlur() {
+      setShowTooltip(false);
+    }
+  }, /*#__PURE__*/React.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 _classNames;
 
@@ -24434,15 +24485,15 @@ var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
       searchComparator = props.searchComparator,
       children = props.children;
 
-  var _React$useState = React.useState(hiddenAvatarList),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      searchList = _React$useState2[0],
-      setSearchList = _React$useState2[1];
-
-  var _React$useState3 = React.useState(''),
+  var _React$useState3 = React.useState(hiddenAvatarList),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      searchValue = _React$useState4[0],
-      setSearchValue = _React$useState4[1];
+      searchList = _React$useState4[0],
+      setSearchList = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      searchValue = _React$useState6[0],
+      setSearchValue = _React$useState6[1];
 
   var contextProp = React.useContext(AvatarSelectionContext);
   var selectedItems = contextProp.selectedItems,
@@ -24477,7 +24528,7 @@ var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
     setSearchList(hiddenAvatarList);
   };
 
-  var popperClassName = classnames((_classNames = {}, _defineProperty$1(_classNames, 'py-3', !withSearch), _defineProperty$1(_classNames, 'pb-3', withSearch), _defineProperty$1(_classNames, 'SelectionAvatarGroup-popper', true), _defineProperty$1(_classNames, 'overflow-hidden', true), _classNames));
+  var popperClassName = classnames((_classNames = {}, _defineProperty$1(_classNames, 'py-3', !withSearch), _defineProperty$1(_classNames, 'pb-3', withSearch), _defineProperty$1(_classNames, 'SelectionAvatarGroup-popper', true), _classNames));
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: customStyle.width
@@ -24498,24 +24549,12 @@ var AvatarSelectionPopover = function AvatarSelectionPopover(props) {
     title: "No users found",
     description: "Try modifying your search to find what you are looking for."
   }), /*#__PURE__*/React.createElement(AvatarSelectionList, null, searchList.map(function (avatarData, index) {
-    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);
     var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(avatarData);
-    return /*#__PURE__*/React.createElement(AvatarSelectionOption, {
+    return /*#__PURE__*/React.createElement(AvatarSelectionItem, {
       key: index,
-      value: avatarData
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      defaultChecked: isSelected,
-      checked: isSelected,
-      label: name,
-      size: "regular",
-      tabIndex: -1,
-      className: "ellipsis--noWrap",
-      "data-test": "DesignSystem-AvatarSelection--Checkbox"
-    }));
+      avatarData: avatarData,
+      isSelected: isSelected
+    });
   }))));
 };
 
@@ -25704,7 +25743,7 @@ SelectOption.defaultProps = {
 var _excluded$7 = ["triggerSize", "placeholder", "withClearButton", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel"];
 
 var SelectTrigger = function SelectTrigger(props) {
-  var _classNames, _classNames2;
+  var _classNames;
 
   var triggerSize = props.triggerSize,
       placeholder = props.placeholder,
@@ -25718,6 +25757,7 @@ var SelectTrigger = function SelectTrigger(props) {
       rest = _objectWithoutProperties(props, _excluded$7);
 
   var contextProp = React.useContext(SelectContext);
+  var elementRef = React.useRef(null);
   var openPopover = contextProp.openPopover,
       selectValue = contextProp.selectValue,
       setSelectValue = contextProp.setSelectValue,
@@ -25727,7 +25767,8 @@ 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);
@@ -25749,8 +25790,13 @@ 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));
-  return /*#__PURE__*/React.createElement("button", _extends$2({
+  var textClass = classnames(_defineProperty$1({}, 'Select-trigger-text', true));
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    showOnTruncation: true,
+    showTooltip: !openPopover,
+    tooltip: value,
+    elementRef: elementRef
+  }, /*#__PURE__*/React.createElement("button", _extends$2({
     ref: triggerRef,
     onKeyDown: function onKeyDown(event) {
       return handleKeyDownTrigger(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
@@ -25758,13 +25804,16 @@ var SelectTrigger = function SelectTrigger(props) {
     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.createElement("div", {
-    className: "Select-trigger-wrapper"
+    className: "Select-trigger-wrapper ellipsis--noWrap"
   }, inlineLabel && /*#__PURE__*/React.createElement(Text, {
     appearance: "subtle",
     className: "mr-4 white-space-nowrap"
@@ -25773,7 +25822,8 @@ var SelectTrigger = function SelectTrigger(props) {
     className: "d-flex align-items-center mr-4",
     name: icon,
     type: iconType
-  }), value && /*#__PURE__*/React.createElement("span", {
+  }), value && /*#__PURE__*/React.createElement(Text, {
+    ref: elementRef,
     className: textClass
   }, value)), isOptionSelected && withClearButton && /*#__PURE__*/React.createElement(Icon, {
     appearance: buttonDisabled,
@@ -25788,7 +25838,7 @@ var SelectTrigger = function SelectTrigger(props) {
     appearance: buttonDisabled,
     name: iconName,
     type: iconType
-  }));
+  })));
 };
 
 SelectTrigger.defaultProps = {
@@ -26030,6 +26080,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
     maxHeight: maxHeight,
     minHeight: minHeight,
     withSearch: withSearch,
+    width: width,
     setWithSearch: setWithSearch,
     multiSelect: multiSelect,
     listRef: listRef,
@@ -26199,12 +26250,13 @@ var navigateSubMenu = function navigateSubMenu(isSubMenuTrigger, direction, subL
 
 var SubMenuContext = /*#__PURE__*/React.createContext({});
 
-var _excluded$2 = ["children", "className", "onClick", "disabled"];
+var _excluded$2 = ["children", "className", "onClick", "disabled", "onFocus"];
 var MenuItem = function MenuItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
       disabled = props.disabled,
+      onFocus = props.onFocus,
       rest = _objectWithoutProperties(props, _excluded$2);
 
   var contextProp = React__default.useContext(MenuContext);
@@ -26247,6 +26299,7 @@ var MenuItem = function MenuItem(props) {
   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) {
@@ -26538,6 +26591,6 @@ Menu.defaultProps = {
   position: 'bottom-start'
 };
 
-var version = "2.31.1";
+var version = "2.32.0";
 
 export { 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, ProgressBar, ProgressRing, Radio, RangeSlider, Row, 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 };