@bacano/sdk 1.1.19 → 1.1.20

package/STOREFRONT_FORMS.md

@@ -35,6 +35,57 @@ idempotente estable y llama `client.forms.submitResponse(...)`. Un formulario
 pausado muestra su mensaje de indisponibilidad y deja de operar sin reconstruir
 el storefront.
 
+## Preseleccionar desde un botón externo
+
+Usa `values` y `onValuesChange` juntos para controlar el estado. El botón mezcla
+solo el campo que cambia: no reemplaces todo el objeto ni desmontes el formulario
+para preseleccionar. El visitante puede seguir editando cualquier campo.
+
+```tsx
+import { useRef, useState } from "react";
+import { BacanoForm, type BacanoFormValues } from "@bacano/sdk/react/forms";
+
+export function ProjectInquiry() {
+  const [values, setValues] = useState<BacanoFormValues>({});
+  const sectionRef = useRef<HTMLElement>(null);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => {
+          setValues((current) => ({ ...current, producto: "gaia" }));
+          sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+        }}
+      >
+        Me interesa Gaia
+      </button>
+      <section ref={sectionRef}>
+        <BacanoForm
+          formKey="contacto"
+          values={values}
+          onValuesChange={setValues}
+        />
+      </section>
+    </>
+  );
+}
+```
+
+- `producto` debe ser la key real del campo publicado y `gaia` el `value`
+  real de la opción, no su label. Usa `string[]` para `multi_select` y booleanos
+  para `checkbox`. Las validaciones publicadas siguen aplicándose.
+- Puedes inicializar `useState` con la preselección, incluso antes de cargar
+  la definición. Un cambio externo no reinicia los pasos ni los otros campos.
+- `onValuesChange` entrega el objeto completo tras cada edición del visitante;
+  los cambios externos se hacen sobre el estado del componente padre.
+- Las keys ajenas a la definición publicada no se envían. Si compartes un
+  componente entre distintos sitios o formularios, reinicia su estado al cambiar
+  de identidad; no reutilices los datos de un visitante entre formularios.
+- Sin `onSubmit` se mantiene el envío oficial, incluyendo la selección. No
+  necesitas otro endpoint, eventos DOM ni un formulario paralelo.
+- Omitir ambas props conserva el funcionamiento anterior, con estado interno.
+
 ## Estructura del formulario
 
 La definición tiene tres niveles explícitos:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacano/sdk",
-  "version": "1.1.19",
+  "version": "1.1.20",
   "description": "TypeScript SDK for building websites on the Bacano ERP",
   "main": "./index.cjs",
   "module": "./index.js",

package/react/forms.cjs

@@ -260,7 +260,7 @@ function BacanoForm(props) {
   const { form, loading, error } = useBacanoForm(props.formKey, {
     initialForm: props.initialForm
   });
-  const [values, setValues] = (0, import_react3.useState)({});
+  const [internalValues, setValues] = (0, import_react3.useState)({});
   const [step, setStep] = (0, import_react3.useState)(0);
   const [submitting, setSubmitting] = (0, import_react3.useState)(false);
   const [submitted, setSubmitted] = (0, import_react3.useState)(false);
@@ -283,6 +283,11 @@ function BacanoForm(props) {
     ),
     [fields, sections, steps]
   );
+  const values = Object.fromEntries(
+    Object.entries(props.values ?? internalValues).filter(
+      ([key]) => fieldKeys.has(key)
+    )
+  );
   (0, import_react3.useEffect)(() => {
     setStep(0);
     setValues(
@@ -308,7 +313,11 @@ function BacanoForm(props) {
   const isMultiStep = steps.length > 0;
   const activeStep = isMultiStep ? steps[step] : null;
   const isLastStep = !isMultiStep || step === steps.length - 1;
-  const setFieldValue = (key, value) => setValues((current) => ({ ...current, [key]: value }));
+  const setFieldValue = (key, value) => {
+    const nextValues = { ...values, [key]: value };
+    setValues(nextValues);
+    props.onValuesChange?.(nextValues);
+  };
   const submit = async (event) => {
     event.preventDefault();
     if (!isLastStep) {

package/react/forms.d.ts

@@ -33,6 +33,10 @@ export interface BacanoFormClassNames {
 }
 export interface BacanoFormProps {
     formKey: string;
+    /** Controlled values. Use together with onValuesChange; option values, not labels. */
+    values?: BacanoFormValues;
+    /** Receives the complete next values after a visitor edits a field. */
+    onValuesChange?(values: BacanoFormValues): void;
     /** Definition embedded by a server/build; it is revalidated in runtime. */
     initialForm?: WebsitePublishedForm | null;
     /**

package/react/forms.js

@@ -242,7 +242,7 @@ function BacanoForm(props) {
   const { form, loading, error } = useBacanoForm(props.formKey, {
     initialForm: props.initialForm
   });
-  const [values, setValues] = useState2({});
+  const [internalValues, setValues] = useState2({});
   const [step, setStep] = useState2(0);
   const [submitting, setSubmitting] = useState2(false);
   const [submitted, setSubmitted] = useState2(false);
@@ -265,6 +265,11 @@ function BacanoForm(props) {
     ),
     [fields, sections, steps]
   );
+  const values = Object.fromEntries(
+    Object.entries(props.values ?? internalValues).filter(
+      ([key]) => fieldKeys.has(key)
+    )
+  );
   useEffect2(() => {
     setStep(0);
     setValues(
@@ -290,7 +295,11 @@ function BacanoForm(props) {
   const isMultiStep = steps.length > 0;
   const activeStep = isMultiStep ? steps[step] : null;
   const isLastStep = !isMultiStep || step === steps.length - 1;
-  const setFieldValue = (key, value) => setValues((current) => ({ ...current, [key]: value }));
+  const setFieldValue = (key, value) => {
+    const nextValues = { ...values, [key]: value };
+    setValues(nextValues);
+    props.onValuesChange?.(nextValues);
+  };
   const submit = async (event) => {
     event.preventDefault();
     if (!isLastStep) {