@cerebruminc/cerebellum 20.0.4 → 20.0.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [20.0.5](https://github.com/cerebruminc/cerebellum/compare/v20.0.4...v20.0.5) (2026-08-14)
+
+
+### Bug Fixes
+
+* automatically map secondary address fields ([40b046b](https://github.com/cerebruminc/cerebellum/commit/40b046b082855cf4be00d97940a6166f74722a6b))
+
 ## [20.0.4](https://github.com/cerebruminc/cerebellum/compare/v20.0.3...v20.0.4) (2026-08-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "20.0.4",
+  "version": "20.0.5",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",

package/src/components/Form/fields/AddressField/AddressField.mdx

@@ -58,6 +58,7 @@ const Example = ({ submit }) => {
 | onChange           | function                      | Called when the value is changed & returns the event                                                                                    | --      |
 | placeholder        | string                        | Placeholder text. Make it descriptive                                                                                                   | --      |
 | restrictToCountry  | string                        | The country code to restrict the search to. You can allow all international addresses by passing, `""`                                  | "USA"   |
+| secondaryAddressFieldName | string                 | `name` for a linked field. When an address is selected, it updates the field with Google's apartment, unit, or suite value.              | --      |
 | stateAbbrFieldName | string                        | `name` for a linked field. When and address is selected, it will update the associated field with the state abbreviation.               | --      |
 | stateFieldName     | string                        | `name` for a linked field. When and address is selected, it will update the associated field with the state.                            | --      |
 | streetAddressOnly  | boolean                       | Only shows the street address. `false` shows city, state, and country. Recommend `true` if using separate state, city, or other fields. | false   |
@@ -80,11 +81,17 @@ const Example = ({ submit }) => {
       type: FormFieldTypeEnum.Address,
       options: {
         cityFieldName: "city",
+        secondaryAddressFieldName: "addressLineTwo",
         stateAbbrFieldName: "state",
         streetAddressOnly: true,
         zipFieldName: "zip",
       },
     },
+    {
+      fieldLabel: "Suite/Apt/etc",
+      name: "addressLineTwo",
+      type: FormFieldTypeEnum.Text,
+    },
     {
       fieldLabel: "City",
       name: "city",

package/src/components/Form/fields/AddressField/AddressField.test.tsx

@@ -1,8 +1,54 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Form } from "../..";
 import { withTheme } from "../../../../hocs/withTheme";
 import { FormFieldTypeEnum } from "../../types";
 
+jest.mock("../../../AddressInput", () => {
+  const React = require("react");
+
+  return {
+    AddressInput: ({ inputLabel, onChange, placeholder }: any) => (
+      <label>
+        {inputLabel}
+        <input placeholder={placeholder} />
+        <button
+          onClick={() =>
+            onChange(
+              { target: { value: "415 East Irving Park Road", name: "addressLineOne" } },
+              {
+                city: "Chicago",
+                postalCode: "60613",
+                rawAddressObject: {},
+                secondaryAddress: "APT 2N",
+                stateAbbreviation: "IL",
+              }
+            )
+          }
+          type="button"
+        >
+          Select address
+        </button>
+        <button
+          onClick={() =>
+            onChange(
+              { target: { value: "415 East Irving Park Road", name: "addressLineOne" } },
+              {
+                city: "Chicago",
+                postalCode: "60613",
+                rawAddressObject: {},
+                stateAbbreviation: "IL",
+              }
+            )
+          }
+          type="button"
+        >
+          Select address without unit
+        </button>
+      </label>
+    ),
+  };
+});
+
 const ThemedForm = withTheme(Form);
 
 const addressOnly = [
@@ -28,4 +74,51 @@ describe("AddressField", () => {
     const label = screen.getByPlaceholderText(addressOnly[0].options.placeholder);
     expect(label).toBeInTheDocument();
   });
+
+  test("maps the Google secondary address to the configured form field", async () => {
+    const fields = [
+      {
+        fieldLabel: "Address",
+        name: "addressLineOne",
+        type: FormFieldTypeEnum.Address,
+        options: {
+          secondaryAddressFieldName: "addressLineTwo",
+        },
+      },
+      {
+        fieldLabel: "Suite/Apt/etc",
+        name: "addressLineTwo",
+        type: FormFieldTypeEnum.Text,
+      },
+    ];
+
+    render(<ThemedForm fields={fields} submit={() => {}} />);
+    fireEvent.click(screen.getByRole("button", { name: "Select address" }));
+
+    expect(await screen.findByDisplayValue("APT 2N")).toBeInTheDocument();
+  });
+
+  test("preserves the configured form field when Google does not return a secondary address", () => {
+    const fields = [
+      {
+        fieldLabel: "Address",
+        name: "addressLineOne",
+        type: FormFieldTypeEnum.Address,
+        options: {
+          secondaryAddressFieldName: "addressLineTwo",
+        },
+      },
+      {
+        fieldLabel: "Suite/Apt/etc",
+        initialValue: "Unit 4",
+        name: "addressLineTwo",
+        type: FormFieldTypeEnum.Text,
+      },
+    ];
+
+    render(<ThemedForm fields={fields} submit={() => {}} />);
+    fireEvent.click(screen.getByRole("button", { name: "Select address without unit" }));
+
+    expect(screen.getByDisplayValue("Unit 4")).toBeInTheDocument();
+  });
 });

package/src/components/Form/fields/AddressField/AddressField.tsx

@@ -24,7 +24,17 @@ export const AddressField: FC<AddressFieldProps> = ({
 
   const { setFieldError } = useFormikContext();
 
-  const { cityFieldName, countryFieldName, helperText, onInputBlur, onChange, stateAbbrFieldName, stateFieldName, zipFieldName } = options;
+  const {
+    cityFieldName,
+    countryFieldName,
+    helperText,
+    onInputBlur,
+    onChange,
+    secondaryAddressFieldName,
+    stateAbbrFieldName,
+    stateFieldName,
+    zipFieldName,
+  } = options;
   const showValidationMessage = (touched[name] || submitAttempt) && !!errors[name];
   const validationMessage = errors[name];
   const InputWrap = leftLabels ? InputBox : Fragment;
@@ -66,6 +76,12 @@ export const AddressField: FC<AddressFieldProps> = ({
                 handleChange({ target: { value: addressObject.country, name: countryFieldName } });
                 setTimeout(() => setFieldError(countryFieldName, undefined), 1);
               }
+              if (secondaryAddressFieldName && addressObject.secondaryAddress) {
+                handleChange({
+                  target: { value: addressObject.secondaryAddress, name: secondaryAddressFieldName },
+                });
+                setTimeout(() => setFieldError(secondaryAddressFieldName, undefined), 1);
+              }
               if (stateAbbrFieldName) {
                 handleChange({ target: { value: addressObject.stateAbbreviation, name: stateAbbrFieldName } });
                 setTimeout(() => setFieldError(stateAbbrFieldName, undefined), 1);

package/src/components/Form/mocks/fields.tsx

@@ -39,6 +39,7 @@ export const addressFields = [
     required: true,
     options: {
       cityFieldName: "city",
+      secondaryAddressFieldName: "suiteAptEtc",
       stateAbbrFieldName: "state",
       stateFieldName: "fullState",
       streetAddressOnly: true,
@@ -47,7 +48,7 @@ export const addressFields = [
   },
   {
     fieldLabel: "Suite/Apt/etc",
-    name: "Suite/Apt/etc",
+    name: "suiteAptEtc",
     initialValue: "",
     type: FormFieldTypeEnum.Text,
   },

package/src/components/Form/types.ts

@@ -226,6 +226,7 @@ export interface AddressOptionsType {
   onChange?: (event: { target: { value: string; name?: string } }, addressObject?: AddressDetailsType) => void;
   placeholder?: string;
   restrictToCountry?: string;
+  secondaryAddressFieldName?: string;
   stateAbbrFieldName?: string;
   stateFieldName?: string;
   streetAddressOnly?: boolean;