@xyo-network/react-drawer 2.75.7 → 2.76.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/neutral/components/Drawer.d.cts +10 -0
- package/dist/neutral/components/Drawer.d.cts.map +1 -0
- package/dist/neutral/components/Drawer.d.mts +10 -0
- package/dist/neutral/components/Drawer.d.mts.map +1 -0
- package/dist/neutral/components/Drawer.d.ts +10 -0
- package/dist/neutral/components/Drawer.d.ts.map +1 -0
- package/dist/neutral/components/index.d.cts +2 -0
- package/dist/neutral/components/index.d.cts.map +1 -0
- package/dist/neutral/components/index.d.mts +2 -0
- package/dist/neutral/components/index.d.mts.map +1 -0
- package/dist/neutral/components/index.d.ts +2 -0
- package/dist/neutral/components/index.d.ts.map +1 -0
- package/dist/neutral/index.cjs +98 -0
- package/dist/neutral/index.cjs.map +1 -0
- package/dist/neutral/index.d.cts +2 -0
- package/dist/neutral/index.d.cts.map +1 -0
- package/dist/neutral/index.d.mts +2 -0
- package/dist/neutral/index.d.mts.map +1 -0
- package/dist/neutral/index.d.ts +2 -0
- package/dist/neutral/index.d.ts.map +1 -0
- package/dist/neutral/index.js +75 -0
- package/dist/neutral/index.js.map +1 -0
- package/package.json +3 -3
@@ -0,0 +1,10 @@
|
|
1
|
+
import { DrawerProps } from '@mui/material';
|
2
|
+
import { PropsWithChildren } from 'react';
|
3
|
+
export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
|
4
|
+
heightVariant?: 'full' | 'auto';
|
5
|
+
subTitle?: string;
|
6
|
+
title?: string;
|
7
|
+
widthVariant?: 'full' | 'partial';
|
8
|
+
}
|
9
|
+
export declare const DrawerEx: React.FC<DrawerExProps>;
|
10
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAA"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { DrawerProps } from '@mui/material';
|
2
|
+
import { PropsWithChildren } from 'react';
|
3
|
+
export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
|
4
|
+
heightVariant?: 'full' | 'auto';
|
5
|
+
subTitle?: string;
|
6
|
+
title?: string;
|
7
|
+
widthVariant?: 'full' | 'partial';
|
8
|
+
}
|
9
|
+
export declare const DrawerEx: React.FC<DrawerExProps>;
|
10
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAA"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { DrawerProps } from '@mui/material';
|
2
|
+
import { PropsWithChildren } from 'react';
|
3
|
+
export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
|
4
|
+
heightVariant?: 'full' | 'auto';
|
5
|
+
subTitle?: string;
|
6
|
+
title?: string;
|
7
|
+
widthVariant?: 'full' | 'partial';
|
8
|
+
}
|
9
|
+
export declare const DrawerEx: React.FC<DrawerExProps>;
|
10
|
+
//# sourceMappingURL=Drawer.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
|
@@ -0,0 +1,98 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __defProp = Object.defineProperty;
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
+
var __export = (target, all) => {
|
7
|
+
for (var name in all)
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
+
};
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
+
for (let key of __getOwnPropNames(from))
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
+
}
|
16
|
+
return to;
|
17
|
+
};
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
19
|
+
|
20
|
+
// src/index.ts
|
21
|
+
var src_exports = {};
|
22
|
+
__export(src_exports, {
|
23
|
+
DrawerEx: () => DrawerEx
|
24
|
+
});
|
25
|
+
module.exports = __toCommonJS(src_exports);
|
26
|
+
|
27
|
+
// src/components/Drawer.tsx
|
28
|
+
var import_material = require("@mui/material");
|
29
|
+
var import_react_flexbox = require("@xylabs/react-flexbox");
|
30
|
+
var import_react = require("react");
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
32
|
+
var DrawerEx = ({
|
33
|
+
children,
|
34
|
+
heightVariant = "full",
|
35
|
+
subTitle,
|
36
|
+
title,
|
37
|
+
onClose,
|
38
|
+
widthVariant = "partial",
|
39
|
+
...props
|
40
|
+
}) => {
|
41
|
+
const variantBasedProps = (0, import_react.useMemo)(() => {
|
42
|
+
return {
|
43
|
+
PaperProps: {
|
44
|
+
sx: {
|
45
|
+
alignItems: "center",
|
46
|
+
background: "transparent",
|
47
|
+
boxShadow: "none",
|
48
|
+
height: heightVariant === "full" ? "100%" : "auto",
|
49
|
+
width: widthVariant === "partial" ? "auto" : "100%"
|
50
|
+
}
|
51
|
+
},
|
52
|
+
onClick: (event) => onClose?.(event, "backdropClick")
|
53
|
+
};
|
54
|
+
}, [heightVariant, onClose, widthVariant]);
|
55
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
56
|
+
StyledDrawerContentPaper,
|
57
|
+
{
|
58
|
+
widthVariant,
|
59
|
+
elevation: 16,
|
60
|
+
onClick: (event) => event.stopPropagation(),
|
61
|
+
sx: { width: widthVariant === "full" ? "100%" : void 0 },
|
62
|
+
children: [
|
63
|
+
title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
|
64
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
|
65
|
+
subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
|
66
|
+
] }) : null,
|
67
|
+
children
|
68
|
+
]
|
69
|
+
}
|
70
|
+
) });
|
71
|
+
};
|
72
|
+
var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
|
73
|
+
maxWidth: "100%",
|
74
|
+
overflowX: "hidden",
|
75
|
+
textOverflow: "ellipsis",
|
76
|
+
whiteSpace: "nowrap"
|
77
|
+
}));
|
78
|
+
var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
|
79
|
+
name: "StyledDrawerContentPaper",
|
80
|
+
shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
|
81
|
+
})(({ theme, widthVariant }) => ({
|
82
|
+
alignItems: "stretch",
|
83
|
+
borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
|
84
|
+
display: "flex",
|
85
|
+
flexDirection: "column",
|
86
|
+
gap: theme.spacing(2),
|
87
|
+
height: "100%",
|
88
|
+
maxWidth: "100%",
|
89
|
+
overflowX: "hidden",
|
90
|
+
padding: theme.spacing(3),
|
91
|
+
[theme.breakpoints.up("lg")]: {
|
92
|
+
width: widthVariant === "full" ? "100%" : "50%"
|
93
|
+
},
|
94
|
+
[theme.breakpoints.up("md")]: {
|
95
|
+
width: widthVariant === "full" ? "100%" : "75%"
|
96
|
+
}
|
97
|
+
}));
|
98
|
+
//# sourceMappingURL=index.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n heightVariant?: 'full' | 'auto'\n subTitle?: string\n title?: string\n widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n children,\n heightVariant = 'full',\n subTitle,\n title,\n onClose,\n widthVariant = 'partial',\n ...props\n}) => {\n const variantBasedProps = useMemo(() => {\n return {\n PaperProps: {\n sx: {\n alignItems: 'center',\n background: 'transparent',\n boxShadow: 'none',\n height: heightVariant === 'full' ? '100%' : 'auto',\n width: widthVariant === 'partial' ? 'auto' : '100%',\n },\n },\n onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n }\n }, [heightVariant, onClose, widthVariant])\n\n return (\n <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n {/* Trap the event to prevent triggering the backdrop onClick */}\n <StyledDrawerContentPaper\n widthVariant={widthVariant}\n elevation={16}\n onClick={(event) => event.stopPropagation()}\n sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n >\n {title || subTitle ?\n <FlexCol alignItems=\"start\" gap={1}>\n {title ?\n <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n : null}\n {subTitle ?\n <Typography variant={'subtitle1'} textTransform=\"none\">\n {subTitle}\n </Typography>\n : null}\n </FlexCol>\n : null}\n {children}\n </StyledDrawerContentPaper>\n </Drawer>\n )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n maxWidth: '100%',\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n name: 'StyledDrawerContentPaper',\n shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n alignItems: 'stretch',\n borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(2),\n height: '100%',\n maxWidth: '100%',\n overflowX: 'hidden',\n padding: theme.spacing(3),\n [theme.breakpoints.up('lg')]: {\n width: widthVariant === 'full' ? '100%' : '50%',\n },\n [theme.breakpoints.up('md')]: {\n width: widthVariant === 'full' ? '100%' : '75%',\n },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAAuD;AA2C7C;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,UAAU,OAAO,eAAe;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,4CAAC,0BAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,6CAAC,gCAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,4CAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,4CAAC,8BAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,+BAA2B,wBAAO,4BAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,+BAA2B,wBAAO,uBAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
|
@@ -0,0 +1,75 @@
|
|
1
|
+
// src/components/Drawer.tsx
|
2
|
+
import { Drawer, Paper, styled, Typography } from "@mui/material";
|
3
|
+
import { FlexCol } from "@xylabs/react-flexbox";
|
4
|
+
import { useMemo } from "react";
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
6
|
+
var DrawerEx = ({
|
7
|
+
children,
|
8
|
+
heightVariant = "full",
|
9
|
+
subTitle,
|
10
|
+
title,
|
11
|
+
onClose,
|
12
|
+
widthVariant = "partial",
|
13
|
+
...props
|
14
|
+
}) => {
|
15
|
+
const variantBasedProps = useMemo(() => {
|
16
|
+
return {
|
17
|
+
PaperProps: {
|
18
|
+
sx: {
|
19
|
+
alignItems: "center",
|
20
|
+
background: "transparent",
|
21
|
+
boxShadow: "none",
|
22
|
+
height: heightVariant === "full" ? "100%" : "auto",
|
23
|
+
width: widthVariant === "partial" ? "auto" : "100%"
|
24
|
+
}
|
25
|
+
},
|
26
|
+
onClick: (event) => onClose?.(event, "backdropClick")
|
27
|
+
};
|
28
|
+
}, [heightVariant, onClose, widthVariant]);
|
29
|
+
return /* @__PURE__ */ jsx(Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ jsxs(
|
30
|
+
StyledDrawerContentPaper,
|
31
|
+
{
|
32
|
+
widthVariant,
|
33
|
+
elevation: 16,
|
34
|
+
onClick: (event) => event.stopPropagation(),
|
35
|
+
sx: { width: widthVariant === "full" ? "100%" : void 0 },
|
36
|
+
children: [
|
37
|
+
title || subTitle ? /* @__PURE__ */ jsxs(FlexCol, { alignItems: "start", gap: 1, children: [
|
38
|
+
title ? /* @__PURE__ */ jsx(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
|
39
|
+
subTitle ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
|
40
|
+
] }) : null,
|
41
|
+
children
|
42
|
+
]
|
43
|
+
}
|
44
|
+
) });
|
45
|
+
};
|
46
|
+
var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
|
47
|
+
maxWidth: "100%",
|
48
|
+
overflowX: "hidden",
|
49
|
+
textOverflow: "ellipsis",
|
50
|
+
whiteSpace: "nowrap"
|
51
|
+
}));
|
52
|
+
var StyledDrawerContentPaper = styled(Paper, {
|
53
|
+
name: "StyledDrawerContentPaper",
|
54
|
+
shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
|
55
|
+
})(({ theme, widthVariant }) => ({
|
56
|
+
alignItems: "stretch",
|
57
|
+
borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
|
58
|
+
display: "flex",
|
59
|
+
flexDirection: "column",
|
60
|
+
gap: theme.spacing(2),
|
61
|
+
height: "100%",
|
62
|
+
maxWidth: "100%",
|
63
|
+
overflowX: "hidden",
|
64
|
+
padding: theme.spacing(3),
|
65
|
+
[theme.breakpoints.up("lg")]: {
|
66
|
+
width: widthVariant === "full" ? "100%" : "50%"
|
67
|
+
},
|
68
|
+
[theme.breakpoints.up("md")]: {
|
69
|
+
width: widthVariant === "full" ? "100%" : "75%"
|
70
|
+
}
|
71
|
+
}));
|
72
|
+
export {
|
73
|
+
DrawerEx
|
74
|
+
};
|
75
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n heightVariant?: 'full' | 'auto'\n subTitle?: string\n title?: string\n widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n children,\n heightVariant = 'full',\n subTitle,\n title,\n onClose,\n widthVariant = 'partial',\n ...props\n}) => {\n const variantBasedProps = useMemo(() => {\n return {\n PaperProps: {\n sx: {\n alignItems: 'center',\n background: 'transparent',\n boxShadow: 'none',\n height: heightVariant === 'full' ? '100%' : 'auto',\n width: widthVariant === 'partial' ? 'auto' : '100%',\n },\n },\n onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n }\n }, [heightVariant, onClose, widthVariant])\n\n return (\n <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n {/* Trap the event to prevent triggering the backdrop onClick */}\n <StyledDrawerContentPaper\n widthVariant={widthVariant}\n elevation={16}\n onClick={(event) => event.stopPropagation()}\n sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n >\n {title || subTitle ?\n <FlexCol alignItems=\"start\" gap={1}>\n {title ?\n <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n : null}\n {subTitle ?\n <Typography variant={'subtitle1'} textTransform=\"none\">\n {subTitle}\n </Typography>\n : null}\n </FlexCol>\n : null}\n {children}\n </StyledDrawerContentPaper>\n </Drawer>\n )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n maxWidth: '100%',\n overflowX: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n name: 'StyledDrawerContentPaper',\n shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n alignItems: 'stretch',\n borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(2),\n height: '100%',\n maxWidth: '100%',\n overflowX: 'hidden',\n padding: theme.spacing(3),\n [theme.breakpoints.up('lg')]: {\n width: widthVariant === 'full' ? '100%' : '50%',\n },\n [theme.breakpoints.up('md')]: {\n width: widthVariant === 'full' ? '100%' : '75%',\n },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SAEI,KAFJ;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,QAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,UAAU,OAAO,eAAe;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,oBAAC,UAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,2BAA2B,OAAO,YAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,2BAA2B,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}
|
package/package.json
CHANGED
@@ -20,8 +20,8 @@
|
|
20
20
|
},
|
21
21
|
"devDependencies": {
|
22
22
|
"@storybook/react": "^7.6.19",
|
23
|
-
"@xylabs/ts-scripts-yarn3": "^3.
|
24
|
-
"@xylabs/tsconfig-react": "^3.
|
23
|
+
"@xylabs/ts-scripts-yarn3": "^3.10.0",
|
24
|
+
"@xylabs/tsconfig-react": "^3.10.0",
|
25
25
|
"typescript": "^5.4.5"
|
26
26
|
},
|
27
27
|
"description": "Common React library for all XYO projects that use React",
|
@@ -75,6 +75,6 @@
|
|
75
75
|
},
|
76
76
|
"sideEffects": false,
|
77
77
|
"types": "dist/browser/index.d.ts",
|
78
|
-
"version": "2.
|
78
|
+
"version": "2.76.1",
|
79
79
|
"type": "module"
|
80
80
|
}
|