clerk · panteliselef · Nov 10, 2023 · Nov 10, 2023
diff --git a/.changeset/fifty-seals-impress.md b/.changeset/fifty-seals-impress.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui-retheme/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -1,8 +1,8 @@
+import { useOrganization, useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 import React from 'react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useCoreOrganizationList } from '../../contexts';
 import { Icon } from '../../customizables';
 import { ContentPage, Form, FormButtonContainer, IconButton, SuccessPage, useCardState } from '../../elements';
 import { QuestionMark, Upload } from '../../icons';
@@ -30,8 +30,8 @@ export const CreateOrganizationForm = (props: CreateOrganizationFormProps) => {
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
 
   const lastCreatedOrganizationRef = React.useRef<OrganizationResource | null>(null);
-  const { createOrganization, isLoaded, setActive } = useCoreOrganizationList();
-  const { organization } = useCoreOrganization();
+  const { createOrganization, isLoaded, setActive } = useOrganizationList();
+  const { organization } = useOrganization();
   const [file, setFile] = React.useState<File | null>();
 
   const nameField = useFormControl('name', '', {

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationListPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/OrganizationListPage.tsx
@@ -1,6 +1,7 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import { useState } from 'react';
 
-import { useCoreOrganizationList, useEnvironment, useOrganizationListContext } from '../../contexts';
+import { useEnvironment, useOrganizationListContext } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, localizationKeys, Spinner } from '../../customizables';
 import { Card, CardAlert, Divider, Header, useCardState, withCardStateProvider } from '../../elements';
 import { useInView } from '../../hooks';
@@ -11,8 +12,8 @@ import { MembershipPreview, PersonalAccountPreview } from './UserMembershipList'
 import { SuggestionPreview } from './UserSuggestionList';
 import { organizationListParams } from './utils';
 
-const useCoreOrganizationListInView = () => {
-  const { userMemberships, userInvitations, userSuggestions } = useCoreOrganizationList(organizationListParams);
+const useOrganizationListInView = () => {
+  const { userMemberships, userInvitations, userSuggestions } = useOrganizationList(organizationListParams);
 
   const { ref } = useInView({
     threshold: 0,
@@ -40,7 +41,7 @@ const useCoreOrganizationListInView = () => {
 
 export const OrganizationListPage = withCardStateProvider(() => {
   const card = useCardState();
-  const { userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;
   const hasAnyData = !!(userMemberships?.count || userInvitations?.count || userSuggestions?.count);
 
@@ -117,7 +118,7 @@ const OrganizationListFlows = ({ showListInitially }: { showListInitially: boole
 const OrganizationListPageList = (props: { onCreateOrganizationClick: () => void }) => {
   const environment = useEnvironment();
 
-  const { ref, userMemberships, userSuggestions, userInvitations } = useCoreOrganizationListInView();
+  const { ref, userMemberships, userSuggestions, userInvitations } = useOrganizationListInView();
   const { hidePersonal } = useOrganizationListContext();
 
   const isLoading = userMemberships?.isLoading || userInvitations?.isLoading || userSuggestions?.isLoading;

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserInvitationList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserInvitationList.tsx
@@ -1,7 +1,8 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationResource, UserOrganizationInvitationResource } from '@clerk/types';
 import { useState } from 'react';
 
-import { useCoreClerk, useCoreOrganizationList } from '../../contexts';
+import { useCoreClerk } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -26,7 +27,7 @@ export const InvitationPreview = withCardStateProvider((props: UserOrganizationI
   const card = useCardState();
   const { getOrganization } = useCoreClerk();
   const [acceptedOrganization, setAcceptedOrganization] = useState<OrganizationResource | null>(null);
-  const { userInvitations } = useCoreOrganizationList({
+  const { userInvitations } = useOrganizationList({
     userInvitations: organizationListParams.userInvitations,
   });
 

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserMembershipList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserMembershipList.tsx
@@ -1,15 +1,15 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganizationList, useUser } from '@clerk/shared/react';
 import type { OrganizationResource } from '@clerk/types';
 
-import { useCoreOrganizationList, useOrganizationListContext } from '../../contexts';
+import { useOrganizationListContext } from '../../contexts';
 import { OrganizationPreview, PersonalWorkspacePreview, useCardState, withCardStateProvider } from '../../elements';
 import { localizationKeys } from '../../localization';
 import { OrganizationListPreviewButton, sharedMainIdentifierSx } from './shared';
 
 export const MembershipPreview = withCardStateProvider((props: { organization: OrganizationResource }) => {
   const card = useCardState();
   const { navigateAfterSelectOrganization } = useOrganizationListContext();
-  const { isLoaded, setActive } = useCoreOrganizationList();
+  const { isLoaded, setActive } = useOrganizationList();
 
   if (!isLoaded) {
     return null;
@@ -36,7 +36,7 @@ export const MembershipPreview = withCardStateProvider((props: { organization: O
 export const PersonalAccountPreview = withCardStateProvider(() => {
   const card = useCardState();
   const { hidePersonal, navigateAfterSelectPersonal } = useOrganizationListContext();
-  const { isLoaded, setActive } = useCoreOrganizationList();
+  const { isLoaded, setActive } = useOrganizationList();
   const { user } = useUser();
 
   if (!user) {

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserSuggestionList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationList/UserSuggestionList.tsx
@@ -1,6 +1,6 @@
+import { useOrganizationList } from '@clerk/shared/react';
 import type { OrganizationSuggestionResource } from '@clerk/types';
 
-import { useCoreOrganizationList } from '../../contexts';
 import { localizationKeys, Text } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
 import { handleError } from '../../utils';
@@ -10,7 +10,7 @@ import { organizationListParams } from './utils';
 
 export const AcceptRejectInvitationButtons = (props: OrganizationSuggestionResource) => {
   const card = useCardState();
-  const { userSuggestions } = useCoreOrganizationList({
+  const { userSuggestions } = useOrganizationList({
     userSuggestions: organizationListParams.userSuggestions,
   });
 

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationList/utils.ts b/packages/clerk-js/src/ui-retheme/components/OrganizationList/utils.ts
@@ -1,4 +1,4 @@
-import type { useCoreOrganizationList } from '../../contexts';
+import type { useOrganizationList } from '@clerk/shared/react';
 
 export const organizationListParams = {
   userMemberships: {
@@ -11,4 +11,4 @@ export const organizationListParams = {
     infinite: true,
     status: ['pending', 'accepted'],
   },
-} satisfies Parameters<typeof useCoreOrganizationList>[0];
+} satisfies Parameters<typeof useOrganizationList>[0];
diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActionConfirmationPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActionConfirmationPage.tsx
@@ -1,7 +1,7 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useUser } from '@clerk/shared/react';
 
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { localizationKeys, Text } from '../../customizables';
 import {
@@ -19,7 +19,7 @@ import { OrganizationProfileBreadcrumbs } from './OrganizationProfileNavbar';
 export const LeaveOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { user } = useUser();
 
   if (!organization || !user) {
@@ -52,7 +52,7 @@ export const LeaveOrganizationPage = () => {
 export const DeleteOrganizationPage = () => {
   const card = useCardState();
   const { navigateAfterLeaveOrganization } = useOrganizationProfileContext();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   if (!organization) {
     return null;

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActiveMembersList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/ActiveMembersList.tsx
@@ -1,8 +1,7 @@
-import { useUser } from '@clerk/shared/react';
+import { useOrganization, useUser } from '@clerk/shared/react';
 import type { OrganizationMembershipResource } from '@clerk/types';
 
 import { Gate } from '../../common/Gate';
-import { useCoreOrganization } from '../../contexts';
 import { Badge, localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useFetchRoles, useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -18,7 +17,7 @@ const membershipsParams = {
 
 export const ActiveMembersList = () => {
   const card = useCardState();
-  const { organization, memberships } = useCoreOrganization(membershipsParams);
+  const { organization, memberships } = useOrganization(membershipsParams);
 
   const { options, isLoading: loadingRoles } = useFetchRoles();
 

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/AddDomainPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/AddDomainPage.tsx
@@ -1,6 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { localizationKeys } from '../../customizables';
 import { ContentPage, Form, FormButtons, useCardState, withCardStateProvider } from '../../elements';
 import { useRouter } from '../../router';
@@ -13,7 +14,7 @@ export const AddDomainPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.createDomainPage.subtitle');
   const breadcrumbTitle = localizationKeys('organizationProfile.profilePage.domainSection.title');
   const card = useCardState();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
 
   const nameField = useFormControl('name', '', {

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/DomainList.tsx
@@ -1,3 +1,4 @@
+import { useOrganization } from '@clerk/shared/react';
 import type {
   GetDomainsParams,
   OrganizationDomainResource,
@@ -8,7 +9,6 @@ import React, { useMemo } from 'react';
 
 import { stripOrigin, toURL, trimLeadingSlash } from '../../../utils';
 import { useGate, withGate } from '../../common';
-import { useCoreOrganization } from '../../contexts';
 import type { LocalizationKey } from '../../customizables';
 import { Box, Col, localizationKeys, Spinner } from '../../customizables';
 import { ArrowBlockButton, BlockWithTrailingComponent, ThreeDotsMenu } from '../../elements';
@@ -81,7 +81,7 @@ const DomainListDotMenu = ({
 export const DomainList = withGate(
   (props: DomainListProps) => {
     const { verificationStatus, enrollmentMode, redirectSubPath, fallback, ...rest } = props;
-    const { organization, domains } = useCoreOrganization({
+    const { organization, domains } = useOrganization({
       domains: {
         infinite: true,
         ...rest,

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersForm.tsx
@@ -1,9 +1,9 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
+import { useOrganization } from '@clerk/shared/react';
 import type { ClerkAPIError, MembershipRole } from '@clerk/types';
 import type { FormEvent } from 'react';
 import { useState } from 'react';
 
-import { useCoreOrganization } from '../../contexts';
 import { Flex, Text } from '../../customizables';
 import { Form, FormButtonContainer, TagInput, useCardState } from '../../elements';
 import { useFetchRoles } from '../../hooks/useFetchRoles';
@@ -25,7 +25,7 @@ type InviteMembersFormProps = {
 export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const { navigate } = useRouter();
   const { onSuccess, onReset = () => navigate('..'), resetButtonLabel } = props;
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const card = useCardState();
   const { t, locale } = useLocalizations();
   const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = useState(false);

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersPage.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InviteMembersPage.tsx
@@ -1,6 +1,8 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { runIfFunctionOrReturn } from '../../../utils';
 import { useWizard, Wizard } from '../../common';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { descriptors, Flex, localizationKeys, Text } from '../../customizables';
 import { ContentPage, IconCircle, SuccessPage, useCardState, withCardStateProvider } from '../../elements';
 import { Email } from '../../icons';
@@ -13,7 +15,7 @@ export const InviteMembersPage = withCardStateProvider(() => {
   const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');
   const card = useCardState();
   const wizard = useWizard({ onNextStep: () => card.setError(undefined) });
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl, __unstable_manageBillingMembersLimit } = useOrganizationProfileContext();
 

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InvitedMembersList.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/InvitedMembersList.tsx
@@ -1,6 +1,6 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationInvitationResource } from '@clerk/types';
 
-import { useCoreOrganization } from '../../contexts';
 import { localizationKeys, Td, Text } from '../../customizables';
 import { ThreeDotsMenu, useCardState, UserPreview } from '../../elements';
 import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
@@ -16,7 +16,7 @@ const invitationsParams = {
 
 export const InvitedMembersList = () => {
   const card = useCardState();
-  const { organization, invitations } = useCoreOrganization(invitationsParams);
+  const { organization, invitations } = useOrganization(invitationsParams);
 
   if (!organization) {
     return null;

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MembershipWidget.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/MembershipWidget.tsx
@@ -1,10 +1,12 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { useRouter } from '../../../ui/router';
 import { runIfFunctionOrReturn } from '../../../utils';
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { Col, Flex, Link, Text } from '../../customizables';
 
 export const MembershipWidget = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   //@ts-expect-error
   const { __unstable_manageBillingUrl, __unstable_manageBillingLabel, __unstable_manageBillingMembersLimit } =
     useOrganizationProfileContext();

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationMembers.tsx
@@ -1,5 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { NotificationCountBadge, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment, useOrganizationProfileContext } from '../../contexts';
+import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
 import {
   CardAlert,
@@ -23,7 +25,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
   const card = useCardState();
   const { isAuthorizedUser: canManageMemberships } = useGate({ permission: 'org:sys_memberships:manage' });
   const isDomainsEnabled = organizationSettings?.domains?.enabled;
-  const { membershipRequests } = useCoreOrganization({
+  const { membershipRequests } = useOrganization({
     membershipRequests: isDomainsEnabled || undefined,
   });
 

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfile.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfile.tsx
@@ -1,8 +1,9 @@
+import { useOrganization } from '@clerk/shared/react';
 import type { OrganizationProfileProps } from '@clerk/types';
 import React from 'react';
 
 import { withOrganizationsEnabledGuard, withRedirectToHomeOrganizationGuard } from '../../common';
-import { ComponentContext, useCoreOrganization, withCoreUserGuard } from '../../contexts';
+import { ComponentContext, withCoreUserGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { ProfileCard, withCardStateProvider } from '../../elements';
 import { Route, Switch } from '../../router';
@@ -11,8 +12,7 @@ import { OrganizationProfileNavbar } from './OrganizationProfileNavbar';
 import { OrganizationProfileRoutes } from './OrganizationProfileRoutes';
 
 const _OrganizationProfile = (_: OrganizationProfileProps) => {
-  // TODO: Should this be a guard HOC?
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   if (!organization) {
     return null;

diff --git a/...ages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx b/...ages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationProfileNavbar.tsx
@@ -1,13 +1,14 @@
+import { useOrganization } from '@clerk/shared/react';
 import React from 'react';
 
-import { useCoreOrganization, useOrganizationProfileContext } from '../../contexts';
+import { useOrganizationProfileContext } from '../../contexts';
 import { Breadcrumbs, NavBar, NavbarContextProvider, OrganizationPreview } from '../../elements';
 import type { PropsOfComponent } from '../../styledSystem';
 
 export const OrganizationProfileNavbar = (
   props: React.PropsWithChildren<Pick<PropsOfComponent<typeof NavBar>, 'contentRef'>>,
 ) => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { pages } = useOrganizationProfileContext();
 
   if (!organization) {

diff --git a/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationSettings.tsx b/packages/clerk-js/src/ui-retheme/components/OrganizationProfile/OrganizationSettings.tsx
@@ -1,5 +1,7 @@
+import { useOrganization } from '@clerk/shared/react';
+
 import { AddBlockButton, BlockButton, Gate, useGate } from '../../common';
-import { useCoreOrganization, useEnvironment } from '../../contexts';
+import { useEnvironment } from '../../contexts';
 import { Col, descriptors, Flex, Icon, localizationKeys } from '../../customizables';
 import { Header, IconButton, NavbarMenuButtonRow, OrganizationPreview, ProfileSection } from '../../elements';
 import { Times } from '../../icons';
@@ -36,7 +38,7 @@ export const OrganizationSettings = () => {
 };
 
 const OrganizationProfileSection = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
 
   if (!organization) {
@@ -67,7 +69,7 @@ const OrganizationProfileSection = () => {
 
 const OrganizationDomainsSection = () => {
   const { organizationSettings } = useEnvironment();
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
 
   const { navigate } = useRouter();
 
@@ -97,7 +99,7 @@ const OrganizationDomainsSection = () => {
 };
 
 const OrganizationDangerSection = () => {
-  const { organization } = useCoreOrganization();
+  const { organization } = useOrganization();
   const { navigate } = useRouter();
   const { isAuthorizedUser: canDeleteOrganization } = useGate({ permission: 'org:sys_profile:delete' });