@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/views/ListViewV2.context.js

@@ -1,52 +1,96 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { createContext, useContext, useMemo, useState } from "react";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 const Context = createContext(null);
-export function ListViewProvider({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, children, }) {
-    const [showRefreshing, setShowRefreshing] = useState(false);
-    const value = useMemo(() => ({
-        name,
-        description,
-        items,
-        isLoading,
-        hasError,
-        errorMessage,
-        readonly,
-        showRefreshing,
-        setShowRefreshing,
-        onRefresh,
-        onRetry,
-        onPressItem,
-        onDeleteItem,
-        onSearch,
-        onBack,
-        onLoadMore,
-        loadingMore,
-        hasMore,
-    }), [
-        name,
-        description,
-        items,
-        isLoading,
-        hasError,
-        errorMessage,
-        readonly,
-        showRefreshing,
-        onRefresh,
-        onRetry,
-        onPressItem,
-        onDeleteItem,
-        onSearch,
-        onBack,
-        onLoadMore,
-        loadingMore,
-        hasMore,
-    ]);
-    return _jsx(Context.Provider, { value: value, children: children });
+export function ListViewProvider(t0) {
+  const $ = _c(21);
+  const {
+    name,
+    description,
+    items,
+    isLoading: t1,
+    hasError: t2,
+    errorMessage,
+    readonly: t3,
+    onRefresh,
+    onRetry,
+    onPressItem,
+    onDeleteItem,
+    onSearch,
+    onBack,
+    onLoadMore,
+    loadingMore: t4,
+    hasMore: t5,
+    children
+  } = t0;
+  const isLoading = t1 === undefined ? false : t1;
+  const hasError = t2 === undefined ? false : t2;
+  const readonly = t3 === undefined ? false : t3;
+  const loadingMore = t4 === undefined ? false : t4;
+  const hasMore = t5 === undefined ? true : t5;
+  const [showRefreshing, setShowRefreshing] = useState(false);
+  let t6;
+  if ($[0] !== description || $[1] !== errorMessage || $[2] !== hasError || $[3] !== hasMore || $[4] !== isLoading || $[5] !== items || $[6] !== loadingMore || $[7] !== name || $[8] !== onBack || $[9] !== onDeleteItem || $[10] !== onLoadMore || $[11] !== onPressItem || $[12] !== onRefresh || $[13] !== onRetry || $[14] !== onSearch || $[15] !== readonly || $[16] !== showRefreshing) {
+    t6 = {
+      name,
+      description,
+      items,
+      isLoading,
+      hasError,
+      errorMessage,
+      readonly,
+      showRefreshing,
+      setShowRefreshing,
+      onRefresh,
+      onRetry,
+      onPressItem,
+      onDeleteItem,
+      onSearch,
+      onBack,
+      onLoadMore,
+      loadingMore,
+      hasMore
+    };
+    $[0] = description;
+    $[1] = errorMessage;
+    $[2] = hasError;
+    $[3] = hasMore;
+    $[4] = isLoading;
+    $[5] = items;
+    $[6] = loadingMore;
+    $[7] = name;
+    $[8] = onBack;
+    $[9] = onDeleteItem;
+    $[10] = onLoadMore;
+    $[11] = onPressItem;
+    $[12] = onRefresh;
+    $[13] = onRetry;
+    $[14] = onSearch;
+    $[15] = readonly;
+    $[16] = showRefreshing;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const value = t6;
+  let t7;
+  if ($[18] !== children || $[19] !== value) {
+    t7 = _jsx(Context.Provider, {
+      value: value,
+      children: children
+    });
+    $[18] = children;
+    $[19] = value;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  return t7;
 }
 export function useListView() {
-    const context = useContext(Context);
-    if (!context) {
-        throw new Error("useListView must be used within ListViewV2");
-    }
-    return context;
+  const context = useContext(Context);
+  if (!context) {
+    throw new Error("useListView must be used within ListViewV2");
+  }
+  return context;
 }

package/dist/views/ListViewV2.d.ts

@@ -1,11 +1,12 @@
-import { type FlashListProps, type FlashListRef } from "@shopify/flash-list";
+import { FilterChip } from "../Actions/Actions.FilterButton.js";
 import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
+import type { SafeAreaEdge } from "../layouts/edges.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import type { SearchBarProps } from "../Navigation/Navigation.SearchBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
 import { type IRowItem } from "./types/IListView.js";
-import React, { ReactNode, type Ref } from "react";
+import { ReactNode, type Ref } from "react";
 import { type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
-import type { Edge } from "react-native-safe-area-context";
 interface ListViewProps<T> {
     name: string;
     description?: string;
@@ -28,11 +29,11 @@ interface ListViewProps<T> {
     hasMore?: boolean;
     backgroundColor?: string;
     withContainer?: boolean;
-    edges?: Edge[];
+    edges?: SafeAreaEdge[];
     children: ReactNode;
 }
 export declare function refreshListData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, backgroundColor, withContainer, edges, children, }: ListViewProps<T>): React.JSX.Element;
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, backgroundColor, withContainer, edges, children, }: ListViewProps<T>): import("react").JSX.Element;
 interface HeaderProps {
     /** Reserve the top inset; disable when the host already handles it. */
     safeArea?: boolean;
@@ -55,60 +56,96 @@ interface HeaderProps {
      */
     topSpacing?: number;
 }
-declare function Header({ safeArea, variant, tone, actions, children, background, topSpacing, }: HeaderProps): React.JSX.Element;
-declare function HeaderSearch({ searchQuery }: {
+declare function Header({ safeArea, variant, tone, actions, children, background, topSpacing, }: HeaderProps): import("react").JSX.Element;
+declare function HeaderSearch({ searchQuery, textVariant, }: {
     searchQuery?: string;
-}): React.JSX.Element | null;
+    /** Typography variant of the query; see `Navigation.SearchBar` (defaults to 17). */
+    textVariant?: SearchBarProps["textVariant"];
+}): import("react").JSX.Element | null;
 declare function HeaderActions({ children }: {
     children: ReactNode;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 /** Secondary action bar docked below the AppBar — use for Save/Cancel, filter chips, etc. */
 declare function HeaderActionsBar({ children }: {
     children: ReactNode;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * Tab-like segmented switch for the header subheader (e.g. "Activos" / "Archivados").
  * Use as a child of `<ListViewV2.Header>` — it lands in the AppBar subheader slot.
  */
-declare function HeaderSegmented<T extends string>(props: SegmentedControlProps<T>): React.JSX.Element;
+declare function HeaderSegmented<T extends string>(props: SegmentedControlProps<T>): import("react").JSX.Element;
 /**
  * Recent-searches list. Render as a SIBLING of the Header (like Filters/ActionsBar) —
  * typically while the search query is empty. Delegates to `Display.SearchHistory`.
  */
-declare function HeaderSearchHistory(props: SearchHistoryProps): React.JSX.Element;
+declare function HeaderSearchHistory(props: SearchHistoryProps): import("react").JSX.Element;
 declare function HeaderFilters({ children }: {
     children: ReactNode;
-}): React.JSX.Element;
-interface FilterChipProps {
-    label: string;
-    active?: boolean;
-    onPress: () => void;
-}
-declare function FilterChip({ label, active, onPress }: FilterChipProps): React.JSX.Element;
+}): import("react").JSX.Element;
 declare function FilterChips({ children }: {
     children: ReactNode;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 type ListScrollProps = Pick<ScrollViewProps, "keyboardShouldPersistTaps" | "keyboardDismissMode" | "testID">;
-export type ListViewVirtualizationProps<T = unknown> = Pick<FlashListProps<IRowItem<T>>, "drawDistance" | "maxItemsInRecyclePool" | "getItemType" | "extraData" | "initialScrollIndex" | "initialScrollIndexParams" | "onViewableItemsChanged" | "viewabilityConfig" | "viewabilityConfigCallbackPairs" | "onEndReachedThreshold" | "maintainVisibleContentPosition">;
-interface ListContentOptions<T> {
-    listProps?: ListViewVirtualizationProps<T>;
-    listRef?: Ref<FlashListRef<IRowItem<T>>>;
-    contentContainerStyle?: StyleProp<ViewStyle>;
+/** A row on screen, as the screen knows it: the original item and its position. */
+export interface ListViewVisibleRow<T> {
+    item: T;
+    index: number;
 }
-declare function ContentList<T = unknown>({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
-    children?: (item: T, row: IRowItem<T>) => ReactNode;
-    contentWithMargin: boolean;
-} & ListScrollProps & ListContentOptions<T>): React.JSX.Element;
-declare function Content<T = unknown>({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
+/**
+ * Recycling and viewport options in the DS vocabulary. The engine behind them
+ * (FlashList v2 today) can change without touching a screen.
+ */
+export interface ListViewTuning<T> {
+    /** Pixels rendered ahead of the viewport. Raise it only if fast flings show blank rows. */
+    drawDistance?: number;
+    /**
+     * Rows with different layouts (header row, card, compact) return different types so
+     * the engine recycles each one into a view with the same shape.
+     */
+    rowType?: (item: T, index: number) => string | number;
+    /** A value outside `items` that changes how rows look (selection, mode). */
+    extraData?: unknown;
+    /** Row the list opens at. */
+    initialIndex?: number;
+    /** Distance to the end, in viewport heights, that triggers `onLoadMore`. Default 0.5. */
+    loadMoreThreshold?: number;
+    /** Keep the rows on screen in place when items are added above them (chat, timeline). */
+    keepVisiblePosition?: boolean;
+    /**
+     * Rows that became visible, with the original items. Pass it from the first render:
+     * the engine wires viewability once.
+     */
+    onVisibleRowsChange?: (rows: ListViewVisibleRow<T>[]) => void;
+    /** Percent of a row that must be on screen to count as visible. */
+    visiblePercent?: number;
+}
+export interface ListViewScrollOptions {
+    /** Default true. */
+    animated?: boolean;
+}
+/** Imperative scroll for `ListViewV2.Content ref`. Calls are ignored while no list is shown. */
+export interface ListViewHandle {
+    scrollToIndex(index: number, options?: ListViewScrollOptions & {
+        position?: "start" | "center" | "end";
+    }): Promise<void>;
+    scrollToTop(options?: ListViewScrollOptions): void;
+    scrollToEnd(options?: ListViewScrollOptions): void;
+}
+interface ContentProps<T> extends ListScrollProps {
+    /** Custom row renderer. Keep it stable with `useCallback`; rows go in `memo`. */
     children?: (item: T, row: IRowItem<T>) => ReactNode;
     withMargin?: boolean;
-} & ListScrollProps & ListContentOptions<T>): React.JSX.Element;
+    tuning?: ListViewTuning<T>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    ref?: Ref<ListViewHandle>;
+}
+declare function Content<T = unknown>({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, tuning, contentContainerStyle, ref, }: ContentProps<T>): import("react").JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
-}): React.JSX.Element | null;
+}): import("react").JSX.Element | null;
 declare function FloatingButton({ children }: {
     children: ReactNode;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 interface RowRootProps {
     children: ReactNode;
     onPress?: () => void;
@@ -117,45 +154,49 @@ interface RowRootProps {
     style?: StyleProp<ViewStyle>;
     backgroundColor?: string;
 }
-declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): React.JSX.Element;
+declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): import("react").JSX.Element;
 interface RowAvatarProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowAvatar({ children, style }: RowAvatarProps): React.JSX.Element;
+declare function RowAvatar({ children, style }: RowAvatarProps): import("react").JSX.Element;
 interface RowContentProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowContent({ children, style }: RowContentProps): React.JSX.Element;
+declare function RowContent({ children, style }: RowContentProps): import("react").JSX.Element;
 interface RowTitleProps {
     children: ReactNode;
     badge?: ReactNode;
     rightComponent?: ReactNode;
     numberOfLines?: number;
 }
-declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): React.JSX.Element;
+declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): import("react").JSX.Element;
 interface RowSubtitleProps {
     children: ReactNode;
     className?: string;
 }
-declare function RowSubtitle({ children, className }: RowSubtitleProps): React.JSX.Element;
+declare function RowSubtitle({ children, className }: RowSubtitleProps): import("react").JSX.Element;
 interface RowFooterProps {
     left?: ReactNode;
     right?: ReactNode;
     children?: ReactNode;
 }
-declare function RowFooter({ left, right, children }: RowFooterProps): React.JSX.Element;
+declare function RowFooter({ left, right, children }: RowFooterProps): import("react").JSX.Element;
 interface RowActionsProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowActions({ children, style }: RowActionsProps): React.JSX.Element;
+declare function RowActions({ children, style }: RowActionsProps): import("react").JSX.Element;
 interface RowActionButtonProps {
     icon: ReactNode;
     onPress?: () => void;
+    /** What the action does, read by screen readers, e.g. "Más opciones". */
+    accessibilityLabel?: string;
+    testID?: string;
 }
-declare function RowActionButton({ icon, onPress }: RowActionButtonProps): React.JSX.Element;
+/** Compact icon action inside a row. */
+declare function RowActionButton({ icon, onPress, accessibilityLabel, testID, }: RowActionButtonProps): import("react").JSX.Element;
 /**
  * Screen container for a collection (list / index / search results).
  * Owns safe-area, the FlashList (pagination + pull-to-refresh), record count, and the
@@ -169,7 +210,8 @@ declare function RowActionButton({ icon, onPress }: RowActionButtonProps): React
  *     .Header.Segmented          — tab-like switch in the subheader (Activos / Archivados)
  *     .Header.Filters(.Chips/.Chip) — horizontal filter pills (SIBLING below the header)
  *     .Header.ActionsBar         — SIBLING bar below the header (bulk select, etc.)
- *   ListViewV2.Content           — FlashList body; `children` is an optional custom row renderer
+ *   ListViewV2.Content           — virtualized body; `children` is an optional custom row renderer,
+ *                                  `tuning` the recycling options, `ref` a `ListViewHandle`
  *     .Content.Row(.Avatar/.Content/.Title/.Subtitle/.Footer/.Actions/.ActionButton)
  *   ListViewV2.Footer        — pinned footer (hidden when empty)
  *   ListViewV2.FloatingButton — absolute FAB overlay
@@ -188,7 +230,6 @@ export declare const ListViewV2: {
         };
     };
     Content: typeof Content & {
-        List: typeof ContentList;
         Row: typeof RowRoot & {
             Avatar: typeof RowAvatar;
             Content: typeof RowContent;