optimize hideTitle WidgetCode; fix showValidity WidgetCode/Selectable;

Author: elbakerino

packages/material-code/src/WidgetCode/WidgetCode.tsx

@@ -55,22 +55,27 @@ export const WidgetCode: React.ComponentType<WidgetProps & WithScalarValue & Wid
     const hideTitle = schema?.getIn(['view', 'hideTitle'])
     const readOnly = readOnlyProp || schema?.get('readOnly')
 
-    const classNamesContent = React.useMemo(() => (valid ? undefined : ['invalid']), [valid])
+    const classNamesContent = React.useMemo(
+        () => (!showValidity || valid ? undefined : ['invalid']),
+        [valid, showValidity],
+    )
     const CodeBarComp = CustomCodeBar || CodeBar
+    const showTitle = required || formatValue || !hideTitle
     return <>
-        <Box mb={0.5}>
-            <FormLabel error={(!valid && showValidity)}>
-                {hideTitle ? null : <>
-                    <TransTitle storeKeys={storeKeys} schema={schema}/>
-                    {required ? ' *' : null}
-                </>}
-                {formatValue ? <>
-                    {hideTitle ? null : ' ('}
-                    <Trans text={'formats.' + formatValue} fallback={formatValue}/>
-                    {hideTitle ? null : ')'}
-                </> : null}
-            </FormLabel>
-        </Box>
+        {showTitle ?
+            <Box mb={0.5}>
+                <FormLabel error={(!valid && showValidity)}>
+                    {hideTitle ? null : <>
+                        <TransTitle storeKeys={storeKeys} schema={schema}/>
+                        {required ? ' *' : null}
+                    </>}
+                    {formatValue ? <>
+                        {hideTitle ? null : ' ('}
+                        <Trans text={'formats.' + formatValue} fallback={formatValue}/>
+                        {hideTitle ? null : ')'}
+                    </> : null}
+                </FormLabel>
+            </Box> : null}
 
         <CodeMirror
             value={(value as string) || ''}

packages/material-code/src/WidgetCodeSelectable/WidgetCodeSelectable.tsx

@@ -68,7 +68,10 @@ export const WidgetCodeSelectable: React.ComponentType<WidgetProps & WithScalarV
     const hideTitle = schema?.getIn(['view', 'hideTitle'])
     const readOnly = readOnlyProp || schema?.get('readOnly')
 
-    const classNamesContent = React.useMemo(() => (valid ? undefined : ['invalid']), [valid])
+    const classNamesContent = React.useMemo(
+        () => (!showValidity || valid ? undefined : ['invalid']),
+        [valid, showValidity],
+    )
     const CodeBarComp = CustomCodeBar || CodeBar
     return <>
         {hideTitle ? null :
@@ -102,7 +105,7 @@ export const WidgetCodeSelectable: React.ComponentType<WidgetProps & WithScalarV
                         f =>
                             <MenuItem key={f} value={f} dense>
                                 <Trans text={'formats.' + f} fallback={f}/>
-                            </MenuItem>
+                            </MenuItem>,
                     )}
                 </Select>
             }