@pallasoft/ps-mobile-components 1.10.1 → 1.11.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-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);

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

@@ -5,6 +5,8 @@ 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();
+    if (items.length === 0)
+        return null;
     const entries = PsActionMenuService.consistent([{ id: 'items', items }])[0];
     if (entries === undefined)
         return null;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Modal, Pressable, ScrollView, StyleSheet, useWindowDimensions } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
 import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { usePsMenuPopupReveal } from '../../hooks/use-ps-menu-popup-reveal';
@@ -12,34 +13,35 @@ export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, })
     const theme = usePsMobileTheme();
     const scheme = usePsMaterialScheme();
     const window = useWindowDimensions();
+    const insets = useSafeAreaInsets();
     const isMaterial = PsMenuPopupStyleService.isMaterial();
     const [size, setSize] = useState(undefined);
     const layout = size === undefined
-        ? undefined
-        : PsMenuPopupService.layout(anchor, window, size.height, size.width, isFullWidth);
+        ? PsMenuPopupService.layout(anchor, window, insets, Number.POSITIVE_INFINITY, PsMenuPopupConfig.minWidth, isFullWidth)
+        : PsMenuPopupService.layout(anchor, window, insets, size.height, size.width, isFullWidth);
     const container = PsMenuPopupStyleService.container(theme, scheme, isMaterial);
-    const reveal = usePsMenuPopupReveal(layout !== undefined, layout === undefined || layout.isBelow, isMaterial);
+    const reveal = usePsMenuPopupReveal(size !== undefined, layout.isBelow, isMaterial);
     return (_jsxs(Modal, { animationType: isMaterial ? 'none' : 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, transparent: true, visible: true, children: [_jsx(Pressable, { accessibilityElementsHidden: true, onPress: onClose, style: StyleSheet.absoluteFill, testID: 'ps-menu-popup-backdrop' }), _jsx(Animated.View, { onLayout: (event) => {
                     if (size === undefined)
                         setSize({
                             height: event.nativeEvent.layout.height,
                             width: event.nativeEvent.layout.width,
                         });
-                }, pointerEvents: layout === undefined ? 'none' : 'auto', style: [
+                }, pointerEvents: size === undefined ? 'none' : 'auto', style: [
                     {
                         backgroundColor: container.backgroundColor,
                         borderColor: container.borderColor,
                         borderRadius: container.borderRadius,
                         borderWidth: container.borderWidth,
                         elevation: container.elevation,
-                        left: layout === undefined ? 0 : layout.left,
-                        maxHeight: layout === undefined ? undefined : layout.maxHeight,
+                        left: layout.left,
+                        maxHeight: layout.maxHeight,
                         maxWidth: PsMenuPopupConfig.maxWidth,
                         minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
                         overflow: 'hidden',
                         position: 'absolute',
-                        top: layout === undefined ? 0 : layout.top,
-                        width: layout === undefined ? undefined : layout.width,
+                        top: layout.top,
+                        width: layout.width,
                     },
                     reveal,
                 ], testID: 'ps-menu-popup', children: _jsx(ScrollView, { bounces: false, contentContainerStyle: { paddingVertical: container.paddingVertical }, children: children }) })] }));

package/dist/components/ps-sheet-presenter/ps-sheet-presenter.ios.js

@@ -2,8 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { BottomSheet, Group, RNHostView } from '@expo/ui/swift-ui';
 import { frame, interactiveDismissDisabled, presentationBackground, presentationDetents, presentationDragIndicator, } from '@expo/ui/swift-ui/modifiers';
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsNativeTreeContext } from '../../contexts/ps-native-tree-context';
 import { PsSheetMeasureContext } from '../../contexts/ps-sheet-measure-context';
+import { usePsKeyboardHeight } from '../../hooks/use-ps-keyboard-height';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsSheetService } from '../../services/ps-sheet-service';
 import { PsHost } from '../ps-host/ps-host';
@@ -12,6 +15,10 @@ export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose,
     const isOpenRef = useRef(isOpen);
     const isBlockedRef = useRef(isDismissBlocked);
     const [height, setHeight] = useState(0);
+    const keyboardHeight = usePsKeyboardHeight();
+    const window = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const detentHeight = height > 0 ? PsSheetService.raisedHeight(height, keyboardHeight, window.height, insets.top) : 0;
     isOpenRef.current = isOpen;
     isBlockedRef.current = isDismissBlocked;
     const measure = useCallback((next) => {
@@ -27,7 +34,7 @@ export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose,
                 }
             }, children: _jsx(Group, { modifiers: [
                     frame({ alignment: 'top', maxHeight: Infinity, maxWidth: Infinity }),
-                    presentationDetents(height > 0 ? [{ height }] : ['medium']),
+                    presentationDetents(detentHeight > 0 ? [{ height: detentHeight }] : ['medium']),
                     presentationDragIndicator('visible'),
                     presentationBackground(theme.background),
                     interactiveDismissDisabled(isDismissBlocked),

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

@@ -2,6 +2,7 @@ export interface PsSparklineProps {
     color?: string;
     height?: number;
     isLoading?: boolean;
+    revealKey?: string;
     showArea?: boolean;
     values: number[];
 }

package/dist/components/ps-sparkline/ps-sparkline.d.ts

@@ -1,2 +1,2 @@
 import type { PsSparklineProps } from './ps-sparkline-props';
-export declare const PsSparkline: ({ color, height: baseHeight, isLoading, showArea, values, }: PsSparklineProps) => import("react").JSX.Element;
+export declare const PsSparkline: ({ color, height: baseHeight, isLoading, revealKey, showArea, values, }: PsSparklineProps) => import("react").JSX.Element;

package/dist/components/ps-sparkline/ps-sparkline.js

@@ -10,11 +10,11 @@ import { usePsWidgetFill } from '../../hooks/use-ps-widget-fill';
 import { PsChartScaleService } from '../../services/ps-chart-scale-service';
 import { PsChartLine } from '../ps-chart-line/ps-chart-line';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
-export const PsSparkline = ({ color, height: baseHeight = PsChartConfig.sparklineHeight, isLoading = false, showArea = true, values, }) => {
+export const PsSparkline = ({ color, height: baseHeight = PsChartConfig.sparklineHeight, isLoading = false, revealKey, showArea = true, values, }) => {
     const theme = usePsMobileTheme();
     const height = baseHeight + usePsWidgetFill();
     const { onLayout, width } = usePsChartWidth();
-    const progress = usePsChartReveal(values.join(','));
+    const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Line });
     if (values.length === 0)

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

@@ -6,4 +6,5 @@ export interface PsWaterfallChartProps {
     formatValue: (value: number) => string;
     height?: number;
     isLoading?: boolean;
+    revealKey?: string;
 }

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

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

package/dist/components/ps-waterfall-chart/ps-waterfall-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, { G, Line, Text as SvgText } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
@@ -16,7 +17,7 @@ import { PsChartBar } from '../ps-chart-bar/ps-chart-bar';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartReadout } from '../ps-chart-readout/ps-chart-readout';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
-export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, height: baseHeight = PsChartConfig.chartHeight, isLoading = false, }) => {
+export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, height: baseHeight = PsChartConfig.chartHeight, isLoading = false, revealKey, }) => {
     const theme = usePsMobileTheme();
     const { onLayout, width } = usePsChartWidth();
     const height = baseHeight + usePsWidgetFill();
@@ -24,8 +25,8 @@ export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, he
     const domain = PsChartScaleService.domain(PsWaterfallService.values(steps));
     const tickLabels = PsChartScaleService.ticks(domain).map((tick) => formatTick(tick));
     const plot = PsChartScaleService.plot(width, height, PsChartAxisService.yAxisWidth(tickLabels, width));
-    const { index, panHandlers } = usePsChartScrub(data.length, true, plot);
-    const progress = usePsChartReveal(`waterfall:${PsWaterfallService.values(steps).join(',')}`);
+    const { gesture, index } = usePsChartScrub(data.length, true, plot);
+    const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: baseHeight, variant: PsChartSkeletonVariant.Bars });
     if (steps.length === 0 || PsWaterfallService.values(steps).every((value) => value === 0))
@@ -36,8 +37,8 @@ export const PsWaterfallChart = ({ data, emptyLabel, formatTick, formatValue, he
     const step = steps[selected];
     const rects = PsWaterfallService.rects(steps, colors, domain, plot);
     const color = step.isTotal ? colors[2] : step.value < 0 ? colors[1] : colors[0];
-    return (_jsxs(View, { style: { gap: 8 }, children: [_jsx(PsChartReadout, { items: [{ color, label: step.label, value: formatValue(step.value) }], title: step.label }), _jsx(View, { accessible: true, accessibilityLabel: `${step.label}, ${formatValue(step.value)}`, 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: [{ color, label: step.label, value: formatValue(step.value) }], title: step.label }), _jsx(View, { accessible: true, accessibilityLabel: `${step.label}, ${formatValue(step.value)}`, accessibilityRole: 'image', onLayout: onLayout, style: { height }, children: width === 0 ? (_jsx(PsChartSkeleton, { height: baseHeight, variant: PsChartSkeletonVariant.Bars })) : (_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: 'middle', x: PsChartScaleService.categoryX(position, steps.length, plot, true), y: height - 6, children: PsChartTextService.fit(steps[position].label, xLabels.maxWidth, PsChartConfig.axisLabelSize) }, steps[position].label))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id)))] }), _jsx(View, { ...panHandlers, style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' })] })) })] }));
+                                }), xLabels.indexes.map((position) => (_jsx(SvgText, { fill: theme.muted, fontFamily: theme.fonts.medium, fontSize: PsChartConfig.axisLabelSize, textAnchor: 'middle', x: PsChartScaleService.categoryX(position, steps.length, plot, true), y: height - 6, children: PsChartTextService.fit(steps[position].label, xLabels.maxWidth, PsChartConfig.axisLabelSize) }, steps[position].label))), rects.map((rect) => (_jsx(PsChartBar, { progress: progress, rect: rect }, rect.id)))] }), _jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: StyleSheet.absoluteFill, testID: 'ps-chart-touch' }) })] })) })] }));
 };

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

@@ -45,7 +45,10 @@ export declare const PsChartConfig: {
     readonly readoutLineHeight: 22;
     readonly readoutRowGap: 2;
     readonly readoutValueSize: 15;
+    readonly scrubActiveOffset: 8;
+    readonly scrubFailOffsetY: 10;
     readonly scrubLineWidth: 1;
+    readonly scrubTestId: "ps-chart-scrub";
     readonly skeletonBarHeights: readonly [0.45, 0.7, 0.55, 0.85, 0.65, 0.95, 0.75];
     readonly skeletonPulseMs: 900;
     readonly sparklineHeight: 40;

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

@@ -45,7 +45,10 @@ export const PsChartConfig = {
     readoutLineHeight: 22,
     readoutRowGap: 2,
     readoutValueSize: 15,
+    scrubActiveOffset: 8,
+    scrubFailOffsetY: 10,
     scrubLineWidth: 1,
+    scrubTestId: 'ps-chart-scrub',
     skeletonBarHeights: [0.45, 0.7, 0.55, 0.85, 0.65, 0.95, 0.75],
     skeletonPulseMs: 900,
     sparklineHeight: 40,

package/dist/hooks/use-ps-chart-reveal.d.ts

@@ -1,2 +1,2 @@
 import { type SharedValue } from 'react-native-reanimated';
-export declare const usePsChartReveal: (signature: string) => SharedValue<number>;
+export declare const usePsChartReveal: (isReady: boolean, revealKey: string | undefined) => SharedValue<number>;

package/dist/hooks/use-ps-chart-reveal.js

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useSharedValue, withTiming } from 'react-native-reanimated';
 import { PsChartConfig } from '../constants/ps-chart-config';
 import { usePsMobileTheme } from './use-ps-mobile-theme';
-export const usePsChartReveal = (signature) => {
+export const usePsChartReveal = (isReady, revealKey) => {
     const { isReduceMotion: isReduced } = usePsMobileTheme();
     const progress = useSharedValue(isReduced ? 1 : 0);
     useEffect(() => {
@@ -10,8 +10,10 @@ export const usePsChartReveal = (signature) => {
             progress.set(1);
             return;
         }
+        if (!isReady)
+            return;
         progress.set(0);
         progress.set(withTiming(1, { duration: PsChartConfig.drawMs }));
-    }, [isReduced, progress, signature]);
+    }, [isReady, isReduced, progress, revealKey]);
     return progress;
 };

package/dist/hooks/use-ps-chart-scrub.js

@@ -1,23 +1,22 @@
-import { useMemo, useState } from 'react';
-import { PanResponder } from 'react-native';
+import { useState } from 'react';
+import { usePanGesture } from 'react-native-gesture-handler';
+import { PsChartConfig } from '../constants/ps-chart-config';
 import { PsChartScrubService } from '../services/ps-chart-scrub-service';
 export const usePsChartScrub = (count, isBand, plot) => {
     const [index, setIndex] = useState(null);
     const { bottom, left, right, top } = plot;
-    const panHandlers = useMemo(() => {
-        const area = { bottom, left, right, top };
-        const find = (x) => isBand
-            ? PsChartScrubService.bandIndex(x, area, count)
-            : PsChartScrubService.pointIndex(x, area, count);
-        return PanResponder.create({
-            onMoveShouldSetPanResponder: (_event, gesture) => Math.abs(gesture.dx) > Math.abs(gesture.dy),
-            onPanResponderGrant: (event) => setIndex(find(event.nativeEvent.locationX)),
-            onPanResponderMove: (event) => setIndex(find(event.nativeEvent.locationX)),
-            onPanResponderRelease: () => setIndex(null),
-            onPanResponderTerminate: () => setIndex(null),
-            onPanResponderTerminationRequest: () => true,
-            onStartShouldSetPanResponder: () => true,
-        }).panHandlers;
-    }, [bottom, count, isBand, left, right, top]);
-    return { index, panHandlers };
+    const area = { bottom, left, right, top };
+    const find = (x) => isBand
+        ? PsChartScrubService.bandIndex(x, area, count)
+        : PsChartScrubService.pointIndex(x, area, count);
+    const gesture = usePanGesture({
+        activeOffsetX: [-PsChartConfig.scrubActiveOffset, PsChartConfig.scrubActiveOffset],
+        failOffsetY: [-PsChartConfig.scrubFailOffsetY, PsChartConfig.scrubFailOffsetY],
+        onActivate: (event) => setIndex(find(event.x)),
+        onFinalize: () => setIndex(null),
+        onUpdate: (event) => setIndex(find(event.x)),
+        runOnJS: true,
+        testID: PsChartConfig.scrubTestId,
+    });
+    return { gesture, index };
 };

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

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

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

@@ -1,17 +1,25 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { usePsChangeQueue, usePsOptimisticRows } from '@pallasoft/ps-utilities/react';
 import { PsInfiniteDataService } from '../services/ps-infinite-data-service';
-export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onSettled, onWriteFailed, refreshKey, }) => {
+export const usePsInfiniteData = ({ getKey, isEnabled = true, key, keepPreviousOnKeyChange = false, loadPage, onSettled, onWriteFailed, refreshKey, }) => {
     const [state, setState] = useState(() => PsInfiniteDataService.initial());
     const [isSaving, setIsSaving] = useState(false);
+    const [isRefreshing, setIsRefreshing] = useState(false);
     const isSavingRef = useRef(false);
     const submittedRef = useRef(0);
     const stateRef = useRef(state);
     const committedRef = useRef([]);
     const versionRef = useRef(0);
-    const latestRef = useRef({ getKey, loadPage, onSettled, onWriteFailed });
+    const latestRef = useRef({
+        getKey,
+        keepPreviousOnKeyChange,
+        loadPage,
+        onSettled,
+        onWriteFailed,
+    });
+    const loadedKeyRef = useRef(key);
     useEffect(() => {
-        latestRef.current = { getKey, loadPage, onSettled, onWriteFailed };
+        latestRef.current = { getKey, keepPreviousOnKeyChange, loadPage, onSettled, onWriteFailed };
     });
     const commit = useCallback((next) => {
         stateRef.current = next(stateRef.current);
@@ -21,15 +29,17 @@ export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onS
         isSavingRef.current = value;
         setIsSaving(value);
     }, []);
-    const fetchFirst = useCallback(async (isSilent) => {
+    const fetchFirst = useCallback(async (isSilent, isTracked) => {
         versionRef.current += 1;
         const version = versionRef.current;
         if (!isSilent)
             commit(() => PsInfiniteDataService.initial());
+        setIsRefreshing(isTracked);
         try {
             const page = await latestRef.current.loadPage(null);
             if (version !== versionRef.current)
                 return;
+            setIsRefreshing(false);
             commit(() => ({
                 error: false,
                 isLoading: false,
@@ -42,6 +52,7 @@ export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onS
         catch {
             if (version !== versionRef.current)
                 return;
+            setIsRefreshing(false);
             commit((current) => ({ ...current, error: true, isLoading: false, isLoadingMore: false }));
         }
     }, [commit]);
@@ -83,10 +94,14 @@ export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onS
         setSaving(false);
         if (!isEnabled) {
             versionRef.current += 1;
+            setIsRefreshing(false);
             commit(() => PsInfiniteDataService.initial());
             return undefined;
         }
-        void fetchFirst(false);
+        const isKept = stateRef.current.items.length > 0 &&
+            PsInfiniteDataService.keepsPrevious(latestRef.current.keepPreviousOnKeyChange, loadedKeyRef.current, key);
+        loadedKeyRef.current = key;
+        void fetchFirst(isKept, isKept);
         return () => {
             versionRef.current += 1;
         };
@@ -125,7 +140,7 @@ export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onS
             commit((value) => ({ ...value, error: true, isLoadingMore: false }));
         }
     }, [commit]);
-    const refresh = useCallback(() => fetchFirst(true), [fetchFirst]);
+    const refresh = useCallback(() => fetchFirst(true, false), [fetchFirst]);
     const apply = useCallback((rows, updates) => PsInfiniteDataService.apply(rows, updates), []);
     const optimistic = usePsOptimisticRows({
         apply,
@@ -184,9 +199,10 @@ export const usePsInfiniteData = ({ getKey, isEnabled = true, key, loadPage, onS
         hasMore: PsInfiniteDataService.hasMore(state),
         isLoading: state.isLoading,
         isLoadingMore: state.isLoadingMore,
+        isRefreshing,
         items: optimistic.rows,
         loadMore,
         refresh,
         write,
-    }), [loadMore, optimistic.rows, refresh, state, write]);
+    }), [isRefreshing, loadMore, optimistic.rows, refresh, state, write]);
 };

package/dist/hooks/use-ps-keyboard-height.d.ts

@@ -0,0 +1 @@
+export declare const usePsKeyboardHeight: () => number;

package/dist/hooks/use-ps-keyboard-height.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+export const usePsKeyboardHeight = () => {
+    const [height, setHeight] = useState(0);
+    useEffect(() => {
+        const show = Keyboard.addListener('keyboardWillShow', (event) => setHeight(event.endCoordinates.height));
+        const hide = Keyboard.addListener('keyboardWillHide', () => setHeight(0));
+        return () => {
+            show.remove();
+            hide.remove();
+        };
+    }, []);
+    return height;
+};

package/dist/interfaces/ps-chart-scrub-result.d.ts

@@ -1,5 +1,5 @@
-import type { GestureResponderHandlers } from 'react-native';
+import type { PanGesture } from 'react-native-gesture-handler';
 export interface PsChartScrubResult {
+    gesture: PanGesture;
     index: number | null;
-    panHandlers: GestureResponderHandlers;
 }

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

@@ -2,6 +2,7 @@ import type { PsInfinitePage } from './ps-infinite-page';
 export interface PsInfiniteDataOptions<T> {
     getKey: (item: T) => string;
     isEnabled?: boolean;
+    keepPreviousOnKeyChange?: boolean | ((previousKey: string, nextKey: string) => boolean);
     key: string;
     loadPage: (cursor: string | null) => Promise<PsInfinitePage<T>>;
     onSettled?: () => Promise<unknown>;

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

@@ -5,6 +5,7 @@ export interface PsInfiniteDataResult<T> {
     hasMore: boolean;
     isLoading: boolean;
     isLoadingMore: boolean;
+    isRefreshing: boolean;
     items: T[];
     loadMore: () => Promise<void>;
     refresh: () => Promise<void>;

package/dist/interfaces/ps-menu-popup-insets.d.ts

@@ -0,0 +1,4 @@
+export interface PsMenuPopupInsets {
+    bottom: number;
+    top: number;
+}

package/dist/interfaces/ps-menu-popup-insets.js

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

package/dist/services/ps-chart-series-service.d.ts

@@ -7,5 +7,4 @@ export declare class PsChartSeriesService {
     static stackedValues(data: PsAreaChartDatum[], series: PsCartesianChartSeries[]): number[];
     static color({ count, explicit, index, theme }: PsChartPaletteInput): string;
     static isEmpty(data: PsAreaChartDatum[], series: PsCartesianChartSeries[]): boolean;
-    static signature(kind: string, data: PsAreaChartDatum[], series: PsCartesianChartSeries[]): string;
 }

package/dist/services/ps-chart-series-service.js

@@ -28,7 +28,4 @@ export class PsChartSeriesService {
     static isEmpty(data, series) {
         return PsChartSeriesService.values(data, series).every((value) => value === 0);
     }
-    static signature(kind, data, series) {
-        return `${kind}:${PsChartSeriesService.values(data, series).join(',')}`;
-    }
 }

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

@@ -4,5 +4,6 @@ export declare class PsInfiniteDataService {
     static initial<T>(): PsInfiniteDataState<T>;
     static merge<T>(existing: T[], incoming: T[], getKey: (item: T) => string): T[];
     static apply<T>(rows: T[], updates: PsInfiniteDataUpdate<T>[]): T[];
+    static keepsPrevious(option: boolean | ((previousKey: string, nextKey: string) => boolean), previousKey: string, nextKey: string): boolean;
     static hasMore<T>(state: PsInfiniteDataState<T>): boolean;
 }

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

@@ -16,6 +16,9 @@ export class PsInfiniteDataService {
     static apply(rows, updates) {
         return updates.reduce((current, update) => update(current), rows);
     }
+    static keepsPrevious(option, previousKey, nextKey) {
+        return typeof option === 'boolean' ? option : option(previousKey, nextKey);
+    }
     static hasMore(state) {
         return state.nextCursor !== null;
     }

package/dist/services/ps-menu-popup-service.d.ts

@@ -1,6 +1,7 @@
 import type { PsMenuAnchor } from '../interfaces/ps-menu-anchor';
+import type { PsMenuPopupInsets } from '../interfaces/ps-menu-popup-insets';
 import type { PsMenuPopupLayout } from '../interfaces/ps-menu-popup-layout';
 import type { PsMenuPopupWindow } from '../interfaces/ps-menu-popup-window';
 export declare class PsMenuPopupService {
-    static layout(anchor: PsMenuAnchor, window: PsMenuPopupWindow, contentHeight: number, contentWidth: number, isFullWidth: boolean): PsMenuPopupLayout;
+    static layout(anchor: PsMenuAnchor, window: PsMenuPopupWindow, insets: PsMenuPopupInsets, contentHeight: number, contentWidth: number, isFullWidth: boolean): PsMenuPopupLayout;
 }

package/dist/services/ps-menu-popup-service.js

@@ -1,12 +1,12 @@
 import { PsMenuPopupConfig } from '../constants/ps-menu-popup-config';
 export class PsMenuPopupService {
-    static layout(anchor, window, contentHeight, contentWidth, isFullWidth) {
+    static layout(anchor, window, insets, contentHeight, contentWidth, isFullWidth) {
         const margin = PsMenuPopupConfig.edgeMargin;
         const gap = PsMenuPopupConfig.anchorGap;
         const width = isFullWidth ? anchor.width : undefined;
         const menuWidth = width === undefined ? contentWidth : width;
-        const below = window.height - (anchor.y + anchor.height) - gap - margin;
-        const above = anchor.y - gap - margin;
+        const below = window.height - (anchor.y + anchor.height) - gap - Math.max(margin, insets.bottom);
+        const above = anchor.y - gap - Math.max(margin, insets.top);
         const isBelow = contentHeight <= below || below >= above;
         const room = isBelow ? below : above;
         const height = Math.min(contentHeight, Math.max(room, 0));

package/dist/services/ps-sheet-service.d.ts

@@ -6,6 +6,7 @@ export declare class PsSheetService {
     static handlesInset(os: string): boolean;
     static bottomPadding(isFloating: boolean, bottomInset: number): number;
     static fittedHeight(headerHeight: number, bodyHeight: number, windowHeight: number): number;
+    static raisedHeight(height: number, keyboardHeight: number, windowHeight: number, topInset: number): number;
     static closeAction(label: string | undefined, onPress: () => void): PsSheetAction | undefined;
     static isActionInactive(action: PsSheetAction): boolean;
     static actionOpacity(action: PsSheetAction, isPressed: boolean): number;

package/dist/services/ps-sheet-service.js

@@ -13,6 +13,9 @@ export class PsSheetService {
     static fittedHeight(headerHeight, bodyHeight, windowHeight) {
         return Math.min(Math.ceil(headerHeight + bodyHeight), PsSheetService.maxHeight(windowHeight));
     }
+    static raisedHeight(height, keyboardHeight, windowHeight, topInset) {
+        return Math.min(height + keyboardHeight, windowHeight - topInset);
+    }
     static closeAction(label, onPress) {
         return label === undefined ? undefined : { label, onPress };
     }

package/jest-setup.js

@@ -103,6 +103,10 @@ jest.mock('expo-router', () => {
 	Stack.Toolbar.Button = ({ children, disabled, onPress }) =>
 		React.createElement(View, { accessibilityLabel: children, disabled, onPress });
 	Stack.Toolbar.Spacer = () => null;
+	Stack.Toolbar.Menu = ({ accessibilityLabel, children }) =>
+		React.createElement(View, { accessibilityLabel, testID: 'stack-toolbar-menu' }, children);
+	Stack.Toolbar.MenuAction = ({ children, onPress }) =>
+		React.createElement(View, { accessibilityLabel: children, onPress });
 
 	const ThemeProvider = ({ children }) => React.createElement(React.Fragment, null, children);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.10.1",
+	"version": "1.11.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",