@availity/mui-table 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-table@0.2.3...@availity/mui-table@0.2.4) (2024-12-23)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.2.3`
+* `mui-textfield` updated to version `0.2.3`
+## [0.2.3](https://github.com/Availity/element/compare/@availity/mui-table@0.2.2...@availity/mui-table@0.2.3) (2024-12-16)
+
+### Dependency Updates
+
+* `mui-pagination` updated to version `0.2.2`
 ## [0.2.2](https://github.com/Availity/element/compare/@availity/mui-table@0.2.1...@availity/mui-table@0.2.2) (2024-12-09)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-table",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Availity MUI Table Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,21 +33,21 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "0.15.1",
+    "@availity/mui-form-utils": "0.16.0",
     "@availity/mui-icon": "0.11.1",
-    "@availity/mui-pagination": "0.3.6",
+    "@availity/mui-pagination": "0.3.7",
     "@availity/mui-utils": "0.1.0"
   },
   "devDependencies": {
     "@availity/mui-button": "0.6.12",
     "@availity/mui-chip": "0.2.23",
-    "@availity/mui-form-utils": "0.15.1",
+    "@availity/mui-form-utils": "0.16.0",
     "@availity/mui-icon": "0.11.1",
     "@availity/mui-layout": "0.2.0",
     "@availity/mui-link": "0.4.5",
     "@availity/mui-menu": "0.2.12",
     "@availity/mui-paper": "0.1.9",
-    "@availity/mui-textfield": "0.6.13",
+    "@availity/mui-textfield": "0.6.14",
     "@availity/mui-typography": "0.2.1",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",

package/src/lib/Table.stories.tsx

@@ -6,8 +6,8 @@ import { useMemo, useState } from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import { IconButton } from '@availity/mui-button';
 import { StatusChip, StatusChipProps } from '@availity/mui-chip';
-import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
-import { Box, Grid } from '@availity/mui-layout';
+import { TriangleCollapseIcon, TriangleExpandIcon } from '@availity/mui-icon';
+import { Grid } from '@availity/mui-layout';
 import { Collapse } from '@availity/mui-transitions';
 import { Typography } from '@availity/mui-typography';
 import { visuallyHidden } from '@availity/mui-utils';
@@ -30,6 +30,12 @@ const meta: Meta<typeof Table> = {
   title: 'Components/Table/Table',
   component: Table,
   tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['small', 'medium'],
+      control: { type: 'radio' },
+    },
+  }
 };
 
 export default meta;
@@ -406,9 +412,6 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
 
     const dataRowsLarge = Patients.data.patientPagination.items;
 
-    // Avoid a layout jump when reaching the last page with empty rows.
-    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - dataRowsLarge.length) : 0;
-
     const visibleRows = useMemo(
       () =>
         rowsPerPage > 0 ? dataRowsLarge.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : dataRowsLarge,
@@ -466,6 +469,36 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
 
 export const _ExpandableTable: StoryObj<typeof Table> = {
   render: (args: TableProps) => {
+    const [expanded, setExpanded] = useState<readonly string[]>([]);
+    const numExpanded=expanded.length;
+    const rowCount=dataRows.length;
+
+    const handleExpandAllClick = () => {
+      if (rowCount > 0 && numExpanded !== rowCount) {
+        const newExpanded = dataRows.map((n) => n.subscriberMemberId);
+        setExpanded(newExpanded);
+        return;
+      }
+      setExpanded([]);
+    };
+
+    const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
+      const expandedIndex = expanded.indexOf(name);
+      let newExpanded: readonly string[] = [];
+
+      if (expandedIndex === -1) {
+        newExpanded = newExpanded.concat(expanded, name);
+      } else if (expandedIndex === 0) {
+        newExpanded = newExpanded.concat(expanded.slice(1));
+      } else if (expandedIndex === expanded.length - 1) {
+        newExpanded = newExpanded.concat(expanded.slice(0, -1));
+      } else if (expandedIndex > 0) {
+        newExpanded = newExpanded.concat(expanded.slice(0, expandedIndex), expanded.slice(expandedIndex + 1));
+      }
+
+      setExpanded(newExpanded);
+    };
+
     return (
       <TableContainer>
         <Typography id="table-title" sx={visuallyHidden}>
@@ -474,7 +507,15 @@ export const _ExpandableTable: StoryObj<typeof Table> = {
         <Table aria-labelledby="table-title" {...args}>
           <TableHead>
             <TableRow>
-              <TableCell><div style={visuallyHidden}>Expand Row</div></TableCell>
+              <TableCell padding="checkbox" aria-label="Expand Row">
+                <IconButton
+                  title={`${rowCount > 0 && numExpanded !== rowCount ? 'expand' : 'collapse'} all rows`}
+                  size="medium"
+                  onClick={handleExpandAllClick}
+                >
+                  {(rowCount > 0 && numExpanded !== rowCount) ? <TriangleExpandIcon fontSize="xsmall"/> : <TriangleCollapseIcon fontSize="xsmall" />}
+                </IconButton>
+              </TableCell>
               <TableCell>Payer</TableCell>
               <TableCell>Patient First Name</TableCell>
               <TableCell>Patient Last Name</TableCell>
@@ -482,31 +523,42 @@ export const _ExpandableTable: StoryObj<typeof Table> = {
             </TableRow>
           </TableHead>
           <TableBody>
-            {dataRows.map((row) => {
-              const [open, setOpen] = useState(false);
+            {dataRows.map((row, index) => {
+              const isItemExpanded = expanded.includes(row.subscriberMemberId);
               return (
                 <>
-                  <TableRow key={`expandableTable-${row.payerName}-${row.birthDate}`}>
+                  <TableRow
+                    key={`expandableTable-row-${index}`}
+                    id={`expandableTable-row-${index}`}
+                    aria-labelledby={`first-name-${index} last-name-${index}`}
+                  >
                     <TableCell padding="checkbox">
                       <IconButton
-                        title="expand row"
+                        title={isItemExpanded ? "collapse row" : "expand row"}
                         size="medium"
-                        onClick={() => setOpen(!open)}
+                        onClick={(event) => handleClick(event, row.subscriberMemberId)}
+                        aria-controls={`expandableTable-expanded-row-${index}`}
+                        aria-expanded={isItemExpanded}
                       >
-                        {open ? <ExpandIcon /> : <CollapseIcon />}
+                        {isItemExpanded ? <TriangleCollapseIcon fontSize="xsmall"/> : <TriangleExpandIcon fontSize="xsmall" />}
                       </IconButton>
                     </TableCell>
                     <TableCell>{row.payerName}</TableCell>
-                    <TableCell>{row.firstName}</TableCell>
-                    <TableCell>{row.lastName}</TableCell>
+                    <TableCell id={`first-name-${index}`}>{row.firstName}</TableCell>
+                    <TableCell id={`last-name-${index}`}>{row.lastName}</TableCell>
                     {/* TODO: switch to dayjs */}
                     <TableCell>{new Date(row.birthDate).toLocaleDateString('en-us')}</TableCell>
                   </TableRow>
-                  <TableRow key={`expandableTable-expanded-${row.payerName}-${row.birthDate}`} >
-                    <TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12}>
-                      <Collapse in={open} timeout="auto" unmountOnExit>
-                        <Box sx={{ padding: 2 }}>
-                          <Grid container spacing={2}>
+                  <TableRow
+                    key={`expandableTable-expanded-row-${index}`}
+                    id={`expandableTable-expanded-row-${index}`}
+                    aria-label="Additional information for"
+                    aria-labelledby={`expandableTable-expanded-row-${index} first-name-${index} last-name-${index}`}
+                  >
+                    <td colSpan={12}>
+                      <Collapse in={isItemExpanded} timeout="auto" unmountOnExit>
+                        <TableCell component="div" sx={{display: 'block'}}>
+                          <Grid container spacing={2} paddingLeft='32px'>
                             <Grid xs>
                               <Typography variant="body2" sx={{fontWeight: "bold"}}>
                                 Subscriber Member Id
@@ -532,9 +584,9 @@ export const _ExpandableTable: StoryObj<typeof Table> = {
                               </Typography>
                             </Grid>
                           </Grid>
-                        </Box>
+                        </TableCell>
                       </Collapse>
-                    </TableCell>
+                    </td>
                   </TableRow>
                 </>
               );