mui-drawer 1.0.0 → 1.0.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/README.md +59 -0
- package/dist/index.d.ts +1 -1
- package/dist/mui-drawer.es.js +6 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -124,3 +124,62 @@ const MyComponent = () => {
|
|
|
124
124
|
| `tertiaryCtaStartIcon` | `React.ReactNode` | No | - | Icon for tertiary button |
|
|
125
125
|
|
|
126
126
|
## Responsive Design
|
|
127
|
+
|
|
128
|
+
The drawer component is fully responsive and adapts to different screen sizes:
|
|
129
|
+
|
|
130
|
+
- On mobile devices (max-width: 600px):
|
|
131
|
+
- Takes full width and height
|
|
132
|
+
- Stacks action buttons vertically
|
|
133
|
+
- Adjusts content height based on header and footer presence
|
|
134
|
+
- Optimizes spacing for different numbers of action buttons
|
|
135
|
+
|
|
136
|
+
## Development
|
|
137
|
+
|
|
138
|
+
### Local Setup
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
# Install dependencies
|
|
142
|
+
yarn install
|
|
143
|
+
|
|
144
|
+
# Build package
|
|
145
|
+
yarn build
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Local Development with yarn link
|
|
149
|
+
|
|
150
|
+
To test the package in another project locally:
|
|
151
|
+
|
|
152
|
+
1. In the `mui-drawer` directory:
|
|
153
|
+
|
|
154
|
+
```bash
|
|
155
|
+
# Build the package
|
|
156
|
+
yarn build
|
|
157
|
+
|
|
158
|
+
# Create a global symlink
|
|
159
|
+
yarn link
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
2. In your project directory:
|
|
163
|
+
|
|
164
|
+
```bash
|
|
165
|
+
# Link to the package
|
|
166
|
+
yarn link "mui-drawer"
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
3. To unlink when done:
|
|
170
|
+
|
|
171
|
+
```bash
|
|
172
|
+
# In your project directory
|
|
173
|
+
yarn unlink "mui-drawer"
|
|
174
|
+
|
|
175
|
+
# In the mui-drawer directory
|
|
176
|
+
yarn unlink
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
Note: After making changes to the package, you'll need to:
|
|
180
|
+
|
|
181
|
+
1. Rebuild the package (`yarn build`)
|
|
182
|
+
|
|
183
|
+
## License
|
|
184
|
+
|
|
185
|
+
© [Virtual Internships]
|
package/dist/index.d.ts
CHANGED
package/dist/mui-drawer.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(){"use strict";try{if("undefined"!=typeof document){var
|
|
1
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".vi-drawer .h-fill{height:-webkit-fill-available}.vi-drawer .d-f{display:flex}.vi-drawer .ai-c{align-items:center}.vi-drawer .jc-sb{justify-content:space-between}.vi-drawer .fd-col{flex-direction:column}.vi-drawer .gap-8{gap:8px}.vi-drawer .MuiDrawer-paper{overflow-y:hidden;max-width:100%}.vi-drawer .drawer-body-pt{padding-top:0}.vi-drawer .drawer-body-pb{padding-bottom:0}.vi-drawer .close-icon{cursor:pointer;color:#717371}.vi-drawer .vi-drawer-actions{position:sticky;bottom:0;padding:24px;background-color:#fff;z-index:50;display:flex;align-items:center;justify-content:flex-end}.vi-drawer .vi-drawer-actions .vi-drawer-action-ctas{display:flex;align-items:center;justify-content:flex-end;gap:16px}.vi-drawer .vi-drawer-actions .vi-drawer-cta{width:50%;align-self:flex-end}.vi-drawer .vi-drawer-actions .vi-drawer-cta.destructive{background-color:#ed1d31}.vi-drawer .vi-drawer-actions.tertiary-cta{justify-content:space-between;gap:16px}.vi-drawer .vi-drawer-actions.tertiary-cta .tertiary-cta-destructive{color:#ed1d31}.vi-drawer .vi-drawer-actions.divider{border-top:1px solid #e9e9e9}.vi-drawer .vi-drawer-title{position:sticky;top:0;padding:24px 24px 28px;background-color:#fff;z-index:50}.vi-drawer .vi-drawer-title .description{margin-top:16px!important}.vi-drawer .drawer-children{padding:24px;overflow-y:auto;height:100%}.vi-drawer .drawer-children.with-header-footer{padding-top:0;padding-bottom:28px;height:calc(100% - 173px)}.vi-drawer .drawer-children.with-header{padding-top:0;height:calc(100% - 80px)}.vi-drawer .drawer-children.with-footer{padding-bottom:28px;height:calc(100% - 93px)}.vi-drawer .drawer-children.no-divider{padding-bottom:0}@media only screen and (max-width: 600px){.vi-drawer .MuiPaper-root{margin:0;width:100%;height:100%}.vi-drawer .vi-drawer-actions-wrapper,.vi-drawer .vi-drawer-actions{flex-direction:column-reverse;gap:12px}.vi-drawer .vi-drawer-actions .vi-drawer-action-ctas{flex-direction:column-reverse;width:100%!important;gap:12px}.vi-drawer .vi-drawer-actions .vi-drawer-cta{width:100%}.vi-drawer .drawer-children.one-cta.with-header-footer{height:calc(100% - 170px)}.vi-drawer .drawer-children.one-cta.with-header{height:calc(100% - 80px)}.vi-drawer .drawer-children.one-cta.with-footer{height:calc(100% - 90px)}.vi-drawer .drawer-children.two-ctas.with-header-footer{height:calc(100% - 222px)}.vi-drawer .drawer-children.two-ctas.with-header{height:calc(100% - 80px)}.vi-drawer .drawer-children.two-ctas.with-footer{height:calc(100% - 142px)}.vi-drawer .drawer-children.three-ctas.with-header-footer{height:calc(100% - 259px)}.vi-drawer .drawer-children.three-ctas.with-header{height:calc(100% - 80px)}.vi-drawer .drawer-children.three-ctas.with-footer{height:calc(100% - 179px)}}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { useState, useRef, useEffect } from 'react';
|
|
@@ -1867,6 +1867,7 @@ const TERTIARY_CTA_TYPES = {
|
|
|
1867
1867
|
};
|
|
1868
1868
|
|
|
1869
1869
|
const MuiDrawer = (props) => {
|
|
1870
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
1870
1871
|
const [actionsMaxWidth, setActionsMaxWidth] = useState("50%");
|
|
1871
1872
|
const drawerRef = useRef(null);
|
|
1872
1873
|
const parentTheme = useTheme();
|
|
@@ -1940,18 +1941,20 @@ const MuiDrawer = (props) => {
|
|
|
1940
1941
|
}, 0);
|
|
1941
1942
|
return () => clearTimeout(timer);
|
|
1942
1943
|
}, [drawerRef.current]);
|
|
1944
|
+
useEffect(() => setIsOpen(open), [open]);
|
|
1943
1945
|
return /* @__PURE__ */ jsx(ThemeProvider, { theme: currentTheme, children: /* @__PURE__ */ jsx(
|
|
1944
1946
|
Drawer,
|
|
1945
1947
|
{
|
|
1946
1948
|
className: classNames("vi-drawer", wrapperClassName),
|
|
1947
|
-
open,
|
|
1949
|
+
open: isOpen,
|
|
1948
1950
|
anchor,
|
|
1949
1951
|
onClose: handleClose,
|
|
1952
|
+
transitionDuration: 300,
|
|
1950
1953
|
...rest,
|
|
1951
1954
|
children: /* @__PURE__ */ jsxs("div", { ref: drawerRef, style: { width, maxWidth }, className: "h-fill", children: [
|
|
1952
1955
|
title && /* @__PURE__ */ jsxs("div", { className: "vi-drawer-title", children: [
|
|
1953
1956
|
/* @__PURE__ */ jsxs("div", { className: "d-f ai-c jc-sb", children: [
|
|
1954
|
-
/* @__PURE__ */ jsxs("div", { className: "d-f
|
|
1957
|
+
/* @__PURE__ */ jsxs("div", { className: "d-f fd-col gap-8", children: [
|
|
1955
1958
|
/* @__PURE__ */ jsx(Typography, { variant: "semiBoldLabelL", children: title }),
|
|
1956
1959
|
subTitle && /* @__PURE__ */ jsx(Typography, { variant: "subtextM", children: subTitle })
|
|
1957
1960
|
] }),
|