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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"LoadingOverlay.cjs","names":["getDefaultZIndex","createVarsResolver","factory","useProps","useMantineTheme","useStyles","Transition","Box","Loader","Overlay","classes"],"sources":["../../../src/components/LoadingOverlay/LoadingOverlay.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Loader, LoaderProps } from '../Loader';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './LoadingOverlay.module.css';\n\nexport type LoadingOverlayStylesNames = 'root' | 'loader' | 'overlay';\nexport type LoadingOverlayCssVariables = {\n  root: '--lo-z-index';\n};\n\nexport interface LoadingOverlayProps\n  extends BoxProps, StylesApiProps<LoadingOverlayFactory>, ElementProps<'div'> {\n  /** Props passed down to `Transition` component. Set `duration` to create custom transition or override default transition. */\n  transitionProps?: TransitionOverride;\n\n  /** Props passed down to `Loader` component */\n  loaderProps?: LoaderProps;\n\n  /** Props passed down to `Overlay` component. Use to customizing blur, opacity, color and other properties. */\n  overlayProps?: OverlayProps;\n\n  /** Controls overlay visibility. Typically used with state (useState, useDisclosure). @default false */\n  visible?: boolean;\n\n  /** Controls `z-index` of both the overlay and loader. The loader receives `z-index + 1`. @default 400 */\n  zIndex?: string | number;\n\n  /** Called when transition starts */\n  onEnter?: () => void;\n\n  /** Called when transition ends */\n  onEntered?: () => void;\n\n  /** Called when exit transition starts */\n  onExit?: () => void;\n\n  /** Called when exit transition ends */\n  onExited?: () => void;\n}\n\nexport type LoadingOverlayFactory = Factory<{\n  props: LoadingOverlayProps;\n  ref: HTMLDivElement;\n  stylesNames: LoadingOverlayStylesNames;\n  vars: LoadingOverlayCssVariables;\n}>;\n\nconst defaultProps = {\n  transitionProps: { transition: 'fade', duration: 0 },\n  overlayProps: { backgroundOpacity: 0.75 },\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<LoadingOverlayProps>;\n\nconst varsResolver = createVarsResolver<LoadingOverlayFactory>((_, { zIndex }) => ({\n  root: {\n    '--lo-z-index': zIndex?.toString(),\n  },\n}));\n\nexport const LoadingOverlay = factory<LoadingOverlayFactory>((_props) => {\n  const props = useProps('LoadingOverlay', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    transitionProps,\n    loaderProps,\n    overlayProps,\n    visible,\n    zIndex,\n    attributes,\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<LoadingOverlayFactory>({\n    name: 'LoadingOverlay',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _overlayProps = { ...defaultProps.overlayProps, ...overlayProps };\n\n  return (\n    <Transition\n      transition=\"fade\"\n      {...transitionProps}\n      mounted={!!visible}\n      onEnter={onEnter}\n      onEntered={onEntered}\n      onExit={onExit}\n      onExited={onExited}\n    >\n      {(transitionStyles) => (\n        <Box {...getStyles('root', { style: transitionStyles })} {...others}>\n          <Loader\n            unstyled={unstyled}\n            {...loaderProps}\n            {...getStyles('loader', {\n              className: loaderProps?.className,\n              style: loaderProps?.style,\n            })}\n          />\n\n          <Overlay\n            {..._overlayProps}\n            {...getStyles('overlay', {\n              className: _overlayProps?.className,\n              style: _overlayProps?.style,\n            })}\n            unstyled={unstyled}\n            color={overlayProps?.color || theme.white}\n          />\n\n          <Overlay\n            {..._overlayProps}\n            {...getStyles('overlay', {\n              className: _overlayProps?.className,\n              style: _overlayProps?.style,\n            })}\n            lightHidden\n            unstyled={unstyled}\n            color={overlayProps?.color || theme.colors.dark[5]}\n          />\n        </Box>\n      )}\n    </Transition>\n  );\n});\n\nLoadingOverlay.classes = classes;\nLoadingOverlay.varsResolver = varsResolver;\nLoadingOverlay.displayName = '@mantine/core/LoadingOverlay';\n"],"mappings":";;;;;;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,iBAAiB;EAAE,YAAY;EAAQ,UAAU;EAAG;CACpD,cAAc,EAAE,mBAAmB,KAAM;CACzC,QAAQA,4BAAAA,iBAAiB,UAAU;CACpC;AAED,MAAM,eAAeC,6BAAAA,oBAA2C,GAAG,EAAE,cAAc,EACjF,MAAM,EACJ,gBAAgB,QAAQ,UAAU,EACnC,EACF,EAAE;AAEH,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,iBACA,aACA,cACA,SACA,QACA,YACA,SACA,WACA,QACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB;EAAE,GAAG,aAAa;EAAc,GAAG;EAAc;AAEvE,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,YAAW;EACX,GAAI;EACJ,SAAS,CAAC,CAAC;EACF;EACE;EACH;EACE;aAER,qBACA,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ,EAAE,OAAO,kBAAkB,CAAC;GAAE,GAAI;aAA7D;IACE,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;KACY;KACV,GAAI;KACJ,GAAI,UAAU,UAAU;MACtB,WAAW,aAAa;MACxB,OAAO,aAAa;MACrB,CAAC;KACF,CAAA;IAEF,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;KACE,GAAI;KACJ,GAAI,UAAU,WAAW;MACvB,WAAW,eAAe;MAC1B,OAAO,eAAe;MACvB,CAAC;KACQ;KACV,OAAO,cAAc,SAAS,MAAM;KACpC,CAAA;IAEF,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;KACE,GAAI;KACJ,GAAI,UAAU,WAAW;MACvB,WAAW,eAAe;MAC1B,OAAO,eAAe;MACvB,CAAC;KACF,aAAA;KACU;KACV,OAAO,cAAc,SAAS,MAAM,OAAO,KAAK;KAChD,CAAA;IACE;;EAEG,CAAA;EAEf;AAEF,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAe;AAC9B,eAAe,cAAc"}