@availity/mui-spaces 1.1.2 → 2.0.1

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.0.1](https://github.com/Availity/element/compare/@availity/mui-spaces@2.0.0...@availity/mui-spaces@2.0.1) (2025-12-03)
+
+### Dependency Updates
+
+* `mui-button` updated to version `2.0.0`
+* `mui-card` updated to version `2.0.0`
+* `mui-chip` updated to version `2.0.0`
+* `mui-dialog` updated to version `2.0.0`
+* `mui-disclaimer` updated to version `2.0.0`
+* `mui-favorites` updated to version `2.0.0`
+* `mui-icon` updated to version `2.0.0`
+* `mui-layout` updated to version `2.0.0`
+* `mui-list` updated to version `2.0.0`
+* `mui-modal` updated to version `2.0.0`
+* `mui-progress` updated to version `2.0.0`
+* `mui-typography` updated to version `2.0.0`
+* `mui-paper` updated to version `2.0.0`
+## [2.0.0](https://github.com/Availity/element/compare/@availity/mui-spaces@1.1.2...@availity/mui-spaces@2.0.0) (2025-11-17)
+
+### Dependency Updates
+
+* `mui-button` updated to version `1.1.2`
+* `mui-card` updated to version `1.1.2`
+* `mui-chip` updated to version `1.1.2`
+* `mui-dialog` updated to version `1.1.2`
+* `mui-disclaimer` updated to version `1.1.2`
+* `mui-favorites` updated to version `1.1.2`
+* `mui-icon` updated to version `1.1.2`
+* `mui-layout` updated to version `1.1.2`
+* `mui-list` updated to version `1.1.2`
+* `mui-modal` updated to version `1.1.2`
+* `mui-progress` updated to version `1.1.2`
+* `mui-typography` updated to version `1.1.2`
+* `mui-paper` updated to version `1.1.2`
+
+### ⚠ BREAKING CHANGES
+
+* @mui/material upgraded to v7
+* @mui/x-* upgraded to v8
+* react upgraded to v19
+
+### Features
+
+* upgrade material and react dependencies ([51602a4](https://github.com/Availity/element/commit/51602a48c5304db6f61e2c7e772c9a3a4aa3f65c))
+
 ## [1.1.2](https://github.com/Availity/element/compare/@availity/mui-spaces@1.1.1...@availity/mui-spaces@1.1.2) (2025-10-30)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -120,7 +120,7 @@ declare const INITIAL_STATE: {
 };
 declare const SpacesContext: react.Context<SpacesContextType>;
 declare const useSpacesContext: () => SpacesContextType;
-declare const Spaces: ({ query, variables, operationName, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
+declare const Spaces: ({ query, variables, operationName, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => React.JSX.Element;
 declare const useSpaces: UseSpaces;
 
 type SpacesLinkVariants = 'card' | 'list' | 'default' | undefined;
@@ -148,26 +148,26 @@ type SpacesLinkWithSpaceId = {
 } & SpacesLinkProps;
 type SpacesLinkProps = {
     /** Children can be a react child or render prop. */
-    children?: JSX.Element | ((props: any | undefined) => JSX.Element);
+    children?: React.JSX.Element | ((props: any | undefined) => React.JSX.Element);
     /** Tag to overwrite the root component rendered. */
-    tag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    tag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     /** Tag to overwrite the body component that renders the title, description and data values.
      * It defaults to CardBody or div depending on the value of the variant prop.
      */
-    bodyTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    bodyTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     /** Tag to overwrite the title component. If variant prop is set to "card", defaults to CardTitle.
      * If variant is set to "list", defaults to ListItemHeading. Overwise, defaults to div.
      */
-    titleTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    titleTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     /** Tag to overwrite the text component. If variant prop is set to "card", defaults to Card Text.
      * If variant is set to "list", defaults to ListItemText. Otherwise, defaults to div.
      */
-    textTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    textTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     titleClassName?: string;
     /** When true, utilizes the Card component for styling. */
     card?: boolean;
     /** When true, renders an @availity/mui-icon next to the title if present on the Space. */
-    icon?: (props: SvgIconProps) => JSX.Element;
+    icon?: (props: SvgIconProps) => React.JSX.Element;
     /** When true, renders the Spaces description beneath the title. */
     description?: boolean;
     /** When passed in, provides predefined styles for the component.
@@ -251,7 +251,7 @@ type BaseSpacesImageProps = {
     id?: string;
     Loader?: ({ id }: {
         id: string;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };
 type SpacesImageSpaceId = {
     spaceId: string;

package/dist/index.d.ts

@@ -120,7 +120,7 @@ declare const INITIAL_STATE: {
 };
 declare const SpacesContext: react.Context<SpacesContextType>;
 declare const useSpacesContext: () => SpacesContextType;
-declare const Spaces: ({ query, variables, operationName, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => JSX.Element;
+declare const Spaces: ({ query, variables, operationName, clientId, children, payerIds, spaceIds, spaces: spacesFromProps, }: SpacesProps) => React.JSX.Element;
 declare const useSpaces: UseSpaces;
 
 type SpacesLinkVariants = 'card' | 'list' | 'default' | undefined;
@@ -148,26 +148,26 @@ type SpacesLinkWithSpaceId = {
 } & SpacesLinkProps;
 type SpacesLinkProps = {
     /** Children can be a react child or render prop. */
-    children?: JSX.Element | ((props: any | undefined) => JSX.Element);
+    children?: React.JSX.Element | ((props: any | undefined) => React.JSX.Element);
     /** Tag to overwrite the root component rendered. */
-    tag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    tag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     /** Tag to overwrite the body component that renders the title, description and data values.
      * It defaults to CardBody or div depending on the value of the variant prop.
      */
-    bodyTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    bodyTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     /** Tag to overwrite the title component. If variant prop is set to "card", defaults to CardTitle.
      * If variant is set to "list", defaults to ListItemHeading. Overwise, defaults to div.
      */
-    titleTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    titleTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     /** Tag to overwrite the text component. If variant prop is set to "card", defaults to Card Text.
      * If variant is set to "list", defaults to ListItemText. Otherwise, defaults to div.
      */
-    textTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+    textTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
     titleClassName?: string;
     /** When true, utilizes the Card component for styling. */
     card?: boolean;
     /** When true, renders an @availity/mui-icon next to the title if present on the Space. */
-    icon?: (props: SvgIconProps) => JSX.Element;
+    icon?: (props: SvgIconProps) => React.JSX.Element;
     /** When true, renders the Spaces description beneath the title. */
     description?: boolean;
     /** When passed in, provides predefined styles for the component.
@@ -251,7 +251,7 @@ type BaseSpacesImageProps = {
     id?: string;
     Loader?: ({ id }: {
         id: string;
-    }) => JSX.Element;
+    }) => React.JSX.Element;
 };
 type SpacesImageSpaceId = {
     spaceId: string;

package/introduction.mdx

@@ -1,5 +1,4 @@
-import { Markdown } from '@storybook/blocks';
-import { Meta } from '@storybook/addon-docs';
+import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import ReadMe from './README.md?raw';
 import CHANGELOG from './CHANGELOG.md?raw';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-spaces",
-  "version": "1.1.2",
+  "version": "2.0.1",
   "description": "Availity MUI Spaces Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,41 +40,41 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@availity/mui-button": "^1.1.5",
-    "@availity/mui-card": "^1.0.13",
-    "@availity/mui-chip": "^1.0.5",
-    "@availity/mui-dialog": "^1.0.16",
-    "@availity/mui-disclaimer": "^1.0.6",
-    "@availity/mui-favorites": "^1.1.8",
-    "@availity/mui-icon": "^1.1.1",
-    "@availity/mui-layout": "^1.0.3",
-    "@availity/mui-list": "^1.0.8",
-    "@availity/mui-modal": "^1.0.13",
-    "@availity/mui-paper": "^1.0.3",
-    "@availity/mui-progress": "^1.0.4",
-    "@availity/mui-typography": "^1.0.3",
-    "@mui/material": "^6.4.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "@availity/mui-button": "^2.0.1",
+    "@availity/mui-card": "^2.0.1",
+    "@availity/mui-chip": "^2.0.1",
+    "@availity/mui-dialog": "^2.0.1",
+    "@availity/mui-disclaimer": "^2.0.1",
+    "@availity/mui-favorites": "^2.0.1",
+    "@availity/mui-icon": "^2.0.1",
+    "@availity/mui-layout": "^2.0.1",
+    "@availity/mui-list": "^2.0.1",
+    "@availity/mui-modal": "^2.0.1",
+    "@availity/mui-paper": "^2.0.1",
+    "@availity/mui-progress": "^2.0.1",
+    "@availity/mui-typography": "^2.0.1",
+    "@mui/material": "^7.3.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-router-dom": "^6.30.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@availity/mui-button": "^1.1.5",
-    "@availity/mui-card": "^1.0.13",
-    "@availity/mui-chip": "^1.0.5",
-    "@availity/mui-dialog": "^1.0.16",
-    "@availity/mui-disclaimer": "^1.0.6",
-    "@availity/mui-favorites": "^1.1.8",
-    "@availity/mui-icon": "^1.1.1",
-    "@availity/mui-layout": "^1.0.3",
-    "@availity/mui-list": "^1.0.8",
-    "@availity/mui-modal": "^1.0.13",
-    "@availity/mui-progress": "^1.0.4",
-    "@availity/mui-typography": "^1.0.3",
-    "@mui/material": "^6.4.5",
-    "react": ">=16.3.0",
+    "@availity/mui-button": "^2.0.1",
+    "@availity/mui-card": "^2.0.1",
+    "@availity/mui-chip": "^2.0.1",
+    "@availity/mui-dialog": "^2.0.1",
+    "@availity/mui-disclaimer": "^2.0.1",
+    "@availity/mui-favorites": "^2.0.1",
+    "@availity/mui-icon": "^2.0.1",
+    "@availity/mui-layout": "^2.0.1",
+    "@availity/mui-list": "^2.0.1",
+    "@availity/mui-modal": "^2.0.1",
+    "@availity/mui-progress": "^2.0.1",
+    "@availity/mui-typography": "^2.0.1",
+    "@mui/material": "^7.0.0",
+    "react": ">=17.0.0",
     "react-router-dom": "^6.26.0"
   },
   "publishConfig": {

package/src/lib/Spaces.stories.tsx

@@ -1,6 +1,6 @@
 // Each exported component in the package should have its own stories file
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Paper } from '@availity/mui-paper';
 import { Typography } from '@availity/mui-typography';
 import { Stack } from '@availity/mui-layout';
@@ -31,7 +31,7 @@ const SpaceComponent = ({ spaceId }: { spaceId: string }) => {
   );
 };
 
-const SpaceContainer = ({ children }: { children?: React.ReactNode }): JSX.Element => {
+const SpaceContainer = ({ children }: { children?: React.ReactNode }): React.JSX.Element => {
   const { loading } = useSpacesContext();
   return loading ? <span>loading...</span> : <div>{children}</div>;
 };

package/src/lib/Spaces.tsx

@@ -3,7 +3,7 @@ import { useQueries } from '@tanstack/react-query';
 import { spacesReducer, fetchAllSpaces } from './spaces-data';
 import configurationFindMany from './configurationFindMany';
 import { ModalProvider } from './modals/ModalProvider';
-import type { Space, SpacesProps, SpacesContextType, UseSpaces } from './spaces-types';
+import type { Space, SpacesProps, SpacesContextType, UseSpaces, SpacesReducerAction } from './spaces-types';
 import { isReactNodeFunction } from './helpers';
 
 export const INITIAL_STATE = {
@@ -23,9 +23,9 @@ export const Spaces = ({
   payerIds,
   spaceIds,
   spaces: spacesFromProps,
-}: SpacesProps): JSX.Element => {
+}: SpacesProps): React.JSX.Element => {
   const [{ previousSpacesMap, previousSpacesByConfigMap, previousSpacesByPayerMap, loading, error }, dispatch] =
-    useReducer(spacesReducer, INITIAL_STATE);
+    useReducer<SpacesContextType, [SpacesReducerAction]>(spacesReducer, INITIAL_STATE);
 
   const spacesMap: Map<string, Space> = new Map(previousSpacesMap);
   const configIdsMap: Map<string, Space> = new Map(previousSpacesByConfigMap);

package/src/lib/SpacesAgreement.stories.tsx

@@ -1,5 +1,5 @@
 // Each exported component in the package should have its own stories file
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces } from './Spaces';
 import { SpacesAgreement, SpacesAgreementProps } from './SpacesAgreement';

package/src/lib/SpacesAgreement.test.tsx

@@ -16,6 +16,9 @@ afterEach(() => {
   server.resetHandlers();
 });
 
+// terminate the server
+afterAll(() => server.close());
+
 describe('SpacesAgreement', () => {
   it('should render regular text successfully', async () => {
     const queryClient = new QueryClient();

package/src/lib/SpacesDisclaimer.stories.tsx

@@ -1,5 +1,5 @@
 // Each exported component in the package should have its own stories file
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces } from './Spaces';
 import { SpacesDisclaimer, SpacesDisclaimerProps } from './SpacesDisclaimer';

package/src/lib/SpacesDisclaimer.test.tsx

@@ -16,6 +16,9 @@ afterEach(() => {
   server.resetHandlers();
 });
 
+// terminate the server
+afterAll(() => server.close());
+
 describe('SpacesDisclaimer', () => {
   it('should render regular text successfully', async () => {
     const queryClient = new QueryClient();

package/src/lib/SpacesGhostText.stories.tsx

@@ -1,5 +1,5 @@
 // Each exported component in the package should have its own stories file
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Spaces } from './Spaces';
 import { SpacesGhostText, SpacesGhostTextProps } from './SpacesGhostText';

package/src/lib/SpacesGhostText.test.tsx

@@ -16,6 +16,9 @@ afterEach(() => {
   server.resetHandlers();
 });
 
+// terminate the server
+afterAll(() => server.close());
+
 describe('SpacesGhostText', () => {
   it('should render successfully', async () => {
     const queryClient = new QueryClient();

package/src/lib/SpacesImage.stories.tsx

@@ -1,5 +1,5 @@
 // Each exported component in the package should have its own stories file
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Card, CardHeader, CardHeaderProps } from '@availity/mui-card';
 import { Spaces } from './Spaces';

package/src/lib/SpacesImage.test.tsx

@@ -24,6 +24,9 @@ afterEach(() => {
   jest.restoreAllMocks();
 });
 
+// terminate the server
+afterAll(() => server.close());
+
 describe('SpacesImage', () => {
   it('should render successfully', async () => {
     const queryClient = new QueryClient();

package/src/lib/SpacesImage.tsx

@@ -12,7 +12,7 @@ type BaseSpacesImageProps = {
     | 'images.promotionalHover';
   fallback?: string;
   id?: string;
-  Loader?: ({ id }: { id: string }) => JSX.Element;
+  Loader?: ({ id }: { id: string }) => React.JSX.Element;
 };
 
 type SpacesImageSpaceId = {

package/src/lib/SpacesLink/SpacesLink.tsx

@@ -25,7 +25,7 @@ const IconLink = styled(Link, { name: 'AvSpacesLink', slot: 'IconLink' })({});
 const getDisplayDate = (date: string | null | undefined) => dayjs(date).format('MM/DD/YYYY');
 
 const getContainerTag = (
-  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  propTag: ElementType<any, keyof React.JSX.IntrinsicElements> | undefined,
   variant: SpacesLinkVariants
 ) => {
   if (variant && variant !== 'default') return { card: Card, list: ListItem }[variant];
@@ -33,7 +33,7 @@ const getContainerTag = (
 };
 
 const getBodyTag = (
-  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  propTag: ElementType<any, keyof React.JSX.IntrinsicElements> | undefined,
   variant: SpacesLinkVariants
 ) => {
   if (variant && variant !== 'default') return { card: CardContent, list: 'div' }[variant];
@@ -41,7 +41,7 @@ const getBodyTag = (
 };
 
 const getTitleTag = (
-  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  propTag: ElementType<any, keyof React.JSX.IntrinsicElements> | undefined,
   variant: SpacesLinkVariants,
   showUrl?: boolean
 ) => {
@@ -51,7 +51,7 @@ const getTitleTag = (
 };
 
 const getTextTag = (
-  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  propTag: ElementType<any, keyof React.JSX.IntrinsicElements> | undefined,
   variant: SpacesLinkVariants
 ) => {
   if (variant && variant !== 'default') return { card: Typography, list: ListItemText }[variant];

package/src/lib/SpacesLink/spaces-link-types.tsx

@@ -31,26 +31,26 @@ export type SpacesLinkWithSpaceId = {
 
 export type SpacesLinkProps = {
   /** Children can be a react child or render prop. */
-  children?: JSX.Element | ((props: any | undefined) => JSX.Element);
+  children?: React.JSX.Element | ((props: any | undefined) => React.JSX.Element);
   /** Tag to overwrite the root component rendered. */
-  tag?: ElementType<any, keyof JSX.IntrinsicElements>;
+  tag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
   /** Tag to overwrite the body component that renders the title, description and data values.
    * It defaults to CardBody or div depending on the value of the variant prop.
    */
-  bodyTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+  bodyTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
   /** Tag to overwrite the title component. If variant prop is set to "card", defaults to CardTitle.
    * If variant is set to "list", defaults to ListItemHeading. Overwise, defaults to div.
    */
-  titleTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+  titleTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
   /** Tag to overwrite the text component. If variant prop is set to "card", defaults to Card Text.
    * If variant is set to "list", defaults to ListItemText. Otherwise, defaults to div.
    */
-  textTag?: ElementType<any, keyof JSX.IntrinsicElements>;
+  textTag?: ElementType<any, keyof React.JSX.IntrinsicElements>;
   titleClassName?: string;
   /** When true, utilizes the Card component for styling. */
   card?: boolean;
   /** When true, renders an @availity/mui-icon next to the title if present on the Space. */
-  icon?: (props: SvgIconProps) => JSX.Element;
+  icon?: (props: SvgIconProps) => React.JSX.Element;
   /** When true, renders the Spaces description beneath the title. */
   description?: boolean;
   /** When passed in, provides predefined styles for the component.

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

@@ -50,6 +50,9 @@ describe('useLink', () => {
 
   });
 
+  // terminate the server
+  afterAll(() => server.close());
+
   const space: Space = {
     type: 'APPLICATION',
     name: 'an application',

package/src/lib/helpers.tsx

@@ -31,8 +31,8 @@ export const getTarget = (target?: string) => {
 };
 
 export const isFunction = (
-  children: JSX.Element | ((props: any | undefined) => JSX.Element)
-): children is (props: any | undefined) => JSX.Element => typeof children === 'function';
+  children: React.JSX.Element | ((props: any | undefined) => React.JSX.Element)
+): children is (props: any | undefined) => React.JSX.Element => typeof children === 'function';
 
 export const isReactNodeFunction = (
   children: React.ReactNode | ((props: any | undefined) => React.ReactNode)

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

@@ -47,6 +47,9 @@ describe('DisclaimerModal', () => {
     server.resetHandlers();
   });
 
+  // terminate the server
+  afterAll(() => server.close());
+
   it('renders modal when space metadata contains disclaimerId', async () => {
     const { getByText } = render(<DisclaimerModal />);
 

package/src/lib/modals/modal-types.tsx

@@ -56,8 +56,8 @@ export type ModalProviderState = {
   modalState: ModalState;
   selectedModal?: {
     body?:
-      | (({ disclaimerId }: ModalProps) => JSX.Element)
-      | (({ parentPayerSpaces, name, state: { selectedOption }, setState }: ModalProps) => JSX.Element);
+      | (({ disclaimerId }: ModalProps) => React.JSX.Element)
+      | (({ parentPayerSpaces, name, state: { selectedOption }, setState }: ModalProps) => React.JSX.Element);
     onSubmit?: (
       props: ModalOptions,
       modalState: ModalState,