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

package/src/Segment.tsx

@@ -2,9 +2,8 @@ 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, segmentWebThumbStyles } from './style';
+import { getSegmentVariantStyles, segmentStaticStyles, segmentWebLayoutStyles, segmentWebThumbStyles } from './style';
 import { ISegmentProps } from './type';
 import { SegmentVariant } from './constants';
 import { SegmentButton } from './SegmentButton';
@@ -44,6 +43,7 @@ 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 rootNode = rootRef.current;
-    if (!rootNode) return;
-    const rootRect = rootNode.getBoundingClientRect();
-    setTrackWidth(rootRect.width);
+    const trackNode = trackRef.current;
+    if (!trackNode) return;
+    const trackRect = trackNode.getBoundingClientRect();
+    setTrackWidth(trackRect.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 - rootRect.left, width: rect.width };
+      return { x: rect.left - trackRect.left, width: rect.width };
     });
     setTabLayouts(layouts);
   }, [sanitizedOptions]);
@@ -89,11 +89,11 @@ const Segment: React.FC<ISegmentProps> = ({
   }, [measureTabs]);
 
   useEffect(() => {
-    if (typeof ResizeObserver === 'undefined' || !rootRef.current) return;
+    if (typeof ResizeObserver === 'undefined' || !trackRef.current) return;
     const observer = new ResizeObserver(() => {
       measureTabs();
     });
-    observer.observe(rootRef.current);
+    observer.observe(trackRef.current);
     tabRefs.current.forEach((tabNode) => {
       if (tabNode) observer.observe(tabNode);
     });
@@ -196,9 +196,13 @@ 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],
-    [segmentStaticStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell, segmentWebLayoutStyles.tabMeasureCell],
+    [segmentStaticStyles.tabMeasureCell, segmentWebLayoutStyles.tabMeasureCell],
   );
   const webThumbBaseClassName = useWebMergeStyles(
     [
@@ -219,9 +223,11 @@ const Segment: React.FC<ISegmentProps> = ({
     if (hasStableMeasurements && optionLength > 0) {
       const safeIndex = Math.max(0, Math.min(activeIndex, optionLength - 1));
       const activeLayout = tabLayouts[safeIndex];
-      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);
+      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));
       return css({
         left: `${left}px`,
         width: `${width}px`,
@@ -242,11 +248,8 @@ const Segment: React.FC<ISegmentProps> = ({
 
   return (
     <div className={rootClassName} ref={rootRef}>
-      <Container
-        styleConfig={{
-          root: [segmentStaticStyles.animatedContainer, ...animatedContainer],
-        }}
-      >
+      <div ref={trackRef} className={animatedContainerClassName}>
+        <div className={`${webThumbBaseClassName} ${dynamicWebStyles}`} aria-hidden />
         {!isEmptyOptions(sanitizedOptions) &&
           sanitizedOptions.map((option, index) => (
             <div
@@ -268,8 +271,7 @@ const Segment: React.FC<ISegmentProps> = ({
               />
             </div>
           ))}
-      </Container>
-      <div className={`${webThumbBaseClassName} ${dynamicWebStyles}`} />
+      </div>
     </div>
   );
 };

package/src/SegmentButton.native.tsx

@@ -33,8 +33,8 @@ export const SegmentButton: React.FC<ISegmentButtonProps> = ({
         minHeight: 0,
         width: undefined,
         alignSelf: 'stretch',
-        height: t.size[10],
-        maxHeight: t.size[10],
+        height: '100%',
+        maxHeight: '100%',
         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: undefined,
+        width: t.size['100P'],
         alignSelf: 'stretch',
-        height: t.size[10],
-        maxHeight: t.size[10],
+        height: '100%',
+        maxHeight: '100%',
         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={false}
+      isFullWidth
       prefixIcon={option?.icon}
       onClick={() => {
         if (disabled) return;

package/src/style.ts

@@ -15,6 +15,7 @@ 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;
@@ -51,8 +52,6 @@ export const segmentStaticStyles = makeStyles((theme) => {
     },
     animatedBlock: {
       position: 'absolute',
-      top: 0,
-      height: '100%',
       borderRadius: thumbRadius,
       backgroundColor: theme.color.background.neutral,
     },
@@ -76,23 +75,69 @@ export const segmentStaticStyles = makeStyles((theme) => {
   };
 });
 
-export const segmentWebThumbStyles = 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 thumbHeight = Math.max(trackInnerHeight - thumbInset * 2, 0);
-  const trackInnerRadius = Math.max(0, trackInnerHeight / 2);
-  const thumbRadius = Math.max(0, trackInnerRadius - thumbInset);
+  const paddedInnerRadius = Math.max(0, paddedInnerHeight / 2);
+  const thumbRadius = Math.max(0, paddedInnerRadius - thumbInset);
 
   return {
     root: {
       position: 'absolute',
-      height: thumbHeight,
+      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);
+
+  return {
+    root: {
+      position: 'absolute',
       top: thumbInset,
+      bottom: thumbInset,
+      borderRadius: thumbRadius,
+      backgroundColor: theme.color.background.neutral,
       boxShadow: SEGMENT_THUMB_BOX_SHADOW,
+      pointerEvents: 'none',
+      zIndex: 0,
     },
   };
 });