@wlloyalty/wll-react-sdk 1.0.106 → 1.0.108

package/dist/native.js

@@ -1655,6 +1655,13 @@ var EventEmitter = /** @class */ (function () {
  */
 var sdkEventEmitter = new EventEmitter();
 
+var IS_WEB = reactNative.Platform.OS === "web";
+var IS_IOS = reactNative.Platform.OS === "ios";
+var IS_ANDROID = reactNative.Platform.OS === "android";
+var IS_MOBILE = IS_IOS || IS_ANDROID;
+var _a$1 = reactNative.Dimensions.get("window"), width = _a$1.width; _a$1.height;
+var SCREEN_WIDTH = width;
+
 var sizes = {
     borderRadiusSm: 15,
     borderRadiusLg: 20,
@@ -1693,13 +1700,24 @@ var defaultTheme = {
     positive: '#008000',
     negative: '#ff0000',
 };
-
-var IS_WEB = reactNative.Platform.OS === "web";
-var IS_IOS = reactNative.Platform.OS === "ios";
-var IS_ANDROID = reactNative.Platform.OS === "android";
-var IS_MOBILE = IS_IOS || IS_ANDROID;
-var _a$1 = reactNative.Dimensions.get("window"), width = _a$1.width; _a$1.height;
-var SCREEN_WIDTH = width;
+/**
+ * Creates appropriate directional margin styles for both web and native platforms.
+ * Handles RTL layouts correctly across platforms by using the I18nManager.
+ *
+ * @param value - The margin value to apply
+ * @returns An object with the appropriate margin style property
+ */
+var getDirectionalMargin = function (value) {
+    if (IS_WEB) {
+        // Check document direction for web
+        // We need to use this because React Native Web does not support I18nManager
+        // and marginStart/marginEnd resolves to margin-left/margin-right and not margin-inline-start/end
+        var isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+        return isRTL ? { marginLeft: value } : { marginRight: value };
+    }
+    // For native platforms, use marginEnd which automatically handles RTL
+    return { marginEnd: value };
+};
 
 var COLOR_CONSTANTS = {
     MINIMUM_CONTRAST_RATIO: 2,
@@ -2409,22 +2427,22 @@ var Text = function (_a) {
     var accessibilityRole;
     switch (variant) {
         case 'title':
-            accessibilityRole = 'header';
+            accessibilityRole = IS_MOBILE ? 'heading' : 'header';
             break;
         case 'caption':
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
             break;
         case 'eyebrow':
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
             break;
         case 'description':
-            accessibilityRole = 'paragraph';
+            accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
             break;
         case 'label':
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'option' : 'text';
             break;
         default:
-            accessibilityRole = 'text';
+            accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
     }
     var combinedStyles = [
         styles.base,
@@ -2977,6 +2995,13 @@ var SkeletonTile = function (_a) {
     var style = _a.style;
     var theme = useWllSdk().theme;
     var animatedValue = React__namespace.useRef(new reactNative.Animated.Value(0)).current;
+    var width = reactNative.useWindowDimensions().width;
+    var tileWidth = 1000 / 4;
+    var tileHeight = tileWidth;
+    if (IS_MOBILE) {
+        tileWidth = width / 2 - theme.sizes.lg * 2;
+        tileHeight = tileWidth;
+    }
     React__namespace.useEffect(function () {
         var pulseAnimation = reactNative.Animated.loop(reactNative.Animated.sequence([
             reactNative.Animated.timing(animatedValue, {
@@ -3003,6 +3028,8 @@ var SkeletonTile = function (_a) {
                 opacity: opacity,
                 backgroundColor: theme.alphaDerivedText[20],
                 borderRadius: theme.sizes.borderRadiusLg,
+                width: tileWidth,
+                height: tileHeight,
             },
             style,
         ] }));
@@ -3011,7 +3038,6 @@ var styles$4 = reactNative.StyleSheet.create({
     container: {
         aspectRatio: 1,
         overflow: 'hidden',
-        width: 1000 / 4,
     },
 });
 
@@ -3422,14 +3448,7 @@ var useBannerTileStyles = function () {
         slideContent: {
             flex: 1,
         },
-        mediaContainer: {
-            aspectRatio: 1,
-            position: 'relative',
-            overflow: 'hidden',
-            marginEnd: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
-            maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet),
-            minHeight: 120,
-        },
+        mediaContainer: __assign(__assign({ aspectRatio: 1, position: 'relative', overflow: 'hidden' }, getDirectionalMargin(useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet))), { maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet), minHeight: 120 }),
         media: {
             position: 'absolute',
             width: '100%',
@@ -3583,11 +3602,7 @@ var useContentTileStyles = function (hasArtwork) {
             flex: 1,
         },
         header: getHeaderStyle(hasArtwork),
-        tileTitle: {
-            maxWidth: '90%',
-            flex: 1,
-            marginEnd: 8,
-        },
+        tileTitle: __assign({ maxWidth: '90%', flex: 1 }, getDirectionalMargin(8)),
     });
 };
 
@@ -4016,7 +4031,7 @@ var Grid = function (_a) {
                 tileContainers.push(jsxRuntimeExports.jsx(reactNative.View, { style: [
                         // @ts-ignore Web uses CSS calc strings for responsive layouts, while ViewStyle expects numbers
                         getTileWidth(columnsPerRow),
-                        !isLastInRow && { marginEnd: GRID_GAP },
+                        !isLastInRow && getDirectionalMargin(GRID_GAP),
                     ], children: jsxRuntimeExports.jsx(TileContainer, { tiles: currentTiles }) }, "container-".concat(index)));
                 currentTiles = [];
             }
@@ -4173,7 +4188,7 @@ var Section = function (_a) {
     }
     var renderSectionContent = function () {
         if (isLoading) {
-            return (jsxRuntimeExports.jsx(Skeleton, { "aria-label": "Loading section content", numberOfSquares: 4 }));
+            return (jsxRuntimeExports.jsx(Skeleton, { "aria-label": "Loading section content", numberOfSquares: IS_WEB ? 4 : 2 }));
         }
         if (error || !sectionData) {
             return jsxRuntimeExports.jsx(EmptyState, { message: error || 'No section data available.' });
@@ -4369,8 +4384,12 @@ var Group = function (_a) {
         return null;
     }
     var _b = useGroupData(id), groupData = _b.groupData, isLoading = _b.isLoading, error = _b.error;
+    var theme = useWllSdk().theme;
     if (isLoading) {
-        return (jsxRuntimeExports.jsx(reactNative.View, { style: commonStyles.emptyContainer, accessible: true, accessibilityLabel: "Loading group data", children: jsxRuntimeExports.jsx(Skeleton, {}) }));
+        return (jsxRuntimeExports.jsx(reactNative.View, { style: {
+                flex: 1,
+                padding: theme.sizes.lg,
+            }, accessible: true, accessibilityLabel: "Loading group data", children: jsxRuntimeExports.jsx(Skeleton, { numberOfSquares: IS_WEB ? 4 : 2 }) }));
     }
     if (error || !groupData) {
         return jsxRuntimeExports.jsx(GroupEmptyState, { message: error || 'No group data available' });
@@ -4795,11 +4814,7 @@ var useRewardTileStyles = function () {
             width: '100%',
             marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet),
         },
-        tileTitle: {
-            maxWidth: '90%',
-            flex: 1,
-            marginEnd: 8,
-        },
+        tileTitle: __assign({ maxWidth: '90%', flex: 1 }, getDirectionalMargin(8)),
     });
 };