react-native-system-ui 1.0.1 → 1.0.3

package/dist/es/components/tabs/Tabs.js

@@ -1,841 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState, useMemo, Children, isValidElement } from 'react';
-import { Animated, Pressable, StyleSheet, Text, ScrollView, View, Platform } from 'react-native';
-import { useAriaPress, useControllableValue } from '../../hooks';
-import { useReducedMotion } from '../../hooks/animation';
-import { createHairlineView } from '../../utils/hairline';
-import { parseNumberLike } from '../../utils/number';
-import { isBoolean, isFunction, isObject, isRenderable, isText } from '../../utils/validate';
-import { useTabsTokens } from './tokens';
-const TabPane = () => null;
-TabPane.displayName = 'Tabs.TabPane';
-const hasRaf = typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function';
-const requestFrame = hasRaf ? requestAnimationFrame : cb => setTimeout(cb, 16);
-const cancelFrame = id => {
-  if (id != null) (hasRaf ? cancelAnimationFrame : clearTimeout)(id);
-};
-const isTabPaneElement = child => {
-  if (! /*#__PURE__*/React.isValidElement(child)) return false;
-  if (child.type === TabPane) return true;
-  return child.type.displayName === 'Tabs.TabPane';
-};
-const useTabsAnimation = ({
-  type,
-  animated,
-  scrollable,
-  align,
-  panes,
-  nameIndexMap,
-  resolvedLineWidth,
-  resolvedDuration,
-  currentName,
-  layoutMap,
-  navContainerWidthRef
-}) => {
-  const indX = useRef(new Animated.Value(0)).current;
-  const indW = useRef(new Animated.Value(0)).current;
-  const indInitRef = useRef(false);
-  const animRef = useRef(null);
-  const animateIndicator = useCallback((name, immediate) => {
-    if (name == null || type !== 'line') return false;
-    const eqW = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
-    const idx = nameIndexMap.get(name) ?? -1;
-    const eqTabW = eqW ? navContainerWidthRef.current / panes.length : 0;
-    const lay = eqW ? {
-      x: Math.max(idx, 0) * eqTabW,
-      width: eqTabW
-    } : layoutMap.current.get(name);
-    if (!lay || idx < 0) return false;
-    animRef.current?.stop();
-    const timing = (v, to) => Animated.timing(v, {
-      toValue: to,
-      duration: immediate || !animated ? 0 : resolvedDuration,
-      useNativeDriver: false,
-      isInteraction: false
-    });
-    const tW = resolvedLineWidth ?? lay.width;
-    const tX = resolvedLineWidth ? lay.x + (lay.width - tW) / 2 : lay.x;
-    const anim = Animated.parallel([timing(indX, tX), timing(indW, tW)]);
-    animRef.current = anim;
-    anim.start(({
-      finished
-    }) => {
-      if (finished) animRef.current = null;
-    });
-    return true;
-  }, [align, animated, indW, indX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
-  useEffect(() => {
-    if (currentName == null) return;
-    const should = indInitRef.current;
-    const did = animateIndicator(currentName, !should);
-    if (did && !indInitRef.current) indInitRef.current = true;
-  }, [animateIndicator, currentName]);
-  useEffect(() => () => {
-    animRef.current?.stop();
-    animRef.current = null;
-  }, []);
-  return {
-    indicatorX: indX,
-    indicatorWidth: indW,
-    indicatorInitializedRef: indInitRef,
-    animateIndicator
-  };
-};
-const useTabsScroll = ({
-  scrollable,
-  animated,
-  currentName,
-  resolvedDuration,
-  layoutMap,
-  navContainerWidthRef,
-  navContentWidthRef
-}) => {
-  const navScrRef = useRef(null);
-  const navX = useRef(new Animated.Value(0)).current;
-  const navAnimRef = useRef(null);
-  const autoScrRef = useRef(false);
-  const lastXRef = useRef(0);
-  const frameRef = useRef(null);
-  const scrollIntoView = useCallback(immediate => {
-    if (!scrollable || currentName == null) return;
-    const lay = layoutMap.current.get(currentName);
-    const ctrW = navContainerWidthRef.current;
-    if (!lay || !ctrW) return;
-    const cntW = navContentWidthRef.current;
-    const tX = lay.x - (ctrW - lay.width) / 2;
-    const maxS = Math.max(cntW - ctrW, 0);
-    const clampX = Math.max(0, Math.min(tX, maxS));
-    if (maxS <= 0 || Math.abs(clampX - lastXRef.current) < 1) return;
-    navAnimRef.current?.stop();
-    navAnimRef.current = null;
-    cancelFrame(frameRef.current);
-    frameRef.current = null;
-    if (immediate || !animated) {
-      autoScrRef.current = true;
-      navX.setValue(clampX);
-      frameRef.current = requestFrame(() => {
-        frameRef.current = null;
-        autoScrRef.current = false;
-      });
-      return;
-    }
-    navX.setValue(lastXRef.current);
-    autoScrRef.current = true;
-    navAnimRef.current = Animated.timing(navX, {
-      toValue: clampX,
-      duration: resolvedDuration,
-      useNativeDriver: false,
-      isInteraction: false
-    });
-    navAnimRef.current.start(({
-      finished
-    }) => {
-      navAnimRef.current = null;
-      autoScrRef.current = false;
-      if (finished) lastXRef.current = clampX;
-    });
-  }, [animated, currentName, navX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
-  useEffect(() => {
-    if (!scrollable) return;
-    const id = navX.addListener(({
-      value
-    }) => {
-      const prev = lastXRef.current;
-      lastXRef.current = value;
-      if (Math.abs(value - prev) >= 0.5) navScrRef.current?.scrollTo({
-        x: value,
-        y: 0,
-        animated: false
-      });
-    });
-    return () => navX.removeListener(id);
-  }, [navX, scrollable]);
-  useEffect(() => () => {
-    cancelFrame(frameRef.current);
-    frameRef.current = null;
-  }, []);
-  const onNavBeginDrag = useCallback(e => {
-    autoScrRef.current = false;
-    navAnimRef.current?.stop();
-    navAnimRef.current = null;
-    lastXRef.current = e.nativeEvent.contentOffset.x;
-  }, []);
-  const onNavScroll = useCallback(e => {
-    if (autoScrRef.current) return;
-    lastXRef.current = e.nativeEvent.contentOffset.x;
-  }, []);
-  return {
-    navScrollRef: navScrRef,
-    navScrollX: navX,
-    scrollIntoView,
-    handleNavScrollBeginDrag: onNavBeginDrag,
-    handleNavScroll: onNavScroll
-  };
-};
-const TabBarItemInner = ({
-  pane,
-  isActive,
-  align,
-  scrollable,
-  type,
-  ellipsis,
-  tokens,
-  color,
-  titleActiveColor,
-  titleInactiveColor,
-  tabStyle,
-  titleStyle,
-  descriptionStyle,
-  onSelect,
-  onLayout,
-  isLast
-}) => {
-  const dis = !!pane.disabled;
-  const aria = useAriaPress({
-    onPress: e => onSelect(pane, pane.index, e),
-    extraProps: {
-      accessibilityRole: 'tab',
-      accessibilityState: {
-        selected: isActive,
-        disabled: dis
-      },
-      testID: `rv-tabs-item-${pane.name}`
-    }
-  });
-  const isCap = type === 'capsule';
-  const isJ = type === 'jumbo';
-  const isC = type === 'card';
-  const rTitle = isFunction(pane.title) ? pane.title(isActive) : pane.title ?? pane.name;
-  const rDesc = isFunction(pane.description) ? pane.description(isActive) : pane.description;
-  const actClr = titleActiveColor ?? (isC ? tokens.colors.cardActiveText : isCap ? tokens.colors.capsuleActiveText : color ?? tokens.colors.textActive);
-  const inactClr = titleInactiveColor ?? (isC ? color ?? tokens.colors.cardBorder : isCap ? tokens.colors.capsuleText : tokens.colors.text);
-  const txtClr = pane.disabled ? tokens.colors.textDisabled : isActive ? actClr : inactClr;
-  const descClr = dis ? tokens.colors.textDisabled : isJ ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
-  const flex = !scrollable && (align !== 'start' || isC);
-  const compact = isC || isJ || isCap;
-  const hPad = compact ? 0 : tokens.tabList.paddingHorizontal;
-  const vPad = compact ? 0 : tokens.tabList.paddingVertical;
-  const lblWrap = [S.lblW, isJ && S.lblWJ, isC && S.cardLbl, isC && {
-    paddingHorizontal: tokens.card.paddingHorizontal,
-    paddingVertical: tokens.card.paddingVertical
-  }, isCap && {
-    flex: 1,
-    alignSelf: 'stretch',
-    paddingHorizontal: tokens.capsule.paddingHorizontal,
-    paddingVertical: tokens.capsule.paddingVertical
-  }, isJ && {
-    paddingHorizontal: tokens.jumbo.paddingHorizontal,
-    paddingVertical: tokens.jumbo.paddingVertical,
-    alignItems: 'center'
-  }].filter(Boolean);
-  const lblTxtWrap = isCap ? [{
-    flex: 1,
-    alignSelf: 'stretch',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: tokens.capsule.radius,
-    backgroundColor: isActive ? color ?? tokens.colors.capsuleActiveBackground : tokens.colors.capsuleBackground
-  }] : null;
-  const titleStyleArr = [S.title, {
-    color: txtClr,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: isJ ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
-    fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
-    lineHeight: isJ ? tokens.typography.jumboLineHeight : undefined,
-    textAlign: 'center'
-  }, ellipsis && !isJ ? S.ellipsis : null, titleStyle];
-  const descMT = isJ ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
-  const descJStyle = isJ ? {
-    backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
-    paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
-    paddingVertical: tokens.jumbo.descriptionPaddingVertical,
-    borderRadius: tokens.jumbo.descriptionRadius
-  } : null;
-  const onLay = useCallback(e => onLayout(pane.name, e), [onLayout, pane.name]);
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, aria.interactionProps, {
-    onLayout: onLay,
-    style: [S.tabI, flex ? S.flexI : null, {
-      paddingHorizontal: hPad,
-      paddingVertical: vPad
-    }, isC ? {
-      backgroundColor: isActive ? color ?? tokens.colors.cardActiveBackground : tokens.colors.cardBackground
-    } : null, tabStyle]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: lblWrap
-  }, lblTxtWrap ? /*#__PURE__*/React.createElement(View, {
-    style: lblTxtWrap
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: titleStyleArr,
-    numberOfLines: ellipsis && !isJ ? 1 : undefined
-  }, rTitle)) : /*#__PURE__*/React.createElement(Text, {
-    style: titleStyleArr,
-    numberOfLines: ellipsis && !isJ ? 1 : undefined
-  }, rTitle), isRenderable(rDesc) && (isText(rDesc) ? /*#__PURE__*/React.createElement(Text, {
-    style: [S.descTxt, {
-      color: descClr,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.descriptionSize,
-      marginTop: descMT,
-      textAlign: 'center'
-    }, descJStyle, descriptionStyle]
-  }, rDesc) : /*#__PURE__*/React.createElement(View, {
-    style: [{
-      marginTop: descMT,
-      alignItems: 'center'
-    }, descJStyle]
-  }, rDesc)), isRenderable(pane.badge) && /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: tokens.spacing.badgeMarginTop
-    }
-  }, isText(pane.badge) ? /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: tokens.colors.badgeText,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.badgeTextSize
-    }
-  }, pane.badge) : pane.badge)), isC && !isLast && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'right',
-      color: color ?? tokens.colors.cardBorder,
-      top: 0,
-      bottom: 0
-    })
-  }));
-};
-const TabBarItem = /*#__PURE__*/memo(TabBarItemInner);
-const TabsBaseInner = (props, ref) => {
-  const {
-    tokensOverride,
-    children,
-    type: typeProp,
-    align: alignProp,
-    ellipsis: ellipsisProp,
-    swipeThreshold: swipeThresholdProp,
-    animated: animatedProp,
-    duration: durationProp,
-    lazyRender: lazyRenderProp,
-    lazyRenderPlaceholder,
-    scrollable: scrollableProp,
-    swipeable,
-    color,
-    background: backgroundProp,
-    border,
-    navLeft,
-    navRight,
-    navBottom,
-    tabBarStyle,
-    tabStyle,
-    titleStyle,
-    descriptionStyle,
-    contentStyle,
-    lineWidth,
-    lineHeight,
-    titleActiveColor,
-    titleInactiveColor,
-    beforeChange,
-    onClickTab,
-    onChange,
-    style,
-    ...rest
-  } = props;
-  const tokens = useTabsTokens(tokensOverride);
-  const reducedMotion = useReducedMotion();
-  const type = typeProp ?? tokens.defaults.type;
-  const align = alignProp ?? tokens.defaults.align;
-  const ellipsis = ellipsisProp ?? tokens.defaults.ellipsis;
-  const swipeThreshold = swipeThresholdProp ?? tokens.defaults.swipeThreshold;
-  const animated = animatedProp ?? tokens.defaults.animated;
-  const duration = durationProp ?? tokens.defaults.duration;
-  const lazyRender = lazyRenderProp ?? tokens.defaults.lazyRender;
-  const background = backgroundProp ?? tokens.tabList.background;
-  const parsedLineWidth = parseNumberLike(lineWidth ?? tokens.indicator.width);
-  const resLineW = parsedLineWidth != null && parsedLineWidth < 0 ? undefined : parsedLineWidth;
-  const resLineH = Math.max(0, parseNumberLike(lineHeight) ?? tokens.indicator.height);
-  const resDur = reducedMotion ? 0 : Math.max(0, parseNumberLike(duration) ?? tokens.defaults.duration);
-  const resSwipeTh = Math.max(0, parseNumberLike(swipeThreshold) ?? tokens.defaults.swipeThreshold);
-  const swipeCfg = !swipeable ? undefined : isObject(swipeable) ? {
-    autoHeight: swipeable.autoHeight ?? true,
-    preventScroll: swipeable.preventScroll ?? true
-  } : {
-    autoHeight: true,
-    preventScroll: true
-  };
-  const isSwipe = !!swipeCfg;
-  const panes = useMemo(() => {
-    const result = [];
-    let paneIndex = 0;
-    const walk = nodes => {
-      Children.forEach(nodes, node => {
-        if (! /*#__PURE__*/isValidElement(node)) return;
-        const element = node;
-        if (element.type === React.Fragment) {
-          walk(element.props.children);
-          return;
-        }
-        if (!isTabPaneElement(element)) return;
-        const paneProps = element.props;
-        const name = paneProps.name ?? paneIndex;
-        result.push({
-          ...paneProps,
-          key: element.key ?? name,
-          name,
-          index: paneIndex
-        });
-        paneIndex += 1;
-      });
-    };
-    walk(children);
-    return result;
-  }, [children]);
-  const firstPaneName = panes[0]?.name;
-  const [actVal, setActVal] = useControllableValue(props, {
-    defaultValue: firstPaneName,
-    valuePropName: 'active',
-    defaultValuePropName: 'defaultActive',
-    trigger: 'onChange'
-  });
-  const curName = actVal == null ? firstPaneName : panes.some(pane => pane.name === actVal) ? actVal : firstPaneName;
-  const curNameRef = useRef(curName);
-  useEffect(() => {
-    curNameRef.current = curName;
-  }, [curName]);
-  const nameIdxMap = useMemo(() => {
-    const map = new Map();
-    panes.forEach(pane => {
-      map.set(pane.name, pane.index);
-    });
-    return map;
-  }, [panes]);
-  const actIdx = curName == null ? -1 : nameIdxMap.get(curName) ?? -1;
-  const visRef = useRef(new Set());
-  const layMap = useRef(new Map());
-  const navCtrWRef = useRef(0);
-  const navCntWRef = useRef(0);
-  const navCntSyncRef = useRef(null);
-  const paneLayMap = useRef(new Map());
-  const swipeScrRef = useRef(null);
-  const swipeChgRef = useRef(false);
-  const [ctrW, setCtrW] = useState(0);
-  const [swipeH, setSwipeH] = useState(undefined);
-  useEffect(() => {
-    if (curName == null) return;
-    visRef.current.add(curName);
-  }, [curName]);
-  useEffect(() => {
-    const validNames = new Set(panes.map(pane => pane.name));
-    Array.from(paneLayMap.current.keys()).forEach(name => {
-      if (!validNames.has(name)) paneLayMap.current.delete(name);
-    });
-    Array.from(layMap.current.keys()).forEach(name => {
-      if (!validNames.has(name)) layMap.current.delete(name);
-    });
-  }, [panes]);
-  const trackPaneLay = isSwipe && swipeCfg?.autoHeight;
-  useEffect(() => {
-    if (!trackPaneLay) paneLayMap.current.clear();
-  }, [trackPaneLay]);
-  useEffect(() => {
-    if (!isSwipe || !swipeCfg?.autoHeight) {
-      setSwipeH(undefined);
-      return;
-    }
-    const layout = curName != null ? paneLayMap.current.get(curName) : undefined;
-    if (layout) setSwipeH(layout.height);else setSwipeH(undefined);
-  }, [curName, isSwipe, swipeCfg?.autoHeight]);
-  useEffect(() => {
-    return () => {
-      cancelFrame(navCntSyncRef.current);
-      navCntSyncRef.current = null;
-    };
-  }, []);
-  const scrollable = isBoolean(scrollableProp) ? scrollableProp : panes.length > resSwipeTh || ellipsis === false;
-  const indColor = color ?? tokens.colors.indicator;
-  const indRad = resLineH ? resLineH / 2 : tokens.indicator.radius;
-  const {
-    indicatorX,
-    indicatorWidth,
-    indicatorInitializedRef,
-    animateIndicator
-  } = useTabsAnimation({
-    type,
-    animated,
-    scrollable,
-    align,
-    panes,
-    nameIndexMap: nameIdxMap,
-    resolvedLineWidth: resLineW,
-    resolvedLineHeight: resLineH,
-    resolvedDuration: resDur,
-    currentName: curName,
-    layoutMap: layMap,
-    navContainerWidthRef: navCtrWRef
-  });
-  const {
-    navScrollRef,
-    scrollIntoView,
-    handleNavScrollBeginDrag,
-    handleNavScroll
-  } = useTabsScroll({
-    scrollable,
-    animated,
-    currentName: curName,
-    resolvedDuration: resDur,
-    layoutMap: layMap,
-    navContainerWidthRef: navCtrWRef,
-    navContentWidthRef: navCntWRef
-  });
-  const onTabLayout = useCallback((name, event) => {
-    const {
-      x,
-      width
-    } = event.nativeEvent.layout;
-    layMap.current.set(name, {
-      x,
-      width
-    });
-    if (name === curNameRef.current) {
-      const shouldAnimate = indicatorInitializedRef.current;
-      const didAnimate = animateIndicator(name, !shouldAnimate);
-      if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
-    }
-  }, [animateIndicator, indicatorInitializedRef]);
-  const onNavCtrLayout = useCallback(event => {
-    const {
-      width
-    } = event.nativeEvent.layout;
-    navCtrWRef.current = width;
-    if (!scrollable && align !== 'start' && type === 'line' && curName !== undefined && curName !== null) {
-      const shouldAnimate = indicatorInitializedRef.current;
-      const didAnimate = animateIndicator(curName, !shouldAnimate);
-      if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
-    }
-  }, [align, animateIndicator, curName, scrollable, type, indicatorInitializedRef]);
-  const onCtrLayout = useCallback(event => {
-    const nextW = event.nativeEvent.layout.width;
-    setCtrW(prev => prev === nextW ? prev : nextW);
-  }, []);
-  const beforeChgRef = useRef(beforeChange);
-  beforeChgRef.current = beforeChange;
-  const runBeforeChg = useCallback(name => {
-    if (!beforeChgRef.current) return Promise.resolve(true);
-    try {
-      return Promise.resolve(beforeChgRef.current(name)).then(res => res !== false).catch(() => false);
-    } catch (error) {
-      return Promise.resolve(false);
-    }
-  }, []);
-  const chgSeqRef = useRef(0);
-  const reqChg = useCallback((name, index) => {
-    chgSeqRef.current += 1;
-    const seq = chgSeqRef.current;
-    runBeforeChg(name).then(canChange => {
-      if (!canChange) return;
-      if (chgSeqRef.current !== seq) return;
-      setActVal(name, index);
-    });
-  }, [runBeforeChg, setActVal]);
-  const onPaneLayout = useCallback((name, event) => {
-    if (isSwipe && swipeCfg?.autoHeight) {
-      const {
-        height
-      } = event.nativeEvent.layout;
-      paneLayMap.current.set(name, {
-        height
-      });
-      if (name === curName) setSwipeH(height);
-    }
-  }, [curName, isSwipe, swipeCfg?.autoHeight]);
-  const swipeEndIdxRef = useRef(null);
-  useEffect(() => {
-    swipeEndIdxRef.current = null;
-  }, [curName]);
-  const onSwipeEnd = useCallback(offsetX => {
-    if (!isSwipe || ctrW <= 0) return;
-    const pageIdx = Math.round(offsetX / ctrW);
-    if (swipeEndIdxRef.current === pageIdx) return;
-    swipeEndIdxRef.current = pageIdx;
-    const nextPane = panes[pageIdx];
-    if (!nextPane || nextPane.name === curNameRef.current) return;
-    swipeChgRef.current = true;
-    reqChg(nextPane.name, nextPane.index);
-  }, [ctrW, isSwipe, panes, reqChg]);
-  const onSwipeMomentumScrollEnd = useCallback(event => {
-    onSwipeEnd(event.nativeEvent.contentOffset.x);
-  }, [onSwipeEnd]);
-  const onSwipeScrollEndDrag = useCallback(event => {
-    onSwipeEnd(event.nativeEvent.contentOffset.x);
-  }, [onSwipeEnd]);
-  useEffect(() => {
-    if (!isSwipe || !swipeScrRef.current || ctrW <= 0) return;
-    if (swipeChgRef.current) {
-      swipeChgRef.current = false;
-      return;
-    }
-    if (actIdx < 0) return;
-    const node = swipeScrRef.current?.getNode?.() ?? swipeScrRef.current;
-    if (!node?.scrollTo) return;
-    node.scrollTo({
-      x: ctrW * actIdx,
-      y: 0,
-      animated: true
-    });
-  }, [actIdx, ctrW, isSwipe]);
-  const onClickTabRef = useRef(onClickTab);
-  onClickTabRef.current = onClickTab;
-  const onSel = useCallback((pane, index, event) => {
-    const payload = {
-      name: pane.name,
-      index,
-      disabled: !!pane.disabled,
-      event
-    };
-    onClickTabRef.current?.(payload);
-    if (pane.disabled || pane.name === curNameRef.current) return;
-    reqChg(pane.name, index);
-  }, [reqChg]);
-  const scrollTo = useCallback((name, _options) => {
-    const target = panes.find(pane => pane.name === name && !pane.disabled);
-    if (!target) return;
-    setActVal(target.name, target.index);
-  }, [panes, setActVal]);
-  useImperativeHandle(ref, () => ({
-    scrollTo
-  }), [scrollTo]);
-  const firstRndRef = useRef(true);
-  useEffect(() => {
-    if (firstRndRef.current) {
-      firstRndRef.current = false;
-      scrollIntoView(true);
-    }
-  }, [scrollIntoView]);
-  useEffect(() => {
-    if (!firstRndRef.current) scrollIntoView();
-  }, [curName, scrollIntoView]);
-  const hasBorder = border ?? false;
-  const showInd = type === 'line';
-  const navH = type === 'jumbo' ? tokens.jumbo.height : type === 'card' ? tokens.card.height : tokens.tabList.height;
-  const navPB = Platform.OS === 'web' && type !== 'line' && type !== 'card' ? tokens.tabList.paddingBottom : 0;
-  const indBot = showInd ? type === 'line' ? 0 : tokens.indicator.offset : 0;
-  if (panes.length === 0) return null;
-  const indicatorNode = showInd ? /*#__PURE__*/React.createElement(Animated.View, {
-    testID: "rv-tabs-indicator",
-    style: [S.ind, {
-      height: resLineH,
-      borderRadius: indRad,
-      backgroundColor: indColor,
-      width: indicatorWidth,
-      bottom: indBot,
-      transform: [{
-        translateX: indicatorX
-      }]
-    }]
-  }) : null;
-  const navItems = useMemo(() => panes.map(pane => /*#__PURE__*/React.createElement(TabBarItem, {
-    key: pane.key,
-    pane: pane,
-    isActive: pane.name === curName,
-    align: align,
-    scrollable: scrollable,
-    type: type,
-    ellipsis: ellipsis,
-    tokens: tokens,
-    color: color,
-    titleActiveColor: titleActiveColor,
-    titleInactiveColor: titleInactiveColor,
-    tabStyle: tabStyle,
-    titleStyle: titleStyle,
-    descriptionStyle: descriptionStyle,
-    onSelect: onSel,
-    onLayout: onTabLayout,
-    isLast: pane.index === panes.length - 1
-  })), [align, color, curName, descriptionStyle, ellipsis, onSel, onTabLayout, panes, scrollable, tabStyle, titleActiveColor, titleInactiveColor, titleStyle, tokens, type]);
-  const onNavCntSizeChg = useCallback(w => {
-    const prev = navCntWRef.current;
-    navCntWRef.current = w;
-    if (prev === 0 || firstRndRef.current) {
-      scrollIntoView(true);
-      return;
-    }
-    if (Math.abs(w - prev) > 1) {
-      cancelFrame(navCntSyncRef.current);
-      navCntSyncRef.current = requestFrame(() => {
-        navCntSyncRef.current = null;
-        scrollIntoView();
-      });
-    }
-  }, [scrollIntoView]);
-  const navBody = scrollable ? /*#__PURE__*/React.createElement(ScrollView, {
-    horizontal: true,
-    ref: navScrollRef,
-    accessibilityRole: "tablist",
-    showsHorizontalScrollIndicator: false,
-    scrollEventThrottle: 16,
-    onScrollBeginDrag: handleNavScrollBeginDrag,
-    onScroll: handleNavScroll,
-    onContentSizeChange: onNavCntSizeChg,
-    contentContainerStyle: S.navC
-  }, navItems, indicatorNode) : /*#__PURE__*/React.createElement(View, {
-    accessibilityRole: "tablist",
-    style: [S.navC, S.navCSta]
-  }, navItems, indicatorNode);
-  const navContent = /*#__PURE__*/React.createElement(View, {
-    style: [S.wrap, {
-      backgroundColor: background
-    }, tabBarStyle]
-  }, navLeft && /*#__PURE__*/React.createElement(View, {
-    style: {
-      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
-    }
-  }, navLeft), /*#__PURE__*/React.createElement(View, {
-    style: [S.nav, {
-      minHeight: navH + navPB,
-      paddingBottom: navPB
-    }, type === 'card' ? {
-      borderRadius: tokens.card.radius,
-      marginHorizontal: tokens.card.marginHorizontal,
-      overflow: 'hidden'
-    } : null],
-    onLayout: onNavCtrLayout
-  }, navBody, type === 'card' && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'all',
-      color: color ?? tokens.colors.cardBorder,
-      borderRadius: tokens.card.radius
-    })
-  })), navRight && /*#__PURE__*/React.createElement(View, {
-    style: {
-      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
-    }
-  }, navRight), hasBorder && type === 'line' && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'bottom',
-      color: tokens.colors.border,
-      left: 0,
-      right: 0
-    })
-  }));
-  const paneNodes = useMemo(() => panes.map(pane => {
-    const isActive = pane.name === curName;
-    const shouldRender = !lazyRender || isActive || visRef.current.has(pane.name);
-    if (!shouldRender && !isSwipe) return null;
-    const layoutHandler = isSwipe && swipeCfg?.autoHeight ? event => onPaneLayout(pane.name, event) : undefined;
-    const paneStyles = [S.pane, isSwipe ? S.swipePane : null, isSwipe && ctrW > 0 && {
-      width: ctrW
-    }, !isSwipe && !isActive ? S.hidPane : null];
-    const paneContent = shouldRender ? pane.children : lazyRenderPlaceholder || null;
-    return /*#__PURE__*/React.createElement(View, {
-      key: pane.key,
-      testID: `rv-tabs-pane-${pane.name}`,
-      onLayout: layoutHandler,
-      style: paneStyles
-    }, paneContent);
-  }), [ctrW, curName, onPaneLayout, isSwipe, lazyRender, lazyRenderPlaceholder, panes, swipeCfg?.autoHeight]);
-  const baseContentStyle = [S.content, contentStyle];
-  const swipeContentStyle = [S.content, contentStyle, swipeCfg?.autoHeight && swipeH !== undefined && {
-    height: swipeH
-  }];
-  const contentNode = isSwipe ? /*#__PURE__*/React.createElement(View, {
-    style: swipeContentStyle
-  }, /*#__PURE__*/React.createElement(Animated.ScrollView, {
-    ref: swipeScrRef,
-    horizontal: true,
-    pagingEnabled: true,
-    scrollEventThrottle: 16,
-    showsHorizontalScrollIndicator: false,
-    onMomentumScrollEnd: onSwipeMomentumScrollEnd,
-    onScrollEndDrag: onSwipeScrollEndDrag,
-    nestedScrollEnabled: swipeCfg?.preventScroll === false,
-    directionalLockEnabled: swipeCfg?.preventScroll !== false
-  }, paneNodes)) : /*#__PURE__*/React.createElement(View, {
-    style: baseContentStyle
-  }, paneNodes);
-  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [S.ctr, style],
-    onLayout: onCtrLayout
-  }), navContent, navBottom && /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: tokens.spacing.navBottomMarginTop
-    }
-  }, navBottom), contentNode);
-};
-const S = StyleSheet.create({
-  ctr: {
-    width: '100%'
-  },
-  wrap: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'relative'
-  },
-  nav: {
-    flex: 1,
-    position: 'relative',
-    alignSelf: 'stretch'
-  },
-  navC: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: '100%',
-    position: 'relative'
-  },
-  navCSta: {
-    flex: 1
-  },
-  lblW: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column'
-  },
-  lblWJ: {
-    alignItems: 'center'
-  },
-  cardLbl: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  tabI: {
-    flexShrink: 0,
-    height: '100%',
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row'
-  },
-  flexI: {
-    flexGrow: 1
-  },
-  title: {
-    includeFontPadding: false
-  },
-  descTxt: {
-    includeFontPadding: false
-  },
-  ellipsis: {
-    maxWidth: '100%',
-    flexShrink: 1
-  },
-  ind: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0
-  },
-  content: {
-    width: '100%'
-  },
-  pane: {
-    width: '100%'
-  },
-  swipePane: {
-    flexShrink: 0
-  },
-  hidPane: {
-    display: 'none'
-  }
-});
-const TabsBaseRef = /*#__PURE__*/React.forwardRef(TabsBaseInner);
-const TabsWithPane = Object.assign(/*#__PURE__*/React.memo(TabsBaseRef), {
-  TabPane
-});
-export { TabPane };
-export default TabsWithPane;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}import React,{memo,useCallback,useEffect,useImperativeHandle,useRef,useState,useMemo,Children,isValidElement}from"react";import{Animated,Pressable,StyleSheet,Text,ScrollView,View,Platform}from"react-native";import{useAriaPress,useControllableValue}from"../../hooks";import{useReducedMotion}from"../../hooks/animation";import{createHairlineView}from"../../utils/hairline";import{parseNumberLike}from"../../utils/number";import{isBoolean,isFunction,isObject,isRenderable,isText}from"../../utils/validate";import{useTabsTokens}from"./tokens";const TabPane=()=>null;TabPane.displayName="Tabs.TabPane";const hasRaf="function"==typeof requestAnimationFrame&&"function"==typeof cancelAnimationFrame,requestFrame=hasRaf?requestAnimationFrame:e=>setTimeout(e,16),cancelFrame=e=>{null!=e&&(hasRaf?cancelAnimationFrame:clearTimeout)(e)},isTabPaneElement=e=>!!React.isValidElement(e)&&(e.type===TabPane||"Tabs.TabPane"===e.type.displayName),useTabsAnimation=({type:e,animated:t,scrollable:n,align:r,panes:a,nameIndexMap:i,resolvedLineWidth:l,resolvedDuration:o,currentName:c,layoutMap:s,navContainerWidthRef:u})=>{const d=useRef(new Animated.Value(0)).current,m=useRef(new Animated.Value(0)).current,f=useRef(!1),p=useRef(null),g=useCallback((c,f)=>{if(null==c||"line"!==e)return!1;const g=!n&&"start"!==r&&u.current>0&&a.length>0,b=i.get(c)??-1,h=g?u.current/a.length:0,y=g?{x:Math.max(b,0)*h,width:h}:s.current.get(c);if(!y||b<0)return!1;p.current?.stop();const v=(e,n)=>Animated.timing(e,{toValue:n,duration:f||!t?0:o,useNativeDriver:!1,isInteraction:!1}),R=l??y.width,S=l?y.x+(y.width-R)/2:y.x,x=Animated.parallel([v(d,S),v(m,R)]);return p.current=x,x.start(({finished:e})=>{e&&(p.current=null)}),!0},[r,t,m,d,i,a.length,o,l,n,e,s,u]);return useEffect(()=>{if(null==c)return;const e=f.current;g(c,!e)&&!f.current&&(f.current=!0)},[g,c]),useEffect(()=>()=>{p.current?.stop(),p.current=null},[]),{indicatorX:d,indicatorWidth:m,indicatorInitializedRef:f,animateIndicator:g}},useTabsScroll=({scrollable:e,animated:t,currentName:n,resolvedDuration:r,layoutMap:a,navContainerWidthRef:i,navContentWidthRef:l})=>{const o=useRef(null),c=useRef(new Animated.Value(0)).current,s=useRef(null),u=useRef(!1),d=useRef(0),m=useRef(null),f=useCallback(o=>{if(!e||null==n)return;const f=a.current.get(n),p=i.current;if(!f||!p)return;const g=l.current,b=f.x-(p-f.width)/2,h=Math.max(g-p,0),y=Math.max(0,Math.min(b,h));if(!(h<=0||Math.abs(y-d.current)<1)){if(s.current?.stop(),s.current=null,cancelFrame(m.current),m.current=null,o||!t)return u.current=!0,c.setValue(y),void(m.current=requestFrame(()=>{m.current=null,u.current=!1}));c.setValue(d.current),u.current=!0,s.current=Animated.timing(c,{toValue:y,duration:r,useNativeDriver:!1,isInteraction:!1}),s.current.start(({finished:e})=>{s.current=null,u.current=!1,e&&(d.current=y)})}},[t,n,c,r,e,a,i,l]);useEffect(()=>{if(!e)return;const t=c.addListener(({value:e})=>{const t=d.current;d.current=e,Math.abs(e-t)>=.5&&o.current?.scrollTo({x:e,y:0,animated:!1})});return()=>c.removeListener(t)},[c,e]),useEffect(()=>()=>{cancelFrame(m.current),m.current=null},[]);const p=useCallback(e=>{u.current=!1,s.current?.stop(),s.current=null,d.current=e.nativeEvent.contentOffset.x},[]),g=useCallback(e=>{u.current||(d.current=e.nativeEvent.contentOffset.x)},[]);return{navScrollRef:o,navScrollX:c,scrollIntoView:f,handleNavScrollBeginDrag:p,handleNavScroll:g}},TabBarItemInner=({pane:e,isActive:t,align:n,scrollable:r,type:a,ellipsis:i,tokens:l,color:o,titleActiveColor:c,titleInactiveColor:s,tabStyle:u,titleStyle:d,descriptionStyle:m,onSelect:f,onLayout:p,isLast:g})=>{const b=!!e.disabled,h=useAriaPress({onPress:t=>f(e,e.index,t),extraProps:{accessibilityRole:"tab",accessibilityState:{selected:t,disabled:b},testID:`rv-tabs-item-${e.name}`}}),y="capsule"===a,v="jumbo"===a,R="card"===a,x=isFunction(e.title)?e.title(t):e.title??e.name,w=isFunction(e.description)?e.description(t):e.description,T=c??(R?l.colors.cardActiveText:y?l.colors.capsuleActiveText:o??l.colors.textActive),E=s??(R?o??l.colors.cardBorder:y?l.colors.capsuleText:l.colors.text),k=e.disabled?l.colors.textDisabled:t?T:E,C=b?l.colors.textDisabled:v?t?l.colors.jumboDescriptionActive:l.colors.jumboDescription:t?l.colors.descriptionActive:l.colors.description,V=!r&&("start"!==n||R),I=R||v||y,H=I?0:l.tabList.paddingHorizontal,P=I?0:l.tabList.paddingVertical,A=[S.lblW,v&&S.lblWJ,R&&S.cardLbl,R&&{paddingHorizontal:l.card.paddingHorizontal,paddingVertical:l.card.paddingVertical},y&&{flex:1,alignSelf:"stretch",paddingHorizontal:l.capsule.paddingHorizontal,paddingVertical:l.capsule.paddingVertical},v&&{paddingHorizontal:l.jumbo.paddingHorizontal,paddingVertical:l.jumbo.paddingVertical,alignItems:"center"}].filter(Boolean),z=y?[{flex:1,alignSelf:"stretch",justifyContent:"center",alignItems:"center",borderRadius:l.capsule.radius,backgroundColor:t?o??l.colors.capsuleActiveBackground:l.colors.capsuleBackground}]:null,M=[S.title,{color:k,fontFamily:l.typography.fontFamily,fontSize:v?l.typography.jumboTitleSize:l.typography.titleSize,fontWeight:t?l.typography.titleActiveWeight:l.typography.titleWeight,lineHeight:v?l.typography.jumboLineHeight:void 0,textAlign:"center"},i&&!v?S.ellipsis:null,d],L=v?l.spacing.jumboDescriptionMarginTop:l.spacing.descriptionMarginTop,B=v?{backgroundColor:t?l.colors.jumboDescriptionActiveBackground:l.colors.jumboDescriptionBackground,paddingHorizontal:l.jumbo.descriptionPaddingHorizontal,paddingVertical:l.jumbo.descriptionPaddingVertical,borderRadius:l.jumbo.descriptionRadius}:null,D=useCallback(t=>p(e.name,t),[p,e.name]);return React.createElement(Pressable,_extends({},h.interactionProps,{onLayout:D,style:[S.tabI,V?S.flexI:null,{paddingHorizontal:H,paddingVertical:P},R?{backgroundColor:t?o??l.colors.cardActiveBackground:l.colors.cardBackground}:null,u]}),React.createElement(View,{style:A},z?React.createElement(View,{style:z},React.createElement(Text,{style:M,numberOfLines:i&&!v?1:void 0},x)):React.createElement(Text,{style:M,numberOfLines:i&&!v?1:void 0},x),isRenderable(w)&&(isText(w)?React.createElement(Text,{style:[S.descTxt,{color:C,fontFamily:l.typography.fontFamily,fontSize:l.typography.descriptionSize,marginTop:L,textAlign:"center"},B,m]},w):React.createElement(View,{style:[{marginTop:L,alignItems:"center"},B]},w)),isRenderable(e.badge)&&React.createElement(View,{style:{marginTop:l.spacing.badgeMarginTop}},isText(e.badge)?React.createElement(Text,{style:{color:l.colors.badgeText,fontFamily:l.typography.fontFamily,fontSize:l.typography.badgeTextSize}},e.badge):e.badge)),R&&!g&&React.createElement(View,{style:createHairlineView({position:"right",color:o??l.colors.cardBorder,top:0,bottom:0})}))},TabBarItem=memo(TabBarItemInner),TabsBaseInner=(e,t)=>{const{tokensOverride:n,children:r,type:a,align:i,ellipsis:l,swipeThreshold:o,animated:c,duration:s,lazyRender:u,lazyRenderPlaceholder:d,scrollable:m,swipeable:f,color:p,background:g,border:b,navLeft:h,navRight:y,navBottom:v,tabBarStyle:R,tabStyle:x,titleStyle:w,descriptionStyle:T,contentStyle:E,lineWidth:k,lineHeight:C,titleActiveColor:V,titleInactiveColor:I,beforeChange:H,onClickTab:P,onChange:A,style:z,...M}=e,L=useTabsTokens(n),B=useReducedMotion(),D=a??L.defaults.type,j=i??L.defaults.align,F=l??L.defaults.ellipsis,W=o??L.defaults.swipeThreshold,N=c??L.defaults.animated,O=s??L.defaults.duration,q=u??L.defaults.lazyRender,_=g??L.tabList.background,X=parseNumberLike(k??L.indicator.width),J=null!=X&&X<0?void 0:X,$=Math.max(0,parseNumberLike(C)??L.indicator.height),G=B?0:Math.max(0,parseNumberLike(O)??L.defaults.duration),K=Math.max(0,parseNumberLike(W)??L.defaults.swipeThreshold),Q=f?isObject(f)?{autoHeight:f.autoHeight??!0,preventScroll:f.preventScroll??!0}:{autoHeight:!0,preventScroll:!0}:void 0,U=!!Q,Y=useMemo(()=>{const e=[];let t=0;const n=r=>{Children.forEach(r,r=>{if(!isValidElement(r))return;const a=r;if(a.type===React.Fragment)return void n(a.props.children);if(!isTabPaneElement(a))return;const i=a.props,l=i.name??t;e.push({...i,key:a.key??l,name:l,index:t}),t+=1})};return n(r),e},[r]),Z=Y[0]?.name,[ee,te]=useControllableValue(e,{defaultValue:Z,valuePropName:"active",defaultValuePropName:"defaultActive",trigger:"onChange"}),ne=null==ee?Z:Y.some(e=>e.name===ee)?ee:Z,re=useRef(ne);useEffect(()=>{re.current=ne},[ne]);const ae=useMemo(()=>{const e=new Map;return Y.forEach(t=>{e.set(t.name,t.index)}),e},[Y]),ie=null==ne?-1:ae.get(ne)??-1,le=useRef(new Set),oe=useRef(new Map),ce=useRef(0),se=useRef(0),ue=useRef(null),de=useRef(new Map),me=useRef(null),fe=useRef(!1),[pe,ge]=useState(0),[be,he]=useState(void 0);useEffect(()=>{null!=ne&&le.current.add(ne)},[ne]),useEffect(()=>{const e=new Set(Y.map(e=>e.name));Array.from(de.current.keys()).forEach(t=>{e.has(t)||de.current.delete(t)}),Array.from(oe.current.keys()).forEach(t=>{e.has(t)||oe.current.delete(t)})},[Y]);const ye=U&&Q?.autoHeight;useEffect(()=>{ye||de.current.clear()},[ye]),useEffect(()=>{if(!U||!Q?.autoHeight)return void he(void 0);const e=null!=ne?de.current.get(ne):void 0;he(e?e.height:void 0)},[ne,U,Q?.autoHeight]),useEffect(()=>()=>{cancelFrame(ue.current),ue.current=null},[]);const ve=isBoolean(m)?m:Y.length>K||!1===F,Re=p??L.colors.indicator,Se=$?$/2:L.indicator.radius,{indicatorX:xe,indicatorWidth:we,indicatorInitializedRef:Te,animateIndicator:Ee}=useTabsAnimation({type:D,animated:N,scrollable:ve,align:j,panes:Y,nameIndexMap:ae,resolvedLineWidth:J,resolvedLineHeight:$,resolvedDuration:G,currentName:ne,layoutMap:oe,navContainerWidthRef:ce}),{navScrollRef:ke,scrollIntoView:Ce,handleNavScrollBeginDrag:Ve,handleNavScroll:Ie}=useTabsScroll({scrollable:ve,animated:N,currentName:ne,resolvedDuration:G,layoutMap:oe,navContainerWidthRef:ce,navContentWidthRef:se}),He=useCallback((e,t)=>{const{x:n,width:r}=t.nativeEvent.layout;if(oe.current.set(e,{x:n,width:r}),e===re.current){const t=Te.current;Ee(e,!t)&&!Te.current&&(Te.current=!0)}},[Ee,Te]),Pe=useCallback(e=>{const{width:t}=e.nativeEvent.layout;if(ce.current=t,!ve&&"start"!==j&&"line"===D&&null!=ne){const e=Te.current;Ee(ne,!e)&&!Te.current&&(Te.current=!0)}},[j,Ee,ne,ve,D,Te]),Ae=useCallback(e=>{const t=e.nativeEvent.layout.width;ge(e=>e===t?e:t)},[]),ze=useRef(H);ze.current=H;const Me=useCallback(e=>{if(!ze.current)return Promise.resolve(!0);try{return Promise.resolve(ze.current(e)).then(e=>!1!==e).catch(()=>!1)}catch(e){return Promise.resolve(!1)}},[]),Le=useRef(0),Be=useCallback((e,t)=>{Le.current+=1;const n=Le.current;Me(e).then(r=>{r&&Le.current===n&&te(e,t)})},[Me,te]),De=useCallback((e,t)=>{if(U&&Q?.autoHeight){const{height:n}=t.nativeEvent.layout;de.current.set(e,{height:n}),e===ne&&he(n)}},[ne,U,Q?.autoHeight]),je=useRef(null);useEffect(()=>{je.current=null},[ne]);const Fe=useCallback(e=>{if(!U||pe<=0)return;const t=Math.round(e/pe);if(je.current===t)return;je.current=t;const n=Y[t];n&&n.name!==re.current&&(fe.current=!0,Be(n.name,n.index))},[pe,U,Y,Be]),We=useCallback(e=>{Fe(e.nativeEvent.contentOffset.x)},[Fe]),Ne=useCallback(e=>{Fe(e.nativeEvent.contentOffset.x)},[Fe]);useEffect(()=>{if(!U||!me.current||pe<=0)return;if(fe.current)return void(fe.current=!1);if(ie<0)return;const e=me.current?.getNode?.()??me.current;e?.scrollTo&&e.scrollTo({x:pe*ie,y:0,animated:!0})},[ie,pe,U]);const Oe=useRef(P);Oe.current=P;const qe=useCallback((e,t,n)=>{const r={name:e.name,index:t,disabled:!!e.disabled,event:n};Oe.current?.(r),e.disabled||e.name===re.current||Be(e.name,t)},[Be]),_e=useCallback((e,t)=>{const n=Y.find(t=>t.name===e&&!t.disabled);n&&te(n.name,n.index)},[Y,te]);useImperativeHandle(t,()=>({scrollTo:_e}),[_e]);const Xe=useRef(!0);useEffect(()=>{Xe.current&&(Xe.current=!1,Ce(!0))},[Ce]),useEffect(()=>{Xe.current||Ce()},[ne,Ce]);const Je=b??!1,$e="line"===D,Ge="jumbo"===D?L.jumbo.height:"card"===D?L.card.height:L.tabList.height,Ke="web"===Platform.OS&&"line"!==D&&"card"!==D?L.tabList.paddingBottom:0,Qe=$e?"line"===D?0:L.indicator.offset:0;if(0===Y.length)return null;const Ue=$e?React.createElement(Animated.View,{testID:"rv-tabs-indicator",style:[S.ind,{height:$,borderRadius:Se,backgroundColor:Re,width:we,bottom:Qe,transform:[{translateX:xe}]}]}):null,Ye=useMemo(()=>Y.map(e=>React.createElement(TabBarItem,{key:e.key,pane:e,isActive:e.name===ne,align:j,scrollable:ve,type:D,ellipsis:F,tokens:L,color:p,titleActiveColor:V,titleInactiveColor:I,tabStyle:x,titleStyle:w,descriptionStyle:T,onSelect:qe,onLayout:He,isLast:e.index===Y.length-1})),[j,p,ne,T,F,qe,He,Y,ve,x,V,I,w,L,D]),Ze=useCallback(e=>{const t=se.current;se.current=e,0===t||Xe.current?Ce(!0):Math.abs(e-t)>1&&(cancelFrame(ue.current),ue.current=requestFrame(()=>{ue.current=null,Ce()}))},[Ce]),et=ve?React.createElement(ScrollView,{horizontal:!0,ref:ke,accessibilityRole:"tablist",showsHorizontalScrollIndicator:!1,scrollEventThrottle:16,onScrollBeginDrag:Ve,onScroll:Ie,onContentSizeChange:Ze,contentContainerStyle:S.navC},Ye,Ue):React.createElement(View,{accessibilityRole:"tablist",style:[S.navC,S.navCSta]},Ye,Ue),tt=React.createElement(View,{style:[S.wrap,{backgroundColor:_},R]},h&&React.createElement(View,{style:{paddingHorizontal:L.spacing.navSidePaddingHorizontal}},h),React.createElement(View,{style:[S.nav,{minHeight:Ge+Ke,paddingBottom:Ke},"card"===D?{borderRadius:L.card.radius,marginHorizontal:L.card.marginHorizontal,overflow:"hidden"}:null],onLayout:Pe},et,"card"===D&&React.createElement(View,{style:createHairlineView({position:"all",color:p??L.colors.cardBorder,borderRadius:L.card.radius})})),y&&React.createElement(View,{style:{paddingHorizontal:L.spacing.navSidePaddingHorizontal}},y),Je&&"line"===D&&React.createElement(View,{style:createHairlineView({position:"bottom",color:L.colors.border,left:0,right:0})})),nt=useMemo(()=>Y.map(e=>{const t=e.name===ne,n=!q||t||le.current.has(e.name);if(!n&&!U)return null;const r=U&&Q?.autoHeight?t=>De(e.name,t):void 0,a=[S.pane,U?S.swipePane:null,U&&pe>0&&{width:pe},U||t?null:S.hidPane],i=n?e.children:d||null;return React.createElement(View,{key:e.key,testID:`rv-tabs-pane-${e.name}`,onLayout:r,style:a},i)}),[pe,ne,De,U,q,d,Y,Q?.autoHeight]),rt=[S.content,E],at=[S.content,E,Q?.autoHeight&&void 0!==be&&{height:be}],it=U?React.createElement(View,{style:at},React.createElement(Animated.ScrollView,{ref:me,horizontal:!0,pagingEnabled:!0,scrollEventThrottle:16,showsHorizontalScrollIndicator:!1,onMomentumScrollEnd:We,onScrollEndDrag:Ne,nestedScrollEnabled:!1===Q?.preventScroll,directionalLockEnabled:!1!==Q?.preventScroll},nt)):React.createElement(View,{style:rt},nt);return React.createElement(View,_extends({},M,{style:[S.ctr,z],onLayout:Ae}),tt,v&&React.createElement(View,{style:{marginTop:L.spacing.navBottomMarginTop}},v),it)},S=StyleSheet.create({ctr:{width:"100%"},wrap:{flexDirection:"row",alignItems:"center",position:"relative"},nav:{flex:1,position:"relative",alignSelf:"stretch"},navC:{flexDirection:"row",alignItems:"center",height:"100%",position:"relative"},navCSta:{flex:1},lblW:{justifyContent:"center",alignItems:"center",flexDirection:"column"},lblWJ:{alignItems:"center"},cardLbl:{flexDirection:"row",justifyContent:"center",alignItems:"center"},tabI:{flexShrink:0,height:"100%",alignSelf:"stretch",alignItems:"center",justifyContent:"center",flexDirection:"row"},flexI:{flexGrow:1},title:{includeFontPadding:!1},descTxt:{includeFontPadding:!1},ellipsis:{maxWidth:"100%",flexShrink:1},ind:{position:"absolute",bottom:0,left:0},content:{width:"100%"},pane:{width:"100%"},swipePane:{flexShrink:0},hidPane:{display:"none"}}),TabsBaseRef=React.forwardRef(TabsBaseInner),TabsWithPane=Object.assign(React.memo(TabsBaseRef),{TabPane:TabPane});export{TabPane};export default TabsWithPane;