@datlv-trustshop/shopify-inapp-components 0.2.6 → 0.2.8

package/dist/components/TopBanner.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { BannerItem } from "../types";
 export interface TopBannerProps {
     className?: string;
+    open?: boolean;
     onClose?: () => void;
     onAction?: (banner: BannerItem) => void;
     closable?: boolean;

package/dist/components/TopBanner.js

@@ -1,12 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useContext } from "react";
 import { Banner, Button, Text, BlockStack, InlineStack, } from "@shopify/polaris";
 import { ExternalIcon } from "@shopify/polaris-icons";
 import { useTopBanner } from "../hooks/useBanner";
 import { DashboardContext } from "../provider/DashboardProvider";
 const BANNER_MIN_HEIGHT = 100;
-const TopBannerSkeleton = ({ className }) => {
-    return (_jsxs("div", { className: className, style: { width: "100%" }, children: [_jsxs("div", { style: {
+const TopBannerSkeleton = ({ className, visible }) => {
+    // When not visible, return zero-space container
+    if (!visible) {
+        return (_jsx("div", { className: className, style: {
+                width: "100%",
+                height: 0,
+                overflow: "hidden",
+                position: "absolute",
+                pointerEvents: "none",
+            }, "aria-hidden": "true" }));
+    }
+    return (_jsxs("div", { className: className, style: {
+            width: "100%",
+        }, children: [_jsxs("div", { style: {
                     minHeight: `${BANNER_MIN_HEIGHT}px`,
                     padding: "16px",
                     borderRadius: "8px",
@@ -49,7 +61,7 @@ const TopBannerSkeleton = ({ className }) => {
         }
       ` })] }));
 };
-export const TopBanner = ({ className = "", onClose, onAction, closable = true, renderBanner, }) => {
+export const TopBanner = ({ className = "", open = true, onClose, onAction, closable = true, renderBanner, }) => {
     const context = useContext(DashboardContext);
     const isInitialized = context?.isInitialized ?? false;
     const isLoading = context?.state?.loading ?? true;
@@ -94,25 +106,55 @@ export const TopBanner = ({ className = "", onClose, onAction, closable = true,
             onAction?.(banner);
         }
     };
-    if (!dismissChecked) {
-        return _jsx(TopBannerSkeleton, { className: className });
-    }
-    if (isDismissed) {
-        // Banner was dismissed, don't show anything
-        return null;
-    }
-    if (!isInitialized || isLoading) {
-        return _jsx(TopBannerSkeleton, { className: className });
+    const shouldShow = open && !isDismissed;
+    const showSkeleton = shouldShow && (!dismissChecked || !isInitialized || isLoading);
+    const showBanner = shouldShow && dismissChecked && isInitialized && !isLoading && banner;
+    // Always render skeleton during loading, but control visibility
+    if (!dismissChecked || !isInitialized || isLoading) {
+        return _jsx(TopBannerSkeleton, { className: className, visible: showSkeleton });
     }
+    // No banner data available - render invisible container to maintain mount
     if (!banner) {
-        return null;
+        return (_jsx("div", { className: className, style: {
+                width: "100%",
+                height: 0,
+                overflow: "hidden",
+                position: "absolute",
+                pointerEvents: "none",
+            }, "aria-hidden": "true" }));
     }
+    // Custom render function with visibility control
     if (renderBanner) {
-        return (_jsx(_Fragment, { children: renderBanner(banner, {
+        // When not showing, render zero-space container
+        if (!showBanner) {
+            return (_jsx("div", { className: className, style: {
+                    width: "100%",
+                    height: 0,
+                    overflow: "hidden",
+                    position: "absolute",
+                    pointerEvents: "none",
+                }, "aria-hidden": "true" }));
+        }
+        return (_jsx("div", { style: {
+                opacity: 1,
+                visibility: "visible",
+                transition: "opacity 0.3s ease",
+            }, children: renderBanner(banner, {
                 onClose: handleClose,
                 onAction: handleAction,
             }) }));
     }
+    // Default banner render with visibility control
+    // When not showing, render zero-space container
+    if (!showBanner) {
+        return (_jsx("div", { className: className, style: {
+                width: "100%",
+                height: 0,
+                overflow: "hidden",
+                position: "absolute",
+                pointerEvents: "none",
+            }, "aria-hidden": "true" }));
+    }
     return (_jsx("div", { className: className, style: {
             width: "100%",
             minHeight: `${BANNER_MIN_HEIGHT}px`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datlv-trustshop/shopify-inapp-components",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "private": false,
   "description": "React TypeScript components for Shopify in-app dashboard content",
   "main": "dist/index.js",