jfs-components 0.0.72 → 0.0.74

package/lib/module/components/DropdownInput/DropdownInput.js

@@ -0,0 +1,536 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dimensions, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+import SupportText from '../SupportText/SupportText';
+import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
+
+function useChevronTokens(modes) {
+  return useMemo(() => {
+    const iconSize = parseInt(getVariableByName('input/iconSize', modes), 10) || 32;
+    const iconColor = getVariableByName('iconButton/icon/color', modes) || '#0f0d0a';
+    return {
+      iconSize,
+      iconColor
+    };
+  }, [modes]);
+}
+function useFormFieldTokens(modes) {
+  return useMemo(() => {
+    const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = parseInt(getVariableByName('formField/label/fontSize', modes), 10) || 14;
+    const labelLineHeight = parseInt(getVariableByName('formField/label/lineHeight', modes), 10) || 17;
+    const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
+    const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8;
+    const inputPaddingH = parseInt(getVariableByName('formField/input/padding/horizontal', modes), 10) || 12;
+    const inputGap = parseInt(getVariableByName('formField/input/gap', modes), 10) || 8;
+    const inputRadius = parseInt(getVariableByName('formField/input/radius', modes), 10) || 8;
+    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputFontSize = parseInt(getVariableByName('formField/input/label/fontSize', modes), 10) || 16;
+    const inputLineHeight = parseInt(getVariableByName('formField/input/label/lineHeight', modes), 10) || 45;
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
+    const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes) || '#24262b';
+    const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
+    const inputBorderSize = parseInt(getVariableByName('formField/input/border/size', modes), 10) || 1;
+    return {
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      gap,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBackground,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputTextColor,
+      inputBorderColor,
+      inputBorderSize
+    };
+  }, [modes]);
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Collect every option this DropdownInput knows about, in render order, from
+ * both `items` and `children` slots. Used for keyboard navigation, lookups
+ * of the selected option, and accessibility labels.
+ */
+function collectOptionsFromChildren(children) {
+  const out = [];
+  flattenChildren(children).forEach(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) return;
+    if (child.type !== DropdownItem) return;
+    const childProps = child.props;
+    const {
+      value,
+      label,
+      disabled
+    } = childProps;
+    if (value == null) return;
+    if (typeof value !== 'string' && typeof value !== 'number') return;
+    if (typeof label !== 'string') return;
+    const opt = {
+      value: value,
+      label
+    };
+    if (disabled != null) opt.disabled = disabled;
+    out.push(opt);
+  });
+  return out;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function DropdownInput({
+  label,
+  placeholder = 'Select an option',
+  items,
+  value,
+  defaultValue = null,
+  onValueChange,
+  children,
+  renderValue,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placement = 'bottom',
+  isRequired = false,
+  isDisabled = false,
+  isInvalid = false,
+  isReadOnly = false,
+  supportText,
+  errorMessage,
+  menuMaxHeight = 240,
+  menuOffset = 4,
+  matchTriggerWidth = true,
+  closeOnBackdropPress = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  inputStyle,
+  menuStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  onFocus,
+  onBlur
+}) {
+  // ---------------- Modes ----------------
+  const {
+    modes: globalModes
+  } = useTokens();
+  const baseModes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+
+  // ---------------- Open state ----------------
+  const isControlledOpen = open !== undefined;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isOpen = (isControlledOpen ? open : internalOpen) && !isDisabled && !isReadOnly;
+  const setOpenState = useCallback(next => {
+    if (!isControlledOpen) setInternalOpen(next);
+    onOpenChange?.(next);
+  }, [isControlledOpen, onOpenChange]);
+  const closeMenu = useCallback(() => setOpenState(false), [setOpenState]);
+  const toggleMenu = useCallback(() => setOpenState(!isOpen), [isOpen, setOpenState]);
+
+  // ---------------- Value state ----------------
+  const isControlledValue = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlledValue ? value : internalValue;
+
+  // Combine items + children-derived options into a single lookup table so
+  // selecting via either API surfaces the same option metadata.
+  const childOptions = useMemo(() => collectOptionsFromChildren(children), [children]);
+  const allOptions = useMemo(() => [...(items ?? []), ...childOptions], [items, childOptions]);
+  const selectedOption = useMemo(() => allOptions.find(o => o.value === currentValue), [allOptions, currentValue]);
+  const handleSelect = useCallback(selectedValue => {
+    if (typeof selectedValue !== 'string' && typeof selectedValue !== 'number') {
+      // Items without a meaningful value just close the menu.
+      closeMenu();
+      return;
+    }
+    const option = allOptions.find(o => o.value === selectedValue);
+    if (option?.disabled) return;
+    if (!isControlledValue) setInternalValue(selectedValue);
+    onValueChange?.(selectedValue, option);
+    closeMenu();
+  }, [allOptions, closeMenu, isControlledValue, onValueChange]);
+
+  // ---------------- Token modes (with state cascade) ----------------
+  const modes = useMemo(() => ({
+    ...baseModes,
+    'FormField States': isInvalid ? 'Error' : isReadOnly ? 'Read Only' : isOpen ? 'Active' : baseModes['FormField States'] || 'Idle'
+  }), [baseModes, isInvalid, isReadOnly, isOpen]);
+  const tokens = useFormFieldTokens(modes);
+  const chevron = useChevronTokens(modes);
+
+  // ---------------- Layout / measurement ----------------
+  const triggerRef = useRef(null);
+  const [triggerRect, setTriggerRect] = useState(null);
+  const insets = useSafeAreaInsets();
+  const measure = useCallback(() => {
+    if (!triggerRef.current) return;
+    triggerRef.current.measureInWindow((x, y, width, height) => {
+      if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(width) || !Number.isFinite(height)) {
+        return;
+      }
+      setTriggerRect(prev => {
+        if (!prev || Math.abs(prev.x - x) > 0.5 || Math.abs(prev.y - y) > 0.5 || prev.width !== width || prev.height !== height) {
+          return {
+            x,
+            y,
+            width,
+            height
+          };
+        }
+        return prev;
+      });
+    });
+  }, []);
+
+  // Keep the trigger rect in sync while the menu is open (handles scroll,
+  // window resize, etc.). One rAF tick per frame is enough; we bail early
+  // if the rect hasn't changed so React doesn't re-render unnecessarily.
+  useEffect(() => {
+    if (!isOpen) return;
+    let raf = 0;
+    const loop = () => {
+      measure();
+      raf = requestAnimationFrame(loop);
+    };
+    loop();
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [isOpen, measure]);
+  const handleTriggerLayout = useCallback(_e => {
+    measure();
+  }, [measure]);
+
+  // ---------------- Popup positioning ----------------
+  const [menuSize, setMenuSize] = useState(null);
+  const handleMenuLayout = useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setMenuSize(prev => {
+      if (!prev || prev.width !== width || prev.height !== height) {
+        return {
+          width,
+          height
+        };
+      }
+      return prev;
+    });
+  }, []);
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = Dimensions.get('window');
+  const computedPlacement = useMemo(() => {
+    if (!triggerRect) return placement === 'top' ? 'top' : 'bottom';
+    const spaceBelow = windowHeight - (triggerRect.y + triggerRect.height) - insets.bottom;
+    const spaceAbove = triggerRect.y - insets.top;
+    const desiredHeight = Math.min(menuSize?.height ?? menuMaxHeight, menuMaxHeight);
+    const needed = desiredHeight + menuOffset + 8;
+    if (placement === 'top') {
+      return spaceAbove >= needed || spaceAbove >= spaceBelow ? 'top' : 'bottom';
+    }
+    if (placement === 'bottom') {
+      return spaceBelow >= needed || spaceBelow >= spaceAbove ? 'bottom' : 'top';
+    }
+    return spaceBelow >= needed || spaceBelow >= spaceAbove ? 'bottom' : 'top';
+  }, [triggerRect, placement, windowHeight, menuSize?.height, menuMaxHeight, menuOffset, insets.top, insets.bottom]);
+  const popupStyle = useMemo(() => {
+    if (!triggerRect) {
+      return {
+        position: 'absolute',
+        opacity: 0,
+        top: 0,
+        left: 0
+      };
+    }
+    const screenPadding = 8;
+    const width = matchTriggerWidth ? triggerRect.width : undefined;
+    const intrinsicWidth = menuSize?.width ?? triggerRect.width;
+    const finalWidth = width ?? intrinsicWidth;
+    let leftPos = triggerRect.x;
+    const maxLeft = windowWidth - insets.right - finalWidth - screenPadding;
+    const minLeft = insets.left + screenPadding;
+    if (leftPos > maxLeft) leftPos = maxLeft;
+    if (leftPos < minLeft) leftPos = minLeft;
+    let topPos;
+    if (computedPlacement === 'top') {
+      const desiredHeight = menuSize?.height ?? menuMaxHeight;
+      topPos = triggerRect.y - desiredHeight - menuOffset;
+      if (topPos < insets.top + screenPadding) {
+        topPos = insets.top + screenPadding;
+      }
+    } else {
+      topPos = triggerRect.y + triggerRect.height + menuOffset;
+    }
+    const style = {
+      position: 'absolute',
+      top: topPos,
+      left: leftPos
+    };
+    if (width != null) style.width = width;
+    // Hide first frame before measurement to avoid the popup flashing in
+    // the wrong place. menuSize becomes truthy after the first layout.
+    if (menuSize == null) style.opacity = 0;
+    return style;
+  }, [triggerRect, computedPlacement, menuSize, menuOffset, menuMaxHeight, matchTriggerWidth, windowWidth, insets.top, insets.left, insets.right]);
+
+  // Reset menu size when closing so the next open re-measures (handles items
+  // changing while the menu was closed).
+  useEffect(() => {
+    if (!isOpen) setMenuSize(null);
+  }, [isOpen]);
+
+  // ---------------- Styles ----------------
+  const labelTextStyle = {
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  };
+  const requiredIndicatorStyle = {
+    ...labelTextStyle,
+    color: '#d93d3d'
+  };
+  const wrapperStyle = {
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1,
+    width: '100%'
+  };
+
+  // Focus ring uses the resolved input border color from FormField States so
+  // active/error look consistent with TextInput-based FormField. We also lift
+  // border weight to 2 when "Active" to read as a focus ring.
+  const inputRowStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.inputBackground,
+    borderColor: tokens.inputBorderColor,
+    borderWidth: isOpen ? Math.max(tokens.inputBorderSize, 1) : tokens.inputBorderSize,
+    borderRadius: tokens.inputRadius,
+    paddingHorizontal: tokens.inputPaddingH,
+    paddingVertical: 0,
+    gap: tokens.inputGap,
+    minHeight: tokens.inputLineHeight
+  };
+  const valueTextStyle = {
+    flex: 1,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.inputFontFamily,
+    fontSize: tokens.inputFontSize,
+    lineHeight: tokens.inputLineHeight,
+    fontWeight: tokens.inputFontWeight,
+    paddingVertical: 0
+  };
+  const placeholderColor = '#888a8d';
+
+  // ---------------- Support text ----------------
+  const supportStatus = isInvalid ? 'Error' : 'Neutral';
+  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText;
+
+  // ---------------- Accessibility ----------------
+  const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Dropdown';
+  const a11yProps = {
+    accessibilityRole: 'combobox',
+    accessibilityLabel: resolvedA11yLabel,
+    accessibilityState: {
+      disabled: isDisabled,
+      expanded: isOpen
+    }
+  };
+  if (accessibilityHint) a11yProps.accessibilityHint = accessibilityHint;
+
+  // ---------------- Items rendering ----------------
+  const renderItems = useCallback(() => {
+    const itemNodes = [];
+    if (items && items.length > 0) {
+      items.forEach(opt => {
+        const isSelected = opt.value === currentValue;
+        itemNodes.push(/*#__PURE__*/_jsx(DropdownItem, {
+          value: opt.value,
+          label: opt.label,
+          selected: isSelected,
+          disabled: opt.disabled ?? false,
+          leading: opt.leading,
+          trailing: opt.trailing,
+          onPress: handleSelect,
+          modes: modes
+        }, `item-${opt.value}`));
+      });
+    }
+    if (children) {
+      // Inject `selected` and `onPress` into child DropdownItems so the
+      // consumer doesn't have to wire selection by hand. Existing
+      // `onPress` handlers on a child are preserved and called after our
+      // selection logic runs.
+      flattenChildren(children).forEach((child, idx) => {
+        if (! /*#__PURE__*/React.isValidElement(child)) {
+          itemNodes.push(child);
+          return;
+        }
+        if (child.type === DropdownItem) {
+          const original = child.props;
+          const isSelected = original.value === currentValue;
+          const composedOnPress = v => {
+            original.onPress?.(v);
+            handleSelect(v);
+          };
+          itemNodes.push(/*#__PURE__*/React.cloneElement(child, {
+            key: child.key ?? `child-${idx}`,
+            selected: isSelected,
+            onPress: composedOnPress,
+            modes: {
+              ...modes,
+              ...(original.modes || {})
+            }
+          }));
+        } else {
+          itemNodes.push(child);
+        }
+      });
+    }
+    return itemNodes;
+  }, [items, children, currentValue, handleSelect, modes]);
+
+  // ---------------- Render ----------------
+  const hasValue = selectedOption != null;
+  const displayLabel = hasValue ? selectedOption.label : placeholder;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [wrapperStyle, style],
+    pointerEvents: isDisabled ? 'none' : 'auto',
+    children: [label != null && /*#__PURE__*/_jsxs(View, {
+      style: styles.labelRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: labelTextStyle,
+        children: label
+      }), isRequired && /*#__PURE__*/_jsx(Text, {
+        style: requiredIndicatorStyle,
+        children: " *"
+      })]
+    }), /*#__PURE__*/_jsxs(Pressable, {
+      ref: triggerRef,
+      onLayout: handleTriggerLayout,
+      onPress: () => {
+        if (isDisabled || isReadOnly) return;
+        measure();
+        toggleMenu();
+      },
+      ...(onFocus ? {
+        onFocus
+      } : {}),
+      ...(onBlur ? {
+        onBlur
+      } : {}),
+      style: [inputRowStyle, inputStyle, IS_WEB && webNoOutline],
+      ...a11yProps,
+      ...(IS_WEB ? {
+        accessibilityRole: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': isOpen
+      } : {}),
+      children: [renderValue ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1,
+          justifyContent: 'center'
+        },
+        children: renderValue(selectedOption, hasValue)
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: [valueTextStyle, !hasValue && {
+          color: placeholderColor
+        }],
+        numberOfLines: 1,
+        children: displayLabel
+      }), /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: isOpen ? 'ic_chevron_up' : 'ic_chevron_down',
+          size: chevron.iconSize,
+          color: chevron.iconColor
+        })
+      })]
+    }), supportLabel != null && /*#__PURE__*/_jsx(SupportText, {
+      label: supportLabel,
+      status: supportStatus,
+      modes: modes
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: isOpen,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: closeMenu,
+      statusBarTranslucent: true,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: closeOnBackdropPress ? closeMenu : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close options",
+        accessible: false,
+        children: /*#__PURE__*/_jsx(View, {
+          style: StyleSheet.absoluteFill,
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/_jsx(View, {
+            style: popupStyle,
+            onLayout: handleMenuLayout,
+            pointerEvents: "auto",
+            children: /*#__PURE__*/_jsx(Dropdown, {
+              modes: modes,
+              maxHeight: menuMaxHeight,
+              style: menuStyle,
+              accessibilityLabel: `${resolvedA11yLabel} options`,
+              children: renderItems()
+            })
+          })
+        })
+      })
+    })]
+  });
+}
+const webNoOutline = {
+  outlineStyle: 'none',
+  outlineWidth: 0,
+  outlineColor: 'transparent',
+  cursor: 'pointer'
+};
+const styles = StyleSheet.create({
+  labelRow: {
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  }
+});
+export default DropdownInput;