@wlloyalty/wll-react-sdk 1.0.102 → 1.0.104

package/dist/types/context/WllSdkContext.d.ts

@@ -4,6 +4,7 @@ import { NavigationConfig } from '../types/navigation';
 import { TSection } from '../types/section';
 import { BaseThemeObject, ThemeContextType } from '../types/theme';
 import { CTALinkTarget, Tile } from '../types/tile';
+import { EventTypes } from '../utils/eventEmitter';
 type Fetcher = <T>(endpoint: string, options?: RequestInit) => Promise<APIResponse<T>>;
 export type SDKConfig = {
     apiKey: string;
@@ -22,6 +23,8 @@ type WllSdkContextType = ThemeContextType & {
     getTileByID: (id: string) => Promise<APIResponse<Tile>>;
     handleNavigation: (link: string, target: CTALinkTarget) => Promise<void>;
     refreshGroup: (id: string) => Promise<APIResponse<TGroup>>;
+    notifyDataChange: (eventType: EventTypes, data?: any) => void;
+    subscribeToDataChange: (eventType: EventTypes, callback: (data?: any) => void) => () => void;
 } & Readonly<{
     readonly config: SDKConfig;
 }>;

package/dist/types/mocks/tiles/badgeTile.d.ts

@@ -23,6 +23,7 @@ export declare const createBadgeTileMock: (config?: BadgeTileMockConfig) => {
         defaultLocale: string;
         locale: string;
         createdAt: string;
+        lastEarnedAt: string;
         updatedAt: string;
         awardedDatePrefix: string;
         emptyBadgeMessage: string;

package/dist/types/types/tile.d.ts

@@ -106,6 +106,7 @@ export declare class BadgeTileConfig {
     emptyBadgeArtworkUrl?: string;
     awardedDatePrefix?: string;
     badgeNotEarnedMessage?: string;
+    lastEarnedAt?: string;
 }
 export type BadgeDetail = {
     name: string;

package/dist/types/unit-tests/eventEmitter.spec.d.ts

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

package/dist/types/utils/eventEmitter.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Type definition for event callback functions
+ * @typedef {function} EventCallback
+ * @param {any} [data] - Optional data passed with the event
+ */
+export type EventCallback = (data?: any) => void;
+/**
+ * Supported event types for the SDK event system
+ * @typedef {string} EventTypes
+ */
+export type EventTypes = 'GROUP_DATA_CHANGED' | 'SECTION_DATA_CHANGED' | 'TILE_DATA_CHANGED' | string;
+/**
+ * A simple event emitter for handling SDK events
+ * Provides a pub-sub mechanism for components to communicate
+ */
+export declare class EventEmitter {
+    /**
+     * Map of event types to arrays of callback functions
+     * @private
+     */
+    private events;
+    /**
+     * Subscribe to an event
+     * @param {EventTypes} event - The event type to subscribe to
+     * @param {EventCallback} callback - The callback function to execute when the event is emitted
+     * @returns {Function} An unsubscribe function that removes this callback when called
+     */
+    on(event: EventTypes, callback: EventCallback): () => void;
+    /**
+     * Emit an event with optional data
+     * @param {EventTypes} event - The event type to emit
+     * @param {any} [data] - Optional data to pass to the event callbacks
+     */
+    emit(event: EventTypes, data?: any): void;
+    /**
+     * Remove all event listeners
+     * Use this method to clean up when the event emitter is no longer needed
+     */
+    clear(): void;
+}
+/**
+ * Singleton instance of the EventEmitter for use throughout the SDK
+ */
+export declare const sdkEventEmitter: EventEmitter;

package/dist/types/utils/transforms.d.ts

@@ -5,3 +5,16 @@ import { Tile } from '../types/tile';
  * @returns Sorted array of tiles
  */
 export declare const sortByPriority: <T extends Pick<Tile, "priority">>(tiles: T[]) => T[];
+/**
+ * Transforms locale to a locale that is supported by the browser
+ * @param locale Two-letter locale code to transform (en, fr, etc.)
+ * @returns Full locale string (e.g., en-GB, fr-FR)
+ */
+export declare const transformLocale: (locale?: string | null) => string;
+/**
+ * Formats a date string to a localized date string based on user locale
+ * @param date Date string to format
+ * @param userLocale User's locale (defaults to 'en')
+ * @returns Formatted date string or fallback message
+ */
+export declare const handleLastEarnedDate: (date?: string, userLocale?: string) => string;

package/dist/web.js

@@ -7924,6 +7924,68 @@ var useGetGroupByID = createResourceGetter('groups', true);
 var useGetSectionByID = createResourceGetter('sections');
 var useGetTileByID = createResourceGetter('tiles');
 
+/**
+ * A simple event emitter for handling SDK events
+ * Provides a pub-sub mechanism for components to communicate
+ */
+var EventEmitter$1 = /** @class */function () {
+  function EventEmitter() {
+    /**
+     * Map of event types to arrays of callback functions
+     * @private
+     */
+    this.events = new Map();
+  }
+  /**
+   * Subscribe to an event
+   * @param {EventTypes} event - The event type to subscribe to
+   * @param {EventCallback} callback - The callback function to execute when the event is emitted
+   * @returns {Function} An unsubscribe function that removes this callback when called
+   */
+  EventEmitter.prototype.on = function (event, callback) {
+    var _this = this;
+    var _a;
+    if (!this.events.has(event)) {
+      this.events.set(event, []);
+    }
+    (_a = this.events.get(event)) === null || _a === void 0 ? void 0 : _a.push(callback);
+    return function () {
+      var callbacks = _this.events.get(event);
+      if (callbacks) {
+        var index = callbacks.indexOf(callback);
+        if (index !== -1) {
+          callbacks.splice(index, 1);
+        }
+      }
+    };
+  };
+  /**
+   * Emit an event with optional data
+   * @param {EventTypes} event - The event type to emit
+   * @param {any} [data] - Optional data to pass to the event callbacks
+   */
+  EventEmitter.prototype.emit = function (event, data) {
+    var callbacks = this.events.get(event);
+    if (callbacks) {
+      callbacks.forEach(function (callback) {
+        return callback(data);
+      });
+    }
+  };
+  /**
+   * Remove all event listeners
+   * Use this method to clean up when the event emitter is no longer needed
+   */
+  EventEmitter.prototype.clear = function () {
+    this.events.clear();
+  };
+  return EventEmitter;
+}();
+/**
+ * Singleton instance of the EventEmitter for use throughout the SDK
+ */
+var sdkEventEmitter = new EventEmitter$1();
+
 var sizes = {
   borderRadiusSm: 15,
   borderRadiusLg: 20,
@@ -8525,6 +8587,12 @@ var WllSdkProvider = function (_a) {
       });
     });
   }, [getGroupByID]);
+  var notifyDataChange = React.useCallback(function (eventType, data) {
+    sdkEventEmitter.emit(eventType, data);
+  }, []);
+  var subscribeToDataChange = React.useCallback(function (eventType, callback) {
+    return sdkEventEmitter.on(eventType, callback);
+  }, []);
   var contextValue = React.useMemo(function () {
     return {
       theme: theme,
@@ -8534,9 +8602,11 @@ var WllSdkProvider = function (_a) {
       getTileByID: getTileByID,
       handleNavigation: handleNavigation,
       refreshGroup: refreshGroup,
+      notifyDataChange: notifyDataChange,
+      subscribeToDataChange: subscribeToDataChange,
       config: config
     };
-  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation, refreshGroup, config]);
+  }, [theme, setTheme, getGroupByID, getSectionByID, getTileByID, handleNavigation, refreshGroup, notifyDataChange, subscribeToDataChange, config]);
   return /*#__PURE__*/React.createElement(WllSdkContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(ResponsiveProvider, null, children));
@@ -19193,7 +19263,7 @@ var BaseTileBody = function (props) {
   return /*#__PURE__*/React.createElement(Text, __assign({
     variant: "body"
   }, props, {
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: body,
     numberOfLines: getNumberOfLines(),
     testID: "tile-body"
@@ -19317,7 +19387,7 @@ var BaseTileContent = function (_a) {
       justifyContent: 'center',
       height: !artworkUrl ? '100%' : undefined
     }],
-    accessibilityRole: "none"
+    role: "none"
   }, children);
 };
 
@@ -19345,7 +19415,7 @@ var BaseTileHeader = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     style: combinedStyle,
     testID: "tile-header",
-    accessibilityRole: "header"
+    role: "heading"
   }, children);
 };
 
@@ -19371,7 +19441,7 @@ var BaseTileMedia = function (props) {
     testID: "tile-media",
     style: [props.style, baseStyles.media, styles.media],
     alt: "Content image".concat(title ? " for ".concat(title) : ''),
-    accessibilityRole: "image"
+    role: "img"
   }));
 };
 
@@ -19397,7 +19467,7 @@ var BaseTileTitle = function () {
   if (isHalfSize && artworkUrl || !title) return null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title,
     numberOfLines: 1,
     testID: "tile-title"
@@ -19465,7 +19535,7 @@ var BaseTileContainer = function (_a) {
     onPress: handlePress,
     disabled: tile.type !== 'REWARD' && tile.type !== 'REWARD_CATEGORY' && !ctaLink,
     accessible: true,
-    accessibilityRole: "button",
+    role: "button",
     accessibilityLabel: "".concat(title).concat(ctaLink ? ' - Click to open' : ''),
     accessibilityState: {
       disabled: !ctaLink
@@ -19728,6 +19798,63 @@ function withTileFetching(WrappedComponent) {
   };
 }
 
+/**
+ * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
+ * @param tiles Array of tiles to sort
+ * @returns Sorted array of tiles
+ */
+var sortByPriority = function (tiles) {
+  return __spreadArray([], tiles, true).sort(function (a, b) {
+    // Sort by priority (higher priority first)
+    if (a.priority !== b.priority) {
+      return b.priority - a.priority;
+    }
+    // If priorities are equal, maintain original order
+    return tiles.indexOf(a) - tiles.indexOf(b);
+  });
+};
+/**
+ * Transforms locale to a locale that is supported by the browser
+ * @param locale Two-letter locale code to transform (en, fr, etc.)
+ * @returns Full locale string (e.g., en-GB, fr-FR)
+ */
+var transformLocale = function (locale) {
+  var localeMapping = {
+    en: 'en-GB',
+    fr: 'fr-FR',
+    es: 'es-ES',
+    de: 'de-DE',
+    it: 'it-IT',
+    pt: 'pt-PT',
+    us: 'en-US'
+  };
+  var languageCode = (locale !== null && locale !== void 0 ? locale : 'en').toLowerCase();
+  return localeMapping[languageCode] || 'en-GB';
+};
+/**
+ * Formats a date string to a localized date string based on user locale
+ * @param date Date string to format
+ * @param userLocale User's locale (defaults to 'en')
+ * @returns Formatted date string or fallback message
+ */
+var handleLastEarnedDate = function (date, userLocale) {
+  if (userLocale === void 0) {
+    userLocale = 'en';
+  }
+  if (!date) return 'Date not available';
+  try {
+    var formattedLocale = transformLocale(userLocale);
+    var dateObj = new Date(date);
+    if (isNaN(dateObj.getTime())) {
+      return 'Invalid Date';
+    }
+    return dateObj.toLocaleDateString(formattedLocale);
+  } catch (error) {
+    console.error('Error formatting date:', error);
+    return 'Invalid Date';
+  }
+};
+
 /**
  * Custom hook that returns the styles for the BadgeTile component.
  * Applies responsive styling based on the current device.
@@ -19795,9 +19922,10 @@ var BadgeTileDateEarned = function () {
   var _a = tileContext.configuration,
     count = _a.count,
     awardedDatePrefix = _a.awardedDatePrefix,
-    createdAt = _a.createdAt,
+    lastEarnedAt = _a.lastEarnedAt,
     badgeNotEarnedMessage = _a.badgeNotEarnedMessage,
-    type = _a.type;
+    type = _a.type,
+    locale = _a.locale;
   // Don't show for Latest type with count=0
   if (type === exports.BadgeTileType.Latest && count === 0) {
     return null;
@@ -19811,8 +19939,8 @@ var BadgeTileDateEarned = function () {
     backgroundColor: backgroundColor
   }];
   var textColor = getReadableTextColor(backgroundColor);
-  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(new Date(createdAt).toLocaleDateString());
-  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(new Date(createdAt).toLocaleDateString());
+  var displayText = count === 0 ? badgeNotEarnedMessage : "".concat(awardedDatePrefix, " ").concat(handleLastEarnedDate(lastEarnedAt, locale));
+  var accessibilityLabel = count === 0 ? 'Badge not yet earned' : "Badge earned on ".concat(handleLastEarnedDate(lastEarnedAt, locale));
   return /*#__PURE__*/React.createElement(View$2, {
     style: containerStyle,
     accessible: true,
@@ -20066,7 +20194,7 @@ var BannerTileDescription = function () {
   if (!description) return null;
   return /*#__PURE__*/React.createElement(Text, {
     style: styles.description,
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: description,
     testID: "banner-tile-description"
   }, description);
@@ -20091,7 +20219,7 @@ var BannerTileMedia = function (_a) {
   };
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.mediaContainer, containerStyle],
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Banner image".concat(title ? " for ".concat(title) : ''),
     testID: "banner-tile-media"
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
@@ -20118,7 +20246,7 @@ var BannerTileTitle = function () {
     variant: "title",
     testID: "banner-tile-title",
     style: styles.title,
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title
   }, title);
 };
@@ -20245,7 +20373,7 @@ var ContentTileMedia = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "content-tile-media",
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Image for ".concat(title)
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
@@ -20270,7 +20398,7 @@ var ContentTileSummary = function () {
   };
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: body,
     numberOfLines: getNumberOfLines(),
     testID: "content-tile-summary"
@@ -20292,7 +20420,7 @@ var ContentTileTitle = function () {
   };
   return /*#__PURE__*/React.createElement(Text, {
     variant: "title",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title,
     numberOfLines: 1,
     style: handleTitleWidth(),
@@ -20351,22 +20479,6 @@ var ContentTile = Object.assign(ContentTileRoot, {
 });
 var ContentTile$1 = withTileFetching(ContentTile);
 
-/**
- * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
- * @param tiles Array of tiles to sort
- * @returns Sorted array of tiles
- */
-var sortByPriority = function (tiles) {
-  return __spreadArray([], tiles, true).sort(function (a, b) {
-    // Sort by priority (higher priority first)
-    if (a.priority !== b.priority) {
-      return b.priority - a.priority;
-    }
-    // If priorities are equal, maintain original order
-    return tiles.indexOf(a) - tiles.indexOf(b);
-  });
-};
-
 exports.SectionType = void 0;
 (function (SectionType) {
   SectionType["Grid"] = "GRID";
@@ -21005,7 +21117,7 @@ var EmptyState = function (_a) {
   var message = _a.message;
   return /*#__PURE__*/React.createElement(View$2, {
     style: commonStyles.emptyContainer,
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: "Empty state: ".concat(message)
   }, /*#__PURE__*/React.createElement(Text$3, null, message));
 };
@@ -21107,6 +21219,14 @@ var useGroupContext = function () {
 /**
  * Custom hook to fetch and manage group data
  *
+ * This hook handles two distinct data fetching scenarios:
+ * 1. Initial fetch: Shows loading state while first loading data
+ * 2. Background refresh: Updates data silently without loading states
+ *
+ * The hook subscribes to GROUP_DATA_CHANGED events to refresh data
+ * when notified by the host application, ensuring UI remains responsive
+ * without showing loading indicators during refreshes.
+ *
  * @param {string} id - The ID of the group to fetch
  * @returns {Object} Object containing group data, loading state, and any error
  */
@@ -21121,27 +21241,22 @@ var useGroupData = function (id) {
   var _c = React.useState(true),
     isLoading = _c[0],
     setIsLoading = _c[1];
-  var fetchGroup = React.useCallback(function () {
-    var args_1 = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-      args_1[_i] = arguments[_i];
-    }
-    return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (showLoading) {
+  var _d = React.useState(false),
+    isInitialFetchDone = _d[0],
+    setIsInitialFetchDone = _d[1];
+  var initialFetch = React.useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
       var response, err_1;
-      if (showLoading === void 0) {
-        showLoading = true;
-      }
       return __generator(this, function (_a) {
         switch (_a.label) {
           case 0:
             if (!id || !sdk || !sdk.getGroupByID) {
               setError('Unable to fetch group data: invalid configuration');
               setIsLoading(false);
+              setIsInitialFetchDone(true);
               return [2 /*return*/];
             }
-            if (showLoading) {
-              setIsLoading(true);
-            }
+            setIsLoading(true);
             setError(null);
             _a.label = 1;
           case 1:
@@ -21161,9 +21276,8 @@ var useGroupData = function (id) {
             console.error('Error fetching group:', err_1);
             return [3 /*break*/, 5];
           case 4:
-            if (showLoading) {
-              setIsLoading(false);
-            }
+            setIsLoading(false);
+            setIsInitialFetchDone(true);
             return [7 /*endfinally*/];
           case 5:
             return [2 /*return*/];
@@ -21171,12 +21285,49 @@ var useGroupData = function (id) {
       });
     });
   }, [id, sdk]);
+  var silentRefresh = React.useCallback(function () {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var response, err_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!id || !sdk || !sdk.getGroupByID || !isInitialFetchDone) {
+              return [2 /*return*/];
+            }
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, sdk.refreshGroup(id)];
+          case 2:
+            response = _a.sent();
+            if (response && response.status === 'success' && response.data) {
+              setGroupData(response.data);
+            }
+            return [3 /*break*/, 4];
+          case 3:
+            err_2 = _a.sent();
+            console.error('Error during silent refresh:', err_2);
+            return [3 /*break*/, 4];
+          case 4:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, [id, sdk, isInitialFetchDone]);
   var refreshGroup = React.useCallback(function () {
-    return fetchGroup(false);
-  }, [fetchGroup]);
+    return silentRefresh();
+  }, [silentRefresh]);
   React.useEffect(function () {
-    fetchGroup(true);
-  }, [fetchGroup]);
+    if (sdk) {
+      initialFetch();
+      var unsubscribeGroup_1 = sdk.subscribeToDataChange('GROUP_DATA_CHANGED', function () {
+        silentRefresh();
+      });
+      return function () {
+        unsubscribeGroup_1();
+      };
+    }
+  }, [initialFetch, id, sdk, silentRefresh]);
   return {
     groupData: groupData,
     isLoading: isLoading,
@@ -21273,7 +21424,7 @@ var Group = function (_a) {
       groupData: groupData
     }
   }, /*#__PURE__*/React.createElement(View$2, {
-    "data-testid": "group-container"
+    testID: "group-container"
   }, /*#__PURE__*/React.createElement(GroupSections, null)));
 };
 
@@ -21555,7 +21706,7 @@ var PointsTileFormattedPoints = function () {
   var fullPointsText = "".concat(pointsPrefix).concat(calculatedPoints, " ").concat(pointsSuffix).trim();
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "points-tile-points",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: "Points value: ".concat(fullPointsText)
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
@@ -21591,7 +21742,7 @@ var PointsTileMedia = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "points-tile-media",
     style: styles.imageContainer,
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Points tile image for ".concat(title)
   }, /*#__PURE__*/React.createElement(Image$2, {
     source: {
@@ -21615,7 +21766,7 @@ var PointsTileTitle = function () {
   return /*#__PURE__*/React.createElement(Text, {
     variant: "eyebrow",
     testID: "points-tile-title",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: title
   }, title);
 };
@@ -21713,7 +21864,7 @@ var RewardCategoryHeader = function () {
       backgroundColor: theme.primary
     }],
     testID: "reward-category-header",
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: "Reward category: ".concat(name)
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.headerText, {
@@ -21745,7 +21896,7 @@ var RewardCategoryMedia = function () {
     },
     style: styles.background,
     alt: "Reward category image for ".concat(name),
-    accessibilityRole: "image"
+    role: "img"
   });
 };
 
@@ -21784,7 +21935,7 @@ var RewardTileChevron = function () {
     name: "ChevronRight",
     size: IS_MOBILE ? 16 : undefined,
     color: ((_a = theme === null || theme === void 0 ? void 0 : theme.derivedSurfaceText) === null || _a === void 0 ? void 0 : _a[20]) || '#000000',
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "View reward details"
   });
 };
@@ -21868,7 +22019,7 @@ var RewardTileMedia = function (_a) {
   return /*#__PURE__*/React.createElement(View$2, {
     style: [styles.imageContainer, containerStyle],
     testID: "reward-tile-media",
-    accessibilityRole: "image",
+    role: "img",
     accessibilityLabel: "Reward image for ".concat(name)
   }, /*#__PURE__*/React.createElement(ProgressiveImage, {
     source: {
@@ -21904,7 +22055,7 @@ var RewardTilePoints = function () {
   var accessibilityLabel = getPointsLabel('Reward points:', calculatedPoints, pointsPrefix, pointsSuffix);
   return /*#__PURE__*/React.createElement(View$2, {
     testID: "reward-tile-points",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: accessibilityLabel
   }, /*#__PURE__*/React.createElement(Row, {
     align: "center",
@@ -21935,7 +22086,7 @@ var RewardTileSummary = function () {
   if (!summary) return null;
   return /*#__PURE__*/React.createElement(Text, {
     variant: "body",
-    accessibilityRole: "text",
+    role: "article",
     accessibilityLabel: summary,
     testID: "reward-tile-summary"
   }, summary);
@@ -21961,7 +22112,7 @@ var RewardTileTitle = function () {
     variant: "title",
     ellipsizeMode: "tail",
     numberOfLines: 1,
-    accessibilityRole: "header",
+    role: "heading",
     accessibilityLabel: "Reward title: ".concat(name),
     testID: "reward-tile-title",
     style: handleTitleWidth()