@cerebruminc/cerebellum 20.0.3 → 20.0.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-component-lib-boilerplate
 
+## [20.0.4](https://github.com/cerebruminc/cerebellum/compare/v20.0.3...v20.0.4) (2026-08-12)
+
+
+### Bug Fixes
+
+* expose Google secondary address ([2ce454c](https://github.com/cerebruminc/cerebellum/commit/2ce454cc9a2f55b5eea285e2c158d0c4fa310378))
+* upgrade next to 16.2.11 ([89700e3](https://github.com/cerebruminc/cerebellum/commit/89700e37e09c1f680001cff682c4f7646351070a))
+
 ## [20.0.3](https://github.com/cerebruminc/cerebellum/compare/v20.0.2...v20.0.3) (2026-08-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "20.0.3",
+  "version": "20.0.4",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -94,7 +94,7 @@
     "lint-staged": "^15.0.0",
     "lorem-ipsum": "^2.0.4",
     "msw": "^2.14.6",
-    "next": "^16.2.10",
+    "next": "^16.2.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",

package/src/components/AddressInput/AddressInput.mdx

@@ -64,6 +64,7 @@ import { AddressInput } from "@cerebruminc/cerebellum";
 | stateAbbreviation | string             | Two letter state abbreviation                                                                |
 | street            | string             | Street address, including number. Does not include preceeding text, like "Historic District" |
 | postalCode        | string             | zip code                                                                                     |
+| secondaryAddress  | optional string     | Apartment, unit, or suite from Google's `subpremise` component, when available              |
 | rawAddressObject  | AddressObjectProps | The location object returned by Google maps                                                  |
 
 <br />

package/src/components/AddressInput/AddressInput.test.tsx

@@ -1,6 +1,7 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { geocodeByPlaceId } from "react-places-autocomplete";
 import { withTheme } from "../../hocs/withTheme";
-import { AddressInput } from "./AddressInput";
+import { AddressInput, getSecondaryAddress } from "./AddressInput";
 
 jest.mock("@react-google-maps/api", () => {
   return {
@@ -17,9 +18,11 @@ jest.mock("@react-google-maps/api", () => {
 });
 
 let mockShouldThrow = false;
+let mockOnSelect: ((address: string, placeId: string, addressObject: any) => Promise<void>) | undefined;
 
 interface Props {
   children: () => void;
+  onSelect: (address: string, placeId: string, addressObject: any) => Promise<void>;
 }
 jest.mock("react-places-autocomplete", () => {
   const React = require("react");
@@ -44,18 +47,57 @@ jest.mock("react-places-autocomplete", () => {
       if (mockShouldThrow) {
         throw new Error("Google Maps JavaScript API library must be loaded");
       }
+      mockOnSelect = this.props.onSelect;
       return <>{this.props.children(this.renderProps)}</>;
     }
   }
 
-  return PlacesAutocomplete;
+  return {
+    __esModule: true,
+    default: PlacesAutocomplete,
+    geocodeByPlaceId: jest.fn(),
+  };
 });
 
 const ThemedAddressInput = withTheme(AddressInput);
+const mockGeocodeByPlaceId = geocodeByPlaceId as jest.Mock;
 
 describe("AddressInput", () => {
   afterEach(() => {
     mockShouldThrow = false;
+    mockGeocodeByPlaceId.mockReset();
+    mockOnSelect = undefined;
+  });
+
+  test("passes Google's secondary address to selection callbacks", async () => {
+    const onChange = jest.fn();
+    const addressObject = {
+      formattedSuggestion: { mainText: "415 East Irving Park Road" },
+      terms: [],
+    };
+    mockGeocodeByPlaceId.mockResolvedValue([
+      {
+        address_components: [
+          { long_name: "60613", types: ["postal_code"] },
+          { long_name: "APT 2N", types: ["subpremise"] },
+        ],
+      },
+    ]);
+
+    render(<ThemedAddressInput inputLabel="Address" value="" onChange={onChange} />);
+
+    await act(async () => {
+      await mockOnSelect?.("415 East Irving Park Road, Chicago, IL, USA", "place-id", addressObject);
+    });
+
+    expect(onChange).toHaveBeenLastCalledWith(
+      { target: { value: "415 East Irving Park Road, Chicago, IL, USA", name: undefined } },
+      expect.objectContaining({
+        postalCode: "60613",
+        rawAddressObject: addressObject,
+        secondaryAddress: "APT 2N",
+      })
+    );
   });
 
   test("renders AddressInput with a label", async () => {
@@ -88,3 +130,18 @@ describe("AddressInput", () => {
     });
   });
 });
+
+describe("getSecondaryAddress", () => {
+  test("returns Google's subpremise address component", () => {
+    expect(
+      getSecondaryAddress([
+        { long_name: "415", types: ["street_number"] },
+        { long_name: "APT 2N", types: ["subpremise"] },
+      ])
+    ).toBe("APT 2N");
+  });
+
+  test("returns undefined when there is no subpremise", () => {
+    expect(getSecondaryAddress([{ long_name: "East Irving Park Road", types: ["route"] }])).toBeUndefined();
+  });
+});

package/src/components/AddressInput/AddressInput.tsx

@@ -8,6 +8,15 @@ import { AddressInputErrorBoundary } from "./AddressInputErrorBoundary";
 import { AddressInputContainer, PlaceOption, PlacesList } from "./AddressInputStyles";
 import { AddressInputType, AddressObjectProps } from "./types";
 
+type GoogleAddressComponent = {
+  long_name: string;
+  types: string[];
+};
+
+export const getSecondaryAddress = (addressComponents: GoogleAddressComponent[]): string | undefined => {
+  return addressComponents.find((component) => component.types.includes("subpremise"))?.long_name;
+};
+
 export const AddressInput: FC<AddressInputType> = (props: AddressInputType) => {
   const {
     disabled,
@@ -43,6 +52,7 @@ export const AddressInput: FC<AddressInputType> = (props: AddressInputType) => {
     // Get zip code
     const [place] = await geocodeByPlaceId(placeId);
     const { long_name: postalCode = "" } = place.address_components.find((c) => c.types.includes("postal_code")) || {};
+    const secondaryAddress = getSecondaryAddress(place.address_components);
     const stateAbbreviation = addressObject?.terms?.[addressObject?.terms?.length - 2]?.value;
 
     const details = {
@@ -52,6 +62,7 @@ export const AddressInput: FC<AddressInputType> = (props: AddressInputType) => {
       stateAbbreviation: addressObject?.terms?.[addressObject?.terms?.length - 2]?.value,
       street: addressObject?.formattedSuggestion?.mainText,
       postalCode,
+      secondaryAddress,
       rawAddressObject: addressObject,
     };
 

package/src/components/AddressInput/types.ts

@@ -49,6 +49,7 @@ export interface AddressDetailsType {
   stateAbbreviation?: string;
   street?: string;
   postalCode?: string;
+  secondaryAddress?: string;
   rawAddressObject: AddressObjectProps;
 }
 

package/src/mantine/mantineTheme.ts

@@ -46,6 +46,24 @@ const getLabelStyles = (theme: MantineTheme) => {
   };
 };
 
+/**
+ * Whether a Mantine `style` prop pins an explicit width. The prop accepts a
+ * single object, a theme callback, or arbitrarily nested arrays of either, so
+ * this walks the whole structure. Callbacks are treated as width-free because
+ * they can only be resolved once a theme is applied.
+ */
+const styleSetsWidth = (style: ButtonProps["style"]): boolean => {
+  if (!style || typeof style === "function") {
+    return false;
+  }
+
+  if (Array.isArray(style)) {
+    return style.some(styleSetsWidth);
+  }
+
+  return style.width !== undefined;
+};
+
 /**
  * Common variables for form input sizing.
  */
@@ -459,16 +477,27 @@ export const createCustomMantineTheme = (optionsOrBrandColor?: CreateCustomManti
 
           // Normalize sizes: sm and xs render at sm dimensions; md and all
           // other unsupported sizes (lg, xl, etc.) use md dimensions.
-          if (props.size === "xs" || props.size === "sm") {
-            root["--button-height"] = "32px";
-          } else {
-            // md (default) and all unsupported sizes → md sizing
-            root["--button-height"] = "46px";
-          }
+          const isSmall = props.size === "xs" || props.size === "sm";
+          root["--button-height"] = isSmall ? "32px" : "46px";
+
+          // An explicit width means the caller owns the button's footprint, so
+          // the generous default padding below is skipped and Mantine's
+          // per-size padding applies — otherwise the wider padding would eat
+          // into that fixed width and clip the label. Mirrors Cerebellum's
+          // `$buttonWidth ? 0` rule.
+          const hasExplicitWidth = props.w !== undefined || props.miw !== undefined || styleSetsWidth(props.style);
 
           if (props.boxed || props.variant === "subtle") {
             root["--button-radius"] = "8px";
             root["--button-padding-x"] = "22px";
+          } else if (!hasExplicitWidth) {
+            // Match Cerebellum's pill buttons, which used 45px of horizontal
+            // padding (30px when an icon was present). Mantine derives the
+            // icon-side padding as `--button-padding-x / 1.5`, so a single
+            // value reproduces both. Still overridable per call site via the
+            // `px`/`p` style props or `styles={{ root: { paddingInline } }}`,
+            // which render as inline styles and therefore win over this var.
+            root["--button-padding-x"] = isSmall ? "30px" : "45px";
           }
 
           if (props.variant === "light") {