jfs-components 0.1.51 → 0.1.54

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -1,12 +1,25 @@
 "use strict";
 
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Animated, Keyboard, View, Platform } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Text, Platform, useWindowDimensions } from 'react-native';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import { boxShadow } from '../../utils/shadow';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import IconButton from '../IconButton/IconButton';
-import { jsx as _jsx } from "react/jsx-runtime";
+import Slot from '../Slot/Slot';
+import Stack from '../Stack/Stack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+// Native sticky pinning is the product contract. Web/Storybook stays in normal
+// document flow so stories and docs layouts are not yanked out of their cards.
+const STICKY_BY_DEFAULT = !IS_WEB;
+
+// Fallback row height used only until the first onLayout measurement lands.
+// Matches the common Button / IconButton intrinsic height in this library.
+const FALLBACK_ACTION_ROW_HEIGHT = 48;
+
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -34,172 +47,343 @@ const STRETCH_STYLE = {
   flexBasis: 0,
   minWidth: 0
 };
+const COMPOSITE_STRETCH_STYLE = {
+  alignSelf: 'stretch',
+  width: '100%'
+};
 
 // Upward drop shadow routed through the unified helper: native `boxShadow` on
 // web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+// Values match `actionFooter/shadow/primary|secondary/*` tokens.
 const SHADOW = boxShadow('0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)', {
   elevation: 16
 });
-
-// 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) {
+const SHELL_STYLE = {
+  // Fill the parent's cross axis without forcing callers to pass width: '100%'.
+  alignSelf: 'stretch',
+  // In a column flex parent, absorb free space above us so the footer sits on
+  // the bottom edge even when siblings above it are short. Harmless when a
+  // sibling already owns `flex: 1` (e.g. FullscreenModal's ScrollView).
+  marginTop: 'auto'
+};
+const PINNED_STYLE = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+function isElementOfType(element, component) {
   const t = element.type;
-  if (t === IconButton) return true;
-  if (t && typeof t === 'object' && t.type === IconButton) return true;
+  if (t === component) return true;
+  // `React.memo` / one extra `forwardRef` layer (re-exports).
+  if (t && typeof t === 'object' && t.type === component) return true;
   return false;
 }
+function isIconButtonElement(element) {
+  return isElementOfType(element, IconButton);
+}
 
 /**
- * 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
- * <ActionFooter modes={modes}>
- *   <IconButton iconName="ic_split" />
- *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
- *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
- * </ActionFooter>
- * ```
+ * Figma nests `Stack → Slot → ButtonGroup` under ActionFooter. In code, Slot
+ * still exists as a parallel primitive and Stack is the preferred successor —
+ * treat all three as "composites that own their own layout" so we never
+ * double-apply the loose-button stretch math and break their internals.
  */
-function ActionFooter({
-  children,
-  modes = EMPTY_MODES,
-  style,
-  accessibilityLabel
-}) {
-  // -------------------------------------------------------------------------
-  // 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, duration) => {
-      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 => {
-      animateTo(e?.endCoordinates?.height ?? 0, e?.duration);
-    });
-    const hideSub = Keyboard.addListener('keyboardDidHide', e => {
-      animateTo(0, e?.duration);
-    });
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [keyboardOffset]);
+function isCompositeActionElement(element) {
+  return isElementOfType(element, ButtonGroup) || isElementOfType(element, Stack) || isElementOfType(element, Slot);
+}
+function resolveChrome(modes) {
+  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;
+  const borderRadius = getVariableByName('actionFooter/radius', modes) ?? getVariableByName('radius/actionFooter', modes) ?? 0;
 
-  // 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';
-    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;
-    const container = {
-      // `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%'`.
+  // Title wrap reuses the Drawer title tokens in Figma (same binding ContentSheet
+  // uses) so the three bottom surfaces stay typographically aligned.
+  const titleColor = getVariableByName('drawer/title/color', modes) ?? '#0d0d0f';
+  const titleSize = getVariableByName('drawer/title/fontSize', modes) ?? 14;
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) ?? 17;
+  const titleFontFamily = getVariableByName('drawer/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontWeightRaw = getVariableByName('drawer/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? String(titleFontWeightRaw) : titleFontWeightRaw;
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes) ?? 16;
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) ?? 8;
+  const titleWrapPaddingHorizontal = getVariableByName('drawer/titleWrap/padding/horizontal', modes) ?? 0;
+  return {
+    containerStyle: {
       alignSelf: 'stretch',
       backgroundColor,
       paddingLeft: paddingHorizontal,
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
+      borderRadius,
       ...SHADOW
-    };
-    const slot = {
+    },
+    slotStyle: {
       flexDirection: 'row',
       // Vertically center the IconButton against the slightly taller Buttons
       // so the row reads as a single optical baseline.
       alignItems: 'center',
+      alignSelf: 'stretch',
       gap
-    };
+    },
+    titleWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight,
+      textAlign: 'center'
+    },
+    // Seed the in-flow spacer so the first frame already reserves room and
+    // scroll siblings never paint under an unmeasured footer.
+    estimatedHeight: paddingTop + paddingBottom + FALLBACK_ACTION_ROW_HEIGHT
+  };
+}
+
+/**
+ * Legacy loose-children path — identical stretch semantics to the original
+ * ActionFooter so existing call sites keep pixel parity.
+ */
+function enhanceLooseChildren(children, modes) {
+  const flat = flattenChildren(children);
+  const withModes = cloneChildrenWithModes(flat, modes);
+  return withModes.map((child, index) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    const element = child;
+    if (isIconButtonElement(element)) return element;
+    return /*#__PURE__*/React.cloneElement(element, {
+      key: element.key ?? `action-footer-item-${index}`,
+      style: [STRETCH_STYLE, element.props.style]
+    });
+  });
+}
+function enhanceCompositeChild(element, modes) {
+  const childModes = element.props.modes ?? EMPTY_MODES;
+  return /*#__PURE__*/React.cloneElement(element, {
+    modes: {
+      ...modes,
+      ...childModes
+    },
+    style: [COMPOSITE_STRETCH_STYLE, element.props.style]
+  });
+}
+/**
+ * Shared chrome for web + native. On native (`sticky`), an in-flow shell locks
+ * the footer's height into the parent layout while the visible chrome is
+ * absolutely pinned to that shell's bottom edge — so the footer cannot scroll
+ * away or float mid-screen, and keyboard translation never collapses siblings.
+ */
+function ActionFooterChrome({
+  children,
+  title,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  sticky,
+  animatedStyle
+}) {
+  const {
+    containerStyle,
+    slotStyle,
+    titleWrapStyle,
+    titleStyle,
+    estimatedHeight
+  } = useMemo(() => resolveChrome(modes), [modes]);
+  const showTitle = typeof title === 'string' && title.length > 0;
+
+  // Decide once whether the caller passed the Figma composite shape
+  // (ButtonGroup / Stack / Slot) or the legacy loose-button list. This keeps
+  // both APIs working without forcing a migration.
+  const {
+    actionsBody,
+    estimatedActionsHeight
+  } = useMemo(() => {
+    const flat = flattenChildren(children);
+    const sole = flat.length === 1 && /*#__PURE__*/React.isValidElement(flat[0]) ? flat[0] : null;
+    if (sole && isCompositeActionElement(sole)) {
+      return {
+        actionsBody: enhanceCompositeChild(sole, modes),
+        estimatedActionsHeight: FALLBACK_ACTION_ROW_HEIGHT
+      };
+    }
     return {
-      containerStyle: container,
-      slotStyle: slot
+      actionsBody: /*#__PURE__*/_jsx(View, {
+        style: slotStyle,
+        children: enhanceLooseChildren(children, modes)
+      }),
+      estimatedActionsHeight: FALLBACK_ACTION_ROW_HEIGHT
     };
-  }, [modes]);
+  }, [children, modes, slotStyle]);
+  const body = useMemo(() => {
+    if (!showTitle) {
+      // No title → identical tree shape to the pre-title ActionFooter for the
+      // loose-children path (just the actions row / composite). No extra Stack
+      // wrapper, so existing layouts cannot regress from an added gap node.
+      return actionsBody;
+    }
 
-  // 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);
-    return withModes.map((child, index) => {
-      if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      const element = child;
-      if (isIconButtonElement(element)) return element;
-      return /*#__PURE__*/React.cloneElement(element, {
-        key: element.key ?? `action-footer-item-${index}`,
-        style: [STRETCH_STYLE, element.props.style]
-      });
+    // Figma: title wrap (sibling) + Stack → Slot → ButtonGroup. We mount a
+    // vertical Stack only when the title is present so the gap between title
+    // and actions is token-driven (`slot/gap` via Stack, cascaded modes).
+    return /*#__PURE__*/_jsxs(Stack, {
+      layoutDirection: "vertical",
+      fillWidth: true,
+      modes: modes,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: titleWrapStyle,
+        accessibilityRole: "header",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: titleStyle,
+          children: title
+        })
+      }), actionsBody]
     });
-  }, [children, modes]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: [containerStyle, 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
-      }]
-    }],
+  }, [showTitle, actionsBody, modes, title, titleWrapStyle, titleStyle]);
+  const [footerHeight, setFooterHeight] = useState(estimatedHeight + (showTitle ? 41 : 0));
+
+  // Token / title presence changes should re-seed the spacer immediately;
+  // the next onLayout then corrects to the true measured height.
+  useEffect(() => {
+    setFooterHeight(estimatedHeight + (showTitle ? 41 : 0));
+  }, [estimatedHeight, showTitle, estimatedActionsHeight]);
+  const onFooterLayout = event => {
+    const next = Math.ceil(event.nativeEvent.layout.height);
+    if (next > 0 && next !== footerHeight) {
+      setFooterHeight(next);
+    }
+  };
+  const chrome = /*#__PURE__*/_jsx(Animated.View, {
+    style: [sticky ? PINNED_STYLE : null, containerStyle, style, animatedStyle],
+    onLayout: sticky ? onFooterLayout : undefined,
     accessibilityRole: "toolbar",
     accessibilityLabel: accessibilityLabel,
-    children: /*#__PURE__*/_jsx(View, {
-      style: slotStyle,
-      children: enhancedChildren
-    })
+    children: body
+  });
+  if (!sticky) {
+    return chrome;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [SHELL_STYLE, {
+      height: footerHeight
+    }],
+    pointerEvents: "box-none",
+    children: chrome
+  });
+}
+
+/**
+ * UI-thread keyboard tracking. Lifts by `keyboard.height - layoutShrink` so:
+ *   - iOS / Android `adjustPan` / `adjustNothing` → full keyboard height
+ *   - Android `adjustResize` (this app's default) → ~0 (window already shrank)
+ * Never double-counts, never depends on callers wiring KeyboardAvoidingView.
+ */
+function KeyboardAwareActionFooter(props) {
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = useWindowDimensions();
+  const maxWindowHeight = useSharedValue(windowHeight);
+  const layoutShrink = useSharedValue(0);
+  const keyboard = useAnimatedKeyboard();
+
+  // Orientation / split-screen width changes invalidate the height baseline.
+  // Intentionally NOT keyed on `windowHeight` — Android `adjustResize` shrinks
+  // height when the keyboard opens, and resetting the baseline there would
+  // collapse `layoutShrink` to 0 and double-lift the footer.
+  useEffect(() => {
+    maxWindowHeight.value = windowHeight;
+    layoutShrink.value = 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- width-only baseline
+  }, [windowWidth]);
+
+  // Track how much of the keyboard inset the window has already absorbed.
+  // Shared values keep the keyboard worklet free of React re-render lag.
+  useEffect(() => {
+    if (windowHeight > maxWindowHeight.value) {
+      maxWindowHeight.value = windowHeight;
+    }
+    layoutShrink.value = Math.max(0, maxWindowHeight.value - windowHeight);
+  }, [windowHeight, maxWindowHeight, layoutShrink]);
+  const animatedStyle = useAnimatedStyle(() => {
+    const lift = Math.max(0, keyboard.height.value - layoutShrink.value);
+    return {
+      transform: [{
+        translateY: -lift
+      }]
+    };
+  });
+  return /*#__PURE__*/_jsx(ActionFooterChrome, {
+    ...props,
+    sticky: true,
+    animatedStyle: animatedStyle
+  });
+}
+
+/**
+ * ActionFooter — sticky bottom container for primary screen actions.
+ *
+ * Layout contract (native):
+ *   - Self-pins to the bottom of its flex-column screen via `marginTop: 'auto'`
+ *     plus an absolutely positioned chrome inside a height-locked shell.
+ *   - The shell keeps scroll/flex siblings from painting under the footer —
+ *     callers do not need to hand-maintain `paddingBottom`.
+ *   - Keyboard avoidance is owned here: the footer moves up by exactly the
+ *     keyboard height that layout has not already absorbed. Host
+ *     `KeyboardAvoidingView` is unnecessary and should not wrap this.
+ *
+ * Layout contract (web):
+ *   - In-flow stretch container (Storybook / docs friendly). No keyboard inset.
+ *
+ * Content contract:
+ *   - Optional centered `title` (Figma title wrap; Drawer title tokens).
+ *   - Loose `IconButton`/`Button` children keep the original equal-stretch row.
+ *   - A sole `ButtonGroup` / `Stack` / `Slot` child is treated as the Figma
+ *     composite and is not re-stretched internally.
+ *
+ * @example
+ * ```tsx
+ * // Legacy — still the recommended simple path
+ * <ActionFooter>
+ *   <IconButton iconName="ic_split" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
+ * </ActionFooter>
+ *
+ * // Figma shape + title
+ * <ActionFooter title="Confirm payment">
+ *   <ButtonGroup>
+ *     <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *     <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
+ *   </ButtonGroup>
+ * </ActionFooter>
+ * ```
+ */
+function ActionFooter({
+  avoidKeyboard = true,
+  ...props
+}) {
+  // Distinct component types keep `useAnimatedKeyboard` hook order stable
+  // (same pattern as ContentSheet). Web never mounts the keyboard path.
+  if (STICKY_BY_DEFAULT && avoidKeyboard) {
+    return /*#__PURE__*/_jsx(KeyboardAwareActionFooter, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(ActionFooterChrome, {
+    ...props,
+    sticky: STICKY_BY_DEFAULT
   });
 }
 export default /*#__PURE__*/React.memo(ActionFooter);

package/lib/module/components/Badge/Badge.js

@@ -8,6 +8,25 @@ import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import GlassFill from '../../utils/GlassFill/GlassFill';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Figma still binds `badge/color/label`, but that alias is broken for
+ * `Semantic Intent=System` + `Emphasis=High` (missing VariableID:2811:2401).
+ * Use the published tokens that the chain is supposed to land on:
+ * - Brand → `Emphasis/badge/brand/fg`
+ * - System + High → `Emphasis/badge/high/fg Copy` (AppearanceSystem)
+ * - System + Medium/Low → `Emphasis/badge/system/fg`
+ */
+function badgeLabelColorToken(modes) {
+  const intent = modes['Semantic Intent'] ?? 'Brand';
+  const emphasis = modes.Emphasis ?? 'High';
+  if (intent === 'System' && emphasis === 'High') {
+    return 'Emphasis/badge/high/fg Copy';
+  }
+  if (intent === 'System') {
+    return 'Emphasis/badge/system/fg';
+  }
+  return 'Emphasis/badge/brand/fg';
+}
 function Badge({
   label = 'Label',
   type = 'default',
@@ -32,7 +51,7 @@ function Badge({
   const backgroundColor = getVariableByName('badge/color/background', modes);
   const glassBackground = getVariableByName('badge/glass/color/background', modes);
   const glassLabelColor = getVariableByName('badge/glass/color/label', modes);
-  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : getVariableByName(badgeLabelColorToken(modes), modes);
   const fontSize = Number(getVariableByName('badge/label/fontSize', modes));
   const fontFamily = getVariableByName('badge/fontFamily', modes);
   const fontWeight = getVariableByName('badge/label/fontWeight', modes);