@availity/mui-table 0.1.27 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-table@0.2.0...@availity/mui-table@0.2.1) (2024-11-21)
+
+
+### Bug Fixes
+
+* **mui-table:** replace placeholder dash ([fbed326](https://github.com/Availity/element/commit/fbed3260738275b1d17ff31005c7ea338cf0fe02))
+
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-table@0.1.27...@availity/mui-table@0.2.0) (2024-11-20)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.1.27`
+* `mui-textfield` updated to version `0.1.27`
+* `mui-pagination` updated to version `0.1.27`
+* `mui-utils` updated to version `0.1.27`
+
+### Features
+
+* **mui-table:** add empty cell placeholder ([2751a39](https://github.com/Availity/element/commit/2751a39c5378341799b22615514848aa42f32317))
+* **mui-utils:** swap to element utils package ([6025a97](https://github.com/Availity/element/commit/6025a97905473a7db9e01cc47c9653febf221592))
+
 ## [0.1.27](https://github.com/Availity/element/compare/@availity/mui-table@0.1.26...@availity/mui-table@0.1.27) (2024-10-31)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -30,8 +30,10 @@ declare module '@mui/material/TableCell' {
 }
 type TableCellProps = {
     component?: ElementType<TableCellBaseProps>;
+    /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */
+    disableEmptyPlaceholder?: boolean;
 } & TableCellProps$1;
-declare const TableCell: (props: TableCellProps) => JSX.Element;
+declare const TableCell: ({ disableEmptyPlaceholder, children, ...props }: TableCellProps) => JSX.Element;
 
 type TableContainerProps = {
     component?: ElementType<TableCellBaseProps>;

package/dist/index.d.ts

@@ -30,8 +30,10 @@ declare module '@mui/material/TableCell' {
 }
 type TableCellProps = {
     component?: ElementType<TableCellBaseProps>;
+    /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */
+    disableEmptyPlaceholder?: boolean;
 } & TableCellProps$1;
-declare const TableCell: (props: TableCellProps) => JSX.Element;
+declare const TableCell: ({ disableEmptyPlaceholder, children, ...props }: TableCellProps) => JSX.Element;
 
 type TableContainerProps = {
     component?: ElementType<TableCellBaseProps>;

package/dist/index.js

@@ -88,9 +88,16 @@ var TableBody = (props) => {
 
 // src/lib/TableCell.tsx
 var import_TableCell = __toESM(require("@mui/material/TableCell"));
+var import_mui_utils = require("@availity/mui-utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var TableCell = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_TableCell.default, __spreadValues({}, props));
+var TableCell = (_a) => {
+  var _b = _a, { disableEmptyPlaceholder = false, children } = _b, props = __objRest(_b, ["disableEmptyPlaceholder", "children"]);
+  const isPlaceholderActive = !disableEmptyPlaceholder && !children;
+  const placeholder = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "aria-hidden": true, children: "\u2014" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: import_mui_utils.visuallyHidden, children: "No Data" })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_TableCell.default, __spreadProps(__spreadValues({}, props), { children: isPlaceholderActive ? placeholder : children }));
 };
 
 // src/lib/TableContainer.tsx
@@ -152,27 +159,12 @@ var TableRow = (props) => {
 // src/lib/TableSortLabel.tsx
 var import_TableSortLabel = __toESM(require("@mui/material/TableSortLabel"));
 var import_Box = __toESM(require("@mui/material/Box"));
-
-// ../../node_modules/@mui/utils/visuallyHidden/visuallyHidden.js
-var visuallyHidden = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  whiteSpace: "nowrap",
-  width: "1px"
-};
-var visuallyHidden_default = visuallyHidden;
-
-// src/lib/TableSortLabel.tsx
+var import_mui_utils2 = require("@availity/mui-utils");
 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_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;
+  const SortedDescription = props.active ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Box.default, { component: "span", sx: import_mui_utils2.visuallyHidden, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_TableSortLabel.default,
     __spreadProps(__spreadValues({}, props), {

package/dist/index.mjs

@@ -49,9 +49,16 @@ var TableBody = (props) => {
 import {
   default as MuiTableCell
 } from "@mui/material/TableCell";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var TableCell = (props) => {
-  return /* @__PURE__ */ jsx3(MuiTableCell, __spreadValues({}, props));
+import { visuallyHidden } from "@availity/mui-utils";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var TableCell = (_a) => {
+  var _b = _a, { disableEmptyPlaceholder = false, children } = _b, props = __objRest(_b, ["disableEmptyPlaceholder", "children"]);
+  const isPlaceholderActive = !disableEmptyPlaceholder && !children;
+  const placeholder = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3("div", { "aria-hidden": true, children: "\u2014" }),
+    /* @__PURE__ */ jsx3("div", { style: visuallyHidden, children: "No Data" })
+  ] });
+  return /* @__PURE__ */ jsx3(MuiTableCell, __spreadProps(__spreadValues({}, props), { children: isPlaceholderActive ? placeholder : children }));
 };
 
 // src/lib/TableContainer.tsx
@@ -84,13 +91,13 @@ import {
 } from "@mui/material/TablePagination";
 import { Pagination } from "@availity/mui-pagination";
 import { SelectAccessibilityOverrides } from "@availity/mui-form-utils";
-import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, 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__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
       typeof count === "number" && count / rowsPerPage > 1 ? /* @__PURE__ */ jsx7(
         Pagination,
         __spreadProps(__spreadValues(__spreadValues({}, rest2), paginationProps), {
@@ -119,32 +126,17 @@ import {
   default as MuiTableSortLabel
 } from "@mui/material/TableSortLabel";
 import Box from "@mui/material/Box";
-
-// ../../node_modules/@mui/utils/visuallyHidden/visuallyHidden.js
-var visuallyHidden = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  whiteSpace: "nowrap",
-  width: "1px"
-};
-var visuallyHidden_default = visuallyHidden;
-
-// src/lib/TableSortLabel.tsx
+import { visuallyHidden as visuallyHidden2 } from "@availity/mui-utils";
 import { SortDownIcon, SortIcon } from "@availity/mui-icon";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var TableSortLabel = (props) => {
   const IconComponent = props.active ? SortDownIcon : SortIcon;
-  const SortedDescription = props.active ? /* @__PURE__ */ jsx9(Box, { component: "span", sx: visuallyHidden_default, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
+  const SortedDescription = props.active ? /* @__PURE__ */ jsx9(Box, { component: "span", sx: visuallyHidden2, children: props.direction === "desc" ? "sorted descending" : "sorted ascending" }) : null;
   return /* @__PURE__ */ jsx9(
     MuiTableSortLabel,
     __spreadProps(__spreadValues({}, props), {
       IconComponent,
-      children: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      children: /* @__PURE__ */ jsxs3(Fragment3, { children: [
         props.children,
         " ",
         SortedDescription

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-table",
-  "version": "0.1.27",
+  "version": "0.2.1",
   "description": "Availity MUI Table Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,20 +33,21 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "0.14.0",
+    "@availity/mui-form-utils": "0.15.0",
     "@availity/mui-icon": "0.11.0",
-    "@availity/mui-pagination": "0.3.4"
+    "@availity/mui-pagination": "0.3.5",
+    "@availity/mui-utils": "0.1.0"
   },
   "devDependencies": {
     "@availity/mui-button": "0.6.11",
     "@availity/mui-chip": "0.2.22",
-    "@availity/mui-form-utils": "0.14.0",
+    "@availity/mui-form-utils": "0.15.0",
     "@availity/mui-icon": "0.11.0",
     "@availity/mui-layout": "0.2.0",
     "@availity/mui-link": "0.4.4",
     "@availity/mui-menu": "0.2.11",
     "@availity/mui-paper": "0.1.9",
-    "@availity/mui-textfield": "0.6.11",
+    "@availity/mui-textfield": "0.6.12",
     "@availity/mui-typography": "0.2.1",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",

package/src/lib/Table.stories.tsx

@@ -4,9 +4,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useMemo, useState } from 'react';
 import Checkbox from '@mui/material/Checkbox';
-import { visuallyHidden } from '@mui/utils';
-import type { AlertColor } from '@mui/material/Alert';
-import { Chip } from '@availity/mui-chip';
+import { StatusChip, StatusChipProps } from '@availity/mui-chip';
+import { Typography } from '@availity/mui-typography';
+import { visuallyHidden } from '@availity/mui-utils';
 import Patients from '../../../../data/patients.json';
 import { Patient } from '../../../../data/patient';
 import {
@@ -21,7 +21,6 @@ import {
   TablePagination,
   TableFooter,
 } from '../index';
-import { Typography } from '@availity/mui-typography';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table/Table',
@@ -31,15 +30,15 @@ const meta: Meta<typeof Table> = {
 
 export default meta;
 
-const StatusChip = (status: string) => {
-  const color: Record<string, AlertColor> = {
+const Status = (status: string) => {
+  const color: Record<string, StatusChipProps['color']> = {
     Pending: 'warning',
     'Needs Info': 'info',
     Denied: 'error',
     Approved: 'success',
   };
 
-  return <Chip size="small" color={color[status]} label={status} />;
+  return <StatusChip color={color[status]} label={status} />;
 };
 
 const dataRows = Patients.data.patientPagination.items.slice(0, 7);
@@ -56,6 +55,7 @@ export const _Table: StoryObj<typeof Table> = {
             <TableRow>
               <TableCell>Payer</TableCell>
               <TableCell>Patient First Name</TableCell>
+              <TableCell>Patient Middle Initial</TableCell>
               <TableCell>Patient Last Name</TableCell>
               <TableCell>Birth Date</TableCell>
             </TableRow>
@@ -66,6 +66,7 @@ export const _Table: StoryObj<typeof Table> = {
                 <TableRow key={`basicTable-${row.payerName}-${row.birthDate}`}>
                   <TableCell>{row.payerName}</TableCell>
                   <TableCell>{row.firstName}</TableCell>
+                  <TableCell>{row.middleName}</TableCell>
                   <TableCell>{row.lastName}</TableCell>
                   {/* TODO: switch to dayjs */}
                   <TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
@@ -380,6 +381,10 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
         id: 'birthDate',
         label: 'Birth Date',
       },
+      {
+        id: 'deathDate',
+        label: 'Death Date',
+      },
       {
         id: 'payerName',
         label: 'Payer',
@@ -431,6 +436,7 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
                 <TableCell>{row.firstName}</TableCell>
                 <TableCell>{row.lastName}</TableCell>
                 <TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
+                <TableCell>{row.deathDate && new Date(row.deathDate).toLocaleDateString('en-us')}</TableCell>
                 <TableCell>{row.payerName}</TableCell>
               </TableRow>
             ))}

package/src/lib/TableCell.test.tsx

@@ -6,4 +6,14 @@ describe('TableCell', () => {
     const { getByText } = render(<TableCell>Test</TableCell>);
     expect(getByText('Test')).toBeTruthy();
   });
+  test('should add placeholder to empty cell', () => {
+    const { getByText } = render(<TableCell></TableCell>);
+    expect(getByText('—')).toBeTruthy();
+    expect(getByText('No Data')).toBeTruthy();
+  });
+  test('shouldnt add placeholder to empty cell when disableEmptyPlaceholder is true', () => {
+    const { queryByText } = render(<TableCell disableEmptyPlaceholder></TableCell>);
+    expect(queryByText('—')).toBeNull();
+    expect(queryByText('No Data')).toBeNull();
+  });
 });

package/src/lib/TableCell.tsx

@@ -3,6 +3,7 @@ import {
   TableCellProps as MuiTableCellProps,
   TableCellBaseProps,
 } from '@mui/material/TableCell';
+import { visuallyHidden } from '@availity/mui-utils';
 import { ElementType } from 'react';
 
 declare module '@mui/material/TableCell' {
@@ -13,8 +14,13 @@ declare module '@mui/material/TableCell' {
 
 export type TableCellProps = {
   component?: ElementType<TableCellBaseProps>;
+  /** If `true` the placeholder for empty cells and accessible "No Data" text is disabled. */
+  disableEmptyPlaceholder?: boolean;
 } & MuiTableCellProps;
 
-export const TableCell = (props: TableCellProps): JSX.Element => {
-  return <MuiTableCell {...props} />;
+export const TableCell = ({disableEmptyPlaceholder = false, children, ...props}: TableCellProps): JSX.Element => {
+  const isPlaceholderActive = !disableEmptyPlaceholder && !children;
+  const placeholder = <><div aria-hidden>&mdash;</div><div style={visuallyHidden}>No Data</div></>;
+
+  return <MuiTableCell {...props}>{isPlaceholderActive ? placeholder : children}</MuiTableCell>;
 };

package/src/lib/TableSortLabel.tsx

@@ -3,7 +3,7 @@ import {
   TableSortLabelProps as MuiTableSortLabelProps,
 } from '@mui/material/TableSortLabel';
 import Box from '@mui/material/Box';
-import visuallyHidden from '@mui/utils/visuallyHidden';
+import { visuallyHidden } from '@availity/mui-utils';
 import { SortDownIcon, SortIcon } from '@availity/mui-icon';
 
 export type TableSortLabelProps = Omit<