@pallasoft/ps-mobile-components 1.4.0 → 1.6.0

package/dist/components/ps-infinite-list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-infinite-list';
+export * from './ps-infinite-list-props';

package/dist/components/ps-infinite-list/index.js

@@ -0,0 +1,2 @@
+export * from './ps-infinite-list';
+export * from './ps-infinite-list-props';

package/dist/components/ps-infinite-list/ps-infinite-list-footer.d.ts

@@ -0,0 +1,2 @@
+import type { PsInfiniteListFooterProps } from './ps-infinite-list-props';
+export declare const PsInfiniteListFooter: ({ isLoadingMore }: PsInfiniteListFooterProps) => import("react").JSX.Element | null;

package/dist/components/ps-infinite-list/ps-infinite-list-footer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+export const PsInfiniteListFooter = ({ isLoadingMore }) => isLoadingMore ? (_jsx(View, { style: { alignItems: 'center', paddingVertical: PsLayoutConfig.gutter }, testID: 'ps-infinite-list-loading-more', children: _jsx(PsSpinner, {}) })) : null;

package/dist/components/ps-infinite-list/ps-infinite-list-item.d.ts

@@ -0,0 +1,2 @@
+import type { PsInfiniteListItemProps } from './ps-infinite-list-props';
+export declare const PsInfiniteListItem: ({ children, count, index }: PsInfiniteListItemProps) => import("react").JSX.Element;

package/dist/components/ps-infinite-list/ps-infinite-list-item.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsInfiniteListService } from '../../services/ps-infinite-list-service';
+export const PsInfiniteListItem = ({ children, count, index }) => {
+    const theme = usePsMobileTheme();
+    return (_jsxs(View, { style: PsInfiniteListService.itemFrame(theme, index, count), children: [index === 0 ? null : _jsx(View, { style: PsInfiniteListService.divider(theme) }), children] }));
+};

package/dist/components/ps-infinite-list/ps-infinite-list-props.d.ts

@@ -0,0 +1,34 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsListVariant } from '../../services/ps-list-service';
+import type { PsListSkeletonLayout } from '../ps-list/ps-list-props';
+export interface PsInfiniteSection<T> {
+    data: T[];
+    footer?: string;
+    key: string;
+    title?: string;
+}
+export interface PsInfiniteListProps<T> {
+    empty?: ReactNode;
+    hasMore: boolean;
+    header?: ReactNode;
+    isLoading?: boolean;
+    isLoadingMore?: boolean;
+    items?: T[];
+    keyExtractor: (item: T) => string;
+    onEndReached: () => void;
+    onRefresh?: () => Promise<void>;
+    renderItem: (item: T) => ReactElement;
+    sections?: PsInfiniteSection<T>[];
+    skeleton?: PsListSkeletonLayout;
+    style?: StyleProp<ViewStyle>;
+    variant?: PsListVariant;
+}
+export interface PsInfiniteListFooterProps {
+    isLoadingMore: boolean;
+}
+export interface PsInfiniteListItemProps {
+    children: ReactElement;
+    count: number;
+    index: number;
+}

package/dist/components/ps-infinite-list/ps-infinite-list-props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ps-infinite-list/ps-infinite-list.d.ts

@@ -0,0 +1,2 @@
+import type { PsInfiniteListProps } from './ps-infinite-list-props';
+export declare const PsInfiniteList: <T>({ empty, hasMore, header, isLoading, isLoadingMore, items, keyExtractor, onEndReached, onRefresh, renderItem, sections, skeleton, style, variant, }: PsInfiniteListProps<T>) => import("react").JSX.Element;

package/dist/components/ps-infinite-list/ps-infinite-list.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Platform, RefreshControl, SectionList, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsInfiniteConfig } from '../../constants/ps-infinite-config';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsSelectionBarConfig } from '../../constants/ps-selection-bar-config';
+import { PsScrollContext } from '../../contexts/ps-scroll-context';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { usePsRefresh } from '../../hooks/use-ps-refresh';
+import { usePsScrollHost } from '../../hooks/use-ps-scroll-host';
+import { usePsTabBar } from '../../hooks/use-ps-tab-bar';
+import { usePsTopInset } from '../../hooks/use-ps-top-inset';
+import { PsInfiniteListService } from '../../services/ps-infinite-list-service';
+import { PsListService } from '../../services/ps-list-service';
+import { PsScreenService } from '../../services/ps-screen-service';
+import { PsSkeletonList } from '../ps-skeleton/ps-skeleton-list';
+import { PsText } from '../ps-text/ps-text';
+import { PsInfiniteListFooter } from './ps-infinite-list-footer';
+import { PsInfiniteListItem } from './ps-infinite-list-item';
+export const PsInfiniteList = ({ empty, hasMore, header, isLoading = false, isLoadingMore = false, items, keyExtractor, onEndReached, onRefresh, renderItem, sections, skeleton, style, variant = 'grouped', }) => {
+    const theme = usePsMobileTheme();
+    const insets = useSafeAreaInsets();
+    const topInset = usePsTopInset();
+    const { hasTabBar, isHidden: isTabBarHidden } = usePsTabBar();
+    const { isRefreshing, refresh } = usePsRefresh(onRefresh);
+    const host = usePsScrollHost();
+    const shown = isLoading ? [] : PsInfiniteListService.sections(items, sections);
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(PsScrollContext, { value: host.context, children: _jsx(SectionList, { ListEmptyComponent: isLoading ? _jsx(PsSkeletonList, { layout: skeleton }) : _jsx(_Fragment, { children: empty }), ListFooterComponent: _jsx(PsInfiniteListFooter, { isLoadingMore: isLoadingMore }), ListHeaderComponent: header === undefined ? undefined : (_jsx(View, { style: { marginBottom: PsLayoutConfig.listGap }, children: header })), contentContainerStyle: PsScreenService.content({
+                        bottom: PsScreenService.bottomInset(insets.bottom, hasTabBar, isTabBarHidden),
+                        top: topInset,
+                    }, Platform.OS === 'ios', PsListService.hasGutter(variant), 0, isTabBarHidden ? PsSelectionBarConfig.height : 0), contentInsetAdjustmentBehavior: 'automatic', initialNumToRender: PsInfiniteConfig.initialNumToRender, keyExtractor: keyExtractor, keyboardDismissMode: 'interactive', keyboardShouldPersistTaps: 'handled', maxToRenderPerBatch: PsInfiniteConfig.maxToRenderPerBatch, onContentSizeChange: host.onContentSizeChange, onEndReached: () => {
+                        if (PsInfiniteListService.shouldLoadMore(hasMore, isLoading, isLoadingMore))
+                            onEndReached();
+                    }, onEndReachedThreshold: PsInfiniteConfig.endReachedThreshold, onLayout: host.onLayout, onScroll: host.onScroll, refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], onRefresh: () => void refresh(), progressBackgroundColor: theme.surface, refreshing: isRefreshing, tintColor: theme.primary })), renderItem: ({ index, item, section }) => (_jsx(PsInfiniteListItem, { count: section.data.length, index: index, children: renderItem(item) })), renderSectionFooter: ({ section }) => (_jsx(View, { style: {
+                            gap: PsLayoutConfig.listSectionGap,
+                            paddingBottom: section === shown[shown.length - 1] ? 0 : PsLayoutConfig.listGap,
+                            paddingTop: section.footer === undefined ? 0 : PsLayoutConfig.listSectionGap,
+                        }, children: section.footer === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: section.footer })) })), renderSectionHeader: ({ section }) => section.title === undefined ? null : (_jsx(View, { style: { paddingBottom: PsLayoutConfig.listSectionGap }, children: _jsx(PsText, { accessibilityRole: 'header', tone: 'muted', variant: 'label', children: section.title }) })), scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, sections: shown, showsVerticalScrollIndicator: false, stickySectionHeadersEnabled: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-infinite-list', windowSize: PsInfiniteConfig.windowSize }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [PsScreenService.statusBarScrim(topInset), { backgroundColor: theme.background }], testID: 'ps-infinite-list-status-bar-scrim' }))] }));
+};

package/dist/components/ps-list/ps-list-action-row.d.ts

@@ -1,2 +1,2 @@
 import type { PsListActionRowProps } from './ps-list-props';
-export declare const PsListActionRow: ({ children, iconKey, isDisabled, onPress, tone, }: PsListActionRowProps) => import("react").JSX.Element;
+export declare const PsListActionRow: ({ children, iconKey, isDisabled, isExternal, onPress, tone, }: PsListActionRowProps) => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-action-row.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
 import { Pressable } from 'react-native';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
@@ -8,11 +9,11 @@ import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
-export const PsListActionRow = ({ children, iconKey, isDisabled = false, onPress, tone = 'primary', }) => {
+export const PsListActionRow = ({ children, iconKey, isDisabled = false, isExternal = false, onPress, tone = 'primary', }) => {
     const theme = usePsMobileTheme();
     const isDestructive = tone === 'destructive';
     const color = isDestructive ? theme.danger : theme.ink;
-    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, isDestructive ? PsRippleKind.Danger : PsRippleKind.Surface), accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, isDestructive ? PsRippleKind.Danger : PsRippleKind.Surface), accessibilityRole: isExternal ? 'link' : 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, onPress: onPress, style: ({ pressed }) => ({
             alignItems: 'center',
             backgroundColor: pressed ? PsStateService.pressedFill(theme, theme.surface) : theme.surface,
             flexDirection: 'row',
@@ -20,5 +21,5 @@ export const PsListActionRow = ({ children, iconKey, isDisabled = false, onPress
             minHeight: PsLayoutConfig.rowMinHeight,
             opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
             paddingHorizontal: PsLayoutConfig.gutter,
-        }), testID: 'ps-list-action-row', children: [iconKey === undefined ? null : _jsx(PsIcon, { color: color, iconKey: iconKey }), _jsx(PsText, { style: { color }, weight: 'semibold', children: children })] }));
+        }), testID: 'ps-list-action-row', children: [iconKey === undefined ? null : _jsx(PsIcon, { color: color, iconKey: iconKey }), _jsx(PsText, { style: { color, flex: 1 }, weight: 'semibold', children: children }), isExternal ? (_jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ExternalLink, size: PsMobileControlConfig.iconSizeInline })) : null] }));
 };

package/dist/components/ps-list/ps-list-link-row-props.d.ts

@@ -4,6 +4,7 @@ export interface PsListLinkRowProps {
     countLabel?: string;
     iconKey: PsMobileIconKey;
     isAlert?: boolean;
+    isExternal?: boolean;
     isLoading?: boolean;
     onPress: () => void;
     subtitle?: string;

package/dist/components/ps-list/ps-list-link-row.d.ts

@@ -1,2 +1,2 @@
 import type { PsListLinkRowProps } from './ps-list-link-row-props';
-export declare const PsListLinkRow: ({ count, countLabel, iconKey, isAlert, isLoading, onPress, subtitle, title, }: PsListLinkRowProps) => import("react").JSX.Element;
+export declare const PsListLinkRow: ({ count, countLabel, iconKey, isAlert, isExternal, isLoading, onPress, subtitle, title, }: PsListLinkRowProps) => import("react").JSX.Element;

package/dist/components/ps-list/ps-list-link-row.js

@@ -12,13 +12,13 @@ import { PsCountBadge } from '../ps-count-badge/ps-count-badge';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 import { PsListLinkRowSkeleton } from './ps-list-link-row-skeleton';
-export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isLoading = false, onPress, subtitle, title, }) => {
+export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isExternal = false, isLoading = false, onPress, subtitle, title, }) => {
     const theme = usePsMobileTheme();
     const haptic = usePsHaptics();
     if (isLoading)
         return _jsx(PsListLinkRowSkeleton, {});
     const hasCount = count !== undefined && count > 0;
-    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityHint: countLabel, accessibilityRole: 'button', onPress: () => {
+    return (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityHint: countLabel, accessibilityRole: isExternal ? 'link' : 'button', onPress: () => {
             haptic('light');
             onPress();
         }, style: ({ pressed }) => ({
@@ -36,5 +36,5 @@ export const PsListLinkRow = ({ count, countLabel, iconKey, isAlert = false, isL
                     height: PsLayoutConfig.linkRowIconBox,
                     justifyContent: 'center',
                     width: PsLayoutConfig.linkRowIconBox,
-                }, children: _jsx(PsIcon, { color: theme.primaryText, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
+                }, children: _jsx(PsIcon, { color: theme.primaryText, iconKey: iconKey, size: PsLayoutConfig.linkRowIconSize }) }), _jsxs(View, { style: { flex: 1, gap: PsLayoutConfig.rowLineGap }, children: [_jsx(PsText, { numberOfLines: 1, weight: 'semibold', children: title }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'small', children: subtitle }))] }), hasCount ? _jsx(PsCountBadge, { count: count, isAlert: isAlert, label: countLabel }) : null, _jsx(PsIcon, { color: theme.muted, iconKey: isExternal ? PsIconKey.ExternalLink : PsIconKey.ChevronRight, size: PsMobileControlConfig.iconSizeInline })] }));
 };

package/dist/components/ps-list/ps-list-props.d.ts

@@ -66,6 +66,7 @@ export interface PsListActionRowProps {
     children: string;
     iconKey?: PsIconKey;
     isDisabled?: boolean;
+    isExternal?: boolean;
     onPress?: () => void;
     tone?: 'primary' | 'destructive';
 }

package/dist/constants/ps-infinite-config.d.ts

@@ -0,0 +1,6 @@
+export declare const PsInfiniteConfig: {
+    readonly endReachedThreshold: 1.5;
+    readonly initialNumToRender: 12;
+    readonly maxToRenderPerBatch: 12;
+    readonly windowSize: 9;
+};

package/dist/constants/ps-infinite-config.js

@@ -0,0 +1,6 @@
+export const PsInfiniteConfig = {
+    endReachedThreshold: 1.5,
+    initialNumToRender: 12,
+    maxToRenderPerBatch: 12,
+    windowSize: 9,
+};

package/dist/constants/ps-mobile-icon-key.d.ts

@@ -22,6 +22,7 @@ export declare const PsMobileIconKey: {
     readonly Doc: "doc";
     readonly Download: "download";
     readonly Expand: "expand";
+    readonly ExternalLink: "external-link";
     readonly Eye: "eye";
     readonly EyeOff: "eye-off";
     readonly File: "file";

package/dist/constants/ps-sf-symbol-config.d.ts

@@ -22,6 +22,7 @@ export declare const PsSfSymbolConfig: {
         doc: "doc.text";
         download: "arrow.down.circle";
         expand: "arrow.up.left.and.arrow.down.right";
+        'external-link': "arrow.up.right.square";
         eye: "eye";
         'eye-off': "eye.slash";
         file: "doc";

package/dist/constants/ps-sf-symbol-config.js

@@ -22,6 +22,7 @@ export const PsSfSymbolConfig = {
         'doc': 'doc.text',
         'download': 'arrow.down.circle',
         'expand': 'arrow.up.left.and.arrow.down.right',
+        'external-link': 'arrow.up.right.square',
         'eye': 'eye',
         'eye-off': 'eye.slash',
         'file': 'doc',

package/dist/hooks/use-ps-infinite-data.d.ts

@@ -0,0 +1,3 @@
+import type { PsInfiniteDataOptions } from '../interfaces/ps-infinite-data-options';
+import type { PsInfiniteDataResult } from '../interfaces/ps-infinite-data-result';
+export declare const usePsInfiniteData: <T>({ getKey, isEnabled, key, loadPage, onSettled, onWriteFailed, refreshKey, }: PsInfiniteDataOptions<T>) => PsInfiniteDataResult<T>;

package/dist/hooks/use-ps-infinite-data.js

@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePsChangeQueue, usePsOptimisticRows } from '@pallasoft/ps-utilities/react';
+import { PsInfiniteDataService } from '../services/ps-infinite-data-service';
+export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onSettled, onWriteFailed, refreshKey, }) => {
+    const [state, setState] = useState(() => PsInfiniteDataService.initial());
+    const [isSaving, setIsSaving] = useState(false);
+    const isSavingRef = useRef(false);
+    const submittedRef = useRef(0);
+    const stateRef = useRef(state);
+    const committedRef = useRef([]);
+    const versionRef = useRef(0);
+    const latestRef = useRef({ getKey, loadPage, onSettled, onWriteFailed });
+    useEffect(() => {
+        latestRef.current = { getKey, loadPage, onSettled, onWriteFailed };
+    });
+    const commit = useCallback((next) => {
+        stateRef.current = next(stateRef.current);
+        setState(stateRef.current);
+    }, []);
+    const setSaving = useCallback((value) => {
+        isSavingRef.current = value;
+        setIsSaving(value);
+    }, []);
+    const fetchFirst = useCallback(async (isSilent) => {
+        versionRef.current += 1;
+        const version = versionRef.current;
+        if (!isSilent)
+            commit(() => PsInfiniteDataService.initial());
+        try {
+            const page = await latestRef.current.loadPage(null);
+            if (version !== versionRef.current)
+                return;
+            commit(() => ({
+                error: false,
+                isLoading: false,
+                isLoadingMore: false,
+                items: page.items,
+                nextCursor: page.nextCursor,
+                pages: 1,
+            }));
+        }
+        catch {
+            if (version !== versionRef.current)
+                return;
+            commit((current) => ({ ...current, error: true, isLoading: false, isLoadingMore: false }));
+        }
+    }, [commit]);
+    const reloadLoaded = useCallback(async () => {
+        versionRef.current += 1;
+        const version = versionRef.current;
+        const target = Math.max(stateRef.current.pages, 1);
+        try {
+            let items = [];
+            let cursor = null;
+            let pages = 0;
+            while (pages < target) {
+                const page = await latestRef.current.loadPage(cursor);
+                if (version !== versionRef.current)
+                    return;
+                items = PsInfiniteDataService.merge(items, page.items, latestRef.current.getKey);
+                cursor = page.nextCursor;
+                pages += 1;
+                if (cursor === null)
+                    break;
+            }
+            commit(() => ({
+                error: false,
+                isLoading: false,
+                isLoadingMore: false,
+                items,
+                nextCursor: cursor,
+                pages,
+            }));
+        }
+        catch {
+            if (version !== versionRef.current)
+                return;
+            commit((current) => ({ ...current, error: true }));
+        }
+    }, [commit]);
+    useEffect(() => {
+        committedRef.current = [];
+        setSaving(false);
+        if (!isEnabled) {
+            versionRef.current += 1;
+            commit(() => PsInfiniteDataService.initial());
+            return undefined;
+        }
+        void fetchFirst(false);
+        return () => {
+            versionRef.current += 1;
+        };
+    }, [key, isEnabled, fetchFirst, commit, setSaving]);
+    const refreshRef = useRef(refreshKey);
+    useEffect(() => {
+        if (refreshRef.current === refreshKey)
+            return;
+        refreshRef.current = refreshKey;
+        if (isEnabled && !isSavingRef.current && !stateRef.current.isLoading)
+            void reloadLoaded();
+    }, [isEnabled, refreshKey, reloadLoaded]);
+    const loadMore = useCallback(async () => {
+        const current = stateRef.current;
+        if (current.isLoading || current.isLoadingMore || current.nextCursor === null)
+            return;
+        const version = versionRef.current;
+        const cursor = current.nextCursor;
+        commit((value) => ({ ...value, isLoadingMore: true }));
+        try {
+            const page = await latestRef.current.loadPage(cursor);
+            if (version !== versionRef.current)
+                return;
+            commit((value) => ({
+                ...value,
+                error: false,
+                isLoadingMore: false,
+                items: PsInfiniteDataService.merge(value.items, page.items, latestRef.current.getKey),
+                nextCursor: page.nextCursor,
+                pages: value.pages + 1,
+            }));
+        }
+        catch {
+            if (version !== versionRef.current)
+                return;
+            commit((value) => ({ ...value, error: true, isLoadingMore: false }));
+        }
+    }, [commit]);
+    const refresh = useCallback(() => fetchFirst(true), [fetchFirst]);
+    const apply = useCallback((rows, updates) => PsInfiniteDataService.apply(rows, updates), []);
+    const optimistic = usePsOptimisticRows({
+        apply,
+        isSaving,
+        rows: state.items,
+    });
+    const rememberRef = useRef(optimistic.remember);
+    useEffect(() => {
+        rememberRef.current = optimistic.remember;
+    });
+    const send = useCallback(async (writes) => {
+        for (const item of writes) {
+            await item.request();
+            committedRef.current = [...committedRef.current, item];
+            item.resolve(true);
+        }
+    }, []);
+    const onFailed = useCallback((failed, dropped) => {
+        for (const item of [...failed, ...dropped]) {
+            optimistic.forgetLast();
+            item.resolve(false);
+        }
+        if (latestRef.current.onWriteFailed !== undefined)
+            latestRef.current.onWriteFailed();
+    }, [optimistic.forgetLast]);
+    const onDrained = useCallback(() => {
+        const through = submittedRef.current;
+        const settled = committedRef.current;
+        committedRef.current = [];
+        void (async () => {
+            const settle = latestRef.current.onSettled;
+            if (settle !== undefined)
+                await settle().catch(() => undefined);
+            if (settled.length > 0)
+                commit((current) => ({
+                    ...current,
+                    items: PsInfiniteDataService.apply(current.items, settled.map((item) => item.update)),
+                }));
+            if (submittedRef.current === through)
+                setSaving(false);
+        })();
+    }, [commit, setSaving]);
+    const queue = usePsChangeQueue({ onDrained, onFailed, send });
+    const { enqueue } = queue;
+    const write = useCallback((update, request) => {
+        if (stateRef.current.isLoading)
+            return Promise.resolve(false);
+        submittedRef.current += 1;
+        setSaving(true);
+        rememberRef.current(update);
+        return new Promise((resolve) => enqueue({ request, resolve, update }));
+    }, [enqueue, setSaving]);
+    return useMemo(() => ({
+        committedItems: state.items,
+        error: state.error,
+        hasMore: PsInfiniteDataService.hasMore(state),
+        isLoading: state.isLoading,
+        isLoadingMore: state.isLoadingMore,
+        items: optimistic.rows,
+        loadMore,
+        refresh,
+        write,
+    }), [loadMore, optimistic.rows, refresh, state, write]);
+};

package/dist/index.d.ts

@@ -174,3 +174,9 @@ export * from './interfaces/ps-barcode-scan';
 export * from './interfaces/ps-barcode-scanner-labels';
 export * from './interfaces/use-ps-barcode-scanner-result';
 export { PsBarcodeScannerService } from './services/ps-barcode-scanner-service';
+export * from './components/ps-infinite-list';
+export * from './hooks/use-ps-infinite-data';
+export * from './interfaces/ps-infinite-data-options';
+export * from './interfaces/ps-infinite-data-result';
+export * from './interfaces/ps-infinite-data-update';
+export * from './interfaces/ps-infinite-page';

package/dist/index.js

@@ -169,3 +169,9 @@ export * from './interfaces/ps-barcode-scan';
 export * from './interfaces/ps-barcode-scanner-labels';
 export * from './interfaces/use-ps-barcode-scanner-result';
 export { PsBarcodeScannerService } from './services/ps-barcode-scanner-service';
+export * from './components/ps-infinite-list';
+export * from './hooks/use-ps-infinite-data';
+export * from './interfaces/ps-infinite-data-options';
+export * from './interfaces/ps-infinite-data-result';
+export * from './interfaces/ps-infinite-data-update';
+export * from './interfaces/ps-infinite-page';

package/dist/interfaces/ps-device-file.d.ts

@@ -1,4 +1,5 @@
 export interface PsDeviceFile {
+    bytes?: () => Promise<Uint8Array>;
     name: string;
     type: string;
     uri: string;

package/dist/interfaces/ps-file-opener.d.ts

@@ -0,0 +1,4 @@
+export interface PsOpenedFile {
+    arrayBuffer: () => Promise<ArrayBuffer>;
+}
+export type PsFileOpener = (uri: string) => PsOpenedFile;

package/dist/interfaces/ps-file-opener.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-infinite-data-options.d.ts

@@ -0,0 +1,10 @@
+import type { PsInfinitePage } from './ps-infinite-page';
+export interface PsInfiniteDataOptions<T> {
+    getKey: (item: T) => string;
+    isEnabled?: boolean;
+    key: string;
+    loadPage: (cursor: string | null) => Promise<PsInfinitePage<T>>;
+    onSettled?: () => Promise<unknown>;
+    onWriteFailed?: () => void;
+    refreshKey?: number | string;
+}

package/dist/interfaces/ps-infinite-data-options.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-infinite-data-result.d.ts

@@ -0,0 +1,12 @@
+import type { PsInfiniteDataUpdate } from './ps-infinite-data-update';
+export interface PsInfiniteDataResult<T> {
+    committedItems: T[];
+    error: boolean;
+    hasMore: boolean;
+    isLoading: boolean;
+    isLoadingMore: boolean;
+    items: T[];
+    loadMore: () => Promise<void>;
+    refresh: () => Promise<void>;
+    write: (update: PsInfiniteDataUpdate<T>, request: () => Promise<unknown>) => Promise<boolean>;
+}

package/dist/interfaces/ps-infinite-data-result.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-infinite-data-state.d.ts

@@ -0,0 +1,8 @@
+export interface PsInfiniteDataState<T> {
+    error: boolean;
+    isLoading: boolean;
+    isLoadingMore: boolean;
+    items: T[];
+    nextCursor: string | null;
+    pages: number;
+}

package/dist/interfaces/ps-infinite-data-state.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-infinite-data-update.d.ts

@@ -0,0 +1 @@
+export type PsInfiniteDataUpdate<T> = (items: T[]) => T[];

package/dist/interfaces/ps-infinite-data-update.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-infinite-data-write.d.ts

@@ -0,0 +1,6 @@
+import type { PsInfiniteDataUpdate } from './ps-infinite-data-update';
+export interface PsInfiniteDataWrite<T> {
+    request: () => Promise<unknown>;
+    resolve: (isSaved: boolean) => void;
+    update: PsInfiniteDataUpdate<T>;
+}

package/dist/interfaces/ps-infinite-data-write.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-infinite-page.d.ts

@@ -0,0 +1,4 @@
+export interface PsInfinitePage<T> {
+    items: T[];
+    nextCursor: string | null;
+}

package/dist/interfaces/ps-infinite-page.js

@@ -0,0 +1 @@
+export {};

package/dist/services/ps-capture-picker-service.d.ts

@@ -3,6 +3,7 @@ import type { PsCaptureOptions } from '../interfaces/ps-capture-options';
 import type { PsDeviceFile } from '../interfaces/ps-device-file';
 export declare class PsCapturePickerService {
     static pick(source: PsCaptureSource, options?: PsCaptureOptions): Promise<PsDeviceFile[]>;
+    private static pickRaw;
     private static scan;
     private static pickImage;
     private static pickDocument;

package/dist/services/ps-capture-picker-service.js

@@ -1,9 +1,14 @@
 import { PsCaptureConfig } from '../constants/ps-capture-config';
 import { PsCaptureSource } from '../constants/ps-capture-source';
+import { PsDeviceFileBytesService } from './ps-device-file-bytes-service';
 import { PsDeviceFileService } from './ps-device-file-service';
 import { PsDocumentScannerService } from './ps-document-scanner-service';
 export class PsCapturePickerService {
     static async pick(source, options = {}) {
+        const files = await PsCapturePickerService.pickRaw(source, options);
+        return files.map((file) => PsDeviceFileBytesService.withBytes(file));
+    }
+    static async pickRaw(source, options) {
         if (source === PsCaptureSource.Scan)
             return PsCapturePickerService.scan(options);
         const file = source === PsCaptureSource.Files

package/dist/services/ps-device-file-bytes-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsDeviceFile } from '../interfaces/ps-device-file';
+import type { PsFileOpener } from '../interfaces/ps-file-opener';
+export declare class PsDeviceFileBytesService {
+    static withBytes(file: PsDeviceFile, open?: PsFileOpener | null): PsDeviceFile;
+    private static opener;
+}

package/dist/services/ps-device-file-bytes-service.js

@@ -0,0 +1,19 @@
+export class PsDeviceFileBytesService {
+    static withBytes(file, open = PsDeviceFileBytesService.opener()) {
+        if (open === null)
+            return file;
+        return {
+            ...file,
+            bytes: async () => new Uint8Array(await open(file.uri).arrayBuffer()),
+        };
+    }
+    static opener() {
+        try {
+            const loaded = require('expo-file-system');
+            return typeof loaded.File === 'function' ? (uri) => new loaded.File(uri) : null;
+        }
+        catch {
+            return null;
+        }
+    }
+}

package/dist/services/ps-infinite-data-service.d.ts

@@ -0,0 +1,8 @@
+import type { PsInfiniteDataState } from '../interfaces/ps-infinite-data-state';
+import type { PsInfiniteDataUpdate } from '../interfaces/ps-infinite-data-update';
+export declare class PsInfiniteDataService {
+    static initial<T>(): PsInfiniteDataState<T>;
+    static merge<T>(existing: T[], incoming: T[], getKey: (item: T) => string): T[];
+    static apply<T>(rows: T[], updates: PsInfiniteDataUpdate<T>[]): T[];
+    static hasMore<T>(state: PsInfiniteDataState<T>): boolean;
+}

package/dist/services/ps-infinite-data-service.js

@@ -0,0 +1,22 @@
+export class PsInfiniteDataService {
+    static initial() {
+        return {
+            error: false,
+            isLoading: true,
+            isLoadingMore: false,
+            items: [],
+            nextCursor: null,
+            pages: 0,
+        };
+    }
+    static merge(existing, incoming, getKey) {
+        const keys = new Set(existing.map(getKey));
+        return [...existing, ...incoming.filter((item) => !keys.has(getKey(item)))];
+    }
+    static apply(rows, updates) {
+        return updates.reduce((current, update) => update(current), rows);
+    }
+    static hasMore(state) {
+        return state.nextCursor !== null;
+    }
+}

package/dist/services/ps-infinite-list-service.d.ts

@@ -0,0 +1,10 @@
+import type { ViewStyle } from 'react-native';
+import type { PsInfiniteSection } from '../components/ps-infinite-list/ps-infinite-list-props';
+import type { PsMobileTheme } from '../interfaces/ps-mobile-theme';
+export declare class PsInfiniteListService {
+    static readonly itemsKey = "ps-infinite-items";
+    static sections<T>(items: T[] | undefined, sections: PsInfiniteSection<T>[] | undefined): PsInfiniteSection<T>[];
+    static shouldLoadMore(hasMore: boolean, isLoading: boolean, isLoadingMore: boolean): boolean;
+    static itemFrame(theme: PsMobileTheme, index: number, count: number): ViewStyle;
+    static divider(theme: PsMobileTheme): ViewStyle;
+}

package/dist/services/ps-infinite-list-service.js

@@ -0,0 +1,36 @@
+import { PsListConfig } from '../constants/ps-list-config';
+import { PsMobileControlConfig } from '../constants/ps-mobile-control-config';
+export class PsInfiniteListService {
+    static sections(items, sections) {
+        if (sections !== undefined)
+            return sections.filter((section) => section.data.length > 0);
+        return items === undefined || items.length === 0
+            ? []
+            : [{ data: items, key: PsInfiniteListService.itemsKey }];
+    }
+    static shouldLoadMore(hasMore, isLoading, isLoadingMore) {
+        return hasMore && !isLoading && !isLoadingMore;
+    }
+    static itemFrame(theme, index, count) {
+        const isFirst = index === 0;
+        const isLast = index === count - 1;
+        const radius = PsMobileControlConfig.cardRadius;
+        return {
+            backgroundColor: theme.surface,
+            borderBottomLeftRadius: isLast ? radius : 0,
+            borderBottomRightRadius: isLast ? radius : 0,
+            borderBottomWidth: isLast ? 1 : 0,
+            borderColor: theme.line,
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopLeftRadius: isFirst ? radius : 0,
+            borderTopRightRadius: isFirst ? radius : 0,
+            borderTopWidth: isFirst ? 1 : 0,
+            overflow: 'hidden',
+        };
+    }
+    static divider(theme) {
+        return { backgroundColor: theme.line, height: 1, marginLeft: PsListConfig.dividerInset };
+    }
+}
+PsInfiniteListService.itemsKey = 'ps-infinite-items';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.4.0",
+	"version": "1.6.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",
@@ -35,7 +35,7 @@
 	},
 	"dependencies": {
 		"@pallasoft/ps-design-system": "^1.19.0",
-		"@pallasoft/ps-icons": "^1.11.0",
+		"@pallasoft/ps-icons": "^1.12.0",
 		"@pallasoft/ps-utilities": "^2.27.0"
 	},
 	"peerDependencies": {