@xyo-network/react-drawer 2.82.0 → 2.83.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. package/dist/browser/index.d.ts +12 -2
  2. package/package.json +7 -23
  3. package/xy.config.ts +12 -0
  4. package/dist/browser/components/Drawer.d.cts +0 -10
  5. package/dist/browser/components/Drawer.d.cts.map +0 -1
  6. package/dist/browser/components/Drawer.d.mts +0 -10
  7. package/dist/browser/components/Drawer.d.mts.map +0 -1
  8. package/dist/browser/components/Drawer.d.ts +0 -10
  9. package/dist/browser/components/Drawer.d.ts.map +0 -1
  10. package/dist/browser/components/index.d.cts +0 -2
  11. package/dist/browser/components/index.d.cts.map +0 -1
  12. package/dist/browser/components/index.d.mts +0 -2
  13. package/dist/browser/components/index.d.mts.map +0 -1
  14. package/dist/browser/components/index.d.ts +0 -2
  15. package/dist/browser/components/index.d.ts.map +0 -1
  16. package/dist/browser/index.cjs +0 -113
  17. package/dist/browser/index.cjs.map +0 -1
  18. package/dist/browser/index.d.cts +0 -2
  19. package/dist/browser/index.d.cts.map +0 -1
  20. package/dist/browser/index.d.mts +0 -2
  21. package/dist/browser/index.d.mts.map +0 -1
  22. package/dist/browser/index.d.ts.map +0 -1
  23. package/dist/neutral/components/Drawer.d.cts +0 -10
  24. package/dist/neutral/components/Drawer.d.cts.map +0 -1
  25. package/dist/neutral/components/Drawer.d.mts +0 -10
  26. package/dist/neutral/components/Drawer.d.mts.map +0 -1
  27. package/dist/neutral/components/Drawer.d.ts +0 -10
  28. package/dist/neutral/components/Drawer.d.ts.map +0 -1
  29. package/dist/neutral/components/index.d.cts +0 -2
  30. package/dist/neutral/components/index.d.cts.map +0 -1
  31. package/dist/neutral/components/index.d.mts +0 -2
  32. package/dist/neutral/components/index.d.mts.map +0 -1
  33. package/dist/neutral/components/index.d.ts +0 -2
  34. package/dist/neutral/components/index.d.ts.map +0 -1
  35. package/dist/neutral/index.cjs +0 -113
  36. package/dist/neutral/index.cjs.map +0 -1
  37. package/dist/neutral/index.d.cts +0 -2
  38. package/dist/neutral/index.d.cts.map +0 -1
  39. package/dist/neutral/index.d.mts +0 -2
  40. package/dist/neutral/index.d.mts.map +0 -1
  41. package/dist/neutral/index.d.ts +0 -2
  42. package/dist/neutral/index.d.ts.map +0 -1
  43. package/dist/neutral/index.mjs +0 -82
  44. package/dist/neutral/index.mjs.map +0 -1
  45. package/dist/node/components/Drawer.d.cts +0 -10
  46. package/dist/node/components/Drawer.d.cts.map +0 -1
  47. package/dist/node/components/Drawer.d.mts +0 -10
  48. package/dist/node/components/Drawer.d.mts.map +0 -1
  49. package/dist/node/components/Drawer.d.ts +0 -10
  50. package/dist/node/components/Drawer.d.ts.map +0 -1
  51. package/dist/node/components/index.d.cts +0 -2
  52. package/dist/node/components/index.d.cts.map +0 -1
  53. package/dist/node/components/index.d.mts +0 -2
  54. package/dist/node/components/index.d.mts.map +0 -1
  55. package/dist/node/components/index.d.ts +0 -2
  56. package/dist/node/components/index.d.ts.map +0 -1
  57. package/dist/node/index.cjs +0 -117
  58. package/dist/node/index.cjs.map +0 -1
  59. package/dist/node/index.d.cts +0 -2
  60. package/dist/node/index.d.cts.map +0 -1
  61. package/dist/node/index.d.mts +0 -2
  62. package/dist/node/index.d.mts.map +0 -1
  63. package/dist/node/index.d.ts +0 -2
  64. package/dist/node/index.d.ts.map +0 -1
  65. package/dist/node/index.mjs +0 -82
  66. package/dist/node/index.mjs.map +0 -1
@@ -1,2 +1,12 @@
1
- export * from './components/index.ts';
2
- //# sourceMappingURL=index.d.ts.map
1
+ import { DrawerProps } from '@mui/material';
2
+ import React, { PropsWithChildren } from 'react';
3
+
4
+ interface DrawerExProps extends PropsWithChildren<DrawerProps> {
5
+ heightVariant?: 'full' | 'auto';
6
+ subTitle?: string;
7
+ title?: string;
8
+ widthVariant?: 'full' | 'partial';
9
+ }
10
+ declare const DrawerEx: React.FC<DrawerExProps>;
11
+
12
+ export { DrawerEx, type DrawerExProps };
package/package.json CHANGED
@@ -20,39 +20,23 @@
20
20
  },
21
21
  "devDependencies": {
22
22
  "@storybook/react": "^8.2.7",
23
- "@xylabs/ts-scripts-yarn3": "^3.15.16",
24
- "@xylabs/tsconfig-react": "^3.15.16",
23
+ "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.7",
24
+ "@xylabs/tsconfig-react": "^4.0.0-rc.7",
25
25
  "typescript": "^5.5.4"
26
26
  },
27
27
  "description": "Common React library for all XYO projects that use React",
28
28
  "docs": "dist/docs.json",
29
29
  "exports": {
30
30
  ".": {
31
- "node": {
32
- "import": {
33
- "types": "./dist/node/index.d.mts",
34
- "default": "./dist/node/index.mjs"
35
- },
36
- "require": {
37
- "types": "./dist/node/index.d.cts",
38
- "default": "./dist/node/index.cjs"
39
- }
40
- },
41
- "browser": {
42
- "import": {
43
- "types": "./dist/browser/index.d.mts",
44
- "default": "./dist/browser/index.mjs"
45
- },
46
- "require": {
47
- "types": "./dist/browser/index.d.cts",
48
- "default": "./dist/browser/index.cjs"
49
- }
31
+ "import": {
32
+ "types": "./dist/browser/index.d.ts",
33
+ "default": "./dist/browser/index.mjs"
50
34
  },
35
+ "types": "./dist/browser/index.d.ts",
51
36
  "default": "./dist/browser/index.mjs"
52
37
  },
53
38
  "./package.json": "./package.json"
54
39
  },
55
- "main": "dist/browser/index.cjs",
56
40
  "module": "dist/browser/index.mjs",
57
41
  "homepage": "https://xyo.network",
58
42
  "keywords": [
@@ -75,6 +59,6 @@
75
59
  },
76
60
  "sideEffects": false,
77
61
  "types": "dist/browser/index.d.ts",
78
- "version": "2.82.0",
62
+ "version": "2.83.0",
79
63
  "type": "module"
80
64
  }
package/xy.config.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
2
+ const config: XyTsupConfig = {
3
+ compile: {
4
+ browser: {
5
+ src: true,
6
+ },
7
+ node: {},
8
+ neutral: {},
9
+ },
10
+ }
11
+
12
+ export default config
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,113 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
9
- var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
- }
19
- return to;
20
- };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
-
31
- // src/index.ts
32
- var src_exports = {};
33
- __export(src_exports, {
34
- DrawerEx: () => DrawerEx
35
- });
36
- module.exports = __toCommonJS(src_exports);
37
-
38
- // src/components/Drawer.tsx
39
- var import_material = require("@mui/material");
40
- var import_react_flexbox = require("@xylabs/react-flexbox");
41
- var import_react = __toESM(require("react"), 1);
42
- var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTitle, title, onClose, widthVariant = "partial", ...props }) => {
43
- const variantBasedProps = (0, import_react.useMemo)(() => {
44
- return {
45
- PaperProps: {
46
- sx: {
47
- alignItems: "center",
48
- background: "transparent",
49
- boxShadow: "none",
50
- height: heightVariant === "full" ? "100%" : "auto",
51
- width: widthVariant === "partial" ? "auto" : "100%"
52
- }
53
- },
54
- onClick: /* @__PURE__ */ __name((event) => onClose?.(event, "backdropClick"), "onClick")
55
- };
56
- }, [
57
- heightVariant,
58
- onClose,
59
- widthVariant
60
- ]);
61
- return /* @__PURE__ */ import_react.default.createElement(import_material.Drawer, {
62
- anchor: "top",
63
- onClose,
64
- ...variantBasedProps,
65
- ...props
66
- }, /* @__PURE__ */ import_react.default.createElement(StyledDrawerContentPaper, {
67
- widthVariant,
68
- elevation: 16,
69
- onClick: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onClick"),
70
- sx: {
71
- width: widthVariant === "full" ? "100%" : void 0
72
- }
73
- }, title || subTitle ? /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexCol, {
74
- alignItems: "start",
75
- gap: 1
76
- }, title ? /* @__PURE__ */ import_react.default.createElement(StyledEllipsisTypography, {
77
- variant: "h3"
78
- }, title) : null, subTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, {
79
- variant: "subtitle1",
80
- textTransform: "none"
81
- }, subTitle) : null) : null, children));
82
- }, "DrawerEx");
83
- var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, {
84
- name: "StyledEllipsisTypography"
85
- })(() => ({
86
- maxWidth: "100%",
87
- overflowX: "hidden",
88
- textOverflow: "ellipsis",
89
- whiteSpace: "nowrap"
90
- }));
91
- var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
92
- name: "StyledDrawerContentPaper",
93
- shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
94
- "widthVariant"
95
- ].includes(prop), "shouldForwardProp")
96
- })(({ theme, widthVariant }) => ({
97
- alignItems: "stretch",
98
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
99
- display: "flex",
100
- flexDirection: "column",
101
- gap: theme.spacing(2),
102
- height: "100%",
103
- maxWidth: "100%",
104
- overflowX: "hidden",
105
- padding: theme.spacing(3),
106
- [theme.breakpoints.up("lg")]: {
107
- width: widthVariant === "full" ? "100%" : "50%"
108
- },
109
- [theme.breakpoints.up("md")]: {
110
- width: widthVariant === "full" ? "100%" : "75%"
111
- }
112
- }));
113
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components/index.ts'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React, { 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 ? (\n <FlexCol alignItems=\"start\" gap={1}>\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography variant=\"subtitle1\" textTransform=\"none\">\n {subTitle}\n </Typography>\n )\n : null}\n </FlexCol>\n )\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;;;;;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAA8D;AASvD,IAAMA,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,wBAAoBC,sBAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,UAAUa,OAAO,eAAA,GAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,6BAAAa,QAAA,cAACC,wBAAAA;IAAOC,QAAO;IAAMhB;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,6BAAAY,QAAA,cAACG,0BAAAA;IACChB;IACAiB,WAAW;IACXN,SAASC,wBAAAA,UAASA,MAAMM,gBAAe,GAA9BN;IACTP,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASmB;IAAU;KAEzDrB,SAASD,WAEJ,6BAAAgB,QAAA,cAACO,8BAAAA;IAAQd,YAAW;IAAQe,KAAK;KAC9BvB,QACG,6BAAAe,QAAA,cAACS,0BAAAA;IAAyBC,SAAQ;KAAMzB,KAAAA,IACxC,MACHD,WAEK,6BAAAgB,QAAA,cAACW,4BAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C5B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM2B,+BAA2BI,wBAAOF,4BAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,+BAA2BU,wBAAOM,uBAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOpC,aAAY,OAAQ;EAC9CM,YAAY;EACZ+B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnBhC,QAAQ;EACRmB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BlC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;EACA,CAACoC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BlC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;AACF,EAAA;","names":["DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","React","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}
@@ -1,2 +0,0 @@
1
- export * from './components/index.ts';
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.ts';
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 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,113 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
9
- var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
- }
19
- return to;
20
- };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
-
31
- // src/index.ts
32
- var src_exports = {};
33
- __export(src_exports, {
34
- DrawerEx: () => DrawerEx
35
- });
36
- module.exports = __toCommonJS(src_exports);
37
-
38
- // src/components/Drawer.tsx
39
- var import_material = require("@mui/material");
40
- var import_react_flexbox = require("@xylabs/react-flexbox");
41
- var import_react = __toESM(require("react"), 1);
42
- var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTitle, title, onClose, widthVariant = "partial", ...props }) => {
43
- const variantBasedProps = (0, import_react.useMemo)(() => {
44
- return {
45
- PaperProps: {
46
- sx: {
47
- alignItems: "center",
48
- background: "transparent",
49
- boxShadow: "none",
50
- height: heightVariant === "full" ? "100%" : "auto",
51
- width: widthVariant === "partial" ? "auto" : "100%"
52
- }
53
- },
54
- onClick: /* @__PURE__ */ __name((event) => onClose?.(event, "backdropClick"), "onClick")
55
- };
56
- }, [
57
- heightVariant,
58
- onClose,
59
- widthVariant
60
- ]);
61
- return /* @__PURE__ */ import_react.default.createElement(import_material.Drawer, {
62
- anchor: "top",
63
- onClose,
64
- ...variantBasedProps,
65
- ...props
66
- }, /* @__PURE__ */ import_react.default.createElement(StyledDrawerContentPaper, {
67
- widthVariant,
68
- elevation: 16,
69
- onClick: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onClick"),
70
- sx: {
71
- width: widthVariant === "full" ? "100%" : void 0
72
- }
73
- }, title || subTitle ? /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexCol, {
74
- alignItems: "start",
75
- gap: 1
76
- }, title ? /* @__PURE__ */ import_react.default.createElement(StyledEllipsisTypography, {
77
- variant: "h3"
78
- }, title) : null, subTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, {
79
- variant: "subtitle1",
80
- textTransform: "none"
81
- }, subTitle) : null) : null, children));
82
- }, "DrawerEx");
83
- var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, {
84
- name: "StyledEllipsisTypography"
85
- })(() => ({
86
- maxWidth: "100%",
87
- overflowX: "hidden",
88
- textOverflow: "ellipsis",
89
- whiteSpace: "nowrap"
90
- }));
91
- var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
92
- name: "StyledDrawerContentPaper",
93
- shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
94
- "widthVariant"
95
- ].includes(prop), "shouldForwardProp")
96
- })(({ theme, widthVariant }) => ({
97
- alignItems: "stretch",
98
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
99
- display: "flex",
100
- flexDirection: "column",
101
- gap: theme.spacing(2),
102
- height: "100%",
103
- maxWidth: "100%",
104
- overflowX: "hidden",
105
- padding: theme.spacing(3),
106
- [theme.breakpoints.up("lg")]: {
107
- width: widthVariant === "full" ? "100%" : "50%"
108
- },
109
- [theme.breakpoints.up("md")]: {
110
- width: widthVariant === "full" ? "100%" : "75%"
111
- }
112
- }));
113
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components/index.ts'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React, { 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 ? (\n <FlexCol alignItems=\"start\" gap={1}>\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography variant=\"subtitle1\" textTransform=\"none\">\n {subTitle}\n </Typography>\n )\n : null}\n </FlexCol>\n )\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;;;;;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAA8D;AASvD,IAAMA,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,wBAAoBC,sBAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,UAAUa,OAAO,eAAA,GAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,6BAAAa,QAAA,cAACC,wBAAAA;IAAOC,QAAO;IAAMhB;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,6BAAAY,QAAA,cAACG,0BAAAA;IACChB;IACAiB,WAAW;IACXN,SAASC,wBAAAA,UAASA,MAAMM,gBAAe,GAA9BN;IACTP,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASmB;IAAU;KAEzDrB,SAASD,WAEJ,6BAAAgB,QAAA,cAACO,8BAAAA;IAAQd,YAAW;IAAQe,KAAK;KAC9BvB,QACG,6BAAAe,QAAA,cAACS,0BAAAA;IAAyBC,SAAQ;KAAMzB,KAAAA,IACxC,MACHD,WAEK,6BAAAgB,QAAA,cAACW,4BAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C5B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM2B,+BAA2BI,wBAAOF,4BAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,+BAA2BU,wBAAOM,uBAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOpC,aAAY,OAAQ;EAC9CM,YAAY;EACZ+B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnBhC,QAAQ;EACRmB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BlC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;EACA,CAACoC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BlC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;AACF,EAAA;","names":["DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","React","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}
@@ -1,2 +0,0 @@
1
- export * from './components/index.ts';
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.ts';
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.ts';
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,82 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
-
4
- // src/components/Drawer.tsx
5
- import { Drawer, Paper, styled, Typography } from "@mui/material";
6
- import { FlexCol } from "@xylabs/react-flexbox";
7
- import React, { useMemo } from "react";
8
- var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTitle, title, onClose, widthVariant = "partial", ...props }) => {
9
- const variantBasedProps = useMemo(() => {
10
- return {
11
- PaperProps: {
12
- sx: {
13
- alignItems: "center",
14
- background: "transparent",
15
- boxShadow: "none",
16
- height: heightVariant === "full" ? "100%" : "auto",
17
- width: widthVariant === "partial" ? "auto" : "100%"
18
- }
19
- },
20
- onClick: /* @__PURE__ */ __name((event) => onClose?.(event, "backdropClick"), "onClick")
21
- };
22
- }, [
23
- heightVariant,
24
- onClose,
25
- widthVariant
26
- ]);
27
- return /* @__PURE__ */ React.createElement(Drawer, {
28
- anchor: "top",
29
- onClose,
30
- ...variantBasedProps,
31
- ...props
32
- }, /* @__PURE__ */ React.createElement(StyledDrawerContentPaper, {
33
- widthVariant,
34
- elevation: 16,
35
- onClick: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onClick"),
36
- sx: {
37
- width: widthVariant === "full" ? "100%" : void 0
38
- }
39
- }, title || subTitle ? /* @__PURE__ */ React.createElement(FlexCol, {
40
- alignItems: "start",
41
- gap: 1
42
- }, title ? /* @__PURE__ */ React.createElement(StyledEllipsisTypography, {
43
- variant: "h3"
44
- }, title) : null, subTitle ? /* @__PURE__ */ React.createElement(Typography, {
45
- variant: "subtitle1",
46
- textTransform: "none"
47
- }, subTitle) : null) : null, children));
48
- }, "DrawerEx");
49
- var StyledEllipsisTypography = styled(Typography, {
50
- name: "StyledEllipsisTypography"
51
- })(() => ({
52
- maxWidth: "100%",
53
- overflowX: "hidden",
54
- textOverflow: "ellipsis",
55
- whiteSpace: "nowrap"
56
- }));
57
- var StyledDrawerContentPaper = styled(Paper, {
58
- name: "StyledDrawerContentPaper",
59
- shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
60
- "widthVariant"
61
- ].includes(prop), "shouldForwardProp")
62
- })(({ theme, widthVariant }) => ({
63
- alignItems: "stretch",
64
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
65
- display: "flex",
66
- flexDirection: "column",
67
- gap: theme.spacing(2),
68
- height: "100%",
69
- maxWidth: "100%",
70
- overflowX: "hidden",
71
- padding: theme.spacing(3),
72
- [theme.breakpoints.up("lg")]: {
73
- width: widthVariant === "full" ? "100%" : "50%"
74
- },
75
- [theme.breakpoints.up("md")]: {
76
- width: widthVariant === "full" ? "100%" : "75%"
77
- }
78
- }));
79
- export {
80
- DrawerEx
81
- };
82
- //# sourceMappingURL=index.mjs.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 React, { 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 ? (\n <FlexCol alignItems=\"start\" gap={1}>\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography variant=\"subtitle1\" textTransform=\"none\">\n {subTitle}\n </Typography>\n )\n : null}\n </FlexCol>\n )\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,SAASA,QAAqBC,OAAOC,QAAQC,kBAAkB;AAC/D,SAASC,eAAe;AACxB,OAAOC,SAAwCC,eAAe;AASvD,IAAMC,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,oBAAoBC,QAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,UAAUa,OAAO,eAAA,GAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,sBAAA,cAACa,QAAAA;IAAOC,QAAO;IAAMf;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,sBAAA,cAACc,0BAAAA;IACCf;IACAgB,WAAW;IACXL,SAASC,wBAAAA,UAASA,MAAMK,gBAAe,GAA9BL;IACTP,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASkB;IAAU;KAEzDpB,SAASD,WAEJ,sBAAA,cAACsB,SAAAA;IAAQb,YAAW;IAAQc,KAAK;KAC9BtB,QACG,sBAAA,cAACuB,0BAAAA;IAAyBC,SAAQ;KAAMxB,KAAAA,IACxC,MACHD,WAEK,sBAAA,cAAC0B,YAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C3B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM0B,2BAA2BI,OAAOF,YAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,2BAA2BU,OAAOM,OAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOnC,aAAY,OAAQ;EAC9CM,YAAY;EACZ8B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnB/B,QAAQ;EACRkB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BjC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;EACA,CAACmC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BjC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;AACF,EAAA;","names":["Drawer","Paper","styled","Typography","FlexCol","React","useMemo","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,10 +0,0 @@
1
- import { DrawerProps } from '@mui/material';
2
- import React, { 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,KAAK,EAAE,EAAc,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAErE,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,CAqD5C,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,2 +0,0 @@
1
- export * from './Drawer.tsx';
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,cAAc,CAAA"}
@@ -1,117 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
9
- var __export = (target, all) => {
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from))
16
- if (!__hasOwnProp.call(to, key) && key !== except)
17
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
18
- }
19
- return to;
20
- };
21
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
- // If the importer is in node compatibility mode or this is not an ESM
23
- // file that has been converted to a CommonJS file using a Babel-
24
- // compatible transform (i.e. "__esModule" has not been set), then set
25
- // "default" to the CommonJS "module.exports" for node compatibility.
26
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
- mod
28
- ));
29
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
-
31
- // src/index.ts
32
- var src_exports = {};
33
- __export(src_exports, {
34
- DrawerEx: () => DrawerEx
35
- });
36
- module.exports = __toCommonJS(src_exports);
37
-
38
- // src/components/Drawer.tsx
39
- var import_material = require("@mui/material");
40
- var import_react_flexbox = require("@xylabs/react-flexbox");
41
- var import_react = __toESM(require("react"), 1);
42
- var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTitle, title, onClose, widthVariant = "partial", ...props }) => {
43
- const variantBasedProps = (0, import_react.useMemo)(() => {
44
- return {
45
- PaperProps: {
46
- sx: {
47
- alignItems: "center",
48
- background: "transparent",
49
- boxShadow: "none",
50
- height: heightVariant === "full" ? "100%" : "auto",
51
- width: widthVariant === "partial" ? "auto" : "100%"
52
- }
53
- },
54
- onClick: /* @__PURE__ */ __name((event) => onClose == null ? void 0 : onClose(event, "backdropClick"), "onClick")
55
- };
56
- }, [
57
- heightVariant,
58
- onClose,
59
- widthVariant
60
- ]);
61
- return /* @__PURE__ */ import_react.default.createElement(import_material.Drawer, {
62
- anchor: "top",
63
- onClose,
64
- ...variantBasedProps,
65
- ...props
66
- }, /* @__PURE__ */ import_react.default.createElement(StyledDrawerContentPaper, {
67
- widthVariant,
68
- elevation: 16,
69
- onClick: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onClick"),
70
- sx: {
71
- width: widthVariant === "full" ? "100%" : void 0
72
- }
73
- }, title || subTitle ? /* @__PURE__ */ import_react.default.createElement(import_react_flexbox.FlexCol, {
74
- alignItems: "start",
75
- gap: 1
76
- }, title ? /* @__PURE__ */ import_react.default.createElement(StyledEllipsisTypography, {
77
- variant: "h3"
78
- }, title) : null, subTitle ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, {
79
- variant: "subtitle1",
80
- textTransform: "none"
81
- }, subTitle) : null) : null, children));
82
- }, "DrawerEx");
83
- var StyledEllipsisTypography = (0, import_material.styled)(import_material.Typography, {
84
- name: "StyledEllipsisTypography"
85
- })(() => ({
86
- maxWidth: "100%",
87
- overflowX: "hidden",
88
- textOverflow: "ellipsis",
89
- whiteSpace: "nowrap"
90
- }));
91
- var StyledDrawerContentPaper = (0, import_material.styled)(import_material.Paper, {
92
- name: "StyledDrawerContentPaper",
93
- shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
94
- "widthVariant"
95
- ].includes(prop), "shouldForwardProp")
96
- })(({ theme, widthVariant }) => ({
97
- alignItems: "stretch",
98
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
99
- display: "flex",
100
- flexDirection: "column",
101
- gap: theme.spacing(2),
102
- height: "100%",
103
- maxWidth: "100%",
104
- overflowX: "hidden",
105
- padding: theme.spacing(3),
106
- [theme.breakpoints.up("lg")]: {
107
- width: widthVariant === "full" ? "100%" : "50%"
108
- },
109
- [theme.breakpoints.up("md")]: {
110
- width: widthVariant === "full" ? "100%" : "75%"
111
- }
112
- }));
113
- // Annotate the CommonJS export names for ESM import in node:
114
- 0 && (module.exports = {
115
- DrawerEx
116
- });
117
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components/index.ts'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport React, { 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 ? (\n <FlexCol alignItems=\"start\" gap={1}>\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography variant=\"subtitle1\" textTransform=\"none\">\n {subTitle}\n </Typography>\n )\n : null}\n </FlexCol>\n )\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;;;;;;;ACAA,sBAA+D;AAC/D,2BAAwB;AACxB,mBAA8D;AASvD,IAAMA,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,wBAAoBC,sBAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,mCAAUa,OAAO,kBAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,6BAAAa,QAAA,cAACC,wBAAAA;IAAOC,QAAO;IAAMhB;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,6BAAAY,QAAA,cAACG,0BAAAA;IACChB;IACAiB,WAAW;IACXN,SAASC,wBAAAA,UAASA,MAAMM,gBAAe,GAA9BN;IACTP,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASmB;IAAU;KAEzDrB,SAASD,WAEJ,6BAAAgB,QAAA,cAACO,8BAAAA;IAAQd,YAAW;IAAQe,KAAK;KAC9BvB,QACG,6BAAAe,QAAA,cAACS,0BAAAA;IAAyBC,SAAQ;KAAMzB,KAAAA,IACxC,MACHD,WAEK,6BAAAgB,QAAA,cAACW,4BAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C5B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM2B,+BAA2BI,wBAAOF,4BAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,+BAA2BU,wBAAOM,uBAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOpC,aAAY,OAAQ;EAC9CM,YAAY;EACZ+B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnBhC,QAAQ;EACRmB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BlC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;EACA,CAACoC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BlC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;AACF,EAAA;","names":["DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","React","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}
@@ -1,2 +0,0 @@
1
- export * from './components/index.ts';
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.ts';
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.ts';
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,82 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
-
4
- // src/components/Drawer.tsx
5
- import { Drawer, Paper, styled, Typography } from "@mui/material";
6
- import { FlexCol } from "@xylabs/react-flexbox";
7
- import React, { useMemo } from "react";
8
- var DrawerEx = /* @__PURE__ */ __name(({ children, heightVariant = "full", subTitle, title, onClose, widthVariant = "partial", ...props }) => {
9
- const variantBasedProps = useMemo(() => {
10
- return {
11
- PaperProps: {
12
- sx: {
13
- alignItems: "center",
14
- background: "transparent",
15
- boxShadow: "none",
16
- height: heightVariant === "full" ? "100%" : "auto",
17
- width: widthVariant === "partial" ? "auto" : "100%"
18
- }
19
- },
20
- onClick: /* @__PURE__ */ __name((event) => onClose == null ? void 0 : onClose(event, "backdropClick"), "onClick")
21
- };
22
- }, [
23
- heightVariant,
24
- onClose,
25
- widthVariant
26
- ]);
27
- return /* @__PURE__ */ React.createElement(Drawer, {
28
- anchor: "top",
29
- onClose,
30
- ...variantBasedProps,
31
- ...props
32
- }, /* @__PURE__ */ React.createElement(StyledDrawerContentPaper, {
33
- widthVariant,
34
- elevation: 16,
35
- onClick: /* @__PURE__ */ __name((event) => event.stopPropagation(), "onClick"),
36
- sx: {
37
- width: widthVariant === "full" ? "100%" : void 0
38
- }
39
- }, title || subTitle ? /* @__PURE__ */ React.createElement(FlexCol, {
40
- alignItems: "start",
41
- gap: 1
42
- }, title ? /* @__PURE__ */ React.createElement(StyledEllipsisTypography, {
43
- variant: "h3"
44
- }, title) : null, subTitle ? /* @__PURE__ */ React.createElement(Typography, {
45
- variant: "subtitle1",
46
- textTransform: "none"
47
- }, subTitle) : null) : null, children));
48
- }, "DrawerEx");
49
- var StyledEllipsisTypography = styled(Typography, {
50
- name: "StyledEllipsisTypography"
51
- })(() => ({
52
- maxWidth: "100%",
53
- overflowX: "hidden",
54
- textOverflow: "ellipsis",
55
- whiteSpace: "nowrap"
56
- }));
57
- var StyledDrawerContentPaper = styled(Paper, {
58
- name: "StyledDrawerContentPaper",
59
- shouldForwardProp: /* @__PURE__ */ __name((prop) => ![
60
- "widthVariant"
61
- ].includes(prop), "shouldForwardProp")
62
- })(({ theme, widthVariant }) => ({
63
- alignItems: "stretch",
64
- borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,
65
- display: "flex",
66
- flexDirection: "column",
67
- gap: theme.spacing(2),
68
- height: "100%",
69
- maxWidth: "100%",
70
- overflowX: "hidden",
71
- padding: theme.spacing(3),
72
- [theme.breakpoints.up("lg")]: {
73
- width: widthVariant === "full" ? "100%" : "50%"
74
- },
75
- [theme.breakpoints.up("md")]: {
76
- width: widthVariant === "full" ? "100%" : "75%"
77
- }
78
- }));
79
- export {
80
- DrawerEx
81
- };
82
- //# sourceMappingURL=index.mjs.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 React, { 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 ? (\n <FlexCol alignItems=\"start\" gap={1}>\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography variant=\"subtitle1\" textTransform=\"none\">\n {subTitle}\n </Typography>\n )\n : null}\n </FlexCol>\n )\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,SAASA,QAAqBC,OAAOC,QAAQC,kBAAkB;AAC/D,SAASC,eAAe;AACxB,OAAOC,SAAwCC,eAAe;AASvD,IAAMC,WAAoC,wBAAC,EAChDC,UACAC,gBAAgB,QAChBC,UACAC,OACAC,SACAC,eAAe,WACf,GAAGC,MAAAA,MACJ;AACC,QAAMC,oBAAoBC,QAAQ,MAAA;AAChC,WAAO;MACLC,YAAY;QACVC,IAAI;UACFC,YAAY;UACZC,YAAY;UACZC,WAAW;UACXC,QAAQb,kBAAkB,SAAS,SAAS;UAC5Cc,OAAOV,iBAAiB,YAAY,SAAS;QAC/C;MACF;MACAW,SAAS,wBAACC,UAAsBb,mCAAUa,OAAO,kBAAxC;IACX;EACF,GAAG;IAAChB;IAAeG;IAASC;GAAa;AAEzC,SACE,sBAAA,cAACa,QAAAA;IAAOC,QAAO;IAAMf;IAAmB,GAAGG;IAAoB,GAAGD;KAEhE,sBAAA,cAACc,0BAAAA;IACCf;IACAgB,WAAW;IACXL,SAASC,wBAAAA,UAASA,MAAMK,gBAAe,GAA9BL;IACTP,IAAI;MAAEK,OAAOV,iBAAiB,SAAS,SAASkB;IAAU;KAEzDpB,SAASD,WAEJ,sBAAA,cAACsB,SAAAA;IAAQb,YAAW;IAAQc,KAAK;KAC9BtB,QACG,sBAAA,cAACuB,0BAAAA;IAAyBC,SAAQ;KAAMxB,KAAAA,IACxC,MACHD,WAEK,sBAAA,cAAC0B,YAAAA;IAAWD,SAAQ;IAAYE,eAAc;KAC3C3B,QAAAA,IAGL,IAAA,IAGR,MACHF,QAAAA,CAAAA;AAIT,GArDiD;AAuDjD,IAAM0B,2BAA2BI,OAAOF,YAAY;EAAEG,MAAM;AAA2B,CAAA,EAAG,OAAO;EAC/FC,UAAU;EACVC,WAAW;EACXC,cAAc;EACdC,YAAY;AACd,EAAA;AAEA,IAAMf,2BAA2BU,OAAOM,OAAO;EAC7CL,MAAM;EACNM,mBAAmBC,wBAAAA,SAAQ,CAAC;IAAC;IAAgBC,SAASD,IAAAA,GAAnCA;AACrB,CAAA,EAAkB,CAAC,EAAEE,OAAOnC,aAAY,OAAQ;EAC9CM,YAAY;EACZ8B,cAAc,OAAOD,MAAME,MAAMD,YAAY,MAAMD,MAAME,MAAMD,YAAY;EAC3EE,SAAS;EACTC,eAAe;EACfnB,KAAKe,MAAMK,QAAQ,CAAA;EACnB/B,QAAQ;EACRkB,UAAU;EACVC,WAAW;EACXa,SAASN,MAAMK,QAAQ,CAAA;EACvB,CAACL,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BjC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;EACA,CAACmC,MAAMO,YAAYC,GAAG,IAAA,CAAA,GAAQ;IAC5BjC,OAAOV,iBAAiB,SAAS,SAAS;EAC5C;AACF,EAAA;","names":["Drawer","Paper","styled","Typography","FlexCol","React","useMemo","DrawerEx","children","heightVariant","subTitle","title","onClose","widthVariant","props","variantBasedProps","useMemo","PaperProps","sx","alignItems","background","boxShadow","height","width","onClick","event","Drawer","anchor","StyledDrawerContentPaper","elevation","stopPropagation","undefined","FlexCol","gap","StyledEllipsisTypography","variant","Typography","textTransform","styled","name","maxWidth","overflowX","textOverflow","whiteSpace","Paper","shouldForwardProp","prop","includes","theme","borderRadius","shape","display","flexDirection","spacing","padding","breakpoints","up"]}