chore: update version to 1.9.5-beta-5 in package.json and package-lock.json; add hideFormFieldInfo prop to CustomInput, FormFieldWrapper, and other components

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.5-beta-4",
+    "version": "1.9.5-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -48,6 +48,7 @@ const CustomInput = ({
     labelTippyCustomizedConfig,
     labelTooltipConfig,
     inputRef: inputRefProp,
+    hideFormFieldInfo,
     ...props
 }: CustomInputProps) => {
     const localInputRef = useRef<HTMLInputElement>(null)
@@ -98,6 +99,7 @@ const CustomInput = ({
             borderRadiusConfig={borderRadiusConfig}
             labelTippyCustomizedConfig={labelTippyCustomizedConfig}
             labelTooltipConfig={labelTooltipConfig}
+            hideFormFieldInfo={hideFormFieldInfo}
         >
             <>
                 <input

src/Shared/Components/CustomInput/CustomInput.tsx

@@ -27,9 +27,7 @@ const FormInfoItem = ({ id, text, icon, textClass }: FormInfoItemProps) => (
 
 const FormFieldInfo = ({ error, helperText, warningText, inputId }: FormFieldInfoProps) => (
     <div className="flex left column dc__gap-4">
-        {(typeof error === 'string' ? !!error.trim() : !!error) && (
-            <FormInfoItem text={error} icon="ic-error" textClass="cr-5" id={getFormErrorElementId(inputId)} />
-        )}
+        {!!error && <FormInfoItem text={error} icon="ic-error" textClass="cr-5" id={getFormErrorElementId(inputId)} />}
         {!!helperText && (
             <FormInfoItem text={helperText} icon="ic-info-filled" textClass="cn-7" id={`${inputId}-helper-text`} />
         )}

src/Shared/Components/FormFieldWrapper/FormFieldInfo.tsx

@@ -30,7 +30,8 @@ const FormFieldWrapper = ({
     children,
     labelTippyCustomizedConfig,
     labelTooltipConfig,
-}: Required<FormFieldWrapperProps>) => {
+    hideFormFieldInfo = false,
+}: Omit<Required<FormFieldWrapperProps>, 'hideFormFieldInfo'> & Pick<FormFieldWrapperProps, 'hideFormFieldInfo'>) => {
     const isRowLayout = layout === 'row'
     const itemContainerClassName = isRowLayout ? 'dc__mxw-250 w-100 mxh-36 dc__align-self-stretch' : ''
     const formError = Array.isArray(error) ? error[0] : error
@@ -57,7 +58,7 @@ const FormFieldWrapper = ({
                 )}
                 <div className="w-100 dc__position-rel">{children}</div>
             </div>
-            {(!!formError || !!helperText || !!warningText) && (
+            {!hideFormFieldInfo && (!!formError || !!helperText || !!warningText) && (
                 <div className="flex left dc__gap-6 w-100">
                     {/* Added a hidden div for layout sync */}
                     {isRowLayout && <div className={`${itemContainerClassName} dc__visibility-hidden`} />}

src/Shared/Components/FormFieldWrapper/FormFieldWrapper.tsx

@@ -17,3 +17,4 @@
 export { default as FormFieldWrapper } from './FormFieldWrapper'
 export type { FormFieldWrapperProps } from './types'
 export { getFormFieldAriaAttributes } from './utils'
+export { default as FormFieldInfo } from './FormFieldInfo'

src/Shared/Components/FormFieldWrapper/index.ts

@@ -95,4 +95,8 @@ export interface FormFieldWrapperProps
     children: ReactElement
     borderRadiusConfig?: BorderConfigType
     borderConfig?: BorderConfigType
+    /**
+     * @default false
+     */
+    hideFormFieldInfo?: boolean
 }

src/Shared/Components/FormFieldWrapper/types.ts

@@ -4,7 +4,7 @@ import { useRef } from 'react'
 import { PhoneInputProps } from './types'
 import { CountrySelect } from '../CountrySelect'
 import { CustomInput } from '../CustomInput'
-import FormFieldInfo from '../FormFieldWrapper/FormFieldInfo'
+import { FormFieldInfo } from '../FormFieldWrapper'
 
 const PhoneInput = ({
     error,
@@ -59,8 +59,8 @@ const PhoneInput = ({
                         value={inputValue}
                         onChange={handlePhoneValueChange}
                         inputRef={inputRef}
-                        // Since we are showing error below but want css of errors here
-                        error={error ? ' ' : null}
+                        error={error}
+                        hideFormFieldInfo
                         fullWidth
                     />
                 </div>

src/Shared/Components/PhoneInput/PhoneInput.component.tsx

@@ -222,6 +222,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     borderRadiusConfig,
     labelTippyCustomizedConfig,
     labelTooltipConfig,
+    hideFormFieldInfo,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const [isFocussed, setIsFocussed] = useState(false)
@@ -387,6 +388,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             borderRadiusConfig={borderRadiusConfig}
             labelTippyCustomizedConfig={labelTippyCustomizedConfig}
             labelTooltipConfig={labelTooltipConfig}
+            hideFormFieldInfo={hideFormFieldInfo}
         >
             <ConditionalWrap condition={isDisabled && !!disabledTippyContent} wrap={renderDisabledTippy}>
                 <div className="w-100">

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -45,6 +45,7 @@ const Textarea = ({
     borderRadiusConfig,
     labelTooltipConfig,
     labelTippyCustomizedConfig,
+    hideFormFieldInfo,
     value,
     borderConfig,
     ...props
@@ -132,6 +133,7 @@ const Textarea = ({
             borderRadiusConfig={borderRadiusConfig}
             labelTooltipConfig={labelTooltipConfig}
             labelTippyCustomizedConfig={labelTippyCustomizedConfig}
+            hideFormFieldInfo={hideFormFieldInfo}
         >
             <textarea
                 {...props}