@availity/mui-table 0.1.23 → 0.1.25

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.25](https://github.com/Availity/element/compare/@availity/mui-table@0.1.24...@availity/mui-table@0.1.25) (2024-10-18)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.1.24`
+* `mui-textfield` updated to version `0.1.24`
+
+### Bug Fixes
+
+* **mui-form-utils:** resolve aria-controls warnings ([487fe12](https://github.com/Availity/element/commit/487fe12229a2f1510f8e7ba76028f798896a1b20))
+
+## [0.1.24](https://github.com/Availity/element/compare/@availity/mui-table@0.1.23...@availity/mui-table@0.1.24) (2024-10-15)
+
+### Dependency Updates
+
+* `mui-pagination` updated to version `0.1.23`
 ## [0.1.23](https://github.com/Availity/element/compare/@availity/mui-table@0.1.22...@availity/mui-table@0.1.23) (2024-10-04)
 
 

package/dist/index.d.mts

@@ -7,7 +7,7 @@ import { TableContainerProps as TableContainerProps$1 } from '@mui/material/Tabl
 import { TableFooterProps as TableFooterProps$1 } from '@mui/material/TableFooter';
 import { TableHeadProps as TableHeadProps$1 } from '@mui/material/TableHead';
 import { TablePaginationProps as TablePaginationProps$1 } from '@mui/material/TablePagination';
-import { PaginationProps as PaginationProps$1 } from '@mui/material/Pagination';
+import { PaginationProps } from '@availity/mui-pagination';
 import { TableRowProps as TableRowProps$1 } from '@mui/material/TableRow';
 import { TableSortLabelProps as TableSortLabelProps$1 } from '@mui/material/TableSortLabel';
 
@@ -48,12 +48,6 @@ type TableHeadProps = {
 } & TableHeadProps$1;
 declare const TableHead: (props: TableHeadProps) => JSX.Element;
 
-type PaginationProps = {
-    /** The size of the component
-     * @default 'determined by theme' */
-    size?: 'medium' | 'large';
-} & Omit<PaginationProps$1, 'color' | 'getItemAriaLabel' | 'renderItem' | 'shape' | 'size'>;
-
 type TablePaginationProps = {
     Actions?: React.ReactNode;
     component?: ElementType<TableCellBaseProps>;

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { TableContainerProps as TableContainerProps$1 } from '@mui/material/Tabl
 import { TableFooterProps as TableFooterProps$1 } from '@mui/material/TableFooter';
 import { TableHeadProps as TableHeadProps$1 } from '@mui/material/TableHead';
 import { TablePaginationProps as TablePaginationProps$1 } from '@mui/material/TablePagination';
-import { PaginationProps as PaginationProps$1 } from '@mui/material/Pagination';
+import { PaginationProps } from '@availity/mui-pagination';
 import { TableRowProps as TableRowProps$1 } from '@mui/material/TableRow';
 import { TableSortLabelProps as TableSortLabelProps$1 } from '@mui/material/TableSortLabel';
 
@@ -48,12 +48,6 @@ type TableHeadProps = {
 } & TableHeadProps$1;
 declare const TableHead: (props: TableHeadProps) => JSX.Element;
 
-type PaginationProps = {
-    /** The size of the component
-     * @default 'determined by theme' */
-    size?: 'medium' | 'large';
-} & Omit<PaginationProps$1, 'color' | 'getItemAriaLabel' | 'renderItem' | 'shape' | 'size'>;
-
 type TablePaginationProps = {
     Actions?: React.ReactNode;
     component?: ElementType<TableCellBaseProps>;

package/dist/index.js

@@ -117,52 +117,17 @@ var TableHead = (props) => {
 // src/lib/TablePagination.tsx
 var import_react = require("react");
 var import_TablePagination = __toESM(require("@mui/material/TablePagination"));
-
-// ../pagination/src/lib/Pagination.tsx
-var import_Pagination = __toESM(require("@mui/material/Pagination"));
-
-// ../pagination/src/lib/PaginationItem.tsx
-var import_PaginationItem = __toESM(require("@mui/material/PaginationItem"));
-var import_mui_icon = require("@availity/mui-icon");
+var import_mui_pagination = require("@availity/mui-pagination");
+var import_mui_form_utils = require("@availity/mui-form-utils");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var slots = {
-  first: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_icon.NavigatePreviousIcon, { sx: { mr: ".2rem" } }),
-    " First"
-  ] }),
-  previous: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_icon.NavigatePreviousIcon, { sx: { mr: ".2rem" } }),
-    " Prev"
-  ] }),
-  next: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    "Next ",
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_icon.NavigateNextIcon, { sx: { ml: ".2rem" } })
-  ] }),
-  last: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    "Last ",
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_mui_icon.NavigateNextIcon, { sx: { ml: ".2rem" } })
-  ] })
-};
-var PaginationItem = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_PaginationItem.default, __spreadValues({ slots }, props));
-};
-
-// ../pagination/src/lib/Pagination.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Pagination = (_a) => {
-  var rest = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Pagination.default, __spreadProps(__spreadValues({}, rest), { renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaginationItem, __spreadValues({}, item)) }));
-};
-
-// src/lib/TablePagination.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
 var TablePagination = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, { Actions, paginationProps } = _a, rest = __objRest(_a, ["Actions", "paginationProps"]);
+  const [openDetected, setOpenDetected] = (0, import_react.useState)(false);
   const ActionsPagination = (props2) => {
     const _a2 = props2, { count, page, rowsPerPage, onPageChange, backIconButtonProps, nextIconButtonProps } = _a2, rest2 = __objRest(_a2, ["count", "page", "rowsPerPage", "onPageChange", "backIconButtonProps", "nextIconButtonProps"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      typeof count === "number" && count / rowsPerPage > 1 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        Pagination,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      typeof count === "number" && count / rowsPerPage > 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_mui_pagination.Pagination,
         __spreadProps(__spreadValues(__spreadValues({}, rest2), paginationProps), {
           count: Math.ceil(Math.abs(count / rowsPerPage)),
           page: page + 1,
@@ -174,14 +139,14 @@ var TablePagination = (0, import_react.forwardRef)((props, ref) => {
       Actions || null
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_TablePagination.default, __spreadProps(__spreadValues({ ActionsComponent: ActionsPagination }, rest), { ref }));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_TablePagination.default, __spreadProps(__spreadValues({ ActionsComponent: ActionsPagination }, rest), { slotProps: { select: __spreadValues({}, (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected)) }, ref }));
 });
 
 // src/lib/TableRow.tsx
 var import_TableRow = __toESM(require("@mui/material/TableRow"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var TableRow = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_TableRow.default, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_TableRow.default, __spreadValues({}, props));
 };
 
 // src/lib/TableSortLabel.tsx
@@ -203,16 +168,16 @@ var visuallyHidden = {
 var visuallyHidden_default = visuallyHidden;
 
 // src/lib/TableSortLabel.tsx
-var import_mui_icon2 = require("@availity/mui-icon");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_mui_icon = require("@availity/mui-icon");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var TableSortLabel = (props) => {
-  const IconComponent = props.active ? import_mui_icon2.SortDownIcon : import_mui_icon2.SortIcon;
-  const SortedDescription = props.active ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Box.default, { component: "span", sx: visuallyHidden_default, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const IconComponent = props.active ? import_mui_icon.SortDownIcon : import_mui_icon.SortIcon;
+  const SortedDescription = props.active ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Box.default, { component: "span", sx: visuallyHidden_default, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_TableSortLabel.default,
     __spreadProps(__spreadValues({}, props), {
       IconComponent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
         props.children,
         " ",
         SortedDescription

package/dist/index.mjs

@@ -78,57 +78,20 @@ var TableHead = (props) => {
 };
 
 // src/lib/TablePagination.tsx
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import {
   default as MuiTablePagination
 } from "@mui/material/TablePagination";
-
-// ../pagination/src/lib/Pagination.tsx
-import { default as MuiPagination } from "@mui/material/Pagination";
-
-// ../pagination/src/lib/PaginationItem.tsx
-import {
-  default as MuiPaginationItem
-} from "@mui/material/PaginationItem";
-import { NavigateNextIcon, NavigatePreviousIcon } from "@availity/mui-icon";
+import { Pagination } from "@availity/mui-pagination";
+import { SelectAccessibilityOverrides } from "@availity/mui-form-utils";
 import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
-var slots = {
-  first: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx7(NavigatePreviousIcon, { sx: { mr: ".2rem" } }),
-    " First"
-  ] }),
-  previous: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx7(NavigatePreviousIcon, { sx: { mr: ".2rem" } }),
-    " Prev"
-  ] }),
-  next: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    "Next ",
-    /* @__PURE__ */ jsx7(NavigateNextIcon, { sx: { ml: ".2rem" } })
-  ] }),
-  last: () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    "Last ",
-    /* @__PURE__ */ jsx7(NavigateNextIcon, { sx: { ml: ".2rem" } })
-  ] })
-};
-var PaginationItem = (props) => {
-  return /* @__PURE__ */ jsx7(MuiPaginationItem, __spreadValues({ slots }, props));
-};
-
-// ../pagination/src/lib/Pagination.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Pagination = (_a) => {
-  var rest = __objRest(_a, []);
-  return /* @__PURE__ */ jsx8(MuiPagination, __spreadProps(__spreadValues({}, rest), { renderItem: (item) => /* @__PURE__ */ jsx8(PaginationItem, __spreadValues({}, item)) }));
-};
-
-// src/lib/TablePagination.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var TablePagination = forwardRef((props, ref) => {
   const _a = props, { Actions, paginationProps } = _a, rest = __objRest(_a, ["Actions", "paginationProps"]);
+  const [openDetected, setOpenDetected] = useState(false);
   const ActionsPagination = (props2) => {
     const _a2 = props2, { count, page, rowsPerPage, onPageChange, backIconButtonProps, nextIconButtonProps } = _a2, rest2 = __objRest(_a2, ["count", "page", "rowsPerPage", "onPageChange", "backIconButtonProps", "nextIconButtonProps"]);
-    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      typeof count === "number" && count / rowsPerPage > 1 ? /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      typeof count === "number" && count / rowsPerPage > 1 ? /* @__PURE__ */ jsx7(
         Pagination,
         __spreadProps(__spreadValues(__spreadValues({}, rest2), paginationProps), {
           count: Math.ceil(Math.abs(count / rowsPerPage)),
@@ -141,14 +104,14 @@ var TablePagination = forwardRef((props, ref) => {
       Actions || null
     ] });
   };
-  return /* @__PURE__ */ jsx9(MuiTablePagination, __spreadProps(__spreadValues({ ActionsComponent: ActionsPagination }, rest), { ref }));
+  return /* @__PURE__ */ jsx7(MuiTablePagination, __spreadProps(__spreadValues({ ActionsComponent: ActionsPagination }, rest), { slotProps: { select: __spreadValues({}, SelectAccessibilityOverrides(openDetected, setOpenDetected)) }, ref }));
 });
 
 // src/lib/TableRow.tsx
 import { default as MuiTableRow } from "@mui/material/TableRow";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var TableRow = (props) => {
-  return /* @__PURE__ */ jsx10(MuiTableRow, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx8(MuiTableRow, __spreadValues({}, props));
 };
 
 // src/lib/TableSortLabel.tsx
@@ -173,15 +136,15 @@ var visuallyHidden_default = visuallyHidden;
 
 // src/lib/TableSortLabel.tsx
 import { SortDownIcon, SortIcon } from "@availity/mui-icon";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var TableSortLabel = (props) => {
   const IconComponent = props.active ? SortDownIcon : SortIcon;
-  const SortedDescription = props.active ? /* @__PURE__ */ jsx11(Box, { component: "span", sx: visuallyHidden_default, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
-  return /* @__PURE__ */ jsx11(
+  const SortedDescription = props.active ? /* @__PURE__ */ jsx9(Box, { component: "span", sx: visuallyHidden_default, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
+  return /* @__PURE__ */ jsx9(
     MuiTableSortLabel,
     __spreadProps(__spreadValues({}, props), {
       IconComponent,
-      children: /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
         props.children,
         " ",
         SortedDescription

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-table",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "description": "Availity MUI Table Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,18 +33,20 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-icon": "0.10.1"
+    "@availity/mui-form-utils": "0.13.1",
+    "@availity/mui-icon": "0.10.1",
+    "@availity/mui-pagination": "0.3.2"
   },
   "devDependencies": {
     "@availity/mui-button": "0.6.10",
     "@availity/mui-chip": "0.2.20",
-    "@availity/mui-form-utils": "0.13.0",
+    "@availity/mui-form-utils": "0.13.1",
     "@availity/mui-icon": "0.10.1",
     "@availity/mui-layout": "0.1.6",
     "@availity/mui-link": "0.4.3",
     "@availity/mui-menu": "0.2.10",
     "@availity/mui-paper": "0.1.9",
-    "@availity/mui-textfield": "0.6.8",
+    "@availity/mui-textfield": "0.6.9",
     "@availity/mui-typography": "0.2.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",

package/src/lib/TablePagination.tsx

@@ -1,10 +1,11 @@
-import { ElementType, forwardRef } from 'react';
+import { ElementType, forwardRef, useState } from 'react';
 import {
   default as MuiTablePagination,
   TablePaginationProps as MuiTablePaginationProps,
 } from '@mui/material/TablePagination';
 import { TableCellBaseProps } from '@mui/material/TableCell';
 import { Pagination, PaginationProps } from '@availity/mui-pagination';
+import { SelectAccessibilityOverrides } from '@availity/mui-form-utils';
 
 export type TablePaginationProps = {
   Actions?: React.ReactNode;
@@ -35,6 +36,7 @@ type TablePaginationActionsProps = {
 
 export const TablePagination = forwardRef<unknown, TablePaginationProps>((props, ref) => {
   const { Actions, paginationProps, ...rest } = props;
+  const [ openDetected, setOpenDetected ] = useState(false);
 
   const ActionsPagination = (props: TablePaginationActionsProps): JSX.Element => {
     const { count, page, rowsPerPage, onPageChange, backIconButtonProps, nextIconButtonProps, ...rest } = props;
@@ -57,5 +59,5 @@ export const TablePagination = forwardRef<unknown, TablePaginationProps>((props,
     );
   };
 
-  return <MuiTablePagination ActionsComponent={ActionsPagination} {...rest} ref={ref} />;
+  return <MuiTablePagination ActionsComponent={ActionsPagination} {...rest} slotProps={{select: {...SelectAccessibilityOverrides(openDetected, setOpenDetected)}}} ref={ref} />;
 });