@innovaccer/design-system 2.25.1 → 2.27.0

package/dist/core/components/molecules/tooltip/Tooltip.d.ts

@@ -4,12 +4,14 @@ declare const tooltipPropsList: readonly ["trigger", "on", "open", "offset", "on
 declare type TooltipPopperProps = typeof tooltipPropsList[number];
 export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
     tooltip: string;
+    showTooltip?: boolean;
     children: PopoverProps['trigger'];
 }
 export declare const Tooltip: {
     (props: TooltipProps): JSX.Element;
     defaultProps: Record<string, any> & {
         hoverable: boolean;
+        showTooltip: boolean;
     };
 };
 export default Tooltip;

package/dist/core/components/organisms/textField/TextField.d.ts

@@ -0,0 +1,8 @@
+import { TextFieldTextareaProps } from "./TextFieldWithTextarea";
+import { TextFieldInputProps } from "./TextFieldWithInput";
+export declare type TextFieldProps = TextFieldTextareaProps & TextFieldInputProps;
+export declare const TextField: {
+    (props: TextFieldProps): JSX.Element;
+    displayName: string;
+};
+export default TextField;

package/dist/core/components/organisms/textField/TextFieldCommon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface RenderHelpTextProps {
+    helpText: string;
+    error?: boolean;
+}
+export declare const RenderHelpText: React.FC<RenderHelpTextProps>;
+interface RenderCounterProps {
+    inputText: string;
+    max: number;
+}
+export declare const RenderCounter: React.FC<RenderCounterProps>;
+export {};

package/dist/core/components/organisms/textField/TextFieldWithInput.d.ts

@@ -0,0 +1,14 @@
+import { InputProps } from "../../../index.type";
+import { BaseProps } from "../../../utils/types";
+export interface TextFieldWithInputProps extends BaseProps {
+    label?: string;
+    helpText?: string;
+}
+export declare type TextFieldInputProps = TextFieldWithInputProps & InputProps;
+export declare const TextFieldWithInput: {
+    (props: TextFieldInputProps): JSX.Element;
+    defaultProps: {
+        minWidth: number;
+    };
+};
+export default TextFieldWithInput;

package/dist/core/components/organisms/textField/TextFieldWithTextarea.d.ts

@@ -0,0 +1,11 @@
+import { BaseProps } from "../../../utils/types";
+import { TextareaProps } from "../../../index.type";
+export interface TextFieldWithTextareaProps extends BaseProps {
+    label?: string;
+    withTextarea?: boolean;
+    max?: number;
+    helpText?: string;
+}
+export declare type TextFieldTextareaProps = TextFieldWithTextareaProps & TextareaProps;
+export declare const TextFieldWithTextarea: (props: TextFieldTextareaProps) => JSX.Element;
+export default TextFieldWithTextarea;

package/dist/core/components/organisms/textField/__test__/Textarea.test.d.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom';
+declare global {
+    interface Window {
+        ResizeObserver: unknown;
+    }
+}

package/dist/core/components/organisms/textField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TextField";
+export * from "./TextField";

package/dist/core/index.d.ts

@@ -87,4 +87,5 @@ export { LinkButton } from "./components/atoms/linkButton";
 export { ActionCard } from "./components/atoms/actionCard";
 export { SelectionCard } from "./components/atoms/selectionCard";
 export { Listbox } from "./components/organisms/listbox";
+export { TextField } from "./components/organisms/textField";
 export { version } from "../package.json";

package/dist/core/index.type.d.ts

@@ -85,3 +85,4 @@ export { LinkButtonProps } from "./components/atoms/linkButton";
 export { ActionCardProps } from "./components/atoms/actionCard";
 export { SelectionCardProps } from "./components/atoms/selectionCard";
 export { ListboxProps, ListboxItemProps } from "./components/organisms/listbox";
+export { TextFieldProps } from "./components/organisms/textField";

package/dist/core/utils/navigationHelper.d.ts

@@ -15,9 +15,9 @@ export declare type ActiveMenu = ({
 } | {
     link: string;
 }) & Partial<Menu>;
-export declare const getTextAppearance: (isActive: boolean, disabled?: boolean | undefined) => "default" | "disabled" | "link";
+export declare const getTextAppearance: (isActive: boolean, disabled?: boolean | undefined) => "link" | "default" | "disabled";
 export declare const getIconAppearance: (isActive: boolean, disabled?: boolean | undefined) => "default" | "disabled" | "primary_dark";
-export declare const getPillsAppearance: (isActive: boolean) => "primary" | "secondary";
+export declare const getPillsAppearance: (isActive: boolean) => "secondary" | "primary";
 export declare const getMenu: (menus: Menu[], active: ActiveMenu) => Menu | null;
 export declare const isMenuActive: (menus: Menu[], menu: Menu, active?: ({
     name: string;

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1700506270001 
+   * Generated on: 1705328657749 
    *      Package: @innovaccer/design-system
-   *      Version: v2.25.1
+   *      Version: v2.27.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -797,7 +797,103 @@ var filterProps = function filterProps(props, propsList, include) {
   }, {});
 };
 
+var AvatarContext = /*#__PURE__*/React.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.useContext(AvatarContext);
+  var size = contextProp.size,
+      appearance = contextProp.appearance;
+  var iconSize = size === 'regular' ? 20 : 16;
+  var iconAppearance = appearance && appearanceMapper[appearance] || 'inverse';
+  return /*#__PURE__*/React.createElement(Icon, _extends$2({}, props, {
+    size: iconSize,
+    appearance: iconAppearance
+  }));
+};
+
+var sizeMapper = {
+  regular: 32,
+  tiny: 24
+};
+var AvatarImage = function AvatarImage(props) {
+  var _classNames;
+
+  var children = props.children,
+      src = props.src;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      error = _React$useState2[0],
+      setError = _React$useState2[1];
+
+  var contextProp = React.useContext(AvatarContext);
+  var size = contextProp.size,
+      appearance = contextProp.appearance,
+      firstName = contextProp.firstName,
+      lastName = contextProp.lastName;
+  var baseProps = extractBaseProps(props);
+  var initials = "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
+  var imgSize = size && sizeMapper[size];
+  var TextClassNames = classnames((_classNames = {}, _defineProperty$1(_classNames, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames, "Avatar-content--".concat(appearance), appearance), _classNames));
+  var IconClassNames = classnames(_defineProperty$1({}, "Avatar-content--".concat(appearance), appearance));
+
+  var onError = function onError() {
+    setError(true);
+  };
+
+  if (children) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+
+  if (error) {
+    if (initials) {
+      return /*#__PURE__*/React.createElement(Text, _extends$2({
+        weight: "medium",
+        appearance: 'white',
+        className: TextClassNames
+      }, baseProps), initials);
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, {
+      "data-test": "DesignSystem-Avatar--Icon",
+      name: "person",
+      size: size === 'regular' ? 20 : 16,
+      appearance: "white",
+      className: IconClassNames
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("img", _extends$2({
+    "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 _classNames, _classNames2;
 
@@ -810,32 +906,46 @@ var Avatar = function Avatar(props) {
       className = props.className,
       appearance = props.appearance;
   var baseProps = extractBaseProps(props);
-  var initials = children ? children.trim().slice(0, initialsLength) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
-  var tooltip = children || "".concat(firstName || '', " ").concat(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) : "".concat(firstName ? firstName.trim()[0] : '').concat(lastName ? lastName.trim()[0] : '');
+  var tooltip = children && typeof children === 'string' ? children : "".concat(firstName || '', " ").concat(lastName || '') || '';
   var AvatarAppearance = appearance || colors[(initials.charCodeAt(0) + (initials.charCodeAt(1) || 0)) % 8] || DefaultAppearance;
-  var classes = classnames((_classNames = {
+  var AvatarClassNames = classnames((_classNames = {
     Avatar: true
   }, _defineProperty$1(_classNames, "Avatar--".concat(size), size), _defineProperty$1(_classNames, "Avatar--".concat(AvatarAppearance), AvatarAppearance), _defineProperty$1(_classNames, 'Avatar--disabled', !initials || !withTooltip), _classNames), className);
-  var ContentClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames2, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames2));
-  var IconClass = classnames(_defineProperty$1({}, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance));
+  var TextClassNames = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, "Avatar-content--".concat(size), size), _defineProperty$1(_classNames2, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance), _classNames2));
+  var IconClassNames = classnames(_defineProperty$1({}, "Avatar-content--".concat(AvatarAppearance), AvatarAppearance));
+  var sharedProp = {
+    size: size,
+    firstName: firstName,
+    lastName: lastName,
+    appearance: AvatarAppearance
+  };
 
   var renderAvatar = function renderAvatar() {
+    if (children && typeof children !== 'string') {
+      return /*#__PURE__*/React.createElement(AvatarProvider, {
+        value: sharedProp
+      }, /*#__PURE__*/React.createElement("span", _extends$2({
+        "data-test": "DesignSystem-Avatar"
+      }, baseProps, {
+        className: AvatarClassNames
+      }), children));
+    }
+
     return /*#__PURE__*/React.createElement("span", _extends$2({
       "data-test": "DesignSystem-Avatar"
     }, baseProps, {
-      className: classes
+      className: AvatarClassNames
     }), initials && /*#__PURE__*/React.createElement(Text, {
       weight: "medium",
       appearance: 'white',
-      className: ContentClass
+      className: TextClassNames
     }, initials), !initials && /*#__PURE__*/React.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
     }));
   };
 
@@ -854,6 +964,8 @@ var Avatar = function Avatar(props) {
   return renderTooltip();
 };
 Avatar.displayName = 'Avatar';
+Avatar.Icon = AvatarIcon;
+Avatar.Image = AvatarImage;
 Avatar.defaultProps = {
   tooltipPosition: 'bottom',
   withTooltip: true,
@@ -7365,7 +7477,6 @@ var EditableDropdown = function EditableDropdown(props) {
 
   var onClose = function onClose(selected) {
     setEditing(false);
-    setShowComponent(false);
     if (onDropdownClose) onDropdownClose(selected);
   };
 
@@ -13826,7 +13937,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
 
 
         var popperAnimationStyles = {
-          animation: open ? "popper-open-".concat(uniqueKey, " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms") : "popper-close-".concat(uniqueKey, " 120ms cubic-bezier(0.2, 0, 1, 0.9) 120ms, fadeOut 120ms 120ms")
+          animation: open ? "popper-open-".concat(uniqueKey, " 120ms cubic-bezier(0, 0, 0.38, 0.9), popper-fade-in 120ms") : "popper-close-".concat(uniqueKey, " 120ms cubic-bezier(0.2, 0, 1, 0.9), fadeOut 100ms")
         };
         childrenStyles = _objectSpread2(_objectSpread2(_objectSpread2({}, childrenStyles), popperAnimationStyles), {}, {
           overflow: 'hidden'
@@ -14562,7 +14673,7 @@ var HorizontalNav = function HorizontalNav(props) {
   }), list);
 };
 
-var _excluded$c = ["children", "tooltip"];
+var _excluded$c = ["children", "tooltip", "showTooltip"];
 var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
 var positionValue = {
   bottom: 'bottom',
@@ -14577,8 +14688,14 @@ var positionValue = {
 var Tooltip = function Tooltip(props) {
   var children = props.children,
       tooltip = props.tooltip,
+      showTooltip = props.showTooltip,
       rest = _objectWithoutProperties(props, _excluded$c);
 
+  if (!showTooltip) {
+    // If showTooltip is false skip the Popover and return the children directly
+    return children;
+  }
+
   var tooltipWrapper = /*#__PURE__*/React.createElement("div", {
     className: "Tooltip"
   }, /*#__PURE__*/React.createElement(Text, {
@@ -14602,7 +14719,8 @@ var Tooltip = function Tooltip(props) {
 // }, propsList);
 
 Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
-  hoverable: false
+  hoverable: false,
+  showTooltip: true
 });
 
 var Dialog = function Dialog(props) {
@@ -22066,21 +22184,26 @@ Divider.defaultProps = {
 
 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({
+    'mt-3': true
+  }, className);
   if (!message) return null;
 
   if (error) {
     return /*#__PURE__*/React.createElement(InlineMessage, {
       size: "small",
-      className: "mt-3",
+      className: classes,
       appearance: "alert",
       description: message
     });
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mt-3"
-  }, /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
+    className: classes
+  }), /*#__PURE__*/React.createElement(Text, {
     appearance: "subtle",
     size: "small",
     weight: "medium"
@@ -23252,6 +23375,170 @@ Listbox.defaultProps = {
 };
 Listbox.Item = ListboxItem;
 
-var version = "2.25.1";
+// TextFieldCommon.tsx
+var RenderHelpText = function RenderHelpText(_ref) {
+  var helpText = _ref.helpText,
+      error = _ref.error;
+  return /*#__PURE__*/React__default.createElement(HelpText, {
+    className: "d-flex",
+    message: helpText.trim().length > 0 ? helpText : ' ',
+    error: error ? error : undefined
+  });
+};
+var RenderCounter = function RenderCounter(_ref2) {
+  var inputText = _ref2.inputText,
+      max = _ref2.max;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-3 d-flex"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    appearance: "subtle",
+    className: "pr-2",
+    color: inputText.length > max ? 'alert' : undefined,
+    size: "small",
+    weight: "medium"
+  }, inputText.length), /*#__PURE__*/React__default.createElement(Text, {
+    appearance: "subtle",
+    className: "pr-2",
+    size: "small",
+    weight: "medium"
+  }, "/"), /*#__PURE__*/React__default.createElement(Text, {
+    appearance: "subtle",
+    size: "small",
+    weight: "medium"
+  }, max));
+};
+
+var TextFieldWithTextarea = function TextFieldWithTextarea(props) {
+  var label = props.label,
+      _props$rows = props.rows,
+      rows = _props$rows === void 0 ? 3 : _props$rows,
+      _props$resize = props.resize,
+      resize = _props$resize === void 0 ? true : _props$resize,
+      required = props.required,
+      error = props.error,
+      onChange = props.onChange,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 200 : _props$max,
+      _props$helpText = props.helpText,
+      helpText = _props$helpText === void 0 ? ' ' : _props$helpText;
+  var textareaRef = React.useRef(null);
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inputText = _React$useState2[0],
+      setInputText = _React$useState2[1];
+
+  var _React$useState3 = React.useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      helptextWidth = _React$useState4[0],
+      setHelptextWidth = _React$useState4[1];
+
+  var onChangeHandler = function onChangeHandler(e) {
+    setInputText(e.target.value);
+    if (onChange) onChange(e);
+  };
+
+  var inputError = error || inputText.length > max;
+  React.useEffect(function () {
+    var textarea = textareaRef.current;
+
+    if (window.ResizeObserver) {
+      var resizeObserver = new window.ResizeObserver(function (entries) {
+        var entry = entries[0];
+        var offsetWidth = entry.target.offsetWidth;
+        setHelptextWidth(offsetWidth);
+      });
+      textarea && resizeObserver.observe(textarea);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+
+    return function () {};
+  }, []);
+  return /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(Label, {
+    required: required,
+    withInput: true
+  }, label), /*#__PURE__*/React.createElement(Textarea, _extends$2({}, props, {
+    resize: resize,
+    rows: rows,
+    onChange: onChangeHandler,
+    error: inputError,
+    ref: textareaRef
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between",
+    style: {
+      width: helptextWidth
+    }
+  }, /*#__PURE__*/React.createElement(RenderHelpText, {
+    helpText: helpText,
+    error: inputError
+  }), /*#__PURE__*/React.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,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 200 : _props$max,
+      _props$helpText = props.helpText,
+      helpText = _props$helpText === void 0 ? ' ' : _props$helpText;
+
+  var _React$useState = React.useState(value),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inputText = _React$useState2[0],
+      setInputText = _React$useState2[1];
+
+  var onChangeHandler = function onChangeHandler(event) {
+    setInputText(event.target.value);
+    if (onChange) onChange(event);
+  };
+
+  var inputError = error || inputText.length > max;
+  return /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(Label, {
+    required: required,
+    withInput: true
+  }, label), /*#__PURE__*/React.createElement(Input, _extends$2({}, props, {
+    error: inputError,
+    onChange: onChangeHandler
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between",
+    style: {
+      minWidth: minWidth
+    }
+  }, /*#__PURE__*/React.createElement(RenderHelpText, {
+    helpText: helpText,
+    error: inputError
+  }), /*#__PURE__*/React.createElement(RenderCounter, {
+    inputText: inputText,
+    max: max
+  })));
+};
+TextFieldWithInput.defaultProps = {
+  minWidth: 256
+};
+
+var TextField = function TextField(props) {
+  var withTextarea = props.withTextarea;
+
+  if (withTextarea) {
+    return /*#__PURE__*/React.createElement(TextFieldWithTextarea, props);
+  }
+
+  return /*#__PURE__*/React.createElement(TextFieldWithInput, props);
+};
+TextField.displayName = 'TextField';
+
+var version = "2.27.0";
 
-export { ActionCard, Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, 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, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };
+export { ActionCard, Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, 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, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };