@pautena/react-design-system 0.14.0 → 0.14.2

package/drawer-item/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/ListItemButton"),r=require("@mui/material/ListItemIcon"),i=require("@mui/material/ListItemText"),a=require("@mui/material/Collapse"),l=require("@mui/material/List"),o=require("@mui/material/Popover"),n=require("@mui/material/styles"),s=require("react");require("@mui/material/Drawer"),require("@mui/material/Paper"),require("@mui/material/Divider"),require("@mui/material/IconButton"),require("@mui/icons-material/ChevronLeft");var u=require("@mui/icons-material/ExpandMore"),c=require("@mui/icons-material/ChevronRight"),d=require("@mui/material/Avatar"),m=require("@mui/material/ListItemAvatar"),x=require("@mui/material/Badge"),p=require("@mui/material/Box"),f=require("react-router-dom"),h=require("@mui/material/Link");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=g(t),y=g(r),j=g(i),b=g(a),q=g(l),w=g(o),T=g(u),C=g(c),I=g(d),z=g(m),W=g(x),L=g(p),B=g(h);const P=s.createContext(void 0),R=new Error("DrawerContext.Provider is required and was undefined"),k=()=>{const e=s.useContext(P);if(void 0===e)throw R;return e};n.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar})));const D=(e,t)=>({color:t?e.palette.primary.main:void 0,fontWeight:t?e.typography.fontWeightBold:e.typography.fontWeightMedium}),E="RdsBullet-root",M=({variant:t="primary",sx:r})=>e.jsx(W.default,{color:t,variant:"dot",className:E,role:"bullet","aria-describedby":t,sx:r}),S=({text:t,variant:r="default",textTransform:i="capitalize",sx:a})=>{const{palette:l,typography:o}=n.useTheme(),s={default:"light"===l.mode?l.grey[100]:l.grey[900],primary:l.primary.light,secondary:l.secondary.light,info:l.info.light,warning:l.warning.light,error:l.error.light,success:l.success.light},u={default:l.getContrastText(s.default),primary:l.primary.contrastText,secondary:l.secondary.contrastText,info:l.info.contrastText,warning:l.warning.contrastText,error:l.error.contrastText,success:l.success.contrastText};return e.jsx(L.default,{height:24,minWidth:22,display:"inline-flex",justifyContent:"center",alignItems:"center",bgcolor:s[r],color:u[r],fontSize:o.caption.fontSize,fontWeight:o.fontWeightBold,lineHeight:0,textTransform:i,whiteSpace:"nowrap",borderRadius:2,role:"label","aria-label":`${t} ${r} label`,py:0,px:1,sx:{cursor:"default",...a},children:t})},$=s.forwardRef(((t,r)=>{const{href:i,...a}=t;return e.jsx(f.Link,{ref:r,to:i,...a})})),O=s.forwardRef(((t,r)=>e.jsx(B.default,{...t,component:$}))),A=n.styled(O)((({theme:e})=>({color:e.palette.text.primary}))),H={minWidth:0,justifyContent:"center",marginRight:"auto"},_=({text:t,icon:r,avatar:i,label:a,bullet:l,href:o,selected:s,size:u="medium",level:c,sx:d})=>{const{state:m}=k(),x=n.useTheme(),{color:p,fontWeight:f}=D(x,s);return e.jsxs(v.default,{LinkComponent:A,dense:"small"===u,"aria-label":t,href:o,selected:s,sx:{...d,pl:"open"===m?x.spacing(2+1.5*c):void 0,..."collapse"===m&&{paddingHorizontal:x.spacing(2.5),justifyContent:"center"}},children:[r&&e.jsx(y.default,{sx:{color:p,..."collapse"===m&&0===c&&H},children:r}),i&&e.jsx(z.default,{sx:{..."collapse"===m&&0===c&&H},children:e.jsx(I.default,{alt:i.alt,src:i.src,sx:{..."small"===u&&{width:24,height:24},..."collapse"===m&&{width:30,height:30}}})}),e.jsx(j.default,{disableTypography:!0,primary:t,sx:{color:p,fontWeight:f,opacity:"collapse"===m&&0===c?0:void 0}}),a&&"open"===m&&e.jsx(S,{text:a.text,variant:a.variant,sx:{ml:2}}),l&&"open"===m&&e.jsx(M,{variant:l.variant,sx:{ml:2}})]})},F=({item:t,size:r="medium",level:i=0})=>{const{selectedItemId:a}=k();if("items"in t){const{id:l,text:o,icon:n,items:s}=t,u=s.some((e=>e.id===a));return e.jsx(N,{size:r,selected:l===a||u,text:o,icon:n,items:s,level:i})}{const{id:l,text:o,icon:n,avatar:s,label:u,bullet:c,href:d}=t;return e.jsx(_,{selected:l===a,size:r,text:o,icon:n,avatar:s,label:u,bullet:c,href:d,level:i})}},N=({text:t,icon:r,selected:i,items:a,size:l="medium",level:o,sx:u={}})=>{const{state:c}=k(),d=s.useRef(null),{palette:m,spacing:x}=n.useTheme(),[p,f]=s.useState(!1),{color:h,fontWeight:g}=D(n.useTheme(),i),I=e.jsx(q.default,{component:"div",disablePadding:!0,children:a.map((t=>e.jsx(F,{level:o+1,item:t,size:l},t.id)))}),z="collapse"===c&&0===o?{position:"absolute",right:0}:{};return e.jsxs(e.Fragment,{children:[e.jsxs(v.default,{ref:d,selected:i,"aria-label":t,onClick:()=>f((e=>!e)),dense:"small"===l,sx:{...u,pl:"open"===c?x(2+1.5*o):void 0,backgroundColor:p?m.action.hover:void 0},children:[r&&e.jsx(y.default,{sx:{color:h},children:r}),e.jsx(j.default,{disableTypography:!0,primary:t,sx:{color:h,fontWeight:g,opacity:"collapse"===c&&0===o?0:void 0}}),p&&"open"===c?e.jsx(T.default,{sx:[{color:h,ml:2},z]}):e.jsx(C.default,{sx:[{color:h,ml:2},z]})]}),"open"===c?e.jsx(b.default,{in:p,timeout:"auto",unmountOnExit:!0,"aria-label":`${t} collapse submenu`,children:I}):e.jsx(w.default,{open:p,PaperProps:{elevation:0,variant:"outlined"},"aria-label":`${t} popover submenu`,anchorEl:d.current,onClose:()=>f(!1),anchorOrigin:{vertical:"top",horizontal:"right"},children:I})]})};exports.DrawerItem=F,exports.DrawerItemLink=_,exports.DrawerMenuItem=N;
+//# 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\";\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 { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\nimport MuiDrawer, { drawerClasses } from \"@mui/material/Drawer\";\nimport { paperClasses } from \"@mui/material/Paper\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\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 } from \"@mui/material/Drawer\";\nimport { Theme } from \"@mui/material/styles\";\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 from \"@mui/material/Badge\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\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 from \"@mui/material/Box\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\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 { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\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 { ReactElement } from \"react\";\nimport Avatar from \"@mui/material/Avatar\";\nimport ListItemAvatar from \"@mui/material/ListItemAvatar\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\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 { 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 ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport Collapse from \"@mui/material/Collapse\";\nimport List from \"@mui/material/List\";\nimport Popover from \"@mui/material/Popover\";\nimport { SxProps, useTheme, Theme } from \"@mui/material/styles\";\nimport { 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","_jsx","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","children","LinkBehaviour","forwardRef","props","ref","href","other","jsx","RouterLink","to","Link","_1","MuiLink","component","StyledLink","sxCollapsedIcon","marginRight","DrawerItemLink","icon","avatar","label","bullet","size","level","state","_jsxs","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","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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"}

package/drawer-item/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/drawer-item",
+  "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-item/drawer-item-link.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme } from "@mui/material/styles";
 import { DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerSize } from "~/drawer/drawer.types";
 export interface DrawerItemLinkProps {
     /**

package/drawer-item/drawer-menu-item.d.ts

@@ -1,4 +1,4 @@
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme } from "@mui/material/styles";
 import { ReactElement } from "react";
 import { DrawerNavigationItem, DrawerSize } from "~/drawer";
 export interface DrawerMenuItemProps {

package/drawer-item/index.js

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

package/drawer-item/index.js.map

@@ -1 +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","to","StyledLink","_1","MuiLink","component","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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"}
+{"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\";\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 { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\nimport MuiDrawer, { drawerClasses } from \"@mui/material/Drawer\";\nimport { paperClasses } from \"@mui/material/Paper\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\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 } from \"@mui/material/Drawer\";\nimport { Theme } from \"@mui/material/styles\";\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 from \"@mui/material/Badge\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\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 from \"@mui/material/Box\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\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 { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\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 { ReactElement } from \"react\";\nimport Avatar from \"@mui/material/Avatar\";\nimport ListItemAvatar from \"@mui/material/ListItemAvatar\";\nimport ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\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 { 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 ListItemButton from \"@mui/material/ListItemButton\";\nimport ListItemIcon from \"@mui/material/ListItemIcon\";\nimport ListItemText from \"@mui/material/ListItemText\";\nimport Collapse from \"@mui/material/Collapse\";\nimport List from \"@mui/material/List\";\nimport Popover from \"@mui/material/Popover\";\nimport { SxProps, useTheme, Theme } from \"@mui/material/styles\";\nimport { 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","_jsx","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","children","LinkBehaviour","forwardRef","props","ref","href","other","RouterLink","to","StyledLink","_1","MuiLink","component","sxCollapsedIcon","marginRight","DrawerItemLink","icon","avatar","label","bullet","size","level","state","_jsxs","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","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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"}

package/drawer-item/package.json

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

package/drawer-layout/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/styles");require("@mui/material/Drawer"),require("@mui/material/Paper"),require("@mui/material/Divider"),require("@mui/material/IconButton"),require("@mui/icons-material/ChevronLeft");var t=require("react");const i=t.createContext(void 0),n=new Error("DrawerContext.Provider is required and was undefined"),a=r.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),s={temporary:"close",mini:"collapse",clipped:"open",persistent:"close"},o={temporary:["close","open"],mini:["collapse","open"],clipped:["open","open"],persistent:["close","open"]},l=({children:r,initialState:n,variant:a="temporary",drawerWidth:l=240,underAppBar:d=!1,selectedItemId:p,onStateChange:c=(()=>null)})=>{const[u,m]=t.useState(n||s[a]),h=e=>{c(e),m(e)};return e.jsx(i.Provider,{value:{state:u,variant:a,selectedItemId:p,underAppBar:d,drawerWidth:l,switchState:()=>h(o[a]["open"===u?0:1]),collapse:()=>h("collapse"),close:()=>h("close"),open:()=>h("open"),setState:m},children:r})},d={temporary:!1,mini:!0,clipped:!0,persistent:!0},p=r.styled("div")((({theme:e})=>{const{spacing:a}=r.useTheme(),{drawerWidth:s,state:o,variant:l}=(()=>{const e=t.useContext(i);if(void 0===e)throw n;return e})();return{marginLeft:d[l]?"open"===o?s:"collapse"===o?a(8):0:0,transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})}})),c=({children:r})=>e.jsxs(p,{children:[e.jsx(a,{}),r]});exports.DrawerLayout=({drawerProviderProps:r,children:t})=>{const[i,n,a]=t;return e.jsxs(l,{...r,children:[i,n,e.jsx(c,{children:a})]})};
+//# sourceMappingURL=index.js.map

package/drawer-layout/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-provider/drawer.provider.tsx","../../../src/drawer-provider/drawer-mixins.ts","../../../src/drawer-main/drawer-main.tsx","../../../src/drawer-layout/drawer-layout.tsx"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"~/drawer\";\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 { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\nimport MuiDrawer, { drawerClasses } from \"@mui/material/Drawer\";\nimport { paperClasses } from \"@mui/material/Paper\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\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 { useState } from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerContext } from \"./drawer-context\";\nimport { DrawerState, DrawerVariant } from \"~/drawer\";\nimport { drawerWidth } from \"./drawer-mixins\";\n\nconst initialState: Record<DrawerVariant, DrawerState> = {\n  temporary: \"close\",\n  mini: \"collapse\",\n  clipped: \"open\",\n  persistent: \"close\",\n};\n\nconst targetStates: Record<DrawerVariant, [DrawerState, DrawerState]> = {\n  temporary: [\"close\", \"open\"],\n  mini: [\"collapse\", \"open\"],\n  clipped: [\"open\", \"open\"],\n  persistent: [\"close\", \"open\"],\n};\n\nexport type DrawerProviderProps = PropsWithChildren<{\n  initialState?: DrawerState;\n  underAppBar?: boolean;\n  drawerWidth?: number;\n  variant?: DrawerVariant;\n  selectedItemId?: string;\n  onStateChange?: (newState: DrawerState) => void;\n}>;\n\nexport const DrawerProvider = ({\n  children,\n  initialState: initialStateProp,\n  variant = \"temporary\",\n  drawerWidth: drawerWidthProp = drawerWidth,\n  underAppBar = false,\n  selectedItemId,\n  onStateChange = () => null,\n}: DrawerProviderProps) => {\n  const [state, setState] = useState<DrawerState>(initialStateProp || initialState[variant]);\n\n  const handleChangeState = (newState: DrawerState) => {\n    onStateChange(newState);\n    setState(newState);\n  };\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        state,\n        variant,\n        selectedItemId,\n        underAppBar,\n        drawerWidth: drawerWidthProp,\n        switchState: () => handleChangeState(targetStates[variant][state === \"open\" ? 0 : 1]),\n        collapse: () => handleChangeState(\"collapse\"),\n        close: () => handleChangeState(\"close\"),\n        open: () => handleChangeState(\"open\"),\n        setState,\n      }}\n    >\n      {children}\n    </DrawerContext.Provider>\n  );\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 { styled, useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerHeader, useDrawer } from \"../drawer-provider\";\nimport { DrawerVariant } from \"~/drawer\";\n\nconst drawerSpace: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  clipped: true,\n  persistent: true,\n};\n\nconst StyledDiv = styled(\"div\")(({ theme }) => {\n  const { spacing } = useTheme();\n  const { drawerWidth, state, variant } = useDrawer();\n\n  const marginLeft = drawerSpace[variant]\n    ? state === \"open\"\n      ? drawerWidth\n      : state === \"collapse\"\n      ? spacing(8)\n      : 0\n    : 0;\n\n  return {\n    marginLeft,\n    transition: theme.transitions.create(\"margin\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n  };\n});\n\nexport type DrawerMainProps = PropsWithChildren;\n\nexport const DrawerMain = ({ children }: DrawerMainProps) => (\n  <StyledDiv>\n    <DrawerHeader />\n    {children}\n  </StyledDiv>\n);\n","import { ReactNode } from \"react\";\nimport { DrawerProvider, DrawerProviderProps } from \"~/drawer-provider\";\nimport { DrawerMain } from \"~/drawer-main\";\nimport { DrawerAppBarElement, DrawerElement } from \"~/drawer/drawer.types\";\n\nexport interface DrawerLayoutProps {\n  drawerProviderProps?: DrawerProviderProps;\n  children: [DrawerElement, DrawerAppBarElement, ReactNode];\n}\n\nexport const DrawerLayout = ({\n  drawerProviderProps,\n  children: childrenProps,\n}: DrawerLayoutProps) => {\n  const [appBar, drawer, children] = childrenProps;\n\n  return (\n    <DrawerProvider {...drawerProviderProps}>\n      {appBar}\n      {drawer}\n      <DrawerMain>{children}</DrawerMain>\n    </DrawerProvider>\n  );\n};\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","DrawerHeader","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","initialState","temporary","mini","clipped","persistent","targetStates","DrawerProvider","children","initialStateProp","variant","drawerWidth","drawerWidthProp","underAppBar","selectedItemId","onStateChange","state","setState","useState","handleChangeState","newState","_jsx","Provider","value","switchState","collapse","close","open","drawerSpace","StyledDiv","useTheme","context","useContext","useDrawer","marginLeft","transition","transitions","create","easing","sharp","duration","leavingScreen","DrawerMain","_jsxs","jsxs","drawerProviderProps","childrenProps","appBar","drawer"],"mappings":"+UAgBO,MAAMA,EAAgBC,EAAAA,mBAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCP9BC,EAAeC,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YAAa,CACxDC,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASJ,EAAMK,QAAQ,EAAG,MACvBL,EAAMM,OAAOC,YCTZC,EAAmD,CACvDC,UAAW,QACXC,KAAM,WACNC,QAAS,OACTC,WAAY,SAGRC,EAAkE,CACtEJ,UAAW,CAAC,QAAS,QACrBC,KAAM,CAAC,WAAY,QACnBC,QAAS,CAAC,OAAQ,QAClBC,WAAY,CAAC,QAAS,SAYXE,EAAiB,EAC5BC,WACAP,aAAcQ,EACdC,UAAU,YACVC,YAAaC,EC/BY,IDgCzBC,eAAc,EACdC,iBACAC,gBAAgB,KAAM,UAEtB,MAAOC,EAAOC,GAAYC,EAAAA,SAAsBT,GAAoBR,EAAaS,IAE3ES,EAAqBC,IACzBL,EAAcK,GACdH,EAASG,EAAS,EAGpB,OACEC,MAACnC,EAAcoC,SAAQ,CACrBC,MAAO,CACLP,QACAN,UACAI,iBACAD,cACAF,YAAaC,EACbY,YAAa,IAAML,EAAkBb,EAAaI,GAAmB,SAAVM,EAAmB,EAAI,IAClFS,SAAU,IAAMN,EAAkB,YAClCO,MAAO,IAAMP,EAAkB,SAC/BQ,KAAM,IAAMR,EAAkB,QAC9BF,YAGDT,SAAAA,GAEH,EEzDEoB,EAA8C,CAClD1B,WAAW,EACXC,MAAM,EACNC,SAAS,EACTC,YAAY,GAGRwB,EAAYrC,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YACjC,MAAMK,QAAEA,GAAYgC,EAAAA,YACdnB,YAAEA,EAAWK,MAAEA,EAAKN,QAAEA,GJKL,MACvB,MAAMqB,EAAUC,aAAW9C,GAE3B,QAAgBE,IAAZ2C,EACF,MAAM1C,EAGR,OAAO0C,CAAO,EIZ0BE,GAUxC,MAAO,CACLC,WATiBN,EAAYlB,GACjB,SAAVM,EACEL,EACU,aAAVK,EACAlB,EAAQ,GACR,EACF,EAIFqC,WAAY1C,EAAM2C,YAAYC,OAAO,SAAU,CAC7CC,OAAQ7C,EAAM2C,YAAYE,OAAOC,MACjCC,SAAU/C,EAAM2C,YAAYI,SAASC,gBAExC,IAKUC,EAAa,EAAGlC,cAC3BmC,EAACC,KAAAf,aACCR,EAAAA,IAAC9B,MACAiB,0BC5BuB,EAC1BqC,sBACArC,SAAUsC,MAEV,MAAOC,EAAQC,EAAQxC,GAAYsC,EAEnC,OACEH,EAAAA,KAACpC,EAAmB,IAAAsC,YACjBE,EACAC,EACD3B,MAACqB,EAAU,CAAAlC,SAAEA,MAEf"}

package/drawer-layout/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/drawer-layout",
+  "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-layout/index.js

@@ -1,2 +1,2 @@
-import e,{createContext as t,useContext as r,useState as n}from"react";import{styled as i,useTheme as a}from"@mui/material";import"@mui/icons-material/ChevronLeft";const o=t(void 0),s=new Error("DrawerContext.Provider is required and was undefined"),l=i("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),p={temporary:"close",mini:"collapse",clipped:"open",persistent:"close"},c={temporary:["close","open"],mini:["collapse","open"],clipped:["open","open"],persistent:["close","open"]},d=({children:t,initialState:r,variant:i="temporary",drawerWidth:a=240,underAppBar:s=!1,selectedItemId:l,onStateChange:d=(()=>null)})=>{const[m,u]=n(r||p[i]),h=e=>{d(e),u(e)};return e.createElement(o.Provider,{value:{state:m,variant:i,selectedItemId:l,underAppBar:s,drawerWidth:a,switchState:()=>h(c[i]["open"===m?0:1]),collapse:()=>h("collapse"),close:()=>h("close"),open:()=>h("open"),setState:u}},t)},m={temporary:!1,mini:!0,clipped:!0,persistent:!0},u=i("div")((({theme:e})=>{const{spacing:t}=a(),{drawerWidth:n,state:i,variant:l}=(()=>{const e=r(o);if(void 0===e)throw s;return e})();return{marginLeft:m[l]?"open"===i?n:"collapse"===i?t(8):0:0,transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})}})),h=({children:t})=>e.createElement(u,null,e.createElement(l,null),t),v=({drawerProviderProps:t,children:r})=>{const[n,i,a]=r;return e.createElement(d,{...t},n,i,e.createElement(h,null,a))};export{v as DrawerLayout};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{styled as t,useTheme as i}from"@mui/material/styles";import"@mui/material/Drawer";import"@mui/material/Paper";import"@mui/material/Divider";import"@mui/material/IconButton";import"@mui/icons-material/ChevronLeft";import{createContext as n,useContext as a,useState as o}from"react";const s=n(void 0),p=new Error("DrawerContext.Provider is required and was undefined"),l=t("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),d={temporary:"close",mini:"collapse",clipped:"open",persistent:"close"},m={temporary:["close","open"],mini:["collapse","open"],clipped:["open","open"],persistent:["close","open"]},c=({children:r,initialState:t,variant:i="temporary",drawerWidth:n=240,underAppBar:a=!1,selectedItemId:p,onStateChange:l=(()=>null)})=>{const[c,u]=o(t||d[i]),h=e=>{l(e),u(e)};return e(s.Provider,{value:{state:c,variant:i,selectedItemId:p,underAppBar:a,drawerWidth:n,switchState:()=>h(m[i]["open"===c?0:1]),collapse:()=>h("collapse"),close:()=>h("close"),open:()=>h("open"),setState:u},children:r})},u={temporary:!1,mini:!0,clipped:!0,persistent:!0},h=t("div")((({theme:e})=>{const{spacing:r}=i(),{drawerWidth:t,state:n,variant:o}=(()=>{const e=a(s);if(void 0===e)throw p;return e})();return{marginLeft:u[o]?"open"===n?t:"collapse"===n?r(8):0:0,transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})}})),v=({children:t})=>r(h,{children:[e(l,{}),t]}),f=({drawerProviderProps:t,children:i})=>{const[n,a,o]=i;return r(c,{...t,children:[n,a,e(v,{children:o})]})};export{f as DrawerLayout};
 //# sourceMappingURL=index.js.map

package/drawer-layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/drawer-provider/drawer-context.ts","../../src/drawer/drawer.tsx","../../src/drawer-provider/drawer.provider.tsx","../../src/drawer-provider/drawer-mixins.ts","../../src/drawer-main/drawer-main.tsx","../../src/drawer-layout/drawer-layout.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 { useState } from \"react\";\nimport React, { PropsWithChildren } from \"react\";\nimport { DrawerContext } from \"./drawer-context\";\nimport { DrawerState, DrawerVariant } from \"../drawer/drawer.types\";\nimport { drawerWidth } from \"./drawer-mixins\";\n\nconst initialState: Record<DrawerVariant, DrawerState> = {\n  temporary: \"close\",\n  mini: \"collapse\",\n  clipped: \"open\",\n  persistent: \"close\",\n};\n\nconst targetStates: Record<DrawerVariant, [DrawerState, DrawerState]> = {\n  temporary: [\"close\", \"open\"],\n  mini: [\"collapse\", \"open\"],\n  clipped: [\"open\", \"open\"],\n  persistent: [\"close\", \"open\"],\n};\n\nexport type DrawerProviderProps = PropsWithChildren<{\n  initialState?: DrawerState;\n  underAppBar?: boolean;\n  drawerWidth?: number;\n  variant?: DrawerVariant;\n  selectedItemId?: string;\n  onStateChange?: (newState: DrawerState) => void;\n}>;\n\nexport const DrawerProvider = ({\n  children,\n  initialState: initialStateProp,\n  variant = \"temporary\",\n  drawerWidth: drawerWidthProp = drawerWidth,\n  underAppBar = false,\n  selectedItemId,\n  onStateChange = () => null,\n}: DrawerProviderProps) => {\n  const [state, setState] = useState<DrawerState>(initialStateProp || initialState[variant]);\n\n  const handleChangeState = (newState: DrawerState) => {\n    onStateChange(newState);\n    setState(newState);\n  };\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        state,\n        variant,\n        selectedItemId,\n        underAppBar,\n        drawerWidth: drawerWidthProp,\n        switchState: () => handleChangeState(targetStates[variant][state === \"open\" ? 0 : 1]),\n        collapse: () => handleChangeState(\"collapse\"),\n        close: () => handleChangeState(\"close\"),\n        open: () => handleChangeState(\"open\"),\n        setState,\n      }}\n    >\n      {children}\n    </DrawerContext.Provider>\n  );\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 { styled, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerHeader, useDrawer } from \"../drawer-provider\";\nimport { DrawerVariant } from \"../drawer/drawer.types\";\n\nconst drawerSpace: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  clipped: true,\n  persistent: true,\n};\n\nconst StyledDiv = styled(\"div\")(({ theme }) => {\n  const { spacing } = useTheme();\n  const { drawerWidth, state, variant } = useDrawer();\n\n  const marginLeft = drawerSpace[variant]\n    ? state === \"open\"\n      ? drawerWidth\n      : state === \"collapse\"\n      ? spacing(8)\n      : 0\n    : 0;\n\n  return {\n    marginLeft,\n    transition: theme.transitions.create(\"margin\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n  };\n});\n\nexport type DrawerMainProps = PropsWithChildren;\n\nexport const DrawerMain = ({ children }: DrawerMainProps) => (\n  <StyledDiv>\n    <DrawerHeader />\n    {children}\n  </StyledDiv>\n);\n","import React, { ReactNode } from \"react\";\nimport { DrawerProvider, DrawerProviderProps } from \"~/drawer-provider\";\nimport { DrawerMain } from \"~/drawer-main\";\nimport { DrawerAppBarElement, DrawerElement } from \"~/drawer/drawer.types\";\n\nexport interface DrawerLayoutProps {\n  drawerProviderProps?: DrawerProviderProps;\n  children: [DrawerElement, DrawerAppBarElement, ReactNode];\n}\n\nexport const DrawerLayout = ({\n  drawerProviderProps,\n  children: childrenProps,\n}: DrawerLayoutProps) => {\n  const [appBar, drawer, children] = childrenProps;\n\n  return (\n    <DrawerProvider {...drawerProviderProps}>\n      {appBar}\n      {drawer}\n      <DrawerMain>{children}</DrawerMain>\n    </DrawerProvider>\n  );\n};\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","DrawerHeader","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","initialState","temporary","mini","clipped","persistent","targetStates","DrawerProvider","children","initialStateProp","variant","drawerWidth","drawerWidthProp","underAppBar","selectedItemId","onStateChange","state","setState","useState","handleChangeState","newState","React","createElement","Provider","value","switchState","collapse","close","open","drawerSpace","StyledDiv","useTheme","context","useContext","useDrawer","marginLeft","transition","transitions","create","easing","sharp","duration","leavingScreen","DrawerMain","DrawerLayout","drawerProviderProps","childrenProps","appBar","drawer"],"mappings":"oKAgBO,MAAMA,EAAgBC,OAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCA9BC,EAAeC,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACxDC,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASJ,EAAMK,QAAQ,EAAG,MACvBL,EAAMM,OAAOC,YChBZC,EAAmD,CACvDC,UAAW,QACXC,KAAM,WACNC,QAAS,OACTC,WAAY,SAGRC,EAAkE,CACtEJ,UAAW,CAAC,QAAS,QACrBC,KAAM,CAAC,WAAY,QACnBC,QAAS,CAAC,OAAQ,QAClBC,WAAY,CAAC,QAAS,SAYXE,EAAiB,EAC5BC,WACAP,aAAcQ,EACdC,UAAU,YACVC,YAAaC,EC/BY,IDgCzBC,eAAc,EACdC,iBACAC,gBAAgB,KAAM,UAEtB,MAAOC,EAAOC,GAAYC,EAAsBT,GAAoBR,EAAaS,IAE3ES,EAAqBC,IACzBL,EAAcK,GACdH,EAASG,EAAS,EAGpB,OACEC,EAACC,cAAApC,EAAcqC,SAAQ,CACrBC,MAAO,CACLR,QACAN,UACAI,iBACAD,cACAF,YAAaC,EACba,YAAa,IAAMN,EAAkBb,EAAaI,GAAmB,SAAVM,EAAmB,EAAI,IAClFU,SAAU,IAAMP,EAAkB,YAClCQ,MAAO,IAAMR,EAAkB,SAC/BS,KAAM,IAAMT,EAAkB,QAC9BF,aAGDT,EAEH,EExDEqB,EAA8C,CAClD3B,WAAW,EACXC,MAAM,EACNC,SAAS,EACTC,YAAY,GAGRyB,EAAYtC,EAAO,MAAPA,EAAc,EAAGC,YACjC,MAAMK,QAAEA,GAAYiC,KACdpB,YAAEA,EAAWK,MAAEA,EAAKN,QAAEA,GJIL,MACvB,MAAMsB,EAAUC,EAAW/C,GAE3B,QAAgBE,IAAZ4C,EACF,MAAM3C,EAGR,OAAO2C,CAAO,EIX0BE,GAUxC,MAAO,CACLC,WATiBN,EAAYnB,GACjB,SAAVM,EACEL,EACU,aAAVK,EACAlB,EAAQ,GACR,EACF,EAIFsC,WAAY3C,EAAM4C,YAAYC,OAAO,SAAU,CAC7CC,OAAQ9C,EAAM4C,YAAYE,OAAOC,MACjCC,SAAUhD,EAAM4C,YAAYI,SAASC,gBAExC,IAKUC,EAAa,EAAGnC,cAC3Ba,gBAACS,EAAS,KACRT,EAAAC,cAAC/B,EAAe,MACfiB,GC7BQoC,EAAe,EAC1BC,sBACArC,SAAUsC,MAEV,MAAOC,EAAQC,EAAQxC,GAAYsC,EAEnC,OACEzB,EAAAC,cAACf,EAAc,IAAKsC,GACjBE,EACAC,EACD3B,EAAAC,cAACqB,EAAY,KAAAnC,GAEf"}
+{"version":3,"file":"index.js","sources":["../../src/drawer-provider/drawer-context.ts","../../src/drawer/drawer.tsx","../../src/drawer-provider/drawer.provider.tsx","../../src/drawer-provider/drawer-mixins.ts","../../src/drawer-main/drawer-main.tsx","../../src/drawer-layout/drawer-layout.tsx"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"~/drawer\";\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 { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\nimport MuiDrawer, { drawerClasses } from \"@mui/material/Drawer\";\nimport { paperClasses } from \"@mui/material/Paper\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\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 { useState } from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerContext } from \"./drawer-context\";\nimport { DrawerState, DrawerVariant } from \"~/drawer\";\nimport { drawerWidth } from \"./drawer-mixins\";\n\nconst initialState: Record<DrawerVariant, DrawerState> = {\n  temporary: \"close\",\n  mini: \"collapse\",\n  clipped: \"open\",\n  persistent: \"close\",\n};\n\nconst targetStates: Record<DrawerVariant, [DrawerState, DrawerState]> = {\n  temporary: [\"close\", \"open\"],\n  mini: [\"collapse\", \"open\"],\n  clipped: [\"open\", \"open\"],\n  persistent: [\"close\", \"open\"],\n};\n\nexport type DrawerProviderProps = PropsWithChildren<{\n  initialState?: DrawerState;\n  underAppBar?: boolean;\n  drawerWidth?: number;\n  variant?: DrawerVariant;\n  selectedItemId?: string;\n  onStateChange?: (newState: DrawerState) => void;\n}>;\n\nexport const DrawerProvider = ({\n  children,\n  initialState: initialStateProp,\n  variant = \"temporary\",\n  drawerWidth: drawerWidthProp = drawerWidth,\n  underAppBar = false,\n  selectedItemId,\n  onStateChange = () => null,\n}: DrawerProviderProps) => {\n  const [state, setState] = useState<DrawerState>(initialStateProp || initialState[variant]);\n\n  const handleChangeState = (newState: DrawerState) => {\n    onStateChange(newState);\n    setState(newState);\n  };\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        state,\n        variant,\n        selectedItemId,\n        underAppBar,\n        drawerWidth: drawerWidthProp,\n        switchState: () => handleChangeState(targetStates[variant][state === \"open\" ? 0 : 1]),\n        collapse: () => handleChangeState(\"collapse\"),\n        close: () => handleChangeState(\"close\"),\n        open: () => handleChangeState(\"open\"),\n        setState,\n      }}\n    >\n      {children}\n    </DrawerContext.Provider>\n  );\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 { styled, useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerHeader, useDrawer } from \"../drawer-provider\";\nimport { DrawerVariant } from \"~/drawer\";\n\nconst drawerSpace: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  clipped: true,\n  persistent: true,\n};\n\nconst StyledDiv = styled(\"div\")(({ theme }) => {\n  const { spacing } = useTheme();\n  const { drawerWidth, state, variant } = useDrawer();\n\n  const marginLeft = drawerSpace[variant]\n    ? state === \"open\"\n      ? drawerWidth\n      : state === \"collapse\"\n      ? spacing(8)\n      : 0\n    : 0;\n\n  return {\n    marginLeft,\n    transition: theme.transitions.create(\"margin\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n  };\n});\n\nexport type DrawerMainProps = PropsWithChildren;\n\nexport const DrawerMain = ({ children }: DrawerMainProps) => (\n  <StyledDiv>\n    <DrawerHeader />\n    {children}\n  </StyledDiv>\n);\n","import { ReactNode } from \"react\";\nimport { DrawerProvider, DrawerProviderProps } from \"~/drawer-provider\";\nimport { DrawerMain } from \"~/drawer-main\";\nimport { DrawerAppBarElement, DrawerElement } from \"~/drawer/drawer.types\";\n\nexport interface DrawerLayoutProps {\n  drawerProviderProps?: DrawerProviderProps;\n  children: [DrawerElement, DrawerAppBarElement, ReactNode];\n}\n\nexport const DrawerLayout = ({\n  drawerProviderProps,\n  children: childrenProps,\n}: DrawerLayoutProps) => {\n  const [appBar, drawer, children] = childrenProps;\n\n  return (\n    <DrawerProvider {...drawerProviderProps}>\n      {appBar}\n      {drawer}\n      <DrawerMain>{children}</DrawerMain>\n    </DrawerProvider>\n  );\n};\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","DrawerHeader","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","initialState","temporary","mini","clipped","persistent","targetStates","DrawerProvider","children","initialStateProp","variant","drawerWidth","drawerWidthProp","underAppBar","selectedItemId","onStateChange","state","setState","useState","handleChangeState","newState","_jsx","Provider","value","switchState","collapse","close","open","drawerSpace","StyledDiv","useTheme","context","useContext","useDrawer","marginLeft","transition","transitions","create","easing","sharp","duration","leavingScreen","DrawerMain","_jsxs","DrawerLayout","drawerProviderProps","childrenProps","appBar","drawer"],"mappings":"kVAgBO,MAAMA,EAAgBC,OAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCP9BC,EAAeC,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACxDC,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASJ,EAAMK,QAAQ,EAAG,MACvBL,EAAMM,OAAOC,YCTZC,EAAmD,CACvDC,UAAW,QACXC,KAAM,WACNC,QAAS,OACTC,WAAY,SAGRC,EAAkE,CACtEJ,UAAW,CAAC,QAAS,QACrBC,KAAM,CAAC,WAAY,QACnBC,QAAS,CAAC,OAAQ,QAClBC,WAAY,CAAC,QAAS,SAYXE,EAAiB,EAC5BC,WACAP,aAAcQ,EACdC,UAAU,YACVC,YAAaC,EC/BY,IDgCzBC,eAAc,EACdC,iBACAC,gBAAgB,KAAM,UAEtB,MAAOC,EAAOC,GAAYC,EAAsBT,GAAoBR,EAAaS,IAE3ES,EAAqBC,IACzBL,EAAcK,GACdH,EAASG,EAAS,EAGpB,OACEC,EAACnC,EAAcoC,SAAQ,CACrBC,MAAO,CACLP,QACAN,UACAI,iBACAD,cACAF,YAAaC,EACbY,YAAa,IAAML,EAAkBb,EAAaI,GAAmB,SAAVM,EAAmB,EAAI,IAClFS,SAAU,IAAMN,EAAkB,YAClCO,MAAO,IAAMP,EAAkB,SAC/BQ,KAAM,IAAMR,EAAkB,QAC9BF,YAGDT,SAAAA,GAEH,EEzDEoB,EAA8C,CAClD1B,WAAW,EACXC,MAAM,EACNC,SAAS,EACTC,YAAY,GAGRwB,EAAYrC,EAAO,MAAPA,EAAc,EAAGC,YACjC,MAAMK,QAAEA,GAAYgC,KACdnB,YAAEA,EAAWK,MAAEA,EAAKN,QAAEA,GJKL,MACvB,MAAMqB,EAAUC,EAAW9C,GAE3B,QAAgBE,IAAZ2C,EACF,MAAM1C,EAGR,OAAO0C,CAAO,EIZ0BE,GAUxC,MAAO,CACLC,WATiBN,EAAYlB,GACjB,SAAVM,EACEL,EACU,aAAVK,EACAlB,EAAQ,GACR,EACF,EAIFqC,WAAY1C,EAAM2C,YAAYC,OAAO,SAAU,CAC7CC,OAAQ7C,EAAM2C,YAAYE,OAAOC,MACjCC,SAAU/C,EAAM2C,YAAYI,SAASC,gBAExC,IAKUC,EAAa,EAAGlC,cAC3BmC,EAACd,aACCR,EAAC9B,MACAiB,KC5BQoC,EAAe,EAC1BC,sBACArC,SAAUsC,MAEV,MAAOC,EAAQC,EAAQxC,GAAYsC,EAEnC,OACEH,EAACpC,EAAmB,IAAAsC,YACjBE,EACAC,EACD3B,EAACqB,EAAU,CAAAlC,SAAEA,MAEf"}

package/drawer-layout/package.json

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

package/drawer-main/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/styles");require("@mui/material/Drawer"),require("@mui/material/Paper"),require("@mui/material/Divider"),require("@mui/material/IconButton"),require("@mui/icons-material/ChevronLeft");var i=require("react");const t=i.createContext(void 0),a=new Error("DrawerContext.Provider is required and was undefined"),n=r.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),s={temporary:!1,mini:!0,clipped:!0,persistent:!0},o=r.styled("div")((({theme:e})=>{const{spacing:n}=r.useTheme(),{drawerWidth:o,state:u,variant:d}=(()=>{const e=i.useContext(t);if(void 0===e)throw a;return e})();return{marginLeft:s[d]?"open"===u?o:"collapse"===u?n(8):0:0,transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})}}));exports.DrawerMain=({children:r})=>e.jsxs(o,{children:[e.jsx(n,{}),r]});
+//# sourceMappingURL=index.js.map

package/drawer-main/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-main/drawer-main.tsx"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"~/drawer\";\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 { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\nimport MuiDrawer, { drawerClasses } from \"@mui/material/Drawer\";\nimport { paperClasses } from \"@mui/material/Paper\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\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 { styled, useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerHeader, useDrawer } from \"../drawer-provider\";\nimport { DrawerVariant } from \"~/drawer\";\n\nconst drawerSpace: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  clipped: true,\n  persistent: true,\n};\n\nconst StyledDiv = styled(\"div\")(({ theme }) => {\n  const { spacing } = useTheme();\n  const { drawerWidth, state, variant } = useDrawer();\n\n  const marginLeft = drawerSpace[variant]\n    ? state === \"open\"\n      ? drawerWidth\n      : state === \"collapse\"\n      ? spacing(8)\n      : 0\n    : 0;\n\n  return {\n    marginLeft,\n    transition: theme.transitions.create(\"margin\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n  };\n});\n\nexport type DrawerMainProps = PropsWithChildren;\n\nexport const DrawerMain = ({ children }: DrawerMainProps) => (\n  <StyledDiv>\n    <DrawerHeader />\n    {children}\n  </StyledDiv>\n);\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","DrawerHeader","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","drawerSpace","temporary","mini","clipped","persistent","StyledDiv","useTheme","drawerWidth","state","variant","context","useContext","useDrawer","marginLeft","transition","transitions","create","easing","sharp","duration","leavingScreen","children","_jsxs","_jsx","jsx"],"mappings":"+UAgBO,MAAMA,EAAgBC,EAAAA,mBAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCP9BC,EAAeC,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YAAa,CACxDC,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASJ,EAAMK,QAAQ,EAAG,MACvBL,EAAMM,OAAOC,YCVZC,EAA8C,CAClDC,WAAW,EACXC,MAAM,EACNC,SAAS,EACTC,YAAY,GAGRC,EAAYd,EAAAA,OAAO,MAAPA,EAAc,EAAGC,YACjC,MAAMK,QAAEA,GAAYS,EAAAA,YACdC,YAAEA,EAAWC,MAAEA,EAAKC,QAAEA,GFKL,MACvB,MAAMC,EAAUC,aAAW1B,GAE3B,QAAgBE,IAAZuB,EACF,MAAMtB,EAGR,OAAOsB,CAAO,EEZ0BE,GAUxC,MAAO,CACLC,WATiBb,EAAYS,GACjB,SAAVD,EACED,EACU,aAAVC,EACAX,EAAQ,GACR,EACF,EAIFiB,WAAYtB,EAAMuB,YAAYC,OAAO,SAAU,CAC7CC,OAAQzB,EAAMuB,YAAYE,OAAOC,MACjCC,SAAU3B,EAAMuB,YAAYI,SAASC,gBAExC,uBAKuB,EAAGC,cAC3BC,EAAAA,KAACjB,aACCkB,EAACC,IAAAlC,MACA+B"}

package/drawer-main/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/drawer-main",
+  "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-main/index.js

@@ -1,2 +1,2 @@
-import{styled as e,useTheme as i}from"@mui/material";import t,{createContext as n,useContext as r}from"react";import"@mui/icons-material/ChevronLeft";const a=n(void 0),o=new Error("DrawerContext.Provider is required and was undefined"),s=e("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),d={temporary:!1,mini:!0,clipped:!0,persistent:!0},m=e("div")((({theme:e})=>{const{spacing:t}=i(),{drawerWidth:n,state:s,variant:m}=(()=>{const e=r(a);if(void 0===e)throw o;return e})();return{marginLeft:d[m]?"open"===s?n:"collapse"===s?t(8):0:0,transition:e.transitions.create("margin",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.leavingScreen})}})),l=({children:e})=>t.createElement(m,null,t.createElement(s,null),e);export{l as DrawerMain};
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import{styled as t,useTheme as e}from"@mui/material/styles";import"@mui/material/Drawer";import"@mui/material/Paper";import"@mui/material/Divider";import"@mui/material/IconButton";import"@mui/icons-material/ChevronLeft";import{createContext as n,useContext as a}from"react";const o=n(void 0),m=new Error("DrawerContext.Provider is required and was undefined"),s=t("div")((({theme:i})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:i.spacing(0,1),...i.mixins.toolbar}))),d={temporary:!1,mini:!0,clipped:!0,persistent:!0},p=t("div")((({theme:i})=>{const{spacing:r}=e(),{drawerWidth:t,state:n,variant:s}=(()=>{const i=a(o);if(void 0===i)throw m;return i})();return{marginLeft:d[s]?"open"===n?t:"collapse"===n?r(8):0:0,transition:i.transitions.create("margin",{easing:i.transitions.easing.sharp,duration:i.transitions.duration.leavingScreen})}})),l=({children:t})=>i(p,{children:[r(s,{}),t]});export{l as DrawerMain};
 //# sourceMappingURL=index.js.map

package/drawer-main/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/drawer-provider/drawer-context.ts","../../src/drawer/drawer.tsx","../../src/drawer-main/drawer-main.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 { styled, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerHeader, useDrawer } from \"../drawer-provider\";\nimport { DrawerVariant } from \"../drawer/drawer.types\";\n\nconst drawerSpace: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  clipped: true,\n  persistent: true,\n};\n\nconst StyledDiv = styled(\"div\")(({ theme }) => {\n  const { spacing } = useTheme();\n  const { drawerWidth, state, variant } = useDrawer();\n\n  const marginLeft = drawerSpace[variant]\n    ? state === \"open\"\n      ? drawerWidth\n      : state === \"collapse\"\n      ? spacing(8)\n      : 0\n    : 0;\n\n  return {\n    marginLeft,\n    transition: theme.transitions.create(\"margin\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n  };\n});\n\nexport type DrawerMainProps = PropsWithChildren;\n\nexport const DrawerMain = ({ children }: DrawerMainProps) => (\n  <StyledDiv>\n    <DrawerHeader />\n    {children}\n  </StyledDiv>\n);\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","DrawerHeader","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","drawerSpace","temporary","mini","clipped","persistent","StyledDiv","useTheme","drawerWidth","state","variant","context","useContext","useDrawer","marginLeft","transition","transitions","create","easing","sharp","duration","leavingScreen","DrawerMain","children","React","createElement"],"mappings":"sJAgBO,MAAMA,EAAgBC,OAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCA9BC,EAAeC,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACxDC,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASJ,EAAMK,QAAQ,EAAG,MACvBL,EAAMM,OAAOC,YChBZC,EAA8C,CAClDC,WAAW,EACXC,MAAM,EACNC,SAAS,EACTC,YAAY,GAGRC,EAAYd,EAAO,MAAPA,EAAc,EAAGC,YACjC,MAAMK,QAAEA,GAAYS,KACdC,YAAEA,EAAWC,MAAEA,EAAKC,QAAEA,GFIL,MACvB,MAAMC,EAAUC,EAAW1B,GAE3B,QAAgBE,IAAZuB,EACF,MAAMtB,EAGR,OAAOsB,CAAO,EEX0BE,GAUxC,MAAO,CACLC,WATiBb,EAAYS,GACjB,SAAVD,EACED,EACU,aAAVC,EACAX,EAAQ,GACR,EACF,EAIFiB,WAAYtB,EAAMuB,YAAYC,OAAO,SAAU,CAC7CC,OAAQzB,EAAMuB,YAAYE,OAAOC,MACjCC,SAAU3B,EAAMuB,YAAYI,SAASC,gBAExC,IAKUC,EAAa,EAAGC,cAC3BC,gBAAClB,EAAS,KACRkB,EAAAC,cAAClC,EAAe,MACfgC"}
+{"version":3,"file":"index.js","sources":["../../src/drawer-provider/drawer-context.ts","../../src/drawer/drawer.tsx","../../src/drawer-main/drawer-main.tsx"],"sourcesContent":["import { useContext, createContext } from \"react\";\nimport { DrawerState, DrawerVariant } from \"~/drawer\";\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 { SxProps, Theme, styled, useTheme } from \"@mui/material/styles\";\nimport MuiDrawer, { drawerClasses } from \"@mui/material/Drawer\";\nimport { paperClasses } from \"@mui/material/Paper\";\nimport Divider from \"@mui/material/Divider\";\nimport IconButton from \"@mui/material/IconButton\";\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 { styled, useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\nimport { DrawerHeader, useDrawer } from \"../drawer-provider\";\nimport { DrawerVariant } from \"~/drawer\";\n\nconst drawerSpace: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  clipped: true,\n  persistent: true,\n};\n\nconst StyledDiv = styled(\"div\")(({ theme }) => {\n  const { spacing } = useTheme();\n  const { drawerWidth, state, variant } = useDrawer();\n\n  const marginLeft = drawerSpace[variant]\n    ? state === \"open\"\n      ? drawerWidth\n      : state === \"collapse\"\n      ? spacing(8)\n      : 0\n    : 0;\n\n  return {\n    marginLeft,\n    transition: theme.transitions.create(\"margin\", {\n      easing: theme.transitions.easing.sharp,\n      duration: theme.transitions.duration.leavingScreen,\n    }),\n  };\n});\n\nexport type DrawerMainProps = PropsWithChildren;\n\nexport const DrawerMain = ({ children }: DrawerMainProps) => (\n  <StyledDiv>\n    <DrawerHeader />\n    {children}\n  </StyledDiv>\n);\n"],"names":["DrawerContext","createContext","undefined","UndefinedProvider","Error","DrawerHeader","styled","theme","display","alignItems","justifyContent","padding","spacing","mixins","toolbar","drawerSpace","temporary","mini","clipped","persistent","StyledDiv","useTheme","drawerWidth","state","variant","context","useContext","useDrawer","marginLeft","transition","transitions","create","easing","sharp","duration","leavingScreen","DrawerMain","children","_jsxs","_jsx"],"mappings":"oUAgBO,MAAMA,EAAgBC,OAA8CC,GAC9DC,EAAoB,IAAIC,MAAM,wDCP9BC,EAAeC,EAAO,MAAPA,EAAc,EAAGC,YAAa,CACxDC,QAAS,OACTC,WAAY,SACZC,eAAgB,WAChBC,QAASJ,EAAMK,QAAQ,EAAG,MACvBL,EAAMM,OAAOC,YCVZC,EAA8C,CAClDC,WAAW,EACXC,MAAM,EACNC,SAAS,EACTC,YAAY,GAGRC,EAAYd,EAAO,MAAPA,EAAc,EAAGC,YACjC,MAAMK,QAAEA,GAAYS,KACdC,YAAEA,EAAWC,MAAEA,EAAKC,QAAEA,GFKL,MACvB,MAAMC,EAAUC,EAAW1B,GAE3B,QAAgBE,IAAZuB,EACF,MAAMtB,EAGR,OAAOsB,CAAO,EEZ0BE,GAUxC,MAAO,CACLC,WATiBb,EAAYS,GACjB,SAAVD,EACED,EACU,aAAVC,EACAX,EAAQ,GACR,EACF,EAIFiB,WAAYtB,EAAMuB,YAAYC,OAAO,SAAU,CAC7CC,OAAQzB,EAAMuB,YAAYE,OAAOC,MACjCC,SAAU3B,EAAMuB,YAAYI,SAASC,gBAExC,IAKUC,EAAa,EAAGC,cAC3BC,EAAClB,aACCmB,EAAClC,MACAgC"}

package/drawer-main/package.json

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

package/drawer-provider/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/styles"),t=require("@mui/material/Drawer"),i=require("@mui/material/Paper"),n=require("@mui/material/Divider"),a=require("@mui/material/IconButton"),s=require("@mui/icons-material/ChevronLeft"),o=require("react");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=p(t),l=p(n),c=p(a),u=p(s);const m=o.createContext(void 0),h=new Error("DrawerContext.Provider is required and was undefined"),x=()=>{const e=o.useContext(m);if(void 0===e)throw h;return e},w=e=>({width:240,transition:e.transitions.create("width",{easing:e.transitions.easing.sharp,duration:e.transitions.duration.enteringScreen}),overflowX:"hidden"}),v=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)`}}),f=r.styled("div")((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-end",padding:e.spacing(0,1),...e.mixins.toolbar}))),g={temporary:!0,mini:!0,persistent:!0,clipped:!1},y={temporary:"temporary",mini:"permanent",clipped:"permanent",persistent:"persistent"},C=()=>({}),S={mini:(e,r)=>({boxSizing:"border-box",[`& .${i.paperClasses.root}`]:{zIndex:r.zIndex.drawer-1}}),temporary:C,clipped:C,persistent:C},j={temporary:"close",mini:"collapse",clipped:"open",persistent:"close"},q={temporary:["close","open"],mini:["collapse","open"],clipped:["open","open"],persistent:["close","open"]};exports.Drawer=({children:i,...n})=>{const a=r.useTheme(),{state:s,switchState:o,underAppBar:p,close:m,drawerWidth:h,variant:C}=x(),j={width:h,flexShrink:0,whiteSpace:"nowrap",..."open"===s&&{...w(a),[`& .${t.drawerClasses.paper}`]:w(a)},..."open"!==s&&{...v(a),[`& .${t.drawerClasses.paper}`]:v(a)},...S[C](s,a)};return e.jsxs(d.default,{open:"open"===s,variant:y[C],role:"menu","aria-hidden":"close"===s,onClose:m,sx:j,...n,children:[e.jsx(f,{children:!p&&g[C]&&e.jsx(c.default,{onClick:o,children:e.jsx(u.default,{})})}),e.jsx(l.default,{}),i]})},exports.DrawerContext=m,exports.DrawerHeader=f,exports.DrawerProvider=({children:r,initialState:t,variant:i="temporary",drawerWidth:n=240,underAppBar:a=!1,selectedItemId:s,onStateChange:p=(()=>null)})=>{const[d,l]=o.useState(t||j[i]),c=e=>{p(e),l(e)};return e.jsx(m.Provider,{value:{state:d,variant:i,selectedItemId:s,underAppBar:a,drawerWidth:n,switchState:()=>c(q[i]["open"===d?0:1]),collapse:()=>c("collapse"),close:()=>c("close"),open:()=>c("open"),setState:l},children:r})},exports.UndefinedProvider=h,exports.useDrawer=x;
+//# sourceMappingURL=index.js.map