@basic-ui/material 1.0.0-alpha.23 → 1.0.0-alpha.25

package/src/TabIndicator/TabIndicator.tsx

@@ -1,3 +1,4 @@
+import type { RefObject } from 'react';
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
 import { rem } from 'polished';
 import { assignMultipleRefs } from '@basic-ui/core';
@@ -10,16 +11,29 @@ import { EASING_STANDARD } from '../motion';
 export interface TabIndicatorProps extends BoxProps {
   selected?: boolean;
   color?: string;
+  variant: 'primary' | 'secondary';
+  labelRef: RefObject<HTMLParagraphElement | null>;
 }
 
+const WIDTH_PROPERTY_NAME = '--indicator-width';
+const SCALE_PROPERTY_NAME = '--indicator-scale';
+
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
   function TabIndicator(props, forwardedRef) {
-    const { as = 'span', selected, color = 'primary', ...otherProps } = props;
+    const {
+      as = 'span',
+      selected,
+      color = 'primary',
+      variant,
+      labelRef,
+      ...otherProps
+    } = props;
     const ref = useRef<HTMLSpanElement>(null);
     const { currentIndicator } = useTabIndicatorContext();
+    const resizeObserverRef = useRef<ResizeObserver>();
 
     useEnhancedEffect(() => {
       if (selected && ref.current) {
@@ -28,13 +42,28 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           const previousClientRect =
             currentIndicator.current.getBoundingClientRect();
           const currentClientRect = ref.current.getBoundingClientRect();
-          const widthDelta = previousClientRect.width / currentClientRect.width;
           const xPosition = previousClientRect.left - currentClientRect.left;
 
           const prevTransition = ref.current.style.transition;
           const prevTransform = ref.current.style.transform;
           ref.current.style.transition = 'none';
-          ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+          if (variant === 'primary') {
+            const prevWidth =
+              currentIndicator.current.style.getPropertyValue(
+                WIDTH_PROPERTY_NAME
+              );
+            const currentWidth =
+              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+            const widthDelta = String(
+              parseFloat(prevWidth) / parseFloat(currentWidth)
+            );
+            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
+            ref.current.style.transform = `translateX(${xPosition}px)`;
+          } else {
+            const widthDelta =
+              previousClientRect.width / currentClientRect.width;
+            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+          }
 
           // Force repaint before updating classes and transform to ensure the transform properly takes effect
           ref.current.getBoundingClientRect();
@@ -42,26 +71,73 @@ export const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(
           // Restore and let transition do it's magic
           ref.current.style.transition = prevTransition;
           ref.current.style.transform = prevTransform;
+          if (variant === 'primary') {
+            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
+          }
         }
         currentIndicator.current = ref.current;
       }
-    }, [selected]);
+    }, [selected, variant]);
+
+    useEnhancedEffect(() => {
+      if (variant === 'secondary') {
+        return;
+      }
+
+      if (labelRef.current && ref.current) {
+        const width = labelRef.current.getBoundingClientRect().width;
+        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
+
+        if (typeof ResizeObserver === 'function') {
+          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {
+            if (ref.current) {
+              ref.current.style.setProperty(
+                WIDTH_PROPERTY_NAME,
+                `${entry.contentRect.width}px`
+              );
+            }
+          });
+
+          resizeObserverRef.current?.observe(labelRef.current);
+          return () => resizeObserverRef.current?.disconnect();
+        }
+      }
+    }, [labelRef, variant]);
 
     return (
       <Box
         as={as}
         ref={assignMultipleRefs(ref, forwardedRef)}
-        width="100%"
-        height={rem(2)}
         __css={{
           bg: color,
           position: 'absolute',
           bottom: 0,
           transform: `scale(1)`,
           opacity: selected ? 1 : 0,
-          transformOrigin: 'left',
           transition: `transform .25s ${EASING_STANDARD}`,
           zIndex: 1,
+          ...(variant === 'secondary'
+            ? {
+                width: '100%',
+                height: rem(2),
+              }
+            : {
+                width: '100%',
+                '&::before': {
+                  content: '""',
+                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,
+                  height: rem(3),
+                  borderTopLeftRadius: rem(3),
+                  borderTopRightRadius: rem(3),
+                  bg: color,
+                  position: 'absolute',
+                  transformOrigin: 'center',
+                  bottom: 0,
+                  left: '50%',
+                  transition: `inherit`,
+                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,
+                },
+              }),
         }}
         {...otherProps}
       />

package/src/theme/theme.ts

@@ -176,7 +176,7 @@ export const theme = {
     'title-small': font('plain', 20, 14, 0.1, 500),
     'label-large': font('plain', 20, 14, 0.1, 500),
     'label-medium': font('plain', 16, 12, 0.5, 500),
-    'label-small': font('plain', 16, 11, 0.5, 500),
+    'label-small': font('plain', 15, 11, 0.5, 500),
     'body-large': font('plain', 24, 16, 0.5, 400),
     'body-medium': font('plain', 20, 14, 0.25, 400),
     'body-small': font('plain', 16, 12, 0.4, 400),