@availity/mui-spaces 1.0.30 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.0](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.31...@availity/mui-spaces@1.1.0) (2025-09-25)
+
+
+### Features
+
+* **mui-spaces:** add operationName support ([f33f02b](https://github.com/Availity/element/commit/f33f02b2ef3cacee17a48a86849e2b4c96fac722))
+
+## [1.0.31](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.30...@availity/mui-spaces@1.0.31) (2025-09-22)
+
 ## [1.0.30](https://github.com/Availity/element/compare/@availity/mui-spaces@1.0.29...@availity/mui-spaces@1.0.30) (2025-08-21)
 
 

package/dist/index.d.mts

@@ -85,6 +85,13 @@ 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;
+    /**
+     * Name for the GraphQL operation, used for debugging and monitoring.
+     *
+     * Format: `{ValueStream || PayerName}{AbbreviatedAppName}{Description}{Type}` (PascalCase)
+     * @example "OnbPsFavoritesQuery"
+     */
+    operationName?: string;
     /** The Client ID obtained from APIConnect. */
     clientId?: string;
     /** Children can be a react child or render prop. */
@@ -101,14 +108,14 @@ type SpacesProps = {
      * Useful for if you already have the spaces in your app and don't want the spaces provider to have to fetch them again. */
     spaces?: Space[];
 };
-type UseSpaces = (...ids: string[]) => (Space)[] | undefined;
+type UseSpaces = (...ids: string[]) => Space[] | undefined;
 
 declare const INITIAL_STATE: {
     loading: boolean;
 };
 declare const SpacesContext: react.Context<SpacesContextType>;
 declare const useSpacesContext: () => SpacesContextType;
-declare const Spaces: ({ query, variables, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
+declare const Spaces: ({ query, variables, operationName, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
 declare const useSpaces: UseSpaces;
 
 type SpacesLinkVariants = 'card' | 'list' | 'default' | undefined;

package/dist/index.d.ts

@@ -85,6 +85,13 @@ 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;
+    /**
+     * Name for the GraphQL operation, used for debugging and monitoring.
+     *
+     * Format: `{ValueStream || PayerName}{AbbreviatedAppName}{Description}{Type}` (PascalCase)
+     * @example "OnbPsFavoritesQuery"
+     */
+    operationName?: string;
     /** The Client ID obtained from APIConnect. */
     clientId?: string;
     /** Children can be a react child or render prop. */
@@ -101,14 +108,14 @@ type SpacesProps = {
      * Useful for if you already have the spaces in your app and don't want the spaces provider to have to fetch them again. */
     spaces?: Space[];
 };
-type UseSpaces = (...ids: string[]) => (Space)[] | undefined;
+type UseSpaces = (...ids: string[]) => Space[] | undefined;
 
 declare const INITIAL_STATE: {
     loading: boolean;
 };
 declare const SpacesContext: react.Context<SpacesContextType>;
 declare const useSpacesContext: () => SpacesContextType;
-declare const Spaces: ({ query, variables, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
+declare const Spaces: ({ query, variables, operationName, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
 declare const useSpaces: UseSpaces;
 
 type SpacesLinkVariants = 'card' | 'list' | 'default' | undefined;

package/dist/index.js

@@ -118,7 +118,7 @@ var spacesReducer = (state, action) => {
   const { type } = action;
   return actions[type](state, action);
 };
-var fetchSpaces = (_0) => __async(null, [_0], function* ({ query, clientId, variables }) {
+var fetchSpaces = (_0) => __async(null, [_0], function* ({ query, clientId, variables, operationName }) {
   const headers = {};
   if (clientId) {
     headers["X-Client-ID"] = clientId;
@@ -130,7 +130,8 @@ var fetchSpaces = (_0) => __async(null, [_0], function* ({ query, clientId, vari
   } = yield import_api_axios.avWebQLApi.create(
     {
       query,
-      variables: __spreadValues({}, variables)
+      variables: __spreadValues({}, variables),
+      operationName: operationName || "PuiSpacesCmpAnonymousOperation"
     },
     { headers: __spreadValues({}, headers) }
   );
@@ -148,15 +149,16 @@ var fetchAllSpaces = (_0) => __async(null, [_0], function* ({
   query,
   clientId,
   variables,
-  _spaces = []
+  _spaces = [],
+  operationName
 }) {
-  const { items, currentPage, hasNextPage } = yield fetchSpaces({ query, clientId, variables });
+  const { items, currentPage, hasNextPage } = yield fetchSpaces({ query, clientId, variables, operationName });
   _spaces.push(...items);
   if (hasNextPage) {
     const vars = __spreadProps(__spreadValues({}, variables), {
       page: currentPage + 1
     });
-    return fetchAllSpaces({ query, clientId, variables: vars, _spaces });
+    return fetchAllSpaces({ query, clientId, variables: vars, _spaces, operationName });
   }
   return _spaces;
 });
@@ -582,6 +584,7 @@ var useSpacesContext = () => (0, import_react3.useContext)(SpacesContext);
 var Spaces = ({
   query = configurationFindMany_default,
   variables = { types: ["PAYERSPACE"] },
+  operationName,
   clientId,
   children,
   payerIds,
@@ -616,14 +619,14 @@ var Spaces = ({
   }
   if (spaceIds && spaceIds.length > 0) {
     for (const id of spaceIds) {
-      if (!(spacesMap.has(id) || configIdsMap.has(id))) {
+      if (id && typeof id === "string" && id.trim() && !(spacesMap.has(id) || configIdsMap.has(id))) {
         spaceIdsToQuery.add(id);
       }
     }
   }
   if (payerIds && payerIds.length > 0) {
     for (const pid of payerIds) {
-      if (!payerIdsMap.has(pid)) {
+      if (pid && typeof pid === "string" && pid.trim() && !payerIdsMap.has(pid)) {
         payerIdsToQuery.add(pid);
       }
     }
@@ -637,12 +640,12 @@ var Spaces = ({
     queries: [
       {
         queryKey: ["id", spaceIdVars],
-        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars }),
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars, operationName }),
         enabled: spaceIdsToQuery.size > 0
       },
       {
         queryKey: ["id", payerIdVars],
-        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars }),
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars, operationName }),
         enabled: payerIdsToQuery.size > 0
       }
     ]

package/dist/index.mjs

@@ -76,7 +76,7 @@ var spacesReducer = (state, action) => {
   const { type } = action;
   return actions[type](state, action);
 };
-var fetchSpaces = (_0) => __async(null, [_0], function* ({ query, clientId, variables }) {
+var fetchSpaces = (_0) => __async(null, [_0], function* ({ query, clientId, variables, operationName }) {
   const headers = {};
   if (clientId) {
     headers["X-Client-ID"] = clientId;
@@ -88,7 +88,8 @@ var fetchSpaces = (_0) => __async(null, [_0], function* ({ query, clientId, vari
   } = yield avWebQLApi.create(
     {
       query,
-      variables: __spreadValues({}, variables)
+      variables: __spreadValues({}, variables),
+      operationName: operationName || "PuiSpacesCmpAnonymousOperation"
     },
     { headers: __spreadValues({}, headers) }
   );
@@ -106,15 +107,16 @@ var fetchAllSpaces = (_0) => __async(null, [_0], function* ({
   query,
   clientId,
   variables,
-  _spaces = []
+  _spaces = [],
+  operationName
 }) {
-  const { items, currentPage, hasNextPage } = yield fetchSpaces({ query, clientId, variables });
+  const { items, currentPage, hasNextPage } = yield fetchSpaces({ query, clientId, variables, operationName });
   _spaces.push(...items);
   if (hasNextPage) {
     const vars = __spreadProps(__spreadValues({}, variables), {
       page: currentPage + 1
     });
-    return fetchAllSpaces({ query, clientId, variables: vars, _spaces });
+    return fetchAllSpaces({ query, clientId, variables: vars, _spaces, operationName });
   }
   return _spaces;
 });
@@ -540,6 +542,7 @@ var useSpacesContext = () => useContext2(SpacesContext);
 var Spaces = ({
   query = configurationFindMany_default,
   variables = { types: ["PAYERSPACE"] },
+  operationName,
   clientId,
   children,
   payerIds,
@@ -574,14 +577,14 @@ var Spaces = ({
   }
   if (spaceIds && spaceIds.length > 0) {
     for (const id of spaceIds) {
-      if (!(spacesMap.has(id) || configIdsMap.has(id))) {
+      if (id && typeof id === "string" && id.trim() && !(spacesMap.has(id) || configIdsMap.has(id))) {
         spaceIdsToQuery.add(id);
       }
     }
   }
   if (payerIds && payerIds.length > 0) {
     for (const pid of payerIds) {
-      if (!payerIdsMap.has(pid)) {
+      if (pid && typeof pid === "string" && pid.trim() && !payerIdsMap.has(pid)) {
         payerIdsToQuery.add(pid);
       }
     }
@@ -595,12 +598,12 @@ var Spaces = ({
     queries: [
       {
         queryKey: ["id", spaceIdVars],
-        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars }),
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars, operationName }),
         enabled: spaceIdsToQuery.size > 0
       },
       {
         queryKey: ["id", payerIdVars],
-        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars }),
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars, operationName }),
         enabled: payerIdsToQuery.size > 0
       }
     ]

package/package.json

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

package/src/lib/Spaces.test.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { render, waitFor, fireEvent } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces, useSpaces, useSpacesContext } from '..';
+import { fetchAllSpaces } from './spaces-data';
 
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { server } from '../../../mock/src/lib/server';
@@ -258,3 +259,95 @@ it('returns first payer space with when no spaceId passed', async () => {
   expect(spc1).toBeDefined();
   expect(spc2).toBeDefined();
 });
+describe('ID validation', () => {
+  let mockFetchAllSpaces: jest.SpyInstance;
+
+  beforeEach(() => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    mockFetchAllSpaces = jest.spyOn(require('./spaces-data'), 'fetchAllSpaces').mockResolvedValue([]);
+  });
+
+  afterEach(() => {
+    mockFetchAllSpaces.mockRestore();
+  });
+
+  it('filters invalid spaceIds before querying', async () => {
+    mockFetchAllSpaces.mockResolvedValue([]);
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={['valid-id', null, undefined, '', '  ', 123 as any] as any}>
+          <div>test</div>
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(mockFetchAllSpaces).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: expect.objectContaining({
+            ids: ['valid-id'],
+          }),
+        })
+      );
+    });
+  });
+
+  it('avoids querying if no valid spaceIds exist', async () => {
+    mockFetchAllSpaces.mockResolvedValue([]);
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces spaceIds={[null, undefined, '', '  ', 123 as any] as any}>
+          <div>test</div>
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(mockFetchAllSpaces).not.toHaveBeenCalled();
+    });
+  });
+
+  it('filters invalid payerIds before querying', async () => {
+    mockFetchAllSpaces.mockResolvedValue([]);
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces payerIds={['valid-payer', null, undefined, '', '  ', 456 as any] as any}>
+          <div>test</div>
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(mockFetchAllSpaces).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variables: expect.objectContaining({
+            payerIDs: ['valid-payer'],
+          }),
+        })
+      );
+    });
+  });
+
+  it('avoids querying if no valid payerIds exist', async () => {
+    mockFetchAllSpaces.mockResolvedValue([]);
+    const queryClient = new QueryClient();
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Spaces payerIds={[null, undefined, '', '  ', 456 as any] as any}>
+          <div>test</div>
+        </Spaces>
+      </QueryClientProvider>
+    );
+
+    await waitFor(() => {
+      expect(mockFetchAllSpaces).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/Spaces.tsx

@@ -17,6 +17,7 @@ export const useSpacesContext = () => useContext(SpacesContext);
 export const Spaces = ({
   query = configurationFindMany,
   variables = { types: ['PAYERSPACE'] },
+  operationName,
   clientId,
   children,
   payerIds,
@@ -57,7 +58,7 @@ export const Spaces = ({
 
   if (spaceIds && spaceIds.length > 0) {
     for (const id of spaceIds) {
-      if (!(spacesMap.has(id) || configIdsMap.has(id))) {
+      if (id && typeof id === 'string' && id.trim() && !(spacesMap.has(id) || configIdsMap.has(id))) {
         spaceIdsToQuery.add(id);
       }
     }
@@ -65,7 +66,7 @@ export const Spaces = ({
 
   if (payerIds && payerIds.length > 0) {
     for (const pid of payerIds) {
-      if (!payerIdsMap.has(pid)) {
+      if (pid && typeof pid === 'string' && pid.trim() && !payerIdsMap.has(pid)) {
         payerIdsToQuery.add(pid);
       }
     }
@@ -82,12 +83,12 @@ export const Spaces = ({
     queries: [
       {
         queryKey: ['id', spaceIdVars],
-        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars }),
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars, operationName }),
         enabled: spaceIdsToQuery.size > 0,
       },
       {
         queryKey: ['id', payerIdVars],
-        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars }),
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars, operationName }),
         enabled: payerIdsToQuery.size > 0,
       },
     ],

package/src/lib/spaces-data.tsx

@@ -28,7 +28,7 @@ export const spacesReducer = (state: SpacesContextType, action: SpacesReducerAct
   return actions[type](state, action);
 };
 
-export const fetchSpaces = async ({ query, clientId, variables }: FetchSpacesProps) => {
+export const fetchSpaces = async ({ query, clientId, variables, operationName }: FetchSpacesProps) => {
   const headers: Record<string, string> = {};
 
   if (clientId) {
@@ -43,6 +43,7 @@ export const fetchSpaces = async ({ query, clientId, variables }: FetchSpacesPro
     {
       query,
       variables: { ...variables },
+      operationName: operationName || 'PuiSpacesCmpAnonymousOperation',
     },
     { headers: { ...headers } }
   );
@@ -64,8 +65,9 @@ export const fetchAllSpaces = async ({
   clientId,
   variables,
   _spaces = [],
+  operationName,
 }: FetchAllSpacesProps): Promise<Space[]> => {
-  const { items, currentPage, hasNextPage } = await fetchSpaces({ query, clientId, variables });
+  const { items, currentPage, hasNextPage } = await fetchSpaces({ query, clientId, variables, operationName });
 
   _spaces.push(...items);
 
@@ -74,7 +76,7 @@ export const fetchAllSpaces = async ({
       ...variables,
       page: currentPage + 1,
     };
-    return fetchAllSpaces({ query, clientId, variables: vars, _spaces });
+    return fetchAllSpaces({ query, clientId, variables: vars, _spaces, operationName });
   }
 
   return _spaces;

package/src/lib/spaces-types.tsx

@@ -66,6 +66,13 @@ export type FetchSpacesProps = {
   variables?: object;
   /** The page sent to the avWebQL endpoint. */
   page?: string;
+  /**
+   * Name for the GraphQL operation, used for debugging and monitoring.
+   *
+   * Format: `{ValueStream || PayerName}{AbbreviatedAppName}{Description}{Type}` (PascalCase)
+   * @example "OnbPsFavoritesQuery"
+   */
+  operationName?: string;
 };
 
 export type FetchAllSpacesProps = {
@@ -77,6 +84,13 @@ export type FetchAllSpacesProps = {
   variables?: Record<string, any>;
   /** Array of spaces to be passed into the Spaces provider. */
   _spaces?: Space[];
+  /**
+   * Name for the GraphQL operation, used for debugging and monitoring.
+   *
+   * Format: `{ValueStream || PayerName}{AbbreviatedAppName}{Description}{Type}` (PascalCase)
+   * @example "OnbPsFavoritesQuery"
+   */
+  operationName?: string;
 };
 
 export type SpacesContextType = {
@@ -116,6 +130,13 @@ 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;
+  /**
+   * Name for the GraphQL operation, used for debugging and monitoring.
+   *
+   * Format: `{ValueStream || PayerName}{AbbreviatedAppName}{Description}{Type}` (PascalCase)
+   * @example "OnbPsFavoritesQuery"
+   */
+  operationName?: string;
   /** The Client ID obtained from APIConnect. */
   clientId?: string;
   /** Children can be a react child or render prop. */
@@ -133,4 +154,4 @@ export type SpacesProps = {
   spaces?: Space[];
 };
 
-export type UseSpaces = (...ids: string[]) => (Space)[] | undefined;
+export type UseSpaces = (...ids: string[]) => Space[] | undefined;