@availity/mui-drawer 0.1.0-alpha.0 → 0.1.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 (6) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/index.d.mts +13 -0
  3. package/dist/index.d.ts +13 -0
  4. package/dist/index.js +158 -0
  5. package/dist/index.mjs +124 -0
  6. package/package.json +13 -12
package/CHANGELOG.md CHANGED
@@ -2,6 +2,28 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ ## 0.1.0 (2026-02-05)
6
+
7
+ ### Dependency Updates
8
+
9
+ * `mui-backdrop` updated to version `1.0.0`
10
+ * `mui-button` updated to version `1.0.0`
11
+ * `mui-icon` updated to version `1.0.0`
12
+ * `mui-layout` updated to version `1.0.0`
13
+ * `mui-typography` updated to version `1.0.0`
14
+ * `mui-checkbox` updated to version `1.0.0`
15
+ * `mui-form-utils` updated to version `1.0.0`
16
+ * `mui-list` updated to version `1.0.0`
17
+
18
+ ### Features
19
+
20
+ * **mui-drawer:** add Drawer component ([e1579ca](https://github.com/Availity/element/commit/e1579caed4975cac296706da14a1b655e6764628))
21
+
22
+
23
+ ### Bug Fixes
24
+
25
+ * **mui-drawer:** fix workspace dependencies ([1e8f844](https://github.com/Availity/element/commit/1e8f8448145fc4e3b5971bfa23a0a3deef180922))
26
+
5
27
  ## 0.1.0-alpha.0 (2026-02-05)
6
28
 
7
29
 
package/dist/index.d.mts ADDED
@@ -0,0 +1,13 @@
1
+ import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
2
+
3
+ interface DrawerProps extends Omit<DrawerProps$1, 'slots' | 'elevation'> {
4
+ children?: React.ReactNode;
5
+ slots?: Omit<DrawerProps$1['slots'], 'backdrop' | 'paper'>;
6
+ actions?: React.ReactNode;
7
+ header?: string;
8
+ size?: 'small' | 'medium' | 'large';
9
+ contentPadding?: boolean;
10
+ }
11
+ declare const Drawer: ({ anchor, actions, children, contentPadding, header, onClose, size, ...rest }: DrawerProps) => React.JSX.Element;
12
+
13
+ export { Drawer, type DrawerProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { DrawerProps as DrawerProps$1 } from '@mui/material/Drawer';
2
+
3
+ interface DrawerProps extends Omit<DrawerProps$1, 'slots' | 'elevation'> {
4
+ children?: React.ReactNode;
5
+ slots?: Omit<DrawerProps$1['slots'], 'backdrop' | 'paper'>;
6
+ actions?: React.ReactNode;
7
+ header?: string;
8
+ size?: 'small' | 'medium' | 'large';
9
+ contentPadding?: boolean;
10
+ }
11
+ declare const Drawer: ({ anchor, actions, children, contentPadding, header, onClose, size, ...rest }: DrawerProps) => React.JSX.Element;
12
+
13
+ export { Drawer, type DrawerProps };
package/dist/index.js ADDED
@@ -0,0 +1,158 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __defProps = Object.defineProperties;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
7
+ var __getOwnPropNames = Object.getOwnPropertyNames;
8
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
9
+ var __getProtoOf = Object.getPrototypeOf;
10
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
11
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
12
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
13
+ var __spreadValues = (a, b) => {
14
+ for (var prop in b || (b = {}))
15
+ if (__hasOwnProp.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ if (__getOwnPropSymbols)
18
+ for (var prop of __getOwnPropSymbols(b)) {
19
+ if (__propIsEnum.call(b, prop))
20
+ __defNormalProp(a, prop, b[prop]);
21
+ }
22
+ return a;
23
+ };
24
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
+ var __objRest = (source, exclude) => {
26
+ var target = {};
27
+ for (var prop in source)
28
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
+ target[prop] = source[prop];
30
+ if (source != null && __getOwnPropSymbols)
31
+ for (var prop of __getOwnPropSymbols(source)) {
32
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
+ target[prop] = source[prop];
34
+ }
35
+ return target;
36
+ };
37
+ var __export = (target, all) => {
38
+ for (var name in all)
39
+ __defProp(target, name, { get: all[name], enumerable: true });
40
+ };
41
+ var __copyProps = (to, from, except, desc) => {
42
+ if (from && typeof from === "object" || typeof from === "function") {
43
+ for (let key of __getOwnPropNames(from))
44
+ if (!__hasOwnProp.call(to, key) && key !== except)
45
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
46
+ }
47
+ return to;
48
+ };
49
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
50
+ // If the importer is in node compatibility mode or this is not an ESM
51
+ // file that has been converted to a CommonJS file using a Babel-
52
+ // compatible transform (i.e. "__esModule" has not been set), then set
53
+ // "default" to the CommonJS "module.exports" for node compatibility.
54
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
55
+ mod
56
+ ));
57
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
58
+
59
+ // src/index.ts
60
+ var index_exports = {};
61
+ __export(index_exports, {
62
+ Drawer: () => Drawer
63
+ });
64
+ module.exports = __toCommonJS(index_exports);
65
+
66
+ // src/lib/Drawer.tsx
67
+ var import_Drawer = __toESM(require("@mui/material/Drawer"));
68
+ var import_mui_backdrop = require("@availity/mui-backdrop");
69
+ var import_mui_layout = require("@availity/mui-layout");
70
+ var import_mui_typography = require("@availity/mui-typography");
71
+ var import_mui_button = require("@availity/mui-button");
72
+ var import_mui_icon = require("@availity/mui-icon");
73
+ var import_styles = require("@mui/material/styles");
74
+ var import_jsx_runtime = require("react/jsx-runtime");
75
+ var StyledDrawerHeader = (0, import_styles.styled)(import_mui_layout.Grid, {
76
+ name: "MuiDrawer",
77
+ slot: "AvDrawerHeader"
78
+ })();
79
+ var StyledDrawerHeaderText = (0, import_styles.styled)(import_mui_typography.Typography, {
80
+ name: "MuiDrawer",
81
+ slot: "AvDrawerHeaderText"
82
+ })();
83
+ var StyledDrawerContent = (0, import_styles.styled)(import_mui_layout.Box, {
84
+ name: "MuiDrawer",
85
+ slot: "AvDrawerContent"
86
+ })();
87
+ var Drawer = (_a) => {
88
+ var _b = _a, {
89
+ anchor = "right",
90
+ actions,
91
+ children,
92
+ contentPadding,
93
+ header,
94
+ onClose,
95
+ size = "medium"
96
+ } = _b, rest = __objRest(_b, [
97
+ "anchor",
98
+ "actions",
99
+ "children",
100
+ "contentPadding",
101
+ "header",
102
+ "onClose",
103
+ "size"
104
+ ]);
105
+ const drawerHeader = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledDrawerHeader, { container: true, children: [
106
+ header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrawerHeaderText, { variant: "h5", children: header }),
107
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_mui_layout.Grid, { flexShrink: 0, paddingLeft: 2, container: true, alignItems: "center", justifyContent: "flex-end", flexWrap: "nowrap", children: [
108
+ actions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_layout.Grid, { paddingRight: 1, children: actions }),
109
+ onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
110
+ import_mui_button.IconButton,
111
+ {
112
+ title: "close drawer",
113
+ "aria-label": "close drawer",
114
+ onClick: () => onClose(!rest.open, "backdropClick"),
115
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.CloseIcon, {})
116
+ }
117
+ )
118
+ ] })
119
+ ] });
120
+ const sizes = {
121
+ small: { width: "326px", breakpoint: 350 },
122
+ medium: { width: "400px", breakpoint: 424 },
123
+ large: { width: "600px", breakpoint: 624 }
124
+ };
125
+ const { width, breakpoint } = sizes[size];
126
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
127
+ import_Drawer.default,
128
+ __spreadProps(__spreadValues({}, rest), {
129
+ anchor,
130
+ onClose,
131
+ slots: {
132
+ backdrop: import_mui_backdrop.Backdrop
133
+ },
134
+ slotProps: {
135
+ paper: {
136
+ sx: anchor === "left" || anchor === "right" ? {
137
+ width,
138
+ [`@media (max-width: ${breakpoint}px)`]: {
139
+ width: "calc(100% - 24px)"
140
+ }
141
+ } : void 0
142
+ },
143
+ transition: {
144
+ easing: { enter: "cubic-bezier(0.4, 0, 1, 1)", exit: "cubic-bezier(0.0, 0, 0.2, 1)" },
145
+ timeout: { enter: 225, exit: 195 }
146
+ }
147
+ },
148
+ children: [
149
+ header || actions ? drawerHeader : null,
150
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDrawerContent, { padding: contentPadding ? "0px 24px" : 0, children })
151
+ ]
152
+ })
153
+ );
154
+ };
155
+ // Annotate the CommonJS export names for ESM import in node:
156
+ 0 && (module.exports = {
157
+ Drawer
158
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,124 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+
33
+ // src/lib/Drawer.tsx
34
+ import MuiDrawer from "@mui/material/Drawer";
35
+ import { Backdrop } from "@availity/mui-backdrop";
36
+ import { Box, Grid } from "@availity/mui-layout";
37
+ import { Typography } from "@availity/mui-typography";
38
+ import { IconButton } from "@availity/mui-button";
39
+ import { CloseIcon } from "@availity/mui-icon";
40
+ import { styled } from "@mui/material/styles";
41
+ import { jsx, jsxs } from "react/jsx-runtime";
42
+ var StyledDrawerHeader = styled(Grid, {
43
+ name: "MuiDrawer",
44
+ slot: "AvDrawerHeader"
45
+ })();
46
+ var StyledDrawerHeaderText = styled(Typography, {
47
+ name: "MuiDrawer",
48
+ slot: "AvDrawerHeaderText"
49
+ })();
50
+ var StyledDrawerContent = styled(Box, {
51
+ name: "MuiDrawer",
52
+ slot: "AvDrawerContent"
53
+ })();
54
+ var Drawer = (_a) => {
55
+ var _b = _a, {
56
+ anchor = "right",
57
+ actions,
58
+ children,
59
+ contentPadding,
60
+ header,
61
+ onClose,
62
+ size = "medium"
63
+ } = _b, rest = __objRest(_b, [
64
+ "anchor",
65
+ "actions",
66
+ "children",
67
+ "contentPadding",
68
+ "header",
69
+ "onClose",
70
+ "size"
71
+ ]);
72
+ const drawerHeader = /* @__PURE__ */ jsxs(StyledDrawerHeader, { container: true, children: [
73
+ header && /* @__PURE__ */ jsx(StyledDrawerHeaderText, { variant: "h5", children: header }),
74
+ /* @__PURE__ */ jsxs(Grid, { flexShrink: 0, paddingLeft: 2, container: true, alignItems: "center", justifyContent: "flex-end", flexWrap: "nowrap", children: [
75
+ actions && /* @__PURE__ */ jsx(Grid, { paddingRight: 1, children: actions }),
76
+ onClose && /* @__PURE__ */ jsx(
77
+ IconButton,
78
+ {
79
+ title: "close drawer",
80
+ "aria-label": "close drawer",
81
+ onClick: () => onClose(!rest.open, "backdropClick"),
82
+ children: /* @__PURE__ */ jsx(CloseIcon, {})
83
+ }
84
+ )
85
+ ] })
86
+ ] });
87
+ const sizes = {
88
+ small: { width: "326px", breakpoint: 350 },
89
+ medium: { width: "400px", breakpoint: 424 },
90
+ large: { width: "600px", breakpoint: 624 }
91
+ };
92
+ const { width, breakpoint } = sizes[size];
93
+ return /* @__PURE__ */ jsxs(
94
+ MuiDrawer,
95
+ __spreadProps(__spreadValues({}, rest), {
96
+ anchor,
97
+ onClose,
98
+ slots: {
99
+ backdrop: Backdrop
100
+ },
101
+ slotProps: {
102
+ paper: {
103
+ sx: anchor === "left" || anchor === "right" ? {
104
+ width,
105
+ [`@media (max-width: ${breakpoint}px)`]: {
106
+ width: "calc(100% - 24px)"
107
+ }
108
+ } : void 0
109
+ },
110
+ transition: {
111
+ easing: { enter: "cubic-bezier(0.4, 0, 1, 1)", exit: "cubic-bezier(0.0, 0, 0.2, 1)" },
112
+ timeout: { enter: 225, exit: 195 }
113
+ }
114
+ },
115
+ children: [
116
+ header || actions ? drawerHeader : null,
117
+ /* @__PURE__ */ jsx(StyledDrawerContent, { padding: contentPadding ? "0px 24px" : 0, children })
118
+ ]
119
+ })
120
+ );
121
+ };
122
+ export {
123
+ Drawer
124
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@availity/mui-drawer",
3
- "version": "0.1.0-alpha.0",
3
+ "version": "0.1.0",
4
4
  "description": "Availity MUI Drawer Component - part of the @availity/element design system",
5
5
  "keywords": [
6
6
  "react",
@@ -40,9 +40,12 @@
40
40
  "publish:canary": "yarn npm publish --access public --tag canary"
41
41
  },
42
42
  "devDependencies": {
43
- "@availity/mui-checkbox": "workspace:*",
44
- "@availity/mui-form-utils": "workspace:*",
45
- "@availity/mui-list": "workspace:*",
43
+ "@availity/mui-button": "2.0.2",
44
+ "@availity/mui-checkbox": "2.0.2",
45
+ "@availity/mui-form-utils": "2.0.3",
46
+ "@availity/mui-icon": "2.1.0",
47
+ "@availity/mui-layout": "2.0.1",
48
+ "@availity/mui-list": "2.0.3",
46
49
  "@mui/material": "^7.3.4",
47
50
  "react": "19.2.0",
48
51
  "react-dom": "19.2.0",
@@ -50,17 +53,15 @@
50
53
  "typescript": "^5.4.5"
51
54
  },
52
55
  "peerDependencies": {
56
+ "@availity/mui-backdrop": "2.0.1",
57
+ "@availity/mui-button": "2.0.2",
58
+ "@availity/mui-icon": "2.1.0",
59
+ "@availity/mui-layout": "2.0.1",
60
+ "@availity/mui-typography": "2.0.1",
53
61
  "@mui/material": "^7.0.0",
54
62
  "react": ">=17.0.0"
55
63
  },
56
64
  "publishConfig": {
57
65
  "access": "public"
58
- },
59
- "dependencies": {
60
- "@availity/mui-backdrop": "workspace:*",
61
- "@availity/mui-button": "workspace:*",
62
- "@availity/mui-icon": "workspace:*",
63
- "@availity/mui-layout": "workspace:*",
64
- "@availity/mui-typography": "workspace:*"
65
66
  }
66
- }
67
+ }