@bigbinary/neeto-atoms 1.0.133-beta2 → 1.0.134-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
- var formik = require('formik');
5
4
  var React = require('react');
5
+ var formik = require('formik');
6
6
  var reactRouterDom = require('react-router-dom');
7
7
  var Dialog = require('../Dialog-ZUHGaoAE.js');
8
8
  var Button = require('../Button-BQ4rpzsl.js');
@@ -99,24 +99,27 @@ const useNavPrompt = ({
99
99
 
100
100
  const BlockNavigationAlert = ({
101
101
  isOpen = false,
102
+ isSaving = false,
103
+ saveAndContinue = true,
102
104
  onClose,
103
105
  onSubmit,
104
106
  onDiscardChanges,
105
107
  title = "You have unsaved changes",
106
108
  message = "Are you sure you want to leave? All unsaved changes will be lost.",
107
109
  cancelButtonLabel = "Discard and leave",
108
- submitButtonLabel = "Stay on this page"
110
+ submitButtonLabel
109
111
  }) => {
110
112
  const submitButtonRef = React.useRef(null);
113
+ const primaryButtonLabel = submitButtonLabel ?? (saveAndContinue ? "Save and continue" : "Stay on this page");
111
114
  return /* @__PURE__ */ jsxRuntime.jsxs(
112
115
  Dialog.Dialog,
113
116
  {
114
117
  isOpen,
115
118
  onClose: onClose ?? (() => {
116
119
  }),
117
- closeButton: true,
118
- closeOnEsc: true,
119
- closeOnOutsideClick: true,
120
+ closeButton: !isSaving,
121
+ closeOnEsc: !isSaving,
122
+ closeOnOutsideClick: !isSaving,
120
123
  initialFocusRef: submitButtonRef,
121
124
  size: "medium",
122
125
  "data-testid": "alert-box",
@@ -135,6 +138,7 @@ const BlockNavigationAlert = ({
135
138
  Button.Button,
136
139
  {
137
140
  "data-testid": "alert-cancel-button",
141
+ disabled: isSaving,
138
142
  label: cancelButtonLabel,
139
143
  variant: "destructive",
140
144
  onClick: onDiscardChanges
@@ -144,7 +148,8 @@ const BlockNavigationAlert = ({
144
148
  Button.Button,
145
149
  {
146
150
  "data-testid": "alert-submit-button",
147
- label: submitButtonLabel,
151
+ label: primaryButtonLabel,
152
+ loading: isSaving,
148
153
  ref: submitButtonRef,
149
154
  onClick: onSubmit
150
155
  }
@@ -158,8 +163,10 @@ BlockNavigationAlert.displayName = "BlockNavigationAlert";
158
163
 
159
164
  const FormikBlockNavigation = ({
160
165
  isDirty = false,
166
+ saveAndContinue = true,
161
167
  ...otherProps
162
168
  }) => {
169
+ const [isSaving, setIsSaving] = React.useState(false);
163
170
  const formikContext = formik.useFormikContext();
164
171
  const shouldBlock = isDirty || Boolean(formikContext) && Boolean(formikContext.dirty);
165
172
  const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({
@@ -170,13 +177,35 @@ const FormikBlockNavigation = ({
170
177
  hidePrompt();
171
178
  continueNavigation();
172
179
  };
180
+ const handleSaveAndContinue = async () => {
181
+ if (!formikContext) {
182
+ hidePrompt();
183
+ return;
184
+ }
185
+ setIsSaving(true);
186
+ try {
187
+ const errors = await formikContext.validateForm();
188
+ if (Object.keys(errors).length > 0) {
189
+ await formikContext.submitForm();
190
+ hidePrompt();
191
+ return;
192
+ }
193
+ await formikContext.submitForm();
194
+ continueNavigation();
195
+ } catch {
196
+ hidePrompt();
197
+ } finally {
198
+ setIsSaving(false);
199
+ }
200
+ };
173
201
  return /* @__PURE__ */ jsxRuntime.jsx(
174
202
  BlockNavigationAlert,
175
203
  {
204
+ ...{ isSaving, saveAndContinue },
176
205
  isOpen: isBlocked,
177
206
  onClose: hidePrompt,
178
207
  onDiscardChanges: handleDiscardChanges,
179
- onSubmit: hidePrompt,
208
+ onSubmit: saveAndContinue ? handleSaveAndContinue : hidePrompt,
180
209
  ...otherProps
181
210
  }
182
211
  );
@@ -1 +1 @@
1
- {"version":3,"file":"BlockNavigation.js","sources":["../../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the stay/submit button. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel = \"Stay on this page\",\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton\n closeOnEsc\n closeOnOutsideClick\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={submitButtonLabel}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n return (\n <BlockNavigationAlert\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":["useState","useHistory","useRef","useCallback","useEffect","jsxs","Dialog","jsx","Button","useFormikContext"],"mappings":"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"}
1
+ {"version":3,"file":"BlockNavigation.js","sources":["../../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Whether the form is being saved. Shows a loader on the primary button and\n * prevents the dialog from being dismissed. */\n isSaving?: boolean;\n /** Whether the primary button saves the form before resuming navigation.\n * Defaults to true; pass false for the older \"Stay on this page\" behaviour. */\n saveAndContinue?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to save and continue, or to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the primary button. Defaults to \"Save and continue\" when\n * saveAndContinue is enabled and \"Stay on this page\" otherwise. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n isSaving = false,\n saveAndContinue = true,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel,\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n const primaryButtonLabel =\n submitButtonLabel ??\n (saveAndContinue ? \"Save and continue\" : \"Stay on this page\");\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton={!isSaving}\n closeOnEsc={!isSaving}\n closeOnOutsideClick={!isSaving}\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n disabled={isSaving}\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={primaryButtonLabel}\n loading={isSaving}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useState } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"isSaving\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n saveAndContinue = true,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const [isSaving, setIsSaving] = useState(false);\n\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n const handleSaveAndContinue = async () => {\n if (!formikContext) {\n hidePrompt();\n\n return;\n }\n\n setIsSaving(true);\n try {\n const errors = await formikContext.validateForm();\n if (Object.keys(errors).length > 0) {\n await formikContext.submitForm();\n hidePrompt();\n\n return;\n }\n\n await formikContext.submitForm();\n continueNavigation();\n } catch {\n hidePrompt();\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n <BlockNavigationAlert\n {...{ isSaving, saveAndContinue }}\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={saveAndContinue ? handleSaveAndContinue : hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":["useState","useHistory","useRef","useCallback","useEffect","jsxs","Dialog","jsx","Button","useFormikContext"],"mappings":"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"}
@@ -78,11 +78,11 @@ const FormWrapper = React.forwardRef(
78
78
  scrollToError(formRef, errors, status);
79
79
  }
80
80
  } else {
81
- submitForm();
81
+ await submitForm();
82
82
  }
83
83
  } catch (error) {
84
84
  console.error(
85
- "An unhandled error was caught from validateForm()",
85
+ "An unhandled error was caught while validating or submitting the form",
86
86
  error
87
87
  );
88
88
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sources":["../../../src/formik/Form/ScrollToErrorField/utils.ts","../../../src/formik/Form/ScrollToErrorField/index.tsx","../../../src/formik/Form/FormWrapper.tsx","../../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught from validateForm()\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["is","useFormikContext","useEffect","forwardRef","useRef","useCallback","jsxs","FormikForm","jsx","Formik"],"mappings":";;;;;;;AAEA,MAAM,4BAAA,GAA+B,CACnC,MAAA,EACA,MAAA,GAAS,EAAA,KACI;AACb,EAAA,MAAM,SAAmB,EAAC;AAE1B,EAAA,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAA,CAAE,OAAA,CAAQ,CAAC,CAAC,GAAA,EAAK,KAAK,CAAA,KAAM;AAC/C,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,MAAM,UAAU,MAAA,GAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GAAK,GAAA;AAC9C,IAAA,IAAIA,QAAA,CAAG,MAAA,EAAQ,KAAK,CAAA,EAAG;AACrB,MAAA,MAAA,CAAO,IAAA;AAAA,QACL,GAAG,4BAAA;AAAA,UACD,KAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,IACF,CAAA,MAAO;AACL,MAAA,MAAA,CAAO,KAAK,OAAO,CAAA;AAAA,IACrB;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,MAAA;AACT,CAAA;AAEA,MAAM,oBAAoB,CACxB,YAAA,KACuB,4BAAA,CAA6B,YAAY,IAAI,CAAC,CAAA;AAEhE,MAAM,wBAAA,GAA2B,CACtC,MAAA,GAAkC,OAElC,MAAA,CAAO,IAAA,CAAK,MAAM,CAAA,CAAE,MAAA;AAAA,EAClB,eAAa,MAAA,CAAO,SAAS,KAAK,IAAA,IAAQ,MAAA,CAAO,SAAS,CAAA,KAAM;AAClE,CAAA;AAEK,MAAM,aAAA,GAAgB,CAC3B,OAAA,EACA,MAAA,EACA,MAAA,KACS;AACT,EAAA,MAAM,cAAA,GAAiB,kBAAkB,MAAM,CAAA;AAC/C,EAAA,MAAM,CAAC,oBAAoB,CAAA,GAAI,wBAAA,CAAyB,MAAM,CAAA;AAE9D,EAAA,IAAI,CAAC,cAAA,IAAkB,CAAC,oBAAA,EAAsB;AAE9C,EAAA,MAAM,iBAAiB,cAAA,IAAkB,oBAAA;AACzC,EAAA,MAAM,gBAAA,GAAmB,QAAQ,OAAA,EAAS,aAAA;AAAA,IACxC,UAAU,cAAc,CAAA,EAAA;AAAA,GAC1B;AAEA,EAAA,gBAAA,EAAkB,cAAA,CAAe;AAAA,IAC/B,QAAA,EAAU,QAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACR,CAAA;AACH,CAAA;;AC9CA,MAAM,kBAAA,GAAqB,CAAC,EAAE,OAAA,EAAQ,KAA+B;AACnE,EAAA,MAAM,EAAE,WAAA,EAAa,OAAA,EAAS,MAAA,EAAQ,MAAA,KAAWC,uBAAA,EAAiB;AAElE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,qBAAA,GAAwB,yBAAyB,MAAM,CAAA;AAC7D,IAAA,IAAI,CAAC,OAAA,CAAQ,OAAA,IAAY,OAAA,IAAW,qBAAA,CAAsB,WAAW,CAAA,EAAI;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,aAAA,CAAc,OAAA,EAAS,QAAmC,MAAM,CAAA;AAAA,EAClE,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,OAAO,IAAA;AACT,CAAA;;ACNA,MAAM,WAAA,GAAcC,gBAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,WAAW,QAAA,EAAU,kBAAA,IAAsB,GAAA,KAAQ;AAC/D,IAAA,MAAM,EAAE,cAAc,SAAA,EAAW,UAAA,EAAY,YAAY,GAAG,SAAA,KAC1DF,uBAAA,EAAiB;AAEnB,IAAA,MAAM,EAAE,KAAA,EAAO,WAAA,EAAa,YAAA,EAAc,QAAO,GAAI,SAAA;AAErD,IAAA,MAAM,4BAAA,GAA+BG,aAAwB,IAAI,CAAA;AACjE,IAAA,MAAM,UACH,GAAA,IACD,4BAAA;AAEF,IAAA,MAAM,aAAA,GAAgBC,iBAAA;AAAA,MACpB,OAAO,KAAA,KAAgD;AACrD,QAAA,MAAM,SAAS,KAAA,CAAM,MAAA;AACrB,QAAA,MAAM,2BAAA,GACJ,MAAA,CAAO,OAAA,KAAY,UAAA,IAAc,MAAA,CAAO,MAAA;AAE1C,QAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AAC3B,QAAA,IAAI,2BAAA,IAA+B,CAAC,KAAA,CAAM,OAAA,EAAS;AAEnD,QAAA,KAAA,CAAM,cAAA,EAAe;AAErB,QAAA,IAAI,MAAM,QAAA,EAAU;AACpB,QAAA,IAAI,CAAC,eAAe,YAAA,EAAc;AAElC,QAAA,IAAI;AACF,UAAA,MAAM,MAAA,GAAS,MAAM,YAAA,EAAa;AAClC,UAAA,MAAM,aAAA,GAAgB,yBAAyB,MAAM,CAAA;AAErD,UAAA,IACE,MAAA,CAAO,IAAA,CAAK,MAAM,CAAA,CAAE,MAAA,GAAS,CAAA,IAC7B,MAAA,CAAO,IAAA,CAAK,aAAa,CAAA,CAAE,MAAA,GAAS,CAAA,EACpC;AACA,YAAA,SAAA,CAAU,MAAM,CAAA;AAChB,YAAA,UAAA,CAAW,EAAE,GAAG,MAAA,EAAQ,GAAG,QAAQ,CAAA;AACnC,YAAA,IAAI,kBAAA,EAAoB;AACtB,cAAA,aAAA,CAAc,OAAA,EAAS,QAAmC,MAAM,CAAA;AAAA,YAClE;AAAA,UACF,CAAA,MAAO;AACL,YAAA,UAAA,EAAW;AAAA,UACb;AAAA,QACF,SAAS,KAAA,EAAO;AACd,UAAA,OAAA,CAAQ,KAAA;AAAA,YACN,mDAAA;AAAA,YACA;AAAA,WACF;AAAA,QACF;AAAA,MACF,CAAA;AAAA,MACA;AAAA,QACE,YAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA,WAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,QACA,MAAA;AAAA,QACA,kBAAA;AAAA,QACA;AAAA;AACF,KACF;AAEA,IAAA,uBACEC,eAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACE,GAAG,EAAE,SAAA,EAAU;AAAA,QAChB,UAAA,EAAU,IAAA;AAAA,QACV,GAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,aAAA;AAAA,QACV,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,kBAAA,oBAAsBC,cAAA,CAAC,kBAAA,EAAA,EAAoB,GAAG,EAAE,SAAQ,EAAG,CAAA;AAAA,UAC3D;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;AC1E1B,MAAM,IAAA,GAAOL,gBAAA;AAAA,EACX,CACE,EAAE,SAAA,EAAW,QAAA,EAAU,aAAa,SAAA,EAAW,kBAAA,GAAqB,KAAA,EAAM,EAC1E,GAAA,KACG;AACH,IAAA,MAAM,SAAA,GAAYC,aAAkC,IAAI,CAAA;AAExD,IAAA,MAAM,YAAA,GAAuD,CAC3D,MAAA,EACA,OAAA,KACG;AACH,MAAA,MAAM,qBAAA,GAAwB,wBAAA;AAAA,QAC5B,UAAU,OAAA,EAAS;AAAA,OACrB;AAEA,MAAA,IAAI,qBAAA,CAAsB,SAAS,CAAA,EAAG;AACpC,QAAA,OAAA,CAAQ,cAAc,KAAK,CAAA;AAE3B,QAAA,OAAO,MAAA;AAAA,MACT;AAEA,MAAA,OAAO,WAAA,CAAY,QAAA,CAAS,MAAA,EAAQ,OAAO,CAAA;AAAA,IAC7C,CAAA;AAEA,IAAA,uBACEI,cAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAU,SAAA;AAAA,QACT,GAAG,WAAA;AAAA,QACJ,QAAA,EAAU,YAAA;AAAA,QAET,qCACCD,cAAA,CAAC,WAAA,EAAA,EAAa,GAAG,EAAE,WAAW,SAAA,EAAW,GAAA,EAAK,kBAAA,EAAmB,EAC9D,iBAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,KAAK,IAAI,QAAA,EACtD;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
1
+ {"version":3,"file":"Form.js","sources":["../../../src/formik/Form/ScrollToErrorField/utils.ts","../../../src/formik/Form/ScrollToErrorField/index.tsx","../../../src/formik/Form/FormWrapper.tsx","../../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n await submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught while validating or submitting the form\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["is","useFormikContext","useEffect","forwardRef","useRef","useCallback","jsxs","FormikForm","jsx","Formik"],"mappings":"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"}
@@ -1,9 +1,15 @@
1
1
  export interface BlockNavigationAlertProps {
2
2
  /** Whether the alert dialog is open. */
3
3
  isOpen?: boolean;
4
+ /** Whether the form is being saved. Shows a loader on the primary button and
5
+ * prevents the dialog from being dismissed. */
6
+ isSaving?: boolean;
7
+ /** Whether the primary button saves the form before resuming navigation.
8
+ * Defaults to true; pass false for the older "Stay on this page" behaviour. */
9
+ saveAndContinue?: boolean;
4
10
  /** Called when the dialog should close. */
5
11
  onClose?: () => void;
6
- /** Called when the user chooses to stay. */
12
+ /** Called when the user chooses to save and continue, or to stay. */
7
13
  onSubmit?: () => void;
8
14
  /** Called when the user chooses to discard and leave. */
9
15
  onDiscardChanges?: () => void;
@@ -13,11 +19,12 @@ export interface BlockNavigationAlertProps {
13
19
  message?: string;
14
20
  /** Custom label for the discard/cancel button. */
15
21
  cancelButtonLabel?: string;
16
- /** Custom label for the stay/submit button. */
22
+ /** Custom label for the primary button. Defaults to "Save and continue" when
23
+ * saveAndContinue is enabled and "Stay on this page" otherwise. */
17
24
  submitButtonLabel?: string;
18
25
  }
19
26
  declare const BlockNavigationAlert: {
20
- ({ isOpen, onClose, onSubmit, onDiscardChanges, title, message, cancelButtonLabel, submitButtonLabel, }: BlockNavigationAlertProps): import("react/jsx-runtime").JSX.Element;
27
+ ({ isOpen, isSaving, saveAndContinue, onClose, onSubmit, onDiscardChanges, title, message, cancelButtonLabel, submitButtonLabel, }: BlockNavigationAlertProps): import("react/jsx-runtime").JSX.Element;
21
28
  displayName: string;
22
29
  };
23
30
  export { BlockNavigationAlert };
@@ -1,10 +1,10 @@
1
1
  import { type BlockNavigationAlertProps } from "./BlockNavigationAlert";
2
- export interface FormikBlockNavigationProps extends Omit<BlockNavigationAlertProps, "isOpen" | "onClose" | "onSubmit" | "onDiscardChanges"> {
2
+ export interface FormikBlockNavigationProps extends Omit<BlockNavigationAlertProps, "isOpen" | "isSaving" | "onClose" | "onSubmit" | "onDiscardChanges"> {
3
3
  /** Force the navigation block regardless of Formik dirty state. */
4
4
  isDirty?: boolean;
5
5
  }
6
6
  declare const FormikBlockNavigation: {
7
- ({ isDirty, ...otherProps }: FormikBlockNavigationProps): import("react/jsx-runtime").JSX.Element;
7
+ ({ isDirty, saveAndContinue, ...otherProps }: FormikBlockNavigationProps): import("react/jsx-runtime").JSX.Element;
8
8
  displayName: string;
9
9
  };
10
10
  export { FormikBlockNavigation };
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useFormikContext } from 'formik';
3
2
  import { useState, useRef, useCallback, useEffect } from 'react';
3
+ import { useFormikContext } from 'formik';
4
4
  import { useHistory } from 'react-router-dom';
5
5
  import { D as Dialog } from '../Dialog-Yw34WDqY.js';
6
6
  import { b as Button } from '../Button-ZssOVkG0.js';
@@ -97,24 +97,27 @@ const useNavPrompt = ({
97
97
 
98
98
  const BlockNavigationAlert = ({
99
99
  isOpen = false,
100
+ isSaving = false,
101
+ saveAndContinue = true,
100
102
  onClose,
101
103
  onSubmit,
102
104
  onDiscardChanges,
103
105
  title = "You have unsaved changes",
104
106
  message = "Are you sure you want to leave? All unsaved changes will be lost.",
105
107
  cancelButtonLabel = "Discard and leave",
106
- submitButtonLabel = "Stay on this page"
108
+ submitButtonLabel
107
109
  }) => {
108
110
  const submitButtonRef = useRef(null);
111
+ const primaryButtonLabel = submitButtonLabel ?? (saveAndContinue ? "Save and continue" : "Stay on this page");
109
112
  return /* @__PURE__ */ jsxs(
110
113
  Dialog,
111
114
  {
112
115
  isOpen,
113
116
  onClose: onClose ?? (() => {
114
117
  }),
115
- closeButton: true,
116
- closeOnEsc: true,
117
- closeOnOutsideClick: true,
118
+ closeButton: !isSaving,
119
+ closeOnEsc: !isSaving,
120
+ closeOnOutsideClick: !isSaving,
118
121
  initialFocusRef: submitButtonRef,
119
122
  size: "medium",
120
123
  "data-testid": "alert-box",
@@ -133,6 +136,7 @@ const BlockNavigationAlert = ({
133
136
  Button,
134
137
  {
135
138
  "data-testid": "alert-cancel-button",
139
+ disabled: isSaving,
136
140
  label: cancelButtonLabel,
137
141
  variant: "destructive",
138
142
  onClick: onDiscardChanges
@@ -142,7 +146,8 @@ const BlockNavigationAlert = ({
142
146
  Button,
143
147
  {
144
148
  "data-testid": "alert-submit-button",
145
- label: submitButtonLabel,
149
+ label: primaryButtonLabel,
150
+ loading: isSaving,
146
151
  ref: submitButtonRef,
147
152
  onClick: onSubmit
148
153
  }
@@ -156,8 +161,10 @@ BlockNavigationAlert.displayName = "BlockNavigationAlert";
156
161
 
157
162
  const FormikBlockNavigation = ({
158
163
  isDirty = false,
164
+ saveAndContinue = true,
159
165
  ...otherProps
160
166
  }) => {
167
+ const [isSaving, setIsSaving] = useState(false);
161
168
  const formikContext = useFormikContext();
162
169
  const shouldBlock = isDirty || Boolean(formikContext) && Boolean(formikContext.dirty);
163
170
  const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({
@@ -168,13 +175,35 @@ const FormikBlockNavigation = ({
168
175
  hidePrompt();
169
176
  continueNavigation();
170
177
  };
178
+ const handleSaveAndContinue = async () => {
179
+ if (!formikContext) {
180
+ hidePrompt();
181
+ return;
182
+ }
183
+ setIsSaving(true);
184
+ try {
185
+ const errors = await formikContext.validateForm();
186
+ if (Object.keys(errors).length > 0) {
187
+ await formikContext.submitForm();
188
+ hidePrompt();
189
+ return;
190
+ }
191
+ await formikContext.submitForm();
192
+ continueNavigation();
193
+ } catch {
194
+ hidePrompt();
195
+ } finally {
196
+ setIsSaving(false);
197
+ }
198
+ };
171
199
  return /* @__PURE__ */ jsx(
172
200
  BlockNavigationAlert,
173
201
  {
202
+ ...{ isSaving, saveAndContinue },
174
203
  isOpen: isBlocked,
175
204
  onClose: hidePrompt,
176
205
  onDiscardChanges: handleDiscardChanges,
177
- onSubmit: hidePrompt,
206
+ onSubmit: saveAndContinue ? handleSaveAndContinue : hidePrompt,
178
207
  ...otherProps
179
208
  }
180
209
  );
@@ -1 +1 @@
1
- {"version":3,"file":"BlockNavigation.js","sources":["../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the stay/submit button. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel = \"Stay on this page\",\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton\n closeOnEsc\n closeOnOutsideClick\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={submitButtonLabel}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n return (\n <BlockNavigationAlert\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BlockNavigation.js","sources":["../../src/formik/BlockNavigation/hooks/useNavPrompt.ts","../../src/formik/BlockNavigation/BlockNavigationAlert.tsx","../../src/formik/BlockNavigation/index.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { useHistory } from \"react-router-dom\";\n\ninterface UseNavPromptOptions {\n /** Whether navigation should be blocked. */\n shouldBlock?: boolean;\n}\n\ninterface UseNavPromptReturn {\n /** Whether a navigation attempt is currently blocked. */\n isBlocked: boolean;\n /** Unblock and continue the pending navigation. */\n continueNavigation: () => void;\n /** Dismiss the prompt without navigating. */\n hidePrompt: () => void;\n}\n\nconst useNavPrompt = ({\n shouldBlock = true,\n}: UseNavPromptOptions): UseNavPromptReturn => {\n const [isBlocked, setIsBlocked] = useState(false);\n\n const history = useHistory();\n\n const unblockRef = useRef<(() => void) | undefined>(undefined);\n const navRef = useRef<{ transition: string; action: string } | null>(null);\n\n const handleNavigation = useCallback(\n (action: string, transition: string) => {\n switch (action) {\n case \"PUSH\":\n history.push(transition);\n break;\n case \"REPLACE\":\n history.replace(transition);\n break;\n case \"POP\":\n history.goBack();\n break;\n }\n },\n [history]\n );\n\n const continueNavigation = useCallback(() => {\n if (isBlocked && unblockRef.current) {\n unblockRef.current();\n setIsBlocked(false);\n if (navRef.current) {\n const { action, transition } = navRef.current;\n handleNavigation(action, transition);\n }\n }\n }, [isBlocked, handleNavigation]);\n\n const hidePrompt = useCallback(() => setIsBlocked(false), []);\n\n useEffect(() => {\n if (shouldBlock) {\n unblockRef.current = history.block(\n (transition: { pathname: string }, action: string) => {\n setIsBlocked(true);\n navRef.current = { transition: transition.pathname, action };\n\n return false;\n }\n ) as unknown as () => void;\n\n return () => {\n unblockRef.current?.();\n };\n }\n\n return undefined;\n }, [shouldBlock, history]);\n\n return { isBlocked, continueNavigation, hidePrompt };\n};\n\nexport { useNavPrompt };\nexport type { UseNavPromptOptions, UseNavPromptReturn };\n","import { useRef } from \"react\";\n\nimport { Button } from \"src/components/Button\";\nimport { Dialog } from \"src/components/Dialog\";\n\nexport interface BlockNavigationAlertProps {\n /** Whether the alert dialog is open. */\n isOpen?: boolean;\n /** Whether the form is being saved. Shows a loader on the primary button and\n * prevents the dialog from being dismissed. */\n isSaving?: boolean;\n /** Whether the primary button saves the form before resuming navigation.\n * Defaults to true; pass false for the older \"Stay on this page\" behaviour. */\n saveAndContinue?: boolean;\n /** Called when the dialog should close. */\n onClose?: () => void;\n /** Called when the user chooses to save and continue, or to stay. */\n onSubmit?: () => void;\n /** Called when the user chooses to discard and leave. */\n onDiscardChanges?: () => void;\n /** Custom title for the alert. */\n title?: string;\n /** Custom message for the alert body. */\n message?: string;\n /** Custom label for the discard/cancel button. */\n cancelButtonLabel?: string;\n /** Custom label for the primary button. Defaults to \"Save and continue\" when\n * saveAndContinue is enabled and \"Stay on this page\" otherwise. */\n submitButtonLabel?: string;\n}\n\nconst BlockNavigationAlert = ({\n isOpen = false,\n isSaving = false,\n saveAndContinue = true,\n onClose,\n onSubmit,\n onDiscardChanges,\n title = \"You have unsaved changes\",\n message = \"Are you sure you want to leave? All unsaved changes will be lost.\",\n cancelButtonLabel = \"Discard and leave\",\n submitButtonLabel,\n}: BlockNavigationAlertProps) => {\n const submitButtonRef = useRef<HTMLButtonElement>(null);\n\n const primaryButtonLabel =\n submitButtonLabel ??\n (saveAndContinue ? \"Save and continue\" : \"Stay on this page\");\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose ?? (() => {})}\n closeButton={!isSaving}\n closeOnEsc={!isSaving}\n closeOnOutsideClick={!isSaving}\n initialFocusRef={submitButtonRef}\n size=\"medium\"\n data-testid=\"alert-box\"\n >\n <Dialog.Header>\n <Dialog.Title data-testid=\"alert-title\">{title}</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body>\n <p\n data-testid=\"alert-message\"\n className=\"text-sm text-muted-foreground\"\n >\n {message}\n </p>\n </Dialog.Body>\n <Dialog.Footer className=\"flex items-center justify-end gap-2\">\n <Button\n data-testid=\"alert-cancel-button\"\n disabled={isSaving}\n label={cancelButtonLabel}\n variant=\"destructive\"\n onClick={onDiscardChanges}\n />\n <Button\n data-testid=\"alert-submit-button\"\n label={primaryButtonLabel}\n loading={isSaving}\n ref={submitButtonRef}\n onClick={onSubmit}\n />\n </Dialog.Footer>\n </Dialog>\n );\n};\n\nBlockNavigationAlert.displayName = \"BlockNavigationAlert\";\n\nexport { BlockNavigationAlert };\n","import { useState } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { useNavPrompt } from \"./hooks/useNavPrompt\";\n\nimport {\n BlockNavigationAlert,\n type BlockNavigationAlertProps,\n} from \"./BlockNavigationAlert\";\n\nexport interface FormikBlockNavigationProps extends Omit<\n BlockNavigationAlertProps,\n \"isOpen\" | \"isSaving\" | \"onClose\" | \"onSubmit\" | \"onDiscardChanges\"\n> {\n /** Force the navigation block regardless of Formik dirty state. */\n isDirty?: boolean;\n}\n\nconst FormikBlockNavigation = ({\n isDirty = false,\n saveAndContinue = true,\n ...otherProps\n}: FormikBlockNavigationProps) => {\n const [isSaving, setIsSaving] = useState(false);\n\n const formikContext = useFormikContext();\n const shouldBlock =\n isDirty || (Boolean(formikContext) && Boolean(formikContext.dirty));\n\n const { isBlocked, continueNavigation, hidePrompt } = useNavPrompt({\n shouldBlock,\n });\n\n const handleDiscardChanges = () => {\n if (formikContext) formikContext.resetForm();\n hidePrompt();\n continueNavigation();\n };\n\n const handleSaveAndContinue = async () => {\n if (!formikContext) {\n hidePrompt();\n\n return;\n }\n\n setIsSaving(true);\n try {\n const errors = await formikContext.validateForm();\n if (Object.keys(errors).length > 0) {\n await formikContext.submitForm();\n hidePrompt();\n\n return;\n }\n\n await formikContext.submitForm();\n continueNavigation();\n } catch {\n hidePrompt();\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n <BlockNavigationAlert\n {...{ isSaving, saveAndContinue }}\n isOpen={isBlocked}\n onClose={hidePrompt}\n onDiscardChanges={handleDiscardChanges}\n onSubmit={saveAndContinue ? handleSaveAndContinue : hidePrompt}\n {...otherProps}\n />\n );\n};\n\nFormikBlockNavigation.displayName = \"FormikBlockNavigation\";\n\nexport { FormikBlockNavigation };\nexport type { BlockNavigationAlertProps };\n"],"names":[],"mappings":"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"}
@@ -76,11 +76,11 @@ const FormWrapper = forwardRef(
76
76
  scrollToError(formRef, errors, status);
77
77
  }
78
78
  } else {
79
- submitForm();
79
+ await submitForm();
80
80
  }
81
81
  } catch (error) {
82
82
  console.error(
83
- "An unhandled error was caught from validateForm()",
83
+ "An unhandled error was caught while validating or submitting the form",
84
84
  error
85
85
  );
86
86
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Form.js","sources":["../../src/formik/Form/ScrollToErrorField/utils.ts","../../src/formik/Form/ScrollToErrorField/index.tsx","../../src/formik/Form/FormWrapper.tsx","../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught from validateForm()\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["FormikForm"],"mappings":"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"}
1
+ {"version":3,"file":"Form.js","sources":["../../src/formik/Form/ScrollToErrorField/utils.ts","../../src/formik/Form/ScrollToErrorField/index.tsx","../../src/formik/Form/FormWrapper.tsx","../../src/formik/Form/index.tsx"],"sourcesContent":["import { is } from \"ramda\";\n\nconst transformObjectToDotNotation = (\n object: Record<string, unknown>,\n prefix = \"\"\n): string[] => {\n const result: string[] = [];\n\n Object.entries(object).forEach(([key, value]) => {\n if (!value) return;\n const nextKey = prefix ? `${prefix}.${key}` : key;\n if (is(Object, value)) {\n result.push(\n ...transformObjectToDotNotation(\n value as Record<string, unknown>,\n nextKey\n )\n );\n } else {\n result.push(nextKey);\n }\n });\n\n return result;\n};\n\nconst getErrorFieldName = (\n formikErrors: Record<string, unknown>\n): string | undefined => transformObjectToDotNotation(formikErrors)?.[0];\n\nexport const getFieldsWithServerError = (\n status: Record<string, unknown> = {}\n): string[] =>\n Object.keys(status).filter(\n fieldName => status[fieldName] != null && status[fieldName] !== \"\"\n );\n\nexport const scrollToError = (\n formRef: React.RefObject<HTMLFormElement | null>,\n errors: Record<string, unknown>,\n status: Record<string, unknown>\n): void => {\n const fieldErrorName = getErrorFieldName(errors);\n const [fieldWithServerError] = getFieldsWithServerError(status);\n\n if (!fieldErrorName && !fieldWithServerError) return;\n\n const errorFieldName = fieldErrorName || fieldWithServerError;\n const errorFormElement = formRef.current?.querySelector(\n `[name=\"${errorFieldName}\"]`\n );\n\n errorFormElement?.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n};\n","import { useEffect } from \"react\";\n\nimport { useFormikContext } from \"formik\";\n\nimport { getFieldsWithServerError, scrollToError } from \"./utils\";\n\ninterface ScrollToErrorFieldProps {\n formRef: React.RefObject<HTMLFormElement | null>;\n}\n\nconst ScrollToErrorField = ({ formRef }: ScrollToErrorFieldProps) => {\n const { submitCount, isValid, errors, status } = useFormikContext();\n\n useEffect(() => {\n const fieldsWithServerError = getFieldsWithServerError(status);\n if (!formRef.current || (isValid && fieldsWithServerError.length === 0)) {\n return;\n }\n\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }, [submitCount]);\n\n return null;\n};\n\nexport default ScrollToErrorField;\n","import React, { useCallback, forwardRef, useRef } from \"react\";\n\nimport { Form as FormikForm, useFormikContext } from \"formik\";\n\nimport ScrollToErrorField from \"./ScrollToErrorField\";\nimport {\n getFieldsWithServerError,\n scrollToError,\n} from \"./ScrollToErrorField/utils\";\n\ninterface FormWrapperProps {\n className?: string;\n formProps?: React.ComponentProps<\"form\">;\n children: React.ReactNode;\n scrollToErrorField: boolean;\n}\n\nconst FormWrapper = forwardRef<HTMLFormElement, FormWrapperProps>(\n ({ className, formProps, children, scrollToErrorField }, ref) => {\n const { validateForm, setErrors, setTouched, submitForm, ...formikBag } =\n useFormikContext();\n\n const { dirty: isFormDirty, isSubmitting, status } = formikBag;\n\n const formRefForScrollToErrorField = useRef<HTMLFormElement>(null);\n const formRef =\n (ref as React.RefObject<HTMLFormElement | null>) ||\n formRefForScrollToErrorField;\n\n const handleKeyDown = useCallback(\n async (event: React.KeyboardEvent<HTMLFormElement>) => {\n const target = event.target as HTMLElement & { editor?: unknown };\n const isEventFromEditorOrTextarea =\n target.tagName === \"TEXTAREA\" || target.editor;\n\n if (event.key !== \"Enter\") return;\n if (isEventFromEditorOrTextarea && !event.metaKey) return;\n\n event.preventDefault();\n\n if (event.shiftKey) return;\n if (!isFormDirty || isSubmitting) return;\n\n try {\n const errors = await validateForm();\n const fieldStatuses = getFieldsWithServerError(status);\n\n if (\n Object.keys(errors).length > 0 ||\n Object.keys(fieldStatuses).length > 0\n ) {\n setErrors(errors);\n setTouched({ ...errors, ...status });\n if (scrollToErrorField) {\n scrollToError(formRef, errors as Record<string, unknown>, status);\n }\n } else {\n await submitForm();\n }\n } catch (error) {\n console.error(\n \"An unhandled error was caught while validating or submitting the form\",\n error\n );\n }\n },\n [\n validateForm,\n setErrors,\n setTouched,\n isFormDirty,\n isSubmitting,\n submitForm,\n status,\n scrollToErrorField,\n formRef,\n ]\n );\n\n return (\n <FormikForm\n {...{ className }}\n noValidate\n ref={formRef}\n onKeyDown={handleKeyDown}\n {...formProps}\n >\n {scrollToErrorField && <ScrollToErrorField {...{ formRef }} />}\n {children}\n </FormikForm>\n );\n }\n);\n\nFormWrapper.displayName = \"FormWrapper\";\n\nexport default FormWrapper;\n","import React, { forwardRef, useRef } from \"react\";\n\nimport { Formik, FormikConfig, FormikProps, FormikValues } from \"formik\";\n\nimport FormWrapper from \"./FormWrapper\";\nimport { getFieldsWithServerError } from \"./ScrollToErrorField/utils\";\n\nexport interface FormProps<T extends FormikValues = FormikValues> {\n /** Formik configuration: initialValues, validationSchema, onSubmit, etc. */\n formikProps: FormikConfig<T>;\n /** Props forwarded to the HTML form element. */\n formProps?: React.ComponentProps<\"form\">;\n /** Auto-scroll to the first error field on submit. */\n scrollToErrorField?: boolean;\n /** Additional class name for the form wrapper. */\n className?: string;\n /** Render children directly or as a function receiving FormikProps. */\n children: React.ReactNode | ((props: FormikProps<T>) => React.ReactNode);\n}\n\nconst Form = forwardRef<HTMLFormElement, FormProps>(\n (\n { className, children, formikProps, formProps, scrollToErrorField = false },\n ref\n ) => {\n const formikRef = useRef<FormikProps<FormikValues>>(null);\n\n const handleSubmit: FormikConfig<FormikValues>[\"onSubmit\"] = (\n values,\n actions\n ) => {\n const fieldsWithServerError = getFieldsWithServerError(\n formikRef.current?.status\n );\n\n if (fieldsWithServerError.length > 0) {\n actions.setSubmitting(false);\n\n return undefined;\n }\n\n return formikProps.onSubmit(values, actions);\n };\n\n return (\n <Formik\n innerRef={formikRef as React.Ref<FormikProps<FormikValues>>}\n {...formikProps}\n onSubmit={handleSubmit}\n >\n {props => (\n <FormWrapper {...{ className, formProps, ref, scrollToErrorField }}>\n {typeof children === \"function\" ? children(props) : children}\n </FormWrapper>\n )}\n </Formik>\n );\n }\n);\n\nForm.displayName = \"Form\";\n\nexport { Form };\n"],"names":["FormikForm"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neeto-atoms",
3
- "version": "1.0.133-beta2",
3
+ "version": "1.0.134-beta1",
4
4
  "author": "BigBinary",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -76,6 +76,7 @@
76
76
  },
77
77
  "devDependencies": {
78
78
  "@base-ui/react": "^1.3.0",
79
+ "@bigbinary/neeto-audit-frontend": "2.5.5",
79
80
  "@bigbinary/neeto-commons-frontend": "4.13.113",
80
81
  "@chromatic-com/storybook": "^5.0.1",
81
82
  "@dnd-kit/core": "6.3.1",