@mantine/core 9.4.3-alpha.0 → 9.5.1-alpha.0

package/esm/components/Modal/ModalStack.mjs

@@ -11,7 +11,7 @@ function ModalStack({ children }) {
 		value: {
 			stack,
 			addModal: (id, zIndex) => {
-				setStack((current) => [...new Set([...current, id])]);
+				setStack((current) => [.../* @__PURE__ */ new Set([...current, id])]);
 				setMaxZIndex((current) => typeof zIndex === "number" && typeof current === "number" ? Math.max(current, zIndex) : current);
 			},
 			removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),

package/esm/components/Modal/ModalStack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalStack.mjs","names":[],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n  stack: string[];\n  addModal: (id: string, zIndex: number | string) => void;\n  removeModal: (id: string) => void;\n  getZIndex: (id: string) => string;\n  currentId: string;\n  maxZIndex: string | number;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext | null>(null);\n\nexport interface ModalStackProps {\n  children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n  const [stack, setStack] = useState<string[]>([]);\n  const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n  return (\n    <ModalStackContext\n      value={{\n        stack,\n        addModal: (id, zIndex) => {\n          setStack((current) => [...new Set([...current, id])]);\n          setMaxZIndex((current) =>\n            typeof zIndex === 'number' && typeof current === 'number'\n              ? Math.max(current, zIndex)\n              : current\n          );\n        },\n        removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n        getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n        currentId: stack[stack.length - 1],\n        maxZIndex,\n      }}\n    >\n      {children}\n    </ModalStackContext>\n  );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;AAYA,MAAa,oBAAoB,cAAwC,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,YAAY,SAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA0B,iBAAiB,OAAO,CAAC;CAErF,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}
+{"version":3,"file":"ModalStack.mjs","names":[],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n  stack: string[];\n  addModal: (id: string, zIndex: number | string) => void;\n  removeModal: (id: string) => void;\n  getZIndex: (id: string) => string;\n  currentId: string;\n  maxZIndex: string | number;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext | null>(null);\n\nexport interface ModalStackProps {\n  children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n  const [stack, setStack] = useState<string[]>([]);\n  const [maxZIndex, setMaxZIndex] = useState<number | string>(getDefaultZIndex('modal'));\n\n  return (\n    <ModalStackContext\n      value={{\n        stack,\n        addModal: (id, zIndex) => {\n          setStack((current) => [...new Set([...current, id])]);\n          setMaxZIndex((current) =>\n            typeof zIndex === 'number' && typeof current === 'number'\n              ? Math.max(current, zIndex)\n              : current\n          );\n        },\n        removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n        getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n        currentId: stack[stack.length - 1],\n        maxZIndex,\n      }}\n    >\n      {children}\n    </ModalStackContext>\n  );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;AAYA,MAAa,oBAAoB,cAAwC,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,YAAY,SAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA0B,iBAAiB,OAAO,CAAC;CAErF,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}

package/esm/components/OverflowList/OverflowList.mjs

@@ -133,7 +133,8 @@ const OverflowList = genericFactory((_props) => {
 			if (!container) return false;
 			const containerWidth = container.getBoundingClientRect().width;
 			const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;
-			if (!fitsInRows([_overflowRef.current.getBoundingClientRect().width, ...rowData.children.map((child) => child.getBoundingClientRect().width)], containerWidth, columnGap)) {
+			const itemWidths = [_overflowRef.current.getBoundingClientRect().width, ...rowData.children.map((child) => child.getBoundingClientRect().width)];
+			if (!fitsInRows(itemWidths, containerWidth, columnGap)) {
 				setSubtractCount((c) => c + 1);
 				return true;
 			}

package/esm/components/OverflowList/OverflowList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowList.mjs","names":["Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, useMemo, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n  root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n  extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n  /** Array of items to display */\n  data: T[];\n\n  /** Function to render item */\n  renderItem: (item: T, index: number) => React.ReactNode;\n\n  /** Function to render hidden items */\n  renderOverflow: (items: T[]) => React.ReactNode;\n\n  /** Number of rows to display @default 1 */\n  maxRows?: number;\n\n  /** Maximum number of visible items @default Infinity */\n  maxVisibleItems?: number;\n\n  /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n  gap?: MantineSpacing;\n\n  /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */\n  collapseFrom?: 'start' | 'end';\n\n  /** A function to resolve a unique key for each item. Used to detect when the contents of `data`\n   * change (for example when items are reordered while the length stays the same) so the\n   * visible/overflow split can be recomputed. Required to detect reordering when `data` contains\n   * objects; for primitive items (strings, numbers) the item value is used by default. */\n  getItemKey?: (item: T, index: number) => React.Key;\n}\n\nexport type OverflowListFactory = Factory<{\n  props: OverflowListProps<any>;\n  ref: HTMLDivElement;\n  stylesNames: OverflowListStylesNames;\n  vars: OverflowListCssVariables;\n  signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxRows: 1,\n  maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n  root: {\n    '--ol-gap': getSpacing(gap),\n  },\n}));\n\nfunction getDataSignature<T>(\n  data: T[],\n  getItemKey: ((item: T, index: number) => React.Key) | undefined\n): string {\n  return data\n    .map((item, index) => {\n      if (getItemKey) {\n        return getItemKey(item, index);\n      }\n      return item !== null && (typeof item === 'object' || typeof item === 'function')\n        ? index\n        : String(item);\n    })\n    .join('\\u0000');\n}\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n  const props = useProps('OverflowList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    renderOverflow,\n    renderItem,\n    maxRows,\n    maxVisibleItems,\n    collapseFrom,\n    getItemKey,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<OverflowListFactory>({\n    name: 'OverflowList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [subtractCount, setSubtractCount] = useState(0);\n  const [phase, setPhase] = useState<'normal' | 'measuring' | 'measuring-overflow-indicator'>(\n    'normal'\n  );\n\n  const containerRef = useRef<HTMLElement>(null);\n  const rootRef = useMergedRef(containerRef, ref);\n  const finalVisibleCount = visibleCount - subtractCount;\n  const overflowCount = data.length - finalVisibleCount;\n  const showOverflow = overflowCount > 0 && phase !== 'measuring';\n  const isCollapseStart = collapseFrom === 'start';\n  const overflowItems = isCollapseStart\n    ? data.slice(0, data.length - finalVisibleCount)\n    : data.slice(finalVisibleCount);\n  const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;\n\n  const _overflowRef = useRef<HTMLElement>(null);\n  const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n  const dimensions = useDimensions(containerRef);\n  const dataKey = useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]);\n\n  useIsomorphicEffect(() => {\n    setPhase('measuring');\n    setVisibleCount(data.length);\n    setSubtractCount(0);\n  }, [dataKey, maxRows, collapseFrom]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring') {\n      countVisibleItems();\n      setPhase('measuring-overflow-indicator');\n    }\n  }, [phase]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring-overflow-indicator') {\n      const updateWasNeeded = updateOverflowIndicator();\n      if (!updateWasNeeded) {\n        setPhase('normal');\n      }\n    }\n  }, [phase, subtractCount]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'normal') {\n      setPhase('measuring');\n      setSubtractCount(0);\n    }\n  }, [dimensions]);\n\n  const fitsInRows = (\n    itemWidths: number[],\n    containerWidth: number,\n    columnGap: number,\n    startIndex = 0\n  ) => {\n    let rows = 1;\n    let rowWidth = 0;\n\n    for (let i = startIndex; i < itemWidths.length; i += 1) {\n      const width = itemWidths[i];\n      const needed = rowWidth > 0 ? width + columnGap : width;\n\n      if (rowWidth + needed > containerWidth && rowWidth > 0) {\n        rows++;\n        if (rows > maxRows!) {\n          return false;\n        }\n        rowWidth = width;\n      } else {\n        rowWidth += needed;\n      }\n    }\n\n    return true;\n  };\n\n  const countVisibleItems = () => {\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    if (isCollapseStart) {\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const children = rowData.children;\n      const widths = children.map((child) => child.getBoundingClientRect().width);\n\n      let count = 0;\n      for (let i = widths.length - 1; i >= 0; i--) {\n        if (!fitsInRows(widths, containerWidth, columnGap, i)) {\n          break;\n        }\n        count = widths.length - i;\n      }\n\n      count = Math.min(count, maxVisibleItems!);\n      setVisibleCount(count);\n      return;\n    }\n\n    if (data.length === 1) {\n      const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n      const containerWidth = container.getBoundingClientRect().width;\n      const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n      if (itemWidth > containerWidth) {\n        setVisibleCount(0);\n      } else {\n        setVisibleCount(1);\n      }\n\n      return;\n    }\n\n    const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n    let fittingCount = visibleRowPositions.reduce((acc, position) => {\n      return acc + rowData.itemsSizesMap[position].elements.size;\n    }, 0);\n\n    fittingCount = Math.min(fittingCount, maxVisibleItems);\n    setVisibleCount(fittingCount);\n  };\n\n  const updateOverflowIndicator = () => {\n    if (!_overflowRef.current) {\n      return false;\n    }\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return false;\n    }\n\n    const { rowPositions, itemsSizesMap } = rowData;\n\n    if (isCollapseStart) {\n      const container = containerRef.current;\n      if (!container) {\n        return false;\n      }\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const overflowWidth = _overflowRef.current.getBoundingClientRect().width;\n      const children = rowData.children;\n      const itemWidths = [\n        overflowWidth,\n        ...children.map((child) => child.getBoundingClientRect().width),\n      ];\n\n      if (!fitsInRows(itemWidths, containerWidth, columnGap)) {\n        setSubtractCount((c) => c + 1);\n        return true;\n      }\n\n      return false;\n    }\n\n    const overflowRect = _overflowRef.current.getBoundingClientRect();\n    const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n    const lastRowTop = rowPositions[rowPositions.length - 1];\n    const lastRow = itemsSizesMap[lastRowTop];\n\n    if (overflowMiddleY > lastRow.bottom) {\n      setSubtractCount((c) => c + 1);\n      return true;\n    }\n\n    return false;\n  };\n\n  const clonedOverflowElement = overflowElement\n    ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n    : null;\n\n  let finalItems = data;\n  if (maxVisibleItems) {\n    finalItems = isCollapseStart\n      ? finalItems.slice(-maxVisibleItems!)\n      : finalItems.slice(0, maxVisibleItems);\n  }\n\n  const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;\n\n  return (\n    <Box ref={rootRef} {...getStyles('root')} {...others}>\n      {isCollapseStart && clonedOverflowElement}\n\n      {finalItems.map((item, index) => {\n        const isVisible =\n          phase === 'measuring' ||\n          (isCollapseStart\n            ? index >= finalItems.length - finalVisibleCount\n            : index < finalVisibleCount);\n        if (!isVisible) {\n          return null;\n        }\n        const dataIndex = indexOffset + index;\n        const itemComponent = renderItem(item, dataIndex);\n\n        return <Fragment key={dataIndex}>{itemComponent}</Fragment>;\n      })}\n\n      {!isCollapseStart && clonedOverflowElement}\n    </Box>\n  );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n  export type Props = OverflowListProps;\n  export type Factory = OverflowListFactory;\n  export type StylesNames = OverflowListStylesNames;\n  export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}
+{"version":3,"file":"OverflowList.mjs","names":["Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, useMemo, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n  root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n  extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n  /** Array of items to display */\n  data: T[];\n\n  /** Function to render item */\n  renderItem: (item: T, index: number) => React.ReactNode;\n\n  /** Function to render hidden items */\n  renderOverflow: (items: T[]) => React.ReactNode;\n\n  /** Number of rows to display @default 1 */\n  maxRows?: number;\n\n  /** Maximum number of visible items @default Infinity */\n  maxVisibleItems?: number;\n\n  /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n  gap?: MantineSpacing;\n\n  /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */\n  collapseFrom?: 'start' | 'end';\n\n  /** A function to resolve a unique key for each item. Used to detect when the contents of `data`\n   * change (for example when items are reordered while the length stays the same) so the\n   * visible/overflow split can be recomputed. Required to detect reordering when `data` contains\n   * objects; for primitive items (strings, numbers) the item value is used by default. */\n  getItemKey?: (item: T, index: number) => React.Key;\n}\n\nexport type OverflowListFactory = Factory<{\n  props: OverflowListProps<any>;\n  ref: HTMLDivElement;\n  stylesNames: OverflowListStylesNames;\n  vars: OverflowListCssVariables;\n  signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxRows: 1,\n  maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n  root: {\n    '--ol-gap': getSpacing(gap),\n  },\n}));\n\nfunction getDataSignature<T>(\n  data: T[],\n  getItemKey: ((item: T, index: number) => React.Key) | undefined\n): string {\n  return data\n    .map((item, index) => {\n      if (getItemKey) {\n        return getItemKey(item, index);\n      }\n      return item !== null && (typeof item === 'object' || typeof item === 'function')\n        ? index\n        : String(item);\n    })\n    .join('\\u0000');\n}\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n  const props = useProps('OverflowList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    renderOverflow,\n    renderItem,\n    maxRows,\n    maxVisibleItems,\n    collapseFrom,\n    getItemKey,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<OverflowListFactory>({\n    name: 'OverflowList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [subtractCount, setSubtractCount] = useState(0);\n  const [phase, setPhase] = useState<'normal' | 'measuring' | 'measuring-overflow-indicator'>(\n    'normal'\n  );\n\n  const containerRef = useRef<HTMLElement>(null);\n  const rootRef = useMergedRef(containerRef, ref);\n  const finalVisibleCount = visibleCount - subtractCount;\n  const overflowCount = data.length - finalVisibleCount;\n  const showOverflow = overflowCount > 0 && phase !== 'measuring';\n  const isCollapseStart = collapseFrom === 'start';\n  const overflowItems = isCollapseStart\n    ? data.slice(0, data.length - finalVisibleCount)\n    : data.slice(finalVisibleCount);\n  const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;\n\n  const _overflowRef = useRef<HTMLElement>(null);\n  const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n  const dimensions = useDimensions(containerRef);\n  const dataKey = useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]);\n\n  useIsomorphicEffect(() => {\n    setPhase('measuring');\n    setVisibleCount(data.length);\n    setSubtractCount(0);\n  }, [dataKey, maxRows, collapseFrom]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring') {\n      countVisibleItems();\n      setPhase('measuring-overflow-indicator');\n    }\n  }, [phase]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring-overflow-indicator') {\n      const updateWasNeeded = updateOverflowIndicator();\n      if (!updateWasNeeded) {\n        setPhase('normal');\n      }\n    }\n  }, [phase, subtractCount]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'normal') {\n      setPhase('measuring');\n      setSubtractCount(0);\n    }\n  }, [dimensions]);\n\n  const fitsInRows = (\n    itemWidths: number[],\n    containerWidth: number,\n    columnGap: number,\n    startIndex = 0\n  ) => {\n    let rows = 1;\n    let rowWidth = 0;\n\n    for (let i = startIndex; i < itemWidths.length; i += 1) {\n      const width = itemWidths[i];\n      const needed = rowWidth > 0 ? width + columnGap : width;\n\n      if (rowWidth + needed > containerWidth && rowWidth > 0) {\n        rows++;\n        if (rows > maxRows!) {\n          return false;\n        }\n        rowWidth = width;\n      } else {\n        rowWidth += needed;\n      }\n    }\n\n    return true;\n  };\n\n  const countVisibleItems = () => {\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    if (isCollapseStart) {\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const children = rowData.children;\n      const widths = children.map((child) => child.getBoundingClientRect().width);\n\n      let count = 0;\n      for (let i = widths.length - 1; i >= 0; i--) {\n        if (!fitsInRows(widths, containerWidth, columnGap, i)) {\n          break;\n        }\n        count = widths.length - i;\n      }\n\n      count = Math.min(count, maxVisibleItems!);\n      setVisibleCount(count);\n      return;\n    }\n\n    if (data.length === 1) {\n      const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n      const containerWidth = container.getBoundingClientRect().width;\n      const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n      if (itemWidth > containerWidth) {\n        setVisibleCount(0);\n      } else {\n        setVisibleCount(1);\n      }\n\n      return;\n    }\n\n    const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n    let fittingCount = visibleRowPositions.reduce((acc, position) => {\n      return acc + rowData.itemsSizesMap[position].elements.size;\n    }, 0);\n\n    fittingCount = Math.min(fittingCount, maxVisibleItems);\n    setVisibleCount(fittingCount);\n  };\n\n  const updateOverflowIndicator = () => {\n    if (!_overflowRef.current) {\n      return false;\n    }\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return false;\n    }\n\n    const { rowPositions, itemsSizesMap } = rowData;\n\n    if (isCollapseStart) {\n      const container = containerRef.current;\n      if (!container) {\n        return false;\n      }\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const overflowWidth = _overflowRef.current.getBoundingClientRect().width;\n      const children = rowData.children;\n      const itemWidths = [\n        overflowWidth,\n        ...children.map((child) => child.getBoundingClientRect().width),\n      ];\n\n      if (!fitsInRows(itemWidths, containerWidth, columnGap)) {\n        setSubtractCount((c) => c + 1);\n        return true;\n      }\n\n      return false;\n    }\n\n    const overflowRect = _overflowRef.current.getBoundingClientRect();\n    const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n    const lastRowTop = rowPositions[rowPositions.length - 1];\n    const lastRow = itemsSizesMap[lastRowTop];\n\n    if (overflowMiddleY > lastRow.bottom) {\n      setSubtractCount((c) => c + 1);\n      return true;\n    }\n\n    return false;\n  };\n\n  const clonedOverflowElement = overflowElement\n    ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n    : null;\n\n  let finalItems = data;\n  if (maxVisibleItems) {\n    finalItems = isCollapseStart\n      ? finalItems.slice(-maxVisibleItems!)\n      : finalItems.slice(0, maxVisibleItems);\n  }\n\n  const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;\n\n  return (\n    <Box ref={rootRef} {...getStyles('root')} {...others}>\n      {isCollapseStart && clonedOverflowElement}\n\n      {finalItems.map((item, index) => {\n        const isVisible =\n          phase === 'measuring' ||\n          (isCollapseStart\n            ? index >= finalItems.length - finalVisibleCount\n            : index < finalVisibleCount);\n        if (!isVisible) {\n          return null;\n        }\n        const dataIndex = indexOffset + index;\n        const itemComponent = renderItem(item, dataIndex);\n\n        return <Fragment key={dataIndex}>{itemComponent}</Fragment>;\n      })}\n\n      {!isCollapseStart && clonedOverflowElement}\n    </Box>\n  );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n  export type Props = OverflowListProps;\n  export type Factory = OverflowListFactory;\n  export type StylesNames = OverflowListStylesNames;\n  export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}

package/esm/components/Pagination/PaginationEdges/PaginationEdges.mjs

@@ -54,6 +54,6 @@ const PaginationLast = createEdgeComponent({
 	type: "next"
 });
 //#endregion
-export { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious };
+export { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious, createEdgeComponent };
 
 //# sourceMappingURL=PaginationEdges.mjs.map

package/esm/components/ScrollArea/ScrollArea.mjs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/esm/components/SimpleGrid/SimpleGridVariables.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"SimpleGridVariables.mjs","names":[],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  InlineStyles,\n  keys,\n  MantineBreakpoint,\n  px,\n  rem,\n  useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n  selector: string;\n}\n\nfunction getMinColWidthValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return rem(value);\n  }\n\n  return value;\n}\n\nexport function SimpleGridMediaVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const theme = useMantineTheme();\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const media = sortedBreakpoints.map((breakpoint) => ({\n    query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n  if (typeof values === 'object' && values !== null) {\n    return keys(values);\n  }\n\n  return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n  return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n  const breakpoints = Array.from(\n    new Set([\n      ...getBreakpoints(spacing),\n      ...getBreakpoints(verticalSpacing),\n      ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n    ])\n  );\n\n  return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n  const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const media = uniqueBreakpoints.map((breakpoint) => ({\n    query: `simple-grid (min-width: ${breakpoint})`,\n    styles: queries[breakpoint],\n  }));\n\n  return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"SimpleGridVariables.mjs","names":[],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  InlineStyles,\n  keys,\n  MantineBreakpoint,\n  px,\n  rem,\n  useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n  selector: string;\n}\n\nfunction getMinColWidthValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return rem(value);\n  }\n\n  return value;\n}\n\nexport function SimpleGridMediaVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const theme = useMantineTheme();\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const media = sortedBreakpoints.map((breakpoint) => ({\n    query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n  if (typeof values === 'object' && values !== null) {\n    return keys(values);\n  }\n\n  return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n  return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n  const breakpoints = Array.from(\n    new Set([\n      ...getBreakpoints(spacing),\n      ...getBreakpoints(verticalSpacing),\n      ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n    ])\n  );\n\n  return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n  const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const media = uniqueBreakpoints.map((breakpoint) => ({\n    query: `simple-grid (min-width: ${breakpoint})`,\n    styles: queries[breakpoint],\n  }));\n\n  return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":"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"}

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

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