@cdx-ui/components 0.2.3 → 0.2.4

package/src/components/ScrollShadow/useScrollShadow.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
 export interface ScrollShadowCapability {
@@ -9,9 +10,26 @@ export interface ScrollShadowCapability {
 export interface UseScrollShadowOptions {
   orientation?: 'horizontal' | 'vertical';
   offset?: number;
+  enabled?: boolean;
   onCapabilityChange?: (capability: ScrollShadowCapability) => void;
 }
 
+export interface UseScrollShadowReturn {
+  capability: ScrollShadowCapability;
+  handleLayout: (event: LayoutChangeEvent) => void;
+  handleContentSizeChange: (width: number, height: number) => void;
+  handleScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+}
+
+export interface ScrollShadowDistance {
+  before: number;
+  after: number;
+}
+
+interface ScrollShadowTrackerOptions extends UseScrollShadowOptions {
+  onDistanceChange?: (distance: ScrollShadowDistance) => void;
+}
+
 interface ScrollMetrics {
   scrollOffset: number;
   viewportSize: number;
@@ -24,6 +42,20 @@ const INITIAL_METRICS: ScrollMetrics = {
   contentSize: 0,
 };
 
+export function normalizeAxisScrollOffset(
+  rawOffset: number,
+  orientation: 'horizontal' | 'vertical',
+  maxOffset: number,
+  platform: typeof Platform.OS = Platform.OS,
+): number {
+  // Web RTL reports a negative x and browsers do not rubber-band it. Native RTL
+  // stays positive, so a negative native offset is overscroll at the start edge.
+  const offset =
+    orientation === 'horizontal' && platform === 'web' ? Math.abs(rawOffset) : rawOffset;
+
+  return Math.min(Math.max(0, offset), Math.max(0, maxOffset));
+}
+
 function getScrollCapability(metrics: ScrollMetrics, offset: number): ScrollShadowCapability {
   const { scrollOffset, viewportSize, contentSize } = metrics;
 
@@ -37,18 +69,42 @@ function getScrollCapability(metrics: ScrollMetrics, offset: number): ScrollShad
   };
 }
 
-export function useScrollShadow({
-  orientation = 'horizontal',
+function getScrollDistance(metrics: ScrollMetrics, offset: number): ScrollShadowDistance {
+  const { scrollOffset, viewportSize, contentSize } = metrics;
+
+  if (viewportSize <= 0 || contentSize <= viewportSize) {
+    return { before: 0, after: 0 };
+  }
+
+  return {
+    before: Math.max(0, scrollOffset - offset),
+    after: Math.max(0, contentSize - viewportSize - scrollOffset - offset),
+  };
+}
+
+export function useScrollShadow(options: UseScrollShadowOptions = {}): UseScrollShadowReturn {
+  return useScrollShadowTracker(options);
+}
+
+export function useScrollShadowTracker({
+  orientation = 'vertical',
   offset = 0,
+  enabled = true,
   onCapabilityChange,
-}: UseScrollShadowOptions = {}) {
-  const metricsRef = useRef<ScrollMetrics>(INITIAL_METRICS);
+  onDistanceChange,
+}: ScrollShadowTrackerOptions = {}): UseScrollShadowReturn {
+  const metricsRef = useRef<ScrollMetrics>({ ...INITIAL_METRICS });
   const [capability, setCapability] = useState<ScrollShadowCapability>({
     canScrollBefore: false,
     canScrollAfter: false,
   });
 
   const updateCapability = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+
+    onDistanceChange?.(getScrollDistance(metricsRef.current, offset));
     const nextCapability = getScrollCapability(metricsRef.current, offset);
 
     setCapability((prev) => {
@@ -62,7 +118,7 @@ export function useScrollShadow({
       onCapabilityChange?.(nextCapability);
       return nextCapability;
     });
-  }, [offset, onCapabilityChange]);
+  }, [enabled, offset, onCapabilityChange, onDistanceChange]);
 
   useEffect(() => {
     updateCapability();
@@ -88,13 +144,19 @@ export function useScrollShadow({
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+      const rawOffset = orientation === 'vertical' ? contentOffset.y : contentOffset.x;
 
-      metricsRef.current.scrollOffset =
-        orientation === 'vertical' ? contentOffset.y : contentOffset.x;
-      metricsRef.current.viewportSize =
+      const viewportSize =
         orientation === 'vertical' ? layoutMeasurement.height : layoutMeasurement.width;
-      metricsRef.current.contentSize =
-        orientation === 'vertical' ? contentSize.height : contentSize.width;
+      const axisContentSize = orientation === 'vertical' ? contentSize.height : contentSize.width;
+
+      metricsRef.current.scrollOffset = normalizeAxisScrollOffset(
+        rawOffset,
+        orientation,
+        axisContentSize - viewportSize,
+      );
+      metricsRef.current.viewportSize = viewportSize;
+      metricsRef.current.contentSize = axisContentSize;
 
       updateCapability();
     },

package/src/components/Tabs/index.tsx

@@ -58,8 +58,6 @@ import {
   tabsTabLabelVariants,
   tabsTabVariants,
   TABS_INDICATOR_TRANSITION_MS,
-  TABS_SOLID_SCROLL_FADE_SIZE,
-  TABS_SCROLL_FADE_SIZE,
   OUTLINE_INDICATOR_THICKNESS,
   type TabsVariant,
 } from './styles';
@@ -178,7 +176,6 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
     const { value, orientation, getTabs } = useTabsContext();
     const { variant } = useTabsVariantContext();
     const isHorizontalScroll = orientation === 'horizontal' && scrollable;
-    const isWebHorizontalScroll = isHorizontalScroll && Platform.OS === 'web';
     const shouldAutoScrollActiveTab = isHorizontalScroll && Platform.OS !== 'web';
 
     const layoutsRef = useRef<Map<string, TabLayout>>(new Map());
@@ -478,23 +475,26 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
       );
     };
 
-    const solidWebHorizontalScroll = (
+    const horizontalScroll = (
+      <ScrollShadow
+        hideScrollBar={Platform.OS === 'web'}
+        orientation="horizontal"
+        surface={isSolidHorizontalScroll ? 'secondary' : 'background'}
+        size={isSolidHorizontalScroll ? 'default' : 'small'}
+        edgeClassName={isSolidHorizontalScroll ? undefined : 'opacity-85'}
+        onCapabilityChange={setScrollCapability}
+      >
+        {horizontalScrollView}
+      </ScrollShadow>
+    );
+
+    const webHorizontalScroll = isSolidHorizontalScroll ? (
       <View className="relative min-w-0 w-full">
-        <ScrollShadow
-          hideScrollBar
-          orientation="horizontal"
-          size={TABS_SOLID_SCROLL_FADE_SIZE}
-          fadeFromClassName="from-surface-secondary"
-          onCapabilityChange={setScrollCapability}
-        >
-          {horizontalScrollView}
-        </ScrollShadow>
+        {horizontalScroll}
         {renderSolidScrollChevron('start', -1)}
         {renderSolidScrollChevron('end', 1)}
       </View>
-    );
-
-    const outlineWebHorizontalScroll = (
+    ) : (
       <View className="w-full min-w-0 flex-row items-stretch">
         {scrollCapability.canScrollBefore ? (
           <Pressable
@@ -507,17 +507,7 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
             <Icon as={ChevronLeft} className="size-4 text-content-secondary" />
           </Pressable>
         ) : null}
-        <View className="min-w-0 flex-1">
-          <ScrollShadow
-            hideScrollBar
-            orientation="horizontal"
-            size={TABS_SCROLL_FADE_SIZE}
-            fadeFromClassName="from-background/85"
-            onCapabilityChange={setScrollCapability}
-          >
-            {horizontalScrollView}
-          </ScrollShadow>
-        </View>
+        <View className="min-w-0 flex-1">{horizontalScroll}</View>
         {scrollCapability.canScrollAfter ? (
           <Pressable
             accessibilityLabel="Scroll tabs right"
@@ -542,14 +532,14 @@ const TabsList = forwardRef<ComponentRef<typeof View>, TabsListProps>(
           {...props}
           {...mergeDataAttributes(props, dataAttributes({ slot: 'tabs-list' }))}
         >
-          {isWebHorizontalScroll ? (
-            <View className={cn(tabsListScrollContainerVariants())}>
-              {wrapSolidScrollShell(
-                isSolidHorizontalScroll ? solidWebHorizontalScroll : outlineWebHorizontalScroll,
-              )}
-            </View>
-          ) : isHorizontalScroll ? (
-            wrapSolidScrollShell(horizontalScrollView)
+          {isHorizontalScroll ? (
+            Platform.OS === 'web' ? (
+              <View className={cn(tabsListScrollContainerVariants())}>
+                {wrapSolidScrollShell(webHorizontalScroll)}
+              </View>
+            ) : (
+              wrapSolidScrollShell(horizontalScroll)
+            )
           ) : (
             listTrack
           )}

package/src/components/Tabs/styles.ts

@@ -37,15 +37,6 @@ export const OUTLINE_INDICATOR_THICKNESS = 2;
  */
 export const TABS_INDICATOR_TRANSITION_MS = 150;
 
-/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
-export const TABS_SCROLL_FADE_SIZE = 32;
-
-/**
- * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
- * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
- */
-export const TABS_SOLID_SCROLL_FADE_SIZE = 40;
-
 /**
  * Room reserved on the left/right sides inside the horizontal-scroll clip rect for ink that
  * paints past a tab's own box: `shadow-sm` (`0px 1px 3px`, solid only) and the web focus ring