@availity/mui-accordion 0.3.0 → 1.0.0-alpha.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 +19 -0
  2. package/dist/index.js +5 -5
  3. package/dist/index.mjs +2 -2
  4. package/package.json +9 -9
  5. package/src/lib/Accordion.stories.tsx +29 -20
  6. package/src/lib/Accordion.tsx +15 -20
  7. package/src/lib/AccordionSummary.stories.tsx +32 -14
  8. /package/{introduction.stories.mdx → introduction.mdx} +0 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-accordion@0.3.0...@availity/mui-accordion@1.0.0-alpha.0) (2025-02-24)
6
+
7
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ * upgraded to @mui/material v6
11
+ * **element:** upgraded to @mui/material v6
12
+
13
+ ### Features
14
+
15
+ * **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
16
+ * upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
17
+ * upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **mui-accordion:** cleanup Accordion styling to account for new h3 layer ([031f86e](https://github.com/Availity/element/commit/031f86e7821716cdf93c375f5118dbe02431ad44))
23
+
5
24
  ## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-accordion@0.2.10...@availity/mui-accordion@0.3.0) (2025-02-04)
6
25
 
7
26
  ### Dependency Updates
package/dist/index.js CHANGED
@@ -57,14 +57,14 @@ 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
  Accordion: () => Accordion,
63
63
  AccordionActions: () => AccordionActions,
64
64
  AccordionDetails: () => AccordionDetails,
65
65
  AccordionSummary: () => AccordionSummary
66
66
  });
67
- module.exports = __toCommonJS(src_exports);
67
+ module.exports = __toCommonJS(index_exports);
68
68
 
69
69
  // src/lib/Accordion.tsx
70
70
  var import_Accordion = __toESM(require("@mui/material/Accordion"));
@@ -77,7 +77,7 @@ var FilledAccordion = (0, import_styles.styled)(import_Accordion.default, {
77
77
  overridesResolver: (props, styles) => styles.avFilled
78
78
  })(({ theme }) => ({
79
79
  borderColor: theme.palette.grey[100],
80
- "> .MuiAccordionSummary-root": {
80
+ "> .MuiAccordion-heading .MuiAccordionSummary-root": {
81
81
  backgroundColor: theme.palette.grey[100]
82
82
  }
83
83
  }));
@@ -87,7 +87,7 @@ var OutlinedAccordion = (0, import_styles.styled)(import_Accordion.default, {
87
87
  overridesResolver: (props, styles) => styles.avOutlined
88
88
  })(({ theme }) => ({
89
89
  borderColor: theme.palette.divider,
90
- "> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
90
+ "> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
91
91
  backgroundColor: theme.palette.background.paper
92
92
  },
93
93
  "> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
package/dist/index.mjs CHANGED
@@ -41,7 +41,7 @@ var FilledAccordion = styled(MuiAccordion, {
41
41
  overridesResolver: (props, styles) => styles.avFilled
42
42
  })(({ theme }) => ({
43
43
  borderColor: theme.palette.grey[100],
44
- "> .MuiAccordionSummary-root": {
44
+ "> .MuiAccordion-heading .MuiAccordionSummary-root": {
45
45
  backgroundColor: theme.palette.grey[100]
46
46
  }
47
47
  }));
@@ -51,7 +51,7 @@ var OutlinedAccordion = styled(MuiAccordion, {
51
51
  overridesResolver: (props, styles) => styles.avOutlined
52
52
  })(({ theme }) => ({
53
53
  borderColor: theme.palette.divider,
54
- "> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
54
+ "> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
55
55
  backgroundColor: theme.palette.background.paper
56
56
  },
57
57
  "> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-accordion",
3
- "version": "0.3.0",
3
+ "version": "1.0.0-alpha.0",
4
4
  "description": "Availity MUI Accordion Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
@@ -40,19 +40,19 @@
40
40
  "publish:canary": "yarn npm publish --access public --tag canary"
41
41
  },
42
42
  "devDependencies": {
43
- "@availity/mui-button": "^0.7.0",
44
- "@availity/mui-chip": "^0.3.0",
45
- "@availity/mui-layout": "^0.3.0",
46
- "@availity/mui-typography": "^0.3.0",
47
- "@mui/material": "^5.15.15",
43
+ "@availity/mui-button": "^1.0.0-alpha.0",
44
+ "@availity/mui-chip": "^1.0.0-alpha.0",
45
+ "@availity/mui-layout": "^1.0.0-alpha.0",
46
+ "@availity/mui-typography": "^1.0.0-alpha.0",
47
+ "@mui/material": "^6.4.5",
48
48
  "react": "18.2.0",
49
49
  "react-dom": "18.2.0",
50
- "tsup": "^8.0.2",
50
+ "tsup": "^8.3.6",
51
51
  "typescript": "^5.4.5"
52
52
  },
53
53
  "peerDependencies": {
54
- "@availity/mui-icon": "^0.14.0",
55
- "@mui/material": "^5.11.9",
54
+ "@availity/mui-icon": "^1.0.0-alpha.0",
55
+ "@mui/material": "^6.4.5",
56
56
  "react": ">=16.3.0"
57
57
  },
58
58
  "publishConfig": {
package/src/lib/Accordion.stories.tsx CHANGED
@@ -41,7 +41,7 @@ export const _Accordion: StoryObj<typeof Accordion> = {
41
41
  export const _Variants: StoryObj<typeof Accordion> = {
42
42
  render: (args: AccordionProps) => (
43
43
  <Grid container spacing={1}>
44
- <Grid xs={12}>
44
+ <Grid size={{ xs: 12 }}>
45
45
  <Accordion {...args}>
46
46
  <AccordionSummary aria-controls="filled-summary-content" id="filled-summary-header" secondary="Secondary">
47
47
  Filled
@@ -49,7 +49,7 @@ export const _Variants: StoryObj<typeof Accordion> = {
49
49
  <AccordionDetails>
50
50
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
51
51
  leo lobortis eget.
52
- <Box mt={2}>
52
+ <Box sx={{ mt: 2 }}>
53
53
  <Accordion>
54
54
  <AccordionSummary aria-controls="filled-nested-content" id="filled-nested-header">
55
55
  Filled Nested Accordion
@@ -63,15 +63,15 @@ export const _Variants: StoryObj<typeof Accordion> = {
63
63
  </AccordionDetails>
64
64
  </Accordion>
65
65
  </Grid>
66
- <Grid xs={12}>
66
+ <Grid size={{ xs: 12 }}>
67
67
  <Accordion {...args} variant="outlined">
68
- <AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header" secondary="Secondary">
68
+ <AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header" secondary="Secondary">
69
69
  Outlined
70
70
  </AccordionSummary>
71
71
  <AccordionDetails>
72
72
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
73
73
  leo lobortis eget.
74
- <Box mt={2}>
74
+ <Box sx={{ mt: 2 }}>
75
75
  <Accordion variant="outlined">
76
76
  <AccordionSummary aria-controls="outlined-nested-content" id="outlined-nested-header">
77
77
  Outlined Nested Accordion
@@ -95,7 +95,7 @@ export const _Variants: StoryObj<typeof Accordion> = {
95
95
  *
96
96
  * The `Accordion` will also need to be wrapped to add any top/bottom margins -
97
97
  * this is due to Material's default gutter behavior when expanded along with how they overwrite the behavior when disabling the gutters.
98
- */
98
+ */
99
99
  export const _Spacing: StoryObj<typeof Accordion> = {
100
100
  render: () => (
101
101
  <div>
@@ -135,11 +135,11 @@ export const _Spacing: StoryObj<typeof Accordion> = {
135
135
  </AccordionActions>
136
136
  </Accordion>
137
137
  </div>
138
- <Grid container spacing={1} mt={2}>
138
+ <Grid container spacing={1} sx={{ mt: 2 }}>
139
139
  <Typography variant="h5" component="h2">
140
140
  Separated in a Grid
141
141
  </Typography>
142
- <Grid xs={12}>
142
+ <Grid size={{ xs: 12 }}>
143
143
  <Accordion>
144
144
  <AccordionSummary aria-controls="panel1-content" id="panel1-header">
145
145
  Accordion 4
@@ -150,7 +150,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
150
150
  </AccordionDetails>
151
151
  </Accordion>
152
152
  </Grid>
153
- <Grid xs={12}>
153
+ <Grid size={{ xs: 12 }}>
154
154
  <Accordion>
155
155
  <AccordionSummary aria-controls="panel2-content" id="panel2-header">
156
156
  Accordion 5
@@ -161,7 +161,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
161
161
  </AccordionDetails>
162
162
  </Accordion>
163
163
  </Grid>
164
- <Grid xs={12}>
164
+ <Grid size={{ xs: 12 }}>
165
165
  <Accordion>
166
166
  <AccordionSummary aria-controls="panel3-content" id="panel3-header">
167
167
  Accordion 6 with Actions
@@ -184,7 +184,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
184
184
  export const _States: StoryObj<typeof Accordion> = {
185
185
  render: (args: AccordionProps) => (
186
186
  <Grid container spacing={1}>
187
- <Grid xs={12}>
187
+ <Grid size={{ xs: 12 }}>
188
188
  <Accordion {...args} defaultExpanded>
189
189
  <AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
190
190
  Filled Expanded
@@ -202,7 +202,7 @@ export const _States: StoryObj<typeof Accordion> = {
202
202
  </AccordionDetails>
203
203
  </Accordion>
204
204
  </Grid>
205
- <Grid xs={12}>
205
+ <Grid size={{ xs: 12 }}>
206
206
  <Accordion {...args} variant="outlined" defaultExpanded>
207
207
  <AccordionSummary aria-controls="outlinedexpanded-content" id="outlinedexpanded-header">
208
208
  Outlined Expanded
@@ -220,7 +220,7 @@ export const _States: StoryObj<typeof Accordion> = {
220
220
  </AccordionDetails>
221
221
  </Accordion>
222
222
  </Grid>
223
- <Grid xs={12}>
223
+ <Grid size={{ xs: 12 }}>
224
224
  <Accordion {...args}>
225
225
  <AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
226
226
  Focused
@@ -231,7 +231,7 @@ export const _States: StoryObj<typeof Accordion> = {
231
231
  </AccordionDetails>
232
232
  </Accordion>
233
233
  </Grid>
234
- <Grid xs={12}>
234
+ <Grid size={{ xs: 12 }}>
235
235
  <Accordion {...args} disabled>
236
236
  <AccordionSummary aria-controls="disabled-content" id="disabled-header">
237
237
  Disabled
@@ -249,20 +249,29 @@ export const _States: StoryObj<typeof Accordion> = {
249
249
  export const _Status: StoryObj<typeof Accordion> = {
250
250
  render: (args: AccordionProps) => (
251
251
  <Accordion {...args}>
252
- <AccordionSummary aria-controls="status-summary-content" id="status-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
252
+ <AccordionSummary
253
+ aria-controls="status-summary-content"
254
+ id="status-summary-header"
255
+ secondary={
256
+ <>
257
+ Secondary
258
+ <StatusChip color="success" label="Approved" sx={{ marginLeft: 2 }} />
259
+ </>
260
+ }
261
+ >
253
262
  Accordion with Status
254
263
  </AccordionSummary>
255
264
  <AccordionDetails>
256
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
257
- leo lobortis eget.
258
- <Box mt={2}>
265
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
266
+ lobortis eget.
267
+ <Box sx={{ mt: 2 }}>
259
268
  <Accordion>
260
269
  <AccordionSummary aria-controls="status-nested-content" id="status-nested-header">
261
270
  Nested Accordion
262
271
  </AccordionSummary>
263
272
  <AccordionDetails>
264
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
265
- blandit leo lobortis eget.
273
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
274
+ leo lobortis eget.
266
275
  </AccordionDetails>
267
276
  </Accordion>
268
277
  </Box>
package/src/lib/Accordion.tsx CHANGED
@@ -10,14 +10,7 @@ export type AccordionProps = {
10
10
  * @default false
11
11
  */
12
12
  disableNestedStyling?: boolean;
13
- } & Omit<
14
- MuiAccordionProps,
15
- 'component'
16
- | 'elevation'
17
- | 'TransitionComponent'
18
- | 'TransitionProps'
19
- | 'variant'
20
- >;
13
+ } & Omit<MuiAccordionProps, 'component' | 'elevation' | 'TransitionComponent' | 'TransitionProps' | 'variant'>;
21
14
 
22
15
  const FilledAccordion = styled(MuiAccordion, {
23
16
  name: 'MuiAccordion',
@@ -25,9 +18,9 @@ const FilledAccordion = styled(MuiAccordion, {
25
18
  overridesResolver: (props, styles) => styles.avFilled,
26
19
  })(({ theme }) => ({
27
20
  borderColor: theme.palette.grey[100],
28
- '> .MuiAccordionSummary-root': {
21
+ '> .MuiAccordion-heading .MuiAccordionSummary-root': {
29
22
  backgroundColor: theme.palette.grey[100],
30
- }
23
+ },
31
24
  }));
32
25
 
33
26
  const OutlinedAccordion = styled(MuiAccordion, {
@@ -36,21 +29,23 @@ const OutlinedAccordion = styled(MuiAccordion, {
36
29
  overridesResolver: (props, styles) => styles.avOutlined,
37
30
  })(({ theme }) => ({
38
31
  borderColor: theme.palette.divider,
39
- '> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': {
32
+ '> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': {
40
33
  backgroundColor: theme.palette.background.paper,
41
34
  },
42
- '> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type': {
43
- borderTop: `1px solid ${theme.palette.divider}`,
44
- }
35
+ '> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type':
36
+ {
37
+ borderTop: `1px solid ${theme.palette.divider}`,
38
+ },
45
39
  }));
46
40
 
47
41
  export const Accordion = forwardRef<HTMLDivElement, AccordionProps>((allProps, ref) => {
48
- const { variant = "filled", disableNestedStyling = false, className, ...props } = allProps;
42
+ const { variant = 'filled', disableNestedStyling = false, className, ...props } = allProps;
49
43
 
50
- const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ''}`
44
+ const classnames = `${variant === 'filled' ? 'MuiAccordion-avFilled' : 'MuiAccordion-avOutlined'}${disableNestedStyling ? ' Av-disableNested' : ''} ${className || ''}`;
51
45
 
52
- return variant === "filled" ?
53
- <FilledAccordion className={classnames} {...props} ref={ref}/>
54
- :
55
- <OutlinedAccordion className={classnames} {...props} ref={ref}/>
46
+ return variant === 'filled' ? (
47
+ <FilledAccordion className={classnames} {...props} ref={ref} />
48
+ ) : (
49
+ <OutlinedAccordion className={classnames} {...props} ref={ref} />
50
+ );
56
51
  });
package/src/lib/AccordionSummary.stories.tsx CHANGED
@@ -10,29 +10,38 @@ const meta: Meta<typeof AccordionSummary> = {
10
10
  component: AccordionSummary,
11
11
  tags: ['autodocs'],
12
12
  args: {
13
- primary: "Primary",
14
- secondary: "Secondary"
15
- }
13
+ primary: 'Primary',
14
+ secondary: 'Secondary',
15
+ },
16
16
  };
17
17
 
18
18
  export default meta;
19
19
 
20
20
  export const _AccordionSummary: StoryObj<typeof AccordionSummary> = {
21
- render: (args: AccordionSummaryProps) => <AccordionSummary {...args}/>,
21
+ render: (args: AccordionSummaryProps) => <AccordionSummary {...args} />,
22
22
  };
23
23
 
24
24
  export const _Status: StoryObj<typeof AccordionSummary> = {
25
25
  render: (args: AccordionSummaryProps) => (
26
26
  <Grid container spacing={1}>
27
- <Grid xs={12}>
27
+ <Grid size={{ xs: 12 }}>
28
28
  <Accordion {...args}>
29
- <AccordionSummary aria-controls="filled-summary-content" id="filled-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
29
+ <AccordionSummary
30
+ aria-controls="filled-summary-content"
31
+ id="filled-summary-header"
32
+ secondary={
33
+ <>
34
+ Secondary
35
+ <StatusChip color="success" label="Approved" sx={{ marginLeft: 2 }} />
36
+ </>
37
+ }
38
+ >
30
39
  Filled Summary
31
40
  </AccordionSummary>
32
41
  <AccordionDetails>
33
42
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
34
43
  leo lobortis eget.
35
- <Box mt={2}>
44
+ <Box sx={{ mt: 2 }}>
36
45
  <Accordion>
37
46
  <AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
38
47
  Filled Nested Accordion
@@ -46,15 +55,24 @@ export const _Status: StoryObj<typeof AccordionSummary> = {
46
55
  </AccordionDetails>
47
56
  </Accordion>
48
57
  </Grid>
49
- <Grid xs={12}>
58
+ <Grid size={{ xs: 12 }}>
50
59
  <Accordion {...args} variant="outlined">
51
- <AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
60
+ <AccordionSummary
61
+ aria-controls="outlined-summary-content"
62
+ id="outlined-summary-header"
63
+ secondary={
64
+ <>
65
+ Secondary
66
+ <StatusChip color="success" label="Approved" sx={{ marginLeft: 2 }} />
67
+ </>
68
+ }
69
+ >
52
70
  Outlined Summary
53
71
  </AccordionSummary>
54
72
  <AccordionDetails>
55
73
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
56
74
  leo lobortis eget.
57
- <Box mt={2}>
75
+ <Box sx={{ mt: 2 }}>
58
76
  <Accordion>
59
77
  <AccordionSummary aria-controls="outlinedexpanded-nested-content" id="outlinedexpanded-nested-header">
60
78
  Outlined Nested Accordion
@@ -75,7 +93,7 @@ export const _Status: StoryObj<typeof AccordionSummary> = {
75
93
  export const _States: StoryObj<typeof Accordion> = {
76
94
  render: (args: AccordionProps) => (
77
95
  <Grid container spacing={1}>
78
- <Grid xs={12}>
96
+ <Grid size={{ xs: 12 }}>
79
97
  <Accordion {...args} defaultExpanded>
80
98
  <AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
81
99
  Filled Expanded
@@ -93,7 +111,7 @@ export const _States: StoryObj<typeof Accordion> = {
93
111
  </AccordionDetails>
94
112
  </Accordion>
95
113
  </Grid>
96
- <Grid xs={12}>
114
+ <Grid size={{ xs: 12 }}>
97
115
  <Accordion {...args} variant="outlined" defaultExpanded>
98
116
  <AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header">
99
117
  Outlined Expanded
@@ -104,7 +122,7 @@ export const _States: StoryObj<typeof Accordion> = {
104
122
  </AccordionDetails>
105
123
  </Accordion>
106
124
  </Grid>
107
- <Grid xs={12}>
125
+ <Grid size={{ xs: 12 }}>
108
126
  <Accordion {...args}>
109
127
  <AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
110
128
  Focused
@@ -115,7 +133,7 @@ export const _States: StoryObj<typeof Accordion> = {
115
133
  </AccordionDetails>
116
134
  </Accordion>
117
135
  </Grid>
118
- <Grid xs={12}>
136
+ <Grid size={{ xs: 12 }}>
119
137
  <Accordion {...args} disabled>
120
138
  <AccordionSummary aria-controls="disabled-content" id="disabled-header">
121
139
  Disabled
/package/{introduction.stories.mdx → introduction.mdx} RENAMED
File without changes