jfs-components 0.0.61 → 0.0.63

package/src/components/Section/Section.tsx

@@ -1,13 +1,50 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react'
+import React, { useState, useMemo, useRef, useCallback } from 'react'
 import { View, Text, Pressable, Platform, type StyleProp, type ViewStyle, type PressableStateCallbackType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+
+// Match Button: delay the press visual on iOS so a scroll-cancelled touch
+// never applies the "pressed" style. See Button.tsx for the rationale.
+const IS_WEB = Platform.OS === 'web'
+const IS_IOS = Platform.OS === 'ios'
+const HEADER_PRESS_DELAY = IS_IOS ? 130 : 0
+
+// Module-scope style constants — never re-allocated per render.
+const headerWrapStyle: ViewStyle = {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}
+const headerHoverStyle: ViewStyle = { opacity: 0.95 }
+const headerPressedStyle: ViewStyle = { opacity: 0.85 }
+const headerFocusStyle: ViewStyle = { borderColor: '#222', borderWidth: 1 }
 
 // ---------------------------------------------------------------------------
-// Shared grid layout: measures widest child, enforces uniform width,
-// chunks into fixed rows of up to maxColumns, space-between per row.
+// Shared grid layout: measures the widest child once per item-count, then
+// renders uniform-width cells laid out with `justify-content: space-between`.
+// This preserves three visual invariants regardless of viewport width:
+//   1. The first cell hugs the container's left edge.
+//   2. The last cell hugs the container's right edge.
+//   3. Cells in row N column K align with cells in row N+1 column K
+//      (uniform cell width across the whole grid).
+// Pure flex sizing (e.g. `flexBasis: 0; flexGrow: 1`) cannot satisfy (1) and
+// (2) on wide viewports — it distributes extra space inside each cell, which
+// makes the icon+label content drift toward each cell's center and produces
+// visible "dead" margins on the left and right of the grid.
+//
+// To avoid the blank-flash that the previous implementation suffered from
+// (it hid the grid with `opacity: 0` until measurement completed, and reset
+// every measurement when the item count changed):
+//   * Cells render at their *natural* widths during measurement instead of
+//     being hidden. With `space-between`, the first/last cells already hug
+//     the edges; only the column alignment can be off by a few pixels for
+//     the single frame between mount and the onLayout callback.
+//   * On item-count change (e.g. expand / collapse), we clear the per-cell
+//     samples but keep the rendered layout visible — we never blank out.
+//   * No 500ms safety timeout is needed because the grid is visible from the
+//     first frame.
 // ---------------------------------------------------------------------------
 const SLOT_GRID_MAX_COLUMNS = 4
 
@@ -17,32 +54,61 @@ type SlotGridProps = {
   maxColumns?: number;
 }
 
-function SlotGrid({ items, gap, maxColumns = SLOT_GRID_MAX_COLUMNS }: SlotGridProps) {
+const slotGridRowStyle: ViewStyle = {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+}
+
+const SlotGrid = React.memo(function SlotGrid({
+  items,
+  gap,
+  maxColumns = SLOT_GRID_MAX_COLUMNS,
+}: SlotGridProps) {
+  const totalItems = items.length
+
   const [maxItemWidth, setMaxItemWidth] = useState<number | null>(null)
-  const [measureTimedOut, setMeasureTimedOut] = useState(false)
+  // Tracks the item-count that `maxItemWidth` corresponds to. When the
+  // current `totalItems` differs, the existing measurement is considered
+  // stale and cells fall back to natural widths until remeasurement.
+  const [measuredForCount, setMeasuredForCount] = useState(0)
   const itemWidthsRef = useRef<Map<number, number>>(new Map())
-  const totalItems = items.length
 
-  useEffect(() => {
-    itemWidthsRef.current.clear()
-    setMaxItemWidth(null)
-    setMeasureTimedOut(false)
-  }, [totalItems])
-
-  useEffect(() => {
-    if (maxItemWidth !== null) return
-    const timer = setTimeout(() => setMeasureTimedOut(true), 500)
-    return () => clearTimeout(timer)
-  }, [maxItemWidth, totalItems])
-
-  const handleItemLayout = useCallback((index: number, width: number) => {
-    itemWidthsRef.current.set(index, width)
-    if (itemWidthsRef.current.size >= totalItems && totalItems > 0) {
-      setMaxItemWidth(Math.max(...itemWidthsRef.current.values()))
-    }
-  }, [totalItems])
-
-  const isMeasured = maxItemWidth !== null
+  // Synchronously invalidate per-cell samples when the item count changes
+  // (e.g. show more / less). We deliberately do NOT touch `maxItemWidth` or
+  // `measuredForCount` state here — flipping them would force an extra render
+  // pass; instead we let the count mismatch (`measuredForCount !== totalItems`)
+  // gate the use of the stale value, and the next onLayout cycle will publish
+  // a fresh `maxItemWidth` for the new count.
+  const prevTotalRef = useRef(totalItems)
+  if (prevTotalRef.current !== totalItems) {
+    prevTotalRef.current = totalItems
+    itemWidthsRef.current = new Map()
+  }
+
+  const handleItemLayout = useCallback(
+    (index: number, width: number) => {
+      const widths = itemWidthsRef.current
+      const previous = widths.get(index)
+      if (previous !== undefined && Math.abs(previous - width) < 0.5) return
+      widths.set(index, width)
+      if (widths.size >= totalItems && totalItems > 0) {
+        let newMax = 0
+        for (const w of widths.values()) {
+          if (w > newMax) newMax = w
+        }
+        setMaxItemWidth((prev) =>
+          prev !== null && Math.abs(prev - newMax) < 0.5 ? prev : newMax
+        )
+        setMeasuredForCount(totalItems)
+      }
+    },
+    [totalItems]
+  )
+
+  const hasFreshMeasurement =
+    maxItemWidth !== null && measuredForCount === totalItems
+  const cellWidth = hasFreshMeasurement ? maxItemWidth : undefined
+
   const columns = Math.min(maxColumns, totalItems || 1)
 
   const rows: React.ReactNode[][] = []
@@ -50,44 +116,59 @@ function SlotGrid({ items, gap, maxColumns = SLOT_GRID_MAX_COLUMNS }: SlotGridPr
     rows.push(items.slice(i, i + columns))
   }
 
+  const containerStyle = useMemo<ViewStyle>(() => ({ gap }), [gap])
+  const measuredCellStyle = useMemo<ViewStyle | undefined>(
+    () => (cellWidth !== undefined ? { width: cellWidth } : undefined),
+    [cellWidth]
+  )
+
   return (
-    <View style={{ gap, ...(isMeasured || measureTimedOut ? {} : { opacity: 0 }) }}>
+    <View style={containerStyle}>
       {rows.map((row, rowIndex) => {
         const spacersNeeded = row.length < columns ? columns - row.length : 0
         return (
-          <View
-            key={rowIndex}
-            style={{
-              flexDirection: 'row' as const,
-              justifyContent: 'space-between' as const,
-            }}
-          >
+          <View key={rowIndex} style={slotGridRowStyle}>
             {row.map((child, colIndex) => {
               const itemIndex = rowIndex * columns + colIndex
               return (
                 <View
                   key={itemIndex}
                   onLayout={
-                    !isMeasured
-                      ? (e) => handleItemLayout(itemIndex, e.nativeEvent.layout.width)
-                      : undefined
+                    hasFreshMeasurement
+                      ? undefined
+                      : (e) =>
+                          handleItemLayout(
+                            itemIndex,
+                            e.nativeEvent.layout.width
+                          )
                   }
-                  style={isMeasured ? { width: maxItemWidth } : undefined}
+                  style={measuredCellStyle}
                 >
                   {child}
                 </View>
               )
             })}
-            {isMeasured &&
+            {hasFreshMeasurement &&
               spacersNeeded > 0 &&
               Array.from({ length: spacersNeeded }, (_, i) => (
-                <View key={`spacer-${i}`} style={{ width: maxItemWidth }} />
+                <View key={`spacer-${i}`} style={measuredCellStyle} />
               ))}
           </View>
         )
       })}
     </View>
   )
+}, slotGridPropsAreEqual)
+
+function slotGridPropsAreEqual(prev: SlotGridProps, next: SlotGridProps) {
+  if (prev.gap !== next.gap) return false
+  if ((prev.maxColumns ?? SLOT_GRID_MAX_COLUMNS) !== (next.maxColumns ?? SLOT_GRID_MAX_COLUMNS)) return false
+  if (prev.items === next.items) return true
+  if (prev.items.length !== next.items.length) return false
+  for (let i = 0; i < prev.items.length; i++) {
+    if (prev.items[i] !== next.items[i]) return false
+  }
+  return true
 }
 
 type SectionProps = {
@@ -132,40 +213,27 @@ type SectionProps = {
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section. If not provided, uses title
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-function Section({
-  title = 'Section title',
-  supportText = 'Section support text',
-  showSupportText = true,
-  slot,
-  slotDirection = 'row',
-  modes = {},
-  onPress,
-  style,
-  accessibilityLabel,
-  accessibilityHint,
-  webAccessibilityProps,
-  ...rest
-}: SectionProps) {
-  const [isHeaderFocused, setIsHeaderFocused] = useState(false)
-  const [isHeaderHovered, setIsHeaderHovered] = useState(false)
-  const [isHeaderPressed, setIsHeaderPressed] = useState(false)
-  const headerFocusStyle: ViewStyle = isHeaderFocused ? { borderColor: '#222', borderWidth: 1 } : {}
-  const headerHoverStyle: ViewStyle = isHeaderHovered ? { opacity: 0.95 } : {}
-  const headerPressedStyle: ViewStyle = isHeaderPressed ? { opacity: 0.85 } : {}
-  // Resolve section container tokens
+interface SectionTokens {
+  containerStyle: ViewStyle;
+  headerStyle: ViewStyle;
+  titleStyle: ViewStyle;
+  supportTextStyle: ViewStyle;
+  sectionGap: number;
+  slotGap: number;
+}
+
+function resolveSectionTokens(modes: Record<string, any>): SectionTokens {
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const sectionGap = getVariableByName('section/gap', modes) || 12
-  const slotGap = getVariableByName('slot/gap', modes) || 12
+  const sectionGap = (getVariableByName('section/gap', modes) || 12) as number
+  const slotGap = (getVariableByName('slot/gap', modes) || 12) as number
   const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
   const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
   const radius = getVariableByName('section/radius', modes) || 12
 
-  // Resolve section header tokens
   const headerGap = getVariableByName('section/header/gap', modes) || 8
   const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes) || 0
   const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes) || 0
 
-  // Resolve section title tokens
   const titleColor = getVariableByName('section/title/color', modes) || '#0f0d0a'
   const titleFontSize = getVariableByName('section/title/fontSize', modes) || 18
   const titleLineHeight = getVariableByName('section/title/lineHeight', modes) || 20
@@ -176,7 +244,6 @@ function Section({
       ? titleFontWeightRaw.toString()
       : titleFontWeightRaw
 
-  // Resolve section support text tokens
   const supportTextColor = getVariableByName('section/supportText/color', modes) || '#1f1a14'
   const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes) || 14
   const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes) || 18
@@ -187,46 +254,85 @@ function Section({
       ? supportTextFontWeightRaw.toString()
       : supportTextFontWeightRaw
 
-  const containerStyle = {
-    backgroundColor,
-    paddingHorizontal,
-    paddingVertical,
-    borderRadius: radius,
-    gap: sectionGap,
-  }
-
-  const headerStyle = {
-    paddingHorizontal: headerPaddingHorizontal,
-    paddingVertical: headerPaddingVertical,
-    gap: headerGap,
-  }
-
-  const headerWrapStyle: ViewStyle = {
-    flexDirection: 'row' as const,
-    alignItems: 'center' as const,
-    justifyContent: 'space-between' as const,
-  }
-
-  const titleStyle = {
-    flex: 1,
-    color: titleColor,
-    fontSize: titleFontSize,
-    lineHeight: titleLineHeight,
-    fontFamily: titleFontFamily,
-    fontWeight: titleFontWeight,
+  return {
+    containerStyle: {
+      backgroundColor,
+      paddingHorizontal,
+      paddingVertical,
+      borderRadius: radius,
+      gap: sectionGap,
+    },
+    headerStyle: {
+      paddingHorizontal: headerPaddingHorizontal,
+      paddingVertical: headerPaddingVertical,
+      gap: headerGap,
+    },
+    titleStyle: {
+      flex: 1,
+      color: titleColor,
+      fontSize: titleFontSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight,
+    } as ViewStyle,
+    supportTextStyle: {
+      color: supportTextColor,
+      fontSize: supportTextFontSize,
+      lineHeight: supportTextLineHeight,
+      fontFamily: supportTextFontFamily,
+      fontWeight: supportTextFontWeight,
+    } as ViewStyle,
+    sectionGap,
+    slotGap,
   }
+}
 
-  const supportTextStyle = {
-    color: supportTextColor,
-    fontSize: supportTextFontSize,
-    lineHeight: supportTextLineHeight,
-    fontFamily: supportTextFontFamily,
-    fontWeight: supportTextFontWeight,
-  }
+function Section({
+  title = 'Section title',
+  supportText = 'Section support text',
+  showSupportText = true,
+  slot,
+  slotDirection = 'row',
+  modes = EMPTY_MODES,
+  onPress,
+  style,
+  // accessibilityLabel is intentionally accepted on the type for API
+  // back-compat, but the inner Pressable/View deliberately pass
+  // `accessibilityLabel={undefined}` (the title Text carries the label
+  // instead). Prefix to satisfy the unused-var lint while keeping the prop
+  // shape unchanged.
+  accessibilityLabel: _accessibilityLabel,
+  accessibilityHint,
+  webAccessibilityProps,
+  ...rest
+}: SectionProps) {
+  // Focus and hover are still mirrored in React because they are visible,
+  // sustained states (web-only in practice). The setters are gated so they
+  // never fire on native — keeping the component render-free during touch.
+  // Press is handled imperatively via the `Pressable` style callback so a
+  // scroll-cancelled touch never schedules a React render.
+  const [isHeaderFocused, setIsHeaderFocused] = useState(false)
+  const [isHeaderHovered, setIsHeaderHovered] = useState(false)
 
-  // Generate default accessibility label from title and supportText
-  const defaultAccessibilityLabel = accessibilityLabel ||
-    (showSupportText ? `${title}. ${supportText}` : title)
+  // Mirror user handlers in a ref so our wrappers can stay referentially
+  // stable. Without this, every parent re-render would hand Pressable fresh
+  // function identities and re-bind every event.
+  const userHandlersRef = useRef<{
+    onPressIn?: (e: any) => void
+    onPressOut?: (e: any) => void
+    onHoverIn?: (e: any) => void
+    onHoverOut?: (e: any) => void
+    onFocus?: (e: any) => void
+    onBlur?: (e: any) => void
+  }>({})
+  userHandlersRef.current.onPressIn = (rest as any)?.onPressIn
+  userHandlersRef.current.onPressOut = (rest as any)?.onPressOut
+  userHandlersRef.current.onHoverIn = (rest as any)?.onHoverIn
+  userHandlersRef.current.onHoverOut = (rest as any)?.onHoverOut
+  userHandlersRef.current.onFocus = (rest as any)?.onFocus
+  userHandlersRef.current.onBlur = (rest as any)?.onBlur
+
+  const tokens = useMemo(() => resolveSectionTokens(modes), [modes])
 
   // Get web platform support props (only used when onPress is defined)
   const webProps = usePressableWebSupport({
@@ -241,7 +347,7 @@ function Section({
     <>
       <View style={headerWrapStyle}>
         <Text
-          style={titleStyle}
+          style={tokens.titleStyle}
           numberOfLines={1}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
@@ -254,7 +360,7 @@ function Section({
       </View>
       {showSupportText && (
         <Text
-          style={supportTextStyle}
+          style={tokens.supportTextStyle}
           numberOfLines={2}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
@@ -265,10 +371,53 @@ function Section({
     </>
   )
 
+  // Stable handler identities. User handlers are read through the ref so
+  // these wrappers don't need new identities each render.
+  const handlePressIn = useCallback((e: any) => {
+    userHandlersRef.current.onPressIn?.(e)
+  }, [])
+  const handlePressOut = useCallback((e: any) => {
+    userHandlersRef.current.onPressOut?.(e)
+  }, [])
+  const handleHoverIn = useCallback((e: any) => {
+    if (IS_WEB) setIsHeaderHovered(true)
+    userHandlersRef.current.onHoverIn?.(e)
+  }, [])
+  const handleHoverOut = useCallback((e: any) => {
+    if (IS_WEB) setIsHeaderHovered(false)
+    userHandlersRef.current.onHoverOut?.(e)
+  }, [])
+  const handleFocus = useCallback((e: any) => {
+    if (IS_WEB) setIsHeaderFocused(true)
+    userHandlersRef.current.onFocus?.(e)
+  }, [])
+  const handleBlur = useCallback((e: any) => {
+    if (IS_WEB) setIsHeaderFocused(false)
+    userHandlersRef.current.onBlur?.(e)
+  }, [])
+
+  // The pressed visual is applied by the host view directly through the
+  // Pressable style callback — no React render is scheduled. We still want
+  // the (constant) hover style on web so we keep it in the array.
+  const headerStyleCallback = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+      tokens.headerStyle,
+      pressed ? headerPressedStyle : null,
+      isHeaderHovered ? headerHoverStyle : null,
+      isHeaderFocused ? headerFocusStyle : null,
+    ],
+    [tokens.headerStyle, isHeaderHovered, isHeaderFocused]
+  )
+
+  const containerStyleArray = useMemo(
+    () => [tokens.containerStyle, style],
+    [tokens.containerStyle, style]
+  )
+
   return (
     <View
-      style={[containerStyle, style]}
-      {...(Platform.OS === 'web' ? { accessibilityRole: 'region' as any } : undefined)}
+      style={containerStyleArray}
+      {...(IS_WEB ? { accessibilityRole: 'region' as any } : undefined)}
       accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
@@ -277,62 +426,61 @@ function Section({
         <Pressable
           accessibilityRole="button"
           accessibilityLabel={undefined}
-          accessibilityHint={accessibilityHint || "Opens section details"}
+          accessibilityHint={accessibilityHint || 'Opens section details'}
           onPress={onPress}
-          onPressIn={(e: any) => {
-            setIsHeaderPressed(true)
-              ; (rest as any)?.onPressIn?.(e)
-          }}
-          onPressOut={(e: any) => {
-            setIsHeaderPressed(false)
-              ; (rest as any)?.onPressOut?.(e)
-          }}
-          onFocus={(e: any) => {
-            setIsHeaderFocused(true)
-              ; (rest as any)?.onFocus?.(e)
-          }}
-          onBlur={(e: any) => {
-            setIsHeaderFocused(false)
-              ; (rest as any)?.onBlur?.(e)
-          }}
-          onHoverIn={(e: any) => {
-            setIsHeaderHovered(true)
-              ; (rest as any)?.onHoverIn?.(e)
-          }}
-          onHoverOut={(e: any) => {
-            setIsHeaderHovered(false)
-              ; (rest as any)?.onHoverOut?.(e)
-          }}
-          style={({ pressed }: PressableStateCallbackType) => [
-            headerStyle,
-            pressed ? headerPressedStyle : null,
-            headerHoverStyle,
-            headerFocusStyle,
-          ]}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onHoverIn={handleHoverIn}
+          onHoverOut={handleHoverOut}
+          unstable_pressDelay={HEADER_PRESS_DELAY}
+          style={headerStyleCallback}
           {...webProps}
         >
           {headerContent}
         </Pressable>
       ) : (
-        <View style={headerStyle}>
+        <View style={tokens.headerStyle}>
           {headerContent}
         </View>
       )}
-      {slot && slotDirection === 'row' && (
-        <SlotGrid
-          items={cloneChildrenWithModes(flattenChildren(slot), modes)}
-          gap={sectionGap}
-        />
-      )}
-      {slot && slotDirection === 'column' && (
-        <View style={{ flexDirection: 'column' as const, gap: slotGap }}>
-          {cloneChildrenWithModes(flattenChildren(slot), modes)}
-        </View>
-      )}
+      {slot && <SectionSlot slot={slot} modes={modes} direction={slotDirection} rowGap={tokens.sectionGap} columnGap={tokens.slotGap} />}
     </View>
   )
 }
 
+type SectionSlotProps = {
+  slot: React.ReactNode;
+  modes: Record<string, any>;
+  direction: 'row' | 'column';
+  rowGap: number;
+  columnGap: number;
+}
+
+/**
+ * Internal helper that processes the slot children once per (slot, modes) pair
+ * and dispatches to the row (SlotGrid) or column layout. Splitting this out of
+ * `Section` lets the parent re-render (e.g. for header press/hover state)
+ * 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 columnContainerStyle = useMemo<ViewStyle>(
+    () => ({ flexDirection: 'column', gap: columnGap }),
+    [columnGap]
+  )
+
+  if (direction === 'row') {
+    return <SlotGrid items={processed} gap={rowGap} />
+  }
+  return <View style={columnContainerStyle}>{processed}</View>
+}
+
 type SectionBentoProps = {
   navSlot?: React.ReactNode;
   upiSlot?: React.ReactNode;
@@ -368,12 +516,15 @@ type SectionBentoProps = {
  * @param {string} [props.accessibilityLabel] - Accessibility label for the section
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
+const sectionBentoUpiRowStyle: ViewStyle = { flexDirection: 'row', gap: 8 }
+
 function SectionBento({
   navSlot,
   upiSlot,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
-  accessibilityLabel = undefined,
+  // Same rationale as Section: accepted on the type but unused internally.
+  accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   ...rest
 }: SectionBentoProps) {
@@ -384,21 +535,26 @@ function SectionBento({
   const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
   const radius = getVariableByName('section/radius', modes) || 12
 
-  const containerStyle = {
-    backgroundColor,
-    paddingHorizontal,
-    paddingVertical,
-    borderRadius: radius,
-    gap,
-  }
+  const containerStyle = useMemo<ViewStyle>(
+    () => ({
+      backgroundColor,
+      paddingHorizontal,
+      paddingVertical,
+      borderRadius: radius,
+      gap,
+    }),
+    [backgroundColor, paddingHorizontal, paddingVertical, radius, gap]
+  )
 
-  const processedNavSlot = navSlot
-    ? cloneChildrenWithModes(flattenChildren(navSlot), modes)
-    : null
+  const processedNavSlot = useMemo(
+    () => (navSlot ? cloneChildrenWithModes(flattenChildren(navSlot), modes) : null),
+    [navSlot, modes]
+  )
 
-  const processedUpiSlot = upiSlot
-    ? cloneChildrenWithModes(flattenChildren(upiSlot), modes)
-    : null
+  const processedUpiSlot = useMemo(
+    () => (upiSlot ? cloneChildrenWithModes(flattenChildren(upiSlot), modes) : null),
+    [upiSlot, modes]
+  )
 
   return (
     <View
@@ -415,7 +571,7 @@ function SectionBento({
         />
       )}
       {processedUpiSlot && (
-        <View style={{ flexDirection: 'row' as const, gap: 8 }}>
+        <View style={sectionBentoUpiRowStyle}>
           {processedUpiSlot}
         </View>
       )}

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -8,6 +8,7 @@ import {
   type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
 export type SegmentedControlItem = {
   key: React.Key
@@ -33,7 +34,7 @@ function SegmentedControlSegment({
   label,
   active,
   onPress,
-  modes = {},
+  modes = EMPTY_MODES,
 }: {
   label: string
   active: boolean
@@ -117,7 +118,7 @@ function SegmentedControl({
   selectedKey: controlledSelectedKey,
   defaultSelectedKey,
   onSelectionChange,
-  modes = {},
+  modes = EMPTY_MODES,
   style,
 }: SegmentedControlProps) {
   const isControlled = controlledSelectedKey !== undefined