@pautena/react-design-system 0.14.0 → 0.14.1

package/confirm-dialog/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material"),l=require("@mui/lab"),a=require("@mui/icons-material/Close");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),c=n(a);const r=({open:e,title:a,component:n,componentProps:r={},disabled:i,disableAccept:d,disableCancel:s,actions:u=[],children:p,loading:m,cancelable:f,callCloseWhenCancel:C=!0,acceptable:b,acceptText:g="Accept",cancelText:x="Cancel",onAccept:E,onCancel:y=(()=>null),onClose:h,acceptType:T="button"})=>{const k=u.length>0||b||f;return o.default.createElement(t.Dialog,{open:e,onClose:h},o.default.createElement(t.DialogTitle,{sx:{display:"flex",alignItems:"center"}},a,m&&!b&&o.default.createElement(t.CircularProgress,{size:20,sx:{ml:2,color:e=>e.palette.grey[500]}}),o.default.createElement(t.IconButton,{disabled:i,"aria-label":"close",onClick:h,sx:{position:"absolute",right:8,top:8,color:e=>e.palette.grey[500]}},o.default.createElement(c.default,null))),o.default.createElement(t.Box,{component:n,...r},o.default.createElement(t.DialogContent,{dividers:!0},p),k&&o.default.createElement(t.DialogActions,null,u.map((({id:e,text:l,type:a="button",onClick:n,color:c="primary"})=>o.default.createElement(t.Button,{key:e,type:a,disabled:i,onClick:n,color:c},l))),f&&o.default.createElement(t.Button,{color:"error",disabled:i||s,onClick:()=>{y(),C&&h()}},x),b&&o.default.createElement(l.LoadingButton,{type:T,loading:m,disabled:i||d,onClick:E},g))))};exports.ConfirmDialog=({open:l,title:a,loading:n,disabled:c,confirmText:i="Confirm",cancelText:d="Cancel",passphrase:s,children:u,onConfirm:p,onCancel:m})=>{const[f,C]=e.useState(""),b=!s||f===s;return o.default.createElement(r,{title:a,loading:n,disabled:n||c,disableAccept:!b,open:l,onClose:m,acceptable:!0,cancelable:!0,callCloseWhenCancel:!1,acceptText:i,cancelText:d,onCancel:m,onAccept:p},u,s&&o.default.createElement(t.TextField,{size:"small",fullWidth:!0,value:f,onChange:e=>C(e.target.value),placeholder:s}))};
+//# sourceMappingURL=index.js.map

package/confirm-dialog/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/bootstrap-dialog/bootstrap-dialog.tsx","../../../src/confirm-dialog/confirm-dialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogTitle,\n  DialogActions,\n  Button,\n  IconButton,\n  DialogContent,\n  Box,\n  CircularProgress,\n} from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport React from \"react\";\nimport { BootstrapDialogDialogProps } from \"../dialog/dialog.types\";\n\nexport const BootstrapDialog = ({\n  open,\n  title,\n  component,\n  componentProps = {},\n  disabled,\n  disableAccept,\n  disableCancel,\n  actions = [],\n  children,\n  loading,\n  cancelable,\n  callCloseWhenCancel = true,\n  acceptable,\n  acceptText = \"Accept\",\n  cancelText = \"Cancel\",\n  onAccept,\n  onCancel = () => null,\n  onClose,\n  acceptType = \"button\",\n}: BootstrapDialogDialogProps) => {\n  const hasActions = actions.length > 0 || acceptable || cancelable;\n\n  return (\n    <Dialog open={open} onClose={onClose}>\n      <DialogTitle sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {title}\n        {loading && !acceptable && (\n          <CircularProgress size={20} sx={{ ml: 2, color: (theme) => theme.palette.grey[500] }} />\n        )}\n        <IconButton\n          disabled={disabled}\n          aria-label=\"close\"\n          onClick={onClose}\n          sx={{\n            position: \"absolute\",\n            right: 8,\n            top: 8,\n            color: (theme) => theme.palette.grey[500],\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      </DialogTitle>\n      <Box component={component} {...componentProps}>\n        <DialogContent dividers>{children}</DialogContent>\n        {hasActions && (\n          <DialogActions>\n            {actions.map(({ id, text, type = \"button\", onClick, color = \"primary\" }) => (\n              <Button key={id} type={type} disabled={disabled} onClick={onClick} color={color}>\n                {text}\n              </Button>\n            ))}\n            {cancelable && (\n              <Button\n                color=\"error\"\n                disabled={disabled || disableCancel}\n                onClick={() => {\n                  onCancel();\n                  callCloseWhenCancel && onClose();\n                }}\n              >\n                {cancelText}\n              </Button>\n            )}\n\n            {acceptable && (\n              <LoadingButton\n                type={acceptType}\n                loading={loading}\n                disabled={disabled || disableAccept}\n                onClick={onAccept}\n              >\n                {acceptText}\n              </LoadingButton>\n            )}\n          </DialogActions>\n        )}\n      </Box>\n    </Dialog>\n  );\n};\n","import React, { useState } from \"react\";\nimport { BootstrapDialog } from \"../bootstrap-dialog\";\nimport { BootstrapDialogDialogProps } from \"../dialog/dialog.types\";\nimport { TextField } from \"@mui/material\";\n\ntype OmitBaseDialogProps =\n  | \"cancelable\"\n  | \"acceptable\"\n  | \"onAccept\"\n  | \"onCancel\"\n  | \"onClose\"\n  | \"actions\"\n  | \"callCloseWhenCancel\"\n  | \"component\"\n  | \"acceptType\";\nexport interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {\n  confirmText?: string;\n  canceText?: string;\n  passphrase?: string;\n  onCancel: () => void;\n  onConfirm: () => void;\n}\n\nexport const ConfirmDialog = ({\n  open,\n  title,\n  loading,\n  disabled,\n  confirmText = \"Confirm\",\n  cancelText = \"Cancel\",\n  passphrase,\n  children,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) => {\n  const [inputPassphrase, setInputPassphrase] = useState(\"\");\n  const validPassphrase = !passphrase || inputPassphrase === passphrase;\n\n  return (\n    <BootstrapDialog\n      title={title}\n      loading={loading}\n      disabled={loading || disabled}\n      disableAccept={!validPassphrase}\n      open={open}\n      onClose={onCancel}\n      acceptable\n      cancelable\n      callCloseWhenCancel={false}\n      acceptText={confirmText}\n      cancelText={cancelText}\n      onCancel={onCancel}\n      onAccept={onConfirm}\n    >\n      {children}\n      {passphrase && (\n        <TextField\n          size=\"small\"\n          fullWidth\n          value={inputPassphrase}\n          onChange={(e) => setInputPassphrase(e.target.value)}\n          placeholder={passphrase}\n        />\n      )}\n    </BootstrapDialog>\n  );\n};\n"],"names":["BootstrapDialog","open","title","component","componentProps","disabled","disableAccept","disableCancel","actions","children","loading","cancelable","callCloseWhenCancel","acceptable","acceptText","cancelText","onAccept","onCancel","onClose","acceptType","hasActions","length","React","createElement","Dialog","DialogTitle","sx","display","alignItems","CircularProgress","size","ml","color","theme","palette","grey","IconButton","onClick","position","right","top","CloseIcon","Box","DialogContent","dividers","DialogActions","map","id","text","type","Button","key","LoadingButton","confirmText","passphrase","onConfirm","inputPassphrase","setInputPassphrase","useState","validPassphrase","TextField","fullWidth","value","onChange","e","target","placeholder"],"mappings":"6QAeO,MAAMA,EAAkB,EAC7BC,OACAC,QACAC,YACAC,iBAAiB,CAAA,EACjBC,WACAC,gBACAC,gBACAC,UAAU,GACVC,WACAC,UACAC,aACAC,uBAAsB,EACtBC,aACAC,aAAa,SACbC,aAAa,SACbC,WACAC,WAAW,KAAM,MACjBC,UACAC,aAAa,aAEb,MAAMC,EAAaZ,EAAQa,OAAS,GAAKR,GAAcF,EAEvD,OACEW,EAAAA,QAACC,cAAAC,EAAMA,OAAC,CAAAvB,KAAMA,EAAMiB,QAASA,GAC3BI,UAAAC,cAACE,EAAWA,YAAA,CAACC,GAAI,CAAEC,QAAS,OAAQC,WAAY,WAC7C1B,EACAQ,IAAYG,GACXS,wBAACO,EAAAA,iBAAgB,CAACC,KAAM,GAAIJ,GAAI,CAAEK,GAAI,EAAGC,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,QAEhFb,EAAAA,QAAAC,cAACa,aAAU,CACT/B,SAAUA,EAAQ,aACP,QACXgC,QAASnB,EACTQ,GAAI,CACFY,SAAU,WACVC,MAAO,EACPC,IAAK,EACLR,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,OAGvCb,EAAAA,QAACC,cAAAkB,UAAY,QAGjBnB,EAAA,QAAAC,cAACmB,EAAGA,IAAC,CAAAvC,UAAWA,KAAeC,GAC7BkB,EAAA,QAAAC,cAACoB,EAAaA,cAAA,CAACC,UAAQ,GAAEnC,GACxBW,GACCE,EAAA,QAAAC,cAACsB,EAAAA,cAAa,KACXrC,EAAQsC,KAAI,EAAGC,KAAIC,OAAMC,OAAO,SAAUZ,UAASL,QAAQ,aAC1DV,EAAAA,QAAAC,cAAC2B,EAAAA,OAAO,CAAAC,IAAKJ,EAAIE,KAAMA,EAAM5C,SAAUA,EAAUgC,QAASA,EAASL,MAAOA,GACvEgB,KAGJrC,GACCW,EAAA,QAAAC,cAAC2B,EAAAA,OACC,CAAAlB,MAAM,QACN3B,SAAUA,GAAYE,EACtB8B,QAAS,KACPpB,IACAL,GAAuBM,GAAS,GAGjCH,GAIJF,GACCS,EAAC,QAAAC,cAAA6B,EAAAA,cACC,CAAAH,KAAM9B,EACNT,QAASA,EACTL,SAAUA,GAAYC,EACtB+B,QAASrB,GAERF,KAOb,wBCxEyB,EAC3Bb,OACAC,QACAQ,UACAL,WACAgD,cAAc,UACdtC,aAAa,SACbuC,aACA7C,WACA8C,YACAtC,eAEA,MAAOuC,EAAiBC,GAAsBC,EAAQA,SAAC,IACjDC,GAAmBL,GAAcE,IAAoBF,EAE3D,OACEhC,EAAAA,QAACC,cAAAvB,EACC,CAAAE,MAAOA,EACPQ,QAASA,EACTL,SAAUK,GAAWL,EACrBC,eAAgBqD,EAChB1D,KAAMA,EACNiB,QAASD,EACTJ,YAAU,EACVF,YACA,EAAAC,qBAAqB,EACrBE,WAAYuC,EACZtC,WAAYA,EACZE,SAAUA,EACVD,SAAUuC,GAET9C,EACA6C,GACChC,EAAAA,QAAAC,cAACqC,YAAS,CACR9B,KAAK,QACL+B,aACAC,MAAON,EACPO,SAAWC,GAAMP,EAAmBO,EAAEC,OAAOH,OAC7CI,YAAaZ,IAInB"}

package/confirm-dialog/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/confirm-dialog",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/confirm-dialog/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/confirm-dialog",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/content/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);exports.Content=({children:e})=>n.default.createElement(t.Container,{component:"main",sx:{py:3,flexGrow:1}},e);
+//# sourceMappingURL=index.js.map

package/content/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/content/content.tsx"],"sourcesContent":["import React from \"react\";\nimport { Container } from \"@mui/material\";\nimport { ContentProps } from \"./content.types\";\n\nexport const Content = ({ children }: ContentProps) => {\n  return (\n    <Container component=\"main\" sx={{ py: 3, flexGrow: 1 }}>\n      {children}\n    </Container>\n  );\n};\n"],"names":["children","React","Container","component","sx","py","flexGrow"],"mappings":"yNAIuB,EAAGA,cAEtBC,wBAACC,EAASA,UAAA,CAACC,UAAU,OAAOC,GAAI,CAAEC,GAAI,EAAGC,SAAU,IAChDN"}

package/content/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/content",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/content/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/content",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/content-placeholder/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(require("react"));const n=({width:t="100%",animation:n=!1})=>a.default.createElement(e.Box,{width:t},a.default.createElement(e.Skeleton,{animation:n,variant:"rectangular",height:118}),a.default.createElement(e.Skeleton,{animation:n,variant:"rectangular",height:16,sx:{my:1}}),a.default.createElement(e.Skeleton,{animation:n,variant:"rectangular",width:"80%",height:16})),r=({size:t=20})=>a.default.createElement(e.Grid,{container:!0,spacing:2},((e,t)=>new Array(e).fill(t))(t,0).map(((t,r)=>a.default.createElement(e.Grid,{item:!0,key:r,xs:4},a.default.createElement(n,{width:1})))));exports.ContentPlaceholder=({size:t=20,children:n,p:i})=>a.default.createElement(e.Container,{component:"main",sx:{p:i},"data-testid":"content-placeholder-test"},n,a.default.createElement(r,{size:t}));
+//# sourceMappingURL=index.js.map

package/content-placeholder/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/arrays.ts","../../../src/skeleton-card/skeleton-card.tsx","../../../src/skeleton-grid/skeleton-grid.tsx","../../../src/content-placeholder/content-placeholder.tsx"],"sourcesContent":["export const newArrayWithSize = <T>(size: number, fillValue: T) => new Array(size).fill(fillValue);\n\nexport const getRandomItem = <T>(items: T[]): { index: number; item: T } => {\n  const index = Math.floor(Math.random() * items.length);\n  const item = items[index];\n  return { index, item };\n};\n","import { Box, Skeleton } from \"@mui/material\";\nimport React from \"react\";\n\nexport interface SkeletonCardProps {\n  width?: number | string;\n  animation?: \"pulse\" | \"wave\" | false;\n}\n\nexport const SkeletonCard = ({ width = \"100%\", animation = false }: SkeletonCardProps) => {\n  return (\n    <Box width={width}>\n      <Skeleton animation={animation} variant=\"rectangular\" height={118} />\n      <Skeleton animation={animation} variant=\"rectangular\" height={16} sx={{ my: 1 }} />\n      <Skeleton animation={animation} variant=\"rectangular\" width=\"80%\" height={16} />\n    </Box>\n  );\n};\n","import { Grid } from \"@mui/material\";\nimport React from \"react\";\nimport { newArrayWithSize } from \"~/utils\";\nimport { SkeletonCard } from \"../skeleton-card\";\n\nexport interface SkeletonGridProps {\n  size?: number;\n}\n\nexport const SkeletonGrid = ({ size = 20 }: SkeletonGridProps) => {\n  return (\n    <Grid container spacing={2}>\n      {newArrayWithSize(size, 0).map((_, i) => (\n        <Grid item key={i} xs={4}>\n          <SkeletonCard width={1} />\n        </Grid>\n      ))}\n    </Grid>\n  );\n};\n","import { Container } from \"@mui/material\";\nimport React, { PropsWithChildren } from \"react\";\nimport { SkeletonGrid } from \"../skeleton-grid\";\n\nexport type ContentPlaceholderProps = PropsWithChildren<{\n  size?: number;\n  p?: number;\n}>;\n\nexport const ContentPlaceholder = ({ size = 20, children, p }: ContentPlaceholderProps) => {\n  return (\n    <Container component=\"main\" sx={{ p }} data-testid=\"content-placeholder-test\">\n      {children}\n      <SkeletonGrid size={size} />\n    </Container>\n  );\n};\n"],"names":["SkeletonCard","width","animation","React","createElement","Box","Skeleton","variant","height","sx","my","SkeletonGrid","size","Grid","container","spacing","fillValue","Array","fill","newArrayWithSize","map","_","i","item","key","xs","children","p","Container","component"],"mappings":"qMAAO,MCQMA,EAAe,EAAGC,QAAQ,OAAQC,aAAY,KAEvDC,EAAC,QAAAC,cAAAC,EAAGA,IAAC,CAAAJ,MAAOA,GACVE,UAAAC,cAACE,EAAQA,SAAA,CAACJ,UAAWA,EAAWK,QAAQ,cAAcC,OAAQ,MAC9DL,EAAAA,QAACC,cAAAE,EAAAA,UAASJ,UAAWA,EAAWK,QAAQ,cAAcC,OAAQ,GAAIC,GAAI,CAAEC,GAAI,KAC5EP,EAAAA,QAACC,cAAAE,EAAAA,UAASJ,UAAWA,EAAWK,QAAQ,cAAcN,MAAM,MAAMO,OAAQ,MCJnEG,EAAe,EAAGC,OAAO,MAElCT,UAACC,cAAAS,EAAIA,KAAC,CAAAC,aAAUC,QAAS,GFXG,EAAIH,EAAcI,IAAiB,IAAIC,MAAML,GAAMM,KAAKF,GEYjFG,CAAiBP,EAAM,GAAGQ,KAAI,CAACC,EAAGC,IACjCnB,EAAC,QAAAC,cAAAS,EAAIA,KAAC,CAAAU,QAAKC,IAAKF,EAAGG,GAAI,GACrBtB,UAACC,cAAAJ,EAAa,CAAAC,MAAO,mCCLG,EAAGW,OAAO,GAAIc,WAAUC,OAEtDxB,UAAAC,cAACwB,EAASA,UAAA,CAACC,UAAU,OAAOpB,GAAI,CAAEkB,mBAAiB,4BAChDD,EACDvB,EAAC,QAAAC,cAAAO,GAAaC,KAAMA"}

package/content-placeholder/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/content-placeholder",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/content-placeholder/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/content-placeholder",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/date-range-calendar/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),a=require("@mui/x-date-pickers"),t=require("date-fns"),r=require("date-fns/esm"),s=require("react");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=i(s);const l=e.styled(e.Box,{shouldForwardProp:e=>"dayIsBetween"!==e&&"isFirstDay"!==e&&"isLastDay"!==e&&"isStartOfWeek"!==e&&"isEndOfWeek"!==e})((({theme:e,dayIsBetween:a,isFirstDay:t,isLastDay:r})=>({...(t||r||a)&&{borderRadius:0,backgroundColor:`${e.palette.primary.light}40`,margin:0},...t&&{borderTopLeftRadius:"50%",borderBottomLeftRadius:"50%"},...r&&{borderTopRightRadius:"50%",borderBottomRightRadius:"50%"}}))),n=e=>{const{day:s,dateRange:i,...n}=e;if(null==i)return d.default.createElement(a.PickersDay,{day:s,...n});const[o,u]=i,y=!!u&&t.isAfter(s,o)&&r.isBefore(s,u),f=t.isSameDay(s,o),c=!!u&&t.isSameDay(s,u),m=t.isSameDay(s,t.startOfWeek(s)),D=t.isSameDay(s,t.endOfWeek(s));return d.default.createElement(l,{dayIsBetween:y,isFirstDay:f||y&&m,isLastDay:c||y&&D,"aria-label":t.format(s,"yyyy-MM-dd"),"aria-selected":y||f||c,role:"gridcell"},d.default.createElement(a.PickersDay,{...n,day:s,selected:f||c}))};exports.DateRangeCalendar=({defaultValue:e,onValueChange:t})=>{const[r,i]=s.useState(e),[l,o]=s.useState(0),u=(e,a,r)=>{i(e),t(e,a),o(r)};return d.default.createElement(a.DateCalendar,{value:null,onChange:e=>{if(e)return 1===l&&e<r[0]||0===l&&r[1]&&e>r[1]?u([e,void 0],0,1):void u([0===l?e:r[0],1===l?e:r[1]],l,0===l?1:0)},slots:{day:n},slotProps:{day:{dateRange:r}},"aria-label":"calendar range picker"})};
+//# sourceMappingURL=index.js.map

package/date-range-calendar/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/date-range-calendar/date-range-calendar.tsx"],"sourcesContent":["import { Box, BoxProps, styled } from \"@mui/material\";\nimport { DateCalendar, PickersDay, PickersDayProps } from \"@mui/x-date-pickers\";\nimport { endOfWeek, format, isAfter, isSameDay, startOfWeek } from \"date-fns\";\nimport { isBefore } from \"date-fns/esm\";\nimport React, { useState } from \"react\";\n\ntype DateRange = [Date, Date | undefined];\n\ninterface CustomPickerDayProps extends BoxProps {\n  dayIsBetween: boolean;\n  isFirstDay: boolean;\n  isLastDay: boolean;\n}\n\nconst CustomPickersDayBackground = styled(Box, {\n  shouldForwardProp: (prop) =>\n    prop !== \"dayIsBetween\" &&\n    prop !== \"isFirstDay\" &&\n    prop !== \"isLastDay\" &&\n    prop !== \"isStartOfWeek\" &&\n    prop !== \"isEndOfWeek\",\n})<CustomPickerDayProps>(({ theme, dayIsBetween, isFirstDay, isLastDay }) => {\n  return {\n    ...((isFirstDay || isLastDay || dayIsBetween) && {\n      borderRadius: 0,\n      backgroundColor: `${theme.palette.primary.light}40`,\n      margin: 0,\n    }),\n    ...(isFirstDay && {\n      borderTopLeftRadius: \"50%\",\n      borderBottomLeftRadius: \"50%\",\n    }),\n    ...(isLastDay && {\n      borderTopRightRadius: \"50%\",\n      borderBottomRightRadius: \"50%\",\n    }),\n  };\n}) as React.ComponentType<CustomPickerDayProps>;\n\nconst Day = (props: PickersDayProps<Date> & { dateRange?: DateRange | null }) => {\n  const { day, dateRange, ...other } = props;\n\n  if (dateRange == null) {\n    return <PickersDay day={day} {...other} />;\n  }\n\n  const [start, end] = dateRange;\n\n  const dayIsBetween = !!end && isAfter(day, start) && isBefore(day, end);\n  const isFirstDay = isSameDay(day, start);\n  const isLastDay = !!end && isSameDay(day, end);\n  const isStartOfWeek = isSameDay(day, startOfWeek(day));\n  const isEndOfWeek = isSameDay(day, endOfWeek(day));\n\n  return (\n    <CustomPickersDayBackground\n      dayIsBetween={dayIsBetween}\n      isFirstDay={isFirstDay || (dayIsBetween && isStartOfWeek)}\n      isLastDay={isLastDay || (dayIsBetween && isEndOfWeek)}\n      aria-label={format(day, \"yyyy-MM-dd\")}\n      aria-selected={dayIsBetween || isFirstDay || isLastDay}\n      role=\"gridcell\"\n    >\n      <PickersDay {...other} day={day} selected={isFirstDay || isLastDay} />\n    </CustomPickersDayBackground>\n  );\n};\n\nexport interface DateRangeCalendarProps {\n  defaultValue: DateRange;\n  onValueChange: (value: DateRange, updatedIndex: number) => void;\n}\nexport const DateRangeCalendar = ({ defaultValue, onValueChange }: DateRangeCalendarProps) => {\n  const [value, setValue] = useState(defaultValue);\n  const [index, setIndex] = useState(0);\n\n  const setValueRange = (newRange: DateRange, index: number, newIndex: number) => {\n    setValue(newRange);\n    onValueChange(newRange, index);\n    setIndex(newIndex);\n  };\n\n  const handleChange = (newValue: Date | null) => {\n    if (!newValue) {\n      return;\n    }\n\n    // If is the end date and is minor than the start date\n    if (index === 1 && newValue < value[0]) {\n      return setValueRange([newValue, undefined], 0, 1);\n    }\n\n    // If is the start date and is bigger than the end date\n    if (index === 0 && value[1] && newValue > value[1]) {\n      return setValueRange([newValue, undefined], 0, 1);\n    }\n\n    // Default case\n    setValueRange(\n      [index === 0 ? newValue : value[0], index === 1 ? newValue : value[1]],\n      index,\n      index === 0 ? 1 : 0,\n    );\n  };\n  return (\n    <DateCalendar\n      value={null}\n      onChange={handleChange}\n      slots={{ day: Day }}\n      slotProps={{\n        day: {\n          dateRange: value,\n        } as any,\n      }}\n      aria-label=\"calendar range picker\"\n    />\n  );\n};\n"],"names":["CustomPickersDayBackground","styled","Box","shouldForwardProp","prop","theme","dayIsBetween","isFirstDay","isLastDay","borderRadius","backgroundColor","palette","primary","light","margin","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","Day","props","day","dateRange","other","React","createElement","PickersDay","start","end","isAfter","isBefore","isSameDay","isStartOfWeek","startOfWeek","isEndOfWeek","endOfWeek","format","role","selected","defaultValue","onValueChange","value","setValue","useState","index","setIndex","setValueRange","newRange","newIndex","DateCalendar","onChange","newValue","undefined","slots","slotProps"],"mappings":"0RAcA,MAAMA,EAA6BC,EAAMA,OAACC,MAAK,CAC7CC,kBAAoBC,GACT,iBAATA,GACS,eAATA,GACS,cAATA,GACS,kBAATA,GACS,gBAATA,GAN+BH,EAOV,EAAGI,QAAOC,eAAcC,aAAYC,gBACpD,KACAD,GAAcC,GAAaF,IAAiB,CAC/CG,aAAc,EACdC,gBAAiB,GAAGL,EAAMM,QAAQC,QAAQC,UAC1CC,OAAQ,MAENP,GAAc,CAChBQ,oBAAqB,MACrBC,uBAAwB,UAEtBR,GAAa,CACfS,qBAAsB,MACtBC,wBAAyB,WAKzBC,EAAOC,IACX,MAAMC,IAAEA,EAAGC,UAAEA,KAAcC,GAAUH,EAErC,GAAiB,MAAbE,EACF,OAAOE,EAAA,QAAAC,cAACC,aAAW,CAAAL,IAAKA,KAASE,IAGnC,MAAOI,EAAOC,GAAON,EAEfhB,IAAiBsB,GAAOC,UAAQR,EAAKM,IAAUG,EAAQA,SAACT,EAAKO,GAC7DrB,EAAawB,EAAAA,UAAUV,EAAKM,GAC5BnB,IAAcoB,GAAOG,EAAAA,UAAUV,EAAKO,GACpCI,EAAgBD,EAAAA,UAAUV,EAAKY,EAAAA,YAAYZ,IAC3Ca,EAAcH,EAAAA,UAAUV,EAAKc,EAAAA,UAAUd,IAE7C,OACEG,UAACC,cAAAzB,GACCM,aAAcA,EACdC,WAAYA,GAAeD,GAAgB0B,EAC3CxB,UAAWA,GAAcF,GAAgB4B,eAC7BE,EAAMA,OAACf,EAAK,cACT,gBAAAf,GAAgBC,GAAcC,EAC7C6B,KAAK,YAELb,EAAAA,QAAAC,cAACC,aAAe,IAAAH,EAAOF,IAAKA,EAAKiB,SAAU/B,GAAcC,IAE3D,4BAO6B,EAAG+B,eAAcC,oBAChD,MAAOC,EAAOC,GAAYC,EAAQA,SAACJ,IAC5BK,EAAOC,GAAYF,EAAQA,SAAC,GAE7BG,EAAgB,CAACC,EAAqBH,EAAeI,KACzDN,EAASK,GACTP,EAAcO,EAAUH,GACxBC,EAASG,EAAS,EAyBpB,OACExB,wBAACyB,eAAY,CACXR,MAAO,KACPS,SAzBkBC,IACpB,GAAKA,EAKL,OAAc,IAAVP,GAAeO,EAAWV,EAAM,IAKtB,IAAVG,GAAeH,EAAM,IAAMU,EAAWV,EAAM,GAJvCK,EAAc,CAACK,OAAUC,GAAY,EAAG,QASjDN,EACE,CAAW,IAAVF,EAAcO,EAAWV,EAAM,GAAc,IAAVG,EAAcO,EAAWV,EAAM,IACnEG,EACU,IAAVA,EAAc,EAAI,EACnB,EAMCS,MAAO,CAAEhC,IAAKF,GACdmC,UAAW,CACTjC,IAAK,CACHC,UAAWmB,IAGJ,aAAA,yBAEb"}

package/date-range-calendar/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/date-range-calendar",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "@mui/x-date-pickers": "^6.9.0",
+    "date-fns": "^2.30.0",
+    "react": "^18.2.0"
+  }
+}

package/date-range-calendar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/date-range-calendar",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/date-range-picker/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),a=require("date-fns"),t=require("@mui/material"),r=require("@mui/icons-material/Event"),l=require("@mui/x-date-pickers"),n=require("date-fns/esm");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=d(e),u=d(r);const s=t.styled(t.Box,{shouldForwardProp:e=>"dayIsBetween"!==e&&"isFirstDay"!==e&&"isLastDay"!==e&&"isStartOfWeek"!==e&&"isEndOfWeek"!==e})((({theme:e,dayIsBetween:a,isFirstDay:t,isLastDay:r})=>({...(t||r||a)&&{borderRadius:0,backgroundColor:`${e.palette.primary.light}40`,margin:0},...t&&{borderTopLeftRadius:"50%",borderBottomLeftRadius:"50%"},...r&&{borderTopRightRadius:"50%",borderBottomRightRadius:"50%"}}))),o=e=>{const{day:t,dateRange:r,...d}=e;if(null==r)return i.default.createElement(l.PickersDay,{day:t,...d});const[u,o]=r,f=!!o&&a.isAfter(t,u)&&n.isBefore(t,o),c=a.isSameDay(t,u),m=!!o&&a.isSameDay(t,o),y=a.isSameDay(t,a.startOfWeek(t)),p=a.isSameDay(t,a.endOfWeek(t));return i.default.createElement(s,{dayIsBetween:f,isFirstDay:c||f&&y,isLastDay:m||f&&p,"aria-label":a.format(t,"yyyy-MM-dd"),"aria-selected":f||c||m,role:"gridcell"},i.default.createElement(l.PickersDay,{...d,day:t,selected:c||m}))},f=({defaultValue:a,onValueChange:t})=>{const[r,n]=e.useState(a),[d,u]=e.useState(0),s=(e,a,r)=>{n(e),t(e,a),u(r)};return i.default.createElement(l.DateCalendar,{value:null,onChange:e=>{if(e)return 1===d&&e<r[0]||0===d&&r[1]&&e>r[1]?s([e,void 0],0,1):void s([0===d?e:r[0],1===d?e:r[1]],d,0===d?1:0)},slots:{day:o},slotProps:{day:{dateRange:r}},"aria-label":"calendar range picker"})};exports.DateRangePicker=({defaultValue:r,format:l,label:n,fullWidth:d,onValueChange:s,size:o="medium"})=>{const[c,m]=e.useState(!1),[y,p]=e.useState(r);return i.default.createElement(i.default.Fragment,null,i.default.createElement(t.TextField,{label:n,fullWidth:d,size:o,value:`${a.format(y[0],l)} - ${y[1]?a.format(y[1],l):l.toUpperCase()}`,InputProps:{endAdornment:i.default.createElement(t.InputAdornment,{position:"end"},i.default.createElement(t.IconButton,{onClick:()=>m((e=>!e)),"aria-label":"open calendar"},i.default.createElement(u.default,null)))}}),i.default.createElement(t.Paper,null,i.default.createElement(t.Collapse,{in:c,"aria-label":"calendar collapse"},i.default.createElement(f,{defaultValue:r,onValueChange:(e,a)=>{p(e),s(e,a),m(a<1)}}))))};
+//# sourceMappingURL=index.js.map

package/date-range-picker/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/date-range-calendar/date-range-calendar.tsx","../../../src/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { Box, BoxProps, styled } from \"@mui/material\";\nimport { DateCalendar, PickersDay, PickersDayProps } from \"@mui/x-date-pickers\";\nimport { endOfWeek, format, isAfter, isSameDay, startOfWeek } from \"date-fns\";\nimport { isBefore } from \"date-fns/esm\";\nimport React, { useState } from \"react\";\n\ntype DateRange = [Date, Date | undefined];\n\ninterface CustomPickerDayProps extends BoxProps {\n  dayIsBetween: boolean;\n  isFirstDay: boolean;\n  isLastDay: boolean;\n}\n\nconst CustomPickersDayBackground = styled(Box, {\n  shouldForwardProp: (prop) =>\n    prop !== \"dayIsBetween\" &&\n    prop !== \"isFirstDay\" &&\n    prop !== \"isLastDay\" &&\n    prop !== \"isStartOfWeek\" &&\n    prop !== \"isEndOfWeek\",\n})<CustomPickerDayProps>(({ theme, dayIsBetween, isFirstDay, isLastDay }) => {\n  return {\n    ...((isFirstDay || isLastDay || dayIsBetween) && {\n      borderRadius: 0,\n      backgroundColor: `${theme.palette.primary.light}40`,\n      margin: 0,\n    }),\n    ...(isFirstDay && {\n      borderTopLeftRadius: \"50%\",\n      borderBottomLeftRadius: \"50%\",\n    }),\n    ...(isLastDay && {\n      borderTopRightRadius: \"50%\",\n      borderBottomRightRadius: \"50%\",\n    }),\n  };\n}) as React.ComponentType<CustomPickerDayProps>;\n\nconst Day = (props: PickersDayProps<Date> & { dateRange?: DateRange | null }) => {\n  const { day, dateRange, ...other } = props;\n\n  if (dateRange == null) {\n    return <PickersDay day={day} {...other} />;\n  }\n\n  const [start, end] = dateRange;\n\n  const dayIsBetween = !!end && isAfter(day, start) && isBefore(day, end);\n  const isFirstDay = isSameDay(day, start);\n  const isLastDay = !!end && isSameDay(day, end);\n  const isStartOfWeek = isSameDay(day, startOfWeek(day));\n  const isEndOfWeek = isSameDay(day, endOfWeek(day));\n\n  return (\n    <CustomPickersDayBackground\n      dayIsBetween={dayIsBetween}\n      isFirstDay={isFirstDay || (dayIsBetween && isStartOfWeek)}\n      isLastDay={isLastDay || (dayIsBetween && isEndOfWeek)}\n      aria-label={format(day, \"yyyy-MM-dd\")}\n      aria-selected={dayIsBetween || isFirstDay || isLastDay}\n      role=\"gridcell\"\n    >\n      <PickersDay {...other} day={day} selected={isFirstDay || isLastDay} />\n    </CustomPickersDayBackground>\n  );\n};\n\nexport interface DateRangeCalendarProps {\n  defaultValue: DateRange;\n  onValueChange: (value: DateRange, updatedIndex: number) => void;\n}\nexport const DateRangeCalendar = ({ defaultValue, onValueChange }: DateRangeCalendarProps) => {\n  const [value, setValue] = useState(defaultValue);\n  const [index, setIndex] = useState(0);\n\n  const setValueRange = (newRange: DateRange, index: number, newIndex: number) => {\n    setValue(newRange);\n    onValueChange(newRange, index);\n    setIndex(newIndex);\n  };\n\n  const handleChange = (newValue: Date | null) => {\n    if (!newValue) {\n      return;\n    }\n\n    // If is the end date and is minor than the start date\n    if (index === 1 && newValue < value[0]) {\n      return setValueRange([newValue, undefined], 0, 1);\n    }\n\n    // If is the start date and is bigger than the end date\n    if (index === 0 && value[1] && newValue > value[1]) {\n      return setValueRange([newValue, undefined], 0, 1);\n    }\n\n    // Default case\n    setValueRange(\n      [index === 0 ? newValue : value[0], index === 1 ? newValue : value[1]],\n      index,\n      index === 0 ? 1 : 0,\n    );\n  };\n  return (\n    <DateCalendar\n      value={null}\n      onChange={handleChange}\n      slots={{ day: Day }}\n      slotProps={{\n        day: {\n          dateRange: value,\n        } as any,\n      }}\n      aria-label=\"calendar range picker\"\n    />\n  );\n};\n","import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport {\n  Box,\n  Button,\n  Collapse,\n  Grid,\n  IconButton,\n  InputAdornment,\n  Paper,\n  TextField,\n} from \"@mui/material\";\nimport EventIcon from \"@mui/icons-material/Event\";\nimport { DateRangeCalendar } from \"../date-range-calendar\";\n\ntype DateRange = [Date, Date | undefined];\nexport interface DateRangePickerProps {\n  label: string;\n  defaultValue: DateRange;\n  format: string;\n  fullWidth?: boolean;\n  size?: \"small\" | \"medium\";\n  onValueChange: (value: DateRange, index: number) => void;\n}\n\nexport const DateRangePicker = ({\n  defaultValue,\n  format: fmt,\n  label,\n  fullWidth,\n  onValueChange,\n  size = \"medium\",\n}: DateRangePickerProps) => {\n  const [isPopoverOpened, setIsPopoverOpened] = useState(false);\n  const [value, setValue] = useState(defaultValue);\n\n  const handleValueChange = (newValue: DateRange, index: number) => {\n    setValue(newValue);\n    onValueChange(newValue, index);\n    setIsPopoverOpened(index < 1);\n  };\n\n  return (\n    <>\n      <TextField\n        label={label}\n        fullWidth={fullWidth}\n        size={size}\n        value={`${format(value[0], fmt)} - ${value[1] ? format(value[1], fmt) : fmt.toUpperCase()}`}\n        InputProps={{\n          endAdornment: (\n            <InputAdornment position=\"end\">\n              <IconButton onClick={() => setIsPopoverOpened((o) => !o)} aria-label=\"open calendar\">\n                <EventIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      <Paper>\n        <Collapse in={isPopoverOpened} aria-label=\"calendar collapse\">\n          <DateRangeCalendar defaultValue={defaultValue} onValueChange={handleValueChange} />\n        </Collapse>\n      </Paper>\n    </>\n  );\n};\n"],"names":["CustomPickersDayBackground","styled","Box","shouldForwardProp","prop","theme","dayIsBetween","isFirstDay","isLastDay","borderRadius","backgroundColor","palette","primary","light","margin","borderTopLeftRadius","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","Day","props","day","dateRange","other","React","createElement","PickersDay","start","end","isAfter","isBefore","isSameDay","isStartOfWeek","startOfWeek","isEndOfWeek","endOfWeek","format","role","selected","DateRangeCalendar","defaultValue","onValueChange","value","setValue","useState","index","setIndex","setValueRange","newRange","newIndex","DateCalendar","onChange","newValue","undefined","slots","slotProps","fmt","label","fullWidth","size","isPopoverOpened","setIsPopoverOpened","Fragment","TextField","toUpperCase","InputProps","endAdornment","InputAdornment","position","IconButton","onClick","o","EventIcon","Paper","Collapse","in"],"mappings":"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"}

package/date-range-picker/cjs/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@pautena/react-design-system/date-range-picker",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "@mui/x-date-pickers": "^6.9.0",
+    "date-fns": "^2.30.0",
+    "react": "^18.2.0"
+  }
+}

package/date-range-picker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/date-range-picker",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/dialog/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.useDialog=(s=!1)=>{const[t,r]=e.useState(s);return{isOpen:t,open:()=>r(!0),close:()=>r(!1),setIsOpen:r}};
+//# sourceMappingURL=index.js.map

package/dialog/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/dialog/use-dialog.ts"],"sourcesContent":["import { useState } from \"react\";\n\nexport const useDialog = (intialOpen = false) => {\n  const [isOpen, setIsOpen] = useState(intialOpen);\n\n  const open = () => setIsOpen(true);\n  const close = () => setIsOpen(false);\n\n  return { isOpen, open, close, setIsOpen };\n};\n"],"names":["intialOpen","isOpen","setIsOpen","useState","open","close"],"mappings":"6GAEyB,CAACA,GAAa,KACrC,MAAOC,EAAQC,GAAaC,EAAQA,SAACH,GAKrC,MAAO,CAAEC,SAAQG,KAHJ,IAAMF,GAAU,GAGNG,MAFT,IAAMH,GAAU,GAEAA,YAAW"}

package/dialog/cjs/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@pautena/react-design-system/dialog",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "react": "^18.2.0"
+  }
+}

package/dialog/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/dialog",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/drawer/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material"),r=require("@mui/icons-material/ChevronLeft");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e),a=n(r);const o=e.createContext(void 0),s=new Error("DrawerContext.Provider is required and was undefined"),d=e=>({width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}),p=e=>({transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen}),overflowX:"hidden",width:`calc(${e.spacing(7)} + 1px)`,[e.breakpoints.up("sm")]:{width:`calc(${e.spacing(8)} + 1px)`}}),l=t.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),c={temporary:!0,mini:!0,persistent:!0,clipped:!1},u={temporary:"temporary",mini:"permanent",clipped:"permanent",persistent:"persistent"},m=()=>({}),h={mini:(e,r)=>({boxSizing:"border-box",[`& .${t.paperClasses.root}`]:{zIndex:r.zIndex.drawer-1}}),temporary:m,clipped:m,persistent:m};exports.Drawer=({children:r,...n})=>{const m=t.useTheme(),{state:f,switchState:w,underAppBar:g,close:x,drawerWidth:v,variant:y}=(()=>{const t=e.useContext(o);if(void 0===t)throw s;return t})(),C={width:v,flexShrink:0,whiteSpace:"nowrap",..."open"===f&&{...d(m),[`& .${t.drawerClasses.paper}`]:d(m)},..."open"!==f&&{...p(m),[`& .${t.drawerClasses.paper}`]:p(m)},...h[y](f,m)};return i.default.createElement(t.Drawer,{open:"open"===f,variant:u[y],role:"menu","aria-hidden":"close"===f,onClose:x,sx:C,...n},i.default.createElement(l,null,!g&&c[y]&&i.default.createElement(t.IconButton,{onClick:w},i.default.createElement(a.default,null))),i.default.createElement(t.Divider,null),r)},exports.DrawerHeader=l,exports.getDrawerItemColors=(e,t)=>({color:t?e.palette.primary.main:void 0,fontWeight:t?e.typography.fontWeightBold:e.typography.fontWeightMedium});
+//# sourceMappingURL=index.js.map

package/drawer/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/drawer-provider/drawer-context.ts","../../../src/drawer-provider/drawer-mixins.ts","../../../src/drawer/drawer.tsx","../../../src/drawer/drawer.types.ts"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"../drawer/drawer.types\";\n\nexport interface DrawerContextProps {\n  selectedItemId?: string;\n  state: DrawerState;\n  variant: DrawerVariant;\n  drawerWidth: number;\n  underAppBar: boolean;\n  switchState(): void;\n  close(): void;\n  collapse(): void;\n  open(): void;\n  setState: (state: DrawerState) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps | undefined>(undefined);\nexport const UndefinedProvider = new Error(\"DrawerContext.Provider is required and was undefined\");\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext);\n\n  if (context === undefined) {\n    throw UndefinedProvider;\n  }\n\n  return context;\n};\n","import { Theme, CSSObject } from \"@mui/material/styles\";\n\nexport const drawerWidth = 240;\n\nexport const openedMixin = (theme: Theme): CSSObject => ({\n  width: drawerWidth,\n  transition: theme.transitions.create(\"width\", {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.enteringScreen,\n  }),\n  overflowX: \"hidden\",\n});\n\nexport const closedMixin = (theme: Theme): CSSObject => ({\n  transition: theme.transitions.create(\"width\", {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.leavingScreen,\n  }),\n  overflowX: \"hidden\",\n  width: `calc(${theme.spacing(7)} + 1px)`,\n  [theme.breakpoints.up(\"sm\")]: {\n    width: `calc(${theme.spacing(8)} + 1px)`,\n  },\n});\n","import React from \"react\";\nimport {\n  SxProps,\n  Theme,\n  drawerClasses,\n  styled,\n  Drawer as MuiDrawer,\n  Divider,\n  IconButton,\n  useTheme,\n  paperClasses,\n} from \"@mui/material\";\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport { DrawerComponent, DrawerProps, DrawerState, DrawerVariant } from \"./drawer.types\";\nimport { useDrawer } from \"../drawer-provider/drawer-context\";\nimport { closedMixin, openedMixin } from \"../drawer-provider/drawer-mixins\";\n\nexport const DrawerHeader = styled(\"div\")(({ theme }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"flex-end\",\n  padding: theme.spacing(0, 1),\n  ...theme.mixins.toolbar,\n}));\n\nconst showCloseButton: Record<DrawerVariant, boolean> = {\n  temporary: true,\n  mini: true,\n  persistent: true,\n  clipped: false,\n};\n\nconst muiDrawerVariant: Record<DrawerVariant, \"permanent\" | \"persistent\" | \"temporary\"> = {\n  temporary: \"temporary\",\n  mini: \"permanent\",\n  clipped: \"permanent\",\n  persistent: \"persistent\",\n};\n\ntype SxGenerator = (state: DrawerState, theme: Theme) => SxProps<Theme>;\nconst NoopSxGenerator = () => ({});\nconst variantsSx: Readonly<Record<DrawerVariant, SxGenerator>> = {\n  mini: (state: DrawerState, theme: Theme) => ({\n    boxSizing: \"border-box\",\n    [`& .${paperClasses.root}`]: {\n      zIndex: theme.zIndex.drawer - 1,\n    },\n  }),\n  temporary: NoopSxGenerator,\n  clipped: NoopSxGenerator,\n  persistent: NoopSxGenerator,\n};\n\nexport const Drawer: DrawerComponent = ({ children, ...rest }: DrawerProps) => {\n  const theme = useTheme();\n  const { state, switchState, underAppBar, close, drawerWidth, variant } = useDrawer();\n\n  const sx: any = {\n    width: drawerWidth,\n    flexShrink: 0,\n    whiteSpace: \"nowrap\",\n    ...(state === \"open\" && {\n      ...openedMixin(theme),\n      [`& .${drawerClasses.paper}`]: openedMixin(theme),\n    }),\n    ...(state !== \"open\" && {\n      ...closedMixin(theme),\n      [`& .${drawerClasses.paper}`]: closedMixin(theme),\n    }),\n    ...variantsSx[variant](state, theme),\n  };\n\n  return (\n    <MuiDrawer\n      open={state === \"open\"}\n      variant={muiDrawerVariant[variant]}\n      role=\"menu\"\n      aria-hidden={state === \"close\"}\n      onClose={close}\n      sx={sx}\n      {...rest}\n    >\n      <DrawerHeader>\n        {!underAppBar && showCloseButton[variant] && (\n          <IconButton onClick={switchState}>\n            <ChevronLeftIcon />\n          </IconButton>\n        )}\n      </DrawerHeader>\n      <Divider />\n      {children}\n    </MuiDrawer>\n  );\n};\n","import { FunctionComponent, ReactElement } from \"react\";\nimport { BulletVariant } from \"../bullet\";\nimport { LabelVariant } from \"../label\";\nimport { DrawerProps as MuiDrawerProps, Theme } from \"@mui/material\";\nimport { DrawerAppBarProps } from \"../drawer-app-bar\";\n\nexport type DrawerVariant = \"temporary\" | \"mini\" | \"persistent\" | \"clipped\";\nexport type DrawerState = \"open\" | \"collapse\" | \"close\";\nexport type DrawerSize = \"small\" | \"medium\";\n\nexport interface DrawerItemAvatar {\n  src: string;\n  alt: string;\n}\n\nexport interface DrawerItemLabel {\n  text: string;\n  variant: LabelVariant;\n}\n\nexport interface DrawerItemBullet {\n  variant: BulletVariant;\n}\n\nexport interface DrawerNavigationItemLink {\n  id: string;\n  text: string;\n  href: string;\n  icon?: ReactElement;\n  avatar?: DrawerItemAvatar;\n  label?: DrawerItemLabel;\n  bullet?: DrawerItemBullet;\n}\n\nexport type DrawerNavigationItemCollapsable = Pick<\n  DrawerNavigationItemLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  items: DrawerNavigationItem[];\n};\n\nexport type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;\n\nexport interface DrawerNavigationSection {\n  title?: string;\n  items: DrawerNavigationItem[];\n}\n\nexport interface DrawerNavigation {\n  items: DrawerNavigationSection[];\n}\n\nexport interface DrawerContentProps {\n  /**\n   * Object with the content that has to be rendered\n   */\n  nav: DrawerNavigation;\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n}\n\nexport type DrawerContentComponent = FunctionComponent<DrawerContentProps>;\nexport type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;\n\nexport interface DrawerProps extends MuiDrawerProps {\n  children: DrawerContentElement;\n}\n\nexport type DrawerComponent = FunctionComponent<DrawerProps>;\nexport type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;\n\nexport const getDrawerItemColors = (theme: Theme, selected: boolean | undefined) => ({\n  color: selected ? theme.palette.primary.main : undefined,\n  fontWeight: selected ? theme.typography.fontWeightBold : theme.typography.fontWeightMedium,\n});\n\nexport type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;\nexport type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","openedMixin","theme","width","transition","transitions","create","easing","sharp","duration","enteringScreen","overflowX","closedMixin","leavingScreen","spacing","breakpoints","up","DrawerHeader","styled","display","alignItems","justifyContent","padding","mixins","toolbar","showCloseButton","temporary","mini","persistent","clipped","muiDrawerVariant","NoopSxGenerator","variantsSx","state","boxSizing","paperClasses","root","zIndex","drawer","children","rest","useTheme","switchState","underAppBar","close","drawerWidth","variant","context","useContext","useDrawer","sx","flexShrink","whiteSpace","drawerClasses","paper","React","createElement","MuiDrawer","open","role","onClose","IconButton","onClick","ChevronLeftIcon","Divider","selected","color","palette","primary","main","fontWeight","typography","fontWeightBold","fontWeightMedium"],"mappings":"6PAgBO,MAAMA,EAAgBC,EAAAA,mBAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCb9BC,EAAeC,IAA6B,CACvDC,MAHyB,IAIzBC,WAAYF,EAAMG,YAAYC,OAAO,QAAS,CAC5CC,OAAQL,EAAMG,YAAYE,OAAOC,MACjCC,SAAUP,EAAMG,YAAYI,SAASC,iBAEvCC,UAAW,WAGAC,EAAeV,IAA6B,CACvDE,WAAYF,EAAMG,YAAYC,OAAO,QAAS,CAC5CC,OAAQL,EAAMG,YAAYE,OAAOC,MACjCC,SAAUP,EAAMG,YAAYI,SAASI,gBAEvCF,UAAW,SACXR,MAAO,QAAQD,EAAMY,QAAQ,YAC7B,CAACZ,EAAMa,YAAYC,GAAG,OAAQ,CAC5Bb,MAAO,QAAQD,EAAMY,QAAQ,eCJpBG,EAAeC,EAAAA,OAAO,MAAPA,EAAc,EAAGhB,YAAa,CACxDiB,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASpB,EAAMY,QAAQ,EAAG,MACvBZ,EAAMqB,OAAOC,YAGZC,EAAkD,CACtDC,WAAW,EACXC,MAAM,EACNC,YAAY,EACZC,SAAS,GAGLC,EAAoF,CACxFJ,UAAW,YACXC,KAAM,YACNE,QAAS,YACTD,WAAY,cAIRG,EAAkB,KAAO,CAAE,GAC3BC,EAA2D,CAC/DL,KAAM,CAACM,EAAoB/B,KAAkB,CAC3CgC,UAAW,aACX,CAAC,MAAMC,eAAaC,QAAS,CAC3BC,OAAQnC,EAAMmC,OAAOC,OAAS,KAGlCZ,UAAWK,EACXF,QAASE,EACTH,WAAYG,kBAGyB,EAAGQ,cAAaC,MACrD,MAAMtC,EAAQuC,EAAAA,YACRR,MAAEA,EAAKS,YAAEA,EAAWC,YAAEA,EAAWC,MAAEA,EAAKC,YAAEA,EAAWC,QAAEA,GFpCtC,MACvB,MAAMC,EAAUC,aAAWpD,GAE3B,QAAgBE,IAAZiD,EACF,MAAMhD,EAGR,OAAOgD,CAAO,EE6B2DE,GAEnEC,EAAU,CACd/C,MAAO0C,EACPM,WAAY,EACZC,WAAY,YACE,SAAVnB,GAAoB,IACnBhC,EAAYC,GACf,CAAC,MAAMmD,EAAaA,cAACC,SAAUrD,EAAYC,OAE/B,SAAV+B,GAAoB,IACnBrB,EAAYV,GACf,CAAC,MAAMmD,EAAaA,cAACC,SAAU1C,EAAYV,OAE1C8B,EAAWc,GAASb,EAAO/B,IAGhC,OACEqD,EAAA,QAAAC,cAACC,EAAAA,OAAS,CACRC,KAAgB,SAAVzB,EACNa,QAAShB,EAAiBgB,GAC1Ba,KAAK,OACQ,cAAU,UAAV1B,EACb2B,QAAShB,EACTM,GAAIA,KACAV,GAEJe,EAAAA,QAAAC,cAACvC,EACE,MAAC0B,GAAelB,EAAgBqB,IAC/BS,EAAC,QAAAC,cAAAK,EAAUA,WAAC,CAAAC,QAASpB,GACnBa,EAAAA,QAAAC,cAACO,EAAAA,QAAe,QAItBR,UAAAC,cAACQ,EAAOA,QAAG,MACVzB,EAEH,qDCnB+B,CAACrC,EAAc+D,KAAmC,CACnFC,MAAOD,EAAW/D,EAAMiE,QAAQC,QAAQC,UAAOvE,EAC/CwE,WAAYL,EAAW/D,EAAMqE,WAAWC,eAAiBtE,EAAMqE,WAAWE"}

package/drawer/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/drawer",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/drawer",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/drawer-app-bar/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material"),r=require("@mui/icons-material/Menu");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=i(e),o=n(r);const s=e.createContext(void 0),c=new Error("DrawerContext.Provider is required and was undefined"),d={temporary:!1,mini:!0,persistent:!0,clipped:!0},u={temporary:()=>!0,mini:e=>"open"!==e,persistent:()=>!0,clipped:()=>!1};exports.DrawerAppBar=({title:r,sx:n,children:i,...l})=>{const p=t.useTheme(),{state:f,variant:m,switchState:g,drawerWidth:h,underAppBar:v}=(()=>{const t=e.useContext(s);if(void 0===t)throw c;return t})(),w=d[m]&&!v&&{transition:p.transitions.create(["width","margin"],{easing:p.transitions.easing.sharp,duration:p.transitions.duration.leavingScreen}),..."open"===f&&{marginLeft:h,width:`calc(100% - ${h}px)`,transition:p.transitions.create(["width","margin"],{easing:p.transitions.easing.sharp,duration:p.transitions.duration.enteringScreen})}}||{};return a.createElement(t.AppBar,{position:v?"fixed":void 0,...l,sx:{...n,...w,zIndex:e=>e.zIndex.drawer+(v?1:0)}},a.createElement(t.Toolbar,null,a.createElement(t.IconButton,{color:"inherit","aria-label":"open drawer",onClick:g,edge:"start",sx:{marginRight:5,display:u[m](f)?void 0:"none"}},a.createElement(o.default,null)),r&&a.createElement(t.Typography,{variant:"h6",component:"h1",role:"heading","aria-level":1,noWrap:!0},r),i))};
+//# sourceMappingURL=index.js.map

package/drawer-app-bar/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/drawer-provider/drawer-context.ts","../../../src/drawer-app-bar/drawer-app-bar.tsx"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"../drawer/drawer.types\";\n\nexport interface DrawerContextProps {\n  selectedItemId?: string;\n  state: DrawerState;\n  variant: DrawerVariant;\n  drawerWidth: number;\n  underAppBar: boolean;\n  switchState(): void;\n  close(): void;\n  collapse(): void;\n  open(): void;\n  setState: (state: DrawerState) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps | undefined>(undefined);\nexport const UndefinedProvider = new Error(\"DrawerContext.Provider is required and was undefined\");\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext);\n\n  if (context === undefined) {\n    throw UndefinedProvider;\n  }\n\n  return context;\n};\n","import * as React from \"react\";\nimport {\n  AppBar as MuiAppBar,\n  Toolbar,\n  IconButton,\n  Typography,\n  useTheme,\n  Theme,\n} from \"@mui/material\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport { useDrawer } from \"../drawer-provider/drawer-context\";\nimport { AppBarProps as MuiAppBarProps } from \"@mui/material\";\nimport { DrawerState, DrawerVariant } from \"../drawer/drawer.types\";\n\nconst moveWithDrawer: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  persistent: true,\n  clipped: true,\n};\n\nconst showMenuButton: Record<DrawerVariant, (state: DrawerState) => boolean> = {\n  temporary: () => true,\n  mini: (state) => state !== \"open\",\n  persistent: () => true,\n  clipped: () => false,\n};\n\nexport interface DrawerAppBarProps extends MuiAppBarProps {\n  title?: string;\n}\n\nexport const DrawerAppBar = ({ title, sx, children, ...rest }: DrawerAppBarProps) => {\n  const theme = useTheme();\n  const { state, variant, switchState, drawerWidth, underAppBar } = useDrawer();\n\n  const rootSx =\n    (moveWithDrawer[variant] &&\n      !underAppBar && {\n        transition: theme.transitions.create([\"width\", \"margin\"], {\n          easing: theme.transitions.easing.sharp,\n          duration: theme.transitions.duration.leavingScreen,\n        }),\n        ...(state === \"open\" && {\n          marginLeft: drawerWidth,\n          width: `calc(100% - ${drawerWidth}px)`,\n          transition: theme.transitions.create([\"width\", \"margin\"], {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.enteringScreen,\n          }),\n        }),\n      }) ||\n    {};\n\n  return (\n    <MuiAppBar\n      position={underAppBar ? \"fixed\" : undefined}\n      {...rest}\n      sx={{\n        ...sx,\n        ...rootSx,\n        zIndex: (theme: Theme) => theme.zIndex.drawer + (underAppBar ? 1 : 0),\n      }}\n    >\n      <Toolbar>\n        <IconButton\n          color=\"inherit\"\n          aria-label=\"open drawer\"\n          onClick={switchState}\n          edge=\"start\"\n          sx={{\n            marginRight: 5,\n            display: showMenuButton[variant](state) ? undefined : \"none\",\n          }}\n        >\n          <MenuIcon />\n        </IconButton>\n        {title && (\n          <Typography variant=\"h6\" component=\"h1\" role=\"heading\" aria-level={1} noWrap>\n            {title}\n          </Typography>\n        )}\n        {children}\n      </Toolbar>\n    </MuiAppBar>\n  );\n};\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","moveWithDrawer","temporary","mini","persistent","clipped","showMenuButton","state","title","sx","children","rest","theme","useTheme","variant","switchState","drawerWidth","underAppBar","context","useContext","useDrawer","rootSx","transition","transitions","create","easing","sharp","duration","leavingScreen","marginLeft","width","enteringScreen","React","createElement","MuiAppBar","AppBar","position","zIndex","drawer","Toolbar","IconButton","color","onClick","edge","marginRight","display","MenuIcon","Typography","component","role","noWrap"],"mappings":"qhBAgBO,MAAMA,EAAgBC,EAAAA,mBAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCHrCC,EAAiD,CACrDC,WAAW,EACXC,MAAM,EACNC,YAAY,EACZC,SAAS,GAGLC,EAAyE,CAC7EJ,UAAW,KAAM,EACjBC,KAAOI,GAAoB,SAAVA,EACjBH,WAAY,KAAM,EAClBC,QAAS,KAAM,wBAOW,EAAGG,QAAOC,KAAIC,cAAaC,MACrD,MAAMC,EAAQC,EAAAA,YACRN,MAAEA,EAAKO,QAAEA,EAAOC,YAAEA,EAAWC,YAAEA,EAAWC,YAAEA,GDf3B,MACvB,MAAMC,EAAUC,aAAWvB,GAE3B,QAAgBE,IAAZoB,EACF,MAAMnB,EAGR,OAAOmB,CAAO,ECQoDE,GAE5DC,EACHpB,EAAea,KACbG,GAAe,CACdK,WAAYV,EAAMW,YAAYC,OAAO,CAAC,QAAS,UAAW,CACxDC,OAAQb,EAAMW,YAAYE,OAAOC,MACjCC,SAAUf,EAAMW,YAAYI,SAASC,mBAEzB,SAAVrB,GAAoB,CACtBsB,WAAYb,EACZc,MAAO,eAAed,OACtBM,WAAYV,EAAMW,YAAYC,OAAO,CAAC,QAAS,UAAW,CACxDC,OAAQb,EAAMW,YAAYE,OAAOC,MACjCC,SAAUf,EAAMW,YAAYI,SAASI,oBAI7C,GAEF,OACEC,EAACC,cAAAC,EAASC,QACRC,SAAUnB,EAAc,aAAUnB,KAC9Ba,EACJF,GAAI,IACCA,KACAY,EACHgB,OAASzB,GAAiBA,EAAMyB,OAAOC,QAAUrB,EAAc,EAAI,KAGrEe,EAAAC,cAACM,EAAAA,QAAO,KACNP,EAAAC,cAACO,EAAAA,WACC,CAAAC,MAAM,uBACK,cACXC,QAAS3B,EACT4B,KAAK,QACLlC,GAAI,CACFmC,YAAa,EACbC,QAASvC,EAAeQ,GAASP,QAAST,EAAY,SAGxDkC,EAACC,cAAAa,iBAEFtC,GACCwB,EAACC,cAAAc,EAAAA,YAAWjC,QAAQ,KAAKkC,UAAU,KAAKC,KAAK,UAAsB,aAAA,EAAGC,QAAM,GACzE1C,GAGJE,GAGL"}

package/drawer-app-bar/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/drawer-app-bar",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/drawer-app-bar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/drawer-app-bar",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/drawer-content/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material");require("@mui/icons-material/ChevronLeft");var a=require("@mui/icons-material/ExpandMore"),r=require("@mui/icons-material/ChevronRight"),l=require("react-router-dom");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e),o=i(a),s=i(r);const c=t.styled(t.ListSubheader,{shouldForwardProp:e=>"size"!==e})((({size:e,theme:t})=>({lineHeight:"small"===e?t.typography.pxToRem(40):void 0}))),d=e.createContext(void 0),m=new Error("DrawerContext.Provider is required and was undefined"),u=()=>{const t=e.useContext(d);if(void 0===t)throw m;return t};t.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar})));const p=(e,t)=>({color:t?e.palette.primary.main:void 0,fontWeight:t?e.typography.fontWeightBold:e.typography.fontWeightMedium}),f=({text:a,icon:r,selected:l,items:i,size:c="medium",level:d,sx:m={}})=>{const{state:f}=u(),h=e.useRef(null),{palette:g,spacing:x}=t.useTheme(),[v,y]=e.useState(!1),{color:E,fontWeight:b}=p(t.useTheme(),l),T=n.default.createElement(t.List,{component:"div",disablePadding:!0},i.map((e=>n.default.createElement(z,{key:e.id,level:d+1,item:e,size:c})))),w="collapse"===f&&0===d?{position:"absolute",right:0}:{};return n.default.createElement(n.default.Fragment,null,n.default.createElement(t.ListItemButton,{ref:h,selected:l,"aria-label":a,onClick:()=>y((e=>!e)),dense:"small"===c,sx:{...m,pl:"open"===f?x(2+1.5*d):void 0,backgroundColor:v?g.action.hover:void 0}},r&&n.default.createElement(t.ListItemIcon,{sx:{color:E}},r),n.default.createElement(t.ListItemText,{disableTypography:!0,primary:a,sx:{color:E,fontWeight:b,opacity:"collapse"===f&&0===d?0:void 0}}),v&&"open"===f?n.default.createElement(o.default,{sx:[{color:E,ml:2},w]}):n.default.createElement(s.default,{sx:[{color:E,ml:2},w]})),"open"===f?n.default.createElement(t.Collapse,{in:v,timeout:"auto",unmountOnExit:!0,"aria-label":`${a} collapse submenu`},T):n.default.createElement(t.Popover,{open:v,PaperProps:{elevation:0,variant:"outlined"},"aria-label":`${a} popover submenu`,anchorEl:h.current,onClose:()=>y(!1),anchorOrigin:{vertical:"top",horizontal:"right"}},T))},h="RdsBullet-root",g=({variant:e="primary",sx:a})=>n.default.createElement(t.Badge,{color:e,variant:"dot",className:h,role:"bullet","aria-describedby":e,sx:a}),x=({text:e,variant:a="default",textTransform:r="capitalize",sx:l})=>{const{palette:i,typography:o}=t.useTheme(),s={default:"light"===i.mode?i.grey[100]:i.grey[900],primary:i.primary.light,secondary:i.secondary.light,info:i.info.light,warning:i.warning.light,error:i.error.light,success:i.success.light},c={default:i.getContrastText(s.default),primary:i.primary.contrastText,secondary:i.secondary.contrastText,info:i.info.contrastText,warning:i.warning.contrastText,error:i.error.contrastText,success:i.success.contrastText};return n.default.createElement(t.Box,{height:24,minWidth:22,display:"inline-flex",justifyContent:"center",alignItems:"center",bgcolor:s[a],color:c[a],fontSize:o.caption.fontSize,fontWeight:o.fontWeightBold,lineHeight:0,textTransform:r,whiteSpace:"nowrap",borderRadius:2,role:"label","aria-label":`${e} ${a} label`,py:0,px:1,sx:{cursor:"default",...l}},e)},v=e.forwardRef(((e,t)=>{const{href:a,...r}=e;return n.default.createElement(l.Link,{ref:t,to:a,...r})})),y=e.forwardRef(((e,a)=>n.default.createElement(t.Link,{...e,component:v}))),E=t.styled(y)((({theme:e})=>({color:e.palette.text.primary}))),b={minWidth:0,justifyContent:"center",marginRight:"auto"},T=({text:e,icon:a,avatar:r,label:l,bullet:i,href:o,selected:s,size:c="medium",level:d,sx:m})=>{const{state:f}=u(),h=t.useTheme(),{color:v,fontWeight:y}=p(h,s);return n.default.createElement(t.ListItemButton,{LinkComponent:E,dense:"small"===c,"aria-label":e,href:o,selected:s,sx:{...m,pl:"open"===f?h.spacing(2+1.5*d):void 0,..."collapse"===f&&{paddingHorizontal:h.spacing(2.5),justifyContent:"center"}}},a&&n.default.createElement(t.ListItemIcon,{sx:{color:v,..."collapse"===f&&0===d&&b}},a),r&&n.default.createElement(t.ListItemAvatar,{sx:{..."collapse"===f&&0===d&&b}},n.default.createElement(t.Avatar,{alt:r.alt,src:r.src,sx:{..."small"===c&&{width:24,height:24},..."collapse"===f&&{width:30,height:30}}})),n.default.createElement(t.ListItemText,{disableTypography:!0,primary:e,sx:{color:v,fontWeight:y,opacity:"collapse"===f&&0===d?0:void 0}}),l&&"open"===f&&n.default.createElement(x,{text:l.text,variant:l.variant,sx:{ml:2}}),i&&"open"===f&&n.default.createElement(g,{variant:i.variant,sx:{ml:2}}))},z=({item:e,size:t="medium",level:a=0})=>{const{selectedItemId:r}=u();if("items"in e){const{id:l,text:i,icon:o,items:s}=e,c=s.some((e=>e.id===r));return n.default.createElement(f,{size:t,selected:l===r||c,text:i,icon:o,items:s,level:a})}{const{id:l,text:i,icon:o,avatar:s,label:c,bullet:d,href:m}=e;return n.default.createElement(T,{selected:l===r,size:t,text:i,icon:o,avatar:s,label:c,bullet:d,href:m,level:a})}},w=({title:e,items:a,size:r="medium"})=>{const{state:l}=u(),{spacing:i}=t.useTheme();return n.default.createElement(n.default.Fragment,null,e&&"open"===l&&n.default.createElement(c,{size:r,role:"heading"},e),n.default.createElement(t.List,{sx:{paddingTop:"small"===r?i(0):void 0,paddingY:"collapse"===l?0:void 0}},a.map((e=>n.default.createElement(z,{key:e.id,item:e,size:r})))))};exports.DrawerContent=({nav:{items:e},size:t="medium"})=>n.default.createElement(n.default.Fragment,null,e.map((({title:e,items:a},r)=>n.default.createElement(w,{key:r,title:e,items:a,size:t}))));
+//# sourceMappingURL=index.js.map

package/drawer-content/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/drawer-subheader/drawer-subheader.tsx","../../../src/drawer-provider/drawer-context.ts","../../../src/drawer/drawer.tsx","../../../src/drawer/drawer.types.ts","../../../src/drawer-item/drawer-menu-item.tsx","../../../src/bullet/bullet.tsx","../../../src/label/label.tsx","../../../src/link/link.tsx","../../../src/drawer-item/drawer-item-link.tsx","../../../src/drawer-item/drawer-item.tsx","../../../src/drawer-section/drawer-section.tsx","../../../src/drawer-content/drawer-content.tsx"],"sourcesContent":["import { ListSubheader, ListSubheaderProps, styled } from \"@mui/material\";\nimport { DrawerSize } from \"../drawer/drawer.types\";\n\nexport interface DrawerSubheaderProps extends ListSubheaderProps {\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n}\n\nexport const DrawerSubheader = styled(ListSubheader, {\n  shouldForwardProp: (prop) => prop !== \"size\",\n})<DrawerSubheaderProps>(({ size, theme }) => ({\n  lineHeight: size === \"small\" ? theme.typography.pxToRem(40) : undefined,\n}));\n","import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"../drawer/drawer.types\";\n\nexport interface DrawerContextProps {\n  selectedItemId?: string;\n  state: DrawerState;\n  variant: DrawerVariant;\n  drawerWidth: number;\n  underAppBar: boolean;\n  switchState(): void;\n  close(): void;\n  collapse(): void;\n  open(): void;\n  setState: (state: DrawerState) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps | undefined>(undefined);\nexport const UndefinedProvider = new Error(\"DrawerContext.Provider is required and was undefined\");\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext);\n\n  if (context === undefined) {\n    throw UndefinedProvider;\n  }\n\n  return context;\n};\n","import React from \"react\";\nimport {\n  SxProps,\n  Theme,\n  drawerClasses,\n  styled,\n  Drawer as MuiDrawer,\n  Divider,\n  IconButton,\n  useTheme,\n  paperClasses,\n} from \"@mui/material\";\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport { DrawerComponent, DrawerProps, DrawerState, DrawerVariant } from \"./drawer.types\";\nimport { useDrawer } from \"../drawer-provider/drawer-context\";\nimport { closedMixin, openedMixin } from \"../drawer-provider/drawer-mixins\";\n\nexport const DrawerHeader = styled(\"div\")(({ theme }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"flex-end\",\n  padding: theme.spacing(0, 1),\n  ...theme.mixins.toolbar,\n}));\n\nconst showCloseButton: Record<DrawerVariant, boolean> = {\n  temporary: true,\n  mini: true,\n  persistent: true,\n  clipped: false,\n};\n\nconst muiDrawerVariant: Record<DrawerVariant, \"permanent\" | \"persistent\" | \"temporary\"> = {\n  temporary: \"temporary\",\n  mini: \"permanent\",\n  clipped: \"permanent\",\n  persistent: \"persistent\",\n};\n\ntype SxGenerator = (state: DrawerState, theme: Theme) => SxProps<Theme>;\nconst NoopSxGenerator = () => ({});\nconst variantsSx: Readonly<Record<DrawerVariant, SxGenerator>> = {\n  mini: (state: DrawerState, theme: Theme) => ({\n    boxSizing: \"border-box\",\n    [`& .${paperClasses.root}`]: {\n      zIndex: theme.zIndex.drawer - 1,\n    },\n  }),\n  temporary: NoopSxGenerator,\n  clipped: NoopSxGenerator,\n  persistent: NoopSxGenerator,\n};\n\nexport const Drawer: DrawerComponent = ({ children, ...rest }: DrawerProps) => {\n  const theme = useTheme();\n  const { state, switchState, underAppBar, close, drawerWidth, variant } = useDrawer();\n\n  const sx: any = {\n    width: drawerWidth,\n    flexShrink: 0,\n    whiteSpace: \"nowrap\",\n    ...(state === \"open\" && {\n      ...openedMixin(theme),\n      [`& .${drawerClasses.paper}`]: openedMixin(theme),\n    }),\n    ...(state !== \"open\" && {\n      ...closedMixin(theme),\n      [`& .${drawerClasses.paper}`]: closedMixin(theme),\n    }),\n    ...variantsSx[variant](state, theme),\n  };\n\n  return (\n    <MuiDrawer\n      open={state === \"open\"}\n      variant={muiDrawerVariant[variant]}\n      role=\"menu\"\n      aria-hidden={state === \"close\"}\n      onClose={close}\n      sx={sx}\n      {...rest}\n    >\n      <DrawerHeader>\n        {!underAppBar && showCloseButton[variant] && (\n          <IconButton onClick={switchState}>\n            <ChevronLeftIcon />\n          </IconButton>\n        )}\n      </DrawerHeader>\n      <Divider />\n      {children}\n    </MuiDrawer>\n  );\n};\n","import { FunctionComponent, ReactElement } from \"react\";\nimport { BulletVariant } from \"../bullet\";\nimport { LabelVariant } from \"../label\";\nimport { DrawerProps as MuiDrawerProps, Theme } from \"@mui/material\";\nimport { DrawerAppBarProps } from \"../drawer-app-bar\";\n\nexport type DrawerVariant = \"temporary\" | \"mini\" | \"persistent\" | \"clipped\";\nexport type DrawerState = \"open\" | \"collapse\" | \"close\";\nexport type DrawerSize = \"small\" | \"medium\";\n\nexport interface DrawerItemAvatar {\n  src: string;\n  alt: string;\n}\n\nexport interface DrawerItemLabel {\n  text: string;\n  variant: LabelVariant;\n}\n\nexport interface DrawerItemBullet {\n  variant: BulletVariant;\n}\n\nexport interface DrawerNavigationItemLink {\n  id: string;\n  text: string;\n  href: string;\n  icon?: ReactElement;\n  avatar?: DrawerItemAvatar;\n  label?: DrawerItemLabel;\n  bullet?: DrawerItemBullet;\n}\n\nexport type DrawerNavigationItemCollapsable = Pick<\n  DrawerNavigationItemLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  items: DrawerNavigationItem[];\n};\n\nexport type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;\n\nexport interface DrawerNavigationSection {\n  title?: string;\n  items: DrawerNavigationItem[];\n}\n\nexport interface DrawerNavigation {\n  items: DrawerNavigationSection[];\n}\n\nexport interface DrawerContentProps {\n  /**\n   * Object with the content that has to be rendered\n   */\n  nav: DrawerNavigation;\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n}\n\nexport type DrawerContentComponent = FunctionComponent<DrawerContentProps>;\nexport type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;\n\nexport interface DrawerProps extends MuiDrawerProps {\n  children: DrawerContentElement;\n}\n\nexport type DrawerComponent = FunctionComponent<DrawerProps>;\nexport type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;\n\nexport const getDrawerItemColors = (theme: Theme, selected: boolean | undefined) => ({\n  color: selected ? theme.palette.primary.main : undefined,\n  fontWeight: selected ? theme.typography.fontWeightBold : theme.typography.fontWeightMedium,\n});\n\nexport type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;\nexport type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;\n","import {\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  Collapse,\n  List,\n  useTheme,\n  Popover,\n  SxProps,\n  Theme,\n} from \"@mui/material\";\nimport React, { ReactElement, useState, useRef } from \"react\";\nimport { DrawerNavigationItem, DrawerSize, getDrawerItemColors } from \"~/drawer\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\nimport { DrawerItem } from \"./drawer-item\";\nimport { useDrawer } from \"~/drawer-provider\";\n\nexport interface DrawerMenuItemProps {\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n  /**\n   * Text displayed inside the item\n   */\n  text: string;\n  /**\n   * Icon displayed to the left\n   */\n  icon?: ReactElement;\n  /**\n   * The item has to be marked as selected\n   */\n  selected?: boolean;\n  /**\n   * Items that are going to be displayed inside\n   * the collapsable\n   */\n  items: DrawerNavigationItem[];\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level: number;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\nexport const DrawerMenuItem = ({\n  text,\n  icon,\n  selected,\n  items,\n  size = \"medium\",\n  level,\n  sx = {},\n}: DrawerMenuItemProps) => {\n  const { state } = useDrawer();\n  const anchorEl = useRef<HTMLDivElement | null>(null);\n  const { palette, spacing } = useTheme();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const { color, fontWeight } = getDrawerItemColors(useTheme(), selected);\n\n  const submenu = (\n    <List component=\"div\" disablePadding>\n      {items.map((item) => (\n        <DrawerItem key={item.id} level={level + 1} item={item} size={size} />\n      ))}\n    </List>\n  );\n\n  const collapsedButtonSx =\n    state === \"collapse\" && level === 0\n      ? {\n          position: \"absolute\",\n          right: 0,\n        }\n      : {};\n\n  return (\n    <>\n      <ListItemButton\n        ref={anchorEl}\n        selected={selected}\n        aria-label={text}\n        onClick={() => setMenuOpen((o) => !o)}\n        dense={size === \"small\"}\n        sx={{\n          ...sx,\n          pl: state === \"open\" ? spacing(2 + 1.5 * level) : undefined,\n          backgroundColor: menuOpen ? palette.action.hover : undefined,\n        }}\n      >\n        {icon && <ListItemIcon sx={{ color }}>{icon}</ListItemIcon>}\n        <ListItemText\n          disableTypography\n          primary={text}\n          sx={{ color, fontWeight, opacity: state === \"collapse\" && level === 0 ? 0 : undefined }}\n        />\n        {menuOpen && state === \"open\" ? (\n          <ExpandMoreIcon sx={[{ color, ml: 2 }, collapsedButtonSx]} />\n        ) : (\n          <ChevronRightIcon sx={[{ color, ml: 2 }, collapsedButtonSx]} />\n        )}\n      </ListItemButton>\n      {state === \"open\" ? (\n        <Collapse\n          in={menuOpen}\n          timeout=\"auto\"\n          unmountOnExit\n          aria-label={`${text} collapse submenu`}\n        >\n          {submenu}\n        </Collapse>\n      ) : (\n        <Popover\n          open={menuOpen}\n          PaperProps={{\n            elevation: 0,\n            variant: \"outlined\",\n          }}\n          aria-label={`${text} popover submenu`}\n          anchorEl={anchorEl.current}\n          onClose={() => setMenuOpen(false)}\n          anchorOrigin={{\n            vertical: \"top\",\n            horizontal: \"right\",\n          }}\n        >\n          {submenu}\n        </Popover>\n      )}\n    </>\n  );\n};\n","import { Badge, SxProps, Theme } from \"@mui/material\";\nimport React from \"react\";\n\nexport type BulletVariant = \"primary\" | \"secondary\" | \"default\" | \"info\" | \"warning\" | \"error\";\n\nexport const bulletClasses = {\n  root: \"RdsBullet-root\",\n};\n\nexport interface BulletProps {\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: BulletVariant;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Dot to attract the user attention\n */\nexport const Bullet = ({ variant = \"primary\", sx }: BulletProps) => {\n  return (\n    <Badge\n      color={variant}\n      variant=\"dot\"\n      className={bulletClasses.root}\n      role=\"bullet\"\n      aria-describedby={variant}\n      sx={sx}\n    />\n  );\n};\n","import { Box, SxProps, Theme, useTheme } from \"@mui/material\";\nimport React from \"react\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import React from \"react\";\nimport { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { LinkProps, Link as MuiLink } from \"@mui/material\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import React, { ReactElement } from \"react\";\nimport {\n  Avatar,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  SxProps,\n  Theme,\n  styled,\n  useTheme,\n} from \"@mui/material\";\nimport { Bullet } from \"~/bullet\";\nimport { Label } from \"~/label\";\nimport {\n  DrawerItemAvatar,\n  DrawerItemBullet,\n  DrawerItemLabel,\n  DrawerSize,\n  getDrawerItemColors,\n} from \"~/drawer/drawer.types\";\nimport { Link } from \"~/link\";\nimport { useDrawer } from \"~/drawer-provider\";\n\nexport interface DrawerItemLinkProps {\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n  /**\n   * Text displayed inside the item\n   */\n  text: string;\n  /**\n   * Url where the user is going to be redirected\n   * if the item is clicked\n   */\n  href: string;\n  /**\n   * Icon displayed to the left\n   */\n  icon?: ReactElement;\n  /**\n   * Avatar displayed to the left\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Label with extra info displayed to the right\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Bullet to attract the user attention displyed to the right\n   */\n  bullet?: DrawerItemBullet;\n  /**\n   * The item has to be marked as selected\n   */\n  selected?: boolean;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level: number;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nconst StyledLink = styled(Link)(({ theme }) => {\n  return {\n    color: theme.palette.text.primary,\n  };\n});\n\nconst sxCollapsedIcon = {\n  minWidth: 0,\n  justifyContent: \"center\",\n  marginRight: \"auto\",\n};\n\n/**\n * Clicable item inside a drawer\n */\nexport const DrawerItemLink = ({\n  text,\n  icon,\n  avatar,\n  label,\n  bullet,\n  href,\n  selected,\n  size = \"medium\",\n  level,\n  sx,\n}: DrawerItemLinkProps) => {\n  const { state } = useDrawer();\n  const theme = useTheme();\n  const { color, fontWeight } = getDrawerItemColors(theme, selected);\n\n  return (\n    <ListItemButton\n      LinkComponent={StyledLink}\n      dense={size === \"small\"}\n      aria-label={text}\n      href={href}\n      selected={selected}\n      sx={{\n        ...sx,\n        pl: state === \"open\" ? theme.spacing(2 + 1.5 * level) : undefined,\n        ...(state === \"collapse\" && {\n          paddingHorizontal: theme.spacing(2.5),\n          justifyContent: \"center\",\n        }),\n      }}\n    >\n      {icon && (\n        <ListItemIcon sx={{ color, ...(state === \"collapse\" && level === 0 && sxCollapsedIcon) }}>\n          {icon}\n        </ListItemIcon>\n      )}\n      {avatar && (\n        <ListItemAvatar\n          sx={{\n            ...(state === \"collapse\" && level === 0 && sxCollapsedIcon),\n          }}\n        >\n          <Avatar\n            alt={avatar.alt}\n            src={avatar.src}\n            sx={{\n              ...(size === \"small\" && { width: 24, height: 24 }),\n              ...(state === \"collapse\" && { width: 30, height: 30 }),\n            }}\n          />\n        </ListItemAvatar>\n      )}\n      <ListItemText\n        disableTypography\n        primary={text}\n        sx={{ color, fontWeight, opacity: state === \"collapse\" && level === 0 ? 0 : undefined }}\n      />\n      {label && state === \"open\" && (\n        <Label text={label.text} variant={label.variant} sx={{ ml: 2 }} />\n      )}\n      {bullet && state === \"open\" && <Bullet variant={bullet.variant} sx={{ ml: 2 }} />}\n    </ListItemButton>\n  );\n};\n","import React from \"react\";\nimport { DrawerMenuItem } from \"./drawer-menu-item\";\nimport { DrawerNavigationItem, DrawerSize } from \"~/drawer/drawer.types\";\nimport { DrawerItemLink } from \"./drawer-item-link\";\nimport { useDrawer } from \"~/drawer-provider\";\n\nexport interface DrawerItemProps {\n  /**\n   * Data to be rendered\n   */\n  item: DrawerNavigationItem;\n  /**\n   * Size of the item\n   */\n  size?: DrawerSize;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level?: number;\n}\n\nexport const DrawerItem = ({ item, size = \"medium\", level = 0 }: DrawerItemProps) => {\n  const { selectedItemId } = useDrawer();\n  if (\"items\" in item) {\n    const { id, text, icon, items } = item;\n    const childrenSelected = items.some((item) => item.id === selectedItemId);\n    return (\n      <DrawerMenuItem\n        size={size}\n        selected={id === selectedItemId || childrenSelected}\n        text={text}\n        icon={icon}\n        items={items}\n        level={level}\n      />\n    );\n  } else {\n    const { id, text, icon, avatar, label, bullet, href } = item;\n    return (\n      <DrawerItemLink\n        selected={id === selectedItemId}\n        size={size}\n        text={text}\n        icon={icon}\n        avatar={avatar}\n        label={label}\n        bullet={bullet}\n        href={href}\n        level={level}\n      />\n    );\n  }\n};\n","import { List, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { DrawerNavigationItem, DrawerSize } from \"../drawer/drawer.types\";\nimport { DrawerSubheader } from \"../drawer-subheader\";\nimport { DrawerItem } from \"../drawer-item/drawer-item\";\nimport { useDrawer } from \"../drawer-provider\";\n\nexport interface DrawerSectionProps {\n  /**\n   * Section title\n   */\n  title?: string;\n  /**\n   * List of items of that section\n   */\n  items: DrawerNavigationItem[];\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n}\n\n/**\n * Render a group of items inside the drawer\n * with an optional title\n */\nexport const DrawerSection = ({ title, items, size = \"medium\" }: DrawerSectionProps) => {\n  const { state } = useDrawer();\n  const { spacing } = useTheme();\n  return (\n    <>\n      {title && state === \"open\" && (\n        <DrawerSubheader size={size} role=\"heading\">\n          {title}\n        </DrawerSubheader>\n      )}\n      <List\n        sx={{\n          paddingTop: size === \"small\" ? spacing(0) : undefined,\n          paddingY: state === \"collapse\" ? 0 : undefined,\n        }}\n      >\n        {items.map((item) => (\n          <DrawerItem key={item.id} item={item} size={size} />\n        ))}\n      </List>\n    </>\n  );\n};\n","import React from \"react\";\nimport { DrawerSection } from \"../drawer-section\";\nimport { DrawerContentComponent, DrawerContentProps } from \"../drawer/drawer.types\";\n\n/**\n * Content to be shown inside a navigation\n */\nexport const DrawerContent: DrawerContentComponent = ({\n  nav: { items },\n  size = \"medium\",\n}: DrawerContentProps) => {\n  return (\n    <>\n      {items.map(({ title, items }, i) => (\n        <DrawerSection key={i} title={title} items={items} size={size} />\n      ))}\n    </>\n  );\n};\n"],"names":["DrawerSubheader","styled","ListSubheader","shouldForwardProp","prop","size","theme","lineHeight","typography","pxToRem","undefined","DrawerContext","createContext","UndefinedProvider","Error","useDrawer","context","useContext","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","getDrawerItemColors","selected","color","palette","primary","main","fontWeight","fontWeightBold","fontWeightMedium","DrawerMenuItem","text","icon","items","level","sx","state","anchorEl","useRef","useTheme","menuOpen","setMenuOpen","useState","submenu","React","createElement","List","component","disablePadding","map","item","DrawerItem","key","id","collapsedButtonSx","position","right","Fragment","ListItemButton","ref","onClick","o","dense","pl","backgroundColor","action","hover","ListItemIcon","ListItemText","disableTypography","opacity","ExpandMoreIcon","ml","ChevronRightIcon","Collapse","in","timeout","unmountOnExit","Popover","open","PaperProps","elevation","variant","current","onClose","anchorOrigin","vertical","horizontal","bulletClasses","Bullet","Badge","className","role","Label","textTransform","default","mode","grey","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","Box","height","minWidth","bgcolor","fontSize","caption","whiteSpace","borderRadius","py","px","cursor","LinkBehaviour","forwardRef","props","href","other","RouterLink","Link","to","_1","MuiLink","StyledLink","sxCollapsedIcon","marginRight","DrawerItemLink","avatar","label","bullet","LinkComponent","paddingHorizontal","ListItemAvatar","Avatar","alt","src","width","selectedItemId","childrenSelected","some","DrawerSection","title","paddingTop","paddingY","nav","i"],"mappings":"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"}

package/drawer-content/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/drawer-content",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.14.0"
+  }
+}

package/drawer-content/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/drawer-content",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/drawer-item/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),t=require("react");require("@mui/icons-material/ChevronLeft");var a=require("@mui/icons-material/ExpandMore"),r=require("@mui/icons-material/ChevronRight"),l=require("react-router-dom");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),i=o(a),s=o(r);const c=t.createContext(void 0),d=new Error("DrawerContext.Provider is required and was undefined"),u=()=>{const e=t.useContext(c);if(void 0===e)throw d;return e};e.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar})));const m=(e,t)=>({color:t?e.palette.primary.main:void 0,fontWeight:t?e.typography.fontWeightBold:e.typography.fontWeightMedium}),f="RdsBullet-root",p=({variant:t="primary",sx:a})=>n.default.createElement(e.Badge,{color:t,variant:"dot",className:f,role:"bullet","aria-describedby":t,sx:a}),h=({text:t,variant:a="default",textTransform:r="capitalize",sx:l})=>{const{palette:o,typography:i}=e.useTheme(),s={default:"light"===o.mode?o.grey[100]:o.grey[900],primary:o.primary.light,secondary:o.secondary.light,info:o.info.light,warning:o.warning.light,error:o.error.light,success:o.success.light},c={default:o.getContrastText(s.default),primary:o.primary.contrastText,secondary:o.secondary.contrastText,info:o.info.contrastText,warning:o.warning.contrastText,error:o.error.contrastText,success:o.success.contrastText};return n.default.createElement(e.Box,{height:24,minWidth:22,display:"inline-flex",justifyContent:"center",alignItems:"center",bgcolor:s[a],color:c[a],fontSize:i.caption.fontSize,fontWeight:i.fontWeightBold,lineHeight:0,textTransform:r,whiteSpace:"nowrap",borderRadius:2,role:"label","aria-label":`${t} ${a} label`,py:0,px:1,sx:{cursor:"default",...l}},t)},x=t.forwardRef(((e,t)=>{const{href:a,...r}=e;return n.default.createElement(l.Link,{ref:t,to:a,...r})})),g=t.forwardRef(((t,a)=>n.default.createElement(e.Link,{...t,component:x}))),v=e.styled(g)((({theme:e})=>({color:e.palette.text.primary}))),y={minWidth:0,justifyContent:"center",marginRight:"auto"},b=({text:t,icon:a,avatar:r,label:l,bullet:o,href:i,selected:s,size:c="medium",level:d,sx:f})=>{const{state:x}=u(),g=e.useTheme(),{color:b,fontWeight:E}=m(g,s);return n.default.createElement(e.ListItemButton,{LinkComponent:v,dense:"small"===c,"aria-label":t,href:i,selected:s,sx:{...f,pl:"open"===x?g.spacing(2+1.5*d):void 0,..."collapse"===x&&{paddingHorizontal:g.spacing(2.5),justifyContent:"center"}}},a&&n.default.createElement(e.ListItemIcon,{sx:{color:b,..."collapse"===x&&0===d&&y}},a),r&&n.default.createElement(e.ListItemAvatar,{sx:{..."collapse"===x&&0===d&&y}},n.default.createElement(e.Avatar,{alt:r.alt,src:r.src,sx:{..."small"===c&&{width:24,height:24},..."collapse"===x&&{width:30,height:30}}})),n.default.createElement(e.ListItemText,{disableTypography:!0,primary:t,sx:{color:b,fontWeight:E,opacity:"collapse"===x&&0===d?0:void 0}}),l&&"open"===x&&n.default.createElement(h,{text:l.text,variant:l.variant,sx:{ml:2}}),o&&"open"===x&&n.default.createElement(p,{variant:o.variant,sx:{ml:2}}))},E=({item:e,size:t="medium",level:a=0})=>{const{selectedItemId:r}=u();if("items"in e){const{id:l,text:o,icon:i,items:s}=e,c=s.some((e=>e.id===r));return n.default.createElement(w,{size:t,selected:l===r||c,text:o,icon:i,items:s,level:a})}{const{id:l,text:o,icon:i,avatar:s,label:c,bullet:d,href:u}=e;return n.default.createElement(b,{selected:l===r,size:t,text:o,icon:i,avatar:s,label:c,bullet:d,href:u,level:a})}},w=({text:a,icon:r,selected:l,items:o,size:c="medium",level:d,sx:f={}})=>{const{state:p}=u(),h=t.useRef(null),{palette:x,spacing:g}=e.useTheme(),[v,y]=t.useState(!1),{color:b,fontWeight:w}=m(e.useTheme(),l),T=n.default.createElement(e.List,{component:"div",disablePadding:!0},o.map((e=>n.default.createElement(E,{key:e.id,level:d+1,item:e,size:c})))),I="collapse"===p&&0===d?{position:"absolute",right:0}:{};return n.default.createElement(n.default.Fragment,null,n.default.createElement(e.ListItemButton,{ref:h,selected:l,"aria-label":a,onClick:()=>y((e=>!e)),dense:"small"===c,sx:{...f,pl:"open"===p?g(2+1.5*d):void 0,backgroundColor:v?x.action.hover:void 0}},r&&n.default.createElement(e.ListItemIcon,{sx:{color:b}},r),n.default.createElement(e.ListItemText,{disableTypography:!0,primary:a,sx:{color:b,fontWeight:w,opacity:"collapse"===p&&0===d?0:void 0}}),v&&"open"===p?n.default.createElement(i.default,{sx:[{color:b,ml:2},I]}):n.default.createElement(s.default,{sx:[{color:b,ml:2},I]})),"open"===p?n.default.createElement(e.Collapse,{in:v,timeout:"auto",unmountOnExit:!0,"aria-label":`${a} collapse submenu`},T):n.default.createElement(e.Popover,{open:v,PaperProps:{elevation:0,variant:"outlined"},"aria-label":`${a} popover submenu`,anchorEl:h.current,onClose:()=>y(!1),anchorOrigin:{vertical:"top",horizontal:"right"}},T))};exports.DrawerItem=E,exports.DrawerItemLink=b,exports.DrawerMenuItem=w;
+//# sourceMappingURL=index.js.map

package/drawer-item/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/drawer-provider/drawer-context.ts","../../../src/drawer/drawer.tsx","../../../src/drawer/drawer.types.ts","../../../src/bullet/bullet.tsx","../../../src/label/label.tsx","../../../src/link/link.tsx","../../../src/drawer-item/drawer-item-link.tsx","../../../src/drawer-item/drawer-item.tsx","../../../src/drawer-item/drawer-menu-item.tsx"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"../drawer/drawer.types\";\n\nexport interface DrawerContextProps {\n  selectedItemId?: string;\n  state: DrawerState;\n  variant: DrawerVariant;\n  drawerWidth: number;\n  underAppBar: boolean;\n  switchState(): void;\n  close(): void;\n  collapse(): void;\n  open(): void;\n  setState: (state: DrawerState) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps | undefined>(undefined);\nexport const UndefinedProvider = new Error(\"DrawerContext.Provider is required and was undefined\");\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext);\n\n  if (context === undefined) {\n    throw UndefinedProvider;\n  }\n\n  return context;\n};\n","import React from \"react\";\nimport {\n  SxProps,\n  Theme,\n  drawerClasses,\n  styled,\n  Drawer as MuiDrawer,\n  Divider,\n  IconButton,\n  useTheme,\n  paperClasses,\n} from \"@mui/material\";\nimport ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport { DrawerComponent, DrawerProps, DrawerState, DrawerVariant } from \"./drawer.types\";\nimport { useDrawer } from \"../drawer-provider/drawer-context\";\nimport { closedMixin, openedMixin } from \"../drawer-provider/drawer-mixins\";\n\nexport const DrawerHeader = styled(\"div\")(({ theme }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"flex-end\",\n  padding: theme.spacing(0, 1),\n  ...theme.mixins.toolbar,\n}));\n\nconst showCloseButton: Record<DrawerVariant, boolean> = {\n  temporary: true,\n  mini: true,\n  persistent: true,\n  clipped: false,\n};\n\nconst muiDrawerVariant: Record<DrawerVariant, \"permanent\" | \"persistent\" | \"temporary\"> = {\n  temporary: \"temporary\",\n  mini: \"permanent\",\n  clipped: \"permanent\",\n  persistent: \"persistent\",\n};\n\ntype SxGenerator = (state: DrawerState, theme: Theme) => SxProps<Theme>;\nconst NoopSxGenerator = () => ({});\nconst variantsSx: Readonly<Record<DrawerVariant, SxGenerator>> = {\n  mini: (state: DrawerState, theme: Theme) => ({\n    boxSizing: \"border-box\",\n    [`& .${paperClasses.root}`]: {\n      zIndex: theme.zIndex.drawer - 1,\n    },\n  }),\n  temporary: NoopSxGenerator,\n  clipped: NoopSxGenerator,\n  persistent: NoopSxGenerator,\n};\n\nexport const Drawer: DrawerComponent = ({ children, ...rest }: DrawerProps) => {\n  const theme = useTheme();\n  const { state, switchState, underAppBar, close, drawerWidth, variant } = useDrawer();\n\n  const sx: any = {\n    width: drawerWidth,\n    flexShrink: 0,\n    whiteSpace: \"nowrap\",\n    ...(state === \"open\" && {\n      ...openedMixin(theme),\n      [`& .${drawerClasses.paper}`]: openedMixin(theme),\n    }),\n    ...(state !== \"open\" && {\n      ...closedMixin(theme),\n      [`& .${drawerClasses.paper}`]: closedMixin(theme),\n    }),\n    ...variantsSx[variant](state, theme),\n  };\n\n  return (\n    <MuiDrawer\n      open={state === \"open\"}\n      variant={muiDrawerVariant[variant]}\n      role=\"menu\"\n      aria-hidden={state === \"close\"}\n      onClose={close}\n      sx={sx}\n      {...rest}\n    >\n      <DrawerHeader>\n        {!underAppBar && showCloseButton[variant] && (\n          <IconButton onClick={switchState}>\n            <ChevronLeftIcon />\n          </IconButton>\n        )}\n      </DrawerHeader>\n      <Divider />\n      {children}\n    </MuiDrawer>\n  );\n};\n","import { FunctionComponent, ReactElement } from \"react\";\nimport { BulletVariant } from \"../bullet\";\nimport { LabelVariant } from \"../label\";\nimport { DrawerProps as MuiDrawerProps, Theme } from \"@mui/material\";\nimport { DrawerAppBarProps } from \"../drawer-app-bar\";\n\nexport type DrawerVariant = \"temporary\" | \"mini\" | \"persistent\" | \"clipped\";\nexport type DrawerState = \"open\" | \"collapse\" | \"close\";\nexport type DrawerSize = \"small\" | \"medium\";\n\nexport interface DrawerItemAvatar {\n  src: string;\n  alt: string;\n}\n\nexport interface DrawerItemLabel {\n  text: string;\n  variant: LabelVariant;\n}\n\nexport interface DrawerItemBullet {\n  variant: BulletVariant;\n}\n\nexport interface DrawerNavigationItemLink {\n  id: string;\n  text: string;\n  href: string;\n  icon?: ReactElement;\n  avatar?: DrawerItemAvatar;\n  label?: DrawerItemLabel;\n  bullet?: DrawerItemBullet;\n}\n\nexport type DrawerNavigationItemCollapsable = Pick<\n  DrawerNavigationItemLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  items: DrawerNavigationItem[];\n};\n\nexport type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;\n\nexport interface DrawerNavigationSection {\n  title?: string;\n  items: DrawerNavigationItem[];\n}\n\nexport interface DrawerNavigation {\n  items: DrawerNavigationSection[];\n}\n\nexport interface DrawerContentProps {\n  /**\n   * Object with the content that has to be rendered\n   */\n  nav: DrawerNavigation;\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n}\n\nexport type DrawerContentComponent = FunctionComponent<DrawerContentProps>;\nexport type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;\n\nexport interface DrawerProps extends MuiDrawerProps {\n  children: DrawerContentElement;\n}\n\nexport type DrawerComponent = FunctionComponent<DrawerProps>;\nexport type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;\n\nexport const getDrawerItemColors = (theme: Theme, selected: boolean | undefined) => ({\n  color: selected ? theme.palette.primary.main : undefined,\n  fontWeight: selected ? theme.typography.fontWeightBold : theme.typography.fontWeightMedium,\n});\n\nexport type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;\nexport type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;\n","import { Badge, SxProps, Theme } from \"@mui/material\";\nimport React from \"react\";\n\nexport type BulletVariant = \"primary\" | \"secondary\" | \"default\" | \"info\" | \"warning\" | \"error\";\n\nexport const bulletClasses = {\n  root: \"RdsBullet-root\",\n};\n\nexport interface BulletProps {\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: BulletVariant;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Dot to attract the user attention\n */\nexport const Bullet = ({ variant = \"primary\", sx }: BulletProps) => {\n  return (\n    <Badge\n      color={variant}\n      variant=\"dot\"\n      className={bulletClasses.root}\n      role=\"bullet\"\n      aria-describedby={variant}\n      sx={sx}\n    />\n  );\n};\n","import { Box, SxProps, Theme, useTheme } from \"@mui/material\";\nimport React from \"react\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import React from \"react\";\nimport { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { LinkProps, Link as MuiLink } from \"@mui/material\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import React, { ReactElement } from \"react\";\nimport {\n  Avatar,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  SxProps,\n  Theme,\n  styled,\n  useTheme,\n} from \"@mui/material\";\nimport { Bullet } from \"~/bullet\";\nimport { Label } from \"~/label\";\nimport {\n  DrawerItemAvatar,\n  DrawerItemBullet,\n  DrawerItemLabel,\n  DrawerSize,\n  getDrawerItemColors,\n} from \"~/drawer/drawer.types\";\nimport { Link } from \"~/link\";\nimport { useDrawer } from \"~/drawer-provider\";\n\nexport interface DrawerItemLinkProps {\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n  /**\n   * Text displayed inside the item\n   */\n  text: string;\n  /**\n   * Url where the user is going to be redirected\n   * if the item is clicked\n   */\n  href: string;\n  /**\n   * Icon displayed to the left\n   */\n  icon?: ReactElement;\n  /**\n   * Avatar displayed to the left\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Label with extra info displayed to the right\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Bullet to attract the user attention displyed to the right\n   */\n  bullet?: DrawerItemBullet;\n  /**\n   * The item has to be marked as selected\n   */\n  selected?: boolean;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level: number;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nconst StyledLink = styled(Link)(({ theme }) => {\n  return {\n    color: theme.palette.text.primary,\n  };\n});\n\nconst sxCollapsedIcon = {\n  minWidth: 0,\n  justifyContent: \"center\",\n  marginRight: \"auto\",\n};\n\n/**\n * Clicable item inside a drawer\n */\nexport const DrawerItemLink = ({\n  text,\n  icon,\n  avatar,\n  label,\n  bullet,\n  href,\n  selected,\n  size = \"medium\",\n  level,\n  sx,\n}: DrawerItemLinkProps) => {\n  const { state } = useDrawer();\n  const theme = useTheme();\n  const { color, fontWeight } = getDrawerItemColors(theme, selected);\n\n  return (\n    <ListItemButton\n      LinkComponent={StyledLink}\n      dense={size === \"small\"}\n      aria-label={text}\n      href={href}\n      selected={selected}\n      sx={{\n        ...sx,\n        pl: state === \"open\" ? theme.spacing(2 + 1.5 * level) : undefined,\n        ...(state === \"collapse\" && {\n          paddingHorizontal: theme.spacing(2.5),\n          justifyContent: \"center\",\n        }),\n      }}\n    >\n      {icon && (\n        <ListItemIcon sx={{ color, ...(state === \"collapse\" && level === 0 && sxCollapsedIcon) }}>\n          {icon}\n        </ListItemIcon>\n      )}\n      {avatar && (\n        <ListItemAvatar\n          sx={{\n            ...(state === \"collapse\" && level === 0 && sxCollapsedIcon),\n          }}\n        >\n          <Avatar\n            alt={avatar.alt}\n            src={avatar.src}\n            sx={{\n              ...(size === \"small\" && { width: 24, height: 24 }),\n              ...(state === \"collapse\" && { width: 30, height: 30 }),\n            }}\n          />\n        </ListItemAvatar>\n      )}\n      <ListItemText\n        disableTypography\n        primary={text}\n        sx={{ color, fontWeight, opacity: state === \"collapse\" && level === 0 ? 0 : undefined }}\n      />\n      {label && state === \"open\" && (\n        <Label text={label.text} variant={label.variant} sx={{ ml: 2 }} />\n      )}\n      {bullet && state === \"open\" && <Bullet variant={bullet.variant} sx={{ ml: 2 }} />}\n    </ListItemButton>\n  );\n};\n","import React from \"react\";\nimport { DrawerMenuItem } from \"./drawer-menu-item\";\nimport { DrawerNavigationItem, DrawerSize } from \"~/drawer/drawer.types\";\nimport { DrawerItemLink } from \"./drawer-item-link\";\nimport { useDrawer } from \"~/drawer-provider\";\n\nexport interface DrawerItemProps {\n  /**\n   * Data to be rendered\n   */\n  item: DrawerNavigationItem;\n  /**\n   * Size of the item\n   */\n  size?: DrawerSize;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level?: number;\n}\n\nexport const DrawerItem = ({ item, size = \"medium\", level = 0 }: DrawerItemProps) => {\n  const { selectedItemId } = useDrawer();\n  if (\"items\" in item) {\n    const { id, text, icon, items } = item;\n    const childrenSelected = items.some((item) => item.id === selectedItemId);\n    return (\n      <DrawerMenuItem\n        size={size}\n        selected={id === selectedItemId || childrenSelected}\n        text={text}\n        icon={icon}\n        items={items}\n        level={level}\n      />\n    );\n  } else {\n    const { id, text, icon, avatar, label, bullet, href } = item;\n    return (\n      <DrawerItemLink\n        selected={id === selectedItemId}\n        size={size}\n        text={text}\n        icon={icon}\n        avatar={avatar}\n        label={label}\n        bullet={bullet}\n        href={href}\n        level={level}\n      />\n    );\n  }\n};\n","import {\n  ListItemButton,\n  ListItemIcon,\n  ListItemText,\n  Collapse,\n  List,\n  useTheme,\n  Popover,\n  SxProps,\n  Theme,\n} from \"@mui/material\";\nimport React, { ReactElement, useState, useRef } from \"react\";\nimport { DrawerNavigationItem, DrawerSize, getDrawerItemColors } from \"~/drawer\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport ChevronRightIcon from \"@mui/icons-material/ChevronRight\";\nimport { DrawerItem } from \"./drawer-item\";\nimport { useDrawer } from \"~/drawer-provider\";\n\nexport interface DrawerMenuItemProps {\n  /**\n   * Item size. default to medium\n   */\n  size?: DrawerSize;\n  /**\n   * Text displayed inside the item\n   */\n  text: string;\n  /**\n   * Icon displayed to the left\n   */\n  icon?: ReactElement;\n  /**\n   * The item has to be marked as selected\n   */\n  selected?: boolean;\n  /**\n   * Items that are going to be displayed inside\n   * the collapsable\n   */\n  items: DrawerNavigationItem[];\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level: number;\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n}\n\nexport const DrawerMenuItem = ({\n  text,\n  icon,\n  selected,\n  items,\n  size = \"medium\",\n  level,\n  sx = {},\n}: DrawerMenuItemProps) => {\n  const { state } = useDrawer();\n  const anchorEl = useRef<HTMLDivElement | null>(null);\n  const { palette, spacing } = useTheme();\n  const [menuOpen, setMenuOpen] = useState(false);\n  const { color, fontWeight } = getDrawerItemColors(useTheme(), selected);\n\n  const submenu = (\n    <List component=\"div\" disablePadding>\n      {items.map((item) => (\n        <DrawerItem key={item.id} level={level + 1} item={item} size={size} />\n      ))}\n    </List>\n  );\n\n  const collapsedButtonSx =\n    state === \"collapse\" && level === 0\n      ? {\n          position: \"absolute\",\n          right: 0,\n        }\n      : {};\n\n  return (\n    <>\n      <ListItemButton\n        ref={anchorEl}\n        selected={selected}\n        aria-label={text}\n        onClick={() => setMenuOpen((o) => !o)}\n        dense={size === \"small\"}\n        sx={{\n          ...sx,\n          pl: state === \"open\" ? spacing(2 + 1.5 * level) : undefined,\n          backgroundColor: menuOpen ? palette.action.hover : undefined,\n        }}\n      >\n        {icon && <ListItemIcon sx={{ color }}>{icon}</ListItemIcon>}\n        <ListItemText\n          disableTypography\n          primary={text}\n          sx={{ color, fontWeight, opacity: state === \"collapse\" && level === 0 ? 0 : undefined }}\n        />\n        {menuOpen && state === \"open\" ? (\n          <ExpandMoreIcon sx={[{ color, ml: 2 }, collapsedButtonSx]} />\n        ) : (\n          <ChevronRightIcon sx={[{ color, ml: 2 }, collapsedButtonSx]} />\n        )}\n      </ListItemButton>\n      {state === \"open\" ? (\n        <Collapse\n          in={menuOpen}\n          timeout=\"auto\"\n          unmountOnExit\n          aria-label={`${text} collapse submenu`}\n        >\n          {submenu}\n        </Collapse>\n      ) : (\n        <Popover\n          open={menuOpen}\n          PaperProps={{\n            elevation: 0,\n            variant: \"outlined\",\n          }}\n          aria-label={`${text} popover submenu`}\n          anchorEl={anchorEl.current}\n          onClose={() => setMenuOpen(false)}\n          anchorOrigin={{\n            vertical: \"top\",\n            horizontal: \"right\",\n          }}\n        >\n          {submenu}\n        </Popover>\n      )}\n    </>\n  );\n};\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","useDrawer","context","useContext","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","getDrawerItemColors","selected","color","palette","primary","main","fontWeight","typography","fontWeightBold","fontWeightMedium","bulletClasses","Bullet","variant","sx","React","createElement","Badge","className","role","Label","text","textTransform","useTheme","backgroundColor","default","mode","grey","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","Box","height","minWidth","bgcolor","fontSize","caption","lineHeight","whiteSpace","borderRadius","py","px","cursor","LinkBehaviour","forwardRef","props","ref","href","other","RouterLink","Link","to","_1","MuiLink","component","StyledLink","sxCollapsedIcon","marginRight","DrawerItemLink","icon","avatar","label","bullet","size","level","state","ListItemButton","LinkComponent","dense","pl","paddingHorizontal","ListItemIcon","ListItemAvatar","Avatar","alt","src","width","ListItemText","disableTypography","opacity","ml","DrawerItem","item","selectedItemId","id","items","childrenSelected","some","DrawerMenuItem","anchorEl","useRef","menuOpen","setMenuOpen","useState","submenu","List","disablePadding","map","key","collapsedButtonSx","position","right","Fragment","onClick","o","action","hover","ExpandMoreIcon","ChevronRightIcon","Collapse","in","timeout","unmountOnExit","Popover","open","PaperProps","elevation","current","onClose","anchorOrigin","vertical","horizontal"],"mappings":"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"}