@cleartrip/ct-design-segment 5.7.0-SNAPSHOT-native-main.5 → 5.7.0

package/src/Segment.tsx

@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useTheme } from '@cleartrip/ct-design-theme';
 import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
 
-import { getSegmentVariantStyles, segmentStaticStyles, segmentWebLayoutStyles, segmentWebThumbStyles } from './style';
+import { getSegmentVariantStyles, segmentStaticStyles, segmentWebThumbStyles } from './style';
 import { ISegmentProps } from './type';
 import { SegmentVariant } from './constants';
 import { SegmentButton } from './SegmentButton';
@@ -43,7 +44,6 @@ const Segment: React.FC<ISegmentProps> = ({
   const variantStyles = useMemo(() => getSegmentVariantStyles(variant, theme), [variant, theme]);
 
   const rootRef = useRef<HTMLDivElement | null>(null);
-  const trackRef = useRef<HTMLDivElement | null>(null);
   const tabRefs = useRef<Array<HTMLDivElement | null>>([]);
 
   const sanitizedOptions = useMemo(
@@ -67,15 +67,15 @@ const Segment: React.FC<ISegmentProps> = ({
   const baseSegmentTextRoot = useMemo(() => toStyleArray(baseSegmentTextConfig.root), [baseSegmentTextConfig.root]);
 
   const measureTabs = useCallback(() => {
-    const trackNode = trackRef.current;
-    if (!trackNode) return;
-    const trackRect = trackNode.getBoundingClientRect();
-    setTrackWidth(trackRect.width);
+    const rootNode = rootRef.current;
+    if (!rootNode) return;
+    const rootRect = rootNode.getBoundingClientRect();
+    setTrackWidth(rootRect.width);
     const layouts = sanitizedOptions.map((_, index) => {
       const tabNode = tabRefs.current[index];
       if (!tabNode) return { x: 0, width: 0 };
       const rect = tabNode.getBoundingClientRect();
-      return { x: rect.left - trackRect.left, width: rect.width };
+      return { x: rect.left - rootRect.left, width: rect.width };
     });
     setTabLayouts(layouts);
   }, [sanitizedOptions]);
@@ -89,11 +89,11 @@ const Segment: React.FC<ISegmentProps> = ({
   }, [measureTabs]);
 
   useEffect(() => {
-    if (typeof ResizeObserver === 'undefined' || !trackRef.current) return;
+    if (typeof ResizeObserver === 'undefined' || !rootRef.current) return;
     const observer = new ResizeObserver(() => {
       measureTabs();
     });
-    observer.observe(trackRef.current);
+    observer.observe(rootRef.current);
     tabRefs.current.forEach((tabNode) => {
       if (tabNode) observer.observe(tabNode);
     });
@@ -196,13 +196,9 @@ const Segment: React.FC<ISegmentProps> = ({
     ],
     [segmentStaticStyles.root, dynamicStyles.root, variantStyles.root?.style, root],
   );
-  const animatedContainerClassName = useWebMergeStyles(
-    [segmentStaticStyles.animatedContainer, segmentWebLayoutStyles.animatedContainer, ...animatedContainer],
-    [segmentStaticStyles.animatedContainer, segmentWebLayoutStyles.animatedContainer, animatedContainer],
-  );
   const tabMeasureCellClassName = useWebMergeStyles(
-    [segmentStaticStyles.tabMeasureCell, segmentWebLayoutStyles.tabMeasureCell],
-    [segmentStaticStyles.tabMeasureCell, segmentWebLayoutStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell],
   );
   const webThumbBaseClassName = useWebMergeStyles(
     [
@@ -223,11 +219,9 @@ const Segment: React.FC<ISegmentProps> = ({
     if (hasStableMeasurements && optionLength > 0) {
       const safeIndex = Math.max(0, Math.min(activeIndex, optionLength - 1));
       const activeLayout = tabLayouts[safeIndex];
-      const rawWidth = Math.max(activeLayout?.width ?? trackWidth / Math.max(optionLength, 1), 0);
-      const rawLeft = Math.max(activeLayout?.x ?? 0, 0);
-      const maxLeft = Math.max(trackWidth - rawWidth, 0);
-      const left = Math.min(rawLeft, maxLeft);
-      const width = Math.min(rawWidth, Math.max(trackWidth - left, 0));
+      const width = Math.max(activeLayout?.width ?? trackWidth / Math.max(optionLength, 1), 0);
+      const maxLeft = Math.max(trackWidth - width, 0);
+      const left = Math.min(Math.max(activeLayout?.x ?? 0, 0), maxLeft);
       return css({
         left: `${left}px`,
         width: `${width}px`,
@@ -248,8 +242,11 @@ const Segment: React.FC<ISegmentProps> = ({
 
   return (
     <div className={rootClassName} ref={rootRef}>
-      <div ref={trackRef} className={animatedContainerClassName}>
-        <div className={`${webThumbBaseClassName} ${dynamicWebStyles}`} aria-hidden />
+      <Container
+        styleConfig={{
+          root: [segmentStaticStyles.animatedContainer, ...animatedContainer],
+        }}
+      >
         {!isEmptyOptions(sanitizedOptions) &&
           sanitizedOptions.map((option, index) => (
             <div
@@ -271,7 +268,8 @@ const Segment: React.FC<ISegmentProps> = ({
               />
             </div>
           ))}
-      </div>
+      </Container>
+      <div className={`${webThumbBaseClassName} ${dynamicWebStyles}`} />
     </div>
   );
 };

package/src/SegmentButton.native.tsx

@@ -33,8 +33,8 @@ export const SegmentButton: React.FC<ISegmentButtonProps> = ({
         minHeight: 0,
         width: undefined,
         alignSelf: 'stretch',
-        height: '100%',
-        maxHeight: '100%',
+        height: t.size[10],
+        maxHeight: t.size[10],
         paddingHorizontal: 0,
         paddingTop: 0,
         paddingBottom: 0,

package/src/SegmentButton.tsx

@@ -31,10 +31,10 @@ export const SegmentButton: React.FC<ISegmentButtonProps> = ({
         flexShrink: 1,
         minWidth: 0,
         minHeight: 0,
-        width: t.size['100P'],
+        width: undefined,
         alignSelf: 'stretch',
-        height: '100%',
-        maxHeight: '100%',
+        height: t.size[10],
+        maxHeight: t.size[10],
         paddingHorizontal: 0,
         paddingTop: 0,
         paddingBottom: 0,
@@ -91,7 +91,7 @@ export const SegmentButton: React.FC<ISegmentButtonProps> = ({
       variant={ButtonVariant.BARE}
       color={ButtonColor.TERTIARY}
       size={ButtonSize.SMALL}
-      isFullWidth
+      isFullWidth={false}
       prefixIcon={option?.icon}
       onClick={() => {
         if (disabled) return;

package/src/style.ts

@@ -15,7 +15,6 @@ export const segmentThumbShadowNative = {
   elevation: 3,
 } as const;
 
-/** Shared layout — do not add web-only flex rules here; native uses this as-is. */
 export const segmentStaticStyles = makeStyles((theme) => {
   const trackHeight = theme.size[10];
   const borderWidth = theme.border.width.sm;
@@ -52,6 +51,8 @@ export const segmentStaticStyles = makeStyles((theme) => {
     },
     animatedBlock: {
       position: 'absolute',
+      top: 0,
+      height: '100%',
       borderRadius: thumbRadius,
       backgroundColor: theme.color.background.neutral,
     },
@@ -75,69 +76,23 @@ export const segmentStaticStyles = makeStyles((theme) => {
   };
 });
 
-/** Web-only flex layout — `<div>` needs explicit display; native Container must not use these. */
-export const segmentWebLayoutStyles = makeStyles(() => ({
-  animatedContainer: {
-    display: 'flex',
-  },
-  tabMeasureCell: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
-    zIndex: 1,
-  },
-}));
-
-/**
- * Native thumb — inset within the padded track (web uses segmentWebThumbStyles instead).
- */
-export const segmentNativeThumbStyles = makeStyles((theme) => {
-  const trackHeight = theme.size[10];
-  const borderWidth = theme.border.width.sm;
-  const trackPadding = theme.spacing[1];
-  const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
-  const paddedInnerHeight = Math.max(trackInnerHeight - trackPadding * 2, 0);
-  const thumbInset = Math.max(theme.spacing[0.25], 0);
-  const paddedInnerRadius = Math.max(0, paddedInnerHeight / 2);
-  const thumbRadius = Math.max(0, paddedInnerRadius - thumbInset);
-
-  return {
-    root: {
-      position: 'absolute',
-      top: thumbInset,
-      bottom: thumbInset,
-      borderRadius: thumbRadius,
-      backgroundColor: theme.color.background.neutral,
-    },
-  };
-});
-
-/**
- * Web-only (Segment.tsx) — native uses segmentNativeThumbStyles instead.
- * Thumb fills animatedContainer via top/bottom inset, not a fixed height from trackHeight.
- */
 export const segmentWebThumbStyles = makeStyles((theme) => {
   const trackHeight = theme.size[10];
   const borderWidth = theme.border.width.sm;
-  const trackPadding = theme.spacing[1];
   const trackInnerHeight = Math.max(trackHeight - borderWidth * 2, 0);
-  const paddedInnerHeight = Math.max(trackInnerHeight - trackPadding * 2, 0);
   const thumbInset = Math.max(theme.spacing[0.25], 0);
-  const paddedInnerRadius = Math.max(0, paddedInnerHeight / 2);
-  const thumbRadius = Math.max(0, paddedInnerRadius - thumbInset);
+  const thumbHeight = Math.max(trackInnerHeight - thumbInset * 2, 0);
+  const trackInnerRadius = Math.max(0, trackInnerHeight / 2);
+  const thumbRadius = Math.max(0, trackInnerRadius - thumbInset);
 
   return {
     root: {
       position: 'absolute',
-      top: thumbInset,
-      bottom: thumbInset,
+      height: thumbHeight,
       borderRadius: thumbRadius,
       backgroundColor: theme.color.background.neutral,
+      top: thumbInset,
       boxShadow: SEGMENT_THUMB_BOX_SHADOW,
-      pointerEvents: 'none',
-      zIndex: 0,
     },
   };
 });