@mantine/core 5.10.2 → 6.0.0-alpha.1

package/cjs/ModalBase/ModalBase.js

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactRemoveScroll = require('react-remove-scroll');
+var hooks = require('@mantine/hooks');
+var styles = require('@mantine/styles');
+var ModalBase_context = require('./ModalBase.context.js');
+var ModalBaseCloseButton = require('./ModalBaseCloseButton/ModalBaseCloseButton.js');
+var ModalBaseOverlay = require('./ModalBaseOverlay/ModalBaseOverlay.js');
+var ModalBaseContent = require('./ModalBaseContent/ModalBaseContent.js');
+var ModalBaseHeader = require('./ModalBaseHeader/ModalBaseHeader.js');
+var ModalBaseTitle = require('./ModalBaseTitle/ModalBaseTitle.js');
+var ModalBaseBody = require('./ModalBaseBody/ModalBaseBody.js');
+var NativeScrollArea = require('./NativeScrollArea/NativeScrollArea.js');
+var useLockScroll = require('./use-lock-scroll.js');
+var OptionalPortal = require('../Portal/OptionalPortal.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const ModalBaseDefaultProps = {
+  closeOnClickOutside: true,
+  withinPortal: true,
+  lockScroll: true,
+  trapFocus: true,
+  returnFocus: true,
+  closeOnEscape: true,
+  keepMounted: false,
+  zIndex: styles.getDefaultZIndex("modal"),
+  padding: "md",
+  size: "md",
+  shadow: "xl"
+};
+function ModalBase(props) {
+  const {
+    opened,
+    onClose,
+    children,
+    closeOnClickOutside,
+    __staticSelector,
+    transitionProps,
+    withinPortal,
+    keepMounted,
+    target,
+    zIndex,
+    lockScroll,
+    trapFocus,
+    closeOnEscape,
+    returnFocus,
+    padding,
+    shadow,
+    id,
+    size,
+    variant,
+    classNames,
+    styles: styles$1
+  } = styles.useComponentDefaultProps(props.__staticSelector, ModalBaseDefaultProps, props);
+  const _id = hooks.useId(id);
+  const [titleMounted, setTitleMounted] = React.useState(false);
+  const [bodyMounted, setBodyMounted] = React.useState(false);
+  const transitionDuration = typeof (transitionProps == null ? void 0 : transitionProps.duration) === "number" ? transitionProps == null ? void 0 : transitionProps.duration : 200;
+  const shouldLockScroll = useLockScroll.useLockScroll({ opened, transitionDuration });
+  hooks.useWindowEvent("keydown", (event) => {
+    if (!trapFocus && event.key === "Escape" && closeOnEscape) {
+      onClose();
+    }
+  });
+  hooks.useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });
+  return /* @__PURE__ */ React__default.createElement(OptionalPortal.OptionalPortal, {
+    withinPortal,
+    target
+  }, /* @__PURE__ */ React__default.createElement(ModalBase_context.ModalBaseProvider, {
+    value: {
+      __staticSelector,
+      opened,
+      onClose,
+      closeOnClickOutside,
+      transitionProps: __spreadProps(__spreadValues({}, transitionProps), { duration: transitionDuration, keepMounted }),
+      zIndex,
+      padding,
+      id: _id,
+      getTitleId: () => `${_id}-title`,
+      getBodyId: () => `${_id}-body`,
+      titleMounted,
+      bodyMounted,
+      setTitleMounted,
+      setBodyMounted,
+      trapFocus,
+      closeOnEscape,
+      shadow,
+      stylesApi: {
+        name: __staticSelector,
+        size,
+        variant,
+        classNames,
+        styles: styles$1
+      }
+    }
+  }, /* @__PURE__ */ React__default.createElement(reactRemoveScroll.RemoveScroll, {
+    enabled: shouldLockScroll && lockScroll
+  }, children)));
+}
+ModalBase.CloseButton = ModalBaseCloseButton.ModalBaseCloseButton;
+ModalBase.Overlay = ModalBaseOverlay.ModalBaseOverlay;
+ModalBase.Content = ModalBaseContent.ModalBaseContent;
+ModalBase.Header = ModalBaseHeader.ModalBaseHeader;
+ModalBase.Title = ModalBaseTitle.ModalBaseTitle;
+ModalBase.Body = ModalBaseBody.ModalBaseBody;
+ModalBase.NativeScrollArea = NativeScrollArea.NativeScrollArea;
+
+exports.ModalBase = ModalBase;
+exports.ModalBaseDefaultProps = ModalBaseDefaultProps;
+//# sourceMappingURL=ModalBase.js.map

package/cjs/ModalBase/ModalBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBase.js","sources":["../../src/ModalBase/ModalBase.tsx"],"sourcesContent":["/* eslint-disable react/no-unused-prop-types */\nimport React, { useState } from 'react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { useId, useWindowEvent, useFocusReturn } from '@mantine/hooks';\nimport {\n  getDefaultZIndex,\n  MantineNumberSize,\n  useComponentDefaultProps,\n  ClassNames,\n  Styles,\n  MantineShadow,\n} from '@mantine/styles';\nimport { OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport {\n  ModalBaseCloseButton,\n  ModalBaseCloseButtonStylesNames,\n} from './ModalBaseCloseButton/ModalBaseCloseButton';\nimport { ModalBaseOverlay, ModalBaseOverlayStylesNames } from './ModalBaseOverlay/ModalBaseOverlay';\nimport { ModalBaseContent, ModalBaseContentStylesNames } from './ModalBaseContent/ModalBaseContent';\nimport { ModalBaseHeader, ModalBaseHeaderStylesNames } from './ModalBaseHeader/ModalBaseHeader';\nimport { ModalBaseTitle, ModalBaseTitleStylesNames } from './ModalBaseTitle/ModalBaseTitle';\nimport { ModalBaseBody, ModalBaseBodyStylesNames } from './ModalBaseBody/ModalBaseBody';\nimport { NativeScrollArea } from './NativeScrollArea/NativeScrollArea';\nimport { useLockScroll } from './use-lock-scroll';\n\nexport type ModalBaseStylesNames =\n  | ModalBaseCloseButtonStylesNames\n  | ModalBaseOverlayStylesNames\n  | ModalBaseContentStylesNames\n  | ModalBaseHeaderStylesNames\n  | ModalBaseTitleStylesNames\n  | ModalBaseBodyStylesNames;\n\nexport interface ModalBaseSettings {\n  variant?: string;\n  classNames?: ClassNames<ModalBaseStylesNames>;\n  styles?: Styles<ModalBaseStylesNames>;\n\n  /** If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead */\n  keepMounted?: boolean;\n\n  /** Determines whether modal/drawer is opened */\n  opened: boolean;\n\n  /** Called when modal/drawer is closed */\n  onClose(): void;\n\n  /** Child component */\n  children?: React.ReactNode;\n\n  /** Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default */\n  closeOnClickOutside?: boolean;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Props added to Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'pop' } by default */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether component should be rendered inside Portal, true by default */\n  withinPortal?: boolean;\n\n  /** Target element or selector where Portal should be rendered, by default new element is created and appended to the document.body */\n  target?: HTMLElement | string;\n\n  /** Determines whether scroll should be locked when opened={true}, defaults to true */\n  lockScroll?: boolean;\n\n  /** Determines whether focus should be trapped, true by default */\n  trapFocus?: boolean;\n\n  /** z-index CSS property of root element, 200 by default */\n  zIndex?: number;\n\n  /** Key of theme.spacing or any valid CSS value to set content, header and footer padding, 'md' by default */\n  padding?: MantineNumberSize;\n\n  /** Id used to connect modal/drawer with body and title */\n  id?: string;\n\n  /** Determines whether focus should be returned to the last active element onClose is called, true by default */\n  returnFocus?: boolean;\n\n  /** Determines whether onClose should be called when user presses escape key, true by default */\n  closeOnEscape?: boolean;\n\n  /** Controls content width, 'md' by default */\n  size?: MantineNumberSize;\n\n  /** Key of theme.shadows or any valid css box-shadow value, 'xl' by default */\n  shadow?: MantineShadow;\n}\n\nexport interface ModalBaseProps extends ModalBaseSettings {\n  /** Base component name for styles and components default props */\n  __staticSelector: string;\n}\n\nexport const ModalBaseDefaultProps: Partial<ModalBaseProps> = {\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  padding: 'md',\n  size: 'md',\n  shadow: 'xl',\n};\n\nexport function ModalBase(props: ModalBaseProps) {\n  const {\n    opened,\n    onClose,\n    children,\n    closeOnClickOutside,\n    __staticSelector,\n    transitionProps,\n    withinPortal,\n    keepMounted,\n    target,\n    zIndex,\n    lockScroll,\n    trapFocus,\n    closeOnEscape,\n    returnFocus,\n    padding,\n    shadow,\n    id,\n    size,\n    variant,\n    classNames,\n    styles,\n  } = useComponentDefaultProps(props.__staticSelector, ModalBaseDefaultProps, props);\n\n  const _id = useId(id);\n  const [titleMounted, setTitleMounted] = useState(false);\n  const [bodyMounted, setBodyMounted] = useState(false);\n\n  const transitionDuration =\n    typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n  const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n  useWindowEvent('keydown', (event) => {\n    if (!trapFocus && event.key === 'Escape' && closeOnEscape) {\n      onClose();\n    }\n  });\n\n  useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });\n\n  return (\n    <OptionalPortal withinPortal={withinPortal} target={target}>\n      <ModalBaseProvider\n        value={{\n          __staticSelector,\n          opened,\n          onClose,\n          closeOnClickOutside,\n          transitionProps: { ...transitionProps, duration: transitionDuration, keepMounted },\n          zIndex,\n          padding,\n          id: _id,\n          getTitleId: () => `${_id}-title`,\n          getBodyId: () => `${_id}-body`,\n          titleMounted,\n          bodyMounted,\n          setTitleMounted,\n          setBodyMounted,\n          trapFocus,\n          closeOnEscape,\n          shadow,\n          stylesApi: {\n            name: __staticSelector,\n            size,\n            variant,\n            classNames,\n            styles,\n          },\n        }}\n      >\n        <RemoveScroll enabled={shouldLockScroll && lockScroll}>{children}</RemoveScroll>\n      </ModalBaseProvider>\n    </OptionalPortal>\n  );\n}\n\nModalBase.CloseButton = ModalBaseCloseButton;\nModalBase.Overlay = ModalBaseOverlay;\nModalBase.Content = ModalBaseContent;\nModalBase.Header = ModalBaseHeader;\nModalBase.Title = ModalBaseTitle;\nModalBase.Body = ModalBaseBody;\nModalBase.NativeScrollArea = NativeScrollArea;\n"],"names":["getDefaultZIndex","styles","useComponentDefaultProps","useId","useState","useLockScroll","useWindowEvent","useFocusReturn","React","OptionalPortal","ModalBaseProvider","RemoveScroll","ModalBaseCloseButton","ModalBaseOverlay","ModalBaseContent","ModalBaseHeader","ModalBaseTitle","ModalBaseBody","NativeScrollArea"],"mappings":"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"}

package/cjs/ModalBase/ModalBaseBody/ModalBaseBody.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('@mantine/styles');
+var ModalBase_context = require('../ModalBase.context.js');
+var ModalBaseBody_styles = require('./ModalBaseBody.styles.js');
+var Box = require('../../Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {};
+const ModalBaseBody = React.forwardRef((props, ref) => {
+  const ctx = ModalBase_context.useModalBaseContext();
+  const _a = styles.useComponentDefaultProps(`${ctx.__staticSelector}Body`, defaultProps, props), { className } = _a, others = __objRest(_a, ["className"]);
+  const { classes, cx } = ModalBaseBody_styles['default']({ padding: ctx.padding }, ctx.stylesApi);
+  React.useEffect(() => {
+    ctx.setBodyMounted(true);
+    return () => ctx.setBodyMounted(false);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
+    id: ctx.getBodyId(),
+    className: cx(classes.body, className),
+    ref
+  }, others));
+});
+
+exports.ModalBaseBody = ModalBaseBody;
+//# sourceMappingURL=ModalBaseBody.js.map

package/cjs/ModalBase/ModalBaseBody/ModalBaseBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseBody.js","sources":["../../../src/ModalBase/ModalBaseBody/ModalBaseBody.tsx"],"sourcesContent":["import React, { forwardRef, useEffect } from 'react';\nimport { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { useModalBaseContext } from '../ModalBase.context';\nimport useStyles from './ModalBaseBody.styles';\n\nexport type ModalBaseBodyStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalBaseBodyProps extends DefaultProps, React.ComponentPropsWithoutRef<'h2'> {}\n\nconst defaultProps: Partial<ModalBaseBodyProps> = {};\n\nexport const ModalBaseBody = forwardRef<HTMLHeadingElement, ModalBaseBodyProps>((props, ref) => {\n  const ctx = useModalBaseContext();\n  const { className, ...others } = useComponentDefaultProps(\n    `${ctx.__staticSelector}Body`,\n    defaultProps,\n    props\n  );\n\n  const { classes, cx } = useStyles({ padding: ctx.padding }, ctx.stylesApi);\n\n  useEffect(() => {\n    ctx.setBodyMounted(true);\n    return () => ctx.setBodyMounted(false);\n  }, []);\n\n  return <Box id={ctx.getBodyId()} className={cx(classes.body, className)} ref={ref} {...others} />;\n});\n"],"names":["forwardRef","useModalBaseContext","useComponentDefaultProps","useStyles","useEffect","React","Box"],"mappings":"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"}

package/cjs/ModalBase/ModalBaseBody/ModalBaseBody.styles.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles((theme, { padding }) => ({
+  body: {
+    padding: styles.getSize({ size: padding, sizes: theme.spacing }),
+    "&:not(:only-child)": {
+      paddingTop: 0
+    }
+  }
+}));
+
+exports.default = useStyles;
+//# sourceMappingURL=ModalBaseBody.styles.js.map

package/cjs/ModalBase/ModalBaseBody/ModalBaseBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseBody.styles.js","sources":["../../../src/ModalBase/ModalBaseBody/ModalBaseBody.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, getSize } from '@mantine/styles';\n\ninterface ModalBaseBodyStylesParams {\n  padding: MantineNumberSize;\n}\n\nexport default createStyles((theme, { padding }: ModalBaseBodyStylesParams) => ({\n  body: {\n    padding: getSize({ size: padding, sizes: theme.spacing }),\n\n    '&:not(:only-child)': {\n      paddingTop: 0,\n    },\n  },\n}));\n"],"names":["createStyles","getSize"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM;AACrD,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAEC,cAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;AAC7D,IAAI,oBAAoB,EAAE;AAC1B,MAAM,UAAU,EAAE,CAAC;AACnB,KAAK;AACL,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('@mantine/styles');
+var ModalBase_context = require('../ModalBase.context.js');
+var ModalBaseCloseButton_styles = require('./ModalBaseCloseButton.styles.js');
+var CloseButton = require('../../CloseButton/CloseButton.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {
+  size: "sm"
+};
+const ModalBaseCloseButton = React.forwardRef((props, ref) => {
+  const ctx = ModalBase_context.useModalBaseContext();
+  const _a = styles.useComponentDefaultProps(`${ctx.__staticSelector}CloseButton`, defaultProps, props), { className } = _a, others = __objRest(_a, ["className"]);
+  const { classes, cx } = ModalBaseCloseButton_styles['default'](null, ctx.stylesApi);
+  return /* @__PURE__ */ React__default.createElement(CloseButton.CloseButton, __spreadValues({
+    className: cx(classes.close, className),
+    ref,
+    onClick: ctx.onClose
+  }, others));
+});
+
+exports.ModalBaseCloseButton = ModalBaseCloseButton;
+//# sourceMappingURL=ModalBaseCloseButton.js.map

package/cjs/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseCloseButton.js","sources":["../../../src/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { CloseButton, CloseButtonProps } from '../../CloseButton';\nimport { useModalBaseContext } from '../ModalBase.context';\nimport useStyles from './ModalBaseCloseButton.styles';\n\nexport type ModalBaseCloseButtonStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalBaseCloseButtonProps\n  extends CloseButtonProps,\n    Omit<React.ComponentPropsWithoutRef<'button'>, keyof CloseButtonProps> {}\n\nconst defaultProps: Partial<ModalBaseCloseButtonProps> = {\n  size: 'sm',\n};\n\nexport const ModalBaseCloseButton = forwardRef<HTMLButtonElement, ModalBaseCloseButtonProps>(\n  (props, ref) => {\n    const ctx = useModalBaseContext();\n\n    const { className, ...others } = useComponentDefaultProps(\n      `${ctx.__staticSelector}CloseButton`,\n      defaultProps,\n      props\n    );\n\n    const { classes, cx } = useStyles(null, ctx.stylesApi);\n\n    return (\n      <CloseButton\n        className={cx(classes.close, className)}\n        ref={ref}\n        onClick={ctx.onClose}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","useModalBaseContext","useComponentDefaultProps","useStyles","React","CloseButton"],"mappings":"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"}

package/cjs/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles(() => ({
+  close: {}
+}));
+
+exports.default = useStyles;
+//# sourceMappingURL=ModalBaseCloseButton.styles.js.map

package/cjs/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseCloseButton.styles.js","sources":["../../../src/ModalBase/ModalBaseCloseButton/ModalBaseCloseButton.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport default createStyles(() => ({\n  close: {},\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,OAAO;AACnC,EAAE,KAAK,EAAE,EAAE;AACX,CAAC,CAAC,CAAC;;;;"}

package/cjs/ModalBase/ModalBaseContent/ModalBaseContent.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('@mantine/styles');
+var ModalBase_context = require('../ModalBase.context.js');
+var ModalBaseContent_styles = require('./ModalBaseContent.styles.js');
+var Transition = require('../../Transition/Transition.js');
+var FocusTrap = require('../../FocusTrap/FocusTrap.js');
+var Paper = require('../../Paper/Paper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {};
+const ModalBaseContent = React.forwardRef((props, ref) => {
+  const ctx = ModalBase_context.useModalBaseContext();
+  const _a = styles.useComponentDefaultProps(`${ctx.__staticSelector}Content`, defaultProps, props), { className, transitionProps, style, onKeyDown } = _a, others = __objRest(_a, ["className", "transitionProps", "style", "onKeyDown"]);
+  const { classes, cx } = ModalBaseContent_styles['default']({ zIndex: ctx.zIndex + 1 }, ctx.stylesApi);
+  const handleKeyDown = (event) => {
+    var _a2;
+    const shouldTrigger = ((_a2 = event.target) == null ? void 0 : _a2.getAttribute("data-mantine-stop-propagation")) !== "true";
+    shouldTrigger && event.key === "Escape" && ctx.closeOnEscape && ctx.onClose();
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  return /* @__PURE__ */ React__default.createElement(Transition.Transition, __spreadValues(__spreadValues({
+    mounted: ctx.opened,
+    transition: "pop"
+  }, ctx.transitionProps), transitionProps), (transitionStyles) => /* @__PURE__ */ React__default.createElement("div", {
+    className: cx(classes.inner)
+  }, /* @__PURE__ */ React__default.createElement(FocusTrap.FocusTrap, {
+    active: ctx.opened && ctx.trapFocus
+  }, /* @__PURE__ */ React__default.createElement(Paper.Paper, __spreadValues({
+    component: "section",
+    role: "dialog",
+    tabIndex: -1,
+    "aria-modal": true,
+    "aria-describedby": ctx.bodyMounted ? ctx.getBodyId() : void 0,
+    "aria-labelledby": ctx.titleMounted ? ctx.getTitleId() : void 0,
+    onKeyDown: handleKeyDown,
+    ref,
+    className: cx(classes.content, className),
+    style: __spreadValues(__spreadValues({}, style), transitionStyles),
+    shadow: ctx.shadow
+  }, others), others.children))));
+});
+
+exports.ModalBaseContent = ModalBaseContent;
+//# sourceMappingURL=ModalBaseContent.js.map

package/cjs/ModalBase/ModalBaseContent/ModalBaseContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseContent.js","sources":["../../../src/ModalBase/ModalBaseContent/ModalBaseContent.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Paper, PaperProps } from '../../Paper';\nimport { Transition, TransitionOverride } from '../../Transition';\nimport { FocusTrap } from '../../FocusTrap';\nimport { useModalBaseContext } from '../ModalBase.context';\nimport useStyles from './ModalBaseContent.styles';\n\nexport type ModalBaseContentStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalBaseContentProps\n  extends PaperProps,\n    Omit<React.ComponentPropsWithoutRef<'div'>, keyof PaperProps> {\n  /** Props added to Transition component */\n  transitionProps?: TransitionOverride;\n}\n\nconst defaultProps: Partial<ModalBaseContentProps> = {};\n\nexport const ModalBaseContent = forwardRef<HTMLElement, ModalBaseContentProps>((props, ref) => {\n  const ctx = useModalBaseContext();\n  const { className, transitionProps, style, onKeyDown, ...others } = useComponentDefaultProps(\n    `${ctx.__staticSelector}Content`,\n    defaultProps,\n    props\n  );\n\n  const { classes, cx } = useStyles({ zIndex: ctx.zIndex + 1 }, ctx.stylesApi);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const shouldTrigger =\n      (event.target as HTMLElement)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n    shouldTrigger && event.key === 'Escape' && ctx.closeOnEscape && ctx.onClose();\n    onKeyDown?.(event);\n  };\n\n  return (\n    <Transition mounted={ctx.opened} transition=\"pop\" {...ctx.transitionProps} {...transitionProps}>\n      {(transitionStyles) => (\n        <div className={cx(classes.inner)}>\n          <FocusTrap active={ctx.opened && ctx.trapFocus}>\n            <Paper\n              component=\"section\"\n              role=\"dialog\"\n              tabIndex={-1}\n              aria-modal\n              aria-describedby={ctx.bodyMounted ? ctx.getBodyId() : undefined}\n              aria-labelledby={ctx.titleMounted ? ctx.getTitleId() : undefined}\n              onKeyDown={handleKeyDown}\n              ref={ref}\n              className={cx(classes.content, className)}\n              style={{ ...style, ...transitionStyles }}\n              shadow={ctx.shadow}\n              {...others}\n            >\n              {others.children}\n            </Paper>\n          </FocusTrap>\n        </div>\n      )}\n    </Transition>\n  );\n});\n"],"names":["forwardRef","useModalBaseContext","useComponentDefaultProps","useStyles","React","Transition","FocusTrap","Paper"],"mappings":"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"}

package/cjs/ModalBase/ModalBaseContent/ModalBaseContent.styles.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles((_theme, { zIndex }) => ({
+  inner: {
+    position: "fixed",
+    width: "100%",
+    top: 0,
+    bottom: 0,
+    maxHeight: "100%",
+    zIndex,
+    pointerEvents: "none"
+  },
+  content: {
+    pointerEvents: "all"
+  }
+}));
+
+exports.default = useStyles;
+//# sourceMappingURL=ModalBaseContent.styles.js.map

package/cjs/ModalBase/ModalBaseContent/ModalBaseContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseContent.styles.js","sources":["../../../src/ModalBase/ModalBaseContent/ModalBaseContent.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ModalBaseContentStylesParams {\n  zIndex: number;\n}\n\nexport default createStyles((_theme, { zIndex }: ModalBaseContentStylesParams) => ({\n  inner: {\n    position: 'fixed',\n    width: '100%',\n    top: 0,\n    bottom: 0,\n    maxHeight: '100%',\n    zIndex,\n    pointerEvents: 'none',\n  },\n\n  content: {\n    pointerEvents: 'all',\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM;AACrD,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,MAAM;AACV,IAAI,aAAa,EAAE,MAAM;AACzB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,aAAa,EAAE,KAAK;AACxB,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/ModalBase/ModalBaseHeader/ModalBaseHeader.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('@mantine/styles');
+var ModalBase_context = require('../ModalBase.context.js');
+var ModalBaseHeader_styles = require('./ModalBaseHeader.styles.js');
+var Box = require('../../Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {};
+const ModalBaseHeader = React.forwardRef((props, ref) => {
+  const ctx = ModalBase_context.useModalBaseContext();
+  const _a = styles.useComponentDefaultProps(`${ctx.__staticSelector}Header`, defaultProps, props), { className } = _a, others = __objRest(_a, ["className"]);
+  const { classes, cx } = ModalBaseHeader_styles['default']({ padding: ctx.padding }, ctx.stylesApi);
+  return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
+    ref,
+    className: cx(classes.header, className)
+  }, others));
+});
+
+exports.ModalBaseHeader = ModalBaseHeader;
+//# sourceMappingURL=ModalBaseHeader.js.map

package/cjs/ModalBase/ModalBaseHeader/ModalBaseHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseHeader.js","sources":["../../../src/ModalBase/ModalBaseHeader/ModalBaseHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { useModalBaseContext } from '../ModalBase.context';\nimport useStyles from './ModalBaseHeader.styles';\n\nexport type ModalBaseHeaderStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalBaseHeaderProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {}\n\nconst defaultProps: Partial<ModalBaseHeaderProps> = {};\n\nexport const ModalBaseHeader = forwardRef<HTMLDivElement, ModalBaseHeaderProps>((props, ref) => {\n  const ctx = useModalBaseContext();\n  const { className, ...others } = useComponentDefaultProps(\n    `${ctx.__staticSelector}Header`,\n    defaultProps,\n    props\n  );\n\n  const { classes, cx } = useStyles({ padding: ctx.padding }, ctx.stylesApi);\n\n  return <Box ref={ref} className={cx(classes.header, className)} {...others} />;\n});\n"],"names":["forwardRef","useModalBaseContext","useComponentDefaultProps","useStyles","React","Box"],"mappings":"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"}

package/cjs/ModalBase/ModalBaseHeader/ModalBaseHeader.styles.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles((theme, { padding }) => {
+  const paddingValue = styles.getSize({ size: padding, sizes: theme.spacing });
+  return {
+    header: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      padding: paddingValue,
+      paddingRight: `calc(${paddingValue} - ${styles.rem(5)})`,
+      position: "sticky",
+      top: 0,
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white
+    }
+  };
+});
+
+exports.default = useStyles;
+//# sourceMappingURL=ModalBaseHeader.styles.js.map

package/cjs/ModalBase/ModalBaseHeader/ModalBaseHeader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBaseHeader.styles.js","sources":["../../../src/ModalBase/ModalBaseHeader/ModalBaseHeader.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, rem, getSize } from '@mantine/styles';\n\ninterface ModalBaseHeaderStylesParams {\n  padding: MantineNumberSize;\n}\n\nexport default createStyles((theme, { padding }: ModalBaseHeaderStylesParams) => {\n  const paddingValue = getSize({ size: padding, sizes: theme.spacing });\n  return {\n    header: {\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      padding: paddingValue,\n      paddingRight: `calc(${paddingValue} - ${rem(5)})`,\n      position: 'sticky',\n      top: 0,\n      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n    },\n  };\n});\n"],"names":["createStyles","getSize","rem"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK;AACpD,EAAE,MAAM,YAAY,GAAGC,cAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;AACxE,EAAE,OAAO;AACT,IAAI,MAAM,EAAE;AACZ,MAAM,OAAO,EAAE,MAAM;AACrB,MAAM,cAAc,EAAE,eAAe;AACrC,MAAM,UAAU,EAAE,QAAQ;AAC1B,MAAM,OAAO,EAAE,YAAY;AAC3B,MAAM,YAAY,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,EAAEC,UAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,QAAQ,EAAE,QAAQ;AACxB,MAAM,GAAG,EAAE,CAAC;AACZ,MAAM,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACxF,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}

package/cjs/ModalBase/ModalBaseOverlay/ModalBaseOverlay.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+var React = require('react');
+var ModalBase_context = require('../ModalBase.context.js');
+var ModalBaseOverlay_styles = require('./ModalBaseOverlay.styles.js');
+var Transition = require('../../Transition/Transition.js');
+var Overlay = require('../../Overlay/Overlay.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const defaultProps = {};
+const ModalBaseOverlay = React.forwardRef((props, ref) => {
+  const ctx = ModalBase_context.useModalBaseContext();
+  const _a = styles.useComponentDefaultProps(`${ctx.__staticSelector}Overlay`, defaultProps, props), { onClick, transitionProps, style, className } = _a, others = __objRest(_a, ["onClick", "transitionProps", "style", "className"]);
+  const { classes, cx } = ModalBaseOverlay_styles['default'](null, ctx.stylesApi);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    ctx.closeOnClickOutside && ctx.onClose();
+  };
+  return /* @__PURE__ */ React__default.createElement(Transition.Transition, __spreadProps(__spreadValues(__spreadValues({
+    mounted: ctx.opened
+  }, ctx.transitionProps), transitionProps), {
+    transition: "fade"
+  }), (transitionStyles) => /* @__PURE__ */ React__default.createElement(Overlay.Overlay, __spreadValues({
+    ref,
+    onClick: handleClick,
+    fixed: true,
+    style: __spreadValues(__spreadValues({}, style), transitionStyles),
+    className: cx(classes.overlay, className)
+  }, others)));
+});
+
+exports.ModalBaseOverlay = ModalBaseOverlay;
+//# sourceMappingURL=ModalBaseOverlay.js.map