@xyo-network/react-drawer 2.77.0 → 2.77.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/browser/index.cjs +1 -97
- package/dist/browser/index.cjs.map +1 -1
- package/dist/browser/index.js +1 -74
- package/dist/browser/index.js.map +1 -1
- package/dist/neutral/index.cjs +1 -97
- package/dist/neutral/index.cjs.map +1 -1
- package/dist/neutral/index.js +1 -74
- package/dist/neutral/index.js.map +1 -1
- package/dist/node/index.cjs +1 -101
- package/dist/node/index.cjs.map +1 -1
- package/dist/node/index.js +1 -74
- package/dist/node/index.js.map +1 -1
- package/package.json +3 -3
package/dist/browser/index.cjs
CHANGED
|
@@ -1,98 +1,2 @@
|
|
|
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
|
-
}));
|
|
1
|
+
"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,a)=>{for(var t in a)s(r,t,{get:a[t],enumerable:!0})},y=(r,a,t,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of x(a))!c.call(r,o)&&o!==t&&s(r,o,{get:()=>a[o],enumerable:!(p=w(a,o))||p.enumerable});return r};var P=r=>y(s({},"__esModule",{value:!0}),r);var v={};f(v,{DrawerEx:()=>m});module.exports=P(v);var e=require("@mui/material"),d=require("@xylabs/react-flexbox"),u=require("react"),l=require("react/jsx-runtime"),m=({children:r,heightVariant:a="full",subTitle:t,title:p,onClose:o,widthVariant:n="partial",...h})=>{let g=(0,u.useMemo)(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:n==="partial"?"auto":"100%"}},onClick:i=>o?.(i,"backdropClick")}),[a,o,n]);return(0,l.jsx)(e.Drawer,{anchor:"top",onClose:o,...g,...h,children:(0,l.jsxs)(C,{widthVariant:n,elevation:16,onClick:i=>i.stopPropagation(),sx:{width:n==="full"?"100%":void 0},children:[p||t?(0,l.jsxs)(d.FlexCol,{alignItems:"start",gap:1,children:[p?(0,l.jsx)(D,{variant:"h3",children:p}):null,t?(0,l.jsx)(e.Typography,{variant:"subtitle1",textTransform:"none",children:t}):null]}):null,r]})})},D=(0,e.styled)(e.Typography,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),C=(0,e.styled)(e.Paper,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));
|
|
98
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +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":"
|
|
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":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAA+D,yBAC/DC,EAAwB,iCACxBC,EAAuD,iBA2C7CC,EAAA,6BAlCGC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAoB,WAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQN,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,SACE,OAAC,UAAO,OAAQ,MAAO,QAASD,EAAU,GAAGG,EAAoB,GAAGD,EAElE,oBAACG,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,KACR,QAAC,WAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAC,KACC,OAACO,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,KACC,OAAC,cAAW,QAAS,YAAa,cAAc,OAC7C,SAAAA,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,KAA2B,UAAO,aAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEID,KAA2B,UAAO,QAAO,CAC7C,KAAM,2BACN,kBAAoBE,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["src_exports","__export","DrawerEx","__toCommonJS","import_material","import_react_flexbox","import_react","import_jsx_runtime","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
|
package/dist/browser/index.js
CHANGED
|
@@ -1,75 +1,2 @@
|
|
|
1
|
-
|
|
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
|
-
};
|
|
1
|
+
import{Drawer as g,Paper as w,styled as s,Typography as d}from"@mui/material";import{FlexCol as x}from"@xylabs/react-flexbox";import{useMemo as c}from"react";import{jsx as n,jsxs as i}from"react/jsx-runtime";var b=({children:r,heightVariant:a="full",subTitle:o,title:t,onClose:l,widthVariant:e="partial",...u})=>{let h=c(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:e==="partial"?"auto":"100%"}},onClick:p=>l?.(p,"backdropClick")}),[a,l,e]);return n(g,{anchor:"top",onClose:l,...h,...u,children:i(y,{widthVariant:e,elevation:16,onClick:p=>p.stopPropagation(),sx:{width:e==="full"?"100%":void 0},children:[t||o?i(x,{alignItems:"start",gap:1,children:[t?n(f,{variant:"h3",children:t}):null,o?n(d,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},f=s(d,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),y=s(w,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));export{b as DrawerEx};
|
|
75
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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":"
|
|
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,OAAS,UAAAA,EAAqB,SAAAC,EAAO,UAAAC,EAAQ,cAAAC,MAAkB,gBAC/D,OAAS,WAAAC,MAAe,wBACxB,OAAwC,WAAAC,MAAe,QA2C7C,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAlCH,IAAMC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAoBX,EAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQK,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,OACER,EAACN,EAAA,CAAO,OAAQ,MAAO,QAASa,EAAU,GAAGG,EAAoB,GAAGD,EAElE,SAAAR,EAACW,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,EACRJ,EAACH,EAAA,CAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAQ,EACCN,EAACa,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,EACCL,EAACH,EAAA,CAAW,QAAS,YAAa,cAAc,OAC7C,SAAAQ,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,EAA2BjB,EAAOC,EAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEIe,EAA2BhB,EAAOD,EAAO,CAC7C,KAAM,2BACN,kBAAoBmB,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["Drawer","Paper","styled","Typography","FlexCol","useMemo","jsx","jsxs","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
|
package/dist/neutral/index.cjs
CHANGED
|
@@ -1,98 +1,2 @@
|
|
|
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
|
-
}));
|
|
1
|
+
"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,a)=>{for(var t in a)s(r,t,{get:a[t],enumerable:!0})},y=(r,a,t,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of x(a))!c.call(r,o)&&o!==t&&s(r,o,{get:()=>a[o],enumerable:!(p=w(a,o))||p.enumerable});return r};var P=r=>y(s({},"__esModule",{value:!0}),r);var v={};f(v,{DrawerEx:()=>m});module.exports=P(v);var e=require("@mui/material"),d=require("@xylabs/react-flexbox"),u=require("react"),l=require("react/jsx-runtime"),m=({children:r,heightVariant:a="full",subTitle:t,title:p,onClose:o,widthVariant:n="partial",...h})=>{let g=(0,u.useMemo)(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:n==="partial"?"auto":"100%"}},onClick:i=>o?.(i,"backdropClick")}),[a,o,n]);return(0,l.jsx)(e.Drawer,{anchor:"top",onClose:o,...g,...h,children:(0,l.jsxs)(C,{widthVariant:n,elevation:16,onClick:i=>i.stopPropagation(),sx:{width:n==="full"?"100%":void 0},children:[p||t?(0,l.jsxs)(d.FlexCol,{alignItems:"start",gap:1,children:[p?(0,l.jsx)(D,{variant:"h3",children:p}):null,t?(0,l.jsx)(e.Typography,{variant:"subtitle1",textTransform:"none",children:t}):null]}):null,r]})})},D=(0,e.styled)(e.Typography,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),C=(0,e.styled)(e.Paper,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));
|
|
98
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +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":"
|
|
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":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAA+D,yBAC/DC,EAAwB,iCACxBC,EAAuD,iBA2C7CC,EAAA,6BAlCGC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAoB,WAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQN,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,SACE,OAAC,UAAO,OAAQ,MAAO,QAASD,EAAU,GAAGG,EAAoB,GAAGD,EAElE,oBAACG,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,KACR,QAAC,WAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAC,KACC,OAACO,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,KACC,OAAC,cAAW,QAAS,YAAa,cAAc,OAC7C,SAAAA,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,KAA2B,UAAO,aAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEID,KAA2B,UAAO,QAAO,CAC7C,KAAM,2BACN,kBAAoBE,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["src_exports","__export","DrawerEx","__toCommonJS","import_material","import_react_flexbox","import_react","import_jsx_runtime","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
|
package/dist/neutral/index.js
CHANGED
|
@@ -1,75 +1,2 @@
|
|
|
1
|
-
|
|
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
|
-
};
|
|
1
|
+
import{Drawer as g,Paper as w,styled as s,Typography as d}from"@mui/material";import{FlexCol as x}from"@xylabs/react-flexbox";import{useMemo as c}from"react";import{jsx as n,jsxs as i}from"react/jsx-runtime";var b=({children:r,heightVariant:a="full",subTitle:o,title:t,onClose:l,widthVariant:e="partial",...u})=>{let h=c(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:e==="partial"?"auto":"100%"}},onClick:p=>l?.(p,"backdropClick")}),[a,l,e]);return n(g,{anchor:"top",onClose:l,...h,...u,children:i(y,{widthVariant:e,elevation:16,onClick:p=>p.stopPropagation(),sx:{width:e==="full"?"100%":void 0},children:[t||o?i(x,{alignItems:"start",gap:1,children:[t?n(f,{variant:"h3",children:t}):null,o?n(d,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},f=s(d,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),y=s(w,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));export{b as DrawerEx};
|
|
75
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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":"
|
|
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,OAAS,UAAAA,EAAqB,SAAAC,EAAO,UAAAC,EAAQ,cAAAC,MAAkB,gBAC/D,OAAS,WAAAC,MAAe,wBACxB,OAAwC,WAAAC,MAAe,QA2C7C,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAlCH,IAAMC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAoBX,EAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQK,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,IAAUI,EAAO,eAAe,CAClE,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,OACER,EAACN,EAAA,CAAO,OAAQ,MAAO,QAASa,EAAU,GAAGG,EAAoB,GAAGD,EAElE,SAAAR,EAACW,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,EACRJ,EAACH,EAAA,CAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAQ,EACCN,EAACa,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,EACCL,EAACH,EAAA,CAAW,QAAS,YAAa,cAAc,OAC7C,SAAAQ,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,EAA2BjB,EAAOC,EAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEIe,EAA2BhB,EAAOD,EAAO,CAC7C,KAAM,2BACN,kBAAoBmB,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["Drawer","Paper","styled","Typography","FlexCol","useMemo","jsx","jsxs","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
|
package/dist/node/index.cjs
CHANGED
|
@@ -1,102 +1,2 @@
|
|
|
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 == null ? void 0 : 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
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
99
|
-
0 && (module.exports = {
|
|
100
|
-
DrawerEx
|
|
101
|
-
});
|
|
1
|
+
"use strict";var s=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(r,a)=>{for(var o in a)s(r,o,{get:a[o],enumerable:!0})},y=(r,a,o,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let e of x(a))!c.call(r,e)&&e!==o&&s(r,e,{get:()=>a[e],enumerable:!(l=w(a,e))||l.enumerable});return r};var P=r=>y(s({},"__esModule",{value:!0}),r);var E={};f(E,{DrawerEx:()=>m});module.exports=P(E);var t=require("@mui/material"),d=require("@xylabs/react-flexbox"),u=require("react"),p=require("react/jsx-runtime"),m=({children:r,heightVariant:a="full",subTitle:o,title:l,onClose:e,widthVariant:i="partial",...h})=>{let g=(0,u.useMemo)(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:i==="partial"?"auto":"100%"}},onClick:n=>e==null?void 0:e(n,"backdropClick")}),[a,e,i]);return(0,p.jsx)(t.Drawer,{anchor:"top",onClose:e,...g,...h,children:(0,p.jsxs)(v,{widthVariant:i,elevation:16,onClick:n=>n.stopPropagation(),sx:{width:i==="full"?"100%":void 0},children:[l||o?(0,p.jsxs)(d.FlexCol,{alignItems:"start",gap:1,children:[l?(0,p.jsx)(D,{variant:"h3",children:l}):null,o?(0,p.jsx)(t.Typography,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},D=(0,t.styled)(t.Typography,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),v=(0,t.styled)(t.Paper,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));0&&(module.exports={DrawerEx});
|
|
102
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/node/index.cjs.map
CHANGED
|
@@ -1 +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":"
|
|
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":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GCAA,IAAAI,EAA+D,yBAC/DC,EAAwB,iCACxBC,EAAuD,iBA2C7CC,EAAA,6BAlCGC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,KAAoB,WAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQN,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,GAAA,YAAAA,EAAUI,EAAO,gBACnD,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,SACE,OAAC,UAAO,OAAQ,MAAO,QAASD,EAAU,GAAGG,EAAoB,GAAGD,EAElE,oBAACG,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,KACR,QAAC,WAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAC,KACC,OAACO,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,KACC,OAAC,cAAW,QAAS,YAAa,cAAc,OAC7C,SAAAA,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,KAA2B,UAAO,aAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEID,KAA2B,UAAO,QAAO,CAC7C,KAAM,2BACN,kBAAoBE,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["src_exports","__export","DrawerEx","__toCommonJS","import_material","import_react_flexbox","import_react","import_jsx_runtime","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
|
package/dist/node/index.js
CHANGED
|
@@ -1,75 +1,2 @@
|
|
|
1
|
-
|
|
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 == null ? void 0 : 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
|
-
};
|
|
1
|
+
import{Drawer as g,Paper as w,styled as s,Typography as d}from"@mui/material";import{FlexCol as x}from"@xylabs/react-flexbox";import{useMemo as c}from"react";import{jsx as i,jsxs as n}from"react/jsx-runtime";var S=({children:r,heightVariant:a="full",subTitle:o,title:p,onClose:e,widthVariant:t="partial",...u})=>{let h=c(()=>({PaperProps:{sx:{alignItems:"center",background:"transparent",boxShadow:"none",height:a==="full"?"100%":"auto",width:t==="partial"?"auto":"100%"}},onClick:l=>e==null?void 0:e(l,"backdropClick")}),[a,e,t]);return i(g,{anchor:"top",onClose:e,...h,...u,children:n(y,{widthVariant:t,elevation:16,onClick:l=>l.stopPropagation(),sx:{width:t==="full"?"100%":void 0},children:[p||o?n(x,{alignItems:"start",gap:1,children:[p?i(f,{variant:"h3",children:p}):null,o?i(d,{variant:"subtitle1",textTransform:"none",children:o}):null]}):null,r]})})},f=s(d,{name:"StyledEllipsisTypography"})(()=>({maxWidth:"100%",overflowX:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),y=s(w,{name:"StyledDrawerContentPaper",shouldForwardProp:r=>!["widthVariant"].includes(r)})(({theme:r,widthVariant:a})=>({alignItems:"stretch",borderRadius:`0 0 ${r.shape.borderRadius}px ${r.shape.borderRadius}px`,display:"flex",flexDirection:"column",gap:r.spacing(2),height:"100%",maxWidth:"100%",overflowX:"hidden",padding:r.spacing(3),[r.breakpoints.up("lg")]:{width:a==="full"?"100%":"50%"},[r.breakpoints.up("md")]:{width:a==="full"?"100%":"75%"}}));export{S as DrawerEx};
|
|
75
2
|
//# sourceMappingURL=index.js.map
|
package/dist/node/index.js.map
CHANGED
|
@@ -1 +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":"
|
|
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,OAAS,UAAAA,EAAqB,SAAAC,EAAO,UAAAC,EAAQ,cAAAC,MAAkB,gBAC/D,OAAS,WAAAC,MAAe,wBACxB,OAAwC,WAAAC,MAAe,QA2C7C,OAEI,OAAAC,EAFJ,QAAAC,MAAA,oBAlCH,IAAMC,EAAoC,CAAC,CAChD,SAAAC,EACA,cAAAC,EAAgB,OAChB,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,aAAAC,EAAe,UACf,GAAGC,CACL,IAAM,CACJ,IAAMC,EAAoBX,EAAQ,KACzB,CACL,WAAY,CACV,GAAI,CACF,WAAY,SACZ,WAAY,cACZ,UAAW,OACX,OAAQK,IAAkB,OAAS,OAAS,OAC5C,MAAOI,IAAiB,UAAY,OAAS,MAC/C,CACF,EACA,QAAUG,GAAsBJ,GAAA,YAAAA,EAAUI,EAAO,gBACnD,GACC,CAACP,EAAeG,EAASC,CAAY,CAAC,EAEzC,OACER,EAACN,EAAA,CAAO,OAAQ,MAAO,QAASa,EAAU,GAAGG,EAAoB,GAAGD,EAElE,SAAAR,EAACW,EAAA,CACC,aAAcJ,EACd,UAAW,GACX,QAAUG,GAAUA,EAAM,gBAAgB,EAC1C,GAAI,CAAE,MAAOH,IAAiB,OAAS,OAAS,MAAU,EAEzD,UAAAF,GAASD,EACRJ,EAACH,EAAA,CAAQ,WAAW,QAAQ,IAAK,EAC9B,UAAAQ,EACCN,EAACa,EAAA,CAAyB,QAAS,KAAO,SAAAP,EAAM,EAChD,KACDD,EACCL,EAACH,EAAA,CAAW,QAAS,YAAa,cAAc,OAC7C,SAAAQ,EACH,EACA,MACJ,EACA,KACDF,GACH,EACF,CAEJ,EAEMU,EAA2BjB,EAAOC,EAAY,CAAE,KAAM,0BAA2B,CAAC,EAAE,KAAO,CAC/F,SAAU,OACV,UAAW,SACX,aAAc,WACd,WAAY,QACd,EAAE,EAEIe,EAA2BhB,EAAOD,EAAO,CAC7C,KAAM,2BACN,kBAAoBmB,GAAS,CAAC,CAAC,cAAc,EAAE,SAASA,CAAc,CACxE,CAAC,EAAiB,CAAC,CAAE,MAAAC,EAAO,aAAAP,CAAa,KAAO,CAC9C,WAAY,UACZ,aAAc,OAAOO,EAAM,MAAM,YAAY,MAAMA,EAAM,MAAM,YAAY,KAC3E,QAAS,OACT,cAAe,SACf,IAAKA,EAAM,QAAQ,CAAC,EACpB,OAAQ,OACR,SAAU,OACV,UAAW,SACX,QAASA,EAAM,QAAQ,CAAC,EACxB,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,EACA,CAACO,EAAM,YAAY,GAAG,IAAI,CAAC,EAAG,CAC5B,MAAOP,IAAiB,OAAS,OAAS,KAC5C,CACF,EAAE","names":["Drawer","Paper","styled","Typography","FlexCol","useMemo","jsx","jsxs","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","event","StyledDrawerContentPaper","StyledEllipsisTypography","prop","theme"]}
|
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.11.
|
|
24
|
-
"@xylabs/tsconfig-react": "^3.11.
|
|
23
|
+
"@xylabs/ts-scripts-yarn3": "^3.11.7",
|
|
24
|
+
"@xylabs/tsconfig-react": "^3.11.7",
|
|
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.77.
|
|
78
|
+
"version": "2.77.1",
|
|
79
79
|
"type": "module"
|
|
80
80
|
}
|