@pallasoft/ps-mobile-components 1.11.0 → 1.13.0

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

@@ -1,35 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { Modal, Pressable, StyleSheet, View } from 'react-native';
+import { Modal, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 import Animated, { FadeInDown } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsLayoutClass } from '../../constants/ps-layout-class';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsOrientationConfig } from '../../constants/ps-orientation-config';
 import { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsActionSheetService } from '../../services/ps-action-sheet-service';
 import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsSheetService } from '../../services/ps-sheet-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
 export const PsActionSheet = ({ cancelLabel, isOpen, items, onClose, title, }) => {
     const theme = usePsMobileTheme();
     const insets = useSafeAreaInsets();
+    const layoutClass = usePsLayoutClass();
+    const { width: windowWidth } = useWindowDimensions();
+    const isRegular = layoutClass === PsLayoutClass.regular;
     const pending = useRef(undefined);
     const runPending = () => {
         const action = pending.current;
         pending.current = undefined;
         action?.();
     };
-    return (_jsxs(Modal, { animationType: 'fade', onDismiss: runPending, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: isOpen, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: [StyleSheet.absoluteFill, { backgroundColor: theme.overlay }] }), _jsx(View, { pointerEvents: 'box-none', style: { flex: 1, justifyContent: 'flex-end' }, children: _jsxs(Animated.View, { entering: FadeInDown, style: {
+    return (_jsxs(Modal, { animationType: 'fade', onDismiss: runPending, onRequestClose: onClose, statusBarTranslucent: true, supportedOrientations: PsOrientationConfig.all, transparent: true, visible: isOpen, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: [StyleSheet.absoluteFill, { backgroundColor: theme.overlay }] }), _jsx(View, { pointerEvents: 'box-none', style: {
+                    alignItems: isRegular ? 'center' : undefined,
+                    flex: 1,
+                    justifyContent: 'flex-end',
+                }, children: _jsxs(Animated.View, { entering: FadeInDown, style: {
                         backgroundColor: theme.surface,
                         borderColor: theme.line,
+                        borderBottomLeftRadius: isRegular ? PsLayoutConfig.actionSheetRadius : 0,
+                        borderBottomRightRadius: isRegular ? PsLayoutConfig.actionSheetRadius : 0,
                         borderTopLeftRadius: PsLayoutConfig.actionSheetRadius,
                         borderTopRightRadius: PsLayoutConfig.actionSheetRadius,
                         borderWidth: 1,
+                        marginBottom: isRegular ? PsLayoutConfig.gutter : 0,
+                        maxWidth: PsSheetService.fittedMaxWidth(windowWidth, layoutClass),
                         paddingBottom: insets.bottom + PsLayoutConfig.sheetFooterGap,
                         paddingTop: PsLayoutConfig.sheetFooterGap,
+                        width: isRegular ? '100%' : undefined,
                     }, testID: 'ps-action-sheet', children: [title === undefined ? null : (_jsx(View, { style: { paddingHorizontal: PsLayoutConfig.gutter, paddingVertical: 8 }, children: _jsx(PsText, { tone: 'muted', variant: 'label', children: title }) })), items.map((item) => (_jsxs(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Surface), accessibilityRole: 'menuitem', accessibilityState: { disabled: item.isDisabled === true }, disabled: item.isDisabled, onPress: () => {
                                 pending.current = item.onSelect;
                                 onClose();

package/dist/components/ps-barcode-scanner-sheet/ps-barcode-scanner-sheet.js

@@ -6,6 +6,7 @@ import { Linking, Modal, StatusBar, StyleSheet, View, useWindowDimensions } from
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsBarcodePermission } from '../../constants/ps-barcode-permission';
 import { PsBarcodeScannerConfig } from '../../constants/ps-barcode-scanner-config';
+import { PsOrientationConfig } from '../../constants/ps-orientation-config';
 import { usePsHaptics } from '../../hooks/use-ps-haptics';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsBarcodeScannerService } from '../../services/ps-barcode-scanner-service';
@@ -41,7 +42,7 @@ export const PsBarcodeScannerSheet = ({ barcodeTypes, isContinuous = false, isOp
         if (!isContinuous)
             onClose();
     };
-    return (_jsxs(Modal, { animationType: 'fade', onRequestClose: onClose, presentationStyle: 'fullScreen', visible: isOpen, children: [_jsx(StatusBar, { barStyle: 'light-content' }), _jsxs(View, { style: { backgroundColor: PsBarcodeScannerConfig.backdropColor, flex: 1 }, testID: 'ps-barcode-scanner', children: [Camera !== null && permission === PsBarcodePermission.granted ? (_jsx(Camera, { barcodeScannerSettings: {
+    return (_jsxs(Modal, { animationType: 'fade', onRequestClose: onClose, presentationStyle: 'fullScreen', supportedOrientations: PsOrientationConfig.all, visible: isOpen, children: [_jsx(StatusBar, { barStyle: 'light-content' }), _jsxs(View, { style: { backgroundColor: PsBarcodeScannerConfig.backdropColor, flex: 1 }, testID: 'ps-barcode-scanner', children: [Camera !== null && permission === PsBarcodePermission.granted ? (_jsx(Camera, { barcodeScannerSettings: {
                             barcodeTypes: PsBarcodeScannerService.types(barcodeTypes),
                         }, enableTorch: isTorchOn, facing: PsBarcodeScannerConfig.facing, onBarcodeScanned: read, style: StyleSheet.absoluteFill })) : null, permission === PsBarcodePermission.granted ? (_jsx(View, { pointerEvents: 'none', style: [
                             StyleSheet.absoluteFill,

package/dist/components/ps-document-highlight-layer/index.d.ts

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

package/dist/components/ps-document-highlight-layer/index.js

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

package/dist/components/ps-document-highlight-layer/ps-document-highlight-layer-props.d.ts

@@ -0,0 +1,8 @@
+import type { PsDocumentSearchState } from '../../interfaces/ps-document-search-state';
+import type { PsDocumentTextLayer } from '../../interfaces/ps-document-text-layer';
+import type { PsSize } from '../../interfaces/ps-size';
+export interface PsDocumentHighlightLayerProps {
+    layer: PsDocumentTextLayer;
+    search: PsDocumentSearchState;
+    size: PsSize;
+}

package/dist/components/ps-document-highlight-layer/ps-document-highlight-layer-props.js

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

package/dist/components/ps-document-highlight-layer/ps-document-highlight-layer.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentHighlightLayerProps } from './ps-document-highlight-layer-props';
+export declare const PsDocumentHighlightLayer: ({ layer, search, size, }: PsDocumentHighlightLayerProps) => import("react").JSX.Element;

package/dist/components/ps-document-highlight-layer/ps-document-highlight-layer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDocumentSearchService } from '../../services/ps-document-search-service';
+import { PsDocumentSearchStyleService } from '../../services/ps-document-search-style-service';
+export const PsDocumentHighlightLayer = ({ layer, search, size, }) => {
+    const theme = usePsMobileTheme();
+    const rects = PsDocumentSearchService.highlights(layer, search.query, size, search.activeIndex);
+    return (_jsx(View, { pointerEvents: 'none', style: { bottom: 0, left: 0, position: 'absolute', right: 0, top: 0 }, testID: 'ps-document-highlight-layer', children: rects.map((rect, index) => (_jsx(View, { style: [
+                PsDocumentSearchStyleService.rect(theme, rect.isActive),
+                {
+                    height: rect.box.height,
+                    left: rect.box.left,
+                    position: 'absolute',
+                    top: rect.box.top,
+                    width: rect.box.width,
+                },
+            ], testID: rect.isActive ? 'ps-document-highlight-active' : 'ps-document-highlight' }, index))) }));
+};

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

@@ -1,11 +1,13 @@
 import type { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
 import type { PsDocumentItem } from '../../interfaces/ps-document-item';
 import type { PsDocumentLabels } from '../../interfaces/ps-document-labels';
+import type { PsDocumentSearchState } from '../../interfaces/ps-document-search-state';
 export interface PsDocumentPageProps {
     item: PsDocumentItem;
     labels: PsDocumentLabels;
     onDismiss: () => void;
     onRetry?: () => void;
     onZoomChange: (isZoomed: boolean) => void;
+    search?: PsDocumentSearchState;
     status?: PsDocumentLoadStatus;
 }

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, onRetry, onZoomChange, status, }: PsDocumentPageProps) => import("react").JSX.Element;
+export declare const PsDocumentPage: ({ item, labels, onDismiss, onRetry, onZoomChange, search, status, }: PsDocumentPageProps) => import("react").JSX.Element;

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

@@ -9,7 +9,7 @@ import { PsDocumentTextPage } from '../ps-document-text-page/ps-document-text-pa
 import { PsDocumentUnsupported } from '../ps-document-unsupported/ps-document-unsupported';
 import { PsDocumentZoomImage } from '../ps-document-zoom-image/ps-document-zoom-image';
 import { PsSpinner } from '../ps-spinner/ps-spinner';
-export const PsDocumentPage = ({ item, labels, onDismiss, onRetry, onZoomChange, status = PsDocumentLoadStatus.Ready, }) => {
+export const PsDocumentPage = ({ item, labels, onDismiss, onRetry, onZoomChange, search, status = PsDocumentLoadStatus.Ready, }) => {
     const [attempt, setAttempt] = useState(0);
     const [hasFailed, setHasFailed] = useState(false);
     if (item.kind === PsDocumentKind.Pdf) {
@@ -23,9 +23,9 @@ export const PsDocumentPage = ({ item, labels, onDismiss, onRetry, onZoomChange,
         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));
+            }, title: labels.loadFailed })) : (_jsx(PsDocumentZoomImage, { name: item.name, onDismiss: onDismiss, onError: () => setHasFailed(true), onZoomChange: onZoomChange, search: search, source: item.source, textLayer: item.textLayer }, attempt));
     }
     if (item.kind === PsDocumentKind.Text)
-        return _jsx(PsDocumentTextPage, { item: item, labels: labels });
+        return _jsx(PsDocumentTextPage, { item: item, labels: labels, search: search });
     return _jsx(PsDocumentUnsupported, { isOnDark: true, item: item, labels: labels });
 };

package/dist/components/ps-document-search-bar/index.d.ts

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

package/dist/components/ps-document-search-bar/index.js

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

package/dist/components/ps-document-search-bar/ps-document-search-bar-props.d.ts

@@ -0,0 +1,11 @@
+import type { PsDocumentSearchLabels } from '../../interfaces/ps-document-search-labels';
+export interface PsDocumentSearchBarProps {
+    activeIndex: number;
+    labels: PsDocumentSearchLabels;
+    onChange: (query: string) => void;
+    onClose: () => void;
+    onNext: () => void;
+    onPrevious: () => void;
+    query: string;
+    total: number;
+}

package/dist/components/ps-document-search-bar/ps-document-search-bar-props.js

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

package/dist/components/ps-document-search-bar/ps-document-search-bar.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentSearchBarProps } from './ps-document-search-bar-props';
+export declare const PsDocumentSearchBar: ({ activeIndex, labels, onChange, onClose, onNext, onPrevious, query, total, }: PsDocumentSearchBarProps) => import("react").JSX.Element;

package/dist/components/ps-document-search-bar/ps-document-search-bar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Platform, Pressable, TextInput, View } from 'react-native';
+import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentSearchConfig } from '../../constants/ps-document-search-config';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDocumentSearchService } from '../../services/ps-document-search-service';
+import { PsDocumentSearchStyleService } from '../../services/ps-document-search-style-service';
+import { PsMobileColorService } from '../../services/ps-mobile-color-service';
+import { PsDocumentSearchStep } from '../ps-document-search-step/ps-document-search-step';
+import { PsIconButton } from '../ps-icon-button/ps-icon-button';
+import { PsIcon } from '../ps-icon/ps-icon';
+import { PsText } from '../ps-text/ps-text';
+export const PsDocumentSearchBar = ({ activeIndex, labels, onChange, onClose, onNext, onPrevious, query, total, }) => {
+    const theme = usePsMobileTheme();
+    const isMaterial = Platform.OS === 'android';
+    const hasQuery = PsDocumentSearchService.terms(query).length > 0;
+    const status = !hasQuery
+        ? null
+        : total === 0
+            ? labels.noMatches
+            : PsDocumentSearchService.countLabel(labels.matchCount, activeIndex + 1, total);
+    return (_jsxs(View, { style: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: PsDocumentSearchConfig.barGap,
+            paddingHorizontal: PsDocumentConfig.barPaddingHorizontal,
+            paddingVertical: PsDocumentConfig.barPaddingVertical,
+        }, testID: 'ps-document-search-bar', children: [_jsxs(View, { style: {
+                    alignItems: 'center',
+                    backgroundColor: PsMobileColorService.withAlpha(theme.white, PsDocumentSearchConfig.fieldAlpha),
+                    borderRadius: PsDocumentSearchStyleService.fieldRadius(isMaterial),
+                    flex: 1,
+                    flexDirection: 'row',
+                    gap: PsMobileControlConfig.buttonIconSpacing,
+                    height: PsMobileControlConfig.controlHeights.compact,
+                    paddingHorizontal: PsDocumentSearchConfig.fieldPaddingX,
+                }, children: [_jsx(PsIcon, { color: theme.white, iconKey: PsIconKey.Search, size: PsMobileControlConfig.iconSizeInline }), _jsx(TextInput, { accessibilityLabel: labels.searchPlaceholder, autoCapitalize: 'none', autoCorrect: false, autoFocus: true, clearButtonMode: 'while-editing', onChangeText: onChange, onSubmitEditing: onNext, placeholder: labels.searchPlaceholder, placeholderTextColor: PsMobileColorService.withAlpha(theme.white, PsDocumentConfig.chromeAlpha), returnKeyType: 'search', selectionColor: theme.primary, style: {
+                            color: theme.white,
+                            flex: 1,
+                            fontSize: PsMobileControlConfig.controlFontSize,
+                            padding: 0,
+                        }, testID: 'ps-document-search-input', value: query }), status === null ? null : (_jsx(PsText, { tone: 'white', variant: 'caption', children: status }))] }), _jsx(PsDocumentSearchStep, { isDisabled: total === 0, isUp: true, label: labels.previousMatch, onPress: onPrevious, testID: 'ps-document-search-previous' }), _jsx(PsDocumentSearchStep, { isDisabled: total === 0, isUp: false, label: labels.nextMatch, onPress: onNext, testID: 'ps-document-search-next' }), isMaterial ? (_jsx(PsIconButton, { color: theme.white, iconKey: PsIconKey.Close, label: labels.closeSearch, onPress: onClose, size: 'compact', testID: 'ps-document-search-close' })) : (_jsx(Pressable, { accessibilityLabel: labels.closeSearch, accessibilityRole: 'button', hitSlop: PsLayoutConfig.hitSlop, onPress: onClose, testID: 'ps-document-search-close', children: _jsx(PsText, { tone: 'white', weight: 'semibold', children: labels.closeSearch }) }))] }));
+};

package/dist/components/ps-document-search-step/index.d.ts

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

package/dist/components/ps-document-search-step/index.js

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

package/dist/components/ps-document-search-step/ps-document-search-step-props.d.ts

@@ -0,0 +1,7 @@
+export interface PsDocumentSearchStepProps {
+    isDisabled: boolean;
+    isUp: boolean;
+    label: string;
+    onPress: () => void;
+    testID: string;
+}

package/dist/components/ps-document-search-step/ps-document-search-step-props.js

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

package/dist/components/ps-document-search-step/ps-document-search-step.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentSearchStepProps } from './ps-document-search-step-props';
+export declare const PsDocumentSearchStep: ({ isDisabled, isUp, label, onPress, testID, }: PsDocumentSearchStepProps) => import("react").JSX.Element;

package/dist/components/ps-document-search-step/ps-document-search-step.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PsIconKey } from '@pallasoft/ps-icons';
+import { Pressable, View } from 'react-native';
+import { PsDocumentSearchConfig } from '../../constants/ps-document-search-config';
+import { PsLayoutConfig } from '../../constants/ps-layout-config';
+import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsRippleKind } from '../../constants/ps-ripple-kind';
+import { usePsHaptics } from '../../hooks/use-ps-haptics';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsRippleService } from '../../services/ps-ripple-service';
+import { PsStateService } from '../../services/ps-state-service';
+import { PsIcon } from '../ps-icon/ps-icon';
+export const PsDocumentSearchStep = ({ isDisabled, isUp, label, onPress, testID, }) => {
+    const haptic = usePsHaptics();
+    const theme = usePsMobileTheme();
+    return (_jsx(Pressable, { android_ripple: PsRippleService.resolve(theme, PsRippleKind.Borderless), accessibilityLabel: label, accessibilityRole: 'button', accessibilityState: { disabled: isDisabled }, disabled: isDisabled, hitSlop: PsLayoutConfig.hitSlop, onPress: () => {
+            haptic('light');
+            onPress();
+        }, style: {
+            alignItems: 'center',
+            height: PsMobileControlConfig.controlHeights.compact,
+            justifyContent: 'center',
+            opacity: isDisabled ? PsStateService.disabledOpacity() : 1,
+            width: PsMobileControlConfig.controlHeights.compact,
+        }, testID: testID, children: _jsx(View, { style: {
+                transform: [
+                    { rotate: isUp ? PsDocumentSearchConfig.rotateUp : PsDocumentSearchConfig.rotateDown },
+                ],
+            }, children: _jsx(PsIcon, { color: theme.white, iconKey: PsIconKey.Chevron }) }) }));
+};

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

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

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

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

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

@@ -1,18 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { PsDocumentConfig } from '../../constants/ps-document-config';
 import { PsDocumentLoadStatus } from '../../constants/ps-document-load-status';
+import { PsDocumentSearchConfig } from '../../constants/ps-document-search-config';
 import { usePsDocumentText } from '../../hooks/use-ps-document-text';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsDocumentSearchService } from '../../services/ps-document-search-service';
+import { PsDocumentSearchStyleService } from '../../services/ps-document-search-style-service';
 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 }) => {
+export const PsDocumentTextPage = ({ item, labels, search }) => {
     const loaded = usePsDocumentText(item);
+    const theme = usePsMobileTheme();
+    const scroll = useRef(null);
+    const [lines, setLines] = useState([]);
+    const matches = loaded.text === null || search === undefined
+        ? []
+        : PsDocumentSearchService.matches(loaded.text, search.query);
+    const active = search === undefined ? undefined : matches[search.activeIndex];
+    useEffect(() => {
+        if (active === undefined)
+            return;
+        scroll.current?.scrollTo({
+            animated: true,
+            y: Math.max(0, PsDocumentSearchService.scrollOffset(lines, active.start) +
+                PsDocumentConfig.pageGutter -
+                PsDocumentSearchConfig.scrollMargin),
+        });
+    }, [active?.start, lines, search?.query]);
     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 }) }) }));
+    return (_jsx(View, { style: { flex: 1 }, testID: 'ps-document-text-page', children: _jsx(ScrollView, { contentContainerStyle: { padding: PsDocumentConfig.pageGutter }, ref: scroll, showsVerticalScrollIndicator: true, children: _jsx(PsText, { isSelectable: true, onTextLayout: (event) => setLines(event.nativeEvent.lines.map((line) => ({ text: line.text, y: line.y }))), tone: 'white', children: matches.length === 0
+                    ? loaded.text
+                    : PsDocumentSearchService.segments(loaded.text, matches).map((segment, index) => segment.matchIndex === null ? (segment.text) : (_jsx(Text, { style: PsDocumentSearchStyleService.span(theme, segment.matchIndex === search?.activeIndex), children: segment.text }, index))) }) }) }));
 };

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

@@ -5,13 +5,18 @@ 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 { PsDocumentSearchConfig } from '../../constants/ps-document-search-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { PsOrientationConfig } from '../../constants/ps-orientation-config';
 import { usePsDocumentPdfPages } from '../../hooks/use-ps-document-pdf-pages';
+import { usePsDocumentSearchTexts } from '../../hooks/use-ps-document-search-texts';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsDocumentPagerService } from '../../services/ps-document-pager-service';
+import { PsDocumentSearchService } from '../../services/ps-document-search-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 { PsDocumentSearchBar } from '../ps-document-search-bar/ps-document-search-bar';
 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, }) => {
@@ -27,11 +32,48 @@ export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onCl
         ? PsDocumentViewerEntryService.startIndex(items, entries, initialIndex)
         : PsDocumentViewerEntryService.resolveIndex(currentEntry, entries, 0);
     const current = entries[index];
+    const searchLabels = PsDocumentSearchService.labels(labels);
+    const [isSearching, setIsSearching] = useState(false);
+    const [query, setQuery] = useState('');
+    const [activeMatch, setActiveMatch] = useState(PsDocumentSearchConfig.noActive);
+    const searchTexts = usePsDocumentSearchTexts(items, isSearching);
+    const counts = PsDocumentSearchService.counts(entries, searchTexts, query);
+    const total = PsDocumentSearchService.total(counts);
+    const canSearch = searchLabels !== null && PsDocumentSearchService.isSearchable(items);
+    const showMatch = (match, nextCounts) => {
+        setActiveMatch(match);
+        const location = PsDocumentSearchService.locate(nextCounts, match);
+        if (location === null)
+            return;
+        const entry = entries[location.entryIndex];
+        if (entry !== undefined && location.entryIndex !== index)
+            setCurrentEntry(entry);
+    };
+    const closeSearch = () => {
+        setIsSearching(false);
+        setQuery('');
+        setActiveMatch(PsDocumentSearchConfig.noActive);
+    };
+    useEffect(() => {
+        if (!isSearching)
+            return;
+        if (total === 0) {
+            if (activeMatch !== PsDocumentSearchConfig.noActive)
+                setActiveMatch(PsDocumentSearchConfig.noActive);
+            return;
+        }
+        if (activeMatch < 0 || activeMatch >= total)
+            showMatch(PsDocumentSearchService.startIndex(counts, index), counts);
+    }, [isSearching, total, activeMatch]);
+    useEffect(() => {
+        if (!isOpen && isSearching)
+            closeSearch();
+    }, [isOpen]);
     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: {
+    return (_jsxs(Modal, { animationType: 'fade', onRequestClose: onClose, presentationStyle: 'fullScreen', supportedOrientations: PsOrientationConfig.all, visible: isOpen, children: [_jsx(StatusBar, { barStyle: 'light-content' }), _jsxs(GestureHandlerRootView, { style: {
                     backgroundColor: PsDocumentConfig.backdropColor,
                     flex: 1,
                     paddingBottom: insets.bottom,
@@ -41,7 +83,10 @@ 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(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) => ({
+                        }, 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 }))] }), canSearch && !isSearching ? (_jsx(PsIconButton, { color: theme.white, iconKey: PsIconKey.Search, label: searchLabels.search, onPress: () => setIsSearching(true), testID: 'ps-document-search-button' })) : (_jsx(View, { style: { width: PsMobileControlConfig.controlHeights.default } }))] }), canSearch && isSearching ? (_jsx(PsDocumentSearchBar, { activeIndex: activeMatch, labels: searchLabels, onChange: (value) => {
+                            setQuery(value);
+                            setActiveMatch(PsDocumentSearchConfig.noActive);
+                        }, onClose: closeSearch, onNext: () => showMatch(PsDocumentSearchService.step(activeMatch, total, 1), counts), onPrevious: () => showMatch(PsDocumentSearchService.step(activeMatch, total, -1), counts), query: query, total: total })) : null, _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, extraData: `${isSearching}|${query}|${activeMatch}|${total}`, getItemLayout: (_data, position) => ({
                                 index: position,
                                 length: width,
                                 offset: PsDocumentPagerService.offset(position, width),
@@ -50,7 +95,12 @@ export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onCl
                                 if (next !== undefined)
                                     setCurrentEntry(next);
                                 setIsZoomed(false);
-                            }, 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) => {
+                            }, pagingEnabled: true, ref: list, renderItem: ({ index: position, item: entry }) => (_jsx(View, { style: { width }, children: _jsx(PsDocumentPage, { item: entry.item, labels: labels, onDismiss: onClose, onRetry: pdf.retry, onZoomChange: setIsZoomed, search: isSearching
+                                        ? {
+                                            activeIndex: PsDocumentSearchService.activeFor(counts, activeMatch, position),
+                                            query,
+                                        }
+                                        : undefined, 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);

package/dist/components/ps-document-zoom-image/ps-document-zoom-image-props.d.ts

@@ -1,8 +1,12 @@
+import type { PsDocumentSearchState } from '../../interfaces/ps-document-search-state';
 import type { PsDocumentSource } from '../../interfaces/ps-document-source';
+import type { PsDocumentTextLayer } from '../../interfaces/ps-document-text-layer';
 export interface PsDocumentZoomImageProps {
     name: string;
     onDismiss: () => void;
     onError: () => void;
     onZoomChange: (isZoomed: boolean) => void;
+    search?: PsDocumentSearchState;
     source: PsDocumentSource;
+    textLayer?: PsDocumentTextLayer;
 }

package/dist/components/ps-document-zoom-image/ps-document-zoom-image.d.ts

@@ -1,2 +1,2 @@
 import type { PsDocumentZoomImageProps } from './ps-document-zoom-image-props';
-export declare const PsDocumentZoomImage: ({ name, onDismiss, onError, onZoomChange, source, }: PsDocumentZoomImageProps) => import("react").JSX.Element;
+export declare const PsDocumentZoomImage: ({ name, onDismiss, onError, onZoomChange, search, source, textLayer, }: PsDocumentZoomImageProps) => import("react").JSX.Element;

package/dist/components/ps-document-zoom-image/ps-document-zoom-image.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Image, View } from 'react-native';
 import { GestureDetector, usePanGesture, usePinchGesture, useSimultaneousGestures, useTapGesture, } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsDocumentConfig } from '../../constants/ps-document-config';
+import { PsDocumentSearchService } from '../../services/ps-document-search-service';
 import { PsDocumentZoomService } from '../../services/ps-document-zoom-service';
+import { PsDocumentHighlightLayer } from '../ps-document-highlight-layer/ps-document-highlight-layer';
 import { PsSpinner } from '../ps-spinner/ps-spinner';
-export const PsDocumentZoomImage = ({ name, onDismiss, onError, onZoomChange, source, }) => {
+export const PsDocumentZoomImage = ({ name, onDismiss, onError, onZoomChange, search, source, textLayer, }) => {
     const [size, setSize] = useState({ height: 0, width: 0 });
     const [isZoomed, setIsZoomed] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
@@ -83,6 +85,31 @@ export const PsDocumentZoomImage = ({ name, onDismiss, onError, onZoomChange, so
         },
         runOnJS: true,
     });
+    const hasSearch = search !== undefined && textLayer !== undefined && search.activeIndex >= 0;
+    useEffect(() => {
+        if (!hasSearch || !isZoomed || size.width === 0)
+            return;
+        const active = PsDocumentSearchService.highlights(textLayer, search.query, size, search.activeIndex).find((rect) => rect.isActive);
+        if (active === undefined)
+            return;
+        const center = PsDocumentSearchService.center(active.box);
+        const nextX = PsDocumentZoomService.centerOffset(center.x, size.width, scale.value);
+        const nextY = PsDocumentZoomService.centerOffset(center.y, size.height, scale.value);
+        x.value = withTiming(nextX, { duration: PsDocumentConfig.settleMs });
+        y.value = withTiming(nextY, { duration: PsDocumentConfig.settleMs });
+        baseX.value = nextX;
+        baseY.value = nextY;
+    }, [search?.activeIndex, search?.query]);
+    useEffect(() => {
+        scale.value = PsDocumentConfig.minZoom;
+        baseScale.value = PsDocumentConfig.minZoom;
+        x.value = 0;
+        y.value = 0;
+        baseX.value = 0;
+        baseY.value = 0;
+        setIsZoomed(false);
+        onZoomChange(false);
+    }, [size.height, size.width]);
     const gesture = useSimultaneousGestures(pinch, move, dismiss, doubleTap);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [
@@ -92,7 +119,7 @@ export const PsDocumentZoomImage = ({ name, onDismiss, onError, onZoomChange, so
             { scale: scale.value },
         ],
     }));
-    return (_jsx(GestureDetector, { gesture: gesture, children: _jsxs(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { flex: 1, overflow: 'hidden' }, testID: 'ps-document-zoom-image', children: [_jsx(Animated.View, { style: [{ flex: 1 }, animatedStyle], children: _jsx(Image, { accessibilityLabel: name, onError: onError, onLoad: () => setIsLoaded(true), resizeMode: 'contain', source: { headers: source.headers, uri: source.uri }, style: { flex: 1 } }) }), isLoaded ? null : (_jsx(View, { pointerEvents: 'none', style: {
+    return (_jsx(GestureDetector, { gesture: gesture, children: _jsxs(View, { onLayout: (event) => setSize(event.nativeEvent.layout), style: { flex: 1, overflow: 'hidden' }, testID: 'ps-document-zoom-image', children: [_jsxs(Animated.View, { style: [{ flex: 1 }, animatedStyle], children: [_jsx(Image, { accessibilityLabel: name, onError: onError, onLoad: () => setIsLoaded(true), resizeMode: 'contain', source: { headers: source.headers, uri: source.uri }, style: { flex: 1 } }), search === undefined || textLayer === undefined ? null : (_jsx(PsDocumentHighlightLayer, { layer: textLayer, search: search, size: size }))] }), isLoaded ? null : (_jsx(View, { pointerEvents: 'none', style: {
                         alignItems: 'center',
                         bottom: 0,
                         justifyContent: 'center',

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

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsContentWidth } from '../../constants/ps-content-width';
 import type { PsListVariant } from '../../services/ps-list-service';
 import type { PsListSkeletonLayout } from '../ps-list/ps-list-props';
 export interface PsInfiniteSection<T> {
@@ -9,6 +10,7 @@ export interface PsInfiniteSection<T> {
     title?: string;
 }
 export interface PsInfiniteListProps<T> {
+    contentWidth?: PsContentWidth;
     empty?: ReactNode;
     hasMore: boolean;
     header?: ReactNode;

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

@@ -1,2 +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;
+export declare const PsInfiniteList: <T>({ contentWidth, empty, hasMore, header, isLoading, isLoadingMore, items, keyExtractor, onEndReached, onRefresh, renderItem, sections, skeleton, style, variant, }: PsInfiniteListProps<T>) => import("react").JSX.Element;