@xyo-network/react-drawer 2.81.10 → 2.83.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. package/dist/browser/index.d.ts +12 -2
  2. package/dist/browser/index.mjs +82 -0
  3. package/dist/browser/index.mjs.map +1 -0
  4. package/package.json +11 -27
  5. package/src/components/Drawer.stories.tsx +2 -2
  6. package/src/components/Drawer.tsx +20 -16
  7. package/src/components/index.ts +1 -1
  8. package/src/index.ts +1 -1
  9. package/xy.config.ts +12 -0
  10. package/dist/browser/components/Drawer.d.cts +0 -10
  11. package/dist/browser/components/Drawer.d.cts.map +0 -1
  12. package/dist/browser/components/Drawer.d.mts +0 -10
  13. package/dist/browser/components/Drawer.d.mts.map +0 -1
  14. package/dist/browser/components/Drawer.d.ts +0 -10
  15. package/dist/browser/components/Drawer.d.ts.map +0 -1
  16. package/dist/browser/components/index.d.cts +0 -2
  17. package/dist/browser/components/index.d.cts.map +0 -1
  18. package/dist/browser/components/index.d.mts +0 -2
  19. package/dist/browser/components/index.d.mts.map +0 -1
  20. package/dist/browser/components/index.d.ts +0 -2
  21. package/dist/browser/components/index.d.ts.map +0 -1
  22. package/dist/browser/index.cjs +0 -98
  23. package/dist/browser/index.cjs.map +0 -1
  24. package/dist/browser/index.d.cts +0 -2
  25. package/dist/browser/index.d.cts.map +0 -1
  26. package/dist/browser/index.d.mts +0 -2
  27. package/dist/browser/index.d.mts.map +0 -1
  28. package/dist/browser/index.d.ts.map +0 -1
  29. package/dist/browser/index.js +0 -75
  30. package/dist/browser/index.js.map +0 -1
  31. package/dist/neutral/components/Drawer.d.cts +0 -10
  32. package/dist/neutral/components/Drawer.d.cts.map +0 -1
  33. package/dist/neutral/components/Drawer.d.mts +0 -10
  34. package/dist/neutral/components/Drawer.d.mts.map +0 -1
  35. package/dist/neutral/components/Drawer.d.ts +0 -10
  36. package/dist/neutral/components/Drawer.d.ts.map +0 -1
  37. package/dist/neutral/components/index.d.cts +0 -2
  38. package/dist/neutral/components/index.d.cts.map +0 -1
  39. package/dist/neutral/components/index.d.mts +0 -2
  40. package/dist/neutral/components/index.d.mts.map +0 -1
  41. package/dist/neutral/components/index.d.ts +0 -2
  42. package/dist/neutral/components/index.d.ts.map +0 -1
  43. package/dist/neutral/index.cjs +0 -98
  44. package/dist/neutral/index.cjs.map +0 -1
  45. package/dist/neutral/index.d.cts +0 -2
  46. package/dist/neutral/index.d.cts.map +0 -1
  47. package/dist/neutral/index.d.mts +0 -2
  48. package/dist/neutral/index.d.mts.map +0 -1
  49. package/dist/neutral/index.d.ts +0 -2
  50. package/dist/neutral/index.d.ts.map +0 -1
  51. package/dist/neutral/index.js +0 -75
  52. package/dist/neutral/index.js.map +0 -1
  53. package/dist/node/components/Drawer.d.cts +0 -10
  54. package/dist/node/components/Drawer.d.cts.map +0 -1
  55. package/dist/node/components/Drawer.d.mts +0 -10
  56. package/dist/node/components/Drawer.d.mts.map +0 -1
  57. package/dist/node/components/Drawer.d.ts +0 -10
  58. package/dist/node/components/Drawer.d.ts.map +0 -1
  59. package/dist/node/components/index.d.cts +0 -2
  60. package/dist/node/components/index.d.cts.map +0 -1
  61. package/dist/node/components/index.d.mts +0 -2
  62. package/dist/node/components/index.d.mts.map +0 -1
  63. package/dist/node/components/index.d.ts +0 -2
  64. package/dist/node/components/index.d.ts.map +0 -1
  65. package/dist/node/index.cjs +0 -102
  66. package/dist/node/index.cjs.map +0 -1
  67. package/dist/node/index.d.cts +0 -2
  68. package/dist/node/index.d.cts.map +0 -1
  69. package/dist/node/index.d.mts +0 -2
  70. package/dist/node/index.d.mts.map +0 -1
  71. package/dist/node/index.d.ts +0 -2
  72. package/dist/node/index.d.ts.map +0 -1
  73. package/dist/node/index.js +0 -75
  74. package/dist/node/index.js.map +0 -1
@@ -1,2 +0,0 @@
1
- export * from './Drawer.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
@@ -1,98 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- DrawerEx: () => DrawerEx
24
- });
25
- module.exports = __toCommonJS(src_exports);
26
-
27
- // src/components/Drawer.tsx
28
- var import_material = require("@mui/material");
29
- var import_react_flexbox = require("@xylabs/react-flexbox");
30
- var import_react = require("react");
31
- var import_jsx_runtime = require("react/jsx-runtime");
32
- var DrawerEx = ({
33
- children,
34
- heightVariant = "full",
35
- subTitle,
36
- title,
37
- onClose,
38
- widthVariant = "partial",
39
- ...props
40
- }) => {
41
- const variantBasedProps = (0, import_react.useMemo)(() => {
42
- return {
43
- PaperProps: {
44
- sx: {
45
- alignItems: "center",
46
- background: "transparent",
47
- boxShadow: "none",
48
- height: heightVariant === "full" ? "100%" : "auto",
49
- width: widthVariant === "partial" ? "auto" : "100%"
50
- }
51
- },
52
- onClick: (event) => onClose?.(event, "backdropClick")
53
- };
54
- }, [heightVariant, onClose, widthVariant]);
55
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
56
- StyledDrawerContentPaper,
57
- {
58
- widthVariant,
59
- elevation: 16,
60
- onClick: (event) => event.stopPropagation(),
61
- sx: { width: widthVariant === "full" ? "100%" : void 0 },
62
- children: [
63
- title || subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_flexbox.FlexCol, { alignItems: "start", gap: 1, children: [
64
- title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
65
- subTitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
66
- ] }) : null,
67
- children
68
- ]
69
- }
70
- ) });
71
- };
72
- var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, { name: "StyledEllipsisTypography" })(() => ({
73
- maxWidth: "100%",
74
- overflowX: "hidden",
75
- textOverflow: "ellipsis",
76
- whiteSpace: "nowrap"
77
- }));
78
- var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
79
- name: "StyledDrawerContentPaper",
80
- shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
81
- })(({ theme, widthVariant }) => ({
82
- alignItems: "stretch",
83
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
84
- display: "flex",
85
- flexDirection: "column",
86
- gap: theme.spacing(2),
87
- height: "100%",
88
- maxWidth: "100%",
89
- overflowX: "hidden",
90
- padding: theme.spacing(3),
91
- [theme.breakpoints.up("lg")]: {
92
- width: widthVariant === "full" ? "100%" : "50%"
93
- },
94
- [theme.breakpoints.up("md")]: {
95
- width: widthVariant === "full" ? "100%" : "75%"
96
- }
97
- }));
98
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components/index.js'\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":[]}
@@ -1,2 +0,0 @@
1
- export * from './components/index.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './components/index.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './components/index.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,75 +0,0 @@
1
- // src/components/Drawer.tsx
2
- import { Drawer, Paper, styled, Typography } from "@mui/material";
3
- import { FlexCol } from "@xylabs/react-flexbox";
4
- import { useMemo } from "react";
5
- import { jsx, jsxs } from "react/jsx-runtime";
6
- var DrawerEx = ({
7
- children,
8
- heightVariant = "full",
9
- subTitle,
10
- title,
11
- onClose,
12
- widthVariant = "partial",
13
- ...props
14
- }) => {
15
- const variantBasedProps = useMemo(() => {
16
- return {
17
- PaperProps: {
18
- sx: {
19
- alignItems: "center",
20
- background: "transparent",
21
- boxShadow: "none",
22
- height: heightVariant === "full" ? "100%" : "auto",
23
- width: widthVariant === "partial" ? "auto" : "100%"
24
- }
25
- },
26
- onClick: (event) => onClose?.(event, "backdropClick")
27
- };
28
- }, [heightVariant, onClose, widthVariant]);
29
- return /* @__PURE__ */ jsx(Drawer, { anchor: "top", onClose, ...variantBasedProps, ...props, children: /* @__PURE__ */ jsxs(
30
- StyledDrawerContentPaper,
31
- {
32
- widthVariant,
33
- elevation: 16,
34
- onClick: (event) => event.stopPropagation(),
35
- sx: { width: widthVariant === "full" ? "100%" : void 0 },
36
- children: [
37
- title || subTitle ? /* @__PURE__ */ jsxs(FlexCol, { alignItems: "start", gap: 1, children: [
38
- title ? /* @__PURE__ */ jsx(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
39
- subTitle ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", textTransform: "none", children: subTitle }) : null
40
- ] }) : null,
41
- children
42
- ]
43
- }
44
- ) });
45
- };
46
- var StyledEllipsisTypography = styled(Typography, { name: "StyledEllipsisTypography" })(() => ({
47
- maxWidth: "100%",
48
- overflowX: "hidden",
49
- textOverflow: "ellipsis",
50
- whiteSpace: "nowrap"
51
- }));
52
- var StyledDrawerContentPaper = styled(Paper, {
53
- name: "StyledDrawerContentPaper",
54
- shouldForwardProp: (prop) => !["widthVariant"].includes(prop)
55
- })(({ theme, widthVariant }) => ({
56
- alignItems: "stretch",
57
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
58
- display: "flex",
59
- flexDirection: "column",
60
- gap: theme.spacing(2),
61
- height: "100%",
62
- maxWidth: "100%",
63
- overflowX: "hidden",
64
- padding: theme.spacing(3),
65
- [theme.breakpoints.up("lg")]: {
66
- width: widthVariant === "full" ? "100%" : "50%"
67
- },
68
- [theme.breakpoints.up("md")]: {
69
- width: widthVariant === "full" ? "100%" : "75%"
70
- }
71
- }));
72
- export {
73
- DrawerEx
74
- };
75
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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":[]}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import { PropsWithChildren } from 'react';
3
- export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
4
- heightVariant?: 'full' | 'auto';
5
- subTitle?: string;
6
- title?: string;
7
- widthVariant?: 'full' | 'partial';
8
- }
9
- export declare const DrawerEx: React.FC<DrawerExProps>;
10
- //# sourceMappingURL=Drawer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import { PropsWithChildren } from 'react';
3
- export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
4
- heightVariant?: 'full' | 'auto';
5
- subTitle?: string;
6
- title?: string;
7
- widthVariant?: 'full' | 'partial';
8
- }
9
- export declare const DrawerEx: React.FC<DrawerExProps>;
10
- //# sourceMappingURL=Drawer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import { PropsWithChildren } from 'react';
3
- export interface DrawerExProps extends PropsWithChildren<DrawerProps> {
4
- heightVariant?: 'full' | 'auto';
5
- subTitle?: string;
6
- title?: string;
7
- widthVariant?: 'full' | 'partial';
8
- }
9
- export declare const DrawerEx: React.FC<DrawerExProps>;
10
- //# sourceMappingURL=Drawer.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAA6B,MAAM,eAAe,CAAA;AAE9E,OAAO,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAE9D,MAAM,WAAW,aAAc,SAAQ,iBAAiB,CAAC,WAAW,CAAC;IACnE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAClC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiD5C,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}
@@ -1,102 +0,0 @@
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
- });
102
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components/index.js'\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":[]}
@@ -1,2 +0,0 @@
1
- export * from './components/index.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './components/index.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './components/index.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,75 +0,0 @@
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
- };
75
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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":[]}