@mantine/core 3.2.0 → 3.3.0

package/esm/components/Menu/MenuItem/MenuItem.js

@@ -1,4 +1,85 @@
-const MenuItem = (_props) => null;
+import React, { forwardRef } from 'react';
+import { useSx } from '@mantine/styles';
+import useStyles from './MenuItem.styles.js';
+
+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 MenuItem = forwardRef((_a, ref) => {
+  var _b = _a, {
+    className,
+    children,
+    onHover,
+    hovered,
+    icon,
+    color,
+    disabled,
+    rightSection,
+    component,
+    classNames,
+    styles,
+    radius,
+    sx
+  } = _b, others = __objRest(_b, [
+    "className",
+    "children",
+    "onHover",
+    "hovered",
+    "icon",
+    "color",
+    "disabled",
+    "rightSection",
+    "component",
+    "classNames",
+    "styles",
+    "radius",
+    "sx"
+  ]);
+  const { sxClassName } = useSx({ sx });
+  const { classes, cx } = useStyles({ color, radius }, { classNames, styles, name: "Menu" });
+  const Element = component || "button";
+  return /* @__PURE__ */ React.createElement(Element, __spreadValues({
+    type: "button",
+    role: "menuitem",
+    className: cx(classes.item, { [classes.itemHovered]: hovered }, sxClassName, className),
+    onMouseEnter: () => !disabled && onHover(),
+    ref,
+    disabled
+  }, others), /* @__PURE__ */ React.createElement("div", {
+    className: classes.itemInner
+  }, icon && /* @__PURE__ */ React.createElement("div", {
+    className: classes.itemIcon
+  }, icon), /* @__PURE__ */ React.createElement("div", {
+    className: classes.itemBody
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: classes.itemLabel
+  }, children), rightSection)));
+});
 MenuItem.displayName = "@mantine/core/MenuItem";
 
 export { MenuItem };

package/esm/components/Menu/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport { DefaultProps, MantineColor, PolymorphicComponentProps } from '@mantine/styles';\nimport type { MenuButtonStylesNames } from '../MenuButton/MenuButton';\n\nexport interface SharedMenuItemProps extends DefaultProps<MenuButtonStylesNames> {\n  /** Item label */\n  children: React.ReactNode;\n\n  /** Icon rendered on the left side of label */\n  icon?: React.ReactNode;\n\n  /** Any color from theme.colors */\n  color?: MantineColor;\n\n  /** Any react node to render on the right side of item, for example, keyboard shortcut or badge */\n  rightSection?: React.ReactNode;\n}\n\nexport type MenuItemProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  SharedMenuItemProps\n>;\n\nexport type MenuItemComponent = <C extends React.ElementType = 'div'>(\n  props: MenuItemProps<C>\n) => React.ReactElement;\n\nexport interface MenuItemType {\n  type: any;\n  props: MenuItemProps<'button'>;\n  ref?: React.RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement) => void);\n}\n\nexport const MenuItem: MenuItemComponent & { displayName?: string } = ((\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  _props: MenuItemProps<'button'>\n) => null) as any;\n\nMenuItem.displayName = '@mantine/core/MenuItem';\n"],"names":[],"mappings":"AAAY,MAAC,QAAQ,GAAG,CAAC,MAAM,KAAK,KAAK;AACzC,QAAQ,CAAC,WAAW,GAAG,wBAAwB;;;;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/Menu/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  MantineNumberSize,\n  ClassNames,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  useSx,\n  DefaultProps,\n  MantineColor,\n} from '@mantine/styles';\nimport useStyles from './MenuItem.styles';\n\nexport type MenuItemStylesNames = ClassNames<typeof useStyles>;\n\nexport interface SharedMenuItemProps extends DefaultProps<MenuItemStylesNames> {\n  /** Item label */\n  children: React.ReactNode;\n\n  /** Icon rendered on the left side of label */\n  icon?: React.ReactNode;\n\n  /** Any color from theme.colors */\n  color?: MantineColor;\n\n  /** Any react node to render on the right side of item, for example, keyboard shortcut or badge */\n  rightSection?: React.ReactNode;\n\n  /** Is item disabled */\n  disabled?: boolean;\n\n  /** Is item hovered, controlled by parent Menu component */\n  hovered?: boolean;\n\n  /** Called when item is hovered, controlled by parent Menu component */\n  onHover?(): void;\n\n  /** Border radius, controlled by parent Menu component */\n  radius?: MantineNumberSize;\n}\n\nexport type MenuItemProps<C extends React.ElementType> = PolymorphicComponentProps<\n  C,\n  SharedMenuItemProps\n>;\n\nexport type MenuItemComponent = <C extends React.ElementType = 'button'>(\n  props: MenuItemProps<C>\n) => React.ReactElement;\n\nexport interface MenuItemType {\n  type: any;\n  props: MenuItemProps<'button'>;\n  ref?: React.RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement) => void);\n}\n\nexport const MenuItem: MenuItemComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = 'button'>(\n    {\n      className,\n      children,\n      onHover,\n      hovered,\n      icon,\n      color,\n      disabled,\n      rightSection,\n      component,\n      classNames,\n      styles,\n      radius,\n      sx,\n      ...others\n    }: MenuItemProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const { sxClassName } = useSx({ sx });\n    const { classes, cx } = useStyles({ color, radius }, { classNames, styles, name: 'Menu' });\n    const Element = component || 'button';\n\n    return (\n      <Element\n        type=\"button\"\n        role=\"menuitem\"\n        className={cx(classes.item, { [classes.itemHovered]: hovered }, sxClassName, className)}\n        onMouseEnter={() => !disabled && onHover()}\n        ref={ref}\n        disabled={disabled}\n        {...others}\n      >\n        <div className={classes.itemInner}>\n          {icon && <div className={classes.itemIcon}>{icon}</div>}\n\n          <div className={classes.itemBody}>\n            <div className={classes.itemLabel}>{children}</div>\n            {rightSection}\n          </div>\n        </div>\n      </Element>\n    );\n  }\n) as any;\n\nMenuItem.displayName = '@mantine/core/MenuItem';\n"],"names":[],"mappings":"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"}

package/esm/components/Menu/MenuItem/MenuItem.styles.js

@@ -0,0 +1,69 @@
+import { createStyles } from '@mantine/styles';
+
+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 useStyles = createStyles((theme, { radius, color }) => ({
+  item: __spreadProps(__spreadValues({}, theme.fn.fontStyles()), {
+    WebkitTapHighlightColor: "transparent",
+    fontSize: theme.fontSizes.sm,
+    border: 0,
+    backgroundColor: "transparent",
+    outline: 0,
+    width: "100%",
+    textAlign: "left",
+    display: "inline-block",
+    textDecoration: "none",
+    boxSizing: "border-box",
+    padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+    cursor: "pointer",
+    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
+    color: color ? theme.fn.themeColor(color, theme.colorScheme === "dark" ? 5 : 7) : theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black,
+    "&:disabled": {
+      color: theme.colorScheme === "dark" ? theme.colors.dark[3] : theme.colors.gray[5],
+      pointerEvents: "none"
+    }
+  }),
+  itemHovered: {
+    backgroundColor: color ? theme.fn.rgba(theme.fn.themeColor(color, theme.colorScheme === "dark" ? 9 : 0), theme.colorScheme === "dark" ? 0.2 : 1) : theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[0]
+  },
+  itemInner: {
+    display: "flex",
+    alignItems: "center",
+    height: "100%"
+  },
+  itemBody: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    flex: 1
+  },
+  itemIcon: {
+    marginRight: theme.spacing.xs,
+    "& *": {
+      display: "block"
+    }
+  },
+  itemLabel: {
+    lineHeight: 1
+  }
+}));
+
+export default useStyles;
+//# sourceMappingURL=MenuItem.styles.js.map

package/esm/components/Menu/MenuItem/MenuItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.js","sources":["../../../../src/components/Menu/MenuItem/MenuItem.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor } from '@mantine/styles';\n\ninterface MenuItemStyles {\n  radius: MantineNumberSize;\n  color: MantineColor;\n}\n\nexport default createStyles((theme, { radius, color }: MenuItemStyles) => ({\n  item: {\n    ...theme.fn.fontStyles(),\n    WebkitTapHighlightColor: 'transparent',\n    fontSize: theme.fontSizes.sm,\n    border: 0,\n    backgroundColor: 'transparent',\n    outline: 0,\n    width: '100%',\n    textAlign: 'left',\n    display: 'inline-block',\n    textDecoration: 'none',\n    boxSizing: 'border-box',\n    padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n    cursor: 'pointer',\n    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    color: color\n      ? theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 5 : 7)\n      : theme.colorScheme === 'dark'\n      ? theme.colors.dark[0]\n      : theme.black,\n\n    '&:disabled': {\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],\n      pointerEvents: 'none',\n    },\n  },\n\n  itemHovered: {\n    backgroundColor: color\n      ? theme.fn.rgba(\n          theme.fn.themeColor(color, theme.colorScheme === 'dark' ? 9 : 0),\n          theme.colorScheme === 'dark' ? 0.2 : 1\n        )\n      : theme.colorScheme === 'dark'\n      ? theme.fn.rgba(theme.colors.dark[3], 0.35)\n      : theme.colors.gray[0],\n  },\n\n  itemInner: {\n    display: 'flex',\n    alignItems: 'center',\n    height: '100%',\n  },\n\n  itemBody: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    flex: 1,\n  },\n\n  itemIcon: {\n    marginRight: theme.spacing.xs,\n\n    '& *': {\n      display: 'block',\n    },\n  },\n\n  itemLabel: {\n    lineHeight: 1,\n  },\n}));\n"],"names":[],"mappings":"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"}

package/esm/components/Modal/Modal.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useUuid, useFocusTrap, useScrollLock, useFocusReturn } from '@mantine/hooks';
+import { getDefaultZIndex } from '@mantine/styles';
 import { CloseButton } from '../ActionIcon/CloseButton/CloseButton.js';
 import { Text } from '../Text/Text.js';
 import { Paper } from '../Paper/Paper.js';
@@ -52,7 +53,6 @@ function MantineModal(_a) {
     transitionDuration = 300,
     closeButtonLabel,
     overlayColor,
-    zIndex = 1e3,
     overflow = "outside",
     transition = "pop",
     padding = "lg",
@@ -61,7 +61,8 @@ function MantineModal(_a) {
     classNames,
     styles,
     sx,
-    closeOnClickOutside = true
+    closeOnClickOutside = true,
+    centered = false
   } = _b, others = __objRest(_b, [
     "className",
     "opened",
@@ -74,7 +75,6 @@ function MantineModal(_a) {
     "transitionDuration",
     "closeButtonLabel",
     "overlayColor",
-    "zIndex",
     "overflow",
     "transition",
     "padding",
@@ -83,12 +83,13 @@ function MantineModal(_a) {
     "classNames",
     "styles",
     "sx",
-    "closeOnClickOutside"
+    "closeOnClickOutside",
+    "centered"
   ]);
   const baseId = useUuid(id);
   const titleId = `${baseId}-title`;
   const bodyId = `${baseId}-body`;
-  const { classes, cx, theme } = useStyles({ size, overflow }, { sx, classNames, styles, name: "Modal" });
+  const { classes, cx, theme } = useStyles({ size, overflow, centered }, { sx, classNames, styles, name: "Modal" });
   const focusTrapRef = useFocusTrap(opened);
   const _overlayOpacity = typeof overlayOpacity === "number" ? overlayOpacity : theme.colorScheme === "dark" ? 0.85 : 0.75;
   const [, lockScroll] = useScrollLock();
@@ -103,19 +104,19 @@ function MantineModal(_a) {
     }
   }, (transitionStyles) => /* @__PURE__ */ React.createElement("div", __spreadValues({
     className: cx(classes.root, className)
-  }, others), /* @__PURE__ */ React.createElement("div", {
+  }, others), closeOnClickOutside && /* @__PURE__ */ React.createElement("div", {
+    onClick: onClose,
+    className: classes.clickOutsideOverlay,
+    style: { zIndex: 2 }
+  }), /* @__PURE__ */ React.createElement("div", {
     className: classes.inner,
     onKeyDownCapture: (event) => {
       var _a2;
       const shouldTrigger = ((_a2 = event.target) == null ? void 0 : _a2.getAttribute("data-mantine-stop-propagation")) !== "true";
       shouldTrigger && event.nativeEvent.code === "Escape" && onClose();
     },
-    style: { zIndex: zIndex + 1 },
     ref: focusTrapRef
-  }, closeOnClickOutside && /* @__PURE__ */ React.createElement("div", {
-    onClick: onClose,
-    className: classes.clickOutsideOverlay
-  }), /* @__PURE__ */ React.createElement(Paper, {
+  }, /* @__PURE__ */ React.createElement(Paper, {
     className: classes.modal,
     shadow,
     padding,
@@ -123,10 +124,11 @@ function MantineModal(_a) {
     "aria-labelledby": titleId,
     "aria-describedby": bodyId,
     "aria-modal": true,
+    tabIndex: -1,
     style: __spreadProps(__spreadValues({}, transitionStyles.modal), {
-      marginLeft: "calc(var(--removed-scroll-width, 0px) * -1)"
-    }),
-    tabIndex: -1
+      marginLeft: "calc(var(--removed-scroll-width, 0px) * -1)",
+      zIndex: 3
+    })
   }, (title || !hideCloseButton) && /* @__PURE__ */ React.createElement("div", {
     className: classes.header
   }, /* @__PURE__ */ React.createElement(Text, {
@@ -142,14 +144,19 @@ function MantineModal(_a) {
   }, children))), /* @__PURE__ */ React.createElement("div", {
     style: transitionStyles.overlay
   }, /* @__PURE__ */ React.createElement(Overlay, {
+    zIndex: 0,
     color: overlayColor || (theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.black),
-    opacity: _overlayOpacity,
-    zIndex
+    opacity: _overlayOpacity
   }))));
 }
-function Modal(props) {
+function Modal(_c) {
+  var _d = _c, {
+    zIndex = getDefaultZIndex("modal")
+  } = _d, props = __objRest(_d, [
+    "zIndex"
+  ]);
   return /* @__PURE__ */ React.createElement(Portal, {
-    zIndex: props.zIndex || 1e3
+    zIndex
   }, /* @__PURE__ */ React.createElement(MantineModal, __spreadValues({}, props)));
 }
 Modal.displayName = "@mantine/core/Modal";

package/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollLock, useFocusTrap, useFocusReturn, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineShadow,\n  ClassNames,\n  MantineMargin,\n} from '@mantine/styles';\nimport { CloseButton } from '../ActionIcon/CloseButton/CloseButton';\nimport { Text } from '../Text/Text';\nimport { Paper } from '../Paper/Paper';\nimport { Overlay } from '../Overlay/Overlay';\nimport { Portal } from '../Portal/Portal';\nimport { GroupedTransition, MantineTransition } from '../Transition';\nimport useStyles from './Modal.styles';\n\nexport type ModalStylesNames = Exclude<ClassNames<typeof useStyles>, 'clickOutsideOverlay'>;\n\nexport interface ModalProps\n  extends Omit<DefaultProps<ModalStylesNames>, MantineMargin>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n  /** Mounts modal if true */\n  opened: boolean;\n\n  /** Called when close button clicked and when escape key is pressed */\n  onClose(): void;\n\n  /** Modal title, displayed in header before close button */\n  title?: React.ReactNode;\n\n  /** Modal z-index property */\n  zIndex?: number;\n\n  /** Control vertical overflow behavior */\n  overflow?: 'outside' | 'inside';\n\n  /** Hides close button, modal still can be closed with escape key and by clicking outside */\n  hideCloseButton?: boolean;\n\n  /** Overlay below modal opacity, defaults to 0.75 in light theme and to 0.85 in dark theme */\n  overlayOpacity?: number;\n\n  /** Overlay below modal color, defaults to theme.black in light theme and to theme.colors.dark[9] in dark theme */\n  overlayColor?: string;\n\n  /** Modal body width */\n  size?: string | number;\n\n  /** Modal body transition */\n  transition?: MantineTransition;\n\n  /** Duration in ms of modal transitions, set to 0 to disable all animations */\n  transitionDuration?: number;\n\n  /** Modal body transitionTimingFunction, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n\n  /** Close button aria-label */\n  closeButtonLabel?: string;\n\n  /** id base, used to generate ids to connect modal title and body with aria- attributes, defaults to random id */\n  id?: string;\n\n  /** Modal shadow from theme or css value */\n  shadow?: MantineShadow;\n\n  /** Modal padding from theme or number value for padding in px */\n  padding?: MantineNumberSize;\n\n  /** Should modal be closed when outside click was registered? */\n  closeOnClickOutside?: boolean;\n}\n\nexport function MantineModal({\n  className,\n  opened,\n  title,\n  onClose,\n  children,\n  hideCloseButton = false,\n  overlayOpacity,\n  size = 'md',\n  transitionDuration = 300,\n  closeButtonLabel,\n  overlayColor,\n  zIndex = 1000,\n  overflow = 'outside',\n  transition = 'pop',\n  padding = 'lg',\n  shadow = 'lg',\n  id,\n  classNames,\n  styles,\n  sx,\n  closeOnClickOutside = true,\n  ...others\n}: ModalProps) {\n  const baseId = useUuid(id);\n  const titleId = `${baseId}-title`;\n  const bodyId = `${baseId}-body`;\n  const { classes, cx, theme } = useStyles(\n    { size, overflow },\n    { sx, classNames, styles, name: 'Modal' }\n  );\n  const focusTrapRef = useFocusTrap(opened);\n  const _overlayOpacity =\n    typeof overlayOpacity === 'number'\n      ? overlayOpacity\n      : theme.colorScheme === 'dark'\n      ? 0.85\n      : 0.75;\n\n  const [, lockScroll] = useScrollLock();\n  useFocusReturn({ opened, transitionDuration });\n\n  return (\n    <GroupedTransition\n      onExited={() => lockScroll(false)}\n      onEntered={() => lockScroll(true)}\n      mounted={opened}\n      transitions={{\n        modal: { duration: transitionDuration, transition },\n        overlay: { duration: transitionDuration / 2, transition: 'fade', timingFunction: 'ease' },\n      }}\n    >\n      {(transitionStyles) => (\n        <div className={cx(classes.root, className)} {...others}>\n          <div\n            className={classes.inner}\n            onKeyDownCapture={(event) => {\n              const shouldTrigger =\n                (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n              shouldTrigger && event.nativeEvent.code === 'Escape' && onClose();\n            }}\n            style={{ zIndex: zIndex + 1 }}\n            ref={focusTrapRef}\n          >\n            {closeOnClickOutside && (\n              // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n              <div onClick={onClose} className={classes.clickOutsideOverlay} />\n            )}\n\n            <Paper<'div'>\n              className={classes.modal}\n              shadow={shadow}\n              padding={padding}\n              role=\"dialog\"\n              aria-labelledby={titleId}\n              aria-describedby={bodyId}\n              aria-modal\n              style={{\n                ...transitionStyles.modal,\n                marginLeft: 'calc(var(--removed-scroll-width, 0px) * -1)',\n              }}\n              tabIndex={-1}\n            >\n              {(title || !hideCloseButton) && (\n                <div className={classes.header}>\n                  <Text id={titleId} className={classes.title}>\n                    {title}\n                  </Text>\n\n                  {!hideCloseButton && (\n                    <CloseButton iconSize={16} onClick={onClose} aria-label={closeButtonLabel} />\n                  )}\n                </div>\n              )}\n\n              <div id={bodyId} className={classes.body}>\n                {children}\n              </div>\n            </Paper>\n          </div>\n\n          <div style={transitionStyles.overlay}>\n            <Overlay\n              color={\n                overlayColor || (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black)\n              }\n              opacity={_overlayOpacity}\n              zIndex={zIndex}\n            />\n          </div>\n        </div>\n      )}\n    </GroupedTransition>\n  );\n}\n\nexport function Modal(props: React.ComponentPropsWithoutRef<typeof MantineModal>) {\n  return (\n    <Portal zIndex={props.zIndex || 1000}>\n      <MantineModal {...props} />\n    </Portal>\n  );\n}\n\nModal.displayName = '@mantine/core/Modal';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollLock, useFocusTrap, useFocusReturn, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineShadow,\n  ClassNames,\n  MantineMargin,\n  getDefaultZIndex,\n} from '@mantine/styles';\nimport { CloseButton } from '../ActionIcon/CloseButton/CloseButton';\nimport { Text } from '../Text/Text';\nimport { Paper } from '../Paper/Paper';\nimport { Overlay } from '../Overlay/Overlay';\nimport { Portal } from '../Portal/Portal';\nimport { GroupedTransition, MantineTransition } from '../Transition';\nimport useStyles from './Modal.styles';\n\nexport type ModalStylesNames = Exclude<ClassNames<typeof useStyles>, 'clickOutsideOverlay'>;\n\nexport interface ModalProps\n  extends Omit<DefaultProps<ModalStylesNames>, MantineMargin>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {\n  /** Mounts modal if true */\n  opened: boolean;\n\n  /** Called when close button clicked and when escape key is pressed */\n  onClose(): void;\n\n  /** Modal title, displayed in header before close button */\n  title?: React.ReactNode;\n\n  /** Modal z-index property */\n  zIndex?: number;\n\n  /** Control vertical overflow behavior */\n  overflow?: 'outside' | 'inside';\n\n  /** Hides close button, modal still can be closed with escape key and by clicking outside */\n  hideCloseButton?: boolean;\n\n  /** Overlay below modal opacity, defaults to 0.75 in light theme and to 0.85 in dark theme */\n  overlayOpacity?: number;\n\n  /** Overlay below modal color, defaults to theme.black in light theme and to theme.colors.dark[9] in dark theme */\n  overlayColor?: string;\n\n  /** Modal body width */\n  size?: string | number;\n\n  /** Modal body transition */\n  transition?: MantineTransition;\n\n  /** Duration in ms of modal transitions, set to 0 to disable all animations */\n  transitionDuration?: number;\n\n  /** Modal body transitionTimingFunction, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n\n  /** Close button aria-label */\n  closeButtonLabel?: string;\n\n  /** id base, used to generate ids to connect modal title and body with aria- attributes, defaults to random id */\n  id?: string;\n\n  /** Modal shadow from theme or css value */\n  shadow?: MantineShadow;\n\n  /** Modal padding from theme or number value for padding in px */\n  padding?: MantineNumberSize;\n\n  /** Should modal be closed when outside click was registered? */\n  closeOnClickOutside?: boolean;\n\n  /** Controls if modal should be centered */\n  centered?: boolean;\n}\n\nexport function MantineModal({\n  className,\n  opened,\n  title,\n  onClose,\n  children,\n  hideCloseButton = false,\n  overlayOpacity,\n  size = 'md',\n  transitionDuration = 300,\n  closeButtonLabel,\n  overlayColor,\n  overflow = 'outside',\n  transition = 'pop',\n  padding = 'lg',\n  shadow = 'lg',\n  id,\n  classNames,\n  styles,\n  sx,\n  closeOnClickOutside = true,\n  centered = false,\n  ...others\n}: ModalProps) {\n  const baseId = useUuid(id);\n  const titleId = `${baseId}-title`;\n  const bodyId = `${baseId}-body`;\n  const { classes, cx, theme } = useStyles(\n    { size, overflow, centered },\n    { sx, classNames, styles, name: 'Modal' }\n  );\n  const focusTrapRef = useFocusTrap(opened);\n  const _overlayOpacity =\n    typeof overlayOpacity === 'number'\n      ? overlayOpacity\n      : theme.colorScheme === 'dark'\n      ? 0.85\n      : 0.75;\n\n  const [, lockScroll] = useScrollLock();\n  useFocusReturn({ opened, transitionDuration });\n\n  return (\n    <GroupedTransition\n      onExited={() => lockScroll(false)}\n      onEntered={() => lockScroll(true)}\n      mounted={opened}\n      transitions={{\n        modal: { duration: transitionDuration, transition },\n        overlay: { duration: transitionDuration / 2, transition: 'fade', timingFunction: 'ease' },\n      }}\n    >\n      {(transitionStyles) => (\n        <div className={cx(classes.root, className)} {...others}>\n          {closeOnClickOutside && (\n            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events\n            <div onClick={onClose} className={classes.clickOutsideOverlay} style={{ zIndex: 2 }} />\n          )}\n\n          <div\n            className={classes.inner}\n            onKeyDownCapture={(event) => {\n              const shouldTrigger =\n                (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n              shouldTrigger && event.nativeEvent.code === 'Escape' && onClose();\n            }}\n            ref={focusTrapRef}\n          >\n            <Paper<'div'>\n              className={classes.modal}\n              shadow={shadow}\n              padding={padding}\n              role=\"dialog\"\n              aria-labelledby={titleId}\n              aria-describedby={bodyId}\n              aria-modal\n              tabIndex={-1}\n              style={{\n                ...transitionStyles.modal,\n                marginLeft: 'calc(var(--removed-scroll-width, 0px) * -1)',\n                zIndex: 3,\n              }}\n            >\n              {(title || !hideCloseButton) && (\n                <div className={classes.header}>\n                  <Text id={titleId} className={classes.title}>\n                    {title}\n                  </Text>\n\n                  {!hideCloseButton && (\n                    <CloseButton iconSize={16} onClick={onClose} aria-label={closeButtonLabel} />\n                  )}\n                </div>\n              )}\n\n              <div id={bodyId} className={classes.body}>\n                {children}\n              </div>\n            </Paper>\n          </div>\n\n          <div style={transitionStyles.overlay}>\n            <Overlay\n              zIndex={0}\n              color={\n                overlayColor || (theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.black)\n              }\n              opacity={_overlayOpacity}\n            />\n          </div>\n        </div>\n      )}\n    </GroupedTransition>\n  );\n}\n\nexport function Modal({\n  zIndex = getDefaultZIndex('modal'),\n  ...props\n}: React.ComponentPropsWithoutRef<typeof MantineModal>) {\n  return (\n    <Portal zIndex={zIndex}>\n      <MantineModal {...props} />\n    </Portal>\n  );\n}\n\nModal.displayName = '@mantine/core/Modal';\n"],"names":[],"mappings":"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"}

package/esm/components/Modal/Modal.styles.js

@@ -8,7 +8,7 @@ const sizes = {
   xl: 780,
   full: "100%"
 };
-var useStyles = createStyles((theme, { overflow, size }) => ({
+var useStyles = createStyles((theme, { overflow, size, centered }) => ({
   root: {
     position: "fixed",
     top: 0,
@@ -26,10 +26,10 @@ var useStyles = createStyles((theme, { overflow, size }) => ({
     padding: `${theme.spacing.xl * 2}px ${theme.spacing.md}px`,
     display: "flex",
     justifyContent: "center",
-    alignItems: "flex-start"
+    alignItems: centered ? "center" : "flex-start"
   },
   clickOutsideOverlay: {
-    position: "absolute",
+    position: "fixed",
     top: 0,
     left: 0,
     right: 0,

package/esm/components/Modal/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.styles.js","sources":["../../../src/components/Modal/Modal.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport const sizes = {\n  xs: 320,\n  sm: 380,\n  md: 440,\n  lg: 620,\n  xl: 780,\n  full: '100%',\n};\n\ninterface ModalStyles {\n  overflow: 'outside' | 'inside';\n  size: string | number;\n}\n\nexport default createStyles((theme, { overflow, size }: ModalStyles) => ({\n  root: {\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n\n  inner: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflowY: 'auto',\n    padding: `${theme.spacing.xl * 2}px ${theme.spacing.md}px`,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n  },\n\n  clickOutsideOverlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n\n  title: {\n    marginRight: theme.spacing.md,\n    textOverflow: 'ellipsis',\n    display: 'block',\n    wordBreak: 'break-word',\n  },\n\n  modal: {\n    width: theme.fn.size({ sizes, size }),\n    outline: 0,\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n  },\n\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing.md,\n    marginRight: -9,\n  },\n\n  body: {\n    maxHeight: overflow === 'inside' ? 'calc(100vh - 185px)' : null,\n    overflowY: overflow === 'inside' ? 'auto' : null,\n    wordBreak: 'break-word',\n  },\n}));\n"],"names":[],"mappings":";;AACY,MAAC,KAAK,GAAG;AACrB,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,IAAI,EAAE,MAAM;AACd,EAAE;AACF,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM;AAC5D,EAAE,IAAI,EAAE;AACR,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,KAAK,EAAE,CAAC;AACZ,IAAI,MAAM,EAAE,CAAC;AACb,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,KAAK,EAAE,CAAC;AACZ,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;AAC9D,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,cAAc,EAAE,QAAQ;AAC5B,IAAI,UAAU,EAAE,YAAY;AAC5B,GAAG;AACH,EAAE,mBAAmB,EAAE;AACvB,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,KAAK,EAAE,CAAC;AACZ,IAAI,MAAM,EAAE,CAAC;AACb,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,SAAS,EAAE,YAAY;AAC3B,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACzC,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACtF,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,cAAc,EAAE,eAAe;AACnC,IAAI,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AAClC,IAAI,WAAW,EAAE,CAAC,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,SAAS,EAAE,QAAQ,KAAK,QAAQ,GAAG,qBAAqB,GAAG,IAAI;AACnE,IAAI,SAAS,EAAE,QAAQ,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI;AACpD,IAAI,SAAS,EAAE,YAAY;AAC3B,GAAG;AACH,CAAC,CAAC,CAAC;;;;;"}
+{"version":3,"file":"Modal.styles.js","sources":["../../../src/components/Modal/Modal.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\nexport const sizes = {\n  xs: 320,\n  sm: 380,\n  md: 440,\n  lg: 620,\n  xl: 780,\n  full: '100%',\n};\n\ninterface ModalStyles {\n  overflow: 'outside' | 'inside';\n  size: string | number;\n  centered: boolean;\n}\n\nexport default createStyles((theme, { overflow, size, centered }: ModalStyles) => ({\n  root: {\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n\n  inner: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    overflowY: 'auto',\n    padding: `${theme.spacing.xl * 2}px ${theme.spacing.md}px`,\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: centered ? 'center' : 'flex-start',\n  },\n\n  clickOutsideOverlay: {\n    position: 'fixed',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n  },\n\n  title: {\n    marginRight: theme.spacing.md,\n    textOverflow: 'ellipsis',\n    display: 'block',\n    wordBreak: 'break-word',\n  },\n\n  modal: {\n    width: theme.fn.size({ sizes, size }),\n    outline: 0,\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,\n  },\n\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    marginBottom: theme.spacing.md,\n    marginRight: -9,\n  },\n\n  body: {\n    maxHeight: overflow === 'inside' ? 'calc(100vh - 185px)' : null,\n    overflowY: overflow === 'inside' ? 'auto' : null,\n    wordBreak: 'break-word',\n  },\n}));\n"],"names":[],"mappings":";;AACY,MAAC,KAAK,GAAG;AACrB,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,EAAE,EAAE,GAAG;AACT,EAAE,IAAI,EAAE,MAAM;AACd,EAAE;AACF,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM;AACtE,EAAE,IAAI,EAAE;AACR,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,KAAK,EAAE,CAAC;AACZ,IAAI,MAAM,EAAE,CAAC;AACb,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,KAAK,EAAE,CAAC;AACZ,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,OAAO,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;AAC9D,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,cAAc,EAAE,QAAQ;AAC5B,IAAI,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,YAAY;AAClD,GAAG;AACH,EAAE,mBAAmB,EAAE;AACvB,IAAI,QAAQ,EAAE,OAAO;AACrB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,KAAK,EAAE,CAAC;AACZ,IAAI,MAAM,EAAE,CAAC;AACb,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AACjC,IAAI,YAAY,EAAE,UAAU;AAC5B,IAAI,OAAO,EAAE,OAAO;AACpB,IAAI,SAAS,EAAE,YAAY;AAC3B,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AACzC,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK;AACtF,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,cAAc,EAAE,eAAe;AACnC,IAAI,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;AAClC,IAAI,WAAW,EAAE,CAAC,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,SAAS,EAAE,QAAQ,KAAK,QAAQ,GAAG,qBAAqB,GAAG,IAAI;AACnE,IAAI,SAAS,EAAE,QAAQ,KAAK,QAAQ,GAAG,MAAM,GAAG,IAAI;AACpD,IAAI,SAAS,EAAE,YAAY;AAC3B,GAAG;AACH,CAAC,CAAC,CAAC;;;;;"}

package/esm/components/MultiSelect/MultiSelect.js

@@ -1,10 +1,11 @@
 import React, { forwardRef, useRef, useState } from 'react';
 import { useUuid, useScrollIntoView, useUncontrolled, useDidUpdate, useMergedRef } from '@mantine/hooks';
-import { useExtractedMargins } from '@mantine/styles';
+import { getDefaultZIndex, useExtractedMargins } from '@mantine/styles';
 import { DefaultValue } from './DefaultValue/DefaultValue.js';
 import { DefaultItem } from '../Select/DefaultItem/DefaultItem.js';
 import { filterData } from './filter-data/filter-data.js';
 import { getSelectRightSectionProps } from '../Select/SelectRightSection/get-select-right-section-props.js';
+import { SelectScrollArea } from '../Select/SelectScrollArea/SelectScrollArea.js';
 import { SelectItems } from '../Select/SelectItems/SelectItems.js';
 import { SelectDropdown } from '../Select/SelectDropdown/SelectDropdown.js';
 import { groupSortData } from '../Select/group-sort-data/group-sort-data.js';
@@ -103,7 +104,10 @@ const MultiSelect = forwardRef((_a, ref) => {
     dropdownComponent,
     onDropdownClose,
     onDropdownOpen,
-    maxSelectedValues
+    maxSelectedValues,
+    withinPortal,
+    zIndex = getDefaultZIndex("popover"),
+    name
   } = _b, others = __objRest(_b, [
     "className",
     "style",
@@ -154,7 +158,10 @@ const MultiSelect = forwardRef((_a, ref) => {
     "dropdownComponent",
     "onDropdownClose",
     "onDropdownOpen",
-    "maxSelectedValues"
+    "maxSelectedValues",
+    "withinPortal",
+    "zIndex",
+    "name"
   ]);
   const { classes, cx, theme } = useStyles({ size, invalid: !!error }, { classNames, styles, name: "MultiSelect" });
   const { mergedStyles, rest } = useExtractedMargins({ others, style });
@@ -299,16 +306,27 @@ const MultiSelect = forwardRef((_a, ref) => {
         break;
       }
       case "Enter": {
+        event.preventDefault();
         if (filteredData[hovered] && dropdownOpened) {
-          event.preventDefault();
           handleItemSelect(filteredData[hovered]);
         } else {
           setDropdownOpened(true);
         }
         break;
       }
+      case "Space": {
+        if (!searchable) {
+          event.preventDefault();
+          if (filteredData[hovered] && dropdownOpened) {
+            handleItemSelect(filteredData[hovered]);
+          } else {
+            setDropdownOpened(true);
+          }
+        }
+        break;
+      }
       case "Backspace": {
-        if (_value.length > 0 && searchValue.length === 0 && searchable) {
+        if (_value.length > 0 && searchValue.length === 0) {
           setValue(_value.slice(0, -1));
           setDropdownOpened(true);
         }
@@ -331,12 +349,13 @@ const MultiSelect = forwardRef((_a, ref) => {
   }).filter((val) => !!val).map((item) => /* @__PURE__ */ React.createElement(Value, __spreadProps(__spreadValues({}, item), {
     disabled,
     className: classes.value,
-    onRemove: (e) => {
+    onRemove: (event) => {
       if (dropdownOpened) {
-        e.preventDefault();
-        e.stopPropagation();
+        event.preventDefault();
+        event.stopPropagation();
       }
       handleValueRemove(item.value);
+      setDropdownOpened(true);
     },
     key: item.value,
     size,
@@ -442,10 +461,12 @@ const MultiSelect = forwardRef((_a, ref) => {
     styles,
     ref: useMergedRef(dropdownRef, scrollableRef),
     __staticSelector: "MultiSelect",
-    dropdownComponent,
+    dropdownComponent: dropdownComponent || SelectScrollArea,
     referenceElement: wrapperRef.current,
     direction,
-    onDirectionChange: setDirection
+    onDirectionChange: setDirection,
+    withinPortal,
+    zIndex
   }, /* @__PURE__ */ React.createElement(SelectItems, {
     data: filteredData,
     hovered,
@@ -461,7 +482,11 @@ const MultiSelect = forwardRef((_a, ref) => {
     nothingFound,
     creatable: creatable && !!createLabel,
     createLabel
-  }))));
+  }))), name && /* @__PURE__ */ React.createElement("input", {
+    type: "hidden",
+    name,
+    value: _value.join(",")
+  }));
 });
 MultiSelect.displayName = "@mantine/core/MultiSelect";