@availity/mui-table 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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
+
+* `mui-button` updated to version `0.2.1`
+* `mui-chip` updated to version `0.2.1`
+* `mui-form-utils` updated to version `0.2.1`
+* `mui-icon` updated to version `0.2.1`
+* `mui-link` updated to version `0.2.1`
+* `mui-menu` updated to version `0.2.1`
+* `mui-textfield` updated to version `0.2.1`
+* `mui-pagination` updated to version `0.2.1`
+* `mui-transitions` updated to version `0.2.1`
+## [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

package/dist/index.js

@@ -94,7 +94,7 @@ 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: "-" }),
+    /* @__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 }));

package/dist/index.mjs

@@ -55,7 +55,7 @@ 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: "-" }),
+    /* @__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 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-table",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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.0",
-    "@availity/mui-icon": "0.11.0",
-    "@availity/mui-pagination": "0.3.5",
+    "@availity/mui-form-utils": "0.15.1",
+    "@availity/mui-icon": "0.11.1",
+    "@availity/mui-pagination": "0.3.6",
     "@availity/mui-utils": "0.1.0"
   },
   "devDependencies": {
-    "@availity/mui-button": "0.6.11",
-    "@availity/mui-chip": "0.2.22",
-    "@availity/mui-form-utils": "0.15.0",
-    "@availity/mui-icon": "0.11.0",
+    "@availity/mui-button": "0.6.12",
+    "@availity/mui-chip": "0.2.23",
+    "@availity/mui-form-utils": "0.15.1",
+    "@availity/mui-icon": "0.11.1",
     "@availity/mui-layout": "0.2.0",
-    "@availity/mui-link": "0.4.4",
-    "@availity/mui-menu": "0.2.11",
+    "@availity/mui-link": "0.4.5",
+    "@availity/mui-menu": "0.2.12",
     "@availity/mui-paper": "0.1.9",
-    "@availity/mui-textfield": "0.6.12",
+    "@availity/mui-textfield": "0.6.13",
     "@availity/mui-typography": "0.2.1",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",

package/src/lib/Table.stories.tsx

@@ -4,7 +4,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 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 { Collapse } from '@availity/mui-transitions';
 import { Typography } from '@availity/mui-typography';
 import { visuallyHidden } from '@availity/mui-utils';
 import Patients from '../../../../data/patients.json';
@@ -459,3 +463,85 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
     );
   },
 };
+
+export const _ExpandableTable: StoryObj<typeof Table> = {
+  render: (args: TableProps) => {
+    return (
+      <TableContainer>
+        <Typography id="table-title" sx={visuallyHidden}>
+          Table
+        </Typography>
+        <Table aria-labelledby="table-title" {...args}>
+          <TableHead>
+            <TableRow>
+              <TableCell><div style={visuallyHidden}>Expand Row</div></TableCell>
+              <TableCell>Payer</TableCell>
+              <TableCell>Patient First Name</TableCell>
+              <TableCell>Patient Last Name</TableCell>
+              <TableCell>Birth Date</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {dataRows.map((row) => {
+              const [open, setOpen] = useState(false);
+              return (
+                <>
+                  <TableRow key={`expandableTable-${row.payerName}-${row.birthDate}`}>
+                    <TableCell padding="checkbox">
+                      <IconButton
+                        title="expand row"
+                        size="medium"
+                        onClick={() => setOpen(!open)}
+                      >
+                        {open ? <ExpandIcon /> : <CollapseIcon />}
+                      </IconButton>
+                    </TableCell>
+                    <TableCell>{row.payerName}</TableCell>
+                    <TableCell>{row.firstName}</TableCell>
+                    <TableCell>{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}>
+                            <Grid xs>
+                              <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                                Subscriber Member Id
+                              </Typography>
+                              <Typography variant="body2">
+                                {row.subscriberMemberId}
+                              </Typography>
+                            </Grid>
+                            <Grid xs>
+                              <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                                Subscriber Relationship
+                              </Typography>
+                              <Typography variant="body2">
+                                {row.subscriberRelationship}
+                              </Typography>
+                            </Grid>
+                            <Grid xs>
+                              <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                                Subscriber Relationship Code
+                              </Typography>
+                              <Typography variant="body2">
+                                {row.subscriberRelationshipCode}
+                              </Typography>
+                            </Grid>
+                          </Grid>
+                        </Box>
+                      </Collapse>
+                    </TableCell>
+                  </TableRow>
+                </>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    );
+  },
+};

package/src/lib/TableCell.test.tsx

@@ -8,12 +8,12 @@ describe('TableCell', () => {
   });
   test('should add placeholder to empty cell', () => {
     const { getByText } = render(<TableCell></TableCell>);
-    expect(getByText('-')).toBeTruthy();
+    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('—')).toBeNull();
     expect(queryByText('No Data')).toBeNull();
   });
 });

package/src/lib/TableCell.tsx

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

package/src/lib/TableRow.stories.tsx

@@ -3,6 +3,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { TableRow, TableRowProps } from './TableRow';
 import { TableBody, TableCell } from '..';
+import { useState } from 'react';
+import { IconButton } from '@availity/mui-button';
+import { CollapseIcon, ExpandIcon } from '@availity/mui-icon';
+import { Box, Grid } from '@availity/mui-layout';
+import { Collapse } from '@availity/mui-transitions';
+import { Typography } from '@availity/mui-typography';
 
 const meta: Meta<typeof TableRow> = {
   title: 'Components/Table/TableRow',
@@ -26,3 +32,87 @@ export const _TableRow: StoryObj<typeof TableRow> = {
     </TableBody>
   ),
 };
+
+export const _CollapsibleRow: StoryObj<typeof TableRow> = {
+  render: (args: TableRowProps) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+    <TableBody>
+      <TableRow {...args}>
+        <TableCell padding="checkbox">
+          <IconButton
+            title="expand row"
+            size="medium"
+            onClick={() => setOpen(!open)}
+          >
+            {open ? <ExpandIcon /> : <CollapseIcon />}
+          </IconButton>
+        </TableCell>
+        <TableCell>Cell 1</TableCell>
+        <TableCell>Cell 2</TableCell>
+        <TableCell>Cell 3</TableCell>
+      </TableRow>
+      <TableRow {...args}>
+        <TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12} >
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ padding: 2 }}>
+              <Grid container spacing={2} wrap="wrap">
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 1
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 2
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 3
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+              </Grid>
+              <Grid container spacing={2} wrap="wrap">
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 4
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 5
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+                <Grid xs>
+                  <Typography variant="body2" sx={{fontWeight: "bold"}}>
+                    Extra Data 6
+                  </Typography>
+                  <Typography variant="body2">
+                    Lorem Ipsum
+                  </Typography>
+                </Grid>
+              </Grid>
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  )},
+};