@pallasoft/ps-mobile-components 1.11.0 → 1.13.0

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-text/ps-text-props.d.ts

@@ -12,6 +12,7 @@ export interface PsTextProps {
     isSelectable?: boolean;
     numberOfLines?: number;
     onPress?: () => void;
+    onTextLayout?: TextProps['onTextLayout'];
     style?: StyleProp<TextStyle>;
     testID?: string;
     tone?: PsTextTone;

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

@@ -1,2 +1,2 @@
 import type { PsTextProps } from './ps-text-props';
-export declare const PsText: ({ accessibilityRole, align, children, ellipsizeMode, isSelectable, numberOfLines, onPress, style, testID, tone, variant, weight, }: PsTextProps) => import("react").JSX.Element;
+export declare const PsText: ({ accessibilityRole, align, children, ellipsizeMode, isSelectable, numberOfLines, onPress, onTextLayout, style, testID, tone, variant, weight, }: PsTextProps) => import("react").JSX.Element;

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, Text } from 'react-native';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
 import { PsTextService } from '../../services/ps-text-service';
-export const PsText = ({ accessibilityRole, align, children, ellipsizeMode = 'tail', isSelectable = false, numberOfLines, onPress, style, testID, tone = 'ink', variant = 'body', weight, }) => {
+export const PsText = ({ accessibilityRole, align, children, ellipsizeMode = 'tail', isSelectable = false, numberOfLines, onPress, onTextLayout, style, testID, tone = 'ink', variant = 'body', weight, }) => {
     const theme = usePsMobileTheme();
-    return (_jsx(Text, { accessibilityRole: accessibilityRole, ellipsizeMode: ellipsizeMode, numberOfLines: numberOfLines, onPress: onPress, selectable: isSelectable, style: StyleSheet.flatten([
+    return (_jsx(Text, { accessibilityRole: accessibilityRole, ellipsizeMode: ellipsizeMode, numberOfLines: numberOfLines, onPress: onPress, onTextLayout: onTextLayout, selectable: isSelectable, style: StyleSheet.flatten([
             PsTextService.style(variant, tone, weight, theme),
             { textAlign: align },
             style,

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

@@ -0,0 +1,16 @@
+export declare const PsDocumentSearchConfig: {
+    readonly activeAlpha: 0.9;
+    readonly androidFieldRadius: 999;
+    readonly barGap: 8;
+    readonly currentToken: "{current}";
+    readonly fieldAlpha: 0.14;
+    readonly fieldPaddingX: 12;
+    readonly highlightAlpha: 0.4;
+    readonly highlightRadius: 3;
+    readonly iosFieldRadius: 10;
+    readonly noActive: -1;
+    readonly rotateDown: "0deg";
+    readonly rotateUp: "180deg";
+    readonly scrollMargin: 48;
+    readonly totalToken: "{total}";
+};

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

@@ -0,0 +1,16 @@
+export const PsDocumentSearchConfig = {
+    activeAlpha: 0.9,
+    androidFieldRadius: 999,
+    barGap: 8,
+    currentToken: '{current}',
+    fieldAlpha: 0.14,
+    fieldPaddingX: 12,
+    highlightAlpha: 0.4,
+    highlightRadius: 3,
+    iosFieldRadius: 10,
+    noActive: -1,
+    rotateDown: '0deg',
+    rotateUp: '180deg',
+    scrollMargin: 48,
+    totalToken: '{total}',
+};

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;
 };

package/dist/constants/ps-menu-popup-config.js

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

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

@@ -0,0 +1,3 @@
+export declare const PsOrientationConfig: {
+    readonly all: readonly ["portrait", "portrait-upside-down", "landscape", "landscape-left", "landscape-right"];
+};

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

@@ -0,0 +1,3 @@
+export const PsOrientationConfig = {
+    all: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'],
+};

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

@@ -2,6 +2,7 @@ export declare const PsSheetConfig: {
     readonly actionMinWidth: 44;
     readonly actionSpinnerGap: 6;
     readonly cornerRadius: 20;
+    readonly formSizingMinIos: 18;
     readonly headerMinHeight: 64;
     readonly headerPaddingBottom: 12;
     readonly headerPaddingHorizontal: 16;

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

@@ -2,6 +2,7 @@ export const PsSheetConfig = {
     actionMinWidth: 44,
     actionSpinnerGap: 6,
     cornerRadius: 20,
+    formSizingMinIos: 18,
     headerMinHeight: 64,
     headerPaddingBottom: 12,
     headerPaddingHorizontal: 16,

package/dist/constants/ps-sortable-grid-config.d.ts

@@ -2,7 +2,9 @@ export declare const PsSortableGridConfig: {
     readonly activeScale: 1.03;
     readonly activeZIndex: 10;
     readonly columnGap: 12;
+    readonly compactUnits: 2;
     readonly edgeRatio: 0.14;
+    readonly fullUnits: 2;
     readonly holdTolerance: 8;
     readonly longPressMs: 400;
     readonly maxScrollStep: 18;

package/dist/constants/ps-sortable-grid-config.js

@@ -4,7 +4,9 @@ export const PsSortableGridConfig = {
     activeScale: 1.03,
     activeZIndex: 10,
     columnGap: PsChartConfig.kpiGap,
+    compactUnits: 2,
     edgeRatio: 0.14,
+    fullUnits: 2,
     holdTolerance: 8,
     longPressMs: 400,
     maxScrollStep: 18,

package/dist/hooks/use-ps-document-search-texts.d.ts

@@ -0,0 +1,2 @@
+import type { PsDocumentItem } from '../interfaces/ps-document-item';
+export declare const usePsDocumentSearchTexts: (items: PsDocumentItem[], isActive: boolean) => Record<string, string>;

package/dist/hooks/use-ps-document-search-texts.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { PsDocumentTextService } from '../services/ps-document-text-service';
+export const usePsDocumentSearchTexts = (items, isActive) => {
+    const [texts, setTexts] = useState({});
+    const key = items
+        .filter((item) => PsDocumentTextService.needsLoad(item))
+        .map((item) => item.id)
+        .join('|');
+    useEffect(() => {
+        if (!isActive || key === '')
+            return undefined;
+        let isCurrent = true;
+        items
+            .filter((item) => PsDocumentTextService.needsLoad(item))
+            .forEach((item) => {
+            void PsDocumentTextService.load(item).then((text) => {
+                if (isCurrent && text !== null)
+                    setTexts((previous) => ({ ...previous, [item.id]: text }));
+            });
+        });
+        return () => {
+            isCurrent = false;
+        };
+    }, [isActive, key]);
+    return texts;
+};

package/dist/hooks/use-ps-layout-class.d.ts

@@ -0,0 +1,2 @@
+import type { PsLayoutClass } from '../constants/ps-layout-class';
+export declare const usePsLayoutClass: () => PsLayoutClass;

package/dist/hooks/use-ps-layout-class.js

@@ -0,0 +1,6 @@
+import { useWindowDimensions } from 'react-native';
+import { PsLayoutService } from '../services/ps-layout-service';
+export const usePsLayoutClass = () => {
+    const { height, width } = useWindowDimensions();
+    return PsLayoutService.classOf(width, height);
+};