@pallasoft/ps-mobile-components 1.13.1 → 1.14.0

package/dist/components/ps-action-menu/ps-action-menu.android.js

@@ -19,9 +19,9 @@ export const PsActionMenu = ({ children, header, isDisabled = false, items, labe
                         if (!isDisabled)
                             menu.open();
                     },
-                }, children: children }), menu.anchor === undefined ? null : (_jsxs(PsMenuPopup, { anchor: menu.anchor, onClose: menu.close, children: [header === undefined ? null : (_jsx(PsMenuPopupHeader, { subtitle: header.subtitle, title: header.title })), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(PsMenuPopupDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(PsMenuPopupRow, { iconKey: item.iconKey, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, isWarning: item.isWarning, label: item.label, onPress: () => {
+                }, children: children }), menu.anchor === undefined ? null : (_jsxs(PsMenuPopup, { anchor: menu.anchor, onClose: menu.close, children: [header === undefined ? null : (_jsx(PsMenuPopupHeader, { subtitle: header.subtitle, title: header.title })), groups.map((group, index) => (_jsxs(Fragment, { children: [index > 0 || header !== undefined ? _jsx(PsMenuPopupDivider, {}) : null, PsActionMenuService.flatten([group]).map((item) => (_jsx(PsMenuPopupRow, { iconKey: item.iconKey, imageUri: item.imageUri, isChecked: item.isChecked, isDanger: item.isDanger, isDisabled: item.isDisabled, isWarning: item.isWarning, label: item.label, monogram: item.monogram, onPress: () => {
                                     menu.close();
                                     haptic('selection');
                                     item.onSelect();
-                                }, subtitle: item.subtitle }, item.id)))] }, group.id)))] }))] }));
+                                }, subtitle: item.subtitle, tileColor: item.tileColor }, item.id)))] }, group.id)))] }))] }));
 };

package/dist/components/ps-action-menu/ps-menu-tile-drawing.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from 'react';
+import { PallasoftColorContrastService } from '@pallasoft/ps-design-system';
 import Svg, { ClipPath, Defs, G, Rect, Image as SvgImage, Text as SvgText } from 'react-native-svg';
 import { PsMenuTileConfig } from '../../constants/ps-menu-tile-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
@@ -14,6 +15,10 @@ export const PsMenuTileDrawing = ({ onTile, request }) => {
     const isMounted = useRef(true);
     const [isLaidOut, setIsLaidOut] = useState(false);
     const [isImageLoaded, setIsImageLoaded] = useState(false);
+    const fill = request.tileColor === undefined ? theme.primary : request.tileColor;
+    const textColor = request.tileColor === undefined
+        ? theme.primaryContrast
+        : PallasoftColorContrastService.textOn(request.tileColor);
     const isReady = isLaidOut && (request.imageUri === undefined || isImageLoaded);
     useEffect(() => {
         isMounted.current = true;
@@ -29,6 +34,6 @@ export const PsMenuTileDrawing = ({ onTile, request }) => {
             if (isMounted.current)
                 onTile(request.key, `${PsMenuTileConfig.dataUriPrefix}${base64}`);
         });
-    }, [isReady, onTile, request.key, theme.primary, theme.primaryContrast]);
-    return (_jsxs(Svg, { height: size, onLayout: () => setIsLaidOut(true), ref: ref, width: size, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: clipId, children: _jsx(Rect, { height: size, rx: isCircle ? size / 2 : PsMenuTileConfig.roundedRadius, width: size }) }) }), _jsxs(G, { clipPath: `url(#${clipId})`, children: [_jsx(Rect, { fill: request.imageUri === undefined ? theme.primary : theme.white, height: size, width: size }), request.imageUri === undefined ? (_jsx(SvgText, { fill: theme.primaryContrast, fontFamily: theme.fonts.semibold, fontSize: fontSize, textAnchor: 'middle', x: size / 2, y: size / 2 + fontSize * PsMenuTileConfig.textBaseline, children: request.text })) : (_jsx(SvgImage, { height: size - inset * 2, href: { uri: request.imageUri }, onLoad: () => setIsImageLoaded(true), preserveAspectRatio: isCircle ? 'xMidYMid slice' : 'xMidYMid meet', width: size - inset * 2, x: inset, y: inset }))] })] }));
+    }, [isReady, onTile, request.key, fill, textColor]);
+    return (_jsxs(Svg, { height: size, onLayout: () => setIsLaidOut(true), ref: ref, width: size, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: clipId, children: _jsx(Rect, { height: size, rx: isCircle ? size / 2 : PsMenuTileConfig.roundedRadius, width: size }) }) }), _jsxs(G, { clipPath: `url(#${clipId})`, children: [_jsx(Rect, { fill: request.imageUri === undefined ? fill : theme.white, height: size, width: size }), request.imageUri === undefined ? (_jsx(SvgText, { fill: textColor, fontFamily: theme.fonts.semibold, fontSize: fontSize, textAnchor: 'middle', x: size / 2, y: size / 2 + fontSize * PsMenuTileConfig.textBaseline, children: request.text })) : (_jsx(SvgImage, { height: size - inset * 2, href: { uri: request.imageUri }, onLoad: () => setIsImageLoaded(true), preserveAspectRatio: isCircle ? 'xMidYMid slice' : 'xMidYMid meet', width: size - inset * 2, x: inset, y: inset }))] })] }));
 };

package/dist/components/ps-menu-popup/ps-menu-popup-row.d.ts

@@ -1,12 +1,15 @@
 import type { PsMobileIconKey } from '../../constants/ps-mobile-icon-key';
 export interface PsMenuPopupRowProps {
     iconKey?: PsMobileIconKey;
+    imageUri?: string;
     isChecked?: boolean;
     isDanger?: boolean;
     isDisabled?: boolean;
     isWarning?: boolean;
     label: string;
+    monogram?: string;
     onPress: () => void;
     subtitle?: string;
+    tileColor?: string;
 }
-export declare const PsMenuPopupRow: ({ iconKey, isChecked, isDanger, isDisabled, isWarning, label, onPress, subtitle, }: PsMenuPopupRowProps) => import("react").JSX.Element;
+export declare const PsMenuPopupRow: ({ iconKey, imageUri, isChecked, isDanger, isDisabled, isWarning, label, monogram, onPress, subtitle, tileColor, }: PsMenuPopupRowProps) => import("react").JSX.Element;

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

@@ -11,7 +11,8 @@ import { PsRippleService } from '../../services/ps-ripple-service';
 import { PsStateService } from '../../services/ps-state-service';
 import { PsIcon } from '../ps-icon/ps-icon';
 import { PsText } from '../ps-text/ps-text';
-export const PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, onPress, subtitle, }) => {
+import { PsMenuPopupTile } from './ps-menu-popup-tile';
+export const PsMenuPopupRow = ({ iconKey, imageUri, isChecked = false, isDanger = false, isDisabled = false, isWarning = false, label, monogram, onPress, subtitle, tileColor, }) => {
     const theme = usePsMobileTheme();
     const scheme = usePsMaterialScheme();
     const isMaterial = PsMenuPopupStyleService.isMaterial();
@@ -30,5 +31,5 @@ export const PsMenuPopupRow = ({ iconKey, isChecked = false, isDanger = false, i
                 overflow: 'hidden',
                 paddingHorizontal: row.paddingHorizontal,
             };
-        }, children: [iconKey === undefined ? null : _jsx(PsIcon, { color: tint, iconKey: iconKey }), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
+        }, children: [imageUri !== undefined || monogram !== undefined ? (_jsx(PsMenuPopupTile, { imageUri: imageUri, monogram: monogram, tileColor: tileColor })) : iconKey === undefined ? null : (_jsx(PsIcon, { color: tint, iconKey: iconKey })), _jsxs(View, { style: { flex: 1 }, children: [_jsx(PsText, { numberOfLines: 1, tone: isDanger ? 'danger' : 'ink', weight: PsMenuPopupStyleService.labelWeight(isMaterial, isChecked), children: label }), subtitle === undefined ? null : (_jsx(PsText, { numberOfLines: 1, tone: isWarning ? 'warning' : 'muted', variant: 'small', children: subtitle }))] }), isChecked ? _jsx(PsIcon, { color: theme.primaryText, iconKey: PsIconKey.Check }) : null] }));
 };

package/dist/components/ps-menu-popup/ps-menu-popup-tile.d.ts

@@ -0,0 +1,6 @@
+export interface PsMenuPopupTileProps {
+    imageUri?: string;
+    monogram?: string;
+    tileColor?: string;
+}
+export declare const PsMenuPopupTile: ({ imageUri, monogram, tileColor }: PsMenuPopupTileProps) => import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PallasoftColorContrastService } from '@pallasoft/ps-design-system';
+import { Image, View } from 'react-native';
+import { PsMenuPopupConfig } from '../../constants/ps-menu-popup-config';
+import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
+import { PsMenuTileService } from '../../services/ps-menu-tile-service';
+import { PsText } from '../ps-text/ps-text';
+export const PsMenuPopupTile = ({ imageUri, monogram, tileColor }) => {
+    const theme = usePsMobileTheme();
+    const size = PsMenuPopupConfig.tileSize;
+    const fill = tileColor === undefined ? theme.primary : tileColor;
+    const textColor = tileColor === undefined
+        ? theme.primaryContrast
+        : PallasoftColorContrastService.textOn(tileColor);
+    return (_jsx(View, { style: {
+            alignItems: 'center',
+            backgroundColor: imageUri === undefined ? fill : theme.white,
+            borderRadius: PsMenuPopupConfig.tileRadius,
+            height: size,
+            justifyContent: 'center',
+            overflow: 'hidden',
+            width: size,
+        }, testID: 'ps-menu-popup-tile', children: imageUri === undefined ? (_jsx(PsText, { style: { color: textColor, fontSize: PsMenuPopupConfig.tileFontSize }, weight: 'semibold', children: PsMenuTileService.letter(monogram === undefined ? '' : monogram) })) : (_jsx(Image, { resizeMode: 'contain', source: { uri: imageUri }, style: {
+                height: size - PsMenuPopupConfig.tileLogoPadding * 2,
+                width: size - PsMenuPopupConfig.tileLogoPadding * 2,
+            } })) }));
+};

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIconKey } from '@pallasoft/ps-icons';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { PsPageHeaderConfig } from '../../constants/ps-page-header-config';
 import { PsSheetConfig } from '../../constants/ps-sheet-config';
 import { usePsMobileTheme } from '../../hooks/use-ps-mobile-theme';
@@ -20,7 +20,7 @@ export const PsSheetHeader = ({ eyebrow, isLeadingDisabled = false, leadingKind
             minHeight: PsSheetConfig.headerMinHeight,
             paddingBottom: PsSheetConfig.headerPaddingBottom,
             paddingHorizontal: PsSheetConfig.headerPaddingHorizontal,
-            paddingTop: PsSheetConfig.headerPaddingTop,
+            paddingTop: PsSheetService.headerPaddingTop(Platform.OS),
         }, testID: 'ps-sheet-header', children: [_jsx(View, { style: { alignItems: 'flex-start', minWidth: PsSheetConfig.actionMinWidth }, children: leadingLabel === undefined ? null : (_jsx(View, { style: PsSheetService.leadingIconStyle(leadingKind), children: _jsx(PsIconButton, { iconKey: leadingKind === 'back' ? PsIconKey.ChevronRight : PsIconKey.Close, isDisabled: isLeadingDisabled, label: leadingLabel, onPress: onLeadingPress, testID: 'ps-sheet-leading', variant: 'header' }) })) }), _jsxs(View, { style: { alignItems: 'center', flex: 1 }, children: [_jsx(PsText, { accessibilityRole: 'header', align: 'center', numberOfLines: 2, weight: 'bold', children: title }), eyebrow === undefined ? null : (_jsx(PsText, { align: 'center', numberOfLines: 1, tone: 'muted', variant: 'small', children: eyebrow }))] }), _jsx(View, { style: { alignItems: 'flex-end', minWidth: PsSheetConfig.actionMinWidth }, children: trailing === undefined ? null : trailing.isSubmitting === true ? (_jsx(View, { accessibilityLabel: trailing.label, accessibilityState: { busy: true }, style: {
                         alignItems: 'center',
                         backgroundColor: trailingColor,

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

@@ -8,4 +8,8 @@ export declare const PsMenuPopupConfig: {
     readonly remeasureMs: 250;
     readonly rowHeight: 48;
     readonly rowPaddingHorizontal: 16;
+    readonly tileFontSize: 14;
+    readonly tileLogoPadding: 3;
+    readonly tileRadius: 8;
+    readonly tileSize: 28;
 };

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

@@ -8,4 +8,8 @@ export const PsMenuPopupConfig = {
     remeasureMs: 250,
     rowHeight: 48,
     rowPaddingHorizontal: 16,
+    tileFontSize: 14,
+    tileLogoPadding: 3,
+    tileRadius: 8,
+    tileSize: 28,
 };

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

@@ -1,6 +1,7 @@
 export declare const PsSheetConfig: {
     readonly actionMinWidth: 44;
     readonly actionSpinnerGap: 6;
+    readonly androidHeaderPaddingTop: 0;
     readonly cornerRadius: 20;
     readonly formSizingMinIos: 18;
     readonly headerMinHeight: 64;

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

@@ -1,6 +1,7 @@
 export const PsSheetConfig = {
     actionMinWidth: 44,
     actionSpinnerGap: 6,
+    androidHeaderPaddingTop: 0,
     cornerRadius: 20,
     formSizingMinIos: 18,
     headerMinHeight: 64,

package/dist/interfaces/ps-menu-item.d.ts

@@ -13,5 +13,6 @@ export interface PsMenuItem {
     monogram?: string;
     onSelect: () => void;
     subtitle?: string;
+    tileColor?: string;
     tone?: PsMenuItemTone;
 }

package/dist/interfaces/ps-menu-tile-request.d.ts

@@ -3,5 +3,6 @@ export interface PsMenuTileRequest {
     imageUri?: string;
     key: string;
     shape: PsMenuTileShape;
+    tileColor?: string;
     text: string;
 }

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

@@ -4,14 +4,14 @@ export class PsMenuTileService {
         if (!PsActionMenuService.hasAvatar(item))
             return null;
         const text = PsMenuTileService.letter(item.monogram === undefined ? item.label : item.monogram);
-        return PsMenuTileService.request('rounded', item.imageUri, text);
+        return PsMenuTileService.request('rounded', item.imageUri, text, item.tileColor);
     }
     static headerRequest(header) {
         if (header === undefined)
             return null;
         if (header.imageUri === undefined && header.initials === undefined)
             return null;
-        return PsMenuTileService.request('circle', header.imageUri, header.initials === undefined ? '' : header.initials.trim().toUpperCase());
+        return PsMenuTileService.request('circle', header.imageUri, header.initials === undefined ? '' : header.initials.trim().toUpperCase(), undefined);
     }
     static requests(header, sections) {
         const all = [
@@ -59,12 +59,18 @@ export class PsMenuTileService {
             return [item];
         return [item, ...item.children.flatMap((child) => PsMenuTileService.tree(child))];
     }
-    static request(shape, imageUri, text) {
+    static request(shape, imageUri, text, tileColor) {
         return {
             imageUri,
-            key: [shape, imageUri === undefined ? '' : imageUri, text].join('|'),
+            key: [
+                shape,
+                imageUri === undefined ? '' : imageUri,
+                text,
+                tileColor === undefined ? '' : tileColor,
+            ].join('|'),
             shape,
             text,
+            tileColor,
         };
     }
 }

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

@@ -7,6 +7,7 @@ export declare class PsSheetService {
     static fittedMaxWidth(windowWidth: number, layoutClass: PsLayoutClass): number | undefined;
     static supportsFormSizing(iosVersion: string | number): boolean;
     static handlesInset(os: string): boolean;
+    static headerPaddingTop(os: string): number;
     static bottomPadding(isFloating: boolean, bottomInset: number): number;
     static fittedHeight(headerHeight: number, bodyHeight: number, windowHeight: number, layoutClass?: PsLayoutClass): number;
     static raisedHeight(height: number, keyboardHeight: number, windowHeight: number, topInset: number): number;

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

@@ -20,6 +20,9 @@ export class PsSheetService {
     static handlesInset(os) {
         return os === 'ios' || os === 'android';
     }
+    static headerPaddingTop(os) {
+        return os === 'android' ? PsSheetConfig.androidHeaderPaddingTop : PsSheetConfig.headerPaddingTop;
+    }
     static bottomPadding(isFloating, bottomInset) {
         return PsLayoutConfig.sheetGutter + (isFloating ? 0 : bottomInset);
     }

package/package.json

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