@devtron-labs/devtron-fe-common-lib 0.0.25 → 0.0.26-beta-2

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ResizableTagTextAreaProps } from './Types';
-export declare function ResizableTagTextArea({ className, minHeight, maxHeight, value, onChange, onBlur, onFocus, placeholder, tabIndex, refVar, dependentRef, dataTestId, }: ResizableTagTextAreaProps): JSX.Element;
+export declare function ResizableTagTextArea({ className, minHeight, maxHeight, value, onChange, onBlur, onFocus, placeholder, tabIndex, refVar, dependentRef, dataTestId, handleKeyDown, }: ResizableTagTextAreaProps): JSX.Element;

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

@@ -64,4 +64,5 @@ export interface ResizableTagTextAreaProps {
     refVar?: React.MutableRefObject<HTMLTextAreaElement>;
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>;
     dataTestId?: string;
+    handleKeyDown?: any;
 }

package/dist/Common/Helper.d.ts

@@ -42,4 +42,5 @@ export declare function CustomInput({ name, value, error, onChange, onBlur, onFo
 }): JSX.Element;
 export declare function handleUTCTime(ts: string, isRelativeTime?: boolean): string;
 export declare function useSearchString(): UseSearchString;
+export declare const closeOnEscKeyPressed: (e: any, actionClose: () => void) => void;
 export {};

package/dist/index.js

@@ -10099,7 +10099,12 @@ function useSearchString() {
         return agg;
     }, {});
     return { queryParams: queryParams, searchParams: searchParams };
-}
+}
+var closeOnEscKeyPressed = function (e, actionClose) {
+    if (e.keyCode === 27 || e.key === 'Escape') {
+        actionClose();
+    }
+};
 
 function Progressing(_a) {
     var pageLoader = _a.pageLoader, size = _a.size, theme = _a.theme, styles = _a.styles, fillColor = _a.fillColor;
@@ -14662,7 +14667,7 @@ var SvgIcInfoOutlined = function SvgIcInfoOutlined(props) {
 };
 
 function ResizableTagTextArea(_a) {
-    var className = _a.className, minHeight = _a.minHeight, maxHeight = _a.maxHeight, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, placeholder = _a.placeholder, tabIndex = _a.tabIndex, refVar = _a.refVar, dependentRef = _a.dependentRef, dataTestId = _a.dataTestId;
+    var className = _a.className, minHeight = _a.minHeight, maxHeight = _a.maxHeight, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, placeholder = _a.placeholder, tabIndex = _a.tabIndex, refVar = _a.refVar, dependentRef = _a.dependentRef, dataTestId = _a.dataTestId, handleKeyDown = _a.handleKeyDown;
     var _b = __read(React.useState(''), 2), text = _b[0], setText = _b[1];
     React.useEffect(function () {
         setText(value);
@@ -14675,9 +14680,11 @@ function ResizableTagTextArea(_a) {
         if (document.activeElement !== refVar.current)
             return;
         refVar.current.style.height = minHeight + 'px';
-        dependentRef.current.style.height = minHeight + 'px';
+        if (dependentRef) {
+            dependentRef.current.style.height = minHeight + 'px';
+        }
         var nextHeight = refVar.current.scrollHeight;
-        if (nextHeight < dependentRef.current.scrollHeight) {
+        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight;
         }
         if (minHeight && nextHeight < minHeight) {
@@ -14687,19 +14694,23 @@ function ResizableTagTextArea(_a) {
             nextHeight = maxHeight;
         }
         refVar.current.style.height = nextHeight + 'px';
-        dependentRef.current.style.height = nextHeight + 'px';
+        if (dependentRef) {
+            dependentRef.current.style.height = nextHeight + 'px';
+        }
     };
     useThrottledEffect(reInitHeight, 500, [text]);
     var handleOnBlur = function (event) {
         refVar.current.style.height = minHeight + 'px';
-        dependentRef.current.style.height = minHeight + 'px';
+        if (dependentRef) {
+            dependentRef.current.style.height = minHeight + 'px';
+        }
         onBlur && onBlur(event);
     };
     var handleOnFocus = function (event) {
         reInitHeight();
         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, "data-testid": dataTestId }));
+    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, "data-testid": dataTestId, onKeyDown: handleKeyDown }));
 }
 
 var validateTagValue = function (value) {
@@ -23416,6 +23427,7 @@ exports.TriggerTypeMap = TriggerTypeMap;
 exports.URLS = URLS;
 exports.VisibleModal = VisibleModal;
 exports.VisibleModal2 = VisibleModal2;
+exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.createGitCommitUrl = createGitCommitUrl;
 exports.extractImage = extractImage;
 exports.get = get;

package/package.json

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

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -15,6 +15,7 @@ export function ResizableTagTextArea({
     refVar,
     dependentRef,
     dataTestId,
+    handleKeyDown,
 }: ResizableTagTextAreaProps) {
     const [text, setText] = useState('')
 
@@ -29,10 +30,12 @@ export function ResizableTagTextArea({
 
     const reInitHeight = () => {
         if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = minHeight+ 'px'
-        dependentRef.current.style.height = minHeight+ 'px'
+        refVar.current.style.height = minHeight + 'px'
+        if (dependentRef) {
+            dependentRef.current.style.height = minHeight + 'px'
+        }
         let nextHeight = refVar.current.scrollHeight
-        if (nextHeight < dependentRef.current.scrollHeight) {
+        if (dependentRef && nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight
         }
         if (minHeight && nextHeight < minHeight) {
@@ -42,14 +45,18 @@ export function ResizableTagTextArea({
             nextHeight = maxHeight
         }
         refVar.current.style.height = nextHeight + 'px'
-        dependentRef.current.style.height = nextHeight + 'px'
+        if (dependentRef) {
+            dependentRef.current.style.height = nextHeight + 'px'
+        }
     }
 
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {
-        refVar.current.style.height = minHeight+ 'px'
-        dependentRef.current.style.height = minHeight+ 'px'
+        refVar.current.style.height = minHeight + 'px'
+        if (dependentRef) {
+            dependentRef.current.style.height = minHeight + 'px'
+        }
         onBlur && onBlur(event)
     }
 
@@ -71,6 +78,7 @@ export function ResizableTagTextArea({
             onFocus={handleOnFocus}
             tabIndex={tabIndex}
             data-testid={dataTestId}
+            onKeyDown={handleKeyDown}
         />
     )
 }

package/src/Common/CustomTagSelector/Types.ts

@@ -68,4 +68,5 @@ export interface ResizableTagTextAreaProps {
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
     dataTestId?: string
+    handleKeyDown?: any   
 }

package/src/Common/Helper.tsx

@@ -369,3 +369,8 @@ export function useSearchString(): UseSearchString {
 }
 
 
+export const closeOnEscKeyPressed = (e: any, actionClose: () => void) => {
+    if (e.keyCode === 27 || e.key === 'Escape')  {
+        actionClose()
+    }
+}