react-native-terra-ui 0.4.0 → 0.5.0

package/src/components/screen/ScreenList.tsx

@@ -0,0 +1,270 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ElementType,
+  type ReactElement,
+  useMemo,
+} from 'react';
+import {
+  FlatList,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import Animated, {
+  type AnimatedRef,
+  useAnimatedScrollHandler,
+  useComposedEventHandler,
+} from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { resolveScreenMargin } from '#theme/screen-margin';
+import { PortalHost } from '../portal';
+import { BottomSafeArea } from './parts/BottomSafeArea';
+import { renderScreenPlaceholder } from './parts/ScreenPlaceholder';
+import { SCREEN_HEADER_PORTAL_HOST, useScreen } from './ScreenContext';
+import type { ScreenMargins, ScreenScrollableProps } from './types';
+import {
+  hasXMargin,
+  hasYMargin,
+  type ListHeaderComponent,
+  renderListHeader,
+} from './utils';
+
+export interface ScreenListRenderItemInfo<T> {
+  item: T;
+  index: number;
+}
+
+export type ScreenListProps<
+  T = unknown,
+  As extends ElementType = typeof FlatList,
+> = ScreenScrollableProps &
+  Omit<
+    ComponentPropsWithoutRef<As>,
+    | 'data'
+    | 'renderItem'
+    | 'keyExtractor'
+    | 'style'
+    | 'contentContainerStyle'
+    | 'onScroll'
+    | 'ListHeaderComponent'
+    | 'ListFooterComponent'
+    | 'ListEmptyComponent'
+    | keyof ScreenScrollableProps
+  > & {
+    /**
+     * Which list component to render as. Defaults to React Native's
+     * `FlatList` — pass any list with a FlatList-shaped prop surface
+     * (`data`, `renderItem`, `ListHeaderComponent`, …), e.g. `FlashList`
+     * from `@shopify/flash-list`, or a custom virtualized list.
+     *
+     * Only the default `FlatList` binds the screen's shared imperative
+     * scroll ref — a custom `as` is responsible for its own ref if it needs
+     * one, since not every list exposes a Reanimated-compatible ref (e.g.
+     * `FlashList`'s ref exposes a different, non Reanimated-compatible
+     * imperative API).
+     */
+    as?: As;
+    data?: readonly T[] | null;
+    renderItem?: (info: ScreenListRenderItemInfo<T>) => ReactElement | null;
+    keyExtractor?: (item: T, index: number) => string;
+    ListHeaderComponent?: ListHeaderComponent;
+    ListFooterComponent?: ListHeaderComponent;
+    ListEmptyComponent?: ListHeaderComponent;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Extra bottom padding on the list content — clearance for a tab bar or
+     * home indicator. Defaults to the `layout.screen.margin.y` token when
+     * margins are enabled, otherwise `0`.
+     */
+    bottomInset?: number;
+  };
+
+/**
+ * Polymorphic list container — renders whichever list `as` names (defaults
+ * to `FlatList`), applying the same margin/header/safe-area/scroll-handler
+ * chrome regardless of which one it is. A screen can swap list
+ * implementations by changing `as`, without relearning the surrounding API.
+ *
+ * @example
+ * ```tsx
+ * <Screen.List data={items} renderItem={({ item }) => <Row item={item} />} />
+ * ```
+ *
+ * @example Any other list component
+ * ```tsx
+ * import { FlashList } from '@shopify/flash-list';
+ *
+ * <Screen.List
+ *   as={FlashList}
+ *   data={items}
+ *   renderItem={({ item }) => <Row item={item} />}
+ * />
+ * ```
+ */
+export function ScreenList<
+  T = unknown,
+  As extends ElementType = typeof FlatList,
+>({
+  as,
+  data,
+  renderItem,
+  style,
+  contentContainerStyle,
+  ListHeaderComponent,
+  ListFooterComponent,
+  ListEmptyComponent,
+  horizontal = false,
+  loading = false,
+  LoadingComponent,
+  EmptyComponent,
+  margins,
+  bottomInset,
+  onScroll,
+  ...rest
+}: ScreenListProps<T, As>) {
+  const isDefaultFlatList = as === undefined;
+  const Component = (as ?? FlatList) as ComponentType<Record<string, unknown>>;
+
+  // `Animated.createAnimatedComponent` should only run once per component,
+  // not on every render — `as` is arbitrary here (not a fixed module-scope
+  // reference like `Screen.FlatList` uses), so it's memoized on the resolved
+  // component instead of hoisted to module scope.
+  const AnimatedComponent = useMemo(
+    () => Animated.createAnimatedComponent(Component),
+    [Component]
+  );
+
+  const {
+    background,
+    scrollRef,
+    scrollHandler,
+    headerSnapOffsets,
+    margins: screenMargins,
+    hasHeader,
+  } = useScreen();
+
+  const resolvedMargins = margins ?? screenMargins;
+  // The placeholder rides in on `ListEmptyComponent` rather than replacing the
+  // list, so the header portal, scroll binding and snap offsets all stay put.
+  // While loading the list is fed an empty `data` so that slot is the one that
+  // renders.
+  const placeholder = renderScreenPlaceholder({
+    loading,
+    LoadingComponent,
+    EmptyComponent,
+    isEmpty: !data || data.length === 0,
+  });
+
+  const jsScrollHandler = useAnimatedScrollHandler(
+    (event) => {
+      if (onScroll)
+        onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
+    },
+    [onScroll]
+  );
+
+  const composedHandler = useComposedEventHandler([
+    scrollHandler,
+    jsScrollHandler,
+  ]);
+
+  // A caller naming its own `bottomInset` has taken the bottom over entirely,
+  // and a horizontal list has no bottom edge to clear.
+  const needsBottomSafeArea = bottomInset === undefined && !horizontal;
+
+  const footerComponent = (
+    <>
+      {renderListHeader(ListFooterComponent)}
+      {needsBottomSafeArea ? <BottomSafeArea /> : null}
+    </>
+  );
+
+  const headerComponent = (
+    <>
+      {/* `headerWrapper`'s negative margin cancels the list's inherited
+          content padding for the portaled header (`LargeTitlePortalContent`
+          etc. manage their own horizontal padding) — a caller's own
+          `ListHeaderComponent` has no such self-padding, so it stays outside
+          this wrapper and gets the list's normal item padding instead. */}
+      <View style={styles.headerWrapper(resolvedMargins)}>
+        <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
+      </View>
+      {renderListHeader(ListHeaderComponent)}
+    </>
+  );
+
+  return (
+    <AnimatedComponent
+      ref={
+        isDefaultFlatList
+          ? (scrollRef as unknown as AnimatedRef<never>)
+          : undefined
+      }
+      data={loading ? [] : data}
+      renderItem={renderItem}
+      style={[{ backgroundColor: background }, style]}
+      horizontal={horizontal}
+      contentInsetAdjustmentBehavior={hasHeader ? 'never' : undefined}
+      contentContainerStyle={[
+        styles.content(resolvedMargins, hasHeader, bottomInset),
+        contentContainerStyle,
+      ]}
+      ListHeaderComponent={headerComponent}
+      ListFooterComponent={footerComponent}
+      ListEmptyComponent={placeholder ?? ListEmptyComponent}
+      showsVerticalScrollIndicator={false}
+      scrollEventThrottle={16}
+      snapToOffsets={headerSnapOffsets}
+      {...rest}
+      onScroll={composedHandler}
+    />
+  );
+}
+ScreenList.displayName = 'Screen.List';
+
+// `resolveScreenMargin` is called *inside* each dynamic function below, not
+// hoisted to the factory's top level — the Babel plugin only attributes a
+// runtime dependency (here, breakpoint) to a style key when the `rt`/
+// `runtime` read it derives from sits inside that key's own value. Hoisting
+// it would silently drop the dependency, so the margin would freeze at
+// whatever breakpoint was active on mount and never update on rotation.
+const styles = StyleSheet.create((theme, runtime) => ({
+  content: (
+    margins: ScreenMargins,
+    hasHeader: boolean,
+    bottomInset: number | undefined
+  ) => {
+    const { x: marginX, y: marginY } = resolveScreenMargin(
+      theme,
+      runtime.breakpoint
+    );
+    return {
+      flexGrow: 1,
+      // The header is absolutely positioned, so the list reserves its full
+      // height — bar plus top safe area. This assumes the scroll view does not
+      // also get UIKit's automatic inset adjustment: on a native tab screen
+      // that means `disableAutomaticContentInsets` on the tab, or the two
+      // insets are counted twice.
+      paddingTop:
+        (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
+        (hasYMargin(margins) ? marginY : 0),
+      paddingHorizontal: hasXMargin(margins) ? marginX : 0,
+      // The safe area is `BottomSafeArea`'s job; counting it here as well
+      // would leave a gap the height of the gesture bar.
+      paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
+    };
+  },
+  headerWrapper: (margins: ScreenMargins) => {
+    const { x: marginX } = resolveScreenMargin(theme, runtime.breakpoint);
+    return {
+      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
+    };
+  },
+}));

package/src/components/screen/ScreenScrollView.tsx

@@ -172,11 +172,17 @@ export function ScreenScrollView({
   );
 }
 
-const styles = StyleSheet.create((theme, rt) => {
-  const { x: marginX, y: marginY } = resolveScreenMargin(theme, rt.breakpoint);
-
-  return {
-    scrollContent: (hasHeader: boolean, margins: ScreenMargins) => ({
+const styles = StyleSheet.create((theme, rt) => ({
+  // `resolveScreenMargin` is called *inside* each dynamic function, not
+  // hoisted above `return` — the Babel plugin only attributes a runtime
+  // dependency (here, breakpoint) to a style key when the `rt` read it
+  // derives from sits inside that key's own value. Hoisting it to the
+  // factory's top level silently drops the dependency, so the margin would
+  // freeze at whatever breakpoint was active on mount and never update on
+  // rotation.
+  scrollContent: (hasHeader: boolean, margins: ScreenMargins) => {
+    const { y: marginY } = resolveScreenMargin(theme, rt.breakpoint);
+    return {
       flexGrow: 1,
       // The header inset and the safe area are structural — they apply
       // whether or not margins are on; the y margin stacks on top of them.
@@ -186,12 +192,15 @@ const styles = StyleSheet.create((theme, rt) => {
       // The safe area is `BottomSafeArea`'s job; counting it here as well
       // would leave a gap the height of the gesture bar.
       paddingBottom: hasYMargin(margins) ? marginY : 0,
-    }),
+    };
+  },
 
-    content: (horizontal: boolean, margins: ScreenMargins) => ({
+  content: (horizontal: boolean, margins: ScreenMargins) => {
+    const { x: marginX } = resolveScreenMargin(theme, rt.breakpoint);
+    return {
       flexGrow: 1,
       paddingHorizontal: hasXMargin(margins) ? marginX : 0,
       flexDirection: horizontal ? 'row' : 'column',
-    }),
-  };
-});
+    };
+  },
+}));

package/src/components/screen/index.ts

@@ -2,10 +2,10 @@ export type { ScreenHeaderProps, ScreenProps } from './Screen';
 export { Screen } from './Screen';
 export type { ScreenContextValue } from './ScreenContext';
 export { useScreen } from './ScreenContext';
-export type { ScreenFlashListProps } from './ScreenFlashList';
-export { ScreenFlashList } from './ScreenFlashList';
 export type { ScreenFlatListProps } from './ScreenFlatList';
 export { ScreenFlatList } from './ScreenFlatList';
+export type { ScreenListProps } from './ScreenList';
+export { ScreenList } from './ScreenList';
 export type { ScreenScrollViewProps } from './ScreenScrollView';
 export { ScreenScrollView } from './ScreenScrollView';
 export type { ScreenMargins, ScreenScrollableProps } from './types';

package/src/components/screen/types.ts

@@ -11,9 +11,8 @@ import type { ReactNode } from 'react';
 export type ScreenMargins = 'all' | 'x' | 'y' | 'none';
 
 /**
- * Props shared by `Screen.ScrollView`, `Screen.FlatList` and
- * `Screen.FlashList`, so a screen can swap one container for another without
- * relearning its API.
+ * Props shared by `Screen.ScrollView`, `Screen.FlatList` and `Screen.List`, so
+ * a screen can swap one container for another without relearning its API.
  */
 export interface ScreenScrollableProps {
   /** Lay content out along the x axis. Defaults to `false`. */

package/src/components/toast/Toast.tsx

@@ -150,7 +150,7 @@ const ToastRoot = forwardRef<ComponentRef<typeof View>, ToastProps>(
           p="4"
           row
           align="center"
-          gap="3"
+          gap="2"
           accessibilityRole={accessibilityRole}
           accessibilityLiveRegion="polite"
           borderWidth="hairline"
@@ -415,7 +415,7 @@ export function DefaultToast({
       {shouldRenderIcon ? (
         <Box alignSelf="start">{icon ?? <ToastIcon />}</Box>
       ) : null}
-      <Box flex={1} gap="1">
+      <Box flex={1} gap="0">
         {label ? <ToastTitle>{label}</ToastTitle> : null}
         {description ? (
           <ToastDescription>{description}</ToastDescription>

package/src/components/toolbar/Toolbar.tsx

@@ -310,6 +310,7 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: resolveThemeColor(background, theme),
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: theme.color['border.subtle'],
+    ...theme.elevation.xs,
   }),
   // Geometry is two finite axes, so it belongs in `variants` rather than in
   // conditionals: an icon-only cell is an exact square, a labelled one keeps the
@@ -333,6 +334,7 @@ const styles = StyleSheet.create((theme) => ({
           paddingHorizontal: 10,
           borderWidth: StyleSheet.hairlineWidth,
           borderColor: theme.color['border.subtle'],
+          ...theme.elevation.xs,
         },
       },
     },

package/src/theme/tokens/primitives.ts

@@ -326,20 +326,26 @@ export const primitives = {
   'elevation.none.shadowOffset.height': 0,
   'elevation.none.elevation': 0,
 
+  'elevation.xs.shadowOpacity': 0.03,
+  'elevation.xs.shadowRadius': 2,
+  'elevation.xs.shadowOffset.width': 0,
+  'elevation.xs.shadowOffset.height': 0.5,
+  'elevation.xs.elevation': 1,
+
   'elevation.sm.shadowOpacity': 0.1,
-  'elevation.sm.shadowRadius': 2,
+  'elevation.sm.shadowRadius': 4,
   'elevation.sm.shadowOffset.width': 0,
   'elevation.sm.shadowOffset.height': 1,
   'elevation.sm.elevation': 1,
 
   'elevation.md.shadowOpacity': 0.14,
-  'elevation.md.shadowRadius': 4,
+  'elevation.md.shadowRadius': 6,
   'elevation.md.shadowOffset.width': 0,
   'elevation.md.shadowOffset.height': 2,
   'elevation.md.elevation': 3,
 
   'elevation.lg.shadowOpacity': 0.16,
-  'elevation.lg.shadowRadius': 8,
+  'elevation.lg.shadowRadius': 12,
   'elevation.lg.shadowOffset.width': 0,
   'elevation.lg.shadowOffset.height': 4,
   'elevation.lg.elevation': 6,
@@ -460,11 +466,11 @@ export const primitives = {
   'layout.screen.margin.y.xs': 16,
   'layout.screen.margin.y.sm': 16,
   'layout.screen.margin.y.md': 24,
-  'layout.screen.margin.y.lg': 32,
-  'layout.screen.margin.y.xl': 48,
+  'layout.screen.margin.y.lg': 24,
+  'layout.screen.margin.y.xl': 24,
 
   // ── header layout ─────────────────────────────────────────────────────────
   // Header bar height (compact nav bar / collapsed large-title bar). 56dp aligns
   // to the 4dp spacing grid (= spacing.14) and a standard app-bar height.
-  'layout.header.height': 56,
+  'layout.header.height': 54,
 };

package/src/theme/types.ts

@@ -66,7 +66,7 @@ export interface ElevationStyle {
   elevation: number;
 }
 
-export type ElevationKey = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type ElevationKey = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type ElevationScale = Record<ElevationKey, ElevationStyle>;
 

package/lib/module/components/screen/ScreenFlashList.js

@@ -1,153 +0,0 @@
-"use strict";
-
-import { View } from "react-native-unistyles/components/native/View";
-import { FlashList } from '@shopify/flash-list';
-import Animated, { useAnimatedScrollHandler, useComposedEventHandler } from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { resolveScreenMargin } from "../../theme/screen-margin.js";
-import { PortalHost } from "../portal/index.js";
-import { BottomSafeArea } from "./parts/BottomSafeArea.js";
-import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder.js";
-import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext.js";
-import { hasXMargin, hasYMargin, renderListHeader } from "./utils.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
-/**
- * `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
- * screen's shared `scrollY`, hosts the portal target above the list, and
- * applies token-driven content padding.
- *
- * Requires `@shopify/flash-list` — it is a peer dependency of
- * `react-native-terra-ui` and must be installed in the consuming app.
- *
- * Note: unlike `Screen.FlatList`, this does not bind the screen's shared
- * imperative `scrollRef` — `FlashList`'s ref exposes a different (non
- * Reanimated-compatible) imperative API.
- *
- * Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
- * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
- * another without relearning its API.
- *
- * @example
- * ```tsx
- * <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
- * ```
- *
- * @example Loading and empty placeholders
- * ```tsx
- * <Screen.FlashList
- *   data={items}
- *   loading={isLoading}
- *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
- *   renderItem={({ item }) => <Row item={item} />}
- * />
- * ```
- */
-export function ScreenFlashList({
-  data,
-  style,
-  contentContainerStyle,
-  ListHeaderComponent,
-  ListFooterComponent,
-  ListEmptyComponent,
-  horizontal = false,
-  loading = false,
-  LoadingComponent,
-  EmptyComponent,
-  margins,
-  bottomInset,
-  onScroll,
-  ...rest
-}) {
-  if (FlashList == null) {
-    throw new Error('[react-native-terra-ui] Screen.FlashList requires "@shopify/flash-list" to be installed in your app. Run `yarn add @shopify/flash-list` (or the npm/pnpm equivalent) and rebuild.');
-  }
-  const {
-    background,
-    scrollHandler,
-    headerSnapOffsets,
-    margins: screenMargins,
-    hasHeader
-  } = useScreen();
-  const resolvedMargins = margins ?? screenMargins;
-  // The placeholder rides in on `ListEmptyComponent` rather than replacing the
-  // list, so the header portal and snap offsets stay put. While loading the
-  // list is fed an empty `data` so that slot is the one that renders.
-  const placeholder = renderScreenPlaceholder({
-    loading,
-    LoadingComponent,
-    EmptyComponent,
-    isEmpty: !data || data.length === 0
-  });
-  const jsScrollHandler = useAnimatedScrollHandler(event => {
-    if (onScroll) onScroll(event);
-  }, [onScroll]);
-  const composedHandler = useComposedEventHandler([scrollHandler, jsScrollHandler]);
-
-  // `AnimatedFlashList` is typed for `unknown` items, so the remaining props
-  // are cast back to its prop type — minus the ones set explicitly below,
-  // which the spread would otherwise re-supply.
-  const listProps = rest;
-
-  // A caller naming its own `bottomInset` has taken the bottom over entirely,
-  // and a horizontal list has no bottom edge to clear.
-  const needsBottomSafeArea = bottomInset === undefined && !horizontal;
-  const footerComponent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderListHeader(ListFooterComponent), needsBottomSafeArea ? /*#__PURE__*/_jsx(BottomSafeArea, {}) : null]
-  });
-  const headerComponent = /*#__PURE__*/_jsxs(View, {
-    style: styles.headerWrapper(resolvedMargins),
-    children: [/*#__PURE__*/_jsx(PortalHost, {
-      name: SCREEN_HEADER_PORTAL_HOST
-    }), renderListHeader(ListHeaderComponent)]
-  });
-  return /*#__PURE__*/_jsx(AnimatedFlashList, {
-    data: loading ? [] : data,
-    style: [{
-      backgroundColor: background
-    }, style],
-    horizontal: horizontal,
-    contentInsetAdjustmentBehavior: hasHeader ? 'never' : undefined,
-    contentContainerStyle: [styles.content(resolvedMargins, hasHeader, bottomInset), contentContainerStyle],
-    ListHeaderComponent: headerComponent,
-    ListFooterComponent: footerComponent,
-    ListEmptyComponent: placeholder ?? ListEmptyComponent,
-    showsVerticalScrollIndicator: false,
-    scrollEventThrottle: 16,
-    snapToOffsets: headerSnapOffsets,
-    ...listProps,
-    onScroll: composedHandler
-  });
-}
-const styles = StyleSheet.create((theme, runtime) => {
-  const {
-    x: marginX,
-    y: marginY
-  } = resolveScreenMargin(theme, runtime.breakpoint);
-  return {
-    content: (margins, hasHeader, bottomInset) => {
-      return {
-        flexGrow: 1,
-        // The header is absolutely positioned, so the list reserves its full
-        // height — bar plus top safe area. This assumes the scroll view does not
-        // also get UIKit's automatic inset adjustment: on a native tab screen
-        // that means `disableAutomaticContentInsets` on the tab, or the two
-        // insets are counted twice.
-        paddingTop: (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) + (hasYMargin(margins) ? marginY : 0),
-        paddingHorizontal: hasXMargin(margins) ? marginX : 0,
-        // The safe area is `BottomSafeArea`'s job; counting it here as well
-        // would leave a gap the height of the gesture bar.
-        paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
-        uni__dependencies: [0, 9]
-      };
-    },
-    safeArea: {
-      height: runtime.insets.top,
-      uni__dependencies: [9]
-    },
-    headerWrapper: margins => ({
-      marginHorizontal: hasXMargin(margins) ? -marginX : 0
-    })
-  };
-});
-//# sourceMappingURL=ScreenFlashList.js.map

package/lib/module/components/screen/ScreenFlashList.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FlashList","Animated","useAnimatedScrollHandler","useComposedEventHandler","StyleSheet","resolveScreenMargin","PortalHost","BottomSafeArea","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasXMargin","hasYMargin","renderListHeader","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedFlashList","createAnimatedComponent","ScreenFlashList","data","style","contentContainerStyle","ListHeaderComponent","ListFooterComponent","ListEmptyComponent","horizontal","loading","LoadingComponent","EmptyComponent","margins","bottomInset","onScroll","rest","Error","background","scrollHandler","headerSnapOffsets","screenMargins","hasHeader","resolvedMargins","placeholder","isEmpty","length","jsScrollHandler","event","composedHandler","listProps","needsBottomSafeArea","undefined","footerComponent","children","headerComponent","View","styles","headerWrapper","name","backgroundColor","contentInsetAdjustmentBehavior","content","showsVerticalScrollIndicator","scrollEventThrottle","snapToOffsets","create","theme","runtime","x","marginX","y","marginY","breakpoint","flexGrow","paddingTop","layout","header","height","insets","top","paddingHorizontal","paddingBottom","uni__dependencies","safeArea","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenFlashList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/screen/ScreenFlashList.d.ts

@@ -1,43 +0,0 @@
-import { type FlashListProps } from '@shopify/flash-list';
-import type { ScreenScrollableProps } from './types.js';
-export interface ScreenFlashListProps<T> extends Omit<FlashListProps<T>, 'horizontal'>, ScreenScrollableProps {
-    /**
-     * Extra bottom padding on the list content — clearance for a tab bar or home
-     * indicator. Defaults to the `layout.screen.margin.y` token when margins are
-     * enabled, otherwise `0`.
-     */
-    bottomInset?: number;
-}
-/**
- * `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
- * screen's shared `scrollY`, hosts the portal target above the list, and
- * applies token-driven content padding.
- *
- * Requires `@shopify/flash-list` — it is a peer dependency of
- * `react-native-terra-ui` and must be installed in the consuming app.
- *
- * Note: unlike `Screen.FlatList`, this does not bind the screen's shared
- * imperative `scrollRef` — `FlashList`'s ref exposes a different (non
- * Reanimated-compatible) imperative API.
- *
- * Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
- * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
- * another without relearning its API.
- *
- * @example
- * ```tsx
- * <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
- * ```
- *
- * @example Loading and empty placeholders
- * ```tsx
- * <Screen.FlashList
- *   data={items}
- *   loading={isLoading}
- *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
- *   renderItem={({ item }) => <Row item={item} />}
- * />
- * ```
- */
-export declare function ScreenFlashList<T>({ data, style, contentContainerStyle, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal, loading, LoadingComponent, EmptyComponent, margins, bottomInset, onScroll, ...rest }: ScreenFlashListProps<T>): import("react").JSX.Element;
-//# sourceMappingURL=ScreenFlashList.d.ts.map

package/lib/typescript/src/components/screen/ScreenFlashList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScreenFlashList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenFlashList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAmBrE,OAAO,KAAK,EAAiB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAOpE,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAC3C,qBAAqB;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,IAAI,EACJ,KAAK,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,UAAkB,EAClB,OAAe,EACf,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,WAAW,EACX,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BAkFzB"}