@availity/mui-table 0.3.4 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/index.js +3 -3
  3. package/{introduction.stories.mdx → introduction.mdx} +3 -0
  4. package/package.json +19 -19
  5. package/src/lib/Patterns.stories.tsx +4 -4
  6. package/src/lib/Table.stories.tsx +25 -23
  7. package/src/lib/TableRow.stories.tsx +60 -75
  8. package/src/lib/TableSortLabel.stories.tsx +9 -17
package/CHANGELOG.md CHANGED
@@ -2,6 +2,46 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [1.0.0](https://github.com/Availity/element/compare/@availity/mui-table@1.0.0-alpha.0...@availity/mui-table@1.0.0) (2025-02-25)
6
+
7
+ ### Dependency Updates
8
+
9
+ * `mui-button` updated to version `0.3.4`
10
+ * `mui-chip` updated to version `0.3.4`
11
+ * `mui-form-utils` updated to version `0.3.4`
12
+ * `mui-icon` updated to version `0.3.4`
13
+ * `mui-layout` updated to version `0.3.4`
14
+ * `mui-link` updated to version `0.3.4`
15
+ * `mui-menu` updated to version `0.3.4`
16
+ * `mui-paper` updated to version `0.3.4`
17
+ * `mui-textfield` updated to version `0.3.4`
18
+ * `mui-typography` updated to version `0.3.4`
19
+ * `mui-pagination` updated to version `0.3.4`
20
+ * `mui-utils` updated to version `0.3.4`
21
+ * `mui-transitions` updated to version `0.3.4`
22
+
23
+ ### ⚠ BREAKING CHANGES
24
+
25
+ * upgrade to @mui/material v6
26
+
27
+ ### Miscellaneous Chores
28
+
29
+ * element v1 release ([a6e3567](https://github.com/Availity/element/commit/a6e35671185b9f13d25c7a39c4488ecb8774633e))
30
+
31
+ ## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-table@0.3.4...@availity/mui-table@1.0.0-alpha.0) (2025-02-24)
32
+
33
+
34
+ ### ⚠ BREAKING CHANGES
35
+
36
+ * upgraded to @mui/material v6
37
+ * **element:** upgraded to @mui/material v6
38
+
39
+ ### Features
40
+
41
+ * **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
42
+ * upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
43
+ * upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
44
+
5
45
  ## [0.3.4](https://github.com/Availity/element/compare/@availity/mui-table@0.3.3...@availity/mui-table@0.3.4) (2025-02-24)
6
46
 
7
47
  ### Dependency Updates
package/dist/index.js CHANGED
@@ -57,8 +57,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
57
57
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
58
 
59
59
  // src/index.ts
60
- var src_exports = {};
61
- __export(src_exports, {
60
+ var index_exports = {};
61
+ __export(index_exports, {
62
62
  Table: () => Table,
63
63
  TableBody: () => TableBody,
64
64
  TableCell: () => TableCell,
@@ -69,7 +69,7 @@ __export(src_exports, {
69
69
  TableRow: () => TableRow,
70
70
  TableSortLabel: () => TableSortLabel
71
71
  });
72
- module.exports = __toCommonJS(src_exports);
72
+ module.exports = __toCommonJS(index_exports);
73
73
 
74
74
  // src/lib/Table.tsx
75
75
  var import_Table = __toESM(require("@mui/material/Table"));
package/{introduction.stories.mdx → introduction.mdx} RENAMED
@@ -1,7 +1,10 @@
1
1
  import { Markdown } from '@storybook/blocks';
2
2
  import { Meta } from '@storybook/addon-docs';
3
3
  import ReadMe from './README.md?raw';
4
+ import CHANGELOG from './CHANGELOG.md?raw';
4
5
 
5
6
  <Meta title="Components/Table/Introduction" />
6
7
 
7
8
  <Markdown>{ReadMe}</Markdown>
9
+
10
+ <Markdown>{CHANGELOG}</Markdown>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-table",
3
- "version": "0.3.4",
3
+ "version": "1.0.0",
4
4
  "description": "Availity MUI Table Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
@@ -41,31 +41,31 @@
41
41
  "publish:canary": "yarn npm publish --access public --tag canary"
42
42
  },
43
43
  "dependencies": {
44
- "@availity/mui-form-utils": "0.17.1",
45
- "@availity/mui-icon": "0.14.0",
46
- "@availity/mui-pagination": "0.4.2",
47
- "@availity/mui-utils": "0.2.0"
44
+ "@availity/mui-form-utils": "1.0.0",
45
+ "@availity/mui-icon": "1.0.0",
46
+ "@availity/mui-pagination": "1.0.0",
47
+ "@availity/mui-utils": "1.0.0"
48
48
  },
49
49
  "devDependencies": {
50
- "@availity/mui-button": "0.7.0",
51
- "@availity/mui-chip": "0.3.0",
52
- "@availity/mui-form-utils": "0.17.1",
53
- "@availity/mui-icon": "0.14.0",
54
- "@availity/mui-layout": "0.3.0",
55
- "@availity/mui-link": "0.5.0",
56
- "@availity/mui-menu": "0.3.0",
57
- "@availity/mui-paper": "0.2.0",
58
- "@availity/mui-textfield": "0.7.1",
59
- "@availity/mui-typography": "0.3.0",
60
- "@mui/material": "^5.15.15",
50
+ "@availity/mui-button": "1.0.0",
51
+ "@availity/mui-chip": "1.0.0",
52
+ "@availity/mui-form-utils": "1.0.0",
53
+ "@availity/mui-icon": "1.0.0",
54
+ "@availity/mui-layout": "^1.0.0",
55
+ "@availity/mui-link": "1.0.0",
56
+ "@availity/mui-menu": "1.0.0",
57
+ "@availity/mui-paper": "1.0.0",
58
+ "@availity/mui-textfield": "1.0.0",
59
+ "@availity/mui-typography": "1.0.0",
60
+ "@mui/material": "^6.4.5",
61
61
  "react": "18.2.0",
62
62
  "react-dom": "18.2.0",
63
- "react-hook-form": "^7.51.3",
64
- "tsup": "^8.0.2",
63
+ "react-hook-form": "^7.54.2",
64
+ "tsup": "^8.3.6",
65
65
  "typescript": "^5.4.5"
66
66
  },
67
67
  "peerDependencies": {
68
- "@mui/material": "^5.11.9",
68
+ "@mui/material": "^6.4.5",
69
69
  "react": ">=16.3.0"
70
70
  },
71
71
  "publishConfig": {
package/src/lib/Patterns.stories.tsx CHANGED
@@ -227,14 +227,14 @@ export const _HeaderWithSearchAndFilter: StoryObj = {
227
227
 
228
228
  return (
229
229
  <TableCell component="div" variant="header" size={theme === 'light' ? 'medium' : 'small'}>
230
- <Typography component="h3" variant="h6" marginBottom={3}>
230
+ <Typography component="h3" variant="h6" sx={{ marginBottom: 3 }}>
231
231
  Table Title
232
232
  </Typography>
233
233
  <Box component="form" id="search-form" onSubmit={handleSubmit(onSearchSubmit)} sx={{ paddingBottom: 2 }}>
234
234
  <FormLabel htmlFor="searchbyValue" id="searchbyValueLabel">
235
235
  Search By
236
236
  </FormLabel>
237
- <Grid container spacing={1} flexWrap="wrap">
237
+ <Grid container spacing={1} sx={{ flexWrap: 'wrap' }}>
238
238
  <Grid>
239
239
  <Controller
240
240
  name="searchbyValue"
@@ -265,7 +265,7 @@ export const _HeaderWithSearchAndFilter: StoryObj = {
265
265
  )}
266
266
  />
267
267
  </Grid>
268
- <Grid sm={true}>
268
+ <Grid size="grow">
269
269
  <Controller
270
270
  name="searchValue"
271
271
  control={control}
@@ -333,7 +333,7 @@ export const _HeaderWithSearchAndFilter: StoryObj = {
333
333
  }}
334
334
  >
335
335
  <Box sx={{ padding: 2 }}>
336
- <Box justifyContent="space-between" display="flex" paddingBottom={2}>
336
+ <Box sx={{ justifyContent: 'space-between', display: 'flex', paddingBottom: 2 }}>
337
337
  <Typography component="h2" variant="h6" id="filter-header">
338
338
  Filters
339
339
  </Typography>
package/src/lib/Table.stories.tsx CHANGED
@@ -35,7 +35,7 @@ const meta: Meta<typeof Table> = {
35
35
  options: ['small', 'medium'],
36
36
  control: { type: 'radio' },
37
37
  },
38
- }
38
+ },
39
39
  };
40
40
 
41
41
  export default meta;
@@ -470,8 +470,8 @@ export const _PaginatedTable: StoryObj<typeof Table> = {
470
470
  export const _ExpandableTable: StoryObj<typeof Table> = {
471
471
  render: (args: TableProps) => {
472
472
  const [expanded, setExpanded] = useState<readonly string[]>([]);
473
- const numExpanded=expanded.length;
474
- const rowCount=dataRows.length;
473
+ const numExpanded = expanded.length;
474
+ const rowCount = dataRows.length;
475
475
 
476
476
  const handleExpandAllClick = () => {
477
477
  if (rowCount > 0 && numExpanded !== rowCount) {
@@ -513,7 +513,11 @@ export const _ExpandableTable: StoryObj<typeof Table> = {
513
513
  size="medium"
514
514
  onClick={handleExpandAllClick}
515
515
  >
516
- {(rowCount > 0 && numExpanded !== rowCount) ? <TriangleExpandIcon fontSize="xsmall"/> : <TriangleCollapseIcon fontSize="xsmall" />}
516
+ {rowCount > 0 && numExpanded !== rowCount ? (
517
+ <TriangleExpandIcon fontSize="xsmall" />
518
+ ) : (
519
+ <TriangleCollapseIcon fontSize="xsmall" />
520
+ )}
517
521
  </IconButton>
518
522
  </TableCell>
519
523
  <TableCell>Payer</TableCell>
@@ -534,13 +538,17 @@ export const _ExpandableTable: StoryObj<typeof Table> = {
534
538
  >
535
539
  <TableCell padding="checkbox">
536
540
  <IconButton
537
- title={isItemExpanded ? "collapse row" : "expand row"}
541
+ title={isItemExpanded ? 'collapse row' : 'expand row'}
538
542
  size="medium"
539
543
  onClick={(event) => handleClick(event, row.subscriberMemberId)}
540
544
  aria-controls={`expandableTable-expanded-row-${index}`}
541
545
  aria-expanded={isItemExpanded}
542
546
  >
543
- {isItemExpanded ? <TriangleCollapseIcon fontSize="xsmall"/> : <TriangleExpandIcon fontSize="xsmall" />}
547
+ {isItemExpanded ? (
548
+ <TriangleCollapseIcon fontSize="xsmall" />
549
+ ) : (
550
+ <TriangleExpandIcon fontSize="xsmall" />
551
+ )}
544
552
  </IconButton>
545
553
  </TableCell>
546
554
  <TableCell>{row.payerName}</TableCell>
@@ -557,31 +565,25 @@ export const _ExpandableTable: StoryObj<typeof Table> = {
557
565
  >
558
566
  <td colSpan={12}>
559
567
  <Collapse in={isItemExpanded} timeout="auto" unmountOnExit>
560
- <TableCell component="div" sx={{display: 'block'}}>
561
- <Grid container spacing={2} paddingLeft='3rem'>
562
- <Grid xs>
563
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
568
+ <TableCell component="div" sx={{ display: 'block' }}>
569
+ <Grid container spacing={2} paddingLeft="3rem">
570
+ <Grid size="grow">
571
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
564
572
  Subscriber Member Id
565
573
  </Typography>
566
- <Typography variant="body2">
567
- {row.subscriberMemberId}
568
- </Typography>
574
+ <Typography variant="body2">{row.subscriberMemberId}</Typography>
569
575
  </Grid>
570
- <Grid xs>
571
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
576
+ <Grid size="grow">
577
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
572
578
  Subscriber Relationship
573
579
  </Typography>
574
- <Typography variant="body2">
575
- {row.subscriberRelationship}
576
- </Typography>
580
+ <Typography variant="body2">{row.subscriberRelationship}</Typography>
577
581
  </Grid>
578
- <Grid xs>
579
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
582
+ <Grid size="grow">
583
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
580
584
  Subscriber Relationship Code
581
585
  </Typography>
582
- <Typography variant="body2">
583
- {row.subscriberRelationshipCode}
584
- </Typography>
586
+ <Typography variant="body2">{row.subscriberRelationshipCode}</Typography>
585
587
  </Grid>
586
588
  </Grid>
587
589
  </TableCell>
package/src/lib/TableRow.stories.tsx CHANGED
@@ -38,81 +38,66 @@ export const _CollapsibleRow: StoryObj<typeof TableRow> = {
38
38
  const [open, setOpen] = useState(false);
39
39
 
40
40
  return (
41
- <TableBody>
42
- <TableRow {...args}>
43
- <TableCell padding="checkbox">
44
- <IconButton
45
- title="expand row"
46
- size="medium"
47
- onClick={() => setOpen(!open)}
48
- >
49
- {open ? <ExpandIcon /> : <CollapseIcon />}
50
- </IconButton>
51
- </TableCell>
52
- <TableCell>Cell 1</TableCell>
53
- <TableCell>Cell 2</TableCell>
54
- <TableCell>Cell 3</TableCell>
55
- </TableRow>
56
- <TableRow {...args}>
57
- <TableCell style={{ padding: 0, paddingLeft: "32px" }} colSpan={12} >
58
- <Collapse in={open} timeout="auto" unmountOnExit>
59
- <Box sx={{ padding: 2 }}>
60
- <Grid container spacing={2} wrap="wrap">
61
- <Grid xs>
62
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
63
- Extra Data 1
64
- </Typography>
65
- <Typography variant="body2">
66
- Lorem Ipsum
67
- </Typography>
41
+ <TableBody>
42
+ <TableRow {...args}>
43
+ <TableCell padding="checkbox">
44
+ <IconButton title="expand row" size="medium" onClick={() => setOpen(!open)}>
45
+ {open ? <ExpandIcon /> : <CollapseIcon />}
46
+ </IconButton>
47
+ </TableCell>
48
+ <TableCell>Cell 1</TableCell>
49
+ <TableCell>Cell 2</TableCell>
50
+ <TableCell>Cell 3</TableCell>
51
+ </TableRow>
52
+ <TableRow {...args}>
53
+ <TableCell style={{ padding: 0, paddingLeft: '32px' }} colSpan={12}>
54
+ <Collapse in={open} timeout="auto" unmountOnExit>
55
+ <Box sx={{ padding: 2 }}>
56
+ <Grid container spacing={2} wrap="wrap">
57
+ <Grid size="grow">
58
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
59
+ Extra Data 1
60
+ </Typography>
61
+ <Typography variant="body2">Lorem Ipsum</Typography>
62
+ </Grid>
63
+ <Grid size="grow">
64
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
65
+ Extra Data 2
66
+ </Typography>
67
+ <Typography variant="body2">Lorem Ipsum</Typography>
68
+ </Grid>
69
+ <Grid size="grow">
70
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
71
+ Extra Data 3
72
+ </Typography>
73
+ <Typography variant="body2">Lorem Ipsum</Typography>
74
+ </Grid>
68
75
  </Grid>
69
- <Grid xs>
70
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
71
- Extra Data 2
72
- </Typography>
73
- <Typography variant="body2">
74
- Lorem Ipsum
75
- </Typography>
76
+ <Grid container spacing={2} wrap="wrap">
77
+ <Grid size="grow">
78
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
79
+ Extra Data 4
80
+ </Typography>
81
+ <Typography variant="body2">Lorem Ipsum</Typography>
82
+ </Grid>
83
+ <Grid size="grow">
84
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
85
+ Extra Data 5
86
+ </Typography>
87
+ <Typography variant="body2">Lorem Ipsum</Typography>
88
+ </Grid>
89
+ <Grid size="grow">
90
+ <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
91
+ Extra Data 6
92
+ </Typography>
93
+ <Typography variant="body2">Lorem Ipsum</Typography>
94
+ </Grid>
76
95
  </Grid>
77
- <Grid xs>
78
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
79
- Extra Data 3
80
- </Typography>
81
- <Typography variant="body2">
82
- Lorem Ipsum
83
- </Typography>
84
- </Grid>
85
- </Grid>
86
- <Grid container spacing={2} wrap="wrap">
87
- <Grid xs>
88
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
89
- Extra Data 4
90
- </Typography>
91
- <Typography variant="body2">
92
- Lorem Ipsum
93
- </Typography>
94
- </Grid>
95
- <Grid xs>
96
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
97
- Extra Data 5
98
- </Typography>
99
- <Typography variant="body2">
100
- Lorem Ipsum
101
- </Typography>
102
- </Grid>
103
- <Grid xs>
104
- <Typography variant="body2" sx={{fontWeight: "bold"}}>
105
- Extra Data 6
106
- </Typography>
107
- <Typography variant="body2">
108
- Lorem Ipsum
109
- </Typography>
110
- </Grid>
111
- </Grid>
112
- </Box>
113
- </Collapse>
114
- </TableCell>
115
- </TableRow>
116
- </TableBody>
117
- )},
96
+ </Box>
97
+ </Collapse>
98
+ </TableCell>
99
+ </TableRow>
100
+ </TableBody>
101
+ );
102
+ },
118
103
  };
package/src/lib/TableSortLabel.stories.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import type { Meta, StoryObj } from '@storybook/react';
4
4
  import { TableSortLabel, TableSortLabelProps } from './TableSortLabel';
5
- import Grid from '@mui/material/Grid';
5
+ import { Grid } from '@availity/mui-layout';
6
6
  import { useState } from 'react';
7
7
 
8
8
  const meta: Meta<typeof TableSortLabel> = {
@@ -35,30 +35,22 @@ export const _TableSortLabel: StoryObj<typeof TableSortLabel> = {
35
35
  export const _Variants: StoryObj<typeof TableSortLabel> = {
36
36
  render: () => (
37
37
  <Grid container spacing={1}>
38
- <Grid item xs={3}>
39
- Default
40
- </Grid>
41
- <Grid item xs={9}>
38
+ <Grid size={{ xs: 3 }}>Default</Grid>
39
+ <Grid size={{ xs: 9 }}>
42
40
  <TableSortLabel>Column Header</TableSortLabel>
43
41
  </Grid>
44
- <Grid item xs={3}>
45
- Active Undefined
46
- </Grid>
47
- <Grid item xs={9}>
42
+ <Grid size={{ xs: 3 }}>Active Undefined</Grid>
43
+ <Grid size={{ xs: 9 }}>
48
44
  <TableSortLabel active>Column Header</TableSortLabel>
49
45
  </Grid>
50
- <Grid item xs={3}>
51
- Active Ascending
52
- </Grid>
53
- <Grid item xs={9}>
46
+ <Grid size={{ xs: 3 }}>Active Ascending</Grid>
47
+ <Grid size={{ xs: 9 }}>
54
48
  <TableSortLabel active direction="asc">
55
49
  Column Header
56
50
  </TableSortLabel>
57
51
  </Grid>
58
- <Grid item xs={3}>
59
- Active Descending
60
- </Grid>
61
- <Grid item xs={9}>
52
+ <Grid size={{ xs: 3 }}>Active Descending</Grid>
53
+ <Grid size={{ xs: 9 }}>
62
54
  <TableSortLabel active direction="desc">
63
55
  Column Header
64
56
  </TableSortLabel>