@availity/mui-drawer 0.1.0 → 0.1.2
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.
- package/CHANGELOG.md +8 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +17 -12
- package/dist/index.mjs +17 -12
- package/package.json +3 -3
- package/src/lib/Drawer.stories.tsx +44 -25
- package/src/lib/Drawer.tsx +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-drawer@0.1.1...@availity/mui-drawer@0.1.2) (2026-02-11)
|
|
6
|
+
|
|
7
|
+
## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-drawer@0.1.0...@availity/mui-drawer@0.1.1) (2026-02-10)
|
|
8
|
+
|
|
9
|
+
### Dependency Updates
|
|
10
|
+
|
|
11
|
+
* `mui-form-utils` updated to version `0.1.0`
|
|
12
|
+
* `mui-list` updated to version `0.1.0`
|
|
5
13
|
## 0.1.0 (2026-02-05)
|
|
6
14
|
|
|
7
15
|
### Dependency Updates
|
package/dist/index.d.mts
CHANGED
|
@@ -8,6 +8,6 @@ interface DrawerProps extends Omit<DrawerProps$1, 'slots' | 'elevation'> {
|
|
|
8
8
|
size?: 'small' | 'medium' | 'large';
|
|
9
9
|
contentPadding?: boolean;
|
|
10
10
|
}
|
|
11
|
-
declare const Drawer: ({ anchor, actions, children, contentPadding, header, onClose, size, ...rest }: DrawerProps) => React.JSX.Element;
|
|
11
|
+
declare const Drawer: ({ anchor, actions, children, contentPadding, header, onClose, size, slots, slotProps, ...rest }: DrawerProps) => React.JSX.Element;
|
|
12
12
|
|
|
13
13
|
export { Drawer, type DrawerProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,6 @@ interface DrawerProps extends Omit<DrawerProps$1, 'slots' | 'elevation'> {
|
|
|
8
8
|
size?: 'small' | 'medium' | 'large';
|
|
9
9
|
contentPadding?: boolean;
|
|
10
10
|
}
|
|
11
|
-
declare const Drawer: ({ anchor, actions, children, contentPadding, header, onClose, size, ...rest }: DrawerProps) => React.JSX.Element;
|
|
11
|
+
declare const Drawer: ({ anchor, actions, children, contentPadding, header, onClose, size, slots, slotProps, ...rest }: DrawerProps) => React.JSX.Element;
|
|
12
12
|
|
|
13
13
|
export { Drawer, type DrawerProps };
|
package/dist/index.js
CHANGED
|
@@ -92,7 +92,9 @@ var Drawer = (_a) => {
|
|
|
92
92
|
contentPadding,
|
|
93
93
|
header,
|
|
94
94
|
onClose,
|
|
95
|
-
size = "medium"
|
|
95
|
+
size = "medium",
|
|
96
|
+
slots,
|
|
97
|
+
slotProps
|
|
96
98
|
} = _b, rest = __objRest(_b, [
|
|
97
99
|
"anchor",
|
|
98
100
|
"actions",
|
|
@@ -100,8 +102,11 @@ var Drawer = (_a) => {
|
|
|
100
102
|
"contentPadding",
|
|
101
103
|
"header",
|
|
102
104
|
"onClose",
|
|
103
|
-
"size"
|
|
105
|
+
"size",
|
|
106
|
+
"slots",
|
|
107
|
+
"slotProps"
|
|
104
108
|
]);
|
|
109
|
+
var _a2, _b2;
|
|
105
110
|
const drawerHeader = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledDrawerHeader, { container: true, children: [
|
|
106
111
|
header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrawerHeaderText, { variant: "h5", children: header }),
|
|
107
112
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { flexShrink: 0, paddingLeft: 2, container: true, alignItems: "center", justifyContent: "flex-end", flexWrap: "nowrap", children: [
|
|
@@ -128,23 +133,23 @@ var Drawer = (_a) => {
|
|
|
128
133
|
__spreadProps(__spreadValues({}, rest), {
|
|
129
134
|
anchor,
|
|
130
135
|
onClose,
|
|
131
|
-
slots: {
|
|
136
|
+
slots: __spreadProps(__spreadValues({}, slots), {
|
|
132
137
|
backdrop: import_mui_backdrop.Backdrop
|
|
133
|
-
},
|
|
134
|
-
slotProps: {
|
|
135
|
-
paper: {
|
|
136
|
-
sx: anchor === "left" || anchor === "right" ? {
|
|
138
|
+
}),
|
|
139
|
+
slotProps: __spreadProps(__spreadValues({}, slotProps), {
|
|
140
|
+
paper: __spreadProps(__spreadValues({}, slotProps == null ? void 0 : slotProps.paper), {
|
|
141
|
+
sx: anchor === "left" || anchor === "right" ? __spreadProps(__spreadValues({}, (_a2 = slotProps == null ? void 0 : slotProps.paper) == null ? void 0 : _a2.sx), {
|
|
137
142
|
width,
|
|
138
143
|
[`@media (max-width: ${breakpoint}px)`]: {
|
|
139
144
|
width: "calc(100% - 24px)"
|
|
140
145
|
}
|
|
141
|
-
} : void 0
|
|
142
|
-
},
|
|
143
|
-
transition: {
|
|
146
|
+
}) : (_b2 = slotProps == null ? void 0 : slotProps.paper) == null ? void 0 : _b2.sx
|
|
147
|
+
}),
|
|
148
|
+
transition: __spreadValues({
|
|
144
149
|
easing: { enter: "cubic-bezier(0.4, 0, 1, 1)", exit: "cubic-bezier(0.0, 0, 0.2, 1)" },
|
|
145
150
|
timeout: { enter: 225, exit: 195 }
|
|
146
|
-
}
|
|
147
|
-
},
|
|
151
|
+
}, slotProps == null ? void 0 : slotProps.transition)
|
|
152
|
+
}),
|
|
148
153
|
children: [
|
|
149
154
|
header || actions ? drawerHeader : null,
|
|
150
155
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrawerContent, { padding: contentPadding ? "0px 24px" : 0, children })
|
package/dist/index.mjs
CHANGED
|
@@ -59,7 +59,9 @@ var Drawer = (_a) => {
|
|
|
59
59
|
contentPadding,
|
|
60
60
|
header,
|
|
61
61
|
onClose,
|
|
62
|
-
size = "medium"
|
|
62
|
+
size = "medium",
|
|
63
|
+
slots,
|
|
64
|
+
slotProps
|
|
63
65
|
} = _b, rest = __objRest(_b, [
|
|
64
66
|
"anchor",
|
|
65
67
|
"actions",
|
|
@@ -67,8 +69,11 @@ var Drawer = (_a) => {
|
|
|
67
69
|
"contentPadding",
|
|
68
70
|
"header",
|
|
69
71
|
"onClose",
|
|
70
|
-
"size"
|
|
72
|
+
"size",
|
|
73
|
+
"slots",
|
|
74
|
+
"slotProps"
|
|
71
75
|
]);
|
|
76
|
+
var _a2, _b2;
|
|
72
77
|
const drawerHeader = /* @__PURE__ */ jsxs(StyledDrawerHeader, { container: true, children: [
|
|
73
78
|
header && /* @__PURE__ */ jsx(StyledDrawerHeaderText, { variant: "h5", children: header }),
|
|
74
79
|
/* @__PURE__ */ jsxs(Grid, { flexShrink: 0, paddingLeft: 2, container: true, alignItems: "center", justifyContent: "flex-end", flexWrap: "nowrap", children: [
|
|
@@ -95,23 +100,23 @@ var Drawer = (_a) => {
|
|
|
95
100
|
__spreadProps(__spreadValues({}, rest), {
|
|
96
101
|
anchor,
|
|
97
102
|
onClose,
|
|
98
|
-
slots: {
|
|
103
|
+
slots: __spreadProps(__spreadValues({}, slots), {
|
|
99
104
|
backdrop: Backdrop
|
|
100
|
-
},
|
|
101
|
-
slotProps: {
|
|
102
|
-
paper: {
|
|
103
|
-
sx: anchor === "left" || anchor === "right" ? {
|
|
105
|
+
}),
|
|
106
|
+
slotProps: __spreadProps(__spreadValues({}, slotProps), {
|
|
107
|
+
paper: __spreadProps(__spreadValues({}, slotProps == null ? void 0 : slotProps.paper), {
|
|
108
|
+
sx: anchor === "left" || anchor === "right" ? __spreadProps(__spreadValues({}, (_a2 = slotProps == null ? void 0 : slotProps.paper) == null ? void 0 : _a2.sx), {
|
|
104
109
|
width,
|
|
105
110
|
[`@media (max-width: ${breakpoint}px)`]: {
|
|
106
111
|
width: "calc(100% - 24px)"
|
|
107
112
|
}
|
|
108
|
-
} : void 0
|
|
109
|
-
},
|
|
110
|
-
transition: {
|
|
113
|
+
}) : (_b2 = slotProps == null ? void 0 : slotProps.paper) == null ? void 0 : _b2.sx
|
|
114
|
+
}),
|
|
115
|
+
transition: __spreadValues({
|
|
111
116
|
easing: { enter: "cubic-bezier(0.4, 0, 1, 1)", exit: "cubic-bezier(0.0, 0, 0.2, 1)" },
|
|
112
117
|
timeout: { enter: 225, exit: 195 }
|
|
113
|
-
}
|
|
114
|
-
},
|
|
118
|
+
}, slotProps == null ? void 0 : slotProps.transition)
|
|
119
|
+
}),
|
|
115
120
|
children: [
|
|
116
121
|
header || actions ? drawerHeader : null,
|
|
117
122
|
/* @__PURE__ */ jsx(StyledDrawerContent, { padding: contentPadding ? "0px 24px" : 0, children })
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-drawer",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Availity MUI Drawer Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -42,10 +42,10 @@
|
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@availity/mui-button": "2.0.2",
|
|
44
44
|
"@availity/mui-checkbox": "2.0.2",
|
|
45
|
-
"@availity/mui-form-utils": "2.0.
|
|
45
|
+
"@availity/mui-form-utils": "2.0.4",
|
|
46
46
|
"@availity/mui-icon": "2.1.0",
|
|
47
47
|
"@availity/mui-layout": "2.0.1",
|
|
48
|
-
"@availity/mui-list": "2.0.
|
|
48
|
+
"@availity/mui-list": "2.0.4",
|
|
49
49
|
"@mui/material": "^7.3.4",
|
|
50
50
|
"react": "19.2.0",
|
|
51
51
|
"react-dom": "19.2.0",
|
|
@@ -5,7 +5,7 @@ import { Box } from '@availity/mui-layout';
|
|
|
5
5
|
import { ArrowsRotateIcon, ChartPieIcon, InboxIcon, SendIcon, SettingsIcon } from '@availity/mui-icon';
|
|
6
6
|
import { Checkbox } from '@availity/mui-checkbox';
|
|
7
7
|
import { FormControl, FormControlLabel, FormGroup, FormLabel } from '@availity/mui-form-utils';
|
|
8
|
-
import { List, ListItemButton, ListItemIcon, ListItemText } from '@availity/mui-list';
|
|
8
|
+
import { List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@availity/mui-list';
|
|
9
9
|
import { Drawer, DrawerProps } from './Drawer';
|
|
10
10
|
|
|
11
11
|
const meta: Meta<typeof Drawer> = {
|
|
@@ -31,6 +31,11 @@ export const _Drawer: StoryObj<typeof Drawer> = {
|
|
|
31
31
|
);
|
|
32
32
|
},
|
|
33
33
|
args: {
|
|
34
|
+
slotProps: {
|
|
35
|
+
paper: {
|
|
36
|
+
'aria-label': 'test-drawer',
|
|
37
|
+
},
|
|
38
|
+
},
|
|
34
39
|
children: `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam
|
|
35
40
|
beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum
|
|
36
41
|
quasi quidem quibusdam.`,
|
|
@@ -60,32 +65,45 @@ export const _NavDrawer: StoryObj<typeof Drawer> = {
|
|
|
60
65
|
},
|
|
61
66
|
args: {
|
|
62
67
|
anchor: 'left',
|
|
68
|
+
slotProps: {
|
|
69
|
+
paper: {
|
|
70
|
+
'aria-label': 'navigation drawer',
|
|
71
|
+
},
|
|
72
|
+
},
|
|
63
73
|
children: (
|
|
64
74
|
<List disablePadding>
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
</
|
|
75
|
+
<ListItem disablePadding>
|
|
76
|
+
<ListItemButton>
|
|
77
|
+
<ListItemIcon>
|
|
78
|
+
<InboxIcon />
|
|
79
|
+
</ListItemIcon>
|
|
80
|
+
<ListItemText>Inbox</ListItemText>
|
|
81
|
+
</ListItemButton>
|
|
82
|
+
</ListItem>
|
|
83
|
+
<ListItem disablePadding>
|
|
84
|
+
<ListItemButton>
|
|
85
|
+
<ListItemIcon>
|
|
86
|
+
<SendIcon />
|
|
87
|
+
</ListItemIcon>
|
|
88
|
+
<ListItemText>Sent</ListItemText>
|
|
89
|
+
</ListItemButton>
|
|
90
|
+
</ListItem>
|
|
91
|
+
<ListItem disablePadding>
|
|
92
|
+
<ListItemButton>
|
|
93
|
+
<ListItemIcon>
|
|
94
|
+
<ChartPieIcon />
|
|
95
|
+
</ListItemIcon>
|
|
96
|
+
<ListItemText>Reporting</ListItemText>
|
|
97
|
+
</ListItemButton>
|
|
98
|
+
</ListItem>
|
|
99
|
+
<ListItem disablePadding>
|
|
100
|
+
<ListItemButton>
|
|
101
|
+
<ListItemIcon>
|
|
102
|
+
<SettingsIcon />
|
|
103
|
+
</ListItemIcon>
|
|
104
|
+
<ListItemText>Settings</ListItemText>
|
|
105
|
+
</ListItemButton>
|
|
106
|
+
</ListItem>
|
|
89
107
|
</List>
|
|
90
108
|
),
|
|
91
109
|
},
|
|
@@ -121,6 +139,7 @@ export const _PersistentDrawer: StoryObj<typeof Drawer> = {
|
|
|
121
139
|
variant: 'persistent',
|
|
122
140
|
slotProps: {
|
|
123
141
|
paper: {
|
|
142
|
+
'aria-label': 'persistent drawer',
|
|
124
143
|
variant: 'outlined',
|
|
125
144
|
},
|
|
126
145
|
},
|
package/src/lib/Drawer.tsx
CHANGED
|
@@ -39,6 +39,8 @@ export const Drawer = ({
|
|
|
39
39
|
header,
|
|
40
40
|
onClose,
|
|
41
41
|
size = 'medium',
|
|
42
|
+
slots,
|
|
43
|
+
slotProps,
|
|
42
44
|
...rest
|
|
43
45
|
}: DrawerProps): React.JSX.Element => {
|
|
44
46
|
const drawerHeader = (
|
|
@@ -71,23 +73,28 @@ export const Drawer = ({
|
|
|
71
73
|
anchor={anchor}
|
|
72
74
|
onClose={onClose}
|
|
73
75
|
slots={{
|
|
76
|
+
...slots,
|
|
74
77
|
backdrop: Backdrop,
|
|
75
78
|
}}
|
|
76
79
|
slotProps={{
|
|
80
|
+
...slotProps,
|
|
77
81
|
paper: {
|
|
82
|
+
...(slotProps?.paper as any),
|
|
78
83
|
sx:
|
|
79
84
|
anchor === 'left' || anchor === 'right'
|
|
80
85
|
? {
|
|
86
|
+
...(slotProps?.paper as any)?.sx,
|
|
81
87
|
width,
|
|
82
88
|
[`@media (max-width: ${breakpoint}px)`]: {
|
|
83
89
|
width: 'calc(100% - 24px)',
|
|
84
90
|
},
|
|
85
91
|
}
|
|
86
|
-
:
|
|
92
|
+
: (slotProps?.paper as any)?.sx,
|
|
87
93
|
},
|
|
88
94
|
transition: {
|
|
89
95
|
easing: { enter: 'cubic-bezier(0.4, 0, 1, 1)', exit: 'cubic-bezier(0.0, 0, 0.2, 1)' },
|
|
90
96
|
timeout: { enter: 225, exit: 195 },
|
|
97
|
+
...slotProps?.transition,
|
|
91
98
|
},
|
|
92
99
|
}}
|
|
93
100
|
>
|