@innovaccer/design-system 2.33.0 → 2.35.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1715707010250 
+   * Generated on: 1716895234995 
    *      Package: @innovaccer/design-system
-   *      Version: v2.33.0
+   *      Version: v2.35.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -6481,12 +6481,21 @@
           end: ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.selectionEnd) || 0
         };
       }, [ref.current]);
+      var setSelectionRange_compatible_types = ['text', 'password', 'tel', 'url'];
       var setSelectionPos = React__namespace.useCallback(function (pos) {
         if (ref.current) {
           var el = ref.current;
           var start = Math.min(pos.start, pos.end);
           var end = Math.max(pos.start, pos.end);
-          el.setSelectionRange(start, end);
+
+          if (setSelectionRange_compatible_types.includes(el.type)) {
+            el.setSelectionRange(start, end);
+          } else {
+            var el_type = el.type;
+            el.type = 'text';
+            el.setSelectionRange(start, end);
+            el.type = el_type;
+          }
         }
       }, [ref.current]);
       var setCursorPosition = React__namespace.useCallback(function (val) {
@@ -10675,56 +10684,235 @@
     };
     ChatMessage.displayName = 'ChatMessage';
 
+    var EmptyStateContext = /*#__PURE__*/React__namespace.createContext({});
+
+    var imageHeight$1 = {
+      standard: '200px',
+      compressed: '150px',
+      tight: '100px',
+      large: '200px',
+      small: '200px'
+    };
+
+    var EmptyStateImage = function EmptyStateImage(props) {
+      var _a, _b;
+
+      var children = props.children,
+          maxHeight = props.maxHeight,
+          height = props.height,
+          minHeight = props.minHeight,
+          src = props.src,
+          alt = props.alt,
+          className = props.className,
+          rest = __rest(props, ["children", "maxHeight", "height", "minHeight", "src", "alt", "className"]);
+
+      var contextProp = React__default["default"].useContext(EmptyStateContext);
+      var imageClasses = classNames__default["default"]((_a = {}, _a['EmptyState-image'] = true, _a), className);
+      var imageWrapperClasses = classNames__default["default"]((_b = {}, _b['d-flex'] = true, _b['justify-content-center'] = true, _b), className);
+      var _c = contextProp.size,
+          size = _c === void 0 ? 'standard' : _c;
+      var sizeStyle = {
+        maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : imageHeight$1[size],
+        height: height,
+        minHeight: minHeight
+      };
+
+      if (children) {
+        return /*#__PURE__*/React__default["default"].createElement("div", __assign({}, rest, {
+          className: imageWrapperClasses,
+          style: __assign({}, sizeStyle)
+        }), children);
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, src && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("img", __assign({
+        className: imageClasses,
+        src: src,
+        alt: alt,
+        style: __assign({}, sizeStyle),
+        "data-test": "DesignSystem-EmptyState--Img"
+      }, rest))));
+    };
+
+    var EmptyStateTitle = function EmptyStateTitle(props) {
+      var _a;
+
+      var children = props.children,
+          className = props.className,
+          rest = __rest(props, ["children", "className"]);
+
+      var contextProp = React__default["default"].useContext(EmptyStateContext);
+      var _b = contextProp.size,
+          size = _b === void 0 ? 'standard' : _b;
+      var headingClass = classNames__default["default"]((_a = {}, _a["EmptyState-text"] = true, _a["EmptyState-title--" + size] = true, _a), className);
+
+      if (size === 'standard') {
+        return /*#__PURE__*/React__default["default"].createElement(Heading, __assign({
+          "data-test": "DesignSystem-EmptyState--Heading",
+          className: headingClass
+        }, rest), children);
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(Text, __assign({
+        "data-test": "DesignSystem-EmptyState--Heading",
+        className: headingClass,
+        weight: "medium",
+        size: textSize[size]
+      }, rest), children);
+    };
+
+    var EmptyStateDescription = function EmptyStateDescription(props) {
+      var _a;
+
+      var children = props.children,
+          className = props.className,
+          rest = __rest(props, ["children", "className"]);
+
+      var contextProp = React__default["default"].useContext(EmptyStateContext);
+      var _b = contextProp.size,
+          size = _b === void 0 ? 'standard' : _b;
+      var textSize = {
+        standard: 'regular',
+        compressed: 'regular',
+        tight: 'small'
+      };
+      var descriptionClasses = classNames__default["default"]((_a = {}, _a["EmptyState-text"] = true, _a['mt-3'] = true, _a), className);
+      return /*#__PURE__*/React__default["default"].createElement(Text, __assign({
+        size: textSize[size],
+        appearance: "subtle",
+        className: descriptionClasses,
+        "data-test": "DesignSystem-EmptyState--Text"
+      }, rest), children);
+    };
+
+    var EmptyStateActions = function EmptyStateActions(props) {
+      var _a;
+
+      var children = props.children,
+          className = props.className,
+          rest = __rest(props, ["children", "className"]);
+
+      var contextProp = React__default["default"].useContext(EmptyStateContext);
+      var _b = contextProp.size,
+          size = _b === void 0 ? 'standard' : _b;
+      var actionWrapperClasses = classNames__default["default"]((_a = {}, _a["EmptyState-actions--" + size] = true, _a['EmptyState-actions'] = true, _a), className);
+      return /*#__PURE__*/React__default["default"].createElement("div", __assign({
+        "data-test": "DesignSystem-EmptyState--Actions",
+        className: actionWrapperClasses
+      }, rest), children);
+    };
+
     var imageHeight = {
       large: '256px',
-      small: '128px'
+      small: '128px',
+      standard: '256px',
+      compressed: '256px',
+      tight: '256px'
+    };
+    var templateWidth = {
+      standard: '480px',
+      compressed: '400px',
+      tight: '320px',
+      large: '480px',
+      small: '480px'
     };
     var HeadingSize = {
       large: 'l',
-      small: 'm'
+      small: 'm',
+      standard: 'l',
+      compressed: 'l',
+      tight: 'l'
     };
     var textSize = {
       large: 'large',
-      small: 'regular'
+      small: 'regular',
+      standard: 'large',
+      compressed: 'large',
+      tight: 'regular'
     };
     var EmptyState = function EmptyState(props) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
 
       var imageSrc = props.imageSrc,
           title = props.title,
           description = props.description,
-          size = props.size,
+          _e = props.size,
+          size = _e === void 0 ? 'standard' : _e,
           children = props.children,
           className = props.className,
-          image = props.image;
+          image = props.image,
+          maxWidth = props.maxWidth,
+          minWidth = props.minWidth,
+          width = props.width;
       var baseProps = extractBaseProps(props);
-      var WrapperClass = classNames__default["default"]((_a = {}, _a['EmptyState'] = true, _a), className);
-      var HeadingClass = classNames__default["default"]((_b = {}, _b['EmptyState-title'] = true, _b["EmptyState-title--" + size] = true, _b));
-      var TextClass = classNames__default["default"]((_c = {}, _c['EmptyState-description'] = true, _c["EmptyState-description--" + size] = children !== undefined, _c));
-      return /*#__PURE__*/React__namespace.createElement("div", __assign({
-        "data-test": "DesignSystem-EmptyState"
-      }, baseProps, {
-        className: WrapperClass
-      }), image && /*#__PURE__*/React__namespace.createElement("div", {
-        style: {
-          height: imageHeight[size]
+      var templateSize = 'standard';
+
+      var isValidSize = function isValidSize(size) {
+        return size === 'large' || size === 'small';
+      };
+
+      if (title || description) {
+        templateSize = isValidSize(size) ? size : 'large';
+      } else {
+        templateSize = isValidSize(size) ? 'standard' : size;
+      }
+
+      var wrapperClasses = classNames__default["default"]((_a = {}, _a['EmptyState'] = true, _a), className);
+      var emptyStateWrapper = classNames__default["default"]((_b = {}, _b['EmptyState-Wrapper'] = true, _b), className);
+      var headingClasses = classNames__default["default"]((_c = {}, _c['EmptyState-title'] = true, _c["EmptyState-title--" + templateSize] = true, _c));
+      var textClasses = classNames__default["default"]((_d = {}, _d['EmptyState-description'] = true, _d["EmptyState-description--" + templateSize] = children !== undefined, _d));
+
+      if (title || description) {
+        return /*#__PURE__*/React__namespace.createElement("div", __assign({
+          "data-test": "DesignSystem-EmptyState"
+        }, baseProps, {
+          className: wrapperClasses
+        }), image && /*#__PURE__*/React__namespace.createElement("div", {
+          style: {
+            height: imageHeight[templateSize]
+          }
+        }, image), imageSrc && !image && /*#__PURE__*/React__namespace.createElement("img", {
+          src: imageSrc,
+          height: imageHeight[templateSize],
+          "data-test": "DesignSystem-EmptyState--Img"
+        }), title && /*#__PURE__*/React__namespace.createElement(Heading, {
+          "data-test": "DesignSystem-EmptyState--Heading",
+          size: HeadingSize[templateSize],
+          className: headingClasses
+        }, title), description && /*#__PURE__*/React__namespace.createElement(Text, {
+          size: textSize[templateSize],
+          className: textClasses,
+          appearance: "subtle",
+          "data-test": "DesignSystem-EmptyState--Text"
+        }, description), children && children);
+      }
+
+      var templateMaxWidth = maxWidth ? maxWidth : templateWidth[templateSize];
+      var customStyle = {
+        maxWidth: templateMaxWidth,
+        minWidth: minWidth,
+        width: width
+      };
+      return /*#__PURE__*/React__namespace.createElement(EmptyStateContext.Provider, {
+        value: {
+          size: templateSize,
+          maxWidth: templateMaxWidth
         }
-      }, image), imageSrc && !image && /*#__PURE__*/React__namespace.createElement("img", {
-        src: imageSrc,
-        height: imageHeight[size],
-        "data-test": "DesignSystem-EmptyState--Img"
-      }), /*#__PURE__*/React__namespace.createElement(Heading, {
-        "data-test": "DesignSystem-EmptyState--Heading",
-        size: HeadingSize[size],
-        className: HeadingClass
-      }, title), /*#__PURE__*/React__namespace.createElement(Text, {
-        size: textSize[size],
-        className: TextClass,
-        appearance: "subtle",
-        "data-test": "DesignSystem-EmptyState--Text"
-      }, description), children && children);
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex justify-content-center align-item-center w-100 h-100"
+      }, /*#__PURE__*/React__namespace.createElement("div", __assign({
+        "data-test": "DesignSystem-EmptyState--Wrapper",
+        className: emptyStateWrapper,
+        style: customStyle
+      }, baseProps), children)));
     };
     EmptyState.displayName = 'EmptyState';
+    EmptyState.Title = EmptyStateTitle;
+    EmptyState.Description = EmptyStateDescription;
+    EmptyState.Image = EmptyStateImage;
+    EmptyState.Actions = EmptyStateActions;
+    EmptyState.defaultProps = {
+      size: 'standard'
+    };
 
     var ModalDescription = function ModalDescription(props) {
       var title = props.title,
@@ -19124,6 +19312,7 @@
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
         handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+        props.onKeyDown && props.onKeyDown(event);
       };
 
       return /*#__PURE__*/React__namespace.createElement(Input, __assign({}, props, {
@@ -19380,6 +19569,7 @@
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
         handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+        props.onKeyDown && props.onKeyDown(event);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(MultiSelectTrigger, __assign({}, props, {
@@ -19445,7 +19635,9 @@
           size = props.size,
           chipValue = props.chipValue,
           clearButton = props.clearButton,
-          onSearch = props.onSearch;
+          onSearch = props.onSearch,
+          onKeyDown = props.onKeyDown,
+          onKeyUp = props.onKeyUp;
 
       var _a = React__namespace.useState(),
           popoverStyle = _a[0],
@@ -19577,7 +19769,9 @@
         size: size,
         multiSelect: multiSelect,
         chipValue: chipValue,
-        clearButton: clearButton
+        clearButton: clearButton,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp
       };
       var contextProp = {
         inputValue: inputValue,
@@ -19931,8 +20125,7 @@
           setOpenPopover = contextProp.setOpenPopover,
           setHighlightFirstItem = contextProp.setHighlightFirstItem,
           setHighlightLastItem = contextProp.setHighlightLastItem,
-          triggerRef = contextProp.triggerRef,
-          width = contextProp.width;
+          triggerRef = contextProp.triggerRef;
       var buttonDisabled = disabled ? 'disabled' : 'default';
       var trimmedPlaceholder = placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim();
       var displayValue = computeValue(multiSelect, selectValue, setLabel);
@@ -19959,7 +20152,9 @@
         showOnTruncation: true,
         showTooltip: !openPopover,
         tooltip: value,
-        elementRef: elementRef
+        elementRef: elementRef,
+        className: "w-100",
+        triggerClass: "w-100"
       }, /*#__PURE__*/React__namespace.createElement("button", __assign({
         ref: triggerRef,
         onKeyDown: function onKeyDown(event) {
@@ -19968,9 +20163,6 @@
         type: "button",
         className: buttonClass,
         disabled: disabled,
-        style: {
-          maxWidth: width
-        },
         tabIndex: 0,
         "aria-haspopup": "listbox",
         "aria-expanded": openPopover,
@@ -20149,12 +20341,24 @@
           highlightLastItem = _h[0],
           setHighlightLastItem = _h[1];
 
+      var _j = React__namespace.useState({
+        width: popoverWidth || width
+      }),
+          popoverStyle = _j[0],
+          setPopoverStyle = _j[1];
+
       var triggerStyle = {
         width: width
       };
-      var popoverStyle = {
-        width: popoverWidth ? popoverWidth : width
-      };
+      React__namespace.useEffect(function () {
+        var _a, _b;
+
+        if (!popoverWidth && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+          setPopoverStyle(__assign(__assign({}, popoverStyle), {
+            width: (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth
+          }));
+        }
+      }, []);
       React__namespace.useImperativeHandle(ref, function () {
         return {
           setOpen: function setOpen(open) {
@@ -20736,7 +20940,7 @@
       position: 'bottom-start'
     };
 
-    var version = "2.33.0";
+    var version = "2.35.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;