@mantine/core/cjs/components/Drawer/DrawerRoot.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"DrawerRoot.cjs","names":["getDefaultZIndex","createVarsResolver","getSize","rem","factory","useProps","useDirection","useStyles","DrawerProvider","ModalBase","ScrollArea","classes"],"sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"sourcesContent":["import {\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getSize,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ModalBase, ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';\nimport { ScrollArea } from '../ScrollArea';\nimport { MantineTransition } from '../Transition';\nimport { DrawerProvider, ScrollAreaComponent } from './Drawer.context';\nimport classes from './Drawer.module.css';\n\ntype DrawerPosition = 'bottom' | 'left' | 'right' | 'top';\n\nfunction getDrawerAlign(position: DrawerPosition | undefined) {\n  switch (position) {\n    case 'top':\n      return 'flex-start';\n    case 'bottom':\n      return 'flex-end';\n    default:\n      return undefined;\n  }\n}\n\nfunction getDrawerFlex(position: DrawerPosition | undefined) {\n  if (position === 'top' || position === 'bottom') {\n    return '0 0 calc(100% - var(--drawer-offset, 0rem) * 2)';\n  }\n\n  return undefined;\n}\n\nexport type DrawerRootStylesNames = ModalBaseStylesNames;\nexport type DrawerRootCssVariables = {\n  root:\n    | '--drawer-size'\n    | '--drawer-flex'\n    | '--drawer-height'\n    | '--drawer-align'\n    | '--drawer-justify'\n    | '--drawer-offset';\n};\n\nexport interface DrawerRootProps extends StylesApiProps<DrawerRootFactory>, ModalBaseProps {\n  /** Scroll area component @default 'div' */\n  scrollAreaComponent?: ScrollAreaComponent;\n\n  /** Side of the screen on which drawer will be opened @default 'left' */\n  position?: DrawerPosition;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 0 */\n  radius?: MantineRadius;\n\n  /** Drawer container offset from the viewport end @default 0 */\n  offset?: number | string;\n}\n\nexport type DrawerRootFactory = Factory<{\n  props: DrawerRootProps;\n  ref: HTMLDivElement;\n  stylesNames: DrawerRootStylesNames;\n  vars: DrawerRootCssVariables;\n  compound: true;\n}>;\n\nconst transitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  left: 'slide-right',\n  right: 'slide-left',\n};\n\nconst rtlTransitions: Record<DrawerPosition, MantineTransition> = {\n  top: 'slide-down',\n  bottom: 'slide-up',\n  right: 'slide-right',\n  left: 'slide-left',\n};\n\nconst defaultProps = {\n  closeOnClickOutside: true,\n  withinPortal: true,\n  lockScroll: true,\n  trapFocus: true,\n  returnFocus: true,\n  closeOnEscape: true,\n  keepMounted: false,\n  zIndex: getDefaultZIndex('modal'),\n  position: 'left',\n} satisfies Partial<DrawerRootProps>;\n\nconst varsResolver = createVarsResolver<DrawerRootFactory>((_, { position, size, offset }) => ({\n  root: {\n    '--drawer-size': getSize(size, 'drawer-size'),\n    '--drawer-flex': getDrawerFlex(position),\n    '--drawer-height':\n      position === 'left' || position === 'right' ? undefined : 'var(--drawer-size)',\n    '--drawer-align': getDrawerAlign(position),\n    '--drawer-justify': position === 'right' ? 'flex-end' : undefined,\n    '--drawer-offset': rem(offset),\n  },\n}));\n\nexport const DrawerRoot = factory<DrawerRootFactory>((_props) => {\n  const props = useProps('DrawerRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    scrollAreaComponent,\n    position,\n    transitionProps,\n    radius,\n    attributes,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<DrawerRootFactory>({\n    name: 'Drawer',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const drawerTransition = (dir === 'rtl' ? rtlTransitions : transitions)[position];\n\n  return (\n    <DrawerProvider value={{ scrollAreaComponent, getStyles, radius }}>\n      <ModalBase\n        {...getStyles('root')}\n        transitionProps={{ transition: drawerTransition, ...transitionProps }}\n        data-offset-scrollbars={scrollAreaComponent === ScrollArea.Autosize || undefined}\n        unstyled={unstyled}\n        {...others}\n      />\n    </DrawerProvider>\n  );\n});\n\nDrawerRoot.classes = classes;\nDrawerRoot.varsResolver = varsResolver;\nDrawerRoot.displayName = '@mantine/core/DrawerRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,SAAS,eAAe,UAAsC;AAC5D,SAAQ,UAAR;EACE,KAAK,MACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,QACE;;;AAIN,SAAS,cAAc,UAAsC;AAC3D,KAAI,aAAa,SAAS,aAAa,SACrC,QAAO;;AAuCX,MAAM,cAAyD;CAC7D,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;CACR;AAED,MAAM,iBAA4D;CAChE,KAAK;CACL,QAAQ;CACR,OAAO;CACP,MAAM;CACP;AAED,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQA,4BAAAA,iBAAiB,QAAQ;CACjC,UAAU;CACX;AAED,MAAM,eAAeC,6BAAAA,oBAAuC,GAAG,EAAE,UAAU,MAAM,cAAc,EAC7F,MAAM;CACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,cAAc;CAC7C,iBAAiB,cAAc,SAAS;CACxC,mBACE,aAAa,UAAU,aAAa,UAAU,KAAA,IAAY;CAC5D,kBAAkB,eAAe,SAAS;CAC1C,oBAAoB,aAAa,UAAU,aAAa,KAAA;CACxD,mBAAmBC,YAAAA,IAAI,OAAO;CAC/B,EACF,EAAE;AAEH,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,qBACA,UACA,iBACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQC,0BAAAA,cAAc;CAE9B,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,oBAAoB,QAAQ,QAAQ,iBAAiB,aAAa;AAExE,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,OAAO;GAAE;GAAqB;GAAW;GAAQ;YAC/D,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,GAAI,UAAU,OAAO;GACrB,iBAAiB;IAAE,YAAY;IAAkB,GAAG;IAAiB;GACrE,0BAAwB,wBAAwBC,mBAAAA,WAAW,YAAY,KAAA;GAC7D;GACV,GAAI;GACJ,CAAA;EACa,CAAA;EAEnB;AAEF,WAAW,UAAUC,sBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}