@ledgerhq/lumen-ui-rnative 0.1.13 → 0.1.15

package/src/lib/Components/SegmentedControl/SegmentedControl.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { SegmentedControl, SegmentedControlButton } from './SegmentedControl';
 

package/src/lib/Components/SegmentedControl/SegmentedControl.tsx

@@ -1,4 +1,5 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
+import { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useStyleSheet } from '../../../styles';
 import type { LumenTextStyle, LumenTypographyTokenName } from '../../../styles';
@@ -23,10 +24,15 @@ export function SegmentedControlButton({
   onPress,
   ...props
 }: SegmentedControlButtonProps) {
-  const { selectedValue, onSelectedChange, disabled } =
-    useSegmentedControlContext();
+  const {
+    selectedValue,
+    onSelectedChange,
+    disabled,
+    tabLayout,
+    registerButtonLayout,
+  } = useSegmentedControlContext();
   const selected = selectedValue === value;
-  const styles = useButtonStyles({ selected, disabled });
+  const styles = useButtonStyles({ selected, disabled, tabLayout });
 
   function handlePress() {
     if (!disabled) {
@@ -35,9 +41,17 @@ export function SegmentedControlButton({
     }
   }
 
+  function handleLayout(e: LayoutChangeEvent) {
+    if (tabLayout === 'fit') {
+      const { x, width } = e.nativeEvent.layout;
+      registerButtonLayout(value, { x, width });
+    }
+  }
+
   return (
     <Pressable
       onPress={handlePress}
+      onLayout={handleLayout}
       disabled={disabled}
       accessibilityState={{ selected, disabled }}
       style={styles.button}
@@ -53,6 +67,7 @@ export function SegmentedControlButton({
           typography={styles.typography}
           lx={{ color: styles.textColor }}
           style={styles.label}
+          numberOfLines={1}
         >
           {children}
         </Text>
@@ -66,14 +81,16 @@ SegmentedControlButton.displayName = 'SegmentedControlButton';
 function useButtonStyles({
   selected,
   disabled,
+  tabLayout,
 }: {
   selected: boolean;
   disabled?: boolean;
+  tabLayout: 'fit' | 'fixed';
 }) {
   const styles = useStyleSheet(
     (t) => ({
       button: {
-        flex: 1,
+        flex: tabLayout === 'fixed' ? 1 : undefined,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
@@ -91,13 +108,15 @@ function useButtonStyles({
       label: {
         textAlign: 'center',
         includeFontPadding: false,
+        flexShrink: 1,
       },
       iconWrap: {
         flexDirection: 'row',
         alignItems: 'center',
+        flexShrink: 0,
       },
     }),
-    [],
+    [tabLayout],
   );
   const typography: LumenTypographyTokenName = selected
     ? 'body2SemiBold'
@@ -114,6 +133,7 @@ export function SegmentedControl({
   children,
   disabled: disabledProp,
   appearance = 'background',
+  tabLayout = 'fixed',
   ...props
 }: SegmentedControlProps) {
   const disabled = useDisabledContext({
@@ -123,19 +143,28 @@ export function SegmentedControl({
   const styles = useRootStyles({
     disabled: Boolean(disabled),
     appearance,
+    tabLayout,
   });
   const selectedIndex = useSegmentedControlSelectedIndex(
     selectedValue,
     children,
   );
-  const { onLayout, animatedPillStyle } = usePillLayout({
+  const { onLayout, animatedPillStyle, registerButtonLayout } = usePillLayout({
     selectedIndex,
+    selectedValue,
     children,
+    tabLayout,
   });
 
   return (
     <SegmentedControlContextProvider
-      value={{ selectedValue, onSelectedChange, disabled }}
+      value={{
+        selectedValue,
+        onSelectedChange,
+        disabled,
+        tabLayout,
+        registerButtonLayout,
+      }}
     >
       <Box
         accessibilityRole='radiogroup'
@@ -160,9 +189,11 @@ SegmentedControl.displayName = 'SegmentedControl';
 function useRootStyles({
   disabled,
   appearance,
+  tabLayout,
 }: {
   disabled: boolean;
   appearance: 'background' | 'no-background';
+  tabLayout: 'fit' | 'fixed';
 }) {
   return useStyleSheet(
     (t) => ({
@@ -170,7 +201,9 @@ function useRootStyles({
         flexDirection: 'row',
         alignItems: 'center',
         position: 'relative',
-        width: '100%',
+        ...(tabLayout === 'fixed'
+          ? { width: '100%' }
+          : { alignSelf: 'flex-start' }),
         borderRadius: t.borderRadius.md,
         backgroundColor:
           appearance === 'background' ? t.colors.bg.surface : 'transparent',
@@ -186,6 +219,6 @@ function useRootStyles({
         zIndex: 0,
       },
     }),
-    [disabled, appearance],
+    [disabled, appearance, tabLayout],
   );
 }

package/src/lib/Components/SegmentedControl/SegmentedControlContext.tsx

@@ -1,9 +1,13 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 
+export type ButtonLayout = { x: number; width: number };
+
 export type SegmentedControlContextValue = {
   selectedValue: string;
   onSelectedChange: (value: string) => void;
   disabled: boolean;
+  tabLayout: 'fit' | 'fixed';
+  registerButtonLayout: (value: string, layout: ButtonLayout) => void;
 };
 
 const [SegmentedControlContextProvider, _useSegmentedControlSafeContext] =

package/src/lib/Components/SegmentedControl/types.ts

@@ -21,6 +21,13 @@ export type SegmentedControlProps = {
    * @default 'background'
    */
   appearance?: 'background' | 'no-background';
+  /**
+   * Controls how tab widths are calculated.
+   * - "fit": each tab sizes to its content
+   * - "fixed": all tabs share equal width, filling the container
+   * @default 'fixed'
+   */
+  tabLayout?: 'fit' | 'fixed';
   /**
    * Accessible label for the control (e.g. "File view").
    */

package/src/lib/Components/SegmentedControl/usePillLayout.ts

@@ -1,4 +1,12 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, {
+  Children,
+  isValidElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { LayoutChangeEvent } from 'react-native';
 import {
   useAnimatedStyle,
@@ -6,15 +14,16 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 import { useTimingConfig } from '../../Animations/useTimingConfig';
+import type { ButtonLayout } from './SegmentedControlContext';
 
 export function useSegmentedControlSelectedIndex(
   selectedValue: string,
-  children: React.ReactNode,
+  children: ReactNode,
 ): number {
   return useMemo(
     () =>
-      React.Children.toArray(children).findIndex((child) => {
-        if (React.isValidElement(child) && child.props != null) {
+      Children.toArray(children).findIndex((child) => {
+        if (isValidElement(child) && child.props != null) {
           return (child.props as { value?: string }).value === selectedValue;
         }
         return false;
@@ -25,17 +34,22 @@ export function useSegmentedControlSelectedIndex(
 
 type UsePillLayoutParams = {
   selectedIndex: number;
+  selectedValue: string;
   children: React.ReactNode;
+  tabLayout: 'fit' | 'fixed';
 };
 
 export function usePillLayout({
   selectedIndex,
+  selectedValue,
   children,
+  tabLayout,
 }: UsePillLayoutParams) {
   const pillTranslateX = useSharedValue(0);
   const pillWidth = useSharedValue(0);
   const pillHeight = useSharedValue(0);
   const hasLayoutRef = useRef(false);
+  const buttonLayoutsRef = useRef(new Map<string, ButtonLayout>());
 
   const timingConfig = useTimingConfig({
     duration: 300,
@@ -44,29 +58,62 @@ export function usePillLayout({
 
   const onLayout = (e: LayoutChangeEvent): void => {
     const { width, height } = e.nativeEvent.layout;
-    const count = React.Children.count(children);
-    const slotWidth = count > 0 ? width / count : 0;
-
-    pillWidth.value = slotWidth;
     pillHeight.value = height;
 
-    if (!hasLayoutRef.current) {
-      hasLayoutRef.current = true;
-      if (selectedIndex >= 0) {
-        pillTranslateX.value = selectedIndex * slotWidth;
+    if (tabLayout === 'fixed') {
+      const count = React.Children.count(children);
+      const slotWidth = count > 0 ? width / count : 0;
+      pillWidth.value = slotWidth;
+
+      if (!hasLayoutRef.current) {
+        hasLayoutRef.current = true;
+        if (selectedIndex >= 0) {
+          pillTranslateX.value = selectedIndex * slotWidth;
+        }
       }
     }
   };
 
+  const registerButtonLayout = useCallback(
+    (value: string, layout: ButtonLayout): void => {
+      buttonLayoutsRef.current.set(value, layout);
+
+      if (tabLayout === 'fit' && !hasLayoutRef.current) {
+        hasLayoutRef.current = true;
+        if (value === selectedValue) {
+          pillTranslateX.value = layout.x;
+          pillWidth.value = layout.width;
+        }
+      }
+    },
+    [tabLayout, selectedValue, pillTranslateX, pillWidth],
+  );
+
   useEffect(() => {
     if (!hasLayoutRef.current) return;
-    if (selectedIndex >= 0 && pillWidth.value > 0) {
-      pillTranslateX.value = withTiming(
-        selectedIndex * pillWidth.value,
-        timingConfig,
-      );
+
+    if (tabLayout === 'fit') {
+      const layout = buttonLayoutsRef.current.get(selectedValue);
+      if (layout) {
+        pillTranslateX.value = withTiming(layout.x, timingConfig);
+        pillWidth.value = withTiming(layout.width, timingConfig);
+      }
+    } else {
+      if (selectedIndex >= 0 && pillWidth.value > 0) {
+        pillTranslateX.value = withTiming(
+          selectedIndex * pillWidth.value,
+          timingConfig,
+        );
+      }
     }
-  }, [selectedIndex, pillWidth, pillTranslateX, timingConfig]);
+  }, [
+    selectedIndex,
+    selectedValue,
+    tabLayout,
+    pillWidth,
+    pillTranslateX,
+    timingConfig,
+  ]);
 
   const animatedPillStyle = useAnimatedStyle(
     () => ({
@@ -77,5 +124,5 @@ export function usePillLayout({
     [pillTranslateX, pillWidth, pillHeight],
   );
 
-  return { onLayout, animatedPillStyle };
+  return { onLayout, animatedPillStyle, registerButtonLayout };
 }

package/src/lib/Components/Select/GlobalSelectBottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { Pressable } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { Check } from '../../Symbols';

package/src/lib/Components/Select/GlobalSelectContext.tsx

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { useState, useRef, useMemo, ReactNode } from 'react';
+import { useState, useRef, useMemo, ReactNode } from 'react';
 import { SelectData } from './types';
 
 type GlobalSelectBottomSheetContextValue = {

package/src/lib/Components/Select/Select.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { GlobalSelectBottomSheet } from './GlobalSelectBottomSheet';
 import { GlobalSelectProvider } from './GlobalSelectContext';

package/src/lib/Components/Select/Select.tsx

@@ -1,5 +1,13 @@
 import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
-import React, { useState, useEffect, useCallback, useId } from 'react';
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useId,
+  Children,
+  isValidElement,
+  ReactNode,
+} from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { ChevronDown } from '../../Symbols';
@@ -328,9 +336,9 @@ export const SelectContent = ({ children }: SelectContentProps) => {
   useEffect(() => {
     const items: SelectContentItem[] = [];
 
-    const extractItems = (child: React.ReactNode): void => {
-      React.Children.forEach(child, (element) => {
-        if (!React.isValidElement(element)) return;
+    const extractItems = (child: ReactNode): void => {
+      Children.forEach(child, (element) => {
+        if (!isValidElement(element)) return;
 
         if (element.type === SelectItem) {
           const props = element.props as SelectItemProps;
@@ -344,12 +352,10 @@ export const SelectContent = ({ children }: SelectContentProps) => {
             disabled: props.disabled,
           });
         } else if (element.type === SelectGroup) {
-          extractItems(
-            (element.props as { children?: React.ReactNode }).children,
-          );
+          extractItems((element.props as { children?: ReactNode }).children);
         } else if (element.type === SelectLabel) {
           const labelText = extractTextFromChildren(
-            (element.props as { children?: React.ReactNode }).children,
+            (element.props as { children?: ReactNode }).children,
             SelectItemText,
           );
           items.push({
@@ -360,12 +366,8 @@ export const SelectContent = ({ children }: SelectContentProps) => {
           items.push({
             type: 'separator',
           });
-        } else if (
-          (element.props as { children?: React.ReactNode })?.children
-        ) {
-          extractItems(
-            (element.props as { children?: React.ReactNode }).children,
-          );
+        } else if ((element.props as { children?: ReactNode })?.children) {
+          extractItems((element.props as { children?: ReactNode }).children);
         }
       });
     };

package/src/lib/Components/Skeleton/Skeleton.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Skeleton } from './Skeleton';
 

package/src/lib/Components/Slot/Slot.tsx

@@ -27,6 +27,7 @@ const SlotPressable = ({
   const { children, ...pressableSlotProps } = props;
 
   if (!isValidElement(children)) {
+    // eslint-disable-next-line no-console
     console.error('Slot.Pressable - Invalid asChild element', children);
     return null;
   }
@@ -49,6 +50,7 @@ const SlotView = ({
   const { children, ...viewSlotProps } = props;
 
   if (!isValidElement(children)) {
+    // eslint-disable-next-line no-console
     console.error('Slot.View - Invalid asChild element', children);
     return null;
   }
@@ -71,6 +73,7 @@ const SlotText = ({
   const { children, ...textSlotProps } = props;
 
   if (!isValidElement(children)) {
+    // eslint-disable-next-line no-console
     console.error('Slot.Text - Invalid asChild element', children);
     return null;
   }
@@ -94,6 +97,7 @@ const SlotImage = ({ ref, ...props }: SlotImageSlotProps) => {
   const { children, ...imageSlotProps } = props;
 
   if (!isValidElement(children)) {
+    // eslint-disable-next-line no-console
     console.error('Slot.Image - Invalid asChild element', children);
     return null;
   }

package/src/lib/Components/Spinner/Spinner.mdx

@@ -69,7 +69,7 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 Import and use the Spinner component:
 
 ```tsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View } from 'react-native';
 import { Spinner } from '@ledgerhq/lumen-ui-rnative';
 
@@ -85,7 +85,6 @@ function MyComponent() {
 Spinners support predefined size variants that ensure consistent visual hierarchy:
 
 ```tsx
-import React from 'react';
 import { Box, Spinner } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
@@ -104,7 +103,6 @@ function MyComponent() {
 Use the `color` property with design token values to set spinner color.
 
 ```tsx
-import React from 'react';
 import { Spinner } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {

package/src/lib/Components/Spot/Spot.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React from 'react';
 import { Settings, Plus, Heart, Star } from '../../Symbols';
 import { IconProps } from '../Icon';
 import { Box, Text } from '../Utility';

package/src/lib/Components/Spot/types.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ComponentType } from 'react';
 import { StyledViewProps } from '../../../styles';
 import { IconProps } from '../Icon';
 
@@ -20,7 +20,7 @@ type IconSpotProps = {
   /**
    * A React component to be rendered as the icon. Required when appearance is 'icon'.
    */
-  icon: React.ComponentType<IconProps>;
+  icon: ComponentType<IconProps>;
 };
 
 type NumberSpotProps = {

package/src/lib/Components/Stepper/Stepper.mdx

@@ -87,7 +87,7 @@ Install and set up the library with our [Setup Guide →](?path=/docs/getting-st
 Import and use the Stepper component:
 
 ```tsx
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { View } from 'react-native';
 import { Stepper } from '@ledgerhq/lumen-ui-rnative';
 
@@ -109,7 +109,6 @@ function OnboardingFlow() {
 Control the visual state based on step completion:
 
 ```tsx
-import React from 'react';
 import { Box, Stepper } from '@ledgerhq/lumen-ui-rnative';
 
 function MultiStepForm() {
@@ -128,7 +127,6 @@ function MultiStepForm() {
 Provide custom labels for localized or descriptive text:
 
 ```tsx
-import React from 'react';
 import { Stepper } from '@ledgerhq/lumen-ui-rnative';
 
 function LocalizedStepper() {

package/src/lib/Components/Stepper/Stepper.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Stepper } from './Stepper';
 

package/src/lib/Components/Subheader/Subheader.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
-import React from 'react';
 import { View, Text } from 'react-native';
 import { Link } from '../Link';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip';

package/src/lib/Components/Subheader/Subheader.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, screen, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import {
   Subheader,

package/src/lib/Components/Switch/BaseSwitch.tsx

@@ -1,5 +1,5 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
-import React, { useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
   Pressable,
   StyleSheet,

package/src/lib/Components/Switch/Switch.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
-import React from 'react';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { Switch } from './Switch';
 

package/src/lib/Components/TabBar/TabBar.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
 import { render, fireEvent } from '@testing-library/react-native';
-import React from 'react';
 import { HomeFill, Settings, BasketPutIn } from '../../Symbols';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { TabBar, TabBarItem } from './TabBar';

package/src/lib/Components/TabBar/TabBar.tsx

@@ -1,5 +1,12 @@
 import { BlurView } from '@sbaiahmed1/react-native-blur';
-import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  Children,
+  isValidElement,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
 import {
   LayoutChangeEvent,
   Platform,
@@ -98,7 +105,7 @@ const useTabBarPillLayout = ({
   children,
 }: {
   active: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   const pillProgress = useSharedValue(0);
   const itemWidth = useSharedValue(0);
@@ -111,8 +118,8 @@ const useTabBarPillLayout = ({
   });
 
   const getActiveIndex = useCallback((): number => {
-    return React.Children.toArray(children).findIndex((child) => {
-      if (React.isValidElement<TabBarItemProps>(child)) {
+    return Children.toArray(children).findIndex((child) => {
+      if (isValidElement<TabBarItemProps>(child)) {
         return child.props.value === active;
       }
       return false;
@@ -121,7 +128,7 @@ const useTabBarPillLayout = ({
 
   const onLayout = (e: LayoutChangeEvent): void => {
     const { width, height } = e.nativeEvent.layout;
-    const count = React.Children.count(children);
+    const count = Children.count(children);
     const slotWidth = (width - PILL_INSET * 2) / count;
 
     itemWidth.value = slotWidth;

package/src/lib/Components/Tag/Tag.mdx

@@ -47,6 +47,12 @@ Tags can be displayed with or without an icon.
 
 <Canvas of={TagStories.ContentTypeShowcase} />
 
+### Truncation
+
+When a tag's label exceeds the available space, the text is automatically truncated with an ellipsis.
+
+<Canvas of={TagStories.TruncateShowcase} />
+
 ### Accessibility
 
 To be implemented:

package/src/lib/Components/Tag/Tag.stories.tsx

@@ -82,3 +82,11 @@ export const ContentTypeShowcase: Story = {
     </Box>
   ),
 };
+
+export const TruncateShowcase: Story = {
+  render: () => (
+    <Box lx={{ width: 's176' }}>
+      <Tag label='Very long custom Tag text that should truncate' />
+    </Box>
+  ),
+};

package/src/lib/Components/Tag/Tag.tsx

@@ -155,7 +155,9 @@ export const Tag = ({
       {...props}
     >
       {IconComponent && <IconComponent size={iconSize} style={styles.icon} />}
-      <Text style={styles.text}>{label}</Text>
+      <Text style={styles.text} numberOfLines={1}>
+        {label}
+      </Text>
     </Box>
   );
 };

package/src/lib/Components/Tile/Tile.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import React from 'react';
 import { Settings, Plus, User, Apps, ChevronRight } from '../../Symbols';
 import { Spot } from '../Spot';
 import { Tag } from '../Tag/Tag';