@innovaccer/design-system 2.25.1 → 2.27.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1700506270234 
+   * Generated on: 1705328657988 
    *      Package: @innovaccer/design-system
-   *      Version: v2.25.1
+   *      Version: v2.27.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -440,7 +440,102 @@
       }, {});
     };
 
+    var AvatarContext = /*#__PURE__*/React__namespace.createContext({
+      size: 'regular',
+      appearance: 'secondary',
+      firstName: '',
+      lastName: ''
+    });
+    var AvatarProvider = AvatarContext.Provider;
+
+    var appearanceMapper = {
+      secondary: 'inverse',
+      primary: 'white',
+      alert: 'white',
+      accent2: 'white',
+      accent3: 'white',
+      warning: 'warning_darker',
+      success: 'success_darker',
+      accent1: 'accent1_darker',
+      accent4: 'accent4_darker'
+    };
+    var AvatarIcon = function AvatarIcon(props) {
+      var contextProp = React__namespace.useContext(AvatarContext);
+      var size = contextProp.size,
+          appearance = contextProp.appearance;
+      var iconSize = size === 'regular' ? 20 : 16;
+      var iconAppearance = appearance && appearanceMapper[appearance] || 'inverse';
+      return /*#__PURE__*/React__namespace.createElement(Icon, __assign({}, props, {
+        size: iconSize,
+        appearance: iconAppearance
+      }));
+    };
+
+    var sizeMapper = {
+      regular: 32,
+      tiny: 24
+    };
+    var AvatarImage = function AvatarImage(props) {
+      var _a, _b;
+
+      var children = props.children,
+          src = props.src;
+
+      var _c = React__namespace.useState(false),
+          error = _c[0],
+          setError = _c[1];
+
+      var contextProp = React__namespace.useContext(AvatarContext);
+      var size = contextProp.size,
+          appearance = contextProp.appearance,
+          firstName = contextProp.firstName,
+          lastName = contextProp.lastName;
+      var baseProps = extractBaseProps(props);
+      var initials = "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
+      var imgSize = size && sizeMapper[size];
+      var TextClassNames = classNames__default["default"]((_a = {}, _a["Avatar-content--" + size] = size, _a["Avatar-content--" + appearance] = appearance, _a));
+      var IconClassNames = classNames__default["default"]((_b = {}, _b["Avatar-content--" + appearance] = appearance, _b));
+
+      var onError = function onError() {
+        setError(true);
+      };
+
+      if (children) {
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, children);
+      }
+
+      if (error) {
+        if (initials) {
+          return /*#__PURE__*/React__namespace.createElement(Text, __assign({
+            weight: "medium",
+            appearance: 'white',
+            className: TextClassNames
+          }, baseProps), initials);
+        }
+
+        return /*#__PURE__*/React__namespace.createElement(Icon, {
+          "data-test": "DesignSystem-Avatar--Icon",
+          name: "person",
+          size: size === 'regular' ? 20 : 16,
+          appearance: "white",
+          className: IconClassNames
+        });
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("img", __assign({
+        "data-test": "DesignSystem-Image",
+        src: src,
+        alt: firstName
+      }, baseProps, {
+        height: imgSize,
+        width: imgSize,
+        onError: onError
+      }));
+    };
+
     var initialsLength = 2;
+    var DefaultAppearance = 'secondary';
+    var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
     var Avatar = function Avatar(props) {
       var _a, _b, _c;
 
@@ -453,32 +548,46 @@
           className = props.className,
           appearance = props.appearance;
       var baseProps = extractBaseProps(props);
-      var initials = children ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
-      var tooltip = children || (firstName || '') + " " + (lastName || '') || '';
-      var DefaultAppearance = 'secondary';
-      var colors = ['accent4', 'primary', 'accent3', 'alert', 'accent2', 'warning', 'accent1', 'success'];
+      var initials = children && typeof children === 'string' ? children.trim().slice(0, initialsLength) : "" + (firstName ? firstName.trim()[0] : '') + (lastName ? lastName.trim()[0] : '');
+      var tooltip = children && typeof children === 'string' ? children : (firstName || '') + " " + (lastName || '') || '';
       var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
-      var classes = classNames__default["default"]((_a = {
+      var AvatarClassNames = classNames__default["default"]((_a = {
         Avatar: true
       }, _a["Avatar--" + size] = size, _a["Avatar--" + AvatarAppearance] = AvatarAppearance, _a['Avatar--disabled'] = !initials || !withTooltip, _a), className);
-      var ContentClass = classNames__default["default"]((_b = {}, _b["Avatar-content--" + size] = size, _b["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _b));
-      var IconClass = classNames__default["default"]((_c = {}, _c["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _c));
+      var TextClassNames = classNames__default["default"]((_b = {}, _b["Avatar-content--" + size] = size, _b["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _b));
+      var IconClassNames = classNames__default["default"]((_c = {}, _c["Avatar-content--" + AvatarAppearance] = AvatarAppearance, _c));
+      var sharedProp = {
+        size: size,
+        firstName: firstName,
+        lastName: lastName,
+        appearance: AvatarAppearance
+      };
 
       var renderAvatar = function renderAvatar() {
+        if (children && typeof children !== 'string') {
+          return /*#__PURE__*/React__namespace.createElement(AvatarProvider, {
+            value: sharedProp
+          }, /*#__PURE__*/React__namespace.createElement("span", __assign({
+            "data-test": "DesignSystem-Avatar"
+          }, baseProps, {
+            className: AvatarClassNames
+          }), children));
+        }
+
         return /*#__PURE__*/React__namespace.createElement("span", __assign({
           "data-test": "DesignSystem-Avatar"
         }, baseProps, {
-          className: classes
+          className: AvatarClassNames
         }), initials && /*#__PURE__*/React__namespace.createElement(Text, {
           weight: "medium",
           appearance: 'white',
-          className: ContentClass
+          className: TextClassNames
         }, initials), !initials && /*#__PURE__*/React__namespace.createElement(Icon, {
           "data-test": "DesignSystem-Avatar--Icon",
           name: "person",
-          size: size === 'regular' ? 16 : 12,
+          size: size === 'regular' ? 20 : 16,
           appearance: 'white',
-          className: IconClass
+          className: IconClassNames
         }));
       };
 
@@ -497,6 +606,8 @@
       return renderTooltip();
     };
     Avatar.displayName = 'Avatar';
+    Avatar.Icon = AvatarIcon;
+    Avatar.Image = AvatarImage;
     Avatar.defaultProps = {
       tooltipPosition: 'bottom',
       withTooltip: true,
@@ -6740,7 +6851,6 @@
 
       var onClose = function onClose(selected) {
         setEditing(false);
-        setShowComponent(false);
         if (onDropdownClose) onDropdownClose(selected);
       };
 
@@ -8508,7 +8618,7 @@
           }
 
           var popperAnimationStyles = {
-            animation: open ? "popper-open-" + uniqueKey + " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms" : "popper-close-" + uniqueKey + " 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms"
+            animation: open ? "popper-open-" + uniqueKey + " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms" : "popper-close-" + uniqueKey + " 120ms cubic-bezier(0.2, 0, 1, 0.9), fadeOut 100ms"
           };
           childrenStyles = __assign(__assign(__assign({}, childrenStyles), popperAnimationStyles), {
             overflow: 'hidden'
@@ -9226,7 +9336,12 @@
     var Tooltip = function Tooltip(props) {
       var children = props.children,
           tooltip = props.tooltip,
-          rest = __rest(props, ["children", "tooltip"]);
+          showTooltip = props.showTooltip,
+          rest = __rest(props, ["children", "tooltip", "showTooltip"]);
+
+      if (!showTooltip) {
+        return children;
+      }
 
       var tooltipWrapper = /*#__PURE__*/React__namespace.createElement("div", {
         className: "Tooltip"
@@ -9247,7 +9362,8 @@
       }), tooltipWrapper);
     };
     Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
-      hoverable: false
+      hoverable: false,
+      showTooltip: true
     });
 
     var Dialog = function Dialog(props) {
@@ -16356,21 +16472,26 @@
 
     var HelpText = function HelpText(props) {
       var error = props.error,
-          message = props.message;
+          message = props.message,
+          className = props.className;
+      var baseProps = extractBaseProps(props);
+      var classes = classNames__default["default"]({
+        'mt-3': true
+      }, className);
       if (!message) return null;
 
       if (error) {
         return /*#__PURE__*/React__namespace.createElement(InlineMessage, {
           size: "small",
-          className: "mt-3",
+          className: classes,
           appearance: "alert",
           description: message
         });
       }
 
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "mt-3"
-      }, /*#__PURE__*/React__namespace.createElement(Text, {
+      return /*#__PURE__*/React__namespace.createElement("div", __assign({}, baseProps, {
+        className: classes
+      }), /*#__PURE__*/React__namespace.createElement(Text, {
         appearance: "subtle",
         size: "small",
         weight: "medium"
@@ -17500,7 +17621,167 @@
     };
     Listbox.Item = ListboxItem;
 
-    var version = "2.25.1";
+    var RenderHelpText = function RenderHelpText(_a) {
+      var helpText = _a.helpText,
+          error = _a.error;
+      return /*#__PURE__*/React__default["default"].createElement(HelpText, {
+        className: "d-flex",
+        message: helpText.trim().length > 0 ? helpText : ' ',
+        error: error ? error : undefined
+      });
+    };
+    var RenderCounter = function RenderCounter(_a) {
+      var inputText = _a.inputText,
+          max = _a.max;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "mt-3 d-flex"
+      }, /*#__PURE__*/React__default["default"].createElement(Text, {
+        appearance: "subtle",
+        className: "pr-2",
+        color: inputText.length > max ? 'alert' : undefined,
+        size: "small",
+        weight: "medium"
+      }, inputText.length), /*#__PURE__*/React__default["default"].createElement(Text, {
+        appearance: "subtle",
+        className: "pr-2",
+        size: "small",
+        weight: "medium"
+      }, "/"), /*#__PURE__*/React__default["default"].createElement(Text, {
+        appearance: "subtle",
+        size: "small",
+        weight: "medium"
+      }, max));
+    };
+
+    var TextFieldWithTextarea = function TextFieldWithTextarea(props) {
+      var label = props.label,
+          _a = props.rows,
+          rows = _a === void 0 ? 3 : _a,
+          _b = props.resize,
+          resize = _b === void 0 ? true : _b,
+          required = props.required,
+          error = props.error,
+          onChange = props.onChange,
+          _c = props.value,
+          value = _c === void 0 ? '' : _c,
+          _d = props.max,
+          max = _d === void 0 ? 200 : _d,
+          _e = props.helpText,
+          helpText = _e === void 0 ? ' ' : _e;
+      var textareaRef = React__namespace.useRef(null);
+
+      var _f = React__namespace.useState(value),
+          inputText = _f[0],
+          setInputText = _f[1];
+
+      var _g = React__namespace.useState(0),
+          helptextWidth = _g[0],
+          setHelptextWidth = _g[1];
+
+      var onChangeHandler = function onChangeHandler(e) {
+        setInputText(e.target.value);
+        if (onChange) onChange(e);
+      };
+
+      var inputError = error || inputText.length > max;
+      React__namespace.useEffect(function () {
+        var textarea = textareaRef.current;
+
+        if (window.ResizeObserver) {
+          var resizeObserver_1 = new window.ResizeObserver(function (entries) {
+            var entry = entries[0];
+            var offsetWidth = entry.target.offsetWidth;
+            setHelptextWidth(offsetWidth);
+          });
+          textarea && resizeObserver_1.observe(textarea);
+          return function () {
+            resizeObserver_1.disconnect();
+          };
+        }
+
+        return function () {};
+      }, []);
+      return /*#__PURE__*/React__namespace.createElement("div", null, label && /*#__PURE__*/React__namespace.createElement(Label, {
+        required: required,
+        withInput: true
+      }, label), /*#__PURE__*/React__namespace.createElement(Textarea, __assign({}, props, {
+        resize: resize,
+        rows: rows,
+        onChange: onChangeHandler,
+        error: inputError,
+        ref: textareaRef
+      })), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex justify-content-between",
+        style: {
+          width: helptextWidth
+        }
+      }, /*#__PURE__*/React__namespace.createElement(RenderHelpText, {
+        helpText: helpText,
+        error: inputError
+      }), /*#__PURE__*/React__namespace.createElement(RenderCounter, {
+        inputText: inputText,
+        max: max
+      })));
+    };
+
+    var TextFieldWithInput = function TextFieldWithInput(props) {
+      var label = props.label,
+          minWidth = props.minWidth,
+          required = props.required,
+          error = props.error,
+          onChange = props.onChange,
+          _a = props.value,
+          value = _a === void 0 ? '' : _a,
+          _b = props.max,
+          max = _b === void 0 ? 200 : _b,
+          _c = props.helpText,
+          helpText = _c === void 0 ? ' ' : _c;
+
+      var _d = React__namespace.useState(value),
+          inputText = _d[0],
+          setInputText = _d[1];
+
+      var onChangeHandler = function onChangeHandler(event) {
+        setInputText(event.target.value);
+        if (onChange) onChange(event);
+      };
+
+      var inputError = error || inputText.length > max;
+      return /*#__PURE__*/React__namespace.createElement("div", null, label && /*#__PURE__*/React__namespace.createElement(Label, {
+        required: required,
+        withInput: true
+      }, label), /*#__PURE__*/React__namespace.createElement(Input, __assign({}, props, {
+        error: inputError,
+        onChange: onChangeHandler
+      })), /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex justify-content-between",
+        style: {
+          minWidth: minWidth
+        }
+      }, /*#__PURE__*/React__namespace.createElement(RenderHelpText, {
+        helpText: helpText,
+        error: inputError
+      }), /*#__PURE__*/React__namespace.createElement(RenderCounter, {
+        inputText: inputText,
+        max: max
+      })));
+    };
+    TextFieldWithInput.defaultProps = {
+      minWidth: 256
+    };
+
+    var TextField = function TextField(props) {
+      var withTextarea = props.withTextarea;
+
+      if (withTextarea) {
+        return /*#__PURE__*/React__namespace.createElement(TextFieldWithTextarea, __assign({}, props));
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(TextFieldWithInput, __assign({}, props));
+    };
+    TextField.displayName = 'TextField';
+
+    var version = "2.27.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
@@ -17590,6 +17871,7 @@
     exports.Tabs = Tabs;
     exports.TabsWrapper = TabsWrapper;
     exports.Text = Text;
+    exports.TextField = TextField;
     exports.Textarea = Textarea;
     exports.TimePicker = TimePicker;
     exports.Toast = Toast;