@devtron-labs/devtron-fe-common-lib 0.0.6-beta-23 → 0.0.6-beta-25

package/dist/Common/CustomTagSelector/TagDetails.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagDetailType } from '../Types';
-export default function TagDetails({ index, tagData, setTagData, removeTag, tabIndex }: TagDetailType): JSX.Element;
+export default function TagDetails({ index, tagData, setTagData, removeTag, tabIndex, suggestedTagsOptions, }: TagDetailType): JSX.Element;

package/dist/Common/CustomTagSelector/TagLabelSelect.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagLabelSelectType } from '../Types';
-export declare const TagLabelSelect: ({ isCreateApp, labelTags, setLabelTags, tabIndex }: TagLabelSelectType) => JSX.Element;
+export declare const TagLabelSelect: ({ isCreateApp, labelTags, setLabelTags, tabIndex, suggestedTagsOptions, }: TagLabelSelectType) => JSX.Element;

package/dist/Common/CustomTagSelector/index.d.ts

@@ -1,2 +1,3 @@
 export * from './TagLabelSelect';
 export * from './TagLabelValueSelector';
+export * from './ResizableTagTextArea';

package/dist/Common/Types.d.ts

@@ -20,11 +20,12 @@ export declare enum TippyTheme {
     white = "white"
 }
 export interface TagType {
+    id?: number;
     key: string;
     value?: string;
     description?: string;
     propagate: boolean;
-    mandatoryProjectIdsCsv?: string[];
+    mandatoryProjectIdsCsv?: string;
     isInvalidKey?: boolean;
     isInvalidValue?: boolean;
 }
@@ -37,13 +38,16 @@ export interface TagLabelSelectType {
     labelTags: TagType[];
     setLabelTags: (tagList: TagType[]) => void;
     tabIndex?: number;
+    selectedProjectId?: number;
+    suggestedTagsOptions?: OptionType[];
 }
 export interface TagDetailType {
     index: number;
     tagData: TagType;
     setTagData: (index: number, tagData: TagType) => void;
-    removeTag: (index: number) => void;
+    removeTag?: (index: number) => void;
     tabIndex?: number;
+    suggestedTagsOptions?: OptionType[];
 }
 export interface TagLabelValueSelectorType {
     selectedTagIndex: number;

package/dist/Common/index.d.ts

@@ -24,3 +24,4 @@ export * from './MultiSelectCustomization';
 export { default as InfoColourBar } from './InfoColorBar/InfoColourbar';
 export * from './Common.service';
 export * from './Checkbox';
+export { default as EmptyState } from './EmptyState/EmptyState';

package/dist/index.js

@@ -8420,7 +8420,7 @@ function TippyCustomized(props) {
     };
     var getTippyContent = function () {
         var Icon = props.Icon, iconPath = props.iconPath, iconClass = props.iconClass, iconSize = props.iconSize, onImageLoadError = props.onImageLoadError, heading = props.heading, infoTextHeading = props.infoTextHeading, infoText = props.infoText, showCloseButton = props.showCloseButton, additionalContent = props.additionalContent, documentationLink = props.documentationLink, documentationLinkText = props.documentationLinkText;
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "dc__word-break dc__hyphens-auto flex left ".concat(isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0') }, { children: [iconPath ? (jsxRuntime.jsx("img", { className: "icon-dim-".concat(iconSize || 20, " mr-6 ").concat(iconClass || ''), src: iconPath, alt: heading, onError: onImageLoadError })) : (Icon && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-".concat(iconSize || 20, " mr-6") }, { children: jsxRuntime.jsx(Icon, { className: "icon-dim-".concat(iconSize || 20, " ").concat(iconClass || '') }) })))), heading && jsxRuntime.jsx("span", __assign({ className: "fs-14 fw-6 lh-20 ".concat(showCloseButton ? 'mr-6' : '') }, { children: heading })), showCloseButton && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 ml-auto" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-16 cursor ".concat(isWhiteTheme ? 'fcn-9' : 'fcn-0'), onClick: closeTippy }) })))] })), infoTextHeading && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ".concat(isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20') }, { children: infoTextHeading }))), infoText && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ".concat(isWhiteTheme
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "dc__word-break dc__hyphens-auto flex left ".concat(isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0 top') }, { children: [iconPath ? (jsxRuntime.jsx("img", { className: "icon-dim-".concat(iconSize || 20, " mr-6 ").concat(iconClass || ''), src: iconPath, alt: heading, onError: onImageLoadError })) : (Icon && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-".concat(iconSize || 20, " mr-6") }, { children: jsxRuntime.jsx(Icon, { className: "icon-dim-".concat(iconSize || 20, " ").concat(iconClass || '') }) })))), heading && jsxRuntime.jsx("span", __assign({ className: "fs-14 fw-6 lh-20 ".concat(showCloseButton ? 'mr-6' : '') }, { children: heading })), showCloseButton && (jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 ml-auto" }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-16 cursor ".concat(isWhiteTheme ? 'fcn-9' : 'fcn-0'), onClick: closeTippy }) })))] })), infoTextHeading && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-14 fw-6 lh-20 ".concat(isWhiteTheme ? 'pl-12 pr-12' : 'pl-20 pr-20') }, { children: infoTextHeading }))), infoText && (jsxRuntime.jsx("div", __assign({ className: "dc__word-break dc__hyphens-auto fs-13 fw-4 lh-20 ".concat(isWhiteTheme
                         ? 'p-12'
                         : "pl-20 pr-20 pt-4 ".concat(additionalContent && documentationLink ? 'pb-12' : 'pb-20')) }, { children: infoText }))), additionalContent, documentationLink && (jsxRuntime.jsx("div", __assign({ className: "pl-12 pb-12" }, { children: jsxRuntime.jsx("a", __assign({ href: documentationLink, target: "_blank", rel: "noreferrer noopener", className: "fs-13 cb-5", onClick: closeTippy }, { children: documentationLinkText || 'Learn more' })) })))] }));
     };
@@ -8602,11 +8602,11 @@ function ResizableTagTextArea(_a) {
     var handleOnBlur = function (event) {
         refVar.current.style.height = 'auto';
         dependentRef.current.style.height = 'auto';
-        onBlur(event);
+        onBlur && onBlur(event);
     };
     var handleOnFocus = function (event) {
         reInitHeight();
-        onFocus(event);
+        onFocus && onFocus(event);
     };
     return (jsxRuntime.jsx("textarea", { rows: 1, ref: refVar, value: text, placeholder: placeholder, className: "".concat(className || '', " lh-20"), style: { resize: 'none' }, onChange: handleChange, onBlur: handleOnBlur, onFocus: handleOnFocus, tabIndex: tabIndex }));
 }
@@ -8625,10 +8625,10 @@ var TagLabelValueSelector = function (_a) {
         }, 300);
     };
     var handleOnBlur = function (e) {
-        setActiveElement('');
         if (!e.relatedTarget ||
             !e.relatedTarget.classList.value ||
             !e.relatedTarget.classList.value.includes("tag-".concat(selectedTagIndex, "-class"))) {
+            setActiveElement('');
             var _tagData = __assign({}, tagData);
             _tagData[tagInputType] = selectedValue;
             if (tagInputType === exports.KEY_VALUE.KEY) {
@@ -8675,9 +8675,7 @@ var TagLabelValueSelector = function (_a) {
         if (tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.length) {
             var filteredTags = tagOptions.filter(function (tag) { return tag.value.indexOf(selectedValue) >= 0; });
             if (filteredTags.length) {
-                return (jsxRuntime.jsx("div", __assign({ className: "p-8" }, { children: tagOptions
-                        .filter(function (tag) { return tag.value.indexOf(selectedValue) >= 0; })
-                        .map(function (tag, index) { return (jsxRuntime.jsx("div", __assign({ "data-key": "".concat(tag.value, "-").concat(index), className: "cursor", onClick: onSelectValue }, { children: tag.label }))); }) })));
+                return (jsxRuntime.jsx("div", __assign({ className: "p-8" }, { children: filteredTags.map(function (tag, index) { return (jsxRuntime.jsx("div", __assign({ "data-key": tag.label, className: "cursor", onClick: onSelectValue }, { children: tag.label }), "".concat(tag.value, "-").concat(index))); }) })));
             }
         }
         return renderValidationsSuggestions();
@@ -8690,7 +8688,7 @@ var TagLabelValueSelector = function (_a) {
 };
 
 function TagDetails(_a) {
-    var index = _a.index, tagData = _a.tagData, setTagData = _a.setTagData, removeTag = _a.removeTag, _b = _a.tabIndex, tabIndex = _b === void 0 ? 1 : _b;
+    var index = _a.index, tagData = _a.tagData, setTagData = _a.setTagData, removeTag = _a.removeTag, _b = _a.tabIndex, tabIndex = _b === void 0 ? 1 : _b, suggestedTagsOptions = _a.suggestedTagsOptions;
     var keyRef = React.useRef(null);
     var valueRef = React.useRef(null);
     var deleteTag = function (e) {
@@ -8702,11 +8700,11 @@ function TagDetails(_a) {
         _tagData.propagate = !_tagData.propagate;
         setTagData(index, _tagData);
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : ''), onClick: propagateTagToResource }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag }, { children: jsxRuntime.jsx(SvgIcClose, { className: "icon-dim-20 mt-4" }) }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flexbox mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ".concat(tagData.propagate ? 'bcn-7' : ''), onClick: propagateTagToResource }, { children: jsxRuntime.jsx(SvgInjectTag, { className: "icon-dim-20 mt-4 ".concat(tagData.propagate ? 'scn-0' : '') }) })), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.KEY, placeholder: "Enter key", tabIndex: tabIndex - 1, refVar: keyRef, dependentRef: valueRef, tagOptions: suggestedTagsOptions }), jsxRuntime.jsx(TagLabelValueSelector, { selectedTagIndex: index, tagData: tagData, setTagData: setTagData, tagInputType: exports.KEY_VALUE.VALUE, placeholder: "Enter value", tabIndex: tabIndex, refVar: valueRef, dependentRef: keyRef }), jsxRuntime.jsx("div", __assign({ className: "dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top", onClick: deleteTag }, { children: jsxRuntime.jsx(SvgIcClose, { className: "icon-dim-20 mt-4" }) }))] })));
 }
 
 var TagLabelSelect = function (_a) {
-    var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
+    var isCreateApp = _a.isCreateApp, labelTags = _a.labelTags, setLabelTags = _a.setLabelTags, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b, suggestedTagsOptions = _a.suggestedTagsOptions;
     var setTagData = function (index, tagValue) {
         var _tags = __spreadArray([], __read(labelTags), false);
         _tags[index] = tagValue;
@@ -8722,7 +8720,7 @@ var TagLabelSelect = function (_a) {
         _tags.splice(index, 1);
         setLabelTags(_tags);
     };
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__content-space mb-8" }, { children: [jsxRuntime.jsx("span", { children: "Tags" }), jsxRuntime.jsx(PropagateTagInfo, { isCreateApp: isCreateApp })] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor", onClick: addNewTag }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-20 fcb-5" }), " Add tag"] })), jsxRuntime.jsx("div", __assign({ className: "mb-8" }, { children: labelTags === null || labelTags === void 0 ? void 0 : labelTags.map(function (tagData, index) { return (jsxRuntime.jsx(TagDetails, { index: index, tagData: tagData, setTagData: setTagData, removeTag: removeTag, tabIndex: tabIndex + (index + 2) }, "tag-".concat(index))); }) }))] })] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "flexbox dc__content-space mb-8" }, { children: [jsxRuntime.jsx("span", { children: "Tags" }), jsxRuntime.jsx(PropagateTagInfo, { isCreateApp: isCreateApp })] })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign({ className: "dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor", onClick: addNewTag }, { children: [jsxRuntime.jsx(SvgIcAdd, { className: "icon-dim-20 fcb-5" }), " Add tag"] })), jsxRuntime.jsx("div", __assign({ className: "mb-8" }, { children: labelTags === null || labelTags === void 0 ? void 0 : labelTags.map(function (tagData, index) { return (jsxRuntime.jsx(TagDetails, { index: index, tagData: tagData, setTagData: setTagData, removeTag: removeTag, tabIndex: tabIndex + (index + 2), suggestedTagsOptions: suggestedTagsOptions }, "tag-".concat(index))); }) }))] })] }));
 };
 
 function ConfirmationDialog(_a) {
@@ -16378,6 +16376,7 @@ exports.DialogForm = DialogForm;
 exports.DialogFormSubmit = DialogFormSubmit;
 exports.Drawer = Drawer;
 exports.ERROR_EMPTY_SCREEN = ERROR_EMPTY_SCREEN;
+exports.EmptyState = EmptyState;
 exports.ErrorScreenManager = ErrorScreenManager;
 exports.ErrorScreenNotAuthorized = ErrorScreenNotAuthorized;
 exports.ForceDeleteDialog = ForceDeleteDialog;
@@ -16396,6 +16395,7 @@ exports.ROUTES = ROUTES;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RequestTimeout = RequestTimeout;
+exports.ResizableTagTextArea = ResizableTagTextArea;
 exports.ServerError = ServerError;
 exports.ServerErrors = ServerErrors;
 exports.SingleSelectOption = SingleSelectOption;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.6-beta-23",
+    "version": "0.0.6-beta-25",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -49,12 +49,12 @@ export function ResizableTagTextArea({
     const handleOnBlur = (event) => {
         refVar.current.style.height = 'auto'
         dependentRef.current.style.height = 'auto'
-        onBlur(event)
+        onBlur && onBlur(event)
     }
 
     const handleOnFocus = (event) => {
         reInitHeight()
-        onFocus(event)
+        onFocus && onFocus(event)
     }
 
     return (

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -6,7 +6,14 @@ import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 
-export default function TagDetails({ index, tagData, setTagData, removeTag, tabIndex = 1 }: TagDetailType) {
+export default function TagDetails({
+    index,
+    tagData,
+    setTagData,
+    removeTag,
+    tabIndex = 1,
+    suggestedTagsOptions,
+}: TagDetailType) {
     const keyRef = useRef(null)
     const valueRef = useRef(null)
 
@@ -36,6 +43,7 @@ export default function TagDetails({ index, tagData, setTagData, removeTag, tabI
                 tabIndex={tabIndex - 1}
                 refVar={keyRef}
                 dependentRef={valueRef}
+                tagOptions={suggestedTagsOptions}
             />
             <TagLabelValueSelector
                 selectedTagIndex={index}

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -5,7 +5,13 @@ import TagDetails from './TagDetails'
 import { TagLabelSelectType } from '../Types'
 import { DEFAULT_TAG_DATA } from '../Constants'
 
-export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex = 0 }: TagLabelSelectType) => {
+export const TagLabelSelect = ({
+    isCreateApp,
+    labelTags,
+    setLabelTags,
+    tabIndex = 0,
+    suggestedTagsOptions,
+}: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
         _tags[index] = tagValue
@@ -43,6 +49,7 @@ export const TagLabelSelect = ({ isCreateApp, labelTags, setLabelTags, tabIndex
                             setTagData={setTagData}
                             removeTag={removeTag}
                             tabIndex={tabIndex + (index + 2)}
+                            suggestedTagsOptions={suggestedTagsOptions}
                         />
                     ))}
                 </div>

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -34,12 +34,12 @@ export const TagLabelValueSelector = ({
         }, 300)
     }
     const handleOnBlur = (e) => {
-        setActiveElement('')
         if (
             !e.relatedTarget ||
             !e.relatedTarget.classList.value ||
             !e.relatedTarget.classList.value.includes(`tag-${selectedTagIndex}-class`)
         ) {
+            setActiveElement('')
             const _tagData = { ...tagData }
             _tagData[tagInputType] = selectedValue
             if (tagInputType === KEY_VALUE.KEY) {
@@ -108,13 +108,16 @@ export const TagLabelValueSelector = ({
             if (filteredTags.length) {
                 return (
                     <div className="p-8">
-                        {tagOptions
-                            .filter((tag) => tag.value.indexOf(selectedValue) >= 0)
-                            .map((tag, index) => (
-                                <div data-key={`${tag.value}-${index}`} className="cursor" onClick={onSelectValue}>
-                                    {tag.label}
-                                </div>
-                            ))}
+                        {filteredTags.map((tag, index) => (
+                            <div
+                                key={`${tag.value}-${index}`}
+                                data-key={tag.label}
+                                className="cursor"
+                                onClick={onSelectValue}
+                            >
+                                {tag.label}
+                            </div>
+                        ))}
                     </div>
                 )
             }

package/src/Common/CustomTagSelector/index.ts

@@ -1,2 +1,3 @@
 export * from './TagLabelSelect'
-export * from './TagLabelValueSelector'
+export * from './TagLabelValueSelector'
+export * from './ResizableTagTextArea'

package/src/Common/TippyCustomized.tsx

@@ -79,7 +79,7 @@ export function TippyCustomized(props: TippyCustomizedProps) {
             <>
                 <div
                     className={`dc__word-break dc__hyphens-auto flex left ${
-                        isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0'
+                        isWhiteTheme ? 'p-12 dc__border-bottom-n1 cn-9' : 'pt-20 pb-12 pr-20 pl-20 cn-0 top'
                     }`}
                 >
                     {iconPath ? (

package/src/Common/Types.ts

@@ -24,67 +24,71 @@ export enum TippyTheme {
 }
 
 export interface TagType {
-  key: string
-  value?: string
-  description?: string
-  propagate: boolean
-  mandatoryProjectIdsCsv?: string[]
-  isInvalidKey?: boolean
-  isInvalidValue?: boolean
+    id?: number
+    key: string
+    value?: string
+    description?: string
+    propagate: boolean
+    mandatoryProjectIdsCsv?: string
+    isInvalidKey?: boolean
+    isInvalidValue?: boolean
 }
 
 export interface TagErrorType {
-  isValid: boolean
-  messages: string[]
+    isValid: boolean
+    messages: string[]
 }
 export interface TagLabelSelectType {
-  isCreateApp?: boolean
-  labelTags: TagType[]
-  setLabelTags: (tagList: TagType[]) => void
-  tabIndex?: number
+    isCreateApp?: boolean
+    labelTags: TagType[]
+    setLabelTags: (tagList: TagType[]) => void
+    tabIndex?: number
+    selectedProjectId?: number
+    suggestedTagsOptions?: OptionType[]
 }
 
 export interface TagDetailType {
-  index: number
-  tagData: TagType
-  setTagData: (index: number, tagData: TagType) => void
-  removeTag: (index: number) => void
-  tabIndex?: number
+    index: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    removeTag?: (index: number) => void
+    tabIndex?: number
+    suggestedTagsOptions?: OptionType[]
 }
 
 export interface TagLabelValueSelectorType {
-  selectedTagIndex: number
-  tagData: TagType
-  setTagData: (index: number, tagData: TagType) => void
-  tagOptions?: OptionType[]
-  isRequired?: boolean
-  tagInputType?: KEY_VALUE
-  placeholder?: string
-  tabIndex?: number
-  refVar?: React.MutableRefObject<HTMLTextAreaElement>
-  dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    selectedTagIndex: number
+    tagData: TagType
+    setTagData: (index: number, tagData: TagType) => void
+    tagOptions?: OptionType[]
+    isRequired?: boolean
+    tagInputType?: KEY_VALUE
+    placeholder?: string
+    tabIndex?: number
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
 }
 
 export interface ResizableTagTextAreaProps {
-  className?: string
-  minHeight?: number
-  maxHeight?: number
-  value?: string
-  onChange?: (e) => void
-  onBlur?: (e) => void
-  onFocus?: (e) => void
-  placeholder?: string
-  tabIndex?: number
-  refVar?: React.MutableRefObject<HTMLTextAreaElement>
-  dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    className?: string
+    minHeight?: number
+    maxHeight?: number
+    value?: string
+    onChange?: (e) => void
+    onBlur?: (e) => void
+    onFocus?: (e) => void
+    placeholder?: string
+    tabIndex?: number
+    refVar?: React.MutableRefObject<HTMLTextAreaElement>
+    dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
 }
 
 export interface TeamList extends ResponseType {
-  result: Teams[];
+    result: Teams[]
 }
 
 export interface Teams {
-  id: number;
-  name: string;
-  active: boolean;
-}
+    id: number
+    name: string
+    active: boolean
+}

package/src/Common/index.ts

@@ -21,6 +21,7 @@ export * from './TippyCustomized'
 export * from './CustomTagSelector'
 export * from './Dialogs'
 export * from './MultiSelectCustomization'
-export {default as InfoColourBar} from './InfoColorBar/InfoColourbar'
+export { default as InfoColourBar } from './InfoColorBar/InfoColourbar'
 export * from './Common.service'
-export * from './Checkbox'
+export * from './Checkbox'
+export { default as EmptyState } from './EmptyState/EmptyState'