@devtron-labs/devtron-fe-common-lib 0.0.45-beta-22 → 0.0.45-beta-24

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, onFocus, label, type, disabled, labelClassName, placeholder, tabIndex, dataTestid, isRequiredField, autoFocus, rootClassName, autoComplete, showLink, linkText, link, helperText, handleOnBlur, readOnly, noTrim, ref, onKeyPress, defaultValue, }: 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, ref, onKeyPress, defaultValue, onKeyDown, required, additionalErrorInfo }: CustomInputProps): JSX.Element;

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

@@ -1,4 +1,4 @@
-import { LegacyRef } from "react";
+import { HTMLInputTypeAttribute } from "react";
 export interface CustomInputProps {
     name: string;
     value: string | number;
@@ -7,7 +7,7 @@ export interface CustomInputProps {
     autoComplete?: string;
     label?: React.ReactNode;
     labelClassName?: string;
-    type?: 'text' | 'number';
+    type?: HTMLInputTypeAttribute;
     disabled?: boolean;
     placeholder?: string;
     tabIndex?: number;
@@ -23,7 +23,10 @@ export interface CustomInputProps {
     handleOnBlur?: (e: any) => void;
     readOnly?: boolean;
     noTrim?: boolean;
-    ref?: LegacyRef<HTMLInputElement>;
+    ref?: React.LegacyRef<HTMLInputElement>;
     onKeyPress?: (e: any) => void;
     defaultValue?: string | number | ReadonlyArray<string> | undefined;
+    onKeyDown?: (e: any) => void;
+    required?: boolean;
+    additionalErrorInfo?: React.ReactNode;
 }

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, _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 ? false : _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, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue;
+    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 ? false : _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, ref = _a.ref, onKeyPress = _a.onKeyPress, defaultValue = _a.defaultValue, onKeyDown = _a.onKeyDown, required = _a.required, additionalErrorInfo = _a.additionalErrorInfo;
     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 })) }));
     };
@@ -26652,7 +26652,7 @@ function CustomInput(_a) {
     var renderFormError = function () {
         if ((error === null || error === void 0 ? void 0 : error.length) > 0) {
             if (typeof error === 'object') {
-                return handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err] }), err)); });
+                return handleError(error).map(function (err) { return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), err, typeof additionalErrorInfo === "function" && additionalErrorInfo()] }), err)); });
             }
             return (jsxRuntime.jsxs("div", __assign({ className: "form__error" }, { children: [jsxRuntime.jsx(SvgIcWarning, { className: "form__icon form__icon--error" }), error] })));
         }
@@ -26660,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: onBlur, onFocus: onFocus, placeholder: placeholder, value: value, disabled: disabled, tabIndex: tabIndex, autoFocus: autoFocus, readOnly: readOnly, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue }), 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, ref: ref, onKeyPress: onKeyPress, defaultValue: defaultValue, onKeyDown: onKeyDown, required: required }), 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-22",
+    "version": "0.0.45-beta-24",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -20,25 +20,25 @@
     "homepage": "https://github.com/devtron-labs/devtron-fe-common-lib#readme",
     "devDependencies": {
         "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-commonjs": "24.0.1",
         "@rollup/plugin-image": "3.0.1",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-typescript2": "^0.34.1",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-url": "8.0.1",
+        "@sentry/browser": "^7.31.1",
+        "@svgr/rollup": "6.5.1",
+        "@tippyjs/react": "^4.2.0",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
-        "rollup": "^3.10.0",
-        "rollup-plugin-delete": "^2.0.0",
-        "@svgr/rollup": "6.5.1",
-        "@rollup/plugin-url": "8.0.1",
-        "@rollup/plugin-commonjs": "24.0.1",
         "moment": "^2.29.4",
-        "typescript": "^4.9.4",
-        "react-toastify": "^8.2.0",
-        "@tippyjs/react": "^4.2.0",
         "react-select": "5.2.2",
-        "@sentry/browser": "^7.31.1"
+        "react-toastify": "^8.2.0",
+        "rollup": "^3.10.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-typescript2": "^0.34.1",
+        "typescript": "^4.9.4"
     },
     "peerDependencies": {
         "@rjsf/core": "^5.13.3",

package/src/Common/CustomInput/CustomInput.tsx

@@ -29,6 +29,9 @@ export function CustomInput({
     ref,
     onKeyPress,
     defaultValue,
+    onKeyDown,
+    required,
+    additionalErrorInfo
 }: CustomInputProps) {
     const renderLabelHelperText = () => {
         return (
@@ -70,7 +73,7 @@ export function CustomInput({
                 return handleError(error).map((err: string) => (
                     <div className="form__error" key={err}>
                         <FormError className="form__icon form__icon--error" />
-                        {err}
+                        {err}{typeof additionalErrorInfo === "function" && additionalErrorInfo() }
                     </div>
                 ))
             }
@@ -112,6 +115,8 @@ export function CustomInput({
                 ref={ref}
                 onKeyPress={onKeyPress}
                 defaultValue={defaultValue}
+                onKeyDown={onKeyDown}
+                required={required}
             />
 
             {renderFormError()}

package/src/Common/CustomInput/Types.ts

@@ -1,4 +1,4 @@
-import { LegacyRef } from "react"
+import { HTMLInputTypeAttribute } from "react"
 
 export interface CustomInputProps {
     name: string
@@ -8,7 +8,7 @@ export interface CustomInputProps {
     autoComplete?: string
     label?: React.ReactNode
     labelClassName?: string
-    type?: 'text' | 'number'
+    type?: HTMLInputTypeAttribute
     disabled?: boolean
     placeholder?: string
     tabIndex?: number
@@ -24,7 +24,10 @@ export interface CustomInputProps {
     handleOnBlur?: (e) => void
     readOnly?: boolean
     noTrim?: boolean
-    ref?: LegacyRef<HTMLInputElement>
+    ref?: React.LegacyRef<HTMLInputElement>
     onKeyPress?: (e) => void
     defaultValue?: string | number | ReadonlyArray<string> | undefined;
+    onKeyDown?: (e) => void
+    required?: boolean
+    additionalErrorInfo?: React.ReactNode
 }