@pallasoft/ps-mobile-components 1.2.0 → 1.4.0

package/dist/components/ps-document-page/ps-document-page.d.ts

@@ -1,2 +1,2 @@
 import type { PsDocumentPageProps } from './ps-document-page-props';
-export declare const PsDocumentPage: ({ item, labels, onDismiss, onZoomChange }: PsDocumentPageProps) => import("react").JSX.Element;
+export declare const PsDocumentPage: ({ item, labels, onDismiss, onRetry, onZoomChange, status, }: PsDocumentPageProps) => import("react").JSX.Element;

package/dist/components/ps-document-page/ps-document-page.js

@@ -1,22 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { ScrollView, View } from 'react-native';
-import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { View } from 'react-native';
 import { PsDocumentKind } from '../../constants/ps-document-kind';
+import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
 import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentTextPage } from '../ps-document-text-page/ps-document-text-page';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
 import { PsDocumentZoomImage } from '../ps-document-zoom-image/ps-document-zoom-image';
-import { PsText } from '../ps-text/ps-text';
-export const PsDocumentPage = ({ item, labels, onDismiss, onZoomChange }) => {
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+export const PsDocumentPage = ({ item, labels, onDismiss, onRetry, onZoomChange, status = PsDocumentLoadStatus.Ready, }) => {
     const [attempt, setAttempt] = useState(0);
     const [hasFailed, setHasFailed] = useState(false);
+    if (item.kind === PsDocumentKind.Pdf) {
+        if (status === PsDocumentLoadStatus.Loading)
+            return (_jsx(View, { style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, testID: 'ps-document-pdf-loading', children: _jsx(PsSpinner, {}) }));
+        if (status === PsDocumentLoadStatus.Failed)
+            return (_jsx(PsDocumentMessage, { actionLabel: onRetry === undefined ? undefined : labels.retry, description: item.name, iconKey: PsIconKey.Warning, isOnDark: true, onAction: onRetry, title: labels.loadFailed }));
+        return _jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels });
+    }
     if (item.kind === PsDocumentKind.Image && item.source !== null) {
         return hasFailed ? (_jsx(PsDocumentMessage, { actionLabel: labels.retry, iconKey: PsIconKey.Warning, isOnDark: true, onAction: () => {
                 setHasFailed(false);
                 setAttempt((current) => current + 1);
             }, title: labels.loadFailed })) : (_jsx(PsDocumentZoomImage, { name: item.name, onDismiss: onDismiss, onError: () => setHasFailed(true), onZoomChange: onZoomChange, source: item.source }, attempt));
     }
-    if (item.kind === PsDocumentKind.Text && item.text !== null)
-        return (_jsx(View, { style: { flex: 1 }, testID: 'ps-document-text-page', children: _jsx(ScrollView, { contentContainerStyle: { padding: PsDocumentConfig.pageGutter }, showsVerticalScrollIndicator: true, children: _jsx(PsText, { isSelectable: true, tone: 'white', children: item.text }) }) }));
-    return (_jsx(PsDocumentMessage, { description: item.name, iconKey: PsIconKey.Doc, isOnDark: true, title: labels.unsupported }));
+    if (item.kind === PsDocumentKind.Text)
+        return _jsx(PsDocumentTextPage, { item: item, labels: labels });
+    return _jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels });
 };

package/dist/components/ps-document-page-strip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-document-page-strip';
+export * from './ps-document-page-strip-props';

package/dist/components/ps-document-page-strip/index.js

@@ -0,0 +1,2 @@
+export * from './ps-document-page-strip';
+export * from './ps-document-page-strip-props';

package/dist/components/ps-document-page-strip/ps-document-page-strip-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsDocumentViewerEntry } from '../../interfaces/ps-document-viewer-entry';
+export interface PsDocumentPageStripProps {
+    entries: PsDocumentViewerEntry[];
+    index: number;
+    onSelect: (index: number) => void;
+}

package/dist/components/ps-document-page-strip/ps-document-page-strip-props.js

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

package/dist/components/ps-document-page-strip/ps-document-page-strip.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentPageStripProps } from './ps-document-page-strip-props';
+export declare const PsDocumentPageStrip: ({ entries, index, onSelect }: PsDocumentPageStripProps) => import("react").JSX.Element;

package/dist/components/ps-document-page-strip/ps-document-page-strip.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { FlatList, Image, Pressable, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentKind } from '../../constants/ps-document-kind';
+import { PsDocumentPdfConfig } from '../../constants/ps-document-pdf-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+export const PsDocumentPageStrip = ({ entries, index, onSelect }) => {
+    const theme = usePsMobileTheme();
+    const list = useRef(null);
+    useEffect(() => {
+        if (index >= 0 && index < entries.length)
+            list.current?.scrollToIndex({
+                animated: true,
+                index,
+                viewPosition: PsDocumentPdfConfig.stripScrollViewPosition,
+            });
+    }, [entries.length, index]);
+    return (_jsx(View, { style: { paddingVertical: PsDocumentPdfConfig.stripPadding }, testID: 'ps-document-page-strip', children: _jsx(FlatList, { contentContainerStyle: {
+                gap: PsDocumentPdfConfig.stripGap,
+                paddingHorizontal: PsDocumentPdfConfig.stripPadding,
+            }, data: entries, getItemLayout: (_data, position) => ({
+                index: position,
+                length: PsDocumentPdfConfig.stripTileWidth + PsDocumentPdfConfig.stripGap,
+                offset: (PsDocumentPdfConfig.stripTileWidth + PsDocumentPdfConfig.stripGap) * position,
+            }), horizontal: true, keyExtractor: (entry) => entry.id, ref: list, renderItem: ({ index: position, item: entry }) => (_jsx(Pressable, { accessibilityLabel: PsDocumentPagerService.counter(position, entries.length), accessibilityRole: 'button', accessibilityState: { selected: position === index }, onPress: () => onSelect(position), style: {
+                    alignItems: 'center',
+                    borderColor: position === index
+                        ? theme.primary
+                        : PsMobileColorService.withAlpha(theme.white, PsDocumentPdfConfig.stripUnselectedAlpha),
+                    borderRadius: PsMobileControlConfig.controlRadius,
+                    borderWidth: PsDocumentPdfConfig.stripSelectedBorder,
+                    height: PsDocumentPdfConfig.stripHeight,
+                    justifyContent: 'center',
+                    overflow: 'hidden',
+                    width: PsDocumentPdfConfig.stripTileWidth,
+                }, testID: `ps-document-strip-${position}`, children: entry.item.kind === PsDocumentKind.Image && entry.item.source !== null ? (_jsx(Image, { resizeMode: 'cover', source: { uri: entry.item.source.uri }, style: { height: '100%', width: '100%' } })) : (_jsx(PsIcon, { color: theme.white, iconKey: PsIconKey.Doc, size: PsDocumentConfig.stripIconSize })) })), showsHorizontalScrollIndicator: false }) }));
+};

package/dist/components/ps-document-pdf-cover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-document-pdf-cover';
+export * from './ps-document-pdf-cover-props';

package/dist/components/ps-document-pdf-cover/index.js

@@ -0,0 +1,2 @@
+export * from './ps-document-pdf-cover';
+export * from './ps-document-pdf-cover-props';

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentPdfCoverProps {
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover-props.js

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

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentPdfCoverProps } from './ps-document-pdf-cover-props';
+export declare const PsDocumentPdfCover: ({ item, labels }: PsDocumentPdfCoverProps) => import("react").JSX.Element;

package/dist/components/ps-document-pdf-cover/ps-document-pdf-cover.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Image, View } from 'react-native';
+import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
+import { usePsDocumentPdfCover } from '../../hooks/use-ps-document-pdf-cover';
+import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+export const PsDocumentPdfCover = ({ item, labels }) => {
+    const { cover, retry, status } = usePsDocumentPdfCover(item);
+    if (status === PsDocumentLoadStatus.Ready && cover !== null)
+        return (_jsx(Image, { accessibilityLabel: item.name, resizeMode: 'contain', source: { uri: cover.uri }, style: { flex: 1 } }));
+    if (status === PsDocumentLoadStatus.Loading)
+        return (_jsx(View, { style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, children: _jsx(PsSpinner, {}) }));
+    if (status === PsDocumentLoadStatus.Failed)
+        return (_jsx(PsDocumentMessage, { actionLabel: labels.retry, description: item.name, iconKey: PsIconKey.Warning, onAction: retry, title: labels.loadFailed }));
+    return _jsx(PsDocumentUnsupported, { item: item, labels: labels });
+};

package/dist/components/ps-document-preview/ps-document-preview.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { Image, Pressable, View } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { PsDocumentConfig } from '../../constants/ps-document-config';
-import { PsDocumentKind } from '../../constants/ps-document-kind';
 import { PsSkeletonShape } from '../../constants/ps-skeleton-shape';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
@@ -11,10 +10,10 @@ import { PsMobileColorService } from '../../services/ps-mobile-color-service';
 import { PsBadge } from '../ps-badge/ps-badge';
 import { PsCard } from '../ps-card/ps-card';
 import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentPreviewFace } from '../ps-document-preview-face/ps-document-preview-face';
 import { PsDocumentViewer } from '../ps-document-viewer/ps-document-viewer';
 import { PsIconButton } from '../ps-icon-button/ps-icon-button';
 import { PsSkeleton } from '../ps-skeleton/ps-skeleton';
-import { PsText } from '../ps-text/ps-text';
 export const PsDocumentPreview = ({ aspectRatio = PsDocumentConfig.previewAspectRatio, hasError = false, isLoading = false, items, labels, onRetry, }) => {
     const theme = usePsMobileTheme();
     const [size, setSize] = useState({ height: 0, width: 0 });
@@ -25,7 +24,7 @@ export const PsDocumentPreview = ({ aspectRatio = PsDocumentConfig.previewAspect
         setOpenCount((current) => current + 1);
         setIsOpen(true);
     };
-    return (_jsx(PsCard, { padding: 'none', children: _jsx(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { aspectRatio, width: '100%' }, testID: 'ps-document-preview', children: isLoading ? (_jsx(PsSkeleton, { height: size.height, shape: PsSkeletonShape.Block })) : hasError ? (_jsx(PsDocumentMessage, { actionLabel: onRetry === undefined ? undefined : labels.retry, iconKey: PsIconKey.Warning, onAction: onRetry, title: labels.error })) : first === undefined ? (_jsx(PsDocumentMessage, { iconKey: PsIconKey.Image, title: labels.empty })) : (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityLabel: labels.expand, accessibilityRole: 'button', onPress: open, style: { backgroundColor: theme.background, flex: 1 }, children: first.kind === PsDocumentKind.Image && first.source !== null ? (_jsx(Image, { accessibilityLabel: first.name, resizeMode: 'contain', source: { headers: first.source.headers, uri: first.source.uri }, style: { flex: 1 } })) : first.kind === PsDocumentKind.Text && first.text !== null ? (_jsx(View, { style: { flex: 1, padding: PsDocumentConfig.previewPadding }, children: _jsx(PsText, { numberOfLines: PsDocumentConfig.previewTextLines, children: first.text }) })) : (_jsx(PsDocumentMessage, { description: first.name, iconKey: PsIconKey.Doc, title: labels.unsupported })) }), _jsx(View, { style: {
+    return (_jsx(PsCard, { padding: 'none', children: _jsx(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { aspectRatio, width: '100%' }, testID: 'ps-document-preview', children: isLoading ? (_jsx(PsSkeleton, { height: size.height, shape: PsSkeletonShape.Block })) : hasError ? (_jsx(PsDocumentMessage, { actionLabel: onRetry === undefined ? undefined : labels.retry, iconKey: PsIconKey.Warning, onAction: onRetry, title: labels.error })) : first === undefined ? (_jsx(PsDocumentMessage, { iconKey: PsIconKey.Image, title: labels.empty })) : (_jsxs(_Fragment, { children: [_jsx(Pressable, { accessibilityLabel: labels.expand, accessibilityRole: 'button', onPress: open, style: { backgroundColor: theme.background, flex: 1 }, children: _jsx(PsDocumentPreviewFace, { item: first, labels: labels }) }), _jsx(View, { style: {
                             position: 'absolute',
                             right: PsDocumentConfig.expandInset,
                             top: PsDocumentConfig.expandInset,

package/dist/components/ps-document-preview-face/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-document-preview-face';
+export * from './ps-document-preview-face-props';

package/dist/components/ps-document-preview-face/index.js

@@ -0,0 +1,2 @@
+export * from './ps-document-preview-face';
+export * from './ps-document-preview-face-props';

package/dist/components/ps-document-preview-face/ps-document-preview-face-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentPreviewFaceProps {
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-preview-face/ps-document-preview-face-props.js

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

package/dist/components/ps-document-preview-face/ps-document-preview-face.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentPreviewFaceProps } from './ps-document-preview-face-props';
+export declare const PsDocumentPreviewFace: ({ item, labels }: PsDocumentPreviewFaceProps) => import("react").JSX.Element;

package/dist/components/ps-document-preview-face/ps-document-preview-face.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentKind } from '../../constants/ps-document-kind';
+import { usePsDocumentText } from '../../hooks/use-ps-document-text';
+import { PsDocumentPdfCover } from '../ps-document-pdf-cover/ps-document-pdf-cover';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
+import { PsText } from '../ps-text/ps-text';
+export const PsDocumentPreviewFace = ({ item, labels }) => {
+    const loaded = usePsDocumentText(item);
+    if (item.kind === PsDocumentKind.Image && item.source !== null)
+        return (_jsx(Image, { accessibilityLabel: item.name, resizeMode: 'contain', source: { headers: item.source.headers, uri: item.source.uri }, style: { flex: 1 } }));
+    if (item.kind === PsDocumentKind.Pdf && item.source !== null)
+        return _jsx(PsDocumentPdfCover, { item: item, labels: labels });
+    if (item.kind === PsDocumentKind.Text && loaded.text !== null)
+        return (_jsx(View, { style: { flex: 1, padding: PsDocumentConfig.previewPadding }, children: _jsx(PsText, { numberOfLines: PsDocumentConfig.previewTextLines, children: loaded.text }) }));
+    return _jsx(PsDocumentUnsupported, { item: item, labels: labels });
+};

package/dist/components/ps-document-text-page/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ps-document-text-page';
+export * from './ps-document-text-page-props';

package/dist/components/ps-document-text-page/index.js

@@ -0,0 +1,2 @@
+export * from './ps-document-text-page';
+export * from './ps-document-text-page-props';

package/dist/components/ps-document-text-page/ps-document-text-page-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentTextPageProps {
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-text-page/ps-document-text-page-props.js

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

package/dist/components/ps-document-text-page/ps-document-text-page.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentTextPageProps } from './ps-document-text-page-props';
+export declare const PsDocumentTextPage: ({ item, labels }: PsDocumentTextPageProps) => import("react").JSX.Element;

package/dist/components/ps-document-text-page/ps-document-text-page.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { ScrollView, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
+import { usePsDocumentText } from '../../hooks/use-ps-document-text';
+import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
+import { PsSpinner } from '../ps-spinner/ps-spinner';
+import { PsText } from '../ps-text/ps-text';
+export const PsDocumentTextPage = ({ item, labels }) => {
+    const loaded = usePsDocumentText(item);
+    if (loaded.status === PsDocumentLoadStatus.Loading)
+        return (_jsx(View, { style: { alignItems: 'center', flex: 1, justifyContent: 'center' }, children: _jsx(PsSpinner, {}) }));
+    if (loaded.text === null)
+        return item.source === null ? (_jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels })) : (_jsx(PsDocumentMessage, { description: item.name, iconKey: PsIconKey.Warning, isOnDark: true, title: labels.loadFailed }));
+    return (_jsx(View, { style: { flex: 1 }, testID: 'ps-document-text-page', children: _jsx(ScrollView, { contentContainerStyle: { padding: PsDocumentConfig.pageGutter }, showsVerticalScrollIndicator: true, children: _jsx(PsText, { isSelectable: true, tone: 'white', children: loaded.text }) }) }));
+};

package/dist/components/ps-document-unsupported/index.d.ts

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

package/dist/components/ps-document-unsupported/index.js

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

package/dist/components/ps-document-unsupported/ps-document-unsupported-props.d.ts

@@ -0,0 +1,7 @@
+import type { PsDocumentItem } from '../../interfaces/ps-document-item';
+import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+export interface PsDocumentUnsupportedProps {
+    isOnDark?: boolean;
+    item: PsDocumentItem;
+    labels: PsDocumentLabels;
+}

package/dist/components/ps-document-unsupported/ps-document-unsupported-props.js

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

package/dist/components/ps-document-unsupported/ps-document-unsupported.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentUnsupportedProps } from './ps-document-unsupported-props';
+export declare const PsDocumentUnsupported: ({ isOnDark, item, labels, }: PsDocumentUnsupportedProps) => import("react").JSX.Element;

package/dist/components/ps-document-unsupported/ps-document-unsupported.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { usePsDocumentOpen } from '../../hooks/use-ps-document-open';
+import { PsDocumentOpenService } from '../../services/ps-document-open-service';
+import { PsDocumentMessage } from '../ps-document-message/ps-document-message';
+export const PsDocumentUnsupported = ({ isOnDark = false, item, labels, }) => {
+    const opener = usePsDocumentOpen(item);
+    const canOpen = labels.open !== undefined && PsDocumentOpenService.canOpen(item);
+    return (_jsx(PsDocumentMessage, { actionLabel: canOpen && !opener.isOpening ? labels.open : undefined, description: item.name, iconKey: opener.hasFailed ? PsIconKey.Warning : PsIconKey.Doc, isOnDark: isOnDark, onAction: canOpen ? () => void opener.open() : undefined, title: opener.hasFailed ? labels.loadFailed : labels.unsupported }));
+};

package/dist/components/ps-document-viewer/ps-document-viewer.js

@@ -1,23 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
 import { FlatList, Modal, StatusBar, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsDocumentConfig } from '../../constants/ps-document-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsDocumentPdfPages } from '../../hooks/use-ps-document-pdf-pages';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
+import { PsDocumentViewerEntryService } from '../../services/ps-document-viewer-entry-service';
+import { PsDocumentPageStrip } from '../ps-document-page-strip/ps-document-page-strip';
 import { PsDocumentPage } from '../ps-document-page/ps-document-page';
 import { PsIconButton } from '../ps-icon-button/ps-icon-button';
 import { PsText } from '../ps-text/ps-text';
 export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onClose, }) => {
     const theme = usePsMobileTheme();
     const insets = useSafeAreaInsets();
+    const list = useRef(null);
     const [width, setWidth] = useState(0);
     const [isZoomed, setIsZoomed] = useState(false);
-    const [index, setIndex] = useState(PsDocumentPagerService.clampIndex(initialIndex, items.length));
-    const current = items[index];
+    const [currentEntry, setCurrentEntry] = useState(null);
+    const pdf = usePsDocumentPdfPages(items, isOpen);
+    const entries = PsDocumentViewerEntryService.entries(items, pdf.states);
+    const index = currentEntry === null
+        ? PsDocumentViewerEntryService.startIndex(items, entries, initialIndex)
+        : PsDocumentViewerEntryService.resolveIndex(currentEntry, entries, 0);
+    const current = entries[index];
+    useEffect(() => {
+        if (width > 0 && entries.length > 0)
+            list.current?.scrollToIndex({ animated: false, index });
+    }, [entries.length, index, width]);
     return (_jsxs(Modal, { animationType: 'fade', onRequestClose: onClose, presentationStyle: 'fullScreen', visible: isOpen, children: [_jsx(StatusBar, { barStyle: 'light-content' }), _jsxs(GestureHandlerRootView, { style: {
                     backgroundColor: PsDocumentConfig.backdropColor,
                     flex: 1,
@@ -28,12 +41,19 @@ export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onCl
                             flexDirection: 'row',
                             paddingHorizontal: PsDocumentConfig.barPaddingHorizontal,
                             paddingVertical: PsDocumentConfig.barPaddingVertical,
-                        }, children: [_jsx(PsIconButton, { color: theme.white, iconKey: PsIconKey.Close, label: labels.close, onPress: onClose }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [PsDocumentPagerService.hasMany(items.length) ? (_jsx(PsText, { tone: 'white', weight: 'semibold', children: PsDocumentPagerService.counter(index, items.length) })) : null, current === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'white', variant: 'caption', children: current.name }))] }), _jsx(View, { style: { width: PsMobileControlConfig.controlHeights.default } })] }), _jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { flex: 1 }, testID: 'ps-document-viewer-pager', children: width === 0 ? null : (_jsx(FlatList, { data: items, getItemLayout: (_data, position) => ({
+                        }, children: [_jsx(PsIconButton, { color: theme.white, iconKey: PsIconKey.Close, label: labels.close, onPress: onClose }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [PsDocumentPagerService.hasMany(entries.length) ? (_jsx(PsText, { tone: 'white', weight: 'semibold', children: PsDocumentPagerService.counter(index, entries.length) })) : null, current === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'white', variant: 'caption', children: current.item.name }))] }), _jsx(View, { style: { width: PsMobileControlConfig.controlHeights.default } })] }), _jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { flex: 1 }, testID: 'ps-document-viewer-pager', children: width === 0 ? null : (_jsx(FlatList, { data: entries, getItemLayout: (_data, position) => ({
                                 index: position,
                                 length: width,
                                 offset: PsDocumentPagerService.offset(position, width),
-                            }), horizontal: true, initialScrollIndex: index, keyExtractor: (item) => item.id, onMomentumScrollEnd: (event) => {
-                                setIndex(PsDocumentPagerService.pageIndex(event.nativeEvent.contentOffset.x, width, items.length));
+                            }), horizontal: true, initialScrollIndex: index, keyExtractor: (entry) => entry.id, onMomentumScrollEnd: (event) => {
+                                const next = entries[PsDocumentPagerService.pageIndex(event.nativeEvent.contentOffset.x, width, entries.length)];
+                                if (next !== undefined)
+                                    setCurrentEntry(next);
                                 setIsZoomed(false);
-                            }, pagingEnabled: true, renderItem: ({ item }) => (_jsx(View, { style: { width }, children: _jsx(PsDocumentPage, { item: item, labels: labels, onDismiss: onClose, onZoomChange: setIsZoomed }) })), scrollEnabled: !isZoomed, showsHorizontalScrollIndicator: false, testID: 'ps-document-viewer-list' })) })] })] }));
+                            }, pagingEnabled: true, ref: list, renderItem: ({ item: entry }) => (_jsx(View, { style: { width }, children: _jsx(PsDocumentPage, { item: entry.item, labels: labels, onDismiss: onClose, onRetry: pdf.retry, onZoomChange: setIsZoomed, status: entry.status }) })), scrollEnabled: !isZoomed, showsHorizontalScrollIndicator: false, testID: 'ps-document-viewer-list' })) }), PsDocumentViewerEntryService.hasStrip(items, entries) ? (_jsx(PsDocumentPageStrip, { entries: entries, index: index, onSelect: (position) => {
+                            const entry = entries[position];
+                            if (entry !== undefined)
+                                setCurrentEntry(entry);
+                            setIsZoomed(false);
+                        } })) : null] })] }));
 };

package/dist/components/ps-form-sheet/ps-form-sheet-props.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { PsSheetPage } from '../../interfaces/ps-sheet-page';
 export interface PsFormSheetProps {
     cancelLabel: string;
     closeLabel?: string;
@@ -12,6 +13,7 @@ export interface PsFormSheetProps {
     isSubmitDisabled?: boolean;
     onClose: () => void;
     onSubmit: () => void;
+    page?: PsSheetPage | null;
     submitLabel: string;
     submitVariant?: 'danger' | 'primary';
     title: string;

package/dist/components/ps-form-sheet/ps-form-sheet.d.ts

@@ -1,2 +1,2 @@
 import type { PsFormSheetProps } from './ps-form-sheet-props';
-export declare const PsFormSheet: ({ cancelLabel, children, eyebrow, footerStart, isLoading, isOpen, isSubmitting, loadingFields, isSubmitDisabled, onClose, onSubmit, submitLabel, submitVariant, title, }: PsFormSheetProps) => import("react").JSX.Element;
+export declare const PsFormSheet: ({ cancelLabel, children, eyebrow, footerStart, isLoading, isOpen, isSubmitting, loadingFields, isSubmitDisabled, onClose, onSubmit, page, submitLabel, submitVariant, title, }: PsFormSheetProps) => import("react").JSX.Element;

package/dist/components/ps-form-sheet/ps-form-sheet.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { PsFormSheetConfig } from '../../constants/ps-form-sheet-config';
+import { PsSheetPageConfig } from '../../constants/ps-sheet-page-config';
 import { PsFieldSkeleton } from '../ps-field-skeleton/ps-field-skeleton';
+import { PsSheetPageView } from '../ps-sheet-page/ps-sheet-page-view';
 import { PsSheet } from '../ps-sheet/ps-sheet';
-export const PsFormSheet = ({ cancelLabel, children, eyebrow, footerStart, isLoading = false, isOpen, isSubmitting = false, loadingFields = PsFormSheetConfig.loadingFields, isSubmitDisabled = false, onClose, onSubmit, submitLabel, submitVariant = 'primary', title, }) => (_jsx(PsSheet, { eyebrow: eyebrow, footer: footerStart, isDismissBlocked: isSubmitting, isOpen: isOpen, leadingLabel: cancelLabel, onClose: onClose, title: title, trailingAction: {
-        isDisabled: isSubmitDisabled || isLoading,
-        isSubmitting,
-        label: submitLabel,
-        onPress: onSubmit,
-        tone: submitVariant,
-    }, children: isLoading ? _jsx(PsFieldSkeleton, { count: loadingFields }) : children }));
+export const PsFormSheet = ({ cancelLabel, children, eyebrow, footerStart, isLoading = false, isOpen, isSubmitting = false, loadingFields = PsFormSheetConfig.loadingFields, isSubmitDisabled = false, onClose, onSubmit, page = null, submitLabel, submitVariant = 'primary', title, }) => {
+    const lastPageId = useRef(null);
+    const isReturning = page === null && lastPageId.current !== null;
+    useEffect(() => {
+        lastPageId.current = page === null ? null : page.id;
+    }, [page]);
+    return page === null ? (_jsx(PsSheet, { eyebrow: eyebrow, footer: footerStart, isDismissBlocked: isSubmitting, isOpen: isOpen, leadingLabel: cancelLabel, onClose: onClose, title: title, trailingAction: {
+            isDisabled: isSubmitDisabled || isLoading,
+            isSubmitting,
+            label: submitLabel,
+            onPress: onSubmit,
+            tone: submitVariant,
+        }, children: _jsx(PsSheetPageView, { isAnimated: isReturning, isPage: false, pageId: PsSheetPageConfig.formId, children: isLoading ? _jsx(PsFieldSkeleton, { count: loadingFields }) : children }) })) : (_jsx(PsSheet, { isOpen: isOpen, leadingKind: 'back', leadingLabel: page.backLabel, onClose: onClose, onLeadingPress: page.onBack, title: page.title, trailingAction: null, children: _jsx(PsSheetPageView, { isAnimated: true, isPage: true, pageId: page.id, children: page.children }) }));
+};

package/dist/components/ps-header-action/index.d.ts

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

package/dist/components/ps-header-action/index.js

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

package/dist/components/ps-header-action/ps-header-action-props.d.ts

@@ -0,0 +1,6 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+export interface PsHeaderActionProps {
+    iconKey: PsMobileIconKey;
+    label: string;
+    onPress: () => void;
+}

package/dist/components/ps-header-action/ps-header-action-props.js

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

package/dist/components/ps-header-action/ps-header-action.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsHeaderActionProps } from './ps-header-action-props';
+export declare const PsHeaderAction: ({ iconKey, label, onPress }: PsHeaderActionProps) => null;

package/dist/components/ps-header-action/ps-header-action.android.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePsHeaderRight } from '../../hooks/use-ps-header-right';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+export const PsHeaderAction = ({ iconKey, label, onPress }) => {
+    const theme = usePsMobileTheme();
+    usePsHeaderRight(_jsx(PsIconButton, { backgroundColor: 'transparent', color: theme.ink, iconKey: iconKey, label: label, onPress: onPress, variant: 'header' }));
+    return null;
+};

package/dist/components/ps-header-action/ps-header-action.d.ts

@@ -0,0 +1,2 @@
+import type { PsHeaderActionProps } from './ps-header-action-props';
+export declare const PsHeaderAction: ({ iconKey, label, onPress }: PsHeaderActionProps) => import("react").JSX.Element;

package/dist/components/ps-header-action/ps-header-action.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from 'expo-router';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export const PsHeaderAction = ({ iconKey, label, onPress }) => {
+    const haptic = usePsHaptics();
+    return (_jsx(Stack.Toolbar, { placement: 'right', children: _jsx(Stack.Toolbar.Button, { accessibilityLabel: label, icon: PsActionMenuService.symbol({ iconKey, id: label, label, onSelect: onPress }), onPress: () => {
+                haptic('light');
+                onPress();
+            } }) }));
+};

package/dist/components/ps-header-menu/index.d.ts

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

package/dist/components/ps-header-menu/index.js

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

package/dist/components/ps-header-menu/ps-header-menu-props.d.ts

@@ -0,0 +1,7 @@
+import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import type { PsMenuItem } from '../../interfaces/ps-menu-item';
+export interface PsHeaderMenuProps {
+    iconKey?: PsMobileIconKey;
+    items: PsMenuItem[];
+    label: string;
+}

package/dist/components/ps-header-menu/ps-header-menu-props.js

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

package/dist/components/ps-header-menu/ps-header-menu.android.d.ts

@@ -0,0 +1,2 @@
+import type { PsHeaderMenuProps } from './ps-header-menu-props';
+export declare const PsHeaderMenu: ({ iconKey, items, label, }: PsHeaderMenuProps) => null;

package/dist/components/ps-header-menu/ps-header-menu.android.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import { usePsHeaderRight } from '../../hooks/use-ps-header-right';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsActionMenu } from '../ps-action-menu/ps-action-menu';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+export const PsHeaderMenu = ({ iconKey = PsMobileIconKey.More, items, label, }) => {
+    const theme = usePsMobileTheme();
+    usePsHeaderRight(items.length === 0 ? null : (_jsx(PsActionMenu, { items: items, label: label, children: ({ open }) => (_jsx(PsIconButton, { backgroundColor: 'transparent', color: theme.ink, iconKey: iconKey, label: label, onPress: open, variant: 'header' })) })));
+    return null;
+};

package/dist/components/ps-header-menu/ps-header-menu.d.ts

@@ -0,0 +1,2 @@
+import type { PsHeaderMenuProps } from './ps-header-menu-props';
+export declare const PsHeaderMenu: ({ iconKey, items, label, }: PsHeaderMenuProps) => import("react").JSX.Element | null;

package/dist/components/ps-header-menu/ps-header-menu.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from 'expo-router';
+import { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { PsActionMenuService } from '../../services/ps-action-menu-service';
+export const PsHeaderMenu = ({ iconKey = PsMobileIconKey.More, items, label, }) => {
+    const haptic = usePsHaptics();
+    const entries = PsActionMenuService.consistent([{ id: 'items', items }])[0];
+    if (entries === undefined)
+        return null;
+    return (_jsx(Stack.Toolbar, { placement: 'right', children: _jsx(Stack.Toolbar.Menu, { accessibilityLabel: label, icon: PsActionMenuService.symbol({
+                iconKey,
+                id: 'more',
+                label,
+                onSelect: () => undefined,
+            }), children: entries.items.map((item) => (_jsx(Stack.Toolbar.MenuAction, { destructive: item.isDanger === true, disabled: item.isDisabled === true, icon: PsActionMenuService.symbol(item), onPress: () => {
+                    haptic('selection');
+                    item.onSelect();
+                }, children: item.label }, item.id))) }) }));
+};