@mantine/core 3.2.1 → 3.3.1

package/esm/components/Popper/Popper.js

@@ -1,10 +1,11 @@
-import React, { useState, useRef, useMemo } from 'react';
+import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
+import { getDefaultZIndex } from '@mantine/styles';
 import { useDidUpdate } from '@mantine/hooks';
 import { parsePopperPosition } from './parse-popper-position/parse-popper-position.js';
+import { PopperContainer } from './PopperContainer/PopperContainer.js';
 import useStyles from './Popper.styles.js';
 import { Transition } from '../Transition/Transition.js';
-import { Portal } from '../Portal/Portal.js';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -39,31 +40,17 @@ function Popper({
   transitionTimingFunction,
   arrowClassName,
   arrowStyle,
-  zIndex = 100,
+  zIndex = getDefaultZIndex("popover"),
   forceUpdateDependencies = [],
   modifiers = [],
   onTransitionEnd,
-  allowPlacementChange = true,
-  placementFallbacks = ["bottom"],
-  onPlacementChange
+  withinPortal = true
 }) {
   var _a;
   const padding = withArrow ? gutter + arrowSize : gutter;
   const { classes, cx } = useStyles({ arrowSize }, { name: "Popper" });
   const [popperElement, setPopperElement] = useState(null);
   const initialPlacement = placement === "center" ? position : `${position}-${placement}`;
-  const previousPlacement = useRef(initialPlacement);
-  const directionControlModifier = useMemo(() => ({
-    name: "directionControl",
-    enabled: allowPlacementChange && Boolean(onPlacementChange),
-    phase: "main",
-    fn: ({ state }) => {
-      if (onPlacementChange && previousPlacement.current !== state.placement) {
-        previousPlacement.current = state.placement;
-        onPlacementChange(state.placement);
-      }
-    }
-  }), [onPlacementChange, allowPlacementChange]);
   const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
     placement: initialPlacement,
     modifiers: [
@@ -73,14 +60,6 @@ function Popper({
           offset: [0, padding]
         }
       },
-      {
-        name: "flip",
-        enabled: allowPlacementChange,
-        options: {
-          fallbackPlacements: placementFallbacks
-        }
-      },
-      directionControlModifier,
       ...modifiers
     ]
   });
@@ -94,7 +73,8 @@ function Popper({
     transition,
     timingFunction: transitionTimingFunction,
     onExited: onTransitionEnd
-  }, (transitionStyles) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Portal, {
+  }, (transitionStyles) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(PopperContainer, {
+    withinPortal,
     zIndex
   }, /* @__PURE__ */ React.createElement("div", __spreadValues({
     ref: setPopperElement,

package/esm/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import React, { useMemo, useState, useRef } from 'react';\nimport { usePopper, StrictModifier } from 'react-popper';\nimport type { Placement } from '@popperjs/core';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Portal } from '../Portal';\nimport { Transition, MantineTransition } from '../Transition';\nimport { parsePopperPosition } from './parse-popper-position/parse-popper-position';\nimport useStyles from './Popper.styles';\n\nexport interface SharedPopperProps {\n  /** Position relative to reference element */\n  position?: 'top' | 'left' | 'bottom' | 'right';\n\n  /** Placement relative to reference element */\n  placement?: 'start' | 'center' | 'end';\n\n  /** Spacing between element and popper in px  */\n  gutter?: number;\n\n  /** Arrow size in px */\n  arrowSize?: number;\n\n  /** Renders arrow if true */\n  withArrow?: boolean;\n\n  /** Popper z-index */\n  zIndex?: number;\n\n  /** Customize mount/unmount transition */\n  transition?: MantineTransition;\n\n  /** Mount/unmount transition duration in ms */\n  transitionDuration?: number;\n\n  /** Mount/unmount transition timing function, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n}\n\nexport interface PopperProps<T extends HTMLElement> extends SharedPopperProps {\n  /** Element at which popper should be attached */\n  referenceElement: T;\n\n  /** Popper content */\n  children: React.ReactNode;\n\n  /** True to show popper, false to hide */\n  mounted: boolean;\n\n  /** Arrow class name */\n  arrowClassName?: string;\n\n  /** Arrow inline styles */\n  arrowStyle?: React.CSSProperties;\n\n  /** useEffect dependencies to force update popper position */\n  forceUpdateDependencies?: any[];\n\n  // Called when transition ends\n  onTransitionEnd?(): void;\n\n  /** valid popperjs modifiers array */\n  modifiers?: StrictModifier[];\n\n  /** Controls popper flip behavior  */\n  allowPlacementChange?: boolean;\n\n  /** Controls where popper can flip out */\n  placementFallbacks?: Placement[];\n\n  /** Called when popper changes its placement */\n  onPlacementChange?(placement: Placement): void;\n}\n\nexport function Popper<T extends HTMLElement = HTMLDivElement>({\n  position = 'top',\n  placement = 'center',\n  gutter = 5,\n  arrowSize = 2,\n  withArrow = false,\n  referenceElement,\n  children,\n  mounted,\n  transition = 'pop-top-left',\n  transitionDuration,\n  transitionTimingFunction,\n  arrowClassName,\n  arrowStyle,\n  zIndex = 100,\n  forceUpdateDependencies = [],\n  modifiers = [],\n  onTransitionEnd,\n  allowPlacementChange = true,\n  placementFallbacks = ['bottom'],\n  onPlacementChange,\n}: PopperProps<T>) {\n  const padding = withArrow ? gutter + arrowSize : gutter;\n  const { classes, cx } = useStyles({ arrowSize }, { name: 'Popper' });\n  const [popperElement, setPopperElement] = useState(null);\n\n  const initialPlacement: Placement =\n    placement === 'center' ? position : `${position}-${placement}`;\n\n  const previousPlacement = useRef<Placement>(initialPlacement);\n\n  // https://popper.js.org/react-popper/v2/faq/#why-i-get-render-loop-whenever-i-put-a-function-inside-the-popper-configuration\n  const directionControlModifier = useMemo(\n    () => ({\n      name: 'directionControl',\n      enabled: allowPlacementChange && Boolean(onPlacementChange),\n      phase: 'main',\n      fn: ({ state }) => {\n        if (onPlacementChange && previousPlacement.current !== state.placement) {\n          previousPlacement.current = state.placement;\n\n          onPlacementChange(state.placement);\n        }\n      },\n    }),\n    [onPlacementChange, allowPlacementChange]\n  );\n\n  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {\n    placement: initialPlacement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, padding],\n        },\n      },\n      {\n        name: 'flip',\n        enabled: allowPlacementChange,\n        options: {\n          fallbackPlacements: placementFallbacks,\n        },\n      },\n      // @ts-ignore\n      directionControlModifier,\n      ...modifiers,\n    ],\n  });\n\n  const parsedAttributes = parsePopperPosition(attributes.popper?.['data-popper-placement']);\n\n  useDidUpdate(() => {\n    typeof forceUpdate === 'function' && forceUpdate();\n  }, forceUpdateDependencies);\n\n  return (\n    <Transition\n      mounted={mounted}\n      duration={transitionDuration}\n      transition={transition}\n      timingFunction={transitionTimingFunction}\n      onExited={onTransitionEnd}\n    >\n      {(transitionStyles) => (\n        <div>\n          <Portal zIndex={zIndex}>\n            <div\n              ref={setPopperElement}\n              style={{ ...styles.popper, pointerEvents: 'none' }}\n              {...attributes.popper}\n            >\n              <div style={transitionStyles}>\n                {children}\n                {withArrow && (\n                  <div\n                    style={arrowStyle}\n                    className={cx(\n                      classes.arrow,\n                      classes[parsedAttributes.placement],\n                      classes[parsedAttributes.position],\n                      arrowClassName\n                    )}\n                  />\n                )}\n              </div>\n            </div>\n          </Portal>\n        </div>\n      )}\n    </Transition>\n  );\n}\n\nPopper.displayName = '@mantine/core/Popper';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popper.js","sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { usePopper, StrictModifier } from 'react-popper';\nimport { getDefaultZIndex } from '@mantine/styles';\nimport type { Placement } from '@popperjs/core';\nimport { useDidUpdate } from '@mantine/hooks';\nimport { Transition, MantineTransition } from '../Transition';\nimport { parsePopperPosition } from './parse-popper-position/parse-popper-position';\nimport { PopperContainer } from './PopperContainer/PopperContainer';\nimport useStyles from './Popper.styles';\n\nexport interface SharedPopperProps {\n  /** Position relative to reference element */\n  position?: 'top' | 'left' | 'bottom' | 'right';\n\n  /** Placement relative to reference element */\n  placement?: 'start' | 'center' | 'end';\n\n  /** Spacing between element and popper in px  */\n  gutter?: number;\n\n  /** Arrow size in px */\n  arrowSize?: number;\n\n  /** Renders arrow if true */\n  withArrow?: boolean;\n\n  /** Popper z-index */\n  zIndex?: number;\n\n  /** Customize mount/unmount transition */\n  transition?: MantineTransition;\n\n  /** Mount/unmount transition duration in ms */\n  transitionDuration?: number;\n\n  /** Mount/unmount transition timing function, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n}\n\nexport interface PopperProps<T extends HTMLElement> extends SharedPopperProps {\n  /** Element at which popper should be attached */\n  referenceElement: T;\n\n  /** Popper content */\n  children: React.ReactNode;\n\n  /** True to show popper, false to hide */\n  mounted: boolean;\n\n  /** Arrow class name */\n  arrowClassName?: string;\n\n  /** Arrow inline styles */\n  arrowStyle?: React.CSSProperties;\n\n  /** useEffect dependencies to force update popper position */\n  forceUpdateDependencies?: any[];\n\n  /** Called when transition ends */\n  onTransitionEnd?(): void;\n\n  /** Popperjs modifiers array */\n  modifiers?: StrictModifier[];\n\n  /** Whether to render the target element in a Portal */\n  withinPortal?: boolean;\n}\n\nexport function Popper<T extends HTMLElement = HTMLDivElement>({\n  position = 'top',\n  placement = 'center',\n  gutter = 5,\n  arrowSize = 2,\n  withArrow = false,\n  referenceElement,\n  children,\n  mounted,\n  transition = 'pop-top-left',\n  transitionDuration,\n  transitionTimingFunction,\n  arrowClassName,\n  arrowStyle,\n  zIndex = getDefaultZIndex('popover'),\n  forceUpdateDependencies = [],\n  modifiers = [],\n  onTransitionEnd,\n  withinPortal = true,\n}: PopperProps<T>) {\n  const padding = withArrow ? gutter + arrowSize : gutter;\n  const { classes, cx } = useStyles({ arrowSize }, { name: 'Popper' });\n  const [popperElement, setPopperElement] = useState(null);\n\n  const initialPlacement: Placement =\n    placement === 'center' ? position : `${position}-${placement}`;\n\n  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {\n    placement: initialPlacement,\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [0, padding],\n        },\n      },\n      ...modifiers,\n    ],\n  });\n\n  const parsedAttributes = parsePopperPosition(attributes.popper?.['data-popper-placement']);\n\n  useDidUpdate(() => {\n    typeof forceUpdate === 'function' && forceUpdate();\n  }, forceUpdateDependencies);\n\n  return (\n    <Transition\n      mounted={mounted}\n      duration={transitionDuration}\n      transition={transition}\n      timingFunction={transitionTimingFunction}\n      onExited={onTransitionEnd}\n    >\n      {(transitionStyles) => (\n        <div>\n          <PopperContainer withinPortal={withinPortal} zIndex={zIndex}>\n            <div\n              ref={setPopperElement}\n              style={{ ...styles.popper, pointerEvents: 'none' }}\n              {...attributes.popper}\n            >\n              <div style={transitionStyles}>\n                {children}\n                {withArrow && (\n                  <div\n                    style={arrowStyle}\n                    className={cx(\n                      classes.arrow,\n                      classes[parsedAttributes.placement],\n                      classes[parsedAttributes.position],\n                      arrowClassName\n                    )}\n                  />\n                )}\n              </div>\n            </div>\n          </PopperContainer>\n        </div>\n      )}\n    </Transition>\n  );\n}\n\nPopper.displayName = '@mantine/core/Popper';\n"],"names":[],"mappings":"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"}

package/esm/components/Popper/PopperContainer/PopperContainer.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { getDefaultZIndex } from '@mantine/styles';
+import { Portal } from '../../Portal/Portal.js';
+
+function PopperContainer({
+  children,
+  zIndex = getDefaultZIndex("popover"),
+  className,
+  withinPortal = true
+}) {
+  if (withinPortal) {
+    return /* @__PURE__ */ React.createElement(Portal, {
+      className,
+      zIndex
+    }, children);
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className,
+    style: { position: "relative", zIndex }
+  }, children);
+}
+PopperContainer.displayName = "@mantine/core/PopperContainer";
+
+export { PopperContainer };
+//# sourceMappingURL=PopperContainer.js.map

package/esm/components/Popper/PopperContainer/PopperContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopperContainer.js","sources":["../../../../src/components/Popper/PopperContainer/PopperContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { getDefaultZIndex } from '@mantine/styles';\nimport { Portal } from '../../Portal';\n\nexport interface PopperContainerProps {\n  /** PopperContainer children, for example, modal or popover */\n  children: React.ReactNode;\n\n  /** Root element z-index property */\n  zIndex?: number;\n\n  /** Root element className */\n  className?: string;\n\n  /** Whether to render the target element in a Portal */\n  withinPortal?: boolean;\n}\n\nexport function PopperContainer({\n  children,\n  zIndex = getDefaultZIndex('popover'),\n  className,\n  withinPortal = true,\n}: PopperContainerProps) {\n  if (withinPortal) {\n    return (\n      <Portal className={className} zIndex={zIndex}>\n        {children}\n      </Portal>\n    );\n  }\n\n  return (\n    <div className={className} style={{ position: 'relative', zIndex }}>\n      {children}\n    </div>\n  );\n}\n\nPopperContainer.displayName = '@mantine/core/PopperContainer';\n"],"names":[],"mappings":";;;;AAGO,SAAS,eAAe,CAAC;AAChC,EAAE,QAAQ;AACV,EAAE,MAAM,GAAG,gBAAgB,CAAC,SAAS,CAAC;AACtC,EAAE,SAAS;AACX,EAAE,YAAY,GAAG,IAAI;AACrB,CAAC,EAAE;AACH,EAAE,IAAI,YAAY,EAAE;AACpB,IAAI,uBAAuB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACvD,MAAM,SAAS;AACf,MAAM,MAAM;AACZ,KAAK,EAAE,QAAQ,CAAC,CAAC;AACjB,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS;AACb,IAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE;AAC3C,GAAG,EAAE,QAAQ,CAAC,CAAC;AACf,CAAC;AACD,eAAe,CAAC,WAAW,GAAG,+BAA+B;;;;"}

package/esm/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,98 @@
+import React, { forwardRef, useState } from 'react';
+import * as RadixScrollArea from '@radix-ui/react-scroll-area';
+import { useExtractedMargins } from '@mantine/styles';
+import useStyles from './ScrollArea.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 ScrollArea = forwardRef((_a, ref) => {
+  var _b = _a, {
+    children,
+    style,
+    className,
+    classNames,
+    styles,
+    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] = useState(false);
+  const { mergedStyles, rest } = useExtractedMargins({ style, others });
+  const { classes, cx } = useStyles({ scrollbarSize, offsetScrollbars, dir, scrollbarHovered }, { name: "ScrollArea", classNames, styles, sx });
+  return /* @__PURE__ */ React.createElement(RadixScrollArea.Root, __spreadValues({
+    type,
+    scrollHideDelay,
+    dir,
+    className: cx(classes.root, className),
+    style: mergedStyles,
+    ref
+  }, rest), /* @__PURE__ */ React.createElement(RadixScrollArea.Viewport, {
+    className: classes.viewport,
+    ref: viewportRef
+  }, children), /* @__PURE__ */ React.createElement(RadixScrollArea.Scrollbar, {
+    orientation: "horizontal",
+    className: classes.scrollbar,
+    forceMount: true,
+    onMouseEnter: () => setScrollbarHovered(true),
+    onMouseLeave: () => setScrollbarHovered(false)
+  }, /* @__PURE__ */ React.createElement(RadixScrollArea.Thumb, {
+    className: classes.thumb
+  })), /* @__PURE__ */ React.createElement(RadixScrollArea.Scrollbar, {
+    orientation: "vertical",
+    className: classes.scrollbar,
+    forceMount: true,
+    onMouseEnter: () => setScrollbarHovered(true),
+    onMouseLeave: () => setScrollbarHovered(false)
+  }, /* @__PURE__ */ React.createElement(RadixScrollArea.Thumb, {
+    className: classes.thumb
+  })), /* @__PURE__ */ React.createElement(RadixScrollArea.Corner, {
+    className: classes.corner
+  }));
+});
+ScrollArea.displayName = "@mantine/core/ScrollArea";
+
+export { ScrollArea };
+//# sourceMappingURL=ScrollArea.js.map

package/esm/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":[],"mappings":"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"}

package/esm/components/ScrollArea/ScrollArea.styles.js

@@ -0,0 +1,67 @@
+import { createStyles } from '@mantine/styles';
+
+var useStyles = 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
+    }
+  };
+});
+
+export default useStyles;
+//# sourceMappingURL=ScrollArea.styles.js.map

package/esm/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":[],"mappings":"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"}

package/esm/components/Select/Select.js

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
-import { useUuid, useScrollIntoView, useClickOutside, useUncontrolled, useDidUpdate, useMergedRef } from '@mantine/hooks';
-import { useExtractedMargins } from '@mantine/styles';
+import { useUuid, useScrollIntoView, useUncontrolled, useDidUpdate, useMergedRef } from '@mantine/hooks';
+import { getDefaultZIndex, useExtractedMargins } from '@mantine/styles';
+import { SelectScrollArea } from './SelectScrollArea/SelectScrollArea.js';
 import { DefaultItem } from './DefaultItem/DefaultItem.js';
 import { getSelectRightSectionProps } from './SelectRightSection/get-select-right-section-props.js';
 import { SelectItems } from './SelectItems/SelectItems.js';
@@ -65,8 +66,8 @@ const Select = forwardRef((_a, ref) => {
     onChange,
     itemComponent = DefaultItem,
     onKeyDown,
-    onFocus,
     onBlur,
+    onFocus,
     transition = "fade",
     transitionDuration = 0,
     initiallyOpened = false,
@@ -92,7 +93,10 @@ const Select = forwardRef((_a, ref) => {
     sx,
     dropdownComponent,
     onDropdownClose,
-    onDropdownOpen
+    onDropdownOpen,
+    withinPortal,
+    zIndex = getDefaultZIndex("popover"),
+    name
   } = _b, others = __objRest(_b, [
     "className",
     "style",
@@ -109,8 +113,8 @@ const Select = forwardRef((_a, ref) => {
     "onChange",
     "itemComponent",
     "onKeyDown",
-    "onFocus",
     "onBlur",
+    "onFocus",
     "transition",
     "transitionDuration",
     "initiallyOpened",
@@ -136,7 +140,10 @@ const Select = forwardRef((_a, ref) => {
     "sx",
     "dropdownComponent",
     "onDropdownClose",
-    "onDropdownOpen"
+    "onDropdownOpen",
+    "withinPortal",
+    "zIndex",
+    "name"
   ]);
   const { classes, cx, theme } = useStyles();
   const { mergedStyles, rest } = useExtractedMargins({ others, style });
@@ -147,6 +154,7 @@ const Select = forwardRef((_a, ref) => {
   const itemsRefs = useRef({});
   const [creatableDataValue, setCreatableDataValue] = useState(void 0);
   const [direction, setDirection] = useState("column");
+  const isColumn = direction === "column";
   const uuid = useUuid(id);
   const { scrollIntoView, targetRef, scrollableRef } = useScrollIntoView({
     duration: 0,
@@ -162,7 +170,6 @@ const Select = 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);
-  useClickOutside(() => setDropdownOpened(false), ["mousedown", "touchstart"], [inputRef.current, dropdownRef.current]);
   const sortedData = groupSortData({ data: formattedData });
   const [_value, handleChange, inputMode] = useUncontrolled({
     value,
@@ -232,46 +239,53 @@ const Select = forwardRef((_a, ref) => {
   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": {
@@ -282,31 +296,42 @@ const Select = 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) => {
     if (clearable && event.currentTarget.value === "") {
       handleChange(null);
@@ -319,6 +344,18 @@ const Select = forwardRef((_a, ref) => {
     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.createElement(InputWrapper, __spreadValues({
     required,
     id: uuid,
@@ -337,7 +374,7 @@ const Select = 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.createElement(Input, __spreadValues(__spreadProps(__spreadValues({}, rest), {
@@ -352,14 +389,14 @@ const Select = 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)
@@ -376,7 +413,7 @@ const Select = forwardRef((_a, ref) => {
     error
   }))), /* @__PURE__ */ React.createElement(SelectDropdown, {
     referenceElement: inputRef.current,
-    mounted: dropdownOpened,
+    mounted: shouldShowDropdown,
     transition,
     transitionDuration,
     transitionTimingFunction,
@@ -387,9 +424,11 @@ const Select = forwardRef((_a, ref) => {
     styles,
     ref: useMergedRef(dropdownRef, scrollableRef),
     __staticSelector: "Select",
-    dropdownComponent,
+    dropdownComponent: dropdownComponent || SelectScrollArea,
     direction,
-    onDirectionChange: setDirection
+    onDirectionChange: setDirection,
+    withinPortal,
+    zIndex
   }, /* @__PURE__ */ React.createElement(SelectItems, {
     data: filteredData,
     hovered,
@@ -406,7 +445,11 @@ const Select = forwardRef((_a, ref) => {
     nothingFound,
     creatable: isCreatable && !!createLabel,
     createLabel
-  }))));
+  }))), name && /* @__PURE__ */ React.createElement("input", {
+    type: "hidden",
+    name,
+    value: _value
+  }));
 });
 Select.displayName = "@mantine/core/Select";