@applicaster/zapp-react-native-ui-components 16.0.0-rc.80 → 16.0.0-rc.81

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -81,6 +81,8 @@ export type LeadingIconConfiguration = {
   enabled: boolean;
   /** Decides which icon will be displayed when enabled */
   actionType?: ButtonActionType;
+  /** Optional Studio / modal-blocks asset URI (overrides actionType mapping) */
+  asset?: string;
 };
 
 export type IconsConfiguration = {
@@ -170,7 +172,9 @@ function getTextTransformStyle(
 }
 
 function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
-  return leadingIcon.enabled && !!leadingIcon.actionType;
+  return (
+    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -268,7 +272,7 @@ function ButtonTitle({
 }
 
 type ButtonLeadingIconProps = {
-  actionType: ButtonActionType;
+  actionType?: ButtonActionType;
   configuration: IconsConfiguration;
 };
 
@@ -276,9 +280,17 @@ function ButtonLeadingIcon({
   actionType,
   configuration,
 }: ButtonLeadingIconProps) {
+  const asset =
+    configuration.leadingIcon.asset ||
+    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+
+  if (!asset) {
+    return null;
+  }
+
   return (
     <Image
-      source={{ uri: ACTION_ICON_ASSETS[actionType] }}
+      source={{ uri: asset }}
       style={{
         width: configuration.width,
         height: configuration.height,

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -56,6 +56,10 @@ export type BackgroundConfiguration = {
   defaultColor: string;
   focusedColor: string;
   cornerRadius: number;
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
 };
 
 export type ImageConfiguration = {
@@ -82,6 +86,20 @@ export type NowPlayingAssetConfiguration = {
   asset?: string;
 };
 
+export type CheckboxAssetsConfiguration = {
+  /** Unchecked multiSelect control (item.checkbox_asset). */
+  asset?: string;
+  /** Checked multiSelect control (item.checked_checkbox_asset). */
+  checkedAsset?: string;
+};
+
+export type ActionButtonAssetsConfiguration = {
+  /** Leading remove control on Edit Order rows. */
+  removeAsset?: string;
+  /** Trailing drag handle on Edit Order / queue rows. */
+  dragAsset?: string;
+};
+
 export type ItemConfiguration = {
   background: BackgroundConfiguration;
   image: ImageConfiguration;
@@ -89,6 +107,8 @@ export type ItemConfiguration = {
   nowPlayingLabel: LabelConfiguration;
   textLabel1: LabelConfiguration;
   textLabel2: LabelConfiguration;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
 export const DEFAULT_TEXT_LABEL_1_CONFIGURATION: LabelConfiguration = {
@@ -301,10 +321,13 @@ export function mapMenuItemToPlaylistData(
   const showSelectionWidget =
     behavior?.selectMode !== "none" && item.trailingButton !== "none";
 
+  const summary =
+    typeof item.summary === "string" ? item.summary.trim() : item.summary;
+
   return {
     imageUri: item.icon,
     textLabel1: item.title,
-    textLabel2: item.summary ?? "",
+    textLabel2: summary || "",
     trailingButton: showSelectionWidget
       ? item.trailingButton || ("multiSelect" as ItemButtonAction)
       : undefined,
@@ -340,10 +363,10 @@ function ItemContainer({
       style={({ pressed }) => ({
         backgroundColor: pressed ? background.focusedColor : bg,
         borderRadius: background.cornerRadius,
-        paddingTop: container.paddingTop,
-        paddingRight: container.paddingRight,
-        paddingBottom: container.paddingBottom,
-        paddingLeft: container.paddingLeft,
+        paddingTop: background.paddingTop ?? container.paddingTop,
+        paddingRight: background.paddingRight ?? container.paddingRight,
+        paddingBottom: background.paddingBottom ?? container.paddingBottom,
+        paddingLeft: background.paddingLeft ?? container.paddingLeft,
       })}
     >
       {children}
@@ -450,6 +473,8 @@ type ItemButtonProps = {
   focused?: boolean;
   onPress?: () => void;
   isSelected?: boolean;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
 function ItemButton({
@@ -457,6 +482,8 @@ function ItemButton({
   focused = false,
   onPress,
   isSelected = false,
+  checkboxAssets,
+  actionButtonAssets,
 }: ItemButtonProps) {
   const layout = BUTTON_LAYOUT_SPEC[action];
 
@@ -531,6 +558,19 @@ function ItemButton({
       }
 
       case "drag": {
+        if (actionButtonAssets?.dragAsset) {
+          return (
+            <Image
+              source={{ uri: actionButtonAssets.dragAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         return (
           <View
             style={{
@@ -565,6 +605,19 @@ function ItemButton({
       }
 
       case "remove": {
+        if (actionButtonAssets?.removeAsset) {
+          return (
+            <Image
+              source={{ uri: actionButtonAssets.removeAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         return (
           <View
             style={{
@@ -590,6 +643,23 @@ function ItemButton({
       }
 
       case "multiSelect": {
+        const studioAsset = isSelected
+          ? checkboxAssets?.checkedAsset
+          : checkboxAssets?.asset;
+
+        if (studioAsset) {
+          return (
+            <Image
+              source={{ uri: studioAsset }}
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+              }}
+              resizeMode="contain"
+            />
+          );
+        }
+
         if (!isSelected) {
           return (
             <View
@@ -666,6 +736,8 @@ type ItemButtonsProps = {
   onTrailingButtonPress?: () => void;
   isSelected?: boolean;
   renderHandle?: (element: React.ReactElement) => React.ReactElement;
+  checkboxAssets?: CheckboxAssetsConfiguration;
+  actionButtonAssets?: ActionButtonAssetsConfiguration;
 };
 
 function ItemButtons({
@@ -677,6 +749,8 @@ function ItemButtons({
   onTrailingButtonPress,
   isSelected = false,
   renderHandle,
+  checkboxAssets,
+  actionButtonAssets,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -691,6 +765,8 @@ function ItemButtons({
             focused={focusedLeadingButton}
             onPress={onLeadingButtonPress}
             isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
           />
           <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
         </>
@@ -704,6 +780,8 @@ function ItemButtons({
                 focused={focusedTrailingButton}
                 onPress={onTrailingButtonPress}
                 isSelected={isSelected}
+                checkboxAssets={checkboxAssets}
+                actionButtonAssets={actionButtonAssets}
               />
             )
           ) : (
@@ -712,6 +790,8 @@ function ItemButtons({
               focused={focusedTrailingButton}
               onPress={onTrailingButtonPress}
               isSelected={isSelected}
+              checkboxAssets={checkboxAssets}
+              actionButtonAssets={actionButtonAssets}
             />
           )
         ) : (
@@ -720,6 +800,8 @@ function ItemButtons({
             focused={focusedTrailingButton}
             onPress={onTrailingButtonPress}
             isSelected={isSelected}
+            checkboxAssets={checkboxAssets}
+            actionButtonAssets={actionButtonAssets}
           />
         )
       ) : null}
@@ -761,6 +843,8 @@ export function AudioPlayerTrackItem({
     textLabel2,
     nowPlayingLabel,
     nowPlayingAsset,
+    checkboxAssets,
+    actionButtonAssets,
   } = effectiveConfig;
 
   const container = resolveContainerSpec(image);
@@ -803,6 +887,8 @@ export function AudioPlayerTrackItem({
           onTrailingButtonPress={onTrailingButtonPress}
           isSelected={data.isSelected}
           renderHandle={renderHandle}
+          checkboxAssets={checkboxAssets}
+          actionButtonAssets={actionButtonAssets}
         />
       </View>
     </ItemContainer>

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -0,0 +1,230 @@
+import {
+  mergeItemConfiguration,
+  mergeButtonConfiguration,
+} from "../mergeStyles";
+
+const base = {
+  background: {
+    defaultColor: "transparent",
+    focusedColor: "rgba(62, 62, 62, 1)",
+    cornerRadius: 12,
+  },
+  image: {
+    width: 48,
+    height: 48,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    cornerRadius: 6,
+  },
+  nowPlayingAsset: {},
+  nowPlayingLabel: { fontColor: "#fff", fontSize: 12 },
+  textLabel1: { fontColor: "#fff", fontSize: 15 },
+  textLabel2: { fontColor: "#999", fontSize: 13 },
+};
+
+describe("mergeItemConfiguration background", () => {
+  it("applies Studio focus background to focusedColor", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "transparent" },
+        focused: { backgroundColor: "#FF3B30" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("transparent");
+    expect(merged.background.focusedColor).toBe("#FF3B30");
+  });
+
+  it("accepts focus alias bucket from parser output", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "transparent" },
+        focus: { backgroundColor: "#00FF66" },
+      },
+    });
+
+    expect(merged.background.focusedColor).toBe("#00FF66");
+  });
+
+  it("merges text label lineHeight from Studio keys", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      textLabel1: {
+        default: { fontSize: 28, lineHeight: 40 },
+      },
+    });
+
+    expect(merged.textLabel1.fontSize).toBe(28);
+    expect(merged.textLabel1.lineHeight).toBe(40);
+  });
+
+  it("merges background padding from Studio keys", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: {
+          backgroundColor: "#2E7D32",
+          paddingTop: 32,
+          paddingBottom: 32,
+          paddingLeft: 40,
+          paddingRight: 40,
+        },
+      },
+    });
+
+    expect(merged.background.paddingTop).toBe(32);
+    expect(merged.background.paddingBottom).toBe(32);
+    expect(merged.background.paddingLeft).toBe(40);
+    expect(merged.background.paddingRight).toBe(40);
+    // Default-only override must not steal the base focused highlight color.
+    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
+  });
+
+  it("preserves base focusedColor when only default background is set", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "#2E7D32" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
+  });
+
+  it("applies Studio checkbox assets onto checkboxAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      checkbox: {
+        default: {
+          asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+          checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+        },
+      },
+    });
+
+    expect(merged.checkboxAssets?.asset).toBe(
+      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB"
+    );
+
+    expect(merged.checkboxAssets?.checkedAsset).toBe(
+      "https://placehold.co/24x24/FFD60A/000000/png?text=CK"
+    );
+  });
+
+  it("applies Studio reorder/remove assets onto actionButtonAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      actionButtons: {
+        default: {
+          removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+          dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        },
+      },
+    });
+
+    expect(merged.actionButtonAssets?.removeAsset).toBe(
+      "https://placehold.co/24x24/00FF00/000000/png?text=RM"
+    );
+
+    expect(merged.actionButtonAssets?.dragAsset).toBe(
+      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH"
+    );
+  });
+});
+
+describe("mergeButtonConfiguration background", () => {
+  const buttonBase = {
+    background: {
+      defaultColor: "#FFFFFF",
+      focusedColor: "#E0E0E0",
+      inactiveColor: "#CCCCCC",
+      cornerRadius: 12,
+      paddingTop: 12,
+      paddingRight: 12,
+      paddingBottom: 12,
+      paddingLeft: 12,
+      horizontalGutter: 8,
+    },
+    title: {
+      fontColor: "#000000",
+      focusedFontColor: "#000000",
+      inactiveFontColor: "#666666",
+      iosFontFamily: "SFProText-Semibold",
+      androidFontFamily: "Roboto-Medium",
+      fontSize: 15,
+      lineHeight: 24,
+      iosLetterSpacing: 0,
+      androidLetterSpacing: 0,
+      textTransform: "default" as const,
+    },
+    icons: {
+      width: 24,
+      height: 24,
+      leadingIcon: { enabled: true },
+    },
+  };
+
+  it("applies Studio button focus background to focusedColor", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { backgroundColor: "#FFFFFF" },
+        focused: { backgroundColor: "#00FF00" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#FFFFFF");
+    expect(merged.background.focusedColor).toBe("#00FF00");
+  });
+
+  it("applies Studio button title lineHeight", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontColor: "#000000", fontSize: 15, lineHeight: 40 },
+      },
+    });
+
+    expect(merged.title.lineHeight).toBe(40);
+    expect(merged.title.fontSize).toBe(15);
+  });
+
+  it("applies Studio button background padding", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: {
+          backgroundColor: "#FFFFFF",
+          paddingTop: 32,
+          paddingRight: 20,
+          paddingBottom: 8,
+          paddingLeft: 4,
+        },
+      },
+    });
+
+    expect(merged.background.paddingTop).toBe(32);
+    expect(merged.background.paddingRight).toBe(20);
+    expect(merged.background.paddingBottom).toBe(8);
+    expect(merged.background.paddingLeft).toBe(4);
+    expect(merged.background.focusedColor).toBe("#E0E0E0");
+  });
+
+  it("preserves base button focusedColor when only default background is set", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { backgroundColor: "#ABCDEF" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#ABCDEF");
+    expect(merged.background.focusedColor).toBe("#E0E0E0");
+  });
+
+  it("applies Studio create-new leading icon asset", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      leadingIcon: {
+        default: {
+          asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        },
+      },
+    });
+
+    expect(merged.icons.leadingIcon.asset).toBe(
+      "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN"
+    );
+  });
+});

package/Components/ModalComponent/AudioPlayer/utils/mergeStyles.ts

@@ -3,6 +3,8 @@ import {
   ImageConfiguration as ItemImageConfiguration,
   LabelConfiguration as ItemLabelConfiguration,
   NowPlayingAssetConfiguration as ItemNowPlayingAssetConfiguration,
+  CheckboxAssetsConfiguration as ItemCheckboxAssetsConfiguration,
+  ActionButtonAssetsConfiguration as ItemActionButtonAssetsConfiguration,
   ItemConfiguration,
 } from "../Components/Item";
 import {
@@ -21,20 +23,39 @@ import {
 
 function mergeItemBackground(
   base: ItemBackgroundConfiguration,
-  override?: Record<string, any>
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
 ): ItemBackgroundConfiguration {
-  if (!override) return base;
+  if (!defaultOverride && !focusedOverride) return base;
+
+  // Only take focused color from the focused/pressed bucket (or legacy
+  // mis-parsed focus* aliases). Never fall back to default background —
+  // that would overwrite base.focusedColor whenever Studio only sets default.
+  const focusedColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusColor ??
+    defaultOverride?.focusBackgroundColor;
 
   return {
     ...base,
-    ...(override.backgroundColor
-      ? { defaultColor: override.backgroundColor }
+    ...(defaultOverride?.backgroundColor
+      ? { defaultColor: defaultOverride.backgroundColor }
       : {}),
-    ...(override.focusColor || override.backgroundColor
-      ? { focusedColor: override.focusColor || override.backgroundColor }
+    ...(focusedColor != null && focusedColor !== "" ? { focusedColor } : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
       : {}),
-    ...(override.borderRadius !== undefined
-      ? { cornerRadius: override.borderRadius }
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
       : {}),
   };
 }
@@ -69,6 +90,9 @@ function mergeItemLabel(
     ...base,
     ...(override.fontColor ? { fontColor: override.fontColor } : {}),
     ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
   };
 }
 
@@ -84,13 +108,45 @@ function mergeItemNowPlayingAsset(
   };
 }
 
+function mergeItemCheckboxAssets(
+  base: ItemCheckboxAssetsConfiguration,
+  override?: Record<string, any>
+): ItemCheckboxAssetsConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.asset ? { asset: override.asset } : {}),
+    ...(override.checkedAsset ? { checkedAsset: override.checkedAsset } : {}),
+  };
+}
+
+function mergeItemActionButtonAssets(
+  base: ItemActionButtonAssetsConfiguration,
+  override?: Record<string, any>
+): ItemActionButtonAssetsConfiguration {
+  if (!override) return base;
+
+  return {
+    ...base,
+    ...(override.removeAsset ? { removeAsset: override.removeAsset } : {}),
+    ...(override.dragAsset ? { dragAsset: override.dragAsset } : {}),
+  };
+}
+
 export function mergeItemConfiguration(
   base: ItemConfiguration,
   itemBlock?: Record<string, any>
 ): ItemConfiguration {
   if (!itemBlock) return base;
 
-  const bg = itemBlock.background?.default || itemBlock.background;
+  const bgDefault = itemBlock.background?.default || itemBlock.background;
+
+  const bgFocused =
+    itemBlock.background?.focused ||
+    itemBlock.background?.focus ||
+    itemBlock.background?.pressed;
+
   const img = itemBlock.image?.default || itemBlock.image;
   const label1 = itemBlock.textLabel1?.default || itemBlock.textLabel1;
   const label2 = itemBlock.textLabel2?.default || itemBlock.textLabel2;
@@ -101,14 +157,27 @@ export function mergeItemConfiguration(
   const npAsset =
     itemBlock.nowPlayingAsset?.default || itemBlock.nowPlayingAsset;
 
+  const checkbox = itemBlock.checkbox?.default || itemBlock.checkbox;
+
+  const actionButtons =
+    itemBlock.actionButtons?.default || itemBlock.actionButtons;
+
   return {
     ...base,
-    background: mergeItemBackground(base.background, bg),
+    background: mergeItemBackground(base.background, bgDefault, bgFocused),
     image: mergeItemImage(base.image, img),
     textLabel1: mergeItemLabel(base.textLabel1, label1),
     textLabel2: mergeItemLabel(base.textLabel2, label2),
     nowPlayingLabel: mergeItemLabel(base.nowPlayingLabel, npLabel),
     nowPlayingAsset: mergeItemNowPlayingAsset(base.nowPlayingAsset, npAsset),
+    checkboxAssets: mergeItemCheckboxAssets(
+      base.checkboxAssets || {},
+      checkbox
+    ),
+    actionButtonAssets: mergeItemActionButtonAssets(
+      base.actionButtonAssets || {},
+      actionButtons
+    ),
   };
 }
 
@@ -150,17 +219,37 @@ export function mergeHeaderConfiguration(
 
 function mergeButtonBackground(
   base: ButtonBackgroundConfiguration,
-  override?: Record<string, any>
+  defaultOverride?: Record<string, any>,
+  focusedOverride?: Record<string, any>
 ): ButtonBackgroundConfiguration {
-  if (!override) return base;
+  if (!defaultOverride && !focusedOverride) return base;
+
+  // Same as mergeItemBackground: do not use default background as focusedColor.
+  const focusedColor =
+    focusedOverride?.backgroundColor ??
+    defaultOverride?.focusColor ??
+    defaultOverride?.focusBackgroundColor;
 
   return {
     ...base,
-    ...(override.backgroundColor
-      ? { defaultColor: override.backgroundColor }
+    ...(defaultOverride?.backgroundColor
+      ? { defaultColor: defaultOverride.backgroundColor }
       : {}),
-    ...(override.borderRadius !== undefined
-      ? { cornerRadius: override.borderRadius }
+    ...(focusedColor != null && focusedColor !== "" ? { focusedColor } : {}),
+    ...(defaultOverride?.borderRadius !== undefined
+      ? { cornerRadius: defaultOverride.borderRadius }
+      : {}),
+    ...(defaultOverride?.paddingTop !== undefined
+      ? { paddingTop: defaultOverride.paddingTop }
+      : {}),
+    ...(defaultOverride?.paddingRight !== undefined
+      ? { paddingRight: defaultOverride.paddingRight }
+      : {}),
+    ...(defaultOverride?.paddingBottom !== undefined
+      ? { paddingBottom: defaultOverride.paddingBottom }
+      : {}),
+    ...(defaultOverride?.paddingLeft !== undefined
+      ? { paddingLeft: defaultOverride.paddingLeft }
       : {}),
   };
 }
@@ -175,6 +264,38 @@ function mergeButtonTitle(
     ...base,
     ...(override.fontColor ? { fontColor: override.fontColor } : {}),
     ...(override.fontSize !== undefined ? { fontSize: override.fontSize } : {}),
+    ...(override.lineHeight !== undefined
+      ? { lineHeight: override.lineHeight }
+      : {}),
+  };
+}
+
+function mergeButtonIcons(
+  base: ButtonConfiguration["icons"],
+  iconsOverride?: Record<string, any>,
+  leadingOverride?: Record<string, any>
+): ButtonConfiguration["icons"] {
+  if (!iconsOverride && !leadingOverride) return base;
+
+  const iconsDefault = iconsOverride?.default || iconsOverride;
+  const leadingDefault = leadingOverride?.default || leadingOverride;
+
+  return {
+    ...base,
+    ...(iconsDefault?.width !== undefined ? { width: iconsDefault.width } : {}),
+    ...(iconsDefault?.height !== undefined
+      ? { height: iconsDefault.height }
+      : {}),
+    leadingIcon: {
+      ...base.leadingIcon,
+      ...(leadingDefault?.enabled !== undefined
+        ? { enabled: leadingDefault.enabled }
+        : {}),
+      ...(leadingDefault?.actionType
+        ? { actionType: leadingDefault.actionType }
+        : {}),
+      ...(leadingDefault?.asset ? { asset: leadingDefault.asset } : {}),
+    },
   };
 }
 
@@ -185,15 +306,27 @@ export function mergeButtonConfiguration(
 ): ButtonConfiguration {
   if (!buttonBlock && !actionBlock) return base;
 
-  const bgOverride =
+  const bgDefault =
     buttonBlock?.background?.default || actionBlock?.background?.default;
 
+  const bgFocused =
+    buttonBlock?.background?.focused ||
+    buttonBlock?.background?.focus ||
+    actionBlock?.background?.focused ||
+    actionBlock?.background?.focus ||
+    buttonBlock?.background?.pressed ||
+    actionBlock?.background?.pressed;
+
   const titleOverride =
     buttonBlock?.title?.default || actionBlock?.title?.default;
 
+  const iconsOverride = buttonBlock?.icons || actionBlock?.icons;
+  const leadingOverride = buttonBlock?.leadingIcon || actionBlock?.leadingIcon;
+
   return {
     ...base,
-    background: mergeButtonBackground(base.background, bgOverride),
+    background: mergeButtonBackground(base.background, bgDefault, bgFocused),
     title: mergeButtonTitle(base.title, titleOverride),
+    icons: mergeButtonIcons(base.icons, iconsOverride, leadingOverride),
   };
 }

package/Components/ModalComponent/presets/dynamicCollectionCell.tsx

@@ -27,7 +27,7 @@ function mapMenuItemToDynamicData(
 
   const summary =
     typeof item?.summary === "string"
-      ? item.summary
+      ? item.summary.trim()
       : item?.summary != null
         ? String(item.summary)
         : "";

package/Components/ModalComponent/utils.ts

@@ -31,10 +31,15 @@ export function defaultItemProps(
 
   const bgDefault = blockItemStyle?.background?.default;
 
+  const bgFocused =
+    blockItemStyle?.background?.focused || blockItemStyle?.background?.focus;
+
   return {
     backgroundColor:
       bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
-    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    focusedBackgroundColor:
+      bgFocused?.backgroundColor ||
+      modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,

package/Components/OfflineHandler/hooks.ts

@@ -5,7 +5,6 @@ import {
   platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { usePlugins } from "@applicaster/zapp-react-native-redux";
 import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
@@ -19,17 +18,6 @@ const NETWORK_STATUS_LOCALIZATIONS_KEY = "network_status_localizations";
 
 const THEME_STORAGE_NAMESPACE = "quick-brick-theme";
 
-export const useNotificationHeight = () => {
-  const insets = useSafeAreaInsets();
-
-  const navBarHeight = platformSelect({ ios: 44, android: 56 });
-
-  const statusHeight = insets.top;
-  const notificationHeight = statusHeight + navBarHeight;
-
-  return { statusHeight, notificationHeight };
-};
-
 export function useNetworkStatusLocalizations() {
   const [storedLocalizations, setStoredLocalizations] = React.useState<Record<
     string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.80",
+  "version": "16.0.0-rc.81",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.80",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.80",
+    "@applicaster/applicaster-types": "16.0.0-rc.81",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.81",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.81",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.81",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",