@devtron-labs/devtron-fe-common-lib 0.0.31 → 0.0.32

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/index.js

@@ -14777,7 +14777,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);
@@ -14790,9 +14790,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) {
@@ -14802,19 +14804,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.31",
+    "version": "v0.0.32",
     "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   
 }