@mantine/core 6.0.11 → 7.0.0-alpha.10

package/cjs/components/Portal/Portal.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('react-dom');
+var hooks = require('@mantine/hooks');
+var useProps = require('../../core/MantineProvider/use-props/use-props.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultProps = {};
+const Portal = React.forwardRef((props, ref) => {
+    const _a = useProps.useProps('Portal', defaultProps, props), { children, target, className } = _a, others = tslib.__rest(_a, ["children", "target", "className"]);
+    const [mounted, setMounted] = React.useState(false);
+    const nodeRef = React.useRef(null);
+    hooks.useIsomorphicEffect(() => {
+        setMounted(true);
+        nodeRef.current = !target
+            ? document.createElement('div')
+            : typeof target === 'string'
+                ? document.querySelector(target)
+                : target;
+        if (!target && nodeRef.current) {
+            document.body.appendChild(nodeRef.current);
+        }
+        return () => {
+            if (!target && nodeRef.current) {
+                document.body.removeChild(nodeRef.current);
+            }
+        };
+    }, [target]);
+    if (!mounted || !nodeRef.current) {
+        return null;
+    }
+    return reactDom.createPortal(React__default.createElement("div", Object.assign({ className: className, ref: ref }, others), children), nodeRef.current);
+});
+Portal.displayName = '@mantine/core/Portal';
+
+exports.Portal = Portal;
+//# sourceMappingURL=Portal.js.map

package/cjs/components/Portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":["../../../src/components/Portal/Portal.tsx"],"sourcesContent":["import React, { useRef, useState, forwardRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport { useProps } from '../../core';\n\nexport interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Portal children, for example, custom modal or popover */\n  children: React.ReactNode;\n\n  /** Element inside which portal should be created, by default a new div element is created and appended to the `document.body` */\n  target?: HTMLElement | string;\n}\n\nconst defaultProps: Partial<PortalProps> = {};\n\nexport const Portal = forwardRef<HTMLDivElement, PortalProps>((props, ref) => {\n  const { children, target, className, ...others } = useProps('Portal', defaultProps, props);\n\n  const [mounted, setMounted] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    setMounted(true);\n    nodeRef.current = !target\n      ? document.createElement('div')\n      : typeof target === 'string'\n      ? document.querySelector(target)\n      : target;\n\n    if (!target && nodeRef.current) {\n      document.body.appendChild(nodeRef.current);\n    }\n\n    return () => {\n      if (!target && nodeRef.current) {\n        document.body.removeChild(nodeRef.current);\n      }\n    };\n  }, [target]);\n\n  if (!mounted || !nodeRef.current) {\n    return null;\n  }\n\n  return createPortal(\n    <div className={className} ref={ref} {...others}>\n      {children}\n    </div>,\n    nodeRef.current\n  );\n});\n\nPortal.displayName = '@mantine/core/Portal';\n"],"names":["forwardRef","useProps","useState","useRef","useIsomorphicEffect","createPortal","React"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,YAAY,GAAyB,EAAE,CAAC;MAEjC,MAAM,GAAGA,gBAAU,CAA8B,CAAC,KAAK,EAAE,GAAG;IACvE,MAAM,KAA6CC,iBAAQ,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,EAApF,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,OAAuD,EAAlD,MAAM,oBAAxC,mCAA0C,CAA0C,CAAC;IAE3F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAGC,YAAM,CAAqB,IAAI,CAAC,CAAC;IAEjDC,yBAAmB,CAAC;QAClB,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,OAAO,CAAC,OAAO,GAAG,CAAC,MAAM;cACrB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;cAC7B,OAAO,MAAM,KAAK,QAAQ;kBAC1B,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;kBAC9B,MAAM,CAAC;QAEX,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;YAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC5C;QAED,OAAO;YACL,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,OAAO,EAAE;gBAC9B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aAC5C;SACF,CAAC;KACH,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAOC,qBAAY,CACjBC,oDAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAM,MAAM,GAC5C,QAAQ,CACL,EACN,OAAO,CAAC,OAAO,CAChB,CAAC;AACJ,CAAC,EAAE;AAEH,MAAM,CAAC,WAAW,GAAG,sBAAsB;;;;"}

package/cjs/components/ScrollArea/ScrollArea.context.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var createSafeContext = require('../../core/utils/create-safe-context/create-safe-context.js');
+
+const [ScrollAreaProvider, useScrollAreaContext] = createSafeContext.createSafeContext('ScrollArea.Root component was not found in tree');
+
+exports.ScrollAreaProvider = ScrollAreaProvider;
+exports.useScrollAreaContext = useScrollAreaContext;
+//# sourceMappingURL=ScrollArea.context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.context.js","sources":["../../../src/components/ScrollArea/ScrollArea.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface ScrollAreaContextValue {\n  type: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n  scrollHideDelay: number;\n  scrollArea: HTMLDivElement | null;\n  viewport: HTMLDivElement | null;\n  onViewportChange(viewport: HTMLDivElement | null): void;\n  content: HTMLDivElement | null;\n  onContentChange(content: HTMLDivElement): void;\n  scrollbarX: HTMLDivElement | null;\n  onScrollbarXChange(scrollbar: HTMLDivElement | null): void;\n  scrollbarXEnabled: boolean;\n  onScrollbarXEnabledChange(rendered: boolean): void;\n  scrollbarY: HTMLDivElement | null;\n  onScrollbarYChange(scrollbar: HTMLDivElement | null): void;\n  scrollbarYEnabled: boolean;\n  onScrollbarYEnabledChange(rendered: boolean): void;\n  onCornerWidthChange(width: number): void;\n  onCornerHeightChange(height: number): void;\n}\n\nexport const [ScrollAreaProvider, useScrollAreaContext] = createSafeContext<ScrollAreaContextValue>(\n  'ScrollArea.Root component was not found in tree'\n);\n"],"names":["createSafeContext"],"mappings":";;;;;;MAsBa,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,GAAGA,mCAAiB,CACzE,iDAAiD;;;;;"}

package/cjs/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ScrollAreaScrollbar = require('./ScrollAreaScrollbar/ScrollAreaScrollbar.js');
+var ScrollAreaCorner = require('./ScrollAreaCorner/ScrollAreaCorner.js');
+var ScrollAreaRoot = require('./ScrollAreaRoot/ScrollAreaRoot.js');
+var ScrollAreaViewport = require('./ScrollAreaViewport/ScrollAreaViewport.js');
+var ScrollArea_module = require('./ScrollArea.module.css.js');
+var ScrollAreaThumb = require('./ScrollAreaThumb/ScrollAreaThumb.js');
+var factory = require('../../core/factory/factory.js');
+var useProps = require('../../core/MantineProvider/use-props/use-props.js');
+var useStyles = require('../../core/styles-api/use-styles/use-styles.js');
+var Box = require('../../core/Box/Box.js');
+var createVarsResolver = require('../../core/styles-api/create-vars-resolver/create-vars-resolver.js');
+var rem = require('../../core/utils/units-converters/rem.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultProps = {
+    scrollbarSize: 12,
+    scrollHideDelay: 1000,
+    type: 'hover',
+};
+const varsResolver = createVarsResolver.createVarsResolver((_, { scrollbarSize }) => ({
+    root: {
+        '--scrollarea-scrollbar-size': rem.rem(scrollbarSize),
+    },
+}));
+const ScrollArea = factory.factory((_props, ref) => {
+    const props = useProps.useProps('ScrollArea', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, scrollbarSize, vars, type, scrollHideDelay, viewportProps, viewportRef, onScrollPositionChange, children, offsetScrollbars } = props, others = tslib.__rest(props, ["classNames", "className", "style", "styles", "unstyled", "scrollbarSize", "vars", "type", "scrollHideDelay", "viewportProps", "viewportRef", "onScrollPositionChange", "children", "offsetScrollbars"]);
+    const [scrollbarHovered, setScrollbarHovered] = React.useState(false);
+    const getStyles = useStyles.useStyles({
+        name: 'ScrollArea',
+        props,
+        classes: ScrollArea_module['default'],
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+        varsResolver,
+    });
+    return (React__default.createElement(ScrollAreaRoot.ScrollAreaRoot, Object.assign({ type: type === 'never' ? 'always' : type, scrollHideDelay: scrollHideDelay, ref: ref }, getStyles('root'), others),
+        React__default.createElement(ScrollAreaViewport.ScrollAreaViewport, Object.assign({}, viewportProps, getStyles('viewport'), { ref: viewportRef, "data-offset-scrollbars": offsetScrollbars || undefined, onScroll: typeof onScrollPositionChange === 'function'
+                ? ({ currentTarget }) => onScrollPositionChange({
+                    x: currentTarget.scrollLeft,
+                    y: currentTarget.scrollTop,
+                })
+                : undefined }), children),
+        React__default.createElement(ScrollAreaScrollbar.ScrollAreaScrollbar, Object.assign({}, getStyles('scrollbar'), { orientation: "horizontal", "data-hidden": type === 'never' || undefined, forceMount: true, onMouseEnter: () => setScrollbarHovered(true), onMouseLeave: () => setScrollbarHovered(false) }),
+            React__default.createElement(ScrollAreaThumb.ScrollAreaThumb, Object.assign({}, getStyles('thumb')))),
+        React__default.createElement(ScrollAreaScrollbar.ScrollAreaScrollbar, Object.assign({}, getStyles('scrollbar'), { orientation: "vertical", "data-hidden": type === 'never' || undefined, forceMount: true, onMouseEnter: () => setScrollbarHovered(true), onMouseLeave: () => setScrollbarHovered(false) }),
+            React__default.createElement(ScrollAreaThumb.ScrollAreaThumb, Object.assign({}, getStyles('thumb')))),
+        React__default.createElement(ScrollAreaCorner.ScrollAreaCorner, Object.assign({}, getStyles('corner'), { "data-hovered": scrollbarHovered || undefined, "data-hidden": type === 'never' || undefined }))));
+});
+ScrollArea.displayName = '@mantine/core/ScrollArea';
+const ScrollAreaAutosize = factory.factory((props, ref) => {
+    const _a = useProps.useProps('ScrollAreaAutosize', defaultProps, props), { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, style, vars } = _a, others = tslib.__rest(_a, ["children", "classNames", "styles", "scrollbarSize", "scrollHideDelay", "type", "dir", "offsetScrollbars", "viewportRef", "onScrollPositionChange", "unstyled", "variant", "viewportProps", "style", "vars"]);
+    return (React__default.createElement(Box.Box, Object.assign({}, others, { ref: ref, style: [{ display: 'flex' }, style] }),
+        React__default.createElement(Box.Box, { style: { display: 'flex', flexDirection: 'column', flex: 1 } },
+            React__default.createElement(ScrollArea, { classNames: classNames, styles: styles, scrollHideDelay: scrollHideDelay, scrollbarSize: scrollbarSize, type: type, dir: dir, offsetScrollbars: offsetScrollbars, viewportRef: viewportRef, onScrollPositionChange: onScrollPositionChange, unstyled: unstyled, variant: variant, viewportProps: viewportProps, vars: vars }, children))));
+});
+ScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';
+ScrollArea.Autosize = ScrollAreaAutosize;
+
+exports.ScrollArea = ScrollArea;
+exports.ScrollAreaAutosize = ScrollAreaAutosize;
+//# sourceMappingURL=ScrollArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  rem,\n  createVarsResolver,\n  Factory,\n} from '../../core';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport classes from './ScrollArea.module.css';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\n\nexport type ScrollAreaStylesNames = 'root' | 'viewport' | 'scrollbar' | 'thumb' | 'corner';\nexport type ScrollAreaVariant = string;\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps,\n    StylesApiProps<ScrollAreaFactory>,\n    ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 0.75rem */\n  scrollbarSize?: number | string;\n\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  /** Determines whether scrollbars should be offset with padding, `false` by default */\n  offsetScrollbars?: boolean;\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentPropsWithRef<'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\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {}\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\nconst defaultProps: Partial<ScrollAreaProps> = {\n  scrollbarSize: 12,\n  scrollHideDelay: 1000,\n  type: 'hover',\n};\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>((_, { scrollbarSize }) => ({\n  root: {\n    '--scrollarea-scrollbar-size': rem(scrollbarSize),\n  },\n}));\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props, ref) => {\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    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(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    vars,\n    varsResolver,\n  });\n\n  return (\n    <ScrollAreaRoot\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      ref={ref}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport')}\n        ref={viewportRef}\n        data-offset-scrollbars={offsetScrollbars || undefined}\n        onScroll={\n          typeof onScrollPositionChange === 'function'\n            ? ({ currentTarget }) =>\n                onScrollPositionChange({\n                  x: currentTarget.scrollLeft,\n                  y: currentTarget.scrollTop,\n                })\n            : undefined\n        }\n      >\n        {children}\n      </ScrollAreaViewport>\n      <ScrollAreaScrollbar\n        {...getStyles('scrollbar')}\n        orientation=\"horizontal\"\n        data-hidden={type === 'never' || undefined}\n        forceMount\n        onMouseEnter={() => setScrollbarHovered(true)}\n        onMouseLeave={() => setScrollbarHovered(false)}\n      >\n        <ScrollAreaThumb {...getStyles('thumb')} />\n      </ScrollAreaScrollbar>\n      <ScrollAreaScrollbar\n        {...getStyles('scrollbar')}\n        orientation=\"vertical\"\n        data-hidden={type === 'never' || undefined}\n        forceMount\n        onMouseEnter={() => setScrollbarHovered(true)}\n        onMouseLeave={() => setScrollbarHovered(false)}\n      >\n        <ScrollAreaThumb {...getStyles('thumb')} />\n      </ScrollAreaScrollbar>\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<ScrollAreaFactory>((props, ref) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    style,\n    vars,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props);\n\n  return (\n    <Box {...others} ref={ref} style={[{ display: 'flex' }, style]}>\n      <Box style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          viewportRef={viewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollArea.Autosize = ScrollAreaAutosize;\n"],"names":["createVarsResolver","rem","factory","useProps","useState","useStyles","classes","React","ScrollAreaRoot","ScrollAreaViewport","ScrollAreaScrollbar","ScrollAreaThumb","ScrollAreaCorner","Box"],"mappings":"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"}

package/cjs/components/ScrollArea/ScrollArea.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classes = {"root":"mantine--CW641A","viewport":"mantine-VMS5T20","viewportInner":"mantine-u-8GE5z","scrollbar":"mantine-zngBbDv","thumb":"mantine-5u72r1f","corner":"mantine-29iF76-"};
+
+exports.default = classes;
+//# sourceMappingURL=ScrollArea.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/cjs/components/ScrollArea/ScrollAreaCorner/ScrollAreaCorner.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var useResizeObserver = require('../use-resize-observer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Corner = React__default.forwardRef((props, ref) => {
+    const { style } = props, others = tslib.__rest(props, ["style"]);
+    const ctx = ScrollArea_context.useScrollAreaContext();
+    const [width, setWidth] = React__default.useState(0);
+    const [height, setHeight] = React__default.useState(0);
+    const hasSize = Boolean(width && height);
+    useResizeObserver.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.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__default.createElement("div", Object.assign({}, others, { ref: ref, style: Object.assign(Object.assign({}, style), { width, height }) })) : null;
+});
+const ScrollAreaCorner = React__default.forwardRef((props, ref) => {
+    const ctx = ScrollArea_context.useScrollAreaContext();
+    const hasBothScrollbarsVisible = Boolean(ctx.scrollbarX && ctx.scrollbarY);
+    const hasCorner = ctx.type !== 'scroll' && hasBothScrollbarsVisible;
+    return hasCorner ? React__default.createElement(Corner, Object.assign({}, props, { ref: ref })) : null;
+});
+
+exports.Corner = Corner;
+exports.ScrollAreaCorner = ScrollAreaCorner;
+//# sourceMappingURL=ScrollAreaCorner.js.map

package/cjs/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":["React","useScrollAreaContext","useResizeObserver"],"mappings":";;;;;;;;;;;;;MAMa,MAAM,GAAGA,cAAK,CAAC,UAAU,CAAwC,CAAC,KAAK,EAAE,GAAG;IACvF,MAAM,EAAE,KAAK,KAAgB,KAAK,EAAhB,MAAM,gBAAK,KAAK,EAA5B,SAAoB,CAAQ,CAAC;IACnC,MAAM,GAAG,GAAGC,uCAAoB,EAAE,CAAC;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGD,cAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC;IAEzCE,mCAAiB,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;IAEHA,mCAAiB,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,GAAGF,sDAAS,MAAM,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,kCAAO,KAAK,KAAE,KAAK,EAAE,MAAM,OAAM,GAAG,IAAI,CAAC;AAC5F,CAAC,EAAE;MAEU,gBAAgB,GAAGA,cAAK,CAAC,UAAU,CAC9C,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,GAAG,GAAGC,uCAAoB,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,GAAGD,6BAAC,MAAM,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5D,CAAC;;;;;"}

package/cjs/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var useProps = require('../../../core/MantineProvider/use-props/use-props.js');
+var Box = require('../../../core/Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const defaultProps = {
+    scrollHideDelay: 1000,
+    type: 'hover',
+};
+const ScrollAreaRoot = React.forwardRef((_props, ref) => {
+    const props = useProps.useProps('ScrollAreaRoot', defaultProps, _props);
+    const { type, scrollHideDelay } = props, others = tslib.__rest(props, ["type", "scrollHideDelay"]);
+    const [scrollArea, setScrollArea] = React.useState(null);
+    const [viewport, setViewport] = React.useState(null);
+    const [content, setContent] = React.useState(null);
+    const [scrollbarX, setScrollbarX] = React.useState(null);
+    const [scrollbarY, setScrollbarY] = React.useState(null);
+    const [cornerWidth, setCornerWidth] = React.useState(0);
+    const [cornerHeight, setCornerHeight] = React.useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = React.useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = React.useState(false);
+    const rootRef = hooks.useMergedRef(ref, (node) => setScrollArea(node));
+    return (React__default.createElement(ScrollArea_context.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__default.createElement(Box.Box, Object.assign({}, others, { ref: rootRef, __vars: {
+                '--sa-corner-width': `${cornerWidth}px`,
+                '--sa-corner-height': `${cornerHeight}px`,
+            } }))));
+});
+ScrollAreaRoot.displayName = '@mantine/core/ScrollAreaRoot';
+
+exports.ScrollAreaRoot = ScrollAreaRoot;
+//# sourceMappingURL=ScrollAreaRoot.js.map

package/cjs/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":["forwardRef","useProps","useState","useMergedRef","React","ScrollAreaProvider","Box"],"mappings":";;;;;;;;;;;;;;;AA6CA,MAAM,YAAY,GAAiC;IACjD,eAAe,EAAE,IAAI;IACrB,IAAI,EAAE,OAAO;CACd,CAAC;MAEW,cAAc,GAAGA,gBAAU,CAAsC,CAAC,MAAM,EAAE,GAAG;IACxF,MAAM,KAAK,GAAGC,iBAAQ,CAAC,gBAAgB,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IAC/D,MAAM,EAAE,IAAI,EAAE,eAAe,KAAgB,KAAK,EAAhB,MAAM,gBAAK,KAAK,EAA5C,2BAAoC,CAAQ,CAAC;IAEnD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,OAAO,GAAGC,kBAAY,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjE,QACEC,6BAACC,qCAAkB,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;QAEDD,6BAACE,OAAG,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/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbar.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var ScrollAreaScrollbarVisible = require('./ScrollAreaScrollbarVisible.js');
+var ScrollAreaScrollbarHover = require('./ScrollAreaScrollbarHover.js');
+var ScrollAreaScrollbarScroll = require('./ScrollAreaScrollbarScroll.js');
+var ScrollAreaScrollbarAuto = require('./ScrollAreaScrollbarAuto.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollAreaScrollbar = React__default.forwardRef((props, forwardedRef) => {
+    const { forceMount } = props, scrollbarProps = tslib.__rest(props, ["forceMount"]);
+    const context = ScrollArea_context.useScrollAreaContext();
+    const { onScrollbarXEnabledChange, onScrollbarYEnabledChange } = context;
+    const isHorizontal = props.orientation === 'horizontal';
+    React__default.useEffect(() => {
+        isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+        return () => {
+            isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+        };
+    }, [isHorizontal, onScrollbarXEnabledChange, onScrollbarYEnabledChange]);
+    return context.type === 'hover' ? (React__default.createElement(ScrollAreaScrollbarHover.ScrollAreaScrollbarHover, Object.assign({}, scrollbarProps, { ref: forwardedRef, forceMount: forceMount }))) : context.type === 'scroll' ? (React__default.createElement(ScrollAreaScrollbarScroll.ScrollAreaScrollbarScroll, Object.assign({}, scrollbarProps, { ref: forwardedRef, forceMount: forceMount }))) : context.type === 'auto' ? (React__default.createElement(ScrollAreaScrollbarAuto.ScrollAreaScrollbarAuto, Object.assign({}, scrollbarProps, { ref: forwardedRef, forceMount: forceMount }))) : context.type === 'always' ? (React__default.createElement(ScrollAreaScrollbarVisible.ScrollAreaScrollbarVisible, Object.assign({}, scrollbarProps, { ref: forwardedRef }))) : null;
+});
+
+exports.ScrollAreaScrollbar = ScrollAreaScrollbar;
+//# sourceMappingURL=ScrollAreaScrollbar.js.map

package/cjs/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":["React","useScrollAreaContext","ScrollAreaScrollbarHover","ScrollAreaScrollbarScroll","ScrollAreaScrollbarAuto","ScrollAreaScrollbarVisible"],"mappings":";;;;;;;;;;;;;;;;MAca,mBAAmB,GAAGA,cAAK,CAAC,UAAU,CACjD,CAAC,KAAK,EAAE,YAAY;IAClB,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,gBAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,OAAO,GAAGC,uCAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,yBAAyB,EAAE,yBAAyB,EAAE,GAAG,OAAO,CAAC;IACzE,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;IAExDD,cAAK,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,IAC7BA,6BAACE,iDAAwB,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,IAAI,IACzF,OAAO,CAAC,IAAI,KAAK,QAAQ,IAC3BF,6BAACG,mDAAyB,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,IAAI,IAC1F,OAAO,CAAC,IAAI,KAAK,MAAM,IACzBH,6BAACI,+CAAuB,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,IAAI,IACxF,OAAO,CAAC,IAAI,KAAK,QAAQ,IAC3BJ,6BAACK,qDAA0B,oBAAK,cAAc,IAAE,GAAG,EAAE,YAAY,IAAI,IACnE,IAAI,CAAC;AACX,CAAC;;;;"}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var ScrollAreaScrollbarVisible = require('./ScrollAreaScrollbarVisible.js');
+var useResizeObserver = require('../use-resize-observer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollAreaScrollbarAuto = React.forwardRef((props, ref) => {
+    const context = ScrollArea_context.useScrollAreaContext();
+    const { forceMount } = props, scrollbarProps = tslib.__rest(props, ["forceMount"]);
+    const [visible, setVisible] = React.useState(false);
+    const isHorizontal = props.orientation === 'horizontal';
+    const handleResize = hooks.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.useResizeObserver(context.viewport, handleResize);
+    useResizeObserver.useResizeObserver(context.content, handleResize);
+    if (forceMount || visible) {
+        return (React__default.createElement(ScrollAreaScrollbarVisible.ScrollAreaScrollbarVisible, Object.assign({ "data-state": visible ? 'visible' : 'hidden' }, scrollbarProps, { ref: ref })));
+    }
+    return null;
+});
+
+exports.ScrollAreaScrollbarAuto = ScrollAreaScrollbarAuto;
+//# sourceMappingURL=ScrollAreaScrollbarAuto.js.map

package/cjs/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":["forwardRef","useScrollAreaContext","useState","useDebounceCallback","useResizeObserver","React","ScrollAreaScrollbarVisible"],"mappings":";;;;;;;;;;;;;;;MAaa,uBAAuB,GAAGA,gBAAU,CAC/C,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,OAAO,GAAGC,uCAAoB,EAAE,CAAC;IACvC,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,gBAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;IACxD,MAAM,YAAY,GAAGC,yBAAmB,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;IAEPC,mCAAiB,CAAC,OAAO,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAClDA,mCAAiB,CAAC,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAEjD,IAAI,UAAU,IAAI,OAAO,EAAE;QACzB,QACEC,6BAACC,qDAA0B,gCACb,OAAO,GAAG,SAAS,GAAG,QAAQ,IACtC,cAAc,IAClB,GAAG,EAAE,GAAG,IACR,EACF;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;;;;"}

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

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var ScrollAreaScrollbarAuto = require('./ScrollAreaScrollbarAuto.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollAreaScrollbarHover = React.forwardRef((props, ref) => {
+    const { forceMount } = props, scrollbarProps = tslib.__rest(props, ["forceMount"]);
+    const context = ScrollArea_context.useScrollAreaContext();
+    const [visible, setVisible] = React.useState(false);
+    React.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__default.createElement(ScrollAreaScrollbarAuto.ScrollAreaScrollbarAuto, Object.assign({ "data-state": visible ? 'visible' : 'hidden' }, scrollbarProps, { ref: ref })));
+    }
+    return null;
+});
+
+exports.ScrollAreaScrollbarHover = ScrollAreaScrollbarHover;
+//# sourceMappingURL=ScrollAreaScrollbarHover.js.map

package/cjs/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":["forwardRef","useScrollAreaContext","useState","useEffect","React","ScrollAreaScrollbarAuto"],"mappings":";;;;;;;;;;;;;MAQa,wBAAwB,GAAGA,gBAAU,CAChD,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,gBAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,OAAO,GAAGC,uCAAoB,EAAE,CAAC;IACvC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;IAE9CC,eAAS,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,QACEC,6BAACC,+CAAuB,gCACV,OAAO,GAAG,SAAS,GAAG,QAAQ,IACtC,cAAc,IAClB,GAAG,EAAE,GAAG,IACR,EACF;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;;;;"}

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

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var ScrollAreaScrollbarVisible = require('./ScrollAreaScrollbarVisible.js');
+var composeEventHandlers = require('../utils/compose-event-handlers.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollAreaScrollbarScroll = React.forwardRef((props, red) => {
+    const { forceMount } = props, scrollbarProps = tslib.__rest(props, ["forceMount"]);
+    const context = ScrollArea_context.useScrollAreaContext();
+    const isHorizontal = props.orientation === 'horizontal';
+    const [state, setState] = React.useState('hidden');
+    const debounceScrollEnd = hooks.useDebounceCallback(() => setState('idle'), 100);
+    React.useEffect(() => {
+        if (state === 'idle') {
+            const hideTimer = window.setTimeout(() => setState('hidden'), context.scrollHideDelay);
+            return () => window.clearTimeout(hideTimer);
+        }
+        return undefined;
+    }, [state, context.scrollHideDelay]);
+    React.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__default.createElement(ScrollAreaScrollbarVisible.ScrollAreaScrollbarVisible, Object.assign({ "data-state": state === 'hidden' ? 'hidden' : 'visible' }, scrollbarProps, { ref: red, onPointerEnter: composeEventHandlers.composeEventHandlers(props.onPointerEnter, () => setState('interacting')), onPointerLeave: composeEventHandlers.composeEventHandlers(props.onPointerLeave, () => setState('idle')) })));
+    }
+    return null;
+});
+
+exports.ScrollAreaScrollbarScroll = ScrollAreaScrollbarScroll;
+//# sourceMappingURL=ScrollAreaScrollbarScroll.js.map

package/cjs/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":["forwardRef","useScrollAreaContext","useState","useDebounceCallback","useEffect","React","ScrollAreaScrollbarVisible","composeEventHandlers"],"mappings":";;;;;;;;;;;;;;;MAaa,yBAAyB,GAAGA,gBAAU,CACjD,CAAC,KAAK,EAAE,GAAG;IACT,MAAM,EAAE,UAAU,KAAwB,KAAK,EAAxB,cAAc,gBAAK,KAAK,EAAzC,cAAiC,CAAQ,CAAC;IAChD,MAAM,OAAO,GAAGC,uCAAoB,EAAE,CAAC;IACvC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,CAAkD,QAAQ,CAAC,CAAC;IAC9F,MAAM,iBAAiB,GAAGC,yBAAmB,CAAC,MAAM,QAAQ,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAC;IAE3EC,eAAS,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;IAErCA,eAAS,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,QACEC,6BAACC,qDAA0B,gCACb,KAAK,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,IACjD,cAAc,IAClB,GAAG,EAAE,GAAG,EACR,cAAc,EAAEC,yCAAoB,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM,QAAQ,CAAC,aAAa,CAAC,CAAC,EACzF,cAAc,EAAEA,yCAAoB,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,IAClF,EACF;KACH;IAED,OAAO,IAAI,CAAC;AACd,CAAC;;;;"}

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

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ScrollArea_context = require('../ScrollArea.context.js');
+var ScrollbarX = require('./ScrollbarX.js');
+var ScrollbarY = require('./ScrollbarY.js');
+var getThumbRatio = require('../utils/get-thumb-ratio.js');
+var getThumbOffsetFromScroll = require('../utils/get-thumb-offset-from-scroll.js');
+var getScrollPositionFromPointer = require('../utils/get-scroll-position-from-pointer.js');
+var DirectionProvider = require('../../../core/DirectionProvider/DirectionProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ScrollAreaScrollbarVisible = React.forwardRef((props, forwardedRef) => {
+    const { orientation = 'vertical' } = props, scrollbarProps = tslib.__rest(props, ["orientation"]);
+    const { dir } = DirectionProvider.useDirection();
+    const context = ScrollArea_context.useScrollAreaContext();
+    const thumbRef = React.useRef(null);
+    const pointerOffsetRef = React.useRef(0);
+    const [sizes, setSizes] = React.useState({
+        content: 0,
+        viewport: 0,
+        scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },
+    });
+    const thumbRatio = getThumbRatio.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.getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);
+    if (orientation === 'horizontal') {
+        return (React__default.createElement(ScrollbarX.ScrollAreaScrollbarX, Object.assign({}, commonProps, { ref: forwardedRef, onThumbPositionChange: () => {
+                if (context.viewport && thumbRef.current) {
+                    const scrollPos = context.viewport.scrollLeft;
+                    const offset = getThumbOffsetFromScroll.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__default.createElement(ScrollbarY.ScrollAreaScrollbarY, Object.assign({}, commonProps, { ref: forwardedRef, onThumbPositionChange: () => {
+                if (context.viewport && thumbRef.current) {
+                    const scrollPos = context.viewport.scrollTop;
+                    const offset = getThumbOffsetFromScroll.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;
+});
+
+exports.ScrollAreaScrollbarVisible = ScrollAreaScrollbarVisible;
+//# sourceMappingURL=ScrollAreaScrollbarVisible.js.map