@mantine/core/cjs/components/AppShell/AppShell.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"AppShell.cjs","names":["getDefaultZIndex","createVarsResolver","factory","useProps","useStyles","useResizing","AppShellProvider","AppShellMediaStyles","Box","classes","AppShellNavbar","AppShellHeader","AppShellMain","AppShellAside","AppShellFooter","AppShellSection"],"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AppShellProvider } from './AppShell.context';\nimport {\n  AppShellAsideConfiguration,\n  AppShellFooterConfiguration,\n  AppShellHeaderConfiguration,\n  AppShellNavbarConfiguration,\n  AppShellResponsiveSize,\n} from './AppShell.types';\nimport { AppShellAside } from './AppShellAside/AppShellAside';\nimport { AppShellFooter } from './AppShellFooter/AppShellFooter';\nimport { AppShellHeader } from './AppShellHeader/AppShellHeader';\nimport { AppShellMain } from './AppShellMain/AppShellMain';\nimport { AppShellMediaStyles } from './AppShellMediaStyles/AppShellMediaStyles';\nimport { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';\nimport { AppShellSection } from './AppShellSection/AppShellSection';\nimport { useResizing } from './use-resizing/use-resizing';\nimport classes from './AppShell.module.css';\n\nexport type AppShellStylesNames =\n  | 'root'\n  | 'navbar'\n  | 'main'\n  | 'header'\n  | 'footer'\n  | 'aside'\n  | 'section';\n\nexport type AppShellCssVariables = {\n  root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function';\n};\n\nexport interface AppShellProps\n  extends BoxProps, StylesApiProps<AppShellFactory>, ElementProps<'div'> {\n  /** If set, the associated components have a border @default true */\n  withBorder?: boolean;\n\n  /** Padding of the main section. Important: use `padding` prop instead of `p`. @default 0 */\n  padding?: MantineSpacing | AppShellResponsiveSize;\n\n  /** `Navbar` configuration, controls width, breakpoints and collapsed state. Required if you use `Navbar` component. */\n  navbar?: AppShellNavbarConfiguration;\n\n  /** `Aside` configuration, controls width, breakpoints and collapsed state. Required if you use `Aside` component. */\n  aside?: AppShellAsideConfiguration;\n\n  /** `Header` configuration, controls height, offset and collapsed state. Required if you use `Header` component. */\n  header?: AppShellHeaderConfiguration;\n\n  /** `Footer` configuration, controls height, offset and collapsed state. Required if you use `Footer` component. */\n  footer?: AppShellFooterConfiguration;\n\n  /** Duration of all transitions in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Timing function of all transitions @default ease */\n  transitionTimingFunction?: React.CSSProperties['transitionTimingFunction'];\n\n  /** `z-index` of all associated elements @default 100 */\n  zIndex?: string | number;\n\n  /** Determines how `Navbar`/`Aside` are arranged relative to `Header`/`Footer` */\n  layout?: 'default' | 'alt';\n\n  /** If set, `Navbar`, `Aside`, `Header` and `Footer` components are hidden */\n  disabled?: boolean;\n\n  /** If set, `Header` and `Footer` components include styles to offset scrollbars. Based on `react-remove-scroll`. @default true */\n  offsetScrollbars?: boolean;\n\n  /** Determines positioning mode of all sections @default 'fixed' */\n  mode?: 'fixed' | 'static';\n}\n\nexport type AppShellFactory = Factory<{\n  props: AppShellProps;\n  ref: HTMLDivElement;\n  stylesNames: AppShellStylesNames;\n  vars: AppShellCssVariables;\n  staticComponents: {\n    Navbar: typeof AppShellNavbar;\n    Header: typeof AppShellHeader;\n    Main: typeof AppShellMain;\n    Aside: typeof AppShellAside;\n    Footer: typeof AppShellFooter;\n    Section: typeof AppShellSection;\n  };\n}>;\n\nconst defaultProps = {\n  withBorder: true,\n  padding: 0,\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  zIndex: getDefaultZIndex('app'),\n  mode: 'fixed',\n} satisfies Partial<AppShellProps>;\n\nconst varsResolver = createVarsResolver<AppShellFactory>(\n  (_, { transitionDuration, transitionTimingFunction }) => ({\n    root: {\n      '--app-shell-transition-duration': `${transitionDuration}ms`,\n      '--app-shell-transition-timing-function': transitionTimingFunction,\n    },\n  })\n);\n\nexport const AppShell = factory<AppShellFactory>((_props) => {\n  const props = useProps('AppShell', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    navbar,\n    withBorder,\n    padding,\n    transitionDuration,\n    transitionTimingFunction,\n    header,\n    zIndex,\n    layout,\n    disabled,\n    aside,\n    footer,\n    offsetScrollbars = true,\n    mode,\n    mod,\n    attributes,\n    id,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<AppShellFactory>({\n    name: 'AppShell',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const resizing = useResizing({ disabled, transitionDuration });\n  const _id = useId(id);\n\n  return (\n    <AppShellProvider value={{ getStyles, withBorder, zIndex, disabled, offsetScrollbars, mode }}>\n      <AppShellMediaStyles\n        navbar={navbar}\n        header={header}\n        aside={aside}\n        footer={footer}\n        padding={padding}\n        mode={mode}\n        selector={mode === 'static' ? `#${_id}` : undefined}\n      />\n      <Box\n        {...getStyles('root')}\n        id={_id}\n        mod={[{ resizing, layout, disabled, mode }, mod]}\n        {...others}\n      />\n    </AppShellProvider>\n  );\n});\n\nAppShell.classes = classes;\nAppShell.varsResolver = varsResolver;\nAppShell.displayName = '@mantine/core/AppShell';\nAppShell.Navbar = AppShellNavbar;\nAppShell.Header = AppShellHeader;\nAppShell.Main = AppShellMain;\nAppShell.Aside = AppShellAside;\nAppShell.Footer = AppShellFooter;\nAppShell.Section = AppShellSection;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsGA,MAAM,eAAe;CACnB,YAAY;CACZ,SAAS;CACT,oBAAoB;CACpB,0BAA0B;CAC1B,QAAQA,4BAAAA,iBAAiB,MAAM;CAC/B,MAAM;CACP;AAED,MAAM,eAAeC,6BAAAA,oBAClB,GAAG,EAAE,oBAAoB,gCAAgC,EACxD,MAAM;CACJ,mCAAmC,GAAG,mBAAmB;CACzD,0CAA0C;CAC3C,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,YACA,SACA,oBACA,0BACA,QACA,QACA,QACA,UACA,OACA,QACA,mBAAmB,MACnB,MACA,KACA,YACA,IACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,WAAWC,qBAAAA,YAAY;EAAE;EAAU;EAAoB,CAAC;CAC9D,MAAM,OAAA,GAAA,eAAA,OAAY,GAAG;AAErB,QACE,iBAAA,GAAA,kBAAA,MAACC,yBAAAA,kBAAD;EAAkB,OAAO;GAAE;GAAW;GAAY;GAAQ;GAAU;GAAkB;GAAM;YAA5F,CACE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;GACU;GACA;GACD;GACC;GACC;GACH;GACN,UAAU,SAAS,WAAW,IAAI,QAAQ,KAAA;GAC1C,CAAA,EACF,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI,UAAU,OAAO;GACrB,IAAI;GACJ,KAAK,CAAC;IAAE;IAAU;IAAQ;IAAU;IAAM,EAAE,IAAI;GAChD,GAAI;GACJ,CAAA,CACe;;EAErB;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAASC,uBAAAA;AAClB,SAAS,SAASC,uBAAAA;AAClB,SAAS,OAAOC,qBAAAA;AAChB,SAAS,QAAQC,sBAAAA;AACjB,SAAS,SAASC,uBAAAA;AAClB,SAAS,UAAUC,wBAAAA"}