Add missing ref/Grid system on RJSForm and change inputs border colors

Change-type: patch
balena-io-modules · Dec 28, 2023 · cb75d68 · cb75d68
1 parent 9ba6ef9
commit cb75d68
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 59 deletions.
diff --git a/src/components/Form/FieldTemplates/ObjectFieldTemplate.tsx b/src/components/Form/FieldTemplates/ObjectFieldTemplate.tsx
@@ -83,8 +83,11 @@ export const ObjectFieldTemplate = <
 							item
 							xs={12}
 							key={index}
-							style={{ marginBottom: '10px' }}
-							{...(uiSchema?.['ui:grid']?.item ?? {})}
+							sx={{ marginBottom: '10px' }}
+							{...(uiSchema?.[element.name]?.['ui:grid']?.item ??
+								uiSchema?.['ui:grid']?.[element.name] ??
+								uiSchema?.['ui:grid']?.item ??
+								{})}
 						>
 							{element.content}
 						</Grid>

diff --git a/src/components/Form/Widgets/SelectWidget.tsx b/src/components/Form/Widgets/SelectWidget.tsx
@@ -18,7 +18,9 @@ export const SelectWidget = ({
 	multiple,
 	options,
 	required,
+	uiSchema,
 }: WidgetProps) => {
+	const { inputProps, ...otherUiSchema } = uiSchema ?? {};
 	const { enumOptions, enumDisabled } = options;
 	if (!Array.isArray(enumOptions)) {
 		return null;
@@ -84,7 +86,15 @@ export const SelectWidget = ({
 						? option.some((o) => o.disabled)
 						: option.disabled
 				}
-				renderInput={(params) => <TextField {...params} />}
+				renderInput={(params) => (
+					<TextField
+						{...params}
+						inputProps={{
+							...params.inputProps,
+							...(inputProps ?? {}),
+						}}
+					/>
+				)}
 				onChange={(_event, selected) => {
 					if (Array.isArray(selected)) {
 						const val = selected
@@ -106,6 +116,7 @@ export const SelectWidget = ({
 					return onChange(options.emptyValue);
 				}}
 				disableClearable
+				{...otherUiSchema}
 			/>
 		</FormControl>
 	);

diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
@@ -5,7 +5,8 @@ import { Box, BoxProps, Button, ButtonProps, styled } from '@mui/material';
 import { PasswordWidget } from './Widgets/PasswordWidget';
 import { SelectWidget } from './Widgets/SelectWidget';
 import { FileWidget } from './Widgets/FileWidget';
-import { Fragment } from 'react';
+
+import { Fragment, forwardRef } from 'react';
 import { ObjectFieldTemplate } from './FieldTemplates/ObjectFieldTemplate';
 import { IChangeEvent } from '@rjsf/core';
 import {
@@ -15,14 +16,8 @@ import {
 	UiSchema,
 	FormValidation,
 } from '@rjsf/utils';
-export type {
-	IChangeEvent,
-	FieldTemplateProps,
-	WidgetProps,
-	RJSFValidationError,
-	UiSchema,
-	FormValidation,
-};
+
+import { Templates } from '@rjsf/mui';
 
 const internalWidgets: {
 	[k: string]: any;
@@ -51,53 +46,72 @@ export interface RJSFormProps
 	actionButtons?: ButtonProps[];
 }
 
-export const RJSForm: React.FC<React.PropsWithChildren<RJSFormProps>> = ({
-	hideSubmitButton,
-	submitButtonProps,
-	actionButtons,
-	validator = ajvValidator,
-	widgets,
-	children,
-	ref,
-	sx,
-	onFocus,
-	onBlur,
-	templates,
-	...otherProps
-}) => {
-	// paddingY is resolving an outline glitch that is truncated when inside a container.
-	return (
-		<FormWrapper>
-			<Box sx={{ paddingY: '1px', ...sx }} onFocus={onFocus} onBlur={onBlur}>
-				<Form
-					ref={ref}
-					validator={validator}
-					showErrorList={false}
-					widgets={{ ...internalWidgets, ...(widgets || {}) }}
-					templates={{ ObjectFieldTemplate, ...templates }}
-					{...otherProps}
-				>
-					{/* RJSF need a child to not show the submit button https://github.com/rjsf-team/react-jsonschema-form/issues/1602  */}
-					{hideSubmitButton && <Fragment />}
+export const RJSForm: React.FC<React.PropsWithChildren<RJSFormProps>> =
+	forwardRef(
+		(
+			{
+				hideSubmitButton,
+				submitButtonProps,
+				actionButtons,
+				validator = ajvValidator,
+				widgets,
+				children,
+				sx,
+				onFocus,
+				onBlur,
+				templates,
+				...otherProps
+			},
+			ref,
+		) => {
+			// paddingY is resolving an outline glitch that is truncated when inside a container.
+			return (
+				<FormWrapper>
+					<Box
+						sx={{ paddingY: '1px', ...sx }}
+						onFocus={onFocus}
+						onBlur={onBlur}
+					>
+						<Form
+							ref={ref}
+							validator={validator}
+							showErrorList={false}
+							widgets={{ ...internalWidgets, ...(widgets || {}) }}
+							templates={{ ObjectFieldTemplate, ...templates }}
+							{...otherProps}
+						>
+							{/* RJSF need a child to not show the submit button https://github.com/rjsf-team/react-jsonschema-form/issues/1602  */}
+							{hideSubmitButton && <Fragment />}
 
-					{actionButtons?.map((buttonProps) => (
-						<Button {...buttonProps} />
-					))}
+							{actionButtons?.map((buttonProps) => (
+								<Button {...buttonProps} />
+							))}
 
-					{!hideSubmitButton && (
-						<Button
-							children={'Submit'}
-							// TODO: remove once we migrate buttons
-							disableRipple
-							{...submitButtonProps}
-							color="customBlue"
-							variant="contained"
-							type="submit"
-						/>
-					)}
-					{children}
-				</Form>
-			</Box>
-		</FormWrapper>
+							{!hideSubmitButton && (
+								<Button
+									children={'Submit'}
+									// TODO: remove once we migrate buttons
+									disableRipple
+									{...submitButtonProps}
+									color="customBlue"
+									variant="contained"
+									type="submit"
+								/>
+							)}
+							{children}
+						</Form>
+					</Box>
+				</FormWrapper>
+			);
+		},
 	);
+
+export type {
+	IChangeEvent,
+	FieldTemplateProps,
+	WidgetProps,
+	RJSFValidationError,
+	UiSchema,
+	FormValidation,
 };
+export { Templates };
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
+export type { Theme } from './theme';
 export { theme } from './theme';
 export type { AnimatedTextProps } from './components/AnimatedText';
 export { AnimatedText } from './components/AnimatedText';
@@ -6,7 +7,7 @@ export { ButtonWithTracking } from './components/ButtonWithTracking';
 export { Code } from './components/Code';
 export type { CookiesBannerProps, Cookie } from './components/CookiesBanner';
 export type { FormProps as RjsCoreFormProps } from '@rjsf/core';
-export { RJSForm } from './components/Form';
+export { RJSForm, Templates as RjsfTemplates } from './components/Form';
 export type {
 	RJSFormProps,
 	IChangeEvent,

diff --git a/src/theme.ts b/src/theme.ts
@@ -487,6 +487,12 @@ export const theme = createTheme({
 						// set the fieldset > legend max-width to 100%, and this invalidate the notched: false rule for some inputs.
 						maxWidth: 0,
 					},
+					fieldset: {
+						borderColor: color.border.value,
+						'&:hover': {
+							borderColor: color.border.strong.value,
+						},
+					},
 				},
 			},
 		},
@@ -532,3 +538,5 @@ export const theme = createTheme({
 		},
 	},
 });
+
+export type Theme = typeof theme;