@workday/canvas-kit-react 13.1.5 → 13.1.7

package/tabs/lib/TabsList.tsx

@@ -6,6 +6,7 @@ import {
   createElemPropsHook,
   ExtractProps,
   useModalityType,
+  useLocalRef,
 } from '@workday/canvas-kit-react/common';
 import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {
@@ -32,12 +33,81 @@ export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, ne
   overflowButton?: React.ReactNode;
 }
 
+function getScrollPercentage(elem: HTMLDivElement, direction: 'vertical' | 'horizontal'): number {
+  if (direction === 'vertical') {
+    if (elem.scrollHeight > elem.clientHeight) {
+      const percentage = elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
+      return percentage;
+    } else {
+      return -1;
+    }
+  }
+  if (elem.scrollWidth > elem.clientWidth) {
+    const percentage = elem.scrollLeft / (elem.scrollWidth - elem.clientWidth);
+    return percentage;
+  } else {
+    return -1;
+  }
+}
+
+function getScrollPosition(
+  elem: HTMLDivElement,
+  direction: 'vertical' | 'horizontal'
+): 'start' | 'middle' | 'end' | undefined {
+  const percentage = getScrollPercentage(elem, direction);
+  return percentage <= -1
+    ? undefined
+    : percentage > 0.99
+    ? 'end'
+    : percentage > 0.01
+    ? 'middle'
+    : 'start';
+}
+
+function setScrollPosition(elem: HTMLDivElement, scrollPosition?: 'start' | 'middle' | 'end') {
+  if (scrollPosition) {
+    elem.setAttribute('data-scroll-position', scrollPosition);
+  } else {
+    elem.removeAttribute('data-scroll-position');
+  }
+}
+
+export const useTabOverflowScroll = createElemPropsHook(useTabsModel)(
+  (
+    _model,
+    ref,
+    elemProps: {
+      'aria-orientation'?: 'vertical' | 'horizontal';
+    } = {}
+  ) => {
+    const direction = elemProps['aria-orientation'] || 'vertical';
+
+    const {localRef, elementRef} = useLocalRef<HTMLDivElement>(ref as React.Ref<HTMLDivElement>);
+
+    React.useLayoutEffect(() => {
+      if (!localRef.current) {
+        return;
+      }
+
+      setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
+    }, [localRef, direction]);
+
+    return {
+      ref: elementRef,
+      onScroll: (event: React.UIEvent<HTMLDivElement>) => {
+        const elem = event.currentTarget;
+        setScrollPosition(elem, getScrollPosition(elem, direction));
+      },
+    };
+  }
+);
+
 export const useTabsList = composeHooks(
-  createElemPropsHook(useTabsModel)(() => {
-    const modality = useModalityType();
+  useTabOverflowScroll,
+  createElemPropsHook(useTabsModel)(model => {
     return {
       role: 'tablist',
-      overflowX: modality === 'touch' ? 'auto' : undefined,
+      'aria-orientation': model.state.orientation,
     } as const;
   }),
   useOverflowListMeasure,
@@ -51,12 +121,26 @@ export const tabsListStencil = createStencil({
     borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
     gap: system.space.x3,
     paddingInline: system.space.x6,
-    maskImage: 'none',
   },
   modifiers: {
     modality: {
       touch: {
+        overflowX: 'auto',
         paddingInline: system.space.zero,
+        // data attributes are needed until scroll-driven animations are supported. Once they are,
+        // we can use a CSS-only solution:
+        // https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/
+        '&[data-scroll-position="start"]': {
+          maskImage: 'linear-gradient(to right, white 80%, transparent)',
+        },
+        '&[data-scroll-position="middle"]': {
+          maskImage:
+            'linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent)',
+          maskComposite: 'intersect',
+        },
+        '&[data-scroll-position="end"]': {
+          maskImage: 'linear-gradient(to left, white 80%, transparent)',
+        },
       },
       mouse: {},
       pen: {},
@@ -69,33 +153,7 @@ export const tabsListStencil = createStencil({
       left: {},
       right: {},
     },
-    currentScrollPos: {
-      true: {},
-      false: {},
-    },
   },
-  compound: [
-    {
-      modifiers: {
-        modality: 'touch',
-        isDragging: true,
-        direction: 'left',
-      },
-      styles: {
-        maskImage: 'linear-gradient(to left, white 80%, transparent)',
-      },
-    },
-    {
-      modifiers: {
-        modality: 'touch',
-        isDragging: true,
-        direction: 'right',
-      },
-      styles: {
-        maskImage: 'linear-gradient(to right, white 80%, transparent)',
-      },
-    },
-  ],
 });
 
 export const TabsList = createSubcomponent('div')({
@@ -105,7 +163,6 @@ export const TabsList = createSubcomponent('div')({
 })<TabListProps & {maskImage?: string}>(
   ({children, overflowButton, ...elemProps}, Element, model) => {
     const modality = useModalityType();
-    const touchStates = useTouchDirection();
 
     return (
       <Element
@@ -113,8 +170,6 @@ export const TabsList = createSubcomponent('div')({
           elemProps,
           tabsListStencil({
             modality: modality,
-            isDragging: touchStates.isDragging,
-            direction: touchStates.direction,
           })
         )}
       >
@@ -124,36 +179,3 @@ export const TabsList = createSubcomponent('div')({
     );
   }
 );
-
-export const useTouchDirection = () => {
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [touchDir, setTouchDirection] = React.useState<'right' | 'left' | undefined>('right');
-
-  React.useEffect(() => {
-    let prevXPos = window.pageXOffset;
-    const handleTouchMove = function (e: TouchEvent) {
-      const currXPos = e.touches[0].clientX;
-      setIsDragging(true);
-      if (currXPos > prevXPos) {
-        setTouchDirection('left');
-      } else if (currXPos < prevXPos) {
-        setTouchDirection('right');
-      }
-      prevXPos = currXPos;
-      e.preventDefault();
-    };
-    const handleDragEnd = function () {
-      setIsDragging(false);
-    };
-    window.addEventListener('touchmove', handleTouchMove);
-    window.addEventListener('touchstart', handleDragEnd);
-    window.addEventListener('touchend', handleDragEnd);
-    return () => {
-      window.removeEventListener('touchmove', handleTouchMove);
-      window.removeEventListener('touchstart', handleDragEnd);
-      window.removeEventListener('touchend', handleDragEnd);
-    };
-  }, []);
-
-  return {direction: touchDir, isDragging: isDragging};
-};