jfs-components 0.1.36 → 0.1.49

package/src/components/Section/Section.tsx

@@ -1,5 +1,13 @@
 import React, { useState, useMemo, useRef, useCallback } from 'react'
-import { View, Text, Pressable, Platform, type StyleProp, type ViewStyle, type PressableStateCallbackType } from 'react-native'
+import {
+  View,
+  Text,
+  Pressable,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+  type PressableStateCallbackType,
+} from 'react-native'
 import Animated, {
   Easing,
   FadeInUp,
@@ -94,16 +102,16 @@ const SLOT_GRID_HEIGHT_DURATION_MS = 280
 const SLOT_GRID_EASING = Easing.out(Easing.cubic)
 
 type SlotGridProps = {
-  items: React.ReactNode[];
-  gap: number;
-  maxColumns?: number;
+  items: React.ReactNode[]
+  gap: number
+  maxColumns?: number
   /**
    * If set, cells whose index is `>= animateExtrasFromIndex` are wrapped in
    * `Animated.View` with staggered FadeInUp/FadeOutUp builders so that they
    * fade in (and reverse-fade out) when they mount or unmount. Cells below
    * this threshold render as plain `<View>` and are unaffected.
    */
-  animateExtrasFromIndex?: number;
+  animateExtrasFromIndex?: number
   /**
    * If true, the rows container animates its height via an explicit
    * `useSharedValue` + `withTiming` (ease-out cubic, no overshoot) driven by
@@ -111,7 +119,7 @@ type SlotGridProps = {
    * to clip mid-animation. Cells inside always render at their natural size
    * — they are *never* resized during the transition. Default false.
    */
-  animateContainerLayout?: boolean;
+  animateContainerLayout?: boolean
 }
 
 const slotGridRowFlowStyle: ViewStyle = {
@@ -150,12 +158,10 @@ const SlotGrid = React.memo(function SlotGrid({
         for (const w of widths.values()) {
           if (w > newMax) newMax = w
         }
-        setFirstRowMaxWidth((prev) =>
-          prev !== null && Math.abs(prev - newMax) < 0.5 ? prev : newMax
-        )
+        setFirstRowMaxWidth((prev) => (prev !== null && Math.abs(prev - newMax) < 0.5 ? prev : newMax))
       }
     },
-    [firstRowSize]
+    [firstRowSize],
   )
 
   const cellWidth = firstRowMaxWidth
@@ -175,7 +181,7 @@ const SlotGrid = React.memo(function SlotGrid({
   // animated-height clip springs to the new total).
   const cellStyle = useMemo<ViewStyle | undefined>(
     () => (cellWidth !== null ? { width: cellWidth } : undefined),
-    [cellWidth]
+    [cellWidth],
   )
 
   // `space-between` distributes any leftover row space as inter-cell gap, so
@@ -188,15 +194,11 @@ const SlotGrid = React.memo(function SlotGrid({
   // Resolve the threshold once. When undefined we treat it as
   // Number.POSITIVE_INFINITY so the per-cell branch always picks the plain
   // `<View>` path.
-  const extrasThreshold = animationsEnabled
-    ? (animateExtrasFromIndex as number)
-    : Number.POSITIVE_INFINITY
+  const extrasThreshold = animationsEnabled ? (animateExtrasFromIndex as number) : Number.POSITIVE_INFINITY
   // Total count of "extra" cells currently rendered. Used to compute the
   // reverse-stagger delay for the exiting animation so that the last cell
   // leaves first.
-  const extrasCount = animationsEnabled
-    ? Math.max(0, totalItems - extrasThreshold)
-    : 0
+  const extrasCount = animationsEnabled ? Math.max(0, totalItems - extrasThreshold) : 0
 
   const useAnimatedContainer = animateContainerLayout === true
 
@@ -236,12 +238,10 @@ const SlotGrid = React.memo(function SlotGrid({
         reduceMotion: ReduceMotion.System,
       })
     },
-    [animatedHeight]
+    [animatedHeight],
   )
   const animatedHeightStyle = useAnimatedStyle(() =>
-    animatedHeight.value < 0
-      ? {}
-      : { height: animatedHeight.value, overflow: 'hidden' as const }
+    animatedHeight.value < 0 ? {} : { height: animatedHeight.value, overflow: 'hidden' as const },
   )
 
   const rowsChildren = (
@@ -258,26 +258,14 @@ const SlotGrid = React.memo(function SlotGrid({
               const onLayoutHandler =
                 firstRowMaxWidth === null && itemIndex < firstRowSize
                   ? (e: { nativeEvent: { layout: { width: number } } }) =>
-                      handleFirstRowItemLayout(
-                        itemIndex,
-                        e.nativeEvent.layout.width
-                      )
+                      handleFirstRowItemLayout(itemIndex, e.nativeEvent.layout.width)
                   : undefined
 
               if (itemIndex >= extrasThreshold) {
                 const extraOrdinal = itemIndex - extrasThreshold
-                const enterStaggerSteps = Math.min(
-                  extraOrdinal,
-                  SLOT_GRID_STAGGER_CAP
-                )
-                const reverseOrdinal = Math.max(
-                  0,
-                  extrasCount - 1 - extraOrdinal
-                )
-                const exitStaggerSteps = Math.min(
-                  reverseOrdinal,
-                  SLOT_GRID_STAGGER_CAP
-                )
+                const enterStaggerSteps = Math.min(extraOrdinal, SLOT_GRID_STAGGER_CAP)
+                const reverseOrdinal = Math.max(0, extrasCount - 1 - extraOrdinal)
+                const exitStaggerSteps = Math.min(reverseOrdinal, SLOT_GRID_STAGGER_CAP)
                 const entering = FadeInUp.duration(SLOT_GRID_ENTER_DURATION_MS)
                   .easing(SLOT_GRID_EASING)
                   .delay(enterStaggerSteps * SLOT_GRID_ENTER_STAGGER_MS)
@@ -300,20 +288,14 @@ const SlotGrid = React.memo(function SlotGrid({
               }
 
               return (
-                <View
-                  key={itemIndex}
-                  {...(onLayoutHandler ? { onLayout: onLayoutHandler } : null)}
-                  style={cellStyle}
-                >
+                <View key={itemIndex} {...(onLayoutHandler ? { onLayout: onLayoutHandler } : null)} style={cellStyle}>
                   {child}
                 </View>
               )
             })}
             {cellWidth !== null &&
               spacersNeeded > 0 &&
-              Array.from({ length: spacersNeeded }, (_, i) => (
-                <View key={`spacer-${i}`} style={cellStyle} />
-              ))}
+              Array.from({ length: spacersNeeded }, (_, i) => <View key={`spacer-${i}`} style={cellStyle} />)}
           </View>
         )
       })}
@@ -351,28 +333,28 @@ function slotGridPropsAreEqual(prev: SlotGridProps, next: SlotGridProps) {
 }
 
 type SectionProps = {
-  title?: string;
-  supportText?: string;
-  showSupportText?: boolean;
-  slot?: React.ReactNode;
+  title?: string
+  supportText?: string
+  showSupportText?: boolean
+  slot?: React.ReactNode
   /** Layout direction of the slot's children. Defaults to 'row' (horizontal). */
-  slotDirection?: 'row' | 'column';
-  modes?: Modes;
-  onPress?: () => void;
-  style?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
+  slotDirection?: 'row' | 'column'
+  modes?: Modes
+  onPress?: () => void
+  style?: StyleProp<ViewStyle>
+  accessibilityLabel?: string
+  accessibilityHint?: string
   /**
    * Web-specific accessibility props (only used on web platform)
    */
-  webAccessibilityProps?: WebAccessibilityProps;
+  webAccessibilityProps?: WebAccessibilityProps
   /**
    * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
    * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
    * lines as it needs even when horizontal space is tight.
    */
-  disableTruncation?: boolean;
-} & React.ComponentProps<typeof View>;
+  disableTruncation?: boolean
+} & React.ComponentProps<typeof View>
 
 /**
  * Section component that mirrors the Figma "Section" component.
@@ -399,18 +381,18 @@ type SectionProps = {
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 interface SectionTokens {
-  containerStyle: ViewStyle;
-  headerStyle: ViewStyle;
-  titleStyle: ViewStyle;
-  supportTextStyle: ViewStyle;
-  sectionGap: number;
-  slotGap: number;
+  containerStyle: ViewStyle
+  headerStyle: ViewStyle
+  titleStyle: ViewStyle
+  supportTextStyle: ViewStyle
+  sectionGap: number
+  slotGap: number
 }
 
 function resolveSectionTokens(modes: Modes): SectionTokens {
   const backgroundColor = getVariableByName('section/background/color', modes)
-  const sectionGap = (getVariableByName('section/gap', modes)) as number
-  const slotGap = (getVariableByName('slot/gap', modes)) as number
+  const sectionGap = getVariableByName('section/gap', modes) as number
+  const slotGap = getVariableByName('slot/gap', modes) as number
   const paddingHorizontal = getVariableByName('section/padding/horizontal', modes)
   const paddingVertical = getVariableByName('section/padding/vertical', modes)
   const radius = getVariableByName('section/radius', modes)
@@ -424,10 +406,7 @@ function resolveSectionTokens(modes: Modes): SectionTokens {
   const titleLineHeight = getVariableByName('section/title/lineHeight', modes)
   const titleFontFamily = getVariableByName('section/title/fontFamily', modes)
   const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes)
-  const titleFontWeight =
-    typeof titleFontWeightRaw === 'number'
-      ? titleFontWeightRaw.toString()
-      : titleFontWeightRaw
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
   const supportTextColor = getVariableByName('section/supportText/color', modes)
   const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes)
@@ -435,9 +414,7 @@ function resolveSectionTokens(modes: Modes): SectionTokens {
   const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes)
   const supportTextFontWeightRaw = getVariableByName('section/supportText/fontWeight', modes)
   const supportTextFontWeight =
-    typeof supportTextFontWeightRaw === 'number'
-      ? supportTextFontWeightRaw.toString()
-      : supportTextFontWeightRaw
+    typeof supportTextFontWeightRaw === 'number' ? supportTextFontWeightRaw.toString() : supportTextFontWeightRaw
 
   return {
     containerStyle: {
@@ -540,9 +517,7 @@ function Section({
         >
           {title}
         </Text>
-        {onPress && (
-          <NavArrow direction="Forward" modes={modes} />
-        )}
+        {onPress && <NavArrow direction="Forward" modes={modes} />}
       </View>
       {showSupportText && (
         <Text
@@ -592,13 +567,10 @@ function Section({
       isHeaderHovered ? headerHoverStyle : null,
       isHeaderFocused ? headerFocusStyle : null,
     ],
-    [tokens.headerStyle, isHeaderHovered, isHeaderFocused]
+    [tokens.headerStyle, isHeaderHovered, isHeaderFocused],
   )
 
-  const containerStyleArray = useMemo(
-    () => [tokens.containerStyle, style],
-    [tokens.containerStyle, style]
-  )
+  const containerStyleArray = useMemo(() => [tokens.containerStyle, style], [tokens.containerStyle, style])
 
   return (
     <View
@@ -627,21 +599,27 @@ function Section({
           {headerContent}
         </Pressable>
       ) : (
-        <View style={tokens.headerStyle}>
-          {headerContent}
-        </View>
+        <View style={tokens.headerStyle}>{headerContent}</View>
+      )}
+      {slot && (
+        <SectionSlot
+          slot={slot}
+          modes={modes}
+          direction={slotDirection}
+          rowGap={tokens.sectionGap}
+          columnGap={tokens.slotGap}
+        />
       )}
-      {slot && <SectionSlot slot={slot} modes={modes} direction={slotDirection} rowGap={tokens.sectionGap} columnGap={tokens.slotGap} />}
     </View>
   )
 }
 
 type SectionSlotProps = {
-  slot: React.ReactNode;
-  modes: Modes;
-  direction: 'row' | 'column';
-  rowGap: number;
-  columnGap: number;
+  slot: React.ReactNode
+  modes: Modes
+  direction: 'row' | 'column'
+  rowGap: number
+  columnGap: number
 }
 
 /**
@@ -651,15 +629,9 @@ type SectionSlotProps = {
  * without re-walking the slot tree via `cloneChildrenWithModes`.
  */
 function SectionSlot({ slot, modes, direction, rowGap, columnGap }: SectionSlotProps) {
-  const processed = useMemo(
-    () => cloneChildrenWithModes(flattenChildren(slot), modes),
-    [slot, modes]
-  )
+  const processed = useMemo(() => cloneChildrenWithModes(flattenChildren(slot), modes), [slot, modes])
 
-  const columnContainerStyle = useMemo<ViewStyle>(
-    () => ({ flexDirection: 'column', gap: columnGap }),
-    [columnGap]
-  )
+  const columnContainerStyle = useMemo<ViewStyle>(() => ({ flexDirection: 'column', gap: columnGap }), [columnGap])
 
   if (direction === 'row') {
     return <SlotGrid items={processed} gap={rowGap} />
@@ -668,21 +640,22 @@ function SectionSlot({ slot, modes, direction, rowGap, columnGap }: SectionSlotP
 }
 
 type BentoToggleRenderState = {
-  expanded: boolean;
-  toggle: () => void;
+  expanded: boolean
+  toggle: () => void
 }
 
 type SectionBentoProps = {
-  navSlot?: React.ReactNode;
-  upiSlot?: React.ReactNode;
-  modes?: Modes;
-  style?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
+  navSlot?: React.ReactNode
+  upiSlot?: React.ReactNode
+  upi?: boolean
+  modes?: Modes
+  style?: StyleProp<ViewStyle>
+  accessibilityLabel?: string
+  accessibilityHint?: string
   /**
    * Web-specific accessibility props (only used on web platform)
    */
-  webAccessibilityProps?: WebAccessibilityProps;
+  webAccessibilityProps?: WebAccessibilityProps
   /**
    * Total cell count visible when collapsed (real items + the toggle cell).
    * Defaults to {@link SLOT_GRID_MAX_COLUMNS} (4) so the collapsed state fills
@@ -690,37 +663,37 @@ type SectionBentoProps = {
    * disabled (no toggle injected, no animation wrappers — identical to the
    * legacy behavior for back-compat).
    */
-  collapsedCount?: number;
+  collapsedCount?: number
   /**
    * Uncontrolled initial expanded state. Ignored when `expanded` is provided.
    * Defaults to `false`.
    */
-  defaultExpanded?: boolean;
+  defaultExpanded?: boolean
   /**
    * Controlled expanded state. When provided, `onExpandedChange` should also
    * be provided so the component can request changes.
    */
-  expanded?: boolean;
+  expanded?: boolean
   /**
    * Called when the user taps the toggle. Required in controlled mode; ignored
    * in uncontrolled mode unless you want to observe the change.
    */
-  onExpandedChange?: (next: boolean) => void;
+  onExpandedChange?: (next: boolean) => void
   /** Label shown on the toggle cell when collapsed. Default `'More'`. */
-  toggleMoreLabel?: string;
+  toggleMoreLabel?: string
   /** Label shown on the toggle cell when expanded. Default `'Less'`. */
-  toggleLessLabel?: string;
+  toggleLessLabel?: string
   /** Icon name shown on the toggle when collapsed. Default `'ic_chevron_down'`. */
-  toggleMoreIcon?: string;
+  toggleMoreIcon?: string
   /** Icon name shown on the toggle when expanded. Default `'ic_chevron_up'`. */
-  toggleLessIcon?: string;
+  toggleLessIcon?: string
   /**
    * Escape hatch: render a custom toggle cell instead of the default ListItem.
    * The provided node is rendered in the toggle's grid slot. Wire `toggle()` to
    * any tap interaction inside it. Height + per-cell animations still apply.
    */
-  renderToggle?: (state: BentoToggleRenderState) => React.ReactNode;
-} & React.ComponentProps<typeof View>;
+  renderToggle?: (state: BentoToggleRenderState) => React.ReactNode
+} & React.ComponentProps<typeof View>
 
 /**
  * Section.Bento component that mirrors the Figma "Section.Bento" component.
@@ -739,6 +712,7 @@ type SectionBentoProps = {
  * @param {Object} props
  * @param {React.ReactNode} [props.navSlot] - Optional custom slot for navigation items (Figma Slot "Nav wrap")
  * @param {React.ReactNode} [props.upiSlot] - Optional custom slot for UPI handles (Figma Slot "UPI wrap")
+ * @param {boolean} [props.upi=true] - Toggles the UPI wrap (Figma boolean property "upi")
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section
@@ -749,6 +723,7 @@ const sectionBentoUpiRowStyle: ViewStyle = { flexDirection: 'row', gap: 8 }
 function SectionBento({
   navSlot,
   upiSlot,
+  upi = true,
   modes = EMPTY_MODES,
   style,
   // Same rationale as Section: accepted on the type but unused internally.
@@ -779,17 +754,17 @@ function SectionBento({
       borderRadius: radius,
       gap,
     }),
-    [backgroundColor, paddingHorizontal, paddingVertical, radius, gap]
+    [backgroundColor, paddingHorizontal, paddingVertical, radius, gap],
   )
 
   const processedNavSlot = useMemo(
     () => (navSlot ? cloneChildrenWithModes(flattenChildren(navSlot), modes) : null),
-    [navSlot, modes]
+    [navSlot, modes],
   )
 
   const processedUpiSlot = useMemo(
     () => (upiSlot ? cloneChildrenWithModes(flattenChildren(upiSlot), modes) : null),
-    [upiSlot, modes]
+    [upiSlot, modes],
   )
 
   // `canExpand` is true iff there are strictly more real items than fit into
@@ -823,24 +798,22 @@ function SectionBento({
       return allRealItems
     }
     // Leave the last collapsed slot for the toggle cell.
-    const visibleRealItems = expanded
-      ? allRealItems
-      : allRealItems.slice(0, collapsedCount - 1)
-
-    const toggleNode = renderToggle
-      ? renderToggle({ expanded, toggle })
-      : (
-        <DefaultBentoToggle
-          expanded={expanded}
-          onPress={toggle}
-          modes={modes}
-          moreLabel={toggleMoreLabel}
-          lessLabel={toggleLessLabel}
-          moreIcon={toggleMoreIcon}
-          lessIcon={toggleLessIcon}
-          extraCount={allRealItems.length - (collapsedCount - 1)}
-        />
-      )
+    const visibleRealItems = expanded ? allRealItems : allRealItems.slice(0, collapsedCount - 1)
+
+    const toggleNode = renderToggle ? (
+      renderToggle({ expanded, toggle })
+    ) : (
+      <DefaultBentoToggle
+        expanded={expanded}
+        onPress={toggle}
+        modes={modes}
+        moreLabel={toggleMoreLabel}
+        lessLabel={toggleLessLabel}
+        moreIcon={toggleMoreIcon}
+        lessIcon={toggleLessIcon}
+        extraCount={allRealItems.length - (collapsedCount - 1)}
+      />
+    )
 
     return [...visibleRealItems, toggleNode]
   }, [
@@ -877,11 +850,7 @@ function SectionBento({
             : null)}
         />
       )}
-      {processedUpiSlot && (
-        <View style={sectionBentoUpiRowStyle}>
-          {processedUpiSlot}
-        </View>
-      )}
+      {upi && processedUpiSlot && <View style={sectionBentoUpiRowStyle}>{processedUpiSlot}</View>}
     </View>
   )
 }
@@ -897,15 +866,15 @@ function SectionBento({
 // shared-value-driven rotation would lose its anchor across toggles.
 // ---------------------------------------------------------------------------
 type DefaultBentoToggleProps = {
-  expanded: boolean;
-  onPress: () => void;
-  modes: Modes;
-  moreLabel: string;
-  lessLabel: string;
-  moreIcon: string;
-  lessIcon: string;
+  expanded: boolean
+  onPress: () => void
+  modes: Modes
+  moreLabel: string
+  lessLabel: string
+  moreIcon: string
+  lessIcon: string
   /** How many additional actions become visible when expanding. Used in the a11y hint. */
-  extraCount: number;
+  extraCount: number
 }
 
 function DefaultBentoToggle({
@@ -921,10 +890,7 @@ function DefaultBentoToggle({
   const label = expanded ? lessLabel : moreLabel
   const iconName = expanded ? lessIcon : moreIcon
   const accessibilityState = useMemo(() => ({ expanded }), [expanded])
-  const webAccessibilityProps = useMemo(
-    () => ({ ariaExpanded: expanded }),
-    [expanded]
-  )
+  const webAccessibilityProps = useMemo(() => ({ ariaExpanded: expanded }), [expanded])
   const accessibilityHint = expanded
     ? `Hides ${extraCount} additional ${extraCount === 1 ? 'action' : 'actions'}`
     : `Shows ${extraCount} additional ${extraCount === 1 ? 'action' : 'actions'}`
@@ -948,4 +914,3 @@ function DefaultBentoToggle({
 Section.Bento = SectionBento
 
 export default Section
-