npm - @clerk/ui - Versions diffs - 1.0.0-snapshot.v20251208202852 → 1.0.0-snapshot.v20251215203425 - Mend

@clerk/ui 1.0.0-snapshot.v20251208202852 → 1.0.0-snapshot.v20251215203425

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 (234) hide show

package/dist/components/OrganizationProfile/DomainList.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { RemoveDomainScreen } from "./RemoveDomainScreen.js";
 import { VerifiedDomainScreen } from "./VerifiedDomainScreen.js";
 import { VerifyDomainScreen } from "./VerifyDomainScreen.js";
 import React, { useMemo } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/DomainList.tsx
 const useMenuActions = (domain) => {

package/dist/components/OrganizationProfile/InviteMembersForm.js CHANGED Viewed

@@ -13,9 +13,9 @@ import { TagInput } from "../../elements/TagInput.js";
 import { useFetchRoles } from "../../hooks/useFetchRoles.js";
 import { RoleSelect } from "./MemberListTable.js";
 import { useEffect, useState } from "react";
+import { useOrganization } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
-import { useOrganization } from "@clerk/shared/react";
 //#region src/components/OrganizationProfile/InviteMembersForm.tsx
 const isEmail = (str) => /^\S+@\S+\.\S+$/.test(str);
@@ -143,8 +143,8 @@ const AsyncRoleSelect = (field) => {
 	});
 };
 /**
-* Determines default role from the organization settings or fallback to
-* the only available role.
+* Determines default Role from the Organization settings or fallback to
+* the only available Role.
 */
 const useDefaultRole = () => {
 	const { options } = useFetchRoles();

package/dist/components/OrganizationProfile/InviteMembersForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InviteMembersForm.js","names":["err","t"],"sources":["../../../src/components/OrganizationProfile/InviteMembersForm.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { useOrganization } from '@clerk/shared/react';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { TagInput } from '@/ui/elements/TagInput';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createListFormat } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { useFetchRoles } from '../../hooks/useFetchRoles';\nimport type { LocalizationKey } from '../../localization';\nimport { localizationKeys, useLocalizations } from '../../localization';\nimport { mqu } from '../../styledSystem';\nimport { RoleSelect } from './MemberListTable';\n\nconst isEmail = (str: string) => /^\\S+@\\S+\\.\\S+$/.test(str);\n\ntype InviteMembersFormProps = {\n onSuccess?: () => void;\n onReset?: () => void;\n primaryButtonLabel?: LocalizationKey;\n resetButtonLabel?: LocalizationKey;\n};\n\nexport const InviteMembersForm = (props: InviteMembersFormProps) => {\n const { onSuccess, onReset, resetButtonLabel } = props;\n const { organization, invitations } = useOrganization({\n invitations: {\n pageSize: 10,\n keepPreviousData: true,\n },\n });\n const card = useCardState();\n const { t, locale } = useLocalizations();\n const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);\n\n const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));\n\n const emailAddressField = useFormControl('emailAddress', '', {\n type: 'text',\n label: localizationKeys('formFieldLabel__emailAddresses'),\n });\n\n const defaultRole = useDefaultRole();\n const roleField = useFormControl('role', '', {\n label: localizationKeys('formFieldLabel__role'),\n });\n\n useEffect(() => {\n if (roleField.value \|\| !defaultRole) {\n return;\n }\n\n roleField.setValue(defaultRole);\n }, [defaultRole, roleField]);\n\n if (!organization) {\n return null;\n }\n\n const {\n props: {\n setError,\n setWarning,\n setSuccess,\n setInfo,\n isFocused,\n validatePassword,\n setHasPassedComplexity,\n hasPassedComplexity,\n feedback,\n feedbackType,\n clearFeedback,\n ...restEmailAddressProps\n },\n } = emailAddressField;\n\n const canSubmit = (!!emailAddressField.value.length \|\| isValidUnsubmittedEmail) && !!roleField.value;\n\n const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit) {\n return;\n }\n\n const submittedData = new FormData(e.currentTarget);\n return organization\n .inviteMembers({\n emailAddresses: emailAddressField.value.split(','),\n role: submittedData.get('role') as string,\n })\n .then(async () => {\n await invitations?.revalidate?.();\n return onSuccess?.();\n })\n .catch(err => {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n removeInvalidEmails(err.errors[0]);\n\n switch (err.errors?.[0]?.code) {\n case 'duplicate_record': {\n const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses \|\| [];\n card.setError(\n t(\n localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {\n // Create a localized list of email addresses\n email_addresses: createListFormat(unlocalizedEmailsList, locale),\n }),\n ),\n );\n break;\n }\n case 'already_a_member_in_organization': {\n /*\n Extracts email from the error message since it's not provided in the error response\n /\n const longMessage = err.errors[0].longMessage ?? '';\n const email = longMessage.match(/\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z\|a-z]{2,}\\b/)?.[0];\n\n handleError(err, [], err =>\n email\n ? /\n Fallbacks to original error message in case the email cannot be extracted\n /\n card.setError(\n t(\n localizationKeys('unstable__errors.already_a_member_in_organization', {\n email,\n }),\n ),\n )\n : card.setError(err),\n );\n\n break;\n }\n default: {\n handleError(err, [], card.setError);\n }\n }\n });\n };\n\n const removeInvalidEmails = (err: ClerkAPIError) => {\n const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);\n const emails = emailAddressField.value.split(',');\n emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));\n };\n\n return (\n <Form.Root onSubmit={onSubmit}>\n <Form.ControlRow elementId={emailAddressField.id}>\n <TagInput\n {...restEmailAddressProps}\n autoFocus\n validate={isEmail}\n sx={{ width: '100%' }}\n validateUnsubmittedEmail={validateUnsubmittedEmail}\n placeholder={localizationKeys('formFieldInputPlaceholder__emailAddresses')}\n />\n </Form.ControlRow>\n <Flex\n align='center'\n justify='between'\n sx={t => ({\n marginTop: t.space.$2,\n gap: t.space.$4,\n flexWrap: 'wrap',\n [mqu.sm]: { justifyContent: 'center' },\n })}\n >\n <AsyncRoleSelect {...roleField} />\n <FormButtonContainer sx={t => ({ margin: t.space.$none, flexWrap: 'wrap', justifyContent: 'center' })}>\n <Form.SubmitButton\n block={false}\n isDisabled={!canSubmit}\n localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}\n />\n <Form.ResetButton\n localizationKey={resetButtonLabel \|\| localizationKeys('userProfile.formButtonReset')}\n block={false}\n onClick={onReset}\n />\n </FormButtonContainer>\n </Flex>\n </Form.Root>\n );\n};\n\nconst AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {\n const { options, isLoading } = useFetchRoles();\n\n const { t } = useLocalizations();\n\n return (\n <Form.ControlRow elementId={field.id}>\n <Flex\n direction='col'\n gap={2}\n >\n <RoleSelect\n {...field.props}\n roles={options}\n isDisabled={isLoading}\n onChange={value => field.setValue(value)}\n triggerSx={t => ({ minWidth: t.sizes.$40, justifyContent: 'space-between', display: 'flex' })}\n optionListSx={t => ({ minWidth: t.sizes.$48 })}\n prefixLocalizationKey={`${t(localizationKeys('formFieldLabel__role'))}:`}\n />\n </Flex>\n </Form.ControlRow>\n );\n};\n\n/\n Determines default role from the organization settings or fallback to\n * the only available role.\n */\nconst useDefaultRole = () => {\n const { options } = useFetchRoles();\n const { organizationSettings } = useEnvironment();\n\n let defaultRole = organizationSettings.domains.defaultRole;\n\n if (!defaultRole && options?.length === 1) {\n defaultRole = options[0].value;\n }\n\n return defaultRole;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,WAAW,QAAgB,iBAAiB,KAAK,IAAI;AAS3D,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,SAAS,qBAAqB;CACjD,MAAM,EAAE,cAAc,gBAAgB,gBAAgB,EACpD,aAAa;EACX,UAAU;EACV,kBAAkB;EACnB,EACF,CAAC;CACF,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,GAAG,WAAW,kBAAkB;CACxC,MAAM,CAAC,yBAAyB,8BAA8B,SAAS,MAAM;CAE7E,MAAM,4BAA4B,UAAkB,2BAA2B,QAAQ,MAAM,CAAC;CAE9F,MAAM,oBAAoB,eAAe,gBAAgB,IAAI;EAC3D,MAAM;EACN,OAAO,iBAAiB,iCAAiC;EAC1D,CAAC;CAEF,MAAM,cAAc,gBAAgB;CACpC,MAAM,YAAY,eAAe,QAAQ,IAAI,EAC3C,OAAO,iBAAiB,uBAAuB,EAChD,CAAC;AAEF,iBAAgB;AACd,MAAI,UAAU,SAAS,CAAC,YACtB;AAGF,YAAU,SAAS,YAAY;IAC9B,CAAC,aAAa,UAAU,CAAC;AAE5B,KAAI,CAAC,aACH,QAAO;CAGT,MAAM,EACJ,OAAO,EACL,UACA,YACA,YACA,SACA,WACA,kBACA,wBACA,qBACA,UACA,cACA,cACA,GAAG,4BAEH;CAEJ,MAAM,aAAa,CAAC,CAAC,kBAAkB,MAAM,UAAU,4BAA4B,CAAC,CAAC,UAAU;CAE/F,MAAM,YAAY,MAAkC;AAClD,IAAE,gBAAgB;AAClB,MAAI,CAAC,UACH;EAGF,MAAM,gBAAgB,IAAI,SAAS,EAAE,cAAc;AACnD,SAAO,aACJ,cAAc;GACb,gBAAgB,kBAAkB,MAAM,MAAM,IAAI;GAClD,MAAM,cAAc,IAAI,OAAO;GAChC,CAAC,CACD,KAAK,YAAY;AAChB,SAAM,aAAa,cAAc;AACjC,UAAO,aAAa;IACpB,CACD,OAAM,QAAO;AACZ,OAAI,CAAC,wBAAwB,IAAI,EAAE;AACjC,gBAAY,KAAK,EAAE,EAAE,KAAK,SAAS;AACnC;;AAGF,uBAAoB,IAAI,OAAO,GAAG;AAElC,WAAQ,IAAI,SAAS,IAAI,MAAzB;IACE,KAAK,oBAAoB;KACvB,MAAM,wBAAwB,IAAI,OAAO,GAAG,MAAM,kBAAkB,EAAE;AACtE,UAAK,SACH,EACE,iBAAiB,6DAA6D,EAE5E,iBAAiB,iBAAiB,uBAAuB,OAAO,EACjE,CAAC,CACH,CACF;AACD;;IAEF,KAAK,oCAAoC;KAKvC,MAAM,SADc,IAAI,OAAO,GAAG,eAAe,IACvB,MAAM,sDAAsD,GAAG;AAEzF,iBAAY,KAAK,EAAE,GAAE,UACnB,QAII,KAAK,SACH,EACE,iBAAiB,qDAAqD,EACpE,OACD,CAAC,CACH,CACF,GACD,KAAK,SAASA,MAAI,CACvB;AAED;;IAEF,QACE,aAAY,KAAK,EAAE,EAAE,KAAK,SAAS;;IAGvC;;CAGN,MAAM,uBAAuB,QAAuB;EAClD,MAAM,gBAAgB,IAAI,IAAI,CAAC,GAAI,IAAI,MAAM,kBAAkB,EAAE,EAAG,GAAI,IAAI,MAAM,eAAe,EAAE,CAAE,CAAC;EACtG,MAAM,SAAS,kBAAkB,MAAM,MAAM,IAAI;AACjD,oBAAkB,SAAS,OAAO,QAAO,MAAK,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;;AAGjF,QACE,qBAAC,KAAK;EAAe;aACnB,oBAAC,KAAK;GAAW,WAAW,kBAAkB;aAC5C,oBAAC;IACC,GAAI;IACJ;IACA,UAAU;IACV,IAAI,EAAE,OAAO,QAAQ;IACK;IAC1B,aAAa,iBAAiB,4CAA4C;KAC1E;IACc,EAClB,qBAAC;GACC,OAAM;GACN,SAAQ;GACR,KAAI,SAAM;IACR,WAAWC,IAAE,MAAM;IACnB,KAAKA,IAAE,MAAM;IACb,UAAU;KACT,IAAI,KAAK,EAAE,gBAAgB,UAAU;IACvC;cAED,oBAAC,mBAAgB,GAAI,YAAa,EAClC,qBAAC;IAAoB,KAAI,SAAM;KAAE,QAAQA,IAAE,MAAM;KAAO,UAAU;KAAQ,gBAAgB;KAAU;eAClG,oBAAC,KAAK;KACJ,OAAO;KACP,YAAY,CAAC;KACb,iBAAiB,iBAAiB,6DAA6D;MAC/F,EACF,oBAAC,KAAK;KACJ,iBAAiB,oBAAoB,iBAAiB,8BAA8B;KACpF,OAAO;KACP,SAAS;MACT;KACkB;IACjB;GACG;;AAIhB,MAAM,mBAAmB,UAAqD;CAC5E,MAAM,EAAE,SAAS,cAAc,eAAe;CAE9C,MAAM,EAAE,MAAM,kBAAkB;AAEhC,QACE,oBAAC,KAAK;EAAW,WAAW,MAAM;YAChC,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI,MAAM;IACV,OAAO;IACP,YAAY;IACZ,WAAU,UAAS,MAAM,SAAS,MAAM;IACxC,YAAW,SAAM;KAAE,UAAUA,IAAE,MAAM;KAAK,gBAAgB;KAAiB,SAAS;KAAQ;IAC5F,eAAc,SAAM,EAAE,UAAUA,IAAE,MAAM,KAAK;IAC7C,uBAAuB,GAAG,EAAE,iBAAiB,uBAAuB,CAAC,CAAC;KACtE;IACG;GACS;;;;;;AAQtB,MAAM,uBAAuB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EAAE,yBAAyB,gBAAgB;CAEjD,IAAI,cAAc,qBAAqB,QAAQ;AAE/C,KAAI,CAAC,eAAe,SAAS,WAAW,EACtC,eAAc,QAAQ,GAAG;AAG3B,QAAO"}
1	+ {"version":3,"file":"InviteMembersForm.js","names":["err","t"],"sources":["../../../src/components/OrganizationProfile/InviteMembersForm.tsx"],"sourcesContent":["import { isClerkAPIResponseError } from '@clerk/shared/error';\nimport { useOrganization } from '@clerk/shared/react';\nimport type { ClerkAPIError } from '@clerk/shared/types';\nimport type { FormEvent } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useCardState } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { FormButtonContainer } from '@/ui/elements/FormButtons';\nimport { TagInput } from '@/ui/elements/TagInput';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createListFormat } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useEnvironment } from '../../contexts';\nimport { Flex } from '../../customizables';\nimport { useFetchRoles } from '../../hooks/useFetchRoles';\nimport type { LocalizationKey } from '../../localization';\nimport { localizationKeys, useLocalizations } from '../../localization';\nimport { mqu } from '../../styledSystem';\nimport { RoleSelect } from './MemberListTable';\n\nconst isEmail = (str: string) => /^\\S+@\\S+\\.\\S+$/.test(str);\n\ntype InviteMembersFormProps = {\n onSuccess?: () => void;\n onReset?: () => void;\n primaryButtonLabel?: LocalizationKey;\n resetButtonLabel?: LocalizationKey;\n};\n\nexport const InviteMembersForm = (props: InviteMembersFormProps) => {\n const { onSuccess, onReset, resetButtonLabel } = props;\n const { organization, invitations } = useOrganization({\n invitations: {\n pageSize: 10,\n keepPreviousData: true,\n },\n });\n const card = useCardState();\n const { t, locale } = useLocalizations();\n const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);\n\n const validateUnsubmittedEmail = (value: string) => setIsValidUnsubmittedEmail(isEmail(value));\n\n const emailAddressField = useFormControl('emailAddress', '', {\n type: 'text',\n label: localizationKeys('formFieldLabel__emailAddresses'),\n });\n\n const defaultRole = useDefaultRole();\n const roleField = useFormControl('role', '', {\n label: localizationKeys('formFieldLabel__role'),\n });\n\n useEffect(() => {\n if (roleField.value \|\| !defaultRole) {\n return;\n }\n\n roleField.setValue(defaultRole);\n }, [defaultRole, roleField]);\n\n if (!organization) {\n return null;\n }\n\n const {\n props: {\n setError,\n setWarning,\n setSuccess,\n setInfo,\n isFocused,\n validatePassword,\n setHasPassedComplexity,\n hasPassedComplexity,\n feedback,\n feedbackType,\n clearFeedback,\n ...restEmailAddressProps\n },\n } = emailAddressField;\n\n const canSubmit = (!!emailAddressField.value.length \|\| isValidUnsubmittedEmail) && !!roleField.value;\n\n const onSubmit = (e: FormEvent<HTMLFormElement>) => {\n e.preventDefault();\n if (!canSubmit) {\n return;\n }\n\n const submittedData = new FormData(e.currentTarget);\n return organization\n .inviteMembers({\n emailAddresses: emailAddressField.value.split(','),\n role: submittedData.get('role') as string,\n })\n .then(async () => {\n await invitations?.revalidate?.();\n return onSuccess?.();\n })\n .catch(err => {\n if (!isClerkAPIResponseError(err)) {\n handleError(err, [], card.setError);\n return;\n }\n\n removeInvalidEmails(err.errors[0]);\n\n switch (err.errors?.[0]?.code) {\n case 'duplicate_record': {\n const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses \|\| [];\n card.setError(\n t(\n localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {\n // Create a localized list of email addresses\n email_addresses: createListFormat(unlocalizedEmailsList, locale),\n }),\n ),\n );\n break;\n }\n case 'already_a_member_in_organization': {\n /*\n Extracts email from the error message since it's not provided in the error response\n /\n const longMessage = err.errors[0].longMessage ?? '';\n const email = longMessage.match(/\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z\|a-z]{2,}\\b/)?.[0];\n\n handleError(err, [], err =>\n email\n ? /\n Fallbacks to original error message in case the email cannot be extracted\n /\n card.setError(\n t(\n localizationKeys('unstable__errors.already_a_member_in_organization', {\n email,\n }),\n ),\n )\n : card.setError(err),\n );\n\n break;\n }\n default: {\n handleError(err, [], card.setError);\n }\n }\n });\n };\n\n const removeInvalidEmails = (err: ClerkAPIError) => {\n const invalidEmails = new Set([...(err.meta?.emailAddresses ?? []), ...(err.meta?.identifiers ?? [])]);\n const emails = emailAddressField.value.split(',');\n emailAddressField.setValue(emails.filter(e => !invalidEmails.has(e)).join(','));\n };\n\n return (\n <Form.Root onSubmit={onSubmit}>\n <Form.ControlRow elementId={emailAddressField.id}>\n <TagInput\n {...restEmailAddressProps}\n autoFocus\n validate={isEmail}\n sx={{ width: '100%' }}\n validateUnsubmittedEmail={validateUnsubmittedEmail}\n placeholder={localizationKeys('formFieldInputPlaceholder__emailAddresses')}\n />\n </Form.ControlRow>\n <Flex\n align='center'\n justify='between'\n sx={t => ({\n marginTop: t.space.$2,\n gap: t.space.$4,\n flexWrap: 'wrap',\n [mqu.sm]: { justifyContent: 'center' },\n })}\n >\n <AsyncRoleSelect {...roleField} />\n <FormButtonContainer sx={t => ({ margin: t.space.$none, flexWrap: 'wrap', justifyContent: 'center' })}>\n <Form.SubmitButton\n block={false}\n isDisabled={!canSubmit}\n localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}\n />\n <Form.ResetButton\n localizationKey={resetButtonLabel \|\| localizationKeys('userProfile.formButtonReset')}\n block={false}\n onClick={onReset}\n />\n </FormButtonContainer>\n </Flex>\n </Form.Root>\n );\n};\n\nconst AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {\n const { options, isLoading } = useFetchRoles();\n\n const { t } = useLocalizations();\n\n return (\n <Form.ControlRow elementId={field.id}>\n <Flex\n direction='col'\n gap={2}\n >\n <RoleSelect\n {...field.props}\n roles={options}\n isDisabled={isLoading}\n onChange={value => field.setValue(value)}\n triggerSx={t => ({ minWidth: t.sizes.$40, justifyContent: 'space-between', display: 'flex' })}\n optionListSx={t => ({ minWidth: t.sizes.$48 })}\n prefixLocalizationKey={`${t(localizationKeys('formFieldLabel__role'))}:`}\n />\n </Flex>\n </Form.ControlRow>\n );\n};\n\n/\n Determines default Role from the Organization settings or fallback to\n * the only available Role.\n */\nconst useDefaultRole = () => {\n const { options } = useFetchRoles();\n const { organizationSettings } = useEnvironment();\n\n let defaultRole = organizationSettings.domains.defaultRole;\n\n if (!defaultRole && options?.length === 1) {\n defaultRole = options[0].value;\n }\n\n return defaultRole;\n};\n"],"mappings":"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"}

package/dist/components/OrganizationProfile/InviteMembersScreen.js CHANGED Viewed

@@ -9,8 +9,8 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { SuccessPage } from "../../elements/SuccessPage.js";
 import { InviteMembersForm } from "./InviteMembersForm.js";
 import { IconCircle } from "../../elements/IconCircle.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/InviteMembersScreen.tsx
 const InviteMembersScreen = withCardStateProvider((props) => {

package/dist/components/OrganizationProfile/InvitedMembersList.js CHANGED Viewed

@@ -7,8 +7,8 @@ import { ThreeDotsMenu } from "../../elements/ThreeDotsMenu.js";
 import { useFetchRoles, useLocalizeCustomRoles } from "../../hooks/useFetchRoles.js";
 import { DataTable, RowContainer } from "./MemberListTable.js";
 import { UserPreview } from "../../elements/UserPreview.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/InvitedMembersList.tsx
 const invitationsParams = { invitations: {

package/dist/components/OrganizationProfile/MembersSearch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MembersSearch.js","names":["MagnifyingGlass","t"],"sources":["../../../src/components/OrganizationProfile/MembersSearch.tsx"],"sourcesContent":["import type { useOrganization } from '@clerk/shared/react';\nimport type { GetMembersParams } from '@clerk/shared/types';\nimport { useEffect, useRef } from 'react';\n\nimport { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables';\nimport { MagnifyingGlass } from '@/icons';\nimport { Spinner } from '@/primitives';\nimport { mqu } from '@/styledSystem';\nimport { Animated } from '@/ui/elements/Animated';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\n\nimport { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';\n\ntype MembersSearchProps = {\n /*\n Controlled query param state by parent component\n /\n query: GetMembersParams['query'];\n /\n Controlled input field value by parent component\n /\n value: string;\n /\n Paginated ~~organization~~ memberships\n /\n memberships: ReturnType<typeof useOrganization>['memberships'];\n /\n Handler for change event on input field\n /\n onSearchChange: (value: string) => void;\n /\n Handler for `query` value changes\n */\n onQueryTrigger: (query: string) => void;\n};\n\nconst membersSearchDebounceMs = 500;\n\nexport const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {\n const { t } = useLocalizations();\n\n const debounceTimer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const eventValue = event.target.value;\n onSearchChange(eventValue);\n\n const shouldClearQuery = eventValue === '';\n if (shouldClearQuery) {\n onQueryTrigger(eventValue);\n }\n };\n\n // Debounce the input value changes until the user stops typing\n // to trigger the `query` param setter\n function handleKeyUp() {\n if (debounceTimer.current) {\n clearTimeout(debounceTimer.current);\n }\n\n debounceTimer.current = setTimeout(() => {\n onQueryTrigger(value.trim());\n }, membersSearchDebounceMs);\n }\n\n // If search is not performed on a initial page, resets pagination offset\n // based on the response count\n useEffect(() => {\n if (!query \|\| !memberships?.data) {\n return;\n }\n\n const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;\n if (hasOnePageLeft) {\n memberships?.fetchPage?.(1);\n }\n }, [query, memberships]);\n\n const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;\n\n return (\n <Animated asChild>\n <Flex\n sx={{\n width: '50%',\n [mqu.sm]: {\n width: 'auto',\n },\n }}\n >\n <InputWithIcon\n value={value}\n type='search'\n autoCapitalize='none'\n spellCheck={false}\n aria-label='Search'\n placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}\n leftIcon={\n isFetchingNewData ? (\n <Spinner size='xs' />\n ) : (\n <Icon\n icon={MagnifyingGlass}\n elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}\n sx={t => ({ color: t.colors.$colorMutedForeground })}\n />\n )\n }\n onKeyUp={handleKeyUp}\n onChange={handleChange}\n elementDescriptor={descriptors.organizationProfileMembersSearchInput}\n />\n </Flex>\n </Animated>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,0BAA0B;AAEhC,MAAa,iBAAiB,EAAE,OAAO,OAAO,aAAa,gBAAgB,qBAAyC;CAClH,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,gBAAgB,UAA+C;EACnE,MAAM,aAAa,MAAM,OAAO;AAChC,iBAAe,WAAW;AAG1B,MADyB,eAAe,GAEtC,gBAAe,WAAW;;CAM9B,SAAS,cAAc;AACrB,MAAI,cAAc,QAChB,cAAa,cAAc,QAAQ;AAGrC,gBAAc,UAAU,iBAAiB;AACvC,kBAAe,MAAM,MAAM,CAAC;KAC3B,wBAAwB;;AAK7B,iBAAgB;AACd,MAAI,CAAC,SAAS,CAAC,aAAa,KAC1B;AAIF,OADwB,aAAa,SAAS,MAAM,yBAElD,cAAa,YAAY,EAAE;IAE5B,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,oBAAoB,SAAS,CAAC,CAAC,aAAa,aAAa,CAAC,CAAC,YAAY,MAAM;AAEnF,QACE,oBAAC;EAAS;YACR,oBAAC;GACC,IAAI;IACF,OAAO;KACN,IAAI,KAAK,EACR,OAAO,QACR;IACF;aAED,oBAAC;IACQ;IACP,MAAK;IACL,gBAAe;IACf,YAAY;IACZ,cAAW;IACX,aAAa,EAAE,iBAAiB,iDAAiD,CAAC;IAClF,UACE,oBACE,oBAAC,WAAQ,MAAK,OAAO,GAErB,oBAAC;KACC,MAAMA;KACN,mBAAmB,YAAY;KAC/B,KAAI,SAAM,EAAE,OAAOC,IAAE,OAAO,uBAAuB;MACnD;IAGN,SAAS;IACT,UAAU;IACV,mBAAmB,YAAY;KAC/B;IACG;GACE"}
1	+ {"version":3,"file":"MembersSearch.js","names":["MagnifyingGlass","t"],"sources":["../../../src/components/OrganizationProfile/MembersSearch.tsx"],"sourcesContent":["import type { useOrganization } from '@clerk/shared/react';\nimport type { GetMembersParams } from '@clerk/shared/types';\nimport { useEffect, useRef } from 'react';\n\nimport { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables';\nimport { MagnifyingGlass } from '@/icons';\nimport { Spinner } from '@/primitives';\nimport { mqu } from '@/styledSystem';\nimport { Animated } from '@/ui/elements/Animated';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\n\nimport { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';\n\ntype MembersSearchProps = {\n /*\n Controlled query param state by parent component\n /\n query: GetMembersParams['query'];\n /\n Controlled input field value by parent component\n /\n value: string;\n /\n Paginated Organization memberships\n /\n memberships: ReturnType<typeof useOrganization>['memberships'];\n /\n Handler for change event on input field\n /\n onSearchChange: (value: string) => void;\n /\n Handler for `query` value changes\n */\n onQueryTrigger: (query: string) => void;\n};\n\nconst membersSearchDebounceMs = 500;\n\nexport const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {\n const { t } = useLocalizations();\n\n const debounceTimer = useRef<ReturnType<typeof setTimeout> \| null>(null);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const eventValue = event.target.value;\n onSearchChange(eventValue);\n\n const shouldClearQuery = eventValue === '';\n if (shouldClearQuery) {\n onQueryTrigger(eventValue);\n }\n };\n\n // Debounce the input value changes until the user stops typing\n // to trigger the `query` param setter\n function handleKeyUp() {\n if (debounceTimer.current) {\n clearTimeout(debounceTimer.current);\n }\n\n debounceTimer.current = setTimeout(() => {\n onQueryTrigger(value.trim());\n }, membersSearchDebounceMs);\n }\n\n // If search is not performed on a initial page, resets pagination offset\n // based on the response count\n useEffect(() => {\n if (!query \|\| !memberships?.data) {\n return;\n }\n\n const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;\n if (hasOnePageLeft) {\n memberships?.fetchPage?.(1);\n }\n }, [query, memberships]);\n\n const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;\n\n return (\n <Animated asChild>\n <Flex\n sx={{\n width: '50%',\n [mqu.sm]: {\n width: 'auto',\n },\n }}\n >\n <InputWithIcon\n value={value}\n type='search'\n autoCapitalize='none'\n spellCheck={false}\n aria-label='Search'\n placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}\n leftIcon={\n isFetchingNewData ? (\n <Spinner size='xs' />\n ) : (\n <Icon\n icon={MagnifyingGlass}\n elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}\n sx={t => ({ color: t.colors.$colorMutedForeground })}\n />\n )\n }\n onKeyUp={handleKeyUp}\n onChange={handleChange}\n elementDescriptor={descriptors.organizationProfileMembersSearchInput}\n />\n </Flex>\n </Animated>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,0BAA0B;AAEhC,MAAa,iBAAiB,EAAE,OAAO,OAAO,aAAa,gBAAgB,qBAAyC;CAClH,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,gBAAgB,UAA+C;EACnE,MAAM,aAAa,MAAM,OAAO;AAChC,iBAAe,WAAW;AAG1B,MADyB,eAAe,GAEtC,gBAAe,WAAW;;CAM9B,SAAS,cAAc;AACrB,MAAI,cAAc,QAChB,cAAa,cAAc,QAAQ;AAGrC,gBAAc,UAAU,iBAAiB;AACvC,kBAAe,MAAM,MAAM,CAAC;KAC3B,wBAAwB;;AAK7B,iBAAgB;AACd,MAAI,CAAC,SAAS,CAAC,aAAa,KAC1B;AAIF,OADwB,aAAa,SAAS,MAAM,yBAElD,cAAa,YAAY,EAAE;IAE5B,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,oBAAoB,SAAS,CAAC,CAAC,aAAa,aAAa,CAAC,CAAC,YAAY,MAAM;AAEnF,QACE,oBAAC;EAAS;YACR,oBAAC;GACC,IAAI;IACF,OAAO;KACN,IAAI,KAAK,EACR,OAAO,QACR;IACF;aAED,oBAAC;IACQ;IACP,MAAK;IACL,gBAAe;IACf,YAAY;IACZ,cAAW;IACX,aAAa,EAAE,iBAAiB,iDAAiD,CAAC;IAClF,UACE,oBACE,oBAAC,WAAQ,MAAK,OAAO,GAErB,oBAAC;KACC,MAAMA;KACN,mBAAmB,YAAY;KAC/B,KAAI,SAAM,EAAE,OAAOC,IAAE,OAAO,uBAAuB;MACnD;IAGN,SAAS;IACT,UAAU;IACV,mBAAmB,YAAY;KAC/B;IACG;GACE"}

package/dist/components/OrganizationProfile/OrganizationAPIKeysPage.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { Col } from "../../customizables/index.js";
 import { Header } from "../../elements/Header.js";
 import { APIKeysPage } from "../APIKeys/APIKeys.js";
 import { useUnsafeNavbarContext } from "../../elements/Navbar.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/OrganizationAPIKeysPage.tsx
 const OrganizationAPIKeysPage = () => {

package/dist/components/OrganizationProfile/OrganizationGeneralPage.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { DeleteOrganizationForm, LeaveOrganizationForm } from "./ActionConfirmat
 import { AddDomainForm } from "./AddDomainForm.js";
 import { DomainList } from "./DomainList.js";
 import { ProfileForm } from "./ProfileForm.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/OrganizationGeneralPage.tsx
 const ProfileScreen = () => {

package/dist/components/OrganizationProfile/OrganizationMembers.js CHANGED Viewed

@@ -17,8 +17,8 @@ import { MembersSearch } from "./MembersSearch.js";
 import { OrganizationMembersTabInvitations } from "./OrganizationMembersTabInvitations.js";
 import { OrganizationMembersTabRequests } from "./OrganizationMembersTabRequests.js";
 import { useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/OrganizationMembers.tsx
 const ACTIVE_MEMBERS_PAGE_SIZE = 10;

package/dist/components/OrganizationProfile/OrganizationProfileNavbar.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { useProtect } from "../../common/Gate.js";
 import { useOrganizationProfileContext } from "../../contexts/components/OrganizationProfile.js";
 import { NavBar, NavbarContextProvider } from "../../elements/Navbar.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/OrganizationProfileNavbar.tsx
 const OrganizationProfileNavbar = (props) => {

package/dist/components/OrganizationProfile/ProfileForm.js CHANGED Viewed

@@ -9,8 +9,8 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { OrganizationProfileAvatarUploader } from "./OrganizationProfileAvatarUploader.js";
 import { isDefaultImage } from "../../utils/image.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/ProfileForm.tsx
 const ProfileForm = withCardStateProvider((props) => {

package/dist/components/OrganizationProfile/RemoveDomainForm.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { descriptors } from "../../customizables/elementDescriptors.js";
 import { Flex, Spinner } from "../../customizables/index.js";
 import { RemoveResourceForm } from "../../common/RemoveResourceForm.js";
 import React from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/RemoveDomainForm.tsx
 const RemoveDomainForm = (props) => {

package/dist/components/OrganizationProfile/RequestToJoinList.js CHANGED Viewed

@@ -5,8 +5,8 @@ import { Box, Button, Flex, Td } from "../../customizables/index.js";
 import { handleError } from "../../utils/errorHandler.js";
 import { DataTable, RowContainer } from "./MemberListTable.js";
 import { UserPreview } from "../../elements/UserPreview.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/RequestToJoinList.tsx
 const membershipRequestsParams = { membershipRequests: {

package/dist/components/OrganizationProfile/VerifiedDomainForm.js CHANGED Viewed

@@ -13,8 +13,8 @@ import { Form } from "../../elements/Form.js";
 import { FormButtons } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import { useEffect } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/VerifiedDomainForm.tsx
 const useCalloutLabel = (domain, { infoLabel: infoLabelKey }) => {

package/dist/components/OrganizationProfile/VerifyDomainForm.js CHANGED Viewed

@@ -13,8 +13,8 @@ import { FormContainer } from "../../elements/FormContainer.js";
 import { Wizard, useWizard } from "../../common/Wizard.js";
 import { VerifiedDomainForm } from "./VerifiedDomainForm.js";
 import React, { useRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/VerifyDomainForm.tsx
 const VerifyDomainForm = withCardStateProvider((props) => {

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

@@ -12,8 +12,8 @@ import { ProfileCard } from "../../elements/ProfileCard/index.js";
 import { OrganizationProfileNavbar } from "./OrganizationProfileNavbar.js";
 import { OrganizationProfileRoutes } from "./OrganizationProfileRoutes.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationProfile/index.tsx
 const _OrganizationProfile = (_) => {

package/dist/components/OrganizationSwitcher/OrganizationSwitcherPopover.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { PopoverCard } from "../../elements/PopoverCard.js";
 import { RootBox } from "../../elements/RootBox.js";
 import { OrganizationActionList } from "./OtherOrganizationActions.js";
 import React from "react";
+import { useClerk, useOrganization, useOrganizationList, usePortalRoot, useUser } from "@clerk/shared/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import { useClerk, useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
 //#region src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
 const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
@@ -24,6 +24,7 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 	const card = useCardState();
 	const { __experimental_asStandalone } = useOrganizationSwitcherContext();
 	const { openOrganizationProfile, openCreateOrganization } = useClerk();
+	const getContainer = usePortalRoot();
 	const { organization: currentOrg } = useOrganization();
 	const { isLoaded, setActive } = useOrganizationList();
 	const { hidePersonal, createOrganizationMode, organizationProfileMode, afterLeaveOrganizationUrl, afterCreateOrganizationUrl, navigateCreateOrganization, navigateOrganizationProfile, afterSelectOrganizationUrl, afterSelectPersonalUrl, organizationProfileProps, skipInvitationScreen } = useOrganizationSwitcherContext();
@@ -48,7 +49,8 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 		if (createOrganizationMode === "navigation") return navigateCreateOrganization();
 		return openCreateOrganization({
 			afterCreateOrganizationUrl,
-			skipInvitationScreen
+			skipInvitationScreen,
+			getContainer
 		});
 	};
 	const handleItemClick = () => {
@@ -56,7 +58,8 @@ const OrganizationSwitcherPopover = React.forwardRef((props, ref) => {
 		if (organizationProfileMode === "navigation") return navigateOrganizationProfile();
 		return openOrganizationProfile({
 			...organizationProfileProps,
-			afterLeaveOrganizationUrl
+			afterLeaveOrganizationUrl,
+			getContainer
 		});
 	};
 	const manageOrganizationButton = /* @__PURE__ */ jsx(SmallAction, {

package/dist/components/OrganizationSwitcher/OrganizationSwitcherPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OrganizationSwitcherPopover.js","names":["CogFilled","currentOrg"],"sources":["../../../src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx"],"sourcesContent":["import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/shared/react';\nimport type { OrganizationResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Actions, SmallAction } from '@/ui/elements/Actions';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';\nimport { PopoverCard } from '@/ui/elements/PopoverCard';\n\nimport { NotificationCountBadge, withProtect } from '../../common';\nimport { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys } from '../../customizables';\nimport { RootBox } from '../../elements/RootBox';\nimport { CogFilled } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport { OrganizationActionList } from './OtherOrganizationActions';\n\ntype OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;\n\nexport const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(\n (props, ref) => {\n const { close: unsafeClose, ...rest } = props;\n const close = () => unsafeClose?.(false);\n const card = useCardState();\n const { __experimental_asStandalone } = useOrganizationSwitcherContext();\n const { openOrganizationProfile, openCreateOrganization } = useClerk();\n const { organization: currentOrg } = useOrganization();\n const { isLoaded, setActive } = useOrganizationList();\n const {\n hidePersonal,\n createOrganizationMode,\n organizationProfileMode,\n afterLeaveOrganizationUrl,\n afterCreateOrganizationUrl,\n navigateCreateOrganization,\n navigateOrganizationProfile,\n afterSelectOrganizationUrl,\n afterSelectPersonalUrl,\n\n organizationProfileProps,\n skipInvitationScreen,\n } = useOrganizationSwitcherContext();\n\n const { user } = useUser();\n\n if (!user) {\n return null;\n }\n\n const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;\n\n if (!isLoaded) {\n return null;\n }\n\n const handleOrganizationClicked = (organization: OrganizationResource) => {\n return card\n .runAsync(() =>\n setActive({\n organization,\n redirectUrl: afterSelectOrganizationUrl(organization),\n }),\n )\n .then(close);\n };\n\n const handlePersonalWorkspaceClicked = () => {\n return card\n .runAsync(() => setActive({ organization: null, redirectUrl: afterSelectPersonalUrl(user) }))\n .then(close);\n };\n\n const handleCreateOrganizationClicked = () => {\n close();\n if (createOrganizationMode === 'navigation') {\n return navigateCreateOrganization();\n }\n return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen });\n };\n\n const handleItemClick = () => {\n close();\n if (organizationProfileMode === 'navigation') {\n return navigateOrganizationProfile();\n }\n\n return openOrganizationProfile({\n ...organizationProfileProps,\n afterLeaveOrganizationUrl,\n });\n };\n\n const manageOrganizationButton = (\n <SmallAction\n elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}\n elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}\n iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}\n iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}\n iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}\n iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}\n icon={CogFilled}\n label={localizationKeys('organizationSwitcher.action__manageOrganization')}\n onClick={() => handleItemClick()}\n trailing={<NotificationCountBadgeManageButton />}\n focusRing\n />\n );\n\n const selectedOrganizationPreview = (currentOrg: OrganizationResource) => (\n <Flex\n justify='between'\n align='center'\n sx={t => ({\n width: '100%',\n paddingRight: t.space.$5,\n })}\n >\n <OrganizationPreview\n elementId={'organizationSwitcherActiveOrganization'}\n organization={currentOrg}\n user={user}\n mainIdentifierVariant='buttonLarge'\n sx={t => ({\n padding: `${t.space.$4} ${t.space.$5}`,\n })}\n />\n <Actions role='menu'>{manageOrganizationButton}</Actions>\n </Flex>\n );\n\n return (\n <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>\n <PopoverCard.Root\n elementDescriptor={descriptors.organizationSwitcherPopoverCard}\n ref={ref}\n role='dialog'\n aria-label={`${currentOrg?.name} is active`}\n shouldEntryAnimate={!__experimental_asStandalone}\n {...rest}\n >\n <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>\n <Actions\n elementDescriptor={descriptors.organizationSwitcherPopoverActions}\n role='menu'\n >\n {currentOrg\n ? selectedOrganizationPreview(currentOrg)\n : !hidePersonal && (\n <PersonalWorkspacePreview\n user={userWithoutIdentifiers}\n sx={t => ({\n padding: `${t.space.$4} ${t.space.$5}`,\n width: '100%',\n })}\n title={localizationKeys('organizationSwitcher.personalWorkspace')}\n />\n )}\n <OrganizationActionList\n onCreateOrganizationClick={handleCreateOrganizationClicked}\n onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}\n onOrganizationClick={handleOrganizationClicked}\n />\n </Actions>\n </PopoverCard.Content>\n <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />\n </PopoverCard.Root>\n </RootBox>\n );\n },\n);\n\nconst NotificationCountBadgeManageButton = withProtect(\n ({ sx }: { sx?: ThemableCssProp }) => {\n const { organizationSettings } = useEnvironment();\n\n const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n const { membershipRequests } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n });\n\n if (!membershipRequests?.count) {\n return null;\n }\n\n return (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n containerSx={sx}\n />\n );\n },\n {\n // if the user is not able to accept a request we should not notify them\n permission: 'org:sys_memberships:manage',\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,8BAA8B,MAAM,YAC9C,OAAO,QAAQ;CACd,MAAM,EAAE,OAAO,YAAa,GAAG,SAAS;CACxC,MAAM,cAAc,cAAc,MAAM;CACxC,MAAM,OAAO,cAAc;CAC3B,MAAM,EAAE,gCAAgC,gCAAgC;CACxE,MAAM,EAAE,yBAAyB,2BAA2B,UAAU;CACtE,MAAM,EAAE,cAAc,eAAe,iBAAiB;CACtD,MAAM,EAAE,UAAU,cAAc,qBAAqB;CACrD,MAAM,EACJ,cACA,wBACA,yBACA,2BACA,4BACA,4BACA,6BACA,4BACA,wBAEA,0BACA,yBACE,gCAAgC;CAEpC,MAAM,EAAE,SAAS,SAAS;AAE1B,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,EAAE,UAAU,qBAAqB,mBAAoB,GAAG,2BAA2B;AAEzF,KAAI,CAAC,SACH,QAAO;CAGT,MAAM,6BAA6B,iBAAuC;AACxE,SAAO,KACJ,eACC,UAAU;GACR;GACA,aAAa,2BAA2B,aAAa;GACtD,CAAC,CACH,CACA,KAAK,MAAM;;CAGhB,MAAM,uCAAuC;AAC3C,SAAO,KACJ,eAAe,UAAU;GAAE,cAAc;GAAM,aAAa,uBAAuB,KAAK;GAAE,CAAC,CAAC,CAC5F,KAAK,MAAM;;CAGhB,MAAM,wCAAwC;AAC5C,SAAO;AACP,MAAI,2BAA2B,aAC7B,QAAO,4BAA4B;AAErC,SAAO,uBAAuB;GAAE;GAA4B;GAAsB,CAAC;;~~CAGrF~~,MAAM,wBAAwB;AAC5B,SAAO;AACP,MAAI,4BAA4B,aAC9B,QAAO,6BAA6B;AAGtC,SAAO,wBAAwB;GAC7B,GAAG;GACH;GACD,CAAC;;CAGJ,MAAM,2BACJ,oBAAC;EACC,mBAAmB,YAAY;EAC/B,WAAW,YAAY,wCAAwC,MAAM,qBAAqB;EAC1F,0BAA0B,YAAY;EACtC,kBAAkB,YAAY,+CAA+C,MAAM,qBAAqB;EACxG,uBAAuB,YAAY;EACnC,eAAe,YAAY,4CAA4C,MAAM,qBAAqB;EAClG,MAAMA;EACN,OAAO,iBAAiB,kDAAkD;EAC1E,eAAe,iBAAiB;EAChC,UAAU,oBAAC,uCAAqC;EAChD;GACA;CAGJ,MAAM,+BAA+B,iBACnC,qBAAC;EACC,SAAQ;EACR,OAAM;EACN,KAAI,OAAM;GACR,OAAO;GACP,cAAc,EAAE,MAAM;GACvB;aAED,oBAAC;GACC,WAAW;GACX,cAAcC;GACR;GACN,uBAAsB;GACtB,KAAI,OAAM,EACR,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM,MACnC;IACD,EACF,oBAAC;GAAQ,MAAK;aAAQ;IAAmC;GACpD;AAGT,QACE,oBAAC;EAAQ,mBAAmB,YAAY;YACtC,qBAAC,YAAY;GACX,mBAAmB,YAAY;GAC1B;GACL,MAAK;GACL,cAAY,GAAG,YAAY,KAAK;GAChC,oBAAoB,CAAC;GACrB,GAAI;cAEJ,oBAAC,YAAY;IAAQ,mBAAmB,YAAY;cAClD,qBAAC;KACC,mBAAmB,YAAY;KAC/B,MAAK;gBAEJ,aACG,4BAA4B,WAAW,GACvC,CAAC,gBACC,oBAAC;MACC,MAAM;MACN,KAAI,OAAM;OACR,SAAS,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,MAAM;OAClC,OAAO;OACR;MACD,OAAO,iBAAiB,yCAAyC;OACjE,EAER,oBAAC;MACC,2BAA2B;MAC3B,0BAA0B;MAC1B,qBAAqB;OACrB;MACM;KACU,EACtB,oBAAC,YAAY,UAAO,mBAAmB,YAAY,oCAAqC;IACvE;GACX;EAGf;AAED,MAAM,qCAAqC,aACxC,EAAE,SAAmC;CACpC,MAAM,EAAE,yBAAyB,gBAAgB;CAEjD,MAAM,mBAAmB,sBAAsB,SAAS;CAExD,MAAM,EAAE,uBAAuB,gBAAgB,EAC7C,oBAAoB,oBAAoB,QACzC,CAAC;AAEF,KAAI,CAAC,oBAAoB,MACvB,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,mBAAmB;EACtC,aAAa;GACb;GAGN,EAEE,YAAY,8BACb,CACF"}
1	+ {"version":3,"file":"OrganizationSwitcherPopover.js","names":["CogFilled","currentOrg"],"sources":["../../../src/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx"],"sourcesContent":["import { useClerk, useOrganization, useOrganizationList, usePortalRoot, useUser } from '@clerk/shared/react';\nimport type { OrganizationResource } from '@clerk/shared/types';\nimport React from 'react';\n\nimport { Actions, SmallAction } from '@/ui/elements/Actions';\nimport { useCardState } from '@/ui/elements/contexts';\nimport { OrganizationPreview } from '@/ui/elements/OrganizationPreview';\nimport { PersonalWorkspacePreview } from '@/ui/elements/PersonalWorkspacePreview';\nimport { PopoverCard } from '@/ui/elements/PopoverCard';\n\nimport { NotificationCountBadge, withProtect } from '../../common';\nimport { useEnvironment, useOrganizationSwitcherContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys } from '../../customizables';\nimport { RootBox } from '../../elements/RootBox';\nimport { CogFilled } from '../../icons';\nimport type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';\nimport { OrganizationActionList } from './OtherOrganizationActions';\n\ntype OrganizationSwitcherPopoverProps = { close?: (open: boolean) => void } & PropsOfComponent<typeof PopoverCard.Root>;\n\nexport const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, OrganizationSwitcherPopoverProps>(\n (props, ref) => {\n const { close: unsafeClose, ...rest } = props;\n const close = () => unsafeClose?.(false);\n const card = useCardState();\n const { __experimental_asStandalone } = useOrganizationSwitcherContext();\n const { openOrganizationProfile, openCreateOrganization } = useClerk();\n const getContainer = usePortalRoot();\n const { organization: currentOrg } = useOrganization();\n const { isLoaded, setActive } = useOrganizationList();\n const {\n hidePersonal,\n createOrganizationMode,\n organizationProfileMode,\n afterLeaveOrganizationUrl,\n afterCreateOrganizationUrl,\n navigateCreateOrganization,\n navigateOrganizationProfile,\n afterSelectOrganizationUrl,\n afterSelectPersonalUrl,\n\n organizationProfileProps,\n skipInvitationScreen,\n } = useOrganizationSwitcherContext();\n\n const { user } = useUser();\n\n if (!user) {\n return null;\n }\n\n const { username, primaryEmailAddress, primaryPhoneNumber, ...userWithoutIdentifiers } = user;\n\n if (!isLoaded) {\n return null;\n }\n\n const handleOrganizationClicked = (organization: OrganizationResource) => {\n return card\n .runAsync(() =>\n setActive({\n organization,\n redirectUrl: afterSelectOrganizationUrl(organization),\n }),\n )\n .then(close);\n };\n\n const handlePersonalWorkspaceClicked = () => {\n return card\n .runAsync(() => setActive({ organization: null, redirectUrl: afterSelectPersonalUrl(user) }))\n .then(close);\n };\n\n const handleCreateOrganizationClicked = () => {\n close();\n if (createOrganizationMode === 'navigation') {\n return navigateCreateOrganization();\n }\n return openCreateOrganization({ afterCreateOrganizationUrl, skipInvitationScreen, getContainer });\n };\n\n const handleItemClick = () => {\n close();\n if (organizationProfileMode === 'navigation') {\n return navigateOrganizationProfile();\n }\n\n return openOrganizationProfile({\n ...organizationProfileProps,\n afterLeaveOrganizationUrl,\n getContainer,\n });\n };\n\n const manageOrganizationButton = (\n <SmallAction\n elementDescriptor={descriptors.organizationSwitcherPopoverActionButton}\n elementId={descriptors.organizationSwitcherPopoverActionButton.setId('manageOrganization')}\n iconBoxElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIconBox}\n iconBoxElementId={descriptors.organizationSwitcherPopoverActionButtonIconBox.setId('manageOrganization')}\n iconElementDescriptor={descriptors.organizationSwitcherPopoverActionButtonIcon}\n iconElementId={descriptors.organizationSwitcherPopoverActionButtonIcon.setId('manageOrganization')}\n icon={CogFilled}\n label={localizationKeys('organizationSwitcher.action__manageOrganization')}\n onClick={() => handleItemClick()}\n trailing={<NotificationCountBadgeManageButton />}\n focusRing\n />\n );\n\n const selectedOrganizationPreview = (currentOrg: OrganizationResource) => (\n <Flex\n justify='between'\n align='center'\n sx={t => ({\n width: '100%',\n paddingRight: t.space.$5,\n })}\n >\n <OrganizationPreview\n elementId={'organizationSwitcherActiveOrganization'}\n organization={currentOrg}\n user={user}\n mainIdentifierVariant='buttonLarge'\n sx={t => ({\n padding: `${t.space.$4} ${t.space.$5}`,\n })}\n />\n <Actions role='menu'>{manageOrganizationButton}</Actions>\n </Flex>\n );\n\n return (\n <RootBox elementDescriptor={descriptors.organizationSwitcherPopoverRootBox}>\n <PopoverCard.Root\n elementDescriptor={descriptors.organizationSwitcherPopoverCard}\n ref={ref}\n role='dialog'\n aria-label={`${currentOrg?.name} is active`}\n shouldEntryAnimate={!__experimental_asStandalone}\n {...rest}\n >\n <PopoverCard.Content elementDescriptor={descriptors.organizationSwitcherPopoverMain}>\n <Actions\n elementDescriptor={descriptors.organizationSwitcherPopoverActions}\n role='menu'\n >\n {currentOrg\n ? selectedOrganizationPreview(currentOrg)\n : !hidePersonal && (\n <PersonalWorkspacePreview\n user={userWithoutIdentifiers}\n sx={t => ({\n padding: `${t.space.$4} ${t.space.$5}`,\n width: '100%',\n })}\n title={localizationKeys('organizationSwitcher.personalWorkspace')}\n />\n )}\n <OrganizationActionList\n onCreateOrganizationClick={handleCreateOrganizationClicked}\n onPersonalWorkspaceClick={handlePersonalWorkspaceClicked}\n onOrganizationClick={handleOrganizationClicked}\n />\n </Actions>\n </PopoverCard.Content>\n <PopoverCard.Footer elementDescriptor={descriptors.organizationSwitcherPopoverFooter} />\n </PopoverCard.Root>\n </RootBox>\n );\n },\n);\n\nconst NotificationCountBadgeManageButton = withProtect(\n ({ sx }: { sx?: ThemableCssProp }) => {\n const { organizationSettings } = useEnvironment();\n\n const isDomainsEnabled = organizationSettings?.domains?.enabled;\n\n const { membershipRequests } = useOrganization({\n membershipRequests: isDomainsEnabled \|\| undefined,\n });\n\n if (!membershipRequests?.count) {\n return null;\n }\n\n return (\n <NotificationCountBadge\n notificationCount={membershipRequests.count}\n containerSx={sx}\n />\n );\n },\n {\n // if the user is not able to accept a request we should not notify them\n permission: 'org:sys_memberships:manage',\n },\n);\n"],"mappings":"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"}

package/dist/components/OrganizationSwitcher/OrganizationSwitcherTrigger.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { PersonalWorkspacePreview } from "../../elements/PersonalWorkspacePreview.js";
 import { withAvatarShimmer } from "../../elements/withAvatarShimmer.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
 const OrganizationSwitcherTrigger = withAvatarShimmer(forwardRef((props, ref) => {

package/dist/components/OrganizationSwitcher/UserInvitationSuggestionList.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { organizationListParams, populateCacheUpdateItem } from "./utils.js";
 import { Actions } from "../../elements/Actions.js";
 import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { PreviewButton } from "../../elements/PreviewButton.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganization, useOrganizationList } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
 const useFetchInvitations = () => {

package/dist/components/OrganizationSwitcher/UserMembershipList.js CHANGED Viewed

@@ -11,8 +11,8 @@ import { OrganizationPreview } from "../../elements/OrganizationPreview.js";
 import { PreviewButton } from "../../elements/PreviewButton.js";
 import { PersonalWorkspacePreview } from "../../elements/PersonalWorkspacePreview.js";
 import React from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization, useOrganizationList, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/OrganizationSwitcher/UserMembershipList.tsx
 const useFetchMemberships = () => {

package/dist/components/PaymentMethods/AddPaymentMethod.js CHANGED Viewed

@@ -13,8 +13,8 @@ import { FormButtons } from "../../elements/FormButtons.js";
 import { FormContainer } from "../../elements/FormContainer.js";
 import { PaymentElementSkeleton } from "./PaymentElementSkeleton.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { __experimental_PaymentElement, __experimental_PaymentElementProvider, __experimental_usePaymentElement, createContextAndHook } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/PaymentMethods/AddPaymentMethod.tsx
 const useStripeAppearance = (node) => {

package/dist/components/PaymentMethods/PaymentMethods.js CHANGED Viewed

@@ -14,8 +14,8 @@ import { FullHeightLoader } from "../../elements/FullHeightLoader.js";
 import { ProfileSection } from "../../elements/Section.js";
 import { TestPaymentMethod } from "./TestPaymentMethod.js";
 import { Fragment, useMemo, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganizationContext } from "@clerk/shared/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/PaymentMethods/PaymentMethods.tsx
 const AddScreen = withCardStateProvider(({ onSuccess }) => {

package/dist/components/PricingTable/PricingTable.js CHANGED Viewed

@@ -4,12 +4,13 @@ import { Flow } from "../../customizables/Flow.js";
 import { PricingTableDefault } from "./PricingTableDefault.js";
 import { PricingTableMatrix } from "./PricingTableMatrix.js";
 import { useEffect, useMemo, useState } from "react";
+import { useClerk, usePortalRoot } from "@clerk/shared/react";
 import { jsx } from "@emotion/react/jsx-runtime";
-import { useClerk } from "@clerk/shared/react";
 //#region src/components/PricingTable/PricingTable.tsx
 const PricingTableRoot = (props) => {
 	const clerk = useClerk();
+	const getContainer = usePortalRoot();
 	const { mode = "mounted", signInMode = "redirect" } = usePricingTableContext();
 	const isCompact = mode === "modal";
 	const { data: subscription, subscriptionItems } = useSubscription();
@@ -37,7 +38,7 @@ const PricingTableRoot = (props) => {
 	}, [defaultPlanPeriod]);
 	const selectPlan = (plan, event) => {
 		if (!clerk.isSignedIn) {
-			if (signInMode === "modal") return clerk.openSignIn();
+			if (signInMode === "modal") return clerk.openSignIn({ getContainer });
 			return clerk.redirectToSignIn();
 		}
 		handleSelectPlan({

package/dist/components/PricingTable/PricingTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PricingTable.js","names":[],"sources":["../../../src/components/PricingTable/PricingTable.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Flow } from '@/ui/customizables/Flow';\n\nimport { usePaymentMethods, usePlans, usePlansContext, usePricingTableContext, useSubscription } from '../../contexts';\nimport { PricingTableDefault } from './PricingTableDefault';\nimport { PricingTableMatrix } from './PricingTableMatrix';\n\nconst PricingTableRoot = (props: PricingTableProps) => {\n const clerk = useClerk();\n const { mode = 'mounted', signInMode = 'redirect' } = usePricingTableContext();\n const isCompact = mode === 'modal';\n const { data: subscription, subscriptionItems } = useSubscription();\n const { data: plans } = usePlans();\n const { handleSelectPlan } = usePlansContext();\n\n const plansToRender = useMemo(() => {\n return clerk.isSignedIn\n ? subscription // All users in billing-enabled applications have a subscription\n ? plans\n : []\n : plans;\n }, [clerk.isSignedIn, plans, subscription]);\n\n const defaultPlanPeriod = useMemo(() => {\n if (isCompact) {\n const upcomingSubscription = subscriptionItems?.find(sub => sub.status === 'upcoming');\n if (upcomingSubscription) {\n return upcomingSubscription.planPeriod;\n }\n\n // don't pay attention to the default plan\n const activeSubscription = subscriptionItems?.find(\n sub => !sub.canceledAt && sub.status === 'active' && !sub.plan.isDefault,\n );\n if (activeSubscription) {\n return activeSubscription.planPeriod;\n }\n }\n\n return 'annual';\n }, [isCompact, subscriptionItems]);\n\n const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(defaultPlanPeriod);\n\n useEffect(() => {\n setPlanPeriod(defaultPlanPeriod);\n }, [defaultPlanPeriod]);\n\n const selectPlan = (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => {\n if (!clerk.isSignedIn) {\n if (signInMode === 'modal') {\n return clerk.openSignIn();\n }\n return clerk.redirectToSignIn();\n }\n\n handleSelectPlan({\n mode,\n plan,\n planPeriod,\n event,\n appearance: props.checkoutProps?.appearance,\n newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,\n });\n return;\n };\n\n // Pre-fetch payment methods\n usePaymentMethods();\n\n return (\n <Flow.Root\n flow='pricingTable'\n isFlowReady={clerk.isSignedIn ? !!subscription : plans.length > 0}\n sx={{\n width: '100%',\n }}\n >\n {mode !== 'modal' && (props as any).layout === 'matrix' ? (\n <PricingTableMatrix\n plans={plansToRender}\n planPeriod={planPeriod}\n setPlanPeriod={setPlanPeriod}\n onSelect={selectPlan}\n highlightedPlan={(props as any).highlightPlan}\n />\n ) : (\n <PricingTableDefault\n plans={plansToRender}\n planPeriod={planPeriod}\n setPlanPeriod={setPlanPeriod}\n onSelect={selectPlan}\n isCompact={isCompact}\n props={props}\n />\n )}\n </Flow.Root>\n );\n};\n\n// When used in a modal, we need to wrap the root in a div to avoid layout issues\n// within UserProfile and OrganizationProfile.\nconst PricingTableModal = (props: PricingTableProps) => {\n return (\n // TODO: Used by InvisibleRootBox, can we simplify?\n <div>\n <PricingTableRoot {...props} />\n </div>\n );\n};\n\nexport const PricingTable = (props: PricingTableProps) => {\n const { mode = 'mounted' } = usePricingTableContext();\n\n return mode === 'modal' ? <PricingTableModal {...props} /> : <PricingTableRoot {...props} />;\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoB,UAA6B;CACrD,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,OAAO,WAAW,aAAa,eAAe,wBAAwB;CAC9E,MAAM,YAAY,SAAS;CAC3B,MAAM,EAAE,MAAM,cAAc,sBAAsB,iBAAiB;CACnE,MAAM,EAAE,MAAM,UAAU,UAAU;CAClC,MAAM,EAAE,qBAAqB,iBAAiB;CAE9C,MAAM,gBAAgB,cAAc;AAClC,SAAO,MAAM,aACT,eACE,QACA,EAAE,GACJ;IACH;EAAC,MAAM;EAAY;EAAO;EAAa,CAAC;CAE3C,MAAM,oBAAoB,cAAc;AACtC,MAAI,WAAW;GACb,MAAM,uBAAuB,mBAAmB,MAAK,QAAO,IAAI,WAAW,WAAW;AACtF,OAAI,qBACF,QAAO,qBAAqB;GAI9B,MAAM,qBAAqB,mBAAmB,MAC5C,QAAO,CAAC,IAAI,cAAc,IAAI,WAAW,YAAY,CAAC,IAAI,KAAK,UAChE;AACD,OAAI,mBACF,QAAO,mBAAmB;;AAI9B,SAAO;IACN,CAAC,WAAW,kBAAkB,CAAC;CAElC,MAAM,CAAC,YAAY,iBAAiB,SAAwC,kBAAkB;AAE9F,iBAAgB;AACd,gBAAc,kBAAkB;IAC/B,CAAC,kBAAkB,CAAC;CAEvB,MAAM,cAAc,MAA2B,UAA0C;AACvF,MAAI,CAAC,MAAM,YAAY;AACrB,OAAI,eAAe,QACjB,QAAO,MAAM,~~YAAY~~;~~AAE3B~~,UAAO,MAAM,kBAAkB;;AAGjC,mBAAiB;GACf;GACA;GACA;GACA;GACA,YAAY,MAAM,eAAe;GACjC,4BAA4B,MAAM;GACnC,CAAC;;AAKJ,oBAAmB;AAEnB,QACE,oBAAC,KAAK;EACJ,MAAK;EACL,aAAa,MAAM,aAAa,CAAC,CAAC,eAAe,MAAM,SAAS;EAChE,IAAI,EACF,OAAO,QACR;YAEA,SAAS,WAAY,MAAc,WAAW,WAC7C,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACV,iBAAkB,MAAc;IAChC,GAEF,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACC;GACJ;IACP;GAEM;;AAMhB,MAAM,qBAAqB,UAA6B;AACtD,QAEE,oBAAC,mBACC,oBAAC,oBAAiB,GAAI,QAAS,GAC3B;;AAIV,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,OAAO,cAAc,wBAAwB;AAErD,QAAO,SAAS,UAAU,oBAAC,qBAAkB,GAAI,QAAS,GAAG,oBAAC,oBAAiB,GAAI,QAAS"}
1	+ {"version":3,"file":"PricingTable.js","names":[],"sources":["../../../src/components/PricingTable/PricingTable.tsx"],"sourcesContent":["import { useClerk, usePortalRoot } from '@clerk/shared/react';\nimport type { BillingPlanResource, BillingSubscriptionPlanPeriod, PricingTableProps } from '@clerk/shared/types';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Flow } from '@/ui/customizables/Flow';\n\nimport { usePaymentMethods, usePlans, usePlansContext, usePricingTableContext, useSubscription } from '../../contexts';\nimport { PricingTableDefault } from './PricingTableDefault';\nimport { PricingTableMatrix } from './PricingTableMatrix';\n\nconst PricingTableRoot = (props: PricingTableProps) => {\n const clerk = useClerk();\n const getContainer = usePortalRoot();\n const { mode = 'mounted', signInMode = 'redirect' } = usePricingTableContext();\n const isCompact = mode === 'modal';\n const { data: subscription, subscriptionItems } = useSubscription();\n const { data: plans } = usePlans();\n const { handleSelectPlan } = usePlansContext();\n\n const plansToRender = useMemo(() => {\n return clerk.isSignedIn\n ? subscription // All users in billing-enabled applications have a subscription\n ? plans\n : []\n : plans;\n }, [clerk.isSignedIn, plans, subscription]);\n\n const defaultPlanPeriod = useMemo(() => {\n if (isCompact) {\n const upcomingSubscription = subscriptionItems?.find(sub => sub.status === 'upcoming');\n if (upcomingSubscription) {\n return upcomingSubscription.planPeriod;\n }\n\n // don't pay attention to the default plan\n const activeSubscription = subscriptionItems?.find(\n sub => !sub.canceledAt && sub.status === 'active' && !sub.plan.isDefault,\n );\n if (activeSubscription) {\n return activeSubscription.planPeriod;\n }\n }\n\n return 'annual';\n }, [isCompact, subscriptionItems]);\n\n const [planPeriod, setPlanPeriod] = useState<BillingSubscriptionPlanPeriod>(defaultPlanPeriod);\n\n useEffect(() => {\n setPlanPeriod(defaultPlanPeriod);\n }, [defaultPlanPeriod]);\n\n const selectPlan = (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => {\n if (!clerk.isSignedIn) {\n if (signInMode === 'modal') {\n return clerk.openSignIn({ getContainer });\n }\n return clerk.redirectToSignIn();\n }\n\n handleSelectPlan({\n mode,\n plan,\n planPeriod,\n event,\n appearance: props.checkoutProps?.appearance,\n newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,\n });\n return;\n };\n\n // Pre-fetch payment methods\n usePaymentMethods();\n\n return (\n <Flow.Root\n flow='pricingTable'\n isFlowReady={clerk.isSignedIn ? !!subscription : plans.length > 0}\n sx={{\n width: '100%',\n }}\n >\n {mode !== 'modal' && (props as any).layout === 'matrix' ? (\n <PricingTableMatrix\n plans={plansToRender}\n planPeriod={planPeriod}\n setPlanPeriod={setPlanPeriod}\n onSelect={selectPlan}\n highlightedPlan={(props as any).highlightPlan}\n />\n ) : (\n <PricingTableDefault\n plans={plansToRender}\n planPeriod={planPeriod}\n setPlanPeriod={setPlanPeriod}\n onSelect={selectPlan}\n isCompact={isCompact}\n props={props}\n />\n )}\n </Flow.Root>\n );\n};\n\n// When used in a modal, we need to wrap the root in a div to avoid layout issues\n// within UserProfile and OrganizationProfile.\nconst PricingTableModal = (props: PricingTableProps) => {\n return (\n // TODO: Used by InvisibleRootBox, can we simplify?\n <div>\n <PricingTableRoot {...props} />\n </div>\n );\n};\n\nexport const PricingTable = (props: PricingTableProps) => {\n const { mode = 'mounted' } = usePricingTableContext();\n\n return mode === 'modal' ? <PricingTableModal {...props} /> : <PricingTableRoot {...props} />;\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAM,oBAAoB,UAA6B;CACrD,MAAM,QAAQ,UAAU;CACxB,MAAM,eAAe,eAAe;CACpC,MAAM,EAAE,OAAO,WAAW,aAAa,eAAe,wBAAwB;CAC9E,MAAM,YAAY,SAAS;CAC3B,MAAM,EAAE,MAAM,cAAc,sBAAsB,iBAAiB;CACnE,MAAM,EAAE,MAAM,UAAU,UAAU;CAClC,MAAM,EAAE,qBAAqB,iBAAiB;CAE9C,MAAM,gBAAgB,cAAc;AAClC,SAAO,MAAM,aACT,eACE,QACA,EAAE,GACJ;IACH;EAAC,MAAM;EAAY;EAAO;EAAa,CAAC;CAE3C,MAAM,oBAAoB,cAAc;AACtC,MAAI,WAAW;GACb,MAAM,uBAAuB,mBAAmB,MAAK,QAAO,IAAI,WAAW,WAAW;AACtF,OAAI,qBACF,QAAO,qBAAqB;GAI9B,MAAM,qBAAqB,mBAAmB,MAC5C,QAAO,CAAC,IAAI,cAAc,IAAI,WAAW,YAAY,CAAC,IAAI,KAAK,UAChE;AACD,OAAI,mBACF,QAAO,mBAAmB;;AAI9B,SAAO;IACN,CAAC,WAAW,kBAAkB,CAAC;CAElC,MAAM,CAAC,YAAY,iBAAiB,SAAwC,kBAAkB;AAE9F,iBAAgB;AACd,gBAAc,kBAAkB;IAC/B,CAAC,kBAAkB,CAAC;CAEvB,MAAM,cAAc,MAA2B,UAA0C;AACvF,MAAI,CAAC,MAAM,YAAY;AACrB,OAAI,eAAe,QACjB,QAAO,MAAM,WAAW,EAAE,cAAc,CAAC;AAE3C,UAAO,MAAM,kBAAkB;;AAGjC,mBAAiB;GACf;GACA;GACA;GACA;GACA,YAAY,MAAM,eAAe;GACjC,4BAA4B,MAAM;GACnC,CAAC;;AAKJ,oBAAmB;AAEnB,QACE,oBAAC,KAAK;EACJ,MAAK;EACL,aAAa,MAAM,aAAa,CAAC,CAAC,eAAe,MAAM,SAAS;EAChE,IAAI,EACF,OAAO,QACR;YAEA,SAAS,WAAY,MAAc,WAAW,WAC7C,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACV,iBAAkB,MAAc;IAChC,GAEF,oBAAC;GACC,OAAO;GACK;GACG;GACf,UAAU;GACC;GACJ;IACP;GAEM;;AAMhB,MAAM,qBAAqB,UAA6B;AACtD,QAEE,oBAAC,mBACC,oBAAC,oBAAiB,GAAI,QAAS,GAC3B;;AAIV,MAAa,gBAAgB,UAA6B;CACxD,MAAM,EAAE,OAAO,cAAc,wBAAwB;AAErD,QAAO,SAAS,UAAU,oBAAC,qBAAkB,GAAI,QAAS,GAAG,oBAAC,oBAAiB,GAAI,QAAS"}

package/dist/components/PricingTable/PricingTableDefault.js CHANGED Viewed

@@ -15,8 +15,8 @@ import { SubscriptionBadge } from "../Subscriptions/badge.js";
 import { Switch } from "../../elements/Switch.js";
 import { getPricingFooterState } from "./utils/pricing-footer-state.js";
 import * as React$1 from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useOrganizationContext, useSession } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/PricingTable/PricingTableDefault.tsx
 function PricingTableDefault({ plans, planPeriod, setPlanPeriod, onSelect, isCompact, props }) {

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

@@ -9,8 +9,8 @@ import { LoadingCardContainer } from "../../elements/LoadingCard.js";
 import { TaskChooseOrganization } from "./tasks/TaskChooseOrganization/index.js";
 import { TaskResetPassword } from "./tasks/TaskResetPassword/index.js";
 import { useEffect, 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";
 import { INTERNAL_SESSION_TASK_ROUTE_BY_KEY } from "@clerk/shared/internal/clerk-js/sessionTasks";
 import { eventComponentMounted } from "@clerk/shared/telemetry";

package/dist/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.js CHANGED Viewed

@@ -14,9 +14,9 @@ import { OrganizationPreview } from "../../../../elements/OrganizationPreview.js
 import { OrganizationPreviewButton, OrganizationPreviewListItem, OrganizationPreviewListItemButton, OrganizationPreviewListItems, OrganizationPreviewSpinner, sharedMainIdentifierSx } from "../../../../common/organizations/OrganizationPreview.js";
 import { useOrganizationListInView } from "../../../../hooks/useOrganizationListInView.js";
 import React, { useState } from "react";
+import { useClerk, useOrganizationList, useUser } from "@clerk/shared/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { isClerkAPIResponseError } from "@clerk/shared/error";
-import { useClerk, useOrganizationList, useUser } from "@clerk/shared/react";
 //#region src/components/SessionTasks/tasks/TaskChooseOrganization/ChooseOrganizationScreen.tsx
 const ChooseOrganizationScreen = (props) => {

package/dist/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.js CHANGED Viewed

@@ -10,8 +10,8 @@ import { FormButtonContainer } from "../../../../elements/FormButtons.js";
 import { FormContainer } from "../../../../elements/FormContainer.js";
 import { createSlug } from "../../../../utils/createSlug.js";
 import { organizationListParams } from "../../../OrganizationSwitcher/utils.js";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganizationList } from "@clerk/shared/react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx
 const CreateOrganizationScreen = (props) => {

package/dist/components/SessionTasks/tasks/TaskChooseOrganization/index.js CHANGED Viewed

@@ -12,8 +12,8 @@ import { withTaskGuard } from "../shared/withTaskGuard.js";
 import { ChooseOrganizationScreen } from "./ChooseOrganizationScreen.js";
 import { CreateOrganizationScreen } from "./CreateOrganizationScreen.js";
 import { useState } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useSession, useUser } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx
 const TaskChooseOrganizationInternal = () => {

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js CHANGED Viewed

@@ -17,8 +17,8 @@ import { handleError } from "../../../../utils/errorHandler.js";
 import { Form } from "../../../../elements/Form.js";
 import { useMultipleSessions } from "../../../../hooks/useMultipleSessions.js";
 import { withTaskGuard } from "../shared/withTaskGuard.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useClerk, useReverification } from "@clerk/shared/react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/SessionTasks/tasks/TaskResetPassword/index.tsx
 const TaskResetPasswordInternal = () => {
@@ -66,7 +66,7 @@ const TaskResetPasswordInternal = () => {
 	};
 	const resetPassword = () => {
 		return card.runAsync(async () => {
-			if (!clerk.user) return;
+			if (!canSubmit || !clerk.user) return;
 			passwordField.clearFeedback();
 			confirmField.clearFeedback();
 			try {

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["e: any"],"sources":["../../../../../src/components/SessionTasks/tasks/TaskResetPassword/index.tsx"],"sourcesContent":["import { useClerk, useReverification } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';\nimport { useSessionTasksContext, useTaskResetPasswordContext } from '@/ui/contexts/components/SessionTasks';\nimport { Col, descriptors, Flow, localizationKeys, useLocalizations } from '@/ui/customizables';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { useConfirmPassword } from '@/ui/hooks';\nimport { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { withTaskGuard } from '../shared';\n\nconst TaskResetPasswordInternal = () => {\n const clerk = useClerk();\n const card = useCardState();\n const {\n userSettings: { passwordSettings },\n } = useEnvironment();\n\n const { t, locale } = useLocalizations();\n const { redirectUrlComplete } = useTaskResetPasswordContext();\n const { otherSessions } = useMultipleSessions({ user: clerk.user });\n const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();\n const updatePasswordWithReverification = useReverification(\n (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n );\n const { navigateOnSetActive } = useSessionTasksContext();\n\n const handleSignOut = () => {\n if (otherSessions.length === 0) {\n return clerk?.signOut(navigateAfterSignOut);\n }\n\n return clerk?.signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: clerk.session?.id });\n };\n\n const passwordField = useFormControl('newPassword', '', {\n type: 'password',\n label: localizationKeys('formFieldLabel__newPassword'),\n isRequired: true,\n validatePassword: true,\n buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n });\n\n const confirmField = useFormControl('confirmPassword', '', {\n type: 'password',\n label: localizationKeys('formFieldLabel__confirmPassword'),\n isRequired: true,\n });\n\n const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n type: 'checkbox',\n label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n defaultChecked: true,\n });\n\n const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n passwordField,\n confirmPasswordField: confirmField,\n });\n\n const canSubmit = isPasswordMatch;\n\n const validateForm = () => {\n if (passwordField.value) {\n setConfirmPasswordFeedback(confirmField.value);\n }\n };\n\n const resetPassword = () => {\n return card.runAsync(async () => {\n if (!clerk.user) {\n return;\n }\n\n passwordField.clearFeedback();\n confirmField.clearFeedback();\n\n try {\n await updatePasswordWithReverification(clerk.user, [\n {\n newPassword: passwordField.value,\n signOutOfOtherSessions: sessionsField.checked,\n },\n ]);\n\n // Update session to have the latest list of tasks (eg: if reset-password gets resolved)\n await clerk.setActive({\n session: clerk.session,\n navigate: async ({ session }) => {\n await navigateOnSetActive?.({ session, redirectUrlComplete });\n },\n });\n } catch (e: any) {\n return handleError(e, [passwordField, confirmField], card.setError);\n }\n });\n };\n\n const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username;\n\n return (\n <Flow.Root flow='taskResetPassword'>\n <Flow.Part part='resetPassword'>\n <Card.Root>\n <Card.Content>\n <Header.Root showLogo>\n <Header.Title localizationKey={localizationKeys('taskResetPassword.title')} />\n <Header.Subtitle localizationKey={localizationKeys('taskResetPassword.subtitle')} />\n </Header.Root>\n <Card.Alert>{card.error}</Card.Alert>\n <Col\n elementDescriptor={descriptors.main}\n gap={8}\n >\n <Form.Root\n onSubmit={() => {\n void resetPassword();\n }}\n onBlur={validateForm}\n gap={8}\n >\n <Col gap={6}>\n {/* For password managers */}\n <input\n readOnly\n data-testid='hidden-identifier'\n id='identifier-field'\n name='identifier'\n value={clerk.user?.primaryEmailAddress?.emailAddress \|\| clerk.user?.username \|\| ''}\n style={{ display: 'none' }}\n />\n <Form.ControlRow elementId={passwordField.id}>\n <Form.PasswordInput\n {...passwordField.props}\n isRequired\n minLength={6}\n />\n </Form.ControlRow>\n <Form.ControlRow elementId={confirmField.id}>\n <Form.PasswordInput\n {...confirmField.props}\n onChange={e => {\n if (e.target.value) {\n setConfirmPasswordFeedback(e.target.value);\n }\n return confirmField.props.onChange(e);\n }}\n />\n </Form.ControlRow>\n <Form.ControlRow elementId={sessionsField.id}>\n <Form.Checkbox {...sessionsField.props} />\n </Form.ControlRow>\n </Col>\n <Col gap={3}>\n <Form.SubmitButton\n isLoading={card.isLoading}\n isDisabled={!canSubmit}\n localizationKey={localizationKeys('taskResetPassword.formButtonPrimary')}\n />\n </Col>\n </Form.Root>\n </Col>\n </Card.Content>\n\n <Card.Footer>\n <Card.Action\n elementId='signOut'\n gap={2}\n justify='center'\n sx={() => ({ width: '100%' })}\n >\n {identifier && (\n <Card.ActionText\n truncate\n localizationKey={localizationKeys('taskResetPassword.signOut.actionText', {\n identifier,\n })}\n />\n )}\n <Card.ActionLink\n sx={() => ({ flexShrink: 0 })}\n onClick={() => {\n void handleSignOut();\n }}\n localizationKey={localizationKeys('taskResetPassword.signOut.actionLink')}\n />\n </Card.Action>\n </Card.Footer>\n </Card.Root>\n </Flow.Part>\n </Flow.Root>\n );\n};\n\nexport const TaskResetPassword = withCoreSessionSwitchGuard(\n withTaskGuard(withCardStateProvider(TaskResetPasswordInternal), 'reset-password'),\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["e: any"],"sources":["../../../../../src/components/SessionTasks/tasks/TaskResetPassword/index.tsx"],"sourcesContent":["import { useClerk, useReverification } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';\nimport { useSessionTasksContext, useTaskResetPasswordContext } from '@/ui/contexts/components/SessionTasks';\nimport { Col, descriptors, Flow, localizationKeys, useLocalizations } from '@/ui/customizables';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { useConfirmPassword } from '@/ui/hooks';\nimport { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { withTaskGuard } from '../shared';\n\nconst TaskResetPasswordInternal = () => {\n const clerk = useClerk();\n const card = useCardState();\n const {\n userSettings: { passwordSettings },\n } = useEnvironment();\n\n const { t, locale } = useLocalizations();\n const { redirectUrlComplete } = useTaskResetPasswordContext();\n const { otherSessions } = useMultipleSessions({ user: clerk.user });\n const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();\n const updatePasswordWithReverification = useReverification(\n (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n );\n const { navigateOnSetActive } = useSessionTasksContext();\n\n const handleSignOut = () => {\n if (otherSessions.length === 0) {\n return clerk?.signOut(navigateAfterSignOut);\n }\n\n return clerk?.signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: clerk.session?.id });\n };\n\n const passwordField = useFormControl('newPassword', '', {\n type: 'password',\n label: localizationKeys('formFieldLabel__newPassword'),\n isRequired: true,\n validatePassword: true,\n buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n });\n\n const confirmField = useFormControl('confirmPassword', '', {\n type: 'password',\n label: localizationKeys('formFieldLabel__confirmPassword'),\n isRequired: true,\n });\n\n const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n type: 'checkbox',\n label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n defaultChecked: true,\n });\n\n const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n passwordField,\n confirmPasswordField: confirmField,\n });\n\n const canSubmit = isPasswordMatch;\n\n const validateForm = () => {\n if (passwordField.value) {\n setConfirmPasswordFeedback(confirmField.value);\n }\n };\n\n const resetPassword = () => {\n return card.runAsync(async () => {\n if (!canSubmit \|\| !clerk.user) {\n return;\n }\n\n passwordField.clearFeedback();\n confirmField.clearFeedback();\n\n try {\n await updatePasswordWithReverification(clerk.user, [\n {\n newPassword: passwordField.value,\n signOutOfOtherSessions: sessionsField.checked,\n },\n ]);\n\n // Update session to have the latest list of tasks (eg: if reset-password gets resolved)\n await clerk.setActive({\n session: clerk.session,\n navigate: async ({ session }) => {\n await navigateOnSetActive?.({ session, redirectUrlComplete });\n },\n });\n } catch (e: any) {\n return handleError(e, [passwordField, confirmField], card.setError);\n }\n });\n };\n\n const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username;\n\n return (\n <Flow.Root flow='taskResetPassword'>\n <Flow.Part part='resetPassword'>\n <Card.Root>\n <Card.Content>\n <Header.Root showLogo>\n <Header.Title localizationKey={localizationKeys('taskResetPassword.title')} />\n <Header.Subtitle localizationKey={localizationKeys('taskResetPassword.subtitle')} />\n </Header.Root>\n <Card.Alert>{card.error}</Card.Alert>\n <Col\n elementDescriptor={descriptors.main}\n gap={8}\n >\n <Form.Root\n onSubmit={() => {\n void resetPassword();\n }}\n onBlur={validateForm}\n gap={8}\n >\n <Col gap={6}>\n {/* For password managers */}\n <input\n readOnly\n data-testid='hidden-identifier'\n id='identifier-field'\n name='identifier'\n value={clerk.user?.primaryEmailAddress?.emailAddress \|\| clerk.user?.username \|\| ''}\n style={{ display: 'none' }}\n />\n <Form.ControlRow elementId={passwordField.id}>\n <Form.PasswordInput\n {...passwordField.props}\n isRequired\n minLength={6}\n />\n </Form.ControlRow>\n <Form.ControlRow elementId={confirmField.id}>\n <Form.PasswordInput\n {...confirmField.props}\n onChange={e => {\n if (e.target.value) {\n setConfirmPasswordFeedback(e.target.value);\n }\n return confirmField.props.onChange(e);\n }}\n />\n </Form.ControlRow>\n <Form.ControlRow elementId={sessionsField.id}>\n <Form.Checkbox {...sessionsField.props} />\n </Form.ControlRow>\n </Col>\n <Col gap={3}>\n <Form.SubmitButton\n isLoading={card.isLoading}\n isDisabled={!canSubmit}\n localizationKey={localizationKeys('taskResetPassword.formButtonPrimary')}\n />\n </Col>\n </Form.Root>\n </Col>\n </Card.Content>\n\n <Card.Footer>\n <Card.Action\n elementId='signOut'\n gap={2}\n justify='center'\n sx={() => ({ width: '100%' })}\n >\n {identifier && (\n <Card.ActionText\n truncate\n localizationKey={localizationKeys('taskResetPassword.signOut.actionText', {\n identifier,\n })}\n />\n )}\n <Card.ActionLink\n sx={() => ({ flexShrink: 0 })}\n onClick={() => {\n void handleSignOut();\n }}\n localizationKey={localizationKeys('taskResetPassword.signOut.actionLink')}\n />\n </Card.Action>\n </Card.Footer>\n </Card.Root>\n </Flow.Part>\n </Flow.Root>\n );\n};\n\nexport const TaskResetPassword = withCoreSessionSwitchGuard(\n withTaskGuard(withCardStateProvider(TaskResetPasswordInternal), 'reset-password'),\n);\n"],"mappings":"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"}

package/dist/components/SignIn/ResetPassword.js CHANGED Viewed

@@ -60,6 +60,7 @@ const ResetPasswordInternal = () => {
 		if (passwordField.value) setConfirmPasswordFeedback(confirmField.value);
 	};
 	const resetPassword = async () => {
+		if (!canSubmit) return;
 		passwordField.clearFeedback();
 		confirmField.clearFeedback();
 		try {