@poly-x/react 0.1.0-alpha.11 → 0.1.0-alpha.12

package/dist/index.cjs

@@ -1615,6 +1615,15 @@ function UserButtonRoot(props) {
 		setOpen(false);
 		if (returnFocus) triggerRef.current?.focus();
 	}, []);
+	const onOpenChange = props.onOpenChange;
+	const mounted = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		onOpenChange?.(open);
+	}, [open, onOpenChange]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const onKeyDown = (event) => {
@@ -1709,7 +1718,7 @@ function UserButtonRoot(props) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			ref: triggerRef,
 			type: "button",
-			className: "polyx-userbutton__trigger",
+			className: ["polyx-userbutton__trigger", props.triggerClassName].filter(Boolean).join(" "),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			"aria-controls": open ? menuId : void 0,

package/dist/index.d.cts

@@ -470,6 +470,13 @@ interface UserButtonProps {
   fallback?: ReactNode;
   /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
+  /**
+   * Appended to the trigger button's class list. The SDK owns that button, so without this a
+   * consumer could style everything except the one element they place in their own layout.
+   */
+  triggerClassName?: string;
+  /** Notified when the menu opens or closes — hosts often coordinate their own chrome around it. */
+  onOpenChange?: (open: boolean) => void;
   labels?: Partial<UserButtonLabels>;
   /**
    * `<UserButton.MenuItems>` with `<UserButton.Action>` / `<UserButton.Link>` / `<UserButton.Custom>`

package/dist/index.d.mts

@@ -470,6 +470,13 @@ interface UserButtonProps {
   fallback?: ReactNode;
   /** Appended to the root element's class list, for escape-hatch styling. */
   className?: string;
+  /**
+   * Appended to the trigger button's class list. The SDK owns that button, so without this a
+   * consumer could style everything except the one element they place in their own layout.
+   */
+  triggerClassName?: string;
+  /** Notified when the menu opens or closes — hosts often coordinate their own chrome around it. */
+  onOpenChange?: (open: boolean) => void;
   labels?: Partial<UserButtonLabels>;
   /**
    * `<UserButton.MenuItems>` with `<UserButton.Action>` / `<UserButton.Link>` / `<UserButton.Custom>`

package/dist/index.mjs

@@ -1614,6 +1614,15 @@ function UserButtonRoot(props) {
 		setOpen(false);
 		if (returnFocus) triggerRef.current?.focus();
 	}, []);
+	const onOpenChange = props.onOpenChange;
+	const mounted = useRef(false);
+	useEffect(() => {
+		if (!mounted.current) {
+			mounted.current = true;
+			return;
+		}
+		onOpenChange?.(open);
+	}, [open, onOpenChange]);
 	useEffect(() => {
 		if (!open) return;
 		const onKeyDown = (event) => {
@@ -1708,7 +1717,7 @@ function UserButtonRoot(props) {
 		children: [/* @__PURE__ */ jsx("button", {
 			ref: triggerRef,
 			type: "button",
-			className: "polyx-userbutton__trigger",
+			className: ["polyx-userbutton__trigger", props.triggerClassName].filter(Boolean).join(" "),
 			"aria-haspopup": "menu",
 			"aria-expanded": open,
 			"aria-controls": open ? menuId : void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poly-x/react",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.12",
   "description": "PolyX SDK for React SPAs - provider, hooks, drop-in auth UI",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",
   "dependencies": {
-    "@poly-x/core": "0.1.0-alpha.11"
+    "@poly-x/core": "0.1.0-alpha.12"
   },
   "peerDependencies": {
     "react": ">=18",