61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}] 51:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dialog@^1.1.14"}] 52:["$","li","@radix-ui/react-dropdown-menu@^2.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-dropdown-menu","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-dropdown-menu@^2.1.1"}]]}]}] 53:["$","li","@radix-ui/react-label@^2.1.7",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-label","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-label@^2.1.7"}]]}]}] 54:["$","li","@radix-ui/react-slot@^1.2.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot@^1.2.3"}]]}]}] 55:["$","li","@radix-ui/react-switch@^1.1.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-switch","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-switch@^1.1.0"}]]}]}] 56:["$","li","@radix-ui/react-tooltip@^1.2.7",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-tooltip","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-tooltip@^1.2.7"}]]}]}] 57:["$","li","@tanstack/react-query@^5.56.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-query","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-query@^5.56.2"}]]}]}] 58:["$","li","@tanstack/react-table@^8.21.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table@^8.21.3"}]]}]}] 59:["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}] 5a:["$","li","clsx@^2.1.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx@^2.1.1"}]]}]}] 5b:["$","li","lucide-react@^1.16.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.16.0"}]]}]}] 5c:["$","li","react-hook-form@^7.57.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-hook-form@^7.57.0"}]]}]}] 5d:["$","li","sonner@^2.0.5",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/sonner","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"sonner@^2.0.5"}]]}]}] 5e:["$","li","tailwind-merge@^3.3.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge@^3.3.0"}]]}]}] 5f:["$","$L61",null,{"namespace":"@auth0","registryDependencies":[]}] 63:T260f,/** @module domain-table */ import { type Domain, getComponentStyles } from '@auth0/universal-components-core'; import { Plus } from 'lucide-react'; import * as React from 'react'; import { DomainConfigureProvidersModal } from '@/components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal'; import { DomainCreateModal } from '@/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal'; import { DomainDeleteModal } from '@/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal'; import { DomainTableActionsColumn } from '@/components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column'; import { DomainVerifyModal } from '@/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal'; import { DataTable, type Column } from '@/components/auth0/shared/data-table'; import { GateKeeper } from '@/components/auth0/shared/gate-keeper/gate-keeper'; import { Header } from '@/components/auth0/shared/header'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Badge } from '@/components/ui/badge'; import { useDomainTable } from '@/hooks/my-organization/use-domain-table'; import { useDomainTableLogic } from '@/hooks/my-organization/use-domain-table-logic'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { getStatusBadgeVariant } from '@/lib/utils/my-organization/domain-management/domain-management-utils'; import type { DomainTableProps, DomainTableViewProps, } from '@/types/my-organization/domain-management/domain-table-types'; /** * DomainTable container component. * @param props - Component props * @returns Domain table container element * @internal */ function DomainTable(props: DomainTableProps) { const { schema, hideHeader = false, readOnly = false, createAction, verifyAction, deleteAction, associateToProviderAction, deleteFromProviderAction, customMessages = {}, styling = { variables: { common: {}, light: {}, dark: {} }, classes: {} }, onOpenProvider, onCreateProvider, } = props; const { t } = useTranslator('domain_management', customMessages); const domainTableState = useDomainTable({ createAction, verifyAction, deleteAction, associateToProviderAction, deleteFromProviderAction, customMessages, }); const domainTableHandlers = useDomainTableLogic({ t, onCreateDomain: domainTableState.onCreateDomain, onVerifyDomain: domainTableState.onVerifyDomain, onDeleteDomain: domainTableState.onDeleteDomain, onAssociateToProvider: domainTableState.onAssociateToProvider, onDeleteFromProvider: domainTableState.onDeleteFromProvider, fetchProviders: domainTableState.fetchProviders, fetchDomains: domainTableState.fetchDomains, }); const domainTableLogic = { ...domainTableState, schema, styling, hideHeader, readOnly, onOpenProvider, onCreateProvider, }; return ( ); } /** * DomainTableView — Presentational component. * @param props - View props with logic and handlers * @returns Domain table view element * @internal */ function DomainTableView({ logic, handlers, }: DomainTableViewProps & { handlers: ReturnType }) { const { isDarkMode } = useTheme(); const { t } = useTranslator('domain_management', logic.customMessages); const { domains, providers, isCreating, isVerifying, isFetching, isLoadingProviders, isDeleting, schema, styling, hideHeader, readOnly = false, customMessages, createAction, onOpenProvider, onCreateProvider, } = logic; const { showCreateModal, showConfigureModal, showVerifyModal, showDeleteModal, verifyError, selectedDomain, setShowCreateModal, setShowConfigureModal, setShowDeleteModal, handleCreate, handleVerify, handleDelete, handleToggleSwitch, handleCloseVerifyModal, handleCreateClick, handleConfigureClick, handleVerifyClick, handleDeleteClick, } = handlers; const currentStyles = React.useMemo( () => getComponentStyles(styling, isDarkMode), [styling, isDarkMode], ); const columns: Column[] = React.useMemo( () => [ { type: 'text', accessorKey: 'domain', title: t('domain_table.table.columns.domain'), width: '35%', render: (domain) => (

{domain.domain}

), }, { type: 'text', accessorKey: 'status', title: t('domain_table.table.columns.status'), width: '25%', render: (domain) => ( {t(`shared.domain_statuses.${domain.status}`)} ), }, { type: 'actions', title: '', width: '20%', render: (domain) => ( ), }, ], [t, readOnly, customMessages, handleConfigureClick, handleVerifyClick, handleDeleteClick], ); return ( {!hideHeader && (

handleCreateClick(), icon: Plus, disabled: createAction?.disabled || readOnly || isFetching, }, ]} />

)} setShowCreateModal(false)} onCreate={handleCreate} customMessages={customMessages?.create} /> setShowConfigureModal(false)} onToggleSwitch={handleToggleSwitch} onOpenProvider={onOpenProvider} onCreateProvider={onCreateProvider} customMessages={customMessages?.configure} /> setShowDeleteModal(false)} onDelete={handleDelete} customMessages={customMessages?.delete} /> ); } /** * Domain management table. * * Displays organization domains with CRUD operations. Supports creating, * verifying, deleting domains, and associating them with identity providers. * * @param props - {@link DomainTableProps} * @param props.schema - Validation schema overrides * @param props.customMessages - Custom i18n message overrides * @param props.styling - CSS variables and class overrides * @param props.readOnly - Render in read-only mode * @param props.hideHeader - Hide the header section * @param props.createAction - Lifecycle hooks for create operation * @param props.verifyAction - Lifecycle hooks for verify operation * @param props.deleteAction - Lifecycle hooks for delete operation * @param props.associateToProviderAction - Lifecycle hooks for provider association * @param props.deleteFromProviderAction - Lifecycle hooks for provider removal * @param props.onOpenProvider - Callback when opening a provider * @param props.onCreateProvider - Callback when creating a provider * @returns Domain table component * * @see {@link DomainTableProps} for full props documentation * * @example * ```tsx * console.log('Created:', domain) }} * verifyAction={{ onAfter: (domain) => console.log('Verified:', domain) }} * deleteAction={{ onAfter: (domain) => console.log('Deleted:', domain) }} * /> * ``` */ export { DomainTable, DomainTableView }; 64:T14a2,/** * Domain configure providers modal. * @module domain-configure-providers-modal * @internal */ import type { IdentityProviderAssociatedWithDomain } from '@auth0/universal-components-core'; import React from 'react'; import { type Column, DataTable } from '@/components/auth0/shared/data-table'; import { Button } from '@/components/ui/button'; import { Modal } from '@/components/ui/modal'; import { Switch } from '@/components/ui/switch'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { DomainConfigureProvidersModalProps } from '@/types/my-organization/domain-management/domain-configure-types'; /** * Modal for configuring domain providers. * @param props - Component props. * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.domain - Domain object or domain name * @param props.providers - Array of SSO providers * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.isLoadingSwitch - The is loading switch * @param props.onClose - Callback fired when the component should close * @param props.onToggleSwitch - Callback fired when switch is toggled * @param props.onOpenProvider - Callback fired when opening a provider * @param props.onCreateProvider - Callback fired when creating a new provider * @returns JSX element */ export function DomainConfigureProvidersModal({ className, customMessages, domain, providers, isOpen, isLoading, isLoadingSwitch, onClose, onToggleSwitch, onOpenProvider, onCreateProvider, }: DomainConfigureProvidersModalProps) { const { t } = useTranslator('domain_management.domain_configure_providers.modal', customMessages); const handleToggleSwitch = React.useCallback( (provider: IdentityProviderAssociatedWithDomain, newCheckedValue: boolean) => { onToggleSwitch(domain!, provider, newCheckedValue); // Switch component is not rendered if domain is null }, [domain, onToggleSwitch], ); const columns: Column[] = React.useMemo( () => [ { type: 'text', accessorKey: 'display_name', title: t('table.columns.name'), width: '25%', render: (provider) => (

{provider.display_name}

), }, { type: 'text', accessorKey: 'strategy', title: t('table.columns.provider'), width: '40%', render: (provider) =>

{provider.strategy}

, }, { type: 'actions', title: '', width: '30%', render: (provider) => (

{onOpenProvider && ( )} handleToggleSwitch(provider, checked)} disabled={isLoadingSwitch} /> {provider.is_associated ? t('table.actions.disable_provider_tooltip') : t('table.actions.enable_provider_tooltip')}

), }, ], [t, onOpenProvider, isLoadingSwitch, handleToggleSwitch], ); return ( !open && onClose()} className="p-10" title={t('title', { domain: domain?.domain ?? '' })} content={ domain && (

{t('description', { domain: domain?.domain ?? '' })}

) } modalActions={{ showNext: false, previousAction: { label: t('actions.close_button_text'), onClick: onClose, }, }} /> ); } 65:T1085,/** * Domain creation modal. * @module domain-create-modal * @internal */ import { createDomainCreateSchema, type InternalDomainCreateFormValues, } from '@auth0/universal-components-core'; import { zodResolver } from '@hookform/resolvers/zod'; import * as React from 'react'; import { useForm } from 'react-hook-form'; import { Form, FormControl, FormField, FormItem, FormMessage, FormLabel, } from '@/components/ui/form'; import { Modal } from '@/components/ui/modal'; import { TextField } from '@/components/ui/text-field'; import { useTranslator } from '@/hooks/shared/use-translator'; import { FORM_VALIDATION_MODE } from '@/lib/constants/form-constants'; import { cn } from '@/lib/utils'; import type { DomainCreateModalProps } from '@/types/my-organization/domain-management/domain-create-types'; /** * * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.schema - Zod validation schema * @param props.onClose - Callback fired when the component should close * @param props.onCreate - Callback fired when create action is triggered * @returns JSX element */ export function DomainCreateModal({ translatorKey = 'domain_management.domain_create.modal', className, customMessages, isOpen, isLoading, schema, onClose, onCreate, }: DomainCreateModalProps) { const { t } = useTranslator(translatorKey, customMessages); const domainCreateSchema = React.useMemo( () => createDomainCreateSchema(schema, t('field.error')), [schema, t], ); const form = useForm({ resolver: zodResolver(domainCreateSchema), defaultValues: { domain_url: '', }, mode: FORM_VALIDATION_MODE, }); const handleCreate = React.useCallback( async (values: InternalDomainCreateFormValues) => { if (!values.domain_url) return; await onCreate(values.domain_url); form.reset(); }, [form, onCreate], ); const handleClose = React.useCallback(() => { form.reset(); onClose(); }, [form, onClose]); const onSubmit = React.useCallback( (e: React.FormEvent) => { e.preventDefault(); form.handleSubmit(handleCreate)(); }, [form, handleCreate], ); return ( !open && handleClose()} className={cn('p-10', className)} title={t('title')} content={

} modalActions={{ isLoading, nextAction: { type: 'button', label: t('actions.create_button_text'), variant: 'primary', disabled: isLoading, onClick: (e) => { e.preventDefault(); form.handleSubmit(handleCreate)(); }, }, previousAction: { label: t('actions.cancel_button_text'), onClick: handleClose, }, }} /> ); } 66:T956,/** * Domain deletion confirmation modal. * @module domain-delete-modal * @internal */ import type { Domain } from '@auth0/universal-components-core'; import React from 'react'; import { Modal } from '@/components/ui/modal'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { DomainDeleteModalProps } from '@/types/my-organization/domain-management/domain-delete-types'; const getDescriptionKey = (domain: Domain | null) => { return domain?.status === 'pending' ? 'description.pending' : 'description.verified'; }; /** * * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.domain - Domain object or domain name * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.onClose - Callback fired when the component should close * @param props.onDelete - Callback fired when delete action is triggered * @returns JSX element */ export function DomainDeleteModal({ translatorKey = 'domain_management.domain_delete.modal', className, customMessages, domain, isOpen, isLoading, onClose, onDelete, }: DomainDeleteModalProps) { const { t } = useTranslator(translatorKey, customMessages); const handleDelete = React.useCallback(() => { if (domain) { onDelete(domain); } }, [onDelete, domain]); return ( !open && onClose()} className={cn('p-10', className)} title={t('title')} content={

{t(getDescriptionKey(domain), { domainName: domain?.domain })}

} modalActions={{ isLoading, nextAction: { type: 'button', label: t('actions.delete_button_text'), variant: 'destructive', disabled: isLoading, onClick: handleDelete, }, previousAction: { label: t('actions.cancel_button_text'), onClick: onClose, }, }} /> ); } 67:Te91,/** * Domain table row actions dropdown. * @module domain-table-actions-column * @internal */ import { MoreHorizontal, Trash2, PencilLine, Eye, RefreshCcw } from 'lucide-react'; import * as React from 'react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuPortal, } from '@/components/ui/dropdown-menu'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { DomainTableActionsColumnProps } from '@/types/my-organization/domain-management/domain-table-types'; /** * DomainTableActionsColumn Component * Handles the actions column for Domain table with dropdown menu * @param props - Component props. * @param props.customMessages - Custom translation messages to override defaults * @param props.readOnly - Whether the component is in read-only mode * @param props.domain - Domain object or domain name * @param props.onView - Callback fired when view action is triggered * @param props.onConfigure - Callback fired when configure action is triggered * @param props.onVerify - Callback fired when verify action is triggered * @param props.onDelete - Callback fired when delete action is triggered * @returns JSX element */ export function DomainTableActionsColumn({ customMessages = {}, readOnly = false, domain, onView, onConfigure, onVerify, onDelete, }: DomainTableActionsColumnProps) { const { t } = useTranslator('domain_management.domain_table', customMessages); const handleView = React.useCallback(() => { onConfigure(domain); }, [domain, onView]); const handleConfigure = React.useCallback(() => { onConfigure(domain); }, [domain, onConfigure]); const handleVerify = React.useCallback(() => { onVerify(domain); }, [domain, onVerify]); const handleDelete = React.useCallback(() => { onDelete(domain); }, [domain, onDelete]); return (

{domain.status === 'verified' && ( {t('table.actions.configure_button_text')} )} {domain.status === 'pending' && ( <> {t('table.actions.view_button_text')} {t('table.actions.verify_button_text')} )} {t('table.actions.delete_button_text')}

); } 68:T11ad,/** * Domain verification modal. * @module domain-verify-modal * @internal */ import { MessageSquare } from 'lucide-react'; import React from 'react'; import { CopyableTextField } from '@/components/auth0/shared/copyable-text-field'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { Modal } from '@/components/ui/modal'; import { Spinner } from '@/components/ui/spinner'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; import type { DomainVerifyModalProps } from '@/types/my-organization/domain-management/domain-verify-types'; /** * * @param props - Component props. * @param props.translatorKey - Translation namespace key * @param props.className - Optional CSS class name for styling * @param props.customMessages - Custom translation messages to override defaults * @param props.isOpen - Whether the modal/dialog is open * @param props.isLoading - Whether the component is in a loading state * @param props.domain - Domain object or domain name * @param props.error - Error message or error object to display * @param props.onClose - Callback fired when the component should close * @param props.onVerify - Callback fired when verify action is triggered * @param props.onDelete - Callback fired when delete action is triggered * @returns JSX element */ export function DomainVerifyModal({ translatorKey = 'domain_management.domain_verify.modal', className, customMessages, isOpen, isLoading, domain, error, onClose, onVerify, onDelete, }: DomainVerifyModalProps) { const { t } = useTranslator(translatorKey, customMessages); const handleVerify = React.useCallback(() => { if (domain) { onVerify(domain); } }, [onVerify, domain]); const handleDelete = React.useCallback(() => { if (domain) { onDelete(domain); } }, [onDelete, domain]); return ( !open && onClose()} className="p-10 break-all" title={t('title', { domainName: domain?.domain })} content={

{error && ( {error} )}

{t('txt_record_name.label')}

{t('txt_record_content.label')}

{t('verification_status.label')} {t('verification_status.pending')}

{t('verification_status.description')}

} modalActions={{ showNext: false, previousAction: { label: t('actions.done_button_text'), onClick: onClose, variant: 'primary', }, }} /> ); } 69:Taae,/** * Text field with copy-to-clipboard button. * @module copyable-text-field * @internal */ import { Copy } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { TextField, type TextFieldProps } from '@/components/ui/text-field'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { useTranslator } from '@/hooks/shared/use-translator'; import { cn } from '@/lib/utils'; export interface CopyableTextFieldProps extends TextFieldProps { onCopy?: () => void; copyButtonClassName?: string; tooltipSide?: 'top' | 'bottom' | 'left' | 'right'; tooltipAlign?: 'start' | 'center' | 'end'; showCopyButton?: boolean; } const CopyableTextField = React.forwardRef( ( { onCopy, copyButtonClassName, tooltipSide = 'top', tooltipAlign = 'end', readOnly = true, endAdornment, showCopyButton = true, ...props }, ref, ) => { const { t } = useTranslator('common'); const [tooltipText, setTooltipText] = React.useState(t('copy')); const [tooltipOpen, setTooltipOpen] = React.useState(false); const handleCopy = async () => { if (props.value) { await navigator.clipboard.writeText(String(props.value)); setTooltipText(t('copied')); setTooltipOpen(true); setTimeout(() => { setTooltipText(t('copy')); setTooltipOpen(false); }, 1000); onCopy?.(); } }; const copyButton = ( {tooltipText} ); return ( {endAdornment} {copyButton} ) : ( copyButton ) ) : ( endAdornment ) } /> ); }, ); CopyableTextField.displayName = 'CopyableTextField'; export { CopyableTextField }; 6a:T5272,/** * Data table with sorting and actions. * @module data-table * @internal */ import type { ActionButton as CoreActionButton } from '@auth0/universal-components-core'; import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, } from '@tanstack/react-table'; import type { SortingState, ColumnDef, RowSelectionState } from '@tanstack/react-table'; import { Copy } from 'lucide-react'; import React, { useState, useMemo } from 'react'; import { MiddleEllipsisText } from '@/components/auth0/shared/middle-ellipsis-text'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { InlineCode } from '@/components/ui/inline-code'; import { Spinner } from '@/components/ui/spinner'; import { Switch } from '@/components/ui/switch'; import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, } from '@/components/ui/table'; import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; interface ActionButton extends Omit { onClick: (event: React.MouseEvent) => void; } type AlignmentType = 'left' | 'center' | 'right'; export interface BaseColumn { title: string | React.ReactNode; accessorKey: keyof Item; width?: string; enableSorting?: boolean; headerAlign?: AlignmentType; } export interface TextColumn extends BaseColumn { type: 'text'; render?: (item: Item, value: unknown) => React.ReactNode; } export interface DateColumn extends BaseColumn { type: 'date'; format?: 'short' | 'medium' | 'long' | 'relative'; render?: (item: Item, value: Date | string | number) => React.ReactNode; } export interface SwitchColumn extends BaseColumn { type: 'switch'; onToggle?: (checked: boolean, item: Item) => void; } export interface ButtonColumn extends BaseColumn { type: 'button'; buttonText: string; variant?: 'primary' | 'destructive' | 'outline' | 'ghost' | 'link'; onClick: (item: Item) => void; } export interface CopyColumnLabels { copyTooltip?: string; copiedTooltip?: string; } export interface DataTableSelectionLabels { selectAll: string; selectRow: (index: number) => string; } export interface CopyColumn extends BaseColumn { type: 'copy'; } export interface BadgeColumn extends BaseColumn { type: 'badge'; variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success'; } export interface ActionsColumn extends Omit, 'accessorKey'> { type: 'actions'; accessorKey?: keyof Item; render: (item: Item) => React.ReactNode; } export interface CustomColumn extends BaseColumn { type: 'custom'; render: (item: Item, value: unknown) => React.ReactNode; } export type Column = | TextColumn | DateColumn | SwitchColumn | ButtonColumn | CopyColumn | BadgeColumn | ActionsColumn | CustomColumn; export interface EmptyStateProps { title: string; subtitle?: string; action?: ActionButton; } export interface DataTableSortConfig { key: string | null; direction: 'asc' | 'desc'; } export interface DataTableProps { data: Item[]; columns: Column[]; loading?: boolean; loader?: React.ReactNode; emptyState?: EmptyStateProps; onRowClick?: (rowData: Item) => void; className?: string; headerAlign?: AlignmentType; /** When provided, sorting is delegated to the parent (server-side). */ onSortChange?: (sortConfig: DataTableSortConfig) => void; /** Controlled sort state. Used with onSortChange for server-side sorting. */ sortConfig?: DataTableSortConfig; /** Enable row selection with checkboxes. */ selectable?: boolean; /** Controlled selected rows. */ selectedRows?: Item[]; /** Called when selection changes. */ onSelectedRowsChange?: (rows: Item[]) => void; /** Derive a stable string ID from a row for selection tracking. */ getRowId?: (row: Item) => string; /** Accessible labels for selection checkboxes. */ selectionLabels?: DataTableSelectionLabels; } const ALIGNMENT_CLASSES = { text: { left: 'text-left', center: 'text-center', right: 'text-right', }, flex: { left: 'justify-start', center: 'justify-center', right: 'justify-end', }, } as const; const isEmpty = (value: unknown): boolean => { return value === null || value === undefined || value === ''; }; const formatDate = (value: Date | string | number, format: string = 'medium'): string => { const date = new Date(value); if (isNaN(date.getTime())) return 'Invalid Date'; switch (format) { case 'short': return date.toLocaleDateString(); case 'long': return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }); case 'relative': { const now = new Date(); const diffTime = date.getTime() - now.getTime(); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); if (Math.abs(diffDays) === 0) return 'Today'; if (diffDays === 1) return 'Tomorrow'; if (diffDays === -1) return 'Yesterday'; if (diffDays > 0) return `In ${diffDays} days`; return `${Math.abs(diffDays)} days ago`; } case 'medium': default: return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric', }); } }; const DEFAULT_COPY_LABELS: Required = { copyTooltip: 'Copy to clipboard', copiedTooltip: 'Copied!', }; const DEFAULT_SELECTION_LABELS: DataTableSelectionLabels = { selectAll: 'Select all rows', selectRow: (index: number) => `Select row ${index + 1}`, }; /** * Copy button with clipboard functionality. * @param props - Component props. * @param props.value - Value to copy * @param props.labels - Tooltip labels * @returns JSX element */ function CopyButton({ value, labels = DEFAULT_COPY_LABELS, }: { value: unknown; labels?: CopyColumnLabels; }) { const [copied, setCopied] = useState(false); const [copyTooltipOpen, setCopyTooltipOpen] = useState(false); const stringValue = String(value); const handleCopy = async (e: React.MouseEvent) => { e.stopPropagation(); if (!value) return; try { await navigator.clipboard.writeText(stringValue); setCopied(true); setCopyTooltipOpen(true); setTimeout(() => { setCopied(false); setCopyTooltipOpen(false); }, 2000); } catch (error) { console.error('Failed to copy text:', error); } }; return (

{copied ? labels.copiedTooltip : labels.copyTooltip}

); } /** * Renders a text column cell. * @param item - Data item. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderTextColumn( item: Item, value: unknown, column: TextColumn, ): React.ReactNode { if (column.render) { return column.render(item, value); } return {String(value)}; } /** * Renders a date column cell. * @param item - Data item. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderDateColumn( item: Item, value: Date | string | number, column: DateColumn, ): React.ReactNode { if (column.render) { return column.render(item, value); } const formattedDate = formatDate(value, column.format); return ( {formattedDate} ); } /** * Renders a switch column cell. * @param item - Data item. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderSwitchColumn( item: Item, value: boolean, column: SwitchColumn, ): React.ReactNode { const handleToggle = (checked: boolean) => { column.onToggle?.(checked, item); }; return (

e.stopPropagation()}>

); } /** * Renders a button column cell. * @param item - Data item. * @param column - Column configuration. * @returns React node */ function renderButtonColumn(item: Item, column: ButtonColumn): React.ReactNode { const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); column.onClick(item); }; return ( ); } /** * Renders a badge column cell. * @param value - Cell value. * @param column - Column configuration. * @returns React node */ function renderBadgeColumn(value: unknown, column: BadgeColumn): React.ReactNode { return {String(value)}; } /** * Renders a copy column cell. * @param value - Cell value. * @returns React node */ function renderCopyColumn(value: unknown): React.ReactNode { return ; } /** * Empty state component for data table. * @param props - Component props. * @param props.title - Empty state title. * @param props.subtitle - Empty state subtitle. * @param props.action - Optional action button config. * @returns JSX element */ function EmptyState({ title, subtitle, action }: EmptyStateProps) { return (

{title}

{subtitle &&

{subtitle}

} {action && ( )}

); } /** * Generic data table component. * @param props - Component props. * @param props.data - Table data items. * @param props.columns - Column configurations. * @param props.loading - Loading state. * @param props.loader - Custom loader component. * @param props.emptyState - Empty state configuration. * @param props.onRowClick - Row click handler. * @param props.className - Additional CSS classes. * @param props.headerAlign - Default header alignment. * @returns JSX element */ export function DataTable({ data, columns, loading = false, loader, emptyState, onRowClick, className, headerAlign = 'left', onSortChange, sortConfig, selectable = false, selectedRows, onSelectedRowsChange, getRowId, selectionLabels, }: DataTableProps) { const isServerSideSort = !!onSortChange; const isControlledSelection = selectedRows !== undefined; const [internalSorting, setInternalSorting] = useState([]); const [internalRowSelection, setInternalRowSelection] = useState({}); // Convert controlled sortConfig to TanStack SortingState for header display const sorting: SortingState = useMemo(() => { if (isServerSideSort && sortConfig?.key) { return [{ id: sortConfig.key, desc: sortConfig.direction === 'desc' }]; } return internalSorting; }, [isServerSideSort, sortConfig, internalSorting]); const rowSelection = useMemo(() => { if (!selectable) return {}; if (isControlledSelection && selectedRows) { if (getRowId) { return Object.fromEntries(selectedRows.map((row) => [getRowId(row), true])); } return Object.fromEntries( data.reduce<[string, boolean][]>((acc, item, idx) => { if (selectedRows.includes(item)) acc.push([String(idx), true]); return acc; }, []), ); } return internalRowSelection; }, [selectable, isControlledSelection, selectedRows, getRowId, data, internalRowSelection]); const handleSortingChange = React.useCallback( (updater: SortingState | ((old: SortingState) => SortingState)) => { const newSorting = typeof updater === 'function' ? updater(sorting) : updater; if (isServerSideSort) { const sort = newSorting[0]; if (sort) { onSortChange({ key: sort.id, direction: sort.desc ? 'desc' : 'asc' }); } else { onSortChange({ key: null, direction: 'asc' }); } } else { setInternalSorting(newSorting); } }, [isServerSideSort, onSortChange, sorting], ); const handleRowSelectionChange = React.useCallback( (updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)) => { const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater; if (!isControlledSelection) setInternalRowSelection(newSelection); if (onSelectedRowsChange) { const items = getRowId ? data.filter((item) => newSelection[getRowId(item)]) : data.filter((_, idx) => newSelection[String(idx)]); onSelectedRowsChange(items); } }, [rowSelection, isControlledSelection, onSelectedRowsChange, getRowId, data], ); const selectionColumn = useMemo>( () => ({ id: '__selection__', enableSorting: false, size: 48, meta: { headerAlign: 'left' as AlignmentType, column: { type: 'actions', title: '', width: '48px', enableSorting: false, render: () => null, } as unknown as Column, }, header: ({ table: t }) => ( t.toggleAllPageRowsSelected(!!checked)} aria-label={selectionLabels?.selectAll ?? DEFAULT_SELECTION_LABELS.selectAll} onClick={(e: React.MouseEvent) => e.stopPropagation()} /> ), cell: ({ row }) => ( row.toggleSelected(!!checked)} aria-label={ selectionLabels?.selectRow(row.index) ?? DEFAULT_SELECTION_LABELS.selectRow(row.index) } onClick={(e: React.MouseEvent) => e.stopPropagation()} /> ), }), [selectionLabels], ); const tableColumns = useMemo[]>(() => { const dataCols: ColumnDef[] = columns.map((column, index) => { return { id: column.accessorKey ? String(column.accessorKey) : `column-${index}`, accessorKey: column.accessorKey as string, header: typeof column.title === 'string' ? column.title : () => column.title as React.ReactNode, size: column.width ? isNaN(Number(column.width)) ? undefined : Number(column.width) : undefined, enableSorting: column.enableSorting !== false && !!column.accessorKey, meta: { headerAlign: column.headerAlign || headerAlign || 'left', column: column, }, cell: ({ getValue, row }) => { const value = getValue(); const item = row.original; if (column.type === 'actions') { return

e.stopPropagation()}>{column.render(item)}

; } if (column.type === 'custom') { return <>{column.render(item, value)}; } if (column.type === 'switch') { return renderSwitchColumn(item, value as boolean, column); } if (column.type === 'button') { return renderButtonColumn(item, column); } if (isEmpty(value)) { return null; } switch (column.type) { case 'text': return renderTextColumn(item, value, column); case 'date': return renderDateColumn(item, value as Date | string | number, column); case 'copy': return renderCopyColumn(value); case 'badge': return renderBadgeColumn(value, column); default: return {String(value)}; } }, }; }); return selectable ? [selectionColumn, ...dataCols] : dataCols; }, [columns, headerAlign, selectable, selectionColumn]); const table = useReactTable({ data, columns: tableColumns, state: { sorting, ...(selectable && { rowSelection }), }, getRowId: getRowId, onSortingChange: handleSortingChange, ...(selectable && { onRowSelectionChange: handleRowSelectionChange }), enableRowSelection: selectable, getCoreRowModel: getCoreRowModel(), getSortedRowModel: isServerSideSort ? undefined : getSortedRowModel(), manualSorting: isServerSideSort, manualPagination: true, }); if (loading) { return (

{loader || }

); } return (

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => { const canSort = header.column.getCanSort(); const sortDirection = header.column.getIsSorted(); const meta = header.column.columnDef.meta as { headerAlign: AlignmentType; column: Column; }; return ( {flexRender(header.column.columnDef.header, header.getContext())} ); })} ))} {table.getRowModel().rows.length === 0 ? ( ) : ( table.getRowModel().rows.map((row) => ( onRowClick?.(row.original)} > {row.getVisibleCells().map((cell) => { const meta = cell.column.columnDef.meta as { column: Column; }; return ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ); })} )) )}

); } 6b:Tf3d,/** * Form action buttons component. * @module form-actions * @internal */ import type { ActionButton } from '@auth0/universal-components-core'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { cn } from '@/lib/utils'; export interface FormActionsProps { hasUnsavedChanges?: boolean; isLoading?: boolean; nextAction?: Partial>; previousAction?: Partial>; showPrevious?: boolean; showNext?: boolean; showUnsavedChanges?: boolean; align?: 'left' | 'right'; className?: string; unsavedChangesText?: string; } const DEFAULT_NEXT_ACTION: ActionButton = { type: 'submit', label: 'Save', variant: 'primary', onClick: () => {}, }; const DEFAULT_PREVIOUS_ACTION: ActionButton = { label: 'Cancel', variant: 'outline', onClick: () => {}, }; export const FormActions: React.FC = ({ hasUnsavedChanges = false, isLoading = false, nextAction, previousAction, className, showPrevious = true, showNext = true, showUnsavedChanges = true, align = 'right', unsavedChangesText = 'Unsaved changes', }) => { const nextButtonProps = React.useMemo( () => ({ ...DEFAULT_NEXT_ACTION, ...nextAction }), [nextAction], ); const previousButtonProps = React.useMemo( () => ({ ...DEFAULT_PREVIOUS_ACTION, ...previousAction }), [previousAction], ); const handleNextClick = React.useCallback( (e: React.MouseEvent) => { nextButtonProps.onClick(e.nativeEvent); }, [nextButtonProps.onClick], ); const handlePreviousClick = React.useCallback( (e: React.MouseEvent) => { previousButtonProps.onClick(e.nativeEvent); }, [previousButtonProps.onClick], ); const showUnsavedIndicator = showUnsavedChanges && hasUnsavedChanges; const isPreviousVisible = showUnsavedChanges ? showPrevious && hasUnsavedChanges : showPrevious; return (

{showUnsavedIndicator && ( {unsavedChangesText} )} {showPrevious && ( )} {showNext && ( )}

); }; 6c:T112a,/** * GateKeeper component for guarding content during loading, MFA step-up, and 5xx error states. * @module gate-keeper * @internal */ import { type ComponentStyling, getComponentStyles, getStatusCode, isMfaRequiredError, } from '@auth0/universal-components-core'; import { RefreshCcw } from 'lucide-react'; import React, { useCallback, useMemo, useState, useEffect } from 'react'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardTitle } from '@/components/ui/card'; import { Spinner } from '@/components/ui/spinner'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTheme } from '@/hooks/shared/use-theme'; import { useTranslator } from '@/hooks/shared/use-translator'; import { useGateKeeperContext } from '@/providers/gate-keeper-context'; interface GateKeeperProps { styling?: ComponentStyling>; isLoading?: boolean; children: React.ReactNode; } /** * Blocking error fallback with retry button. * Shown for 5xx errors and dismissed MFA errors. * * @param props - Component props. * @param props.onRetry - Retry handler. * @returns Error fallback element. * @internal */ function ErrorFallback({ onRetry, isMfa }: { onRetry: () => void; isMfa?: boolean }) { const { t } = useTranslator('gate_keeper'); const key = isMfa ? 'mfa_error' : 'fallback'; return ( {t(`${key}.title`)} {t(`${key}.description`)} {!isMfa && ( )} ); } /** * Guards children from rendering during loading/error states. MFA step-up overlays * children without unmounting them, preserving any in-progress form state. * - Loading → spinner (blocks children) * - MFA required error → MFA step-up dialog overlaid on children * - 5xx error or dismissed MFA → blocking error fallback with retry * - No error → children * * @param props - Component props. * @param props.styling - Styling configuration forwarded to the styled scope. * @param props.isLoading - Whether content is loading. * @param props.children - Child elements to render on success. * @returns GateKeeper element. */ export function GateKeeper({ styling, isLoading, children }: GateKeeperProps) { const { error, onRetry } = useGateKeeperContext(); const { coreClient } = useCoreClient(); const { isDarkMode } = useTheme(); const [isRetrying, setIsRetrying] = useState(false); const styles = useMemo(() => getComponentStyles(styling, isDarkMode), [styling, isDarkMode]); const handleRetry = useCallback(async () => { setIsRetrying(true); try { await onRetry?.(); } finally { setIsRetrying(false); } }, [onRetry]); const isMfaStepUp = isMfaRequiredError(error); const statusCode = getStatusCode(error); const isSystemError = !!error && !!statusCode && statusCode >= 500; useEffect(() => { if (isMfaStepUp && coreClient && !coreClient.isProxyMode()) { console.warn( `🚨 [Auth0 Components Warning]: A step-up authentication (MFA) was triggered, but the interactiveErrorHandler is not configured.\n\nTo enable Universal Login redirects for MFA step-up, login required, or consent errors, please update your configuration:\n\n\n\nFor more details, refer to the Auth0 Documentation.`, ); } }, [isMfaStepUp, coreClient]); if (isLoading || isRetrying) { return (

); } if (isSystemError || isMfaStepUp) { return ( ); } return {children}; } 6d:T13f1,/** * Section header with actions. * @module header * @internal */ import type { ActionButton as CoreActionButton } from '@auth0/universal-components-core'; import type { LucideIcon } from 'lucide-react'; import { ArrowLeft } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { Switch } from '@/components/ui/switch'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; export interface TooltipProps { content: React.ReactNode | string; } export interface WithTooltipProps { trigger: React.ReactNode | string; tooltip: TooltipProps; } export interface BaseActionProps extends Omit { icon?: LucideIcon; className?: string; hidden?: boolean; tooltip?: TooltipProps; } export interface ButtonActionProps extends BaseActionProps { type: 'button'; onClick: (e: React.MouseEvent) => void; } export interface SwitchActionProps extends Omit { type: 'switch'; checked?: boolean; onCheckedChange: (checked: boolean) => void; 'aria-label'?: string; } export type ActionProps = ButtonActionProps | SwitchActionProps; export interface HeaderProps { title?: string; description?: string; backButton?: { text?: string; icon?: LucideIcon; onClick: (e: React.MouseEvent) => void; }; actions?: ActionProps[]; isLoading?: boolean; className?: string; } const WithTooltip: React.FC = ({ trigger, tooltip }) => ( <>

{trigger}

{tooltip.content} ); const ButtonAction: React.FC = ({ icon: Icon, className, label, onClick, disabled, variant, size, }) => ( ); const SwitchAction: React.FC = ({ className, 'aria-label': ariaLabel, checked, onCheckedChange, disabled, }) => (

); export const Header = React.forwardRef< HTMLDivElement, HeaderProps & React.HTMLAttributes >(({ title, description, backButton, actions, isLoading, className, ...props }, ref) => { const BackIcon = backButton?.icon || ArrowLeft; const renderAction = (action: ActionProps, index: number) => { const key = `action-${index}`; if (isLoading) { return ; } if (action.hidden) { return null; } const actionElement = action.type === 'switch' ? ( ) : ( ); if (action.tooltip) { return ( ); } return actionElement; }; return ( ); }); Header.displayName = 'Header'; 6e:T120d,import * as React from 'react'; import { cn } from '@/lib/utils'; /** * Props for the `MiddleEllipsisText` component. */ export interface MiddleEllipsisTextProps { /** * Full text value to render and truncate from the middle when needed. */ text: string; /** * Optional class names applied to the text container. */ className?: string; } /** * Truncates text by preserving both the start and end segments and inserting * an ellipsis in the middle when the measured width exceeds the available width. * * @param text Full source text. * @param availableWidth Maximum width available for rendering in pixels. * @param font Canvas font shorthand used for text measurement. * @returns The display string and whether truncation was applied. */ function calculateTruncatedText( text: string, availableWidth: number, font: string, ): { truncated: string; isTruncated: boolean } { if (!text || availableWidth <= 0) { return { truncated: text, isTruncated: false }; } // Create a canvas element for text measurement const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); if (!context) { return { truncated: text, isTruncated: false }; } context.font = font; const ellipsis = '...'; const fullWidth = context.measureText(text).width; // If text fits, return as-is if (fullWidth <= availableWidth) { return { truncated: text, isTruncated: false }; } const ellipsisWidth = context.measureText(ellipsis).width; const targetWidth = availableWidth - ellipsisWidth; if (targetWidth <= 0) { return { truncated: ellipsis, isTruncated: true }; } // Binary search for optimal split point let start = 0; let end = text.length; let bestStart = 0; let bestEnd = text.length; while (start <= end) { const mid = Math.floor((start + end) / 2); const leftPart = text.substring(0, mid); const rightPart = text.substring(text.length - mid); const combinedWidth = context.measureText(leftPart).width + context.measureText(rightPart).width; if (combinedWidth <= targetWidth) { bestStart = mid; bestEnd = text.length - mid; start = mid + 1; } else { end = mid - 1; } } const truncated = text.substring(0, bestStart) + ellipsis + text.substring(bestEnd); return { truncated, isTruncated: true }; } /** * Renders text that truncates in the middle (`abc...xyz`) based on the * container width while preserving both the prefix and suffix. * * A tooltip with the original text is provided when truncation occurs. */ export const MiddleEllipsisText = React.memo( React.forwardRef(({ text, className }, ref) => { const [displayText, setDisplayText] = React.useState(text); const [isTruncated, setIsTruncated] = React.useState(false); const containerRef = React.useRef(null); const rafIdRef = React.useRef(null); React.useImperativeHandle(ref, () => containerRef.current!); const updateTruncation = React.useCallback(() => { const container = containerRef.current; if (!container) return; const computedStyle = window.getComputedStyle(container); const font = `${computedStyle.fontSize} ${computedStyle.fontFamily}`; const availableWidth = container.offsetWidth; const { truncated, isTruncated: truncated_flag } = calculateTruncatedText( text, availableWidth, font, ); setDisplayText(truncated); setIsTruncated(truncated_flag); }, [text]); // Update truncation on mount/text change and observe resize React.useEffect(() => { updateTruncation(); const container = containerRef.current; let resizeObserver: ResizeObserver | null = null; if (container) { resizeObserver = new ResizeObserver(() => { if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); } rafIdRef.current = requestAnimationFrame(() => { updateTruncation(); }); }); resizeObserver.observe(container); } return () => { if (rafIdRef.current !== null) { cancelAnimationFrame(rafIdRef.current); rafIdRef.current = null; } resizeObserver?.disconnect(); }; }, [updateTruncation]); return ( {displayText} ); }), ); 6f:T526,/** * Auth0Scope component — CSS scope root and portal container for lib components. * @module auth0-scope * @internal */ 'use client'; import { getCoreStyles } from '@auth0/universal-components-core'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { ThemeContext } from '@/providers/theme-provider'; export interface StyledScopeProps { children: React.ReactNode; style?: React.CSSProperties; } /** * CSS scope root for lib components. Handles dark-mode class and theme attribute. * * @param props - Component props. * @param props.children - Content to render inside the scope root. * @param props.style - Optional inline CSS styles * @returns A scoped wrapper div with dark-mode and theme attributes applied. * @internal */ export const StyledScope: React.FC = ({ children, style }) => { const { theme = 'default', isDarkMode, variables } = React.useContext(ThemeContext); const mergedStyle = React.useMemo(() => { const providerVars = getCoreStyles(variables, isDarkMode).variables; return { ...providerVars, ...style }; }, [variables, isDarkMode, style]); return (

{children}

); }; 70:T1765,/** * Toast notification utilities. * @module toast * @internal */ import { Flag } from 'lucide-react'; import type { ReactNode } from 'react'; import { toast, type ExternalToast } from 'sonner'; import { DEFAULT_TOAST_SETTINGS } from '@/types/toast-types'; import type { ToastOptions, ToastSettings, ToastType } from '@/types/toast-types'; const TOAST_COLOR_CLASSES: Record = { success: 'text-success-foreground', error: 'text-destructive-foreground', warning: 'text-warning-foreground', info: 'text-info-foreground', } as const; const VALID_TOAST_TYPES: ToastType[] = ['success', 'error', 'warning', 'info'] as const; const BASE_TOAST_Z_INDEX = 1000; let toastZIndexCounter = 0; const MAX_Z_INDEX_COUNTER = 1000; const activeToastIds = new Set(); /** * Resets the z-index counter if no active toasts remain */ const resetCounterIfEmpty = (): void => { if (activeToastIds.size === 0) { toastZIndexCounter = 0; } }; /** * Removes a toast from tracking and resets counter if needed * @param toastId - The toast ID to remove, or undefined to clear all */ const removeToastFromTracking = (toastId?: string | number | unknown): void => { if (toastId !== undefined && toastId !== null) { activeToastIds.delete(toastId); } else { activeToastIds.clear(); } resetCounterIfEmpty(); }; let globalToastSettings: ToastSettings = { ...DEFAULT_TOAST_SETTINGS, }; /** * Sets global toast configuration. Called by Auth0ComponentProvider. * @param settings - Settings configuration * @internal */ export const setGlobalToastSettings = (settings?: ToastSettings): void => { if (!settings) { globalToastSettings = { ...DEFAULT_TOAST_SETTINGS, }; return; } globalToastSettings = { ...settings, }; if (settings.provider === 'custom') { const { methods } = settings; const availableMethods = Object.keys(methods); if (availableMethods.length === 0) { console.warn( 'Auth0ComponentProvider: Custom toast provider specified but no custom methods provided', ); } availableMethods.forEach((method) => { if (typeof methods[method as keyof typeof methods] !== 'function') { console.warn(`Auth0ComponentProvider: Custom toast method '${method}' is not a function`); } }); } }; /** * Gets the current global toast configuration. * @returns The current toast settings */ export const getGlobalToastSettings = (): ToastSettings => globalToastSettings; /** * Creates a styled message element with appropriate color classes. * @param type - The toast type for styling * @param message - The message text to style * @returns A React element with styled text */ const createStyledMessage = (type: ToastType, message: string): ReactNode => { const colorClass = TOAST_COLOR_CLASSES[type]; return {message}; }; /** * Creates a default icon for the toast based on its type. * @param type - The toast type to create an icon for * @returns A React element with a styled Flag icon */ const createDefaultIcon = (type: ToastType): ReactNode => { const colorClass = TOAST_COLOR_CLASSES[type]; return ; }; /** * Shows a toast notification using the configured provider. * * @param options - The toast configuration options * @param options.type - The type of toast ('success', 'error', 'info', 'warning', 'loading') * @param options.message - The message to display in the toast * @param options.className - Optional CSS class name for custom styling * @param options.icon - Optional custom icon to display * @param options.data - Additional options passed to the toast provider * @returns The toast instance ID or result from custom method */ export const showToast = ({ type, message, className, icon, data = {}, }: ToastOptions): string | number | void => { if (!message?.trim()) { console.warn('showToast: Empty message provided'); return; } if (!VALID_TOAST_TYPES.includes(type)) { console.error( `showToast: Invalid toast type '${type}'. Must be one of: ${VALID_TOAST_TYPES.join(', ')}`, ); return; } if (globalToastSettings.provider === 'custom' && globalToastSettings.methods[type]) { try { // Custom methods only receive the message - they handle their own configuration return globalToastSettings.methods[type]!(message); } catch (error) { console.error(`showToast: Error in custom ${type} method:`, error); } } const styledMessage = createStyledMessage(type, message); const defaultIcon = icon || createDefaultIcon(type); const currentZIndex = BASE_TOAST_Z_INDEX + toastZIndexCounter; toastZIndexCounter += 1; if (toastZIndexCounter >= MAX_Z_INDEX_COUNTER) { toastZIndexCounter = 0; } const toastOptions: ExternalToast = { className, icon: defaultIcon, style: { zIndex: currentZIndex, }, onDismiss: (toastId) => { removeToastFromTracking(toastId); }, ...data, }; try { const toastId = toast[type](styledMessage, toastOptions); if (toastId) { activeToastIds.add(toastId); } return toastId; } catch (error) { console.error(`showToast: Error showing ${type} toast:`, error); return toast(message); } }; /** * Dismisses a toast notification by ID, or dismisses all toasts if no ID is provided. * * @param toastId - Optional toast ID to dismiss. If not provided, dismisses all toasts. */ export const dismissToast = (toastId?: string | number): void => { if (globalToastSettings.provider === 'custom' && globalToastSettings.methods.dismiss) { try { globalToastSettings.methods.dismiss(toastId?.toString()); } catch (error) { console.error('dismissToast: Error in custom dismiss method:', error); } return; } toast.dismiss(toastId); removeToastFromTracking(toastId); }; 71:T87e,/** * Alert component with status variants. * @module alert * @internal */ import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const alertVariants = cva( 'shadow-input-hover bg-input relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 overflow-clip rounded-3xl p-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'text-foreground border-b-2 border-transparent', info: 'text-info-foreground [&>svg]:text-info-foreground', success: 'text-success-foreground [&>svg]:text-success-foreground', warning: 'text-warning-foreground [&>svg]:text-warning-foreground', destructive: 'text-destructive-foreground [&>svg]:text-destructive-foreground', }, }, defaultVariants: { variant: 'default', }, }, ); function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

); } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function AlertAction({ className, ...props }: React.ComponentProps<'div'>) { return (

); } export { Alert, AlertTitle, AlertDescription, AlertAction }; 72:T695,/** * Badge component with variants. * @module badge * @internal */ import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const badgeVariants = cva( 'theme-default:shadow-xs box-border inline-flex items-center overflow-clip rounded-2xl border border-transparent font-medium', { variants: { variant: { default: 'bg-primary text-primary-foreground theme-default:border-primary', secondary: 'bg-muted text-muted-foreground theme-default:border-muted-foreground/25', outline: 'border-border', info: 'bg-info text-info-foreground theme-default:border-info-foreground/25', success: 'bg-success theme-default:border-success-foreground/25 text-success-foreground', warning: 'bg-warning theme-default:border-warning-foreground/25 text-warning-foreground', destructive: 'bg-destructive theme-default:border-destructive-foreground/25 text-destructive-foreground', }, size: { sm: 'px-1.5 py-0.5 text-xs', md: 'px-2 py-1 text-sm', lg: 'px-2.5 py-1.5 text-sm', }, }, defaultVariants: { variant: 'default', size: 'md', }, }, ); function Badge({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span'; return ( ); } export { Badge, badgeVariants }; 73:Td62,/** * Button component with variants. * @module button * @internal */ 'use client'; import { Slot } from '@radix-ui/react-slot'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const buttonVariants = cva( "focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden text-sm font-medium whitespace-nowrap transition-all duration-150 ease-in-out outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { primary: "shadow-button-resting hover:shadow-button-hover hover:border-primary/50 border-primary bg-primary text-primary-foreground hover:bg-primary/90 theme-default:before:from-primary-foreground/0 theme-default:before:to-primary-foreground/15 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border", outline: "dark:bg-muted/50 hover:text-accent-foreground shadow-button-outlined-resting hover:shadow-button-outlined-hover hover:border-accent bg-background hover:bg-muted text-primary border-primary/35 theme-default:before:from-primary/5 theme-default:before:to-primary/0 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border", ghost: 'hover:bg-muted text-primary bg-transparent', destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-button-destructive-resting hover:shadow-button-destructive-hover border-destructive-border/25 hover:border-destructive-border/50 theme-default:before:to-primary-foreground/50 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] theme-default:border", link: 'text-foreground underline-offset-4 hover:underline', }, size: { default: 'h-10 rounded-2xl px-4 py-2.5 has-[>svg]:px-3', xs: 'h-7 rounded-md px-2 py-1.5 text-xs has-[>svg]:px-2', sm: 'h-8 gap-1.5 rounded-xl px-3 py-2 text-xs has-[>svg]:px-2.5', lg: 'h-12 rounded-3xl px-6 py-3 text-base has-[>svg]:px-4', icon: 'size-7 rounded-xl', }, }, defaultVariants: { variant: 'primary', size: 'default', }, }, ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { as?: boolean; } function Button({ className, variant, size, as, ...props }: React.ComponentProps<'button'> & ButtonProps) { const Comp = as ? Slot : 'button'; return ; } export { Button, buttonVariants }; 74:T7cb,/** * Card layout component. * @module card * @internal */ import * as React from 'react'; import { cn } from '@/lib/utils'; function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return

; } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

); } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }; 75:T80a,/** * Checkbox component using Radix primitives. * @module checkbox * @internal */ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; import { CheckIcon, MinusIcon } from 'lucide-react'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Checkbox({ className, ...props }: React.ComponentProps) { return ( {props.checked === 'indeterminate' ? ( ) : ( )} ); } export { Checkbox }; 76:T11fe,/** * Dialog component using Radix primitives. * @module dialog * @internal */ 'use client'; import * as DialogPrimitive from '@radix-ui/react-dialog'; import { XIcon } from 'lucide-react'; import * as React from 'react'; import { Button } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; function Dialog({ ...props }: React.ComponentProps) { return ; } function DialogTrigger({ ...props }: React.ComponentProps) { const { children, asChild = false, ...elementProps } = props; if (asChild && React.isValidElement(children)) { return React.cloneElement(children, { ...(typeof children.props === 'object' ? children.props : {}), ...elementProps, }); } return ( ); } function DialogPortal({ ...props }: React.ComponentProps) { const portalContainer = usePortalContainer(); return ( ); } function DialogClose({ ...props }: React.ComponentProps) { const { children } = props; return ( ); } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ); } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean; }) { return ( {children} {showCloseButton && ( )} ); } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

); } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ); } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ); } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, }; 77:T221c,/** * Dropdown menu using Radix primitives. * @module dropdown-menu * @internal */ 'use client'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import type { VariantProps } from 'class-variance-authority'; import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'; import * as React from 'react'; import { Button, buttonVariants } from '@/components/ui/button'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; function DropdownMenu({ ...props }: React.ComponentProps) { return ; } function DropdownMenuPortal({ ...props }: React.ComponentProps) { const portalContainer = usePortalContainer(); return ( ); } function DropdownMenuTrigger({ className, variant, size, ...props }: React.ComponentProps & VariantProps) { return ( ); } function DropdownMenuContent({ className, sideOffset = 4, ...props }: React.ComponentProps & { sideOffset?: number; }) { const portalContainer = usePortalContainer(); return ( ); } function DropdownMenuGroup({ className, ...props }: React.ComponentProps<'div'>) { return

; } function DropdownMenuItem({ className, inset, variant = 'default', ...props }: React.ComponentProps & { inset?: boolean; variant?: 'default' | 'destructive'; }) { return ( ); } function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuRadioGroup({ ...props }: React.ComponentProps) { return ; } function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<'div'> & { inset?: boolean; }) { return (

); } function DropdownMenuSeparator({ className, ...props }: React.ComponentProps) { return ( ); } function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) { return ( ); } function DropdownMenuSub({ ...props }: React.ComponentProps) { return ; } function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps & { inset?: boolean; }) { return ( {children} ); } function DropdownMenuSubContent({ className, ...props }: React.ComponentProps) { return ( ); } export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, }; 78:T113a,/** * Form components with react-hook-form integration. * @module form * @internal */ 'use client'; import type * as LabelPrimitive from '@radix-ui/react-label'; import { Slot } from '@radix-ui/react-slot'; import * as React from 'react'; import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues, } from 'react-hook-form'; import { Label } from '@/components/ui/label'; import { cn } from '@/lib/utils'; const Form: typeof FormProvider = FormProvider; type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, > = { name: TName; }; const FormFieldContext = React.createContext({} as FormFieldContextValue); const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath = FieldPath, >({ ...props }: ControllerProps) => { return ( { const { onChange, onBlur, ...rest } = field; return props.render({ field: { ...rest, onChange: (...args: unknown[]) => { onChange(...(args as Parameters)); }, onBlur: (...args: unknown[]) => { onBlur(...(args as Parameters)); }, }, fieldState, formState, }); }} /> ); }; const useFormField = () => { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); const { getFieldState } = useFormContext(); const formState = useFormState({ name: fieldContext.name }); const fieldState = getFieldState(fieldContext.name, formState); if (!fieldContext) { throw new Error('useFormField should be used within '); } const { id } = itemContext; return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, }; }; type FormItemContextValue = { id: string; }; const FormItemContext = React.createContext({} as FormItemContextValue); function FormItem({ className, ...props }: React.ComponentProps<'div'>) { const id = React.useId(); return (

); } function FormLabel({ className, ...props }: React.ComponentProps) { const { error, formItemId } = useFormField(); return ( ); } function FormControl({ ...props }: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( ); } function FormDescription({ className, ...props }: React.ComponentProps<'p'>) { const { formDescriptionId } = useFormField(); return (

); } function FormMessage({ className, ...props }: React.ComponentProps<'p'>) { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message ?? '') : props.children; if (!body) { return null; } return (

{body}

); } export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, }; 79:T6df,/** * Modal dialog wrapper component. * @module modal * @internal */ import * as React from 'react'; import { FormActions, type FormActionsProps } from '@/components/auth0/shared/form-actions'; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, } from '@/components/ui/dialog'; interface ModalProps { open: boolean; onOpenChange: (open: boolean) => void; title?: string; description?: string; content?: React.ReactNode; modalActions?: FormActionsProps; className?: string; showCloseButton?: boolean; } export const Modal: React.FC = ({ open, onOpenChange, title, description, content, modalActions, className, showCloseButton, }) => { const hasHeader = title || description; const actions: FormActionsProps = { hasUnsavedChanges: true, showPrevious: true, showUnsavedChanges: false, previousAction: { label: 'Cancel', variant: 'outline', onClick: () => onOpenChange(false), }, nextAction: { label: 'Confirm', variant: 'primary', onClick: () => onOpenChange(false), }, ...modalActions, }; return ( ); }; Modal.displayName = 'Modal'; 7a:T529,/** * Loading spinner component. * @module spinner * @internal */ import type { VariantProps } from 'class-variance-authority'; import { cva } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const spinnerVariants = cva( 'inline-block h-8 w-8 animate-spin rounded-full border-2 border-transparent', { variants: { variant: { solid: '!border-t-current', dots: 'animate-[spin_5s_linear_infinite] border-6 border-dotted border-current', pulse: 'animate-pulse bg-current', }, size: { sm: 'size-4', md: 'size-8', lg: 'size-12', }, colorScheme: { primary: 'text-primary', foreground: 'text-primary-foreground', muted: 'text-muted-foreground', }, }, defaultVariants: { variant: 'solid', size: 'md', colorScheme: 'primary', }, }, ); export interface SpinnerProps extends React.HTMLAttributes, VariantProps {} export function Spinner({ variant, size, colorScheme, className, ...props }: SpinnerProps) { return (

); } 7b:T63c,/** * Toggle switch using Radix primitives. * @module switch * @internal */ 'use client'; import * as SwitchPrimitive from '@radix-ui/react-switch'; import * as React from 'react'; import { cn } from '@/lib/utils'; function Switch({ className, ...props }: React.ComponentProps) { return ( ); } export { Switch }; 7c:Tda2,/** * Table component with sorting support. * @module table * @internal */ import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'; import React from 'react'; import { cn } from '@/lib/utils'; interface TableProps extends React.HTMLAttributes { className?: string; } const Table = React.forwardRef(({ className, ...props }, ref) => (

)); Table.displayName = 'Table'; const TableHeader = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableHeader.displayName = 'TableHeader'; const TableBody = React.forwardRef< HTMLTableSectionElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( )); TableBody.displayName = 'TableBody'; interface TableRowProps extends React.HTMLAttributes { disableHover?: boolean; } const TableRow = React.forwardRef( ({ className, disableHover, ...props }, ref) => ( ), ); TableRow.displayName = 'TableRow'; interface TableHeadProps extends React.ThHTMLAttributes { isSortable?: boolean; sortDirection?: 'asc' | 'desc' | false; } const TableHead = React.forwardRef( ({ className, children, isSortable, sortDirection, ...props }, ref) => { const showSortIcon = isSortable !== undefined && sortDirection !== undefined; return ( ); }, ); TableHead.displayName = 'TableHead'; interface TableCellProps extends React.TdHTMLAttributes { className?: string; } const TableCell = React.forwardRef( ({ className, ...props }, ref) => (

{children} {showSortIcon && ( {sortDirection === false && ( )} {sortDirection === 'asc' && } {sortDirection === 'desc' && } )}	), ); TableCell.displayName = 'TableCell'; export interface TableColumn { header: string; accessor: keyof T; sortable?: boolean; } export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }; 7d:Tf76,/** * Text input field with variants. * @module text-field * @internal / import type { VariantProps } from 'class-variance-authority'; import { cva } from 'class-variance-authority'; import as React from 'react'; import { cn } from '@/lib/utils'; const textFieldVariants = cva( "bg-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative box-border inline-flex w-full shrink-0 cursor-text items-center justify-center gap-2 overflow-hidden rounded-2xl text-sm transition-[color,box-shadow] duration-150 ease-in-out outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4", { variants: { variant: { default: 'border-border/50 text-input-foreground shadow-input-resting hover:shadow-input-hover hover:border-primary/25 focus-within:border-border focus-within:ring-primary/15 focus-within:ring-4', error: 'border-destructive-border/50 text-destructive-foreground shadow-input-destructive-resting hover:shadow-input-destructive-hover hover:border-destructive-border/25 focus-within:ring-destructive-border/15 focus-within:ring-4', }, size: { default: 'h-10', sm: 'h-9', lg: 'h-11', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); export interface TextFieldProps extends Omit, 'size'> { error?: boolean; helperText?: string; size?: VariantProps['size']; variant?: VariantProps['variant']; startAdornment?: React.ReactNode; endAdornment?: React.ReactNode; } const TextField = React.forwardRef( ( { className, variant, size, error, helperText, startAdornment, endAdornment, ...props }, ref, ) => { const isDisabled = props.disabled; const WrapperComponent = props.id ? 'div' : 'label'; return ( {startAdornment && ( {startAdornment} )} {endAdornment && ( {endAdornment} )} {helperText && ( {helperText} )} ); }, ); TextField.displayName = 'TextField'; export { TextField, textFieldVariants }; 7e:T9a2,/* * Tooltip using Radix primitives. * @module tooltip * @internal / 'use client'; import as TooltipPrimitive from '@radix-ui/react-tooltip'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; const tooltipVariants = cva( 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-bevel-lg z-50 w-fit rounded-xl px-2 py-1 text-sm text-balance', { variants: { position: { top: 'origin-bottom', bottom: 'origin-top', left: 'origin-left', right: 'origin-right', }, }, defaultVariants: { position: 'top', }, }, ); function Tooltip({ children, ...props }: React.ComponentProps) { return ( {children} ); } function TooltipTrigger({ asChild = true, ...props }: React.ComponentProps) { return ; } interface TooltipContentProps extends React.ComponentProps, VariantProps {} const TooltipContent = React.forwardRef< React.ElementRef, TooltipContentProps >(({ className, side = 'top', position, sideOffset = 8, children, ...props }, ref) => { const portalContainer = usePortalContainer(); return ( {children} ); }); TooltipContent.displayName = TooltipPrimitive.Content.displayName; export { Tooltip, TooltipTrigger, TooltipContent, tooltipVariants }; 7f:T1da4,/** * Domain table UI logic hook. * @module use-domain-table-logic * @internal / import { type Domain, type IdpKnownResponse } from '@auth0/universal-components-core'; import { useCallback, useEffect, useState } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import type { UseDomainTableLogicOptions, UseDomainTableLogicResult, } from '@/types/my-organization/domain-management/domain-table-types'; /* * Hook for domain table modal state and action handlers. * @param props - Component props. * @param props.t - Translation function * @param props.onCreateDomain - The on create domain * @param props.onVerifyDomain - The on verify domain * @param props.onDeleteDomain - The on delete domain * @param props.onAssociateToProvider - The on associate to provider * @param props.onDeleteFromProvider - The on delete from provider * @param props.fetchProviders - The fetch providers * @param props.fetchDomains - The fetch domains * @internal * @returns Hook state and methods / export function useDomainTableLogic({ t, onCreateDomain, onVerifyDomain, onDeleteDomain, onAssociateToProvider, onDeleteFromProvider, fetchProviders, fetchDomains, }: UseDomainTableLogicOptions): UseDomainTableLogicResult { const handleError = useErrorHandler(); const [showCreateModal, setShowCreateModal] = useState(false); const [showConfigureModal, setShowConfigureModal] = useState(false); const [showVerifyModal, setShowVerifyModal] = useState(false); const [verifyError, setVerifyError] = useState(undefined); const [showDeleteModal, setShowDeleteModal] = useState(false); const [selectedDomain, setSelectedDomain] = useState(null); const handleCreate = useCallback( async (domainUrl: string) => { try { const newDomain = await onCreateDomain({ domain: domainUrl }); showToast({ type: 'success', message: t('domain_table.notifications.domain_create.success', { domainName: newDomain?.domain, }), }); setSelectedDomain(newDomain); setShowCreateModal(false); setShowVerifyModal(true); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_create.error'), }); } }, [onCreateDomain, t, handleError], ); const handleVerify = useCallback( async (domain: Domain) => { try { const isVerified = await onVerifyDomain(domain); if (isVerified) { setShowVerifyModal(false); showToast({ type: 'success', message: t('domain_table.notifications.domain_verify.success', { domainName: domain.domain, }), }); } else { setVerifyError( t('domain_verify.modal.errors.verification_failed', { domainName: domain.domain }), ); } } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_verify.error'), }); } }, [onVerifyDomain, t, handleError], ); const handleDelete = useCallback( async (domain: Domain) => { try { await onDeleteDomain(domain); showToast({ type: 'success', message: t('domain_table.notifications.domain_delete.success', { domainName: domain.domain, }), }); setShowDeleteModal(false); setShowVerifyModal(false); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_delete.error'), }); } }, [onDeleteDomain, t, handleError], ); const handleToggleSwitch = useCallback( async (domain: Domain, provider: IdpKnownResponse, newCheckedValue: boolean) => { if (newCheckedValue) { try { await onAssociateToProvider(domain, provider); showToast({ type: 'success', message: t('domain_table.notifications.domain_associate_provider.success', { domain: domain.domain, idp: provider.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_associate_provider.error'), }); } } else { try { await onDeleteFromProvider(domain, provider); showToast({ type: 'success', message: t('domain_table.notifications.domain_delete_provider.success', { domain: domain.domain, idp: provider.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_delete_provider.error'), }); } } }, [onAssociateToProvider, onDeleteFromProvider, t, handleError], ); const handleCloseVerifyModal = useCallback(() => { setShowVerifyModal(false); setVerifyError(undefined); }, []); const handleCreateClick = useCallback(() => { setShowCreateModal(true); }, []); const handleConfigureClick = useCallback( async (domain: Domain) => { setSelectedDomain(domain); if (domain.status !== 'verified') { setShowVerifyModal(true); } else { try { await fetchProviders(domain); setShowConfigureModal(true); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.fetch_providers_error'), }); } } }, [fetchProviders, t, handleError], ); const handleVerifyClick = useCallback( async (domain: Domain) => { setSelectedDomain(domain); try { const isVerified = await onVerifyDomain(domain); if (isVerified) { await fetchProviders(domain); setShowConfigureModal(true); showToast({ type: 'success', message: t('domain_table.notifications.domain_verify.success', { domainName: domain.domain, }), }); } else { showToast({ type: 'error', message: t('domain_table.notifications.domain_verify.verification_failed', { domainName: domain.domain, }), }); } } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_verify.error'), }); } }, [onVerifyDomain, fetchProviders, t, handleError], ); const handleDeleteClick = useCallback((domain: Domain) => { setSelectedDomain(domain); setShowVerifyModal(false); setShowDeleteModal(true); }, []); // Initialization useEffect(() => { try { fetchDomains(); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.fetch_domains_error'), }); } }, []); return { // Modal state showCreateModal, showConfigureModal, showVerifyModal, showDeleteModal, verifyError, selectedDomain, // State setters setShowCreateModal, setShowConfigureModal, setShowVerifyModal, setShowDeleteModal, // Handlers handleCreate, handleVerify, handleDelete, handleToggleSwitch, handleCloseVerifyModal, handleCreateClick, handleConfigureClick, handleVerifyClick, handleDeleteClick, }; } 80:T1d4a,/* * Domain table data and mutations hook. * @module use-domain-table / import { type Domain, type IdpKnownResponse, type CreateOrganizationDomainRequestContent, type IdentityProviderAssociatedWithDomain, BusinessError, } from '@auth0/universal-components-core'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useState } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseDomainTableOptions, UseDomainTableResult, } from '@/types/my-organization/domain-management/domain-table-types'; const domainQueryKeys = { all: ['domains'] as const, list: () => [...domainQueryKeys.all, 'list'] as const, providers: (domainId: string) => [...domainQueryKeys.all, 'providers', domainId] as const, }; /* * Hook for domain table data fetching and CRUD operations. * @param props - Component props. * @param props.createAction - Configuration for the create action * @param props.deleteAction - Configuration for the delete action * @param props.verifyAction - Configuration for the verify action * @param props.associateToProviderAction - Configuration for associating to a provider * @param props.deleteFromProviderAction - Configuration for deleting from a provider * @param props.customMessages - Custom translation messages to override defaults * @returns Hook state and methods / export function useDomainTable({ createAction, deleteAction, verifyAction, associateToProviderAction, deleteFromProviderAction, customMessages, }: UseDomainTableOptions): UseDomainTableResult { const { t } = useTranslator('domain_management.domain_table.notifications', customMessages); const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const [selectedDomainId, setSelectedDomainId] = useState(null); const [selectedDomainName, setSelectedDomainName] = useState(null); const fetchProvidersForDomain = async (domainName: string) => { const api = coreClient!.getMyOrganizationApiClient(); const allProvidersResponse = await api.organization.identityProviders.list(); const allProviders = allProvidersResponse?.identity_providers ?? []; return allProviders.map( (provider): IdentityProviderAssociatedWithDomain => ({ ...provider, is_associated: provider.domains?.includes(domainName) ?? false, }), ); }; const domainsQuery = useQuery({ queryKey: domainQueryKeys.list(), queryFn: async () => { const { response } = await coreClient! .getMyOrganizationApiClient() .organization.domains.list(); return response?.organization_domains ?? []; }, enabled: !!coreClient, }); const providersQuery = useQuery({ queryKey: domainQueryKeys.providers(selectedDomainId ?? ''), queryFn: () => fetchProvidersForDomain(selectedDomainName!), enabled: !!coreClient && !!selectedDomainId && !!selectedDomainName, }); const createDomainMutation = useMutation({ mutationFn: async (data: CreateOrganizationDomainRequestContent): Promise => { if (createAction?.onBefore && !createAction.onBefore(data as Domain)) { throw new BusinessError({ message: t('domain_create.on_before') }); } return coreClient!.getMyOrganizationApiClient().organization.domains.create(data); }, onSuccess: (result) => { createAction?.onAfter?.(result); queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() }); }, }); const verifyDomainMutation = useMutation({ mutationFn: async (domain: Domain): Promise => { if (verifyAction?.onBefore && !verifyAction.onBefore(domain)) { throw new BusinessError({ message: t('domain_verify.on_before') }); } const response = await coreClient! .getMyOrganizationApiClient() .organization.domains.verify.create(domain.id); return response.status === 'verified'; }, onSuccess: (_, domain) => { verifyAction?.onAfter?.(domain); queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() }); }, }); const deleteDomainMutation = useMutation({ mutationFn: async (domain: Domain): Promise => { if (deleteAction?.onBefore && !deleteAction.onBefore(domain)) { throw new BusinessError({ message: t('domain_delete.on_before') }); } await coreClient!.getMyOrganizationApiClient().organization.domains.delete(domain.id); }, onSuccess: (_, domain) => { deleteAction?.onAfter?.(domain); queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() }); queryClient.removeQueries({ queryKey: domainQueryKeys.providers(domain.id) }); }, }); const associateToProviderMutation = useMutation({ mutationFn: async ({ domain, provider }: { domain: Domain; provider: IdpKnownResponse }) => { if ( associateToProviderAction?.onBefore && !associateToProviderAction.onBefore(domain, provider) ) { throw new BusinessError({ message: t('domain_associate_provider.on_before') }); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.create(provider.id!, { domain: domain.domain }); }, onSuccess: (_, { domain, provider }) => { associateToProviderAction?.onAfter?.(domain, provider); queryClient.invalidateQueries({ queryKey: domainQueryKeys.providers(domain.id) }); }, }); const deleteFromProviderMutation = useMutation({ mutationFn: async ({ domain, provider }: { domain: Domain; provider: IdpKnownResponse }) => { if ( deleteFromProviderAction?.onBefore && !deleteFromProviderAction.onBefore(domain, provider) ) { throw new BusinessError({ message: t('domain_delete_provider.on_before') }); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.delete(provider.id!, domain.domain); }, onSuccess: (_, { domain, provider }) => { deleteFromProviderAction?.onAfter?.(domain, provider); queryClient.invalidateQueries({ queryKey: domainQueryKeys.providers(domain.id) }); }, }); return { domains: domainsQuery.data ?? [], providers: providersQuery.data ?? [], isFetching: domainsQuery.isLoading, isCreating: createDomainMutation.isPending, isDeleting: deleteDomainMutation.isPending, isVerifying: verifyDomainMutation.isPending, isLoadingProviders: providersQuery.isLoading, fetchProviders: async (domain: Domain) => { setSelectedDomainId(domain.id); setSelectedDomainName(domain.domain); await queryClient.ensureQueryData({ queryKey: domainQueryKeys.providers(domain.id), queryFn: () => fetchProvidersForDomain(domain.domain), }); }, fetchDomains: async () => { await queryClient.getQueryData(domainQueryKeys.list()); }, onCreateDomain: (data) => createDomainMutation.mutateAsync(data), onVerifyDomain: (domain) => verifyDomainMutation.mutateAsync(domain), onDeleteDomain: (domain) => deleteDomainMutation.mutateAsync(domain), onAssociateToProvider: (domain, provider) => associateToProviderMutation.mutateAsync({ domain, provider }), onDeleteFromProvider: (domain, provider) => deleteFromProviderMutation.mutateAsync({ domain, provider }), }; } 81:T4bd,/* * CoreClient initialization hook. * @module use-core-client-initialization * @internal / import type { CoreClientInterface, AuthDetails, I18nInitOptions, } from '@auth0/universal-components-core'; import { createCoreClient } from '@auth0/universal-components-core'; import as React from 'react'; interface UseCoreClientInitializationProps { authDetails: AuthDetails; i18nOptions?: I18nInitOptions; } /** * @internal * @param props - Initialization props. * @returns The initialized CoreClient instance, or null while initializing. / export const useCoreClientInitialization = ({ authDetails, i18nOptions, }: UseCoreClientInitializationProps): CoreClientInterface \| null => { const { authProxyUrl } = authDetails; const [coreClient, setCoreClient] = React.useState(null); React.useEffect(() => { const initializeCoreClient = async () => { try { const initializedCoreClient = await createCoreClient(authDetails, i18nOptions); setCoreClient(initializedCoreClient); } catch (error) { console.error(error); } }; initializeCoreClient(); }, [authProxyUrl, i18nOptions]); return coreClient; }; 82:T7a8,/* * Error handling hook with toast error. * @module use-error-handler / import { isNetworkError, isNotifiableError, resolveErrorMessage, getStatusCode, hasApiErrorBody, ERROR_CODES, } from '@auth0/universal-components-core'; import { useCallback } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useTranslator } from '@/hooks/shared/use-translator'; interface ErrorHandlerCallOptions { fallbackMessage?: string; } /* * Hook for consistent error handling across the app. * * @returns Error handler function. * * @example * const handleError = useErrorHandler(); * * // With custom message * onError: (error) => handleError(error, { * fallbackMessage: t('my_error') * }); * * // With defaults * onError: handleError; / export function useErrorHandler() { const { t } = useTranslator('common'); return useCallback( (error: unknown, options: ErrorHandlerCallOptions = {}): void => { if (!isNotifiableError(error)) return; const getCustomErrorMessage = (err: unknown): string \| undefined => { if (isNetworkError(err)) return t('error.network'); const status = getStatusCode(err); switch (status) { case 400: return t('error.bad_request'); case 401: return t('error.missing_token'); case 403: return hasApiErrorBody(err) && err.body?.type?.includes(ERROR_CODES.INSUFFICIENT_SCOPE) ? t('error.insufficient_scope') : t('error.forbidden'); case 404: return t('error.not_found'); case 429: return t('error.rate_limit'); default: return undefined; } }; showToast({ type: 'error', message: getCustomErrorMessage(error) ?? resolveErrorMessage(error, options.fallbackMessage ?? t('error.generic')), }); }, [t], ); } 83:T4be,/* * Toast settings management hook. * @module use-toast-provider * @internal / import { useEffect, useMemo } from 'react'; import { setGlobalToastSettings } from '@/components/auth0/shared/toast'; import { DEFAULT_TOAST_SETTINGS, type ToastSettings } from '@/types/toast-types'; /* * Hook to merge and apply toast settings. * @param toastSettings - Optional toast settings. * @returns Merged toast settings. * @internal / export const useToastProvider = (toastSettings?: ToastSettings) => { const mergedToastSettings = useMemo(() => { if (!toastSettings) { return DEFAULT_TOAST_SETTINGS; } if (toastSettings.provider === 'custom') { return toastSettings; } const defaultSonnerSettings = DEFAULT_TOAST_SETTINGS.provider === 'sonner' ? DEFAULT_TOAST_SETTINGS.settings \|\| {} : {}; return { provider: 'sonner' as const, settings: { ...defaultSonnerSettings, ...(toastSettings.provider === 'sonner' ? toastSettings.settings : {}), }, } satisfies ToastSettings; }, [toastSettings]); useEffect(() => { setGlobalToastSettings(mergedToastSettings); }, [mergedToastSettings]); return mergedToastSettings; }; 84:T5bd,/* * i18n translator hook. * @module use-translator / import { type EnhancedTranslationFunction } from '@auth0/universal-components-core'; import { useMemo, useCallback } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; /* * Hook to access i18n translations. * @param namespace - Translation namespace. * @param overrides - Optional translation overrides. * @returns Translator function and language utilities. / export function useTranslator( namespace: string, overrides?: Record, ): { t: EnhancedTranslationFunction; changeLanguage: (language: string, fallbackLanguage?: string) => Promise; currentLanguage: string; fallbackLanguage: string \| undefined; } { const { coreClient } = useCoreClient(); if (!coreClient) { throw new Error( 'useTranslator must be used within Auth0ComponentProvider with initialized CoreClient', ); } const translator = useMemo(() => { return coreClient.i18nService.translator(namespace, overrides); }, [coreClient, namespace, overrides]); const changeLanguage = useCallback( async (language: string, fallbackLanguage?: string) => { await coreClient.i18nService.changeLanguage(language, fallbackLanguage); }, [coreClient], ); return { t: translator, changeLanguage, currentLanguage: coreClient.i18nService.currentLanguage, fallbackLanguage: coreClient.i18nService.fallbackLanguage, }; } 85:Tb67,/* * RWA proxy provider for server-side auth. * @module proxy-provider / 'use client'; import type { AuthDetails } from '@auth0/universal-components-core'; import as React from 'react'; import { Toaster } from '@/components/auth0/shared/sonner'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Spinner } from '@/components/ui/spinner'; import { CoreClientContext } from '@/hooks/shared/use-core-client'; import { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization'; import { useToastProvider } from '@/hooks/shared/use-toast-provider'; import { QueryProvider } from '@/providers/query-provider'; import { ThemeProvider } from '@/providers/theme-provider'; import type { Auth0ComponentProviderProps } from '@/types/auth-types'; /** * Auth0 provider for RWAs using backend proxy auth. * @param props - Provider configuration including domain, proxyConfig, i18n, themeSettings, toastSettings, cacheConfig, loader, and children. * @returns Provider component tree / export const Auth0ComponentProvider = ({ i18n, domain, proxyConfig, previewMode, themeSettings = { theme: 'default', mode: 'light', variables: { common: {}, light: {}, dark: {}, }, }, toastSettings, cacheConfig, loader, children, }: Extract & { children: React.ReactNode }) => { const mergedToastSettings = useToastProvider(toastSettings); const { baseUrl, fetcher } = proxyConfig; const memoizedAuthDetails = React.useMemo( () => ({ domain, authProxyUrl: baseUrl, fetcher, previewMode, }), [domain, baseUrl, fetcher, previewMode], ); const coreClient = useCoreClientInitialization({ authDetails: memoizedAuthDetails, i18nOptions: i18n, }); const coreClientValue = React.useMemo( () => ({ coreClient, }), [coreClient], ); const fallback = loader \|\| ( ); return ( {mergedToastSettings.provider === 'sonner' && ( )} {coreClient ? ( {children} ) : ( fallback )} ); }; export default Auth0ComponentProvider; 86:T1468,'use client'; /* * TanStack Query provider wrapper. * @module query-provider * @internal / import { isMfaRequiredError, isNotifiableError } from '@auth0/universal-components-core'; import { MutationCache, type Query, QueryCache, QueryClient, QueryClientProvider as TanStackQueryClientProvider, } from '@tanstack/react-query'; import { useMemo, useState, type ReactElement, type ReactNode } from 'react'; import { GateKeeperContext } from '@/providers/gate-keeper-context'; /* Query cache configuration. / export interface QueryCacheConfig { enabled?: boolean; staleTime?: number; gcTime?: number; refetchOnWindowFocus?: boolean \| 'always'; } /* Default cache configuration. / export const DEFAULT_CACHE_CONFIG: Readonly> = { enabled: true, staleTime: 2 60 * 1000, gcTime: 5 * 60 * 1000, refetchOnWindowFocus: false, }; const QUERY_RETRY_CONFIG = { maxRetries: 3, maxRetryDelay: 30_000, backoffMultiplier: 2, } as const; const MUTATION_RETRY_CONFIG = { maxRetries: 1, } as const; const DISABLED_CACHE_GC_TIME = 5 * 1000; /** * Merges user config with defaults. * @param userConfig - User-provided cache config. * @returns The resolved cache configuration * @internal / export function resolveCacheConfig(userConfig?: QueryCacheConfig): Required { const merged: Required = { ...DEFAULT_CACHE_CONFIG, ...userConfig, }; if (!merged.enabled) { return { ...merged, staleTime: 0, gcTime: DISABLED_CACHE_GC_TIME, }; } return merged; } /* * Returns true if a cached query has an error that GateKeeper should handle. * @param query - The cached query to check. * @returns Whether the query error should be intercepted by GateKeeper. / function isGateKeeperError(query: Query): boolean { return !!query.state.error && !isNotifiableError(query.state.error); } /* * Creates a QueryClient with config and global GateKeeper error interception. * @param cacheConfig - Cache configuration. * @param setGateKeeperState - Setter for GateKeeper context state. * @returns The configured QueryClient instance * @internal / function createQueryClient( cacheConfig: Required, setGateKeeperState: (state: { error: Error; onRetry: () => Promise } \| null) => void, ): QueryClient { const queryClient = new QueryClient({ queryCache: new QueryCache({ onError: (error) => { if (!isNotifiableError(error)) { setGateKeeperState({ error, onRetry: async () => { await queryClient.refetchQueries({ predicate: isGateKeeperError }); const stillFailing = queryClient.getQueryCache().getAll().some(isGateKeeperError); if (!stillFailing) setGateKeeperState(null); return !stillFailing; }, }); } }, }), mutationCache: new MutationCache({ onError: (error, variables, _context, mutation) => { if (isMfaRequiredError(error)) { setGateKeeperState({ error, onRetry: async () => { try { await mutation.execute(variables); setGateKeeperState(null); return true; } catch { return false; } }, }); } }, }), defaultOptions: { queries: { staleTime: cacheConfig.staleTime, gcTime: cacheConfig.gcTime, refetchOnWindowFocus: cacheConfig.refetchOnWindowFocus, retry: (failureCount, error) => !isMfaRequiredError(error) && failureCount < QUERY_RETRY_CONFIG.maxRetries, retryDelay: (attemptIndex: number) => Math.min( 1000 QUERY_RETRY_CONFIG.backoffMultiplier attemptIndex, QUERY_RETRY_CONFIG.maxRetryDelay, ), refetchOnReconnect: true, }, mutations: { retry: (failureCount, error) => !isMfaRequiredError(error) && failureCount < MUTATION_RETRY_CONFIG.maxRetries, }, }, }); return queryClient; } / Props for QueryProvider. / export interface QueryProviderProps { children: ReactNode; /* Cache config, only read on mount. / cacheConfig?: QueryCacheConfig; } /* * Internal TanStack Query provider wrapper. * @param props - Component props. * @param props.children - Child components. * @param props.cacheConfig - Cache configuration. * @returns The context provider component * @internal / export function QueryProvider({ children, cacheConfig }: QueryProviderProps): ReactElement { const [gateKeeperState, setGateKeeperState] = useState<{ error: Error; onRetry: () => Promise; } \| null>(null); const [queryClient] = useState(() => createQueryClient(resolveCacheConfig(cacheConfig), setGateKeeperState), ); const contextValue = useMemo(() => gateKeeperState ?? { error: null }, [gateKeeperState]); return ( {children} ); } 87:Tdaf,/* * SPA provider using @auth0/auth0-react. * @module spa-provider / 'use client'; import { useAuth0 } from '@auth0/auth0-react'; import type { AuthDetails, BasicAuth0ContextInterface } from '@auth0/universal-components-core'; import as React from 'react'; import { Toaster } from '@/components/auth0/shared/sonner'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Spinner } from '@/components/ui/spinner'; import { CoreClientContext } from '@/hooks/shared/use-core-client'; import { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization'; import { useToastProvider } from '@/hooks/shared/use-toast-provider'; import { QueryProvider } from '@/providers/query-provider'; import { ThemeProvider } from '@/providers/theme-provider'; import type { Auth0ComponentProviderProps } from '@/types/auth-types'; /** * Auth0 provider for SPAs. Wraps components with required contexts. * @param props - Provider configuration including domain, mode, authContext, i18n, themeSettings, toastSettings, cacheConfig, loader, and children. * @returns Provider component tree / export const Auth0ComponentProvider = ( props: Extract & { children: React.ReactNode }, ) => { const { i18n, previewMode, themeSettings = { theme: 'default', mode: 'light', variables: { common: {}, light: {}, dark: {}, }, }, toastSettings, cacheConfig, loader, children, authContext, } = props; const mergedToastSettings = useToastProvider(toastSettings); const auth0ReactContext = useAuth0(); const resolvedAuthContext = React.useMemo(() => { if (authContext) { return authContext; } if (auth0ReactContext && 'isAuthenticated' in auth0ReactContext) { return auth0ReactContext as BasicAuth0ContextInterface; } throw new Error( 'Auth0ContextInterface is not available. Make sure you wrap your app with Auth0Provider from @auth0/auth0-react, or pass authContext.', ); }, [auth0ReactContext, authContext]); const memoizedAuthDetails = React.useMemo( () => ({ contextInterface: resolvedAuthContext, previewMode, }), [resolvedAuthContext, previewMode], ); const coreClient = useCoreClientInitialization({ authDetails: memoizedAuthDetails, i18nOptions: i18n, }); const coreClientValue = React.useMemo( () => ({ coreClient, }), [coreClient], ); const fallback = loader \|\| ( ); return ( {mergedToastSettings.provider === 'sonner' && ( )} {coreClient ? ( {children} ) : ( fallback )} ); }; export default Auth0ComponentProvider; 88:T7c9,/* * Theme provider for styling configuration. * @module theme-provider * @internal / 'use client'; import { applyStyleOverrides, type StylingVariables } from '@auth0/universal-components-core'; import as React from 'react'; import { PortalContext } from '@/providers/portal-context'; import type { ThemeContextValue, ThemeInput } from '@/types/theme-types'; /** Default empty style overrides. / const defaultStyleOverrides: StylingVariables = { common: {}, light: {}, dark: {} }; /* * Theme context for accessing theme settings. * @internal * @returns The context provider component / export const ThemeContext = React.createContext({ isDarkMode: false, variables: defaultStyleOverrides, loader: null, }); /* * Provides theme configuration to the component tree. * @param props - Component props. * @param props.themeSettings - Theme settings with mode, variables, and loader. * @param props.children - Child components. * @returns Theme provider. * @internal / export const ThemeProvider: React.FC<{ themeSettings?: ThemeInput; children: React.ReactNode; }> = ({ themeSettings, children }) => { const { variables, loader, mode, theme } = React.useMemo( () => ({ variables: themeSettings?.variables ?? defaultStyleOverrides, loader: themeSettings?.loader ?? null, mode: themeSettings?.mode, theme: themeSettings?.theme ?? 'default', }), [themeSettings], ); const [portalContainer, setPortalContainer] = React.useState(null); React.useEffect(() => { applyStyleOverrides(variables, mode, theme); }, [variables, mode, theme]); return ( {children} ); }; 89:T478,/* * Auth provider configuration types. * @module auth-types / import type { AuthDetails, FetcherAuthParams } from '@auth0/universal-components-core'; import type as React from 'react'; import type { QueryCacheConfig } from '@/types/cache-types'; import type { I18nOptions } from '@/types/i18n-types'; import type { ThemeSettings } from '@/types/theme-types'; import type { ToastSettings } from '@/types/toast-types'; /** Props for Auth0ComponentProvider. / export type Auth0ComponentProviderProps = ( \| { mode?: 'direct'; authContext?: AuthDetails['contextInterface']; proxyConfig?: never; } \| { mode: 'proxy'; domain: string; proxyConfig: { baseUrl: string; fetcher?: ( url: string, init?: RequestInit, authParams?: FetcherAuthParams, ) => Promise; }; } ) & { i18n?: I18nOptions; themeSettings?: ThemeSettings; loader?: React.ReactNode; toastSettings?: ToastSettings; /* TanStack Query cache config. Use `{ enabled: false }` to disable. / cacheConfig?: QueryCacheConfig; previewMode?: boolean; }; 8a:T128e,/* * Domain table types. * @module domain-table-types / import type { SharedComponentProps, IdpKnownResponse, DomainCreateMessages, DomainCreateSchemas, ComponentAction, Domain, DomainDeleteMessages, DomainConfigureMessages, DomainVerifyMessages, DomainTableMessages, CreateOrganizationDomainRequestContent, EnhancedTranslationFunction, IdentityProviderAssociatedWithDomain, } from '@auth0/universal-components-core'; export type { Domain }; /* CSS classes for DomainTable. / export interface DomainTableClasses { 'DomainTable-header'?: string; 'DomainTable-table'?: string; 'DomainTable-createModal'?: string; 'DomainTable-configureModal'?: string; 'DomainTable-deleteModal'?: string; } /* DomainTable translation messages. / export interface DomainTableMainMessages extends DomainTableMessages { create: DomainCreateMessages; configure: DomainConfigureMessages; verify: DomainVerifyMessages; delete: DomainDeleteMessages; } /* DomainTable validation schemas. / export interface DomainTableSchema { create?: DomainCreateSchemas; } /* Props for DomainTable component. / export interface DomainTableProps extends SharedComponentProps { hideHeader?: boolean; createAction?: ComponentAction; verifyAction?: ComponentAction; deleteAction?: ComponentAction; associateToProviderAction?: ComponentAction; deleteFromProviderAction?: ComponentAction; onOpenProvider?: (provider: IdpKnownResponse) => void; onCreateProvider?: () => void; } // DomainTableView component props export interface DomainTableViewProps { logic: UseDomainTableResult & DomainTableProps; handlers: UseDomainTableLogicResult; } /* Props for DomainTable actions column. / export interface DomainTableActionsColumnProps { customMessages?: Partial; readOnly: boolean; domain: Domain; onView: (domain: Domain) => void; onConfigure: (domain: Domain) => void; onVerify: (domain: Domain) => void; onDelete: (domain: Domain) => void; } export interface UseDomainTableOptions { createAction?: DomainTableProps['createAction']; verifyAction?: DomainTableProps['verifyAction']; deleteAction?: DomainTableProps['deleteAction']; associateToProviderAction?: DomainTableProps['associateToProviderAction']; deleteFromProviderAction?: DomainTableProps['deleteFromProviderAction']; customMessages?: DomainTableProps['customMessages']; } export interface UseDomainTableResult extends SharedComponentProps { domains: Domain[]; providers: IdentityProviderAssociatedWithDomain[]; isFetching: boolean; isLoadingProviders: boolean; isCreating: boolean; isDeleting: boolean; isVerifying: boolean; fetchProviders: (domain: Domain) => Promise; fetchDomains: () => Promise; onCreateDomain: (data: CreateOrganizationDomainRequestContent) => Promise; onVerifyDomain: (data: Domain) => Promise; onDeleteDomain: (domain: Domain) => Promise; onAssociateToProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; onDeleteFromProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; } export interface UseDomainTableLogicOptions { t: EnhancedTranslationFunction; onCreateDomain: UseDomainTableResult['onCreateDomain']; onVerifyDomain: UseDomainTableResult['onVerifyDomain']; onDeleteDomain: UseDomainTableResult['onDeleteDomain']; onAssociateToProvider: UseDomainTableResult['onAssociateToProvider']; onDeleteFromProvider: UseDomainTableResult['onDeleteFromProvider']; fetchProviders: UseDomainTableResult['fetchProviders']; fetchDomains: UseDomainTableResult['fetchDomains']; } export interface UseDomainTableLogicResult { // Modal state showCreateModal: boolean; showConfigureModal: boolean; showVerifyModal: boolean; showDeleteModal: boolean; verifyError: string \| undefined; selectedDomain: Domain \| null; // State setters setShowCreateModal: (show: boolean) => void; setShowConfigureModal: (show: boolean) => void; setShowVerifyModal: (show: boolean) => void; setShowDeleteModal: (show: boolean) => void; // Handlers handleCreate: (domainUrl: string) => Promise; handleVerify: (domain: Domain) => Promise; handleDelete: (domain: Domain) => void; handleToggleSwitch: (domain: Domain, provider: IdpKnownResponse, checked: boolean) => void; handleCloseVerifyModal: () => void; handleCreateClick: () => void; handleConfigureClick: (domain: Domain) => void; handleVerifyClick: (domain: Domain) => Promise; handleDeleteClick: (domain: Domain) => void; } 8b:T5e4,/* * Toast notification types. * @module toast-types / import type { ReactNode } from 'react'; import type { ExternalToast } from 'sonner'; /* Toast notification type. / export type ToastType = 'success' \| 'info' \| 'warning' \| 'error'; /* Toast position options. / export type ToastPosition = \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'bottom-center'; /* Custom toast method signature. / export interface CustomToastMethod { (message: string): void; } /* Custom toast methods for overriding default behavior. / export interface CustomToastMethods { success?: CustomToastMethod; error?: CustomToastMethod; warning?: CustomToastMethod; info?: CustomToastMethod; dismiss?: (toastId?: string) => void; } /* Sonner toast settings. / export interface SonnerSettings { position?: ToastPosition; maxToasts?: number; duration?: number; dismissible?: boolean; closeButton?: boolean; } /* Toast provider configuration. / export type ToastSettings = \| { provider?: 'sonner'; settings?: SonnerSettings } \| { provider: 'custom'; methods: CustomToastMethods }; /* Toast options for showToast. / export interface ToastOptions { type: ToastType; message: string; className?: string; icon?: ReactNode; data?: ExternalToast; } /* Default toast settings. / export const DEFAULT_TOAST_SETTINGS: ToastSettings = { provider: 'sonner', settings: { position: 'top-right', closeButton: true, }, } as const; 60:["$","$L62",null,{"files":[{"path":"src/components/auth0/my-organization/domain-table.tsx","content":"$63","type":"registry:block","target":"components/auth0/my-organization/domain-table.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx","content":"$64","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx","content":"$65","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx","content":"$66","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx","content":"$67","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx","content":"$68","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx"},{"path":"src/components/auth0/shared/copyable-text-field.tsx","content":"$69","type":"registry:component","target":"components/auth0/shared/copyable-text-field.tsx"},{"path":"src/components/auth0/shared/data-table.tsx","content":"$6a","type":"registry:component","target":"components/auth0/shared/data-table.tsx"},{"path":"src/components/auth0/shared/form-actions.tsx","content":"$6b","type":"registry:component","target":"components/auth0/shared/form-actions.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$6c","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/header.tsx","content":"$6d","type":"registry:component","target":"components/auth0/shared/header.tsx"},{"path":"src/components/auth0/shared/middle-ellipsis-text.tsx","content":"$6e","type":"registry:component","target":"components/auth0/shared/middle-ellipsis-text.tsx"},{"path":"src/components/auth0/shared/sonner.tsx","content":"/\n Sonner toast provider wrapper.\n * @module sonner\n * @internal\n /\n\n'use client';\n\nimport type { ToasterProps } from 'sonner';\nimport { Toaster as Sonner } from 'sonner';\n\nimport { useTheme } from '@/hooks/shared/use-theme';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { isDarkMode } = useTheme();\n const theme = isDarkMode ? 'dark' : 'light';\n\n return (\n \n );\n};\n\nexport { Toaster };\n","type":"registry:component","target":"components/auth0/shared/sonner.tsx"},{"path":"src/components/auth0/shared/styled-scope.tsx","content":"$6f","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$70","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/ui/alert.tsx","content":"$71","type":"registry:component","target":"components/ui/alert.tsx"},{"path":"src/components/ui/badge.tsx","content":"$72","type":"registry:component","target":"components/ui/badge.tsx"},{"path":"src/components/ui/button.tsx","content":"$73","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$74","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/checkbox.tsx","content":"$75","type":"registry:component","target":"components/ui/checkbox.tsx"},{"path":"src/components/ui/dialog.tsx","content":"$76","type":"registry:component","target":"components/ui/dialog.tsx"},{"path":"src/components/ui/dropdown-menu.tsx","content":"$77","type":"registry:component","target":"components/ui/dropdown-menu.tsx"},{"path":"src/components/ui/form.tsx","content":"$78","type":"registry:component","target":"components/ui/form.tsx"},{"path":"src/components/ui/inline-code.tsx","content":"/\n Inline code display component.\n * @module inline-code\n * @internal\n /\n\nimport as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InlineCodeProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function InlineCode({ children, className }: InlineCodeProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/inline-code.tsx"},{"path":"src/components/ui/label.tsx","content":"/*\n Form label component.\n * @module label\n * @internal\n /\n\nimport as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Label({ children, className, ...props }: React.ComponentPropsWithoutRef<'label'>) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/label.tsx"},{"path":"src/components/ui/modal.tsx","content":"$79","type":"registry:component","target":"components/ui/modal.tsx"},{"path":"src/components/ui/spinner.tsx","content":"$7a","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/switch.tsx","content":"$7b","type":"registry:component","target":"components/ui/switch.tsx"},{"path":"src/components/ui/table.tsx","content":"$7c","type":"registry:component","target":"components/ui/table.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$7d","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$7e","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-organization/use-domain-table-logic.ts","content":"$7f","type":"registry:component","target":"hooks/my-organization/use-domain-table-logic.ts"},{"path":"src/hooks/my-organization/use-domain-table.ts","content":"$80","type":"registry:component","target":"hooks/my-organization/use-domain-table.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$81","type":"registry:component","target":"hooks/shared/use-core-client-initialization.ts"},{"path":"src/hooks/shared/use-core-client.ts","content":"/*\n CoreClient context and hook.\n * @module use-core-client\n /\n\nimport type { CoreClientInterface } from '@auth0/universal-components-core';\nimport as React from 'react';\n\n/** @internal /\nconst CoreClientContext = React.createContext<{\n coreClient: CoreClientInterface \| null;\n}>({\n coreClient: null,\n});\n\n/\n Hook to access CoreClient from context.\n * @returns CoreClient instance or null.\n * @throws If used outside Auth0ComponentProvider.\n /\nexport const useCoreClient = () => {\n const context = React.useContext(CoreClientContext);\n if (!context) {\n throw new Error('useCoreClient must be used within Auth0ComponentProvider');\n }\n return context;\n};\n\nexport { CoreClientContext };\n","type":"registry:component","target":"hooks/shared/use-core-client.ts"},{"path":"src/hooks/shared/use-error-handler.ts","content":"$82","type":"registry:component","target":"hooks/shared/use-error-handler.ts"},{"path":"src/hooks/shared/use-theme.ts","content":"/\n Theme context hook.\n * @module use-theme\n /\n\n'use client';\n\nimport { useContext } from 'react';\n\nimport { ThemeContext } from '@/providers/theme-provider';\n\n/\n Hook to access theme context (mode, variables, loader).\n * @returns Theme context value.\n * @throws If used outside ThemeProvider.\n /\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n","type":"registry:component","target":"hooks/shared/use-theme.ts"},{"path":"src/hooks/shared/use-toast-provider.ts","content":"$83","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$84","type":"registry:component","target":"hooks/shared/use-translator.ts"},{"path":"src/providers/gate-keeper-context.tsx","content":"'use client';\n\nimport { createContext, useContext } from 'react';\n\nexport interface GateKeeperContextValue {\n error: Error \| null;\n /* Defined only when an error is active. /\n onRetry?: () => Promise;\n}\n\nexport const GateKeeperContext = createContext(null);\n\n/\n @internal\n * @returns Current GateKeeper context value\n * @throws Error if used outside of the GateKeeperProvider\n /\nexport function useGateKeeperContext(): GateKeeperContextValue {\n const context = useContext(GateKeeperContext);\n\n if (!context) {\n throw new Error('useGateKeeperContext must be used within a GateKeeperProvider');\n }\n\n return context;\n}\n","type":"registry:component","target":"providers/gate-keeper-context.tsx"},{"path":"src/providers/portal-context.tsx","content":"'use client';\n\nimport as React from 'react';\n\n/*\n React context that stores the target HTML element used as a portal container\n * for overlay-based UI (for example, dialogs, popovers, and tooltips).\n \n /\nexport const PortalContext = React.createContext(null);\n\n/*\n Returns the current portal container element from `PortalContext`.\n \n @returns The configured portal host element, or `null` when not provided.\n /\nexport function usePortalContainer() {\n return React.useContext(PortalContext);\n}\n","type":"registry:component","target":"providers/portal-context.tsx"},{"path":"src/providers/proxy-provider.tsx","content":"$85","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$86","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$87","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$88","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$89","type":"registry:component","target":"types/auth-types.ts"},{"path":"src/types/cache-types.ts","content":"/\n TanStack Query cache configuration types.\n * @module cache-types\n /\n\n/* Cache configuration options. /\nexport interface QueryCacheConfig {\n enabled?: boolean;\n staleTime?: number;\n gcTime?: number;\n refetchOnWindowFocus?: boolean \| 'always';\n}\n","type":"registry:component","target":"types/cache-types.ts"},{"path":"src/types/i18n-types.ts","content":"/\n Internationalization configuration types.\n * @module i18n-types\n /\n\n/* i18n configuration for Auth0 components. /\nexport interface I18nOptions {\n currentLanguage: string;\n fallbackLanguage?: string;\n}\n","type":"registry:component","target":"types/i18n-types.ts"},{"path":"src/types/my-organization/domain-management/domain-configure-types.ts","content":"/\n Domain configure modal types.\n * @module domain-configure-types\n /\n\nimport type {\n Domain,\n DomainConfigureMessages,\n IdentityProviderAssociatedWithDomain,\n} from '@auth0/universal-components-core';\n\n/* Props for DomainConfigureProvidersModal. /\nexport interface DomainConfigureProvidersModalProps {\n className?: string;\n customMessages?: Partial;\n isOpen: boolean;\n isLoading: boolean;\n isLoadingSwitch: boolean;\n domain: Domain \| null;\n providers: IdentityProviderAssociatedWithDomain[];\n onClose: () => void;\n onToggleSwitch: (\n domain: Domain,\n provider: IdentityProviderAssociatedWithDomain,\n enable: boolean,\n ) => void;\n onOpenProvider?: (provider: IdentityProviderAssociatedWithDomain) => void;\n onCreateProvider?: () => void;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-configure-types.ts"},{"path":"src/types/my-organization/domain-management/domain-create-types.ts","content":"/\n Domain create modal types.\n * @module domain-create-types\n /\n\nimport type { DomainCreateMessages, DomainCreateSchemas } from '@auth0/universal-components-core';\n\n/* Props for DomainCreateModal. /\nexport interface DomainCreateModalProps {\n translatorKey?: string;\n className?: string;\n customMessages?: Partial;\n schema?: DomainCreateSchemas;\n isOpen: boolean;\n isLoading: boolean;\n onClose: () => void;\n onCreate: (domainName: string) => void \| Promise;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-create-types.ts"},{"path":"src/types/my-organization/domain-management/domain-delete-types.ts","content":"/\n Domain delete modal types.\n * @module domain-delete-types\n /\n\nimport type { Domain, DomainDeleteMessages } from '@auth0/universal-components-core';\n\n/* Props for DomainDeleteModal. /\nexport interface DomainDeleteModalProps {\n translatorKey?: string;\n className?: string;\n customMessages?: Partial;\n domain: Domain \| null;\n isOpen: boolean;\n isLoading: boolean;\n onClose: () => void;\n onDelete: (domain: Domain) => void;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-delete-types.ts"},{"path":"src/types/my-organization/domain-management/domain-table-types.ts","content":"$8a","type":"registry:component","target":"types/my-organization/domain-management/domain-table-types.ts"},{"path":"src/types/my-organization/domain-management/domain-verify-types.ts","content":"/\n Domain verification modal types.\n * @module domain-verify-types\n /\n\nimport type { DomainVerifyMessages, Domain } from '@auth0/universal-components-core';\n\n/* Props for DomainVerifyModal. /\nexport interface DomainVerifyModalProps {\n translatorKey?: string;\n isOpen: boolean;\n isLoading?: boolean;\n domain: Domain \| null;\n error?: string;\n onClose: () => void;\n onVerify: (domain: Domain) => void;\n onDelete: (domain: Domain) => void;\n className?: string;\n customMessages?: Partial;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-verify-types.ts"},{"path":"src/types/theme-types.ts","content":"/\n Theme configuration types.\n * @module theme-types\n /\n\nimport type { StylingVariables } from '@auth0/universal-components-core';\nimport type React from 'react';\n\n/* Theme settings for provider. /\nexport interface ThemeSettings {\n theme?: 'default' \| 'minimal' \| 'rounded';\n mode?: 'light' \| 'dark';\n variables?: StylingVariables;\n}\n\n/* Theme input for ThemeProvider. /\nexport type ThemeInput = {\n theme?: 'default' \| 'minimal' \| 'rounded';\n mode?: 'light' \| 'dark';\n variables?: StylingVariables;\n loader?: React.ReactNode;\n};\n\n/* Theme context value. /\nexport type ThemeContextValue = {\n theme?: 'default' \| 'minimal' \| 'rounded';\n isDarkMode?: boolean;\n variables: StylingVariables;\n loader: React.ReactNode \| null;\n};\n","type":"registry:component","target":"types/theme-types.ts"},{"path":"src/types/toast-types.ts","content":"$8b","type":"registry:component","target":"types/toast-types.ts"},{"path":"src/lib/constants/form-constants.ts","content":"/\n Form constants used across the components.\n * @internal\n /\n\nexport const FORM_VALIDATION_MODE = 'onTouched';\nexport const FORM_REVALIDATE_MODE = 'onChange';\n","type":"registry:component","target":"lib/constants/form-constants.ts"},{"path":"src/lib/utils.ts","content":"/\n Tailwind CSS utility functions.\n * @module utils\n * @internal\n /\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/\n Merges class names with Tailwind CSS conflict resolution.\n * @param inputs - Input values to process\n * @returns The merged class name string\n * @internal\n /\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:component","target":"lib/utils.ts"},{"path":"src/lib/utils/my-organization/domain-management/domain-management-utils.ts","content":"/\n Domain management utility functions.\n * @module domain-management-utils\n * @internal\n /\n\nimport type { Domain } from '@/types/my-organization/domain-management/domain-table-types';\n\n/\n Returns badge variant for domain status.\n * @param status - Current status\n * @returns The badge variant\n * @internal\n /\nexport function getStatusBadgeVariant(\n status: Domain['status'],\n): 'success' \| 'warning' \| 'destructive' \| 'outline' {\n switch (status) {\n case 'verified':\n return 'success';\n case 'pending':\n return 'warning';\n case 'failed':\n return 'destructive';\n default:\n return 'outline';\n }\n}\n","type":"registry:component","target":"lib/utils/my-organization/domain-management/domain-management-utils.ts"},{"path":"src/styles/globals.css","content":"@import 'tailwindcss' important;\n@import '@auth0/universal-components-core/styles/globals.css';\n","type":"registry:component","target":"styles/globals.css"},{"path":"src/styles/tailwind.css","content":"/ Scan component library for class names /\n@source \".//.js\";\n","type":"registry:component","target":"styles/tailwind.css"}],"className":"h-[70svh] min-h-80"}]

{children} {showSortIcon && (

{sortDirection === false && ( )} {sortDirection === 'asc' && } {sortDirection === 'desc' && }

)}

), ); TableCell.displayName = 'TableCell'; export interface TableColumn { header: string; accessor: keyof T; sortable?: boolean; } export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }; 7d:Tf76,/** * Text input field with variants. * @module text-field * @internal */ import type { VariantProps } from 'class-variance-authority'; import { cva } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; const textFieldVariants = cva( "bg-input aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative box-border inline-flex w-full shrink-0 cursor-text items-center justify-center gap-2 overflow-hidden rounded-2xl text-sm transition-[color,box-shadow] duration-150 ease-in-out outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: 'border-border/50 text-input-foreground shadow-input-resting hover:shadow-input-hover hover:border-primary/25 focus-within:border-border focus-within:ring-primary/15 focus-within:ring-4', error: 'border-destructive-border/50 text-destructive-foreground shadow-input-destructive-resting hover:shadow-input-destructive-hover hover:border-destructive-border/25 focus-within:ring-destructive-border/15 focus-within:ring-4', }, size: { default: 'h-10', sm: 'h-9', lg: 'h-11', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ); export interface TextFieldProps extends Omit, 'size'> { error?: boolean; helperText?: string; size?: VariantProps['size']; variant?: VariantProps['variant']; startAdornment?: React.ReactNode; endAdornment?: React.ReactNode; } const TextField = React.forwardRef( ( { className, variant, size, error, helperText, startAdornment, endAdornment, ...props }, ref, ) => { const isDisabled = props.disabled; const WrapperComponent = props.id ? 'div' : 'label'; return (

{startAdornment && (

{startAdornment}

)} {endAdornment && (

{endAdornment}

)} {helperText && (

{helperText}

)}

); }, ); TextField.displayName = 'TextField'; export { TextField, textFieldVariants }; 7e:T9a2,/** * Tooltip using Radix primitives. * @module tooltip * @internal */ 'use client'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; import { cva, type VariantProps } from 'class-variance-authority'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { usePortalContainer } from '@/providers/portal-context'; const tooltipVariants = cva( 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 shadow-bevel-lg z-50 w-fit rounded-xl px-2 py-1 text-sm text-balance', { variants: { position: { top: 'origin-bottom', bottom: 'origin-top', left: 'origin-left', right: 'origin-right', }, }, defaultVariants: { position: 'top', }, }, ); function Tooltip({ children, ...props }: React.ComponentProps) { return ( {children} ); } function TooltipTrigger({ asChild = true, ...props }: React.ComponentProps) { return ; } interface TooltipContentProps extends React.ComponentProps, VariantProps {} const TooltipContent = React.forwardRef< React.ElementRef, TooltipContentProps >(({ className, side = 'top', position, sideOffset = 8, children, ...props }, ref) => { const portalContainer = usePortalContainer(); return ( {children} ); }); TooltipContent.displayName = TooltipPrimitive.Content.displayName; export { Tooltip, TooltipTrigger, TooltipContent, tooltipVariants }; 7f:T1da4,/** * Domain table UI logic hook. * @module use-domain-table-logic * @internal */ import { type Domain, type IdpKnownResponse } from '@auth0/universal-components-core'; import { useCallback, useEffect, useState } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useErrorHandler } from '@/hooks/shared/use-error-handler'; import type { UseDomainTableLogicOptions, UseDomainTableLogicResult, } from '@/types/my-organization/domain-management/domain-table-types'; /** * Hook for domain table modal state and action handlers. * @param props - Component props. * @param props.t - Translation function * @param props.onCreateDomain - The on create domain * @param props.onVerifyDomain - The on verify domain * @param props.onDeleteDomain - The on delete domain * @param props.onAssociateToProvider - The on associate to provider * @param props.onDeleteFromProvider - The on delete from provider * @param props.fetchProviders - The fetch providers * @param props.fetchDomains - The fetch domains * @internal * @returns Hook state and methods */ export function useDomainTableLogic({ t, onCreateDomain, onVerifyDomain, onDeleteDomain, onAssociateToProvider, onDeleteFromProvider, fetchProviders, fetchDomains, }: UseDomainTableLogicOptions): UseDomainTableLogicResult { const handleError = useErrorHandler(); const [showCreateModal, setShowCreateModal] = useState(false); const [showConfigureModal, setShowConfigureModal] = useState(false); const [showVerifyModal, setShowVerifyModal] = useState(false); const [verifyError, setVerifyError] = useState(undefined); const [showDeleteModal, setShowDeleteModal] = useState(false); const [selectedDomain, setSelectedDomain] = useState(null); const handleCreate = useCallback( async (domainUrl: string) => { try { const newDomain = await onCreateDomain({ domain: domainUrl }); showToast({ type: 'success', message: t('domain_table.notifications.domain_create.success', { domainName: newDomain?.domain, }), }); setSelectedDomain(newDomain); setShowCreateModal(false); setShowVerifyModal(true); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_create.error'), }); } }, [onCreateDomain, t, handleError], ); const handleVerify = useCallback( async (domain: Domain) => { try { const isVerified = await onVerifyDomain(domain); if (isVerified) { setShowVerifyModal(false); showToast({ type: 'success', message: t('domain_table.notifications.domain_verify.success', { domainName: domain.domain, }), }); } else { setVerifyError( t('domain_verify.modal.errors.verification_failed', { domainName: domain.domain }), ); } } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_verify.error'), }); } }, [onVerifyDomain, t, handleError], ); const handleDelete = useCallback( async (domain: Domain) => { try { await onDeleteDomain(domain); showToast({ type: 'success', message: t('domain_table.notifications.domain_delete.success', { domainName: domain.domain, }), }); setShowDeleteModal(false); setShowVerifyModal(false); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_delete.error'), }); } }, [onDeleteDomain, t, handleError], ); const handleToggleSwitch = useCallback( async (domain: Domain, provider: IdpKnownResponse, newCheckedValue: boolean) => { if (newCheckedValue) { try { await onAssociateToProvider(domain, provider); showToast({ type: 'success', message: t('domain_table.notifications.domain_associate_provider.success', { domain: domain.domain, idp: provider.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_associate_provider.error'), }); } } else { try { await onDeleteFromProvider(domain, provider); showToast({ type: 'success', message: t('domain_table.notifications.domain_delete_provider.success', { domain: domain.domain, idp: provider.name, }), }); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_delete_provider.error'), }); } } }, [onAssociateToProvider, onDeleteFromProvider, t, handleError], ); const handleCloseVerifyModal = useCallback(() => { setShowVerifyModal(false); setVerifyError(undefined); }, []); const handleCreateClick = useCallback(() => { setShowCreateModal(true); }, []); const handleConfigureClick = useCallback( async (domain: Domain) => { setSelectedDomain(domain); if (domain.status !== 'verified') { setShowVerifyModal(true); } else { try { await fetchProviders(domain); setShowConfigureModal(true); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.fetch_providers_error'), }); } } }, [fetchProviders, t, handleError], ); const handleVerifyClick = useCallback( async (domain: Domain) => { setSelectedDomain(domain); try { const isVerified = await onVerifyDomain(domain); if (isVerified) { await fetchProviders(domain); setShowConfigureModal(true); showToast({ type: 'success', message: t('domain_table.notifications.domain_verify.success', { domainName: domain.domain, }), }); } else { showToast({ type: 'error', message: t('domain_table.notifications.domain_verify.verification_failed', { domainName: domain.domain, }), }); } } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.domain_verify.error'), }); } }, [onVerifyDomain, fetchProviders, t, handleError], ); const handleDeleteClick = useCallback((domain: Domain) => { setSelectedDomain(domain); setShowVerifyModal(false); setShowDeleteModal(true); }, []); // Initialization useEffect(() => { try { fetchDomains(); } catch (error) { handleError(error, { fallbackMessage: t('domain_table.notifications.fetch_domains_error'), }); } }, []); return { // Modal state showCreateModal, showConfigureModal, showVerifyModal, showDeleteModal, verifyError, selectedDomain, // State setters setShowCreateModal, setShowConfigureModal, setShowVerifyModal, setShowDeleteModal, // Handlers handleCreate, handleVerify, handleDelete, handleToggleSwitch, handleCloseVerifyModal, handleCreateClick, handleConfigureClick, handleVerifyClick, handleDeleteClick, }; } 80:T1d4a,/** * Domain table data and mutations hook. * @module use-domain-table */ import { type Domain, type IdpKnownResponse, type CreateOrganizationDomainRequestContent, type IdentityProviderAssociatedWithDomain, BusinessError, } from '@auth0/universal-components-core'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { useState } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; import { useTranslator } from '@/hooks/shared/use-translator'; import type { UseDomainTableOptions, UseDomainTableResult, } from '@/types/my-organization/domain-management/domain-table-types'; const domainQueryKeys = { all: ['domains'] as const, list: () => [...domainQueryKeys.all, 'list'] as const, providers: (domainId: string) => [...domainQueryKeys.all, 'providers', domainId] as const, }; /** * Hook for domain table data fetching and CRUD operations. * @param props - Component props. * @param props.createAction - Configuration for the create action * @param props.deleteAction - Configuration for the delete action * @param props.verifyAction - Configuration for the verify action * @param props.associateToProviderAction - Configuration for associating to a provider * @param props.deleteFromProviderAction - Configuration for deleting from a provider * @param props.customMessages - Custom translation messages to override defaults * @returns Hook state and methods */ export function useDomainTable({ createAction, deleteAction, verifyAction, associateToProviderAction, deleteFromProviderAction, customMessages, }: UseDomainTableOptions): UseDomainTableResult { const { t } = useTranslator('domain_management.domain_table.notifications', customMessages); const { coreClient } = useCoreClient(); const queryClient = useQueryClient(); const [selectedDomainId, setSelectedDomainId] = useState(null); const [selectedDomainName, setSelectedDomainName] = useState(null); const fetchProvidersForDomain = async (domainName: string) => { const api = coreClient!.getMyOrganizationApiClient(); const allProvidersResponse = await api.organization.identityProviders.list(); const allProviders = allProvidersResponse?.identity_providers ?? []; return allProviders.map( (provider): IdentityProviderAssociatedWithDomain => ({ ...provider, is_associated: provider.domains?.includes(domainName) ?? false, }), ); }; const domainsQuery = useQuery({ queryKey: domainQueryKeys.list(), queryFn: async () => { const { response } = await coreClient! .getMyOrganizationApiClient() .organization.domains.list(); return response?.organization_domains ?? []; }, enabled: !!coreClient, }); const providersQuery = useQuery({ queryKey: domainQueryKeys.providers(selectedDomainId ?? ''), queryFn: () => fetchProvidersForDomain(selectedDomainName!), enabled: !!coreClient && !!selectedDomainId && !!selectedDomainName, }); const createDomainMutation = useMutation({ mutationFn: async (data: CreateOrganizationDomainRequestContent): Promise => { if (createAction?.onBefore && !createAction.onBefore(data as Domain)) { throw new BusinessError({ message: t('domain_create.on_before') }); } return coreClient!.getMyOrganizationApiClient().organization.domains.create(data); }, onSuccess: (result) => { createAction?.onAfter?.(result); queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() }); }, }); const verifyDomainMutation = useMutation({ mutationFn: async (domain: Domain): Promise => { if (verifyAction?.onBefore && !verifyAction.onBefore(domain)) { throw new BusinessError({ message: t('domain_verify.on_before') }); } const response = await coreClient! .getMyOrganizationApiClient() .organization.domains.verify.create(domain.id); return response.status === 'verified'; }, onSuccess: (_, domain) => { verifyAction?.onAfter?.(domain); queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() }); }, }); const deleteDomainMutation = useMutation({ mutationFn: async (domain: Domain): Promise => { if (deleteAction?.onBefore && !deleteAction.onBefore(domain)) { throw new BusinessError({ message: t('domain_delete.on_before') }); } await coreClient!.getMyOrganizationApiClient().organization.domains.delete(domain.id); }, onSuccess: (_, domain) => { deleteAction?.onAfter?.(domain); queryClient.invalidateQueries({ queryKey: domainQueryKeys.list() }); queryClient.removeQueries({ queryKey: domainQueryKeys.providers(domain.id) }); }, }); const associateToProviderMutation = useMutation({ mutationFn: async ({ domain, provider }: { domain: Domain; provider: IdpKnownResponse }) => { if ( associateToProviderAction?.onBefore && !associateToProviderAction.onBefore(domain, provider) ) { throw new BusinessError({ message: t('domain_associate_provider.on_before') }); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.create(provider.id!, { domain: domain.domain }); }, onSuccess: (_, { domain, provider }) => { associateToProviderAction?.onAfter?.(domain, provider); queryClient.invalidateQueries({ queryKey: domainQueryKeys.providers(domain.id) }); }, }); const deleteFromProviderMutation = useMutation({ mutationFn: async ({ domain, provider }: { domain: Domain; provider: IdpKnownResponse }) => { if ( deleteFromProviderAction?.onBefore && !deleteFromProviderAction.onBefore(domain, provider) ) { throw new BusinessError({ message: t('domain_delete_provider.on_before') }); } await coreClient! .getMyOrganizationApiClient() .organization.identityProviders.domains.delete(provider.id!, domain.domain); }, onSuccess: (_, { domain, provider }) => { deleteFromProviderAction?.onAfter?.(domain, provider); queryClient.invalidateQueries({ queryKey: domainQueryKeys.providers(domain.id) }); }, }); return { domains: domainsQuery.data ?? [], providers: providersQuery.data ?? [], isFetching: domainsQuery.isLoading, isCreating: createDomainMutation.isPending, isDeleting: deleteDomainMutation.isPending, isVerifying: verifyDomainMutation.isPending, isLoadingProviders: providersQuery.isLoading, fetchProviders: async (domain: Domain) => { setSelectedDomainId(domain.id); setSelectedDomainName(domain.domain); await queryClient.ensureQueryData({ queryKey: domainQueryKeys.providers(domain.id), queryFn: () => fetchProvidersForDomain(domain.domain), }); }, fetchDomains: async () => { await queryClient.getQueryData(domainQueryKeys.list()); }, onCreateDomain: (data) => createDomainMutation.mutateAsync(data), onVerifyDomain: (domain) => verifyDomainMutation.mutateAsync(domain), onDeleteDomain: (domain) => deleteDomainMutation.mutateAsync(domain), onAssociateToProvider: (domain, provider) => associateToProviderMutation.mutateAsync({ domain, provider }), onDeleteFromProvider: (domain, provider) => deleteFromProviderMutation.mutateAsync({ domain, provider }), }; } 81:T4bd,/** * CoreClient initialization hook. * @module use-core-client-initialization * @internal */ import type { CoreClientInterface, AuthDetails, I18nInitOptions, } from '@auth0/universal-components-core'; import { createCoreClient } from '@auth0/universal-components-core'; import * as React from 'react'; interface UseCoreClientInitializationProps { authDetails: AuthDetails; i18nOptions?: I18nInitOptions; } /** * @internal * @param props - Initialization props. * @returns The initialized CoreClient instance, or null while initializing. */ export const useCoreClientInitialization = ({ authDetails, i18nOptions, }: UseCoreClientInitializationProps): CoreClientInterface | null => { const { authProxyUrl } = authDetails; const [coreClient, setCoreClient] = React.useState(null); React.useEffect(() => { const initializeCoreClient = async () => { try { const initializedCoreClient = await createCoreClient(authDetails, i18nOptions); setCoreClient(initializedCoreClient); } catch (error) { console.error(error); } }; initializeCoreClient(); }, [authProxyUrl, i18nOptions]); return coreClient; }; 82:T7a8,/** * Error handling hook with toast error. * @module use-error-handler */ import { isNetworkError, isNotifiableError, resolveErrorMessage, getStatusCode, hasApiErrorBody, ERROR_CODES, } from '@auth0/universal-components-core'; import { useCallback } from 'react'; import { showToast } from '@/components/auth0/shared/toast'; import { useTranslator } from '@/hooks/shared/use-translator'; interface ErrorHandlerCallOptions { fallbackMessage?: string; } /** * Hook for consistent error handling across the app. * * @returns Error handler function. * * @example * const handleError = useErrorHandler(); * * // With custom message * onError: (error) => handleError(error, { * fallbackMessage: t('my_error') * }); * * // With defaults * onError: handleError; */ export function useErrorHandler() { const { t } = useTranslator('common'); return useCallback( (error: unknown, options: ErrorHandlerCallOptions = {}): void => { if (!isNotifiableError(error)) return; const getCustomErrorMessage = (err: unknown): string | undefined => { if (isNetworkError(err)) return t('error.network'); const status = getStatusCode(err); switch (status) { case 400: return t('error.bad_request'); case 401: return t('error.missing_token'); case 403: return hasApiErrorBody(err) && err.body?.type?.includes(ERROR_CODES.INSUFFICIENT_SCOPE) ? t('error.insufficient_scope') : t('error.forbidden'); case 404: return t('error.not_found'); case 429: return t('error.rate_limit'); default: return undefined; } }; showToast({ type: 'error', message: getCustomErrorMessage(error) ?? resolveErrorMessage(error, options.fallbackMessage ?? t('error.generic')), }); }, [t], ); } 83:T4be,/** * Toast settings management hook. * @module use-toast-provider * @internal */ import { useEffect, useMemo } from 'react'; import { setGlobalToastSettings } from '@/components/auth0/shared/toast'; import { DEFAULT_TOAST_SETTINGS, type ToastSettings } from '@/types/toast-types'; /** * Hook to merge and apply toast settings. * @param toastSettings - Optional toast settings. * @returns Merged toast settings. * @internal */ export const useToastProvider = (toastSettings?: ToastSettings) => { const mergedToastSettings = useMemo(() => { if (!toastSettings) { return DEFAULT_TOAST_SETTINGS; } if (toastSettings.provider === 'custom') { return toastSettings; } const defaultSonnerSettings = DEFAULT_TOAST_SETTINGS.provider === 'sonner' ? DEFAULT_TOAST_SETTINGS.settings || {} : {}; return { provider: 'sonner' as const, settings: { ...defaultSonnerSettings, ...(toastSettings.provider === 'sonner' ? toastSettings.settings : {}), }, } satisfies ToastSettings; }, [toastSettings]); useEffect(() => { setGlobalToastSettings(mergedToastSettings); }, [mergedToastSettings]); return mergedToastSettings; }; 84:T5bd,/** * i18n translator hook. * @module use-translator */ import { type EnhancedTranslationFunction } from '@auth0/universal-components-core'; import { useMemo, useCallback } from 'react'; import { useCoreClient } from '@/hooks/shared/use-core-client'; /** * Hook to access i18n translations. * @param namespace - Translation namespace. * @param overrides - Optional translation overrides. * @returns Translator function and language utilities. */ export function useTranslator( namespace: string, overrides?: Record, ): { t: EnhancedTranslationFunction; changeLanguage: (language: string, fallbackLanguage?: string) => Promise; currentLanguage: string; fallbackLanguage: string | undefined; } { const { coreClient } = useCoreClient(); if (!coreClient) { throw new Error( 'useTranslator must be used within Auth0ComponentProvider with initialized CoreClient', ); } const translator = useMemo(() => { return coreClient.i18nService.translator(namespace, overrides); }, [coreClient, namespace, overrides]); const changeLanguage = useCallback( async (language: string, fallbackLanguage?: string) => { await coreClient.i18nService.changeLanguage(language, fallbackLanguage); }, [coreClient], ); return { t: translator, changeLanguage, currentLanguage: coreClient.i18nService.currentLanguage, fallbackLanguage: coreClient.i18nService.fallbackLanguage, }; } 85:Tb67,/** * RWA proxy provider for server-side auth. * @module proxy-provider */ 'use client'; import type { AuthDetails } from '@auth0/universal-components-core'; import * as React from 'react'; import { Toaster } from '@/components/auth0/shared/sonner'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Spinner } from '@/components/ui/spinner'; import { CoreClientContext } from '@/hooks/shared/use-core-client'; import { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization'; import { useToastProvider } from '@/hooks/shared/use-toast-provider'; import { QueryProvider } from '@/providers/query-provider'; import { ThemeProvider } from '@/providers/theme-provider'; import type { Auth0ComponentProviderProps } from '@/types/auth-types'; /** * Auth0 provider for RWAs using backend proxy auth. * @param props - Provider configuration including domain, proxyConfig, i18n, themeSettings, toastSettings, cacheConfig, loader, and children. * @returns Provider component tree */ export const Auth0ComponentProvider = ({ i18n, domain, proxyConfig, previewMode, themeSettings = { theme: 'default', mode: 'light', variables: { common: {}, light: {}, dark: {}, }, }, toastSettings, cacheConfig, loader, children, }: Extract & { children: React.ReactNode }) => { const mergedToastSettings = useToastProvider(toastSettings); const { baseUrl, fetcher } = proxyConfig; const memoizedAuthDetails = React.useMemo( () => ({ domain, authProxyUrl: baseUrl, fetcher, previewMode, }), [domain, baseUrl, fetcher, previewMode], ); const coreClient = useCoreClientInitialization({ authDetails: memoizedAuthDetails, i18nOptions: i18n, }); const coreClientValue = React.useMemo( () => ({ coreClient, }), [coreClient], ); const fallback = loader || (

); return ( {mergedToastSettings.provider === 'sonner' && ( )} {coreClient ? ( {children} ) : ( fallback )} ); }; export default Auth0ComponentProvider; 86:T1468,'use client'; /** * TanStack Query provider wrapper. * @module query-provider * @internal */ import { isMfaRequiredError, isNotifiableError } from '@auth0/universal-components-core'; import { MutationCache, type Query, QueryCache, QueryClient, QueryClientProvider as TanStackQueryClientProvider, } from '@tanstack/react-query'; import { useMemo, useState, type ReactElement, type ReactNode } from 'react'; import { GateKeeperContext } from '@/providers/gate-keeper-context'; /** Query cache configuration. */ export interface QueryCacheConfig { enabled?: boolean; staleTime?: number; gcTime?: number; refetchOnWindowFocus?: boolean | 'always'; } /** Default cache configuration. */ export const DEFAULT_CACHE_CONFIG: Readonly> = { enabled: true, staleTime: 2 * 60 * 1000, gcTime: 5 * 60 * 1000, refetchOnWindowFocus: false, }; const QUERY_RETRY_CONFIG = { maxRetries: 3, maxRetryDelay: 30_000, backoffMultiplier: 2, } as const; const MUTATION_RETRY_CONFIG = { maxRetries: 1, } as const; const DISABLED_CACHE_GC_TIME = 5 * 1000; /** * Merges user config with defaults. * @param userConfig - User-provided cache config. * @returns The resolved cache configuration * @internal */ export function resolveCacheConfig(userConfig?: QueryCacheConfig): Required { const merged: Required = { ...DEFAULT_CACHE_CONFIG, ...userConfig, }; if (!merged.enabled) { return { ...merged, staleTime: 0, gcTime: DISABLED_CACHE_GC_TIME, }; } return merged; } /** * Returns true if a cached query has an error that GateKeeper should handle. * @param query - The cached query to check. * @returns Whether the query error should be intercepted by GateKeeper. */ function isGateKeeperError(query: Query): boolean { return !!query.state.error && !isNotifiableError(query.state.error); } /** * Creates a QueryClient with config and global GateKeeper error interception. * @param cacheConfig - Cache configuration. * @param setGateKeeperState - Setter for GateKeeper context state. * @returns The configured QueryClient instance * @internal */ function createQueryClient( cacheConfig: Required, setGateKeeperState: (state: { error: Error; onRetry: () => Promise } | null) => void, ): QueryClient { const queryClient = new QueryClient({ queryCache: new QueryCache({ onError: (error) => { if (!isNotifiableError(error)) { setGateKeeperState({ error, onRetry: async () => { await queryClient.refetchQueries({ predicate: isGateKeeperError }); const stillFailing = queryClient.getQueryCache().getAll().some(isGateKeeperError); if (!stillFailing) setGateKeeperState(null); return !stillFailing; }, }); } }, }), mutationCache: new MutationCache({ onError: (error, variables, _context, mutation) => { if (isMfaRequiredError(error)) { setGateKeeperState({ error, onRetry: async () => { try { await mutation.execute(variables); setGateKeeperState(null); return true; } catch { return false; } }, }); } }, }), defaultOptions: { queries: { staleTime: cacheConfig.staleTime, gcTime: cacheConfig.gcTime, refetchOnWindowFocus: cacheConfig.refetchOnWindowFocus, retry: (failureCount, error) => !isMfaRequiredError(error) && failureCount < QUERY_RETRY_CONFIG.maxRetries, retryDelay: (attemptIndex: number) => Math.min( 1000 * QUERY_RETRY_CONFIG.backoffMultiplier ** attemptIndex, QUERY_RETRY_CONFIG.maxRetryDelay, ), refetchOnReconnect: true, }, mutations: { retry: (failureCount, error) => !isMfaRequiredError(error) && failureCount < MUTATION_RETRY_CONFIG.maxRetries, }, }, }); return queryClient; } /** Props for QueryProvider. */ export interface QueryProviderProps { children: ReactNode; /** Cache config, only read on mount. */ cacheConfig?: QueryCacheConfig; } /** * Internal TanStack Query provider wrapper. * @param props - Component props. * @param props.children - Child components. * @param props.cacheConfig - Cache configuration. * @returns The context provider component * @internal */ export function QueryProvider({ children, cacheConfig }: QueryProviderProps): ReactElement { const [gateKeeperState, setGateKeeperState] = useState<{ error: Error; onRetry: () => Promise; } | null>(null); const [queryClient] = useState(() => createQueryClient(resolveCacheConfig(cacheConfig), setGateKeeperState), ); const contextValue = useMemo(() => gateKeeperState ?? { error: null }, [gateKeeperState]); return ( {children} ); } 87:Tdaf,/** * SPA provider using @auth0/auth0-react. * @module spa-provider */ 'use client'; import { useAuth0 } from '@auth0/auth0-react'; import type { AuthDetails, BasicAuth0ContextInterface } from '@auth0/universal-components-core'; import * as React from 'react'; import { Toaster } from '@/components/auth0/shared/sonner'; import { StyledScope } from '@/components/auth0/shared/styled-scope'; import { Spinner } from '@/components/ui/spinner'; import { CoreClientContext } from '@/hooks/shared/use-core-client'; import { useCoreClientInitialization } from '@/hooks/shared/use-core-client-initialization'; import { useToastProvider } from '@/hooks/shared/use-toast-provider'; import { QueryProvider } from '@/providers/query-provider'; import { ThemeProvider } from '@/providers/theme-provider'; import type { Auth0ComponentProviderProps } from '@/types/auth-types'; /** * Auth0 provider for SPAs. Wraps components with required contexts. * @param props - Provider configuration including domain, mode, authContext, i18n, themeSettings, toastSettings, cacheConfig, loader, and children. * @returns Provider component tree */ export const Auth0ComponentProvider = ( props: Extract & { children: React.ReactNode }, ) => { const { i18n, previewMode, themeSettings = { theme: 'default', mode: 'light', variables: { common: {}, light: {}, dark: {}, }, }, toastSettings, cacheConfig, loader, children, authContext, } = props; const mergedToastSettings = useToastProvider(toastSettings); const auth0ReactContext = useAuth0(); const resolvedAuthContext = React.useMemo(() => { if (authContext) { return authContext; } if (auth0ReactContext && 'isAuthenticated' in auth0ReactContext) { return auth0ReactContext as BasicAuth0ContextInterface; } throw new Error( 'Auth0ContextInterface is not available. Make sure you wrap your app with Auth0Provider from @auth0/auth0-react, or pass authContext.', ); }, [auth0ReactContext, authContext]); const memoizedAuthDetails = React.useMemo( () => ({ contextInterface: resolvedAuthContext, previewMode, }), [resolvedAuthContext, previewMode], ); const coreClient = useCoreClientInitialization({ authDetails: memoizedAuthDetails, i18nOptions: i18n, }); const coreClientValue = React.useMemo( () => ({ coreClient, }), [coreClient], ); const fallback = loader || (

); return ( {mergedToastSettings.provider === 'sonner' && ( )} {coreClient ? ( {children} ) : ( fallback )} ); }; export default Auth0ComponentProvider; 88:T7c9,/** * Theme provider for styling configuration. * @module theme-provider * @internal */ 'use client'; import { applyStyleOverrides, type StylingVariables } from '@auth0/universal-components-core'; import * as React from 'react'; import { PortalContext } from '@/providers/portal-context'; import type { ThemeContextValue, ThemeInput } from '@/types/theme-types'; /** Default empty style overrides. */ const defaultStyleOverrides: StylingVariables = { common: {}, light: {}, dark: {} }; /** * Theme context for accessing theme settings. * @internal * @returns The context provider component */ export const ThemeContext = React.createContext({ isDarkMode: false, variables: defaultStyleOverrides, loader: null, }); /** * Provides theme configuration to the component tree. * @param props - Component props. * @param props.themeSettings - Theme settings with mode, variables, and loader. * @param props.children - Child components. * @returns Theme provider. * @internal */ export const ThemeProvider: React.FC<{ themeSettings?: ThemeInput; children: React.ReactNode; }> = ({ themeSettings, children }) => { const { variables, loader, mode, theme } = React.useMemo( () => ({ variables: themeSettings?.variables ?? defaultStyleOverrides, loader: themeSettings?.loader ?? null, mode: themeSettings?.mode, theme: themeSettings?.theme ?? 'default', }), [themeSettings], ); const [portalContainer, setPortalContainer] = React.useState(null); React.useEffect(() => { applyStyleOverrides(variables, mode, theme); }, [variables, mode, theme]); return ( {children}

); }; 89:T478,/** * Auth provider configuration types. * @module auth-types */ import type { AuthDetails, FetcherAuthParams } from '@auth0/universal-components-core'; import type * as React from 'react'; import type { QueryCacheConfig } from '@/types/cache-types'; import type { I18nOptions } from '@/types/i18n-types'; import type { ThemeSettings } from '@/types/theme-types'; import type { ToastSettings } from '@/types/toast-types'; /** Props for Auth0ComponentProvider. */ export type Auth0ComponentProviderProps = ( | { mode?: 'direct'; authContext?: AuthDetails['contextInterface']; proxyConfig?: never; } | { mode: 'proxy'; domain: string; proxyConfig: { baseUrl: string; fetcher?: ( url: string, init?: RequestInit, authParams?: FetcherAuthParams, ) => Promise; }; } ) & { i18n?: I18nOptions; themeSettings?: ThemeSettings; loader?: React.ReactNode; toastSettings?: ToastSettings; /** TanStack Query cache config. Use `{ enabled: false }` to disable. */ cacheConfig?: QueryCacheConfig; previewMode?: boolean; }; 8a:T128e,/** * Domain table types. * @module domain-table-types */ import type { SharedComponentProps, IdpKnownResponse, DomainCreateMessages, DomainCreateSchemas, ComponentAction, Domain, DomainDeleteMessages, DomainConfigureMessages, DomainVerifyMessages, DomainTableMessages, CreateOrganizationDomainRequestContent, EnhancedTranslationFunction, IdentityProviderAssociatedWithDomain, } from '@auth0/universal-components-core'; export type { Domain }; /** CSS classes for DomainTable. */ export interface DomainTableClasses { 'DomainTable-header'?: string; 'DomainTable-table'?: string; 'DomainTable-createModal'?: string; 'DomainTable-configureModal'?: string; 'DomainTable-deleteModal'?: string; } /** DomainTable translation messages. */ export interface DomainTableMainMessages extends DomainTableMessages { create: DomainCreateMessages; configure: DomainConfigureMessages; verify: DomainVerifyMessages; delete: DomainDeleteMessages; } /** DomainTable validation schemas. */ export interface DomainTableSchema { create?: DomainCreateSchemas; } /** Props for DomainTable component. */ export interface DomainTableProps extends SharedComponentProps { hideHeader?: boolean; createAction?: ComponentAction; verifyAction?: ComponentAction; deleteAction?: ComponentAction; associateToProviderAction?: ComponentAction; deleteFromProviderAction?: ComponentAction; onOpenProvider?: (provider: IdpKnownResponse) => void; onCreateProvider?: () => void; } // DomainTableView component props export interface DomainTableViewProps { logic: UseDomainTableResult & DomainTableProps; handlers: UseDomainTableLogicResult; } /** Props for DomainTable actions column. */ export interface DomainTableActionsColumnProps { customMessages?: Partial; readOnly: boolean; domain: Domain; onView: (domain: Domain) => void; onConfigure: (domain: Domain) => void; onVerify: (domain: Domain) => void; onDelete: (domain: Domain) => void; } export interface UseDomainTableOptions { createAction?: DomainTableProps['createAction']; verifyAction?: DomainTableProps['verifyAction']; deleteAction?: DomainTableProps['deleteAction']; associateToProviderAction?: DomainTableProps['associateToProviderAction']; deleteFromProviderAction?: DomainTableProps['deleteFromProviderAction']; customMessages?: DomainTableProps['customMessages']; } export interface UseDomainTableResult extends SharedComponentProps { domains: Domain[]; providers: IdentityProviderAssociatedWithDomain[]; isFetching: boolean; isLoadingProviders: boolean; isCreating: boolean; isDeleting: boolean; isVerifying: boolean; fetchProviders: (domain: Domain) => Promise; fetchDomains: () => Promise; onCreateDomain: (data: CreateOrganizationDomainRequestContent) => Promise; onVerifyDomain: (data: Domain) => Promise; onDeleteDomain: (domain: Domain) => Promise; onAssociateToProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; onDeleteFromProvider: (domain: Domain, provider: IdpKnownResponse) => Promise; } export interface UseDomainTableLogicOptions { t: EnhancedTranslationFunction; onCreateDomain: UseDomainTableResult['onCreateDomain']; onVerifyDomain: UseDomainTableResult['onVerifyDomain']; onDeleteDomain: UseDomainTableResult['onDeleteDomain']; onAssociateToProvider: UseDomainTableResult['onAssociateToProvider']; onDeleteFromProvider: UseDomainTableResult['onDeleteFromProvider']; fetchProviders: UseDomainTableResult['fetchProviders']; fetchDomains: UseDomainTableResult['fetchDomains']; } export interface UseDomainTableLogicResult { // Modal state showCreateModal: boolean; showConfigureModal: boolean; showVerifyModal: boolean; showDeleteModal: boolean; verifyError: string | undefined; selectedDomain: Domain | null; // State setters setShowCreateModal: (show: boolean) => void; setShowConfigureModal: (show: boolean) => void; setShowVerifyModal: (show: boolean) => void; setShowDeleteModal: (show: boolean) => void; // Handlers handleCreate: (domainUrl: string) => Promise; handleVerify: (domain: Domain) => Promise; handleDelete: (domain: Domain) => void; handleToggleSwitch: (domain: Domain, provider: IdpKnownResponse, checked: boolean) => void; handleCloseVerifyModal: () => void; handleCreateClick: () => void; handleConfigureClick: (domain: Domain) => void; handleVerifyClick: (domain: Domain) => Promise; handleDeleteClick: (domain: Domain) => void; } 8b:T5e4,/** * Toast notification types. * @module toast-types */ import type { ReactNode } from 'react'; import type { ExternalToast } from 'sonner'; /** Toast notification type. */ export type ToastType = 'success' | 'info' | 'warning' | 'error'; /** Toast position options. */ export type ToastPosition = | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'; /** Custom toast method signature. */ export interface CustomToastMethod { (message: string): void; } /** Custom toast methods for overriding default behavior. */ export interface CustomToastMethods { success?: CustomToastMethod; error?: CustomToastMethod; warning?: CustomToastMethod; info?: CustomToastMethod; dismiss?: (toastId?: string) => void; } /** Sonner toast settings. */ export interface SonnerSettings { position?: ToastPosition; maxToasts?: number; duration?: number; dismissible?: boolean; closeButton?: boolean; } /** Toast provider configuration. */ export type ToastSettings = | { provider?: 'sonner'; settings?: SonnerSettings } | { provider: 'custom'; methods: CustomToastMethods }; /** Toast options for showToast. */ export interface ToastOptions { type: ToastType; message: string; className?: string; icon?: ReactNode; data?: ExternalToast; } /** Default toast settings. */ export const DEFAULT_TOAST_SETTINGS: ToastSettings = { provider: 'sonner', settings: { position: 'top-right', closeButton: true, }, } as const; 60:["$","$L62",null,{"files":[{"path":"src/components/auth0/my-organization/domain-table.tsx","content":"$63","type":"registry:block","target":"components/auth0/my-organization/domain-table.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx","content":"$64","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-configure/domain-configure-providers-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx","content":"$65","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-create/domain-create-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx","content":"$66","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-delete/domain-delete-modal.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx","content":"$67","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-table/domain-table-actions-column.tsx"},{"path":"src/components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx","content":"$68","type":"registry:component","target":"components/auth0/my-organization/shared/domain-management/domain-verify/domain-verify-modal.tsx"},{"path":"src/components/auth0/shared/copyable-text-field.tsx","content":"$69","type":"registry:component","target":"components/auth0/shared/copyable-text-field.tsx"},{"path":"src/components/auth0/shared/data-table.tsx","content":"$6a","type":"registry:component","target":"components/auth0/shared/data-table.tsx"},{"path":"src/components/auth0/shared/form-actions.tsx","content":"$6b","type":"registry:component","target":"components/auth0/shared/form-actions.tsx"},{"path":"src/components/auth0/shared/gate-keeper/gate-keeper.tsx","content":"$6c","type":"registry:component","target":"components/auth0/shared/gate-keeper/gate-keeper.tsx"},{"path":"src/components/auth0/shared/header.tsx","content":"$6d","type":"registry:component","target":"components/auth0/shared/header.tsx"},{"path":"src/components/auth0/shared/middle-ellipsis-text.tsx","content":"$6e","type":"registry:component","target":"components/auth0/shared/middle-ellipsis-text.tsx"},{"path":"src/components/auth0/shared/sonner.tsx","content":"/**\n * Sonner toast provider wrapper.\n * @module sonner\n * @internal\n */\n\n'use client';\n\nimport type { ToasterProps } from 'sonner';\nimport { Toaster as Sonner } from 'sonner';\n\nimport { useTheme } from '@/hooks/shared/use-theme';\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { isDarkMode } = useTheme();\n const theme = isDarkMode ? 'dark' : 'light';\n\n return (\n \n );\n};\n\nexport { Toaster };\n","type":"registry:component","target":"components/auth0/shared/sonner.tsx"},{"path":"src/components/auth0/shared/styled-scope.tsx","content":"$6f","type":"registry:component","target":"components/auth0/shared/styled-scope.tsx"},{"path":"src/components/auth0/shared/toast.tsx","content":"$70","type":"registry:component","target":"components/auth0/shared/toast.tsx"},{"path":"src/components/ui/alert.tsx","content":"$71","type":"registry:component","target":"components/ui/alert.tsx"},{"path":"src/components/ui/badge.tsx","content":"$72","type":"registry:component","target":"components/ui/badge.tsx"},{"path":"src/components/ui/button.tsx","content":"$73","type":"registry:component","target":"components/ui/button.tsx"},{"path":"src/components/ui/card.tsx","content":"$74","type":"registry:component","target":"components/ui/card.tsx"},{"path":"src/components/ui/checkbox.tsx","content":"$75","type":"registry:component","target":"components/ui/checkbox.tsx"},{"path":"src/components/ui/dialog.tsx","content":"$76","type":"registry:component","target":"components/ui/dialog.tsx"},{"path":"src/components/ui/dropdown-menu.tsx","content":"$77","type":"registry:component","target":"components/ui/dropdown-menu.tsx"},{"path":"src/components/ui/form.tsx","content":"$78","type":"registry:component","target":"components/ui/form.tsx"},{"path":"src/components/ui/inline-code.tsx","content":"/**\n * Inline code display component.\n * @module inline-code\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface InlineCodeProps {\n children: React.ReactNode;\n className?: string;\n}\n\nexport function InlineCode({ children, className }: InlineCodeProps) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/inline-code.tsx"},{"path":"src/components/ui/label.tsx","content":"/**\n * Form label component.\n * @module label\n * @internal\n */\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport function Label({ children, className, ...props }: React.ComponentPropsWithoutRef<'label'>) {\n return (\n \n {children}\n \n );\n}\n","type":"registry:component","target":"components/ui/label.tsx"},{"path":"src/components/ui/modal.tsx","content":"$79","type":"registry:component","target":"components/ui/modal.tsx"},{"path":"src/components/ui/spinner.tsx","content":"$7a","type":"registry:component","target":"components/ui/spinner.tsx"},{"path":"src/components/ui/switch.tsx","content":"$7b","type":"registry:component","target":"components/ui/switch.tsx"},{"path":"src/components/ui/table.tsx","content":"$7c","type":"registry:component","target":"components/ui/table.tsx"},{"path":"src/components/ui/text-field.tsx","content":"$7d","type":"registry:component","target":"components/ui/text-field.tsx"},{"path":"src/components/ui/tooltip.tsx","content":"$7e","type":"registry:component","target":"components/ui/tooltip.tsx"},{"path":"src/hooks/my-organization/use-domain-table-logic.ts","content":"$7f","type":"registry:component","target":"hooks/my-organization/use-domain-table-logic.ts"},{"path":"src/hooks/my-organization/use-domain-table.ts","content":"$80","type":"registry:component","target":"hooks/my-organization/use-domain-table.ts"},{"path":"src/hooks/shared/use-core-client-initialization.ts","content":"$81","type":"registry:component","target":"hooks/shared/use-core-client-initialization.ts"},{"path":"src/hooks/shared/use-core-client.ts","content":"/**\n * CoreClient context and hook.\n * @module use-core-client\n */\n\nimport type { CoreClientInterface } from '@auth0/universal-components-core';\nimport * as React from 'react';\n\n/** @internal */\nconst CoreClientContext = React.createContext<{\n coreClient: CoreClientInterface | null;\n}>({\n coreClient: null,\n});\n\n/**\n * Hook to access CoreClient from context.\n * @returns CoreClient instance or null.\n * @throws If used outside Auth0ComponentProvider.\n */\nexport const useCoreClient = () => {\n const context = React.useContext(CoreClientContext);\n if (!context) {\n throw new Error('useCoreClient must be used within Auth0ComponentProvider');\n }\n return context;\n};\n\nexport { CoreClientContext };\n","type":"registry:component","target":"hooks/shared/use-core-client.ts"},{"path":"src/hooks/shared/use-error-handler.ts","content":"$82","type":"registry:component","target":"hooks/shared/use-error-handler.ts"},{"path":"src/hooks/shared/use-theme.ts","content":"/**\n * Theme context hook.\n * @module use-theme\n */\n\n'use client';\n\nimport { useContext } from 'react';\n\nimport { ThemeContext } from '@/providers/theme-provider';\n\n/**\n * Hook to access theme context (mode, variables, loader).\n * @returns Theme context value.\n * @throws If used outside ThemeProvider.\n */\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n","type":"registry:component","target":"hooks/shared/use-theme.ts"},{"path":"src/hooks/shared/use-toast-provider.ts","content":"$83","type":"registry:component","target":"hooks/shared/use-toast-provider.ts"},{"path":"src/hooks/shared/use-translator.ts","content":"$84","type":"registry:component","target":"hooks/shared/use-translator.ts"},{"path":"src/providers/gate-keeper-context.tsx","content":"'use client';\n\nimport { createContext, useContext } from 'react';\n\nexport interface GateKeeperContextValue {\n error: Error | null;\n /** Defined only when an error is active. */\n onRetry?: () => Promise;\n}\n\nexport const GateKeeperContext = createContext(null);\n\n/**\n * @internal\n * @returns Current GateKeeper context value\n * @throws Error if used outside of the GateKeeperProvider\n */\nexport function useGateKeeperContext(): GateKeeperContextValue {\n const context = useContext(GateKeeperContext);\n\n if (!context) {\n throw new Error('useGateKeeperContext must be used within a GateKeeperProvider');\n }\n\n return context;\n}\n","type":"registry:component","target":"providers/gate-keeper-context.tsx"},{"path":"src/providers/portal-context.tsx","content":"'use client';\n\nimport * as React from 'react';\n\n/**\n * React context that stores the target HTML element used as a portal container\n * for overlay-based UI (for example, dialogs, popovers, and tooltips).\n *\n */\nexport const PortalContext = React.createContext(null);\n\n/**\n * Returns the current portal container element from `PortalContext`.\n *\n * @returns The configured portal host element, or `null` when not provided.\n */\nexport function usePortalContainer() {\n return React.useContext(PortalContext);\n}\n","type":"registry:component","target":"providers/portal-context.tsx"},{"path":"src/providers/proxy-provider.tsx","content":"$85","type":"registry:component","target":"providers/proxy-provider.tsx"},{"path":"src/providers/query-provider.tsx","content":"$86","type":"registry:component","target":"providers/query-provider.tsx"},{"path":"src/providers/spa-provider.tsx","content":"$87","type":"registry:component","target":"providers/spa-provider.tsx"},{"path":"src/providers/theme-provider.tsx","content":"$88","type":"registry:component","target":"providers/theme-provider.tsx"},{"path":"src/types/auth-types.ts","content":"$89","type":"registry:component","target":"types/auth-types.ts"},{"path":"src/types/cache-types.ts","content":"/**\n * TanStack Query cache configuration types.\n * @module cache-types\n */\n\n/** Cache configuration options. */\nexport interface QueryCacheConfig {\n enabled?: boolean;\n staleTime?: number;\n gcTime?: number;\n refetchOnWindowFocus?: boolean | 'always';\n}\n","type":"registry:component","target":"types/cache-types.ts"},{"path":"src/types/i18n-types.ts","content":"/**\n * Internationalization configuration types.\n * @module i18n-types\n */\n\n/** i18n configuration for Auth0 components. */\nexport interface I18nOptions {\n currentLanguage: string;\n fallbackLanguage?: string;\n}\n","type":"registry:component","target":"types/i18n-types.ts"},{"path":"src/types/my-organization/domain-management/domain-configure-types.ts","content":"/**\n * Domain configure modal types.\n * @module domain-configure-types\n */\n\nimport type {\n Domain,\n DomainConfigureMessages,\n IdentityProviderAssociatedWithDomain,\n} from '@auth0/universal-components-core';\n\n/** Props for DomainConfigureProvidersModal. */\nexport interface DomainConfigureProvidersModalProps {\n className?: string;\n customMessages?: Partial;\n isOpen: boolean;\n isLoading: boolean;\n isLoadingSwitch: boolean;\n domain: Domain | null;\n providers: IdentityProviderAssociatedWithDomain[];\n onClose: () => void;\n onToggleSwitch: (\n domain: Domain,\n provider: IdentityProviderAssociatedWithDomain,\n enable: boolean,\n ) => void;\n onOpenProvider?: (provider: IdentityProviderAssociatedWithDomain) => void;\n onCreateProvider?: () => void;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-configure-types.ts"},{"path":"src/types/my-organization/domain-management/domain-create-types.ts","content":"/**\n * Domain create modal types.\n * @module domain-create-types\n */\n\nimport type { DomainCreateMessages, DomainCreateSchemas } from '@auth0/universal-components-core';\n\n/** Props for DomainCreateModal. */\nexport interface DomainCreateModalProps {\n translatorKey?: string;\n className?: string;\n customMessages?: Partial;\n schema?: DomainCreateSchemas;\n isOpen: boolean;\n isLoading: boolean;\n onClose: () => void;\n onCreate: (domainName: string) => void | Promise;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-create-types.ts"},{"path":"src/types/my-organization/domain-management/domain-delete-types.ts","content":"/**\n * Domain delete modal types.\n * @module domain-delete-types\n */\n\nimport type { Domain, DomainDeleteMessages } from '@auth0/universal-components-core';\n\n/** Props for DomainDeleteModal. */\nexport interface DomainDeleteModalProps {\n translatorKey?: string;\n className?: string;\n customMessages?: Partial;\n domain: Domain | null;\n isOpen: boolean;\n isLoading: boolean;\n onClose: () => void;\n onDelete: (domain: Domain) => void;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-delete-types.ts"},{"path":"src/types/my-organization/domain-management/domain-table-types.ts","content":"$8a","type":"registry:component","target":"types/my-organization/domain-management/domain-table-types.ts"},{"path":"src/types/my-organization/domain-management/domain-verify-types.ts","content":"/**\n * Domain verification modal types.\n * @module domain-verify-types\n */\n\nimport type { DomainVerifyMessages, Domain } from '@auth0/universal-components-core';\n\n/** Props for DomainVerifyModal. */\nexport interface DomainVerifyModalProps {\n translatorKey?: string;\n isOpen: boolean;\n isLoading?: boolean;\n domain: Domain | null;\n error?: string;\n onClose: () => void;\n onVerify: (domain: Domain) => void;\n onDelete: (domain: Domain) => void;\n className?: string;\n customMessages?: Partial;\n}\n","type":"registry:component","target":"types/my-organization/domain-management/domain-verify-types.ts"},{"path":"src/types/theme-types.ts","content":"/**\n * Theme configuration types.\n * @module theme-types\n */\n\nimport type { StylingVariables } from '@auth0/universal-components-core';\nimport type React from 'react';\n\n/** Theme settings for provider. */\nexport interface ThemeSettings {\n theme?: 'default' | 'minimal' | 'rounded';\n mode?: 'light' | 'dark';\n variables?: StylingVariables;\n}\n\n/** Theme input for ThemeProvider. */\nexport type ThemeInput = {\n theme?: 'default' | 'minimal' | 'rounded';\n mode?: 'light' | 'dark';\n variables?: StylingVariables;\n loader?: React.ReactNode;\n};\n\n/** Theme context value. */\nexport type ThemeContextValue = {\n theme?: 'default' | 'minimal' | 'rounded';\n isDarkMode?: boolean;\n variables: StylingVariables;\n loader: React.ReactNode | null;\n};\n","type":"registry:component","target":"types/theme-types.ts"},{"path":"src/types/toast-types.ts","content":"$8b","type":"registry:component","target":"types/toast-types.ts"},{"path":"src/lib/constants/form-constants.ts","content":"/**\n * Form constants used across the components.\n * @internal\n */\n\nexport const FORM_VALIDATION_MODE = 'onTouched';\nexport const FORM_REVALIDATE_MODE = 'onChange';\n","type":"registry:component","target":"lib/constants/form-constants.ts"},{"path":"src/lib/utils.ts","content":"/**\n * Tailwind CSS utility functions.\n * @module utils\n * @internal\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merges class names with Tailwind CSS conflict resolution.\n * @param inputs - Input values to process\n * @returns The merged class name string\n * @internal\n */\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:component","target":"lib/utils.ts"},{"path":"src/lib/utils/my-organization/domain-management/domain-management-utils.ts","content":"/**\n * Domain management utility functions.\n * @module domain-management-utils\n * @internal\n */\n\nimport type { Domain } from '@/types/my-organization/domain-management/domain-table-types';\n\n/**\n * Returns badge variant for domain status.\n * @param status - Current status\n * @returns The badge variant\n * @internal\n */\nexport function getStatusBadgeVariant(\n status: Domain['status'],\n): 'success' | 'warning' | 'destructive' | 'outline' {\n switch (status) {\n case 'verified':\n return 'success';\n case 'pending':\n return 'warning';\n case 'failed':\n return 'destructive';\n default:\n return 'outline';\n }\n}\n","type":"registry:component","target":"lib/utils/my-organization/domain-management/domain-management-utils.ts"},{"path":"src/styles/globals.css","content":"@import 'tailwindcss' important;\n@import '@auth0/universal-components-core/styles/globals.css';\n","type":"registry:component","target":"styles/globals.css"},{"path":"src/styles/tailwind.css","content":"/* Scan component library for class names */\n@source \"./**/*.js\";\n","type":"registry:component","target":"styles/tailwind.css"}],"className":"h-[70svh] min-h-80"}]