@mantine/core 6.0.11 → 7.0.0-alpha.10

package/esm/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.js

@@ -0,0 +1,34 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { useResizeObserver } from '../use-resize-observer.js';
+
+const Corner = React.forwardRef((props, ref) => {
+    const { style } = props, others = __rest(props, ["style"]);
+    const ctx = useScrollAreaContext();
+    const [width, setWidth] = React.useState(0);
+    const [height, setHeight] = React.useState(0);
+    const hasSize = Boolean(width && height);
+    useResizeObserver(ctx.scrollbarX, () => {
+        var _a;
+        const h = ((_a = ctx.scrollbarX) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+        ctx.onCornerHeightChange(h);
+        setHeight(h);
+    });
+    useResizeObserver(ctx.scrollbarY, () => {
+        var _a;
+        const w = ((_a = ctx.scrollbarY) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+        ctx.onCornerWidthChange(w);
+        setWidth(w);
+    });
+    return hasSize ? React.createElement("div", Object.assign({}, others, { ref: ref, style: Object.assign(Object.assign({}, style), { width, height }) })) : null;
+});
+const ScrollAreaCorner = React.forwardRef((props, ref) => {
+    const ctx = useScrollAreaContext();
+    const hasBothScrollbarsVisible = Boolean(ctx.scrollbarX && ctx.scrollbarY);
+    const hasCorner = ctx.type !== 'scroll' && hasBothScrollbarsVisible;
+    return hasCorner ? React.createElement(Corner, Object.assign({}, props, { ref: ref })) : null;
+});
+
+export { Corner, ScrollAreaCorner };
+//# sourceMappingURL=ScrollAreaCorner.js.map

package/esm/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaCorner.js","sources":["../../../../src/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { useResizeObserver } from '../use-resize-observer';\n\ninterface ScrollAreaCornerProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nexport const Corner = React.forwardRef<HTMLDivElement, ScrollAreaCornerProps>((props, ref) => {\n  const { style, ...others } = props;\n  const ctx = useScrollAreaContext();\n  const [width, setWidth] = React.useState(0);\n  const [height, setHeight] = React.useState(0);\n  const hasSize = Boolean(width && height);\n\n  useResizeObserver(ctx.scrollbarX, () => {\n    const h = ctx.scrollbarX?.offsetHeight || 0;\n    ctx.onCornerHeightChange(h);\n    setHeight(h);\n  });\n\n  useResizeObserver(ctx.scrollbarY, () => {\n    const w = ctx.scrollbarY?.offsetWidth || 0;\n    ctx.onCornerWidthChange(w);\n    setWidth(w);\n  });\n\n  return hasSize ? <div {...others} ref={ref} style={{ ...style, width, height }} /> : null;\n});\n\nexport const ScrollAreaCorner = React.forwardRef<HTMLDivElement, ScrollAreaCornerProps>(\n  (props, ref) => {\n    const ctx = useScrollAreaContext();\n    const hasBothScrollbarsVisible = Boolean(ctx.scrollbarX && ctx.scrollbarY);\n    const hasCorner = ctx.type !== 'scroll' && hasBothScrollbarsVisible;\n    return hasCorner ? <Corner {...props} ref={ref} /> : null;\n  }\n);\n"],"names":[],"mappings":";;;;;MAMa,MAAM,GAAG,KAAK,CAAC,UAAU,CAAwC,CAAC,KAAK,EAAE,GAAG;IACvF,MAAM,EAAE,KAAK,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAA5B,SAAoB,CAAQ,CAAC;IACnC,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;IAEzC,iBAAiB,CAAC,GAAG,CAAC,UAAU,EAAE;;QAChC,MAAM,CAAC,GAAG,CAAA,MAAA,GAAG,CAAC,UAAU,0CAAE,YAAY,KAAI,CAAC,CAAC;QAC5C,GAAG,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;QAC5B,SAAS,CAAC,CAAC,CAAC,CAAC;KACd,CAAC,CAAC;IAEH,iBAAiB,CAAC,GAAG,CAAC,UAAU,EAAE;;QAChC,MAAM,CAAC,GAAG,CAAA,MAAA,GAAG,CAAC,UAAU,0CAAE,WAAW,KAAI,CAAC,CAAC;QAC3C,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC3B,QAAQ,CAAC,CAAC,CAAC,CAAC;KACb,CAAC,CAAC;IAEH,OAAO,OAAO,GAAG,6CAAS,MAAM,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,OAAM,GAAG,IAAI,CAAC;AAC5F,CAAC,EAAE;MAEU,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC;IAC3E,MAAM,SAAS,GAAG,GAAG,CAAC,IAAI,KAAK,QAAQ,IAAI,wBAAwB,CAAC;IACpE,OAAO,SAAS,GAAG,oBAAC,MAAM,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5D,CAAC;;;;"}

package/esm/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.js

@@ -0,0 +1,52 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useState } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { ScrollAreaProvider } from '../ScrollArea.context.js';
+import { useProps } from '../../../core/MantineProvider/use-props/use-props.js';
+import { Box } from '../../../core/Box/Box.js';
+
+const defaultProps = {
+    scrollHideDelay: 1000,
+    type: 'hover',
+};
+const ScrollAreaRoot = forwardRef((_props, ref) => {
+    const props = useProps('ScrollAreaRoot', defaultProps, _props);
+    const { type, scrollHideDelay } = props, others = __rest(props, ["type", "scrollHideDelay"]);
+    const [scrollArea, setScrollArea] = useState(null);
+    const [viewport, setViewport] = useState(null);
+    const [content, setContent] = useState(null);
+    const [scrollbarX, setScrollbarX] = useState(null);
+    const [scrollbarY, setScrollbarY] = useState(null);
+    const [cornerWidth, setCornerWidth] = useState(0);
+    const [cornerHeight, setCornerHeight] = useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = useState(false);
+    const rootRef = useMergedRef(ref, (node) => setScrollArea(node));
+    return (React.createElement(ScrollAreaProvider, { value: {
+            type: type,
+            scrollHideDelay: scrollHideDelay,
+            scrollArea,
+            viewport,
+            onViewportChange: setViewport,
+            content,
+            onContentChange: setContent,
+            scrollbarX,
+            onScrollbarXChange: setScrollbarX,
+            scrollbarXEnabled,
+            onScrollbarXEnabledChange: setScrollbarXEnabled,
+            scrollbarY,
+            onScrollbarYChange: setScrollbarY,
+            scrollbarYEnabled,
+            onScrollbarYEnabledChange: setScrollbarYEnabled,
+            onCornerWidthChange: setCornerWidth,
+            onCornerHeightChange: setCornerHeight,
+        } },
+        React.createElement(Box, Object.assign({}, others, { ref: rootRef, __vars: {
+                '--sa-corner-width': `${cornerWidth}px`,
+                '--sa-corner-height': `${cornerHeight}px`,
+            } }))));
+});
+ScrollAreaRoot.displayName = '@mantine/core/ScrollAreaRoot';
+
+export { ScrollAreaRoot };
+//# sourceMappingURL=ScrollAreaRoot.js.map

package/esm/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaRoot.js","sources":["../../../../src/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, useProps, Factory } from '../../../core';\nimport { ScrollAreaProvider } from '../ScrollArea.context';\n\nexport type ScrollAreaRootStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'viewportInner'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner';\n\nexport type ScrollAreaRootVariant = string;\n\nexport type ScrollAreaRootCssVariables = {\n  root: '--sa-corner-width' | '--sa-corner-height';\n};\n\nexport interface ScrollAreaRootStylesCtx {\n  cornerWidth: number;\n  cornerHeight: number;\n}\n\nexport interface ScrollAreaRootProps extends BoxProps, ElementProps<'div'> {\n  /**\n   * Defines scrollbars behavior, `hover` by default\n   * - `hover` – scrollbars are visible when mouse is over the scroll area\n   * - `scroll` – scrollbars are visible when the scroll area is scrolled\n   * - `always` – scrollbars are always visible\n   * - `never` – scrollbars are always hidden\n   * - `auto` – similar to `overflow: auto` – scrollbars are always visible when the content is overflowing\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`, `1000` by default */\n  scrollHideDelay?: number;\n}\n\nexport type ScrollAreaRootFactory = Factory<{\n  props: ScrollAreaRootProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaRootStylesNames;\n}>;\n\nconst defaultProps: Partial<ScrollAreaRootProps> = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n};\n\nexport const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>((_props, ref) => {\n  const props = useProps('ScrollAreaRoot', defaultProps, _props);\n  const { type, scrollHideDelay, ...others } = props;\n\n  const [scrollArea, setScrollArea] = useState<HTMLDivElement | null>(null);\n  const [viewport, setViewport] = useState<HTMLDivElement | null>(null);\n  const [content, setContent] = useState<HTMLDivElement | null>(null);\n  const [scrollbarX, setScrollbarX] = useState<HTMLDivElement | null>(null);\n  const [scrollbarY, setScrollbarY] = useState<HTMLDivElement | null>(null);\n  const [cornerWidth, setCornerWidth] = useState(0);\n  const [cornerHeight, setCornerHeight] = useState(0);\n  const [scrollbarXEnabled, setScrollbarXEnabled] = useState(false);\n  const [scrollbarYEnabled, setScrollbarYEnabled] = useState(false);\n  const rootRef = useMergedRef(ref, (node) => setScrollArea(node));\n\n  return (\n    <ScrollAreaProvider\n      value={{\n        type: type!,\n        scrollHideDelay: scrollHideDelay!,\n        scrollArea,\n        viewport,\n        onViewportChange: setViewport,\n        content,\n        onContentChange: setContent,\n        scrollbarX,\n        onScrollbarXChange: setScrollbarX,\n        scrollbarXEnabled,\n        onScrollbarXEnabledChange: setScrollbarXEnabled,\n        scrollbarY,\n        onScrollbarYChange: setScrollbarY,\n        scrollbarYEnabled,\n        onScrollbarYEnabledChange: setScrollbarYEnabled,\n        onCornerWidthChange: setCornerWidth,\n        onCornerHeightChange: setCornerHeight,\n      }}\n    >\n      <Box\n        {...others}\n        ref={rootRef}\n        __vars={{\n          '--sa-corner-width': `${cornerWidth}px`,\n          '--sa-corner-height': `${cornerHeight}px`,\n        }}\n      />\n    </ScrollAreaProvider>\n  );\n});\n\nScrollAreaRoot.displayName = '@mantine/core/ScrollAreaRoot';\n"],"names":[],"mappings":";;;;;;;AA6CA,MAAM,YAAY,GAAiC;IACjD,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,OAAO;CACd,CAAC;MAEW,cAAc,GAAG,UAAU,CAAsC,CAAC,MAAM,EAAE,GAAG;IACxF,MAAM,KAAK,GAAG,QAAQ,CAAC,gBAAgB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IAC/D,MAAM,EAAE,IAAI,EAAE,eAAe,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAA5C,2BAAoC,CAAQ,CAAC;IAEnD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjE,QACE,oBAAC,kBAAkB,IACjB,KAAK,EAAE;YACL,IAAI,EAAE,IAAK;YACX,eAAe,EAAE,eAAgB;YACjC,UAAU;YACV,QAAQ;YACR,gBAAgB,EAAE,WAAW;YAC7B,OAAO;YACP,eAAe,EAAE,UAAU;YAC3B,UAAU;YACV,kBAAkB,EAAE,aAAa;YACjC,iBAAiB;YACjB,yBAAyB,EAAE,oBAAoB;YAC/C,UAAU;YACV,kBAAkB,EAAE,aAAa;YACjC,iBAAiB;YACjB,yBAAyB,EAAE,oBAAoB;YAC/C,mBAAmB,EAAE,cAAc;YACnC,oBAAoB,EAAE,eAAe;SACtC;QAED,oBAAC,GAAG,oBACE,MAAM,IACV,GAAG,EAAE,OAAO,EACZ,MAAM,EAAE;gBACN,mBAAmB,EAAE,GAAG,WAAW,IAAI;gBACvC,oBAAoB,EAAE,GAAG,YAAY,IAAI;aAC1C,IACD,CACiB,EACrB;AACJ,CAAC,EAAE;AAEH,cAAc,CAAC,WAAW,GAAG,8BAA8B;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.js

@@ -0,0 +1,24 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { ScrollAreaScrollbarVisible } from './ScrollAreaScrollbarVisible.js';
+import { ScrollAreaScrollbarHover } from './ScrollAreaScrollbarHover.js';
+import { ScrollAreaScrollbarScroll } from './ScrollAreaScrollbarScroll.js';
+import { ScrollAreaScrollbarAuto } from './ScrollAreaScrollbarAuto.js';
+
+const ScrollAreaScrollbar = React.forwardRef((props, forwardedRef) => {
+    const { forceMount } = props, scrollbarProps = __rest(props, ["forceMount"]);
+    const context = useScrollAreaContext();
+    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+    const isHorizontal = props.orientation === 'horizontal';
+    React.useEffect(() => {
+        isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+        return () => {
+            isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+        };
+    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
+    return context.type === 'hover' ? (React.createElement(ScrollAreaScrollbarHover, Object.assign({}, scrollbarProps, { ref: forwardedRef, forceMount: forceMount }))) : context.type === 'scroll' ? (React.createElement(ScrollAreaScrollbarScroll, Object.assign({}, scrollbarProps, { ref: forwardedRef, forceMount: forceMount }))) : context.type === 'auto' ? (React.createElement(ScrollAreaScrollbarAuto, Object.assign({}, scrollbarProps, { ref: forwardedRef, forceMount: forceMount }))) : context.type === 'always' ? (React.createElement(ScrollAreaScrollbarVisible, Object.assign({}, scrollbarProps, { ref: forwardedRef }))) : null;
+});
+
+export { ScrollAreaScrollbar };
+//# sourceMappingURL=ScrollAreaScrollbar.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaScrollbar.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.tsx"],"sourcesContent":["import React from 'react';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport {\n  ScrollAreaScrollbarVisible,\n  ScrollAreaScrollbarVisibleProps,\n} from './ScrollAreaScrollbarVisible';\nimport { ScrollAreaScrollbarHover } from './ScrollAreaScrollbarHover';\nimport { ScrollAreaScrollbarScroll } from './ScrollAreaScrollbarScroll';\nimport { ScrollAreaScrollbarAuto } from './ScrollAreaScrollbarAuto';\n\ninterface ScrollAreaScrollbarProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nexport const ScrollAreaScrollbar = React.forwardRef<HTMLDivElement, ScrollAreaScrollbarProps>(\n  (props, forwardedRef) => {\n    const { forceMount, ...scrollbarProps } = props;\n    const context = useScrollAreaContext();\n    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;\n    const isHorizontal = props.orientation === 'horizontal';\n\n    React.useEffect(() => {\n      isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);\n      return () => {\n        isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);\n      };\n    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);\n\n    return context.type === 'hover' ? (\n      <ScrollAreaScrollbarHover {...scrollbarProps} ref={forwardedRef} forceMount={forceMount} />\n    ) : context.type === 'scroll' ? (\n      <ScrollAreaScrollbarScroll {...scrollbarProps} ref={forwardedRef} forceMount={forceMount} />\n    ) : context.type === 'auto' ? (\n      <ScrollAreaScrollbarAuto {...scrollbarProps} ref={forwardedRef} forceMount={forceMount} />\n    ) : context.type === 'always' ? (\n      <ScrollAreaScrollbarVisible {...scrollbarProps} ref={forwardedRef} />\n    ) : null;\n  }\n);\n"],"names":[],"mappings":";;;;;;;;MAca,mBAAmB,GAAG,KAAK,CAAC,UAAU,CACjD,CAAC,KAAK,EAAE,YAAY;IAClB,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,UAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,GAAG,OAAO,CAAC;IACzE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;IAExD,KAAK,CAAC,SAAS,CAAC;QACd,YAAY,GAAG,yBAAyB,CAAC,IAAI,CAAC,GAAG,yBAAyB,CAAC,IAAI,CAAC,CAAC;QACjF,OAAO;YACL,YAAY,GAAG,yBAAyB,CAAC,KAAK,CAAC,GAAG,yBAAyB,CAAC,KAAK,CAAC,CAAC;SACpF,CAAC;KACH,EAAE,CAAC,YAAY,EAAE,yBAAyB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAEzE,OAAO,OAAO,CAAC,IAAI,KAAK,OAAO,IAC7B,oBAAC,wBAAwB,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,IAAI,IACzF,OAAO,CAAC,IAAI,KAAK,QAAQ,IAC3B,oBAAC,yBAAyB,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,IAAI,IAC1F,OAAO,CAAC,IAAI,KAAK,MAAM,IACzB,oBAAC,uBAAuB,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,IAAI,IACxF,OAAO,CAAC,IAAI,KAAK,QAAQ,IAC3B,oBAAC,0BAA0B,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,IAAI,IACnE,IAAI,CAAC;AACX,CAAC;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.js

@@ -0,0 +1,29 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useState } from 'react';
+import { useDebounceCallback } from '@mantine/hooks';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { ScrollAreaScrollbarVisible } from './ScrollAreaScrollbarVisible.js';
+import { useResizeObserver } from '../use-resize-observer.js';
+
+const ScrollAreaScrollbarAuto = forwardRef((props, ref) => {
+    const context = useScrollAreaContext();
+    const { forceMount } = props, scrollbarProps = __rest(props, ["forceMount"]);
+    const [visible, setVisible] = useState(false);
+    const isHorizontal = props.orientation === 'horizontal';
+    const handleResize = useDebounceCallback(() => {
+        if (context.viewport) {
+            const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+            const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+            setVisible(isHorizontal ? isOverflowX : isOverflowY);
+        }
+    }, 10);
+    useResizeObserver(context.viewport, handleResize);
+    useResizeObserver(context.content, handleResize);
+    if (forceMount || visible) {
+        return (React.createElement(ScrollAreaScrollbarVisible, Object.assign({ "data-state": visible ? 'visible' : 'hidden' }, scrollbarProps, { ref: ref })));
+    }
+    return null;
+});
+
+export { ScrollAreaScrollbarAuto };
+//# sourceMappingURL=ScrollAreaScrollbarAuto.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaScrollbarAuto.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarAuto.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport { useDebounceCallback } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport {\n  ScrollAreaScrollbarVisibleProps,\n  ScrollAreaScrollbarVisible,\n} from './ScrollAreaScrollbarVisible';\nimport { useResizeObserver } from '../use-resize-observer';\n\nexport interface ScrollAreaScrollbarAutoProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nexport const ScrollAreaScrollbarAuto = forwardRef<HTMLDivElement, ScrollAreaScrollbarAutoProps>(\n  (props, ref) => {\n    const context = useScrollAreaContext();\n    const { forceMount, ...scrollbarProps } = props;\n    const [visible, setVisible] = useState(false);\n    const isHorizontal = props.orientation === 'horizontal';\n    const handleResize = useDebounceCallback(() => {\n      if (context.viewport) {\n        const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;\n        const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;\n        setVisible(isHorizontal ? isOverflowX : isOverflowY);\n      }\n    }, 10);\n\n    useResizeObserver(context.viewport, handleResize);\n    useResizeObserver(context.content, handleResize);\n\n    if (forceMount || visible) {\n      return (\n        <ScrollAreaScrollbarVisible\n          data-state={visible ? 'visible' : 'hidden'}\n          {...scrollbarProps}\n          ref={ref}\n        />\n      );\n    }\n\n    return null;\n  }\n);\n"],"names":[],"mappings":";;;;;;;MAaa,uBAAuB,GAAG,UAAU,CAC/C,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,UAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;IACxD,MAAM,YAAY,GAAG,mBAAmB,CAAC;QACvC,IAAI,OAAO,CAAC,QAAQ,EAAE;YACpB,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC;YAChF,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,CAAC,YAAY,GAAG,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC;YAClF,UAAU,CAAC,YAAY,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;SACtD;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,iBAAiB,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAClD,iBAAiB,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAEjD,IAAI,UAAU,IAAI,OAAO,EAAE;QACzB,QACE,oBAAC,0BAA0B,gCACb,OAAO,GAAG,SAAS,GAAG,QAAQ,IACtC,cAAc,IAClB,GAAG,EAAE,GAAG,IACR,EACF;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.js

@@ -0,0 +1,38 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useState, useEffect } from 'react';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { ScrollAreaScrollbarAuto } from './ScrollAreaScrollbarAuto.js';
+
+const ScrollAreaScrollbarHover = forwardRef((props, ref) => {
+    const { forceMount } = props, scrollbarProps = __rest(props, ["forceMount"]);
+    const context = useScrollAreaContext();
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        const { scrollArea } = context;
+        let hideTimer = 0;
+        if (scrollArea) {
+            const handlePointerEnter = () => {
+                window.clearTimeout(hideTimer);
+                setVisible(true);
+            };
+            const handlePointerLeave = () => {
+                hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);
+            };
+            scrollArea.addEventListener('pointerenter', handlePointerEnter);
+            scrollArea.addEventListener('pointerleave', handlePointerLeave);
+            return () => {
+                window.clearTimeout(hideTimer);
+                scrollArea.removeEventListener('pointerenter', handlePointerEnter);
+                scrollArea.removeEventListener('pointerleave', handlePointerLeave);
+            };
+        }
+        return undefined;
+    }, [context.scrollArea, context.scrollHideDelay]);
+    if (forceMount || visible) {
+        return (React.createElement(ScrollAreaScrollbarAuto, Object.assign({ "data-state": visible ? 'visible' : 'hidden' }, scrollbarProps, { ref: ref })));
+    }
+    return null;
+});
+
+export { ScrollAreaScrollbarHover };
+//# sourceMappingURL=ScrollAreaScrollbarHover.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaScrollbarHover.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarHover.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { ScrollAreaScrollbarAuto, ScrollAreaScrollbarAutoProps } from './ScrollAreaScrollbarAuto';\n\ninterface ScrollAreaScrollbarHoverProps extends ScrollAreaScrollbarAutoProps {\n  forceMount?: true;\n}\n\nexport const ScrollAreaScrollbarHover = forwardRef<HTMLDivElement, ScrollAreaScrollbarHoverProps>(\n  (props, ref) => {\n    const { forceMount, ...scrollbarProps } = props;\n    const context = useScrollAreaContext();\n    const [visible, setVisible] = useState(false);\n\n    useEffect(() => {\n      const { scrollArea } = context;\n      let hideTimer = 0;\n      if (scrollArea) {\n        const handlePointerEnter = () => {\n          window.clearTimeout(hideTimer);\n          setVisible(true);\n        };\n        const handlePointerLeave = () => {\n          hideTimer = window.setTimeout(() => setVisible(false), context.scrollHideDelay);\n        };\n        scrollArea.addEventListener('pointerenter', handlePointerEnter);\n        scrollArea.addEventListener('pointerleave', handlePointerLeave);\n        return () => {\n          window.clearTimeout(hideTimer);\n          scrollArea.removeEventListener('pointerenter', handlePointerEnter);\n          scrollArea.removeEventListener('pointerleave', handlePointerLeave);\n        };\n      }\n\n      return undefined;\n    }, [context.scrollArea, context.scrollHideDelay]);\n\n    if (forceMount || visible) {\n      return (\n        <ScrollAreaScrollbarAuto\n          data-state={visible ? 'visible' : 'hidden'}\n          {...scrollbarProps}\n          ref={ref}\n        />\n      );\n    }\n\n    return null;\n  }\n);\n"],"names":[],"mappings":";;;;;MAQa,wBAAwB,GAAG,UAAU,CAChD,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,UAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC;QACR,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;QAC/B,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,UAAU,EAAE;YACd,MAAM,kBAAkB,GAAG;gBACzB,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBAC/B,UAAU,CAAC,IAAI,CAAC,CAAC;aAClB,CAAC;YACF,MAAM,kBAAkB,GAAG;gBACzB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,UAAU,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;aACjF,CAAC;YACF,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;YAChE,UAAU,CAAC,gBAAgB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;YAChE,OAAO;gBACL,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;gBAC/B,UAAU,CAAC,mBAAmB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;gBACnE,UAAU,CAAC,mBAAmB,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;aACpE,CAAC;SACH;QAED,OAAO,SAAS,CAAC;KAClB,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;IAElD,IAAI,UAAU,IAAI,OAAO,EAAE;QACzB,QACE,oBAAC,uBAAuB,gCACV,OAAO,GAAG,SAAS,GAAG,QAAQ,IACtC,cAAc,IAClB,GAAG,EAAE,GAAG,IACR,EACF;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.js

@@ -0,0 +1,47 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useState, useEffect } from 'react';
+import { useDebounceCallback } from '@mantine/hooks';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { ScrollAreaScrollbarVisible } from './ScrollAreaScrollbarVisible.js';
+import { composeEventHandlers } from '../utils/compose-event-handlers.js';
+
+const ScrollAreaScrollbarScroll = forwardRef((props, red) => {
+    const { forceMount } = props, scrollbarProps = __rest(props, ["forceMount"]);
+    const context = useScrollAreaContext();
+    const isHorizontal = props.orientation === 'horizontal';
+    const [state, setState] = useState('hidden');
+    const debounceScrollEnd = useDebounceCallback(() => setState('idle'), 100);
+    useEffect(() => {
+        if (state === 'idle') {
+            const hideTimer = window.setTimeout(() => setState('hidden'), context.scrollHideDelay);
+            return () => window.clearTimeout(hideTimer);
+        }
+        return undefined;
+    }, [state, context.scrollHideDelay]);
+    useEffect(() => {
+        const { viewport } = context;
+        const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';
+        if (viewport) {
+            let prevScrollPos = viewport[scrollDirection];
+            const handleScroll = () => {
+                const scrollPos = viewport[scrollDirection];
+                const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+                if (hasScrollInDirectionChanged) {
+                    setState('scrolling');
+                    debounceScrollEnd();
+                }
+                prevScrollPos = scrollPos;
+            };
+            viewport.addEventListener('scroll', handleScroll);
+            return () => viewport.removeEventListener('scroll', handleScroll);
+        }
+        return undefined;
+    }, [context.viewport, isHorizontal, debounceScrollEnd]);
+    if (forceMount || state !== 'hidden') {
+        return (React.createElement(ScrollAreaScrollbarVisible, Object.assign({ "data-state": state === 'hidden' ? 'hidden' : 'visible' }, scrollbarProps, { ref: red, onPointerEnter: composeEventHandlers(props.onPointerEnter, () => setState('interacting')), onPointerLeave: composeEventHandlers(props.onPointerLeave, () => setState('idle')) })));
+    }
+    return null;
+});
+
+export { ScrollAreaScrollbarScroll };
+//# sourceMappingURL=ScrollAreaScrollbarScroll.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaScrollbarScroll.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport { useDebounceCallback } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport {\n  ScrollAreaScrollbarVisible,\n  ScrollAreaScrollbarVisibleProps,\n} from './ScrollAreaScrollbarVisible';\nimport { composeEventHandlers } from '../utils';\n\ninterface ScrollAreaScrollbarScrollProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nexport const ScrollAreaScrollbarScroll = forwardRef<HTMLDivElement, ScrollAreaScrollbarScrollProps>(\n  (props, red) => {\n    const { forceMount, ...scrollbarProps } = props;\n    const context = useScrollAreaContext();\n    const isHorizontal = props.orientation === 'horizontal';\n    const [state, setState] = useState<'hidden' | 'idle' | 'interacting' | 'scrolling'>('hidden');\n    const debounceScrollEnd = useDebounceCallback(() => setState('idle'), 100);\n\n    useEffect(() => {\n      if (state === 'idle') {\n        const hideTimer = window.setTimeout(() => setState('hidden'), context.scrollHideDelay);\n        return () => window.clearTimeout(hideTimer);\n      }\n\n      return undefined;\n    }, [state, context.scrollHideDelay]);\n\n    useEffect(() => {\n      const { viewport } = context;\n      const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';\n\n      if (viewport) {\n        let prevScrollPos = viewport[scrollDirection];\n        const handleScroll = () => {\n          const scrollPos = viewport[scrollDirection];\n          const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;\n          if (hasScrollInDirectionChanged) {\n            setState('scrolling');\n            debounceScrollEnd();\n          }\n          prevScrollPos = scrollPos;\n        };\n        viewport.addEventListener('scroll', handleScroll);\n        return () => viewport.removeEventListener('scroll', handleScroll);\n      }\n\n      return undefined;\n    }, [context.viewport, isHorizontal, debounceScrollEnd]);\n\n    if (forceMount || state !== 'hidden') {\n      return (\n        <ScrollAreaScrollbarVisible\n          data-state={state === 'hidden' ? 'hidden' : 'visible'}\n          {...scrollbarProps}\n          ref={red}\n          onPointerEnter={composeEventHandlers(props.onPointerEnter, () => setState('interacting'))}\n          onPointerLeave={composeEventHandlers(props.onPointerLeave, () => setState('idle'))}\n        />\n      );\n    }\n\n    return null;\n  }\n);\n"],"names":[],"mappings":";;;;;;;MAaa,yBAAyB,GAAG,UAAU,CACjD,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,UAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkD,QAAQ,CAAC,CAAC;IAC9F,MAAM,iBAAiB,GAAG,mBAAmB,CAAC,MAAM,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAE3E,SAAS,CAAC;QACR,IAAI,KAAK,KAAK,MAAM,EAAE;YACpB,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;YACvF,OAAO,MAAM,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SAC7C;QAED,OAAO,SAAS,CAAC;KAClB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC;IAErC,SAAS,CAAC;QACR,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;QAC7B,MAAM,eAAe,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CAAC;QAElE,IAAI,QAAQ,EAAE;YACZ,IAAI,aAAa,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC9C,MAAM,YAAY,GAAG;gBACnB,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;gBAC5C,MAAM,2BAA2B,GAAG,aAAa,KAAK,SAAS,CAAC;gBAChE,IAAI,2BAA2B,EAAE;oBAC/B,QAAQ,CAAC,WAAW,CAAC,CAAC;oBACtB,iBAAiB,EAAE,CAAC;iBACrB;gBACD,aAAa,GAAG,SAAS,CAAC;aAC3B,CAAC;YACF,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAClD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;SACnE;QAED,OAAO,SAAS,CAAC;KAClB,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAExD,IAAI,UAAU,IAAI,KAAK,KAAK,QAAQ,EAAE;QACpC,QACE,oBAAC,0BAA0B,gCACb,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,IACjD,cAAc,IAClB,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM,QAAQ,CAAC,aAAa,CAAC,CAAC,EACzF,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,IAClF,EACF;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.js

@@ -0,0 +1,66 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef, useState } from 'react';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { ScrollAreaScrollbarX } from './ScrollbarX.js';
+import { ScrollAreaScrollbarY } from './ScrollbarY.js';
+import { getThumbRatio } from '../utils/get-thumb-ratio.js';
+import { getThumbOffsetFromScroll } from '../utils/get-thumb-offset-from-scroll.js';
+import { getScrollPositionFromPointer } from '../utils/get-scroll-position-from-pointer.js';
+import { useDirection } from '../../../core/DirectionProvider/DirectionProvider.js';
+
+const ScrollAreaScrollbarVisible = forwardRef((props, forwardedRef) => {
+    const { orientation = 'vertical' } = props, scrollbarProps = __rest(props, ["orientation"]);
+    const { dir } = useDirection();
+    const context = useScrollAreaContext();
+    const thumbRef = useRef(null);
+    const pointerOffsetRef = useRef(0);
+    const [sizes, setSizes] = useState({
+        content: 0,
+        viewport: 0,
+        scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
+    });
+    const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);
+    const commonProps = Object.assign(Object.assign({}, scrollbarProps), { sizes, onSizesChange: setSizes, hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1), onThumbChange: (thumb) => {
+            thumbRef.current = thumb;
+        }, onThumbPointerUp: () => {
+            pointerOffsetRef.current = 0;
+        }, onThumbPointerDown: (pointerPos) => {
+            pointerOffsetRef.current = pointerPos;
+        } });
+    const getScrollPosition = (pointerPos, direction) => getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);
+    if (orientation === 'horizontal') {
+        return (React.createElement(ScrollAreaScrollbarX, Object.assign({}, commonProps, { ref: forwardedRef, onThumbPositionChange: () => {
+                if (context.viewport && thumbRef.current) {
+                    const scrollPos = context.viewport.scrollLeft;
+                    const offset = getThumbOffsetFromScroll(scrollPos, sizes, dir);
+                    thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
+                }
+            }, onWheelScroll: (scrollPos) => {
+                if (context.viewport)
+                    context.viewport.scrollLeft = scrollPos;
+            }, onDragScroll: (pointerPos) => {
+                if (context.viewport) {
+                    context.viewport.scrollLeft = getScrollPosition(pointerPos, dir);
+                }
+            } })));
+    }
+    if (orientation === 'vertical') {
+        return (React.createElement(ScrollAreaScrollbarY, Object.assign({}, commonProps, { ref: forwardedRef, onThumbPositionChange: () => {
+                if (context.viewport && thumbRef.current) {
+                    const scrollPos = context.viewport.scrollTop;
+                    const offset = getThumbOffsetFromScroll(scrollPos, sizes);
+                    thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
+                }
+            }, onWheelScroll: (scrollPos) => {
+                if (context.viewport)
+                    context.viewport.scrollTop = scrollPos;
+            }, onDragScroll: (pointerPos) => {
+                if (context.viewport)
+                    context.viewport.scrollTop = getScrollPosition(pointerPos);
+            } })));
+    }
+    return null;
+});
+
+export { ScrollAreaScrollbarVisible };
+//# sourceMappingURL=ScrollAreaScrollbarVisible.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaScrollbarVisible.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx"],"sourcesContent":["import React, { useRef, useState, forwardRef } from 'react';\nimport { useDirection } from '../../../core';\nimport {\n  ScrollAreaScrollbarAxisPrivateProps,\n  ScrollAreaScrollbarAxisProps,\n  Sizes,\n} from '../ScrollArea.types';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { ScrollAreaScrollbarX } from './ScrollbarX';\nimport { ScrollAreaScrollbarY } from './ScrollbarY';\nimport { getThumbRatio, getThumbOffsetFromScroll, getScrollPositionFromPointer } from '../utils';\n\nexport interface ScrollAreaScrollbarVisibleProps\n  extends Omit<ScrollAreaScrollbarAxisProps, keyof ScrollAreaScrollbarAxisPrivateProps> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const ScrollAreaScrollbarVisible = forwardRef<\n  HTMLDivElement,\n  ScrollAreaScrollbarVisibleProps\n>((props, forwardedRef) => {\n  const { orientation = 'vertical', ...scrollbarProps } = props;\n  const { dir } = useDirection();\n  const context = useScrollAreaContext();\n  const thumbRef = useRef<HTMLDivElement | null>(null);\n  const pointerOffsetRef = useRef(0);\n  const [sizes, setSizes] = useState<Sizes>({\n    content: 0,\n    viewport: 0,\n    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n  });\n  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);\n\n  const commonProps: Omit<\n    ScrollAreaScrollbarAxisPrivateProps,\n    'onThumbPositionChange' | 'onDragScroll' | 'onWheelScroll'\n  > = {\n    ...scrollbarProps,\n    sizes,\n    onSizesChange: setSizes,\n    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),\n    onThumbChange: (thumb) => {\n      thumbRef.current = thumb;\n    },\n    onThumbPointerUp: () => {\n      pointerOffsetRef.current = 0;\n    },\n    onThumbPointerDown: (pointerPos) => {\n      pointerOffsetRef.current = pointerPos;\n    },\n  };\n\n  const getScrollPosition = (pointerPos: number, direction?: 'ltr' | 'rtl') =>\n    getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);\n\n  if (orientation === 'horizontal') {\n    return (\n      <ScrollAreaScrollbarX\n        {...commonProps}\n        ref={forwardedRef}\n        onThumbPositionChange={() => {\n          if (context.viewport && thumbRef.current) {\n            const scrollPos = context.viewport.scrollLeft;\n            const offset = getThumbOffsetFromScroll(scrollPos, sizes, dir);\n            thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;\n          }\n        }}\n        onWheelScroll={(scrollPos) => {\n          if (context.viewport) context.viewport.scrollLeft = scrollPos;\n        }}\n        onDragScroll={(pointerPos) => {\n          if (context.viewport) {\n            context.viewport.scrollLeft = getScrollPosition(pointerPos, dir);\n          }\n        }}\n      />\n    );\n  }\n\n  if (orientation === 'vertical') {\n    return (\n      <ScrollAreaScrollbarY\n        {...commonProps}\n        ref={forwardedRef}\n        onThumbPositionChange={() => {\n          if (context.viewport && thumbRef.current) {\n            const scrollPos = context.viewport.scrollTop;\n            const offset = getThumbOffsetFromScroll(scrollPos, sizes);\n            thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;\n          }\n        }}\n        onWheelScroll={(scrollPos) => {\n          if (context.viewport) context.viewport.scrollTop = scrollPos;\n        }}\n        onDragScroll={(pointerPos) => {\n          if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);\n        }}\n      />\n    );\n  }\n\n  return null;\n});\n"],"names":[],"mappings":"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"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.context.js

@@ -0,0 +1,6 @@
+import { createSafeContext } from '../../../core/utils/create-safe-context/create-safe-context.js';
+
+const [ScrollbarProvider, useScrollbarContext] = createSafeContext('ScrollAreaScrollbar was not found in tree');
+
+export { ScrollbarProvider, useScrollbarContext };
+//# sourceMappingURL=Scrollbar.context.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.context.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.context.ts"],"sourcesContent":["import { createSafeContext } from '../../../core';\n\nexport interface ScrollbarContextValue {\n  hasThumb: boolean;\n  scrollbar: HTMLDivElement | null;\n  onThumbChange(thumb: HTMLDivElement | null): void;\n  onThumbPointerUp(): void;\n  onThumbPointerDown(pointerPos: { x: number; y: number }): void;\n  onThumbPositionChange(): void;\n}\n\nexport const [ScrollbarProvider, useScrollbarContext] = createSafeContext<ScrollbarContextValue>(\n  'ScrollAreaScrollbar was not found in tree'\n);\n"],"names":[],"mappings":";;MAWa,CAAC,iBAAiB,EAAE,mBAAmB,CAAC,GAAG,iBAAiB,CACvE,2CAA2C;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.js

@@ -0,0 +1,70 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useEffect } from 'react';
+import { useMergedRef, useCallbackRef, useDebounceCallback } from '@mantine/hooks';
+import { useResizeObserver } from '../use-resize-observer.js';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { ScrollbarProvider } from './Scrollbar.context.js';
+import { composeEventHandlers } from '../utils/compose-event-handlers.js';
+
+const Scrollbar = forwardRef((props, forwardedRef) => {
+    const { sizes, hasThumb, onThumbChange, onThumbPointerUp, onThumbPointerDown, onThumbPositionChange, onDragScroll, onWheelScroll, onResize } = props, scrollbarProps = __rest(props, ["sizes", "hasThumb", "onThumbChange", "onThumbPointerUp", "onThumbPointerDown", "onThumbPositionChange", "onDragScroll", "onWheelScroll", "onResize"]);
+    const context = useScrollAreaContext();
+    const [scrollbar, setScrollbar] = React.useState(null);
+    const composeRefs = useMergedRef(forwardedRef, (node) => setScrollbar(node));
+    const rectRef = React.useRef(null);
+    const prevWebkitUserSelectRef = React.useRef('');
+    const { viewport } = context;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const handleWheelScroll = useCallbackRef(onWheelScroll);
+    const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);
+    const handleResize = useDebounceCallback(onResize, 10);
+    const handleDragScroll = (event) => {
+        if (rectRef.current) {
+            const x = event.clientX - rectRef.current.left;
+            const y = event.clientY - rectRef.current.top;
+            onDragScroll({ x, y });
+        }
+    };
+    useEffect(() => {
+        const handleWheel = (event) => {
+            const element = event.target;
+            const isScrollbarWheel = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.contains(element);
+            if (isScrollbarWheel)
+                handleWheelScroll(event, maxScrollPos);
+        };
+        document.addEventListener('wheel', handleWheel, { passive: false });
+        return () => document.removeEventListener('wheel', handleWheel, { passive: false });
+    }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);
+    useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);
+    useResizeObserver(scrollbar, handleResize);
+    useResizeObserver(context.content, handleResize);
+    return (React.createElement(ScrollbarProvider, { value: {
+            scrollbar,
+            hasThumb,
+            onThumbChange: useCallbackRef(onThumbChange),
+            onThumbPointerUp: useCallbackRef(onThumbPointerUp),
+            onThumbPositionChange: handleThumbPositionChange,
+            onThumbPointerDown: useCallbackRef(onThumbPointerDown),
+        } },
+        React.createElement("div", Object.assign({}, scrollbarProps, { ref: composeRefs, style: Object.assign({ position: 'absolute' }, scrollbarProps.style), onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
+                const mainPointer = 0;
+                if (event.button === mainPointer) {
+                    const element = event.target;
+                    element.setPointerCapture(event.pointerId);
+                    rectRef.current = scrollbar.getBoundingClientRect();
+                    prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
+                    document.body.style.webkitUserSelect = 'none';
+                    handleDragScroll(event);
+                }
+            }), onPointerMove: composeEventHandlers(props.onPointerMove, handleDragScroll), onPointerUp: composeEventHandlers(props.onPointerUp, (event) => {
+                const element = event.target;
+                if (element.hasPointerCapture(event.pointerId)) {
+                    element.releasePointerCapture(event.pointerId);
+                }
+                document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
+                rectRef.current = null;
+            }) }))));
+});
+
+export { Scrollbar };
+//# sourceMappingURL=Scrollbar.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import React, { useEffect, forwardRef } from 'react';\nimport { useMergedRef, useCallbackRef, useDebounceCallback } from '@mantine/hooks';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { ScrollbarProvider, ScrollbarContextValue } from './Scrollbar.context';\nimport { composeEventHandlers } from '../utils';\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,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'onResize'> {}\n\nexport const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>((props, forwardedRef) => {\n  const {\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext();\n  const [scrollbar, setScrollbar] = React.useState<HTMLDivElement | null>(null);\n  const composeRefs = useMergedRef(forwardedRef, (node) => setScrollbar(node));\n  const rectRef = React.useRef<ClientRect | null>(null);\n  const prevWebkitUserSelectRef = React.useRef<string>('');\n  const { viewport } = context;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useCallbackRef(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebounceCallback(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) handleWheelScroll(event, maxScrollPos);\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos, handleWheelScroll]);\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        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\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            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            element.releasePointerCapture(event.pointerId);\n          }\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          rectRef.current = null;\n        })}\n      />\n    </ScrollbarProvider>\n  );\n});\n"],"names":[],"mappings":"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"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.js

@@ -0,0 +1,44 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { Scrollbar } from './Scrollbar.js';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { getThumbSize } from '../utils/get-thumb-size.js';
+import { isScrollingWithinScrollbarBounds } from '../utils/is-scrolling-within-scrollbar-bounds.js';
+import { toInt } from '../utils/to-int.js';
+
+const ScrollAreaScrollbarX = forwardRef((props, forwardedRef) => {
+    const { sizes, onSizesChange, style } = props, others = __rest(props, ["sizes", "onSizesChange", "style"]);
+    const ctx = useScrollAreaContext();
+    const [computedStyle, setComputedStyle] = useState();
+    const ref = useRef(null);
+    const composeRefs = useMergedRef(forwardedRef, ref, ctx.onScrollbarXChange);
+    useEffect(() => {
+        if (ref.current)
+            setComputedStyle(getComputedStyle(ref.current));
+    }, [ref]);
+    return (React.createElement(Scrollbar, Object.assign({ "data-orientation": "horizontal" }, others, { ref: composeRefs, sizes: sizes, style: Object.assign(Object.assign({}, style), { ['--sa-thumb-width']: `${getThumbSize(sizes)}px` }), onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.x), onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.x), onWheelScroll: (event, maxScrollPos) => {
+            if (ctx.viewport) {
+                const scrollPos = ctx.viewport.scrollLeft + event.deltaX;
+                props.onWheelScroll(scrollPos);
+                if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+                    event.preventDefault();
+                }
+            }
+        }, onResize: () => {
+            if (ref.current && ctx.viewport && computedStyle) {
+                onSizesChange({
+                    content: ctx.viewport.scrollWidth,
+                    viewport: ctx.viewport.offsetWidth,
+                    scrollbar: {
+                        size: ref.current.clientWidth,
+                        paddingStart: toInt(computedStyle.paddingLeft),
+                        paddingEnd: toInt(computedStyle.paddingRight),
+                    },
+                });
+            }
+        } })));
+});
+
+export { ScrollAreaScrollbarX };
+//# sourceMappingURL=ScrollbarX.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollbarX.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useState, useEffect } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Scrollbar } from './Scrollbar';\nimport { ScrollAreaScrollbarAxisProps } from '../ScrollArea.types';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { isScrollingWithinScrollbarBounds, getThumbSize, toInt } from '../utils';\n\nexport const ScrollAreaScrollbarX = forwardRef<HTMLDivElement, ScrollAreaScrollbarAxisProps>(\n  (props, forwardedRef) => {\n    const { sizes, onSizesChange, style, ...others } = props;\n    const ctx = useScrollAreaContext();\n    const [computedStyle, setComputedStyle] = useState<CSSStyleDeclaration>();\n    const ref = useRef<HTMLDivElement>(null);\n    const composeRefs = useMergedRef(forwardedRef, ref, ctx.onScrollbarXChange);\n\n    useEffect(() => {\n      if (ref.current) setComputedStyle(getComputedStyle(ref.current));\n    }, [ref]);\n\n    return (\n      <Scrollbar\n        data-orientation=\"horizontal\"\n        {...others}\n        ref={composeRefs}\n        sizes={sizes}\n        style={{\n          ...style,\n          ['--sa-thumb-width' as any]: `${getThumbSize(sizes)}px`,\n        }}\n        onThumbPointerDown={(pointerPos) => props.onThumbPointerDown(pointerPos.x)}\n        onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.x)}\n        onWheelScroll={(event, maxScrollPos) => {\n          if (ctx.viewport) {\n            const scrollPos = ctx.viewport.scrollLeft + event.deltaX;\n            props.onWheelScroll(scrollPos);\n            if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n              event.preventDefault();\n            }\n          }\n        }}\n        onResize={() => {\n          if (ref.current && ctx.viewport && computedStyle) {\n            onSizesChange({\n              content: ctx.viewport.scrollWidth,\n              viewport: ctx.viewport.offsetWidth,\n              scrollbar: {\n                size: ref.current.clientWidth,\n                paddingStart: toInt(computedStyle.paddingLeft),\n                paddingEnd: toInt(computedStyle.paddingRight),\n              },\n            });\n          }\n        }}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;MAOa,oBAAoB,GAAG,UAAU,CAC5C,CAAC,KAAK,EAAE,YAAY;IAClB,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAAlD,mCAA0C,CAAQ,CAAC;IACzD,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAuB,CAAC;IAC1E,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,YAAY,CAAC,YAAY,EAAE,GAAG,EAAE,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAE5E,SAAS,CAAC;QACR,IAAI,GAAG,CAAC,OAAO;YAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;KAClE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,QACE,oBAAC,SAAS,sCACS,YAAY,IACzB,MAAM,IACV,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,kCACA,KAAK,KACR,CAAC,kBAAyB,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,KAEzD,kBAAkB,EAAE,CAAC,UAAU,KAAK,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1E,YAAY,EAAE,CAAC,UAAU,KAAK,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY;YACjC,IAAI,GAAG,CAAC,QAAQ,EAAE;gBAChB,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;gBACzD,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBAC/B,IAAI,gCAAgC,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE;oBAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;iBACxB;aACF;SACF,EACD,QAAQ,EAAE;YACR,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,QAAQ,IAAI,aAAa,EAAE;gBAChD,aAAa,CAAC;oBACZ,OAAO,EAAE,GAAG,CAAC,QAAQ,CAAC,WAAW;oBACjC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,WAAW;oBAClC,SAAS,EAAE;wBACT,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,WAAW;wBAC7B,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC;wBAC9C,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;qBAC9C;iBACF,CAAC,CAAC;aACJ;SACF,IACD,EACF;AACJ,CAAC;;;;"}

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.js

@@ -0,0 +1,44 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef, useEffect } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { Scrollbar } from './Scrollbar.js';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { getThumbSize } from '../utils/get-thumb-size.js';
+import { isScrollingWithinScrollbarBounds } from '../utils/is-scrolling-within-scrollbar-bounds.js';
+import { toInt } from '../utils/to-int.js';
+
+const ScrollAreaScrollbarY = forwardRef((props, forwardedRef) => {
+    const { sizes, onSizesChange, style } = props, others = __rest(props, ["sizes", "onSizesChange", "style"]);
+    const context = useScrollAreaContext();
+    const [computedStyle, setComputedStyle] = React.useState();
+    const ref = useRef(null);
+    const composeRefs = useMergedRef(forwardedRef, ref, context.onScrollbarYChange);
+    useEffect(() => {
+        if (ref.current)
+            setComputedStyle(getComputedStyle(ref.current));
+    }, [ref]);
+    return (React.createElement(Scrollbar, Object.assign({}, others, { "data-orientation": "vertical", ref: composeRefs, sizes: sizes, style: Object.assign({ ['--sa-thumb-height']: `${getThumbSize(sizes)}px` }, style), onThumbPointerDown: (pointerPos) => props.onThumbPointerDown(pointerPos.y), onDragScroll: (pointerPos) => props.onDragScroll(pointerPos.y), onWheelScroll: (event, maxScrollPos) => {
+            if (context.viewport) {
+                const scrollPos = context.viewport.scrollTop + event.deltaY;
+                props.onWheelScroll(scrollPos);
+                if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {
+                    event.preventDefault();
+                }
+            }
+        }, onResize: () => {
+            if (ref.current && context.viewport && computedStyle) {
+                onSizesChange({
+                    content: context.viewport.scrollHeight,
+                    viewport: context.viewport.offsetHeight,
+                    scrollbar: {
+                        size: ref.current.clientHeight,
+                        paddingStart: toInt(computedStyle.paddingTop),
+                        paddingEnd: toInt(computedStyle.paddingBottom),
+                    },
+                });
+            }
+        } })));
+});
+
+export { ScrollAreaScrollbarY };
+//# sourceMappingURL=ScrollbarY.js.map

package/esm/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollbarY.js","sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Scrollbar } from './Scrollbar';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { ScrollAreaScrollbarAxisProps } from '../ScrollArea.types';\nimport { isScrollingWithinScrollbarBounds, getThumbSize, toInt } from '../utils';\n\nexport const ScrollAreaScrollbarY = forwardRef<HTMLDivElement, ScrollAreaScrollbarAxisProps>(\n  (props, forwardedRef) => {\n    const { sizes, onSizesChange, style, ...others } = props;\n    const context = useScrollAreaContext();\n    const [computedStyle, setComputedStyle] = React.useState<CSSStyleDeclaration>();\n    const ref = useRef<HTMLDivElement>(null);\n    const composeRefs = useMergedRef(forwardedRef, ref, context.onScrollbarYChange);\n\n    useEffect(() => {\n      if (ref.current) setComputedStyle(getComputedStyle(ref.current));\n    }, [ref]);\n\n    return (\n      <Scrollbar\n        {...others}\n        data-orientation=\"vertical\"\n        ref={composeRefs}\n        sizes={sizes}\n        style={{\n          ['--sa-thumb-height' as any]: `${getThumbSize(sizes)}px`,\n          ...style,\n        }}\n        onThumbPointerDown={(pointerPos) => props.onThumbPointerDown(pointerPos.y)}\n        onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.y)}\n        onWheelScroll={(event, maxScrollPos) => {\n          if (context.viewport) {\n            const scrollPos = context.viewport.scrollTop + event.deltaY;\n            props.onWheelScroll(scrollPos);\n            if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n              event.preventDefault();\n            }\n          }\n        }}\n        onResize={() => {\n          if (ref.current && context.viewport && computedStyle) {\n            onSizesChange({\n              content: context.viewport.scrollHeight,\n              viewport: context.viewport.offsetHeight,\n              scrollbar: {\n                size: ref.current.clientHeight,\n                paddingStart: toInt(computedStyle.paddingTop),\n                paddingEnd: toInt(computedStyle.paddingBottom),\n              },\n            });\n          }\n        }}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;MAOa,oBAAoB,GAAG,UAAU,CAC5C,CAAC,KAAK,EAAE,YAAY;IAClB,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAAlD,mCAA0C,CAAQ,CAAC;IACzD,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAuB,CAAC;IAChF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,YAAY,CAAC,YAAY,EAAE,GAAG,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAEhF,SAAS,CAAC;QACR,IAAI,GAAG,CAAC,OAAO;YAAE,gBAAgB,CAAC,gBAAgB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;KAClE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,QACE,oBAAC,SAAS,oBACJ,MAAM,wBACO,UAAU,EAC3B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,kBACH,CAAC,mBAA0B,GAAG,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,IACrD,KAAK,GAEV,kBAAkB,EAAE,CAAC,UAAU,KAAK,KAAK,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC1E,YAAY,EAAE,CAAC,UAAU,KAAK,KAAK,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9D,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY;YACjC,IAAI,OAAO,CAAC,QAAQ,EAAE;gBACpB,MAAM,SAAS,GAAG,OAAO,CAAC,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC5D,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBAC/B,IAAI,gCAAgC,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE;oBAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;iBACxB;aACF;SACF,EACD,QAAQ,EAAE;YACR,IAAI,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,QAAQ,IAAI,aAAa,EAAE;gBACpD,aAAa,CAAC;oBACZ,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,YAAY;oBACtC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,YAAY;oBACvC,SAAS,EAAE;wBACT,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,YAAY;wBAC9B,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;wBAC7C,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;qBAC/C;iBACF,CAAC,CAAC;aACJ;SACF,IACD,EACF;AACJ,CAAC;;;;"}