@xyo-network/react-drawer 2.77.2 → 2.78.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. package/dist/browser/index.cjs +97 -1
  2. package/dist/browser/index.cjs.map +1 -1
  3. package/dist/browser/index.js +74 -1
  4. package/dist/browser/index.js.map +1 -1
  5. package/dist/neutral/index.cjs +97 -1
  6. package/dist/neutral/index.cjs.map +1 -1
  7. package/dist/neutral/index.js +74 -1
  8. package/dist/neutral/index.js.map +1 -1
  9. package/dist/node/index.cjs +101 -1
  10. package/dist/node/index.cjs.map +1 -1
  11. package/dist/node/index.js +74 -1
  12. package/dist/node/index.js.map +1 -1
  13. package/package.json +5 -5
package/dist/browser/index.cjs CHANGED
@@ -1,2 +1,98 @@
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%"}}));
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
+ }));
2
98
  //# sourceMappingURL=index.cjs.map
package/dist/browser/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":"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"]}
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":[]}
package/dist/browser/index.js CHANGED
@@ -1,2 +1,75 @@
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};
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
+ };
2
75
  //# sourceMappingURL=index.js.map
package/dist/browser/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":"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"]}
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/dist/neutral/index.cjs CHANGED
@@ -1,2 +1,98 @@
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%"}}));
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
+ }));
2
98
  //# sourceMappingURL=index.cjs.map
package/dist/neutral/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":"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"]}
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":[]}
package/dist/neutral/index.js CHANGED
@@ -1,2 +1,75 @@
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};
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
+ };
2
75
  //# sourceMappingURL=index.js.map
package/dist/neutral/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":"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"]}
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/dist/node/index.cjs CHANGED
@@ -1,2 +1,102 @@
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});
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
+ });
2
102
  //# 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":"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"]}
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,mCAAU,OAAO;AAAA,IACnD;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":[]}
package/dist/node/index.js CHANGED
@@ -1,2 +1,75 @@
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};
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 == 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
+ };
2
75
  //# 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":"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"]}
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,mCAAU,OAAO;AAAA,IACnD;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
@@ -19,10 +19,10 @@
19
19
  "react-dom": "^18"
20
20
  },
21
21
  "devDependencies": {
22
- "@storybook/react": "^7.6.19",
23
- "@xylabs/ts-scripts-yarn3": "^3.11.7",
24
- "@xylabs/tsconfig-react": "^3.11.7",
25
- "typescript": "^5.4.5"
22
+ "@storybook/react": "^7.6.20",
23
+ "@xylabs/ts-scripts-yarn3": "^3.11.12",
24
+ "@xylabs/tsconfig-react": "^3.11.12",
25
+ "typescript": "^5.5.2"
26
26
  },
27
27
  "description": "Common React library for all XYO projects that use React",
28
28
  "docs": "dist/docs.json",
@@ -75,6 +75,6 @@
75
75
  },
76
76
  "sideEffects": false,
77
77
  "types": "dist/browser/index.d.ts",
78
- "version": "2.77.2",
78
+ "version": "2.78.1",
79
79
  "type": "module"
80
80
  }