diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap index c9eecf0b..525b5d51 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap +++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap @@ -25021,6 +25021,7 @@ export default function CreateProductForm(props) { showThumbnails={false} maxFileCount={5} maxSize={1024} + {...getOverrideProps(overrides, \\"imgKeys\\")} > )} @@ -25525,6 +25527,7 @@ export default function UpdateProductForm(props) { showThumbnails={false} maxFileCount={1} maxSize={1024} + {...getOverrideProps(overrides, \\"singleImgKey\\")} > )} diff --git a/packages/codegen-ui-react/lib/react-component-renderer.ts b/packages/codegen-ui-react/lib/react-component-renderer.ts index 530fc0a5..12c4999f 100644 --- a/packages/codegen-ui-react/lib/react-component-renderer.ts +++ b/packages/codegen-ui-react/lib/react-component-renderer.ts @@ -89,8 +89,8 @@ export class ReactComponentRenderer extends ComponentRendererBase< if (this.component.componentType === 'StorageField') { this.importCollection.addImport(ImportSource.REACT_STORAGE, 'StorageManager'); this.importCollection.addImport(ImportSource.UI_REACT_INTERNAL, 'Field'); + this.importCollection.addImport(ImportSource.UI_REACT_INTERNAL, ImportValue.GET_OVERRIDE_PROPS); this.importCollection.addImport(ImportSource.UTILS, 'processFile'); - return renderStorageFieldComponent( this.component, this.componentMetadata, diff --git a/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts b/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts index ff3ef314..c1a479ad 100644 --- a/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts +++ b/packages/codegen-ui-react/lib/utils/forms/storage-field-component.ts @@ -22,16 +22,7 @@ import { ComponentMetadata, isValidVariableName, } from '@aws-amplify/codegen-ui'; -import { - factory, - JsxAttribute, - JsxAttributeLike, - JsxChild, - JsxElement, - JsxExpression, - NodeFlags, - SyntaxKind, -} from 'typescript'; +import { factory, JsxAttributeLike, JsxChild, JsxElement, JsxExpression, NodeFlags, SyntaxKind } from 'typescript'; import { getDecoratedLabel } from '../../forms/form-renderer-helper'; import { buildStorageManagerOnChangeStatement } from '../../forms/form-renderer-helper/event-handler-props'; import { propertyToExpression } from '../../react-component-render-helper'; @@ -339,8 +330,8 @@ export const renderStorageFieldComponent = ( const lowerCaseDataTypeName = lowerCaseFirst(dataTypeName); const lowerCaseDataTypeNameRecord = `${lowerCaseDataTypeName}Record`; const storageManagerComponentName = factory.createIdentifier('StorageManager'); - const storageManagerAttributes: JsxAttribute[] = []; - const fieldAttributes: JsxAttribute[] = []; + const storageManagerAttributes: JsxAttributeLike[] = []; + const fieldAttributes: JsxAttributeLike[] = []; if (componentMetadata.formMetadata) { const errorKey = @@ -494,6 +485,15 @@ export const renderStorageFieldComponent = ( } }); + storageManagerAttributes.push( + factory.createJsxSpreadAttribute( + factory.createCallExpression(factory.createIdentifier('getOverrideProps'), undefined, [ + factory.createIdentifier('overrides'), + factory.createStringLiteral(componentName), + ]), + ), + ); + const storageManager = factory.createJsxElement( factory.createJsxOpeningElement( storageManagerComponentName,