@pallasoft/ps-mobile-components 1.12.0 → 1.13.0

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

package/dist/hooks/use-ps-menu-anchor.d.ts

@@ -1,5 +1,5 @@
 import { type ElementRef, type RefObject } from 'react';
-import type { View } from 'react-native';
+import { type View } from 'react-native';
 import type { PsMenuAnchor } from '../interfaces/ps-menu-anchor';
 export interface PsMenuAnchorResult {
     anchor: PsMenuAnchor | undefined;

package/dist/hooks/use-ps-menu-anchor.js

@@ -1,12 +1,24 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { PsMenuPopupConfig } from '../constants/ps-menu-popup-config';
 export const usePsMenuAnchor = () => {
     const ref = useRef(null);
     const [anchor, setAnchor] = useState(undefined);
+    const { height, width } = useWindowDimensions();
+    const isOpen = anchor !== undefined;
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const timer = setTimeout(() => {
+            ref.current?.measureInWindow((x, y, anchorWidth, anchorHeight) => setAnchor({ height: anchorHeight, width: anchorWidth, x, y }));
+        }, PsMenuPopupConfig.remeasureMs);
+        return () => clearTimeout(timer);
+    }, [height, isOpen, width]);
     return {
         anchor,
         close: () => setAnchor(undefined),
         open: () => {
-            ref.current?.measureInWindow((x, y, width, height) => setAnchor({ height, width, x, y }));
+            ref.current?.measureInWindow((x, y, anchorWidth, anchorHeight) => setAnchor({ height: anchorHeight, width: anchorWidth, x, y }));
         },
         ref,
     };

package/dist/index.d.ts

@@ -194,3 +194,7 @@ export * from './interfaces/ps-infinite-data-result';
 export * from './interfaces/ps-infinite-data-update';
 export * from './interfaces/ps-infinite-page';
 export { usePsDebouncedValue } from '@pallasoft/ps-utilities/react';
+export * from './constants/ps-layout-class';
+export * from './constants/ps-content-width';
+export * from './hooks/use-ps-layout-class';
+export { PsLayoutService } from './services/ps-layout-service';

package/dist/index.js

@@ -189,3 +189,7 @@ export * from './interfaces/ps-infinite-data-result';
 export * from './interfaces/ps-infinite-data-update';
 export * from './interfaces/ps-infinite-page';
 export { usePsDebouncedValue } from '@pallasoft/ps-utilities/react';
+export * from './constants/ps-layout-class';
+export * from './constants/ps-content-width';
+export * from './hooks/use-ps-layout-class';
+export { PsLayoutService } from './services/ps-layout-service';

package/dist/interfaces/ps-document-search-match.d.ts

@@ -1,4 +1,2 @@
-export interface PsDocumentSearchMatch {
-    end: number;
-    start: number;
-}
+import type { TextMatch } from '@pallasoft/ps-utilities';
+export type PsDocumentSearchMatch = TextMatch;

package/dist/interfaces/ps-document-text-box.d.ts

@@ -1,6 +1,2 @@
-export interface PsDocumentTextBox {
-    height: number;
-    left: number;
-    top: number;
-    width: number;
-}
+import type { TextLayerBox } from '@pallasoft/ps-utilities';
+export type PsDocumentTextBox = TextLayerBox;

package/dist/interfaces/ps-document-text-layer-word.d.ts

@@ -1,5 +1,2 @@
-import type { PsDocumentTextBox } from './ps-document-text-box';
-export interface PsDocumentTextLayerWord {
-    box: PsDocumentTextBox;
-    text: string;
-}
+import type { TextLayerWord } from '@pallasoft/ps-utilities';
+export type PsDocumentTextLayerWord = TextLayerWord;

package/dist/interfaces/ps-document-text-layer.d.ts

@@ -1,6 +1,2 @@
-import type { PsDocumentTextLayerWord } from './ps-document-text-layer-word';
-export interface PsDocumentTextLayer {
-    height: number;
-    width: number;
-    words: PsDocumentTextLayerWord[];
-}
+import type { TextLayer } from '@pallasoft/ps-utilities';
+export type PsDocumentTextLayer = TextLayer;

package/dist/interfaces/ps-document-text-segment.d.ts

@@ -1,4 +1,2 @@
-export interface PsDocumentTextSegment {
-    matchIndex: number | null;
-    text: string;
-}
+import type { TextSegment } from '@pallasoft/ps-utilities';
+export type PsDocumentTextSegment = TextSegment;

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

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

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

@@ -2,6 +2,7 @@ export interface PsMenuPopupLayout {
     isBelow: boolean;
     left: number;
     maxHeight: number;
+    maxWidth: number;
     top: number;
     width: number | undefined;
 }

package/dist/services/ps-document-search-service.d.ts

@@ -1,7 +1,6 @@
 import type { PsDocumentHighlightRect } from '../interfaces/ps-document-highlight-rect';
 import type { PsDocumentItem } from '../interfaces/ps-document-item';
 import type { PsDocumentLabels } from '../interfaces/ps-document-labels';
-import type { PsDocumentNormalizedText } from '../interfaces/ps-document-normalized-text';
 import type { PsDocumentPoint } from '../interfaces/ps-document-point';
 import type { PsDocumentSearchLabels } from '../interfaces/ps-document-search-labels';
 import type { PsDocumentSearchLocation } from '../interfaces/ps-document-search-location';
@@ -14,11 +13,9 @@ import type { PsDocumentViewerEntry } from '../interfaces/ps-document-viewer-ent
 import type { PsDocumentWordMatch } from '../interfaces/ps-document-word-match';
 import type { PsSize } from '../interfaces/ps-size';
 export declare class PsDocumentSearchService {
-    static normalize(text: string): PsDocumentNormalizedText;
     static terms(query: string): string[];
     static matches(text: string, query: string): PsDocumentSearchMatch[];
     static segments(text: string, matches: PsDocumentSearchMatch[]): PsDocumentTextSegment[];
-    static joinedWords(layer: PsDocumentTextLayer): string;
     static wordMatches(layer: PsDocumentTextLayer, query: string): PsDocumentWordMatch[];
     static fit(layer: PsDocumentTextLayer, container: PsSize): PsDocumentTextBox;
     static rect(box: PsDocumentTextBox, layer: PsDocumentTextLayer, container: PsSize): PsDocumentTextBox;
@@ -36,5 +33,4 @@ export declare class PsDocumentSearchService {
     static countLabel(template: string, current: number, total: number): string;
     static labels(labels: PsDocumentLabels): PsDocumentSearchLabels | null;
     static isSearchable(items: PsDocumentItem[]): boolean;
-    private static merge;
 }

package/dist/services/ps-document-search-service.js

@@ -1,104 +1,29 @@
+import { Common } from '@pallasoft/ps-utilities';
 import { PsDocumentKind } from '../constants/ps-document-kind';
 import { PsDocumentSearchConfig } from '../constants/ps-document-search-config';
 export class PsDocumentSearchService {
-    static normalize(text) {
-        const starts = [];
-        const ends = [];
-        let value = '';
-        let offset = 0;
-        for (const character of Array.from(text)) {
-            const folded = character
-                .normalize('NFD')
-                .replace(PsDocumentSearchConfig.combiningMarkPattern, '')
-                .toLowerCase();
-            for (let position = 0; position < folded.length; position += 1) {
-                starts.push(offset);
-                ends.push(offset + character.length);
-            }
-            value += folded;
-            offset += character.length;
-        }
-        return { ends, starts, value };
-    }
     static terms(query) {
-        return PsDocumentSearchService.normalize(query)
-            .value.split(PsDocumentSearchConfig.termSeparatorPattern)
-            .filter((term) => term !== '');
+        return Common.TextSearchService.terms(query);
     }
     static matches(text, query) {
-        const terms = PsDocumentSearchService.terms(query);
-        if (terms.length === 0)
-            return [];
-        const normalized = PsDocumentSearchService.normalize(text);
-        const ranges = [];
-        for (const term of terms) {
-            let from = normalized.value.indexOf(term);
-            while (from >= 0) {
-                ranges.push({ end: from + term.length, start: from });
-                from = normalized.value.indexOf(term, from + term.length);
-            }
-        }
-        return PsDocumentSearchService.merge(ranges).map((range) => ({
-            end: normalized.ends[range.end - 1],
-            start: normalized.starts[range.start],
-        }));
+        return Common.TextSearchService.findTerms(text, query);
     }
     static segments(text, matches) {
-        const segments = [];
-        let cursor = 0;
-        matches.forEach((match, index) => {
-            if (match.start > cursor)
-                segments.push({ matchIndex: null, text: text.slice(cursor, match.start) });
-            segments.push({ matchIndex: index, text: text.slice(match.start, match.end) });
-            cursor = match.end;
-        });
-        if (cursor < text.length)
-            segments.push({ matchIndex: null, text: text.slice(cursor) });
-        return segments;
-    }
-    static joinedWords(layer) {
-        return layer.words.map((word) => word.text).join(PsDocumentSearchConfig.wordSeparator);
+        return Common.TextSearchService.segments(text, matches);
     }
     static wordMatches(layer, query) {
-        const matches = PsDocumentSearchService.matches(PsDocumentSearchService.joinedWords(layer), query);
-        const bounds = [];
-        let cursor = 0;
-        for (const word of layer.words) {
-            bounds.push({ end: cursor + word.text.length, start: cursor });
-            cursor += word.text.length + PsDocumentSearchConfig.wordSeparator.length;
-        }
-        return matches.map((match) => ({
-            wordIndices: bounds.flatMap((bound, index) => bound.start < match.end && bound.end > match.start ? [index] : []),
+        return Common.TextLayerService.termMatches(layer, query).map((match) => ({
+            wordIndices: match.parts.map((part) => part.itemIndex),
         }));
     }
     static fit(layer, container) {
-        if (layer.width <= 0 || layer.height <= 0)
-            return { height: 0, left: 0, top: 0, width: 0 };
-        const scale = Math.min(container.width / layer.width, container.height / layer.height);
-        const width = layer.width * scale;
-        const height = layer.height * scale;
-        return {
-            height,
-            left: (container.width - width) / 2,
-            top: (container.height - height) / 2,
-            width,
-        };
+        return Common.TextLayerService.fit(layer, container);
     }
     static rect(box, layer, container) {
-        const fitted = PsDocumentSearchService.fit(layer, container);
-        const scale = layer.width <= 0 ? 0 : fitted.width / layer.width;
-        return {
-            height: box.height * scale,
-            left: fitted.left + box.left * scale,
-            top: fitted.top + box.top * scale,
-            width: box.width * scale,
-        };
+        return Common.TextLayerService.rect(box, layer, container);
     }
     static highlights(layer, query, container, activeIndex) {
-        return PsDocumentSearchService.wordMatches(layer, query).flatMap((match, matchIndex) => match.wordIndices.map((wordIndex) => ({
-            box: PsDocumentSearchService.rect(layer.words[wordIndex].box, layer, container),
-            isActive: matchIndex === activeIndex,
-        })));
+        return Common.TextLayerService.wordRects(layer, Common.TextLayerService.termMatches(layer, query), container).map((rect) => ({ box: rect.box, isActive: rect.matchIndex === activeIndex }));
     }
     static center(box) {
         return { x: box.left + box.width / 2, y: box.top + box.height / 2 };
@@ -186,16 +111,4 @@ export class PsDocumentSearchService {
             item.textLayer !== undefined ||
             (item.pageTextLayers !== undefined && item.pageTextLayers.length > 0));
     }
-    static merge(ranges) {
-        const sorted = [...ranges].sort((a, b) => a.start === b.start ? a.end - b.end : a.start - b.start);
-        const merged = [];
-        for (const range of sorted) {
-            const last = merged[merged.length - 1];
-            if (last !== undefined && range.start < last.end)
-                merged[merged.length - 1] = { end: Math.max(last.end, range.end), start: last.start };
-            else
-                merged.push({ ...range });
-        }
-        return merged;
-    }
 }

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

@@ -0,0 +1,12 @@
+import type { ViewStyle } from 'react-native';
+import { PsContentWidth } from '../constants/ps-content-width';
+import { PsLayoutClass } from '../constants/ps-layout-class';
+export declare class PsLayoutService {
+    static classOf(width: number, height: number): PsLayoutClass;
+    static maxWidth(layoutClass: PsLayoutClass, contentWidth: PsContentWidth): number | undefined;
+    static frame(layoutClass: PsLayoutClass, contentWidth: PsContentWidth): ViewStyle;
+    static gridUnits(layoutClass: PsLayoutClass): number;
+    static widgetBasis(layoutClass: PsLayoutClass): string;
+    static widgetWidth(containerWidth: number, layoutClass: PsLayoutClass, gap: number): number | undefined;
+    static menuMaxWidth(windowWidth: number, edgeMargin: number): number;
+}

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

@@ -0,0 +1,41 @@
+import { PsContentWidth } from '../constants/ps-content-width';
+import { PsLayoutClass } from '../constants/ps-layout-class';
+import { PsLayoutClassConfig } from '../constants/ps-layout-class-config';
+export class PsLayoutService {
+    static classOf(width, height) {
+        return width >= PsLayoutClassConfig.regularMinWidth &&
+            height >= PsLayoutClassConfig.regularMinHeight
+            ? PsLayoutClass.regular
+            : PsLayoutClass.compact;
+    }
+    static maxWidth(layoutClass, contentWidth) {
+        if (layoutClass === PsLayoutClass.compact || contentWidth === PsContentWidth.full)
+            return undefined;
+        return contentWidth === PsContentWidth.wide
+            ? PsLayoutClassConfig.wideMaxWidth
+            : PsLayoutClassConfig.readableMaxWidth;
+    }
+    static frame(layoutClass, contentWidth) {
+        const maxWidth = PsLayoutService.maxWidth(layoutClass, contentWidth);
+        return maxWidth === undefined ? {} : { alignSelf: 'center', maxWidth, width: '100%' };
+    }
+    static gridUnits(layoutClass) {
+        return layoutClass === PsLayoutClass.regular
+            ? PsLayoutClassConfig.regularGridUnits
+            : PsLayoutClassConfig.compactGridUnits;
+    }
+    static widgetBasis(layoutClass) {
+        return layoutClass === PsLayoutClass.regular
+            ? PsLayoutClassConfig.regularWidgetBasis
+            : PsLayoutClassConfig.compactWidgetBasis;
+    }
+    static widgetWidth(containerWidth, layoutClass, gap) {
+        if (layoutClass === PsLayoutClass.compact || containerWidth <= 0)
+            return undefined;
+        const columns = PsLayoutService.gridUnits(layoutClass);
+        return Math.max((containerWidth - gap * (columns - 1)) / columns, 0);
+    }
+    static menuMaxWidth(windowWidth, edgeMargin) {
+        return Math.max(windowWidth - edgeMargin * 2, 0);
+    }
+}

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

@@ -3,20 +3,24 @@ export class PsMenuPopupService {
     static layout(anchor, window, insets, contentHeight, contentWidth, isFullWidth) {
         const margin = PsMenuPopupConfig.edgeMargin;
         const gap = PsMenuPopupConfig.anchorGap;
-        const width = isFullWidth ? anchor.width : undefined;
-        const menuWidth = width === undefined ? contentWidth : width;
+        const minX = Math.max(margin, insets.left);
+        const maxX = window.width - Math.max(margin, insets.right);
+        const maxWidth = Math.max(maxX - minX, 0);
+        const width = isFullWidth ? Math.min(anchor.width, maxWidth) : undefined;
+        const menuWidth = Math.min(width === undefined ? contentWidth : width, maxWidth);
         const below = window.height - (anchor.y + anchor.height) - gap - Math.max(margin, insets.bottom);
         const above = anchor.y - gap - Math.max(margin, insets.top);
         const isBelow = contentHeight <= below || below >= above;
         const room = isBelow ? below : above;
         const height = Math.min(contentHeight, Math.max(room, 0));
         const top = isBelow ? anchor.y + anchor.height + gap : anchor.y - gap - height;
-        const alignedRight = anchor.x + menuWidth > window.width - margin;
+        const alignedRight = anchor.x + menuWidth > maxX;
         const left = alignedRight ? anchor.x + anchor.width - menuWidth : anchor.x;
         return {
             isBelow,
-            left: Math.max(margin, Math.min(left, window.width - margin - menuWidth)),
+            left: Math.max(minX, Math.min(left, maxX - menuWidth)),
             maxHeight: Math.max(room, 0),
+            maxWidth,
             top,
             width,
         };

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

@@ -1,11 +1,14 @@
 import type { ViewStyle } from 'react-native';
+import { PsLayoutClass } from '../constants/ps-layout-class';
 import type { PsSheetAction } from '../interfaces/ps-sheet-action';
 import type { PsSheetLeadingKind } from '../interfaces/ps-sheet-leading-kind';
 export declare class PsSheetService {
-    static maxHeight(windowHeight: number): number;
+    static maxHeight(windowHeight: number, layoutClass?: PsLayoutClass): number;
+    static fittedMaxWidth(windowWidth: number, layoutClass: PsLayoutClass): number | undefined;
+    static supportsFormSizing(iosVersion: string | number): boolean;
     static handlesInset(os: string): boolean;
     static bottomPadding(isFloating: boolean, bottomInset: number): number;
-    static fittedHeight(headerHeight: number, bodyHeight: number, windowHeight: number): number;
+    static fittedHeight(headerHeight: number, bodyHeight: number, windowHeight: number, layoutClass?: PsLayoutClass): number;
     static raisedHeight(height: number, keyboardHeight: number, windowHeight: number, topInset: number): number;
     static closeAction(label: string | undefined, onPress: () => void): PsSheetAction | undefined;
     static isActionInactive(action: PsSheetAction): boolean;

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

@@ -1,8 +1,21 @@
+import { PsLayoutClass } from '../constants/ps-layout-class';
+import { PsLayoutClassConfig } from '../constants/ps-layout-class-config';
 import { PsLayoutConfig } from '../constants/ps-layout-config';
 import { PsSheetConfig } from '../constants/ps-sheet-config';
 export class PsSheetService {
-    static maxHeight(windowHeight) {
-        return Math.floor(windowHeight * PsSheetConfig.maxHeightFraction);
+    static maxHeight(windowHeight, layoutClass = PsLayoutClass.compact) {
+        return Math.floor(windowHeight *
+            (layoutClass === PsLayoutClass.regular
+                ? PsLayoutClassConfig.formSheetMaxHeightFraction
+                : PsSheetConfig.maxHeightFraction));
+    }
+    static fittedMaxWidth(windowWidth, layoutClass) {
+        return layoutClass === PsLayoutClass.regular
+            ? Math.min(PsLayoutClassConfig.formSheetWidth, windowWidth)
+            : undefined;
+    }
+    static supportsFormSizing(iosVersion) {
+        return Number.parseInt(String(iosVersion), 10) >= PsSheetConfig.formSizingMinIos;
     }
     static handlesInset(os) {
         return os === 'ios' || os === 'android';
@@ -10,8 +23,8 @@ export class PsSheetService {
     static bottomPadding(isFloating, bottomInset) {
         return PsLayoutConfig.sheetGutter + (isFloating ? 0 : bottomInset);
     }
-    static fittedHeight(headerHeight, bodyHeight, windowHeight) {
-        return Math.min(Math.ceil(headerHeight + bodyHeight), PsSheetService.maxHeight(windowHeight));
+    static fittedHeight(headerHeight, bodyHeight, windowHeight, layoutClass = PsLayoutClass.compact) {
+        return Math.min(Math.ceil(headerHeight + bodyHeight), PsSheetService.maxHeight(windowHeight, layoutClass));
     }
     static raisedHeight(height, keyboardHeight, windowHeight, topInset) {
         return Math.min(height + keyboardHeight, windowHeight - topInset);

package/dist/services/ps-sortable-grid-service.d.ts

@@ -8,8 +8,9 @@ export declare class PsSortableGridService {
         id: string;
     }>(items: T[]): string[];
     static isSameOrder(first: string[], second: string[]): boolean;
-    static rows(spans: PsSortableGridSpan[]): number[][];
-    static layout(spans: PsSortableGridSpan[], heights: number[], width: number): PsSortableRect[];
+    static units(span: PsSortableGridSpan): number;
+    static rows(spans: PsSortableGridSpan[], capacity?: number): number[][];
+    static layout(spans: PsSortableGridSpan[], heights: number[], width: number, capacity?: number): PsSortableRect[];
     static extras(rects: PsSortableRect[], heights: number[]): number[];
     static natural(total: number, extra: number): number;
     static contentHeight(rects: PsSortableRect[]): number;

package/dist/services/ps-sortable-grid-service.js

@@ -16,34 +16,38 @@ export class PsSortableGridService {
     static isSameOrder(first, second) {
         return first.length === second.length && first.every((id, index) => id === second[index]);
     }
-    static rows(spans) {
-        return spans.reduce((rows, span, index) => {
+    static units(span) {
+        return span === PsSortableGridSpan.half ? 1 : PsSortableGridConfig.fullUnits;
+    }
+    static rows(spans, capacity = PsSortableGridConfig.compactUnits) {
+        const rows = [];
+        let used = 0;
+        spans.forEach((span, index) => {
+            const units = PsSortableGridService.units(span);
             const last = rows[rows.length - 1];
-            const canJoin = span === PsSortableGridSpan.half &&
-                last !== undefined &&
-                last.length === 1 &&
-                spans[last[0]] === PsSortableGridSpan.half;
-            if (canJoin)
+            if (last !== undefined && used + units <= capacity) {
                 last.push(index);
-            else
-                rows.push([index]);
-            return rows;
-        }, []);
+                used += units;
+                return;
+            }
+            rows.push([index]);
+            used = units;
+        });
+        return rows;
     }
-    static layout(spans, heights, width) {
-        const half = PsSortableGridService.halfWidth(width);
+    static layout(spans, heights, width, capacity = PsSortableGridConfig.compactUnits) {
+        const gap = PsSortableGridConfig.columnGap;
         const rects = [];
         let top = 0;
-        PsSortableGridService.rows(spans).forEach((row) => {
+        PsSortableGridService.rows(spans, capacity).forEach((row) => {
             const rowHeight = Math.max(...row.map((index) => heights[index]));
-            row.forEach((index, column) => {
-                const isHalf = spans[index] === PsSortableGridSpan.half && row.length === 2;
-                rects[index] = {
-                    height: rowHeight,
-                    width: isHalf ? half : width,
-                    x: column === 0 ? 0 : half + PsSortableGridConfig.columnGap,
-                    y: top,
-                };
+            const units = row.reduce((sum, index) => sum + PsSortableGridService.units(spans[index]), 0);
+            const unitWidth = Math.max(width - gap * (row.length - 1), 0) / units;
+            let left = 0;
+            row.forEach((index) => {
+                const itemWidth = unitWidth * PsSortableGridService.units(spans[index]);
+                rects[index] = { height: rowHeight, width: itemWidth, x: left, y: top };
+                left += itemWidth + gap;
             });
             top += rowHeight + PsSortableGridConfig.rowGap;
         });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.12.0",
+	"version": "1.13.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",
@@ -36,7 +36,7 @@
 	"dependencies": {
 		"@pallasoft/ps-design-system": "^1.19.0",
 		"@pallasoft/ps-icons": "^1.12.0",
-		"@pallasoft/ps-utilities": "^2.29.0"
+		"@pallasoft/ps-utilities": "^2.30.0"
 	},
 	"peerDependencies": {
 		"@expo/ui": "~58.0.0",

package/dist/interfaces/ps-document-normalized-text.d.ts

@@ -1,5 +0,0 @@
-export interface PsDocumentNormalizedText {
-    ends: number[];
-    starts: number[];
-    value: string;
-}

package/dist/interfaces/ps-document-normalized-text.js

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