@devtron-labs/devtron-fe-common-lib 0.0.45-beta-12 → 0.0.45-beta-14

package/dist/Common/CustomInput/CustomInput.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { CustomInputProps } from './Types';
-export declare function CustomInput({ name, value, error, onChange, onBlur, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, showLink, linkText, link, helperText, state, handleBlurChange }: CustomInputProps): JSX.Element;
+export declare function CustomInput({ name, value, error, onChange, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, showLink, linkText, link, helperText, handleOnBlur, readOnly, noTrim, }: CustomInputProps): JSX.Element;

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

@@ -3,7 +3,6 @@ export interface CustomInputProps {
     name: string;
     value: string | number;
     onChange: (e: any) => void;
-    onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
     autoComplete?: string;
     label?: React.ReactNode;
@@ -21,7 +20,7 @@ export interface CustomInputProps {
     linkText?: string;
     error?: string[] | string;
     helperText?: string;
-    state?: any;
-    setState?: any;
-    handleBlurChange?: (e: any) => void;
+    handleOnBlur?: (e: any) => void;
+    readOnly?: boolean;
+    noTrim?: boolean;
 }

package/dist/index.js

@@ -26624,7 +26624,7 @@ function DevtronProgressing(_a) {
 }
 
 function CustomInput(_a) {
-    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange; _a.onBlur; var _c = _a.onFocus, onFocus = _c === void 0 ? function (e) { } : _c, _d = _a.label, label = _d === void 0 ? '' : _d, _e = _a.type, type = _e === void 0 ? 'text' : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.labelClassName, labelClassName = _g === void 0 ? '' : _g, _h = _a.placeholder, placeholder = _h === void 0 ? '' : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? 1 : _j, _k = _a.dataTestid, dataTestid = _k === void 0 ? '' : _k, _l = _a.isRequiredField, isRequiredField = _l === void 0 ? false : _l, _m = _a.autoFocus, autoFocus = _m === void 0 ? true : _m, _o = _a.rootClassName, rootClassName = _o === void 0 ? '' : _o, _p = _a.autoComplete, autoComplete = _p === void 0 ? 'off' : _p, _q = _a.showLink, showLink = _q === void 0 ? false : _q, _r = _a.linkText, linkText = _r === void 0 ? '' : _r, _s = _a.link, link = _s === void 0 ? '' : _s, _t = _a.helperText, helperText = _t === void 0 ? '' : _t; _a.state; var handleBlurChange = _a.handleBlurChange;
+    var name = _a.name, value = _a.value, error = _a.error, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? function (e) { } : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.type, type = _d === void 0 ? 'text' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.labelClassName, labelClassName = _f === void 0 ? '' : _f, _g = _a.placeholder, placeholder = _g === void 0 ? '' : _g, _h = _a.tabIndex, tabIndex = _h === void 0 ? 1 : _h, _j = _a.dataTestid, dataTestid = _j === void 0 ? '' : _j, _k = _a.isRequiredField, isRequiredField = _k === void 0 ? false : _k, _l = _a.autoFocus, autoFocus = _l === void 0 ? true : _l, _m = _a.rootClassName, rootClassName = _m === void 0 ? '' : _m, _o = _a.autoComplete, autoComplete = _o === void 0 ? 'off' : _o, _p = _a.showLink, showLink = _p === void 0 ? false : _p, _q = _a.linkText, linkText = _q === void 0 ? '' : _q, _r = _a.link, link = _r === void 0 ? '' : _r, _s = _a.helperText, helperText = _s === void 0 ? '' : _s, handleOnBlur = _a.handleOnBlur, _t = _a.readOnly, readOnly = _t === void 0 ? false : _t, _u = _a.noTrim, noTrim = _u === void 0 ? false : _u;
     var renderLabelHelperText = function () {
         return (jsxRuntime.jsx("span", { children: jsxRuntime.jsx("a", __assign({ target: "_blank", href: link, className: "cursor fs-13 onlink ml-4" }, { children: linkText })) }));
     };
@@ -26637,12 +26637,18 @@ function CustomInput(_a) {
         }
         return error;
     }
-    var handleOnBlur = React.useCallback(function (event) {
-        onChange(__assign(__assign({}, event), { target: __assign(__assign({}, event.target), { value: event.target.value.trim() }) }));
-        if (typeof handleBlurChange === 'function') {
-            handleBlurChange(event);
+    var onBlur = function (event) {
+        var _a;
+        //NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
+        if (!noTrim) {
+            event.stopPropagation();
+            event.target.value = (_a = event.target.value) === null || _a === void 0 ? void 0 : _a.trim();
+            onChange(event);
         }
-    }, []);
+        if (typeof handleOnBlur === 'function') {
+            handleOnBlur(event);
+        }
+    };
     var renderFormError = function () {
         if ((error === null || error === void 0 ? void 0 : error.length) > 0) {
             if (typeof error === 'object') {
@@ -26654,7 +26660,7 @@ function CustomInput(_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "flex column left top" }, { children: [label && (jsxRuntime.jsxs("label", __assign({ className: "form__label ".concat(labelClassName), "data-testid": "label-".concat(dataTestid) }, { children: [jsxRuntime.jsx("span", __assign({ className: "".concat(isRequiredField ? 'dc__required-field' : '') }, { children: label })), showLink && renderLabelHelperText()] }))), jsxRuntime.jsx("input", { "data-testid": dataTestid, type: type, name: name, autoComplete: autoComplete, className: "form__input ".concat(rootClassName), onChange: function (e) {
                     e.persist();
                     onChange(e);
-                }, onBlur: handleOnBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus }), renderFormError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
+                }, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly }), renderFormError(), helperText && (jsxRuntime.jsxs("div", __assign({ className: "form__text-field-info" }, { children: [jsxRuntime.jsx(SvgIcInfoFilled, { className: "form__icon form__icon--info" }), jsxRuntime.jsx("p", __assign({ className: "sentence-case" }, { children: helperText }))] })))] })));
 }
 
 exports.AppStatus = AppStatus;

package/package.json

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

package/src/Common/CustomInput/CustomInput.tsx

@@ -8,7 +8,6 @@ export function CustomInput({
     value,
     error,
     onChange,
-    onBlur = (e) => {},
     onFocus = (e) => {},
     label = '',
     type = 'text',
@@ -25,10 +24,10 @@ export function CustomInput({
     linkText = '',
     link = '',
     helperText = '',
-    state,
-    handleBlurChange
+    handleOnBlur,
+    readOnly = false,
+    noTrim = false,
 }: CustomInputProps) {
-
     const renderLabelHelperText = () => {
         return (
             <span>
@@ -51,19 +50,17 @@ export function CustomInput({
         return error
     }
 
-    const handleOnBlur = useCallback((event) => {  
-       onChange({
-           ...event,
-           target: {
-               ...event.target,
-               value: event.target.value.trim(),
-           },
-       })
-       if (typeof handleBlurChange === 'function') {
-           handleBlurChange(event)
-       }
-      
-    },[])
+    const onBlur = (event) => {
+        //NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
+        if (!noTrim) {
+            event.stopPropagation()
+            event.target.value = event.target.value?.trim()
+            onChange(event)
+        }
+        if (typeof handleOnBlur === 'function') {
+            handleOnBlur(event)
+        }
+    }
 
     const renderFormError = () => {
         if (error?.length > 0) {
@@ -102,13 +99,14 @@ export function CustomInput({
                     e.persist()
                     onChange(e)
                 }}
-                onBlur={handleOnBlur}
+                onBlur={onBlur}
                 onFocus={onFocus}
                 placeholder={placeholder}
                 value={value}
                 disabled={disabled}
                 tabIndex={tabIndex}
                 autoFocus={autoFocus}
+                readOnly={readOnly}
             />
 
             {renderFormError()}

package/src/Common/CustomInput/Types.ts

@@ -2,7 +2,6 @@ export interface CustomInputProps {
     name: string
     value: string | number
     onChange: (e: any) => void
-    onBlur?: (e: any) => void
     onFocus?: (e: any) => void
     autoComplete?: string
     label?: React.ReactNode
@@ -20,7 +19,7 @@ export interface CustomInputProps {
     linkText?: string
     error?: string[] | string
     helperText?: string;
-    state?;
-    setState?;
-    handleBlurChange?: (e) => void
+    handleOnBlur?: (e) => void
+    readOnly?: boolean
+    noTrim?: boolean
 }