@availity/mui-table 1.0.21 → 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-table@2.0.0...@availity/mui-table@2.0.1) (2025-12-03)
+
+### Dependency Updates
+
+* `mui-button` updated to version `2.0.0`
+* `mui-chip` updated to version `2.0.0`
+* `mui-form-utils` updated to version `2.0.0`
+* `mui-icon` updated to version `2.0.0`
+* `mui-layout` updated to version `2.0.0`
+* `mui-link` updated to version `2.0.0`
+* `mui-menu` updated to version `2.0.0`
+* `mui-paper` updated to version `2.0.0`
+* `mui-textfield` updated to version `2.0.0`
+* `mui-typography` updated to version `2.0.0`
+* `mui-pagination` updated to version `2.0.0`
+* `mui-utils` updated to version `2.0.0`
+* `mui-transitions` updated to version `2.0.0`
+## [2.0.0](https://github.com/Availity/element/compare/@availity/mui-table@1.0.21...@availity/mui-table@2.0.0) (2025-11-17)
+
+### Dependency Updates
+
+* `mui-button` updated to version `1.0.21`
+* `mui-chip` updated to version `1.0.21`
+* `mui-form-utils` updated to version `1.0.21`
+* `mui-icon` updated to version `1.0.21`
+* `mui-layout` updated to version `1.0.21`
+* `mui-link` updated to version `1.0.21`
+* `mui-menu` updated to version `1.0.21`
+* `mui-paper` updated to version `1.0.21`
+* `mui-textfield` updated to version `1.0.21`
+* `mui-typography` updated to version `1.0.21`
+* `mui-pagination` updated to version `1.0.21`
+* `mui-utils` updated to version `1.0.21`
+* `mui-transitions` updated to version `1.0.21`
+
+### ⚠ 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.0.21](https://github.com/Availity/element/compare/@availity/mui-table@1.0.20...@availity/mui-table@1.0.21) (2025-10-30)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -16,12 +16,12 @@ type TableProps = {
     /** Applies striped style to rows. _Only available for legacy bootstrap theme during migration, is not part of design system._ */
     striped?: boolean;
 } & TableProps$1;
-declare const Table: ({ className, striped, ...props }: TableProps) => JSX.Element;
+declare const Table: ({ className, striped, ...props }: TableProps) => React.JSX.Element;
 
 type TableBodyProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableBodyProps$1;
-declare const TableBody: (props: TableBodyProps) => JSX.Element;
+declare const TableBody: (props: TableBodyProps) => React.JSX.Element;
 
 declare module '@mui/material/TableCell' {
     interface TableCellPropsVariantOverrides {
@@ -33,22 +33,22 @@ type TableCellProps = {
     /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */
     disableEmptyPlaceholder?: boolean;
 } & TableCellProps$1;
-declare const TableCell: ({ disableEmptyPlaceholder, children, ...props }: TableCellProps) => JSX.Element;
+declare const TableCell: ({ disableEmptyPlaceholder, children, ...props }: TableCellProps) => React.JSX.Element;
 
 type TableContainerProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableContainerProps$1;
-declare const TableContainer: (props: TableContainerProps) => JSX.Element;
+declare const TableContainer: (props: TableContainerProps) => React.JSX.Element;
 
 type TableFooterProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableFooterProps$1;
-declare const TableFooter: (props: TableFooterProps) => JSX.Element;
+declare const TableFooter: (props: TableFooterProps) => React.JSX.Element;
 
 type TableHeadProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableHeadProps$1;
-declare const TableHead: (props: TableHeadProps) => JSX.Element;
+declare const TableHead: (props: TableHeadProps) => React.JSX.Element;
 
 type TablePaginationProps = {
     Actions?: React.ReactNode;
@@ -61,9 +61,9 @@ declare const TablePagination: react.ForwardRefExoticComponent<Omit<TablePaginat
 type TableRowProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableRowProps$1;
-declare const TableRow: (props: TableRowProps) => JSX.Element;
+declare const TableRow: (props: TableRowProps) => React.JSX.Element;
 
 type TableSortLabelProps = Omit<TableSortLabelProps$1, 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'focusVisibleClassName' | 'hideSortIcon' | 'IconComponent' | 'TouchRippleProps' | 'touchRippleRef'>;
-declare const TableSortLabel: (props: TableSortLabelProps) => JSX.Element;
+declare const TableSortLabel: (props: TableSortLabelProps) => React.JSX.Element;
 
 export { Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TablePagination, type TablePaginationProps, type TableProps, TableRow, type TableRowProps, TableSortLabel, type TableSortLabelProps };

package/dist/index.d.ts

@@ -16,12 +16,12 @@ type TableProps = {
     /** Applies striped style to rows. _Only available for legacy bootstrap theme during migration, is not part of design system._ */
     striped?: boolean;
 } & TableProps$1;
-declare const Table: ({ className, striped, ...props }: TableProps) => JSX.Element;
+declare const Table: ({ className, striped, ...props }: TableProps) => React.JSX.Element;
 
 type TableBodyProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableBodyProps$1;
-declare const TableBody: (props: TableBodyProps) => JSX.Element;
+declare const TableBody: (props: TableBodyProps) => React.JSX.Element;
 
 declare module '@mui/material/TableCell' {
     interface TableCellPropsVariantOverrides {
@@ -33,22 +33,22 @@ type TableCellProps = {
     /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */
     disableEmptyPlaceholder?: boolean;
 } & TableCellProps$1;
-declare const TableCell: ({ disableEmptyPlaceholder, children, ...props }: TableCellProps) => JSX.Element;
+declare const TableCell: ({ disableEmptyPlaceholder, children, ...props }: TableCellProps) => React.JSX.Element;
 
 type TableContainerProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableContainerProps$1;
-declare const TableContainer: (props: TableContainerProps) => JSX.Element;
+declare const TableContainer: (props: TableContainerProps) => React.JSX.Element;
 
 type TableFooterProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableFooterProps$1;
-declare const TableFooter: (props: TableFooterProps) => JSX.Element;
+declare const TableFooter: (props: TableFooterProps) => React.JSX.Element;
 
 type TableHeadProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableHeadProps$1;
-declare const TableHead: (props: TableHeadProps) => JSX.Element;
+declare const TableHead: (props: TableHeadProps) => React.JSX.Element;
 
 type TablePaginationProps = {
     Actions?: React.ReactNode;
@@ -61,9 +61,9 @@ declare const TablePagination: react.ForwardRefExoticComponent<Omit<TablePaginat
 type TableRowProps = {
     component?: ElementType<TableCellBaseProps>;
 } & TableRowProps$1;
-declare const TableRow: (props: TableRowProps) => JSX.Element;
+declare const TableRow: (props: TableRowProps) => React.JSX.Element;
 
 type TableSortLabelProps = Omit<TableSortLabelProps$1, 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'focusVisibleClassName' | 'hideSortIcon' | 'IconComponent' | 'TouchRippleProps' | 'touchRippleRef'>;
-declare const TableSortLabel: (props: TableSortLabelProps) => JSX.Element;
+declare const TableSortLabel: (props: TableSortLabelProps) => React.JSX.Element;
 
 export { Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TablePagination, type TablePaginationProps, type TableProps, TableRow, type TableRowProps, TableSortLabel, type TableSortLabelProps };

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-table",
-  "version": "1.0.21",
+  "version": "2.0.1",
   "description": "Availity MUI Table Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -41,32 +41,32 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "1.3.3",
-    "@availity/mui-icon": "1.1.1",
-    "@availity/mui-pagination": "1.0.12",
-    "@availity/mui-utils": "1.0.3"
+    "@availity/mui-form-utils": "2.0.1",
+    "@availity/mui-icon": "2.0.1",
+    "@availity/mui-pagination": "2.0.1",
+    "@availity/mui-utils": "2.0.1"
   },
   "devDependencies": {
-    "@availity/mui-button": "1.1.5",
-    "@availity/mui-chip": "1.0.5",
-    "@availity/mui-form-utils": "1.3.3",
-    "@availity/mui-icon": "1.1.1",
-    "@availity/mui-layout": "^1.0.3",
-    "@availity/mui-link": "1.1.2",
-    "@availity/mui-menu": "1.0.7",
-    "@availity/mui-paper": "1.0.3",
-    "@availity/mui-textfield": "1.3.2",
-    "@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-chip": "2.0.1",
+    "@availity/mui-form-utils": "2.0.1",
+    "@availity/mui-icon": "2.0.1",
+    "@availity/mui-layout": "^2.0.1",
+    "@availity/mui-link": "2.0.1",
+    "@availity/mui-menu": "2.0.1",
+    "@availity/mui-paper": "2.0.1",
+    "@availity/mui-textfield": "2.0.1",
+    "@availity/mui-typography": "2.0.1",
+    "@mui/material": "^7.3.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-hook-form": "^7.55.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^6.4.5",
-    "react": ">=16.3.0"
+    "@mui/material": "^7.0.0",
+    "react": ">=17.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/lib/Patterns.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { StoryObj, Decorator } from '@storybook/react';
+import { StoryObj, Decorator } from '@storybook/react-vite';
 import FormControl from '@mui/material/FormControl';
 import FormGroup from '@mui/material/FormGroup';
 import Popover from '@mui/material/Popover';

package/src/lib/Table.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // 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 { useMemo, useState } from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import { IconButton } from '@availity/mui-button';

package/src/lib/Table.tsx

@@ -8,6 +8,6 @@ export type TableProps = {
   striped?: boolean;
 } & MuiTableProps;
 
-export const Table = ({ className, striped, ...props }: TableProps): JSX.Element => {
+export const Table = ({ className, striped, ...props }: TableProps): React.JSX.Element => {
   return <MuiTable className={`${striped ? 'striped ' : ''}${className || ''}`} {...props} />;
 };

package/src/lib/TableBody.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 { TableBody, TableBodyProps } from './TableBody';
 import { TableRow } from './TableRow';
 import { TableCell } from './TableCell';

package/src/lib/TableBody.tsx

@@ -6,6 +6,6 @@ export type TableBodyProps = {
   component?: ElementType<TableCellBaseProps>;
 } & MuiTableBodyProps;
 
-export const TableBody = (props: TableBodyProps): JSX.Element => {
+export const TableBody = (props: TableBodyProps): React.JSX.Element => {
   return <MuiTableBody {...props} />;
 };

package/src/lib/TableCell.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 { TableCell, TableCellProps } from './TableCell';
 
 const meta: Meta<typeof TableCell> = {

package/src/lib/TableCell.tsx

@@ -18,7 +18,7 @@ export type TableCellProps = {
   disableEmptyPlaceholder?: boolean;
 } & MuiTableCellProps;
 
-export const TableCell = ({disableEmptyPlaceholder = false, children, ...props}: TableCellProps): JSX.Element => {
+export const TableCell = ({disableEmptyPlaceholder = false, children, ...props}: TableCellProps): React.JSX.Element => {
   const isPlaceholderActive = !disableEmptyPlaceholder && !children;
   const placeholder = <><div aria-hidden>&mdash;</div><div style={visuallyHidden}>No Data</div></>;
 

package/src/lib/TableContainer.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 { TableContainer, TableContainerProps } from './TableContainer';
 
 const meta: Meta<typeof TableContainer> = {

package/src/lib/TableContainer.tsx

@@ -9,6 +9,6 @@ export type TableContainerProps = {
   component?: ElementType<TableCellBaseProps>;
 } & MuiTableContainerProps;
 
-export const TableContainer = (props: TableContainerProps): JSX.Element => {
+export const TableContainer = (props: TableContainerProps): React.JSX.Element => {
   return <MuiTableContainer {...props} />;
 };

package/src/lib/TableFooter.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 { TableFooter, TableFooterProps } from './TableFooter';
 import { Table, TableCell, TablePagination, TableRow } from '..';
 

package/src/lib/TableFooter.tsx

@@ -6,6 +6,6 @@ export type TableFooterProps = {
   component?: ElementType<TableCellBaseProps>;
 } & MuiTableFooterProps;
 
-export const TableFooter = (props: TableFooterProps): JSX.Element => {
+export const TableFooter = (props: TableFooterProps): React.JSX.Element => {
   return <MuiTableFooter {...props} />;
 };

package/src/lib/TableHead.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 { TableHead, TableHeadProps } from './TableHead';
 import { TableCell, TableRow } from '..';
 

package/src/lib/TableHead.tsx

@@ -6,6 +6,6 @@ export type TableHeadProps = {
   component?: ElementType<TableCellBaseProps>;
 } & MuiTableHeadProps;
 
-export const TableHead = (props: TableHeadProps): JSX.Element => {
+export const TableHead = (props: TableHeadProps): React.JSX.Element => {
   return <MuiTableHead {...props} />;
 };

package/src/lib/TablePagination.stories.tsx

@@ -1,6 +1,6 @@
 // Each exported component in the package should have its own stories file
 import { useEffect, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Table, TableFooter, TableRow, TablePagination, TablePaginationProps } from '..';
 

package/src/lib/TablePagination.tsx

@@ -3,7 +3,7 @@ import {
   default as MuiTablePagination,
   TablePaginationProps as MuiTablePaginationProps,
 } from '@mui/material/TablePagination';
-import { TablePaginationActionsProps as MuiTablePaginationActionsProps } from '@mui/material/TablePagination/TablePaginationActions';
+import { TablePaginationActionsProps as MuiTablePaginationActionsProps } from '@mui/material/TablePaginationActions';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { TableCellBaseProps } from '@mui/material/TableCell';
 import { Pagination, PaginationProps } from '@availity/mui-pagination';
@@ -45,7 +45,7 @@ export const TablePagination = forwardRef<unknown, TablePaginationProps>((props,
   const { Actions, paginationProps, ...rest } = props;
   const [openDetected, setOpenDetected] = useState(false);
 
-  const ActionsPagination = (props: TablePaginationActionsProps): JSX.Element => {
+  const ActionsPagination = (props: TablePaginationActionsProps): React.JSX.Element => {
     // Pull secondary props off so they are not passed to Pagination component
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { count, page, rowsPerPage, onPageChange, nextIconButtonProps, backIconButtonProps, slotProps, ...rest } =

package/src/lib/TableRow.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 { TableRow, TableRowProps } from './TableRow';
 import { TableBody, TableCell } from '..';
 import { useState } from 'react';

package/src/lib/TableRow.tsx

@@ -6,6 +6,6 @@ export type TableRowProps = {
   component?: ElementType<TableCellBaseProps>;
 } & MuiTableRowProps;
 
-export const TableRow = (props: TableRowProps): JSX.Element => {
+export const TableRow = (props: TableRowProps): React.JSX.Element => {
   return <MuiTableRow {...props} />;
 };

package/src/lib/TableSortLabel.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 { TableSortLabel, TableSortLabelProps } from './TableSortLabel';
 import { Grid } from '@availity/mui-layout';
 import { useState } from 'react';

package/src/lib/TableSortLabel.tsx

@@ -19,7 +19,7 @@ export type TableSortLabelProps = Omit<
   | 'touchRippleRef'
 >;
 
-const TableSortLabel = (props: TableSortLabelProps): JSX.Element => {
+const TableSortLabel = (props: TableSortLabelProps): React.JSX.Element => {
   // mui rotates descending icon 180 degrees for ascending icon
   const IconComponent = props.active ? SortDownIcon : SortIcon;
   const SortedDescription = props.active ? (