@pallasoft/ps-mobile-components 1.12.0 → 1.13.1

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-chart-bar/ps-chart-bar.js

@@ -1,12 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { Rect } from 'react-native-svg';
-import { PsChartConfig } from '../../constants/ps-chart-config';
+import { G, Rect } from 'react-native-svg';
+import { PsChartBarCorner } from '../../constants/ps-chart-bar-corner';
+import { PsChartBarService } from '../../services/ps-chart-bar-service';
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 export const PsChartBar = ({ progress, rect }) => {
+    const radius = PsChartBarService.radius(rect);
+    const hasFlatBase = rect.corner === PsChartBarCorner.Value && radius > 0;
     const animatedProps = useAnimatedProps(() => ({
         height: rect.height * progress.value,
         y: rect.isNegative ? rect.y : rect.y + rect.height * (1 - progress.value),
     }));
-    return (_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: Math.min(PsChartConfig.barRadius, rect.width / 2), width: rect.width, x: rect.x, y: rect.y }));
+    const baseProps = useAnimatedProps(() => {
+        const height = Math.min(radius, rect.height * progress.value);
+        return { height, y: rect.isNegative ? rect.y : rect.y + rect.height - height };
+    });
+    return (_jsxs(G, { children: [_jsx(AnimatedRect, { animatedProps: animatedProps, fill: rect.color, height: rect.height, rx: radius, width: rect.width, x: rect.x, y: rect.y }), hasFlatBase ? (_jsx(AnimatedRect, { animatedProps: baseProps, fill: rect.color, height: Math.min(radius, rect.height), width: rect.width, x: rect.x, y: rect.isNegative ? rect.y : rect.y + rect.height - Math.min(radius, rect.height) })) : null] }));
 };

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

@@ -7,6 +7,7 @@ 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';
@@ -72,7 +73,7 @@ export const PsDocumentViewer = ({ initialIndex = 0, isOpen, items, labels, onCl
         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,

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

@@ -100,6 +100,16 @@ export const PsDocumentZoomImage = ({ name, onDismiss, onError, onZoomChange, se
         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: [

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { View } from 'react-native';
-import Svg from 'react-native-svg';
+import Svg, { G } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
 import { PsChartSkeletonVariant } from '../../constants/ps-chart-skeleton-variant';
 import { usePsChartReveal } from '../../hooks/use-ps-chart-reveal';
@@ -12,6 +12,7 @@ import { PsChartDonutService } from '../../services/ps-chart-donut-service';
 import { PsChartEmptyState } from '../ps-chart-empty-state/ps-chart-empty-state';
 import { PsChartLegend } from '../ps-chart-legend/ps-chart-legend';
 import { PsChartSkeleton } from '../ps-chart-skeleton/ps-chart-skeleton';
+import { PsDonutReveal } from '../ps-donut-reveal/ps-donut-reveal';
 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, revealKey, }) => {
@@ -19,6 +20,7 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
     const { onLayout, width } = usePsChartWidth();
     const fill = usePsWidgetFill();
     const [selected, setSelected] = useState(null);
+    const maskId = `donut${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
     const progress = usePsChartReveal(!isLoading && width > 0, revealKey);
     if (isLoading)
         return _jsx(PsChartSkeleton, { height: height, variant: PsChartSkeletonVariant.Donut });
@@ -27,7 +29,6 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
     const slices = PsChartDonutService.slices(data, theme.chart, size);
     if (slices.length === 0)
         return _jsx(PsChartEmptyState, { height: height, label: emptyLabel });
-    const circumference = PsChartDonutService.circumference(size);
     const chosen = selected === null ? null : data[selected];
     const readValue = chosen === null
         ? centerValue
@@ -47,7 +48,7 @@ export const PsDonutChart = ({ centerLabel, centerValue, data, emptyLabel, forma
             justifyContent: 'center',
             minHeight: height + fill,
             rowGap: PsChartConfig.donutGap,
-        }, testID: 'ps-donut-chart', children: [_jsxs(View, { style: { height: size, width: size }, children: [_jsx(Svg, { height: size, width: size, children: slices.map((slice, index) => (_jsx(PsDonutSlice, { circumference: circumference, isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), progress: progress, size: size, slice: slice }, slice.id))) }), _jsxs(View, { pointerEvents: 'none', style: {
+        }, testID: 'ps-donut-chart', children: [_jsxs(View, { style: { height: size, width: size }, children: [_jsxs(Svg, { height: size, width: size, children: [_jsx(PsDonutReveal, { id: maskId, progress: progress, size: size }), _jsx(G, { mask: `url(#${maskId})`, children: slices.map((slice, index) => slice.path === '' ? null : (_jsx(PsDonutSlice, { isDimmed: selected !== null && selected !== index, onPress: () => setSelected(selected === index ? null : index), slice: slice }, slice.id))) })] }), _jsxs(View, { pointerEvents: 'none', style: {
                             alignItems: 'center',
                             bottom: 0,
                             justifyContent: 'center',

package/dist/components/ps-donut-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './ps-donut-reveal';

package/dist/components/ps-donut-reveal/index.js

@@ -0,0 +1 @@
+export * from './ps-donut-reveal';

package/dist/components/ps-donut-reveal/ps-donut-reveal-props.d.ts

@@ -0,0 +1,6 @@
+import type { SharedValue } from 'react-native-reanimated';
+export interface PsDonutRevealProps {
+    id: string;
+    progress: SharedValue<number>;
+    size: number;
+}

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

@@ -0,0 +1,2 @@
+import type { PsDonutRevealProps } from './ps-donut-reveal-props';
+export declare const PsDonutReveal: ({ id, progress, size }: PsDonutRevealProps) => import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Circle, Defs, Mask } from 'react-native-svg';
+import { PsChartConfig } from '../../constants/ps-chart-config';
+import { PsChartDonutService } from '../../services/ps-chart-donut-service';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+export const PsDonutReveal = ({ id, progress, size }) => {
+    const centre = size / 2;
+    const circumference = PsChartDonutService.circumference(size);
+    const animatedProps = useAnimatedProps(() => ({
+        strokeDasharray: [progress.value * circumference, circumference],
+    }));
+    return (_jsx(Defs, { children: _jsx(Mask, { height: size, id: id, maskUnits: 'userSpaceOnUse', width: size, x: 0, y: 0, children: _jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: 'white', strokeDasharray: [0, circumference], strokeWidth: PsChartConfig.donutThickness + PsChartConfig.donutRevealOverlap }) }) }));
+};

package/dist/components/ps-donut-slice/ps-donut-slice-props.d.ts

@@ -1,10 +1,6 @@
-import type { SharedValue } from 'react-native-reanimated';
 import type { PsDonutSliceData } from '../../interfaces/ps-donut-slice-data';
 export interface PsDonutSliceProps {
-    circumference: number;
     isDimmed: boolean;
     onPress: () => void;
-    progress: SharedValue<number>;
-    size: number;
     slice: PsDonutSliceData;
 }

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

@@ -1,2 +1,2 @@
 import type { PsDonutSliceProps } from './ps-donut-slice-props';
-export declare const PsDonutSlice: ({ circumference, isDimmed, onPress, progress, size, slice, }: PsDonutSliceProps) => import("react").JSX.Element;
+export declare const PsDonutSlice: ({ isDimmed, onPress, slice }: PsDonutSliceProps) => import("react").JSX.Element;

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

@@ -1,16 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import { Circle } from 'react-native-svg';
+import { Path } from 'react-native-svg';
 import { PsChartConfig } from '../../constants/ps-chart-config';
-import { PsChartDonutService } from '../../services/ps-chart-donut-service';
-const AnimatedCircle = Animated.createAnimatedComponent(Circle);
-export const PsDonutSlice = ({ circumference, isDimmed, onPress, progress, size, slice, }) => {
-    const centre = size / 2;
-    const animatedProps = useAnimatedProps(() => ({
-        strokeDasharray: [
-            Math.max(0, Math.min(slice.dashLength, progress.value * circumference - slice.start)),
-            circumference,
-        ],
-    }));
-    return (_jsx(AnimatedCircle, { animatedProps: animatedProps, cx: centre, cy: centre, fill: 'none', onPress: onPress, opacity: isDimmed ? 0.4 : 1, origin: `${centre}, ${centre}`, r: PsChartDonutService.radius(size), rotation: -90, stroke: slice.color, strokeDasharray: [slice.dashLength, circumference], strokeDashoffset: slice.dashOffset, strokeWidth: PsChartConfig.donutThickness }));
-};
+export const PsDonutSlice = ({ isDimmed, onPress, slice }) => (_jsx(Path, { d: slice.path, fill: slice.color, fillRule: 'evenodd', onPress: onPress, opacity: isDimmed ? PsChartConfig.donutDimmedOpacity : 1 }));

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;

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

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

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

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import type { PsIconKey } from '@pallasoft/ps-icons';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsContentWidth } from '../../constants/ps-content-width';
 import type { PsMenuItem } from '../../interfaces/ps-menu-item';
 import type { PsBadgeTone } from '../../services/ps-badge-tone-service';
 import type { PsListVariant } from '../../services/ps-list-service';
@@ -26,6 +27,7 @@ export interface PsListSkeletonResolved {
 }
 export interface PsListProps {
     children: ReactNode;
+    contentWidth?: PsContentWidth;
     header?: ReactNode;
     isLoading?: boolean;
     onRefresh?: () => Promise<void>;

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

@@ -1,2 +1,2 @@
 import type { PsListProps } from './ps-list-props';
-export declare const PsList: ({ children, header, isLoading, onRefresh, skeleton, style, variant, }: PsListProps) => import("react").JSX.Element;
+export declare const PsList: ({ children, contentWidth, header, isLoading, onRefresh, skeleton, style, variant, }: PsListProps) => import("react").JSX.Element;

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

@@ -3,4 +3,4 @@ import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsListService } from '../../services/ps-list-service';
 import { PsScreen } from '../ps-screen/ps-screen';
 import { PsSkeletonList } from '../ps-skeleton/ps-skeleton-list';
-export const PsList = ({ children, header, isLoading = false, onRefresh, skeleton, style, variant = 'grouped', }) => (_jsx(PsScreen, { gap: PsLayoutConfig.listGap, hasGutter: PsListService.hasGutter(variant), header: header, onRefresh: onRefresh, style: style, children: isLoading ? _jsx(PsSkeletonList, { layout: skeleton }) : children }));
+export const PsList = ({ children, contentWidth, header, isLoading = false, onRefresh, skeleton, style, variant = 'grouped', }) => (_jsx(PsScreen, { contentWidth: contentWidth, gap: PsLayoutConfig.listGap, hasGutter: PsListService.hasGutter(variant), header: header, onRefresh: onRefresh, style: style, children: isLoading ? _jsx(PsSkeletonList, { layout: skeleton }) : children }));

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

@@ -4,6 +4,7 @@ import { Modal, Pressable, ScrollView, StyleSheet, useWindowDimensions } from 'r
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { PsOrientationConfig } from '../../constants/ps-orientation-config';
 import { usePsMaterialScheme } from '../../hooks/use-ps-material-scheme';
 import { usePsMenuPopupReveal } from '../../hooks/use-ps-menu-popup-reveal';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
@@ -21,7 +22,7 @@ export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, })
         : PsMenuPopupService.layout(anchor, window, insets, size.height, size.width, isFullWidth);
     const container = PsMenuPopupStyleService.container(theme, scheme, 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) => {
+    return (_jsxs(Modal, { animationType: isMaterial ? 'none' : 'fade', navigationBarTranslucent: true, onRequestClose: onClose, statusBarTranslucent: true, supportedOrientations: PsOrientationConfig.all, 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,
@@ -36,7 +37,7 @@ export const PsMenuPopup = ({ anchor, children, isFullWidth = false, onClose, })
                         elevation: container.elevation,
                         left: layout.left,
                         maxHeight: layout.maxHeight,
-                        maxWidth: PsMenuPopupConfig.maxWidth,
+                        maxWidth: Math.min(PsMenuPopupConfig.maxWidth, layout.maxWidth),
                         minWidth: isFullWidth ? undefined : PsMenuPopupConfig.minWidth,
                         overflow: 'hidden',
                         position: 'absolute',

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

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { PsContentWidth } from '../../constants/ps-content-width';
 export interface PsScreenProps {
     children: ReactNode;
+    contentWidth?: PsContentWidth;
     gap?: number;
     hasGutter?: boolean;
     header?: ReactNode;

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

@@ -1,2 +1,2 @@
 import type { PsScreenProps } from './ps-screen-props';
-export declare const PsScreen: ({ children, gap, hasGutter, header, onRefresh, style, }: PsScreenProps) => import("react").JSX.Element;
+export declare const PsScreen: ({ children, contentWidth, gap, hasGutter, header, onRefresh, style, }: PsScreenProps) => import("react").JSX.Element;

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

@@ -1,24 +1,31 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Platform, RefreshControl, ScrollView, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsContentWidth } from '../../constants/ps-content-width';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsSelectionBarConfig } from '../../constants/ps-selection-bar-config';
 import { PsScrollContext } from '../../contexts/ps-scroll-context';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { usePsRefresh } from '../../hooks/use-ps-refresh';
 import { usePsScrollHost } from '../../hooks/use-ps-scroll-host';
 import { usePsTabBar } from '../../hooks/use-ps-tab-bar';
 import { usePsTopInset } from '../../hooks/use-ps-top-inset';
+import { PsLayoutService } from '../../services/ps-layout-service';
 import { PsScreenService } from '../../services/ps-screen-service';
-export const PsScreen = ({ children, gap = PsLayoutConfig.listGap, hasGutter = true, header, onRefresh, style, }) => {
+export const PsScreen = ({ children, contentWidth = PsContentWidth.readable, gap = PsLayoutConfig.listGap, hasGutter = true, header, onRefresh, style, }) => {
     const theme = usePsMobileTheme();
     const insets = useSafeAreaInsets();
     const topInset = usePsTopInset();
     const { hasTabBar, isHidden: isTabBarHidden } = usePsTabBar();
     const { isRefreshing, refresh } = usePsRefresh(onRefresh);
     const host = usePsScrollHost();
-    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(ScrollView, { contentContainerStyle: PsScreenService.content({
-                    bottom: PsScreenService.bottomInset(insets.bottom, hasTabBar, isTabBarHidden),
-                    top: topInset,
-                }, Platform.OS === 'ios', hasGutter, gap, isTabBarHidden ? PsSelectionBarConfig.height : 0), contentInsetAdjustmentBehavior: 'automatic', keyboardDismissMode: 'interactive', onContentSizeChange: host.onContentSizeChange, onLayout: host.onLayout, onScroll: host.onScroll, keyboardShouldPersistTaps: 'handled', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), ref: host.scrollRef, scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, showsVerticalScrollIndicator: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-screen', children: _jsxs(PsScrollContext, { value: host.context, children: [header, children] }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [PsScreenService.statusBarScrim(topInset), { backgroundColor: theme.background }], testID: 'ps-screen-status-bar-scrim' }))] }));
+    const layoutClass = usePsLayoutClass();
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(ScrollView, { contentContainerStyle: [
+                    PsScreenService.content({
+                        bottom: PsScreenService.bottomInset(insets.bottom, hasTabBar, isTabBarHidden),
+                        top: topInset,
+                    }, Platform.OS === 'ios', hasGutter, gap, isTabBarHidden ? PsSelectionBarConfig.height : 0),
+                    PsLayoutService.frame(layoutClass, contentWidth),
+                ], contentInsetAdjustmentBehavior: 'automatic', keyboardDismissMode: 'interactive', onContentSizeChange: host.onContentSizeChange, onLayout: host.onLayout, onScroll: host.onScroll, keyboardShouldPersistTaps: 'handled', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), ref: host.scrollRef, scrollEnabled: !host.isLocked, scrollEventThrottle: PsLayoutConfig.scrollEventThrottle, showsVerticalScrollIndicator: false, style: [{ backgroundColor: theme.background, flex: 1 }, style], testID: 'ps-screen', children: _jsxs(PsScrollContext, { value: host.context, children: [header, children] }) }), header === undefined ? null : (_jsx(View, { pointerEvents: 'none', style: [PsScreenService.statusBarScrim(topInset), { backgroundColor: theme.background }], testID: 'ps-screen-status-bar-scrim' }))] }));
 };

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

@@ -4,6 +4,7 @@ import { Platform, ScrollView, View, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsLayoutConfig } from '../../constants/ps-layout-config';
 import { PsSheetMeasureContext } from '../../contexts/ps-sheet-measure-context';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsSheetService } from '../../services/ps-sheet-service';
 import { PsSheetHeader } from '../ps-sheet-header/ps-sheet-header';
@@ -11,11 +12,12 @@ export const PsSheetContent = ({ children, footer, header, isScrollable }) => {
     const theme = usePsMobileTheme();
     const insets = useSafeAreaInsets();
     const { height } = useWindowDimensions();
+    const layoutClass = usePsLayoutClass();
     const report = useContext(PsSheetMeasureContext);
     const [headerHeight, setHeaderHeight] = useState(0);
     const [bodyHeight, setBodyHeight] = useState(0);
     const fitted = headerHeight > 0 && bodyHeight > 0
-        ? PsSheetService.fittedHeight(headerHeight, bodyHeight, height)
+        ? PsSheetService.fittedHeight(headerHeight, bodyHeight, height, layoutClass)
         : null;
     useEffect(() => {
         if (fitted !== null)
@@ -35,6 +37,6 @@ export const PsSheetContent = ({ children, footer, header, isScrollable }) => {
     return (_jsxs(View, { style: {
             backgroundColor: theme.background,
             height: fitted === null ? undefined : fitted,
-            maxHeight: PsSheetService.maxHeight(height),
+            maxHeight: PsSheetService.maxHeight(height, layoutClass),
         }, testID: 'ps-sheet', children: [_jsx(View, { onLayout: (event) => setHeaderHeight(event.nativeEvent.layout.height), children: _jsx(PsSheetHeader, { ...header }) }), isScrollable ? (_jsx(ScrollView, { automaticallyAdjustKeyboardInsets: true, contentContainerStyle: contentStyle, keyboardDismissMode: 'interactive', keyboardShouldPersistTaps: 'handled', onContentSizeChange: (_width, contentHeight) => setBodyHeight(contentHeight), style: { flexGrow: 0 }, children: body })) : (_jsx(View, { onLayout: (event) => setBodyHeight(event.nativeEvent.layout.height), style: contentStyle, children: body }))] }));
 };

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

@@ -1,12 +1,14 @@
 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 { frame, interactiveDismissDisabled, presentationBackground, presentationDetents, presentationDragIndicator, presentationSizing, } from '@expo/ui/swift-ui/modifiers';
+import { Platform, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { PsLayoutClass } from '../../constants/ps-layout-class';
 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 { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsSheetService } from '../../services/ps-sheet-service';
 import { PsHost } from '../ps-host/ps-host';
@@ -18,6 +20,8 @@ export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose,
     const keyboardHeight = usePsKeyboardHeight();
     const window = useWindowDimensions();
     const insets = useSafeAreaInsets();
+    const isForm = usePsLayoutClass() === PsLayoutClass.regular &&
+        PsSheetService.supportsFormSizing(Platform.Version);
     const detentHeight = height > 0 ? PsSheetService.raisedHeight(height, keyboardHeight, window.height, insets.top) : 0;
     isOpenRef.current = isOpen;
     isBlockedRef.current = isDismissBlocked;
@@ -33,9 +37,15 @@ export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose,
                     onClose();
                 }
             }, children: _jsx(Group, { modifiers: [
-                    frame({ alignment: 'top', maxHeight: Infinity, maxWidth: Infinity }),
-                    presentationDetents(detentHeight > 0 ? [{ height: detentHeight }] : ['medium']),
-                    presentationDragIndicator('visible'),
+                    isForm
+                        ? frame({ alignment: 'top', maxWidth: Infinity })
+                        : frame({ alignment: 'top', maxHeight: Infinity, maxWidth: Infinity }),
+                    ...(isForm
+                        ? [presentationSizing('form', { fitted: { horizontal: false, vertical: true } })]
+                        : [
+                            presentationDetents(detentHeight > 0 ? [{ height: detentHeight }] : ['medium']),
+                            presentationDragIndicator('visible'),
+                        ]),
                     presentationBackground(theme.background),
                     interactiveDismissDisabled(isDismissBlocked),
                 ], children: _jsx(RNHostView, { matchContents: { vertical: true }, children: _jsx(PsNativeTreeContext.Provider, { value: false, children: _jsx(PsSheetMeasureContext.Provider, { value: measure, children: children }) }) }) }) }) }));

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

@@ -1,17 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, Pressable, StyleSheet, View } from 'react-native';
+import { Modal, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { PsLayoutClass } from '../../constants/ps-layout-class';
+import { PsOrientationConfig } from '../../constants/ps-orientation-config';
 import { PsSheetConfig } from '../../constants/ps-sheet-config';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsSheetService } from '../../services/ps-sheet-service';
 export const PsSheetPresenter = ({ children, isDismissBlocked, isOpen, onClose, }) => {
     const theme = usePsMobileTheme();
-    return (_jsx(Modal, { animationType: 'slide', onRequestClose: isDismissBlocked ? undefined : onClose, statusBarTranslucent: true, transparent: true, visible: isOpen, children: _jsxs(View, { style: {
+    const layoutClass = usePsLayoutClass();
+    const window = useWindowDimensions();
+    const isRegular = layoutClass === PsLayoutClass.regular;
+    const maxWidth = PsSheetService.fittedMaxWidth(window.width, layoutClass);
+    return (_jsx(Modal, { animationType: 'slide', onRequestClose: isDismissBlocked ? undefined : onClose, statusBarTranslucent: true, supportedOrientations: PsOrientationConfig.all, transparent: true, visible: isOpen, children: _jsxs(View, { style: {
                 backgroundColor: theme.overlay,
+                alignItems: isRegular ? 'center' : undefined,
                 flex: 1,
-                justifyContent: 'flex-end',
+                justifyContent: isRegular ? 'center' : 'flex-end',
             }, children: [_jsx(Pressable, { onPress: isDismissBlocked ? undefined : onClose, style: StyleSheet.absoluteFill, testID: 'ps-sheet-scrim' }), _jsx(View, { style: {
                         backgroundColor: theme.background,
+                        borderBottomLeftRadius: isRegular ? PsSheetConfig.cornerRadius : 0,
+                        borderBottomRightRadius: isRegular ? PsSheetConfig.cornerRadius : 0,
                         borderTopLeftRadius: PsSheetConfig.cornerRadius,
                         borderTopRightRadius: PsSheetConfig.cornerRadius,
+                        maxWidth,
                         overflow: 'hidden',
+                        width: isRegular ? '100%' : undefined,
                     }, children: children })] }) }));
 };

package/dist/components/ps-sortable-grid/ps-sortable-grid.js

@@ -5,14 +5,17 @@ import { useSharedValue } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PsSortableGridConfig } from '../../constants/ps-sortable-grid-config';
 import { PsScrollContext } from '../../contexts/ps-scroll-context';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsHapticService } from '../../services/ps-haptic-service';
+import { PsLayoutService } from '../../services/ps-layout-service';
 import { PsSortableGridService } from '../../services/ps-sortable-grid-service';
 import { PsSortableItem } from './ps-sortable-item';
 export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels, onReorder, renderItem, }) => {
     const scroll = useContext(PsScrollContext);
     const { hasHaptics } = usePsMobileTheme();
     const insets = useSafeAreaInsets();
+    const capacity = PsLayoutService.gridUnits(usePsLayoutClass());
     const { height: windowHeight } = useWindowDimensions();
     const [order, setOrder] = useState(items);
     const [activeId, setActiveId] = useState(null);
@@ -30,7 +33,7 @@ export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels,
         translationY: 0,
     });
     const ids = useMemo(() => PsSortableGridService.ids(order), [order]);
-    const rects = useMemo(() => PsSortableGridService.layout(order.map((item) => getItemSpan(item)), PsSortableGridService.heights(ids, measured), width), [getItemSpan, ids, measured, order, width]);
+    const rects = useMemo(() => PsSortableGridService.layout(order.map((item) => getItemSpan(item)), PsSortableGridService.heights(ids, measured), width, capacity), [capacity, getItemSpan, ids, measured, order, width]);
     const extras = useMemo(() => PsSortableGridService.extras(rects, PsSortableGridService.heights(ids, measured)), [ids, measured, rects]);
     const isReady = PsSortableGridService.isMeasured(ids, measured, width);
     const latest = useRef({ items, onReorder, order, rects, scroll, windowHeight, insets });
@@ -132,12 +135,12 @@ export const PsSortableGrid = ({ getItemSpan, isDisabled = false, items, labels,
         notify(next);
         PsHapticService.play('selection', hasHaptics);
     }, [hasHaptics]);
-    const measure = useCallback((id, total, renderedExtra) => {
-        const natural = PsSortableGridService.natural(total, renderedExtra);
+    const measure = useCallback((id, total, fill) => {
+        const natural = PsSortableGridService.natural(total, fill);
         setMeasured((current) => current[id] !== undefined &&
             Math.abs(current[id] - natural) < PsSortableGridConfig.measureTolerance
             ? current
             : { ...current, [id]: natural });
     }, []);
-    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, extra: extras[index], id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
+    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: { height: PsSortableGridService.contentHeight(rects) }, testID: PsSortableGridConfig.testId, children: order.map((item, index) => (_jsx(PsSortableItem, { canMoveDown: index < order.length - 1, canMoveUp: index > 0, dragX: dragX, dragY: dragY, extra: extras[index], id: item.id, isActive: item.id === activeId, isDisabled: isDisabled, isReady: isReady, label: item.label, labels: labels, onEnd: end, onMeasure: measure, onMove: moveBy, onStart: start, onUpdate: update, rect: rects[index], children: renderItem({ isActive: item.id === activeId, item }) }, item.id))) }));
 };