diff --git a/packages/react/src/scroll-area/corner/ScrollAreaCorner.tsx b/packages/react/src/scroll-area/corner/ScrollAreaCorner.tsx index 5d41aa88c5..5cddfbc21a 100644 --- 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 index a7825ebe0c..64c5c58129 100644 --- 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, ) { - 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 index f9d26a558f..db8ea447ab 100644 --- 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>; 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 index e1edda89b3..be89c4816f 100644 --- 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({ 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 index 94831eb8e9..198f3dcd31 100644 --- 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 index ed3f242e12..3c73d0a618 100644 --- 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