@availity/mui-spaces 0.3.20 → 0.3.22

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.22](https://github.com/Availity/element/compare/@availity/mui-spaces@0.3.21...@availity/mui-spaces@0.3.22) (2024-09-24)
+
+### Dependency Updates
+
+* `@availity/mock` updated to version `0.3.21`
+## [0.3.21](https://github.com/Availity/element/compare/@availity/mui-spaces@0.3.20...@availity/mui-spaces@0.3.21) (2024-09-24)
+
 ## [0.3.20](https://github.com/Availity/element/compare/@availity/mui-spaces@0.3.19...@availity/mui-spaces@0.3.20) (2024-09-20)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -187,8 +187,8 @@ type SpacesProps = {
     /** Override the default variables used in the thanos query. Default: { types: [PAYERSPACE] }.
      * If the spaces provider should contain configurations of a type other than PAYERSPACE, you must override this prop */
     variables?: object;
-    /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
-    clientId: string;
+    /** The Client ID obtained from APIConnect. */
+    clientId?: string;
     /** Children can be a react child or render prop. */
     children?: React.ReactNode | ((props: any | undefined) => React.ReactNode);
     /** Array of payerIds the Spaces provider should fetch the spaces for.

package/dist/index.d.ts

@@ -187,8 +187,8 @@ type SpacesProps = {
     /** Override the default variables used in the thanos query. Default: { types: [PAYERSPACE] }.
      * If the spaces provider should contain configurations of a type other than PAYERSPACE, you must override this prop */
     variables?: object;
-    /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
-    clientId: string;
+    /** The Client ID obtained from APIConnect. */
+    clientId?: string;
     /** Children can be a react child or render prop. */
     children?: React.ReactNode | ((props: any | undefined) => React.ReactNode);
     /** Array of payerIds the Spaces provider should fetch the spaces for.

package/dist/index.js

@@ -119,6 +119,10 @@ var spacesReducer = (state, action) => {
   return actions[type](state, action);
 };
 var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, variables }) {
+  const headers = {};
+  if (clientId) {
+    headers["X-Client-ID"] = clientId;
+  }
   const {
     data: {
       data: { configurationPagination }
@@ -128,7 +132,7 @@ var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, va
       query,
       variables: __spreadValues({}, variables)
     },
-    { headers: { "X-Client-ID": clientId } }
+    { headers: __spreadValues({}, headers) }
   );
   const {
     pageInfo: { currentPage, hasNextPage },
@@ -788,10 +792,12 @@ var openLinkWithSso = (_0, _1) => __async(void 0, [_0, _1], function* (space, {
   if (space.meta && space.meta.ssoId) {
     const options = ((_a = space.link) == null ? void 0 : _a.target) ? { target: getTarget(space.link.target) } : void 0;
     const attributes = __spreadValues({
-      X_Client_ID: clientId,
       X_XSRF_TOKEN: document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$)|^.*$/, "$1"),
       spaceId: payerSpaceId
     }, ssoParams);
+    if (clientId) {
+      attributes.X_Client_ID = clientId;
+    }
     try {
       if (akaname)
         yield updateTopApps(space, akaname);

package/dist/index.mjs

@@ -77,6 +77,10 @@ var spacesReducer = (state, action) => {
   return actions[type](state, action);
 };
 var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, variables }) {
+  const headers = {};
+  if (clientId) {
+    headers["X-Client-ID"] = clientId;
+  }
   const {
     data: {
       data: { configurationPagination }
@@ -86,7 +90,7 @@ var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, va
       query,
       variables: __spreadValues({}, variables)
     },
-    { headers: { "X-Client-ID": clientId } }
+    { headers: __spreadValues({}, headers) }
   );
   const {
     pageInfo: { currentPage, hasNextPage },
@@ -746,10 +750,12 @@ var openLinkWithSso = (_0, _1) => __async(void 0, [_0, _1], function* (space, {
   if (space.meta && space.meta.ssoId) {
     const options = ((_a = space.link) == null ? void 0 : _a.target) ? { target: getTarget(space.link.target) } : void 0;
     const attributes = __spreadValues({
-      X_Client_ID: clientId,
       X_XSRF_TOKEN: document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$)|^.*$/, "$1"),
       spaceId: payerSpaceId
     }, ssoParams);
+    if (clientId) {
+      attributes.X_Client_ID = clientId;
+    }
     try {
       if (akaname)
         yield updateTopApps(space, akaname);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-spaces",
-  "version": "0.3.20",
+  "version": "0.3.22",
   "description": "Availity MUI Spaces Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Spaces.stories.tsx

@@ -66,7 +66,6 @@ export const _Spaces: StoryObj<typeof Spaces> = {
     );
   },
   args: {
-    clientId: 'my-client-id',
     spaces: [{ id: '1', configurationId: '1', type: 'space', name: 'Space 1' }],
     spaceIds: ['2'],
     payerIds: ['a'],

package/src/lib/Spaces.test.tsx

@@ -43,11 +43,7 @@ describe('Spaces', () => {
       const [spaceIds, setSpaceIds] = useState(['1', '3']);
       return (
         <QueryClientProvider client={queryClient}>
-          <Spaces
-            spaceIds={spaceIds}
-            spaces={[{ id: '3', configurationId: '3', type: 'space', name: 'Space 3' }]}
-            clientId="my-client-id"
-          >
+          <Spaces spaceIds={spaceIds} spaces={[{ id: '3', configurationId: '3', type: 'space', name: 'Space 3' }]}>
             <SpaceComponent spaceId="1" />
             <SpaceComponent spaceId="2" />
             <SpaceComponent spaceId="3" />
@@ -109,7 +105,7 @@ it('toggles whether the spaces provider is loading', async () => {
 
     return (
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={spaceId} clientId="my-client-id">
+        <Spaces spaceIds={spaceId}>
           <SpaceComponent spaceId={spaceId[0]} />
 
           <button type="button" id="add-spaceid-btn" onClick={() => setSpaceId(['2'])}>
@@ -152,7 +148,7 @@ describe('useSpaces', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['1', '2', '3']} clientId="test-client-id">
+        <Spaces spaceIds={['1', '2', '3']}>
           <SpacesComponent />
           <SpacesComponent ids={['2', '3']} />
         </Spaces>
@@ -172,7 +168,7 @@ describe('useSpaces', () => {
     const queryClient = new QueryClient();
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['11', '22', '33']} clientId="test-client-id">
+        <Spaces spaceIds={['11', '22', '33']}>
           <SpacesComponent />
           <SpacesComponent ids={['22', '33']} />
         </Spaces>
@@ -190,7 +186,7 @@ describe('useSpaces', () => {
     const queryClient = new QueryClient();
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces payerIds={['a', 'b', 'c']} clientId="test-client-id">
+        <Spaces payerIds={['a', 'b', 'c']}>
           <SpacesComponent ids={['b']} />
           <SpacesComponent ids={['c']} />
         </Spaces>
@@ -220,7 +216,7 @@ describe('useSpaces', () => {
 
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['1', '2']} clientId="test-client-id">
+        <Spaces spaceIds={['1', '2']}>
           <SpacesComponent />
         </Spaces>
       </QueryClientProvider>
@@ -251,7 +247,7 @@ it('returns first payer space with when no spaceId passed', async () => {
 
   const { container, getByText } = render(
     <QueryClientProvider client={queryClient}>
-      <Spaces spaceIds={['1']} clientId="my-client-id">
+      <Spaces spaceIds={['1']}>
         <SpaceComponent />
       </Spaces>
     </QueryClientProvider>

package/src/lib/SpacesAgreement.stories.tsx

@@ -24,7 +24,7 @@ const queryClient = new QueryClient();
 export const _SpacesAgreement: StoryObj<typeof SpacesAgreement> = {
   render: (args: SpacesAgreementProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['agreement']}>
+      <Spaces spaceIds={['agreement']}>
         <SpacesAgreement {...args} />
       </Spaces>
     </QueryClientProvider>
@@ -37,7 +37,7 @@ export const _SpacesAgreement: StoryObj<typeof SpacesAgreement> = {
 export const _SpacesAgreementMarkdown: StoryObj<typeof SpacesAgreement> = {
   render: (args: SpacesAgreementProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['agreementMarkdown']}>
+      <Spaces spaceIds={['agreementMarkdown']}>
         <SpacesAgreement {...args} />
       </Spaces>
     </QueryClientProvider>

package/src/lib/SpacesAgreement.test.tsx

@@ -22,7 +22,7 @@ describe('SpacesAgreement', () => {
 
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['agreement']} clientId="clientId">
+        <Spaces spaceIds={['agreement']}>
           <SpacesAgreement spaceId="agreement" />
         </Spaces>
       </QueryClientProvider>
@@ -39,7 +39,7 @@ describe('SpacesAgreement', () => {
 
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['agreementMarkdown']} clientId="clientId">
+        <Spaces spaceIds={['agreementMarkdown']}>
           <SpacesAgreement spaceId="agreementMarkdown" markdown />
         </Spaces>
       </QueryClientProvider>

package/src/lib/SpacesDisclaimer.stories.tsx

@@ -24,7 +24,7 @@ const queryClient = new QueryClient();
 export const _SpacesDisclaimer: StoryObj<typeof SpacesDisclaimer> = {
   render: (args: SpacesDisclaimerProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['disclaimer']}>
+      <Spaces spaceIds={['disclaimer']}>
         <SpacesDisclaimer {...args} />
       </Spaces>
     </QueryClientProvider>
@@ -37,7 +37,7 @@ export const _SpacesDisclaimer: StoryObj<typeof SpacesDisclaimer> = {
 export const _SpacesDisclaimerMarkdown: StoryObj<typeof SpacesDisclaimer> = {
   render: (args: SpacesDisclaimerProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['disclaimerMarkdown']}>
+      <Spaces spaceIds={['disclaimerMarkdown']}>
         <SpacesDisclaimer {...args} />
       </Spaces>
     </QueryClientProvider>

package/src/lib/SpacesDisclaimer.test.tsx

@@ -22,7 +22,7 @@ describe('SpacesDisclaimer', () => {
 
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['disclaimer']} clientId="clientId">
+        <Spaces spaceIds={['disclaimer']}>
           <SpacesDisclaimer spaceId="disclaimer" />
         </Spaces>
       </QueryClientProvider>
@@ -39,7 +39,7 @@ describe('SpacesDisclaimer', () => {
 
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['disclaimerMarkdown']} clientId="clientId">
+        <Spaces spaceIds={['disclaimerMarkdown']}>
           <SpacesDisclaimer spaceId="disclaimerMarkdown" markdown />
         </Spaces>
       </QueryClientProvider>

package/src/lib/SpacesGhostText.stories.tsx

@@ -24,7 +24,7 @@ const queryClient = new QueryClient();
 export const _SpacesGhostText: StoryObj<typeof SpacesGhostText> = {
   render: (args: SpacesGhostTextProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['ghosted']}>
+      <Spaces spaceIds={['ghosted']}>
         <SpacesGhostText {...args} />
       </Spaces>
     </QueryClientProvider>

package/src/lib/SpacesGhostText.test.tsx

@@ -22,7 +22,7 @@ describe('SpacesGhostText', () => {
 
     const { getByText } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['ghosted']} clientId="clientId">
+        <Spaces spaceIds={['ghosted']}>
           <SpacesGhostText spaceId="ghosted" />
         </Spaces>
       </QueryClientProvider>

package/src/lib/SpacesImage.stories.tsx

@@ -24,7 +24,7 @@ const queryClient = new QueryClient();
 export const _SpacesImage: StoryObj<typeof SpacesImage> = {
   render: (args: SpacesImageProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+      <Spaces spaceIds={['11', '22', '33']}>
         <SpacesImage {...args} />
       </Spaces>
     </QueryClientProvider>
@@ -37,7 +37,7 @@ export const _SpacesImage: StoryObj<typeof SpacesImage> = {
 export const _SpacesLogo: StoryObj<typeof SpacesImage> = {
   render: (args: SpacesImageProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+      <Spaces spaceIds={['11', '22', '33']}>
         <SpacesImage {...args} />
       </Spaces>
     </QueryClientProvider>
@@ -51,7 +51,7 @@ export const _SpacesLogo: StoryObj<typeof SpacesImage> = {
 export const _SpacesTile: StoryObj<typeof SpacesImage> = {
   render: (args: SpacesImageProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+      <Spaces spaceIds={['11', '22', '33']}>
         <SpacesImage {...args} />
       </Spaces>
     </QueryClientProvider>
@@ -65,7 +65,7 @@ export const _SpacesTile: StoryObj<typeof SpacesImage> = {
 export const _SpacesBillboard: StoryObj<typeof SpacesImage> = {
   render: (args: SpacesImageProps) => (
     <QueryClientProvider client={queryClient}>
-      <Spaces clientId="clientId" spaceIds={['11', '22', '33']}>
+      <Spaces spaceIds={['11', '22', '33']}>
         <SpacesImage {...args} />
       </Spaces>
     </QueryClientProvider>

package/src/lib/SpacesImage.test.tsx

@@ -30,7 +30,7 @@ describe('SpacesImage', () => {
 
     const { getByRole } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces spaceIds={['11', '22', '33']} clientId="clientId">
+        <Spaces spaceIds={['11', '22', '33']}>
           <SpacesImage spaceId="33" />
         </Spaces>
       </QueryClientProvider>

package/src/lib/SpacesLink/SpacesLink.test.tsx

@@ -27,7 +27,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-1"
             titleTag="h5"
@@ -35,7 +35,6 @@ describe('SpacesLink', () => {
             linkAttributes={{
               spaceId: '1',
             }}
-            clientId="my-client-id"
             variant="card"
             title={space.link.text}
             description
@@ -80,7 +79,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-2"
             titleTag="h5"
@@ -89,7 +88,6 @@ describe('SpacesLink', () => {
             linkAttributes={{
               spaceId: '2',
             }}
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -117,14 +115,13 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-3"
             space={space}
             linkAttributes={{
               spaceId: '3',
             }}
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -152,7 +149,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-3"
             titleClassName="custom_class"
@@ -160,7 +157,6 @@ describe('SpacesLink', () => {
             linkAttributes={{
               spaceId: '3',
             }}
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -189,14 +185,13 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="navigation-link-7"
             space={space}
             linkAttributes={{
               spaceId: '7',
             }}
-            clientId="my-client-id"
             title={space.link.text}
             showNew
           />
@@ -227,14 +222,13 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="navigation-link-8"
             space={space}
             linkAttributes={{
               spaceId: '8',
             }}
-            clientId="my-client-id"
             title={space.link.text}
             showDate
           />
@@ -265,14 +259,13 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="navigation-link-9"
             space={space}
             linkAttributes={{
               spaceId: '9',
             }}
-            clientId="my-client-id"
             title={space.link.text}
             analytics={{
               'data-av-analytics-application-id': space.configurationId,
@@ -314,14 +307,13 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="navigation-link-10"
             space={space}
             linkAttributes={{
               spaceId: '10',
             }}
-            clientId="my-client-id"
             title={space.link.text}
           >
             {children}
@@ -352,7 +344,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-11"
             space={space}
@@ -360,7 +352,6 @@ describe('SpacesLink', () => {
               spaceId: '11',
             }}
             role="listitem"
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -387,7 +378,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-12"
             space={space}
@@ -395,7 +386,6 @@ describe('SpacesLink', () => {
               spaceId: '12',
             }}
             role="listitem"
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -424,7 +414,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-13"
             space={space}
@@ -432,7 +422,6 @@ describe('SpacesLink', () => {
               spaceId: '13',
             }}
             role="listitem"
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -461,7 +450,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-14"
             space={space}
@@ -469,7 +458,6 @@ describe('SpacesLink', () => {
               spaceId: '14',
             }}
             role="listitem"
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -497,7 +485,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-14"
             space={space}
@@ -505,7 +493,6 @@ describe('SpacesLink', () => {
               spaceId: '14',
             }}
             role="listitem"
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>
@@ -535,7 +522,7 @@ describe('SpacesLink', () => {
     const queryClient = new QueryClient();
     const { container } = render(
       <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
+        <Spaces spaces={[space]}>
           <SpacesLink
             id="application-link-14"
             icon={FileIcon}
@@ -544,7 +531,6 @@ describe('SpacesLink', () => {
               spaceId: '14',
             }}
             role="listitem"
-            clientId="my-client-id"
             title={space.link.text}
           />
         </Spaces>

package/src/lib/SpacesLink/linkHandlers.tsx

@@ -24,13 +24,16 @@ export const openLinkWithSso: OpenLinkWithSso = async (space, { akaname, clientI
   if (space.meta && space.meta.ssoId) {
     const options = space.link?.target ? { target: getTarget(space.link.target) } : undefined;
 
-    const attributes = {
-      X_Client_ID: clientId,
+    const attributes: Record<string, string> = {
       X_XSRF_TOKEN: document.cookie.replace(/(?:(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$)|^.*$/, '$1'),
       spaceId: payerSpaceId,
       ...ssoParams,
     };
 
+    if (clientId) {
+      attributes.X_Client_ID = clientId;
+    }
+
     try {
       if (akaname) await updateTopApps(space, akaname);
       await nativeForm(space.meta.ssoId, attributes, options, space.type);

package/src/lib/modals/DisclaimerModal.test.tsx

@@ -26,11 +26,9 @@ const DisclaimerModal = () => (
           },
         },
       ]}
-      clientId="my-client-id"
     >
       <SpacesLink
         spaceId="1"
-        clientId="my-client-id"
         linkAttributes={{
           spaceId: '1',
         }}

package/src/lib/modals/MultiPayerModal.test.tsx

@@ -39,8 +39,8 @@ const MultiPayerModal = () => {
   const queryClient = new QueryClient();
   return (
     <QueryClientProvider client={queryClient}>
-      <Spaces spaces={[space, parentSpace2, parentSpace3]} clientId="my-client-id">
-        <SpacesLink spaceId="multipayermodal" clientId="my-client-id" />
+      <Spaces spaces={[space, parentSpace2, parentSpace3]}>
+        <SpacesLink spaceId="multipayermodal" />
       </Spaces>
     </QueryClientProvider>
   );

package/src/lib/spaces-data.test.tsx

@@ -26,7 +26,6 @@ describe('getAllSpaces', () => {
 
     const spaces = await fetchAllSpaces({
       query: configurationFindMany,
-      clientId: 'clientId',
       variables: {
         types: ['space'],
         perPage: 10,

package/src/lib/spaces-data.tsx

@@ -29,6 +29,11 @@ export const spacesReducer = (state: SpacesContextType, action: SpacesReducerAct
 };
 
 export const fetchSpaces = async ({ query, clientId, variables }: FetchSpacesProps) => {
+  const headers: Record<string, string> = {};
+
+  if (clientId) {
+    headers['X-Client-ID'] = clientId;
+  }
   // eslint-disable-next-line no-useless-catch
   const {
     data: {
@@ -39,7 +44,7 @@ export const fetchSpaces = async ({ query, clientId, variables }: FetchSpacesPro
       query,
       variables: { ...variables },
     },
-    { headers: { 'X-Client-ID': clientId } }
+    { headers: { ...headers } }
   );
 
   const {

package/src/lib/spaces-types.tsx

@@ -62,8 +62,8 @@ export type Space = {
 export type FetchSpacesProps = {
   /** The query sent to the avWebQL endpoint. */
   query: string;
-  /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
-  clientId: string;
+  /** The Client ID obtained from APIConnect. */
+  clientId?: string;
   /** The variables sent to the avWebQL endpoint. */
   variables?: object;
   /** The page sent to the avWebQL endpoint. */
@@ -73,8 +73,8 @@ export type FetchSpacesProps = {
 export type FetchAllSpacesProps = {
   /** The query sent to the avWebQL endpoint. */
   query: string;
-  /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
-  clientId: string;
+  /** The Client ID obtained from APIConnect. */
+  clientId?: string;
   /** The variables sent to the avWebQL endpoint. */
   variables?: Record<string, any>;
   /** Array of spaces to be passed into the Spaces provider. */
@@ -118,8 +118,8 @@ export type SpacesProps = {
   /** Override the default variables used in the thanos query. Default: { types: [PAYERSPACE] }.
    * If the spaces provider should contain configurations of a type other than PAYERSPACE, you must override this prop */
   variables?: object;
-  /** The Client ID obtained from APIConnect. Must be subscribed to the thanos API. */
-  clientId: string;
+  /** The Client ID obtained from APIConnect. */
+  clientId?: string;
   /** Children can be a react child or render prop. */
   children?: React.ReactNode | ((props: any | undefined) => React.ReactNode);
   /** Array of payerIds the Spaces provider should fetch the spaces for.