npm - @mantine/core - Versions diffs - 9.4.3-alpha.0 → 9.5.0 - Mend

@mantine/core 9.4.3-alpha.0 → 9.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/esm/components/ScrollArea/ScrollArea.mjs CHANGED Viewed

@@ -35,7 +35,7 @@ const varsResolver = createVarsResolver((_, { scrollbarSize, overscrollBehavior,
 });
 const ScrollArea = factory((_props) => {
 	const props = useProps("ScrollArea", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, scrollbarSize, vars, type, scrollHideDelay, viewportProps, viewportRef, onScrollPositionChange, children, offsetScrollbars, scrollbars, onBottomReached, onTopReached, onLeftReached, onRightReached, overscrollBehavior, startScrollPosition, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, scrollbarSize, vars, type, scrollHideDelay, viewportProps, viewportRef, onScrollPositionChange, children, offsetScrollbars, scrollbars, onBottomReached, onTopReached, onLeftReached, onRightReached, overscrollBehavior, startScrollPosition, verticalScrollbarPosition, attributes, ...others } = props;
 	const [scrollbarHovered, setScrollbarHovered] = useState(false);
 	const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);
 	const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);
@@ -92,6 +92,7 @@ const ScrollArea = factory((_props) => {
 				ref: combinedViewportRef,
 				"data-offset-scrollbars": offsetScrollbars === true ? "xy" : offsetScrollbars || void 0,
 				"data-scrollbars": scrollbars || void 0,
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-horizontal-hidden": offsetScrollbars === "present" && !horizontalThumbVisible ? "true" : void 0,
 				"data-vertical-hidden": offsetScrollbars === "present" && !verticalThumbVisible ? "true" : void 0,
 				onScroll: (e) => {
@@ -119,6 +120,7 @@ const ScrollArea = factory((_props) => {
 			(scrollbars === "xy" || scrollbars === "x") && /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "horizontal",
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-hidden": type === "never" || offsetScrollbars === "present" && !horizontalThumbVisible ? true : void 0,
 				forceMount: true,
 				onMouseEnter: () => setScrollbarHovered(true),
@@ -128,6 +130,7 @@ const ScrollArea = factory((_props) => {
 			(scrollbars === "xy" || scrollbars === "y") && /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
 				...getStyles("scrollbar"),
 				orientation: "vertical",
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-hidden": type === "never" || offsetScrollbars === "present" && !verticalThumbVisible ? true : void 0,
 				forceMount: true,
 				onMouseEnter: () => setScrollbarHovered(true),
@@ -136,6 +139,7 @@ const ScrollArea = factory((_props) => {
 			}),
 			/* @__PURE__ */ jsx(ScrollAreaCorner, {
 				...getStyles("corner"),
+				"data-vertical-scrollbar-position": verticalScrollbarPosition || void 0,
 				"data-hovered": scrollbarHovered || void 0,
 				"data-hidden": type === "never" || void 0
 			})
@@ -144,7 +148,7 @@ const ScrollArea = factory((_props) => {
 });
 ScrollArea.displayName = "@mantine/core/ScrollArea";
 const ScrollAreaAutosize = factory((props) => {
-	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, onOverflowChange, ...others } = useProps("ScrollAreaAutosize", defaultProps, props);
+	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, verticalScrollbarPosition, onOverflowChange, ...others } = useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = useRef(null);
 	const [viewportObserverElement, setViewportObserverElement] = useState(null);
 	const combinedViewportRef = useMergeRefs([
@@ -213,6 +217,7 @@ const ScrollAreaAutosize = factory((props) => {
 				onBottomReached,
 				onTopReached,
 				startScrollPosition,
+				verticalScrollbarPosition,
 				"data-autosize": "true",
 				children
 			})

package/esm/components/ScrollArea/ScrollArea.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollArea.mjs","names":["classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n \| 'root'\n \| 'viewport'\n \| 'scrollbar'\n \| 'thumb'\n \| 'corner'\n \| 'content';\n\nexport type ScrollAreaCssVariables = {\n root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) /\n scrollbarSize?: number \| string;\n\n /\n Defines scrollbars behavior\n * - `'hover'` – scrollbars visible on hover (default)\n * - `'scroll'` – scrollbars visible during scrolling\n * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n * - `'always'` – scrollbars always visible, even when content doesn't overflow\n * - `'never'` – scrollbars always hidden\n * @default 'hover'\n * /\n type?: 'auto' \| 'always' \| 'scroll' \| 'hover' \| 'never';\n\n /* Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 /\n scrollHideDelay?: number;\n\n /\n Axis at which scrollbars must be rendered\n * - `'x'` - horizontal scrollbar only\n * - `'y'` - vertical scrollbar only\n * - `'xy'` - both scrollbars\n * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n * @default 'xy'\n /\n scrollbars?: 'x' \| 'y' \| 'xy' \| false;\n\n /\n Determines whether scrollbars should be offset with padding on given axis\n * - `true` - adds padding to offset both scrollbars (always)\n * - `'x'` - adds padding to offset horizontal scrollbar (always)\n * - `'y'` - adds padding to offset vertical scrollbar (always)\n * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n * @default false\n /\n offsetScrollbars?: boolean \| 'x' \| 'y' \| 'present';\n\n /* Assigns viewport element (scrollable container) ref /\n viewportRef?: React.Ref<HTMLDivElement>;\n\n /* Props passed down to the viewport element /\n viewportProps?: React.ComponentProps<'div'>;\n\n /* Called with current position (`x` and `y` coordinates) when viewport is scrolled /\n onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n /\n Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n /\n onBottomReached?: () => void;\n\n /* Called when scrollarea is scrolled all the way to the top /\n onTopReached?: () => void;\n\n /* Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) /\n onLeftReached?: () => void;\n\n /* Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) /\n onRightReached?: () => void;\n\n /* Defines `overscroll-behavior` of the viewport /\n overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n /* Initial scroll position set on mount /\n startScrollPosition?: { x?: number; y?: number };\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n /* Called when content overflows due to max-height, making the container scrollable */\n onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n props: ScrollAreaProps;\n ref: HTMLDivElement;\n stylesNames: ScrollAreaStylesNames;\n vars: ScrollAreaCssVariables;\n staticComponents: {\n Autosize: typeof ScrollAreaAutosize;\n };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n props: ScrollAreaAutosizeProps;\n ref: HTMLDivElement;\n stylesNames: ScrollAreaStylesNames;\n vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n scrollHideDelay: 1000,\n type: 'hover',\n scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n let overrideOverscrollBehavior = overscrollBehavior;\n\n if (overscrollBehavior && scrollbars) {\n if (scrollbars === 'x') {\n overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n } else if (scrollbars === 'y') {\n overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n }\n }\n\n return {\n root: {\n '--scrollarea-scrollbar-size': rem(scrollbarSize),\n '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n },\n };\n }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n const props = useProps('ScrollArea', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n scrollbarSize,\n vars,\n type,\n scrollHideDelay,\n viewportProps,\n viewportRef,\n onScrollPositionChange,\n children,\n offsetScrollbars,\n scrollbars,\n onBottomReached,\n onTopReached,\n onLeftReached,\n onRightReached,\n overscrollBehavior,\n startScrollPosition,\n attributes,\n ...others\n } = props;\n\n const [scrollbarHovered, setScrollbarHovered] = useState(false);\n const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n // Refs to track previous boundary states\n const prevAtTopRef = useRef(true);\n const prevAtBottomRef = useRef(false);\n const prevAtLeftRef = useRef(true);\n const prevAtRightRef = useRef(false);\n\n const getStyles = useStyles<ScrollAreaFactory>({\n name: 'ScrollArea',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const localViewportRef = useRef<HTMLDivElement>(null);\n const [viewportElement, setViewportElement] = useState<HTMLDivElement \| null>(null);\n const viewportCallbackRef = useCallback((node: HTMLDivElement \| null) => {\n setViewportElement((current) => (current === node ? current : node));\n }, []);\n const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n const element = localViewportRef.current;\n if (element) {\n setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n }\n });\n\n useIsomorphicEffect(() => {\n if (startScrollPosition && localViewportRef.current) {\n localViewportRef.current.scrollTo({\n left: startScrollPosition.x ?? 0,\n top: startScrollPosition.y ?? 0,\n });\n }\n }, []);\n\n return (\n <ScrollAreaRoot\n getStyles={getStyles}\n type={type === 'never' ? 'always' : type}\n scrollHideDelay={scrollHideDelay}\n scrollbars={scrollbars}\n {...getStyles('root')}\n {...others}\n >\n <ScrollAreaViewport\n {...viewportProps}\n {...getStyles('viewport', { style: viewportProps?.style })}\n ref={combinedViewportRef}\n data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars \|\| undefined}\n data-scrollbars={scrollbars \|\| undefined}\n data-horizontal-hidden={\n offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n }\n data-vertical-hidden={\n offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n }\n onScroll={(e) => {\n viewportProps?.onScroll?.(e);\n onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n e.currentTarget;\n\n // Vertical boundaries\n // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n const isAtTop = scrollTop === 0;\n\n if (isAtBottom && !prevAtBottomRef.current) {\n onBottomReached?.();\n }\n if (isAtTop && !prevAtTopRef.current) {\n onTopReached?.();\n }\n\n prevAtBottomRef.current = isAtBottom;\n prevAtTopRef.current = isAtTop;\n\n // Horizontal boundaries\n const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n const isAtLeft = scrollLeft === 0;\n\n if (isAtRight && !prevAtRightRef.current) {\n onRightReached?.();\n }\n if (isAtLeft && !prevAtLeftRef.current) {\n onLeftReached?.();\n }\n\n prevAtRightRef.current = isAtRight;\n prevAtLeftRef.current = isAtLeft;\n }}\n >\n {children}\n </ScrollAreaViewport>\n\n {(scrollbars === 'xy' \|\| scrollbars === 'x') && (\n <ScrollAreaScrollbar\n {...getStyles('scrollbar')}\n orientation=\"horizontal\"\n data-hidden={\n type === 'never' \|\| (offsetScrollbars === 'present' && !horizontalThumbVisible)\n ? true\n : undefined\n }\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <ScrollAreaThumb {...getStyles('thumb')} />\n </ScrollAreaScrollbar>\n )}\n\n {(scrollbars === 'xy' \|\| scrollbars === 'y') && (\n <ScrollAreaScrollbar\n {...getStyles('scrollbar')}\n orientation=\"vertical\"\n data-hidden={\n type === 'never' \|\| (offsetScrollbars === 'present' && !verticalThumbVisible)\n ? true\n : undefined\n }\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <ScrollAreaThumb {...getStyles('thumb')} />\n </ScrollAreaScrollbar>\n )}\n\n <ScrollAreaCorner\n {...getStyles('corner')}\n data-hovered={scrollbarHovered \|\| undefined}\n data-hidden={type === 'never' \|\| undefined}\n />\n </ScrollAreaRoot>\n );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n const {\n children,\n classNames,\n styles,\n scrollbarSize,\n scrollHideDelay,\n type,\n dir,\n offsetScrollbars,\n overscrollBehavior,\n viewportRef,\n onScrollPositionChange,\n unstyled,\n variant,\n viewportProps,\n scrollbars,\n style,\n vars,\n onBottomReached,\n onTopReached,\n startScrollPosition,\n onOverflowChange,\n ...others\n } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n // Overflow detection (Autosize-only)\n const viewportObserverRef = useRef<HTMLDivElement>(null);\n const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement \| null>(\n null\n );\n const viewportObserverCallbackRef = useCallback((node: HTMLDivElement \| null) => {\n setViewportObserverElement((current) => (current === node ? current : node));\n }, []);\n const combinedViewportRef = useMergeRefs([\n viewportRef,\n viewportObserverRef,\n viewportObserverCallbackRef,\n ]);\n\n const overflowingRef = useRef(false);\n const didMountRef = useRef(false);\n\n const handleOverflowCheck = useEffectEvent(() => {\n const el = viewportObserverRef.current;\n if (!el \|\| !onOverflowChange) {\n return;\n }\n\n const isOverflowing = el.scrollHeight > el.clientHeight;\n\n if (isOverflowing !== overflowingRef.current) {\n if (didMountRef.current) {\n onOverflowChange(isOverflowing);\n } else {\n didMountRef.current = true;\n if (isOverflowing) {\n onOverflowChange(true);\n }\n }\n\n overflowingRef.current = isOverflowing;\n }\n });\n\n useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n return (\n <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n <Box\n style={{\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n overflow: 'hidden',\n ...(scrollbars === 'y' && { minWidth: 0 }),\n ...(scrollbars === 'x' && { minHeight: 0 }),\n ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n }}\n >\n <ScrollArea\n classNames={classNames}\n styles={styles}\n scrollHideDelay={scrollHideDelay}\n scrollbarSize={scrollbarSize}\n type={type}\n dir={dir}\n offsetScrollbars={offsetScrollbars}\n overscrollBehavior={overscrollBehavior}\n viewportRef={combinedViewportRef}\n onScrollPositionChange={onScrollPositionChange}\n unstyled={unstyled}\n variant={variant}\n viewportProps={viewportProps}\n vars={vars}\n scrollbars={scrollbars}\n onBottomReached={onBottomReached}\n onTopReached={onTopReached}\n startScrollPosition={startScrollPosition}\n data-autosize=\"true\"\n >\n {children}\n </ScrollArea>\n </Box>\n </Box>\n );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n export type Props = ScrollAreaProps;\n export type AutosizeProps = ScrollAreaAutosizeProps;\n export type StylesNames = ScrollAreaStylesNames;\n export type CssVariables = ScrollAreaCssVariables;\n export type Factory = ScrollAreaFactory;\n\n export namespace Autosize {\n export type Props = ScrollAreaAutosizeProps;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"ScrollArea.mjs","names":["classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n \| 'root'\n \| 'viewport'\n \| 'scrollbar'\n \| 'thumb'\n \| 'corner'\n \| 'content';\n\nexport type ScrollAreaCssVariables = {\n root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) /\n scrollbarSize?: number \| string;\n\n /\n Defines scrollbars behavior\n * - `'hover'` – scrollbars visible on hover (default)\n * - `'scroll'` – scrollbars visible during scrolling\n * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n * - `'always'` – scrollbars always visible, even when content doesn't overflow\n * - `'never'` – scrollbars always hidden\n * @default 'hover'\n * /\n type?: 'auto' \| 'always' \| 'scroll' \| 'hover' \| 'never';\n\n /* Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 /\n scrollHideDelay?: number;\n\n /\n Axis at which scrollbars must be rendered\n * - `'x'` - horizontal scrollbar only\n * - `'y'` - vertical scrollbar only\n * - `'xy'` - both scrollbars\n * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n * @default 'xy'\n /\n scrollbars?: 'x' \| 'y' \| 'xy' \| false;\n\n /\n Determines whether scrollbars should be offset with padding on given axis\n * - `true` - adds padding to offset both scrollbars (always)\n * - `'x'` - adds padding to offset horizontal scrollbar (always)\n * - `'y'` - adds padding to offset vertical scrollbar (always)\n * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n * @default false\n /\n offsetScrollbars?: boolean \| 'x' \| 'y' \| 'present';\n\n /* Assigns viewport element (scrollable container) ref /\n viewportRef?: React.Ref<HTMLDivElement>;\n\n /* Props passed down to the viewport element /\n viewportProps?: React.ComponentProps<'div'>;\n\n /* Called with current position (`x` and `y` coordinates) when viewport is scrolled /\n onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n /\n Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n /\n onBottomReached?: () => void;\n\n /* Called when scrollarea is scrolled all the way to the top /\n onTopReached?: () => void;\n\n /* Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) /\n onLeftReached?: () => void;\n\n /* Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) /\n onRightReached?: () => void;\n\n /* Defines `overscroll-behavior` of the viewport /\n overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n /* Initial scroll position set on mount /\n startScrollPosition?: { x?: number; y?: number };\n\n /\n Pins the vertical scrollbar to a physical side (`left` or `right`) regardless of direction.\n * By default, the scrollbar follows the inline-end edge (right in LTR, left in RTL).\n /\n verticalScrollbarPosition?: 'left' \| 'right';\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n /* Called when content overflows due to max-height, making the container scrollable */\n onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n props: ScrollAreaProps;\n ref: HTMLDivElement;\n stylesNames: ScrollAreaStylesNames;\n vars: ScrollAreaCssVariables;\n staticComponents: {\n Autosize: typeof ScrollAreaAutosize;\n };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n props: ScrollAreaAutosizeProps;\n ref: HTMLDivElement;\n stylesNames: ScrollAreaStylesNames;\n vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n scrollHideDelay: 1000,\n type: 'hover',\n scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n let overrideOverscrollBehavior = overscrollBehavior;\n\n if (overscrollBehavior && scrollbars) {\n if (scrollbars === 'x') {\n overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n } else if (scrollbars === 'y') {\n overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n }\n }\n\n return {\n root: {\n '--scrollarea-scrollbar-size': rem(scrollbarSize),\n '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n },\n };\n }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n const props = useProps('ScrollArea', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n scrollbarSize,\n vars,\n type,\n scrollHideDelay,\n viewportProps,\n viewportRef,\n onScrollPositionChange,\n children,\n offsetScrollbars,\n scrollbars,\n onBottomReached,\n onTopReached,\n onLeftReached,\n onRightReached,\n overscrollBehavior,\n startScrollPosition,\n verticalScrollbarPosition,\n attributes,\n ...others\n } = props;\n\n const [scrollbarHovered, setScrollbarHovered] = useState(false);\n const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n // Refs to track previous boundary states\n const prevAtTopRef = useRef(true);\n const prevAtBottomRef = useRef(false);\n const prevAtLeftRef = useRef(true);\n const prevAtRightRef = useRef(false);\n\n const getStyles = useStyles<ScrollAreaFactory>({\n name: 'ScrollArea',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const localViewportRef = useRef<HTMLDivElement>(null);\n const [viewportElement, setViewportElement] = useState<HTMLDivElement \| null>(null);\n const viewportCallbackRef = useCallback((node: HTMLDivElement \| null) => {\n setViewportElement((current) => (current === node ? current : node));\n }, []);\n const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n const element = localViewportRef.current;\n if (element) {\n setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n }\n });\n\n useIsomorphicEffect(() => {\n if (startScrollPosition && localViewportRef.current) {\n localViewportRef.current.scrollTo({\n left: startScrollPosition.x ?? 0,\n top: startScrollPosition.y ?? 0,\n });\n }\n }, []);\n\n return (\n <ScrollAreaRoot\n getStyles={getStyles}\n type={type === 'never' ? 'always' : type}\n scrollHideDelay={scrollHideDelay}\n scrollbars={scrollbars}\n {...getStyles('root')}\n {...others}\n >\n <ScrollAreaViewport\n {...viewportProps}\n {...getStyles('viewport', { style: viewportProps?.style })}\n ref={combinedViewportRef}\n data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars \|\| undefined}\n data-scrollbars={scrollbars \|\| undefined}\n data-vertical-scrollbar-position={verticalScrollbarPosition \|\| undefined}\n data-horizontal-hidden={\n offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n }\n data-vertical-hidden={\n offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n }\n onScroll={(e) => {\n viewportProps?.onScroll?.(e);\n onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n e.currentTarget;\n\n // Vertical boundaries\n // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n const isAtTop = scrollTop === 0;\n\n if (isAtBottom && !prevAtBottomRef.current) {\n onBottomReached?.();\n }\n if (isAtTop && !prevAtTopRef.current) {\n onTopReached?.();\n }\n\n prevAtBottomRef.current = isAtBottom;\n prevAtTopRef.current = isAtTop;\n\n // Horizontal boundaries\n const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n const isAtLeft = scrollLeft === 0;\n\n if (isAtRight && !prevAtRightRef.current) {\n onRightReached?.();\n }\n if (isAtLeft && !prevAtLeftRef.current) {\n onLeftReached?.();\n }\n\n prevAtRightRef.current = isAtRight;\n prevAtLeftRef.current = isAtLeft;\n }}\n >\n {children}\n </ScrollAreaViewport>\n\n {(scrollbars === 'xy' \|\| scrollbars === 'x') && (\n <ScrollAreaScrollbar\n {...getStyles('scrollbar')}\n orientation=\"horizontal\"\n data-vertical-scrollbar-position={verticalScrollbarPosition \|\| undefined}\n data-hidden={\n type === 'never' \|\| (offsetScrollbars === 'present' && !horizontalThumbVisible)\n ? true\n : undefined\n }\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <ScrollAreaThumb {...getStyles('thumb')} />\n </ScrollAreaScrollbar>\n )}\n\n {(scrollbars === 'xy' \|\| scrollbars === 'y') && (\n <ScrollAreaScrollbar\n {...getStyles('scrollbar')}\n orientation=\"vertical\"\n data-vertical-scrollbar-position={verticalScrollbarPosition \|\| undefined}\n data-hidden={\n type === 'never' \|\| (offsetScrollbars === 'present' && !verticalThumbVisible)\n ? true\n : undefined\n }\n forceMount\n onMouseEnter={() => setScrollbarHovered(true)}\n onMouseLeave={() => setScrollbarHovered(false)}\n >\n <ScrollAreaThumb {...getStyles('thumb')} />\n </ScrollAreaScrollbar>\n )}\n\n <ScrollAreaCorner\n {...getStyles('corner')}\n data-vertical-scrollbar-position={verticalScrollbarPosition \|\| undefined}\n data-hovered={scrollbarHovered \|\| undefined}\n data-hidden={type === 'never' \|\| undefined}\n />\n </ScrollAreaRoot>\n );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n const {\n children,\n classNames,\n styles,\n scrollbarSize,\n scrollHideDelay,\n type,\n dir,\n offsetScrollbars,\n overscrollBehavior,\n viewportRef,\n onScrollPositionChange,\n unstyled,\n variant,\n viewportProps,\n scrollbars,\n style,\n vars,\n onBottomReached,\n onTopReached,\n startScrollPosition,\n verticalScrollbarPosition,\n onOverflowChange,\n ...others\n } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n // Overflow detection (Autosize-only)\n const viewportObserverRef = useRef<HTMLDivElement>(null);\n const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement \| null>(\n null\n );\n const viewportObserverCallbackRef = useCallback((node: HTMLDivElement \| null) => {\n setViewportObserverElement((current) => (current === node ? current : node));\n }, []);\n const combinedViewportRef = useMergeRefs([\n viewportRef,\n viewportObserverRef,\n viewportObserverCallbackRef,\n ]);\n\n const overflowingRef = useRef(false);\n const didMountRef = useRef(false);\n\n const handleOverflowCheck = useEffectEvent(() => {\n const el = viewportObserverRef.current;\n if (!el \|\| !onOverflowChange) {\n return;\n }\n\n const isOverflowing = el.scrollHeight > el.clientHeight;\n\n if (isOverflowing !== overflowingRef.current) {\n if (didMountRef.current) {\n onOverflowChange(isOverflowing);\n } else {\n didMountRef.current = true;\n if (isOverflowing) {\n onOverflowChange(true);\n }\n }\n\n overflowingRef.current = isOverflowing;\n }\n });\n\n useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n return (\n <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n <Box\n style={{\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n overflow: 'hidden',\n ...(scrollbars === 'y' && { minWidth: 0 }),\n ...(scrollbars === 'x' && { minHeight: 0 }),\n ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n }}\n >\n <ScrollArea\n classNames={classNames}\n styles={styles}\n scrollHideDelay={scrollHideDelay}\n scrollbarSize={scrollbarSize}\n type={type}\n dir={dir}\n offsetScrollbars={offsetScrollbars}\n overscrollBehavior={overscrollBehavior}\n viewportRef={combinedViewportRef}\n onScrollPositionChange={onScrollPositionChange}\n unstyled={unstyled}\n variant={variant}\n viewportProps={viewportProps}\n vars={vars}\n scrollbars={scrollbars}\n onBottomReached={onBottomReached}\n onTopReached={onTopReached}\n startScrollPosition={startScrollPosition}\n verticalScrollbarPosition={verticalScrollbarPosition}\n data-autosize=\"true\"\n >\n {children}\n </ScrollArea>\n </Box>\n </Box>\n );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n export type Props = ScrollAreaProps;\n export type AutosizeProps = ScrollAreaAutosizeProps;\n export type StylesNames = ScrollAreaStylesNames;\n export type CssVariables = ScrollAreaCssVariables;\n export type Factory = ScrollAreaFactory;\n\n export namespace Autosize {\n export type Props = ScrollAreaAutosizeProps;\n }\n}\n"],"mappings":"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"}

package/esm/components/ScrollArea/ScrollArea.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollArea.module.mjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n --scrollarea-scrollbar-size: 12px;\n\n position: relative;\n overflow: hidden;\n\n &:where([data-autosize]) .content {\n min-width: min-content;\n }\n}\n\n.viewport {\n scrollbar-width: none;\n overscroll-behavior: var(--scrollarea-over-scroll-behavior);\n -ms-overflow-style: none;\n -webkit-overflow-scrolling: touch;\n width: 100%;\n height: 100%;\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n &:where([data-scrollbars='xy'], [data-scrollbars='y']) {\n &:where(\n [data-offset-scrollbars='xy'],\n [data-offset-scrollbars='y'],\n [data-offset-scrollbars='present']\n ) {\n &:where([data-vertical-hidden]) {\n padding-inline-end: 0;\n padding-inline-start: 0;\n }\n\n &:not([data-vertical-hidden]) {\n padding-inline-end: var(--scrollarea-scrollbar-size);\n padding-inline-start: unset;\n }\n }\n }\n\n &:where([data-scrollbars='xy'], [data-scrollbars='x']) {\n &:where(\n [data-offset-scrollbars='xy'],\n [data-offset-scrollbars='x'],\n [data-offset-scrollbars='present']\n ) {\n &:where([data-horizontal-hidden]) {\n padding-bottom: 0;\n }\n\n &:not([data-horizontal-hidden]) {\n padding-bottom: var(--scrollarea-scrollbar-size);\n }\n }\n }\n}\n\n.viewportInner {\n min-width: 100%;\n display: table;\n}\n\n.scrollbar {\n user-select: none;\n touch-action: none;\n box-sizing: border-box;\n transition:\n background-color 150ms ease,\n opacity 150ms ease;\n\n padding: calc(var(--scrollarea-scrollbar-size) / 5);\n display: flex;\n background-color: transparent;\n flex-direction: row;\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n\n & > .thumb {\n background-color: rgba(0, 0, 0, 0.5);\n }\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n\n & > .thumb {\n background-color: rgba(255, 255, 255, 0.5);\n }\n }\n }\n\n &:where([data-hidden], [data-state='hidden']) {\n display: none;\n }\n\n &:where([data-orientation='vertical']) {\n width: var(--scrollarea-scrollbar-size);\n top: 0;\n bottom: var(--sa-corner-width);\n inset-inline-end: 0;\n }\n\n &:where([data-orientation='horizontal']) {\n height: var(--scrollarea-scrollbar-size);\n flex-direction: column;\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: var(--sa-corner-width);\n }\n}\n\n.thumb {\n flex: 1;\n border-radius: var(--scrollarea-scrollbar-size);\n position: relative;\n transition: background-color 150ms ease;\n overflow: hidden;\n opacity: var(--thumb-opacity);\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 min-width: 44px;\n min-height: 44px;\n }\n\n @mixin where-light {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n @mixin where-dark {\n background-color: rgba(255, 255, 255, 0.4);\n }\n}\n\n.corner {\n position: absolute;\n opacity: 0;\n transition: opacity 150ms ease;\n display: block;\n inset-inline-end: 0;\n bottom: 0;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n\n &:where([data-hovered]) {\n opacity: 1;\n }\n\n &:where([data-hidden]) {\n display: none;\n }\n}\n\n.content {\n min-width: 100%;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ScrollArea.module.mjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n --scrollarea-scrollbar-size: 12px;\n\n position: relative;\n overflow: hidden;\n\n &:where([data-autosize]) .content {\n min-width: min-content;\n }\n}\n\n.viewport {\n scrollbar-width: none;\n overscroll-behavior: var(--scrollarea-over-scroll-behavior);\n -ms-overflow-style: none;\n -webkit-overflow-scrolling: touch;\n width: 100%;\n height: 100%;\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n &:where([data-scrollbars='xy'], [data-scrollbars='y']) {\n &:where(\n [data-offset-scrollbars='xy'],\n [data-offset-scrollbars='y'],\n [data-offset-scrollbars='present']\n ) {\n &:where([data-vertical-hidden]) {\n padding-inline-end: 0;\n padding-inline-start: 0;\n }\n\n &:not([data-vertical-hidden]) {\n padding-inline-end: var(--scrollarea-scrollbar-size);\n padding-inline-start: unset;\n\n &:where([data-vertical-scrollbar-position='left']) {\n padding-inline-end: unset;\n padding-left: var(--scrollarea-scrollbar-size);\n padding-right: unset;\n }\n\n &:where([data-vertical-scrollbar-position='right']) {\n padding-inline-end: unset;\n padding-left: unset;\n padding-right: var(--scrollarea-scrollbar-size);\n }\n }\n }\n }\n\n &:where([data-scrollbars='xy'], [data-scrollbars='x']) {\n &:where(\n [data-offset-scrollbars='xy'],\n [data-offset-scrollbars='x'],\n [data-offset-scrollbars='present']\n ) {\n &:where([data-horizontal-hidden]) {\n padding-bottom: 0;\n }\n\n &:not([data-horizontal-hidden]) {\n padding-bottom: var(--scrollarea-scrollbar-size);\n }\n }\n }\n}\n\n.viewportInner {\n min-width: 100%;\n display: table;\n}\n\n.scrollbar {\n user-select: none;\n touch-action: none;\n box-sizing: border-box;\n transition:\n background-color 150ms ease,\n opacity 150ms ease;\n\n padding: calc(var(--scrollarea-scrollbar-size) / 5);\n display: flex;\n background-color: transparent;\n flex-direction: row;\n\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n\n & > .thumb {\n background-color: rgba(0, 0, 0, 0.5);\n }\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n\n & > .thumb {\n background-color: rgba(255, 255, 255, 0.5);\n }\n }\n }\n\n &:where([data-hidden], [data-state='hidden']) {\n display: none;\n }\n\n &:where([data-orientation='vertical']) {\n width: var(--scrollarea-scrollbar-size);\n top: 0;\n bottom: var(--sa-corner-width);\n inset-inline-end: 0;\n\n &:where([data-vertical-scrollbar-position='left']) {\n inset-inline-end: auto;\n left: 0;\n right: auto;\n }\n\n &:where([data-vertical-scrollbar-position='right']) {\n inset-inline-end: auto;\n left: auto;\n right: 0;\n }\n }\n\n &:where([data-orientation='horizontal']) {\n height: var(--scrollarea-scrollbar-size);\n flex-direction: column;\n bottom: 0;\n inset-inline-start: 0;\n inset-inline-end: var(--sa-corner-width);\n\n &:where([data-vertical-scrollbar-position='left']) {\n inset-inline-start: auto;\n inset-inline-end: auto;\n left: var(--sa-corner-width);\n right: 0;\n }\n\n &:where([data-vertical-scrollbar-position='right']) {\n inset-inline-start: auto;\n inset-inline-end: auto;\n left: 0;\n right: var(--sa-corner-width);\n }\n }\n}\n\n.thumb {\n flex: 1;\n border-radius: var(--scrollarea-scrollbar-size);\n position: relative;\n transition: background-color 150ms ease;\n overflow: hidden;\n opacity: var(--thumb-opacity);\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 min-width: 44px;\n min-height: 44px;\n }\n\n @mixin where-light {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n @mixin where-dark {\n background-color: rgba(255, 255, 255, 0.4);\n }\n}\n\n.corner {\n position: absolute;\n opacity: 0;\n transition: opacity 150ms ease;\n display: block;\n inset-inline-end: 0;\n bottom: 0;\n\n &:where([data-vertical-scrollbar-position='left']) {\n inset-inline-end: auto;\n left: 0;\n right: auto;\n }\n\n &:where([data-vertical-scrollbar-position='right']) {\n inset-inline-end: auto;\n left: auto;\n right: 0;\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n\n &:where([data-hovered]) {\n opacity: 1;\n }\n\n &:where([data-hidden]) {\n display: none;\n }\n}\n\n.content {\n min-width: 100%;\n}\n"],"mappings":""}

package/esm/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.mjs CHANGED Viewed

@@ -35,6 +35,6 @@ function ScrollAreaCorner(props) {
 	return ctx.type !== "scroll" && hasBothScrollbarsVisible ? /* @__PURE__ */ jsx(Corner, { ...props }) : null;
 }
 //#endregion
-export { ScrollAreaCorner };
+export { Corner, ScrollAreaCorner };
 //# sourceMappingURL=ScrollAreaCorner.mjs.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.mjs CHANGED Viewed

@@ -20,10 +20,14 @@ function Scrollbar(props) {
 	const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
 	const handleResize = useDebouncedCallback(onResize, 10);
 	const handleDragScroll = (event) => {
-		if (rectRef.current) onDragScroll({
-			x: event.clientX - rectRef.current.left,
-			y: event.clientY - rectRef.current.top
-		});
+		if (rectRef.current) {
+			const x = event.clientX - rectRef.current.left;
+			const y = event.clientY - rectRef.current.top;
+			onDragScroll({
+				x,
+				y
+			});
+		}
 	};
 	useEffect(() => {
 		const handleWheel = (event) => {

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Scrollbar.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n sizes: Sizes;\n hasThumb: boolean;\n onThumbChange: ScrollbarContextValue['onThumbChange'];\n onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n onDragScroll: (pointerPos: { x: number; y: number }) => void;\n onResize: () => void;\n}\n\ninterface ScrollbarProps\n extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n const {\n sizes,\n hasThumb,\n onThumbChange,\n onThumbPointerUp,\n onThumbPointerDown,\n onThumbPositionChange,\n onDragScroll,\n onWheelScroll,\n onResize,\n ref,\n ...scrollbarProps\n } = props;\n const context = useScrollAreaContext();\n const [scrollbar, setScrollbar] = useState<HTMLDivElement \| null>(null);\n const composeRefs = useMergedRef(ref, setScrollbar);\n const rectRef = useRef<DOMRect \| null>(null);\n const prevWebkitUserSelectRef = useRef<string>('');\n const { viewport } = context;\n const maxScrollPos = sizes.content - sizes.viewport;\n const handleWheelScroll = useEffectEvent(onWheelScroll);\n const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n const handleResize = useDebouncedCallback(onResize, 10);\n\n const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n if (rectRef.current) {\n const x = event.clientX - rectRef.current.left;\n const y = event.clientY - rectRef.current.top;\n onDragScroll({ x, y });\n }\n };\n\n useEffect(() => {\n const handleWheel = (event: WheelEvent) => {\n const element = event.target as HTMLElement;\n const isScrollbarWheel = scrollbar?.contains(element);\n if (isScrollbarWheel) {\n handleWheelScroll(event, maxScrollPos);\n }\n };\n document.addEventListener('wheel', handleWheel, { passive: false });\n return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n }, [viewport, scrollbar, maxScrollPos]);\n\n useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n useResizeObserver(scrollbar, handleResize);\n useResizeObserver(context.content, handleResize);\n\n return (\n <ScrollbarProvider\n value={{\n scrollbar,\n hasThumb,\n onThumbChange: useCallbackRef(onThumbChange),\n onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n onThumbPositionChange: handleThumbPositionChange,\n onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n }}\n >\n <div\n {...scrollbarProps}\n ref={composeRefs}\n data-mantine-scrollbar\n style={{ position: 'absolute', ...scrollbarProps.style }}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n event.preventDefault();\n\n const mainPointer = 0;\n if (event.button === mainPointer) {\n const element = event.target as HTMLElement;\n element.setPointerCapture(event.pointerId);\n rectRef.current = scrollbar!.getBoundingClientRect();\n /* oxlint-disable typescript/no-deprecated /\n prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n document.body.style.webkitUserSelect = 'none';\n handleDragScroll(event);\n }\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const element = event.target as HTMLElement;\n if (element.hasPointerCapture(event.pointerId)) {\n event.preventDefault();\n element.releasePointerCapture(event.pointerId);\n }\n })}\n onLostPointerCapture={() => {\n document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n / oxlint-enable typescript/no-deprecated */\n rectRef.current = null;\n }}\n />\n </ScrollbarProvider>\n );\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAU,qBAAqB;CACrC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,cAAc,aAAa,KAAK,YAAY;CAClD,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,0BAA0B,OAAe,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,oBAAoB,eAAe,aAAa;CACtD,MAAM,4BAA4B,eAAe,qBAAqB;CACtE,MAAM,eAAe,qBAAqB,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,~~SAGV,aAAa~~;~~GAAE~~,~~GAFL~~,MAAM,UAAU,QAAQ,QAAQ;~~GAExB~~,~~GADR~~,MAAM,UAAU,QAAQ,QAAQ;~~EACtB~~,CAAC;~~CAEzB~~;CAEA,gBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,UAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,kBAAkB,WAAW,YAAY;CACzC,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,eAAe,eAAe,aAAa;GAC3C,kBAAkB,eAAe,gBAAgB;GACjD,uBAAuB;GACvB,oBAAoB,eAAe,kBAAkB;EACvD;YAEA,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAe,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAe,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAa,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}
1	+ {"version":3,"file":"Scrollbar.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n sizes: Sizes;\n hasThumb: boolean;\n onThumbChange: ScrollbarContextValue['onThumbChange'];\n onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n onDragScroll: (pointerPos: { x: number; y: number }) => void;\n onResize: () => void;\n}\n\ninterface ScrollbarProps\n extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n const {\n sizes,\n hasThumb,\n onThumbChange,\n onThumbPointerUp,\n onThumbPointerDown,\n onThumbPositionChange,\n onDragScroll,\n onWheelScroll,\n onResize,\n ref,\n ...scrollbarProps\n } = props;\n const context = useScrollAreaContext();\n const [scrollbar, setScrollbar] = useState<HTMLDivElement \| null>(null);\n const composeRefs = useMergedRef(ref, setScrollbar);\n const rectRef = useRef<DOMRect \| null>(null);\n const prevWebkitUserSelectRef = useRef<string>('');\n const { viewport } = context;\n const maxScrollPos = sizes.content - sizes.viewport;\n const handleWheelScroll = useEffectEvent(onWheelScroll);\n const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n const handleResize = useDebouncedCallback(onResize, 10);\n\n const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n if (rectRef.current) {\n const x = event.clientX - rectRef.current.left;\n const y = event.clientY - rectRef.current.top;\n onDragScroll({ x, y });\n }\n };\n\n useEffect(() => {\n const handleWheel = (event: WheelEvent) => {\n const element = event.target as HTMLElement;\n const isScrollbarWheel = scrollbar?.contains(element);\n if (isScrollbarWheel) {\n handleWheelScroll(event, maxScrollPos);\n }\n };\n document.addEventListener('wheel', handleWheel, { passive: false });\n return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n }, [viewport, scrollbar, maxScrollPos]);\n\n useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n useResizeObserver(scrollbar, handleResize);\n useResizeObserver(context.content, handleResize);\n\n return (\n <ScrollbarProvider\n value={{\n scrollbar,\n hasThumb,\n onThumbChange: useCallbackRef(onThumbChange),\n onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n onThumbPositionChange: handleThumbPositionChange,\n onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n }}\n >\n <div\n {...scrollbarProps}\n ref={composeRefs}\n data-mantine-scrollbar\n style={{ position: 'absolute', ...scrollbarProps.style }}\n onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n event.preventDefault();\n\n const mainPointer = 0;\n if (event.button === mainPointer) {\n const element = event.target as HTMLElement;\n element.setPointerCapture(event.pointerId);\n rectRef.current = scrollbar!.getBoundingClientRect();\n /* oxlint-disable typescript/no-deprecated /\n prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n document.body.style.webkitUserSelect = 'none';\n handleDragScroll(event);\n }\n })}\n onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n const element = event.target as HTMLElement;\n if (element.hasPointerCapture(event.pointerId)) {\n event.preventDefault();\n element.releasePointerCapture(event.pointerId);\n }\n })}\n onLostPointerCapture={() => {\n document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n / oxlint-enable typescript/no-deprecated */\n rectRef.current = null;\n }}\n />\n </ScrollbarProvider>\n );\n}\n"],"mappings":";;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAU,qBAAqB;CACrC,MAAM,CAAC,WAAW,gBAAgB,SAAgC,IAAI;CACtE,MAAM,cAAc,aAAa,KAAK,YAAY;CAClD,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,0BAA0B,OAAe,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,oBAAoB,eAAe,aAAa;CACtD,MAAM,4BAA4B,eAAe,qBAAqB;CACtE,MAAM,eAAe,qBAAqB,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,SAAS;GACnB,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,MAAM,IAAI,MAAM,UAAU,QAAQ,QAAQ;GAC1C,aAAa;IAAE;IAAG;GAAE,CAAC;EACvB;CACF;CAEA,gBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,UAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,kBAAkB,WAAW,YAAY;CACzC,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA;GACA,eAAe,eAAe,aAAa;GAC3C,kBAAkB,eAAe,gBAAgB;GACjD,uBAAuB;GACvB,oBAAoB,eAAe,kBAAkB;EACvD;YAEA,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAe,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAe,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAa,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}

package/esm/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.mjs CHANGED Viewed

@@ -26,7 +26,8 @@ function Thumb(props) {
 			const handleScroll = () => {
 				debounceScrollEnd();
 				if (!removeUnlinkedScrollListenerRef.current) {
-					removeUnlinkedScrollListenerRef.current = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+					const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+					removeUnlinkedScrollListenerRef.current = listener;
 					onThumbPositionChange();
 				}
 			};
@@ -69,6 +70,6 @@ function ScrollAreaThumb(props) {
 }
 ScrollAreaThumb.displayName = "@mantine/core/ScrollAreaThumb";
 //#endregion
-export { ScrollAreaThumb };
+export { ScrollAreaThumb, Thumb };
 //# sourceMappingURL=ScrollAreaThumb.mjs.map

package/esm/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScrollAreaThumb.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context';\nimport { addUnlinkedScrollListener, composeEventHandlers } from '../utils';\n\ninterface ThumbProps extends React.ComponentProps<'div'> {}\n\nexport function Thumb(props: ThumbProps) {\n const { style, ref: forwardedRef, ...others } = props;\n const scrollAreaContext = useScrollAreaContext();\n const scrollbarContext = useScrollbarContext();\n const { onThumbPositionChange } = scrollbarContext;\n const composedRef = useMergedRef(forwardedRef, scrollbarContext.onThumbChange);\n const removeUnlinkedScrollListenerRef = useRef<(() => void) \| undefined>(undefined);\n const debounceScrollEnd = useDebouncedCallback(() => {\n if (removeUnlinkedScrollListenerRef.current) {\n removeUnlinkedScrollListenerRef.current();\n removeUnlinkedScrollListenerRef.current = undefined;\n }\n }, 100);\n\n useEffect(() => {\n const { viewport } = scrollAreaContext;\n if (viewport) {\n const handleScroll = () => {\n debounceScrollEnd();\n if (!removeUnlinkedScrollListenerRef.current) {\n const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);\n removeUnlinkedScrollListenerRef.current = listener;\n onThumbPositionChange();\n }\n };\n onThumbPositionChange();\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n\n return undefined;\n }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);\n\n return (\n <div\n data-state={scrollbarContext.hasThumb ? 'visible' : 'hidden'}\n {...others}\n ref={composedRef}\n style={{\n width: 'var(--sa-thumb-width)',\n height: 'var(--sa-thumb-height)',\n ...style,\n }}\n onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, (event) => {\n const thumb = event.target as HTMLElement;\n const thumbRect = thumb.getBoundingClientRect();\n const x = event.clientX - thumbRect.left;\n const y = event.clientY - thumbRect.top;\n scrollbarContext.onThumbPointerDown({ x, y });\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)}\n />\n );\n}\n\nThumb.displayName = '@mantine/core/ScrollAreaThumb';\n\ninterface ScrollAreaThumbProps extends ThumbProps {\n forceMount?: true;\n}\n\nexport function ScrollAreaThumb(props: ScrollAreaThumbProps) {\n const { forceMount, ...thumbProps } = props;\n const scrollbarContext = useScrollbarContext();\n\n if (forceMount \|\| scrollbarContext.hasThumb) {\n return <Thumb {...thumbProps} />;\n }\n\n return null;\n}\n\nScrollAreaThumb.displayName = '@mantine/core/ScrollAreaThumb';\n"],"mappings":";;;;;;;;;AAQA,SAAgB,MAAM,OAAmB;CACvC,MAAM,EAAE,OAAO,KAAK,cAAc,GAAG,WAAW;CAChD,MAAM,oBAAoB,qBAAqB;CAC/C,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,EAAE,0BAA0B;CAClC,MAAM,cAAc,aAAa,cAAc,iBAAiB,aAAa;CAC7E,MAAM,kCAAkC,OAAiC,KAAA,CAAS;CAClF,MAAM,oBAAoB,2BAA2B;EACnD,IAAI,gCAAgC,SAAS;GAC3C,gCAAgC,QAAQ;GACxC,gCAAgC,UAAU,KAAA;EAC5C;CACF,GAAG,GAAG;CAEN,gBAAgB;EACd,MAAM,EAAE,aAAa;EACrB,IAAI,UAAU;GACZ,MAAM,qBAAqB;IACzB,kBAAkB;IAClB,IAAI,CAAC,gCAAgC,SAAS;~~KAE5C~~,~~gCAAgC~~,~~UADf~~,0BAA0B,UAAU,~~qBACJ~~;~~KACjD~~,sBAAsB;IACxB;GACF;GACA,sBAAsB;GACtB,SAAS,iBAAiB,UAAU,YAAY;GAChD,aAAa,SAAS,oBAAoB,UAAU,YAAY;EAClE;CAGF,GAAG;EAAC,kBAAkB;EAAU;EAAmB;CAAqB,CAAC;CAEzE,OACE,oBAAC,OAAD;EACE,cAAY,iBAAiB,WAAW,YAAY;EACpD,GAAI;EACJ,KAAK;EACL,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,sBAAsB,qBAAqB,MAAM,uBAAuB,UAAU;GAEhF,MAAM,YADQ,MAAM,OACI,sBAAsB;GAC9C,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,iBAAiB,mBAAmB;IAAE;IAAG;GAAE,CAAC;EAC9C,CAAC;EACD,aAAa,qBAAqB,MAAM,aAAa,iBAAiB,gBAAgB;CACvF,CAAA;AAEL;AAEA,MAAM,cAAc;AAMpB,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,YAAY,GAAG,eAAe;CACtC,MAAM,mBAAmB,oBAAoB;CAE7C,IAAI,cAAc,iBAAiB,UACjC,OAAO,oBAAC,OAAD,EAAO,GAAI,WAAa,CAAA;CAGjC,OAAO;AACT;AAEA,gBAAgB,cAAc"}
1	+ {"version":3,"file":"ScrollAreaThumb.mjs","names":[],"sources":["../../../../src/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context';\nimport { addUnlinkedScrollListener, composeEventHandlers } from '../utils';\n\ninterface ThumbProps extends React.ComponentProps<'div'> {}\n\nexport function Thumb(props: ThumbProps) {\n const { style, ref: forwardedRef, ...others } = props;\n const scrollAreaContext = useScrollAreaContext();\n const scrollbarContext = useScrollbarContext();\n const { onThumbPositionChange } = scrollbarContext;\n const composedRef = useMergedRef(forwardedRef, scrollbarContext.onThumbChange);\n const removeUnlinkedScrollListenerRef = useRef<(() => void) \| undefined>(undefined);\n const debounceScrollEnd = useDebouncedCallback(() => {\n if (removeUnlinkedScrollListenerRef.current) {\n removeUnlinkedScrollListenerRef.current();\n removeUnlinkedScrollListenerRef.current = undefined;\n }\n }, 100);\n\n useEffect(() => {\n const { viewport } = scrollAreaContext;\n if (viewport) {\n const handleScroll = () => {\n debounceScrollEnd();\n if (!removeUnlinkedScrollListenerRef.current) {\n const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);\n removeUnlinkedScrollListenerRef.current = listener;\n onThumbPositionChange();\n }\n };\n onThumbPositionChange();\n viewport.addEventListener('scroll', handleScroll);\n return () => viewport.removeEventListener('scroll', handleScroll);\n }\n\n return undefined;\n }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);\n\n return (\n <div\n data-state={scrollbarContext.hasThumb ? 'visible' : 'hidden'}\n {...others}\n ref={composedRef}\n style={{\n width: 'var(--sa-thumb-width)',\n height: 'var(--sa-thumb-height)',\n ...style,\n }}\n onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, (event) => {\n const thumb = event.target as HTMLElement;\n const thumbRect = thumb.getBoundingClientRect();\n const x = event.clientX - thumbRect.left;\n const y = event.clientY - thumbRect.top;\n scrollbarContext.onThumbPointerDown({ x, y });\n })}\n onPointerUp={composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)}\n />\n );\n}\n\nThumb.displayName = '@mantine/core/ScrollAreaThumb';\n\ninterface ScrollAreaThumbProps extends ThumbProps {\n forceMount?: true;\n}\n\nexport function ScrollAreaThumb(props: ScrollAreaThumbProps) {\n const { forceMount, ...thumbProps } = props;\n const scrollbarContext = useScrollbarContext();\n\n if (forceMount \|\| scrollbarContext.hasThumb) {\n return <Thumb {...thumbProps} />;\n }\n\n return null;\n}\n\nScrollAreaThumb.displayName = '@mantine/core/ScrollAreaThumb';\n"],"mappings":";;;;;;;;;AAQA,SAAgB,MAAM,OAAmB;CACvC,MAAM,EAAE,OAAO,KAAK,cAAc,GAAG,WAAW;CAChD,MAAM,oBAAoB,qBAAqB;CAC/C,MAAM,mBAAmB,oBAAoB;CAC7C,MAAM,EAAE,0BAA0B;CAClC,MAAM,cAAc,aAAa,cAAc,iBAAiB,aAAa;CAC7E,MAAM,kCAAkC,OAAiC,KAAA,CAAS;CAClF,MAAM,oBAAoB,2BAA2B;EACnD,IAAI,gCAAgC,SAAS;GAC3C,gCAAgC,QAAQ;GACxC,gCAAgC,UAAU,KAAA;EAC5C;CACF,GAAG,GAAG;CAEN,gBAAgB;EACd,MAAM,EAAE,aAAa;EACrB,IAAI,UAAU;GACZ,MAAM,qBAAqB;IACzB,kBAAkB;IAClB,IAAI,CAAC,gCAAgC,SAAS;KAC5C,MAAM,WAAW,0BAA0B,UAAU,qBAAqB;KAC1E,gCAAgC,UAAU;KAC1C,sBAAsB;IACxB;GACF;GACA,sBAAsB;GACtB,SAAS,iBAAiB,UAAU,YAAY;GAChD,aAAa,SAAS,oBAAoB,UAAU,YAAY;EAClE;CAGF,GAAG;EAAC,kBAAkB;EAAU;EAAmB;CAAqB,CAAC;CAEzE,OACE,oBAAC,OAAD;EACE,cAAY,iBAAiB,WAAW,YAAY;EACpD,GAAI;EACJ,KAAK;EACL,OAAO;GACL,OAAO;GACP,QAAQ;GACR,GAAG;EACL;EACA,sBAAsB,qBAAqB,MAAM,uBAAuB,UAAU;GAEhF,MAAM,YADQ,MAAM,OACI,sBAAsB;GAC9C,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,MAAM,IAAI,MAAM,UAAU,UAAU;GACpC,iBAAiB,mBAAmB;IAAE;IAAG;GAAE,CAAC;EAC9C,CAAC;EACD,aAAa,qBAAqB,MAAM,aAAa,iBAAiB,gBAAgB;CACvF,CAAA;AAEL;AAEA,MAAM,cAAc;AAMpB,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,YAAY,GAAG,eAAe;CACtC,MAAM,mBAAmB,oBAAoB;CAE7C,IAAI,cAAc,iBAAiB,UACjC,OAAO,oBAAC,OAAD,EAAO,GAAI,WAAa,CAAA;CAGjC,OAAO;AACT;AAEA,gBAAgB,cAAc"}

package/esm/components/SimpleGrid/SimpleGridVariables.mjs CHANGED Viewed

@@ -49,7 +49,7 @@ function sortBreakpoints(breakpoints) {
 	return breakpoints.sort((a, b) => px(a) - px(b));
 }
 function getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth }) {
-	return sortBreakpoints(Array.from(new Set([
+	return sortBreakpoints(Array.from(/* @__PURE__ */ new Set([
 		...getBreakpoints(spacing),
 		...getBreakpoints(verticalSpacing),
 		...minColWidth !== void 0 ? [] : getBreakpoints(cols)

package/esm/components/SimpleGrid/SimpleGridVariables.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleGridVariables.mjs","names":[],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n InlineStyles,\n keys,\n MantineBreakpoint,\n px,\n rem,\n useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n selector: string;\n}\n\nfunction getMinColWidthValue(value: string \| number \| undefined): string \| undefined {\n if (value === undefined) {\n return undefined;\n }\n\n if (typeof value === 'number') {\n return rem(value);\n }\n\n return value;\n}\n\nexport function SimpleGridMediaVariables({\n spacing,\n verticalSpacing,\n cols,\n minColWidth,\n autoRows,\n selector,\n}: SimpleGridVariablesProps) {\n const theme = useMantineTheme();\n const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n const useAutoColumns = minColWidth !== undefined;\n\n const baseStyles: Record<string, string \| undefined> = filterProps({\n '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n '--sg-auto-rows': autoRows,\n ...(useAutoColumns\n ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n : { '--sg-cols': getBaseValue(cols)?.toString() }),\n });\n\n const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n }\n\n if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n }\n\n if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n }\n\n return acc;\n },\n {}\n );\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n );\n\n const media = sortedBreakpoints.map((breakpoint) => ({\n query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n styles: queries[breakpoint.value],\n }));\n\n return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n if (typeof values === 'object' && values !== null) {\n return keys(values);\n }\n\n return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n spacing,\n verticalSpacing,\n cols,\n minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n const breakpoints = Array.from(\n new Set([\n ...getBreakpoints(spacing),\n ...getBreakpoints(verticalSpacing),\n ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n ])\n );\n\n return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n spacing,\n verticalSpacing,\n cols,\n minColWidth,\n autoRows,\n selector,\n}: SimpleGridVariablesProps) {\n const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n const useAutoColumns = minColWidth !== undefined;\n\n const baseStyles: Record<string, string \| undefined> = filterProps({\n '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n '--sg-auto-rows': autoRows,\n ...(useAutoColumns\n ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n : { '--sg-cols': getBaseValue(cols)?.toString() }),\n });\n\n const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n }\n\n if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n }\n\n if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n }\n\n return acc;\n },\n {}\n );\n\n const media = uniqueBreakpoints.map((breakpoint) => ({\n query: `simple-grid (min-width: ${breakpoint})`,\n styles: queries[breakpoint],\n }));\n\n return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAAS,oBAAoB,OAAwD;CACnF,IAAI,UAAU,KAAA,GACZ;CAGF,IAAI,OAAO,UAAU,UACnB,OAAO,IAAI,KAAK;CAGlB,OAAO;AACT;AAEA,SAAgB,yBAAyB,EACvC,SACA,iBACA,MACA,aACA,UACA,YAC2B;CAC3B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,mBAAmB,oBAAoB,KAAA,IAAY,UAAU;CACnE,MAAM,iBAAiB,gBAAgB,KAAA;CAEvC,MAAM,aAAiD,YAAY;EACjE,kBAAkB,WAAW,aAAa,OAAO,CAAC;EAClD,kBAAkB,WAAW,aAAa,gBAAgB,CAAC;EAC3D,kBAAkB;EAClB,GAAI,iBACA,EAAE,sBAAsB,oBAAoB,WAAW,EAAE,IACzD,EAAE,aAAa,aAAa,IAAI,CAAC,EAAE,SAAS,EAAE;CACpD,CAAC;CAED,MAAM,UAAU,KAAK,MAAM,WAAW,CAAC,CAAC,QACrC,KAAK,eAAe;EACnB,IAAI,CAAC,IAAI,aACP,IAAI,cAAc,CAAC;EAGrB,IAAI,OAAO,YAAY,YAAY,QAAQ,gBAAgB,KAAA,GACzD,IAAI,WAAW,CAAC,oBAAoB,WAAW,QAAQ,WAAW;EAGpE,IAAI,OAAO,qBAAqB,YAAY,iBAAiB,gBAAgB,KAAA,GAC3E,IAAI,WAAW,CAAC,oBAAoB,WAAW,iBAAiB,WAAW;EAG7E,IAAI,CAAC,kBAAkB,OAAO,SAAS,YAAY,KAAK,gBAAgB,KAAA,GACtE,IAAI,WAAW,CAAC,eAAe,KAAK;EAGtC,OAAO;CACT,GACA,CAAC,CACH;CAWA,OAAO,oBAAC,cAAD;EAAc,QAAQ;EAAY,OATf,qBAAqB,KAAK,OAAO,GAAG,MAAM,WAAW,CAAC,CAAC,QAC9E,eAAe,KAAK,QAAQ,WAAW,MAAM,CAAC,CAAC,SAAS,CAG7B,CAAC,CAAC,KAAK,gBAAgB;GACnD,OAAO,eAAe,MAAM,YAAY,WAAW,OAA4B;GAC/E,QAAQ,QAAQ,WAAW;EAC7B,EAEoD;EAAa;CAAW,CAAA;AAC9E;AAEA,SAAS,eAAe,QAAiB;CACvC,IAAI,OAAO,WAAW,YAAY,WAAW,MAC3C,OAAO,KAAK,MAAM;CAGpB,OAAO,CAAC;AACV;AAEA,SAAS,gBAAgB,aAAuB;CAC9C,OAAO,YAAY,MAAM,GAAG,MAAO,GAAG,CAAC,IAAgB,GAAG,CAAC,CAAY;AACzE;AAEA,SAAS,qBAAqB,EAC5B,SACA,iBACA,MACA,eAC6C;CAS7C,OAAO,gBARa,MAAM,~~KACxB~~,IAAI,IAAI;EACN,GAAG,eAAe,OAAO;EACzB,GAAG,eAAe,eAAe;EACjC,GAAI,gBAAgB,KAAA,IAAY,CAAC,IAAI,eAAe,IAAI;CAC1D,CAAC,CAG8B,CAAC;AACpC;AAEA,SAAgB,6BAA6B,EAC3C,SACA,iBACA,MACA,aACA,UACA,YAC2B;CAC3B,MAAM,mBAAmB,oBAAoB,KAAA,IAAY,UAAU;CACnE,MAAM,iBAAiB,gBAAgB,KAAA;CAEvC,MAAM,aAAiD,YAAY;EACjE,kBAAkB,WAAW,aAAa,OAAO,CAAC;EAClD,kBAAkB,WAAW,aAAa,gBAAgB,CAAC;EAC3D,kBAAkB;EAClB,GAAI,iBACA,EAAE,sBAAsB,oBAAoB,WAAW,EAAE,IACzD,EAAE,aAAa,aAAa,IAAI,CAAC,EAAE,SAAS,EAAE;CACpD,CAAC;CAED,MAAM,oBAAoB,qBAAqB;EAAE;EAAS;EAAiB;EAAM;CAAY,CAAC;CAE9F,MAAM,UAAU,kBAAkB,QAC/B,KAAK,eAAe;EACnB,IAAI,CAAC,IAAI,aACP,IAAI,cAAc,CAAC;EAGrB,IAAI,OAAO,YAAY,YAAY,QAAQ,gBAAgB,KAAA,GACzD,IAAI,WAAW,CAAC,oBAAoB,WAAW,QAAQ,WAAW;EAGpE,IAAI,OAAO,qBAAqB,YAAY,iBAAiB,gBAAgB,KAAA,GAC3E,IAAI,WAAW,CAAC,oBAAoB,WAAW,iBAAiB,WAAW;EAG7E,IAAI,CAAC,kBAAkB,OAAO,SAAS,YAAY,KAAK,gBAAgB,KAAA,GACtE,IAAI,WAAW,CAAC,eAAe,KAAK;EAGtC,OAAO;CACT,GACA,CAAC,CACH;CAOA,OAAO,oBAAC,cAAD;EAAc,QAAQ;EAAY,WAL3B,kBAAkB,KAAK,gBAAgB;GACnD,OAAO,2BAA2B,WAAW;GAC7C,QAAQ,QAAQ;EAClB,EAEwD;EAAa;CAAW,CAAA;AAClF"}
1	+ {"version":3,"file":"SimpleGridVariables.mjs","names":[],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n filterProps,\n getBaseValue,\n getSortedBreakpoints,\n getSpacing,\n InlineStyles,\n keys,\n MantineBreakpoint,\n px,\n rem,\n useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n selector: string;\n}\n\nfunction getMinColWidthValue(value: string \| number \| undefined): string \| undefined {\n if (value === undefined) {\n return undefined;\n }\n\n if (typeof value === 'number') {\n return rem(value);\n }\n\n return value;\n}\n\nexport function SimpleGridMediaVariables({\n spacing,\n verticalSpacing,\n cols,\n minColWidth,\n autoRows,\n selector,\n}: SimpleGridVariablesProps) {\n const theme = useMantineTheme();\n const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n const useAutoColumns = minColWidth !== undefined;\n\n const baseStyles: Record<string, string \| undefined> = filterProps({\n '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n '--sg-auto-rows': autoRows,\n ...(useAutoColumns\n ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n : { '--sg-cols': getBaseValue(cols)?.toString() }),\n });\n\n const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n }\n\n if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n }\n\n if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n }\n\n return acc;\n },\n {}\n );\n\n const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n (breakpoint) => keys(queries[breakpoint.value]).length > 0\n );\n\n const media = sortedBreakpoints.map((breakpoint) => ({\n query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n styles: queries[breakpoint.value],\n }));\n\n return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n if (typeof values === 'object' && values !== null) {\n return keys(values);\n }\n\n return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n spacing,\n verticalSpacing,\n cols,\n minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n const breakpoints = Array.from(\n new Set([\n ...getBreakpoints(spacing),\n ...getBreakpoints(verticalSpacing),\n ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n ])\n );\n\n return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n spacing,\n verticalSpacing,\n cols,\n minColWidth,\n autoRows,\n selector,\n}: SimpleGridVariablesProps) {\n const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n const useAutoColumns = minColWidth !== undefined;\n\n const baseStyles: Record<string, string \| undefined> = filterProps({\n '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n '--sg-auto-rows': autoRows,\n ...(useAutoColumns\n ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n : { '--sg-cols': getBaseValue(cols)?.toString() }),\n });\n\n const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n (acc, breakpoint) => {\n if (!acc[breakpoint]) {\n acc[breakpoint] = {};\n }\n\n if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n }\n\n if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n }\n\n if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n }\n\n return acc;\n },\n {}\n );\n\n const media = uniqueBreakpoints.map((breakpoint) => ({\n query: `simple-grid (min-width: ${breakpoint})`,\n styles: queries[breakpoint],\n }));\n\n return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":"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"}

package/esm/components/Slider/RangeSlider/RangeSlider.mjs CHANGED Viewed

@@ -139,13 +139,16 @@ const RangeSlider = factory((_props) => {
 		if (triggerChangeEnd) onChangeEnd?.(valueRef.current);
 	};
 	const handleChange = (val) => {
-		if (!disabled && thumbIndex.current !== void 0) setRangedValue(getChangeValue({
-			value: val,
-			min: domainMin,
-			max: domainMax,
-			step,
-			precision
-		}), thumbIndex.current, false);
+		if (!disabled && thumbIndex.current !== void 0) {
+			const nextValue = getChangeValue({
+				value: val,
+				min: domainMin,
+				max: domainMax,
+				step,
+				precision
+			});
+			setRangedValue(nextValue, thumbIndex.current, false);
+		}
 	};
 	const { ref: useMoveRef, active } = useMove(({ x, y }) => handleChange(orientation === "vertical" ? 1 - y : x), { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) }, dir);
 	function handleThumbMouseDown(index) {
@@ -186,28 +189,32 @@ const RangeSlider = factory((_props) => {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(getFloatingValue(restrictToMarks && marks ? getNextMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? getNextMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);
+				setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			case "ArrowRight": {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(getFloatingValue(restrictToMarks && marks ? (dir === "rtl" ? getPreviousMarkValue : getNextMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] - step : valueRef.current[focusedIndex] + step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? (dir === "rtl" ? getPreviousMarkValue : getNextMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] - step : valueRef.current[focusedIndex] + step, domainMin), domainMax);
+				setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			case "ArrowDown": {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(getFloatingValue(restrictToMarks && marks ? getPreviousMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? getPreviousMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);
+				setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			case "ArrowLeft": {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(getFloatingValue(restrictToMarks && marks ? (dir === "rtl" ? getNextMarkValue : getPreviousMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] + step : valueRef.current[focusedIndex] - step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? (dir === "rtl" ? getNextMarkValue : getPreviousMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] + step : valueRef.current[focusedIndex] - step, domainMin), domainMax);
+				setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			default: break;

package/esm/components/Slider/RangeSlider/RangeSlider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeSlider.mjs","names":["classes"],"sources":["../../../../src/components/Slider/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n findClosestNumber,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getClientPosition } from '../utils/get-client-position/get-client-position';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n getFirstMarkValue,\n getLastMarkValue,\n getNextMarkValue,\n getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport type RangeSliderValue = [number, number];\n\nexport interface RangeSliderProps\n extends\n BoxProps,\n StylesApiProps<RangeSliderFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor /\n color?: MantineColor;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' /\n radius?: MantineRadius;\n\n /* Controls size of the track @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Minimal possible value @default 0 /\n min?: number;\n\n /* Maximum possible value @default 100 /\n max?: number;\n\n /* Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] /\n domain?: [number, number];\n\n /* Number by which value will be incremented/decremented with thumb drag and arrows @default 1 /\n step?: number;\n\n /* Number of significant digits after the decimal point /\n precision?: number;\n\n /* Controlled component value /\n value?: RangeSliderValue;\n\n /* Uncontrolled component default value /\n defaultValue?: RangeSliderValue;\n\n /* Called when value changes /\n onChange?: (value: RangeSliderValue) => void;\n\n /* Called when user stops dragging slider or changes value with arrows /\n onChangeEnd?: (value: RangeSliderValue) => void;\n\n /* Hidden input name, use with uncontrolled component /\n name?: string;\n\n /* Marks displayed on the track /\n marks?: SliderMark[];\n\n /* Function to generate label or any react node to render instead, set to null to disable label /\n label?: React.ReactNode \| ((value: number) => React.ReactNode);\n\n /* Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } /\n labelTransitionProps?: TransitionOverride;\n\n /* Determines whether the label should be visible when the slider is not being dragged or hovered @default false /\n labelAlwaysOn?: boolean;\n\n /* Determines whether the label should be displayed when the slider is hovered @default true /\n showLabelOnHover?: boolean;\n\n /* Content rendered inside thumb /\n thumbChildren?: React.ReactNode;\n\n /* Disables slider /\n disabled?: boolean;\n\n /* Thumb `width` and `height`, by default value is computed based on `size` prop /\n thumbSize?: number \| string;\n\n /* A transformation function to change the scale of the slider /\n scale?: (value: number) => number;\n\n /* Determines whether track values representation should be inverted @default false /\n inverted?: boolean;\n\n /* Slider orientation @default 'horizontal' /\n orientation?: 'horizontal' \| 'vertical';\n\n /* Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). @default 10 /\n minRange?: number;\n\n /* Maximum range interval @default Infinity /\n maxRange?: number;\n\n /* `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) /\n thumbLabel?: string;\n\n /* `aria-valuetext` for both thumbs. When a function is provided, it receives the scaled value. /\n thumbValueText?: string \| ((value: number) => string);\n\n /* First thumb `aria-label` /\n thumbFromLabel?: string;\n\n /* Second thumb `aria-label` /\n thumbToLabel?: string;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /* Determines whether the selection should be only allowed from the given marks array @default false /\n restrictToMarks?: boolean;\n\n /* Props passed down to thumb element based on the thumb index /\n thumbProps?: (index: 0 \| 1) => React.ComponentProps<'div'>;\n\n /* Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached @default true /\n pushOnOverlap?: boolean;\n}\n\nexport type RangeSliderFactory = Factory<{\n props: RangeSliderProps;\n ref: HTMLDivElement;\n stylesNames: SliderStylesNames;\n vars: SliderCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<RangeSliderFactory>(\n (theme, { size, color, thumbSize, radius }) => ({\n root: {\n '--slider-size': getSize(size, 'slider-size'),\n '--slider-color': color ? getThemeColor(color, theme) : undefined,\n '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n '--slider-thumb-size':\n thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) 2)',\n },\n })\n);\n\nconst defaultProps = {\n min: 0,\n max: 100,\n minRange: 10,\n step: 1,\n marks: [],\n label: (f) => f,\n labelTransitionProps: { transition: 'fade', duration: 0 },\n labelAlwaysOn: false,\n showLabelOnHover: true,\n disabled: false,\n pushOnOverlap: true,\n scale: (v) => v,\n size: 'md',\n maxRange: Infinity,\n} satisfies Partial<RangeSliderProps>;\n\nexport const RangeSlider = factory<RangeSliderFactory>((_props) => {\n const props = useProps('RangeSlider', defaultProps, _props);\n const {\n classNames,\n styles,\n value,\n onChange,\n onChangeEnd,\n size,\n min,\n max,\n domain,\n minRange,\n maxRange,\n step,\n precision: _precision,\n defaultValue,\n name,\n marks,\n label,\n labelTransitionProps,\n labelAlwaysOn,\n thumbFromLabel,\n thumbToLabel,\n thumbValueText,\n showLabelOnHover,\n thumbChildren,\n disabled,\n unstyled,\n scale,\n inverted,\n orientation,\n className,\n style,\n vars,\n hiddenInputProps,\n restrictToMarks,\n thumbProps,\n pushOnOverlap,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RangeSliderFactory>({\n name: 'RangeSlider',\n props,\n classes,\n classNames,\n className,\n styles,\n style,\n attributes,\n vars,\n varsResolver,\n unstyled,\n });\n\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const { dir } = useDirection();\n const [focused, setFocused] = useState(-1);\n const [hovered, setHovered] = useState(false);\n const [_value, setValue] = useUncontrolled<RangeSliderValue>({\n value,\n defaultValue,\n finalValue: [min, max],\n onChange,\n });\n const valueRef = useRef(_value);\n const thumbs = useRef<HTMLDivElement[]>([]);\n const root = useRef<HTMLDivElement>(null);\n const thumbIndex = useRef<number \| undefined>(undefined);\n const [domainMin, domainMax] = domain \|\| [min!, max!];\n const positions = [\n getPosition({ value: _value[0], min: domainMin, max: domainMax }),\n getPosition({ value: _value[1], min: domainMin, max: domainMax }),\n ];\n\n const precision = _precision ?? getPrecision(step);\n\n const _setValue = (val: RangeSliderValue) => {\n setValue(val);\n valueRef.current = val;\n };\n\n useEffect(\n () => {\n if (Array.isArray(value)) {\n valueRef.current = value;\n }\n },\n Array.isArray(value) ? [value[0], value[1]] : [null, null]\n );\n\n const setRangedValue = (val: number, index: number, triggerChangeEnd: boolean) => {\n if (index === -1) {\n return;\n }\n\n const clone: RangeSliderValue = [...valueRef.current];\n\n if (restrictToMarks && marks) {\n const closest = findClosestNumber(\n val,\n marks.map((m) => m.value)\n );\n\n const current = clone[index];\n clone[index] = closest;\n const otherIndex = index === 0 ? 1 : 0;\n\n const lastMarkValue = getLastMarkValue(marks);\n const firstMarkValue = getFirstMarkValue(marks);\n\n if (closest === lastMarkValue && clone[otherIndex] === lastMarkValue) {\n clone[index] = current;\n } else if (closest === firstMarkValue && clone[otherIndex] === firstMarkValue) {\n clone[index] = current;\n } else if (closest === clone[otherIndex]) {\n if (current > clone[otherIndex]) {\n clone[otherIndex] = getPreviousMarkValue(closest, marks);\n } else {\n clone[otherIndex] = getNextMarkValue(closest, marks);\n }\n }\n } else {\n const clampedVal = clamp(val, min!, max!);\n clone[index] = clampedVal;\n\n if (index === 0) {\n if (clampedVal > clone[1] - (minRange - 0.000000001)) {\n if (pushOnOverlap) {\n clone[1] = Math.min(val + minRange, max);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal > (max - (minRange - 0.000000001) \|\| min)) {\n clone[index] = valueRef.current[index];\n }\n\n if (clone[1] - val > maxRange) {\n if (pushOnOverlap) {\n clone[1] = val + maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n\n if (index === 1) {\n if (clampedVal < clone[0] + minRange) {\n if (pushOnOverlap) {\n clone[0] = Math.max(val - minRange, min);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal < clone[0] + minRange) {\n clone[index] = valueRef.current[index];\n }\n\n if (clampedVal - clone[0] > maxRange) {\n if (pushOnOverlap) {\n clone[0] = val - maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n }\n\n clone[0] = getFloatingValue(clone[0], precision);\n clone[1] = getFloatingValue(clone[1], precision);\n\n if (clone[0] > clone[1]) {\n const temp = clone[0];\n clone[0] = clone[1];\n clone[1] = temp;\n }\n\n _setValue(clone);\n\n if (triggerChangeEnd) {\n onChangeEnd?.(valueRef.current);\n }\n };\n\n const handleChange = (val: number) => {\n if (!disabled && thumbIndex.current !== undefined) {\n const nextValue = getChangeValue({\n value: val,\n min: domainMin,\n max: domainMax,\n step,\n precision,\n });\n setRangedValue(nextValue, thumbIndex.current, false);\n }\n };\n\n const { ref: useMoveRef, active } = useMove(\n ({ x, y }) => handleChange(orientation === 'vertical' ? 1 - y : x),\n { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) },\n dir\n );\n\n function handleThumbMouseDown(index: number) {\n thumbIndex.current = index;\n }\n\n const handleTrackMouseDownCapture = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>\n ) => {\n if (containerRef.current) {\n containerRef.current.focus();\n const rect = containerRef.current.getBoundingClientRect();\n const changePosition = getClientPosition(event.nativeEvent, orientation);\n\n const changeValue =\n orientation === 'vertical'\n ? getChangeValue({\n value: rect.bottom - changePosition,\n max,\n min,\n step,\n containerWidth: rect.height,\n })\n : getChangeValue({\n value: changePosition - rect.left,\n max,\n min,\n step,\n containerWidth: rect.width,\n });\n\n const nearestHandle =\n Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;\n const _nearestHandle =\n orientation === 'vertical'\n ? nearestHandle\n : dir === 'ltr'\n ? nearestHandle\n : nearestHandle === 1\n ? 0\n : 1;\n\n thumbIndex.current = _nearestHandle;\n }\n };\n\n const getFocusedThumbIndex = () => {\n if (focused !== 1 && focused !== 0) {\n setFocused(0);\n return 0;\n }\n\n return focused;\n };\n\n const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getNextMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowRight': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getPreviousMarkValue : getNextMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] - step\n : valueRef.current[focusedIndex] + step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getPreviousMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowLeft': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getNextMarkValue : getPreviousMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] + step\n : valueRef.current[focusedIndex] - step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n default: {\n break;\n }\n }\n }\n };\n\n const sharedThumbProps = {\n max,\n min,\n size,\n labelTransitionProps,\n labelAlwaysOn,\n orientation,\n onBlur: () => setFocused(-1),\n };\n\n const hasArrayThumbChildren = Array.isArray(thumbChildren);\n\n return (\n <SliderProvider value={{ getStyles }}>\n <SliderRoot\n {...others}\n size={size}\n ref={useMergedRef(ref, root)}\n disabled={disabled}\n orientation={orientation}\n onMouseDownCapture={() => root.current?.focus()}\n onKeyDownCapture={() => {\n if (thumbs.current[0]?.parentElement?.contains(document.activeElement)) {\n return;\n }\n thumbs.current[0]?.focus();\n }}\n >\n <Track\n offset={positions[0]}\n marksOffset={_value[0]}\n filled={positions[1] - positions[0]}\n marks={marks}\n inverted={inverted}\n min={domainMin}\n max={domainMax}\n value={_value[1]}\n disabled={disabled}\n containerProps={{\n ref: useMergedRef(containerRef, useMoveRef) as any,\n onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n onTouchStartCapture: handleTrackMouseDownCapture,\n onTouchEndCapture: () => {\n thumbIndex.current = -1;\n },\n onMouseDownCapture: handleTrackMouseDownCapture,\n onMouseUpCapture: () => {\n thumbIndex.current = -1;\n },\n onKeyDownCapture: handleTrackKeydownCapture,\n }}\n >\n <Thumb\n {...sharedThumbProps}\n value={scale(_value[0])}\n position={positions[0]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[0]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[0] = node;\n }\n }}\n thumbLabel={thumbFromLabel}\n thumbValueText={thumbValueText}\n onMouseDown={() => handleThumbMouseDown(0)}\n onFocus={() => setFocused(0)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(0)}\n >\n {hasArrayThumbChildren ? thumbChildren[0] : thumbChildren}\n </Thumb>\n\n <Thumb\n {...sharedThumbProps}\n thumbLabel={thumbToLabel}\n value={scale(_value[1])}\n position={positions[1]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[1]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[1] = node;\n }\n }}\n thumbValueText={thumbValueText}\n onMouseDown={() => handleThumbMouseDown(1)}\n onFocus={() => setFocused(1)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(1)}\n >\n {hasArrayThumbChildren ? thumbChildren[1] : thumbChildren}\n </Thumb>\n </Track>\n\n <input type=\"hidden\" name={`${name}_from`} value={_value[0]} {...hiddenInputProps} />\n <input type=\"hidden\" name={`${name}_to`} value={_value[1]} {...hiddenInputProps} />\n </SliderRoot>\n </SliderProvider>\n );\n});\n\nRangeSlider.classes = classes;\nRangeSlider.varsResolver = varsResolver;\nRangeSlider.displayName = '@mantine/core/RangeSlider';\n\nexport namespace RangeSlider {\n export type Props = RangeSliderProps;\n export type Value = RangeSliderValue;\n export type Factory = RangeSliderFactory;\n export type StylesNames = SliderStylesNames;\n export type CssVariables = SliderCssVariables;\n export type Mark = SliderMark;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"RangeSlider.mjs","names":["classes"],"sources":["../../../../src/components/Slider/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n findClosestNumber,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getClientPosition } from '../utils/get-client-position/get-client-position';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n getFirstMarkValue,\n getLastMarkValue,\n getNextMarkValue,\n getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport type RangeSliderValue = [number, number];\n\nexport interface RangeSliderProps\n extends\n BoxProps,\n StylesApiProps<RangeSliderFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor /\n color?: MantineColor;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' /\n radius?: MantineRadius;\n\n /* Controls size of the track @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Minimal possible value @default 0 /\n min?: number;\n\n /* Maximum possible value @default 100 /\n max?: number;\n\n /* Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] /\n domain?: [number, number];\n\n /* Number by which value will be incremented/decremented with thumb drag and arrows @default 1 /\n step?: number;\n\n /* Number of significant digits after the decimal point /\n precision?: number;\n\n /* Controlled component value /\n value?: RangeSliderValue;\n\n /* Uncontrolled component default value /\n defaultValue?: RangeSliderValue;\n\n /* Called when value changes /\n onChange?: (value: RangeSliderValue) => void;\n\n /* Called when user stops dragging slider or changes value with arrows /\n onChangeEnd?: (value: RangeSliderValue) => void;\n\n /* Hidden input name, use with uncontrolled component /\n name?: string;\n\n /* Marks displayed on the track /\n marks?: SliderMark[];\n\n /* Function to generate label or any react node to render instead, set to null to disable label /\n label?: React.ReactNode \| ((value: number) => React.ReactNode);\n\n /* Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } /\n labelTransitionProps?: TransitionOverride;\n\n /* Determines whether the label should be visible when the slider is not being dragged or hovered @default false /\n labelAlwaysOn?: boolean;\n\n /* Determines whether the label should be displayed when the slider is hovered @default true /\n showLabelOnHover?: boolean;\n\n /* Content rendered inside thumb /\n thumbChildren?: React.ReactNode;\n\n /* Disables slider /\n disabled?: boolean;\n\n /* Thumb `width` and `height`, by default value is computed based on `size` prop /\n thumbSize?: number \| string;\n\n /* A transformation function to change the scale of the slider /\n scale?: (value: number) => number;\n\n /* Determines whether track values representation should be inverted @default false /\n inverted?: boolean;\n\n /* Slider orientation @default 'horizontal' /\n orientation?: 'horizontal' \| 'vertical';\n\n /* Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). @default 10 /\n minRange?: number;\n\n /* Maximum range interval @default Infinity /\n maxRange?: number;\n\n /* `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) /\n thumbLabel?: string;\n\n /* `aria-valuetext` for both thumbs. When a function is provided, it receives the scaled value. /\n thumbValueText?: string \| ((value: number) => string);\n\n /* First thumb `aria-label` /\n thumbFromLabel?: string;\n\n /* Second thumb `aria-label` /\n thumbToLabel?: string;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: React.ComponentProps<'input'>;\n\n /* Determines whether the selection should be only allowed from the given marks array @default false /\n restrictToMarks?: boolean;\n\n /* Props passed down to thumb element based on the thumb index /\n thumbProps?: (index: 0 \| 1) => React.ComponentProps<'div'>;\n\n /* Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached @default true /\n pushOnOverlap?: boolean;\n}\n\nexport type RangeSliderFactory = Factory<{\n props: RangeSliderProps;\n ref: HTMLDivElement;\n stylesNames: SliderStylesNames;\n vars: SliderCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<RangeSliderFactory>(\n (theme, { size, color, thumbSize, radius }) => ({\n root: {\n '--slider-size': getSize(size, 'slider-size'),\n '--slider-color': color ? getThemeColor(color, theme) : undefined,\n '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n '--slider-thumb-size':\n thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) 2)',\n },\n })\n);\n\nconst defaultProps = {\n min: 0,\n max: 100,\n minRange: 10,\n step: 1,\n marks: [],\n label: (f) => f,\n labelTransitionProps: { transition: 'fade', duration: 0 },\n labelAlwaysOn: false,\n showLabelOnHover: true,\n disabled: false,\n pushOnOverlap: true,\n scale: (v) => v,\n size: 'md',\n maxRange: Infinity,\n} satisfies Partial<RangeSliderProps>;\n\nexport const RangeSlider = factory<RangeSliderFactory>((_props) => {\n const props = useProps('RangeSlider', defaultProps, _props);\n const {\n classNames,\n styles,\n value,\n onChange,\n onChangeEnd,\n size,\n min,\n max,\n domain,\n minRange,\n maxRange,\n step,\n precision: _precision,\n defaultValue,\n name,\n marks,\n label,\n labelTransitionProps,\n labelAlwaysOn,\n thumbFromLabel,\n thumbToLabel,\n thumbValueText,\n showLabelOnHover,\n thumbChildren,\n disabled,\n unstyled,\n scale,\n inverted,\n orientation,\n className,\n style,\n vars,\n hiddenInputProps,\n restrictToMarks,\n thumbProps,\n pushOnOverlap,\n attributes,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<RangeSliderFactory>({\n name: 'RangeSlider',\n props,\n classes,\n classNames,\n className,\n styles,\n style,\n attributes,\n vars,\n varsResolver,\n unstyled,\n });\n\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const { dir } = useDirection();\n const [focused, setFocused] = useState(-1);\n const [hovered, setHovered] = useState(false);\n const [_value, setValue] = useUncontrolled<RangeSliderValue>({\n value,\n defaultValue,\n finalValue: [min, max],\n onChange,\n });\n const valueRef = useRef(_value);\n const thumbs = useRef<HTMLDivElement[]>([]);\n const root = useRef<HTMLDivElement>(null);\n const thumbIndex = useRef<number \| undefined>(undefined);\n const [domainMin, domainMax] = domain \|\| [min!, max!];\n const positions = [\n getPosition({ value: _value[0], min: domainMin, max: domainMax }),\n getPosition({ value: _value[1], min: domainMin, max: domainMax }),\n ];\n\n const precision = _precision ?? getPrecision(step);\n\n const _setValue = (val: RangeSliderValue) => {\n setValue(val);\n valueRef.current = val;\n };\n\n useEffect(\n () => {\n if (Array.isArray(value)) {\n valueRef.current = value;\n }\n },\n Array.isArray(value) ? [value[0], value[1]] : [null, null]\n );\n\n const setRangedValue = (val: number, index: number, triggerChangeEnd: boolean) => {\n if (index === -1) {\n return;\n }\n\n const clone: RangeSliderValue = [...valueRef.current];\n\n if (restrictToMarks && marks) {\n const closest = findClosestNumber(\n val,\n marks.map((m) => m.value)\n );\n\n const current = clone[index];\n clone[index] = closest;\n const otherIndex = index === 0 ? 1 : 0;\n\n const lastMarkValue = getLastMarkValue(marks);\n const firstMarkValue = getFirstMarkValue(marks);\n\n if (closest === lastMarkValue && clone[otherIndex] === lastMarkValue) {\n clone[index] = current;\n } else if (closest === firstMarkValue && clone[otherIndex] === firstMarkValue) {\n clone[index] = current;\n } else if (closest === clone[otherIndex]) {\n if (current > clone[otherIndex]) {\n clone[otherIndex] = getPreviousMarkValue(closest, marks);\n } else {\n clone[otherIndex] = getNextMarkValue(closest, marks);\n }\n }\n } else {\n const clampedVal = clamp(val, min!, max!);\n clone[index] = clampedVal;\n\n if (index === 0) {\n if (clampedVal > clone[1] - (minRange - 0.000000001)) {\n if (pushOnOverlap) {\n clone[1] = Math.min(val + minRange, max);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal > (max - (minRange - 0.000000001) \|\| min)) {\n clone[index] = valueRef.current[index];\n }\n\n if (clone[1] - val > maxRange) {\n if (pushOnOverlap) {\n clone[1] = val + maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n\n if (index === 1) {\n if (clampedVal < clone[0] + minRange) {\n if (pushOnOverlap) {\n clone[0] = Math.max(val - minRange, min);\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n\n if (clampedVal < clone[0] + minRange) {\n clone[index] = valueRef.current[index];\n }\n\n if (clampedVal - clone[0] > maxRange) {\n if (pushOnOverlap) {\n clone[0] = val - maxRange;\n } else {\n clone[index] = valueRef.current[index];\n }\n }\n }\n }\n\n clone[0] = getFloatingValue(clone[0], precision);\n clone[1] = getFloatingValue(clone[1], precision);\n\n if (clone[0] > clone[1]) {\n const temp = clone[0];\n clone[0] = clone[1];\n clone[1] = temp;\n }\n\n _setValue(clone);\n\n if (triggerChangeEnd) {\n onChangeEnd?.(valueRef.current);\n }\n };\n\n const handleChange = (val: number) => {\n if (!disabled && thumbIndex.current !== undefined) {\n const nextValue = getChangeValue({\n value: val,\n min: domainMin,\n max: domainMax,\n step,\n precision,\n });\n setRangedValue(nextValue, thumbIndex.current, false);\n }\n };\n\n const { ref: useMoveRef, active } = useMove(\n ({ x, y }) => handleChange(orientation === 'vertical' ? 1 - y : x),\n { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) },\n dir\n );\n\n function handleThumbMouseDown(index: number) {\n thumbIndex.current = index;\n }\n\n const handleTrackMouseDownCapture = (\n event: React.MouseEvent<HTMLDivElement> \| React.TouchEvent<HTMLDivElement>\n ) => {\n if (containerRef.current) {\n containerRef.current.focus();\n const rect = containerRef.current.getBoundingClientRect();\n const changePosition = getClientPosition(event.nativeEvent, orientation);\n\n const changeValue =\n orientation === 'vertical'\n ? getChangeValue({\n value: rect.bottom - changePosition,\n max,\n min,\n step,\n containerWidth: rect.height,\n })\n : getChangeValue({\n value: changePosition - rect.left,\n max,\n min,\n step,\n containerWidth: rect.width,\n });\n\n const nearestHandle =\n Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;\n const _nearestHandle =\n orientation === 'vertical'\n ? nearestHandle\n : dir === 'ltr'\n ? nearestHandle\n : nearestHandle === 1\n ? 0\n : 1;\n\n thumbIndex.current = _nearestHandle;\n }\n };\n\n const getFocusedThumbIndex = () => {\n if (focused !== 1 && focused !== 0) {\n setFocused(0);\n return 0;\n }\n\n return focused;\n };\n\n const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getNextMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowRight': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getPreviousMarkValue : getNextMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] - step\n : valueRef.current[focusedIndex] + step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowDown': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n const nextValue =\n restrictToMarks && marks\n ? getPreviousMarkValue(valueRef.current[focusedIndex], marks)\n : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n case 'ArrowLeft': {\n event.preventDefault();\n const focusedIndex = getFocusedThumbIndex();\n thumbs.current[focusedIndex].focus();\n\n const nextValue =\n restrictToMarks && marks\n ? (dir === 'rtl' ? getNextMarkValue : getPreviousMarkValue)(\n valueRef.current[focusedIndex],\n marks\n )\n : Math.min(\n Math.max(\n dir === 'rtl'\n ? valueRef.current[focusedIndex] + step\n : valueRef.current[focusedIndex] - step,\n domainMin\n ),\n domainMax\n );\n\n setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n break;\n }\n\n default: {\n break;\n }\n }\n }\n };\n\n const sharedThumbProps = {\n max,\n min,\n size,\n labelTransitionProps,\n labelAlwaysOn,\n orientation,\n onBlur: () => setFocused(-1),\n };\n\n const hasArrayThumbChildren = Array.isArray(thumbChildren);\n\n return (\n <SliderProvider value={{ getStyles }}>\n <SliderRoot\n {...others}\n size={size}\n ref={useMergedRef(ref, root)}\n disabled={disabled}\n orientation={orientation}\n onMouseDownCapture={() => root.current?.focus()}\n onKeyDownCapture={() => {\n if (thumbs.current[0]?.parentElement?.contains(document.activeElement)) {\n return;\n }\n thumbs.current[0]?.focus();\n }}\n >\n <Track\n offset={positions[0]}\n marksOffset={_value[0]}\n filled={positions[1] - positions[0]}\n marks={marks}\n inverted={inverted}\n min={domainMin}\n max={domainMax}\n value={_value[1]}\n disabled={disabled}\n containerProps={{\n ref: useMergedRef(containerRef, useMoveRef) as any,\n onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n onTouchStartCapture: handleTrackMouseDownCapture,\n onTouchEndCapture: () => {\n thumbIndex.current = -1;\n },\n onMouseDownCapture: handleTrackMouseDownCapture,\n onMouseUpCapture: () => {\n thumbIndex.current = -1;\n },\n onKeyDownCapture: handleTrackKeydownCapture,\n }}\n >\n <Thumb\n {...sharedThumbProps}\n value={scale(_value[0])}\n position={positions[0]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[0]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[0] = node;\n }\n }}\n thumbLabel={thumbFromLabel}\n thumbValueText={thumbValueText}\n onMouseDown={() => handleThumbMouseDown(0)}\n onFocus={() => setFocused(0)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(0)}\n >\n {hasArrayThumbChildren ? thumbChildren[0] : thumbChildren}\n </Thumb>\n\n <Thumb\n {...sharedThumbProps}\n thumbLabel={thumbToLabel}\n value={scale(_value[1])}\n position={positions[1]}\n dragging={active}\n label={\n typeof label === 'function'\n ? label(getFloatingValue(scale(_value[1]), precision))\n : label\n }\n ref={(node) => {\n if (node) {\n thumbs.current[1] = node;\n }\n }}\n thumbValueText={thumbValueText}\n onMouseDown={() => handleThumbMouseDown(1)}\n onFocus={() => setFocused(1)}\n showLabelOnHover={showLabelOnHover}\n isHovered={hovered}\n disabled={disabled}\n {...thumbProps?.(1)}\n >\n {hasArrayThumbChildren ? thumbChildren[1] : thumbChildren}\n </Thumb>\n </Track>\n\n <input type=\"hidden\" name={`${name}_from`} value={_value[0]} {...hiddenInputProps} />\n <input type=\"hidden\" name={`${name}_to`} value={_value[1]} {...hiddenInputProps} />\n </SliderRoot>\n </SliderProvider>\n );\n});\n\nRangeSlider.classes = classes;\nRangeSlider.varsResolver = varsResolver;\nRangeSlider.displayName = '@mantine/core/RangeSlider';\n\nexport namespace RangeSlider {\n export type Props = RangeSliderProps;\n export type Value = RangeSliderValue;\n export type Factory = RangeSliderFactory;\n export type StylesNames = SliderStylesNames;\n export type CssVariables = SliderCssVariables;\n export type Mark = SliderMark;\n}\n"],"mappings":"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"}

package/esm/components/Table/Table.components.mjs CHANGED Viewed

@@ -52,6 +52,6 @@ const TableTbody = tableElement("tbody");
 const TableTfoot = tableElement("tfoot");
 const TableCaption = tableElement("caption", { captionSide: true });
 //#endregion
-export { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr };
+export { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, tableElement };
 //# sourceMappingURL=Table.components.mjs.map

package/esm/components/TagsInput/TagsInput.mjs CHANGED Viewed

@@ -135,11 +135,12 @@ const TagsInput = factory((_props) => {
 		onPaste?.(event);
 		event.preventDefault();
 		if (event.clipboardData) {
+			const pastedText = event.clipboardData.getData("text/plain");
 			setValue(getSplittedTags({
 				splitChars,
 				allowDuplicates,
 				maxTags,
-				value: `${_searchValue}${event.clipboardData.getData("text/plain")}`,
+				value: `${_searchValue}${pastedText}`,
 				currentTags: _value,
 				isDuplicate,
 				onDuplicate