jfs-components 0.0.74 → 0.0.78

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import {
   View,
   Text,
@@ -21,9 +21,49 @@ if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental
   UIManager.setLayoutAnimationEnabledExperimental(true)
 }
 
+type AccordionStateMode = 'Idle' | 'Hover' | 'Open' | 'Open Hover' | 'Disabled'
+
+function resolveAccordionStateMode(
+  disabled: boolean,
+  isExpanded: boolean,
+  isHovered: boolean,
+  contained: boolean,
+): AccordionStateMode {
+  if (disabled) return 'Disabled'
+
+  if (contained) {
+    return isExpanded ? 'Open Hover' : 'Hover'
+  }
+
+  if (isExpanded) {
+    return isHovered ? 'Open Hover' : 'Open'
+  }
+
+  return isHovered ? 'Hover' : 'Idle'
+}
+
+function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextStyle['fontWeight'] {
+  if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (normalized === 'bold') return '700'
+    if (normalized === 'medium') return '500'
+    if (normalized === 'regular' || normalized === 'normal') return '400'
+    if (/^\d+$/.test(normalized)) return normalized as TextStyle['fontWeight']
+    return value as TextStyle['fontWeight']
+  }
+  return fallback
+}
+
 export type AccordionProps = {
   /** The accordion header title */
   title?: string;
+  /**
+   * When `true`, the header always uses the filled background treatment
+   * (Figma Hover / Open Hover visuals). Defaults to `false` (transparent at
+   * rest, filled only while hovered or pressed).
+   */
+  contained?: boolean;
   /** Initial expanded state. Defaults to false (collapsed) */
   defaultExpanded?: boolean;
   /** Controlled expanded state. When provided, the component becomes controlled */
@@ -51,31 +91,20 @@ export type AccordionProps = {
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
- * This component supports:
- *  - **Expandable/collapsible content** with smooth animation
- *  - **States**: Idle, Hover, Open, Disabled
- *  - **Slot** for custom content
- *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ * Supports two visual treatments via the `contained` prop:
+ *  - **`contained={false}`** (default) — transparent header at rest; filled
+ *    background on hover / press.
+ *  - **`contained={true}`** — header always uses the filled background.
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "content" → `children`
+ * Interaction states (Idle, Hover, Open, Disabled) are resolved automatically
+ * from `expanded`, `disabled`, hover, and `contained` — consumers should not
+ * pass `'Accordion States'` in `modes`.
  *
  * @component
- * @param {Object} props
- * @param {string} [props.title='Accordion title'] - The accordion header title
- * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
- * @param {boolean} [props.expanded] - Controlled expanded state
- * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
- * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
- * @param {React.ReactNode} [props.children] - Content to display when expanded
- * @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 accordion. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function Accordion({
   title = 'Accordion title',
+  contained = false,
   defaultExpanded = false,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -89,23 +118,31 @@ function Accordion({
   webAccessibilityProps,
   ...rest
 }: AccordionProps) {
-  // Internal state for uncontrolled mode
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
-  
-  // Determine if controlled or uncontrolled
+  const [isHovered, setIsHovered] = useState(false)
+
   const isControlled = controlledExpanded !== undefined
   const isExpanded = isControlled ? controlledExpanded : internalExpanded
-  
-  // Hover state for web
-  const [isHovered, setIsHovered] = useState(false)
-  
-  // Handle toggle
+
+  const resolvedModes = useMemo(() => {
+    const accordionState = resolveAccordionStateMode(
+      disabled,
+      isExpanded,
+      isHovered,
+      contained,
+    )
+
+    return {
+      ...modes,
+      'Accordion States': accordionState,
+    }
+  }, [contained, disabled, isExpanded, isHovered, modes])
+
   const handleToggle = () => {
     if (disabled) return
-    
-    // Animate the layout change
+
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    
+
     if (isControlled) {
       onExpandedChange?.(!isExpanded)
     } else {
@@ -113,38 +150,45 @@ function Accordion({
       onExpandedChange?.(!isExpanded)
     }
   }
-  
-  // Resolve design tokens
-  const titleColor = disabled
-    ? '#999999'
-    : getVariableByName('accordion/title/color', modes) || '#0d0d0d'
-  const titleFontSize = getVariableByName('accordion/title/fontSize', modes) || 18
-  const titleLineHeight = getVariableByName('accordion/title/lineHeight', modes) || 20
-  const titleFontFamily = getVariableByName('accordion/title/fontFamily', modes) || 'System'
-  
-  const iconColor = getVariableByName('accordion/icon/color', modes) || '#141414'
-  const iconSize = getVariableByName('accordion/icon/size', modes) || 24
-  
-  const headerGap = getVariableByName('accordion/header/gap', modes) || 12
-  const headerPaddingVertical = getVariableByName('accordion/header/padding/vertical', modes) || 24
-  const headerBackground = isHovered && !disabled
-    ? '#f2f2f2'
-    : getVariableByName('accordion/header/background', modes) || 'transparent'
-  
-  const contentGap = getVariableByName('accordion/content/gap', modes) || 12
-  const contentPaddingTop = getVariableByName('accordion/content/padding/top', modes) || 8
-  const contentPaddingBottom = isExpanded
-    ? (getVariableByName('accordion/content/padding/bottom', modes) ?? 24)
-    : 8
-  
-  const borderColor = getVariableByName('accordion/border/color', modes) || '#e6e6e6'
-  
-  // Styles
+
+  const titleColor =
+    (getVariableByName('accordion/title/color', resolvedModes) as string | null) ?? '#0d0d0d'
+  const titleFontSize =
+    (getVariableByName('accordion/title/fontSize', resolvedModes) as number | null) ?? 14
+  const titleLineHeight =
+    (getVariableByName('accordion/title/lineHeight', resolvedModes) as number | null) ?? 20
+  const titleFontFamily =
+    (getVariableByName('accordion/title/fontFamily', resolvedModes) as string | null) ?? 'System'
+  const titleFontWeight = toFontWeight(
+    getVariableByName('accordion/title/fontWeight', resolvedModes),
+    '700',
+  )
+
+  const iconColor =
+    (getVariableByName('accordion/icon/color', resolvedModes) as string | null) ?? '#141414'
+  const iconSize = (getVariableByName('accordion/icon/size', resolvedModes) as number | null) ?? 24
+
+  const headerGap = (getVariableByName('accordion/header/gap', resolvedModes) as number | null) ?? 12
+  const headerPaddingVertical =
+    (getVariableByName('accordion/header/padding/vertical', resolvedModes) as number | null) ?? 8
+  const headerBackground =
+    (getVariableByName('accordion/header/background', resolvedModes) as string | null) ??
+    'transparent'
+
+  const contentGap = (getVariableByName('accordion/content/gap', resolvedModes) as number | null) ?? 12
+  const contentPaddingTop =
+    (getVariableByName('accordion/content/padding/top', resolvedModes) as number | null) ?? 8
+  const contentPaddingBottom =
+    (getVariableByName('accordion/content/padding/bottom', resolvedModes) as number | null) ?? 8
+
+  const borderColor =
+    (getVariableByName('accordion/border/color', resolvedModes) as string | null) ?? '#e6e6e6'
+
   const containerStyle: ViewStyle = {
     borderBottomWidth: 1,
     borderBottomColor: borderColor,
   }
-  
+
   const headerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -154,16 +198,16 @@ function Accordion({
     backgroundColor: headerBackground,
     overflow: 'hidden',
   }
-  
+
   const titleStyle: TextStyle = {
     flex: 1,
     color: titleColor,
     fontSize: titleFontSize,
     lineHeight: titleLineHeight,
     fontFamily: titleFontFamily,
-    fontWeight: '700',
+    fontWeight: titleFontWeight,
   }
-  
+
   const contentStyle: ViewStyle = {
     backgroundColor: 'transparent',
     gap: contentGap,
@@ -172,11 +216,9 @@ function Accordion({
     paddingHorizontal: 0,
     overflow: 'hidden',
   }
-  
-  // Generate default accessibility label
+
   const defaultAccessibilityLabel = accessibilityLabel || title
-  
-  // Web platform support
+
   const webProps = usePressableWebSupport({
     restProps: {},
     onPress: handleToggle,
@@ -184,12 +226,11 @@ function Accordion({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps,
   })
-  
-  // Process children to pass modes
+
   const processedChildren = children
-    ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+    ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes)
     : null
-  
+
   return (
     <View style={[containerStyle, style]} {...rest}>
       <Pressable
@@ -217,12 +258,12 @@ function Accordion({
         <Icon
           name={isExpanded ? 'ic_minus' : 'ic_add'}
           size={iconSize}
-          color={disabled ? '#999999' : iconColor}
+          color={iconColor}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         />
       </Pressable>
-      
+
       {isExpanded && processedChildren && (
         <View style={contentStyle}>
           {processedChildren}
@@ -233,4 +274,3 @@ function Accordion({
 }
 
 export default Accordion
-

package/src/components/ActionFooter/ActionFooter.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import {
+  Animated,
+  Keyboard,
   View,
+  Platform,
+  type KeyboardEvent,
   type ViewStyle,
   type StyleProp,
-  Platform,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
@@ -12,48 +15,118 @@ import IconButton from '../IconButton/IconButton'
 export type ActionFooterProps = {
   /**
    * Content to render inside the action footer slot.
-   * Typically includes IconButton and Button components.
+   * Typically includes `IconButton` and `Button` components.
+   * `IconButton` children keep their intrinsic square size; everything else
+   * is auto-stretched to share the remaining horizontal space equally.
    */
   children?: React.ReactNode
   /**
    * Mode configuration passed to the token resolver.
-   * Pass the same modes to children components for consistent theming.
+   * Automatically merged into every slot child via {@link cloneChildrenWithModes}
+   * so callers don't have to thread modes down by hand.
    */
   modes?: Record<string, any>
   /**
-   * Optional style overrides for the container
+   * Optional style overrides for the outer container.
    */
   style?: StyleProp<ViewStyle>
   /**
-   * Accessibility label for the footer region
+   * Accessibility label for the footer region (announced for the toolbar).
    */
   accessibilityLabel?: string
 }
 
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// Yoga-safe stretch
+// ---------------------------------------------------------------------------
+//
+// React Native (Yoga) interprets the `flex: 1` shorthand as
+//   { flexGrow: 1, flexShrink: 1, flexBasis: 0 }
+// which is the *equal-share* variant. That is the correct math for what we
+// want here (equal-width action buttons), BUT Yoga has a well-known foot-gun
+// when this child sits inside a parent whose main-axis size hasn't been
+// resolved yet on the first layout pass: the child collapses to 0 and the
+// inner text gets clipped to "" before the parent ever measures.
+//
+// The defensive incantation used elsewhere in this codebase (see
+// `CardCTA.leftWrap` and the `MediaCard.Header` fix in CHANGELOG.md) is to
+// keep the equal-share math but explicitly clamp `minWidth` to 0 so Yoga
+// always allows the child to participate in the shrink algorithm, even when
+// the parent itself is in an undetermined state. Combined with explicit
+// `flexGrow`/`flexShrink`/`flexBasis` (NOT the `flex` shorthand) this
+// renders correctly on iOS, Android, and Web — and crucially never produces
+// the "buttons render as empty pills" failure mode the previous version had
+// on iOS dev clients.
+const STRETCH_STYLE: ViewStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: 0,
+  minWidth: 0,
+}
+
+// Platform-specific drop shadow. Web boxShadow can't go through
+// Platform.select (RN's typed surface doesn't include it) so we keep it as a
+// separate constant and append it below.
+const NATIVE_SHADOW = Platform.select<ViewStyle>({
+  ios: {
+    shadowColor: '#0c0d10',
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+  },
+  android: {
+    elevation: 16,
+  },
+  default: {},
+}) as ViewStyle
+
+const WEB_SHADOW = IS_WEB
+  ? ({
+      boxShadow:
+        '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
+    } as ViewStyle)
+  : null
+
+// The runtime token a slot child must equal (by reference) to be treated as
+// an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
+// element.type identity comparison works for both `<IconButton />` from the
+// same module and any `React.memo`-wrapped re-export. The fallback check
+// (`type.type === IconButton`) catches one extra layer of `forwardRef` /
+// `memo` wrapping which can happen when consumers re-export the component.
+function isIconButtonElement(element: React.ReactElement<any>): boolean {
+  const t: any = element.type
+  if (t === IconButton) return true
+  if (t && typeof t === 'object' && t.type === IconButton) return true
+  return false
+}
+
 /**
- * ActionFooter component that provides a fixed footer container for action buttons.
- * 
- * This component is designed to hold action items like IconButton and Button components
- * at the bottom of a screen. It includes a shadow for visual separation from content above.
- * 
- * The `modes` prop is automatically passed to all slot children. If a child has its own
- * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
- * 
- * @component
- * @param {Object} props - Component props
- * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
- * @param {Object} [props.style] - Optional style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
- * 
+ * ActionFooter — a sticky bottom container for primary screen actions.
+ *
+ * Layout contract:
+ *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
+ *     it fills the parent regardless of whether the parent is a flex column,
+ *     a ScrollView contentContainer, or a plain View.
+ *   - The inner slot is a single row sized by its tallest child. It does NOT
+ *     use `flex: 1` — that previously caused the row to collapse to zero on
+ *     the first Yoga pass on native, taking the button labels with it.
+ *   - `IconButton` children keep their intrinsic square size.
+ *   - Every other child is auto-stretched with the Yoga-safe stretch style
+ *     above so two `<Button>` siblings render at equal width on iOS, Android,
+ *     and Web.
+ *
+ * The `modes` prop is automatically pushed down to every slot child via
+ * {@link cloneChildrenWithModes}; explicit child-level modes win over the
+ * parent's modes.
+ *
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children.
- * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" />
- *   <Button label="Pay" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
  * ```
  */
@@ -61,79 +134,124 @@ function ActionFooter({
   children,
   modes = EMPTY_MODES,
   style,
-  accessibilityLabel = undefined,
+  accessibilityLabel,
 }: ActionFooterProps) {
-  // Resolve design tokens
-  const backgroundColor = getVariableByName('actionFooter/background', modes) ?? '#ffffff'
-  const gap = getVariableByName('actionFooter/gap', modes) ?? 8
-  const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16
-  const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10
-  const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41
-
-  // Shadow styles - cross-platform
-  const shadowStyle: ViewStyle = Platform.select({
-    ios: {
-      shadowColor: 'rgba(12, 13, 16, 1)',
-      shadowOffset: { width: 0, height: -12 },
-      shadowOpacity: 0.16,
-      shadowRadius: 24,
-    },
-    android: {
-      elevation: 16,
-    },
-    default: {
-      // Web shadow using boxShadow (RNW supports this)
-    },
-  }) as ViewStyle
-
-  const containerStyle: ViewStyle = {
-    backgroundColor,
-    paddingLeft: paddingHorizontal,
-    paddingRight: paddingHorizontal,
-    paddingTop,
-    paddingBottom,
-    ...shadowStyle,
-  }
-
-  // Slot container style for horizontal layout of action items
-  const slotStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap,
-    flex: 1,
-  }
-
-  // Web-specific box-shadow
-  const webShadow = Platform.OS === 'web'
-    ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
-    : {}
-
-  const flatChildren = flattenChildren(children)
-  const processedChildren = cloneChildrenWithModes(flatChildren, modes)
-
-  const enhancedChildren = (processedChildren as React.ReactNode[]).map((child, index) => {
-    if (!React.isValidElement(child)) return child
-    const element = child as React.ReactElement<any>
-    const isIconButton = element.type === IconButton
-    const stretchStyle = isIconButton ? undefined : { flex: 1 }
-    return React.cloneElement(element, {
-      key: element.key ?? index,
-      style: [stretchStyle, element.props.style],
+  // -------------------------------------------------------------------------
+  // Keep the footer locked in place behind the software keyboard (Android).
+  // -------------------------------------------------------------------------
+  //
+  // The Android activity is configured with `windowSoftInputMode="adjustResize"`,
+  // which shrinks the app window by the keyboard height when the keyboard
+  // opens. A bottom-anchored footer therefore gets lifted UP by the keyboard
+  // height — exactly the jump the design does not want.
+  //
+  // To counteract that, we translate the footer back DOWN by the same keyboard
+  // height so it visually stays exactly where it was (now sitting behind the
+  // keyboard). iOS does not resize the window for the keyboard, so the footer
+  // already stays put there; we only run this on Android to avoid pushing the
+  // footer off-screen on platforms that don't lift it in the first place.
+  const keyboardOffset = useRef(new Animated.Value(0)).current
+  useEffect(() => {
+    if (Platform.OS !== 'android') return undefined
+
+    const animateTo = (toValue: number, duration?: number) => {
+      Animated.timing(keyboardOffset, {
+        toValue,
+        // Match the OS keyboard animation so the resize and our counter-shift
+        // cancel out smoothly with no visible footer movement.
+        duration: typeof duration === 'number' && duration > 0 ? duration : 150,
+        useNativeDriver: true,
+      }).start()
+    }
+
+    const showSub = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => {
+      animateTo(e?.endCoordinates?.height ?? 0, e?.duration)
+    })
+    const hideSub = Keyboard.addListener('keyboardDidHide', (e: KeyboardEvent) => {
+      animateTo(0, e?.duration)
+    })
+
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [keyboardOffset])
+
+  // All token reads collapsed into a single useMemo keyed on `modes`. With
+  // the shared `EMPTY_MODES` default this resolves once for the common path
+  // and never re-allocates the container/slot style objects between renders.
+  const { containerStyle, slotStyle } = useMemo(() => {
+    const backgroundColor =
+      (getVariableByName('actionFooter/background', modes) ?? '#ffffff') as string
+    const gap = (getVariableByName('actionFooter/gap', modes) ?? 8) as number
+    const paddingHorizontal =
+      (getVariableByName('actionFooter/padding/horizontal', modes) ?? 16) as number
+    const paddingTop = (getVariableByName('actionFooter/padding/top', modes) ?? 10) as number
+    const paddingBottom = (getVariableByName('actionFooter/padding/bottom', modes) ?? 41) as number
+
+    const container: ViewStyle = {
+      // `alignSelf: 'stretch'` is the cross-platform way to ask "fill the
+      // parent's cross axis" — in the common case (column parent) this gives
+      // us full-width without the caller needing to pass `width: '100%'`.
+      alignSelf: 'stretch',
+      backgroundColor,
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      paddingTop,
+      paddingBottom,
+      ...NATIVE_SHADOW,
+    }
+
+    const slot: ViewStyle = {
+      flexDirection: 'row',
+      // Vertically center the IconButton against the slightly taller Buttons
+      // so the row reads as a single optical baseline.
+      alignItems: 'center',
+      gap,
+    }
+
+    return { containerStyle: container, slotStyle: slot }
+  }, [modes])
+
+  // Process children once per (children, modes) tuple:
+  //   1. Flatten Fragments so each action is its own keyed sibling.
+  //   2. Push `modes` down so callers don't have to thread it manually.
+  //   3. Auto-stretch every non-IconButton with the Yoga-safe stretch style.
+  //
+  // The result identity is stable across re-renders when the inputs don't
+  // change, which keeps the `React.memo`-wrapped Button/IconButton children
+  // from re-rendering for no reason.
+  const enhancedChildren = useMemo(() => {
+    const flat = flattenChildren(children)
+    const withModes = cloneChildrenWithModes(flat, modes) as React.ReactNode[]
+    return withModes.map((child, index) => {
+      if (!React.isValidElement(child)) return child
+      const element = child as React.ReactElement<any>
+      if (isIconButtonElement(element)) return element
+      return React.cloneElement(element, {
+        key: element.key ?? `action-footer-item-${index}`,
+        style: [STRETCH_STYLE, element.props.style],
+      })
     })
-  })
+  }, [children, modes])
 
   return (
-    <View
-      style={[containerStyle, webShadow, style]}
+    <Animated.View
+      style={[
+        containerStyle,
+        WEB_SHADOW,
+        style,
+        // Counter-translate by the keyboard height on Android so `adjustResize`
+        // can't lift the footer above the keyboard (no-op on iOS/web where the
+        // value stays at 0).
+        { transform: [{ translateY: keyboardOffset }] },
+      ]}
       accessibilityRole="toolbar"
-      accessibilityLabel={undefined}
+      accessibilityLabel={accessibilityLabel}
     >
-      <View style={slotStyle}>
-        {enhancedChildren}
-      </View>
-    </View>
+      <View style={slotStyle}>{enhancedChildren}</View>
+    </Animated.View>
   )
 }
 
-export default ActionFooter
-
+export default React.memo(ActionFooter)