ScrollArea reads DirectionProvider

mui · Dec 20, 2024 · 4a754f5 · 4a754f5
1 parent 4941275
commit 4a754f5
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 41 deletions.
diff --git a/packages/react/src/scroll-area/corner/ScrollAreaCorner.tsx b/packages/react/src/scroll-area/corner/ScrollAreaCorner.tsx
@@ -21,7 +21,7 @@ const ScrollAreaCorner = React.forwardRef(function ScrollAreaCorner(
 ) {
   const { render, className, ...otherProps } = props;
 
-  const { dir, cornerRef, cornerSize, hiddenState } = useScrollAreaRootContext();
+  const { cornerRef, cornerSize, hiddenState } = useScrollAreaRootContext();
 
   const mergedRef = useForkRef(cornerRef, forwardedRef);
 
@@ -34,7 +34,7 @@ const ScrollAreaCorner = React.forwardRef(function ScrollAreaCorner(
       style: {
         position: 'absolute',
         bottom: 0,
-        [dir === 'rtl' ? 'left' : 'right']: 0,
+        insetInlineEnd: 0,
         width: cornerSize.width,
         height: cornerSize.height,
       },

diff --git a/packages/react/src/scroll-area/root/ScrollAreaRoot.tsx b/packages/react/src/scroll-area/root/ScrollAreaRoot.tsx
@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useDirection } from '../../direction-provider/DirectionContext';
 import type { BaseUIComponentProps } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { ScrollAreaRootContext } from './ScrollAreaRootContext';
@@ -18,9 +19,11 @@ const ScrollAreaRoot = React.forwardRef(function ScrollAreaRoot(
   props: ScrollAreaRoot.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { render, className, dir, ...otherProps } = props;
+  const { render, className, ...otherProps } = props;
 
-  const scrollAreaRoot = useScrollAreaRoot({ dir });
+  const direction = useDirection();
+
+  const scrollAreaRoot = useScrollAreaRoot();
 
   const { rootId } = scrollAreaRoot;
 
@@ -35,10 +38,10 @@ const ScrollAreaRoot = React.forwardRef(function ScrollAreaRoot(
 
   const contextValue = React.useMemo(
     () => ({
-      dir,
+      direction,
       ...scrollAreaRoot,
     }),
-    [dir, scrollAreaRoot],
+    [direction, scrollAreaRoot],
   );
 
   const viewportId = `[data-id="${rootId}-viewport"]`;
@@ -83,10 +86,6 @@ ScrollAreaRoot.propTypes /* remove-proptypes */ = {
    * returns a class based on the component’s state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /**
-   * @ignore
-   */
-  dir: PropTypes.string,
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.

diff --git a/packages/react/src/scroll-area/root/ScrollAreaRootContext.ts b/packages/react/src/scroll-area/root/ScrollAreaRootContext.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface ScrollAreaRootContext {
-  dir: string | undefined;
+  direction: string | undefined;
   cornerSize: { width: number; height: number };
   setCornerSize: React.Dispatch<React.SetStateAction<{ width: number; height: number }>>;
   thumbSize: { width: number; height: number };

diff --git a/packages/react/src/scroll-area/root/useScrollAreaRoot.ts b/packages/react/src/scroll-area/root/useScrollAreaRoot.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useEventCallback } from '../../utils/useEventCallback';
-import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { SCROLL_TIMEOUT } from '../constants';
@@ -12,9 +11,7 @@ interface Size {
   height: number;
 }
 
-export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
-  const { dir: dirParam } = params;
-
+export function useScrollAreaRoot() {
   const [hovering, setHovering] = React.useState(false);
   const [scrolling, setScrolling] = React.useState(false);
   const [cornerSize, setCornerSize] = React.useState<Size>({ width: 0, height: 0 });
@@ -44,15 +41,6 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
     cornerHidden: false,
   });
 
-  const [autoDir, setAutoDir] = React.useState(dirParam);
-  const dir = dirParam ?? autoDir;
-
-  useEnhancedEffect(() => {
-    if (dirParam === undefined && viewportRef.current) {
-      setAutoDir(getComputedStyle(viewportRef.current).direction);
-    }
-  }, [dirParam]);
-
   React.useEffect(() => {
     return () => {
       window.clearTimeout(timeoutRef.current);
@@ -170,7 +158,6 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
   const getRootProps = React.useCallback(
     (externalProps = {}) =>
       mergeReactProps<'div'>(externalProps, {
-        dir,
         onPointerEnter: handlePointerEnterOrMove,
         onPointerMove: handlePointerEnterOrMove,
         onPointerDown({ pointerType }) {
@@ -185,7 +172,7 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
           [ScrollAreaRootCssVars.scrollAreaCornerWidth as string]: `${cornerSize.width}px`,
         },
       }),
-    [cornerSize, dir, handlePointerEnterOrMove],
+    [cornerSize, handlePointerEnterOrMove],
   );
 
   return React.useMemo(
@@ -238,8 +225,4 @@ export function useScrollAreaRoot(params: useScrollAreaRoot.Parameters) {
   );
 }
 
-export namespace useScrollAreaRoot {
-  export interface Parameters {
-    dir: string | undefined;
-  }
-}
+export namespace useScrollAreaRoot {}
diff --git a/packages/react/src/scroll-area/scrollbar/useScrollAreaScrollbar.ts b/packages/react/src/scroll-area/scrollbar/useScrollAreaScrollbar.ts
@@ -9,7 +9,7 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
   const { orientation } = params;
 
   const {
-    dir,
+    direction,
     scrollbarYRef,
     scrollbarXRef,
     viewportRef,
@@ -130,7 +130,7 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
             const scrollRatioX = clickX / maxThumbOffsetX;
 
             let newScrollLeft: number;
-            if (dir === 'rtl') {
+            if (direction === 'rtl') {
               // In RTL, invert the scroll direction
               newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
 
@@ -154,13 +154,12 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
           ...(orientation === 'vertical' && {
             top: 0,
             bottom: `var(${ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
-            [dir === 'rtl' ? 'left' : 'right']: 0,
+            insetInlineEnd: 0,
             [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight as string]: `${thumbSize.height}px`,
           }),
           ...(orientation === 'horizontal' && {
-            [dir === 'rtl' ? 'right' : 'left']: 0,
-            [dir === 'rtl' ? 'left' : 'right']:
-              `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+            insetInlineStart: 0,
+            insetInlineEnd: `var(${ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
             bottom: 0,
             [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth as string]: `${thumbSize.width}px`,
           }),
@@ -170,7 +169,7 @@ export function useScrollAreaScrollbar(params: useScrollAreaScrollbar.Parameters
       rootId,
       handlePointerUp,
       orientation,
-      dir,
+      direction,
       thumbSize.height,
       thumbSize.width,
       viewportRef,

diff --git a/packages/react/src/scroll-area/viewport/useScrollAreaViewport.tsx b/packages/react/src/scroll-area/viewport/useScrollAreaViewport.tsx
@@ -17,7 +17,7 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
     thumbYRef,
     thumbXRef,
     cornerRef,
-    dir,
+    direction,
     setCornerSize,
     setThumbSize,
     rootId,
@@ -102,7 +102,7 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
       // In Safari, don't allow it to go negative or too far as `scrollLeft` considers the rubber
       // band effect.
       const thumbOffsetX =
-        dir === 'rtl'
+        direction === 'rtl'
           ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0)
           : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
 
@@ -146,7 +146,7 @@ export function useScrollAreaViewport(params: useScrollAreaViewport.Parameters)
 
   useEnhancedEffect(() => {
     computeThumb();
-  }, [computeThumb, hiddenState, dir]);
+  }, [computeThumb, hiddenState, direction]);
 
   useEnhancedEffect(() => {
     // `onMouseEnter` doesn't fire upon load, so we need to check if the viewport is already