{"version":3,"file":"AppProxyForm.mjs","sources":["../../../../../../src/react/components/AppProxyForm/AppProxyForm.tsx"],"sourcesContent":["import {forwardRef, useContext} from 'react';\nimport {Form, type FormProps} from '@remix-run/react';\n\nimport {AppProxyProviderContext} from '../AppProxyProvider';\n\nexport interface AppProxyFormProps extends FormProps {\n  action: string;\n}\n\n/**\n * Sets up a Remix `<Form>` component that works when rendered on an app proxy page.\n *\n * Supports any properties accepted by the `<Form>` component.\n *\n * Because Remix doesn't support URL rewriting, any route using this component should <b>match the pathname of the proxy\n * URL exactly</b>, and <b>end in a trailing slash</b> (e.g., `https://<shop>/apps/proxy/`), or set the Remix Form prop\n * `navigate` to `false`.\n *\n * @example\n * <caption>Render a form element in a proxied route.</caption>\n * <description>Use an `AppProxyForm` within an `AppProxy` to create a form.</description>\n * ```ts\n * // /app/routes/apps/appProxy.ts\n * import {\n *   AppProxyProvider,\n *   AppProxyForm,\n * } from \"@shopify/shopify-app-remix/react\";\n * import { authenticate } from \"~/shopify.server\";\n *\n * export async function loader({ request }) {\n *   await authenticate.public.appProxy(request);\n *\n *   return json({ appUrl: process.env.SHOPIFY_APP_URL });\n * }\n *\n * export async function action({ request }) {\n *   await authenticate.public.appProxy(request);\n *\n *   const formData = await request.formData();\n *   const field = formData.get(\"field\")?.toString();\n *\n *   // Perform actions\n *   if (field) {\n *     console.log(\"Field:\", field);\n *   }\n *\n *   // Return JSON to the client\n *   return json({ message: \"Success!\" });\n * }\n *\n * export default function App() {\n *   const { appUrl } = useLoaderData();\n *\n *   return (\n *     <AppProxyProvider appUrl={appUrl}>\n *       <AppProxyForm action=\"/apps/appProxy\" method=\"post\">\n *         <input type=\"text\" name=\"field\" />\n *\n *         <input type=\"submit\" name=\"Submit\" />\n *       </AppProxyForm>\n *     </AppProxyProvider>\n *   );\n * }\n * ```\n * @publicDocs\n */\nexport const AppProxyForm = forwardRef<HTMLFormElement, AppProxyFormProps>(\n  function AppProxyForm(props, ref) {\n    const context = useContext(AppProxyProviderContext);\n\n    if (!context) {\n      throw new Error(\n        'AppProxyForm must be used within an AppProxyProvider component',\n      );\n    }\n\n    const {children, action, ...otherProps} = props;\n\n    return (\n      <Form action={context.formatUrl(action, false)} {...otherProps} ref={ref}>\n        {children}\n      </Form>\n    );\n  },\n);\n"],"names":["_jsx"],"mappings":";;;;;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDG;AACI,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG,EAAA;AAC9B,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,uBAAuB,CAAC;IAEnD,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE;IACH;IAEA,MAAM,EAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,UAAU,EAAC,GAAG,KAAK;IAE/C,QACEA,GAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,EAAA,GAAM,UAAU,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EACrE,QAAQ,EAAA,CACJ;AAEX,CAAC;;;;"}