@xyo-network/react-drawer 2.75.7 → 2.76.1
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.
- package/dist/neutral/components/Drawer.d.cts +10 -0
 - package/dist/neutral/components/Drawer.d.cts.map +1 -0
 - package/dist/neutral/components/Drawer.d.mts +10 -0
 - package/dist/neutral/components/Drawer.d.mts.map +1 -0
 - package/dist/neutral/components/Drawer.d.ts +10 -0
 - package/dist/neutral/components/Drawer.d.ts.map +1 -0
 - package/dist/neutral/components/index.d.cts +2 -0
 - package/dist/neutral/components/index.d.cts.map +1 -0
 - package/dist/neutral/components/index.d.mts +2 -0
 - package/dist/neutral/components/index.d.mts.map +1 -0
 - package/dist/neutral/components/index.d.ts +2 -0
 - package/dist/neutral/components/index.d.ts.map +1 -0
 - package/dist/neutral/index.cjs +98 -0
 - package/dist/neutral/index.cjs.map +1 -0
 - package/dist/neutral/index.d.cts +2 -0
 - package/dist/neutral/index.d.cts.map +1 -0
 - package/dist/neutral/index.d.mts +2 -0
 - package/dist/neutral/index.d.mts.map +1 -0
 - package/dist/neutral/index.d.ts +2 -0
 - package/dist/neutral/index.d.ts.map +1 -0
 - package/dist/neutral/index.js +75 -0
 - package/dist/neutral/index.js.map +1 -0
 - package/package.json +3 -3
 
| 
         @@ -0,0 +1,10 @@ 
     | 
|
| 
      
 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
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 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"}
         
     | 
| 
         @@ -0,0 +1,10 @@ 
     | 
|
| 
      
 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
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 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"}
         
     | 
| 
         @@ -0,0 +1,10 @@ 
     | 
|
| 
      
 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
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 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"}
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
         
     | 
| 
         @@ -0,0 +1,98 @@ 
     | 
|
| 
      
 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
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"sources":["../../src/index.ts","../../src/components/Drawer.tsx"],"sourcesContent":["export * from './components'\n","import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\n        : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";;;;;;;;;;;;;;;;;;;;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":[]}
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}
         
     | 
| 
         @@ -0,0 +1,75 @@ 
     | 
|
| 
      
 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
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"sources":["../../src/components/Drawer.tsx"],"sourcesContent":["import { Drawer, DrawerProps, Paper, styled, Typography } from '@mui/material'\nimport { FlexCol } from '@xylabs/react-flexbox'\nimport { MouseEvent, PropsWithChildren, useMemo } from 'react'\n\nexport interface DrawerExProps extends PropsWithChildren<DrawerProps> {\n  heightVariant?: 'full' | 'auto'\n  subTitle?: string\n  title?: string\n  widthVariant?: 'full' | 'partial'\n}\n\nexport const DrawerEx: React.FC<DrawerExProps> = ({\n  children,\n  heightVariant = 'full',\n  subTitle,\n  title,\n  onClose,\n  widthVariant = 'partial',\n  ...props\n}) => {\n  const variantBasedProps = useMemo(() => {\n    return {\n      PaperProps: {\n        sx: {\n          alignItems: 'center',\n          background: 'transparent',\n          boxShadow: 'none',\n          height: heightVariant === 'full' ? '100%' : 'auto',\n          width: widthVariant === 'partial' ? 'auto' : '100%',\n        },\n      },\n      onClick: (event: MouseEvent) => onClose?.(event, 'backdropClick'),\n    }\n  }, [heightVariant, onClose, widthVariant])\n\n  return (\n    <Drawer anchor={'top'} onClose={onClose} {...variantBasedProps} {...props}>\n      {/* Trap the event to prevent triggering the backdrop onClick */}\n      <StyledDrawerContentPaper\n        widthVariant={widthVariant}\n        elevation={16}\n        onClick={(event) => event.stopPropagation()}\n        sx={{ width: widthVariant === 'full' ? '100%' : undefined }}\n      >\n        {title || subTitle ?\n          <FlexCol alignItems=\"start\" gap={1}>\n            {title ?\n              <StyledEllipsisTypography variant={'h3'}>{title}</StyledEllipsisTypography>\n            : null}\n            {subTitle ?\n              <Typography variant={'subtitle1'} textTransform=\"none\">\n                {subTitle}\n              </Typography>\n            : null}\n          </FlexCol>\n        : null}\n        {children}\n      </StyledDrawerContentPaper>\n    </Drawer>\n  )\n}\n\nconst StyledEllipsisTypography = styled(Typography, { name: 'StyledEllipsisTypography' })(() => ({\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}))\n\nconst StyledDrawerContentPaper = styled(Paper, {\n  name: 'StyledDrawerContentPaper',\n  shouldForwardProp: (prop) => !['widthVariant'].includes(prop as string),\n})<DrawerExProps>(({ theme, widthVariant }) => ({\n  alignItems: 'stretch',\n  borderRadius: `0 0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px`,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  height: '100%',\n  maxWidth: '100%',\n  overflowX: 'hidden',\n  padding: theme.spacing(3),\n  [theme.breakpoints.up('lg')]: {\n    width: widthVariant === 'full' ? '100%' : '50%',\n  },\n  [theme.breakpoints.up('md')]: {\n    width: widthVariant === 'full' ? '100%' : '75%',\n  },\n}))\n"],"mappings":";AAAA,SAAS,QAAqB,OAAO,QAAQ,kBAAkB;AAC/D,SAAS,eAAe;AACxB,SAAwC,eAAe;AA2C7C,SAEI,KAFJ;AAlCH,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,QAAQ,MAAM;AACtC,WAAO;AAAA,MACL,YAAY;AAAA,QACV,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,QAAQ,kBAAkB,SAAS,SAAS;AAAA,UAC5C,OAAO,iBAAiB,YAAY,SAAS;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,SAAS,CAAC,UAAsB,UAAU,OAAO,eAAe;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,eAAe,SAAS,YAAY,CAAC;AAEzC,SACE,oBAAC,UAAO,QAAQ,OAAO,SAAmB,GAAG,mBAAoB,GAAG,OAElE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,MAC1C,IAAI,EAAE,OAAO,iBAAiB,SAAS,SAAS,OAAU;AAAA,MAEzD;AAAA,iBAAS,WACR,qBAAC,WAAQ,YAAW,SAAQ,KAAK,GAC9B;AAAA,kBACC,oBAAC,4BAAyB,SAAS,MAAO,iBAAM,IAChD;AAAA,UACD,WACC,oBAAC,cAAW,SAAS,aAAa,eAAc,QAC7C,oBACH,IACA;AAAA,WACJ,IACA;AAAA,QACD;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAM,2BAA2B,OAAO,YAAY,EAAE,MAAM,2BAA2B,CAAC,EAAE,OAAO;AAAA,EAC/F,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd,EAAE;AAEF,IAAM,2BAA2B,OAAO,OAAO;AAAA,EAC7C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,CAAC,CAAC,cAAc,EAAE,SAAS,IAAc;AACxE,CAAC,EAAiB,CAAC,EAAE,OAAO,aAAa,OAAO;AAAA,EAC9C,YAAY;AAAA,EACZ,cAAc,OAAO,MAAM,MAAM,YAAY,MAAM,MAAM,MAAM,YAAY;AAAA,EAC3E,SAAS;AAAA,EACT,eAAe;AAAA,EACf,KAAK,MAAM,QAAQ,CAAC;AAAA,EACpB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AAAA,EACA,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,iBAAiB,SAAS,SAAS;AAAA,EAC5C;AACF,EAAE;","names":[]}
         
     | 
    
        package/package.json
    CHANGED
    
    | 
         @@ -20,8 +20,8 @@ 
     | 
|
| 
       20 
20 
     | 
    
         
             
              },
         
     | 
| 
       21 
21 
     | 
    
         
             
              "devDependencies": {
         
     | 
| 
       22 
22 
     | 
    
         
             
                "@storybook/react": "^7.6.19",
         
     | 
| 
       23 
     | 
    
         
            -
                "@xylabs/ts-scripts-yarn3": "^3. 
     | 
| 
       24 
     | 
    
         
            -
                "@xylabs/tsconfig-react": "^3. 
     | 
| 
      
 23 
     | 
    
         
            +
                "@xylabs/ts-scripts-yarn3": "^3.10.0",
         
     | 
| 
      
 24 
     | 
    
         
            +
                "@xylabs/tsconfig-react": "^3.10.0",
         
     | 
| 
       25 
25 
     | 
    
         
             
                "typescript": "^5.4.5"
         
     | 
| 
       26 
26 
     | 
    
         
             
              },
         
     | 
| 
       27 
27 
     | 
    
         
             
              "description": "Common React library for all XYO projects that use React",
         
     | 
| 
         @@ -75,6 +75,6 @@ 
     | 
|
| 
       75 
75 
     | 
    
         
             
              },
         
     | 
| 
       76 
76 
     | 
    
         
             
              "sideEffects": false,
         
     | 
| 
       77 
77 
     | 
    
         
             
              "types": "dist/browser/index.d.ts",
         
     | 
| 
       78 
     | 
    
         
            -
              "version": "2. 
     | 
| 
      
 78 
     | 
    
         
            +
              "version": "2.76.1",
         
     | 
| 
       79 
79 
     | 
    
         
             
              "type": "module"
         
     | 
| 
       80 
80 
     | 
    
         
             
            }
         
     |