npm - @workos-inc/widgets - Versions diffs - 1.8.1 → 1.9.0 - Mend

@workos-inc/widgets 1.8.1 → 1.9.0

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

package/dist/esm/lib/change-password-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/change-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport * as Form from \"@radix-ui/react-form\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Button, Dialog, Label, PasswordField } from \"./elements.js\";\nimport { useUpdatePassword } from \"../api/endpoint.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface ChangePasswordDialogProps extends Dialog.RootProps {\n children?: ReactNode;\n}\n\nexport function ChangePasswordDialog({\n children,\n ...props\n}: ChangePasswordDialogProps) {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n <Dialog.Root\n {...props}\n open={props.open \|\| open}\n onOpenChange={props.onOpenChange \|\| setOpen}\n >\n <Dialog.Trigger>{children}</Dialog.Trigger>\n\n <Dialog.Content maxWidth=\"480px\">\n <Content onClose={handleClose} />\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\ninterface ContentProps {\n onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n const translate = useTranslation();\n const changePassword = useUpdatePassword({\n mutation: {\n onError: (error) => {\n const errorMsg = getMutationErrorMessage(error);\n if (errorMsg === \"Invalid credentials\") {\n setServerErrors({\n currentPassword:\n \"Your current password is incorrect. Please, try again.\",\n });\n }\n },\n },\n });\n const [disableSubmit, setDisableSubmit] = React.useState(true);\n const [serverErrors, setServerErrors] = React.useState<{\n currentPassword?: string;\n password?: string;\n confirmPassword?: string;\n }>({});\n\n const errorMessage = React.useMemo(() => {\n if (changePassword.error) {\n return getMutationErrorMessage(changePassword.error);\n }\n\n return null;\n }, [changePassword.error]);\n\n const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const currentPassword = formData.get(\"oldPassword\")?.toString() ?? \"\";\n const newPassword = formData.get(\"password\")?.toString() ?? \"\";\n\n changePassword.mutate({\n data: { currentPassword, newPassword },\n });\n };\n\n return (\n <>\n <Dialog.Title mb=\"5\">\n <Translation\n defaultMessage=\"Change Password\"\n id=\"kAYx7z\"\n description=\"Dialog title for changing password\"\n />\n </Dialog.Title>\n <VisuallyHidden>\n <Dialog.Description>\n <Translation\n defaultMessage=\"Change your account password\"\n id=\"R5rXuR\"\n description=\"Dialog description for changing password\"\n />\n </Dialog.Description>\n </VisuallyHidden>\n\n {errorMessage && errorMessage !== \"Invalid credentials\" ? (\n <Callout.Root color=\"red\" my=\"-2\">\n <Callout.Text>{errorMessage}</Callout.Text>\n </Callout.Root>\n ) : null}\n\n <Form.Root\n onSubmit={handleSubmit}\n onChange={(event) => {\n const formData = new FormData(event.currentTarget);\n const currentPassword = formData.get(\"oldPassword\")?.toString() ?? \"\";\n const newPassword = formData.get(\"password\")?.toString() ?? \"\";\n const confirmPassword =\n formData.get(\"confirmPassword\")?.toString() ?? \"\";\n\n setDisableSubmit(\n currentPassword === \"\" \|\|\n newPassword === \"\" \|\|\n confirmPassword === \"\",\n );\n setServerErrors({});\n }}\n onClearServerErrors={() => {\n setServerErrors({});\n }}\n >\n <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n <Form.Field\n name=\"oldPassword\"\n asChild\n serverInvalid={!serverErrors.currentPassword}\n >\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Enter your current password\"\n id=\"uqn8py\"\n description=\"Label for current password field\"\n />\n </Label>\n </Form.Label>\n\n <Form.Control asChild>\n <PasswordField\n autoFocus\n required\n disabled={\n changePassword.isPending \|\| changePassword.isSuccess\n }\n autoComplete=\"current-password\"\n placeholder={translate({\n defaultMessage: \"Current password\",\n id: \"P2oB4G\",\n description: \"Placeholder for current password field\",\n })}\n />\n </Form.Control>\n\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please enter your current password\"\n id=\"QKO3st\"\n description=\"Error message when current password is missing\"\n />\n </Text>\n </Form.Message>\n\n {serverErrors.currentPassword && (\n <Form.Message asChild>\n <Text size=\"2\" color=\"red\">\n {serverErrors.currentPassword}\n </Text>\n </Form.Message>\n )}\n </Flex>\n </Form.Field>\n\n <Form.Field\n name=\"password\"\n asChild\n serverInvalid={!serverErrors.password}\n >\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Enter your new password\"\n id=\"b/+TBS\"\n description=\"Label for new password field\"\n />\n </Label>\n </Form.Label>\n\n <Form.Control asChild>\n <PasswordField\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"New password\",\n id: \"8d23GS\",\n description: \"Placeholder for new password field\",\n })}\n required\n disabled={\n changePassword.isPending \|\| changePassword.isSuccess\n }\n />\n </Form.Control>\n\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please enter your new password\"\n id=\"L4yLAf\"\n description=\"Error message when new password is missing\"\n />\n </Text>\n </Form.Message>\n <Form.Message match={(value) => value.length < 8} asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Password must be at least 8 characters\"\n id=\"WRjyrh\"\n description=\"Error message when password is too short\"\n />\n </Text>\n </Form.Message>\n <Form.Message\n match={(value, formData) =>\n value === formData.get(\"oldPassword\")\n }\n asChild\n >\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"You cannot reuse your current password\"\n id=\"mEkhOO\"\n description=\"Error message when user tries to reuse current password\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n\n <Form.Field\n name=\"confirmPassword\"\n asChild\n serverInvalid={!serverErrors.confirmPassword}\n >\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Confirm your new password\"\n id=\"K83lBn\"\n description=\"Label for password confirmation field\"\n />\n </Label>\n </Form.Label>\n\n <Form.Control asChild>\n <PasswordField\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"Confirm new password\",\n id: \"cubpBN\",\n description: \"Placeholder for password confirmation field\",\n })}\n required\n disabled={\n changePassword.isPending \|\| changePassword.isSuccess\n }\n />\n </Form.Control>\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please confirm your new password\"\n id=\"fXZhqG\"\n description=\"Error message when password confirmation is missing\"\n />\n </Text>\n </Form.Message>\n <Form.Message\n match={(value, formData) => value !== formData.get(\"password\")}\n asChild\n >\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"The new passwords you entered don't match.\"\n id=\"Zdq2Hr\"\n description=\"Error message when passwords don't match\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n </Flex>\n\n <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button\n variant=\"secondary\"\n type=\"button\"\n disabled={changePassword.isPending \|\| changePassword.isSuccess}\n >\n <Translation\n defaultMessage=\"Cancel\"\n id=\"hHNj31\"\n description=\"Cancel button text\"\n />\n </Button>\n </Dialog.Close>\n\n <SaveButton\n type=\"submit\"\n loading={changePassword.isPending}\n done={changePassword.isSuccess}\n onDone={onClose}\n disabled={disableSubmit \|\| undefined}\n >\n <Translation\n defaultMessage=\"Change password\"\n id=\"8GDtZu\"\n description=\"Submit button text to change password\"\n />\n </SaveButton>\n </Flex>\n </Form.Root>\n\n {/* mirror errors in a live region */}\n <VisuallyHidden asChild>\n <section aria-live=\"polite\">{errorMessage}</section>\n </VisuallyHidden>\n </>\n );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n if (error instanceof Error) {\n return error.message;\n }\n\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof error.message === \"string\"\n ) {\n return error.message;\n }\n\n return \"Something went wrong. Please try again.\";\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they come from the API and are displayed dynamically\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/lib/change-password-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { Form } from \"radix-ui\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Button, Dialog, Label, PasswordField } from \"./elements.js\";\nimport { useUpdatePassword } from \"../api/endpoint.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface ChangePasswordDialogProps extends Dialog.RootProps {\n children?: ReactNode;\n}\n\nexport function ChangePasswordDialog({\n children,\n ...props\n}: ChangePasswordDialogProps) {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n <Dialog.Root\n {...props}\n open={props.open \|\| open}\n onOpenChange={props.onOpenChange \|\| setOpen}\n >\n <Dialog.Trigger>{children}</Dialog.Trigger>\n\n <Dialog.Content maxWidth=\"480px\">\n <Content onClose={handleClose} />\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\ninterface ContentProps {\n onClose: () => void;\n}\n\nfunction Content({ onClose }: ContentProps) {\n const translate = useTranslation();\n const changePassword = useUpdatePassword({\n mutation: {\n onError: (error) => {\n const errorMsg = getMutationErrorMessage(error);\n if (errorMsg === \"Invalid credentials\") {\n setServerErrors({\n currentPassword:\n \"Your current password is incorrect. Please, try again.\",\n });\n }\n },\n },\n });\n const [disableSubmit, setDisableSubmit] = React.useState(true);\n const [serverErrors, setServerErrors] = React.useState<{\n currentPassword?: string;\n password?: string;\n confirmPassword?: string;\n }>({});\n\n const errorMessage = React.useMemo(() => {\n if (changePassword.error) {\n return getMutationErrorMessage(changePassword.error);\n }\n\n return null;\n }, [changePassword.error]);\n\n const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n\n const formData = new FormData(event.currentTarget);\n const currentPassword = formData.get(\"oldPassword\")?.toString() ?? \"\";\n const newPassword = formData.get(\"password\")?.toString() ?? \"\";\n\n changePassword.mutate({\n data: { currentPassword, newPassword },\n });\n };\n\n return (\n <>\n <Dialog.Title mb=\"5\">\n <Translation\n defaultMessage=\"Change Password\"\n id=\"kAYx7z\"\n description=\"Dialog title for changing password\"\n />\n </Dialog.Title>\n <VisuallyHidden>\n <Dialog.Description>\n <Translation\n defaultMessage=\"Change your account password\"\n id=\"R5rXuR\"\n description=\"Dialog description for changing password\"\n />\n </Dialog.Description>\n </VisuallyHidden>\n\n {errorMessage && errorMessage !== \"Invalid credentials\" ? (\n <Callout.Root color=\"red\" my=\"-2\">\n <Callout.Text>{errorMessage}</Callout.Text>\n </Callout.Root>\n ) : null}\n\n <Form.Root\n onSubmit={handleSubmit}\n onChange={(event) => {\n const formData = new FormData(event.currentTarget);\n const currentPassword = formData.get(\"oldPassword\")?.toString() ?? \"\";\n const newPassword = formData.get(\"password\")?.toString() ?? \"\";\n const confirmPassword =\n formData.get(\"confirmPassword\")?.toString() ?? \"\";\n\n setDisableSubmit(\n currentPassword === \"\" \|\|\n newPassword === \"\" \|\|\n confirmPassword === \"\",\n );\n setServerErrors({});\n }}\n onClearServerErrors={() => {\n setServerErrors({});\n }}\n >\n <Flex mt=\"5\" direction=\"column\" gap=\"4\">\n <Form.Field\n name=\"oldPassword\"\n asChild\n serverInvalid={!serverErrors.currentPassword}\n >\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Enter your current password\"\n id=\"uqn8py\"\n description=\"Label for current password field\"\n />\n </Label>\n </Form.Label>\n\n <Form.Control asChild>\n <PasswordField\n autoFocus\n required\n disabled={\n changePassword.isPending \|\| changePassword.isSuccess\n }\n autoComplete=\"current-password\"\n placeholder={translate({\n defaultMessage: \"Current password\",\n id: \"P2oB4G\",\n description: \"Placeholder for current password field\",\n })}\n />\n </Form.Control>\n\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please enter your current password\"\n id=\"QKO3st\"\n description=\"Error message when current password is missing\"\n />\n </Text>\n </Form.Message>\n\n {serverErrors.currentPassword && (\n <Form.Message asChild>\n <Text size=\"2\" color=\"red\">\n {serverErrors.currentPassword}\n </Text>\n </Form.Message>\n )}\n </Flex>\n </Form.Field>\n\n <Form.Field\n name=\"password\"\n asChild\n serverInvalid={!serverErrors.password}\n >\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Enter your new password\"\n id=\"b/+TBS\"\n description=\"Label for new password field\"\n />\n </Label>\n </Form.Label>\n\n <Form.Control asChild>\n <PasswordField\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"New password\",\n id: \"8d23GS\",\n description: \"Placeholder for new password field\",\n })}\n required\n disabled={\n changePassword.isPending \|\| changePassword.isSuccess\n }\n />\n </Form.Control>\n\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please enter your new password\"\n id=\"L4yLAf\"\n description=\"Error message when new password is missing\"\n />\n </Text>\n </Form.Message>\n <Form.Message match={(value) => value.length < 8} asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Password must be at least 8 characters\"\n id=\"WRjyrh\"\n description=\"Error message when password is too short\"\n />\n </Text>\n </Form.Message>\n <Form.Message\n match={(value, formData) =>\n value === formData.get(\"oldPassword\")\n }\n asChild\n >\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"You cannot reuse your current password\"\n id=\"mEkhOO\"\n description=\"Error message when user tries to reuse current password\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n\n <Form.Field\n name=\"confirmPassword\"\n asChild\n serverInvalid={!serverErrors.confirmPassword}\n >\n <Flex direction=\"column\" gap=\"2\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Confirm your new password\"\n id=\"K83lBn\"\n description=\"Label for password confirmation field\"\n />\n </Label>\n </Form.Label>\n\n <Form.Control asChild>\n <PasswordField\n autoComplete=\"new-password\"\n placeholder={translate({\n defaultMessage: \"Confirm new password\",\n id: \"cubpBN\",\n description: \"Placeholder for password confirmation field\",\n })}\n required\n disabled={\n changePassword.isPending \|\| changePassword.isSuccess\n }\n />\n </Form.Control>\n <Form.Message match=\"valueMissing\" asChild>\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"Please confirm your new password\"\n id=\"fXZhqG\"\n description=\"Error message when password confirmation is missing\"\n />\n </Text>\n </Form.Message>\n <Form.Message\n match={(value, formData) => value !== formData.get(\"password\")}\n asChild\n >\n <Text size=\"2\" color=\"red\">\n <Translation\n defaultMessage=\"The new passwords you entered don't match.\"\n id=\"Zdq2Hr\"\n description=\"Error message when passwords don't match\"\n />\n </Text>\n </Form.Message>\n </Flex>\n </Form.Field>\n </Flex>\n\n <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button\n variant=\"secondary\"\n type=\"button\"\n disabled={changePassword.isPending \|\| changePassword.isSuccess}\n >\n <Translation\n defaultMessage=\"Cancel\"\n id=\"hHNj31\"\n description=\"Cancel button text\"\n />\n </Button>\n </Dialog.Close>\n\n <SaveButton\n type=\"submit\"\n loading={changePassword.isPending}\n done={changePassword.isSuccess}\n onDone={onClose}\n disabled={disableSubmit \|\| undefined}\n >\n <Translation\n defaultMessage=\"Change password\"\n id=\"8GDtZu\"\n description=\"Submit button text to change password\"\n />\n </SaveButton>\n </Flex>\n </Form.Root>\n\n {/* mirror errors in a live region */}\n <VisuallyHidden asChild>\n <section aria-live=\"polite\">{errorMessage}</section>\n </VisuallyHidden>\n </>\n );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n if (error instanceof Error) {\n return error.message;\n }\n\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof error.message === \"string\"\n ) {\n return error.message;\n }\n\n return \"Something went wrong. Please try again.\";\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they come from the API and are displayed dynamically\n"],"mappings":";AA2BI,SA6DA,UAxDE,KALF;AAzBJ,SAAS,SAAS,MAAM,MAAM,sBAAsB;AACpD,SAAS,YAAY;AACrB,YAAY,WAAW;AAEvB,SAAS,QAAQ,QAAQ,OAAO,qBAAqB;AACrD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAMxB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,QAAM,cAAc,MAAM,YAAY,MAAM;AAC1C,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,MAAM,QAAQ;AAAA,MACpB,cAAc,MAAM,gBAAgB;AAAA,MAEpC;AAAA,4BAAC,OAAO,SAAP,EAAgB,UAAS;AAAA,QAE1B,oBAAC,OAAO,SAAP,EAAe,UAAS,SACvB,8BAAC,WAAQ,SAAS,aAAa,GACjC;AAAA;AAAA;AAAA,EACF;AAEJ;AAMA,SAAS,QAAQ,EAAE,QAAQ,GAAiB;AAC1C,QAAM,YAAY,eAAe;AACjC,QAAM,iBAAiB,kBAAkB;AAAA,IACvC,UAAU;AAAA,MACR,SAAS,CAAC,UAAU;AAClB,cAAM,WAAW,wBAAwB,KAAK;AAC9C,YAAI,aAAa,uBAAuB;AACtC,0BAAgB;AAAA,YACd,iBACE;AAAA,UACJ,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AACD,QAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAAS,IAAI;AAC7D,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAI3C,CAAC,CAAC;AAEL,QAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,QAAI,eAAe,OAAO;AACxB,aAAO,wBAAwB,eAAe,KAAK;AAAA,IACrD;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,KAAK,CAAC;AAEzB,QAAM,eAAe,OAAO,UAA4C;AACtE,UAAM,eAAe;AAErB,UAAM,WAAW,IAAI,SAAS,MAAM,aAAa;AACjD,UAAM,kBAAkB,SAAS,IAAI,aAAa,GAAG,SAAS,KAAK;AACnE,UAAM,cAAc,SAAS,IAAI,UAAU,GAAG,SAAS,KAAK;AAE5D,mBAAe,OAAO;AAAA,MACpB,MAAM,EAAE,iBAAiB,YAAY;AAAA,IACvC,CAAC;AAAA,EACH;AAEA,SACE,iCACE;AAAA,wBAAC,OAAO,OAAP,EAAa,IAAG,KACf;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF;AAAA,IACA,oBAAC,kBACC,8BAAC,OAAO,aAAP,EACC;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF,GACF;AAAA,IAEC,gBAAgB,iBAAiB,wBAChC,oBAAC,QAAQ,MAAR,EAAa,OAAM,OAAM,IAAG,MAC3B,8BAAC,QAAQ,MAAR,EAAc,wBAAa,GAC9B,IACE;AAAA,IAEJ;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU;AAAA,QACV,UAAU,CAAC,UAAU;AACnB,gBAAM,WAAW,IAAI,SAAS,MAAM,aAAa;AACjD,gBAAM,kBAAkB,SAAS,IAAI,aAAa,GAAG,SAAS,KAAK;AACnE,gBAAM,cAAc,SAAS,IAAI,UAAU,GAAG,SAAS,KAAK;AAC5D,gBAAM,kBACJ,SAAS,IAAI,iBAAiB,GAAG,SAAS,KAAK;AAEjD;AAAA,YACE,oBAAoB,MAClB,gBAAgB,MAChB,oBAAoB;AAAA,UACxB;AACA,0BAAgB,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,qBAAqB,MAAM;AACzB,0BAAgB,CAAC,CAAC;AAAA,QACpB;AAAA,QAEA;AAAA,+BAAC,QAAK,IAAG,KAAI,WAAU,UAAS,KAAI,KAClC;AAAA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,SAAO;AAAA,gBACP,eAAe,CAAC,aAAa;AAAA,gBAE7B,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,sCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBAEA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAS;AAAA,sBACT,UAAQ;AAAA,sBACR,UACE,eAAe,aAAa,eAAe;AAAA,sBAE7C,cAAa;AAAA,sBACb,aAAa,UAAU;AAAA,wBACrB,gBAAgB;AAAA,wBAChB,IAAI;AAAA,wBACJ,aAAa;AAAA,sBACf,CAAC;AAAA;AAAA,kBACH,GACF;AAAA,kBAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,gBAAe,SAAO,MACxC,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBAEC,aAAa,mBACZ,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB,8BAAC,QAAK,MAAK,KAAI,OAAM,OAClB,uBAAa,iBAChB,GACF;AAAA,mBAEJ;AAAA;AAAA,YACF;AAAA,YAEA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,SAAO;AAAA,gBACP,eAAe,CAAC,aAAa;AAAA,gBAE7B,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,sCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBAEA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,cAAa;AAAA,sBACb,aAAa,UAAU;AAAA,wBACrB,gBAAgB;AAAA,wBAChB,IAAI;AAAA,wBACJ,aAAa;AAAA,sBACf,CAAC;AAAA,sBACD,UAAQ;AAAA,sBACR,UACE,eAAe,aAAa,eAAe;AAAA;AAAA,kBAE/C,GACF;AAAA,kBAEA,oBAAC,KAAK,SAAL,EAAa,OAAM,gBAAe,SAAO,MACxC,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBACA,oBAAC,KAAK,SAAL,EAAa,OAAO,CAAC,UAAU,MAAM,SAAS,GAAG,SAAO,MACvD,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBACA;AAAA,oBAAC,KAAK;AAAA,oBAAL;AAAA,sBACC,OAAO,CAAC,OAAO,aACb,UAAU,SAAS,IAAI,aAAa;AAAA,sBAEtC,SAAO;AAAA,sBAEP,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,wBAAC;AAAA;AAAA,0BACC,gBAAe;AAAA,0BACf,IAAG;AAAA,0BACH,aAAY;AAAA;AAAA,sBACd,GACF;AAAA;AAAA,kBACF;AAAA,mBACF;AAAA;AAAA,YACF;AAAA,YAEA;AAAA,cAAC,KAAK;AAAA,cAAL;AAAA,gBACC,MAAK;AAAA,gBACL,SAAO;AAAA,gBACP,eAAe,CAAC,aAAa;AAAA,gBAE7B,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,sCAAC,KAAK,OAAL,EAAW,SAAO,MACjB,8BAAC,SACC;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBAEA,oBAAC,KAAK,SAAL,EAAa,SAAO,MACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,cAAa;AAAA,sBACb,aAAa,UAAU;AAAA,wBACrB,gBAAgB;AAAA,wBAChB,IAAI;AAAA,wBACJ,aAAa;AAAA,sBACf,CAAC;AAAA,sBACD,UAAQ;AAAA,sBACR,UACE,eAAe,aAAa,eAAe;AAAA;AAAA,kBAE/C,GACF;AAAA,kBACA,oBAAC,KAAK,SAAL,EAAa,OAAM,gBAAe,SAAO,MACxC,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,oBAAC;AAAA;AAAA,sBACC,gBAAe;AAAA,sBACf,IAAG;AAAA,sBACH,aAAY;AAAA;AAAA,kBACd,GACF,GACF;AAAA,kBACA;AAAA,oBAAC,KAAK;AAAA,oBAAL;AAAA,sBACC,OAAO,CAAC,OAAO,aAAa,UAAU,SAAS,IAAI,UAAU;AAAA,sBAC7D,SAAO;AAAA,sBAEP,8BAAC,QAAK,MAAK,KAAI,OAAM,OACnB;AAAA,wBAAC;AAAA;AAAA,0BACC,gBAAe;AAAA,0BACf,IAAG;AAAA,0BACH,aAAY;AAAA;AAAA,sBACd,GACF;AAAA;AAAA,kBACF;AAAA,mBACF;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAEA,qBAAC,QAAK,IAAG,KAAI,KAAI,KAAI,SAAQ,OAC3B;AAAA,gCAAC,OAAO,OAAP,EACC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,UAAU,eAAe,aAAa,eAAe;AAAA,gBAErD;AAAA,kBAAC;AAAA;AAAA,oBACC,gBAAe;AAAA,oBACf,IAAG;AAAA,oBACH,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF,GACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,eAAe;AAAA,gBACxB,MAAM,eAAe;AAAA,gBACrB,QAAQ;AAAA,gBACR,UAAU,iBAAiB;AAAA,gBAE3B;AAAA,kBAAC;AAAA;AAAA,oBACC,gBAAe;AAAA,oBACf,IAAG;AAAA,oBACH,aAAY;AAAA;AAAA,gBACd;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,IAGA,oBAAC,kBAAe,SAAO,MACrB,8BAAC,aAAQ,aAAU,UAAU,wBAAa,GAC5C;AAAA,KACF;AAEJ;AAEA,SAAS,wBAAwB,OAAgB;AAC/C,MAAI,iBAAiB,OAAO;AAC1B,WAAO,MAAM;AAAA,EACf;AAEA,MACE,OAAO,UAAU,YACjB,UAAU,QACV,aAAa,SACb,OAAO,MAAM,YAAY,UACzB;AACA,WAAO,MAAM;AAAA,EACf;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/lib/directory-sync.d.ts ADDED Viewed

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { WidgetRootDomProps } from './utils.js';
+import { DirectoryType, DirectoryMetadata, DirectoryState } from '../api/endpoint.js';
+import './elements.js';
+import '@radix-ui/themes';
+import '@radix-ui/themes/props';
+import '../dialog-C15qCLN3.js';
+import '@radix-ui/themes/components/dialog';
+import '../alert-dialog-BlG3_awx.js';
+import '@radix-ui/themes/components/alert-dialog';
+import '../dropdown-menu-BQ5LtvdR.js';
+import '@radix-ui/themes/components/dropdown-menu';
+import '../select-KR89Qnvm.js';
+import '@radix-ui/themes/components/select';
+import '@tanstack/react-query';
+import '../api/widgets-api-client.js';
+interface BaseDirectorySyncProps {
+    type?: DirectoryType;
+    metadata?: DirectoryMetadata;
+    lastSyncAt?: string | null;
+    link?: string | null;
+    errorMessage?: never;
+    userCount?: never;
+    groupCount?: never;
+    currentDate?: never;
+    state: DirectoryState;
+}
+interface NotConfiguredProps extends BaseDirectorySyncProps {
+    state: (typeof DirectoryState)["unlinked"];
+}
+interface SetupInProgressProps extends Omit<BaseDirectorySyncProps, "type"> {
+    state: (typeof DirectoryState)["validating"];
+    type: DirectoryType;
+}
+interface ErrorBeforeConfigProps extends Omit<BaseDirectorySyncProps, "type" | "errorMessage"> {
+    state: DirectoryState;
+    type: DirectoryType;
+    errorMessage: React.ReactNode;
+}
+interface ValidatingProps extends Omit<BaseDirectorySyncProps, "type"> {
+    state: (typeof DirectoryState)["validating"];
+    type: DirectoryType;
+}
+interface ActiveProps extends Omit<BaseDirectorySyncProps, "type" | "lastSyncAt" | "currentDate" | "errorMessage"> {
+    state: (typeof DirectoryState)["linked"];
+    type: DirectoryType;
+    lastSyncAt: string | null;
+    currentDate?: Date | null;
+    errorMessage?: React.ReactNode;
+}
+interface InvalidCredentialsProps extends Omit<BaseDirectorySyncProps, "type" | "errorMessage"> {
+    state: (typeof DirectoryState)["invalid_credentials"];
+    type: DirectoryType;
+    errorMessage: React.ReactNode;
+}
+interface DeletingProps extends Omit<BaseDirectorySyncProps, "type"> {
+    state: (typeof DirectoryState)["deleting"];
+    type: DirectoryType;
+}
+type DirectorySyncStatusProps = NotConfiguredProps | SetupInProgressProps | ErrorBeforeConfigProps | ValidatingProps | ActiveProps | InvalidCredentialsProps | DeletingProps;
+type DirectorySyncProps = WidgetRootDomProps & DirectorySyncStatusProps;
+declare const DirectorySync: React.FC<DirectorySyncProps>;
+interface DirectorySyncLoadingProps extends WidgetRootDomProps {
+}
+declare const DirectorySyncLoading: React.FC<DirectorySyncLoadingProps>;
+interface DirectorySyncErrorProps extends WidgetRootDomProps {
+    error: unknown;
+}
+declare const DirectorySyncError: React.FC<DirectorySyncErrorProps>;
+export { DirectorySync, DirectorySyncError, type DirectorySyncErrorProps, DirectorySyncLoading, type DirectorySyncLoadingProps, type DirectorySyncProps, type DirectorySyncStatusProps };

package/dist/esm/lib/directory-sync.js ADDED Viewed

@@ -0,0 +1,259 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Box, Card, Flex, Spinner, Text } from "@radix-ui/themes";
+import { ExternalLinkIcon, InfoCircledIcon } from "@radix-ui/react-icons";
+import { Button, Skeleton } from "./elements.js";
+import { GenericError } from "./generic-error.js";
+import * as CardList from "./card-list.js";
+import { IconPanel } from "./icon-panel.js";
+import { ProviderIcon } from "./provider-icon.js";
+import {
+  getDirectoryTypeIcon,
+  getDirectoryTypeName
+} from "./identity-providers.js";
+import { Status } from "./status.js";
+import { Translation } from "./i18n/translation.js";
+import {
+  getDomProps
+} from "./utils.js";
+import {
+  DirectoryState
+} from "../api/endpoint.js";
+const DirectorySyncContext = React.createContext(null);
+DirectorySyncContext.displayName = "DirectorySyncContext";
+function useDirectorySyncContext() {
+  const context = React.useContext(DirectorySyncContext);
+  if (!context) {
+    throw new Error(
+      "useDirectorySyncContext must be used within a DirectorySyncContext provider"
+    );
+  }
+  return context;
+}
+function DirectoryProviderInfo({
+  type,
+  subtitle
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
+    /* @__PURE__ */ jsx(IconPanel, { color: "panel", children: /* @__PURE__ */ jsx(
+      ProviderIcon,
+      {
+        provider: getDirectoryTypeIcon(type) ?? "workos",
+        size: "2"
+      }
+    ) }),
+    subtitle ? /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: getDirectoryTypeName(type) }),
+      subtitle
+    ] }) : /* @__PURE__ */ jsx(Text, { size: "2", weight: "bold", children: getDirectoryTypeName(type) })
+  ] });
+}
+function SpinnerMessage({ children }) {
+  return /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+    /* @__PURE__ */ jsx(Spinner, {}),
+    /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children })
+  ] });
+}
+function getStatusBadge(state) {
+  switch (state) {
+    case DirectoryState.requires_type:
+    case DirectoryState.invalid_credentials:
+      return /* @__PURE__ */ jsx(Status, { state: "error", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Requires action",
+          id: "uuuXIF",
+          description: "Status badge when directory requires user action"
+        }
+      ) });
+    case DirectoryState.linked:
+      return /* @__PURE__ */ jsx(Status, { state: "success", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Connected",
+          id: "H/dAHq",
+          description: "Status badge when directory is active"
+        }
+      ) });
+    default:
+      return null;
+  }
+}
+function getSpinnerMessage(state, hasType) {
+  if (state === DirectoryState.unlinked && hasType)
+    return "Setup in progress...";
+  if (state === DirectoryState.validating)
+    return "Waiting for users and groups...";
+  if (state === DirectoryState.deleting) return "Deleting directory...";
+  return null;
+}
+const DirectorySync = ({
+  state,
+  className,
+  ...rest
+}) => {
+  const type = "type" in rest ? rest.type : void 0;
+  const errorMessage = "errorMessage" in rest ? rest.errorMessage : void 0;
+  const metadata = "metadata" in rest ? rest.metadata : void 0;
+  const link = "link" in rest ? rest.link : void 0;
+  const userCount = metadata?.users.active ?? 0;
+  const groupCount = metadata?.groups ?? 0;
+  const lastSyncAt = rest.lastSyncAt ? new Date(rest.lastSyncAt) : null;
+  const currentDate = "currentDate" in rest && rest.currentDate instanceof Date ? rest.currentDate : void 0;
+  const lastSyncString = lastSyncAt ? getRelativeTimeString(currentDate ?? /* @__PURE__ */ new Date(), lastSyncAt) : null;
+  const showCounts = state === DirectoryState.linked || state === DirectoryState.invalid_credentials || state === DirectoryState.deleting;
+  const statusBadge = getStatusBadge(state);
+  const spinnerMessage = getSpinnerMessage(state, !!type);
+  const showButton = state !== DirectoryState.deleting;
+  const domProps = { className };
+  const countsSubtitle = showCounts ? /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
+    /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "{userCount} {userLabel}",
+        id: "aZxx55",
+        description: "Directory sync user and group counts",
+        values: {
+          userCount,
+          userLabel: userCount !== 1 ? "users" : "user"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \u2219 " }),
+    /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "{groupCount} {groupLabel}",
+        id: "SgiDio",
+        description: "Directory sync group count",
+        values: {
+          groupCount,
+          groupLabel: groupCount !== 1 ? "groups" : "group"
+        }
+      }
+    ),
+    lastSyncString && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: " \u2219 " }),
+      /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "Last sync {lastSync}",
+          id: "UUqjnE",
+          description: "Last sync timestamp for directory",
+          values: { lastSync: lastSyncString }
+        }
+      )
+    ] })
+  ] }) : null;
+  return /* @__PURE__ */ jsx(CardList.Root, { ...getWidgetRootDomProps("resolved", domProps), children: /* @__PURE__ */ jsxs(DirectorySyncContext.Provider, { value: { state, type }, children: [
+    /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsx(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: !type ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "You haven't set up a directory yet.",
+          id: "+ywYVl",
+          description: "Empty state message when no directory is configured"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(AdminPortalOpenButton, { href: link ?? null })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DirectoryProviderInfo, { type, subtitle: countsSubtitle }),
+      /* @__PURE__ */ jsxs(Flex, { gap: "5", align: "center", children: [
+        statusBadge,
+        spinnerMessage && /* @__PURE__ */ jsx(SpinnerMessage, { children: spinnerMessage }),
+        showButton && /* @__PURE__ */ jsx(AdminPortalOpenButton, { href: link ?? null })
+      ] })
+    ] }) }) }),
+    errorMessage && /* @__PURE__ */ jsx(CardList.Item, { children: /* @__PURE__ */ jsxs(Flex, { align: "start", gap: "2", children: [
+      /* @__PURE__ */ jsx(Box, { asChild: true, mt: "2px", flexShrink: "0", children: /* @__PURE__ */ jsx(InfoCircledIcon, { color: "var(--gray-11)" }) }),
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: errorMessage })
+    ] }) })
+  ] }) });
+};
+function AdminPortalOpenButton({
+  href,
+  children
+}) {
+  const { state, type } = useDirectorySyncContext();
+  const label = (() => {
+    switch (state) {
+      case DirectoryState.unlinked:
+        return type ? "Continue setup" : "Set up directory";
+      case DirectoryState.validating:
+        return "Manage";
+      default:
+        return "Manage";
+    }
+  })();
+  if (href) {
+    return /* @__PURE__ */ jsx(Button, { variant: "secondary", asChild: true, children: /* @__PURE__ */ jsxs("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
+      children ?? label,
+      " ",
+      /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(Button, { variant: "secondary", disabled: true, children: [
+    children ?? label,
+    " ",
+    /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
+  ] });
+}
+const DirectorySyncLoading = (props) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "2", children: [
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "You haven't set up a directory yet." }) }),
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", children: [
+      "Set up directory ",
+      /* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": true })
+    ] }) })
+  ] }) });
+};
+const DirectorySyncError = ({
+  error,
+  ...domProps
+}) => {
+  return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("error", domProps), children: /* @__PURE__ */ jsx(GenericError, { error }) });
+};
+function getWidgetRootDomProps(state, domProps) {
+  return getDomProps({
+    ...domProps,
+    isWidgetRoot: true,
+    widgetId: "directory-sync",
+    widgetState: state
+  });
+}
+function getRelativeTimeString(currentDate, lastSync) {
+  if (!currentDate || !lastSync) {
+    return null;
+  }
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  const diff = lastSync.getTime() - currentDate.getTime();
+  const diffSeconds = Math.round(diff / 1e3);
+  const diffMinutes = Math.round(diffSeconds / 60);
+  const diffHours = Math.round(diffMinutes / 60);
+  const diffDays = Math.round(diffHours / 24);
+  const diffMonths = Math.round(diffDays / 30);
+  const diffYears = Math.round(diffMonths / 12);
+  if (Math.abs(diffSeconds) < 60) {
+    return "now";
+  }
+  if (Math.abs(diffMinutes) < 60) {
+    return rtf.format(diffMinutes, "minute");
+  }
+  if (Math.abs(diffHours) < 24) {
+    return rtf.format(diffHours, "hour");
+  }
+  if (Math.abs(diffDays) < 30) {
+    return rtf.format(diffDays, "day");
+  }
+  if (Math.abs(diffMonths) < 12) {
+    return rtf.format(diffMonths, "month");
+  }
+  return rtf.format(diffYears, "year");
+}
+export {
+  DirectorySync,
+  DirectorySyncError,
+  DirectorySyncLoading
+};
+//# sourceMappingURL=directory-sync.js.map

package/dist/esm/lib/directory-sync.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../src/lib/directory-sync.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Box, Card, Flex, Spinner, Text } from \"@radix-ui/themes\";\nimport { ExternalLinkIcon, InfoCircledIcon } from \"@radix-ui/react-icons\";\nimport { Button, Skeleton } from \"./elements.js\";\nimport { GenericError } from \"./generic-error.js\";\nimport * as CardList from \"./card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { ProviderIcon } from \"./provider-icon.js\";\nimport {\n getDirectoryTypeIcon,\n getDirectoryTypeName,\n} from \"./identity-providers.js\";\nimport { Status } from \"./status.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport {\n getDomProps,\n type WidgetRootState,\n type WidgetRootDomProps,\n} from \"./utils.js\";\nimport {\n DirectoryMetadata,\n DirectoryState,\n type DirectoryType,\n} from \"../api/endpoint.js\";\n\ninterface BaseDirectorySyncProps {\n type?: DirectoryType;\n metadata?: DirectoryMetadata;\n lastSyncAt?: string | null;\n link?: string | null;\n errorMessage?: never;\n userCount?: never;\n groupCount?: never;\n currentDate?: never;\n state: DirectoryState;\n}\n\ninterface NotConfiguredProps extends BaseDirectorySyncProps {\n state: (typeof DirectoryState)[\"unlinked\"];\n}\n\ninterface SetupInProgressProps extends Omit<BaseDirectorySyncProps, \"type\"> {\n state: (typeof DirectoryState)[\"validating\"];\n type: DirectoryType;\n}\n\ninterface ErrorBeforeConfigProps extends Omit<\n BaseDirectorySyncProps,\n \"type\" | \"errorMessage\"\n> {\n state: DirectoryState;\n type: DirectoryType;\n errorMessage: React.ReactNode;\n}\n\ninterface ValidatingProps extends Omit<BaseDirectorySyncProps, \"type\"> {\n state: (typeof DirectoryState)[\"validating\"];\n type: DirectoryType;\n}\n\ninterface ActiveProps extends Omit<\n BaseDirectorySyncProps,\n \"type\" | \"lastSyncAt\" | \"currentDate\" | \"errorMessage\"\n> {\n state: (typeof DirectoryState)[\"linked\"];\n type: DirectoryType;\n lastSyncAt: string | null;\n currentDate?: Date | null;\n errorMessage?: React.ReactNode;\n}\n\ninterface InvalidCredentialsProps extends Omit<\n BaseDirectorySyncProps,\n \"type\" | \"errorMessage\"\n> {\n state: (typeof DirectoryState)[\"invalid_credentials\"];\n type: DirectoryType;\n errorMessage: React.ReactNode;\n}\n\ninterface DeletingProps extends Omit<BaseDirectorySyncProps, \"type\"> {\n state: (typeof DirectoryState)[\"deleting\"];\n type: DirectoryType;\n}\n\ntype DirectorySyncStatusProps =\n | NotConfiguredProps\n | SetupInProgressProps\n | ErrorBeforeConfigProps\n | ValidatingProps\n | ActiveProps\n | InvalidCredentialsProps\n | DeletingProps;\n\ntype DirectorySyncProps = WidgetRootDomProps & DirectorySyncStatusProps;\n\ninterface DirectorySyncContextValue {\n state: DirectorySyncStatusProps[\"state\"];\n type?: DirectoryType;\n}\n\nconst DirectorySyncContext =\n React.createContext<DirectorySyncContextValue | null>(null);\nDirectorySyncContext.displayName = \"DirectorySyncContext\";\n\nfunction useDirectorySyncContext() {\n const context = React.useContext(DirectorySyncContext);\n if (!context) {\n throw new Error(\n \"useDirectorySyncContext must be used within a DirectorySyncContext provider\",\n );\n }\n return context;\n}\n\nfunction DirectoryProviderInfo({\n type,\n subtitle,\n}: {\n type: DirectoryType;\n subtitle?: React.ReactNode;\n}) {\n return (\n <Flex gap=\"4\" align=\"center\">\n <IconPanel color=\"panel\">\n <ProviderIcon\n provider={getDirectoryTypeIcon(type) ?? \"workos\"}\n size=\"2\"\n />\n </IconPanel>\n {subtitle ? (\n <Flex direction=\"column\">\n <Text size=\"2\" weight=\"bold\">\n {getDirectoryTypeName(type)}\n </Text>\n {subtitle}\n </Flex>\n ) : (\n <Text size=\"2\" weight=\"bold\">\n {getDirectoryTypeName(type)}\n </Text>\n )}\n </Flex>\n );\n}\n\nfunction SpinnerMessage({ children }: { children: React.ReactNode }) {\n return (\n <Flex gap=\"2\" align=\"center\">\n <Spinner />\n <Text size=\"2\" color=\"gray\">\n {children}\n </Text>\n </Flex>\n );\n}\n\nfunction getStatusBadge(state: DirectoryState) {\n switch (state) {\n case DirectoryState.requires_type:\n case DirectoryState.invalid_credentials:\n return (\n <Status state=\"error\">\n <Translation\n defaultMessage=\"Requires action\"\n id=\"uuuXIF\"\n description=\"Status badge when directory requires user action\"\n />\n </Status>\n );\n case DirectoryState.linked:\n return (\n <Status state=\"success\">\n <Translation\n defaultMessage=\"Connected\"\n id=\"H/dAHq\"\n description=\"Status badge when directory is active\"\n />\n </Status>\n );\n default:\n return null;\n }\n}\n\nfunction getSpinnerMessage(\n state: DirectoryState,\n hasType: boolean,\n): string | null {\n if (state === DirectoryState.unlinked && hasType)\n return \"Setup in progress...\";\n if (state === DirectoryState.validating)\n return \"Waiting for users and groups...\";\n if (state === DirectoryState.deleting) return \"Deleting directory...\";\n return null;\n}\n\nconst DirectorySync: React.FC<DirectorySyncProps> = ({\n state,\n className,\n ...rest\n}) => {\n const type =\n \"type\" in rest ? (rest as { type: DirectoryType }).type : undefined;\n const errorMessage =\n \"errorMessage\" in rest\n ? (rest as { errorMessage: React.ReactNode }).errorMessage\n : undefined;\n const metadata =\n \"metadata\" in rest\n ? (rest as { metadata: DirectoryMetadata }).metadata\n : undefined;\n const link =\n \"link\" in rest ? (rest as { link: string | null }).link : undefined;\n const userCount = metadata?.users.active ?? 0;\n const groupCount = metadata?.groups ?? 0;\n const lastSyncAt = rest.lastSyncAt ? new Date(rest.lastSyncAt) : null;\n\n const currentDate =\n \"currentDate\" in rest && rest.currentDate instanceof Date\n ? rest.currentDate\n : undefined;\n\n const lastSyncString = lastSyncAt\n ? getRelativeTimeString(currentDate ?? new Date(), lastSyncAt)\n : null;\n\n const showCounts =\n state === DirectoryState.linked ||\n state === DirectoryState.invalid_credentials ||\n state === DirectoryState.deleting;\n const statusBadge = getStatusBadge(state);\n const spinnerMessage = getSpinnerMessage(state, !!type);\n const showButton = state !== DirectoryState.deleting;\n const domProps: WidgetRootDomProps = { className };\n\n const countsSubtitle = showCounts ? (\n <Text size=\"2\" color=\"gray\">\n <Translation\n defaultMessage=\"{userCount} {userLabel}\"\n id=\"aZxx55\"\n description=\"Directory sync user and group counts\"\n values={{\n userCount,\n userLabel: userCount !== 1 ? \"users\" : \"user\",\n }}\n />\n {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n <span aria-hidden> ∙ </span>\n <Translation\n defaultMessage=\"{groupCount} {groupLabel}\"\n id=\"SgiDio\"\n description=\"Directory sync group count\"\n values={{\n groupCount,\n groupLabel: groupCount !== 1 ? \"groups\" : \"group\",\n }}\n />\n {lastSyncString && (\n <>\n {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n <span aria-hidden> ∙ </span>\n <Translation\n defaultMessage=\"Last sync {lastSync}\"\n id=\"UUqjnE\"\n description=\"Last sync timestamp for directory\"\n values={{ lastSync: lastSyncString }}\n />\n </>\n )}\n </Text>\n ) : null;\n\n return (\n <CardList.Root {...getWidgetRootDomProps(\"resolved\", domProps)}>\n <DirectorySyncContext.Provider value={{ state, type }}>\n <CardList.Item>\n <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n {!type ? (\n <>\n <Text size=\"2\" color=\"gray\">\n <Translation\n defaultMessage=\"You haven't set up a directory yet.\"\n id=\"+ywYVl\"\n description=\"Empty state message when no directory is configured\"\n />\n </Text>\n <AdminPortalOpenButton href={link ?? null} />\n </>\n ) : (\n <>\n <DirectoryProviderInfo type={type} subtitle={countsSubtitle} />\n <Flex gap=\"5\" align=\"center\">\n {statusBadge}\n {spinnerMessage && (\n <SpinnerMessage>{spinnerMessage}</SpinnerMessage>\n )}\n {showButton && <AdminPortalOpenButton href={link ?? null} />}\n </Flex>\n </>\n )}\n </Flex>\n </CardList.Item>\n\n {errorMessage && (\n <CardList.Item>\n <Flex align=\"start\" gap=\"2\">\n <Box asChild mt=\"2px\" flexShrink=\"0\">\n <InfoCircledIcon color=\"var(--gray-11)\" />\n </Box>\n <Text size=\"2\" color=\"gray\">\n {errorMessage}\n </Text>\n </Flex>\n </CardList.Item>\n )}\n </DirectorySyncContext.Provider>\n </CardList.Root>\n );\n};\n\nfunction AdminPortalOpenButton({\n href,\n children,\n}: {\n href: string | null;\n children?: React.ReactNode;\n}) {\n const { state, type } = useDirectorySyncContext();\n\n const label = (() => {\n switch (state) {\n case DirectoryState.unlinked:\n return type ? \"Continue setup\" : \"Set up directory\";\n case DirectoryState.validating:\n return \"Manage\";\n default:\n return \"Manage\";\n }\n })();\n\n if (href) {\n return (\n <Button variant=\"secondary\" asChild>\n <a href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n {children ?? label} <ExternalLinkIcon aria-hidden />\n </a>\n </Button>\n );\n }\n\n return (\n <Button variant=\"secondary\" disabled>\n {children ?? label} <ExternalLinkIcon aria-hidden />\n </Button>\n );\n}\n\ninterface DirectorySyncLoadingProps extends WidgetRootDomProps {}\n\nconst DirectorySyncLoading: React.FC<DirectorySyncLoadingProps> = (props) => {\n return (\n <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"2\">\n <Skeleton>\n {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n <Text size=\"2\" color=\"gray\">\n You haven't set up a directory yet.\n </Text>\n </Skeleton>\n <Skeleton>\n {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n <Button variant=\"secondary\">\n Set up directory <ExternalLinkIcon aria-hidden />\n </Button>\n </Skeleton>\n </Flex>\n </Card>\n );\n};\n\ninterface DirectorySyncErrorProps extends WidgetRootDomProps {\n error: unknown;\n}\n\nconst DirectorySyncError: React.FC<DirectorySyncErrorProps> = ({\n error,\n ...domProps\n}) => {\n return (\n <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n <GenericError error={error} />\n </Card>\n );\n};\n\nfunction getWidgetRootDomProps(\n state: WidgetRootState,\n domProps: WidgetRootDomProps,\n) {\n return getDomProps({\n ...domProps,\n isWidgetRoot: true,\n widgetId: \"directory-sync\",\n widgetState: state,\n });\n}\n\nfunction getRelativeTimeString(\n currentDate: Date | null,\n lastSync: Date | null,\n) {\n if (!currentDate || !lastSync) {\n return null;\n }\n\n const rtf = new Intl.RelativeTimeFormat(\"en\", { numeric: \"auto\" });\n const diff = lastSync.getTime() - currentDate.getTime();\n\n const diffSeconds = Math.round(diff / 1000);\n const diffMinutes = Math.round(diffSeconds / 60);\n const diffHours = Math.round(diffMinutes / 60);\n const diffDays = Math.round(diffHours / 24);\n const diffMonths = Math.round(diffDays / 30);\n const diffYears = Math.round(diffMonths / 12);\n\n if (Math.abs(diffSeconds) < 60) {\n return \"now\";\n }\n\n if (Math.abs(diffMinutes) < 60) {\n return rtf.format(diffMinutes, \"minute\");\n }\n\n if (Math.abs(diffHours) < 24) {\n return rtf.format(diffHours, \"hour\");\n }\n\n if (Math.abs(diffDays) < 30) {\n return rtf.format(diffDays, \"day\");\n }\n\n if (Math.abs(diffMonths) < 12) {\n return rtf.format(diffMonths, \"month\");\n }\n\n return rtf.format(diffYears, \"year\");\n}\n\nexport type {\n DirectorySyncProps,\n DirectorySyncLoadingProps,\n DirectorySyncErrorProps,\n DirectorySyncStatusProps,\n};\nexport { DirectorySync, DirectorySyncLoading, DirectorySyncError };\n"],"mappings":"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","names":[]}

package/dist/esm/lib/edit-user-profile-dialog.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { Callout, Flex, Text, VisuallyHidden } from "@radix-ui/themes";
 import { getMeQueryKey, useUpdateMe } from "../api/endpoint.js";
 import { useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
-import * as Form from "@radix-ui/react-form";
+import { Form } from "radix-ui";
 import { Dialog, Label, Button, TextField } from "./elements.js";
 import { SaveButton } from "./save-button.js";
 import { Translation } from "./i18n/translation.js";

package/dist/esm/lib/edit-user-profile-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/lib/edit-user-profile-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { getMeQueryKey, Me, useUpdateMe } from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport * as Form from \"@radix-ui/react-form\";\nimport { Dialog, Label, Button, TextField } from \"./elements.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface EditUserProfileDialogProps extends Dialog.RootProps {\n user: Me;\n children?: ReactNode;\n}\n\nexport function EditUserProfileDialog({\n children,\n user,\n ...props\n}: EditUserProfileDialogProps) {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n <Dialog.Root\n {...props}\n open={props.open ?? open}\n onOpenChange={props.onOpenChange ?? setOpen}\n >\n <Dialog.Trigger>{children}</Dialog.Trigger>\n\n <Dialog.Content maxWidth=\"480px\">\n <Content user={user} onClose={handleClose} />\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\ninterface ContentProps extends Pick<EditUserProfileDialogProps, \"user\"> {\n onClose: () => void;\n}\n\nfunction Content({ user, onClose }: ContentProps) {\n const translate = useTranslation();\n const client = useQueryClient();\n const updateMe = useUpdateMe({\n mutation: {\n onSettled: () => {\n client.invalidateQueries({ queryKey: getMeQueryKey() });\n },\n onSuccess: (newProfile) => {\n client.setQueryData(getMeQueryKey(), {\n ...user,\n firstName: newProfile.firstName \|\| user.firstName,\n lastName: newProfile.lastName \|\| user.lastName,\n });\n },\n },\n });\n\n return (\n <>\n <Dialog.Title mb=\"5\">\n <Translation\n defaultMessage=\"Edit name\"\n id=\"pcK9ly\"\n description=\"Dialog title for editing user name\"\n />\n </Dialog.Title>\n <VisuallyHidden>\n <Dialog.Description>\n <Translation\n defaultMessage=\"Edit the details of {email}\"\n id=\"SEsXx0\"\n description=\"Dialog description for editing user details\"\n values={{ email: <Text weight=\"bold\">{user.email}</Text> }}\n />\n </Dialog.Description>\n </VisuallyHidden>\n\n {updateMe.error ? (\n <Callout.Root color=\"red\" my=\"-2\">\n <Callout.Text>{getMutationErrorMessage(updateMe.error)}</Callout.Text>\n </Callout.Root>\n ) : null}\n\n <Form.Root\n onSubmit={async (event) => {\n event.preventDefault();\n const formData = new FormData(event.currentTarget);\n const firstName = formData.get(\"firstName\")?.toString();\n const lastName = formData.get(\"lastName\")?.toString();\n updateMe.mutate({\n data: {\n firstName: firstName ?? undefined,\n lastName: lastName ?? undefined,\n },\n });\n }}\n >\n <Flex my=\"5\" direction=\"column\" gap=\"4\">\n <Form.Field name=\"firstName\" asChild>\n <Flex direction=\"column\" gap=\"1\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"First name\"\n id=\"DAYdcg\"\n description=\"Label for first name field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <TextField\n data-1p-ignore\n autoComplete=\"given-name\"\n defaultValue={user.firstName ?? \"\"}\n placeholder={translate({\n defaultMessage: \"Your first name\",\n id: \"gUTpgG\",\n description: \"Placeholder for first name field\",\n })}\n disabled={updateMe.isPending \|\| updateMe.isSuccess}\n />\n </Form.Control>\n </Flex>\n </Form.Field>\n\n <Form.Field name=\"lastName\" asChild>\n <Flex direction=\"column\" gap=\"1\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Last name\"\n id=\"IwcAMv\"\n description=\"Label for last name field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <TextField\n data-1p-ignore\n autoComplete=\"family-name\"\n defaultValue={user.lastName ?? \"\"}\n placeholder={translate({\n defaultMessage: \"Your last name\",\n id: \"Gy8eW0\",\n description: \"Placeholder for last name field\",\n })}\n disabled={updateMe.isPending \|\| updateMe.isSuccess}\n />\n </Form.Control>\n </Flex>\n </Form.Field>\n </Flex>\n\n <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button\n variant=\"secondary\"\n disabled={updateMe.isPending \|\| updateMe.isSuccess}\n >\n <Translation\n defaultMessage=\"Cancel\"\n id=\"hHNj31\"\n description=\"Cancel button text\"\n />\n </Button>\n </Dialog.Close>\n <SaveButton\n type=\"submit\"\n loading={updateMe.isPending}\n done={updateMe.isSuccess}\n onDone={onClose}\n >\n <Translation\n defaultMessage=\"Save\"\n id=\"RT8KNi\"\n description=\"Save button text\"\n />\n </SaveButton>\n </Flex>\n\n {/* mirror errors in a live region */}\n <VisuallyHidden asChild>\n <section aria-live=\"polite\">\n {getMutationErrorMessage(updateMe.error)}\n </section>\n </VisuallyHidden>\n </Form.Root>\n </>\n );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n if (error instanceof Error) {\n return error.message;\n }\n\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof error.message === \"string\"\n ) {\n return error.message;\n }\n\n // TODO Handle server errors\n return \"Something went wrong. Please try again.\";\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../../src/lib/edit-user-profile-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { Callout, Flex, Text, VisuallyHidden } from \"@radix-ui/themes\";\nimport { getMeQueryKey, Me, useUpdateMe } from \"../api/endpoint.js\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport { type ReactNode } from \"react\";\nimport { Form } from \"radix-ui\";\nimport { Dialog, Label, Button, TextField } from \"./elements.js\";\nimport { SaveButton } from \"./save-button.js\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useTranslation } from \"./i18n/use-translation.js\";\n\ninterface EditUserProfileDialogProps extends Dialog.RootProps {\n user: Me;\n children?: ReactNode;\n}\n\nexport function EditUserProfileDialog({\n children,\n user,\n ...props\n}: EditUserProfileDialogProps) {\n const [open, setOpen] = React.useState(false);\n\n const handleClose = React.useCallback(() => {\n setOpen(false);\n }, []);\n\n return (\n <Dialog.Root\n {...props}\n open={props.open ?? open}\n onOpenChange={props.onOpenChange ?? setOpen}\n >\n <Dialog.Trigger>{children}</Dialog.Trigger>\n\n <Dialog.Content maxWidth=\"480px\">\n <Content user={user} onClose={handleClose} />\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\ninterface ContentProps extends Pick<EditUserProfileDialogProps, \"user\"> {\n onClose: () => void;\n}\n\nfunction Content({ user, onClose }: ContentProps) {\n const translate = useTranslation();\n const client = useQueryClient();\n const updateMe = useUpdateMe({\n mutation: {\n onSettled: () => {\n client.invalidateQueries({ queryKey: getMeQueryKey() });\n },\n onSuccess: (newProfile) => {\n client.setQueryData(getMeQueryKey(), {\n ...user,\n firstName: newProfile.firstName \|\| user.firstName,\n lastName: newProfile.lastName \|\| user.lastName,\n });\n },\n },\n });\n\n return (\n <>\n <Dialog.Title mb=\"5\">\n <Translation\n defaultMessage=\"Edit name\"\n id=\"pcK9ly\"\n description=\"Dialog title for editing user name\"\n />\n </Dialog.Title>\n <VisuallyHidden>\n <Dialog.Description>\n <Translation\n defaultMessage=\"Edit the details of {email}\"\n id=\"SEsXx0\"\n description=\"Dialog description for editing user details\"\n values={{ email: <Text weight=\"bold\">{user.email}</Text> }}\n />\n </Dialog.Description>\n </VisuallyHidden>\n\n {updateMe.error ? (\n <Callout.Root color=\"red\" my=\"-2\">\n <Callout.Text>{getMutationErrorMessage(updateMe.error)}</Callout.Text>\n </Callout.Root>\n ) : null}\n\n <Form.Root\n onSubmit={async (event) => {\n event.preventDefault();\n const formData = new FormData(event.currentTarget);\n const firstName = formData.get(\"firstName\")?.toString();\n const lastName = formData.get(\"lastName\")?.toString();\n updateMe.mutate({\n data: {\n firstName: firstName ?? undefined,\n lastName: lastName ?? undefined,\n },\n });\n }}\n >\n <Flex my=\"5\" direction=\"column\" gap=\"4\">\n <Form.Field name=\"firstName\" asChild>\n <Flex direction=\"column\" gap=\"1\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"First name\"\n id=\"DAYdcg\"\n description=\"Label for first name field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <TextField\n data-1p-ignore\n autoComplete=\"given-name\"\n defaultValue={user.firstName ?? \"\"}\n placeholder={translate({\n defaultMessage: \"Your first name\",\n id: \"gUTpgG\",\n description: \"Placeholder for first name field\",\n })}\n disabled={updateMe.isPending \|\| updateMe.isSuccess}\n />\n </Form.Control>\n </Flex>\n </Form.Field>\n\n <Form.Field name=\"lastName\" asChild>\n <Flex direction=\"column\" gap=\"1\">\n <Form.Label asChild>\n <Label>\n <Translation\n defaultMessage=\"Last name\"\n id=\"IwcAMv\"\n description=\"Label for last name field\"\n />\n </Label>\n </Form.Label>\n <Form.Control asChild>\n <TextField\n data-1p-ignore\n autoComplete=\"family-name\"\n defaultValue={user.lastName ?? \"\"}\n placeholder={translate({\n defaultMessage: \"Your last name\",\n id: \"Gy8eW0\",\n description: \"Placeholder for last name field\",\n })}\n disabled={updateMe.isPending \|\| updateMe.isSuccess}\n />\n </Form.Control>\n </Flex>\n </Form.Field>\n </Flex>\n\n <Flex mt=\"5\" gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button\n variant=\"secondary\"\n disabled={updateMe.isPending \|\| updateMe.isSuccess}\n >\n <Translation\n defaultMessage=\"Cancel\"\n id=\"hHNj31\"\n description=\"Cancel button text\"\n />\n </Button>\n </Dialog.Close>\n <SaveButton\n type=\"submit\"\n loading={updateMe.isPending}\n done={updateMe.isSuccess}\n onDone={onClose}\n >\n <Translation\n defaultMessage=\"Save\"\n id=\"RT8KNi\"\n description=\"Save button text\"\n />\n </SaveButton>\n </Flex>\n\n {/* mirror errors in a live region */}\n <VisuallyHidden asChild>\n <section aria-live=\"polite\">\n {getMutationErrorMessage(updateMe.error)}\n </section>\n </VisuallyHidden>\n </Form.Root>\n </>\n );\n}\n\nfunction getMutationErrorMessage(error: unknown) {\n if (error instanceof Error) {\n return error.message;\n }\n\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof error.message === \"string\"\n ) {\n return error.message;\n }\n\n // TODO Handle server errors\n return \"Something went wrong. Please try again.\";\n}\n\n// Note: Error messages in getMutationErrorMessage are kept as plain strings\n// since they are displayed dynamically\n"],"mappings":"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","names":[]}

package/dist/esm/lib/elements/utils.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { useLayoutEffect } from "../use-layout-effect.js";
+import { useComposedRefs, useLayoutEffect } from "radix-ui/internal";
 function useDialogOverlayHack(forwardedRef, { className, selector }) {
   const [node, setNode] = React.useState(null);
   const ref = useComposedRefs(forwardedRef, setNode);

package/dist/esm/lib/elements/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/lib/elements/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useComposedRefs } from \"@radix-ui/~~react-compose-refs~~\";\~~nimport { useLayoutEffect } from \"../use-layout-effect.js\";\~~n\n/*\n HACK: Radix themes does not expose the dialog overlay, but we want consumer\n * to be able to style it with a classname. This will add a classname to the\n * overlay when the dialog content is mounted.\n */\nexport function useDialogOverlayHack(\n forwardedRef: React.Ref<HTMLDivElement \| null>,\n { className, selector }: { className: string; selector: string },\n): { ref: React.Ref<HTMLDivElement \| null> } {\n const [node, setNode] = React.useState<HTMLDivElement \| null>(null);\n const ref = useComposedRefs(forwardedRef, setNode as any);\n useLayoutEffect(() => {\n if (!node) {\n return;\n }\n const document = node.ownerDocument;\n const overlay = document.querySelector<HTMLDivElement>(selector);\n overlay?.classList.add(className);\n }, [node, className, selector]);\n\n return { ref };\n}\n"],"mappings":"AAAA,YAAY,WAAW;AACvB,SAAS,~~uBAAuB;AAChC~~,~~SAAS,~~uBAAuB;~~AAOzB~~,SAAS,qBACd,cACA,EAAE,WAAW,SAAS,GACqB;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAgC,IAAI;AAClE,QAAM,MAAM,gBAAgB,cAAc,OAAc;AACxD,kBAAgB,MAAM;AACpB,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AACA,UAAM,WAAW,KAAK;AACtB,UAAM,UAAU,SAAS,cAA8B,QAAQ;AAC/D,aAAS,UAAU,IAAI,SAAS;AAAA,EAClC,GAAG,CAAC,MAAM,WAAW,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI;AACf;","names":[]}
1	+ {"version":3,"sources":["../../../../src/lib/elements/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useComposedRefs, useLayoutEffect } from \"radix-ui/internal\";\n\n/*\n HACK: Radix themes does not expose the dialog overlay, but we want consumer\n * to be able to style it with a classname. This will add a classname to the\n * overlay when the dialog content is mounted.\n */\nexport function useDialogOverlayHack(\n forwardedRef: React.Ref<HTMLDivElement \| null>,\n { className, selector }: { className: string; selector: string },\n): { ref: React.Ref<HTMLDivElement \| null> } {\n const [node, setNode] = React.useState<HTMLDivElement \| null>(null);\n const ref = useComposedRefs(forwardedRef, setNode as any);\n useLayoutEffect(() => {\n if (!node) {\n return;\n }\n const document = node.ownerDocument;\n const overlay = document.querySelector<HTMLDivElement>(selector);\n overlay?.classList.add(className);\n }, [node, className, selector]);\n\n return { ref };\n}\n"],"mappings":"AAAA,YAAY,WAAW;AACvB,SAAS,iBAAiB,uBAAuB;AAO1C,SAAS,qBACd,cACA,EAAE,WAAW,SAAS,GACqB;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAgC,IAAI;AAClE,QAAM,MAAM,gBAAgB,cAAc,OAAc;AACxD,kBAAgB,MAAM;AACpB,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AACA,UAAM,WAAW,KAAK;AACtB,UAAM,UAAU,SAAS,cAA8B,QAAQ;AAC/D,aAAS,UAAU,IAAI,SAAS;AAAA,EAClC,GAAG,CAAC,MAAM,WAAW,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI;AACf;","names":[]}

package/dist/esm/lib/elevated-access.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as Form from "@radix-ui/react-form";
+import { Form } from "radix-ui";
 import { Callout, Flex, Text } from "@radix-ui/themes";
 import { useMe, useSendVerification, useVerify } from "../api/endpoint.js";
 import { useElevatedAccessToken } from "../api/api-provider.js";