@xyo-network/react-drawer 7.6.3 → 8.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAKhD,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,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,
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAKhD,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAkB,MAAM,OAAO,CAAA;AAEtC,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,CA6D5C,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -39,10 +39,26 @@ var DrawerEx = ({
|
|
|
39
39
|
onClick: (event) => event.stopPropagation(),
|
|
40
40
|
sx: { width: widthVariant === "full" ? "100%" : void 0 },
|
|
41
41
|
children: [
|
|
42
|
-
title || subTitle ? /* @__PURE__ */ jsxs(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
title || subTitle ? /* @__PURE__ */ jsxs(
|
|
43
|
+
FlexCol,
|
|
44
|
+
{
|
|
45
|
+
sx: {
|
|
46
|
+
alignItems: "start",
|
|
47
|
+
gap: 1
|
|
48
|
+
},
|
|
49
|
+
children: [
|
|
50
|
+
title ? /* @__PURE__ */ jsx(StyledEllipsisTypography, { variant: "h3", children: title }) : null,
|
|
51
|
+
subTitle ? /* @__PURE__ */ jsx(
|
|
52
|
+
Typography,
|
|
53
|
+
{
|
|
54
|
+
variant: "subtitle1",
|
|
55
|
+
sx: { textTransform: "none" },
|
|
56
|
+
children: subTitle
|
|
57
|
+
}
|
|
58
|
+
) : null
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
) : null,
|
|
46
62
|
children
|
|
47
63
|
]
|
|
48
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport {\n Drawer, Paper, styled, Typography,\n} from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { MouseEvent, PropsWithChildren } from 'react'\nimport React, { 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: MouseEvent) => event.stopPropagation()}\n sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n >\n {title || subTitle\n ? (\n <FlexCol
|
|
1
|
+
{"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import type { DrawerProps } from '@mui/material'\nimport {\n Drawer, Paper, styled, Typography,\n} from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport type { MouseEvent, PropsWithChildren } from 'react'\nimport React, { 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: MouseEvent) => event.stopPropagation()}\n sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n >\n {title || subTitle\n ? (\n <FlexCol\n sx={{\n alignItems: 'start',\n gap: 1,\n }}\n >\n {title\n ? <StyledEllipsisTypography variant=\"h3\">{title}</StyledEllipsisTypography>\n : null}\n {subTitle\n ? (\n <Typography\n variant=\"subtitle1\"\n sx={{ textTransform: 'none' }}\n >\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')]: { width: widthVariant === 'full' ? '100%' : '50%' },\n [theme.breakpoints.up('md')]: { width: widthVariant === 'full' ? '100%' : '75%' },\n}))\n"],"mappings":";AACA;AAAA,EACE;AAAA,EAAQ;AAAA,EAAO;AAAA,EAAQ;AAAA,OAClB;AACP,SAAS,eAAe;AAExB,SAAgB,eAAe;AA4CjB,SAOM,KAPN;AAnCP,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,QAAO,OAAM,SAAmB,GAAG,mBAAoB,GAAG,OAEhE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAsB,MAAM,gBAAgB;AAAA,MACtD,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WAEJ;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,KAAK;AAAA,YACP;AAAA,YAEC;AAAA,sBACG,oBAAC,4BAAyB,SAAQ,MAAM,iBAAM,IAC9C;AAAA,cACH,WAEK;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,IAAI,EAAE,eAAe,OAAO;AAAA,kBAE3B;AAAA;AAAA,cACH,IAEF;AAAA;AAAA;AAAA,QACN,IAEF;AAAA,QACH;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,UAAQ,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACtE,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,EAAE,OAAO,iBAAiB,SAAS,SAAS,MAAM;AAAA,EAChF,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,OAAO,iBAAiB,SAAS,SAAS,MAAM;AAClF,EAAE;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-drawer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -41,17 +41,17 @@
|
|
|
41
41
|
"README.md"
|
|
42
42
|
],
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@mui/material": "
|
|
44
|
+
"@mui/material": "~9.0",
|
|
45
45
|
"@opentelemetry/api": "^1.9.1",
|
|
46
46
|
"@opentelemetry/sdk-trace-base": "^2.7.1",
|
|
47
47
|
"@storybook/react-vite": "~10.3.6",
|
|
48
48
|
"@types/react": "^19.2.14",
|
|
49
|
-
"@xylabs/react-flexbox": "~
|
|
49
|
+
"@xylabs/react-flexbox": "~8.0",
|
|
50
50
|
"@xylabs/sdk-js": "^5.1.2",
|
|
51
|
-
"@xylabs/toolchain": "~7.13.
|
|
52
|
-
"@xylabs/tsconfig": "^7.13.
|
|
53
|
-
"@xylabs/tsconfig-dom": "^7.13.
|
|
54
|
-
"@xylabs/tsconfig-react": "~7.13.
|
|
51
|
+
"@xylabs/toolchain": "~7.13.22",
|
|
52
|
+
"@xylabs/tsconfig": "^7.13.22",
|
|
53
|
+
"@xylabs/tsconfig-dom": "^7.13.22",
|
|
54
|
+
"@xylabs/tsconfig-react": "~7.13.22",
|
|
55
55
|
"async-mutex": "^0.5.0",
|
|
56
56
|
"bn.js": "^5.2.3",
|
|
57
57
|
"buffer": "^6.0.3",
|
|
@@ -63,14 +63,14 @@
|
|
|
63
63
|
"react-dom": "^19.2.6",
|
|
64
64
|
"storybook": "^10.3.6",
|
|
65
65
|
"typescript": "^5.9.3",
|
|
66
|
-
"vite": "^8.0.
|
|
66
|
+
"vite": "^8.0.11",
|
|
67
67
|
"zod": "^4.4.3"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@mui/material": "
|
|
70
|
+
"@mui/material": "~9.0",
|
|
71
71
|
"@opentelemetry/api": "^1.9",
|
|
72
72
|
"@opentelemetry/sdk-trace-base": "^2.7",
|
|
73
|
-
"@xylabs/react-flexbox": "~
|
|
73
|
+
"@xylabs/react-flexbox": "~8.0",
|
|
74
74
|
"@xylabs/sdk-js": "^5.1",
|
|
75
75
|
"async-mutex": "^0.5",
|
|
76
76
|
"bn.js": "^5.2",
|