@mantine/core 3.2.3 → 3.3.3

package/cjs/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var RadixScrollArea = require('@radix-ui/react-scroll-area');
+var styles = require('@mantine/styles');
+var ScrollArea_styles = require('./ScrollArea.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      n[k] = e[k];
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
+
+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 ScrollArea = React.forwardRef((_a, ref) => {
+  var _b = _a, {
+    children,
+    style,
+    className,
+    classNames,
+    styles: styles$1,
+    sx,
+    scrollbarSize = 12,
+    scrollHideDelay = 1e3,
+    type = "hover",
+    dir = "ltr",
+    offsetScrollbars = false,
+    viewportRef
+  } = _b, others = __objRest(_b, [
+    "children",
+    "style",
+    "className",
+    "classNames",
+    "styles",
+    "sx",
+    "scrollbarSize",
+    "scrollHideDelay",
+    "type",
+    "dir",
+    "offsetScrollbars",
+    "viewportRef"
+  ]);
+  const [scrollbarHovered, setScrollbarHovered] = React.useState(false);
+  const { mergedStyles, rest } = styles.useExtractedMargins({ style, others });
+  const { classes, cx } = ScrollArea_styles['default']({ scrollbarSize, offsetScrollbars, dir, scrollbarHovered }, { name: "ScrollArea", classNames, styles: styles$1, sx });
+  return /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Root, __spreadValues({
+    type,
+    scrollHideDelay,
+    dir,
+    className: cx(classes.root, className),
+    style: mergedStyles,
+    ref
+  }, rest), /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Viewport, {
+    className: classes.viewport,
+    ref: viewportRef
+  }, children), /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Scrollbar, {
+    orientation: "horizontal",
+    className: classes.scrollbar,
+    forceMount: true,
+    onMouseEnter: () => setScrollbarHovered(true),
+    onMouseLeave: () => setScrollbarHovered(false)
+  }, /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Thumb, {
+    className: classes.thumb
+  })), /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Scrollbar, {
+    orientation: "vertical",
+    className: classes.scrollbar,
+    forceMount: true,
+    onMouseEnter: () => setScrollbarHovered(true),
+    onMouseLeave: () => setScrollbarHovered(false)
+  }, /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Thumb, {
+    className: classes.thumb
+  })), /* @__PURE__ */ React__default.createElement(RadixScrollArea__namespace.Corner, {
+    className: classes.corner
+  }));
+});
+ScrollArea.displayName = "@mantine/core/ScrollArea";
+
+exports.ScrollArea = ScrollArea;
+//# sourceMappingURL=ScrollArea.js.map

package/cjs/components/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { DefaultProps, useExtractedMargins, ClassNames } from '@mantine/styles';\nimport useStyles from './ScrollArea.styles';\n\nexport type ScrollAreaStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ScrollAreaProps\n  extends DefaultProps<ScrollAreaStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Scrollbar size in px */\n  scrollbarSize?: number;\n\n  /** Scrollbars type */\n  type?: 'auto' | 'always' | 'scroll' | 'hover';\n\n  /** Scroll hide delay in ms, for scroll and hover types only */\n  scrollHideDelay?: number;\n\n  /** Reading direction of the scroll area */\n  dir?: 'ltr' | 'rtl';\n\n  /** Should scrollbars be offset with padding */\n  offsetScrollbars?: boolean;\n\n  /** Get viewport ref */\n  viewportRef?: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      children,\n      style,\n      className,\n      classNames,\n      styles,\n      sx,\n      scrollbarSize = 12,\n      scrollHideDelay = 1000,\n      type = 'hover',\n      dir = 'ltr',\n      offsetScrollbars = false,\n      viewportRef,\n      ...others\n    }: ScrollAreaProps,\n    ref\n  ) => {\n    const [scrollbarHovered, setScrollbarHovered] = useState(false);\n    const { mergedStyles, rest } = useExtractedMargins({ style, others });\n    const { classes, cx } = useStyles(\n      { scrollbarSize, offsetScrollbars, dir, scrollbarHovered },\n      { name: 'ScrollArea', classNames, styles, sx }\n    );\n\n    return (\n      <RadixScrollArea.Root\n        type={type}\n        scrollHideDelay={scrollHideDelay}\n        dir={dir}\n        className={cx(classes.root, className)}\n        style={mergedStyles}\n        ref={ref}\n        {...rest}\n      >\n        <RadixScrollArea.Viewport className={classes.viewport} ref={viewportRef}>\n          {children}\n        </RadixScrollArea.Viewport>\n        <RadixScrollArea.Scrollbar\n          orientation=\"horizontal\"\n          className={classes.scrollbar}\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <RadixScrollArea.Thumb className={classes.thumb} />\n        </RadixScrollArea.Scrollbar>\n        <RadixScrollArea.Scrollbar\n          orientation=\"vertical\"\n          className={classes.scrollbar}\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <RadixScrollArea.Thumb className={classes.thumb} />\n        </RadixScrollArea.Scrollbar>\n        <RadixScrollArea.Corner className={classes.corner} />\n      </RadixScrollArea.Root>\n    );\n  }\n);\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n"],"names":["forwardRef","styles","useState","useExtractedMargins","useStyles","React","RadixScrollArea"],"mappings":"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"}

package/cjs/components/ScrollArea/ScrollArea.styles.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles((theme, { scrollbarSize, dir, offsetScrollbars, scrollbarHovered }, getRef) => {
+  const thumb = getRef("thumb");
+  return {
+    root: {
+      overflow: "hidden"
+    },
+    viewport: {
+      width: "100%",
+      height: "100%",
+      paddingRight: dir === "ltr" && offsetScrollbars ? scrollbarSize : void 0,
+      paddingLeft: dir === "rtl" && offsetScrollbars ? scrollbarSize : void 0
+    },
+    scrollbar: {
+      display: "flex",
+      userSelect: "none",
+      touchAction: "none",
+      boxSizing: "border-box",
+      padding: scrollbarSize / 5,
+      transition: "background-color 150ms ease, opacity 150ms ease",
+      "&:hover": {
+        backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0],
+        [`& .${thumb}`]: {
+          backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba("#ffffff", 0.5) : theme.fn.rgba(theme.black, 0.5)
+        }
+      },
+      '&[data-orientation="vertical"]': {
+        width: scrollbarSize
+      },
+      '&[data-orientation="horizontal"]': {
+        flexDirection: "column",
+        height: scrollbarSize
+      },
+      '&[data-state="hidden"]': {
+        opacity: 0
+      }
+    },
+    thumb: {
+      ref: thumb,
+      flex: 1,
+      backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba("#ffffff", 0.4) : theme.fn.rgba(theme.black, 0.4),
+      borderRadius: scrollbarSize,
+      position: "relative",
+      transition: "background-color 150ms ease",
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: "100%",
+        height: "100%",
+        minWidth: 44,
+        minHeight: 44
+      }
+    },
+    corner: {
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+      transition: "opacity 150ms ease",
+      opacity: scrollbarHovered ? 1 : 0
+    }
+  };
+});
+
+exports.default = useStyles;
+//# sourceMappingURL=ScrollArea.styles.js.map

package/cjs/components/ScrollArea/ScrollArea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.styles.js","sources":["../../../src/components/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ScrollAreaStyles {\n  scrollbarSize: number;\n  dir: 'ltr' | 'rtl';\n  offsetScrollbars: boolean;\n  scrollbarHovered: boolean;\n}\n\nexport default createStyles(\n  (theme, { scrollbarSize, dir, offsetScrollbars, scrollbarHovered }: ScrollAreaStyles, getRef) => {\n    const thumb = getRef('thumb');\n    return {\n      root: {\n        overflow: 'hidden',\n      },\n\n      viewport: {\n        width: '100%',\n        height: '100%',\n        paddingRight: dir === 'ltr' && offsetScrollbars ? scrollbarSize : undefined,\n        paddingLeft: dir === 'rtl' && offsetScrollbars ? scrollbarSize : undefined,\n      },\n\n      scrollbar: {\n        display: 'flex',\n        userSelect: 'none',\n        touchAction: 'none',\n        boxSizing: 'border-box',\n        padding: scrollbarSize / 5,\n        transition: 'background-color 150ms ease, opacity 150ms ease',\n\n        '&:hover': {\n          backgroundColor:\n            theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n          [`& .${thumb}`]: {\n            backgroundColor:\n              theme.colorScheme === 'dark'\n                ? theme.fn.rgba('#ffffff', 0.5)\n                : theme.fn.rgba(theme.black, 0.5),\n          },\n        },\n\n        '&[data-orientation=\"vertical\"]': {\n          width: scrollbarSize,\n        },\n\n        '&[data-orientation=\"horizontal\"]': {\n          flexDirection: 'column',\n          height: scrollbarSize,\n        },\n\n        '&[data-state=\"hidden\"]': {\n          opacity: 0,\n        },\n      },\n\n      thumb: {\n        ref: thumb,\n        flex: 1,\n        backgroundColor:\n          theme.colorScheme === 'dark'\n            ? theme.fn.rgba('#ffffff', 0.4)\n            : theme.fn.rgba(theme.black, 0.4),\n        borderRadius: scrollbarSize,\n        position: 'relative',\n        transition: 'background-color 150ms ease',\n\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          width: '100%',\n          height: '100%',\n          minWidth: 44,\n          minHeight: 44,\n        },\n      },\n\n      corner: {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n        transition: 'opacity 150ms ease',\n        opacity: scrollbarHovered ? 1 : 0,\n      },\n    };\n  }\n);\n"],"names":["createStyles"],"mappings":"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"}

package/cjs/components/Select/Select.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var hooks = require('@mantine/hooks');
 var styles = require('@mantine/styles');
+var SelectScrollArea = require('./SelectScrollArea/SelectScrollArea.js');
 var DefaultItem = require('./DefaultItem/DefaultItem.js');
 var getSelectRightSectionProps = require('./SelectRightSection/get-select-right-section-props.js');
 var SelectItems = require('./SelectItems/SelectItems.js');
@@ -73,8 +74,8 @@ const Select = React.forwardRef((_a, ref) => {
     onChange,
     itemComponent = DefaultItem.DefaultItem,
     onKeyDown,
-    onFocus,
     onBlur,
+    onFocus,
     transition = "fade",
     transitionDuration = 0,
     initiallyOpened = false,
@@ -101,7 +102,9 @@ const Select = React.forwardRef((_a, ref) => {
     dropdownComponent,
     onDropdownClose,
     onDropdownOpen,
-    zIndex
+    withinPortal,
+    zIndex = styles.getDefaultZIndex("popover"),
+    name
   } = _b, others = __objRest(_b, [
     "className",
     "style",
@@ -118,8 +121,8 @@ const Select = React.forwardRef((_a, ref) => {
     "onChange",
     "itemComponent",
     "onKeyDown",
-    "onFocus",
     "onBlur",
+    "onFocus",
     "transition",
     "transitionDuration",
     "initiallyOpened",
@@ -146,7 +149,9 @@ const Select = React.forwardRef((_a, ref) => {
     "dropdownComponent",
     "onDropdownClose",
     "onDropdownOpen",
-    "zIndex"
+    "withinPortal",
+    "zIndex",
+    "name"
   ]);
   const { classes, cx, theme } = Select_styles['default']();
   const { mergedStyles, rest } = styles.useExtractedMargins({ others, style });
@@ -155,8 +160,8 @@ const Select = React.forwardRef((_a, ref) => {
   const inputRef = React.useRef();
   const dropdownRef = React.useRef();
   const itemsRefs = React.useRef({});
-  const [creatableDataValue, setCreatableDataValue] = React.useState(void 0);
   const [direction, setDirection] = React.useState("column");
+  const isColumn = direction === "column";
   const uuid = hooks.useUuid(id);
   const { scrollIntoView, targetRef, scrollableRef } = hooks.useScrollIntoView({
     duration: 0,
@@ -172,7 +177,6 @@ const Select = React.forwardRef((_a, ref) => {
   const isCreatable = creatable && typeof getCreateLabel === "function";
   let createLabel = null;
   const formattedData = data.map((item) => typeof item === "string" ? { label: item, value: item } : item);
-  hooks.useClickOutside(() => setDropdownOpened(false), ["mousedown", "touchstart"], [inputRef.current, dropdownRef.current]);
   const sortedData = groupSortData.groupSortData({ data: formattedData });
   const [_value, handleChange, inputMode] = hooks.useUncontrolled({
     value,
@@ -208,7 +212,6 @@ const Select = React.forwardRef((_a, ref) => {
   const handleItemSelect = (item) => {
     handleChange(item.value);
     if (item.creatable) {
-      setCreatableDataValue(item.value);
       typeof onCreate === "function" && onCreate(item.value);
     }
     if (inputMode === "uncontrolled") {
@@ -223,7 +226,6 @@ const Select = React.forwardRef((_a, ref) => {
     searchable,
     limit,
     searchValue: inputValue,
-    creatable: !!creatableDataValue && creatableDataValue === inputValue,
     filter
   });
   if (isCreatable && shouldCreate(inputValue, filteredData)) {
@@ -242,46 +244,53 @@ const Select = React.forwardRef((_a, ref) => {
   hooks.useDidUpdate(() => {
     setHovered(getNextIndex(-1, (index) => index + 1, (index) => index < filteredData.length - 1));
   }, [inputValue]);
+  const selectedItemIndex = _value ? filteredData.findIndex((el) => el.value === _value) : 0;
+  const handlePrevious = () => {
+    setHovered((current) => {
+      var _a2;
+      const nextIndex = getNextIndex(current, (index) => index - 1, (index) => index > 0);
+      targetRef.current = itemsRefs.current[(_a2 = filteredData[nextIndex]) == null ? void 0 : _a2.value];
+      scrollIntoView({ alignment: isColumn ? "start" : "end" });
+      return nextIndex;
+    });
+  };
+  const handleNext = () => {
+    setHovered((current) => {
+      var _a2;
+      const nextIndex = getNextIndex(current, (index) => index + 1, (index) => index < filteredData.length - 1);
+      targetRef.current = itemsRefs.current[(_a2 = filteredData[nextIndex]) == null ? void 0 : _a2.value];
+      scrollIntoView({ alignment: isColumn ? "end" : "start" });
+      return nextIndex;
+    });
+  };
+  const scrollSelectedItemIntoView = () => window.setTimeout(() => {
+    var _a2;
+    targetRef.current = itemsRefs.current[(_a2 = filteredData[selectedItemIndex]) == null ? void 0 : _a2.value];
+    scrollIntoView({ alignment: isColumn ? "end" : "start" });
+  }, 0);
   const handleInputKeydown = (event) => {
     typeof onKeyDown === "function" && onKeyDown(event);
-    const isColumn = direction === "column";
-    const handlePrevious = () => {
-      setHovered((current) => {
-        var _a2;
-        const nextIndex = getNextIndex(current, (index) => index - 1, (index) => index > 0);
-        if (dropdownOpened) {
-          targetRef.current = itemsRefs.current[(_a2 = filteredData[nextIndex]) == null ? void 0 : _a2.value];
-          scrollIntoView({
-            alignment: isColumn ? "start" : "end"
-          });
-        }
-        return nextIndex;
-      });
-    };
-    const handleNext = () => {
-      setHovered((current) => {
-        var _a2;
-        const nextIndex = getNextIndex(current, (index) => index + 1, (index) => index < filteredData.length - 1);
-        if (dropdownOpened) {
-          targetRef.current = itemsRefs.current[(_a2 = filteredData[nextIndex]) == null ? void 0 : _a2.value];
-          scrollIntoView({
-            alignment: isColumn ? "end" : "start"
-          });
-        }
-        return nextIndex;
-      });
-    };
     switch (event.nativeEvent.code) {
       case "ArrowUp": {
         event.preventDefault();
-        setDropdownOpened(true);
-        isColumn ? handlePrevious() : handleNext();
+        if (!dropdownOpened) {
+          setHovered(selectedItemIndex);
+          setDropdownOpened(true);
+          scrollSelectedItemIntoView();
+        } else {
+          isColumn ? handlePrevious() : handleNext();
+        }
         break;
       }
       case "ArrowDown": {
         event.preventDefault();
-        setDropdownOpened(true);
-        isColumn ? handleNext() : handlePrevious();
+        if (!dropdownOpened) {
+          setHovered(selectedItemIndex);
+          setDropdownOpened(true);
+          scrollSelectedItemIntoView();
+        } else {
+          isColumn ? handleNext() : handlePrevious();
+        }
         break;
       }
       case "Escape": {
@@ -292,43 +301,62 @@ const Select = React.forwardRef((_a, ref) => {
       }
       case "Space": {
         if (!searchable) {
-          event.preventDefault();
-          setDropdownOpened(!dropdownOpened);
-          setHovered(getNextIndex(-1, (index) => index + 1, (index) => index < filteredData.length - 1));
+          if (filteredData[hovered] && dropdownOpened) {
+            event.preventDefault();
+            handleItemSelect(filteredData[hovered]);
+          } else {
+            setDropdownOpened(!dropdownOpened);
+            setHovered(selectedItemIndex);
+            scrollSelectedItemIntoView();
+          }
         }
         break;
       }
       case "Enter": {
+        event.preventDefault();
         if (filteredData[hovered] && dropdownOpened) {
           event.preventDefault();
           handleItemSelect(filteredData[hovered]);
         } else {
           setDropdownOpened(true);
+          setHovered(selectedItemIndex);
+          scrollSelectedItemIntoView();
         }
       }
     }
   };
-  const handleInputFocus = (event) => {
-    typeof onFocus === "function" && onFocus(event);
-  };
   const handleInputBlur = (event) => {
     typeof onBlur === "function" && onBlur(event);
     const selected = sortedData.find((item) => item.value === _value);
     handleSearchChange((selected == null ? void 0 : selected.label) || "");
     setDropdownOpened(false);
   };
+  const handleInputFocus = (event) => {
+    typeof onFocus === "function" && onFocus(event);
+    if (searchable) {
+      setDropdownOpened(true);
+    }
+  };
   const handleInputChange = (event) => {
+    handleSearchChange(event.currentTarget.value);
     if (clearable && event.currentTarget.value === "") {
       handleChange(null);
-      if (inputMode === "uncontrolled") {
-        handleSearchChange("");
-      }
-    } else {
-      handleSearchChange(event.currentTarget.value);
     }
     setHovered(0);
     setDropdownOpened(true);
   };
+  const handleInputClick = () => {
+    if (!searchable) {
+      setDropdownOpened(!dropdownOpened);
+    } else {
+      setDropdownOpened(true);
+    }
+    if (_value && !dropdownOpened) {
+      setHovered(selectedItemIndex);
+      scrollSelectedItemIntoView();
+    }
+  };
+  const shouldShowDropdown = dropdownOpened && (searchable && !creatable ? filteredData.length > 0 || !!nothingFound : dropdownOpened);
   return /* @__PURE__ */ React__default.createElement(InputWrapper.InputWrapper, __spreadValues({
     required,
     id: uuid,
@@ -347,7 +375,7 @@ const Select = React.forwardRef((_a, ref) => {
     "aria-haspopup": "listbox",
     "aria-owns": `${uuid}-items`,
     "aria-controls": uuid,
-    "aria-expanded": dropdownOpened,
+    "aria-expanded": shouldShowDropdown,
     onMouseLeave: () => setHovered(-1),
     tabIndex: -1
   }, /* @__PURE__ */ React__default.createElement(Input.Input, __spreadValues(__spreadProps(__spreadValues({}, rest), {
@@ -362,14 +390,14 @@ const Select = React.forwardRef((_a, ref) => {
     value: inputValue,
     onChange: handleInputChange,
     "aria-autocomplete": "list",
-    "aria-controls": dropdownOpened ? `${uuid}-items` : null,
+    "aria-controls": shouldShowDropdown ? `${uuid}-items` : null,
     "aria-activedescendant": hovered !== -1 ? `${uuid}-${hovered}` : null,
-    onClick: () => setDropdownOpened(!dropdownOpened),
-    onFocus: handleInputFocus,
+    onClick: handleInputClick,
     onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
     readOnly: !searchable,
     disabled,
-    "data-mantine-stop-propagation": dropdownOpened,
+    "data-mantine-stop-propagation": shouldShowDropdown,
     autoComplete: "off",
     classNames: __spreadProps(__spreadValues({}, classNames), {
       input: cx({ [classes.input]: !searchable }, classNames == null ? void 0 : classNames.input)
@@ -386,7 +414,7 @@ const Select = React.forwardRef((_a, ref) => {
     error
   }))), /* @__PURE__ */ React__default.createElement(SelectDropdown.SelectDropdown, {
     referenceElement: inputRef.current,
-    mounted: dropdownOpened,
+    mounted: shouldShowDropdown,
     transition,
     transitionDuration,
     transitionTimingFunction,
@@ -397,9 +425,10 @@ const Select = React.forwardRef((_a, ref) => {
     styles: styles$1,
     ref: hooks.useMergedRef(dropdownRef, scrollableRef),
     __staticSelector: "Select",
-    dropdownComponent,
+    dropdownComponent: dropdownComponent || SelectScrollArea.SelectScrollArea,
     direction,
     onDirectionChange: setDirection,
+    withinPortal,
     zIndex
   }, /* @__PURE__ */ React__default.createElement(SelectItems.SelectItems, {
     data: filteredData,
@@ -417,7 +446,11 @@ const Select = React.forwardRef((_a, ref) => {
     nothingFound,
     creatable: isCreatable && !!createLabel,
     createLabel
-  }))));
+  }))), name && /* @__PURE__ */ React__default.createElement("input", {
+    type: "hidden",
+    name,
+    value: _value || ""
+  }));
 });
 Select.displayName = "@mantine/core/Select";