enabled custom save and reset form buttons

library/src/components/form/DynamicForm.tsx

@@ -9,7 +9,7 @@ import {
 	type UseFormWatch,
 } from "react-hook-form"
 import { twMerge } from "tailwind-merge"
-import { Button } from "../Button"
+import { Button, ButtonGroup } from "../Button"
 
 export interface FormProps<T extends FieldValues> {
 	control: Control<T>
@@ -44,6 +44,9 @@ export interface DynamicFormProps<T extends FieldValues>
 	horizontal?: boolean
 	hideReset?: boolean
 	hideSave?: boolean
+
+	customSubmitButton?: (props: { disabled: boolean }) => React.ReactNode
+	customResetButton?: (props: { disabled: boolean }) => React.ReactNode
 }
 
 export function DynamicForm<T extends FieldValues>({
@@ -55,6 +58,8 @@ export function DynamicForm<T extends FieldValues>({
 	className,
 	hideSave,
 	hideReset,
+	customResetButton,
+	customSubmitButton,
 	...props
 }: DynamicFormProps<T>) {
 	const {
@@ -95,26 +100,32 @@ export function DynamicForm<T extends FieldValues>({
 
 			<hr className="border border-border" />
 
-			<div className="flex flex-row items-end w-full justify-end mt-4">
-				{!hideReset && (
-					<Button
-						type="reset"
-						appearance="subtle"
-						disabled={!isDirty}
-					>
-						Reset
-					</Button>
-				)}
-				{!hideSave && (
-					<Button
-						appearance="primary"
-						type="submit"
-						disabled={!isValid}
-					>
-						Save
-					</Button>
-				)}
-			</div>
+			<ButtonGroup className="justify-end">
+				{!hideReset &&
+					(customResetButton ? (
+						customResetButton({ disabled: !isDirty })
+					) : (
+						<Button
+							type="reset"
+							appearance="subtle"
+							disabled={!isDirty}
+						>
+							Reset
+						</Button>
+					))}
+				{!hideSave &&
+					(customSubmitButton ? (
+						customSubmitButton({ disabled: !isValid })
+					) : (
+						<Button
+							appearance="primary"
+							type="submit"
+							disabled={!isValid}
+						>
+							Save
+						</Button>
+					))}
+			</ButtonGroup>
 		</form>
 	)
 }

package.json

@@ -102,7 +102,7 @@
 		"mime-types": "^2.1.35",
 		"react-awesome-slider": "^4.1.0",
 		"react-day-picker": "^8.10.1",
-		"react-intl": "^6.7.1",
+		"react-intl": "^6.7.2",
 		"react-joyride": "^2.9.2",
 		"react-router-dom": "^6.26.2",
 		"react-select": "^5.8.1",
@@ -118,7 +118,7 @@
 		"@atlaskit/lozenge": "^11.11.0",
 		"@atlaskit/pagination": "^14.9.3",
 		"@atlaskit/side-navigation": "^3.5.3",
-		"@atlaskit/table-tree": "^10.0.3",
+		"@atlaskit/table-tree": "^10.0.4",
 		"@atlaskit/tag": "^12.6.3",
 		"@atlaskit/tag-group": "^10.6.0",
 		"@atlaskit/textarea": "^5.6.2",
@@ -129,7 +129,7 @@
 		"@babel/traverse": "^7.25.7",
 		"@babel/types": "^7.25.7",
 		"@biomejs/biome": "^1.9.3",
-		"@formatjs/cli": "^6.2.13",
+		"@formatjs/cli": "^6.2.14",
 		"@monaco-editor/react": "^4.6.0",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/node": "^22.7.5",
@@ -157,7 +157,7 @@
 		"stylelint-order": "^6.0.4",
 		"tailwind-merge": "^2.5.3",
 		"tailwindcss": "^3.4.13",
-		"typescript": "^5.6.2",
+		"typescript": "^5.6.3",
 		"typescript-plugin-css-modules": "^5.1.0",
 		"vite": "^5.4.8",
 		"vite-plugin-dts": "^4.2.3",