npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251211120550 → 1.0.0-snapshot.v20251215210631 - Mend

@clerk/ui 1.0.0-snapshot.v20251211120550 → 1.0.0-snapshot.v20251215210631

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (221) hide show

package/dist/components/UserVerification/UVFactorTwoPhoneCodeCard.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { localizationKeys } from "../../localization/localizationKeys.js";
 import { Flow } from "../../customizables/Flow.js";
 import { UVFactorTwoCodeForm } from "./UVFactorTwoCodeForm.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/UserVerification/UVFactorTwoPhoneCodeCard.tsx
 const UVFactorTwoPhoneCodeCard = (props) => {

package/dist/components/UserVerification/UserVerificationFactorOnePassword.js CHANGED Viewed

@@ -11,8 +11,8 @@ import { Form } from "../../elements/Form.js";
 import { HavingTrouble } from "../SignIn/HavingTrouble.js";
 import { useAfterVerification } from "./use-after-verification.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/UserVerification/UserVerificationFactorOnePassword.tsx
 function UserVerificationFactorOnePasswordCard(props) {

package/dist/components/UserVerification/UserVerificationFactorTwo.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useRouter } from "../../router/RouteContext.js";
 import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { LoadingCard } from "../../elements/LoadingCard.js";
-import { determineStartingSignInSecondFactor } from "../SignIn/utils.js";
+import { useSecondFactorSelection } from "../SignIn/useSecondFactorSelection.js";
 import { secondFactorsAreEqual } from "./useReverificationAlternativeStrategies.js";
 import { useUserVerificationSession, withUserVerificationSessionGuard } from "./useUserVerificationSession.js";
 import { sortByPrimaryFactor } from "./utils.js";
@@ -13,12 +13,6 @@ import React, { useEffect, useMemo } from "react";
 import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/UserVerification/UserVerificationFactorTwo.tsx
-const factorKey = (factor) => {
-	if (!factor) return "";
-	let key = factor.strategy;
-	if ("phoneNumberId" in factor) key += factor.phoneNumberId;
-	return key;
-};
 const SUPPORTED_STRATEGIES = [
 	"phone_code",
 	"totp",
@@ -31,18 +25,8 @@ function UserVerificationFactorTwoComponent() {
 	const availableFactors = useMemo(() => {
 		return sessionVerification.supportedSecondFactors?.filter((factor) => SUPPORTED_STRATEGIES.includes(factor.strategy))?.sort(sortByPrimaryFactor) || null;
 	}, [sessionVerification.supportedSecondFactors]);
-	const lastPreparedFactorKeyRef = React.useRef("");
-	const [currentFactor, setCurrentFactor] = React.useState(() => determineStartingSignInSecondFactor(availableFactors));
-	const [showAllStrategies, setShowAllStrategies] = React.useState(!currentFactor);
-	const toggleAllStrategies = () => setShowAllStrategies((s) => !s);
+	const { currentFactor, factorAlreadyPrepared, handleFactorPrepare, selectFactor, showAllStrategies, toggleAllStrategies } = useSecondFactorSelection(availableFactors);
 	const secondFactorsExcludingCurrent = useMemo(() => availableFactors?.filter((factor) => !secondFactorsAreEqual(factor, currentFactor)), [availableFactors, currentFactor]);
-	const handleFactorPrepare = () => {
-		lastPreparedFactorKeyRef.current = factorKey(currentFactor);
-	};
-	const selectFactor = (factor) => {
-		setCurrentFactor(factor);
-		toggleAllStrategies();
-	};
 	const hasAlternativeStrategies = useMemo(() => secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0 || false, [secondFactorsExcludingCurrent]);
 	useEffect(() => {
 		if (sessionVerification.status === "needs_first_factor") navigate("../");
@@ -55,14 +39,14 @@ function UserVerificationFactorTwoComponent() {
 	});
 	switch (currentFactor?.strategy) {
 		case "phone_code": return /* @__PURE__ */ jsx(UVFactorTwoPhoneCodeCard, {
-			factorAlreadyPrepared: lastPreparedFactorKeyRef.current === factorKey(currentFactor),
+			factorAlreadyPrepared,
 			onFactorPrepare: handleFactorPrepare,
 			factor: currentFactor,
 			onShowAlternativeMethodsClicked: toggleAllStrategies,
 			showAlternativeMethods: hasAlternativeStrategies
 		});
 		case "totp": return /* @__PURE__ */ jsx(UserVerificationFactorTwoTOTP, {
-			factorAlreadyPrepared: lastPreparedFactorKeyRef.current === factorKey(currentFactor),
+			factorAlreadyPrepared,
 			onFactorPrepare: handleFactorPrepare,
 			factor: currentFactor,
 			onShowAlternativeMethodsClicked: toggleAllStrategies,

package/dist/components/UserVerification/UserVerificationFactorTwo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UserVerificationFactorTwo.js","names":["SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][]"],"sources":["../../../src/components/UserVerification/UserVerificationFactorTwo.tsx"],"sourcesContent":["import type { SessionVerificationResource, SessionVerificationSecondFactor, ~~SignInFactor~~ } from '@clerk/shared/types';\nimport React, { useEffect, useMemo } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { useRouter } from '../../router';\nimport { ~~determineStartingSignInSecondFactor~~ } from '../SignIn/~~utils~~';\nimport { secondFactorsAreEqual } from './useReverificationAlternativeStrategies';\nimport { UserVerificationFactorTwoTOTP } from './UserVerificationFactorTwoTOTP';\nimport { useUserVerificationSession, withUserVerificationSessionGuard } from './useUserVerificationSession';\nimport { sortByPrimaryFactor } from './utils';\nimport { UVFactorTwoAlternativeMethods } from './UVFactorTwoAlternativeMethods';\nimport { UVFactorTwoBackupCodeCard } from './UVFactorTwoBackupCodeCard';\nimport { UVFactorTwoPhoneCodeCard } from './UVFactorTwoPhoneCodeCard';\n\nconst factorKey = (factor: SignInFactor \| null \| undefined) => {\n if (!factor) {\n return '';\n }\n let key = factor.strategy;\n if ('phoneNumberId' in factor) {\n key += factor.phoneNumberId;\n }\n return key;\n};\n\nconst SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][] = [\n 'phone_code',\n 'totp',\n 'backup_code',\n] as const;\n\nexport function UserVerificationFactorTwoComponent(): JSX.Element {\n const { navigate } = useRouter();\n const { data } = useUserVerificationSession();\n const sessionVerification = data as SessionVerificationResource;\n\n const availableFactors = useMemo(() => {\n return (\n sessionVerification.supportedSecondFactors\n ?.filter(factor => SUPPORTED_STRATEGIES.includes(factor.strategy))\n ?.sort(sortByPrimaryFactor) \|\| null\n );\n }, [sessionVerification.supportedSecondFactors]);\n\n const ~~lastPreparedFactorKeyRef = React.useRef('');\~~n ~~const [~~currentFactor~~, setCurrentFactor] = React.useState<SessionVerificationSecondFactor \| null>(\~~n ~~() => determineStartingSignInSecondFactor(availableFactors) as SessionVerificationSecondFactor~~,\n ~~);\~~n ~~const~~ ~~[showAllStrategies, setShowAllStrategies]~~ = ~~React.useState~~<~~boolean~~>(~~!currentFactor~~);\n ~~const toggleAllStrategies = () => setShowAllStrategies(s => !s);\n~~\n const secondFactorsExcludingCurrent = useMemo(\n () => availableFactors?.filter(factor => !secondFactorsAreEqual(factor, currentFactor)),\n [availableFactors, currentFactor],\n );\n\n const handleFactorPrepare = () => {\n lastPreparedFactorKeyRef.current = factorKey(currentFactor);\n };\n\n const selectFactor = (factor: SessionVerificationSecondFactor) => {\n setCurrentFactor(factor);\n toggleAllStrategies();\n };\n\n const hasAlternativeStrategies = useMemo(\n () => (secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0) \|\| false,\n [secondFactorsExcludingCurrent],\n );\n\n useEffect(() => {\n if (sessionVerification.status === 'needs_first_factor') {\n void navigate('../');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n if (!currentFactor) {\n return <LoadingCard />;\n }\n\n if (showAllStrategies && hasAlternativeStrategies) {\n return (\n <UVFactorTwoAlternativeMethods\n supportedSecondFactors={secondFactorsExcludingCurrent \|\| null}\n onBackLinkClick={toggleAllStrategies}\n onFactorSelected={selectFactor}\n />\n );\n }\n\n switch (currentFactor?.strategy) {\n case 'phone_code':\n return (\n <UVFactorTwoPhoneCodeCard\n factorAlreadyPrepared={~~lastPreparedFactorKeyRef.current === factorKey(currentFactor)~~}\n onFactorPrepare={handleFactorPrepare}\n factor={currentFactor}\n onShowAlternativeMethodsClicked={toggleAllStrategies}\n showAlternativeMethods={hasAlternativeStrategies}\n />\n );\n case 'totp':\n return (\n <UserVerificationFactorTwoTOTP\n factorAlreadyPrepared={~~lastPreparedFactorKeyRef.current === factorKey(currentFactor)~~}\n onFactorPrepare={handleFactorPrepare}\n factor={currentFactor}\n onShowAlternativeMethodsClicked={toggleAllStrategies}\n showAlternativeMethods={hasAlternativeStrategies}\n />\n );\n case 'backup_code':\n return <UVFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;\n default:\n return <LoadingCard />;\n }\n}\n\nexport const UserVerificationFactorTwo = withUserVerificationSessionGuard(\n withCardStateProvider(UserVerificationFactorTwoComponent),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,~~MAAM,aAAa,WAA4C;AAC7D,KAAI,CAAC,OACH,QAAO;CAET,IAAI,MAAM,OAAO;AACjB,KAAI,mBAAmB,OACrB,QAAO,OAAO;AAEhB,QAAO;;AAGT,~~MAAMA,uBAAsE;CAC1E;CACA;CACA;CACD;AAED,SAAgB,qCAAkD;CAChE,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,SAAS,4BAA4B;CAC7C,MAAM,sBAAsB;CAE5B,MAAM,mBAAmB,cAAc;AACrC,SACE,oBAAoB,wBAChB,QAAO,WAAU,qBAAqB,SAAS,OAAO,SAAS,CAAC,EAChE,KAAK,oBAAoB,IAAI;IAElC,CAAC,oBAAoB,uBAAuB,CAAC;CAEhD,MAAM,~~2BAA2B~~,~~MAAM~~,~~OAAO~~,~~GAAG;CACjD~~,~~MAAM~~,~~CAAC~~,~~eAAe~~,~~oBAAoB~~,~~MAAM,eACxC,oCAAoC,~~iBAAiB~~,CAC5D~~;~~CACD,MAAM,CAAC,mBAAmB,wBAAwB,MAAM,SAAkB,CAAC,cAAc;CACzF,MAAM,4BAA4B,sBAAqB,MAAK,CAAC,EAAE;~~CAE/D,MAAM,gCAAgC,cAC9B,kBAAkB,QAAO,WAAU,CAAC,sBAAsB,QAAQ,cAAc,CAAC,EACvF,CAAC,kBAAkB,cAAc,CAClC;CAED,MAAM,~~4BAA4B;AAChC,2BAAyB,UAAU,UAAU,cAAc;;CAG7D,MAAM,gBAAgB,WAA4C;AAChE,mBAAiB,OAAO;AACxB,uBAAqB;;CAGvB,MAAM,~~2BAA2B,cACxB,iCAAiC,8BAA8B,SAAS,KAAM,OACrF,CAAC,8BAA8B,CAChC;AAED,iBAAgB;AACd,MAAI,oBAAoB,WAAW,qBACjC,CAAK,SAAS,MAAM;IAGrB,EAAE,CAAC;AAEN,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,qBAAqB,yBACvB,QACE,oBAAC;EACC,wBAAwB,iCAAiC;EACzD,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;~~GACC,uBAAuB,yBAAyB,YAAY,UAAU,cAAc~~;~~GACpF~~,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,OACH,QACE,oBAAC;~~GACC,uBAAuB,yBAAyB,YAAY,UAAU,cAAc~~;~~GACpF~~,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,cACH,QAAO,oBAAC,6BAA0B,iCAAiC,sBAAuB;EAC5F,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,4BAA4B,iCACvC,sBAAsB,mCAAmC,CAC1D"}
1	+ {"version":3,"file":"UserVerificationFactorTwo.js","names":["SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][]"],"sources":["../../../src/components/UserVerification/UserVerificationFactorTwo.tsx"],"sourcesContent":["import type { SessionVerificationResource, SessionVerificationSecondFactor } from '@clerk/shared/types';\nimport React, { useEffect, useMemo } from 'react';\n\nimport { withCardStateProvider } from '@/ui/elements/contexts';\nimport { LoadingCard } from '@/ui/elements/LoadingCard';\n\nimport { useRouter } from '../../router';\nimport { useSecondFactorSelection } from '../SignIn/useSecondFactorSelection';\nimport { secondFactorsAreEqual } from './useReverificationAlternativeStrategies';\nimport { UserVerificationFactorTwoTOTP } from './UserVerificationFactorTwoTOTP';\nimport { useUserVerificationSession, withUserVerificationSessionGuard } from './useUserVerificationSession';\nimport { sortByPrimaryFactor } from './utils';\nimport { UVFactorTwoAlternativeMethods } from './UVFactorTwoAlternativeMethods';\nimport { UVFactorTwoBackupCodeCard } from './UVFactorTwoBackupCodeCard';\nimport { UVFactorTwoPhoneCodeCard } from './UVFactorTwoPhoneCodeCard';\n\nconst SUPPORTED_STRATEGIES: SessionVerificationSecondFactor['strategy'][] = [\n 'phone_code',\n 'totp',\n 'backup_code',\n] as const;\n\nexport function UserVerificationFactorTwoComponent(): JSX.Element {\n const { navigate } = useRouter();\n const { data } = useUserVerificationSession();\n const sessionVerification = data as SessionVerificationResource;\n\n const availableFactors = useMemo(() => {\n return (\n sessionVerification.supportedSecondFactors\n ?.filter(factor => SUPPORTED_STRATEGIES.includes(factor.strategy))\n ?.sort(sortByPrimaryFactor) \|\| null\n );\n }, [sessionVerification.supportedSecondFactors]);\n\n const {\n currentFactor,\n factorAlreadyPrepared,\n handleFactorPrepare,\n selectFactor,\n showAllStrategies,\n toggleAllStrategies,\n } = useSecondFactorSelection<SessionVerificationSecondFactor>(availableFactors);\n\n const secondFactorsExcludingCurrent = useMemo(\n () => availableFactors?.filter(factor => !secondFactorsAreEqual(factor, currentFactor)),\n [availableFactors, currentFactor],\n );\n\n const hasAlternativeStrategies = useMemo(\n () => (secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0) \|\| false,\n [secondFactorsExcludingCurrent],\n );\n\n useEffect(() => {\n if (sessionVerification.status === 'needs_first_factor') {\n void navigate('../');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n if (!currentFactor) {\n return <LoadingCard />;\n }\n\n if (showAllStrategies && hasAlternativeStrategies) {\n return (\n <UVFactorTwoAlternativeMethods\n supportedSecondFactors={secondFactorsExcludingCurrent \|\| null}\n onBackLinkClick={toggleAllStrategies}\n onFactorSelected={selectFactor}\n />\n );\n }\n\n switch (currentFactor?.strategy) {\n case 'phone_code':\n return (\n <UVFactorTwoPhoneCodeCard\n factorAlreadyPrepared={factorAlreadyPrepared}\n onFactorPrepare={handleFactorPrepare}\n factor={currentFactor}\n onShowAlternativeMethodsClicked={toggleAllStrategies}\n showAlternativeMethods={hasAlternativeStrategies}\n />\n );\n case 'totp':\n return (\n <UserVerificationFactorTwoTOTP\n factorAlreadyPrepared={factorAlreadyPrepared}\n onFactorPrepare={handleFactorPrepare}\n factor={currentFactor}\n onShowAlternativeMethodsClicked={toggleAllStrategies}\n showAlternativeMethods={hasAlternativeStrategies}\n />\n );\n case 'backup_code':\n return <UVFactorTwoBackupCodeCard onShowAlternativeMethodsClicked={toggleAllStrategies} />;\n default:\n return <LoadingCard />;\n }\n}\n\nexport const UserVerificationFactorTwo = withUserVerificationSessionGuard(\n withCardStateProvider(UserVerificationFactorTwoComponent),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAMA,uBAAsE;CAC1E;CACA;CACA;CACD;AAED,SAAgB,qCAAkD;CAChE,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,SAAS,4BAA4B;CAC7C,MAAM,sBAAsB;CAE5B,MAAM,mBAAmB,cAAc;AACrC,SACE,oBAAoB,wBAChB,QAAO,WAAU,qBAAqB,SAAS,OAAO,SAAS,CAAC,EAChE,KAAK,oBAAoB,IAAI;IAElC,CAAC,oBAAoB,uBAAuB,CAAC;CAEhD,MAAM,EACJ,eACA,uBACA,qBACA,cACA,mBACA,wBACE,yBAA0D,iBAAiB;CAE/E,MAAM,gCAAgC,cAC9B,kBAAkB,QAAO,WAAU,CAAC,sBAAsB,QAAQ,cAAc,CAAC,EACvF,CAAC,kBAAkB,cAAc,CAClC;CAED,MAAM,2BAA2B,cACxB,iCAAiC,8BAA8B,SAAS,KAAM,OACrF,CAAC,8BAA8B,CAChC;AAED,iBAAgB;AACd,MAAI,oBAAoB,WAAW,qBACjC,CAAK,SAAS,MAAM;IAGrB,EAAE,CAAC;AAEN,KAAI,CAAC,cACH,QAAO,oBAAC,gBAAc;AAGxB,KAAI,qBAAqB,yBACvB,QACE,oBAAC;EACC,wBAAwB,iCAAiC;EACzD,iBAAiB;EACjB,kBAAkB;GAClB;AAIN,SAAQ,eAAe,UAAvB;EACE,KAAK,aACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,OACH,QACE,oBAAC;GACwB;GACvB,iBAAiB;GACjB,QAAQ;GACR,iCAAiC;GACjC,wBAAwB;IACxB;EAEN,KAAK,cACH,QAAO,oBAAC,6BAA0B,iCAAiC,sBAAuB;EAC5F,QACE,QAAO,oBAAC,gBAAc;;;AAI5B,MAAa,4BAA4B,iCACvC,sBAAsB,mCAAmC,CAC1D"}

package/dist/components/UserVerification/useUserVerificationSession.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { useFetch } from "../../hooks/useFetch.js";
 import { useUserVerification } from "../../contexts/components/UserVerification.js";
 import { LoadingCard } from "../../elements/LoadingCard.js";
 import { useMemo } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSession } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/UserVerification/useUserVerificationSession.tsx
 const useUserVerificationSessionKey = () => {

package/dist/components/Waitlist/WaitlistForm.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { Header } from "../../elements/Header.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { Form } from "../../elements/Form.js";
 import { Wizard, useWizard } from "../../common/Wizard.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/Waitlist/WaitlistForm.tsx
 const WaitlistForm = (props) => {

package/dist/components/Waitlist/index.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { withCardStateProvider } from "../../elements/contexts/index.js";
 import { Flow } from "../../customizables/Flow.js";
 import { Card } from "../../elements/Card/index.js";
 import { WaitlistForm } from "./WaitlistForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/Waitlist/index.tsx
 const _Waitlist = () => {

package/dist/components/devPrompts/EnableOrganizationsPrompt/index.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { Modal } from "../../../elements/Modal.js";
 import { Portal } from "../../../elements/Portal.js";
 import { ClerkLogoIcon, PromptContainer, PromptSuccessIcon, basePromptElementStyles } from "../shared.js";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 //#region src/components/devPrompts/EnableOrganizationsPrompt/index.tsx

package/dist/components/devPrompts/KeylessPrompt/index.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { ClerkLogoIcon, PromptContainer, PromptSuccessIcon, basePromptElementSty
 import { KeySlashIcon } from "./KeySlashIcon.js";
 import { useRevalidateEnvironment } from "./use-revalidate-environment.js";
 import { useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useUser } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 import { createPortal } from "react-dom";

package/dist/contexts/CoreClerkContextWrapper.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { assertClerkSingletonExists } from "./utils.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { ClerkInstanceContext, ClientContext, OrganizationProvider, SessionContext, UserContext, __experimental_CheckoutProvider } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/contexts/CoreClerkContextWrapper.tsx
 function CoreClerkContextWrapper(props) {

package/dist/contexts/CoreSessionContext.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useSessionContext } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/contexts/CoreSessionContext.tsx
 function withCoreSessionSwitchGuard(Component) {

package/dist/contexts/CoreUserContext.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useUserContext } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/contexts/CoreUserContext.tsx
 function withCoreUserGuard(Component) {

package/dist/{createorganization_ui_a492c4_1.0.0-snapshot.v20251211120550.js → createorganization_ui_01c6bf_1.0.0-snapshot.v20251215210631.js} RENAMED Viewed

	@@ -1 +1 @@
1	- "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["243"],{9302:function(e,t,a){a.d(t,{A:()=>P});var r=a(4518),i=a(~~5543~~),n=a(5074),o=a(7697),l=a(3269),s=a(2454),d=a(1475),c=a(3549),u=a(6153),g=a(155),h=a(6370),p=a(5485),m=a(4468),f=a(8640),z=a(6245),v=a(8272),b=a(7068),C=a(2861),Y=a(3934),$=a(3100),x=a(5377),O=a(3689);let P=(0,l.dm)(e=>{let t=(0,l.f0)(),a=(0,z.X)({onNextStep:()=>t.setError(void 0)}),P=n.useRef(null),{createOrganization:S,isLoaded:w,setActive:k,userMemberships:A}=(0,i.D_)({userMemberships:O.mu.userMemberships}),{organization:R}=(0,i.Z5)(),{organizationSettings:F}=(0,o.O)(),[T,_]=n.useState(),y=(0,f.tJ)("name","",{type:"text",label:(0,C.G)("formFieldLabel__organizationName"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationName")}),I=(0,f.tJ)("slug","",{type:"text",label:(0,C.G)("formFieldLabel__organizationSlug"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationSlug")}),D=!!y.value,G=!F.slug.disabled,M=async r=>{if((r.preventDefault(),D)&&w)try{let t={name:y.value};G&&(t.slug=I.value);let r=await S(t);if(T&&await r.setLogo({file:T}),P.current=r,await k({organization:r}),A.revalidate?.(),e.skipInvitationScreen??1===r.maxAllowedMemberships)return B();a.nextStep()}catch(e){(0,m.H4)(e,[y,I],t.setError)}},B=()=>{e.navigateAfterCreateOrganization?.(P.current),e.onComplete?.()},U=e=>{I.setValue(e)},V="organizationList"===e.flow?"subtitle":void 0;return(0,r.FD)(z.s,{...a.props,children:[(0,r.Y)(c.M,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,r.FD)(s.l.Root,{onSubmit:M,sx:e=>({gap:e.space.$6}),children:[(0,r.Y)(v.fv,{children:(0,r.Y)(x.i,{organization:{name:y.value},onAvatarChange:async e=>await _(e),onAvatarRemove:T?()=>(t.setIdle(),_(null)):null,avatarPreviewPlaceholder:(0,r.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,r.Y)(v.In,{size:"md",icon:b.A,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,r.Y)(s.l.ControlRow,{elementId:y.id,children:(0,r.Y)(s.l.PlainInput,{...y.props,onChange:e=>{y.setValue(e.target.value),U((0,p.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),G&&(0,r.Y)(s.l.ControlRow,{elementId:I.id,children:(0,r.Y)(s.l.PlainInput,{...I.props,onChange:e=>{U(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,r.FD)(d.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!D,localizationKey:(0,C.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,r.Y)(s.l.ResetButton,{localizationKey:(0,C.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,r.Y)(c.M,{headerTitle:(0,C.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:R&&(0,r.Y)(Y.B,{resetButtonLabel:(0,C.G)("createOrganization.invitePage.formButtonReset"),onSuccess:a.nextStep,onReset:B})}),(0,r.FD)(v.fv,{children:[(0,r.Y)(u.Y.Root,{children:(0,r.Y)(u.Y.Title,{localizationKey:(0,C.G)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,r.Y)(h.B,{contents:(0,r.Y)($.k,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:B})]})]})})},4472:function(e,t,a){a.r(t),a.d(t,{CreateOrganization:()=>z,CreateOrganizationModal:()=>v});var r=a(4518),i=a(3269),n=a(3264),o=a(1),l=a(4607),s=a(7831),d=a(2265),c=a(~~5543~~),u=a(6088),g=a(2861),h=a(180),p=a(9302);let m=(0,i.dm)(()=>{let{closeCreateOrganization:e}=(0,c.ho)(),{mode:t,navigateAfterCreateOrganization:a,skipInvitationScreen:n}=(0,o.W)(),l=(0,i.f0)(),{showDevModeNotice:s}=(0,h.Q)();return(0,r.FD)(u.Z.Root,{sx:e=>({width:e.sizes.$108}),children:[(0,r.FD)(u.Z.Content,{sx:e=>({padding:`${e.space.$4} ${e.space.$5} ${s?e.space.$12:e.space.$6}`}),children:[(0,r.Y)(u.Z.Alert,{children:l.error}),(0,r.Y)(p.A,{skipInvitationScreen:n,startPage:{headerTitle:(0,g.G)("createOrganization.title")},navigateAfterCreateOrganization:a,flow:"default",onComplete:()=>{"modal"===t&&e()}})]}),(0,r.Y)(u.Z.Footer,{})]})}),f=(0,n.G)(()=>(0,r.Y)(m,{})),z=(0,i.dm)(()=>(0,r.Y)(l.n.Root,{flow:"createOrganization",children:(0,r.Y)(l.n.Part,{children:(0,r.Y)(s.d,{children:(0,r.Y)(d.q,{children:(0,r.Y)(f,{})})})})})),v=e=>{let t={...e,routing:"virtual",componentName:"CreateOrganization",mode:"modal"};return(0,r.Y)(d.q,{path:"createOrganization",children:(0,r.Y)(o.$.Provider,{value:t,children:(0,r.Y)("div",{children:(0,r.Y)(z,{})})})})}},1:function(e,t,a){a.d(t,{$:()=>l,W:()=>s});var r=a(5074),i=a(7697),n=a(4964),o=a(2117);let l=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(l),{navigate:t}=(0,n.r)(),{displayConfig:a}=(0,i.O)();if(!e\|\|"CreateOrganization"!==e.componentName)throw Error("Clerk: useCreateOrganizationContext called outside CreateOrganization.");let{componentName:s,...d}=e;return{...d,skipInvitationScreen:d.skipInvitationScreen\|\|!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),componentName:s}}}}]);
1	+ "use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui\|\|[]).push([["243"],{9302:function(e,t,a){a.d(t,{A:()=>P});var r=a(4518),i=a(9361),n=a(5074),o=a(7697),l=a(3269),s=a(2454),d=a(1475),c=a(3549),u=a(6153),g=a(155),h=a(6370),p=a(5485),m=a(4468),f=a(8640),z=a(6245),v=a(8272),b=a(7068),C=a(2861),Y=a(3934),$=a(3100),x=a(5377),O=a(3689);let P=(0,l.dm)(e=>{let t=(0,l.f0)(),a=(0,z.X)({onNextStep:()=>t.setError(void 0)}),P=n.useRef(null),{createOrganization:S,isLoaded:w,setActive:k,userMemberships:A}=(0,i.D_)({userMemberships:O.mu.userMemberships}),{organization:R}=(0,i.Z5)(),{organizationSettings:F}=(0,o.O)(),[T,_]=n.useState(),y=(0,f.tJ)("name","",{type:"text",label:(0,C.G)("formFieldLabel__organizationName"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationName")}),I=(0,f.tJ)("slug","",{type:"text",label:(0,C.G)("formFieldLabel__organizationSlug"),placeholder:(0,C.G)("formFieldInputPlaceholder__organizationSlug")}),D=!!y.value,G=!F.slug.disabled,M=async r=>{if((r.preventDefault(),D)&&w)try{let t={name:y.value};G&&(t.slug=I.value);let r=await S(t);if(T&&await r.setLogo({file:T}),P.current=r,await k({organization:r}),A.revalidate?.(),e.skipInvitationScreen??1===r.maxAllowedMemberships)return B();a.nextStep()}catch(e){(0,m.H4)(e,[y,I],t.setError)}},B=()=>{e.navigateAfterCreateOrganization?.(P.current),e.onComplete?.()},U=e=>{I.setValue(e)},V="organizationList"===e.flow?"subtitle":void 0;return(0,r.FD)(z.s,{...a.props,children:[(0,r.Y)(c.M,{headerTitle:e?.startPage?.headerTitle,headerSubtitle:e?.startPage?.headerSubtitle,headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,gap:e.space.$6,textAlign:"left"}),children:(0,r.FD)(s.l.Root,{onSubmit:M,sx:e=>({gap:e.space.$6}),children:[(0,r.Y)(v.fv,{children:(0,r.Y)(x.i,{organization:{name:y.value},onAvatarChange:async e=>await _(e),onAvatarRemove:T?()=>(t.setIdle(),_(null)):null,avatarPreviewPlaceholder:(0,r.Y)(g.K,{variant:"ghost","aria-label":"Upload organization logo",icon:(0,r.Y)(v.In,{size:"md",icon:b.A,sx:e=>({color:e.colors.$colorMutedForeground,transitionDuration:e.transitionDuration.$controls})}),sx:e=>({width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$dashed,borderColor:e.colors.$borderAlpha200,backgroundColor:e.colors.$neutralAlpha50,":hover":{backgroundColor:e.colors.$neutralAlpha50,svg:{transform:"scale(1.2)"}}})})})}),(0,r.Y)(s.l.ControlRow,{elementId:y.id,children:(0,r.Y)(s.l.PlainInput,{...y.props,onChange:e=>{y.setValue(e.target.value),U((0,p.e)(e.target.value))},isRequired:!0,autoFocus:!0,ignorePasswordManager:!0})}),G&&(0,r.Y)(s.l.ControlRow,{elementId:I.id,children:(0,r.Y)(s.l.PlainInput,{...I.props,onChange:e=>{U(e.target.value)},isRequired:!0,pattern:"^(?=.*[a-z0-9])[a-z0-9\\-]+$",ignorePasswordManager:!0})}),(0,r.FD)(d.c,{sx:e=>({marginTop:e.space.$none}),children:[(0,r.Y)(s.l.SubmitButton,{block:!1,isDisabled:!D,localizationKey:(0,C.G)("createOrganization.formButtonSubmit")}),e.onCancel&&(0,r.Y)(s.l.ResetButton,{localizationKey:(0,C.G)("userProfile.formButtonReset"),block:!1,onClick:e.onCancel})]})]})}),(0,r.Y)(c.M,{headerTitle:(0,C.G)("organizationProfile.invitePage.title"),headerTitleTextVariant:"h2",headerSubtitleTextVariant:V,sx:e=>({minHeight:e.sizes.$60,textAlign:"left"}),children:R&&(0,r.Y)(Y.B,{resetButtonLabel:(0,C.G)("createOrganization.invitePage.formButtonReset"),onSuccess:a.nextStep,onReset:B})}),(0,r.FD)(v.fv,{children:[(0,r.Y)(u.Y.Root,{children:(0,r.Y)(u.Y.Title,{localizationKey:(0,C.G)("organizationProfile.invitePage.title"),sx:{textAlign:"left"}})}),(0,r.Y)(h.B,{contents:(0,r.Y)($.k,{}),sx:e=>({minHeight:e.sizes.$60}),onFinish:B})]})]})})},4472:function(e,t,a){a.r(t),a.d(t,{CreateOrganization:()=>z,CreateOrganizationModal:()=>v});var r=a(4518),i=a(3269),n=a(3264),o=a(1),l=a(4607),s=a(7831),d=a(2265),c=a(9361),u=a(6088),g=a(2861),h=a(180),p=a(9302);let m=(0,i.dm)(()=>{let{closeCreateOrganization:e}=(0,c.ho)(),{mode:t,navigateAfterCreateOrganization:a,skipInvitationScreen:n}=(0,o.W)(),l=(0,i.f0)(),{showDevModeNotice:s}=(0,h.Q)();return(0,r.FD)(u.Z.Root,{sx:e=>({width:e.sizes.$108}),children:[(0,r.FD)(u.Z.Content,{sx:e=>({padding:`${e.space.$4} ${e.space.$5} ${s?e.space.$12:e.space.$6}`}),children:[(0,r.Y)(u.Z.Alert,{children:l.error}),(0,r.Y)(p.A,{skipInvitationScreen:n,startPage:{headerTitle:(0,g.G)("createOrganization.title")},navigateAfterCreateOrganization:a,flow:"default",onComplete:()=>{"modal"===t&&e()}})]}),(0,r.Y)(u.Z.Footer,{})]})}),f=(0,n.G)(()=>(0,r.Y)(m,{})),z=(0,i.dm)(()=>(0,r.Y)(l.n.Root,{flow:"createOrganization",children:(0,r.Y)(l.n.Part,{children:(0,r.Y)(s.d,{children:(0,r.Y)(d.q,{children:(0,r.Y)(f,{})})})})})),v=e=>{let t={...e,routing:"virtual",componentName:"CreateOrganization",mode:"modal"};return(0,r.Y)(d.q,{path:"createOrganization",children:(0,r.Y)(o.$.Provider,{value:t,children:(0,r.Y)("div",{children:(0,r.Y)(z,{})})})})}},1:function(e,t,a){a.d(t,{$:()=>l,W:()=>s});var r=a(5074),i=a(7697),n=a(4964),o=a(2117);let l=(0,r.createContext)(null),s=()=>{let e=(0,r.useContext)(l),{navigate:t}=(0,n.r)(),{displayConfig:a}=(0,i.O)();if(!e\|\|"CreateOrganization"!==e.componentName)throw Error("Clerk: useCreateOrganizationContext called outside CreateOrganization.");let{componentName:s,...d}=e;return{...d,skipInvitationScreen:d.skipInvitationScreen\|\|!1,navigateAfterCreateOrganization:e=>"function"==typeof d.afterCreateOrganizationUrl?t(d.afterCreateOrganizationUrl(e)):d.afterCreateOrganizationUrl?t((0,o.tR)({urlWithParam:d.afterCreateOrganizationUrl,entity:e})):t(a.afterCreateOrganizationUrl),componentName:s}}}}]);

package/dist/customizables/AppearanceContext.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { parseAppearance } from "./parseAppearance.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { createContextAndHook, useDeepEqualMemo } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/customizables/AppearanceContext.tsx
 const [AppearanceContext, useAppearance] = createContextAndHook("AppearanceContext");

package/dist/elements/Action/ActionRoot.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Animated } from "../Animated.js";
 import { useCallback, useState } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { createContextAndHook } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/elements/Action/ActionRoot.tsx
 const [ActionContext, useActionContext, _] = createContextAndHook("ActionContext");

package/dist/elements/CodeControl.js CHANGED Viewed

@@ -9,8 +9,8 @@ import { sleep } from "../utils/sleep.js";
 import { handleError } from "../utils/errorHandler.js";
 import { TimerButton } from "./TimerButton.js";
 import React, { useCallback } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { createContextAndHook } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
 //#region src/elements/CodeControl.tsx

package/dist/elements/Drawer.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { IconButton } from "./IconButton.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useMergeRefs, useRole, useTransitionStyles } from "@floating-ui/react";
-import { useSafeLayoutEffect } from "@clerk/shared/react/index";
+import { usePortalRoot, useSafeLayoutEffect } from "@clerk/shared/react/index";
 //#region src/elements/Drawer.tsx
 const DrawerContext = React$1.createContext(null);
@@ -23,6 +23,8 @@ const useDrawerContext = () => {
 };
 function Root({ children, open, onOpenChange, strategy = "fixed", floatingProps, portalProps, dismissProps }) {
 	const direction = useDirection();
+	const portalRoot = usePortalRoot();
+	const effectivePortalRoot = portalProps?.root ?? portalRoot?.() ?? void 0;
 	const { refs, context } = useFloating({
 		open,
 		onOpenChange,
@@ -41,7 +43,10 @@ function Root({ children, open, onOpenChange, strategy = "fixed", floatingProps,
 			isOpen: open,
 			setIsOpen: onOpenChange,
 			strategy,
-			portalProps: portalProps || {},
+			portalProps: {
+				...portalProps,
+				root: effectivePortalRoot
+			},
 			refs,
 			context,
 			getFloatingProps,
@@ -49,6 +54,7 @@ function Root({ children, open, onOpenChange, strategy = "fixed", floatingProps,
 		},
 		children: /* @__PURE__ */ jsx(FloatingPortal, {
 			...portalProps,
+			root: effectivePortalRoot,
 			children
 		})
 	});

package/dist/elements/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","names":["React","FloatingOverlay","CloseIcon"],"sources":["../../src/elements/Drawer.tsx"],"sourcesContent":["import { useSafeLayoutEffect } from '@clerk/shared/react/index';\nimport type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';\nimport {\n FloatingFocusManager,\n FloatingPortal,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';\nimport { transitionDurationValues, transitionTiming } from '../foundations/transitions';\nimport { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';\nimport { Close as CloseIcon } from '../icons';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { IconButton } from './IconButton';\n\ntype FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer Context\n * -----------------------------------------------------------------------------------------------/\n\ninterface DrawerContext {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n strategy: UseFloatingOptions['strategy'];\n refs: ReturnType<typeof useFloating>['refs'];\n context: ReturnType<typeof useFloating>['context'];\n getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n portalProps: FloatingPortalProps;\n direction: ReturnType<typeof useDirection>;\n}\n\nconst DrawerContext = React.createContext<DrawerContext \| null>(null);\n\nexport const useDrawerContext = () => {\n const context = React.useContext(DrawerContext);\n if (!context) {\n throw new Error('Drawer components must be wrapped in <Drawer.Root>');\n }\n return context;\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------/\n\ninterface RootProps {\n children: React.ReactNode;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /\n The strategy to use when positioning the floating element.\n * @default 'fixed'\n * @see https://floating-ui.com/docs/useFloating#strategy\n /\n strategy?: UseFloatingOptions['strategy'];\n /\n @see https://floating-ui.com/docs/useFloating\n /\n floatingProps?: Omit<UseFloatingOptions, 'open' \| 'onOpenChange' \| 'strategy' \| 'transform'>;\n /\n @see https://floating-ui.com/docs/FloatingPortal\n /\n portalProps?: FloatingPortalProps;\n /\n @see https://floating-ui.com/docs/useDismiss\n /\n dismissProps?: UseDismissProps;\n}\n\nfunction Root({\n children,\n open,\n onOpenChange,\n strategy = 'fixed',\n floatingProps,\n portalProps,\n dismissProps,\n}: RootProps) {\n const direction = useDirection();\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy,\n placement: direction === 'ltr' ? 'right' : 'left',\n ...floatingProps,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, dismissProps),\n useRole(context),\n ]);\n\n return (\n <DrawerContext.Provider\n value={{\n isOpen: open,\n setIsOpen: onOpenChange,\n strategy,\n portalProps: portalProps \|\| {},\n refs,\n context,\n getFloatingProps,\n direction,\n }}\n >\n <FloatingPortal {...portalProps}>{children}</FloatingPortal>\n </DrawerContext.Provider>\n );\n}\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Overlay\n * -----------------------------------------------------------------------------------------------/\n\nexport const FloatingOverlay = React.forwardRef(function FloatingOverlay(\n props: React.ComponentPropsWithoutRef<typeof Box>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const { strategy } = useDrawerContext();\n const { disableScrollLock, enableScrollLock } = useScrollLock();\n\n useSafeLayoutEffect(() => {\n if (strategy !== 'fixed') {\n return;\n }\n enableScrollLock();\n return () => {\n disableScrollLock();\n };\n }, [strategy, disableScrollLock, enableScrollLock]);\n\n return (\n <Box\n ref={ref}\n {...props}\n elementDescriptor={descriptors.drawerBackdrop}\n sx={[\n t => ({\n inset: 0,\n backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),\n }),\n props.sx,\n ]}\n />\n );\n});\n\nconst Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {\n const { strategy, context } = useDrawerContext();\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n position: strategy,\n inset: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingOverlay\n ref={ref}\n style={{\n ...transitionStyles,\n }}\n />\n );\n});\n\nOverlay.displayName = 'Drawer.Overlay';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Content\n * -----------------------------------------------------------------------------------------------/\n\ninterface ContentProps {\n children: React.ReactNode;\n}\n\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n open: { transform: 'translate3d(0, 0, 0)' },\n close: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n {...getFloatingProps()}\n sx={t => ({\n position: strategy,\n insetBlock: 0,\n insetInline: 0,\n pointerEvents: 'none',\n isolation: 'isolate',\n // When drawer is within the profile components, we need to ensure it is above the drawer\n // renders above the profile close button\n zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,\n })}\n elementDescriptor={descriptors.drawerRoot}\n >\n <Flex\n elementDescriptor={descriptors.drawerContent}\n style={transitionStyles}\n direction='col'\n sx={t => ({\n // Apply the conditional right offset + the spread of the\n // box shadow to ensure it is fully offscreen before unmounting\n '--transform-offset':\n strategy === 'fixed'\n ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) ${direction === 'rtl' ? -1 : 1})`\n : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,\n willChange: 'transform',\n position: strategy,\n insetBlock: strategy === 'fixed' ? t.space.$3 : 0,\n insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,\n outline: 0,\n width: t.sizes.$100,\n maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',\n backgroundColor: t.colors.$colorBackground,\n borderStartStartRadius: t.radii.$lg,\n borderEndStartRadius: t.radii.$lg,\n borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n overflow: 'hidden',\n pointerEvents: 'auto',\n })}\n >\n {children}\n </Flex>\n </Box>\n </FloatingFocusManager>\n );\n});\n\nContent.displayName = 'Drawer.Content';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Header\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderProps {\n title?: string \| LocalizationKey;\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children, sx }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerHeader}\n as='header'\n sx={[\n t => ({\n display: 'flex',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockEndWidth: t.borderWidths.$normal,\n borderBlockEndStyle: t.borderStyles.$solid,\n borderBlockEndColor: t.colors.$borderAlpha150,\n borderStartStartRadius: t.radii.$lg,\n borderStartEndRadius: t.radii.$lg,\n paddingBlock: title ? t.space.$3 : undefined,\n paddingInline: title ? t.space.$4 : undefined,\n }),\n sx,\n ]}\n >\n {title ? (\n <>\n <Heading\n localizationKey={title}\n as='h2'\n elementDescriptor={descriptors.drawerTitle}\n textVariant='h2'\n sx={{\n alignSelf: 'center',\n }}\n />\n <Close />\n </>\n ) : (\n children\n )}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------/\n\ninterface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, BodyProps>(({ children, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerBody}\n sx={[\n () => ({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n }),\n props.sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Footer\n * -----------------------------------------------------------------------------------------------/\n\ninterface FooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerFooter}\n sx={[\n t => ({\n display: 'flex',\n flexDirection: 'column',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockStartWidth: t.borderWidths.$normal,\n borderBlockStartStyle: t.borderStyles.$solid,\n borderBlockStartColor: t.colors.$borderAlpha100,\n borderEndStartRadius: t.radii.$xl,\n borderEndEndRadius: t.radii.$xl,\n paddingBlock: t.space.$3,\n paddingInline: t.space.$4,\n }),\n sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Close\n * -----------------------------------------------------------------------------------------------/\n\nconst Close = React.forwardRef<HTMLButtonElement>((_, ref) => {\n const { setIsOpen } = useDrawerContext();\n return (\n <IconButton\n ref={ref}\n elementDescriptor={descriptors.drawerClose}\n variant='ghost'\n aria-label='Close drawer'\n onClick={() => setIsOpen(false)}\n icon={\n <Icon\n icon={CloseIcon}\n size='sm'\n />\n }\n sx={t => ({\n color: t.colors.$colorMutedForeground,\n padding: t.space.$3,\n marginInlineStart: 'auto',\n })}\n />\n );\n});\n\nClose.displayName = 'Drawer.Close';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Confirmation\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfirmationProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n children: React.ReactNode;\n actionsSlot: React.ReactNode;\n /\n @see https://floating-ui.com/docs/userole\n */\n roleProps?: UseRoleProps;\n}\n\nconst Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(\n ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy: 'absolute',\n });\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context),\n useRole(context, { role: 'alertdialog', ...roleProps }),\n ]);\n\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { styles: overlayTransitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, {\n initial: { transform: 'translate3D(0, 100%, 0)' },\n open: { transform: 'translate3D(0, 0, 0)' },\n close: { transform: 'translate3D(0, 100%, 0)' },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <>\n <Span\n elementDescriptor={descriptors.drawerConfirmationBackdrop}\n style={overlayTransitionStyles}\n sx={t => ({\n position: 'absolute',\n inset: 0,\n backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,\n })}\n />\n\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n elementDescriptor={descriptors.drawerConfirmationRoot}\n style={modalTransitionStyles}\n {...getFloatingProps()}\n sx={t => ({\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$6,\n outline: 'none',\n willChange: 'transform',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n padding: t.space.$4,\n borderStartStartRadius: t.radii.$md,\n borderStartEndRadius: t.radii.$md,\n boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,\n })}\n >\n {children}\n\n <Flex\n elementDescriptor={descriptors.drawerConfirmationActions}\n gap={3}\n justify='end'\n >\n {actionsSlot}\n </Flex>\n </Box>\n </FloatingFocusManager>\n </>\n );\n },\n);\n\nConfirmation.displayName = 'Drawer.Confirmation';\n\nexport const Drawer = {\n Root,\n Overlay,\n Content,\n Header,\n Body,\n Footer,\n Confirmation,\n Close,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Drawer.js","names":["React","FloatingOverlay","CloseIcon"],"sources":["../../src/elements/Drawer.tsx"],"sourcesContent":["import { usePortalRoot, useSafeLayoutEffect } from '@clerk/shared/react/index';\nimport type { UseDismissProps, UseFloatingOptions, UseRoleProps } from '@floating-ui/react';\nimport {\n FloatingFocusManager,\n FloatingPortal,\n useClick,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport * as React from 'react';\n\nimport type { LocalizationKey } from '../customizables';\nimport { Box, descriptors, Flex, Heading, Icon, Span, useAppearance } from '../customizables';\nimport { transitionDurationValues, transitionTiming } from '../foundations/transitions';\nimport { useDirection, usePrefersReducedMotion, useScrollLock } from '../hooks';\nimport { Close as CloseIcon } from '../icons';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { common } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { IconButton } from './IconButton';\n\ntype FloatingPortalProps = React.ComponentProps<typeof FloatingPortal>;\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer Context\n * -----------------------------------------------------------------------------------------------/\n\ninterface DrawerContext {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n strategy: UseFloatingOptions['strategy'];\n refs: ReturnType<typeof useFloating>['refs'];\n context: ReturnType<typeof useFloating>['context'];\n getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n portalProps: FloatingPortalProps;\n direction: ReturnType<typeof useDirection>;\n}\n\nconst DrawerContext = React.createContext<DrawerContext \| null>(null);\n\nexport const useDrawerContext = () => {\n const context = React.useContext(DrawerContext);\n if (!context) {\n throw new Error('Drawer components must be wrapped in <Drawer.Root>');\n }\n return context;\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Root\n * -----------------------------------------------------------------------------------------------/\n\ninterface RootProps {\n children: React.ReactNode;\n open: boolean;\n onOpenChange: (open: boolean) => void;\n /\n The strategy to use when positioning the floating element.\n * @default 'fixed'\n * @see https://floating-ui.com/docs/useFloating#strategy\n /\n strategy?: UseFloatingOptions['strategy'];\n /\n @see https://floating-ui.com/docs/useFloating\n /\n floatingProps?: Omit<UseFloatingOptions, 'open' \| 'onOpenChange' \| 'strategy' \| 'transform'>;\n /\n @see https://floating-ui.com/docs/FloatingPortal\n /\n portalProps?: FloatingPortalProps;\n /\n @see https://floating-ui.com/docs/useDismiss\n /\n dismissProps?: UseDismissProps;\n}\n\nfunction Root({\n children,\n open,\n onOpenChange,\n strategy = 'fixed',\n floatingProps,\n portalProps,\n dismissProps,\n}: RootProps) {\n const direction = useDirection();\n const portalRoot = usePortalRoot();\n const effectivePortalRoot = portalProps?.root ?? portalRoot?.() ?? undefined;\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy,\n placement: direction === 'ltr' ? 'right' : 'left',\n ...floatingProps,\n });\n\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context, dismissProps),\n useRole(context),\n ]);\n\n return (\n <DrawerContext.Provider\n value={{\n isOpen: open,\n setIsOpen: onOpenChange,\n strategy,\n portalProps: { ...portalProps, root: effectivePortalRoot },\n refs,\n context,\n getFloatingProps,\n direction,\n }}\n >\n <FloatingPortal\n {...portalProps}\n root={effectivePortalRoot}\n >\n {children}\n </FloatingPortal>\n </DrawerContext.Provider>\n );\n}\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Overlay\n * -----------------------------------------------------------------------------------------------/\n\nexport const FloatingOverlay = React.forwardRef(function FloatingOverlay(\n props: React.ComponentPropsWithoutRef<typeof Box>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const { strategy } = useDrawerContext();\n const { disableScrollLock, enableScrollLock } = useScrollLock();\n\n useSafeLayoutEffect(() => {\n if (strategy !== 'fixed') {\n return;\n }\n enableScrollLock();\n return () => {\n disableScrollLock();\n };\n }, [strategy, disableScrollLock, enableScrollLock]);\n\n return (\n <Box\n ref={ref}\n {...props}\n elementDescriptor={descriptors.drawerBackdrop}\n sx={[\n t => ({\n inset: 0,\n backgroundColor: colors.setAlpha(t.colors.$colorBackground, 0.28),\n }),\n props.sx,\n ]}\n />\n );\n});\n\nconst Overlay = React.forwardRef<HTMLDivElement>((_, ref) => {\n const { strategy, context } = useDrawerContext();\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n position: strategy,\n inset: 0,\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingOverlay\n ref={ref}\n style={{\n ...transitionStyles,\n }}\n />\n );\n});\n\nOverlay.displayName = 'Drawer.Overlay';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Content\n * -----------------------------------------------------------------------------------------------/\n\ninterface ContentProps {\n children: React.ReactNode;\n}\n\nconst Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n const { strategy, refs, context, getFloatingProps, direction } = useDrawerContext();\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {\n initial: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n open: { transform: 'translate3d(0, 0, 0)' },\n close: { transform: `translate3d(var(--transform-offset), 0, 0)` },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n {...getFloatingProps()}\n sx={t => ({\n position: strategy,\n insetBlock: 0,\n insetInline: 0,\n pointerEvents: 'none',\n isolation: 'isolate',\n // When drawer is within the profile components, we need to ensure it is above the drawer\n // renders above the profile close button\n zIndex: strategy === 'absolute' ? t.zIndices.$modal : undefined,\n })}\n elementDescriptor={descriptors.drawerRoot}\n >\n <Flex\n elementDescriptor={descriptors.drawerContent}\n style={transitionStyles}\n direction='col'\n sx={t => ({\n // Apply the conditional right offset + the spread of the\n // box shadow to ensure it is fully offscreen before unmounting\n '--transform-offset':\n strategy === 'fixed'\n ? `calc((100% + ${t.space.$3} + ${t.space.$8x75}) ${direction === 'rtl' ? -1 : 1})`\n : `calc((100% + ${t.space.$8x75}) * ${direction === 'rtl' ? -1 : 1})`,\n willChange: 'transform',\n position: strategy,\n insetBlock: strategy === 'fixed' ? t.space.$3 : 0,\n insetInlineEnd: strategy === 'fixed' ? t.space.$3 : 0,\n outline: 0,\n width: t.sizes.$100,\n maxWidth: strategy === 'fixed' ? `calc(100% - ${t.space.$6})` : '100%',\n backgroundColor: t.colors.$colorBackground,\n borderStartStartRadius: t.radii.$lg,\n borderEndStartRadius: t.radii.$lg,\n borderEndEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n overflow: 'hidden',\n pointerEvents: 'auto',\n })}\n >\n {children}\n </Flex>\n </Box>\n </FloatingFocusManager>\n );\n});\n\nContent.displayName = 'Drawer.Content';\n\n/* -------------------------------------------------------------------------------------------------\n * Drawer.Header\n * -----------------------------------------------------------------------------------------------/\n\ninterface HeaderProps {\n title?: string \| LocalizationKey;\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children, sx }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerHeader}\n as='header'\n sx={[\n t => ({\n display: 'flex',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockEndWidth: t.borderWidths.$normal,\n borderBlockEndStyle: t.borderStyles.$solid,\n borderBlockEndColor: t.colors.$borderAlpha150,\n borderStartStartRadius: t.radii.$lg,\n borderStartEndRadius: t.radii.$lg,\n paddingBlock: title ? t.space.$3 : undefined,\n paddingInline: title ? t.space.$4 : undefined,\n }),\n sx,\n ]}\n >\n {title ? (\n <>\n <Heading\n localizationKey={title}\n as='h2'\n elementDescriptor={descriptors.drawerTitle}\n textVariant='h2'\n sx={{\n alignSelf: 'center',\n }}\n />\n <Close />\n </>\n ) : (\n children\n )}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Body\n * -----------------------------------------------------------------------------------------------/\n\ninterface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Body = React.forwardRef<HTMLDivElement, BodyProps>(({ children, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerBody}\n sx={[\n () => ({\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n }),\n props.sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Footer\n * -----------------------------------------------------------------------------------------------/\n\ninterface FooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children?: React.ReactNode;\n sx?: ThemableCssProp;\n}\n\nconst Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ...props }, ref) => {\n return (\n <Box\n ref={ref}\n elementDescriptor={descriptors.drawerFooter}\n sx={[\n t => ({\n display: 'flex',\n flexDirection: 'column',\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n borderBlockStartWidth: t.borderWidths.$normal,\n borderBlockStartStyle: t.borderStyles.$solid,\n borderBlockStartColor: t.colors.$borderAlpha100,\n borderEndStartRadius: t.radii.$xl,\n borderEndEndRadius: t.radii.$xl,\n paddingBlock: t.space.$3,\n paddingInline: t.space.$4,\n }),\n sx,\n ]}\n {...props}\n >\n {children}\n </Box>\n );\n});\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Close\n * -----------------------------------------------------------------------------------------------/\n\nconst Close = React.forwardRef<HTMLButtonElement>((_, ref) => {\n const { setIsOpen } = useDrawerContext();\n return (\n <IconButton\n ref={ref}\n elementDescriptor={descriptors.drawerClose}\n variant='ghost'\n aria-label='Close drawer'\n onClick={() => setIsOpen(false)}\n icon={\n <Icon\n icon={CloseIcon}\n size='sm'\n />\n }\n sx={t => ({\n color: t.colors.$colorMutedForeground,\n padding: t.space.$3,\n marginInlineStart: 'auto',\n })}\n />\n );\n});\n\nClose.displayName = 'Drawer.Close';\n\n/ -------------------------------------------------------------------------------------------------\n * Drawer.Confirmation\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfirmationProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n children: React.ReactNode;\n actionsSlot: React.ReactNode;\n /\n @see https://floating-ui.com/docs/userole\n */\n roleProps?: UseRoleProps;\n}\n\nconst Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(\n ({ open, onOpenChange, children, actionsSlot, roleProps }, ref) => {\n const prefersReducedMotion = usePrefersReducedMotion();\n const { animations: layoutAnimations } = useAppearance().parsedOptions;\n const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n\n const { refs, context } = useFloating({\n open,\n onOpenChange,\n transform: false,\n strategy: 'absolute',\n });\n const { getFloatingProps } = useInteractions([\n useClick(context),\n useDismiss(context),\n useRole(context, { role: 'alertdialog', ...roleProps }),\n ]);\n\n const mergedRefs = useMergeRefs([ref, refs.setFloating]);\n\n const { styles: overlayTransitionStyles } = useTransitionStyles(context, {\n initial: { opacity: 0 },\n open: { opacity: 1 },\n close: { opacity: 0 },\n common: {\n transitionProperty: 'opacity',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: transitionDurationValues.drawer,\n });\n\n const { isMounted, styles: modalTransitionStyles } = useTransitionStyles(context, {\n initial: { transform: 'translate3D(0, 100%, 0)' },\n open: { transform: 'translate3D(0, 0, 0)' },\n close: { transform: 'translate3D(0, 100%, 0)' },\n common: {\n transitionProperty: 'transform',\n transitionTimingFunction: transitionTiming.bezier,\n },\n duration: isMotionSafe ? transitionDurationValues.drawer : 0,\n });\n\n if (!isMounted) {\n return null;\n }\n\n return (\n <>\n <Span\n elementDescriptor={descriptors.drawerConfirmationBackdrop}\n style={overlayTransitionStyles}\n sx={t => ({\n position: 'absolute',\n inset: 0,\n backgroundImage: `linear-gradient(to bottom, ${colors.setAlpha(t.colors.$colorBackground, 0.28)}, ${t.colors.$colorBackground})`,\n })}\n />\n\n <FloatingFocusManager\n context={context}\n modal\n outsideElementsInert\n initialFocus={refs.floating}\n >\n <Box\n ref={mergedRefs}\n elementDescriptor={descriptors.drawerConfirmationRoot}\n style={modalTransitionStyles}\n {...getFloatingProps()}\n sx={t => ({\n display: 'flex',\n flexDirection: 'column',\n rowGap: t.space.$6,\n outline: 'none',\n willChange: 'transform',\n position: 'absolute',\n bottom: 0,\n left: 0,\n right: 0,\n background: common.mergedColorsBackground(\n colors.setAlpha(t.colors.$colorBackground, 1),\n t.colors.$neutralAlpha50,\n ),\n padding: t.space.$4,\n borderStartStartRadius: t.radii.$md,\n borderStartEndRadius: t.radii.$md,\n boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,\n })}\n >\n {children}\n\n <Flex\n elementDescriptor={descriptors.drawerConfirmationActions}\n gap={3}\n justify='end'\n >\n {actionsSlot}\n </Flex>\n </Box>\n </FloatingFocusManager>\n </>\n );\n },\n);\n\nConfirmation.displayName = 'Drawer.Confirmation';\n\nexport const Drawer = {\n Root,\n Overlay,\n Content,\n Header,\n Body,\n Footer,\n Confirmation,\n Close,\n};\n"],"mappings":"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"}

package/dist/elements/Form.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { Button, Col, Flex, Form } from "../customizables/index.js";
 import { LastAuthenticationStrategyBadge } from "./Badge.js";
 import { Field } from "./FieldControl.js";
 import React, { forwardRef, useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { createContextAndHook } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/elements/Form.tsx
 const [FormState, useFormState] = createContextAndHook("FormState");

package/dist/elements/Menu.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { withFloatingTree } from "./contexts/index.js";
 import { Col, SimpleButton } from "../customizables/index.js";
 import { Popover } from "./Popover.js";
 import React, { cloneElement, isValidElement, useLayoutEffect, useRef } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { createContextAndHook } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/elements/Menu.tsx
 const [MenuStateCtx, useMenuState] = createContextAndHook("MenuState");
@@ -133,7 +133,8 @@ const MenuItem = (props) => {
 		sx: [(theme) => ({
 			justifyContent: "start",
 			borderRadius: theme.radii.$sm,
-			padding: `${theme.space.$1} ${theme.space.$3}`
+			padding: `${theme.space.$1} ${theme.space.$3}`,
+			whiteSpace: "nowrap"
 		}), sx],
 		...rest
 	});

package/dist/elements/Menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.js","names":["sibling: Element \| null"],"sources":["../../src/elements/Menu.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { MenuId } from '@clerk/shared/types';\nimport type { Placement } from '@floating-ui/react';\nimport type { PropsWithChildren } from 'react';\nimport React, { cloneElement, isValidElement, useLayoutEffect, useRef } from 'react';\n\nimport type { Button } from '../customizables';\nimport { Col, descriptors, SimpleButton } from '../customizables';\nimport type { UsePopoverReturn } from '../hooks';\nimport { usePopover } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { animations } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\ntype MenuState = {\n popoverCtx: UsePopoverReturn;\n elementId?: MenuId;\n};\n\nexport const [MenuStateCtx, useMenuState] = createContextAndHook<MenuState>('MenuState');\n\ntype MenuProps = PropsWithChildren<Record<never, never>> & {\n elementId?: MenuId;\n popoverPlacement?: Placement;\n};\n\nexport const Menu = withFloatingTree((props: MenuProps) => {\n const { popoverPlacement = 'bottom-end', elementId, ...rest } = props;\n const popoverCtx = usePopover({\n placement: popoverPlacement,\n offset: 8,\n shoudFlip: true,\n });\n\n const value = React.useMemo(() => ({ value: { popoverCtx, elementId } }), [{ ...popoverCtx }, elementId]);\n\n return (\n <MenuStateCtx.Provider\n value={value}\n {...rest}\n />\n );\n});\n\ntype MenuTriggerProps = React.PropsWithChildren<{ arialLabel?: string \| ((open: boolean) => string) }>;\n\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n const { children, arialLabel } = props;\n const { popoverCtx, elementId } = useMenuState();\n const { reference, toggle, isOpen } = popoverCtx;\n\n const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;\n\n if (!isValidElement(children)) {\n return null;\n }\n\n return cloneElement(children, {\n // @ts-expect-error\n ref: reference,\n elementDescriptor: children.props.elementDescriptor \|\| descriptors.menuButton,\n elementId: children.props.elementId \|\| descriptors.menuButton.setId(elementId),\n 'aria-label': normalizedAriaLabel,\n 'aria-expanded': isOpen,\n onClick: (e: React.MouseEvent) => {\n children.props?.onClick?.(e);\n toggle();\n },\n });\n};\n\nconst findMenuItem = (el: Element, siblingType: 'prev' \| 'next', options?: { countSelf?: boolean }) => {\n let tagName = options?.countSelf ? el.tagName : '';\n let sibling: Element \| null = el;\n while (sibling && tagName.toUpperCase() !== 'BUTTON') {\n sibling = sibling[siblingType === 'prev' ? 'previousElementSibling' : 'nextElementSibling'];\n tagName = sibling?.tagName ?? '';\n }\n return sibling;\n};\n\ntype MenuListProps = PropsOfComponent<typeof Col> & {\n asPortal?: boolean;\n};\n\nexport const MenuList = (props: MenuListProps) => {\n const { sx, asPortal, ...rest } = props;\n const { popoverCtx, elementId } = useMenuState();\n const { floating, styles, isOpen, context, nodeId } = popoverCtx;\n const containerRef = useRef<HTMLDivElement \| null>(null);\n\n useLayoutEffect(() => {\n const current = containerRef.current;\n floating(current);\n }, [isOpen]);\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n const current = containerRef.current;\n if (!current) {\n return;\n }\n\n if (current !== document.activeElement) {\n return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n return (findMenuItem(current.children[0], 'next', { countSelf: true }) as HTMLElement)?.focus();\n }\n };\n\n return (\n <Popover\n context={context}\n nodeId={nodeId}\n isOpen={isOpen}\n portal={asPortal}\n >\n <Col\n elementDescriptor={descriptors.menuList}\n elementId={descriptors.menuList.setId(elementId)}\n ref={containerRef}\n role='menu'\n onKeyDown={onKeyDown}\n sx={[\n t => ({\n backgroundColor: colors.makeSolid(t.colors.$colorBackground),\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n outline: 'none',\n borderRadius: t.radii.$md,\n padding: t.space.$0x5,\n overflow: 'hidden',\n top: `calc(100% + ${t.space.$2})`,\n animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n transformOrigin: 'top center',\n zIndex: t.zIndices.$dropdown,\n gap: t.space.$0x5,\n }),\n sx,\n ]}\n style={styles}\n {...rest}\n />\n </Popover>\n );\n};\n\ntype MenuItemProps = PropsOfComponent<typeof Button> & {\n destructive?: boolean;\n closeAfterClick?: boolean;\n};\n\nexport const MenuItem = (props: MenuItemProps) => {\n const { sx, onClick, destructive, closeAfterClick = true, ...rest } = props;\n const { popoverCtx, elementId } = useMenuState();\n const { toggle } = popoverCtx;\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n const current = buttonRef.current;\n if (!current) {\n return;\n }\n\n const key = e.key;\n if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n return;\n }\n\n e.preventDefault();\n const sibling = findMenuItem(current, key === 'ArrowUp' ? 'prev' : 'next');\n (sibling as HTMLElement)?.focus();\n };\n\n return (\n <SimpleButton\n ref={buttonRef}\n elementDescriptor={descriptors.menuItem}\n elementId={descriptors.menuItem.setId(elementId)}\n hoverAsFocus\n variant='ghost'\n colorScheme={destructive ? 'danger' : 'neutral'}\n role='menuitem'\n onKeyDown={onKeyDown}\n focusRing={false}\n onClick={e => {\n onClick?.(e);\n if (closeAfterClick) {\n toggle();\n }\n }}\n sx={[\n theme => ({\n justifyContent: 'start',\n borderRadius: theme.radii.$sm,\n padding: `${theme.space.$1} ${theme.space.$3}`,\n }),\n sx,\n ]}\n {...rest}\n />\n );\n};\n"],"mappings":"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~~GAC3C~~,GACD,GACD;EACD,GAAI;GACJ"}
1	+ {"version":3,"file":"Menu.js","names":["sibling: Element \| null"],"sources":["../../src/elements/Menu.tsx"],"sourcesContent":["import { createContextAndHook } from '@clerk/shared/react';\nimport type { MenuId } from '@clerk/shared/types';\nimport type { Placement } from '@floating-ui/react';\nimport type { PropsWithChildren } from 'react';\nimport React, { cloneElement, isValidElement, useLayoutEffect, useRef } from 'react';\n\nimport type { Button } from '../customizables';\nimport { Col, descriptors, SimpleButton } from '../customizables';\nimport type { UsePopoverReturn } from '../hooks';\nimport { usePopover } from '../hooks';\nimport type { PropsOfComponent } from '../styledSystem';\nimport { animations } from '../styledSystem';\nimport { colors } from '../utils/colors';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\ntype MenuState = {\n popoverCtx: UsePopoverReturn;\n elementId?: MenuId;\n};\n\nexport const [MenuStateCtx, useMenuState] = createContextAndHook<MenuState>('MenuState');\n\ntype MenuProps = PropsWithChildren<Record<never, never>> & {\n elementId?: MenuId;\n popoverPlacement?: Placement;\n};\n\nexport const Menu = withFloatingTree((props: MenuProps) => {\n const { popoverPlacement = 'bottom-end', elementId, ...rest } = props;\n const popoverCtx = usePopover({\n placement: popoverPlacement,\n offset: 8,\n shoudFlip: true,\n });\n\n const value = React.useMemo(() => ({ value: { popoverCtx, elementId } }), [{ ...popoverCtx }, elementId]);\n\n return (\n <MenuStateCtx.Provider\n value={value}\n {...rest}\n />\n );\n});\n\ntype MenuTriggerProps = React.PropsWithChildren<{ arialLabel?: string \| ((open: boolean) => string) }>;\n\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n const { children, arialLabel } = props;\n const { popoverCtx, elementId } = useMenuState();\n const { reference, toggle, isOpen } = popoverCtx;\n\n const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;\n\n if (!isValidElement(children)) {\n return null;\n }\n\n return cloneElement(children, {\n // @ts-expect-error\n ref: reference,\n elementDescriptor: children.props.elementDescriptor \|\| descriptors.menuButton,\n elementId: children.props.elementId \|\| descriptors.menuButton.setId(elementId),\n 'aria-label': normalizedAriaLabel,\n 'aria-expanded': isOpen,\n onClick: (e: React.MouseEvent) => {\n children.props?.onClick?.(e);\n toggle();\n },\n });\n};\n\nconst findMenuItem = (el: Element, siblingType: 'prev' \| 'next', options?: { countSelf?: boolean }) => {\n let tagName = options?.countSelf ? el.tagName : '';\n let sibling: Element \| null = el;\n while (sibling && tagName.toUpperCase() !== 'BUTTON') {\n sibling = sibling[siblingType === 'prev' ? 'previousElementSibling' : 'nextElementSibling'];\n tagName = sibling?.tagName ?? '';\n }\n return sibling;\n};\n\ntype MenuListProps = PropsOfComponent<typeof Col> & {\n asPortal?: boolean;\n};\n\nexport const MenuList = (props: MenuListProps) => {\n const { sx, asPortal, ...rest } = props;\n const { popoverCtx, elementId } = useMenuState();\n const { floating, styles, isOpen, context, nodeId } = popoverCtx;\n const containerRef = useRef<HTMLDivElement \| null>(null);\n\n useLayoutEffect(() => {\n const current = containerRef.current;\n floating(current);\n }, [isOpen]);\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n const current = containerRef.current;\n if (!current) {\n return;\n }\n\n if (current !== document.activeElement) {\n return;\n }\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n return (findMenuItem(current.children[0], 'next', { countSelf: true }) as HTMLElement)?.focus();\n }\n };\n\n return (\n <Popover\n context={context}\n nodeId={nodeId}\n isOpen={isOpen}\n portal={asPortal}\n >\n <Col\n elementDescriptor={descriptors.menuList}\n elementId={descriptors.menuList.setId(elementId)}\n ref={containerRef}\n role='menu'\n onKeyDown={onKeyDown}\n sx={[\n t => ({\n backgroundColor: colors.makeSolid(t.colors.$colorBackground),\n borderWidth: t.borderWidths.$normal,\n borderStyle: t.borderStyles.$solid,\n borderColor: t.colors.$borderAlpha150,\n outline: 'none',\n borderRadius: t.radii.$md,\n padding: t.space.$0x5,\n overflow: 'hidden',\n top: `calc(100% + ${t.space.$2})`,\n animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n transformOrigin: 'top center',\n zIndex: t.zIndices.$dropdown,\n gap: t.space.$0x5,\n }),\n sx,\n ]}\n style={styles}\n {...rest}\n />\n </Popover>\n );\n};\n\ntype MenuItemProps = PropsOfComponent<typeof Button> & {\n destructive?: boolean;\n closeAfterClick?: boolean;\n};\n\nexport const MenuItem = (props: MenuItemProps) => {\n const { sx, onClick, destructive, closeAfterClick = true, ...rest } = props;\n const { popoverCtx, elementId } = useMenuState();\n const { toggle } = popoverCtx;\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const onKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n const current = buttonRef.current;\n if (!current) {\n return;\n }\n\n const key = e.key;\n if (key !== 'ArrowUp' && key !== 'ArrowDown') {\n return;\n }\n\n e.preventDefault();\n const sibling = findMenuItem(current, key === 'ArrowUp' ? 'prev' : 'next');\n (sibling as HTMLElement)?.focus();\n };\n\n return (\n <SimpleButton\n ref={buttonRef}\n elementDescriptor={descriptors.menuItem}\n elementId={descriptors.menuItem.setId(elementId)}\n hoverAsFocus\n variant='ghost'\n colorScheme={destructive ? 'danger' : 'neutral'}\n role='menuitem'\n onKeyDown={onKeyDown}\n focusRing={false}\n onClick={e => {\n onClick?.(e);\n if (closeAfterClick) {\n toggle();\n }\n }}\n sx={[\n theme => ({\n justifyContent: 'start',\n borderRadius: theme.radii.$sm,\n padding: `${theme.space.$1} ${theme.space.$3}`,\n whiteSpace: 'nowrap',\n }),\n sx,\n ]}\n {...rest}\n />\n );\n};\n"],"mappings":"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"}

package/dist/elements/Modal.js CHANGED Viewed

@@ -7,14 +7,15 @@ import { withFloatingTree } from "./contexts/index.js";
 import { Flex } from "../customizables/index.js";
 import { Popover } from "./Popover.js";
 import React, { useRef } from "react";
+import { createContextAndHook, usePortalRoot, useSafeLayoutEffect } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { createContextAndHook, useSafeLayoutEffect } from "@clerk/shared/react";
 //#region src/elements/Modal.tsx
 const [ModalContext, _, useUnsafeModalContext] = createContextAndHook("ModalContext");
 const Modal = withFloatingTree((props) => {
 	const { disableScrollLock, enableScrollLock } = useScrollLock();
 	const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } = props;
+	const portalRootFromContext = usePortalRoot();
 	const overlayRef = useRef(null);
 	const { floating, isOpen, context, nodeId, toggle } = usePopover({
 		defaultOpen: true,
@@ -38,7 +39,7 @@ const Modal = withFloatingTree((props) => {
 		context,
 		isOpen,
 		outsideElementsInert: true,
-		root: portalRoot,
+		root: portalRoot ?? portalRootFromContext?.() ?? void 0,
 		initialFocus: initialFocusRef,
 		children: /* @__PURE__ */ jsx(ModalContext.Provider, {
 			value: modalCtx,

package/dist/elements/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","names":[],"sources":["../../src/elements/Modal.tsx"],"sourcesContent":["import { createContextAndHook, useSafeLayoutEffect } from '@clerk/shared/react';\nimport React, { useRef } from 'react';\n\nimport { descriptors, Flex } from '../customizables';\nimport { usePopover } from '../hooks';\nimport { useScrollLock } from '../hooks/useScrollLock';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { animations, mqu } from '../styledSystem';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\nexport const [ModalContext, _, useUnsafeModalContext] = createContextAndHook<{ toggle?: () => void }>('ModalContext');\n\ntype ModalProps = React.PropsWithChildren<{\n id?: string;\n handleOpen?: () => void;\n handleClose?: () => void;\n contentSx?: ThemableCssProp;\n containerSx?: ThemableCssProp;\n canCloseModal?: boolean;\n style?: React.CSSProperties;\n portalRoot?: HTMLElement \| React.MutableRefObject<HTMLElement \| null>;\n initialFocusRef?: number \| React.MutableRefObject<HTMLElement \| null>;\n}>;\n\nexport const Modal = withFloatingTree((props: ModalProps) => {\n const { disableScrollLock, enableScrollLock } = useScrollLock();\n const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =\n props;\n const overlayRef = useRef<HTMLDivElement>(null);\n const { floating, isOpen, context, nodeId, toggle } = usePopover({\n defaultOpen: true,\n autoUpdate: false,\n outsidePress: e => e.target === overlayRef.current,\n canCloseModal,\n });\n\n React.useEffect(() => {\n if (!isOpen) {\n handleClose?.();\n } else {\n handleOpen?.();\n }\n }, [isOpen]);\n const modalCtx = React.useMemo(() => ({ value: canCloseModal === false ? {} : { toggle } }), [toggle, canCloseModal]);\n\n useSafeLayoutEffect(() => {\n enableScrollLock();\n\n return () => {\n disableScrollLock();\n };\n }, []);\n\n return (\n <Popover\n nodeId={nodeId}\n context={context}\n isOpen={isOpen}\n outsideElementsInert\n root={~~portalRoot~~}\n initialFocus={initialFocusRef}\n >\n <ModalContext.Provider value={modalCtx}>\n <Flex\n id={id}\n ref={overlayRef}\n elementDescriptor={descriptors.modalBackdrop}\n style={style}\n sx={[\n t => ({\n animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,\n zIndex: t.zIndices.$modal,\n backgroundColor: t.colors.$colorModalBackdrop,\n alignItems: 'flex-start',\n justifyContent: 'center',\n overflow: 'auto',\n width: '100vw',\n height: ['100vh', '-webkit-fill-available'],\n position: 'fixed',\n left: 0,\n top: 0,\n }),\n containerSx,\n ]}\n >\n <Flex\n elementDescriptor={descriptors.modalContent}\n ref={floating}\n aria-modal='true'\n role='dialog'\n sx={[\n t => ({\n position: 'relative',\n outline: 0,\n animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`,\n margin: `${t.space.$16} 0`,\n [mqu.sm]: {\n margin: `${t.space.$10} 0`,\n },\n }),\n contentSx,\n ]}\n >\n {props.children}\n </Flex>\n </Flex>\n </ModalContext.Provider>\n </Popover>\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,CAAC,cAAc,GAAG,yBAAyB,qBAA8C,eAAe;AAcrH,MAAa,QAAQ,kBAAkB,UAAsB;CAC3D,MAAM,EAAE,mBAAmB,qBAAqB,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY,WAAW,aAAa,eAAe,IAAI,OAAO,YAAY,oBAC7F;CACF,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,QAAQ,WAAW,WAAW;EAC/D,aAAa;EACb,YAAY;EACZ,eAAc,MAAK,EAAE,WAAW,WAAW;EAC3C;EACD,CAAC;AAEF,OAAM,gBAAgB;AACpB,MAAI,CAAC,OACH,gBAAe;MAEf,eAAc;IAEf,CAAC,OAAO,CAAC;CACZ,MAAM,WAAW,MAAM,eAAe,EAAE,OAAO,kBAAkB,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,cAAc,CAAC;AAErH,2BAA0B;AACxB,oBAAkB;AAElB,eAAa;AACX,sBAAmB;;IAEpB,EAAE,CAAC;~~AAEN~~,QACE,oBAAC;EACS;EACC;EACD;EACR;EACA,~~MAAM~~;~~EACN~~,cAAc;YAEd,oBAAC,aAAa;GAAS,OAAO;aAC5B,oBAAC;IACK;IACJ,KAAK;IACL,mBAAmB,YAAY;IACxB;IACP,IAAI,EACF,OAAM;KACJ,WAAW,GAAG,WAAW,OAAO,SAAS,EAAE,iBAAiB;KAC5D,QAAQ,EAAE,SAAS;KACnB,iBAAiB,EAAE,OAAO;KAC1B,YAAY;KACZ,gBAAgB;KAChB,UAAU;KACV,OAAO;KACP,QAAQ,CAAC,SAAS,yBAAyB;KAC3C,UAAU;KACV,MAAM;KACN,KAAK;KACN,GACD,YACD;cAED,oBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;KACL,cAAW;KACX,MAAK;KACL,IAAI,EACF,OAAM;MACJ,UAAU;MACV,SAAS;MACT,WAAW,GAAG,WAAW,kBAAkB,SAAS,EAAE,iBAAiB;MACvE,QAAQ,GAAG,EAAE,MAAM,IAAI;OACtB,IAAI,KAAK,EACR,QAAQ,GAAG,EAAE,MAAM,IAAI,KACxB;MACF,GACD,UACD;eAEA,MAAM;MACF;KACF;IACe;GAChB;EAEZ"}
1	+ {"version":3,"file":"Modal.js","names":[],"sources":["../../src/elements/Modal.tsx"],"sourcesContent":["import { createContextAndHook, usePortalRoot, useSafeLayoutEffect } from '@clerk/shared/react';\nimport React, { useRef } from 'react';\n\nimport { descriptors, Flex } from '../customizables';\nimport { usePopover } from '../hooks';\nimport { useScrollLock } from '../hooks/useScrollLock';\nimport type { ThemableCssProp } from '../styledSystem';\nimport { animations, mqu } from '../styledSystem';\nimport { withFloatingTree } from './contexts';\nimport { Popover } from './Popover';\n\nexport const [ModalContext, _, useUnsafeModalContext] = createContextAndHook<{ toggle?: () => void }>('ModalContext');\n\ntype ModalProps = React.PropsWithChildren<{\n id?: string;\n handleOpen?: () => void;\n handleClose?: () => void;\n contentSx?: ThemableCssProp;\n containerSx?: ThemableCssProp;\n canCloseModal?: boolean;\n style?: React.CSSProperties;\n portalRoot?: HTMLElement \| React.MutableRefObject<HTMLElement \| null>;\n initialFocusRef?: number \| React.MutableRefObject<HTMLElement \| null>;\n}>;\n\nexport const Modal = withFloatingTree((props: ModalProps) => {\n const { disableScrollLock, enableScrollLock } = useScrollLock();\n const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =\n props;\n const portalRootFromContext = usePortalRoot();\n const overlayRef = useRef<HTMLDivElement>(null);\n const { floating, isOpen, context, nodeId, toggle } = usePopover({\n defaultOpen: true,\n autoUpdate: false,\n outsidePress: e => e.target === overlayRef.current,\n canCloseModal,\n });\n\n React.useEffect(() => {\n if (!isOpen) {\n handleClose?.();\n } else {\n handleOpen?.();\n }\n }, [isOpen]);\n const modalCtx = React.useMemo(() => ({ value: canCloseModal === false ? {} : { toggle } }), [toggle, canCloseModal]);\n\n useSafeLayoutEffect(() => {\n enableScrollLock();\n\n return () => {\n disableScrollLock();\n };\n }, []);\n\n const effectivePortalRoot = portalRoot ?? portalRootFromContext?.() ?? undefined;\n\n return (\n <Popover\n nodeId={nodeId}\n context={context}\n isOpen={isOpen}\n outsideElementsInert\n root={effectivePortalRoot}\n initialFocus={initialFocusRef}\n >\n <ModalContext.Provider value={modalCtx}>\n <Flex\n id={id}\n ref={overlayRef}\n elementDescriptor={descriptors.modalBackdrop}\n style={style}\n sx={[\n t => ({\n animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,\n zIndex: t.zIndices.$modal,\n backgroundColor: t.colors.$colorModalBackdrop,\n alignItems: 'flex-start',\n justifyContent: 'center',\n overflow: 'auto',\n width: '100vw',\n height: ['100vh', '-webkit-fill-available'],\n position: 'fixed',\n left: 0,\n top: 0,\n }),\n containerSx,\n ]}\n >\n <Flex\n elementDescriptor={descriptors.modalContent}\n ref={floating}\n aria-modal='true'\n role='dialog'\n sx={[\n t => ({\n position: 'relative',\n outline: 0,\n animation: `${animations.modalSlideAndFade} 180ms ${t.transitionTiming.$easeOut}`,\n margin: `${t.space.$16} 0`,\n [mqu.sm]: {\n margin: `${t.space.$10} 0`,\n },\n }),\n contentSx,\n ]}\n >\n {props.children}\n </Flex>\n </Flex>\n </ModalContext.Provider>\n </Popover>\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAa,CAAC,cAAc,GAAG,yBAAyB,qBAA8C,eAAe;AAcrH,MAAa,QAAQ,kBAAkB,UAAsB;CAC3D,MAAM,EAAE,mBAAmB,qBAAqB,eAAe;CAC/D,MAAM,EAAE,aAAa,YAAY,WAAW,aAAa,eAAe,IAAI,OAAO,YAAY,oBAC7F;CACF,MAAM,wBAAwB,eAAe;CAC7C,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,QAAQ,WAAW,WAAW;EAC/D,aAAa;EACb,YAAY;EACZ,eAAc,MAAK,EAAE,WAAW,WAAW;EAC3C;EACD,CAAC;AAEF,OAAM,gBAAgB;AACpB,MAAI,CAAC,OACH,gBAAe;MAEf,eAAc;IAEf,CAAC,OAAO,CAAC;CACZ,MAAM,WAAW,MAAM,eAAe,EAAE,OAAO,kBAAkB,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,cAAc,CAAC;AAErH,2BAA0B;AACxB,oBAAkB;AAElB,eAAa;AACX,sBAAmB;;IAEpB,EAAE,CAAC;AAIN,QACE,oBAAC;EACS;EACC;EACD;EACR;EACA,MARwB,cAAc,yBAAyB,IAAI;EASnE,cAAc;YAEd,oBAAC,aAAa;GAAS,OAAO;aAC5B,oBAAC;IACK;IACJ,KAAK;IACL,mBAAmB,YAAY;IACxB;IACP,IAAI,EACF,OAAM;KACJ,WAAW,GAAG,WAAW,OAAO,SAAS,EAAE,iBAAiB;KAC5D,QAAQ,EAAE,SAAS;KACnB,iBAAiB,EAAE,OAAO;KAC1B,YAAY;KACZ,gBAAgB;KAChB,UAAU;KACV,OAAO;KACP,QAAQ,CAAC,SAAS,yBAAyB;KAC3C,UAAU;KACV,MAAM;KACN,KAAK;KACN,GACD,YACD;cAED,oBAAC;KACC,mBAAmB,YAAY;KAC/B,KAAK;KACL,cAAW;KACX,MAAK;KACL,IAAI,EACF,OAAM;MACJ,UAAU;MACV,SAAS;MACT,WAAW,GAAG,WAAW,kBAAkB,SAAS,EAAE,iBAAiB;MACvE,QAAQ,GAAG,EAAE,MAAM,IAAI;OACtB,IAAI,KAAK,EACR,QAAQ,GAAG,EAAE,MAAM,IAAI,KACxB;MACF,GACD,UACD;eAEA,MAAM;MACF;KACF;IACe;GAChB;EAEZ"}

package/dist/elements/Navbar.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { DevModeOverlay } from "./DevModeNotice.js";
 import { Popover } from "./Popover.js";
 import { Card } from "./Card/index.js";
 import React, { useCallback } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { createContextAndHook } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/elements/Navbar.tsx
 const [NavbarContext, useNavbarContext, useUnsafeNavbarContext] = createContextAndHook("NavbarContext");

package/dist/elements/PhoneInput/index.js CHANGED Viewed

@@ -8,8 +8,8 @@ import { Select, SelectButton, SelectOptionList } from "../Select.js";
 import { IsoToCountryMap } from "./countryCodeData.js";
 import { useFormattedPhoneNumber } from "./useFormattedPhoneNumber.js";
 import React, { forwardRef, memo, useEffect, useMemo, useRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/elements/PhoneInput/index.tsx
 const createSelectOption = (country) => {

package/dist/elements/Popover.js CHANGED Viewed

@@ -1,14 +1,17 @@
 import React from "react";
+import { usePortalRoot } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx } from "@emotion/react/jsx-runtime";
 import { FloatingFocusManager, FloatingNode, FloatingPortal } from "@floating-ui/react";
 //#region src/elements/Popover.tsx
 const Popover = (props) => {
 	const { context, initialFocus, outsideElementsInert = false, order = ["reference", "content"], nodeId, isOpen, portal = true, root, children } = props;
+	const portalRoot = usePortalRoot();
+	const effectiveRoot = root ?? portalRoot?.() ?? void 0;
 	if (portal) return /* @__PURE__ */ jsx(FloatingNode, {
 		id: nodeId,
 		children: /* @__PURE__ */ jsx(FloatingPortal, {
-			root,
+			root: effectiveRoot,
 			children: isOpen && /* @__PURE__ */ jsx(FloatingFocusManager, {
 				context,
 				initialFocus,