@pallasoft/ps-mobile-components 1.12.0 → 1.13.0

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

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

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

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

package/dist/components/ps-document-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-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 });

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

@@ -1,10 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children } from 'react';
+import { Children, useState } from 'react';
 import { View } from 'react-native';
 import { PsChartConfig } from '../../constants/ps-chart-config';
-export const PsWidgetGrid = ({ children }) => (_jsx(View, { style: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: PsChartConfig.kpiGap,
-        justifyContent: 'space-between',
-    }, children: Children.toArray(children).map((child, index) => (_jsx(View, { style: { flexBasis: '47.5%', flexGrow: 0, flexShrink: 1 }, children: child }, index))) }));
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
+import { PsLayoutService } from '../../services/ps-layout-service';
+export const PsWidgetGrid = ({ children }) => {
+    const layoutClass = usePsLayoutClass();
+    const [width, setWidth] = useState(0);
+    const itemWidth = PsLayoutService.widgetWidth(width, layoutClass, PsChartConfig.kpiGap);
+    return (_jsx(View, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: PsChartConfig.kpiGap,
+            justifyContent: itemWidth === undefined ? 'space-between' : 'flex-start',
+        }, children: Children.toArray(children).map((child, index) => (_jsx(View, { style: itemWidth === undefined
+                ? { flexBasis: PsLayoutService.widgetBasis(layoutClass), flexGrow: 0, flexShrink: 1 }
+                : { flexGrow: 0, flexShrink: 0, width: itemWidth }, children: child }, index))) }));
+};

package/dist/components/ps-widget-list/ps-widget-list-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 PsWidgetListProps {
     children: ReactNode;
+    contentWidth?: PsContentWidth;
     onRefresh?: () => Promise<void>;
     style?: StyleProp<ViewStyle>;
 }

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

@@ -1,2 +1,2 @@
 import type { PsWidgetListProps } from './ps-widget-list-props';
-export declare const PsWidgetList: ({ children, onRefresh, style }: PsWidgetListProps) => import("react").JSX.Element;
+export declare const PsWidgetList: ({ children, contentWidth, onRefresh, style, }: PsWidgetListProps) => import("react").JSX.Element;

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

@@ -1,14 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RefreshControl, ScrollView } from 'react-native';
+import { PsContentWidth } from '../../constants/ps-content-width';
 import { PsListConfig } from '../../constants/ps-list-config';
 import { PsMobileControlConfig } from '../../constants/ps-mobile-control-config';
+import { usePsLayoutClass } from '../../hooks/use-ps-layout-class';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { usePsRefresh } from '../../hooks/use-ps-refresh';
-export const PsWidgetList = ({ children, onRefresh, style }) => {
+import { PsLayoutService } from '../../services/ps-layout-service';
+export const PsWidgetList = ({ children, contentWidth = PsContentWidth.wide, onRefresh, style, }) => {
+    const layoutClass = usePsLayoutClass();
     const theme = usePsMobileTheme();
     const { isRefreshing, refresh } = usePsRefresh(onRefresh);
-    return (_jsx(ScrollView, { contentContainerStyle: {
-            gap: PsMobileControlConfig.rowSpacing,
-            padding: PsListConfig.contentInset,
-        }, contentInsetAdjustmentBehavior: 'automatic', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), style: [{ backgroundColor: theme.background, flex: 1 }, style], children: children }));
+    return (_jsx(ScrollView, { contentContainerStyle: [
+            {
+                gap: PsMobileControlConfig.rowSpacing,
+                padding: PsListConfig.contentInset,
+            },
+            PsLayoutService.frame(layoutClass, contentWidth),
+        ], contentInsetAdjustmentBehavior: 'automatic', refreshControl: onRefresh === undefined ? undefined : (_jsx(RefreshControl, { colors: [theme.primaryText], progressBackgroundColor: theme.surface, onRefresh: () => void refresh(), refreshing: isRefreshing, tintColor: theme.primary })), style: [{ backgroundColor: theme.background, flex: 1 }, style], children: children }));
 };

package/dist/constants/ps-content-width.d.ts

@@ -0,0 +1,6 @@
+export declare const PsContentWidth: {
+    readonly full: "full";
+    readonly readable: "readable";
+    readonly wide: "wide";
+};
+export type PsContentWidth = (typeof PsContentWidth)[keyof typeof PsContentWidth];

package/dist/constants/ps-content-width.js

@@ -0,0 +1,5 @@
+export const PsContentWidth = {
+    full: 'full',
+    readable: 'readable',
+    wide: 'wide',
+};

package/dist/constants/ps-document-search-config.d.ts

@@ -2,7 +2,6 @@ export declare const PsDocumentSearchConfig: {
     readonly activeAlpha: 0.9;
     readonly androidFieldRadius: 999;
     readonly barGap: 8;
-    readonly combiningMarkPattern: RegExp;
     readonly currentToken: "{current}";
     readonly fieldAlpha: 0.14;
     readonly fieldPaddingX: 12;
@@ -13,7 +12,5 @@ export declare const PsDocumentSearchConfig: {
     readonly rotateDown: "0deg";
     readonly rotateUp: "180deg";
     readonly scrollMargin: 48;
-    readonly termSeparatorPattern: RegExp;
     readonly totalToken: "{total}";
-    readonly wordSeparator: " ";
 };

package/dist/constants/ps-document-search-config.js

@@ -2,7 +2,6 @@ export const PsDocumentSearchConfig = {
     activeAlpha: 0.9,
     androidFieldRadius: 999,
     barGap: 8,
-    combiningMarkPattern: /\p{M}/gu,
     currentToken: '{current}',
     fieldAlpha: 0.14,
     fieldPaddingX: 12,
@@ -13,7 +12,5 @@ export const PsDocumentSearchConfig = {
     rotateDown: '0deg',
     rotateUp: '180deg',
     scrollMargin: 48,
-    termSeparatorPattern: /\s+/u,
     totalToken: '{total}',
-    wordSeparator: ' ',
 };

package/dist/constants/ps-layout-class-config.d.ts

@@ -0,0 +1,12 @@
+export declare const PsLayoutClassConfig: {
+    readonly compactGridUnits: 2;
+    readonly compactWidgetBasis: "47.5%";
+    readonly formSheetMaxHeightFraction: 0.8;
+    readonly formSheetWidth: 540;
+    readonly readableMaxWidth: 768;
+    readonly regularGridUnits: 4;
+    readonly regularMinHeight: 480;
+    readonly regularMinWidth: 600;
+    readonly regularWidgetBasis: "23%";
+    readonly wideMaxWidth: 1180;
+};

package/dist/constants/ps-layout-class-config.js

@@ -0,0 +1,12 @@
+export const PsLayoutClassConfig = {
+    compactGridUnits: 2,
+    compactWidgetBasis: '47.5%',
+    formSheetMaxHeightFraction: 0.8,
+    formSheetWidth: 540,
+    readableMaxWidth: 768,
+    regularGridUnits: 4,
+    regularMinHeight: 480,
+    regularMinWidth: 600,
+    regularWidgetBasis: '23%',
+    wideMaxWidth: 1180,
+};

package/dist/constants/ps-layout-class.d.ts

@@ -0,0 +1,5 @@
+export declare const PsLayoutClass: {
+    readonly compact: "compact";
+    readonly regular: "regular";
+};
+export type PsLayoutClass = (typeof PsLayoutClass)[keyof typeof PsLayoutClass];

package/dist/constants/ps-layout-class.js

@@ -0,0 +1,4 @@
+export const PsLayoutClass = {
+    compact: 'compact',
+    regular: 'regular',
+};

package/dist/constants/ps-menu-popup-config.d.ts

@@ -5,6 +5,7 @@ export declare const PsMenuPopupConfig: {
     readonly minWidth: 168;
     readonly paddingVertical: 8;
     readonly radius: 12;
+    readonly remeasureMs: 250;
     readonly rowHeight: 48;
     readonly rowPaddingHorizontal: 16;
 };