@pallasoft/ps-mobile-components 1.10.2 → 1.12.0

package/dist/components/ps-cartesian-chart/ps-cartesian-chart-props.d.ts

@@ -9,6 +9,7 @@ export interface PsCartesianChartProps {
     height?: number;
     isLoading?: boolean;
     kind: PsCartesianChartKind;
+    revealKey?: string;
     series: PsCartesianChartSeries[];
     showLegend?: boolean;
 }

package/dist/components/ps-cartesian-chart/ps-cartesian-chart.d.ts

@@ -1,2 +1,2 @@
 import type { PsCartesianChartProps } from './ps-cartesian-chart-props';
-export declare const PsCartesianChart: ({ data, emptyLabel, formatTick, formatValue, height: baseHeight, isLoading, kind, series, showLegend, }: PsCartesianChartProps) => import("react").JSX.Element;
+export declare const PsCartesianChart: ({ data, emptyLabel, formatTick, formatValue, height: baseHeight, isLoading, kind, revealKey, series, showLegend, }: PsCartesianChartProps) => import("react").JSX.Element;

package/dist/components/ps-cartesian-chart/ps-cartesian-chart.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { StyleSheet, View } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
 import Svg, { Circle, G, Line, Text as SvgText } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsCartesianChartKind } from '../../constants/ps-chart-kind';
@@ -22,7 +23,7 @@ import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
 import { PsChartLine } from '../ps-chart-line/ps-chart-line';
 import { PsChartReadout } from '../ps-chart-readout/ps-chart-readout';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
-export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, height: baseHeight = PsChartConfig.chartHeight, isLoading = false, kind, series, showLegend = true, }) => {
+export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, height: baseHeight = PsChartConfig.chartHeight, isLoading = false, kind, revealKey, series, showLegend = true, }) => {
     const theme = usePsMobileTheme();
     const { onLayout, width } = usePsChartWidth();
     const height = baseHeight + usePsWidgetFill();
@@ -41,8 +42,8 @@ export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, he
     const tickLabels = PsChartScaleService.ticks(domain).map((tick) => formatTick(tick));
     const yAxisWidth = PsChartAxisService.yAxisWidth(tickLabels, width);
     const plot = PsChartScaleService.plot(width, height, yAxisWidth);
-    const { index, panHandlers } = usePsChartScrub(data.length, isBars, plot);
-    const progress = usePsChartReveal(PsChartSeriesService.signature(kind, data, series));
+    const { gesture, index } = usePsChartScrub(data.length, isBars, plot);
+    const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return (_jsx(PsChartSkeleton, { height: baseHeight, variant: PsChartKindService.skeletonVariant(kind) }));
     if (data.length === 0 || PsChartSeriesService.isEmpty(data, series))
@@ -65,7 +66,7 @@ export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, he
         : isStacked
             ? PsChartBarService.stacked(data, barSeries, barColors, domain, plot)
             : PsChartBarService.grouped(data, barSeries, barColors, domain, plot);
-    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: items, lines: readoutLines, title: datum.label }), _jsx(View, { accessible: true, accessibilityLabel: PsChartReadoutService.summary(datum.label, items), accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? null : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick, tickIndex) => {
+    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: items, lines: readoutLines, title: datum.label }), _jsx(View, { accessible: true, accessibilityLabel: PsChartReadoutService.summary(datum.label, items), accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? (_jsx(PsChartSkeleton, { height: baseHeight, variant: PsChartKindService.skeletonVariant(kind) })) : (_jsxs(_Fragment, { children: [_jsxs(Svg, { height: height, pointerEvents: 'none', width: width, children: [PsChartScaleService.ticks(domain).map((tick, tickIndex) => {
                                     const y = PsChartScaleService.y(tick, domain, plot);
                                     return (_jsxs(G, { children: [_jsx(Line, { stroke: theme.line, strokeWidth: PsChartConfig.gridLineWidth, x1: plot.left, x2: plot.right, y1: y, y2: y }), _jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'end', x: plot.left - PsChartConfig.axisTickGap, y: y + PsChartConfig.axisLabelSize / 3, children: PsChartTextService.fit(tickLabels[tickIndex], plot.left - PsChartConfig.axisTickGap, PsChartConfig.axisLabelSize) })] }, tick));
                                 }), xLabels.indexes.map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: PsChartScaleService.labelAnchor(position, data.length, isBars), x: xAt(position), y: height - 6, children: PsChartTextService.fit(data[position].label, xLabels.maxWidth, PsChartConfig.axisLabelSize) }, position))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id))), lineSeries.map((entry, lineIndex) => {
@@ -77,7 +78,7 @@ export const PsCartesianChart = ({ data, emptyLabel, formatTick, formatValue, he
                                     return (_jsx(PsChartLine, { areaBaseline: kind === PsCartesianChartKind.Area
                                             ? PsChartScaleService.y(0, domain, plot)
                                             : undefined, color: colors[position], points: points, progress: progress }, entry.dataKey));
-                                }), index === null ? null : (_jsx(Line, { stroke: theme.muted, strokeWidth: PsChartConfig.scrubLineWidth, x1: xAt(selected), x2: xAt(selected), y1: plot.top, y2: plot.bottom })), lineSeries.map((entry, lineIndex) => (_jsx(Circle, { cx: xAt(selected), cy: PsChartScaleService.y(PsChartSeriesService.value(datum, entry.dataKey), domain, plot), fill: theme.surface, r: PsChartConfig.markerRadius, stroke: colors[lineIndexes[lineIndex]], strokeWidth: 2 }, entry.dataKey)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) }), showLegend && series.length > 1 ? (_jsx(PsChartLegend, { items: series.map((entry, position) => ({
+                                }), index === null ? null : (_jsx(Line, { stroke: theme.muted, strokeWidth: PsChartConfig.scrubLineWidth, x1: xAt(selected), x2: xAt(selected), y1: plot.top, y2: plot.bottom })), lineSeries.map((entry, lineIndex) => (_jsx(Circle, { cx: xAt(selected), cy: PsChartScaleService.y(PsChartSeriesService.value(datum, entry.dataKey), domain, plot), fill: theme.surface, r: PsChartConfig.markerRadius, stroke: colors[lineIndexes[lineIndex]], strokeWidth: 2 }, entry.dataKey)))] }), _jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' }) })] })) }), showLegend && series.length > 1 ? (_jsx(PsChartLegend, { items: series.map((entry, position) => ({
                     color: colors[position],
                     label: entry.label,
                 })) })) : null] }));

package/dist/components/ps-chart-frame/ps-chart-frame.js

@@ -11,5 +11,9 @@ export const PsChartFrame = ({ children, delta, period, title, value }) => {
     const size = value === undefined
         ? PsChartConfig.kpiValueFontMax
         : PsChartTextService.fontSize(value, width, PsChartConfig.kpiValueFontMax, PsChartConfig.kpiValueFontMin);
-    return (_jsx(PsCard, { style: { gap: 12 }, children: _jsxs(View, { onLayout: onLayout, style: { gap: 12 }, testID: 'ps-chart-frame', children: [title === undefined && value === undefined ? null : (_jsxs(View, { style: { gap: 4 }, children: [title === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'label', children: title })), value === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: { fontSize: size, lineHeight: Math.round(size * 1.25) }, variant: 'numeric', weight: 'bold', children: value })), delta === undefined ? null : _jsx(PsChartDeltaBadge, { ...delta }), period === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: period }))] })), children] }) }));
+    return (_jsx(PsCard, { style: { gap: 12 }, children: _jsxs(View, { onLayout: onLayout, style: { gap: 12 }, testID: 'ps-chart-frame', children: [title === undefined && value === undefined ? null : (_jsxs(View, { style: { gap: 4 }, children: [title === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: 'muted', variant: 'label', children: title })), value === undefined ? null : (_jsx(PsText, { numberOfLines: 1, style: {
+                                fontSize: size,
+                                lineHeight: Math.round(size * 1.25),
+                                opacity: width === 0 ? 0 : 1,
+                            }, variant: 'numeric', weight: 'bold', children: value })), delta === undefined ? null : _jsx(PsChartDeltaBadge, { ...delta }), period === undefined ? null : (_jsx(PsText, { tone: 'muted', variant: 'caption', children: period }))] })), children] }) }));
 };

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,17 @@ 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 { 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,6 +31,43 @@ 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 });
@@ -41,7 +82,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 +94,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,21 @@ 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]);
     const gesture = useSimultaneousGestures(pinch, move, dismiss, doubleTap);
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [
@@ -92,7 +109,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-donut-chart/ps-donut-chart-props.d.ts

@@ -7,4 +7,5 @@ export interface PsDonutChartProps {
     formatShare: (share: number) => string;
     height?: number;
     isLoading?: boolean;
+    revealKey?: string;
 }

package/dist/components/ps-donut-chart/ps-donut-chart.d.ts

@@ -1,2 +1,2 @@
 import type { PsDonutChartProps } from './ps-donut-chart-props';
-export declare const PsDonutChart: ({ centerLabel, centerValue, data, emptyLabel, formatShare, height, isLoading, }: PsDonutChartProps) => import("react").JSX.Element;
+export declare const PsDonutChart: ({ centerLabel, centerValue, data, emptyLabel, formatShare, height, isLoading, revealKey, }: PsDonutChartProps) => import("react").JSX.Element;

package/dist/components/ps-donut-chart/ps-donut-chart.js

@@ -14,12 +14,12 @@ import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
 import { PsDonutSlice } from '../ps-donut-slice/ps-donut-slice';
 import { PsText } from '../ps-text/ps-text';
-export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, formatShare, height = PsChartConfig.donutHeight, isLoading = false, }) => {
+export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, formatShare, height = PsChartConfig.donutHeight, isLoading = false, revealKey, }) => {
     const theme = usePsMobileTheme();
     const { onLayout, width } = usePsChartWidth();
     const fill = usePsWidgetFill();
     const [selected, setSelected] = useState(null);
-    const progress = usePsChartReveal(data.map((datum) => `${datum.id}:${datum.share}`).join(','));
+    const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Donut });
     const layout = PsChartDonutService.layout(width, height);